140 files changed, 51915 insertions, 50736 deletions

diff --git a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js
index 7284e4db..b60ffb27 100644
--- a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js
+++ b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.directive.js
@@ -1,68 +1,68 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-(function () {

-   	/*

-   	 * Custom version of b2b-left-navigation directive:

-   	 * 1. Make parent menu a link if no child menus.

-   	 * 2. Add unique IDs to all items.

-   	 * 3. Hide icon if no child menus.

-   	 * 4. Add arrow toggle button.

-   	 * 5. Adjust the page on collapse/expand.

-   	 */

-    class B2BLeftMenu {

-        constructor($rootScope) {

-            this.templateUrl = 'app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html';

-            this.restrict = 'EA';

-            this.$rootScope = $rootScope;

-            this.link = this._link.bind(this);

-            this.scope = {

-            	menuData: '='

-            }

-        }

-        _link(scope) {

-        	scope.idx = -1;

-            scope.itemIdx = -1;

-            scope.navIdx = -1;

-            scope.toggleNav = function (val,link) {

-                if (val === scope.idx) {

-                    scope.idx = -1;

-                    return;

-                }

-                scope.idx = val;

-            };

-            /*New function for ECOMP sdk*/

-            scope.toggleDrawer = function(showmenu){

-            	scope.idx=-1; /*hide the sunmenus*/

-            	if(showmenu){

-        			document.getElementById('page-content').style.paddingLeft = "50px";

-        		}

-        		else

-        			document.getElementById('page-content').style.paddingLeft = "230px";           	

-            };

-            scope.liveLink = function (evt, val1, val2) {

-                scope.itemIdx = val1;

-                scope.navIdx = val2;

-                evt.stopPropagation();

-            };

-        }

-    }

-    angular.module('ecompApp').directive('leftMenuEcomp', ($rootScope) => new B2BLeftMenu($rootScope));

-})();

-

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+(function () {
+   	/*
+   	 * Custom version of b2b-left-navigation directive:
+   	 * 1. Make parent menu a link if no child menus.
+   	 * 2. Add unique IDs to all items.
+   	 * 3. Hide icon if no child menus.
+   	 * 4. Add arrow toggle button.
+   	 * 5. Adjust the page on collapse/expand.
+   	 */
+    class B2BLeftMenu {
+        constructor($rootScope) {
+            this.templateUrl = 'app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html';
+            this.restrict = 'EA';
+            this.$rootScope = $rootScope;
+            this.link = this._link.bind(this);
+            this.scope = {
+            	menuData: '='
+            }
+        }
+        _link(scope) {
+        	scope.idx = -1;
+            scope.itemIdx = -1;
+            scope.navIdx = -1;
+            scope.toggleNav = function (val,link) {
+                if (val === scope.idx) {
+                    scope.idx = -1;
+                    return;
+                }
+                scope.idx = val;
+            };
+            /*New function for ECOMP sdk*/
+            scope.toggleDrawer = function(showmenu){
+            	scope.idx=-1; /*hide the sunmenus*/
+            	if(showmenu){
+        			document.getElementById('page-content').style.paddingLeft = "50px";
+        		}
+        		else
+        			document.getElementById('page-content').style.paddingLeft = "230px";           	
+            };
+            scope.liveLink = function (evt, val1, val2) {
+                scope.itemIdx = val1;
+                scope.navIdx = val2;
+                evt.stopPropagation();
+            };
+        }
+    }
+    angular.module('ecompApp').directive('leftMenuEcomp', ($rootScope) => new B2BLeftMenu($rootScope));
+})();
+
diff --git a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less
index 91a10aa2..c6e2d6d3 100644
--- a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less
+++ b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.less
@@ -1,4 +1,4 @@
-.b2b-nav-menu .b2b-subnav-container li{

-	background-color:white;

-	z-index:10;

+.b2b-nav-menu .b2b-subnav-container li{
+	background-color:white;
+	z-index:10;
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html
index 240c8c9b..9fa796c7 100644
--- a/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html
+++ b/ecomp-portal-FE-common/client/app/directives/b2b-leftnav-ext/b2b-leftnav-ext.tpl.html
@@ -1,62 +1,62 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="b2b-nav-menu" id="left-menu-main-div" ng-init="(showmenu = true)" ng-class="{false: 'left-menu-collapsed'}[showmenu]">

-	<div class="b2b-subnav-container" id="left-menu-subnav-container">

-		<ul class="b2b-subnav-content" id="left-menu-subnav-content">

-			<li id="left-menu-subnav-content-li">

-				<div ng-class="{true: 'leftmenu-arrow-expand', false: 'leftmenu-arrow-collapse'}[showmenu]"	id="left-menu-arrow-toggle-div">

-					<a ng-click="toggleDrawer(showmenu);(showmenu = !showmenu) " class="text-right" id="left-menu-arrow-toggle-anchor"> 

-						<i ng-class="{true: 'icon-controls-left', false: 'icon-controls-right'}[showmenu]" id="left-menuf-arrow-toggle-icon">&nbsp;</i>

-					</a>

-				</div>

-			</li>

-			<li ng-repeat="menu in menuData" ui-sref="{{menu.state}}" id="left-menu-li-{{menu.name.split(' ').join('-')}}">

-				<span ng-class="{true: 'menu-icon', false: 'menu-icon-collapse'}[showmenu]"	

-					id="left-menu-span-{{menu.name.split(' ').join('-')}}"> 

-					<span class="{{menu.imageSrc}}" id="icon-image-{{menu.name.split(' ').join('-')}}"></span>

-				</span> 

-				<a ng-class="{expand: isOpen($index)}" ng-if="showmenu" title="{{menu.name}}"

-					aria-label="{{menu.name}}" aria-expanded="{{(idx==$index)?true:false;}}"

-					href="javascript:void(0);" id="parent-item-{{menu.name.split(' ').join('-')}}">

-					{{menu.name}} 

-					<i aria-hidden="true" ng-if="(menu.menuItems.length > 0)"

-						class="b2b-icon-primary-plus-minus"

-						ng-class="idx==$index ? 'icon-primary-expanded' : 'icon-primary-collapsed'"></i>

-				</a>

-				<div role="region" aria-hidden="{{(isOpen($index))?false:true;}}" 

-					id="left-menu-child-div-{{menu.name.split(' ').join('-')}}">

-					<ul ng-class="{expand: idx==$index}"

-						id="left-menu-child-ul-{{menu.name.split(' ').join('-')}}">

-						<li ng-repeat="menuItem in menu.menuItems"

-							ng-click="liveLink($event, $index, $parent.$index)"

-							id="left-menu-child-li-{{menuItem.name.split(' ').join('-')}}-{{menu.name.split(' ').join('-')}}">

-							<a ng-class="{active: itemIdx==$index && navIdx==$parent.$index}"

-								aria-hidden="{{!(idx==$parent.$index)}}" aria-label="{{menuItem.name}}" 

-								title="{{menuItem.name}}" href="{{menuItem.href}}"

-								tabindex="{{(idx==$parent.$index)?0:-1;}}"

-								id="child-item-{{menuItem.name.split(' ').join('-')}}">{{menuItem.name}}

-							</a>

-						</li>

-					</ul>

-				</div>

-			</li>

-		</ul>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="b2b-nav-menu" id="left-menu-main-div" ng-init="(showmenu = true)" ng-class="{false: 'left-menu-collapsed'}[showmenu]">
+	<div class="b2b-subnav-container" id="left-menu-subnav-container">
+		<ul class="b2b-subnav-content" id="left-menu-subnav-content">
+			<li id="left-menu-subnav-content-li">
+				<div ng-class="{true: 'leftmenu-arrow-expand', false: 'leftmenu-arrow-collapse'}[showmenu]"	id="left-menu-arrow-toggle-div">
+					<a ng-click="toggleDrawer(showmenu);(showmenu = !showmenu) " class="text-right" id="left-menu-arrow-toggle-anchor"> 
+						<i ng-class="{true: 'icon-controls-left', false: 'icon-controls-right'}[showmenu]" id="left-menuf-arrow-toggle-icon">&nbsp;</i>
+					</a>
+				</div>
+			</li>
+			<li ng-repeat="menu in menuData" ui-sref="{{menu.state}}" id="left-menu-li-{{menu.name.split(' ').join('-')}}">
+				<span ng-class="{true: 'menu-icon', false: 'menu-icon-collapse'}[showmenu]"	
+					id="left-menu-span-{{menu.name.split(' ').join('-')}}"> 
+					<span class="{{menu.imageSrc}}" id="icon-image-{{menu.name.split(' ').join('-')}}"></span>
+				</span> 
+				<a ng-class="{expand: isOpen($index)}" ng-if="showmenu" title="{{menu.name}}"
+					aria-label="{{menu.name}}" aria-expanded="{{(idx==$index)?true:false;}}"
+					href="javascript:void(0);" id="parent-item-{{menu.name.split(' ').join('-')}}">
+					{{menu.name}} 
+					<i aria-hidden="true" ng-if="(menu.menuItems.length > 0)"
+						class="b2b-icon-primary-plus-minus"
+						ng-class="idx==$index ? 'icon-primary-expanded' : 'icon-primary-collapsed'"></i>
+				</a>
+				<div role="region" aria-hidden="{{(isOpen($index))?false:true;}}" 
+					id="left-menu-child-div-{{menu.name.split(' ').join('-')}}">
+					<ul ng-class="{expand: idx==$index}"
+						id="left-menu-child-ul-{{menu.name.split(' ').join('-')}}">
+						<li ng-repeat="menuItem in menu.menuItems"
+							ng-click="liveLink($event, $index, $parent.$index)"
+							id="left-menu-child-li-{{menuItem.name.split(' ').join('-')}}-{{menu.name.split(' ').join('-')}}">
+							<a ng-class="{active: itemIdx==$index && navIdx==$parent.$index}"
+								aria-hidden="{{!(idx==$parent.$index)}}" aria-label="{{menuItem.name}}" 
+								title="{{menuItem.name}}" href="{{menuItem.href}}"
+								tabindex="{{(idx==$parent.$index)?0:-1;}}"
+								id="child-item-{{menuItem.name.split(' ').join('-')}}">{{menuItem.name}}
+							</a>
+						</li>
+					</ul>
+				</div>
+			</li>
+		</ul>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js b/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js
index bfedcd75..bab1fcec 100644
--- a/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js
+++ b/ecomp-portal-FE-common/client/app/directives/file-upload/file-upload.directive.js
@@ -1,39 +1,39 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by Rui Lu on 12/12/16.

- */

-'use strict';

-

-angular.module('ecompApp').directive('fileModel', [ '$parse', function($parse) {

-	return {

-		restrict : 'A',

-		link : function(scope, element, attrs) {

-			var model = $parse(attrs.fileModel);

-			var modelSetter = model.assign;

-

-			element.bind('change', function() {

-				scope.$apply(function() {

-					modelSetter(scope, element[0].files[0]);

-				});

-			});

-		}

-	};

-} ]);

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by Rui Lu on 12/12/16.
+ */
+'use strict';
+
+angular.module('ecompApp').directive('fileModel', [ '$parse', function($parse) {
+	return {
+		restrict : 'A',
+		link : function(scope, element, attrs) {
+			var model = $parse(attrs.fileModel);
+			var modelSetter = model.assign;
+
+			element.bind('change', function() {
+				scope.$apply(function() {
+					modelSetter(scope, element[0].files[0]);
+				});
+			});
+		}
+	};
+} ]);
diff --git a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js
index 98979e2c..e481f4be 100644
--- a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js
+++ b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.directive.js
@@ -1,90 +1,90 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 1/28/16.

- */

-(function () {

-    class LeftMenu {

-        constructor($rootScope, userbarUpdateService,notificationService,auditLogService) {

-            this.templateUrl = 'app/directives/left-menu/left-menu.tpl.html';

-            this.restrict = 'AE';

-            this.$rootScope = $rootScope;

-            this.userbarUpdateService = userbarUpdateService;

-            this.notificationService = notificationService;

-            this.auditLogService= auditLogService;

-            this.link = this._link.bind(this);

-            this.scope = {

-                sidebarModel: '='

-            }

-        }

-        _link(scope) {

-            let init = () => {

-                scope.isOpen = true;

-            };

-

-            init();

-

-            scope.refreshOnlineUsers = () => {

-            	this.userbarUpdateService.setRefreshCount(this.userbarUpdateService.maxCount);

-            };

-            

-            scope.refreshNotification = () => {

-            	this.notificationService.setRefreshCount(this.notificationService.maxCount);

-            };

-

-            scope.toggleSidebar = () => {

-                scope.isOpen = !scope.isOpen;

-                if(scope.isOpen==true)

-                	setContentPos(1);

-                else

-                	setContentPos(0);

-            };

-            scope.auditLog =(name) => {         

-        		this.auditLogService.storeAudit(1,'leftMenu',name);

-        	};

-

-

-            scope.isBrowserInternetExplorer = false;

-            scope.browserName = bowser.name;

-

-            if (bowser.msie || bowser.msedge) {

-                scope.isBrowserInternetExplorer = true;

-            } else {

-                scope.isBrowserInternetExplorer = false;

-            }

-

-

-            this.$rootScope.$on('$stateChangeStart', () => {

-                scope.isOpen = true;

-            });

-        }

-    }

-    angular.module('ecompApp').directive('leftMenu', ($rootScope,userbarUpdateService,notificationService,auditLogService) => new LeftMenu($rootScope,userbarUpdateService,notificationService,auditLogService));

-})();

-

-function setContentPos(open) {

-	// console.log("*******************************************");

-	if(open==1){

-		$("#page-content" ).css( "padding-left", "210px" );

-	}else{

-		$("#page-content" ).css( "padding-left", "50px" );

-	}

-

-}

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 1/28/16.
+ */
+(function () {
+    class LeftMenu {
+        constructor($rootScope, userbarUpdateService,notificationService,auditLogService) {
+            this.templateUrl = 'app/directives/left-menu/left-menu.tpl.html';
+            this.restrict = 'AE';
+            this.$rootScope = $rootScope;
+            this.userbarUpdateService = userbarUpdateService;
+            this.notificationService = notificationService;
+            this.auditLogService= auditLogService;
+            this.link = this._link.bind(this);
+            this.scope = {
+                sidebarModel: '='
+            }
+        }
+        _link(scope) {
+            let init = () => {
+                scope.isOpen = true;
+            };
+
+            init();
+
+            scope.refreshOnlineUsers = () => {
+            	this.userbarUpdateService.setRefreshCount(this.userbarUpdateService.maxCount);
+            };
+            
+            scope.refreshNotification = () => {
+            	this.notificationService.setRefreshCount(this.notificationService.maxCount);
+            };
+
+            scope.toggleSidebar = () => {
+                scope.isOpen = !scope.isOpen;
+                if(scope.isOpen==true)
+                	setContentPos(1);
+                else
+                	setContentPos(0);
+            };
+            scope.auditLog =(name) => {         
+        		this.auditLogService.storeAudit(1,'leftMenu',name);
+        	};
+
+
+            scope.isBrowserInternetExplorer = false;
+            scope.browserName = bowser.name;
+
+            if (bowser.msie || bowser.msedge) {
+                scope.isBrowserInternetExplorer = true;
+            } else {
+                scope.isBrowserInternetExplorer = false;
+            }
+
+
+            this.$rootScope.$on('$stateChangeStart', () => {
+                scope.isOpen = true;
+            });
+        }
+    }
+    angular.module('ecompApp').directive('leftMenu', ($rootScope,userbarUpdateService,notificationService,auditLogService) => new LeftMenu($rootScope,userbarUpdateService,notificationService,auditLogService));
+})();
+
+function setContentPos(open) {
+	// console.log("*******************************************");
+	if(open==1){
+		$("#page-content" ).css( "padding-left", "210px" );
+	}else{
+		$("#page-content" ).css( "padding-left", "50px" );
+	}
+
+}
diff --git a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html
index 4478bc8f..f43f75ad 100644
--- a/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html
+++ b/ecomp-portal-FE-common/client/app/directives/left-menu/left-menu.tpl.html
@@ -1,22 +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.

-  ================================================================================

-  -->

- <div class="left-menu-div">

- 	<left-menu-ecomp menu-data="sidebarModel.navItems"></left-menu-ecomp>

- </div> 

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+ <div class="left-menu-div">
+ 	<left-menu-ecomp menu-data="sidebarModel.navItems"></left-menu-ecomp>
+ </div> 
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js
index fb56d438..f73793be 100644
--- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js
@@ -1,113 +1,113 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/21/15.+

- */

-angular.module('ecompApp')

-    .directive('multipleSelect', function ($window) {

-        return {

-            restrict: 'E',

-            templateUrl: 'app/directives/multiple-select/multiple-select.tpl.html',

-            scope: {

-                onChange: '&',

-                nameAttr: '@',

-                valueAttr: '@',

-                ngModel: '=',

-                placeholder: '@',

-                uniqueData: '@?',

-                onDropdownClose: '&?'

-            },

-            link: function(scope, elm, attrs){

-                scope.isExpanded = false;

-

-                scope.isDisabled = !scope.ngModel || !scope.ngModel.length;

-                scope.$watch('ngModel', function(newVal){

-                    scope.isDisabled = !newVal || !newVal.length;

-                });

-

-

-                let startListening = () => {

-                    console.log('listening on $window!');

-                    angular.element($window).on('click', function () {

-                        stopListening();

-                    });

-

-                    angular.element('multiple-select').on('click', function(e) {

-                        if($(e.target).closest('multiple-select')[0].attributes['unique-data'].value === attrs.uniqueData){

-                            console.log('ignored that..:', attrs.uniqueData);

-                            e.stopPropagation();

-                        }else{

-                            console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);

-                            scope.isExpanded = false;

-                            scope.$applyAsync();

-                        }

-                    });

-                };

-

-                let stopListening = function() {

-                    if(scope.onDropdownClose){

-                        scope.onDropdownClose();

-                    }

-                    scope.isExpanded = false;

-                    scope.$applyAsync();

-                    console.log('stop listening on $window and multiple-element!');

-                    angular.element($window).off('click');

-                    angular.element('multiple-select').off('click');

-                };

-

-                scope.showCheckboxes = function(){

-                    scope.isExpanded = !scope.isExpanded;

-                    if(scope.isExpanded){

-                        startListening();

-                    }else{

-                        stopListening();

-                        if(scope.onDropdownClose){

-                            scope.onDropdownClose();

-                        }

-                    }

-                };

-

-                scope.onCheckboxClicked = function() {

-                    console.log('checkbox clicked; unique data: ',attrs.uniqueData);

-                    if(scope.onChange) {

-                        scope.onChange();

-                    }

-                }

-

-                scope.getTitle = function(){

-                    var disp = '';

-                    if(!scope.ngModel || !scope.ngModel.length) {

-                        return disp;

-                    }

-                    scope.ngModel.forEach(function(item){

-                        if(item[scope.valueAttr]){

-                            disp+=item[scope.nameAttr] + ',';

-                        }

-                    });

-                    if(disp!==''){

-                        disp = disp.slice(0,disp.length-1);

-                    }else{

-                        disp = scope.placeholder;

-                    }

-                    return disp;

-                };

-            }

-        };

-    });

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/21/15.+
+ */
+angular.module('ecompApp')
+    .directive('multipleSelect', function ($window) {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/directives/multiple-select/multiple-select.tpl.html',
+            scope: {
+                onChange: '&',
+                nameAttr: '@',
+                valueAttr: '@',
+                ngModel: '=',
+                placeholder: '@',
+                uniqueData: '@?',
+                onDropdownClose: '&?'
+            },
+            link: function(scope, elm, attrs){
+                scope.isExpanded = false;
+
+                scope.isDisabled = !scope.ngModel || !scope.ngModel.length;
+                scope.$watch('ngModel', function(newVal){
+                    scope.isDisabled = !newVal || !newVal.length;
+                });
+
+
+                let startListening = () => {
+                    console.log('listening on $window!');
+                    angular.element($window).on('click', function () {
+                        stopListening();
+                    });
+
+                    angular.element('multiple-select').on('click', function(e) {
+                        if($(e.target).closest('multiple-select')[0].attributes['unique-data'].value === attrs.uniqueData){
+                            console.log('ignored that..:', attrs.uniqueData);
+                            e.stopPropagation();
+                        }else{
+                            console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);
+                            scope.isExpanded = false;
+                            scope.$applyAsync();
+                        }
+                    });
+                };
+
+                let stopListening = function() {
+                    if(scope.onDropdownClose){
+                        scope.onDropdownClose();
+                    }
+                    scope.isExpanded = false;
+                    scope.$applyAsync();
+                    console.log('stop listening on $window and multiple-element!');
+                    angular.element($window).off('click');
+                    angular.element('multiple-select').off('click');
+                };
+
+                scope.showCheckboxes = function(){
+                    scope.isExpanded = !scope.isExpanded;
+                    if(scope.isExpanded){
+                        startListening();
+                    }else{
+                        stopListening();
+                        if(scope.onDropdownClose){
+                            scope.onDropdownClose();
+                        }
+                    }
+                };
+
+                scope.onCheckboxClicked = function() {
+                    console.log('checkbox clicked; unique data: ',attrs.uniqueData);
+                    if(scope.onChange) {
+                        scope.onChange();
+                    }
+                }
+
+                scope.getTitle = function(){
+                    var disp = '';
+                    if(!scope.ngModel || !scope.ngModel.length) {
+                        return disp;
+                    }
+                    scope.ngModel.forEach(function(item){
+                        if(item[scope.valueAttr]){
+                            disp+=item[scope.nameAttr] + ',';
+                        }
+                    });
+                    if(disp!==''){
+                        disp = disp.slice(0,disp.length-1);
+                    }else{
+                        disp = scope.placeholder;
+                    }
+                    return disp;
+                };
+            }
+        };
+    });
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html
index 3896bf2d..73136fe1 100644
--- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.tpl.html
@@ -1,36 +1,36 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div id="app-multilple-select" class="multiple-select">

-    <div class="selectBox"

-    	 id="app-select-{{getTitle()}}"

-         ng-click="isDisabled || showCheckboxes()"

-         title="{{getTitle()}}"

-         ng-bind="getTitle()"

-         ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div>

-

-    <div class="checkboxes" ng-show="isExpanded">

-        <div ng-repeat="item in ngModel" id="{{item[nameAttr]}}-checkbox-div">

-            <label id="{{item[nameAttr]}}-checkbox-label">

-                <input type="checkbox" id="{{item[nameAttr]}}-checkbox" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">

-                {{item[nameAttr]}}

-            </label>

-        </div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div id="app-multilple-select" class="multiple-select">
+    <div class="selectBox"
+    	 id="app-select-{{getTitle()}}"
+         ng-click="isDisabled || showCheckboxes()"
+         title="{{getTitle()}}"
+         ng-bind="getTitle()"
+         ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div>
+
+    <div class="checkboxes" ng-show="isExpanded">
+        <div ng-repeat="item in ngModel" id="{{item[nameAttr].split(' ').join('-')}}-checkbox-div">
+            <label id="{{item[nameAttr].split(' ').join('-')}}-checkbox-label">
+                <input type="checkbox" id="{{item[nameAttr].split(' ').join('-')}}-checkbox" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">
+                {{item[nameAttr]}}
+            </label>
+        </div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js
index e0471631..f49848ce 100644
--- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.directive.js
@@ -1,113 +1,113 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/21/15.+

- */

-angular.module('ecompApp')

-    .directive('multipleSelect2', function ($window) {

-        return {

-            restrict: 'E',

-            templateUrl: 'app/directives/multiple-select/multiple-select2.tpl.html',

-            scope: {

-                onChange: '&',

-                nameAttr: '@',

-                valueAttr: '@',

-                ngModel: '=',

-                placeholder: '@',

-                uniqueData: '@?',

-                onDropdownClose: '&?'

-            },

-            link: function(scope, elm, attrs){

-                scope.isExpanded = false;

-

-                scope.isDisabled = !scope.ngModel || !scope.ngModel.length;

-                scope.$watch('ngModel', function(newVal){

-                    scope.isDisabled = !newVal || !newVal.length;

-                });

-

-

-                let startListening = () => {

-                    console.log('listening on $window!');

-                    angular.element($window).on('click', function () {

-                        stopListening();

-                    });

-

-                    angular.element('multiple-select2').on('click', function(e) {

-                        if($(e.target).closest('multiple-select2')[0].attributes['unique-data'].value === attrs.uniqueData){

-                            console.log('ignored that..:', attrs.uniqueData);

-                            e.stopPropagation();

-                        }else{

-                            console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);

-                            scope.isExpanded = false;

-                            scope.$applyAsync();

-                        }

-                    });

-                };

-

-                let stopListening = function() {

-                    if(scope.onDropdownClose){

-                        scope.onDropdownClose();

-                    }

-                    scope.isExpanded = false;

-                    scope.$applyAsync();

-                    console.log('stop listening on $window and multiple-element!');

-                    angular.element($window).off('click');

-                    angular.element('multiple-select2').off('click');

-                };

-

-                scope.showCheckboxes = function(){

-                    scope.isExpanded = !scope.isExpanded;

-                    if(scope.isExpanded){

-                        startListening();

-                    }else{

-                        stopListening();

-                        if(scope.onDropdownClose){

-                            scope.onDropdownClose();

-                        }

-                    }

-                };

-

-                scope.onCheckboxClicked = function() {

-                    console.log('checkbox clicked; unique data: ',attrs.uniqueData);

-                    if(scope.onChange) {

-                        scope.onChange();

-                    }

-                }

-

-                scope.getTitle = function(){

-                    var disp = '';

-                    if(!scope.ngModel || !scope.ngModel.length) {

-                        return disp;

-                    }

-                    scope.ngModel.forEach(function(item){

-                        if(item[scope.valueAttr]){

-                            disp+=item[scope.nameAttr] + ',';

-                        }

-                    });

-                    if(disp!==''){

-                        disp = disp.slice(0,disp.length-1);

-                    }else{

-                        disp = scope.placeholder;

-                    }

-                    return disp;

-                };

-            }

-        };

-    });

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/21/15.+
+ */
+angular.module('ecompApp')
+    .directive('multipleSelect2', function ($window) {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/directives/multiple-select/multiple-select2.tpl.html',
+            scope: {
+                onChange: '&',
+                nameAttr: '@',
+                valueAttr: '@',
+                ngModel: '=',
+                placeholder: '@',
+                uniqueData: '@?',
+                onDropdownClose: '&?'
+            },
+            link: function(scope, elm, attrs){
+                scope.isExpanded = false;
+
+                scope.isDisabled = !scope.ngModel || !scope.ngModel.length;
+                scope.$watch('ngModel', function(newVal){
+                    scope.isDisabled = !newVal || !newVal.length;
+                });
+
+
+                let startListening = () => {
+                    console.log('listening on $window!');
+                    angular.element($window).on('click', function () {
+                        stopListening();
+                    });
+
+                    angular.element('multiple-select2').on('click', function(e) {
+                        if($(e.target).closest('multiple-select2')[0].attributes['unique-data'].value === attrs.uniqueData){
+                            console.log('ignored that..:', attrs.uniqueData);
+                            e.stopPropagation();
+                        }else{
+                            console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);
+                            scope.isExpanded = false;
+                            scope.$applyAsync();
+                        }
+                    });
+                };
+
+                let stopListening = function() {
+                    if(scope.onDropdownClose){
+                        scope.onDropdownClose();
+                    }
+                    scope.isExpanded = false;
+                    scope.$applyAsync();
+                    console.log('stop listening on $window and multiple-element!');
+                    angular.element($window).off('click');
+                    angular.element('multiple-select2').off('click');
+                };
+
+                scope.showCheckboxes = function(){
+                    scope.isExpanded = !scope.isExpanded;
+                    if(scope.isExpanded){
+                        startListening();
+                    }else{
+                        stopListening();
+                        if(scope.onDropdownClose){
+                            scope.onDropdownClose();
+                        }
+                    }
+                };
+
+                scope.onCheckboxClicked = function() {
+                    console.log('checkbox clicked; unique data: ',attrs.uniqueData);
+                    if(scope.onChange) {
+                        scope.onChange();
+                    }
+                }
+
+                scope.getTitle = function(){
+                    var disp = '';
+                    if(!scope.ngModel || !scope.ngModel.length) {
+                        return disp;
+                    }
+                    scope.ngModel.forEach(function(item){
+                        if(item[scope.valueAttr]){
+                            disp+=item[scope.nameAttr] + ',';
+                        }
+                    });
+                    if(disp!==''){
+                        disp = disp.slice(0,disp.length-1);
+                    }else{
+                        disp = scope.placeholder;
+                    }
+                    return disp;
+                };
+            }
+        };
+    });
diff --git a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html
index 34a6cea0..80c03cd3 100644
--- a/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html
+++ b/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select2.tpl.html
@@ -1,36 +1,36 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div id="app-multilple-select" class="multiple-select2">

-    <div class="selectBox"

-    	 id="app-select-{{getTitle()}}"

-         ng-click="isDisabled || showCheckboxes()"

-         title="{{getTitle()}}"

-         ng-bind="getTitle()"

-         ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div>

-

-    <div class="checkboxes" ng-show="isExpanded" >

-        <div ng-repeat="item in ngModel" id="{{item[nameAttr]}}-checkbox-div">

-            <label id="{{item[nameAttr]}}-checkbox-label">

-                <input type="checkbox" id="{{item[nameAttr]}}-checkbox" disabled="disabled" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">

-                {{item[nameAttr]}}

-            </label>

-        </div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div id="app-multilple-select" class="multiple-select2">
+    <div class="selectBox"
+    	 id="app-select-{{getTitle()}}"
+         ng-click="isDisabled || showCheckboxes()"
+         title="{{getTitle()}}"
+         ng-bind="getTitle()"
+         ng-class="{open: isExpanded, closed: !isExpanded, disabled: isDisabled}"></div>
+
+    <div class="checkboxes" ng-show="isExpanded" >
+        <div ng-repeat="item in ngModel" id="{{item[nameAttr].split(' ').join('-')}}-checkbox-div">
+            <label id="{{item[nameAttr].split(' ').join('-')}}-checkbox-label">
+                <input type="checkbox" id="{{item[nameAttr].split(' ').join('-')}}-checkbox" disabled="disabled" ng-model="item[valueAttr]" ng-change="onCheckboxClicked()">
+                {{item[nameAttr]}}
+            </label>
+        </div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js b/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js
index b8af5ebe..d6bf3d6d 100644
--- a/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js
+++ b/ecomp-portal-FE-common/client/app/directives/right-click/ng-right-click-directive.js
@@ -1,32 +1,32 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-angular.module('ecompApp').

-    directive('ngRightClick', function($parse) {

-        return function(scope, element, attrs)

-        {

-        var fn = $parse(attrs.ngRightClick);

-        element.bind('contextmenu', function(event) {

-            scope.$apply(function() {

-                event.preventDefault();

-                fn(scope, {$event:event});

-            });

-        });

-        };

-    });

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+angular.module('ecompApp').
+    directive('ngRightClick', function($parse) {
+        return function(scope, element, attrs)
+        {
+        var fn = $parse(attrs.ngRightClick);
+        element.bind('contextmenu', function(event) {
+            scope.$apply(function() {
+                event.preventDefault();
+                fn(scope, {$event:event});
+            });
+        });
+        };
+    });
diff --git a/ecomp-portal-FE-common/client/app/router.js b/ecomp-portal-FE-common/client/app/router.js
index 9fa71d2c..190ed579 100644
--- a/ecomp-portal-FE-common/client/app/router.js
+++ b/ecomp-portal-FE-common/client/app/router.js
@@ -69,15 +69,6 @@ angular.module('ecompApp')
                     controllerAs: 'catalog'
                 }
             }
-        }).state('root.accountOnboarding', {
-            url: '/accountOnboarding',
-            views: {
-                'content@': {
-		            templateUrl: 'app/views/account-onboarding/account-onboarding.tpl.html',
-		            controller: 'AccountOnboardingCtrl',
-		            controllerAs: 'accountOnboarding'
-                }
-            }
         }).state('root.widgetCatalog', {
             url: '/widgetCatalog',
             views: {
@@ -106,7 +97,10 @@ angular.module('ecompApp')
                 }
             }
         }).state('root.role', {
-            url: '/role/:roleId',
+            url: '/role',
+            params: {
+            	roleId: 0,
+            },
             views: {
                 'content@': { 
                     templateUrl: 'app/views/role/role.html',
@@ -141,6 +135,15 @@ angular.module('ecompApp')
                     controllerAs: 'apps'
                 }
             }
+        }).state('root.microserviceOnboarding', {
+            url: '/microserviceOnboarding',
+            views: {
+                'content@': {
+		            templateUrl: 'app/views/microservice-onboarding/microservice-onboarding.tpl.html',
+		            controller: 'MicroserviceOnboardingCtrl',
+		            controllerAs: 'microserviceOnboarding'
+                }
+            }
         }).state('root.widgetOnboarding', {
             url: '/widgetOnboarding',
             views: {
@@ -150,6 +153,15 @@ angular.module('ecompApp')
                 	controllerAs: 'widgetOnboarding'
                 }
             }
+        }).state('root.accountOnboarding', {
+            url: '/accountOnboarding',
+            views: {
+                'content@': {
+		            templateUrl: 'app/views/account-onboarding/account-onboarding.tpl.html',
+		            controller: 'AccountOnboardingCtrl',
+		            controllerAs: 'accountOnboarding'
+                }
+            }
         }).state('root.functionalMenu', {
             url: '/functionalMenu',
             views: {
@@ -207,6 +219,24 @@ angular.module('ecompApp')
                     controllerAs: 'portalAdmin'
                 }
             }
+        }).state('root.webAnalytics', {
+            url: '/webAnalytics',
+            views: {
+                'content@': {
+                    templateUrl: 'app/views/webAnalytics/webAnalytics.tpl.html',
+                    controller: 'WebAnalyticsCtrl',
+                    controllerAs: 'webAnalytics'
+                }
+            }
+        }).state('root.webAnlayticsSource', {
+            url: '/addWebAnalyticsSource',
+            views: {
+                'content@': {
+                    templateUrl: 'app/views/webAnalytics/webAnalyticsList.tpl.html',
+                    controller: 'WebAnalyticsCtrl',
+                    controllerAs: 'webAnalytics'
+                }
+            }
         }).state('root.error404', {
             url: '/error404',
             views: {
diff --git a/ecomp-portal-FE-common/client/app/services/admins/admins.service.js b/ecomp-portal-FE-common/client/app/services/admins/admins.service.js
index 3658052c..60a99f55 100644
--- a/ecomp-portal-FE-common/client/app/services/admins/admins.service.js
+++ b/ecomp-portal-FE-common/client/app/services/admins/admins.service.js
@@ -1,221 +1,221 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 11/22/2015.

- */

-'use strict';

-

-(function () {

-    class AdminsService {

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;

-        }

-

-        getAccountAdmins() {

-            let deferred = this.$q.defer();

-            //this.$log.info('AdminsService::get all applications admins list');

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.accountAdmins,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('AdminsService::getAccountAdmins Failed');

-                        deferred.reject("AdminsService::getAccountAdmins Failed");

-                    } else {

-                        // this.$log.info('AdminsService::getAccountAdmins Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('AdminsService::getAccountAdmins Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-

-        getAdminAppsRoles(orgUserId) {

-            let deferred = this.$q.defer();

-            //this.$log.info('AdminsService::getAdminAppsRoles.adminAppsRoles');

-

-            this.$http({

-                method: "GET",

-                url: this.conf.api.adminAppsRoles,

-                params: {user: orgUserId},

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                        this.$log.error('AdminsService::getAdminAppsRoles.adminAppsRoles Failed');

-                        deferred.reject("AdminsService::getAdminAppsRoles.adminAppsRoles Failed");

-                    } else {

-                    	// this.$log.info('AdminsService::getAdminAppsRoles.adminAppsRoles Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('AdminsService::getAdminAppsRoles.adminAppsRoles Failed', status);

-                    deferred.reject(status);

-                });

-

-            return deferred.promise;

-        }

-        /*Author: Rui*/

-        getRolesByApp(appId) {

-            let deferred = this.$q.defer();

-            this.$log.info('AdminsService::getRolesByApp');

-            let url = this.conf.api.adminAppsRoles + '/' + appId;

-            this.$http({

-                method: "GET",

-                url: url,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("AdminsService::getAdminAppsRoles.getRolesByApp Failed");

-                    } else {

-                        this.$log.info('AdminsService::getAdminAppsRoles.getRolesByApp Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    deferred.reject(status);

-                });

-            

-            return deferred.promise;

-        }

-        

-        updateAdminAppsRoles(newAdminAppRoles) {

-            let deferred = this.$q.defer();

-            // this.$log.info('AdminsService::updateAdminAppsRoles');

-            this.$http({

-                method: "PUT",

-                url: this.conf.api.adminAppsRoles,

-                data: newAdminAppRoles,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                if (this.utilsService.isValidJSON(res)=== false) {

-                    this.$log.error('AdminsService::updateAdminAppsRoles Failed');

-                    deferred.reject("AdminsService::updateAdminAppsRoles Failed");

-                } else {

-                    //this.$log.info('AdminsService::updateAdminAppsRoles success:');

-                    deferred.resolve(res.data);

-                }

-

-                })

-                .catch( status => {

-                    this.$log.error('AdminsService::updateAdminAppsRoles: rejection:' + status);

-                    deferred.reject(status);

-                });

-

-            return deferred.promise;

-        }

-        

-        /**

-         * Tests the specified password against complexity requirements.

-         * Returns an explanation message if the test fails; null if it passes.

-         */

-        isComplexPassword(str) {

-        	let minLength = 8;

-        	let message = 'Password is too simple.  Minimum length is '+ minLength + ', '

-        				  + 'and it must use letters, digits and special characters.';

-        	if (str == null)

-        		return message;

-

-        	let hasLetter = false;

-        	let hasDigit = false;

-        	let hasSpecial = false;

-        	var code, i, len;

-        	for (i = 0, len = str.length; i < len; i++) {

-        		code = str.charCodeAt(i);

-        		if (code > 47 && code < 58) // numeric (0-9)

-        			hasDigit = true;

-        		else if ((code > 64 && code < 91) || (code > 96 && code < 123)) // A-Z, a-z

-        			hasLetter = true;

-        		else

-        			hasSpecial = true;

-        	} // for

-

-        	if (str.length < minLength || !hasLetter || !hasDigit || !hasSpecial)

-        		return message;

-        	

-        	// All is well.

-        	return null;

-        }

-        

-        addNewUser(newUser,checkDuplicate) {

-        	// this.$log.info(newContactUs)

-        	let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService:: add Contact Us' + JSON.stringify(newContactUs));

-            

-            var newUserObj={

-            		firstName:newUser.firstName,

-            		middleInitial:newUser.middleName,

-            		lastName:newUser.lastName,

-            		email:newUser.emailAddress,

-            		loginId:newUser.loginId,

-            		loginPwd:newUser.loginPwd,            		

-            };

-            this.$http({

-                url: this.conf.api.saveNewUser + "?isCheck=" + checkDuplicate,

-                method: 'POST',

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                },

-                data: newUserObj

-            }).then(res => {

-                // this.$log.info('ContactUsService:: add Contact Us res' ,res);

-                // If response comes back as a redirected HTML page which IS NOT a success

-                if (res==null || Object.keys(res.data).length == 0 || res.data.message == 'failure') {

-                    deferred.reject("Add new User failed");

-                    this.$log.error('adminService:: add New User failed');

-                } else {

-                    deferred.resolve(res.data);

-                }

-            }).catch(errRes => {

-                   deferred.reject(errRes);

-             });

-            return deferred.promise;

-        }

-        

-    }

-    AdminsService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('adminsService', AdminsService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 11/22/2015.
+ */
+'use strict';
+
+(function () {
+    class AdminsService {
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;
+        }
+
+        getAccountAdmins() {
+            let deferred = this.$q.defer();
+            //this.$log.info('AdminsService::get all applications admins list');
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.accountAdmins,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('AdminsService::getAccountAdmins Failed');
+                        deferred.reject("AdminsService::getAccountAdmins Failed");
+                    } else {
+                        // this.$log.info('AdminsService::getAccountAdmins Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('AdminsService::getAccountAdmins Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+
+        getAdminAppsRoles(orgUserId) {
+            let deferred = this.$q.defer();
+            //this.$log.info('AdminsService::getAdminAppsRoles.adminAppsRoles');
+
+            this.$http({
+                method: "GET",
+                url: this.conf.api.adminAppsRoles,
+                params: {user: orgUserId},
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                        this.$log.error('AdminsService::getAdminAppsRoles.adminAppsRoles Failed');
+                        deferred.reject("AdminsService::getAdminAppsRoles.adminAppsRoles Failed");
+                    } else {
+                    	// this.$log.info('AdminsService::getAdminAppsRoles.adminAppsRoles Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('AdminsService::getAdminAppsRoles.adminAppsRoles Failed', status);
+                    deferred.reject(status);
+                });
+
+            return deferred.promise;
+        }
+        /*Author: Rui*/
+        getRolesByApp(appId) {
+            let deferred = this.$q.defer();
+            this.$log.info('AdminsService::getRolesByApp');
+            let url = this.conf.api.adminAppsRoles + '/' + appId;
+            this.$http({
+                method: "GET",
+                url: url,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("AdminsService::getAdminAppsRoles.getRolesByApp Failed");
+                    } else {
+                        this.$log.info('AdminsService::getAdminAppsRoles.getRolesByApp Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    deferred.reject(status);
+                });
+            
+            return deferred.promise;
+        }
+        
+        updateAdminAppsRoles(newAdminAppRoles) {
+            let deferred = this.$q.defer();
+            // this.$log.info('AdminsService::updateAdminAppsRoles');
+            this.$http({
+                method: "PUT",
+                url: this.conf.api.adminAppsRoles,
+                data: newAdminAppRoles,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                if (this.utilsService.isValidJSON(res)=== false) {
+                    this.$log.error('AdminsService::updateAdminAppsRoles Failed');
+                    deferred.reject("AdminsService::updateAdminAppsRoles Failed");
+                } else {
+                    //this.$log.info('AdminsService::updateAdminAppsRoles success:');
+                    deferred.resolve(res.data);
+                }
+
+                })
+                .catch( status => {
+                    this.$log.error('AdminsService::updateAdminAppsRoles: rejection:' + status);
+                    deferred.reject(status);
+                });
+
+            return deferred.promise;
+        }
+        
+        /**
+         * Tests the specified password against complexity requirements.
+         * Returns an explanation message if the test fails; null if it passes.
+         */
+        isComplexPassword(str) {
+        	let minLength = 8;
+        	let message = 'Password is too simple.  Minimum length is '+ minLength + ', '
+        				  + 'and it must use letters, digits and special characters.';
+        	if (str == null)
+        		return message;
+
+        	let hasLetter = false;
+        	let hasDigit = false;
+        	let hasSpecial = false;
+        	var code, i, len;
+        	for (i = 0, len = str.length; i < len; i++) {
+        		code = str.charCodeAt(i);
+        		if (code > 47 && code < 58) // numeric (0-9)
+        			hasDigit = true;
+        		else if ((code > 64 && code < 91) || (code > 96 && code < 123)) // A-Z, a-z
+        			hasLetter = true;
+        		else
+        			hasSpecial = true;
+        	} // for
+
+        	if (str.length < minLength || !hasLetter || !hasDigit || !hasSpecial)
+        		return message;
+        	
+        	// All is well.
+        	return null;
+        }
+        
+        addNewUser(newUser,checkDuplicate) {
+        	// this.$log.info(newContactUs)
+        	let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService:: add Contact Us' + JSON.stringify(newContactUs));
+            
+            var newUserObj={
+            		firstName:newUser.firstName,
+            		middleInitial:newUser.middleName,
+            		lastName:newUser.lastName,
+            		email:newUser.emailAddress,
+            		loginId:newUser.loginId,
+            		loginPwd:newUser.loginPwd,            		
+            };
+            this.$http({
+                url: this.conf.api.saveNewUser + "?isCheck=" + checkDuplicate,
+                method: 'POST',
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                },
+                data: newUserObj
+            }).then(res => {
+                // this.$log.info('ContactUsService:: add Contact Us res' ,res);
+                // If response comes back as a redirected HTML page which IS NOT a success
+                if (res==null || Object.keys(res.data).length == 0 || res.data.message == 'failure') {
+                    deferred.reject("Add new User failed");
+                    this.$log.error('adminService:: add New User failed');
+                } else {
+                    deferred.resolve(res.data);
+                }
+            }).catch(errRes => {
+                   deferred.reject(errRes);
+             });
+            return deferred.promise;
+        }
+        
+    }
+    AdminsService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('adminsService', AdminsService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/audit-log/audit-log.service.js b/ecomp-portal-FE-common/client/app/services/audit-log/audit-log.service.js
index 93a61310..af48fd64 100644
--- a/ecomp-portal-FE-common/client/app/services/audit-log/audit-log.service.js
+++ b/ecomp-portal-FE-common/client/app/services/audit-log/audit-log.service.js
@@ -1,92 +1,92 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by robertlo on 11/18/2016.

- */

-'use strict';

-

-(function () {

-    class AuditLogService {

-        constructor($q, $log, $http, conf, uuid) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-          

-            this.uuid = uuid;

-        }

-        storeAudit(affectedAppId) {

-            // this.$log.error('ecomp::storeAudit storeAudit',affectedAppId);

-        	let deferred = this.$q.defer();

-        	this.$http({

-                    method: "GET",

-                    url: this.conf.api.storeAuditLog+'?affectedAppId=' + affectedAppId +"&type=''&comment=''",

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-            })

-        	return deferred.promise;

-        }

-        

-        storeAudit(affectedAppId,type) {

-            // this.$log.error('ecomp::storeAudit storeAudit',affectedAppId + " " +type);

-        	let deferred = this.$q.defer();

-        	this.$http({

-                    method: "GET",

-                    url: this.conf.api.storeAuditLog+'?affectedAppId=' + affectedAppId + '&type='+type+"&comment=''",

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-            })

-        	return deferred.promise;

-        }

-        storeAudit(affectedAppId,type,comment) {

-        	comment = filterDummyValue(comment);

-        	let deferred = this.$q.defer();

-        	var url =this.conf.api.storeAuditLog+'?affectedAppId=' + affectedAppId;

-        	if(type!=''){

-        		url= url+'&type='+type;

-        	}

-        	if(comment!=''){

-        		url= url+'&comment='+comment;

-        	}

-        	this.$http({

-                    method: "GET",

-                    url: url,

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-            })

-        	return deferred.promise;

-        }

-    }  

-    AuditLogService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4'];

-    angular.module('ecompApp').service('auditLogService', AuditLogService)

-})();

-

-function filterDummyValue(comment){

-	var n = comment.indexOf("?dummyVar");

-	if(n!=-1)

-		comment = comment.substring(0, n);

-	return comment;

-}

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by robertlo on 11/18/2016.
+ */
+'use strict';
+
+(function () {
+    class AuditLogService {
+        constructor($q, $log, $http, conf, uuid) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+          
+            this.uuid = uuid;
+        }
+        storeAudit(affectedAppId) {
+            // this.$log.error('ecomp::storeAudit storeAudit',affectedAppId);
+        	let deferred = this.$q.defer();
+        	this.$http({
+                    method: "GET",
+                    url: this.conf.api.storeAuditLog+'?affectedAppId=' + affectedAppId +"&type=''&comment=''",
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+            })
+        	return deferred.promise;
+        }
+        
+        storeAudit(affectedAppId,type) {
+            // this.$log.error('ecomp::storeAudit storeAudit',affectedAppId + " " +type);
+        	let deferred = this.$q.defer();
+        	this.$http({
+                    method: "GET",
+                    url: this.conf.api.storeAuditLog+'?affectedAppId=' + affectedAppId + '&type='+type+"&comment=''",
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+            })
+        	return deferred.promise;
+        }
+        storeAudit(affectedAppId,type,comment) {
+        	comment = filterDummyValue(comment);
+        	let deferred = this.$q.defer();
+        	var url =this.conf.api.storeAuditLog+'?affectedAppId=' + affectedAppId;
+        	if(type!=''){
+        		url= url+'&type='+type;
+        	}
+        	if(comment!=''){
+        		url= url+'&comment='+comment;
+        	}
+        	this.$http({
+                    method: "GET",
+                    url: url,
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+            })
+        	return deferred.promise;
+        }
+    }  
+    AuditLogService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4'];
+    angular.module('ecompApp').service('auditLogService', AuditLogService)
+})();
+
+function filterDummyValue(comment){
+	var n = comment.indexOf("?dummyVar");
+	if(n!=-1)
+		comment = comment.substring(0, n);
+	return comment;
+}
diff --git a/ecomp-portal-FE-common/client/app/services/base64/base64.service.js b/ecomp-portal-FE-common/client/app/services/base64/base64.service.js
index 5a684784..dccc5b20 100644
--- a/ecomp-portal-FE-common/client/app/services/base64/base64.service.js
+++ b/ecomp-portal-FE-common/client/app/services/base64/base64.service.js
@@ -1,69 +1,69 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Author: Rui Lu

- * 12/15/2016

- */

-(function () {

-    class Base64Service {

-    	 constructor(){

-    		

-    	 }

-    	 encode(input) {

-    		 var keyStr = 'ABCDEFGHIJKLMNOP' +

-             'QRSTUVWXYZabcdef' +

-             'ghijklmnopqrstuv' +

-             'wxyz0123456789+/' +

-             '=';

-    		 var output = "";

-             var chr1, chr2, chr3 = "";

-             var enc1, enc2, enc3, enc4 = "";

-             var i = 0;

-

-             do {

-                 chr1 = input.charCodeAt(i++);

-                 chr2 = input.charCodeAt(i++);

-                 chr3 = input.charCodeAt(i++);

-

-                 enc1 = chr1 >> 2;

-                 enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);

-                 enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);

-                 enc4 = chr3 & 63;

-

-                 if (isNaN(chr2)) {

-                     enc3 = enc4 = 64;

-                 } else if (isNaN(chr3)) {

-                     enc4 = 64;

-                 }

-

-                 output = output +

-                         keyStr.charAt(enc1) +

-                         keyStr.charAt(enc2) +

-                         keyStr.charAt(enc3) +

-                         keyStr.charAt(enc4);

-                 chr1 = chr2 = chr3 = "";

-                 enc1 = enc2 = enc3 = enc4 = "";

-             } while (i < input.length);

-

-             return output;

-    	 }

-    }

-    angular.module('ecompApp').service('base64Service', Base64Service)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Author: Rui Lu
+ * 12/15/2016
+ */
+(function () {
+    class Base64Service {
+    	 constructor(){
+    		
+    	 }
+    	 encode(input) {
+    		 var keyStr = 'ABCDEFGHIJKLMNOP' +
+             'QRSTUVWXYZabcdef' +
+             'ghijklmnopqrstuv' +
+             'wxyz0123456789+/' +
+             '=';
+    		 var output = "";
+             var chr1, chr2, chr3 = "";
+             var enc1, enc2, enc3, enc4 = "";
+             var i = 0;
+
+             do {
+                 chr1 = input.charCodeAt(i++);
+                 chr2 = input.charCodeAt(i++);
+                 chr3 = input.charCodeAt(i++);
+
+                 enc1 = chr1 >> 2;
+                 enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+                 enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+                 enc4 = chr3 & 63;
+
+                 if (isNaN(chr2)) {
+                     enc3 = enc4 = 64;
+                 } else if (isNaN(chr3)) {
+                     enc4 = 64;
+                 }
+
+                 output = output +
+                         keyStr.charAt(enc1) +
+                         keyStr.charAt(enc2) +
+                         keyStr.charAt(enc3) +
+                         keyStr.charAt(enc4);
+                 chr1 = chr2 = chr3 = "";
+                 enc1 = enc2 = enc3 = enc4 = "";
+             } while (i < input.length);
+
+             return output;
+    	 }
+    }
+    angular.module('ecompApp').service('base64Service', Base64Service)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/be-property-reader/be-property-reader.service.js b/ecomp-portal-FE-common/client/app/services/be-property-reader/be-property-reader.service.js
index b3ad6b36..8e30aa2e 100644
--- a/ecomp-portal-FE-common/client/app/services/be-property-reader/be-property-reader.service.js
+++ b/ecomp-portal-FE-common/client/app/services/be-property-reader/be-property-reader.service.js
@@ -1,70 +1,70 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 11/22/2015.

- */

-'use strict';

-

-(function () {

-    class BeReaderService {

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;

-        }

-

-        getProperty(property) {

-            let deferred = this.$q.defer();

-            //this.$log.info('BeReaderService::get all applications admins list');

-            

-            let url = this.conf.api.beProperty + "?key=" + property;

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: url,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    //if (this.utilsService.isValidJSON(res)=== false) {

-                    //	this.$log.error('BeReaderService::getAccountAdmins Failed');

-                    //    deferred.reject("BeReaderService::getAccountAdmins Failed");

-                    //} else {

-                        // this.$log.info('BeReaderService::getAccountAdmins Succeeded');

-                    deferred.resolve(res.data);

-                    //}

-                })

-                .catch( status => {

-                	this.$log.error('BeReaderService::getAccountAdmins Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-

-        }

-    }

-    BeReaderService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('beReaderService', BeReaderService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 11/22/2015.
+ */
+'use strict';
+
+(function () {
+    class BeReaderService {
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;
+        }
+
+        getProperty(property) {
+            let deferred = this.$q.defer();
+            //this.$log.info('BeReaderService::get all applications admins list');
+            
+            let url = this.conf.api.beProperty + "?key=" + property;
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: url,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    //if (this.utilsService.isValidJSON(res)=== false) {
+                    //	this.$log.error('BeReaderService::getAccountAdmins Failed');
+                    //    deferred.reject("BeReaderService::getAccountAdmins Failed");
+                    //} else {
+                        // this.$log.info('BeReaderService::getAccountAdmins Succeeded');
+                    deferred.resolve(res.data);
+                    //}
+                })
+                .catch( status => {
+                	this.$log.error('BeReaderService::getAccountAdmins Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+
+        }
+    }
+    BeReaderService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('beReaderService', BeReaderService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/catalog/catalog.service.js b/ecomp-portal-FE-common/client/app/services/catalog/catalog.service.js
index 63d5b966..6b89341d 100644
--- a/ecomp-portal-FE-common/client/app/services/catalog/catalog.service.js
+++ b/ecomp-portal-FE-common/client/app/services/catalog/catalog.service.js
@@ -1,172 +1,202 @@
-/*-

- * ================================================================================

- * 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 () {

-    class CatalogService {

-    	

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.debug = false;

-            this.utilsService = utilsService;

-        }

-

-        getAppCatalog() {

-            let deferred = this.$q.defer();

-            this.$http({

-                	method: "GET",

-                	url: this.conf.api.appCatalog,

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                	if (this.debug)

-                		this.$log.debug('CatalogService::getAppCatalog: result is ' + JSON.stringify(res));

-                    // Res is always JSON, but the data object might be an HTML error page.

-                    if (! this.utilsService.isValidJSON(res.data)) {

-                    	var msg = 'CatalogService::getAppCatalog: result data is not JSON';

-                    	if (this.debug)

-                    		this.$log.debug(msg);

-                    	deferred.reject(msg);

-                    } else {

-                    	if (this.debug)

-                    		this.$log.debug('CatalogService::getAppCatalog: success');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('CatalogService:getAppCatalog failed: ' + status);

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        // Expects an object with fields matching model class AppCatalogSelection:

-        // appId (number), select (boolean), pending (boolean).

-        updateAppCatalog(appData) {

-            let deferred = this.$q.defer();

-            // Validate the request, maybe this is overkill

-            if (appData == null || appData.appId == null || appData.select == null) {

-            	var msg = 'CatalogService::updateAppCatalog: field appId and/or select not found';

-                this.$log.error(msg);

-                return deferred.reject(msg);

-            }

-            this.$http({

-                method: "PUT",

-                url: this.conf.api.appCatalog,

-                data: appData,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // Detect missing result

-                    if (res == null || res.data == null) {

-                        deferred.reject("CatalogService::updateAppCatalog Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('CatalogService:updateAppCatalog failed: ' + status);

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        // Expects an object with fields and used to update records for ep_pers_user_app_man_sort table:

-        // appId (number), select (boolean).

-        updateManualAppSort(appData) {

-            let deferred = this.$q.defer();

-            

-            // Validate the request, maybe this is overkill

-            if (appData == null || appData.appId == null || appData.select == null) {

-            	var msg = 'CatalogService::updateManualAppSort: field appId and/or select not found';

-                this.$log.error(msg);

-                return deferred.reject(msg);

-            }

-            this.$http({

-                method: "PUT",

-                url: this.conf.api.UpdateUserAppsSortManual,

-                data: appData,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // Detect missing result

-                    if (res == null || res.data == null) {

-                        deferred.reject("CatalogService::updateManualAppSort Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('CatalogService:updateManualAppSort failed: ' + status);

-                    deferred.reject(status);

-                });

-            

-            return deferred.promise;

-        }

-           

-        getuserAppRolesCatalog(item) {

-            let deferred = this.$q.defer();

-            this.$http({

-                	method: "GET",

-                	url: this.conf.api.appCatalogRoles,

-                	params:{appName:item},

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                	if (this.debug)

-                		this.$log.debug('CatalogService::getAppCatalog: result is ' + JSON.stringify(res));

-                    // Res is always JSON, but the data object might be an HTML error page.

-                    if (! this.utilsService.isValidJSON(res.data)) {

-                    	var msg = 'CatalogService::getAppCatalog: result data is not JSON';

-                    	if (this.debug)

-                    		this.$log.debug(msg);

-                    	deferred.reject(msg);

-                    } else {

-                    	if (this.debug)

-                    		this.$log.debug('CatalogService::getAppCatalog: success');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('CatalogService:getAppCatalog failed: ' + status);

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        

-

-    }

-    

-    CatalogService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('catalogService', CatalogService)

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class CatalogService {
+    	
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.debug = false;
+            this.utilsService = utilsService;
+        }
+
+        getAppCatalog() {
+            let deferred = this.$q.defer();
+            this.$http({
+                	method: "GET",
+                	url: this.conf.api.appCatalog,
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                	if (this.debug)
+                		this.$log.debug('CatalogService::getAppCatalog: result is ' + JSON.stringify(res));
+                    // Res is always JSON, but the data object might be an HTML error page.
+                    if (! this.utilsService.isValidJSON(res.data)) {
+                    	var msg = 'CatalogService::getAppCatalog: result data is not JSON';
+                    	if (this.debug)
+                    		this.$log.debug(msg);
+                    	deferred.reject(msg);
+                    } else {
+                    	if (this.debug)
+                    		this.$log.debug('CatalogService::getAppCatalog: success');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('CatalogService:getAppCatalog failed: ' + status);
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        // Expects an object with fields matching model class AppCatalogSelection:
+        // appId (number), select (boolean), pending (boolean).
+        updateAppCatalog(appData) {
+            let deferred = this.$q.defer();
+            // Validate the request, maybe this is overkill
+            if (appData == null || appData.appId == null || appData.select == null) {
+            	var msg = 'CatalogService::updateAppCatalog: field appId and/or select not found';
+                this.$log.error(msg);
+                return deferred.reject(msg);
+            }
+            this.$http({
+                method: "PUT",
+                url: this.conf.api.appCatalog,
+                data: appData,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // Detect missing result
+                    if (res == null || res.data == null) {
+                        deferred.reject("CatalogService::updateAppCatalog Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('CatalogService:updateAppCatalog failed: ' + status);
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        // Expects an object with fields and used to update records for ep_pers_user_app_man_sort table:
+        // appId (number), select (boolean).
+        updateManualAppSort(appData) {
+            let deferred = this.$q.defer();
+            
+            // Validate the request, maybe this is overkill
+            if (appData == null || appData.appId == null || appData.select == null) {
+            	var msg = 'CatalogService::updateManualAppSort: field appId and/or select not found';
+                this.$log.error(msg);
+                return deferred.reject(msg);
+            }
+            this.$http({
+                method: "PUT",
+                url: this.conf.api.UpdateUserAppsSortManual,
+                data: appData,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // Detect missing result
+                    if (res == null || res.data == null) {
+                        deferred.reject("CatalogService::updateManualAppSort Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('CatalogService:updateManualAppSort failed: ' + status);
+                    deferred.reject(status);
+                });
+            
+            return deferred.promise;
+        }
+           
+        getuserAppRolesCatalog(item) {
+            let deferred = this.$q.defer();
+            this.$http({
+                	method: "GET",
+                	url: this.conf.api.appCatalogRoles,
+                	params:{appName:item},
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                	if (this.debug)
+                		this.$log.debug('CatalogService::getAppCatalog: result is ' + JSON.stringify(res));
+                    // Res is always JSON, but the data object might be an HTML error page.
+                    if (! this.utilsService.isValidJSON(res.data)) {
+                    	var msg = 'CatalogService::getAppCatalog: result data is not JSON';
+                    	if (this.debug)
+                    		this.$log.debug(msg);
+                    	deferred.reject(msg);
+                    } else {
+                    	if (this.debug)
+                    		this.$log.debug('CatalogService::getAppCatalog: success');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('CatalogService:getAppCatalog failed: ' + status);
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        getAppsFullList() {
+            let deferred = this.$q.defer();
+            this.$http({
+                	method: "GET",
+                	url: this.conf.api.appsFullList,
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                	if (this.debug)
+                		this.$log.debug('CatalogService::getAppsFullList: result is ' + JSON.stringify(res));
+                    // Res is always JSON, but the data object might be an HTML error page.
+                    if (! this.utilsService.isValidJSON(res.data)) {
+                    	var msg = 'CatalogService::getAppsFullList: result data is not JSON';
+                    	if (this.debug)
+                    		this.$log.error(msg);
+                    	deferred.reject(msg);
+                    } else {
+                    	if (this.debug)
+                    		this.$log.debug('CatalogService::getAppsFullList: success');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('CatalogService:getAppsFullList failed: ' + status);
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+    }
+    
+    CatalogService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('catalogService', CatalogService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/confirm-box/confirm-box.service.js b/ecomp-portal-FE-common/client/app/services/confirm-box/confirm-box.service.js
index 97ebb1e5..7379a29e 100644
--- a/ecomp-portal-FE-common/client/app/services/confirm-box/confirm-box.service.js
+++ b/ecomp-portal-FE-common/client/app/services/confirm-box/confirm-box.service.js
@@ -1,236 +1,236 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 1/18/16.

- */

-'use strict';

-

-(function () {

-    class ConfirmBoxService {

-        constructor($q, $log, ngDialog) {

-            this.$q = $q;

-            this.$log = $log;

-            this.ngDialog = ngDialog;

-        }

-

-        showInformation(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/information-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-        

-        editItem(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-       

-        

-        showDynamicInformation(message, templatePath, controller) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-            	templateUrl: templatePath,

-                controller: controller,

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-        

-        confirm(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-

-        deleteItem(item) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    item: item,

-                    title: 'Functional Menu - Delete'

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-

-        moveMenuItem(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/dragdrop-confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message,

-                    title:'Functional Menu - Move'

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-

-        makeAdminChanges(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message,

-                    title: 'Admin Update'

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-        

-        

-        makeUserAppRoleCatalogChanges(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message,

-                    title: 'UserRoles Update'

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-     

-        

-        webAnalyticsChanges(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message,

-                    title: 'Add WebAnalytics Source'

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-

-        

-        updateWebAnalyticsReport(message) {

-            let deferred = this.$q.defer();

-            this.ngDialog.open({

-                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',

-                controller: 'ConfirmationBoxCtrl',

-                controllerAs: 'confirmBox',

-                className: 'confirm-box ngdialog-theme-default',

-                showClose: false,

-                data: {

-                    message: message,

-                    title: 'Update WebAnalytics Source'

-                }

-            }).closePromise.then(confirmed => {

-                deferred.resolve(confirmed.value);

-            }).catch(err => {

-                deferred.reject(err);

-            });

-            return deferred.promise;

-        };

-

-    }

-    ConfirmBoxService.$inject = ['$q', '$log', 'ngDialog'];

-    angular.module('ecompApp').service('confirmBoxService', ConfirmBoxService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 1/18/16.
+ */
+'use strict';
+
+(function () {
+    class ConfirmBoxService {
+        constructor($q, $log, ngDialog) {
+            this.$q = $q;
+            this.$log = $log;
+            this.ngDialog = ngDialog;
+        }
+
+        showInformation(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/information-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+        
+        editItem(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+       
+        
+        showDynamicInformation(message, templatePath, controller) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+            	templateUrl: templatePath,
+                controller: controller,
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+        
+        confirm(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        deleteItem(item) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    item: item,
+                    title: 'Functional Menu - Delete'
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        moveMenuItem(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/dragdrop-confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message,
+                    title:'Functional Menu - Move'
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        makeAdminChanges(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message,
+                    title: 'Admin Update'
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+        
+        
+        makeUserAppRoleCatalogChanges(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message,
+                    title: 'UserRoles Update'
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+     
+        
+        webAnalyticsChanges(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message,
+                    title: 'Add WebAnalytics Source'
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+        
+        updateWebAnalyticsReport(message) {
+            let deferred = this.$q.defer();
+            this.ngDialog.open({
+                templateUrl: 'app/views/confirmation-box/admin-confirmation-box.tpl.html',
+                controller: 'ConfirmationBoxCtrl',
+                controllerAs: 'confirmBox',
+                className: 'confirm-box ngdialog-theme-default',
+                showClose: false,
+                data: {
+                    message: message,
+                    title: 'Update WebAnalytics Source'
+                }
+            }).closePromise.then(confirmed => {
+                deferred.resolve(confirmed.value);
+            }).catch(err => {
+                deferred.reject(err);
+            });
+            return deferred.promise;
+        };
+
+    }
+    ConfirmBoxService.$inject = ['$q', '$log', 'ngDialog'];
+    angular.module('ecompApp').service('confirmBoxService', ConfirmBoxService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/contact-us/contact-us.service.js b/ecomp-portal-FE-common/client/app/services/contact-us/contact-us.service.js
index 45c95e9c..6158498f 100644
--- a/ecomp-portal-FE-common/client/app/services/contact-us/contact-us.service.js
+++ b/ecomp-portal-FE-common/client/app/services/contact-us/contact-us.service.js
@@ -1,247 +1,247 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by robertlo on 10/10/2016.

- */

-'use strict';

-

-(function () {

-    class ContactUsService {

-        constructor($q, $log, $http, conf, uuid) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-        }

-        getListOfApp() {

-            // this.$log.info('ContactUsService::getListOfavailableApps: get all app list');

-            let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService::getListOfavailableApps: ', this.conf.api.listOfApp);

-            this.$http({

-                method: "GET",

-                url: this.conf.api.availableApps,           

-                cache: false

-            }).then( res => {

-                // If response comes back as a redirected HTML page which IS NOT a success

-            	// this.$log.info('ContactUsService::getListOfavailableApps availableApps response: ', res);

-                if (Object.keys(res).length == 0) {

-                    deferred.reject("ContactUsService::getListOfavailableApps: Failed"); 

-                } else {

-                    // this.$log.debug('ContactUsService::getListOfavailableApps: Succeeded results: ', res);

-                    deferred.resolve(res);

-                }

-            }).catch( status => {

-            	this.$log.error('ContactUsService::getListOfavailableApps: query error: ',status);

-                deferred.reject(status);

-            });

-            return deferred.promise;           

-        }

-        

-        getContactUs() {

-            let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService::get all Contact Us list');

-            this.$http({

-                    url: this.conf.api.getContactUS,

-                    method: 'GET',

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ContactUsService::getContactUs Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        getAppsAndContacts() {

-            let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService::getAppsAndContacts');

-            this.$http({

-                    url: this.conf.api.getAppsAndContacts,

-                    method: 'GET',

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ContactUsService::getAppsAndContacts Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        getContactUSPortalDetails(){

-        	let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService::get all Contact Us Portal Details');

-            this.$http({

-                    url: this.conf.api.getContactUSPortalDetails,

-                    method: 'GET',

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ContactUsService::getContactUSPortalDetails Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        getAppCategoryFunctions(){

-        	let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService::get all App Category Functions');

-            this.$http({

-                    url: this.conf.api.getAppCategoryFunctions,

-                    method: 'GET',

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ContactUsService::getAppCategoryFunctions Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        addContactUs(newContactUs) {

-        	// this.$log.info('ContactUsService::add a new Contact Us');

-        	// this.$log.info(newContactUs)

-        	let deferred = this.$q.defer();

-            // this.$log.info('ContactUsService:: add Contact Us' + JSON.stringify(newContactUs));

-            

-            var contactUsObj={

-            		appId:newContactUs.app.value,

-            		appName:newContactUs.app.title,

-            		description:newContactUs.desc,

-            		contactName:newContactUs.name,

-            		contactEmail:newContactUs.email,

-            		url:newContactUs.url,            		

-            };

-            this.$http({

-                url: this.conf.api.saveContactUS,

-                method: 'POST',

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                },

-                data: contactUsObj

-            }).then(res => {

-                // this.$log.info('ContactUsService:: add Contact Us res' ,res);

-                // If response comes back as a redirected HTML page which IS NOT a success

-                if (res==null || Object.keys(res.data).length == 0 || res.data.message == 'failure') {

-                    deferred.reject("Add Contact Us failed");

-                    this.$log.error('ContactUsService:: add Contact Us failed');

-                } else {

-                    deferred.resolve(res.data);

-                }

-            }).catch(errRes => {

-                   deferred.reject(errRes);

-             });

-            return deferred.promise;

-        }

-        

-        modifyContactUs(contactUsObj) {

-        	// this.$log.info('ContactUsService::edit Contact Us',contactUsObj);        	

-        	let deferred = this.$q.defer();

-            this.$http({

-                url: this.conf.api.saveContactUS,

-                method: 'POST',

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                },

-                data: contactUsObj

-            }).then(res => {

-                // this.$log.info('ContactUsService:: edit Contact Us res' ,res);

-                // If response comes back as a redirected HTML page which IS NOT a success

-                if (res==null || Object.keys(res.data).length == 0 || res.data.message == 'failure') {

-                    deferred.reject("Edit Contact Us failed");

-                    this.$log.error('ContactUsService:: edit Contact Us failed');

-                } else {

-                    deferred.resolve(res.data);

-                }

-            }).catch(errRes => {

-                   deferred.reject(errRes);

-             });

-            return deferred.promise;

-        }

-

-        removeContactUs(id) {

-            let deferred = this.$q.defer();

-            let url = this.conf.api.deleteContactUS + '/' + id;

-            // this.$log.info('ContactUsService:: remove Contact Us');

-            this.$http({

-                url: url,

-                method: 'POST',

-                cache: false,

-                data: '',

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                // If response comes back as a redirected HTML page which IS NOT a success

-            	// this.$log.info("ContactUsService::removeContactUs res",res);

-            	deferred.resolve(res.data);

-                if (Object.keys(res.data).length == 0) {

-                    deferred.reject("ContactUsService::removeContactUs Failed");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            }).catch(errRes => {

-                deferred.reject(errRes);

-            });

-

-            return deferred.promise;

-        }

-    }

-    ContactUsService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4'];

-    angular.module('ecompApp').service('contactUsService', ContactUsService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by robertlo on 10/10/2016.
+ */
+'use strict';
+
+(function () {
+    class ContactUsService {
+        constructor($q, $log, $http, conf, uuid) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+        }
+        getListOfApp() {
+            // this.$log.info('ContactUsService::getListOfavailableApps: get all app list');
+            let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService::getListOfavailableApps: ', this.conf.api.listOfApp);
+            this.$http({
+                method: "GET",
+                url: this.conf.api.availableApps,           
+                cache: false
+            }).then( res => {
+                // If response comes back as a redirected HTML page which IS NOT a success
+            	// this.$log.info('ContactUsService::getListOfavailableApps availableApps response: ', res);
+                if (Object.keys(res).length == 0) {
+                    deferred.reject("ContactUsService::getListOfavailableApps: Failed"); 
+                } else {
+                    // this.$log.debug('ContactUsService::getListOfavailableApps: Succeeded results: ', res);
+                    deferred.resolve(res);
+                }
+            }).catch( status => {
+            	this.$log.error('ContactUsService::getListOfavailableApps: query error: ',status);
+                deferred.reject(status);
+            });
+            return deferred.promise;           
+        }
+        
+        getContactUs() {
+            let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService::get all Contact Us list');
+            this.$http({
+                    url: this.conf.api.getContactUS,
+                    method: 'GET',
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ContactUsService::getContactUs Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        getAppsAndContacts() {
+            let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService::getAppsAndContacts');
+            this.$http({
+                    url: this.conf.api.getAppsAndContacts,
+                    method: 'GET',
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ContactUsService::getAppsAndContacts Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        getContactUSPortalDetails(){
+        	let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService::get all Contact Us Portal Details');
+            this.$http({
+                    url: this.conf.api.getContactUSPortalDetails,
+                    method: 'GET',
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ContactUsService::getContactUSPortalDetails Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        getAppCategoryFunctions(){
+        	let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService::get all App Category Functions');
+            this.$http({
+                    url: this.conf.api.getAppCategoryFunctions,
+                    method: 'GET',
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ContactUsService::getAppCategoryFunctions Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        addContactUs(newContactUs) {
+        	// this.$log.info('ContactUsService::add a new Contact Us');
+        	// this.$log.info(newContactUs)
+        	let deferred = this.$q.defer();
+            // this.$log.info('ContactUsService:: add Contact Us' + JSON.stringify(newContactUs));
+            
+            var contactUsObj={
+            		appId:newContactUs.app.value,
+            		appName:newContactUs.app.title,
+            		description:newContactUs.desc,
+            		contactName:newContactUs.name,
+            		contactEmail:newContactUs.email,
+            		url:newContactUs.url,            		
+            };
+            this.$http({
+                url: this.conf.api.saveContactUS,
+                method: 'POST',
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                },
+                data: contactUsObj
+            }).then(res => {
+                // this.$log.info('ContactUsService:: add Contact Us res' ,res);
+                // If response comes back as a redirected HTML page which IS NOT a success
+                if (res==null || Object.keys(res.data).length == 0 || res.data.message == 'failure') {
+                    deferred.reject("Add Contact Us failed");
+                    this.$log.error('ContactUsService:: add Contact Us failed');
+                } else {
+                    deferred.resolve(res.data);
+                }
+            }).catch(errRes => {
+                   deferred.reject(errRes);
+             });
+            return deferred.promise;
+        }
+        
+        modifyContactUs(contactUsObj) {
+        	// this.$log.info('ContactUsService::edit Contact Us',contactUsObj);        	
+        	let deferred = this.$q.defer();
+            this.$http({
+                url: this.conf.api.saveContactUS,
+                method: 'POST',
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                },
+                data: contactUsObj
+            }).then(res => {
+                // this.$log.info('ContactUsService:: edit Contact Us res' ,res);
+                // If response comes back as a redirected HTML page which IS NOT a success
+                if (res==null || Object.keys(res.data).length == 0 || res.data.message == 'failure') {
+                    deferred.reject("Edit Contact Us failed");
+                    this.$log.error('ContactUsService:: edit Contact Us failed');
+                } else {
+                    deferred.resolve(res.data);
+                }
+            }).catch(errRes => {
+                   deferred.reject(errRes);
+             });
+            return deferred.promise;
+        }
+
+        removeContactUs(id) {
+            let deferred = this.$q.defer();
+            let url = this.conf.api.deleteContactUS + '/' + id;
+            // this.$log.info('ContactUsService:: remove Contact Us');
+            this.$http({
+                url: url,
+                method: 'POST',
+                cache: false,
+                data: '',
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                // If response comes back as a redirected HTML page which IS NOT a success
+            	// this.$log.info("ContactUsService::removeContactUs res",res);
+            	deferred.resolve(res.data);
+                if (Object.keys(res.data).length == 0) {
+                    deferred.reject("ContactUsService::removeContactUs Failed");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            }).catch(errRes => {
+                deferred.reject(errRes);
+            });
+
+            return deferred.promise;
+        }
+    }
+    ContactUsService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4'];
+    angular.module('ecompApp').service('contactUsService', ContactUsService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/dashboard/dashboard.service.js b/ecomp-portal-FE-common/client/app/services/dashboard/dashboard.service.js
index c4b2e578..9e5e69be 100644
--- a/ecomp-portal-FE-common/client/app/services/dashboard/dashboard.service.js
+++ b/ecomp-portal-FE-common/client/app/services/dashboard/dashboard.service.js
@@ -1,185 +1,185 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by robertlo on 09/26/2016.

- */

-'use strict';

-

-(function () {

-    class DashboardService {

-        constructor($q, $log, $http, conf, uuid) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.dashboardService = null;

-            this.uuid = uuid;

-        }

-

-        getCommonWidgetData(widgetType) {

-            // this.$log.info('ecomp::dashboard-service::getting news data');

-            let deferred = this.$q.defer();

-            let url = this.conf.api.commonWidget + '?resourceType=' + widgetType;

-         	 

-            this.$http({

-                    method: "GET",

-                    url: url,

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                	 // this.$log.info('ecomp::dashboard-service::getting news data',res);

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0 || Object.keys(res.data.response) ==null || Object.keys(res.data.response.items) ==null) {

-                        deferred.reject("ecomp::dashboard-service::getNewsData Failed");

-                    } else {

-                        this.userProfile = res.data;

-                        // this.$log.info('ecomp::dashboard-service::getNewsData Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        saveCommonWidgetData(newData){

-            let deferred = this.$q.defer();

-            //this.$log.info('ecomp::dashboard-service::saveCommonWidgetData');

-            //this.$log.debug('ecomp::dashboard-service::saveCommonWidgetData with:', newData);

-

-            this.$http({

-                method: "POST",

-                url: this.conf.api.commonWidget,

-                data: newData,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-            		// this.$log.info(res.data);

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ecomp::dashboard-service::saveCommonWidgetData Failed");

-                    } else {

-                        // this.$log.info('ecomp::dashboard-service::saveCommonWidgetData Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        

-        

-        removeCommonWidgetData(widgetToRemove){

-            let deferred = this.$q.defer();

-            // this.$log.info('ecomp::dashboard-service::removeCommonWidgetData');

-            // this.$log.debug('ecomp::dashboard-service::removeCommonWidgetData with:', widgetToRemove);

-            this.$http({

-                method: "POST",

-                url: this.conf.api.deleteCommonWidget,

-                data: widgetToRemove,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-            		// this.$log.info(res.data);

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ecomp::dashboard-service::saveCommonWidgetData Failed");

-                    } else {

-                        // this.$log.info('ecomp::dashboard-service::saveCommonWidgetData Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        getSearchAllByStringResults(searchStr) {

-        	// this.$log.info('ecomp::getSearchAllByStringResults::getting search by string results');

-            let deferred = this.$q.defer();

-            let url = this.conf.api.getSearchAllByStringResults;

-            

-            this.$http({

-                    method: "GET",

-                    url : url,

-                    params : {

-                    	'searchString' : searchStr

-                    },

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ecomp::dashboard-service::getSearchAllByStringResults Failed");

-                    } else {

-                        //this.searchResults = res.data;

-                        // this.$log.info('ecomp::dashboard-service::getSearchAllByStringResults Succeeded');

-                        deferred.resolve(res.data.response);

-                    }

-                }).catch( status => {

-                    this.$log.error('ecomp::getSearchAllByStringResults error');

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        	

-        }

-        

-        getOnlineUserUpdateRate() {

-            let deferred = this.$q.defer();

-            let url = this.conf.api.onlineUserUpdateRate;

-            this.$http({

-                    method: "GET",

-                    url: url,

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                	if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ecomp::dashboard-service::getOnlineUserUpdateRate Failed");

-                    } else {

-                    	// this.$log.info('ecomp::dashboard-service::getOnlineUserUpdateRate Succeeded',res);

-                        deferred.resolve(res.data);

-                    }

-                }).catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-    

-    }

-    

-    DashboardService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4'];

-    angular.module('ecompApp').service('dashboardService', DashboardService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by robertlo on 09/26/2016.
+ */
+'use strict';
+
+(function () {
+    class DashboardService {
+        constructor($q, $log, $http, conf, uuid) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.dashboardService = null;
+            this.uuid = uuid;
+        }
+
+        getCommonWidgetData(widgetType) {
+            // this.$log.info('ecomp::dashboard-service::getting news data');
+            let deferred = this.$q.defer();
+            let url = this.conf.api.commonWidget + '?resourceType=' + widgetType;
+         	 
+            this.$http({
+                    method: "GET",
+                    url: url,
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                	 // this.$log.info('ecomp::dashboard-service::getting news data',res);
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0 || Object.keys(res.data.response) ==null || Object.keys(res.data.response.items) ==null) {
+                        deferred.reject("ecomp::dashboard-service::getNewsData Failed");
+                    } else {
+                        this.userProfile = res.data;
+                        // this.$log.info('ecomp::dashboard-service::getNewsData Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        saveCommonWidgetData(newData){
+            let deferred = this.$q.defer();
+            //this.$log.info('ecomp::dashboard-service::saveCommonWidgetData');
+            //this.$log.debug('ecomp::dashboard-service::saveCommonWidgetData with:', newData);
+
+            this.$http({
+                method: "POST",
+                url: this.conf.api.commonWidget,
+                data: newData,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+            		// this.$log.info(res.data);
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ecomp::dashboard-service::saveCommonWidgetData Failed");
+                    } else {
+                        // this.$log.info('ecomp::dashboard-service::saveCommonWidgetData Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        
+        
+        removeCommonWidgetData(widgetToRemove){
+            let deferred = this.$q.defer();
+            // this.$log.info('ecomp::dashboard-service::removeCommonWidgetData');
+            // this.$log.debug('ecomp::dashboard-service::removeCommonWidgetData with:', widgetToRemove);
+            this.$http({
+                method: "POST",
+                url: this.conf.api.deleteCommonWidget,
+                data: widgetToRemove,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+            		// this.$log.info(res.data);
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ecomp::dashboard-service::saveCommonWidgetData Failed");
+                    } else {
+                        // this.$log.info('ecomp::dashboard-service::saveCommonWidgetData Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        getSearchAllByStringResults(searchStr) {
+        	// this.$log.info('ecomp::getSearchAllByStringResults::getting search by string results');
+            let deferred = this.$q.defer();
+            let url = this.conf.api.getSearchAllByStringResults;
+            
+            this.$http({
+                    method: "GET",
+                    url : url,
+                    params : {
+                    	'searchString' : searchStr
+                    },
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ecomp::dashboard-service::getSearchAllByStringResults Failed");
+                    } else {
+                        //this.searchResults = res.data;
+                        // this.$log.info('ecomp::dashboard-service::getSearchAllByStringResults Succeeded');
+                        deferred.resolve(res.data.response);
+                    }
+                }).catch( status => {
+                    this.$log.error('ecomp::getSearchAllByStringResults error');
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        	
+        }
+        
+        getOnlineUserUpdateRate() {
+            let deferred = this.$q.defer();
+            let url = this.conf.api.onlineUserUpdateRate;
+            this.$http({
+                    method: "GET",
+                    url: url,
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                	if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ecomp::dashboard-service::getOnlineUserUpdateRate Failed");
+                    } else {
+                    	// this.$log.info('ecomp::dashboard-service::getOnlineUserUpdateRate Succeeded',res);
+                        deferred.resolve(res.data);
+                    }
+                }).catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+    
+    }
+    
+    DashboardService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4'];
+    angular.module('ecompApp').service('dashboardService', DashboardService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/external-request-access-service/external-request-access-service.js b/ecomp-portal-FE-common/client/app/services/external-request-access-service/external-request-access-service.js
index 0ef930c6..3be977b9 100644
--- a/ecomp-portal-FE-common/client/app/services/external-request-access-service/external-request-access-service.js
+++ b/ecomp-portal-FE-common/client/app/services/external-request-access-service/external-request-access-service.js
@@ -1,63 +1,63 @@
-/*-

- * ================================================================================

- * 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 () {

-    class ExternalRequestAccessService {

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;

-        }

-

-        getExternalRequestAccessServiceInfo() {

-            let deferred = this.$q.defer();

-            var _this = this;

-            let url = this.conf.api.externalRequestAccessSystem;

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: url,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                	if (res == null || res.data == null || _this.utilsService.isValidJSON(res.data) == false) {

-                        deferred.reject("ExternalRequestAccessService::getExternalRequestAccessServiceInfo Failed");

-                    }else{

-                    deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('ExternalRequestAccessService::getExternalRequestAccessServiceInfo Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-

-        }

-    }

-    ExternalRequestAccessService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('ExternalRequestAccessService', ExternalRequestAccessService)

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class ExternalRequestAccessService {
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;
+        }
+
+        getExternalRequestAccessServiceInfo() {
+            let deferred = this.$q.defer();
+            var _this = this;
+            let url = this.conf.api.externalRequestAccessSystem;
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: url,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                	if (res == null || res.data == null || _this.utilsService.isValidJSON(res.data) == false) {
+                        deferred.reject("ExternalRequestAccessService::getExternalRequestAccessServiceInfo Failed");
+                    }else{
+                    deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('ExternalRequestAccessService::getExternalRequestAccessServiceInfo Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+
+        }
+    }
+    ExternalRequestAccessService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('ExternalRequestAccessService', ExternalRequestAccessService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/global-constants/global-constants.js b/ecomp-portal-FE-common/client/app/services/global-constants/global-constants.js
index 3e3e1a5f..0bfbe531 100644
--- a/ecomp-portal-FE-common/client/app/services/global-constants/global-constants.js
+++ b/ecomp-portal-FE-common/client/app/services/global-constants/global-constants.js
@@ -1,23 +1,23 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 1/21/16.

- */

-angular.module('ecompApp').value('ECOMP_URL_REGEX', /^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i);

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 1/21/16.
+ */
+angular.module('ecompApp').value('ECOMP_URL_REGEX', /^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i);
diff --git a/ecomp-portal-FE-common/client/app/services/manifest/manifest.service.js b/ecomp-portal-FE-common/client/app/services/manifest/manifest.service.js
index 120cb640..89709a84 100644
--- a/ecomp-portal-FE-common/client/app/services/manifest/manifest.service.js
+++ b/ecomp-portal-FE-common/client/app/services/manifest/manifest.service.js
@@ -1,64 +1,64 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by mlittle on 9/9/2016.

- */

-'use strict';

-

-(function () {

-    class ManifestService {

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;

-        }

-

-        getManifest() {

-            let deferred = this.$q.defer();

-            this.$http({

-                method: "GET",

-                url: this.conf.api.getManifest,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                if (this.utilsService.isValidJSON(res)== false) {

-                    this.$log.error('ManifestService.getManifest failed: ');

-                    deferred.reject('ManifestService.getManifest: response.data null or not object');

-                } else {

-                    // this.$log.info('ManifestService.getManifest Succeeded');

-                    // this.$log.debug('ManifestService.getManifest: ', JSON.stringify(res))

-                    deferred.resolve(res.data);

-                }

-            }).catch( status => {

-                this.$log.error('ManifestService.getManifest failed: ' + status.data);

-                deferred.reject(status);

-            });

-            return deferred.promise;

-        }

-

-    }

-    ManifestService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4', 'utilsService'];

-    angular.module('ecompApp').service('manifestService', ManifestService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by mlittle on 9/9/2016.
+ */
+'use strict';
+
+(function () {
+    class ManifestService {
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;
+        }
+
+        getManifest() {
+            let deferred = this.$q.defer();
+            this.$http({
+                method: "GET",
+                url: this.conf.api.getManifest,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                if (this.utilsService.isValidJSON(res)== false) {
+                    this.$log.error('ManifestService.getManifest failed: ');
+                    deferred.reject('ManifestService.getManifest: response.data null or not object');
+                } else {
+                    // this.$log.info('ManifestService.getManifest Succeeded');
+                    // this.$log.debug('ManifestService.getManifest: ', JSON.stringify(res))
+                    deferred.resolve(res.data);
+                }
+            }).catch( status => {
+                this.$log.error('ManifestService.getManifest failed: ' + status.data);
+                deferred.reject(status);
+            });
+            return deferred.promise;
+        }
+
+    }
+    ManifestService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4', 'utilsService'];
+    angular.module('ecompApp').service('manifestService', ManifestService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/menus/menus.service.js b/ecomp-portal-FE-common/client/app/services/menus/menus.service.js
index 6cc0eff9..957cb6d8 100644
--- a/ecomp-portal-FE-common/client/app/services/menus/menus.service.js
+++ b/ecomp-portal-FE-common/client/app/services/menus/menus.service.js
@@ -56,7 +56,34 @@
 
       return deferred.promise;
     }
-      
+
+    getEcompPortalTitle () {
+    	let deferred = this.$q.defer();
+    	this.$http({
+    		method: 'GET',
+    		url: this.conf.api.ecompTitle,
+    		cache: false,
+    		headers: {
+    			'X-ECOMP-RequestID':this.uuid.generate()
+    		}
+    	}).then( res => {
+    		if (res.data==null || !this.utilsService.isValidJSON(res.data)) { 			
+    			deferred.reject('MenusService::getEcompPortalTitle rest call failed');
+    		} else {
+    			if(res.data.status!='OK' && res.data.message!=null)
+        			deferred.reject('MenusService::getEcompPortalTitle rest call failed ' + res.data.message);
+    			else
+    				deferred.resolve(res.data);
+    		}
+    	})
+    	.catch( status => {
+    		this.$log.error('MenusService::getEcompPortalTitle rejection:' + status);
+    		deferred.reject(status);
+    	});
+
+    	return deferred.promise;
+    }
+
     getFavoriteItems() {
       let deferred = this.$q.defer();
       // this.$log.info('MenusService::getFavoriteItems via REST API');
diff --git a/ecomp-portal-FE-common/client/app/services/microservice/microservice.service.js b/ecomp-portal-FE-common/client/app/services/microservice/microservice.service.js
index cb27cd4c..393e7ccb 100644
--- a/ecomp-portal-FE-common/client/app/services/microservice/microservice.service.js
+++ b/ecomp-portal-FE-common/client/app/services/microservice/microservice.service.js
@@ -1,218 +1,218 @@
-/*-

- * ================================================================================

- * 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 () {

-    class MicroserviceService {

-        constructor($q, $log, $http, conf,uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;   

-        }

-        

-        createService(newService) {

-        	let deferred = this.$q.defer();

-        	this.$http({

-                method: "POST",

-                url: this.conf.api.widgetCommon,

-                data: newService,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::createService Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::createService Failed: Result or result.data is null");

-                } else if (!this.utilsService.isValidJSON(res.data)) {

-                 	this.$log.error('MicroserviceService::createService Failed: Invalid JSON format');

-                    deferred.reject("MicroserviceService::createService Failed: Invalid JSON format");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        

-        updateService(serviceId, newService) {

-        	let deferred = this.$q.defer();

-        	this.$http({

-                method: "PUT",

-                url: this.conf.api.widgetCommon + "/" + serviceId,

-                data: newService,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::updateService Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::updateService Failed: Result or result.data is null");

-                } else if (!this.utilsService.isValidJSON(res.data)) {

-                 	this.$log.error('MicroserviceService::updateService Failed: Invalid JSON format');

-                    deferred.reject("MicroserviceService::updateService Failed: Invalid JSON format");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        deleteService(serviceId) {

-        	let deferred = this.$q.defer();

-        	this.$http({

-                method: "DELETE",

-                url: this.conf.api.widgetCommon + "/" + serviceId,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::deleteService Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::deleteService Failed: Result or result.data is null");

-                } else if (!this.utilsService.isValidJSON(res.data)) {

-                 	this.$log.error('MicroserviceService::deleteService Failed: Invalid JSON format');

-                    deferred.reject("MicroserviceService::deleteService Failed: Invalid JSON format");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        getServiceList() {

-          	let deferred = this.$q.defer();

-        	this.$http({

-                method: "GET",

-                url: this.conf.api.widgetCommon,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::getServiceList Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::getServiceList Failed: Result or result.data is null");

-                } else if (!this.utilsService.isValidJSON(res.data)) {

-                 	this.$log.error('MicroserviceService::getServiceList Failed: Invalid JSON format');

-                    deferred.reject("MicroserviceService::getServiceList Failed: Invalid JSON format");

-                }  else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        getWidgetListByService(serviceId) {

-          	let deferred = this.$q.defer();

-        	this.$http({

-                method: "GET",

-                url: this.conf.api.widgetCommon + '/' + serviceId,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::getWidgetListByService Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::getWidgetListByService Failed: Result or result.data is null");

-                } else if (!this.utilsService.isValidJSON(res.data)) {

-                 	this.$log.error('MicroserviceService::getWidgetListByService Failed: Invalid JSON format');

-                    deferred.reject("MicroserviceService::getWidgetListByService Failed: Invalid JSON format");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        getUserParameterById(paramId){

-        	let deferred = this.$q.defer();

-        	this.$http({

-                method: "GET",

-                url: this.conf.api.widgetCommon + '/services/' +  paramId,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::getUserParameterById Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::getUserParameterById Failed: Result or result.data is null");

-                } else if (!this.utilsService.isValidJSON(res.data)) {

-                 	this.$log.error('MicroserviceService::getUserParameterById Failed: Invalid JSON format');

-                    deferred.reject("MicroserviceService::getUserParameterById Failed: Invalid JSON format");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        deleteUserParameterById(paramId){

-        	let deferred = this.$q.defer();

-        	this.$http({

-                method: "DELETE",

-                url: this.conf.api.widgetCommon + '/services/' +  paramId,

-                cache: false,

-                headers:{

-            		'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-        	 		this.$log.error('MicroserviceService::deleteUserParameterById Failed: Result or result.data is null');

-                     deferred.reject("MicroserviceService::deleteUserParameterById Failed: Result or result.data is null");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-    }

-    

-    MicroserviceService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('microserviceService', MicroserviceService)

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class MicroserviceService {
+        constructor($q, $log, $http, conf,uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;   
+        }
+        
+        createService(newService) {
+        	let deferred = this.$q.defer();
+        	this.$http({
+                method: "POST",
+                url: this.conf.api.widgetCommon,
+                data: newService,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::createService Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::createService Failed: Result or result.data is null");
+                } else if (!this.utilsService.isValidJSON(res.data)) {
+                 	this.$log.error('MicroserviceService::createService Failed: Invalid JSON format');
+                    deferred.reject("MicroserviceService::createService Failed: Invalid JSON format");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        
+        updateService(serviceId, newService) {
+        	let deferred = this.$q.defer();
+        	this.$http({
+                method: "PUT",
+                url: this.conf.api.widgetCommon + "/" + serviceId,
+                data: newService,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::updateService Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::updateService Failed: Result or result.data is null");
+                } else if (!this.utilsService.isValidJSON(res.data)) {
+                 	this.$log.error('MicroserviceService::updateService Failed: Invalid JSON format');
+                    deferred.reject("MicroserviceService::updateService Failed: Invalid JSON format");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        deleteService(serviceId) {
+        	let deferred = this.$q.defer();
+        	this.$http({
+                method: "DELETE",
+                url: this.conf.api.widgetCommon + "/" + serviceId,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::deleteService Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::deleteService Failed: Result or result.data is null");
+                } else if (!this.utilsService.isValidJSON(res.data)) {
+                 	this.$log.error('MicroserviceService::deleteService Failed: Invalid JSON format');
+                    deferred.reject("MicroserviceService::deleteService Failed: Invalid JSON format");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        getServiceList() {
+          	let deferred = this.$q.defer();
+        	this.$http({
+                method: "GET",
+                url: this.conf.api.widgetCommon,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::getServiceList Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::getServiceList Failed: Result or result.data is null");
+                } else if (!this.utilsService.isValidJSON(res.data)) {
+                 	this.$log.error('MicroserviceService::getServiceList Failed: Invalid JSON format');
+                    deferred.reject("MicroserviceService::getServiceList Failed: Invalid JSON format");
+                }  else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        getWidgetListByService(serviceId) {
+          	let deferred = this.$q.defer();
+        	this.$http({
+                method: "GET",
+                url: this.conf.api.widgetCommon + '/' + serviceId,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::getWidgetListByService Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::getWidgetListByService Failed: Result or result.data is null");
+                } else if (!this.utilsService.isValidJSON(res.data)) {
+                 	this.$log.error('MicroserviceService::getWidgetListByService Failed: Invalid JSON format');
+                    deferred.reject("MicroserviceService::getWidgetListByService Failed: Invalid JSON format");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        getUserParameterById(paramId){
+        	let deferred = this.$q.defer();
+        	this.$http({
+                method: "GET",
+                url: this.conf.api.widgetCommon + '/services/' +  paramId,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::getUserParameterById Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::getUserParameterById Failed: Result or result.data is null");
+                } else if (!this.utilsService.isValidJSON(res.data)) {
+                 	this.$log.error('MicroserviceService::getUserParameterById Failed: Invalid JSON format');
+                    deferred.reject("MicroserviceService::getUserParameterById Failed: Invalid JSON format");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        deleteUserParameterById(paramId){
+        	let deferred = this.$q.defer();
+        	this.$http({
+                method: "DELETE",
+                url: this.conf.api.widgetCommon + '/services/' +  paramId,
+                cache: false,
+                headers:{
+            		'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+        	 		this.$log.error('MicroserviceService::deleteUserParameterById Failed: Result or result.data is null');
+                     deferred.reject("MicroserviceService::deleteUserParameterById Failed: Result or result.data is null");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+    }
+    
+    MicroserviceService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('microserviceService', MicroserviceService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/notification/notification.service.js b/ecomp-portal-FE-common/client/app/services/notification/notification.service.js
index cf180e83..d7d46079 100644
--- a/ecomp-portal-FE-common/client/app/services/notification/notification.service.js
+++ b/ecomp-portal-FE-common/client/app/services/notification/notification.service.js
@@ -1,322 +1,322 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by wl849v on 12/14/2016.

- */

-'use strict';

-(function () {

-    class NotificationService {

-    	constructor($q, $log, $http, conf, uuid,utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.notificationCount = {count:0};

-            this.refreshCount = 0;

-            this.maxCount = 0;

-            this.utilsService = utilsService;            

-        }   	

-        getNotificationCount() {

-        	 return this.notificationCount;

-        }

-        setNotificationCount(count) {

-        	this.notificationCount.count = count;

-        }

-        getRefreshCount() {

-            return this.refreshCount;

-        }

-        setRefreshCount(count){

-            this.refreshCount = count;

-        }

-        setMaxRefreshCount(count){

-            this.maxCount = count;

-        }

-        decrementRefreshCount(){

-            this.refreshCount = this.refreshCount - 1;

-        }

-        

-        getNotificationRate() {

-            let deferred = this.$q.defer();

-            let url = this.conf.api.notificationUpdateRate;

-            this.$http({

-                    method: "GET",

-                    url: url,

-                    cache: false,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                	if (Object.keys(res.data).length == 0) {

-                        deferred.reject("ecomp::NotificationService::getNotificationRate Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                }).catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        getNotification(){

-    		let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.getNotifications,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success           	

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('NotificationService::getNotification Failed');

-                        deferred.reject("NotificationService::getNotification Failed");

-                    } else {

-                        deferred.resolve(res);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::getNotification Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-    	}

-        getNotificationHistory(){

-    		let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.getNotificationHistory,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success           	

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('NotificationService::getNotification Failed');

-                        deferred.reject("NotificationService::getNotification Failed");

-                    } else {

-                        deferred.resolve(res);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::getNotification Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-    	}

-        

-        getAdminNotification(){

-    		let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.getAdminNotifications,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success           	

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('NotificationService::getAdminNotification Failed');

-                        deferred.reject("NotificationService::getAdminNotification Failed");

-                    } else {

-                        deferred.resolve(res);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::getAdminNotification Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-    	}

-

-        

-        getMessageRecipients(notificationId){

-    		let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                   url: this.conf.api.getMessageRecipients+"?notificationId="+notificationId,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success           	

-                    if (this.utilsService.isValidJSON(res.data)=== false) {

-                    	this.$log.error('NotificationService::getMessageRecipients Failed');

-                        deferred.reject("NotificationService::getMessageRecipients Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::getMappedRecipients Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;

-    	}

-        

-        getAppRoleIds(){

-    		let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.getAllAppRoleIds,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success           	

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('NotificationService::getAppRoleIds Failed');

-                        deferred.reject("NotificationService::getAppRoleIds Failed");

-                    } else {

-                        deferred.resolve(res);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::getAppRoleIds Failed', status);

-                    deferred.reject(status);

-                });           

-            return deferred.promise;

-    	}

-

-        getNotificationRoles(notificationId){

-    		let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.getNotificationRoles + '/'+notificationId+'/roles',

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success           	

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('NotificationService::getAdminNotification Failed');

-                        deferred.reject("NotificationService::getAdminNotification Failed");

-                    } else {

-                        deferred.resolve(res);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::getAdminNotification Failed', status);

-                    deferred.reject(status);

-                });           

-            return deferred.promise;

-    	}

-

-        addAdminNotification(newAdminNotif){

-            let deferred = this.$q.defer();

-            // this.$log.debug('applications-service::addOnboardingApp with:', newApp);

-

-            this.$http({

-                method: "POST",

-                url: this.conf.api.saveNotification,

-                data: newAdminNotif,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                	// But don't declare an empty list to be an error.

-                    if (res == null || res.data == null) {

-                        deferred.reject("NotificationService::addAdminNotification Failed");

-                    } else {

-                        // this.$log.info('NotificationService::addAdminNotification Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        updateAdminNotification(adminNotif){

-            let deferred = this.$q.defer();

-            this.$http({

-                method: "POST",

-                url: this.conf.api.saveNotification,

-                data: adminNotif,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                	// But don't declare an empty list to be an error.

-                    if (res == null || res.data == null) {

-                        deferred.reject("NotificationService::updateAdminNotification Failed");

-                    } else {

-                        // this.$log.info('NotificationService::updateAdminNotification Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        setNotificationRead(notificationId){

-        	let deferred = this.$q.defer();

-            this.$http({

-                    method: "GET",

-                    cache: false,

-                    url: this.conf.api.notificationRead+"?notificationId="+notificationId,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                })

-                .then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)=== false) {

-                    	this.$log.error('NotificationService::setNotificationRead Failed');

-                        deferred.reject("NotificationService::setNotificationRead Failed");

-                    } else {

-                        deferred.resolve(res);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('NotificationService::setNotificationRead Failed', status);

-                    deferred.reject(status);

-                });

-           

-            return deferred.promise;	

-        }

-    }

-    NotificationService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4','utilsService'];

-    angular.module('ecompApp').service('notificationService', NotificationService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by wl849v on 12/14/2016.
+ */
+'use strict';
+(function () {
+    class NotificationService {
+    	constructor($q, $log, $http, conf, uuid,utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.notificationCount = {count:0};
+            this.refreshCount = 0;
+            this.maxCount = 0;
+            this.utilsService = utilsService;            
+        }   	
+        getNotificationCount() {
+        	 return this.notificationCount;
+        }
+        setNotificationCount(count) {
+        	this.notificationCount.count = count;
+        }
+        getRefreshCount() {
+            return this.refreshCount;
+        }
+        setRefreshCount(count){
+            this.refreshCount = count;
+        }
+        setMaxRefreshCount(count){
+            this.maxCount = count;
+        }
+        decrementRefreshCount(){
+            this.refreshCount = this.refreshCount - 1;
+        }
+        
+        getNotificationRate() {
+            let deferred = this.$q.defer();
+            let url = this.conf.api.notificationUpdateRate;
+            this.$http({
+                    method: "GET",
+                    url: url,
+                    cache: false,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                	if (Object.keys(res.data).length == 0) {
+                        deferred.reject("ecomp::NotificationService::getNotificationRate Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                }).catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        getNotification(){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.getNotifications,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('NotificationService::getNotification Failed');
+                        deferred.reject("NotificationService::getNotification Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getNotification Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+    	}
+        getNotificationHistory(){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.getNotificationHistory,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('NotificationService::getNotification Failed');
+                        deferred.reject("NotificationService::getNotification Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getNotification Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+    	}
+        
+        getAdminNotification(){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.getAdminNotifications,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('NotificationService::getAdminNotification Failed');
+                        deferred.reject("NotificationService::getAdminNotification Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getAdminNotification Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+    	}
+
+        
+        getMessageRecipients(notificationId){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                   url: this.conf.api.getMessageRecipients+"?notificationId="+notificationId,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res.data)=== false) {
+                    	this.$log.error('NotificationService::getMessageRecipients Failed');
+                        deferred.reject("NotificationService::getMessageRecipients Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getMappedRecipients Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+    	}
+        
+        getAppRoleIds(){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.getAllAppRoleIds,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('NotificationService::getAppRoleIds Failed');
+                        deferred.reject("NotificationService::getAppRoleIds Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getAppRoleIds Failed', status);
+                    deferred.reject(status);
+                });           
+            return deferred.promise;
+    	}
+
+        getNotificationRoles(notificationId){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.getNotificationRoles + '/'+notificationId+'/roles',
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('NotificationService::getAdminNotification Failed');
+                        deferred.reject("NotificationService::getAdminNotification Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getAdminNotification Failed', status);
+                    deferred.reject(status);
+                });           
+            return deferred.promise;
+    	}
+
+        addAdminNotification(newAdminNotif){
+            let deferred = this.$q.defer();
+            // this.$log.debug('applications-service::addOnboardingApp with:', newApp);
+
+            this.$http({
+                method: "POST",
+                url: this.conf.api.saveNotification,
+                data: newAdminNotif,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                	// But don't declare an empty list to be an error.
+                    if (res == null || res.data == null) {
+                        deferred.reject("NotificationService::addAdminNotification Failed");
+                    } else {
+                        // this.$log.info('NotificationService::addAdminNotification Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        updateAdminNotification(adminNotif){
+            let deferred = this.$q.defer();
+            this.$http({
+                method: "POST",
+                url: this.conf.api.saveNotification,
+                data: adminNotif,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                	// But don't declare an empty list to be an error.
+                    if (res == null || res.data == null) {
+                        deferred.reject("NotificationService::updateAdminNotification Failed");
+                    } else {
+                        // this.$log.info('NotificationService::updateAdminNotification Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        setNotificationRead(notificationId){
+        	let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.notificationRead+"?notificationId="+notificationId,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)=== false) {
+                    	this.$log.error('NotificationService::setNotificationRead Failed');
+                        deferred.reject("NotificationService::setNotificationRead Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::setNotificationRead Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;	
+        }
+    }
+    NotificationService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4','utilsService'];
+    angular.module('ecompApp').service('notificationService', NotificationService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/recommendation/recommendation.service.js b/ecomp-portal-FE-common/client/app/services/recommendation/recommendation.service.js
new file mode 100644
index 00000000..aa2a4631
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/services/recommendation/recommendation.service.js
@@ -0,0 +1,88 @@
+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by wl849v on 12/14/2016.
+ */
+'use strict';
+(function () {
+    class RecommendationService {
+    	constructor($q, $log, $http, conf, uuid,utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.recommendationCount = {count:0};
+            this.refreshCount = 0;
+            this.maxCount = 0;
+            this.utilsService = utilsService;            
+        }   	
+        getRecommendationCount() {
+         	 return this.recommendationCount;
+         }
+        setRecommendationCount(count) {
+        	this.recommendationCount.count = count;
+        }
+        getRefreshCount() {
+            return this.refreshCount;
+        }
+        setRefreshCount(count){
+            this.refreshCount = count;
+        }
+        setMaxRefreshCount(count){
+            this.maxCount = count;
+        }
+        decrementRefreshCount(){
+            this.refreshCount = this.refreshCount - 1;
+        }
+        
+        
+        getRecommendations(){
+    		let deferred = this.$q.defer();
+            this.$http({
+                    method: "GET",
+                    cache: false,
+                    url: this.conf.api.getRecommendations,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                })
+                .then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success           	
+                    if (this.utilsService.isValidJSON(res.data)=== false) {
+                    	this.$log.error('NotificationService::getRecommendations Failed');
+                        deferred.reject("NotificationService::getRecommendations Failed");
+                    } else {
+                        deferred.resolve(res);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('NotificationService::getRecommendations Failed', status);
+                    deferred.reject(status);
+                });
+           
+            return deferred.promise;
+    	}
+        
+       
+    }
+    RecommendationService.$inject = ['$q', '$log', '$http', 'conf', 'uuid4','utilsService'];
+    angular.module('ecompApp').service('recommendationService', RecommendationService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/role/role.service.js b/ecomp-portal-FE-common/client/app/services/role/role.service.js
index f8fee136..ee2cd536 100644
--- a/ecomp-portal-FE-common/client/app/services/role/role.service.js
+++ b/ecomp-portal-FE-common/client/app/services/role/role.service.js
@@ -1,190 +1,190 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-app.factory('RoleService', function ($http, $q, conf,uuid4) {

-	return {

-		getRoles: function() {

-			return $http.get(conf.api.getRoles,{

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':uuid4.generate()

-                }

-            })

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		saveRoleFunction: function() {

-			return $http.post(conf.api.saveRoleFuncion)

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getRoleFunctionList: function() {

-			return $http.get(conf.api.getRoleFunctions,{

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':uuid4.generate()

-                }

-            })

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getFnMenuItems: function(){

-			

-			return $http.get('admin_fn_menu')

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});			

-		},

-

-		getCacheRegions: function() {

-			return $http.get('get_regions')

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-	

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getUsageList: function() {

-			return $http.get('get_usage_list')

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-	

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getBroadcastList: function() {

-			return $http.get('get_broadcast_list')

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-	

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getBroadcast: function(messageLocationId, messageLocation, messageId) {

-			return $http.get('get_broadcast?message_location_id='+messageLocationId + '&message_location=' + messageLocation + ((messageId != null) ? '&message_id=' + messageId : ''))

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-	

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getCollaborateList: function() {

-			return $http.get('get_collaborate_list')

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-	

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		},

-		

-		getRole: function(roleId) {

-			

-			return $http.get(conf.api.getRole + '?role_id=' + roleId,{

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':uuid4.generate()

-                }

-            })

-			.then(function(response) {

-				if (typeof response.data === 'object') {

-					return response.data;

-				} else {

-					return $q.reject(response.data);

-				}

-	

-			}, function(response) {

-				// something went wrong

-				return $q.reject(response.data);

-			});

-		}

-	};

-});

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+app.factory('RoleService', function ($http, $q, conf,uuid4) {
+	return {
+		getRoles: function() {
+			return $http.get(conf.api.getRoles,{
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':uuid4.generate()
+                }
+            })
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		saveRoleFunction: function() {
+			return $http.post(conf.api.saveRoleFuncion)
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getRoleFunctionList: function() {
+			return $http.get(conf.api.getRoleFunctions,{
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':uuid4.generate()
+                }
+            })
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getFnMenuItems: function(){
+			
+			return $http.get('admin_fn_menu')
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});			
+		},
+
+		getCacheRegions: function() {
+			return $http.get('get_regions')
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+	
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getUsageList: function() {
+			return $http.get('get_usage_list')
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+	
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getBroadcastList: function() {
+			return $http.get('get_broadcast_list')
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+	
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getBroadcast: function(messageLocationId, messageLocation, messageId) {
+			return $http.get('get_broadcast?message_location_id='+messageLocationId + '&message_location=' + messageLocation + ((messageId != null) ? '&message_id=' + messageId : ''))
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+	
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getCollaborateList: function() {
+			return $http.get('get_collaborate_list')
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+	
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		},
+		
+		getRole: function(roleId) {
+			
+			return $http.get(conf.api.getRole + '?role_id=' + roleId,{
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':uuid4.generate()
+                }
+            })
+			.then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject(response.data);
+				}
+	
+			}, function(response) {
+				// something went wrong
+				return $q.reject(response.data);
+			});
+		}
+	};
+});
diff --git a/ecomp-portal-FE-common/client/app/services/users/users.service.js b/ecomp-portal-FE-common/client/app/services/users/users.service.js
index 894aac0d..808a6632 100644
--- a/ecomp-portal-FE-common/client/app/services/users/users.service.js
+++ b/ecomp-portal-FE-common/client/app/services/users/users.service.js
@@ -1,215 +1,268 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by doritrieur on 12/8/15.

- */

-'use strict';

-

-(function () {

-    class UsersService {

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;

-        }

-

-

-        searchUsers(queryString) {

-            let canceller = this.$q.defer();

-            let isActive = false;

-

-            let cancel = () => {

-                if(isActive){

-                    this.$log.debug('UsersService::searchUsers: canceling the request');

-                    canceller.resolve();

-                }

-            };

-

-            let promise = () => {

-                let deferred = this.$q.defer();

-                if(!queryString){

-                    return deferred.reject(new Error('query string is mandatory'));

-                }

-                isActive = true;

-                this.$http({

-                    method: 'GET',

-                    url: this.conf.api.queryUsers,

-                    params: {search: queryString},

-                    cache: false,

-                    timeout: canceller.promise,

-                    headers: {

-                        'X-ECOMP-RequestID':this.uuid.generate()

-                    }

-                }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('UsersService::queryUsers Failed');

-                    } else {

-                        //this.$log.info('UsersService::queryUsers Succeeded');

-                        isActive = false;

-                        deferred.resolve(res.data);

-                    }

-                }).catch( status => {

-                    isActive = false;

-                    deferred.reject('UsersService::searchUsers:: API Failed with status: ' + status);

-                });

-                return deferred.promise;

-            };

-

-            return {

-                cancel: cancel,

-                promise: promise

-            };

-

-        }

-

-        getAccountUsers(appId) {

-            let deferred = this.$q.defer();

-            let log = this.$log;

-            // this.$log.debug('UsersService::getAccountUsers for appId: ' + appId);

-

-            let url = this.conf.api.accountUsers.replace(':appId', appId);

-            this.$http({

-                method: 'GET',

-                url: url,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('UsersService::getAccountUsers for appId Failed');

-                    } else {

-                        // log.info('UsersService::getAccountUsers(appId) Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                    log.error('getAccountUsers(appId) $http error = ', status);

-                    deferred.reject(status);

-                });

-

-            return deferred.promise;

-        }

-

-        getUserAppRoles(appid, orgUserId){

-//            let deferred = this.$q.defer();

-        	let canceller = this.$q.defer();

-            let isActive = false;

-

-            let cancel = () => {

-                if(isActive){

-                    this.$log.debug('UsersService::getUserAppRoles: canceling the request');

-                    canceller.resolve();

-                }

-            };

-

-            // this.$log.info('UsersService::getUserAppRoles');

-

-            let promise = () => {

-                let deferred = this.$q.defer();

-                isActive = false;

-            this.$http({

-                method: 'GET',

-                url: this.conf.api.userAppRoles,

-                params: {user: orgUserId, app: appid},

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    //this.$log.debug('getUserAppRoles response: ', JSON.stringify(res))

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('UsersService::getUserAppRoles: Failed');

-                    } else {

-                    	isActive = false;

-                        //this.$log.info('UsersService::getUserAppRoles: Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	isActive = false;

-                    deferred.reject(status);

-                });

-

-            return deferred.promise;

-            };

-            

-            return {

-                cancel: cancel,

-                promise: promise

-            };

-        }

-

-        updateUserAppRoles(newUserAppRoles) {

-//            let deferred = this.$q.defer();

-            let canceller = this.$q.defer();

-            let isActive = false;

-

-            let cancel = () => {

-                if(isActive){

-                    this.$log.debug('UsersService::updateUserAppRoles: canceling the request');

-                    canceller.resolve();

-                }

-            };

-

-            // this.$log.info('UsersService::updateUserAppRoles');

-            let promise = () => {

-                let deferred = this.$q.defer();

-            this.$http({

-                method: 'PUT',

-                url: this.conf.api.userAppRoles,

-                data: newUserAppRoles,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                // this.$log.debug('getUserAppRoles response: ', JSON.stringify(res))

-                // If response comes back as a redirected HTML page which IS NOT a success

-                if (this.utilsService.isValidJSON(res)== false) {

-                    deferred.reject('UsersService::updateUserAppRoles: Failed');

-                } else {

-                    // this.$log.info('UsersService::updateUserAppRoles: Succeeded');

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch( status => {

-                deferred.reject(status);

-            });

-

-            return deferred.promise;

-            };

-            

-            return {

-                cancel: cancel,

-                promise: promise

-            };

-

-        }

-

-    }

-    UsersService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('usersService', UsersService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by doritrieur on 12/8/15.
+ */
+'use strict';
+
+(function () {
+    class UsersService {
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;
+        }
+
+
+        searchUsers(queryString) {
+            let canceller = this.$q.defer();
+            let isActive = false;
+
+            let cancel = () => {
+                if(isActive){
+                    this.$log.debug('UsersService::searchUsers: canceling the request');
+                    canceller.resolve();
+                }
+            };
+
+            let promise = () => {
+                let deferred = this.$q.defer();
+                if(!queryString){
+                    return deferred.reject(new Error('query string is mandatory'));
+                }
+                isActive = true;
+                this.$http({
+                    method: 'GET',
+                    url: this.conf.api.queryUsers,
+                    params: {search: queryString},
+                    cache: false,
+                    timeout: canceller.promise,
+                    headers: {
+                        'X-ECOMP-RequestID':this.uuid.generate()
+                    }
+                }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('UsersService::queryUsers Failed');
+                    } else {
+                        //this.$log.info('UsersService::queryUsers Succeeded');
+                        isActive = false;
+                        deferred.resolve(res.data);
+                    }
+                }).catch( status => {
+                    isActive = false;
+                    deferred.reject('UsersService::searchUsers:: API Failed with status: ' + status);
+                });
+                return deferred.promise;
+            };
+
+            return {
+                cancel: cancel,
+                promise: promise
+            };
+
+        }
+
+        getAccountUsers(appId) {
+            let deferred = this.$q.defer();
+            let log = this.$log;
+            // this.$log.debug('UsersService::getAccountUsers for appId: ' + appId);
+
+            let url = this.conf.api.accountUsers.replace(':appId', appId);
+            this.$http({
+                method: 'GET',
+                url: url,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('UsersService::getAccountUsers for appId Failed');
+                    } else {
+                        // log.info('UsersService::getAccountUsers(appId) Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                    log.error('getAccountUsers(appId) $http error = ', status);
+                    deferred.reject(status);
+                });
+
+            return deferred.promise;
+        }
+
+        getUserAppRoles(appid, orgUserId, extRequestValue){
+        	let canceller = this.$q.defer();
+            let isActive = false;
+
+            let cancel = () => {
+                if(isActive){
+                    this.$log.debug('UsersService::getUserAppRoles: canceling the request');
+                    canceller.resolve();
+                }
+            };
+
+            let promise = () => {
+                let deferred = this.$q.defer();
+                isActive = false;
+            this.$http({
+                method: 'GET',
+                url: this.conf.api.userAppRoles,
+                params: {user: orgUserId, app: appid, externalRequest: extRequestValue},
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    if (!this.utilsService.isValidJSON(res.data)) {
+                        deferred.reject('UsersService::getUserAppRoles: Failed');
+                    } else {
+                    	isActive = false;
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	isActive = false;
+                    deferred.reject(status);
+                });
+
+            return deferred.promise;
+            };
+            
+            return {
+                cancel: cancel,
+                promise: promise
+            };
+        }
+
+        updateUserAppRoles(newUserAppRoles) {
+//            let deferred = this.$q.defer();
+            let canceller = this.$q.defer();
+            let isActive = false;
+
+            let cancel = () => {
+                if(isActive){
+                    this.$log.debug('UsersService::updateUserAppRoles: canceling the request');
+                    canceller.resolve();
+                }
+            };
+
+            // this.$log.info('UsersService::updateUserAppRoles');
+            let promise = () => {
+                let deferred = this.$q.defer();
+            this.$http({
+                method: 'PUT',
+                url: this.conf.api.userAppRoles,
+                data: newUserAppRoles,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                // this.$log.debug('getUserAppRoles response: ', JSON.stringify(res))
+                // If response comes back as a redirected HTML page which IS NOT a success
+                if (this.utilsService.isValidJSON(res)== false) {
+                    deferred.reject('UsersService::updateUserAppRoles: Failed');
+                } else {
+                    // this.$log.info('UsersService::updateUserAppRoles: Succeeded');
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch( status => {
+                deferred.reject(status);
+            });
+
+            return deferred.promise;
+            };
+            
+            return {
+                cancel: cancel,
+                promise: promise
+            };
+
+        }
+        
+        getLoggedInUser () {
+        	let deferred = this.$q.defer();
+        	this.$http({
+        		method: 'GET',
+        		url: this.conf.api.loggedinUser,
+        		cache: false,
+        		headers: {
+        			'X-ECOMP-RequestID':this.uuid.generate(),
+        			'Content-Type': 'application/json'
+                },
+                data: ''
+        	}).then( res => {
+        		if (res.data==null || !this.utilsService.isValidJSON(res.data)) { 			
+        			deferred.reject('MenusService::getLoggedInUser rest call failed');
+        		} else {
+        			if(res.data.status!='OK' && res.data.message!=null)
+            			deferred.reject('MenusService::getLoggedInUser rest call failed ' + res.data.message);
+        			else
+        				deferred.resolve(res.data);
+        		}
+        	})
+        	.catch( status => {
+        		this.$log.error('MenusService::getLoggedInUser rejection:' + status);
+        		deferred.reject(status);
+        	});
+
+        	return deferred.promise;
+        }
+        
+        modifyLoggedInUser (profileDetail) {
+        	let deferred = this.$q.defer();
+        	this.$http({
+        		method: 'PUT',
+        		url: this.conf.api.modifyLoggedinUser,
+        		cache: false,
+        		headers: {
+        			'X-ECOMP-RequestID':this.uuid.generate(),
+        			'Content-Type': 'application/json'
+                },
+                data: profileDetail
+        	}).then( res => {
+        		if (res.data==null || !this.utilsService.isValidJSON(res.data)) { 			
+        			deferred.reject('MenusService::getLoggedInUser rest call failed');
+        		} else {
+        			if(res.data.status!='OK' && res.data.message!=null)
+            			deferred.reject('MenusService::getLoggedInUser rest call failed ' + res.data.message);
+        			else
+        				deferred.resolve(res.data);
+        		}
+        	})
+        	.catch( status => {
+        		console.log(status);
+        		this.$log.error('MenusService::getLoggedInUser rejection:' + status);
+        		deferred.reject(status);
+        	});
+
+        	return deferred.promise;
+        }
+
+    }
+    UsersService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('usersService', UsersService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/widgets-catalog/widgets-catalog.service.js b/ecomp-portal-FE-common/client/app/services/widgets-catalog/widgets-catalog.service.js
index 99ace1cb..c3b57e37 100644
--- a/ecomp-portal-FE-common/client/app/services/widgets-catalog/widgets-catalog.service.js
+++ b/ecomp-portal-FE-common/client/app/services/widgets-catalog/widgets-catalog.service.js
@@ -1,358 +1,358 @@
-/*-

- * ================================================================================

- * 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 () {

-	class WidgetsCatalogService {

-        constructor($q, $log, $http, conf,uuid,base64Service, beReaderService, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.base64Service = base64Service;

-            this.beReaderService = beReaderService;

-            this.utilsService = utilsService;

-        }

-        

-        getUserWidgets(loginName) {

-        	 let deferred = this.$q.defer();

-  	         this.$http({

-  	        	 method: "GET",

-	             url: this.conf.api.widgetCommon + '/widgetCatalog' + '/' + loginName,

-	             cache: false,

-	             headers: {

-	            	 'X-Widgets-Type': 'all',

-	                 'X-ECOMP-RequestID':this.uuid.generate()

-	             }

-             }).then(res => {

-        	 	if (res == null || res.data == null) {

-                     deferred.reject("WidgetsCatalogService::getUserWidgets Failed");

-                 } else {

-                     deferred.resolve(res.data);

-                 }

-             })

-             .catch(status => {

-            	 deferred.reject(status);

-	         });

-             return deferred.promise;

-        }

-

-        getManagedWidgets() {          	

-            let deferred = this.$q.defer();

-            let url = this.conf.api.widgetCommon + '/widgetCatalog';

-            this.$http({

-            	method: "GET",

-            	url: url,

-            	cache: false,

-            	headers: {

-            		'X-Widgets-Type': 'all',

-            		'X-ECOMP-RequestID':this.uuid.generate()

-            	}

-            }).then(res => {

-        	 	if (res == null || res.data == null) {

-                     deferred.reject("WidgetsCatalogService::getManagedWidgets Failed");

-                 } else {

-                     deferred.resolve(res.data);

-                 }

-             })

-             .catch(status => {

-                 deferred.reject(status);

-             });  

-            return deferred.promise;

-        }

-        

-        createWidget(newWidget, file) {

-        	console.log(newWidget);

-        	let deferred = this.$q.defer();

-        	var formData = new FormData();

-        	formData.append('file', file);

-        	this.$http({

-                method: "POST",

-                url: this.conf.api.widgetCommon + '/widgetCatalog',

-                transformRequest: angular.identity,  

-                data: formData,

-                headers:{  

-                	'Content-Type': undefined,

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                },

-                params:{

-                	'newWidget': newWidget

-                }

-            }).then(res => {

-            	if (res == null || res.data == null) {

-                    deferred.reject("WidgetsCatalogService::getManagedWidgets Failed");

-                } else {

-                    deferred.resolve(res.data);

-                }

-            })

-            .catch(errRes => {

-                deferred.reject(errRes);

-            });

-            return deferred.promise;

-        }

-        

-        updateWidgetWithFile(file, widgetId, newWidget){

-        	console.log(widgetId);

-        	let deferred = this.$q.defer();

-            var formData = new FormData();

-        	formData.append('file', file);

-    		let url = this.conf.api.widgetCommon + '/widgetCatalog/' + widgetId;

-        	this.$http({

-                method: 'POST',

-                url: url, 

-                transformRequest: angular.identity,  

-                data: formData,

-                headers: {        

-                	'Content-Type': undefined,

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                },

-        	 	params:{

-        	 		'newWidget': newWidget

-        	 	}

-            })

-            .then(res => {

-               if (res == null || res.data == null)

-            	   deferred.reject("WidgetsCatalogService::saveWidgetFile Failed");

-               else 

-            	   deferred.resolve(res.data);

-            })

-            .catch(status => {

-                 deferred.reject(status);

-             });  

-        	return deferred.promise;

-        }

-        

-        updateWidget(widgetId, widgetData) {

-            let deferred = this.$q.defer();

-            let url = this.conf.api.widgetCommon  + '/widgetCatalog' + '/' + widgetId;

-            this.$http({

-            	method: 'PUT',

-            	url: url,

-            	cache: false,

-            	data: widgetData,

-            	headers: {

-            		'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-            	}

-            })

-            .then(res => {

-            	deferred.resolve(res.data);

-            })

-            .catch(errRes => {

-            	deferred.reject(errRes);

-            });

-           

-            return deferred.promise;

-        }

-        

-        

-        deleteWidgetFile(widgetName) {

-        	let deferred = this.$q.defer();

-            this.$log.info('WidgetsCatalogService::deleteWidgetCatalog');

-            let url = this.conf.api.widgetCommon + '/doUpload' + '/' + widgetName;

-            this.$http({

-                method: "DELETE",

-                url: url,

-                cache: false,

-                headers:{  

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    deferred.resolve(res.data); 

-                })

-                .catch(status => {

-                	deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-        

-        deleteWidget(widgetId) {

-        	let deferred = this.$q.defer();

-            this.$log.info('WidgetsCatalogService::deleteWidgetCatalog');

-            let url = this.conf.api.widgetCommon + '/widgetCatalog'  + '/' + widgetId;

-            this.$http({

-                method: "DELETE",

-                url: url,

-                cache: false,

-                headers:{  

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    deferred.resolve(res.data); 

-                })

-                .catch(status => {

-                	deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-        

-        downloadWidgetFile(widgetId) {

-        	let deferred = this.$q.defer();

-            this.$log.info('WidgetsCatalogService::downloadWidgetFile');

-            let url = this.conf.api.widgetCommon + '/download/' + widgetId;

-            console.log(url);

-            this.$http({

-                method: "GET",

-                url: url,

-                cache: false,

-                responseType: "arraybuffer",

-                headers:{  

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    deferred.resolve(res.data); 

-                })

-                .catch(status => {

-                	deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-        

-        updateWidgetCatalog(appData){

-        	let deferred = this.$q.defer();

-            // Validate the request, maybe this is overkill

-            if (appData == null || appData.widgetId == null || appData.select == null) {

-            	var msg = 'WidgetCatalogService::updateAppCatalog: field appId and/or select not found';

-                this.$log.error(msg);

-                return deferred.reject(msg);

-            }

-            this.$http({

-                method: "PUT",

-                url: this.conf.api.widgetCatalogSelection,

-                data: appData,

-                headers: {

-                	 'X-Widgets-Type': 'all',

-	                 'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then( res => {

-                    // Detect non-JSON

-                    if (res == null || res.data == null) {

-                        deferred.reject("WidgetCatalogService::updateAppCatalog Failed");

-                    } else {

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch( status => {

-                	this.$log.error('WidgetCatalogService:updateAppCatalog failed: ' + status);

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-        

-        getServiceJSON(serviceId){

-        	let deferred = this.$q.defer();

-            this.$log.info('WidgetsCatalogService::getServiceJSON');

-            let url = this.conf.api.microserviceProxy + "/" + serviceId;

-            console.log(url);

-            this.$http({

-                method: "GET",

-                url: url,

-                cache: false,

-                headers:{  

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-	            	if (res == null || res == null) {

-	        	 		this.$log.error('WidgetCatalogService::getServiceJSON Failed: Result or result.data is null');

-	                    deferred.reject("WidgetCatalogService::getServiceJSON Failed: Result or result.data is null");

-	                } else{

-	                	deferred.resolve(res.data);

-	                }

-	                

-                })

-                .catch(status => {

-                	deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-        

-        getWidgetCatalogParameters(widgetId){

-        	let deferred = this.$q.defer();

-            this.$log.info('WidgetsCatalogService::getWidgetCatalogParameters');

-            let url = this.conf.api.widgetCommon + "/parameters/" + widgetId;

-            console.log(url);

-            this.$http({

-                method: "GET",

-                url: url,

-                cache: false,

-                headers:{  

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-	            	if (res == null || res.data == null) {

-	        	 		this.$log.error('WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null');

-	                    deferred.reject("WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null");

-	                } else {

-	                    deferred.resolve(res.data);

-	                }

-                })

-                .catch(status => {

-                	deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-        

-        

-        saveWidgetParameter(widgetParamObject){

-        	let deferred = this.$q.defer();

-            this.$log.info('WidgetsCatalogService::saveWidgetParameter');

-            let url = this.conf.api.widgetCommon + "/parameters";

-            this.$http({

-                method: "POST",

-                url: url,

-                cache: false,

-                data: widgetParamObject,

-                headers:{  

-                	'X-Widgets-Type': 'all',

-	                'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-	            	if (res == null || res.data == null) {

-	        	 		this.$log.error('WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null');

-	                    deferred.reject("WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null");

-	                } else {

-	                    deferred.resolve(res.data);

-	                }

-                })

-                .catch(status => {

-                	deferred.reject(status);

-                });

-           

-            return deferred.promise;

-        }

-        

-    }

-    

-    WidgetsCatalogService.$inject = ['$q', '$log', '$http', 'conf','uuid4','base64Service', 'beReaderService', 'utilsService'];

-    angular.module('ecompApp').service('widgetsCatalogService', WidgetsCatalogService)

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+	class WidgetsCatalogService {
+        constructor($q, $log, $http, conf,uuid,base64Service, beReaderService, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.base64Service = base64Service;
+            this.beReaderService = beReaderService;
+            this.utilsService = utilsService;
+        }
+        
+        getUserWidgets(loginName) {
+        	 let deferred = this.$q.defer();
+  	         this.$http({
+  	        	 method: "GET",
+	             url: this.conf.api.widgetCommon + '/widgetCatalog' + '/' + loginName,
+	             cache: false,
+	             headers: {
+	            	 'X-Widgets-Type': 'all',
+	                 'X-ECOMP-RequestID':this.uuid.generate()
+	             }
+             }).then(res => {
+        	 	if (res == null || res.data == null) {
+                     deferred.reject("WidgetsCatalogService::getUserWidgets Failed");
+                 } else {
+                     deferred.resolve(res.data);
+                 }
+             })
+             .catch(status => {
+            	 deferred.reject(status);
+	         });
+             return deferred.promise;
+        }
+
+        getManagedWidgets() {          	
+            let deferred = this.$q.defer();
+            let url = this.conf.api.widgetCommon + '/widgetCatalog';
+            this.$http({
+            	method: "GET",
+            	url: url,
+            	cache: false,
+            	headers: {
+            		'X-Widgets-Type': 'all',
+            		'X-ECOMP-RequestID':this.uuid.generate()
+            	}
+            }).then(res => {
+        	 	if (res == null || res.data == null) {
+                     deferred.reject("WidgetsCatalogService::getManagedWidgets Failed");
+                 } else {
+                     deferred.resolve(res.data);
+                 }
+             })
+             .catch(status => {
+                 deferred.reject(status);
+             });  
+            return deferred.promise;
+        }
+        
+        createWidget(newWidget, file) {
+        	console.log(newWidget);
+        	let deferred = this.$q.defer();
+        	var formData = new FormData();
+        	formData.append('file', file);
+        	this.$http({
+                method: "POST",
+                url: this.conf.api.widgetCommon + '/widgetCatalog',
+                transformRequest: angular.identity,  
+                data: formData,
+                headers:{  
+                	'Content-Type': undefined,
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                },
+                params:{
+                	'newWidget': newWidget
+                }
+            }).then(res => {
+            	if (res == null || res.data == null) {
+                    deferred.reject("WidgetsCatalogService::getManagedWidgets Failed");
+                } else {
+                    deferred.resolve(res.data);
+                }
+            })
+            .catch(errRes => {
+                deferred.reject(errRes);
+            });
+            return deferred.promise;
+        }
+        
+        updateWidgetWithFile(file, widgetId, newWidget){
+        	console.log(widgetId);
+        	let deferred = this.$q.defer();
+            var formData = new FormData();
+        	formData.append('file', file);
+    		let url = this.conf.api.widgetCommon + '/widgetCatalog/' + widgetId;
+        	this.$http({
+                method: 'POST',
+                url: url, 
+                transformRequest: angular.identity,  
+                data: formData,
+                headers: {        
+                	'Content-Type': undefined,
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                },
+        	 	params:{
+        	 		'newWidget': newWidget
+        	 	}
+            })
+            .then(res => {
+               if (res == null || res.data == null)
+            	   deferred.reject("WidgetsCatalogService::saveWidgetFile Failed");
+               else 
+            	   deferred.resolve(res.data);
+            })
+            .catch(status => {
+                 deferred.reject(status);
+             });  
+        	return deferred.promise;
+        }
+        
+        updateWidget(widgetId, widgetData) {
+            let deferred = this.$q.defer();
+            let url = this.conf.api.widgetCommon  + '/widgetCatalog' + '/' + widgetId;
+            this.$http({
+            	method: 'PUT',
+            	url: url,
+            	cache: false,
+            	data: widgetData,
+            	headers: {
+            		'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+            	}
+            })
+            .then(res => {
+            	deferred.resolve(res.data);
+            })
+            .catch(errRes => {
+            	deferred.reject(errRes);
+            });
+           
+            return deferred.promise;
+        }
+        
+        
+        deleteWidgetFile(widgetName) {
+        	let deferred = this.$q.defer();
+            this.$log.info('WidgetsCatalogService::deleteWidgetCatalog');
+            let url = this.conf.api.widgetCommon + '/doUpload' + '/' + widgetName;
+            this.$http({
+                method: "DELETE",
+                url: url,
+                cache: false,
+                headers:{  
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    deferred.resolve(res.data); 
+                })
+                .catch(status => {
+                	deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+        
+        deleteWidget(widgetId) {
+        	let deferred = this.$q.defer();
+            this.$log.info('WidgetsCatalogService::deleteWidgetCatalog');
+            let url = this.conf.api.widgetCommon + '/widgetCatalog'  + '/' + widgetId;
+            this.$http({
+                method: "DELETE",
+                url: url,
+                cache: false,
+                headers:{  
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    deferred.resolve(res.data); 
+                })
+                .catch(status => {
+                	deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+        
+        downloadWidgetFile(widgetId) {
+        	let deferred = this.$q.defer();
+            this.$log.info('WidgetsCatalogService::downloadWidgetFile');
+            let url = this.conf.api.widgetCommon + '/download/' + widgetId;
+            console.log(url);
+            this.$http({
+                method: "GET",
+                url: url,
+                cache: false,
+                responseType: "arraybuffer",
+                headers:{  
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    deferred.resolve(res.data); 
+                })
+                .catch(status => {
+                	deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+        
+        updateWidgetCatalog(appData){
+        	let deferred = this.$q.defer();
+            // Validate the request, maybe this is overkill
+            if (appData == null || appData.widgetId == null || appData.select == null) {
+            	var msg = 'WidgetCatalogService::updateAppCatalog: field appId and/or select not found';
+                this.$log.error(msg);
+                return deferred.reject(msg);
+            }
+            this.$http({
+                method: "PUT",
+                url: this.conf.api.widgetCatalogSelection,
+                data: appData,
+                headers: {
+                	 'X-Widgets-Type': 'all',
+	                 'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then( res => {
+                    // Detect non-JSON
+                    if (res == null || res.data == null) {
+                        deferred.reject("WidgetCatalogService::updateAppCatalog Failed");
+                    } else {
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch( status => {
+                	this.$log.error('WidgetCatalogService:updateAppCatalog failed: ' + status);
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+        
+        getServiceJSON(serviceId){
+        	let deferred = this.$q.defer();
+            this.$log.info('WidgetsCatalogService::getServiceJSON');
+            let url = this.conf.api.microserviceProxy + "/" + serviceId;
+            console.log(url);
+            this.$http({
+                method: "GET",
+                url: url,
+                cache: false,
+                headers:{  
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+	            	if (res == null || res == null) {
+	        	 		this.$log.error('WidgetCatalogService::getServiceJSON Failed: Result or result.data is null');
+	                    deferred.reject("WidgetCatalogService::getServiceJSON Failed: Result or result.data is null");
+	                } else{
+	                	deferred.resolve(res.data);
+	                }
+	                
+                })
+                .catch(status => {
+                	deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+        
+        getWidgetCatalogParameters(widgetId){
+        	let deferred = this.$q.defer();
+            this.$log.info('WidgetsCatalogService::getWidgetCatalogParameters');
+            let url = this.conf.api.widgetCommon + "/parameters/" + widgetId;
+            console.log(url);
+            this.$http({
+                method: "GET",
+                url: url,
+                cache: false,
+                headers:{  
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+	            	if (res == null || res.data == null) {
+	        	 		this.$log.error('WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null');
+	                    deferred.reject("WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null");
+	                } else {
+	                    deferred.resolve(res.data);
+	                }
+                })
+                .catch(status => {
+                	deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+        
+        
+        saveWidgetParameter(widgetParamObject){
+        	let deferred = this.$q.defer();
+            this.$log.info('WidgetsCatalogService::saveWidgetParameter');
+            let url = this.conf.api.widgetCommon + "/parameters";
+            this.$http({
+                method: "POST",
+                url: url,
+                cache: false,
+                data: widgetParamObject,
+                headers:{  
+                	'X-Widgets-Type': 'all',
+	                'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+	            	if (res == null || res.data == null) {
+	        	 		this.$log.error('WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null');
+	                    deferred.reject("WidgetCatalogService::getWidgetCatalogParameters Failed: Result or result.data is null");
+	                } else {
+	                    deferred.resolve(res.data);
+	                }
+                })
+                .catch(status => {
+                	deferred.reject(status);
+                });
+           
+            return deferred.promise;
+        }
+        
+    }
+    
+    WidgetsCatalogService.$inject = ['$q', '$log', '$http', 'conf','uuid4','base64Service', 'beReaderService', 'utilsService'];
+    angular.module('ecompApp').service('widgetsCatalogService', WidgetsCatalogService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/services/widgets/widgets.service.js b/ecomp-portal-FE-common/client/app/services/widgets/widgets.service.js
index 735a7319..601c9ff9 100644
--- a/ecomp-portal-FE-common/client/app/services/widgets/widgets.service.js
+++ b/ecomp-portal-FE-common/client/app/services/widgets/widgets.service.js
@@ -1,206 +1,206 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by doritrieur on 12/3/15.

- */

-'use strict';

-

-(function () {

-    class WidgetsService {

-        constructor($q, $log, $http, conf, uuid, utilsService) {

-            this.$q = $q;

-            this.$log = $log;

-            this.$http = $http;

-            this.conf = conf;

-            this.uuid = uuid;

-            this.utilsService = utilsService;

-        }

-

-        getUserWidgets() {

-            let deferred = this.$q.defer();

-            this.$log.info('WidgetsService::getUserWidgets');

-            this.$http({

-                method: 'GET',

-                url: this.conf.api.widgets,

-                cache: false,

-                headers: {

-                    'X-Widgets-Type': 'all',

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                // If response comes back as a redirected HTML page which IS NOT a success

-                if (this.utilsService.isValidJSON(res) == false) {

-                	var msg = 'WidgetsService::getUserWidgets Failed';

-                	this.$log.error(msg);

-                	deferred.reject(msg);

-                } else {

-                	// this.$log.info('WidgetsService::getUserWidgets Succeeded');

-                	deferred.resolve(res.data);

-                }

-            })

-            .catch(status => {

-                deferred.reject(status);

-            });

-            return deferred.promise;

-        }

-

-        getManagedWidgets() {

-            let deferred = this.$q.defer();

-            this.$log.info('WidgetsService::getManagedWidgets');

-            this.$http({

-                method: 'GET',

-                url: this.conf.api.widgets,

-                cache: false,

-                headers: {

-                    'X-Widgets-Type': 'managed',

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('WidgetsService::getManagedWidgets Failed');

-                    } else if(Object.keys(res).length == 0 && this.utilsService.isValidJSON(res)) {

-                        deferred.resolve(null);

-                    } else {

-                        this.$log.info('WidgetsService::getManagedWidgets Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        createWidget(widgetData) {

-            let deferred = this.$q.defer();

-            this.$log.info('WidgetsService::createWidget');

-            this.$http({

-                method: 'POST',

-                url: this.conf.api.widgets,

-                cache: false,

-                data: widgetData,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('WidgetsService::createWidget Failed');

-                    } else {

-                        this.$log.info('WidgetsService::createWidget Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(errRes => {

-                    deferred.reject(errRes);

-                });

-            return deferred.promise;

-        }

-

-        updateWidget(widgetId, widgetData) {

-            let deferred = this.$q.defer();

-            this.$log.info('WidgetsService::updateWidget');

-            let url = this.conf.api.widgets + '/' + widgetId;

-            this.$http({

-                method: 'PUT',

-                url: url,

-                cache: false,

-                data: widgetData,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('WidgetsService::updateWidget Failed');

-                    } else {

-                        this.$log.info('WidgetsService::updateWidget Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(errRes => {

-                    deferred.reject(errRes);

-                });

-            return deferred.promise;

-        }

-

-        deleteWidget(widgetId) {

-            let deferred = this.$q.defer();

-            this.$log.info('WidgetsService::deleteWidget');

-            let url = this.conf.api.widgets + '/' + widgetId;

-            this.$http({

-                method: 'DELETE',

-                url: url,

-                cache: false,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(res => {

-                    // If response comes back as a redirected HTML page which IS NOT a success

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('WidgetsService::deleteWidget Failed');

-                    } else {

-                        this.$log.info('WidgetsService::deleteWidget Succeeded');

-                        deferred.resolve(res.data);

-                    }

-                })

-                .catch(status => {

-                    deferred.reject(status);

-                });

-            return deferred.promise;

-        }

-

-        checkIfWidgetUrlExists(urlToValidate) {

-            let deferred = this.$q.defer();

-            this.$log.info('WidgetsService::checkIfWidgetUrlExists:' + urlToValidate);

-            let reqBody = {

-                url: urlToValidate

-            };

-            this.$http({

-                method: 'POST',

-                url: this.conf.api.widgetsValidation,

-                cache: false,

-                data: reqBody,

-                headers: {

-                    'X-ECOMP-RequestID':this.uuid.generate()

-                }

-            }).then(() => {

-                //if exists return true

-                    deferred.resolve(true);

-                })

-                .catch(response => {

-                    if (this.utilsService.isValidJSON(res)== false) {

-                        deferred.reject('WidgetsService::checkIfWidgetUrlExists Failed');

-                    } else {

-                        if (response.data.status === 404) {

-                            deferred.resolve(false);

-                        } else {

-                            deferred.reject(response.data);

-                        }

-                    }

-                });

-            return deferred.promise;

-        }

-

-    }

-    WidgetsService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];

-    angular.module('ecompApp').service('widgetsService', WidgetsService)

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by doritrieur on 12/3/15.
+ */
+'use strict';
+
+(function () {
+    class WidgetsService {
+        constructor($q, $log, $http, conf, uuid, utilsService) {
+            this.$q = $q;
+            this.$log = $log;
+            this.$http = $http;
+            this.conf = conf;
+            this.uuid = uuid;
+            this.utilsService = utilsService;
+        }
+
+        getUserWidgets() {
+            let deferred = this.$q.defer();
+            this.$log.info('WidgetsService::getUserWidgets');
+            this.$http({
+                method: 'GET',
+                url: this.conf.api.widgets,
+                cache: false,
+                headers: {
+                    'X-Widgets-Type': 'all',
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                // If response comes back as a redirected HTML page which IS NOT a success
+                if (this.utilsService.isValidJSON(res) == false) {
+                	var msg = 'WidgetsService::getUserWidgets Failed';
+                	this.$log.error(msg);
+                	deferred.reject(msg);
+                } else {
+                	// this.$log.info('WidgetsService::getUserWidgets Succeeded');
+                	deferred.resolve(res.data);
+                }
+            })
+            .catch(status => {
+                deferred.reject(status);
+            });
+            return deferred.promise;
+        }
+
+        getManagedWidgets() {
+            let deferred = this.$q.defer();
+            this.$log.info('WidgetsService::getManagedWidgets');
+            this.$http({
+                method: 'GET',
+                url: this.conf.api.widgets,
+                cache: false,
+                headers: {
+                    'X-Widgets-Type': 'managed',
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('WidgetsService::getManagedWidgets Failed');
+                    } else if(Object.keys(res).length == 0 && this.utilsService.isValidJSON(res)) {
+                        deferred.resolve(null);
+                    } else {
+                        this.$log.info('WidgetsService::getManagedWidgets Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        createWidget(widgetData) {
+            let deferred = this.$q.defer();
+            this.$log.info('WidgetsService::createWidget');
+            this.$http({
+                method: 'POST',
+                url: this.conf.api.widgets,
+                cache: false,
+                data: widgetData,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('WidgetsService::createWidget Failed');
+                    } else {
+                        this.$log.info('WidgetsService::createWidget Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(errRes => {
+                    deferred.reject(errRes);
+                });
+            return deferred.promise;
+        }
+
+        updateWidget(widgetId, widgetData) {
+            let deferred = this.$q.defer();
+            this.$log.info('WidgetsService::updateWidget');
+            let url = this.conf.api.widgets + '/' + widgetId;
+            this.$http({
+                method: 'PUT',
+                url: url,
+                cache: false,
+                data: widgetData,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('WidgetsService::updateWidget Failed');
+                    } else {
+                        this.$log.info('WidgetsService::updateWidget Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(errRes => {
+                    deferred.reject(errRes);
+                });
+            return deferred.promise;
+        }
+
+        deleteWidget(widgetId) {
+            let deferred = this.$q.defer();
+            this.$log.info('WidgetsService::deleteWidget');
+            let url = this.conf.api.widgets + '/' + widgetId;
+            this.$http({
+                method: 'DELETE',
+                url: url,
+                cache: false,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(res => {
+                    // If response comes back as a redirected HTML page which IS NOT a success
+                    if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('WidgetsService::deleteWidget Failed');
+                    } else {
+                        this.$log.info('WidgetsService::deleteWidget Succeeded');
+                        deferred.resolve(res.data);
+                    }
+                })
+                .catch(status => {
+                    deferred.reject(status);
+                });
+            return deferred.promise;
+        }
+
+        checkIfWidgetUrlExists(urlToValidate) {
+            let deferred = this.$q.defer();
+            this.$log.info('WidgetsService::checkIfWidgetUrlExists:' + urlToValidate);
+            let reqBody = {
+                url: urlToValidate
+            };
+            this.$http({
+                method: 'POST',
+                url: this.conf.api.widgetsValidation,
+                cache: false,
+                data: reqBody,
+                headers: {
+                    'X-ECOMP-RequestID':this.uuid.generate()
+                }
+            }).then(() => {
+                //if exists return true
+                    deferred.resolve(true);
+                })
+                .catch(response => {
+                    if (this.utilsService.isValidJSON(res)== false) {
+                        deferred.reject('WidgetsService::checkIfWidgetUrlExists Failed');
+                    } else {
+                        if (response.data.status === 404) {
+                            deferred.resolve(false);
+                        } else {
+                            deferred.reject(response.data);
+                        }
+                    }
+                });
+            return deferred.promise;
+        }
+
+    }
+    WidgetsService.$inject = ['$q', '$log', '$http', 'conf','uuid4', 'utilsService'];
+    angular.module('ecompApp').service('widgetsService', WidgetsService)
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
index 91027f9e..3ecb47d0 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
@@ -123,3 +123,9 @@
 
 	</div>
 </div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
index ff89dce3..2f9afd39 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
@@ -1,9 +1,8 @@
 'use strict';
 (function () {
     class AccountAddDetailsCtrl {
-        constructor($scope, $log, $interval, basicAuthAccountSerivce, errorMessageByCode, ECOMP_URL_REGEX, $window, confirmBoxService, $cookies) {
-     	    
-          
+        constructor($scope, $log, $interval, basicAuthAccountService, errorMessageByCode, ECOMP_URL_REGEX, $window, confirmBoxService, $cookies) {
+         
            this.addEndpoint = () => {
            	  this.account.endpointList.push({
            		  valid: true
@@ -144,28 +143,24 @@
             		var message = "Are you sure you want to change '" + this.account.applicationName + "'?"
             		confirmBoxService.editItem(message).then(isConfirmed => {
 	            		if(isConfirmed){
-	            			basicAuthAccountSerivce.updateAccount(this.account.id, newAccount).then(() => {
+	            			basicAuthAccountService.updateAccount(this.account.id, newAccount).then(() => {
 	                			$scope.closeThisDialog(true);
 	                		});
 	           			}
             		});
             	}else{
-            		basicAuthAccountSerivce.createAccount(newAccount).then(() => {
+            		basicAuthAccountService.createAccount(newAccount).then(() => {
             			$scope.closeThisDialog(true);
             		});
             	}
-            	
-            	
-            
             }
             
-            
             init();
             $scope.$on('$stateChangeStart', e => {
                 e.preventDefault();
             });
         }
     }
-    AccountAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'basicAuthAccountSerivce', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window', 'confirmBoxService', '$cookies'];
+    AccountAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'basicAuthAccountService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window', 'confirmBoxService', '$cookies'];
     angular.module('ecompApp').controller('AccountAddDetailsCtrl', AccountAddDetailsCtrl);
 })(); 
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.less b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.less
index 8d3663c3..7c01a5ae 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.less
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.less
@@ -1,12 +1,14 @@
 .account-onboarding{
-  position: @page-main-position;
-  top: @page-main-top;
-  left: @page-main-left;
-  right: @page-main-right;
-  bottom: @page-main-bottom;
-  padding-top: @padding-top;
-  overflow-y: @page-main-overflow-y;
-  padding-left: @padding-left-side;
+  .bg_portalWhite;//white for 1702
+    //.bg_portalGray;  // gray for 1610
+    position: @page-main-position;
+    top: @page-main-top;
+    left: @page-main-left;
+    right: @page-main-right;
+    bottom: @page-main-bottom;
+    padding-top: @padding-top;
+    overflow-y: @page-main-overflow-y;
+    padding-left: @padding-left-side;
 
     .account-table {
   	  width: @table-width;
@@ -17,8 +19,4 @@
  	  }
     }
 
-	.delete-account{
-      .ico_trash_default;
-    }
-
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html
index 5f46a1cc..d5a3c245 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html
@@ -61,7 +61,7 @@
 
 										<td b2b-table-body>
 											<div id="account-onboarding-div-delete-{{$index}}"
-												class="delete-account"
+												class="icon-misc-trash"
 												ng-click="accountOnboarding.deleteAccount(rowData)"></div>
 										</td>
 									</tr>
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
index 5a164e1a..9aec9b4f 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
@@ -1,252 +1,253 @@
-/*-

- * ================================================================================

- * 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 () {

-    class NewAdminModalCtrl {

-        constructor($log, adminsService, $scope, confirmBoxService, utilsService, $location) {

-

-            let init = () => {

-                this.isSaving = false;

-                this.originalApps = [];

-                /* istanbul ignore if */

-                if ($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState) {

-                    this.selectedUser = $scope.ngDialogData.selectedUser;

-                    this.dialogState = $scope.ngDialogData.dialogState;

-                    this.isShowBack = false;

-                    if (this.dialogState === 2) {

-                        this.getAdminAppsRoles();

-                    }

-                } else {

-                    this.isShowBack = true;

-                    this.selectedUser = null;

-                    this.dialogState = 1;

-                }

-

-                //this.searchUsersInProgress = false;

-                //this.showNewAdminAppDropdown = false;

-                $log.info('NewAdminModalCtrl::initiated');

-                this.appsOrder = [];

-            };

-

-            let orderList = (apps) => {

-                this.appsOrder = [];

-                for (var i = 0; i < apps.length; i++) {

-                    if (apps[i].isAdmin) {

-                        this.appsOrder.push(apps[i].id);

-                    }

-                }

-            };

-

-            this.orderFilter = app => {

-                if (!app || !app.id || !this.appsOrder.length) {

-                    return;

-                }

-                return this.appsOrder.indexOf(app.id);

-            };

-

-            /**

-             * this function get the selected admin apps roles

-             */

-            this.getAdminAppsRoles = () => {

-                if (!this.selectedUser || !this.selectedUser.orgUserId) {

-                    $log.error('No user is selected / searchUsers is InProgress');

-                    this.dialogState = 1;

-                    return;

-                }

-                adminsService.getAdminAppsRoles(this.selectedUser.orgUserId).then(roles => {

-                    $log.debug('apps roles res: ', JSON.stringify(roles));

-                    if (!roles.appsRoles) {

-                        return;

-                    }

-

-                    this.adminAppsRoles = [];

-                    for (var i = 0; i < roles.appsRoles.length; i++) {

-                        if (!roles.appsRoles[i].restrictedApp) {

-                            $log.debug('pushing: {id: ', roles.appsRoles[i].id,

-                                'name: ', roles.appsRoles[i].appName,

-                                'restrictedApp: ', roles.appsRoles[i].restrictedApp,

-                                'isAdmin: ', roles.appsRoles[i].isAdmin, '}');

-                            this.adminAppsRoles.push({

-                                id: roles.appsRoles[i].id,

-                                appName: roles.appsRoles[i].appName,

-                                isAdmin: roles.appsRoles[i].isAdmin,

-                                restrictedApp: roles.appsRoles[i].restrictedApp

-                            });

-                        }

-                    }

-                    this.dialogState = 2;

-                    this.adminAppsRoles = this.adminAppsRoles.sort(getSortOrder("appName"));

-

-                    orderList(roles.appsRoles);

-                    if (this.appsOrder != null) {

-                        for (var j = 0; j < this.appsOrder.length; j++) {

-                            this.originalApps.push(this.appsOrder[j]);

-                        }

-                    }

-                }).catch(err => {

-                    $log.error(err);

-                });

-            };

-

-            // Refactor this into a directive

-            let getSortOrder = (prop) => {

-                return function (a, b) {

-                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {

-                        return 1;

-                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {

-                        return -1;

-                    }

-                    return 0;

-                }

-            }

-

-            /**

-             * this function set the selected user

-             * @param user: selected user object

-             */

-            this.setSelectedUser = (user) => {

-                $log.debug('selected user: ', user);

-                this.selectedUser = user;

-            };

-

-            /**

-             * Mark the user as not admin of the selected app

-             * @param app: selected app object

-             */

-            this.unadminApp = (app) => {

-                confirmBoxService.deleteItem(app.appName).then(confirmed => {

-                    if (confirmed === true) {

-                        app.isAdmin = false;

-                        this.appsOrder.splice(this.appsOrder.indexOf(app.id), 1);

-                    }

-                }).catch(err => {

-                    $log(err);

-                });

-            };

-

-            /**

-             * update the selected admin app with the new roles

-             */

-            this.updateAdminAppsRoles = () => {

-                if (!this.selectedUser || !this.selectedUser.orgUserId || !this.adminAppsRoles) {

-                    return;

-                }

-                this.isSaving = true;

-                $log.debug('going to update user: ' + this.selectedUser.orgUserId + ' with app roles: ' + JSON.stringify(this.adminAppsRoles));

-                confirmBoxService.makeAdminChanges('Are you sure you want to make these admin changes?')

-                    .then(confirmed => {

-                    	if(confirmed === true){

-                        adminsService.updateAdminAppsRoles({

-                                orgUserId: this.selectedUser.orgUserId,

-                                appsRoles: this.adminAppsRoles

-                            })

-                            .then(res => {

-                                $log.debug('Admin apps roles updated successfully!', res);

-                                //close and resolve dialog promise with true (to update the table)

-                                this.remindToAddUserIfNecessary();

-                                $scope.closeThisDialog(true);

-                            }).catch(err => {

-                            $log.error('NewAdminModalCtrl.updateAdminAppsRoles:: Failed - ' + err);

-                        }).finally(()=> {

-                            this.isSaving = false;

-                        })

-                    	}else{

-                        	this.isSaving = false;

-                        }

-                    });

-            };

-

-            /**

-             * Navigate between dialog screens using step number: 1,2,...

-             */

-            this.navigateBack = () => {

-                if (this.dialogState === 1) {

-                    //back from 1st screen?

-                }

-                if (this.dialogState === 2) {

-                    this.dialogState = 1;

-                }

-            };

-

-            init();

-

-            /**

-             * each time new app is selected in the drop down,

-             * add it to the user administrated apps list

-             */

-            $scope.$watch('newAdmin.selectedNewApp', (newVal) => {

-                if (!newVal || newVal.isAdmin === undefined) {

-                    return;

-                }

-                //newVal.isAdmin = true; - track by ruined this, here is the workaround:

-                let app = _.find(this.adminAppsRoles, {id: newVal.id});

-                if (app) {

-                    app.isAdmin = true;

-                    this.appsOrder.push(app.id);

-                }

-                this.selectedNewApp = null;

-                //this.showNewAdminAppDropdown = false;

-            });

-

-            $scope.$on('$stateChangeStart', e => {

-                //Disable navigation when modal is opened

-                //**Nabil - note: this will cause the history back state to be replaced with current state

-                e.preventDefault();

-            });

-

-            /**

-             * If an Admin was added for an application remind the portal admin to add the admin as a user

-             */

-            this.remindToAddUserIfNecessary = () => {

-

-                var adminAddedToNewApp = false;

-                if ((this.originalApps != null) && (this.originalApps.length > 0)) {

-                    for (var i = 0; i < this.appsOrder.length; i++) {

-                        var foundApp = false;

-                        for (var j = 0; j < this.originalApps.length; j++) {

-                            if (this.originalApps[j] === this.appsOrder[i]) {

-                                foundApp = true;

-                            }

-                        }

-                        if (foundApp === false) {

-                            adminAddedToNewApp = true;

-                            break;

-                        }

-                    }

-                } else {

-                    adminAddedToNewApp = true;

-                }

-

-                if (adminAddedToNewApp === true) {

-                    confirmBoxService.confirm('Add this person as an application user? This allows them to access the application from ECOMP Portal. Press OK to go to the Add Users page.')

-                        .then(confirmed => {

-                            if (confirmed === true) {

-                                $location.path('/users');

-                            }

-                        });

-                }

-            }

-

-        }

-    }

-    NewAdminModalCtrl.$inject = ['$log', 'adminsService', '$scope', 'confirmBoxService', 'utilsService', '$location'];

-    angular.module('ecompApp').controller('NewAdminModalCtrl', NewAdminModalCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class NewAdminModalCtrl {
+        constructor($log, adminsService, $scope, confirmBoxService, utilsService, $location) {
+
+            let init = () => {
+                this.isSaving = false;
+                this.originalApps = [];
+                /* istanbul ignore if */
+                if ($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState) {
+                    this.selectedUser = $scope.ngDialogData.selectedUser;
+                    this.dialogState = $scope.ngDialogData.dialogState;
+                    this.isShowBack = false;
+                    if (this.dialogState === 2) {
+                        this.getAdminAppsRoles();
+                    }
+                } else {
+                    this.isShowBack = true;
+                    this.selectedUser = null;
+                    this.dialogState = 1;
+                }
+
+                //this.searchUsersInProgress = false;
+                //this.showNewAdminAppDropdown = false;
+                $log.info('NewAdminModalCtrl::initiated');
+                this.appsOrder = [];
+            };
+
+            let orderList = (apps) => {
+                this.appsOrder = [];
+                for (var i = 0; i < apps.length; i++) {
+                    if (apps[i].isAdmin) {
+                        this.appsOrder.push(apps[i].id);
+                    }
+                }
+            };
+
+            this.orderFilter = app => {
+                if (!app || !app.id || !this.appsOrder.length) {
+                    return;
+                }
+                return this.appsOrder.indexOf(app.id);
+            };
+
+            /**
+             * this function get the selected admin apps roles
+             */
+            this.getAdminAppsRoles = () => {
+                if (!this.selectedUser || !this.selectedUser.orgUserId) {
+                    $log.error('No user is selected / searchUsers is InProgress');
+                    this.dialogState = 1;
+                    return;
+                }
+                adminsService.getAdminAppsRoles(this.selectedUser.orgUserId).then(roles => {
+                    $log.debug('apps roles res: ', JSON.stringify(roles));
+                    if (!roles.appsRoles) {
+                        return;
+                    }
+
+                    this.adminAppsRoles = [];
+                    for (var i = 0; i < roles.appsRoles.length; i++) {
+                        if (!roles.appsRoles[i].restrictedApp) {
+                            $log.debug('pushing: {id: ', roles.appsRoles[i].id,
+                                'name: ', roles.appsRoles[i].appName,
+                                'restrictedApp: ', roles.appsRoles[i].restrictedApp,
+                                'isAdmin: ', roles.appsRoles[i].isAdmin, '}');
+                            this.adminAppsRoles.push({
+                                id: roles.appsRoles[i].id,
+                                appName: roles.appsRoles[i].appName,
+                                isAdmin: roles.appsRoles[i].isAdmin,
+                                restrictedApp: roles.appsRoles[i].restrictedApp
+                            });
+                        }
+                    }
+                    this.dialogState = 2;
+                    this.adminAppsRoles = this.adminAppsRoles.sort(getSortOrder("appName"));
+
+                    orderList(roles.appsRoles);
+                    if (this.appsOrder != null) {
+                        for (var j = 0; j < this.appsOrder.length; j++) {
+                            this.originalApps.push(this.appsOrder[j]);
+                        }
+                    }
+                }).catch(err => {
+                    $log.error(err);
+                });
+            };
+
+            // Refactor this into a directive
+            let getSortOrder = (prop) => {
+                return function (a, b) {
+                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {
+                        return 1;
+                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {
+                        return -1;
+                    }
+                    return 0;
+                }
+            }
+
+            /**
+             * this function set the selected user
+             * @param user: selected user object
+             */
+            this.setSelectedUser = (user) => {
+                $log.debug('selected user: ', user);
+                this.selectedUser = user;
+            };
+
+            /**
+             * Mark the user as not admin of the selected app
+             * @param app: selected app object
+             */
+            this.unadminApp = (app) => {
+                confirmBoxService.deleteItem(app.appName).then(confirmed => {
+                    if (confirmed === true) {
+                        app.isAdmin = false;
+                        this.appsOrder.splice(this.appsOrder.indexOf(app.id), 1);
+                    }
+                }).catch(err => {
+                    $log(err);
+                });
+            };
+
+            /**
+             * update the selected admin app with the new roles
+             */
+            this.updateAdminAppsRoles = () => {
+                if (!this.selectedUser || !this.selectedUser.orgUserId || !this.adminAppsRoles) {
+                    return;
+                }
+                this.isSaving = true;
+                $log.debug('going to update user: ' + this.selectedUser.orgUserId + ' with app roles: ' + JSON.stringify(this.adminAppsRoles));
+                confirmBoxService.makeAdminChanges('Are you sure you want to make these admin changes?')
+                    .then(confirmed => {
+                    	if(confirmed === true){
+                        adminsService.updateAdminAppsRoles({
+                                orgUserId: this.selectedUser.orgUserId,
+                                appsRoles: this.adminAppsRoles
+                            })
+                            .then(res => {
+                                $log.debug('Admin apps roles updated successfully!', res);
+                                //close and resolve dialog promise with true (to update the table)
+                                this.remindToAddUserIfNecessary();
+                                $scope.closeThisDialog(true);
+                            }).catch(err => {
+                            $log.error('NewAdminModalCtrl.updateAdminAppsRoles:: Failed - ' + err);
+                        }).finally(()=> {
+                            this.isSaving = false;
+                        })
+                    	}else{
+                        	this.isSaving = false;
+                        }
+                    });
+            };
+
+            /**
+             * Navigate between dialog screens using step number: 1,2,...
+             */
+            this.navigateBack = () => {
+                if (this.dialogState === 1) {
+                    //back from 1st screen?
+                }
+                if (this.dialogState === 2) {
+                    this.dialogState = 1;
+                }
+            };
+
+            init();
+
+            /**
+             * each time new app is selected in the drop down,
+             * add it to the user administrated apps list
+             */
+            $scope.$watch('newAdmin.selectedNewApp.value', (newVal) => {
+                var newVal= JSON.parse(newVal);
+                if (!newVal || newVal.isAdmin === undefined) {
+                    return;
+                }
+                //newVal.isAdmin = true; - track by ruined this, here is the workaround:
+                let app = _.find(this.adminAppsRoles, {id: newVal.id});
+                if (app) {
+                    app.isAdmin = true;
+                    this.appsOrder.push(app.id);
+                }
+                this.selectedNewApp = null;
+                //this.showNewAdminAppDropdown = false;
+            });
+
+            $scope.$on('$stateChangeStart', e => {
+                //Disable navigation when modal is opened
+                //**Nabil - note: this will cause the history back state to be replaced with current state
+                e.preventDefault();
+            });
+
+            /**
+             * If an Admin was added for an application remind the portal admin to add the admin as a user
+             */
+            this.remindToAddUserIfNecessary = () => {
+
+                var adminAddedToNewApp = false;
+                if ((this.originalApps != null) && (this.originalApps.length > 0)) {
+                    for (var i = 0; i < this.appsOrder.length; i++) {
+                        var foundApp = false;
+                        for (var j = 0; j < this.originalApps.length; j++) {
+                            if (this.originalApps[j] === this.appsOrder[i]) {
+                                foundApp = true;
+                            }
+                        }
+                        if (foundApp === false) {
+                            adminAddedToNewApp = true;
+                            break;
+                        }
+                    }
+                } else {
+                    adminAddedToNewApp = true;
+                }
+
+                if (adminAddedToNewApp === true) {
+                    confirmBoxService.confirm('Add this person as an application user? This allows them to access the application from ECOMP Portal. Press OK to go to the Add Users page.')
+                        .then(confirmed => {
+                            if (confirmed === true) {
+                                $location.path('/users');
+                            }
+                        });
+                }
+            }
+
+        }
+    }
+    NewAdminModalCtrl.$inject = ['$log', 'adminsService', '$scope', 'confirmBoxService', 'utilsService', '$location'];
+    angular.module('ecompApp').controller('NewAdminModalCtrl', NewAdminModalCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
index 540459ed..c6011d18 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.spec.js
@@ -1,134 +1,134 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/8/15.

- */

-'use strict';

-

-describe('Controller: NewAdminCtrl ', () => {

-    beforeEach(module('ecompApp'));

-

-    //destroy $http default cache before starting to prevent the error 'default cache already exists'

-    beforeEach(inject((_CacheFactory_)=> {

-        _CacheFactory_.destroyAll();

-    }));

-

-

-    let newCtrl, $controller, $q, $rootScope, $log;

-

-    beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

-        [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];

-    }));

-

-    let deferredAdminAppsRoles, deferredUpdateRolesRes;

-    let adminsServiceMock;

-    beforeEach(()=> {

-        [deferredAdminAppsRoles, deferredUpdateRolesRes] = [$q.defer(), $q.defer()];

-

-        adminsServiceMock = jasmine.createSpyObj('adminsServiceMock', ['getAdminAppsRoles', 'updateAdminAppsRoles']);

-

-        adminsServiceMock.getAdminAppsRoles.and.returnValue(deferredAdminAppsRoles.promise);

-        adminsServiceMock.updateAdminAppsRoles.and.returnValue(deferredUpdateRolesRes.promise);

-

-        newCtrl = $controller('NewAdminModalCtrl', {

-            $log: $log,

-            adminsService: adminsServiceMock,

-            $scope: $rootScope

-        });

-    });

-

-    it('should init default values when loading the controller', ()=> {

-        expect(newCtrl.dialogState).toBe(1);

-        expect(newCtrl.selectedUser).toBe(null);

-    });

-

-    it('should populate admin apps roles and move to the next screen when adminsService.getAdminAppsRoles succeeded', ()=> {

-        let userApps = {appsRoles: [{id: 1, isAdmin: false}, {id: 2, isAdmin: true}]};

-        deferredAdminAppsRoles.resolve(userApps);

-

-        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

-

-        newCtrl.getAdminAppsRoles();

-        $rootScope.$apply();

-

-        expect(adminsServiceMock.getAdminAppsRoles).toHaveBeenCalledWith(newCtrl.selectedUser.orgUserId);

-        expect(newCtrl.adminAppsRoles).toEqual(userApps.appsRoles);

-        expect(newCtrl.dialogState).toBe(2);

-    });

-

-    it('should  log the error when adminsService.getAdminAppsRoles fails', ()=> {

-        spyOn($log, 'error');

-        deferredAdminAppsRoles.reject('some error');

-

-        newCtrl.searchUsersInProgress = false;

-        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

-

-        newCtrl.getAdminAppsRoles();

-        $rootScope.$apply();

-

-        expect($log.error).toHaveBeenCalled();

-    });

-    it('should  log the error when trying to getAdminAppsRoles without selecting user ', ()=> {

-        spyOn($log, 'error');

-

-        newCtrl.searchUsersInProgress = false;

-        newCtrl.selectedUser = null;

-

-        newCtrl.getAdminAppsRoles();

-        $rootScope.$apply();

-

-        expect($log.error).toHaveBeenCalled();

-    });

-

-    it('should set isAdmin as true when adding app via the dropdown menu', ()=> {

-        newCtrl.adminAppsRoles = [{id: 1, isAdmin: false},{id: 2, isAdmin: true}];

-        //simulate UI change

-        $rootScope.$apply('newAdmin.selectedNewApp = null');

-        $rootScope.$apply('newAdmin.selectedNewApp = {id: 1, isAdmin: true}');

-

-        expect(newCtrl.adminAppsRoles[0].isAdmin).toBe(true);

-        expect(newCtrl.selectedNewApp).toBe(null);

-    });

-

-    it('should close the modal when updating apps roles succeeded', ()=> {

-        $rootScope.closeThisDialog = () => {};

-        spyOn($rootScope,'closeThisDialog');

-

-        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

-        newCtrl.adminAppsRoles = [{id: 1}];

-

-        deferredUpdateRolesRes.resolve();

-        newCtrl.updateAdminAppsRoles();

-        $rootScope.$apply();

-

-        expect(adminsServiceMock.updateAdminAppsRoles).toHaveBeenCalledWith({orgUserId: newCtrl.selectedUser.orgUserId, appsRoles: newCtrl.adminAppsRoles});

-        expect($rootScope.closeThisDialog).toHaveBeenCalled();

-    });

-    it('should log the error when updating apps roles fails', ()=> {

-        newCtrl.selectedUser = {orgUserId: 'orgUserId'};

-        newCtrl.adminAppsRoles = [{id: 1}];

-

-        spyOn($log,'error');

-        deferredUpdateRolesRes.reject();

-        newCtrl.updateAdminAppsRoles();

-        $rootScope.$apply();

-        expect($log.error).toHaveBeenCalled();

-    });

-});

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/8/15.
+ */
+'use strict';
+
+describe('Controller: NewAdminCtrl ', () => {
+    beforeEach(module('ecompApp'));
+
+    //destroy $http default cache before starting to prevent the error 'default cache already exists'
+    beforeEach(inject((_CacheFactory_)=> {
+        _CacheFactory_.destroyAll();
+    }));
+
+
+    let newCtrl, $controller, $q, $rootScope, $log;
+
+    beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+        [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];
+    }));
+
+    let deferredAdminAppsRoles, deferredUpdateRolesRes;
+    let adminsServiceMock;
+    beforeEach(()=> {
+        [deferredAdminAppsRoles, deferredUpdateRolesRes] = [$q.defer(), $q.defer()];
+
+        adminsServiceMock = jasmine.createSpyObj('adminsServiceMock', ['getAdminAppsRoles', 'updateAdminAppsRoles']);
+
+        adminsServiceMock.getAdminAppsRoles.and.returnValue(deferredAdminAppsRoles.promise);
+        adminsServiceMock.updateAdminAppsRoles.and.returnValue(deferredUpdateRolesRes.promise);
+
+        newCtrl = $controller('NewAdminModalCtrl', {
+            $log: $log,
+            adminsService: adminsServiceMock,
+            $scope: $rootScope
+        });
+    });
+
+    it('should init default values when loading the controller', ()=> {
+        expect(newCtrl.dialogState).toBe(1);
+        expect(newCtrl.selectedUser).toBe(null);
+    });
+
+    it('should populate admin apps roles and move to the next screen when adminsService.getAdminAppsRoles succeeded', ()=> {
+        let userApps = {appsRoles: [{id: 1, isAdmin: false}, {id: 2, isAdmin: true}]};
+        deferredAdminAppsRoles.resolve(userApps);
+
+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+
+        newCtrl.getAdminAppsRoles();
+        $rootScope.$apply();
+
+        expect(adminsServiceMock.getAdminAppsRoles).toHaveBeenCalledWith(newCtrl.selectedUser.orgUserId);
+        expect(newCtrl.adminAppsRoles).toEqual(userApps.appsRoles);
+        expect(newCtrl.dialogState).toBe(2);
+    });
+
+    it('should  log the error when adminsService.getAdminAppsRoles fails', ()=> {
+        spyOn($log, 'error');
+        deferredAdminAppsRoles.reject('some error');
+
+        newCtrl.searchUsersInProgress = false;
+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+
+        newCtrl.getAdminAppsRoles();
+        $rootScope.$apply();
+
+        expect($log.error).toHaveBeenCalled();
+    });
+    it('should  log the error when trying to getAdminAppsRoles without selecting user ', ()=> {
+        spyOn($log, 'error');
+
+        newCtrl.searchUsersInProgress = false;
+        newCtrl.selectedUser = null;
+
+        newCtrl.getAdminAppsRoles();
+        $rootScope.$apply();
+
+        expect($log.error).toHaveBeenCalled();
+    });
+
+    it('should set isAdmin as true when adding app via the dropdown menu', ()=> {
+        newCtrl.adminAppsRoles = [{id: 1, isAdmin: false},{id: 2, isAdmin: true}];
+        //simulate UI change
+        $rootScope.$apply('newAdmin.selectedNewApp = null');
+        $rootScope.$apply('newAdmin.selectedNewApp = {id: 1, isAdmin: true}');
+
+        expect(newCtrl.adminAppsRoles[0].isAdmin).toBe(true);
+        expect(newCtrl.selectedNewApp).toBe(null);
+    });
+
+    it('should close the modal when updating apps roles succeeded', ()=> {
+        $rootScope.closeThisDialog = () => {};
+        spyOn($rootScope,'closeThisDialog');
+
+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+        newCtrl.adminAppsRoles = [{id: 1}];
+
+        deferredUpdateRolesRes.resolve();
+        newCtrl.updateAdminAppsRoles();
+        $rootScope.$apply();
+
+        expect(adminsServiceMock.updateAdminAppsRoles).toHaveBeenCalledWith({orgUserId: newCtrl.selectedUser.orgUserId, appsRoles: newCtrl.adminAppsRoles});
+        expect($rootScope.closeThisDialog).toHaveBeenCalled();
+    });
+    it('should log the error when updating apps roles fails', ()=> {
+        newCtrl.selectedUser = {orgUserId: 'orgUserId'};
+        newCtrl.adminAppsRoles = [{id: 1}];
+
+        spyOn($log,'error');
+        deferredUpdateRolesRes.reject();
+        newCtrl.updateAdminAppsRoles();
+        $rootScope.$apply();
+        expect($log.error).toHaveBeenCalled();
+    });
+});
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
index 1b1b9de8..a18b8f60 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
@@ -31,8 +31,7 @@
             <button id="search-users-button-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
         </div>
     </div>
-
-
+ <br>
     <div id="div-admin-app-roles" class="admin-app-roles" ng-show="newAdmin.dialogState===2">
         <div class="title" id="title"
              ng-bind="newAdmin.selectedUser.firstName + ' ' + newAdmin.selectedUser.lastName + ' (' + newAdmin.selectedUser.orgUserId + ')'"></div>
@@ -43,16 +42,14 @@
             </div>
 
 
-            <div class="select-input custom-select-wrap">
-                <select class="new-administrated-app" id="dropdown-select-app"
-                        ui-select2 ng-model="newAdmin.selectedNewApp"
-                        data-placeholder="Select application"
-                        ng-options="app as app.appName for app in (filteredApps = (newAdmin.adminAppsRoles | filter:{isAdmin:'false'})) track by app.id "
-                        ng-disabled="!filteredApps.length">
-                    <option id="option-select-app" value="" disabled style="display: none;">Select application</option>
-                </select>
+            <div class="adminAppsRoles_dropdown">
+                 <select id="dropdown1" name="dropdown1" b2b-dropdown
+									placeholder-text="Select application"
+									ng-model="newAdmin.selectedNewApp.value">
+							<option b2b-dropdown-list option-repeat="app in (filteredApps = (newAdmin.adminAppsRoles | filter:{isAdmin:'false'})) track by app.id " ng-disabled="!filteredApps.length"  value="{{app}}">{{app.appName}}</option>
+					 </select>
             </div>
-
+               <br>
 
             <div class="admin-roles-list">
                 <div ng-repeat="app in (newAdmin.adminAppsRoles | orderBy:newAdmin.orderFilter) track by app.id" ng-show="app.isAdmin">
@@ -75,3 +72,9 @@
     </div>
 
 </div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
index 8b304b43..f7c1111d 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
@@ -47,7 +47,7 @@
       }
 
       .admin-roles-list {
-        height: 240px;
+        height: 185px;
         overflow-y: auto;
       }
 
@@ -73,6 +73,10 @@
         color: transparent;
         margin-left: 8px;
       }
+      
+      .awd-select-list {
+		max-height: 205px;
+		}
 
     }
 
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js
index 3841a2b3..32cc3a1f 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.spec.js
@@ -1,19 +1,19 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.less b/ecomp-portal-FE-common/client/app/views/admins/admins.less
index 729ef693..38760ca3 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/admins.less
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.less
@@ -1,6 +1,7 @@
 .w-ecomp-admins-page-main {
+
     .bg_portalWhite;//white for 1702
-      position: @page-main-position;
+    position: @page-main-position;
     top: @page-main-top;
     left: @page-main-left;
     right: @page-main-right;
@@ -8,38 +9,42 @@
     padding-top: @padding-top;
     overflow-y: @page-main-overflow-y;
     padding-left: @padding-left-side;
-#input-table-search::-webkit-input-placeholder,
-{
-font-style: italic;
-  color:   #D7D7D7;
-
-}
+	#input-table-search::-webkit-input-placeholder,
+	{
+	font-style: italic;
+	 color:   #D7D7D7;
+	
+	}
 	.ecomp-spinner{
 	top: 255px;
 	}
 
+	.table-admins-div{
+	width:15px;
+	font-size:23px;
+	cursor: pointer;
+	}
     .admins-home-container {
-        position: relative;
-        padding-right: 0;
-        padding-left: 0;
-        padding-bottom: @container-bottom;
+    position: relative;
+    padding-right: 0;
+    padding-left: 0;
+    padding-bottom: @container-bottom;
 
-        .admins-table {
-            width: @table-width;
-            //margin-left: @table-margin-left;
-            margin: 0 auto;
+    .admins-table {
+    width: @table-width;
+    //margin-left: @table-margin-left;
+    margin: 0 auto;
 
-            .table-control {
-                .table-dropdown-filter {
-                    width: @table-dropdown-filter-width;
-                    display: @table-dropdown-filter-display;
-                }
-            }
+    .table-control {
+    .table-dropdown-filter {
+    width: @table-dropdown-filter-width;
+    display: @table-dropdown-filter-display;
+    }
+    }
 
-            .table-body {
-                cursor: pointer;
-            }
-        }
+    .table-body {
+    	cursor: pointer;
+    }
+	}
     }
 }
-
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
index 907bf323..f9ea3ff9 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
@@ -1,66 +1,66 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-admins-page-main">

-    <div class="admins-home-container" id="page-content">

-            <div id="title" class="w-ecomp-main-view-title">

-	 			<h1 class="heading-page" >Admins</h1>

-			</div>

-            <div class="admins-table">

-                <div class="table-control">

-                	 <div class="table-control-fields">		

-						<div class="table-dropdown">

-							<select id="dropdown1" name="dropdown1" b2b-dropdown placeholder-text="All application" ng-model="admins.filterByApp.value">

-				                <option b2b-dropdown-list option-repeat="d in admins.availableApps" value="{{d.value}}">{{d.title}}</option>

-				            </select>

-						</div>

-						<div >

-							<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="admins.searchString">

-						</div>

-						<button class="btn btn-alt btn-small" ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Admin</button> 

-					</div>                  

-            	</div>

-                <span class="ecomp-spinner" ng-show="admins.isLoadingTable"></span>

-                <div b2b-table table-data="admins.adminsTableData"  ng-hide="admins.isLoadingTable"	search-string="admins.searchString" class="b2b-table-div">

-					<table>

-						<thead b2b-table-row type="header">

-							<tr >

-								<th b2b-table-header key="firstName" sortable="true" id="col1">First Name</th>

-								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>

-								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>

-								<th b2b-table-header key="" sortable="falses" id="col4">Applications</th>

-							</tr>

-						</thead>

-						<tbody b2b-table-row type="body" 	row-repeat="rowData in admins.adminsTableData | filter: admins.portalsRowFilter">

-							<tr ng-click="admins.openAddNewAdminModal(rowData)">

-								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.orgUserId"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">

-									<div class="ecomp-table-repeat" ng-repeat="app in rowData.apps" ng-bind="app.appName"></div>

-								</td>							

-							</tr>

-						</tbody>

-					</table>

-				</div>

-            </div>

-        </div>

-    </div>

-

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-admins-page-main">
+    <div class="admins-home-container" id="page-content">
+            <div id="title" class="w-ecomp-main-view-title">
+	 			<h1 class="heading-page" >Admins</h1>
+			</div>
+            <div class="admins-table">
+                <div class="table-control">
+                	 <div class="table-control-fields">		
+						<div class="table-dropdown">
+							<select id="dropdown1" name="dropdown1" b2b-dropdown placeholder-text="All application" ng-model="admins.filterByApp.value">
+				                <option b2b-dropdown-list option-repeat="d in admins.availableApps" value="{{d.value}}">{{d.title}}</option>
+				            </select>
+						</div>
+						<div >
+							<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="admins.searchString">
+						</div>
+						<button class="btn btn-alt btn-small" ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Admin</button> 
+					</div>                  
+            	</div>
+                <span class="ecomp-spinner" ng-show="admins.isLoadingTable"></span>
+                <div b2b-table table-data="admins.adminsTableData"  ng-hide="admins.isLoadingTable"	search-string="admins.searchString" class="b2b-table-div">
+					<table>
+						<thead b2b-table-row type="header">
+							<tr >
+								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">First Name</th>
+								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>
+								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>
+								<th b2b-table-header key="" sortable="falses" id="col4">Applications</th>
+							</tr>
+						</thead>
+						<tbody b2b-table-row type="body" 	row-repeat="rowData in admins.adminsTableData | filter: admins.portalsRowFilter" class="table-admins-div">
+							<tr ng-click="admins.openAddNewAdminModal(rowData)"  >
+								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.orgUserId"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
+									<div class="ecomp-table-repeat" ng-repeat="app in rowData.apps" ng-bind="app.appName"></div>
+								</td>							
+							</tr>
+						</tbody>
+					</table>
+				</div>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less b/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
index b98289e7..5568ca8e 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
@@ -1,125 +1,125 @@
-.new-catalog-modal {

-  height: 430px;

-

-  .user-catalog-roles{

-    .title{

-      //.n18r;

-      .dGray18r;  //AT&T Dark Gray

-      border-bottom: @portalDBlue 3px solid;

-    }

-    

-       input:not([type="button"]) {

-    height: 13px;

-} 

-    .display-userApp-Catalog-Roles

-    {

-    padding-left: 16px;

-    padding-top: 10px;

-    font-family: Omnes-ECOMP-W02,Arial;

-    font-size: 18px;

-    color: #5a5a5a;

-    }

-	

-	#pending-checkbox{	

-	font-family: Omnes-ECOMP-W02,Arial;

-	font-size: 15px; 

-	color: #5a5a5a;

-	}

-    .app-catalog-roles-list{

-      height: 286px;

-      

-      

-      .app-catalog-item{

-        border: 1px solid @portalLGray;

-        border-radius: 2px;

-        background-color: @funcBkgGray;

-

-        padding: 10px;

-        margin-top: 8px;

-        //margin-right: 6px;

-        //margin-left: 6px;

-

-        .app-catalog-item-left{

-          padding-top: 0;

-          line-height: 30px;

-          height: 30px;

-          vertical-align: middle;

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          margin-right: 10px;

-          padding-left: 4px;

-          background: @portalWhite;

-          white-space: nowrap;

-

-        }

-        .app-catalog-item-right{

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          background: @portalWhite;

-          vertical-align: middle;

-        }

-

-        .app-catalog-item-right-error{

-          .portalRed;

-          padding: 7px 7px 7px 7px;

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          background: @portalWhite;

-          vertical-align: middle;

-        }

-

-        .app-catalog-item-right-contacting{

-          .portalGreen;

-          padding: 7px 7px 7px 7px;

-          display:inline-block;

-          width: 45%;

-          border-radius: 2px;

-          border: 1px solid @portalLGray;

-          background: @portalWhite;

-          vertical-align: middle;

-        }

-

-        .app-select-left{

-          width: 45%;

-          margin-right: 10px;

-          vertical-align: middle;

-

-

-          .select-field{

-            padding-top: 0;

-            line-height: 30px;

-            height: 30px;

-            vertical-align: middle;

-            border-radius: 2px;

-            border: 1px solid @portalLGray;

-            margin-right: 10px;

-            padding-left: 4px;

-            background: @portalWhite;

-            display:inline-block;

-          }

-        }

-

-

-        .app-item-delete{

-          .ico_trash_default;

-          display: inline-block;

-          vertical-align: 2px;

-          cursor: pointer;

-          position: relative;

-          top: 6px;

-          color: transparent;

-          margin-left: 8px;

-

-        }

-

-      }

-    }

-

-  }

-}

+.new-catalog-modal {
+  height: 430px;
+
+  .user-catalog-roles{
+    .title{
+      //.n18r;
+      .dGray18r;  //AT&T Dark Gray
+      border-bottom: @portalDBlue 3px solid;
+    }
+    
+       input:not([type="button"]) {
+    height: 13px;
+} 
+    .display-userApp-Catalog-Roles
+    {
+    padding-left: 16px;
+    padding-top: 10px;
+    font-family: Omnes-ECOMP-W02,Arial;
+    font-size: 18px;
+    color: #5a5a5a;
+    }
+	
+	#pending-checkbox{	
+	font-family: Omnes-ECOMP-W02,Arial;
+	font-size: 15px; 
+	color: #5a5a5a;
+	}
+    .app-catalog-roles-list{
+      height: 286px;
+      
+      
+      .app-catalog-item{
+        border: 1px solid @portalLGray;
+        border-radius: 2px;
+        background-color: @funcBkgGray;
+
+        padding: 10px;
+        margin-top: 8px;
+        //margin-right: 6px;
+        //margin-left: 6px;
+
+        .app-catalog-item-left{
+          padding-top: 0;
+          line-height: 30px;
+          height: 30px;
+          vertical-align: middle;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          margin-right: 10px;
+          padding-left: 4px;
+          background: @portalWhite;
+          white-space: nowrap;
+
+        }
+        .app-catalog-item-right{
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-catalog-item-right-error{
+          .portalRed;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-catalog-item-right-contacting{
+          .portalGreen;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-select-left{
+          width: 45%;
+          margin-right: 10px;
+          vertical-align: middle;
+
+
+          .select-field{
+            padding-top: 0;
+            line-height: 30px;
+            height: 30px;
+            vertical-align: middle;
+            border-radius: 2px;
+            border: 1px solid @portalLGray;
+            margin-right: 10px;
+            padding-left: 4px;
+            background: @portalWhite;
+            display:inline-block;
+          }
+        }
+
+
+        .app-item-delete{
+          .ico_trash_default;
+          display: inline-block;
+          vertical-align: 2px;
+          cursor: pointer;
+          position: relative;
+          top: 6px;
+          color: transparent;
+          margin-left: 8px;
+
+        }
+
+      }
+    }
+
+  }
+}
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js b/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js
index ad34b08d..150a305e 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.controller.js
@@ -1,238 +1,245 @@
-/*-

- * ================================================================================

- * 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 _classCallCheck(instance, Constructor) {

-	if (!(instance instanceof Constructor)) {

-		throw new TypeError('Cannot call a class as a function');

-	}

-}

-

-(function() {

-	var HTTP_PROTOCOL_RGX = /https?:\/\//;

-

-	var CatalogCtrl = function CatalogCtrl(conf, catalogService, confirmBoxService, ExternalRequestAccessService,

-			$log, $window, userProfileService, applicationsService, $scope, $state, 

-			$timeout, $interval, $modal, ngDialog) {

-

-		this.conf = conf;	

-		var _this = this;

-		_classCallCheck(this, CatalogCtrl);

-

-		// activate spinner

-		this.isLoading = true;

-		$scope.getAppCatalogIsDone = false;

-		$scope.radioValue = 'All';

-		$scope.$watch('radioValue', function(newValue, oldValue) {

-			var appCatalog = $scope.appCatalog;

-			$scope.appCatalog = [];

-			$scope.appCatalog = appCatalog;

-

-			

-		});

-		

-		this.catalogService = catalogService;

-		this.userProfileService = userProfileService;

-		this.applicationsService = applicationsService;

-		var resultAccessValue = null;

-		$scope.demoNum = 1;

-		$scope.appRoles = [];

-		

-        let init = () => {

-            getExternalAccess();

-        };

-        

-        var getExternalAccess = () => {

-    		ExternalRequestAccessService.getExternalRequestAccessServiceInfo().then(

-    				function(property) {

-    		resultAccessValue = property.accessValue;

-    					// $log.info(res);

-    				}).catch(err => {

-                        $log.error('CatalogCtrl: failed getExternalRequestAccessServiceInfo: ' + JSON.stringify(err));

-                    });    

-        };

-        

-

-	

-		$scope.applyPresentationDetailsToAppsCatalog = function(res, value) {

-			

-			_this.apps = res;

-			var rowNo = 0;

-

-			// defend against error string result -

-			// a huge list that should never happen.

-			var maxItems = 333;

-			if (_this.apps.length < maxItems)

-				maxItems = _this.apps.length;

-			for (var i = 0; i < maxItems; i++) {												

-				let imgLnk = '';

-				if (_this.apps[i].imageUrl)

-					imgLnk = conf.api.appThumbnail.replace(':appId', _this.apps[i].id);

-				//$log.debug('CatalogCtlr::applyPresn: imgLink = ' + imgLnk);

-				$scope.appCatalog[i] = {

-					sizeX : 2,

-					sizeY : 2,

-					id : _this.apps[i].id,

-					headerText : _this.apps[i].name,

-					imageLink : imgLnk,

-					restricted : _this.apps[i].restricted,  

-					select : _this.apps[i].select,

-					access : _this.apps[i].access,

-					pending: _this.apps[i].pending,

-					mlproperty: value

-				};

-			}

-			//$log.debug('CatalogCtrl: getAppCatalog count : '

-			//				+ $scope.appCatalog.length);

-			_this.isLoading = false;

-			$scope.getAppCatalogIsDone = true;

-		}

-		

-        let getAppsCatalog = () => {

-            catalogService.getAppCatalog()

-                .then(appsList => {

-                	$scope.applyPresentationDetailsToAppsCatalog(appsList);

-                }).catch(err => {

-                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +

-                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});

-                    $log.error('CatalogCtrl:openAddRoleModal: Error: ', err);

-                });

-        };

-        

-        this.openAddRoleModal = (item) => { 

-        	let data = null;

-

-            if((!item.restricted) && (item.mlproperty)){

-                data = {

-                    dialogState: 2,

-                    selectedUser:{

-                        attuid: $scope.attuid,

-                        firstName: $scope.firstName,

-                        lastName: $scope.lastName,

-                        headerText: item.headerText,

-                    	item: item

-                        

-                    }

-                }

-            ngDialog.open({

-                templateUrl: 'app/views/catalog/add-catalog-dialogs/new-catalog.modal.html',

-                controller: 'NewCatalogModalCtrl',

-                controllerAs: 'userInfo',

-                data: data

-            }).closePromise.then(needUpdate => {

-                if(needUpdate.value === true){

-                	getAppsCatalog();

-                }

-            	

-            });

-          }

-        };

-

-		// Run this function when user clicks on checkbox.

-		this.storeSelection = function(item) {

-			// $log.debug('CatalogCtrl:storeSelection: item.id is ' + item.id + ', select is ' + item.select);

-			var pendingFlag = false;

-			

-			if(item.access) 

-				pendingFlag = false;

-			else

-				pendingFlag =  item.pending;

-							

-			var appData = { 

-					appId   : item.id,

-					select  : item.select,

-					pending : pendingFlag	// TODO

-			};

-			

-			catalogService.updateManualAppSort(appData).then(

-					function(result) {

-						// $log.debug('CatalogCtrl:storeSelection result is ', result);

-					})['catch'](function(err) {

-						$log.error('CatalogCtrl:storeSelection: exception: ', err);

-					});

-			catalogService.updateAppCatalog(appData).then(

-				function(result) {

-					// $log.debug('CatalogCtrl:storeSelection result is ', result);

-				})['catch'](function(err) {

-					$log.error('CatalogCtrl:storeSelection: exception: ', err);

-				});

-		};

-		

-		userProfileService

-				.getUserProfile()

-				.then(

-						function(profile) {

-							$scope.attuid = profile.orgUserId;

-							$scope.firstName = profile.firstName;

-							$scope.lastName = profile.lastName;

-							$scope.appCatalog = [];

-							

-							catalogService.getAppCatalog().then(

-											function(res) {	

-									$scope.applyPresentationDetailsToAppsCatalog(res, resultAccessValue);

-											})['catch'](function(err) {

-									$log.error('CatalogCtrl: failed getAppCatalog: ', JSON.stringify(err));

-									_this.isLoading = false;

-									$scope.getAppCatalogIsDone = true;

-						  });

-						});

-

-							// applicationsService.getUserApps()

-

-

-		this.gridsterOpts = {

-			columns : 12,

-			colWidth : 95,

-			rowHeight : 95,

-			margins : [ 20, 20 ],

-			outerMargin : true,

-			pushing : true,

-			floating : true,

-			swapping : true,

-		};

-

-		if (getParameterByName('noUserError') != null) {

-			if (getParameterByName('noUserError') == "Show") {

-				$("#errorInfo").show();

-			}

-

-		}

-		

-		init();

-	};

-

-	CatalogCtrl.$inject = [ 'conf', 'catalogService', 'confirmBoxService', 'ExternalRequestAccessService', '$log',

-			'$window', 'userProfileService', 'applicationsService', '$scope', 

-			'$state', '$timeout', '$interval', '$modal', 'ngDialog' ];

-	angular.module('ecompApp').controller('CatalogCtrl', CatalogCtrl);

-})();

-

-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, " ");

-}

+/*-
+ * ================================================================================
+ * 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 _classCallCheck(instance, Constructor) {
+	if (!(instance instanceof Constructor)) {
+		throw new TypeError('Cannot call a class as a function');
+	}
+}
+
+(function() {
+	var HTTP_PROTOCOL_RGX = /https?:\/\//;
+
+	var CatalogCtrl = function CatalogCtrl(conf, catalogService, confirmBoxService, ExternalRequestAccessService,
+			$log, $window, userProfileService, applicationsService, $scope, $state, 
+			$timeout, $interval, $modal, ngDialog) {
+
+		this.conf = conf;	
+		var _this = this;
+		var externalRequest = true;
+		_classCallCheck(this, CatalogCtrl);
+
+		// activate spinner
+		this.isLoading = true;
+		$scope.getAppCatalogIsDone = false;
+		$scope.radioValue = 'All';
+		$scope.$watch('radioValue', function(newValue, oldValue) {
+			var appCatalog = $scope.appCatalog;
+			$scope.appCatalog = [];
+			$scope.appCatalog = appCatalog;
+
+			
+		});
+		
+		this.catalogService = catalogService;
+		this.userProfileService = userProfileService;
+		this.applicationsService = applicationsService;
+		var resultAccessValue = null;
+		$scope.demoNum = 1;
+		$scope.appRoles = [];
+		
+        let init = () => {
+            getExternalAccess();
+        };
+        
+        var getExternalAccess = () => {
+    		ExternalRequestAccessService.getExternalRequestAccessServiceInfo().then(
+    				function(property) {
+    		resultAccessValue = property.accessValue;
+    					// $log.info(res);
+    				}).catch(err => {
+                        $log.error('CatalogCtrl: failed getExternalRequestAccessServiceInfo: ' + JSON.stringify(err));
+                    });    
+        };
+        
+
+	
+		$scope.applyPresentationDetailsToAppsCatalog = function(res, value) {
+			
+			_this.apps = res;
+			var rowNo = 0;
+
+			// defend against error string result -
+			// a huge list that should never happen.
+			var maxItems = 333;
+			if (_this.apps.length < maxItems)
+				maxItems = _this.apps.length;
+			for (var i = 0; i < maxItems; i++) {												
+				let imgLnk = '';
+				if (_this.apps[i].imageUrl)
+					imgLnk = conf.api.appThumbnail.replace(':appId', _this.apps[i].id);
+				//$log.debug('CatalogCtlr::applyPresn: imgLink = ' + imgLnk);
+				$scope.appCatalog[i] = {
+					sizeX : 2,
+					sizeY : 2,
+					id : _this.apps[i].id,
+					headerText : _this.apps[i].name,
+					mlAppName: _this.apps[i].mlAppName,
+					imageLink : imgLnk,
+					restricted : _this.apps[i].restricted,  
+					select : _this.apps[i].select,
+					access : _this.apps[i].access,
+					pending: _this.apps[i].pending,
+					mlproperty: value
+				};
+			}
+			//$log.debug('CatalogCtrl: getAppCatalog count : '
+			//				+ $scope.appCatalog.length);
+			_this.isLoading = false;
+			$scope.getAppCatalogIsDone = true;
+		}
+		
+        let getAppsCatalog = () => {
+            catalogService.getAppCatalog()
+                .then(appsList => {
+                	$scope.applyPresentationDetailsToAppsCatalog(appsList);
+                }).catch(err => {
+                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +
+                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                    $log.error('CatalogCtrl:openAddRoleModal: Error: ', err);
+                });
+        };
+        
+        this.openAddRoleModal = (item) => { 
+        	let data = null;
+
+            if((!item.restricted) && (item.mlproperty)){
+                data = {
+                    dialogState: 2,
+                    selectedUser:{
+                        attuid: $scope.attuid,
+                        firstName: $scope.firstName,
+                        lastName: $scope.lastName,
+                        headerText: item.headerText,
+                        haloAppName : item.mlAppName,
+                    	item: item,
+                    	extReqValue : externalRequest
+                        
+                    }
+                }
+            ngDialog.open({
+                templateUrl: 'app/views/catalog/add-catalog-dialogs/new-catalog.modal.html',
+                controller: 'NewCatalogModalCtrl',
+                controllerAs: 'userInfo',
+                data: data
+            }).closePromise.then(needUpdate => {
+                if(needUpdate.value === true){
+                	getAppsCatalog();
+                }
+            	
+            });
+          }
+        };
+
+		// Run this function when user clicks on checkbox.
+		this.storeSelection = function(item) {
+			// $log.debug('CatalogCtrl:storeSelection: item.id is ' + item.id + ', select is ' + item.select);
+			var pendingFlag = false;
+			
+			if(item.access) 
+				pendingFlag = false;
+			else
+				pendingFlag =  item.pending;
+							
+			var appData = { 
+					appId   : item.id,
+					select  : item.select,
+					pending : pendingFlag	// TODO
+			};
+			
+			catalogService.updateManualAppSort(appData).then(
+					function(result) {
+						// $log.debug('CatalogCtrl:storeSelection result is ', result);
+					})['catch'](function(err) {
+						$log.error('CatalogCtrl:storeSelection: exception: ', err);
+					});
+			catalogService.updateAppCatalog(appData).then(
+				function(result) {
+					// $log.debug('CatalogCtrl:storeSelection result is ', result);
+				})['catch'](function(err) {
+					$log.error('CatalogCtrl:storeSelection: exception: ', err);
+				});
+		};
+		
+		userProfileService
+				.getUserProfile()
+				.then(
+						function(profile) {
+							$scope.attuid = profile.orgUserId;
+							$scope.firstName = profile.firstName;
+							$scope.lastName = profile.lastName;
+							$scope.appCatalog = [];
+							
+							catalogService.getAppCatalog().then(
+											function(res) {	
+									$scope.applyPresentationDetailsToAppsCatalog(res, resultAccessValue);
+											})['catch'](function(err) {
+									$log.error('CatalogCtrl: failed getAppCatalog: ', JSON.stringify(err));
+									_this.isLoading = false;
+									$scope.getAppCatalogIsDone = true;
+						  });
+						});
+
+							// applicationsService.getUserApps()
+
+
+		this.gridsterOpts = {
+			columns : 12,
+			colWidth : 95,
+			rowHeight : 95,
+			margins : [ 20, 20 ],
+			outerMargin : true,
+			pushing : true,
+			floating : true,
+			swapping : true,
+			resizable: {
+				enabled: false,
+			},
+		};
+
+		if (getParameterByName('noUserError') != null) {
+			if (getParameterByName('noUserError') == "Show") {
+				$("#errorInfo").show();
+			}
+
+		}
+		
+		init();
+	};
+
+	CatalogCtrl.$inject = [ 'conf', 'catalogService', 'confirmBoxService', 'ExternalRequestAccessService', '$log',
+			'$window', 'userProfileService', 'applicationsService', '$scope', 
+			'$state', '$timeout', '$interval', '$modal', 'ngDialog' ];
+	angular.module('ecompApp').controller('CatalogCtrl', CatalogCtrl);
+})();
+
+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, " ");
+}
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
index 68bf9ef2..b4063ad6 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
@@ -1,90 +1,90 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-app-catalog">

-	<div class="app-catalog-container" id="page-content">

-	        <div id="title" class="w-ecomp-main-view-title">

-			<h1 class="heading-page">Application Catalog</h1>

-		</div>

-		<div class="app-catalog-list">

-			<div class="simulateCatGridHeader">

-				<span class="simulateCatGridHeaderDetails"> Click the check

-					boxes below to choose which applications are shown on the <a

-					href="applicationsHome">home page</a>.

-				</span> <br> <br> <label id="label-all"

-					class="simulateCatGridHeaderRadio"> Filter: <input

-					id="radio-button-all" type="radio" ng-model="radioValue"

-					value="All"> All

-				</label> <label id="label-accessible" class="simulateCatGridHeaderRadio">

-					<input id="radio-button-accessible" type="radio"

-					ng-model="radioValue" value="Accessible"> Accessible

-				</label> <label id="label-homepage" class="simulateCatGridHeaderRadio">

-					<input id="radio-button-homepage" type="radio"

-					ng-model="radioValue" value="Selected"> On Home Page

-				</label>

-

-			</div>

-			<div class="appCatalogue-boarder" >

-				<div gridster="catalog.gridsterOpts">	

-					<ul>	

-						<li gridster-item="item" ng-repeat="item in appCatalog"

-							ng-if="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">

-							<div class="gridster-box" style="{{!item.access?' color:lightgray !important':''}}">

-								<div class="gridster-box-header"

-									ng-show="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">

-									<i class="icon-content-gridguide"></i>

-									<h3 style="cursor: context-menu">{{item.headerText |

-										elipsis: 13}}</h3>

-								            <div class="form-row" ng-show="item.access || isAdminPortalAdmin">

-								                <label class="checkbox">

-								                    <input type="checkbox" ng-model="item.select" ng-change="catalog.storeSelection(item)">

-								                    <i class="skin"></i> 

-								                </label> 

-								                <i ng-show="item.pending" class="icon-tickets-contested"></i>							                      								                

-									</div>

-								</div>

-								<div class="gridster-box-content"

-									ng-style="{'cursor':'pointer',

-										'background-image': 'url('+(item.imageLink)+')',

-										'order': item.order, 

-										'background-color':'white',

-										'background-repeat': 'no-repeat',

-										'background-size': '170px 130px'}"

-									ng-click="catalog.openAddRoleModal(item)"

-									ng-hide="users.isLoadingTable && !users.getAppCatalogIsDone"

-									>

-								</div>

-							</div>

-						</li>

-					</ul>

-				</div>

-			</div>

-			

-			<br>

-

-			<div style="text-align: right;">

-				To request access to an application, please visit the <a

-					ng-href="getAccess">Get Access</a> page.

-			</div>

-

-			<br>

-		</div>

-

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-app-catalog">
+	<div class="app-catalog-container" id="page-content">
+	        <div id="title" class="w-ecomp-main-view-title">
+			<h1 class="heading-page">Application Catalog</h1>
+		</div>
+		<div class="app-catalog-list">
+			<div class="simulateCatGridHeader">
+				<span class="simulateCatGridHeaderDetails"> Click the check
+					boxes below to choose which applications are shown on the <a
+					href="applicationsHome">home page</a>.
+				</span> <br> <br> <label id="label-all"
+					class="simulateCatGridHeaderRadio"> Filter: <input
+					id="radio-button-all" type="radio" ng-model="radioValue"
+					value="All"> All
+				</label> <label id="label-accessible" class="simulateCatGridHeaderRadio">
+					<input id="radio-button-accessible" type="radio"
+					ng-model="radioValue" value="Accessible"> Accessible
+				</label> <label id="label-homepage" class="simulateCatGridHeaderRadio">
+					<input id="radio-button-homepage" type="radio"
+					ng-model="radioValue" value="Selected"> On Home Page
+				</label>
+
+			</div>
+			<div class="appCatalogue-boarder" >
+				<div gridster="catalog.gridsterOpts">	
+					<ul>	
+						<li gridster-item="item" ng-repeat="item in appCatalog"
+							ng-if="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">
+							<div class="gridster-box" style="{{!item.access?' color:lightgray !important':''}}">
+								<div class="gridster-box-header"
+									ng-show="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">
+									<i id="gridster-{{item.headerText.split(' ').join('-')}}-icon" class="icon-content-gridguide"></i>
+									<h3 style="cursor: context-menu">{{item.headerText |
+										elipsis: 13}}</h3>
+								            <div class="form-row" ng-show="item.access || isAdminPortalAdmin">
+								                <label class="checkbox">
+								                    <input id="gridster-{{item.headerText.split(' ').join('-')}}-icon-checkbox" type="checkbox" ng-model="item.select" ng-change="catalog.storeSelection(item)">
+								                    <i class="skin"></i> 
+								                </label> 
+								                <i ng-show="item.pending" class="icon-tickets-contested"></i>							                      								                
+									</div>
+								</div>
+								<div class="gridster-box-content"
+									ng-style="{'cursor':'pointer',
+										'background-image': 'url('+(item.imageLink)+')',
+										'order': item.order, 
+										'background-color':'white',
+										'background-repeat': 'no-repeat',
+										'background-size': '170px 130px'}"
+									ng-click="catalog.openAddRoleModal(item)"
+									ng-hide="users.isLoadingTable && !users.getAppCatalogIsDone"
+									>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+			
+			<br>
+
+			<div style="text-align: right;">
+				To request access to an application, please visit the <a
+				id="get-access-page-link" ng-href="getAccess">Get Access</a> page.
+			</div>
+
+			<br>
+		</div>
+
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html b/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html
index a5b754f6..8a848545 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/catalog/information-box.tpl.html
@@ -1,42 +1,42 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="confirmation-box-container">

-    <div class="confirmation-message-wrap">

-        <div class="confirmation-message" >

-			<div>

-				You do not have access to this application.  

-				See the 

-				<a href="" ng-click="confirmBox.goTo('root.getAccess', {appName: confirmBox.message.headerText})">

-					Get Access page</a> and request access at MyLogins.

-					<br><br>

-					You may check this box if access is pending: 

-				<input type="checkbox" 

-					att-checkbox 

-					ng-model="confirmBox.message.pending"

-					ng-change="confirmBox.storeSelection(confirmBox.message)"

-				>

-			</div>

-

-		</div>

-    </div>

-    <div class="dialog-control">

-        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Close</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="confirmation-box-container">
+    <div class="confirmation-message-wrap">
+        <div class="confirmation-message" >
+			<div>
+				You do not have access to this application.  
+				See the 
+				<a href="" ng-click="confirmBox.goTo('root.getAccess', {appName: confirmBox.message.headerText})">
+					Get Access page</a> and request access at MyLogins.
+					<br><br>
+					You may check this box if access is pending: 
+				<input type="checkbox" 
+					att-checkbox 
+					ng-model="confirmBox.message.pending"
+					ng-change="confirmBox.storeSelection(confirmBox.message)"
+				>
+			</div>
+
+		</div>
+    </div>
+    <div class="dialog-control">
+        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Close</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html
index 01b48de4..69f9af84 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html
@@ -1,31 +1,31 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="confirmation-box-container">

-    <div class="confirmation-title-wrap">

-        <div class="confirmation-title" ng-bind="confirmBox.title"></div>

-    </div>

-    <div class="confirmation-message-wrap">

-        <div class="confirmation-message" ng-bind="confirmBox.message"></div>

-    </div>

-    <div class="dialog-control">

-        <div id="confirm-admin-update" class="btn btn-alt btn-small"  ng-click="confirmBox.closeBox(true)">Confirm</div>

-        <div id="cancel-admin-update" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Cancel</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="confirmation-box-container">
+    <div class="confirmation-title-wrap">
+        <div class="confirmation-title" ng-bind="confirmBox.title"></div>
+    </div>
+    <div class="confirmation-message-wrap">
+        <div class="confirmation-message" ng-bind="confirmBox.message"></div>
+    </div>
+    <div class="dialog-control">
+        <div id="confirm-admin-update" class="btn btn-alt btn-small"  ng-click="confirmBox.closeBox(true)">Confirm</div>
+        <div id="cancel-admin-update" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Cancel</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js
index 26d39a76..36eb04a8 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js
@@ -1,49 +1,49 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 1/18/16.

- */

-'use strict';

-(function () {

-    class ConfirmationBoxCtrl {

-        constructor($scope,$state) {

-

-            let init = () => {

-                let item = ($scope.ngDialogData && $scope.ngDialogData.item) || 'this';

-                this.message = $scope.ngDialogData.message ? $scope.ngDialogData.message : `Are you sure you want to delete "${item}"?`;

-                this.title = $scope.ngDialogData.title ? $scope.ngDialogData.title : '';

-            };

-

-            this.closeBox = isConfirmed => {

-                $scope.closeThisDialog(isConfirmed);

-            };

-            

-            this.goTo = (state, params) => {

-            	$scope.closeThisDialog(false);

-            	$state.go(state,params);

-            	

-            };

-

-            init();

-        }

-    }

-    ConfirmationBoxCtrl.$inject = ['$scope','$state'];

-    angular.module('ecompApp').controller('ConfirmationBoxCtrl', ConfirmationBoxCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 1/18/16.
+ */
+'use strict';
+(function () {
+    class ConfirmationBoxCtrl {
+        constructor($scope,$state) {
+
+            let init = () => {
+                let item = ($scope.ngDialogData && $scope.ngDialogData.item) || 'this';
+                this.message = $scope.ngDialogData.message ? $scope.ngDialogData.message : `Are you sure you want to delete "${item}"?`;
+                this.title = $scope.ngDialogData.title ? $scope.ngDialogData.title : '';
+            };
+
+            this.closeBox = isConfirmed => {
+                $scope.closeThisDialog(isConfirmed);
+            };
+            
+            this.goTo = (state, params) => {
+            	$scope.closeThisDialog(false);
+            	$state.go(state,params);
+            	
+            };
+
+            init();
+        }
+    }
+    ConfirmationBoxCtrl.$inject = ['$scope','$state'];
+    angular.module('ecompApp').controller('ConfirmationBoxCtrl', ConfirmationBoxCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html
index 01313079..8f880ef4 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html
@@ -1,28 +1,28 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="confirmation-box-container">

-    <div class="confirmation-message-wrap">

-        <div id="confirmation-message" class="confirmation-message" ng-bind="confirmBox.message"></div>

-    </div>

-    <div class="dialog-control">

-        <div id="confirmation-button-next" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(true)">OK</div>

-        <div id="confirmation-button-cancel" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Cancel</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="confirmation-box-container">
+    <div class="confirmation-message-wrap">
+        <div id="confirmation-message" class="confirmation-message" ng-bind="confirmBox.message"></div>
+    </div>
+    <div class="dialog-control">
+        <div id="confirmation-button-next" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(true)">OK</div>
+        <div id="confirmation-button-cancel" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Cancel</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html
index a7a3fd46..f6a1a29b 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html
@@ -1,31 +1,31 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="confirmation-box-container">

-    <div class="confirmation-title-wrap">

-        <div class="confirmation-title" ng-bind="confirmBox.title"></div>

-    </div>

-    <div class="confirmation-message-wrap">

-        <div class="confirmation-message" ng-bind="confirmBox.message"></div>

-    </div>

-    <div class="dialog-control">

-        <div class="next-button" ng-click="confirmBox.closeBox(true)">Confirm</div>

-        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Cancel</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="confirmation-box-container">
+    <div class="confirmation-title-wrap">
+        <div class="confirmation-title" ng-bind="confirmBox.title"></div>
+    </div>
+    <div class="confirmation-message-wrap">
+        <div class="confirmation-message" ng-bind="confirmBox.message"></div>
+    </div>
+    <div class="dialog-control">
+        <div class="next-button" ng-click="confirmBox.closeBox(true)">Confirm</div>
+        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Cancel</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html
index 912b971b..1eaa2819 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html
@@ -1,27 +1,27 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="confirmation-box-container">

-    <div class="confirmation-message-wrap">

-        <div class="confirmation-message" >{{confirmBox.message}}</div>

-    </div>

-    <div class="dialog-control">

-        <div class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Close</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="confirmation-box-container">
+    <div class="confirmation-message-wrap">
+        <div class="confirmation-message" >{{confirmBox.message}}</div>
+    </div>
+    <div class="dialog-control" id="dialog-close">
+        <div id="close-button"  class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Close</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html
index 9883bd14..f47e17c2 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html
@@ -1,152 +1,153 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div style="margin-top: 10px; margin-bottom: 10psx;">

-	<h1 class="heading1"></h1>

-</div>

-<br />

-

-<div style="margin-top: 25px;">

-	<div id="title" class="manage-contactUs-home-manageWidgets-title">Manage {{widgetTypeDisplay}} Widgets</div>

-		<div class="widgets-popup-margin">         

-            <div class="get-access-table">

-                <div class="table-control" style="margin:30px;">

-				  	<div class="c-ecomp-portal-abs-table" style="height:300px"">

-                    <table b2b-table id="table-main" 

-                    	table-data="ignoredTableData"

-                        current-page="ignoredCurrentPage">

-                        <thead b2b-table-row type="header">

-	                        <tr>

-	                            <th id="th-users-1" b2b-table-header key="title" sortable="true" >Title</th>

-	                            <th id="th-users-2" b2b-table-header key="href" sortable="true" >URL</th>

-	                            <th ng-show="{{widgetType=='EVENTS'}}" id="th-users-3" b2b-table-header key="event_date" sortable="true" >Date</th>

-	                            <th ng-show="{{widgetType=='EVENTS'}}" id="th-users-4" b2b-table-header key="content" sortable="true" >Content</th>

-	                            <th id="th-users-5" b2b-table-header key="sortOrder" sortable="true" >Order</th>

-	                            <th id="th-users-6" b2b-table-header key="edit" sortable="false" >Edit</th>

-	                             <th id="th-users-7" b2b-table-header key="delete" sortable="false" >Delete</th>

-	                        </tr>

-                        </thead>

-                        <!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->

-                        <tbody b2b-table-row type="body" class="table-body" track-by="$index" row-repeat="rowData in widgetData">

-	                        <tr id="tr-rowData" ng-click="">

-	                            <td b2b-table-body>

-	                                <div id="widget-td-title" ng-hide="rowData.showEdit" ng-bind="rowData.title"></div>

-	                               <input id="widget-input-title"  type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].title"/>

-	                            </td>

-	                            <td b2b-table-body>

-	                                <div id="widget-td-href" ng-hide="rowData.showEdit" ng-bind="rowData.href"></div>

-	                                <input id="widget-input-href" type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].href"/>

-	                            </td>

-	                            <td  ng-show="{{widgetType=='EVENTS'}}" b2b-table-body>

-	                                <div id="widget-td-date" ng-hide="rowData.showEdit" ng-bind="rowData.eventDate"></div>

-	                                <input id="widget-input-date" type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].eventDate"/>

-	                            </td>

-	                            <td  ng-show="{{widgetType=='EVENTS'}}" b2b-table-body>

-	                                <div id="widget-td-content" ng-hide="rowData.showEdit">{{rowData.content | cut:true:20:' ...'}}</div>

-	                                <input id="widget-input-content"  type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].content"/>

-	                            </td>

-	                            <td b2b-table-body>

-	                                <div id="widget-td-order" ng-hide="rowData.showEdit" ng-bind="rowData.sortOrder"></div>

-	                                <input id="widget-input-order"  type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].sortOrder"/>      

-	                            </td>                            

-	                            <td b2b-table-body>

-                                	<div class="delete-contact-us" ng-hide="rowData.showEdit" ng-click="setEdit($index);">

-                                		<span class="icon-edit"></span>

-                                	</div>

-                                	<span ng-show="rowData.showEdit">

-                                		<a att-button btn-type="primary" ng-click="modify($index);" class="button button--primary" size="small" >Save</a>

-                               		</span>

-	                            </td>

-	                            <td b2b-table-body>

-                                	<div class="delete-contact-us" ng-click="remove($index);">

-                                		<span class="icon-misc-trash"></span>

-                                	</div>

-	                            </td>

-	                        </tr>

-                        </tbody>

-                    </table>

-                </div>

-                

-                <div att-divider-lines></div>

-					<div style="margin-top: 15px; margin-left: -80px;" >

-					<form name = "widgetForm" novalidate>				

-						<div id="addWidgetHeader" class="contact-us-margin">				

-							<h1 style="font-size:18px;">Add</h1>

-							<div class="errMsg">{{errMsg}}</div>

-							<div class="sucessMsg" ng-bind="successMsg"></div>

-						</div>								  

-						<div id="addWidget" class="contact-us-margin">

-							<div>

-								<div>

-									<div class="add-widget-field">

-							           <div id="mots-property-label" class="property-label">Title</div>

-							            <input id="widget-input-add-title" class="input-text-area" type="text"  ng-model="newWidgetObject.title" name="title" ng-required="true"/>							          

-							        </div>

-							        <div class="add-widget-field">

-							            <div  class="property-label">URL</div>

-							            <input id="widget-input-add-url" class="input-text-area" type="text"  ng-model="newWidgetObject.href" type="url" size="3" name = "url"  ng-required = "true"/>

-							        </div>

-							        <div class="add-widget-field" >

-							            <div class="property-label">Sort Order</div>

-							            <input id="widget-input-add-order" class="input-text-area" type="text" ng-model="newWidgetObject.sortOrder"/>

-							        </div>

-						        </div>

-						         <div  class="add-widget-field"  ng-controller="DatePickerController" ng-show="{{widgetType=='EVENTS'}}">

-								    <h4>Event Date</h4>

-								    <div>

-								      <div>

-								        <p class="input-group">

-								          <input id="widget-input-add-date" type="text" name = "eventDate" datetime="yyyy-MM-dd" class="input-text-area" uib-datepicker-popup="{{format}}" 

-								          		ng-model="newWidgetObject.eventDate" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" 

-								           ng-focus="open1()"

-								           ng-required = "widgetType =='EVENTS'" />

-								        </p>

-								      </div>

-									</div>

-								</div>	

-								

-						        <div class="add-contact-us-field-des"  ng-show="{{widgetType=='EVENTS'}}">

-						            <div  class="property-label">Content</div>

-						            <textarea style="margin-top: 0px; margin-bottom: 0px; height: 150px" ng-model="newWidgetObject.content" name="content" ng-required = "widgetType =='EVENTS'">

-						            </textarea>						            

-						        </div>

-					        </div>

-							<div style="height:50px;">

-								        <a style="float:right; margin-top:20px;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="saveNew()">Add New</a>

-					

-							</div>

-							

-							<div att-divider-lines></div>

-					

-						</div>

-					</form>

-					</div>

-				    <div style="height:50px;">

-						<a style="float:right;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="closeDialog()">Close</a>

-					</div>           

-            </div>

-        </div>

-    </div>

-</div>

-	

-<script type="application/javascript">

-    $(document).ready(function(){

-        $(".ngdialog-content").css("width","85%")

-    });

-</script>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div style="margin-top: 10px; margin-bottom: 10psx;">
+	<h1 class="heading1"></h1>
+</div>
+<br />
+
+<div style="margin-top: 25px;">
+	<div id="title" class="manage-contactUs-home-manageWidgets-title">Manage {{widgetTypeDisplay}} Widgets</div>
+		<div class="widgets-popup-margin">         
+            <div class="get-access-table">
+                <div class="table-control" style="margin:30px;">
+				  	<div class="c-ecomp-portal-abs-table" style="height:300px"">
+                    <table b2b-table id="table-main" 
+                    	table-data="ignoredTableData"
+                        current-page="ignoredCurrentPage">
+                        <thead b2b-table-row type="header">
+	                        <tr>
+	                            <th id="th-users-1" b2b-table-header key="title" sortable="true" >Title</th>
+	                            <th id="th-users-2" b2b-table-header key="href" sortable="true" >URL</th>
+	                            <th ng-show="{{widgetType=='EVENTS'}}" id="th-users-3" b2b-table-header key="event_date" sortable="true" >Date</th>
+	                            <th ng-show="{{widgetType=='EVENTS'}}" id="th-users-4" b2b-table-header key="content" sortable="true" >Content</th>
+	                            <th id="th-users-5" b2b-table-header key="sortOrder" sortable="true" >Order</th>
+	                            <th id="th-users-6" b2b-table-header key="edit" sortable="false" >Edit</th>
+	                             <th id="th-users-7" b2b-table-header key="delete" sortable="false" >Delete</th>
+	                        </tr>
+                        </thead>
+                        <!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->
+                        <tbody b2b-table-row type="body" class="table-body" track-by="$index" row-repeat="rowData in widgetData">
+	                        <tr id="tr-rowData" ng-click="">
+	                            <td b2b-table-body>
+	                                <div id="widget-td-title" ng-hide="rowData.showEdit" ng-bind="rowData.title"></div>
+	                               <input id="widget-input-title-{{$index}}"  type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].title"/>
+	                            </td>
+	                            <td b2b-table-body>
+	                                <div id="widget-td-href" ng-hide="rowData.showEdit" ng-bind="rowData.href"></div>
+	                                <input id="widget-input-href-{{$index}}" type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].href"/>
+	                            </td>
+	                            <td  ng-show="{{widgetType=='EVENTS'}}" b2b-table-body>
+	                                <div id="widget-td-date" ng-hide="rowData.showEdit" ng-bind="rowData.eventDate"></div>
+	                                <input id="widget-input-date-{{$index}}" type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].eventDate"/>
+	                            </td>
+	                            <td  ng-show="{{widgetType=='EVENTS'}}" b2b-table-body>
+	                                <div id="widget-td-content" ng-hide="rowData.showEdit">{{rowData.content | cut:true:20:' ...'}}</div>
+	                                <input id="widget-input-content-{{$index}}"  type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].content"/>
+	                            </td>
+	                            <td b2b-table-body>
+	                                <div id="widget-td-order" ng-hide="rowData.showEdit" ng-bind="rowData.sortOrder"></div>
+	                                <input id="widget-input-order-{{$index}}"  type="text" ng-show="rowData.showEdit" ng-model="widgetData[$index].sortOrder"/>      
+	                            </td>                            
+	                            <td b2b-table-body>
+                                	<div id="edit-contact-us-button" class="delete-contact-us" ng-hide="rowData.showEdit" ng-click="setEdit($index);">
+                                		<span class="icon-edit"></span>
+                                	</div>
+                                	<span ng-show="rowData.showEdit">
+                                		<a id="save-button" att-button btn-type="primary" ng-click="modify($index);" class="button button--primary" size="small" >Save</a>
+                               		</span>
+	                            </td>
+	                            <td b2b-table-body>
+                                	<div id="remove-contact-us" class="delete-contact-us" ng-click="remove($index);">
+                                		<span class="icon-misc-trash"></span>
+                                	</div>
+	                            </td>
+	                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                
+                <div att-divider-lines></div>
+					<div style="margin-top: 15px; margin-left: -80px;" >
+					<form name = "widgetForm" novalidate>				
+						<div id="addWidgetHeader" class="contact-us-margin">				
+							<h1 style="font-size:18px;">Add</h1>
+							<div class="errMsg">{{errMsg}}</div>
+							<div class="sucessMsg" ng-bind="successMsg"></div>
+						</div>								  
+						<div id="addWidget" class="contact-us-margin">
+							<div>
+								<div>
+									<div class="add-widget-field">
+							           <div id="mots-property-label" class="property-label">Title</div>
+							            <input id="widget-input-add-title" class="input-text-area" type="text"  ng-model="newWidgetObject.title" name="title" ng-required="true"/>							          
+							        </div>
+							        <div class="add-widget-field">
+							            <div  class="property-label">URL</div>
+							            <input id="widget-input-add-url" class="input-text-area" type="text"  ng-model="newWidgetObject.href" type="url" size="3" name = "url"  ng-required = "true"/>
+							        </div>
+							        <div class="add-widget-field" >
+							            <div class="property-label">Sort Order</div>
+							            <input id="widget-input-add-order" class="input-text-area" type="text" ng-model="newWidgetObject.sortOrder"/>
+							        </div>
+						        </div>
+						         <div  class="add-widget-field"  ng-controller="DatePickerController" ng-show="{{widgetType=='EVENTS'}}">
+								    <h4>Event Date</h4>
+								    <div>
+								      <div>
+								        <p class="input-group">
+								          <input id="widget-input-add-date" type="text" name = "eventDate" datetime="yyyy-MM-dd" class="input-text-area" uib-datepicker-popup="{{format}}" 
+								          		ng-model="newWidgetObject.eventDate" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" 
+								           ng-focus="open1()"
+								           ng-required = "widgetType =='EVENTS'" />
+								        </p>
+								      </div>
+									</div>
+								</div>	
+								
+						        <div class="add-contact-us-field-des"  ng-show="{{widgetType=='EVENTS'}}">
+						            <div  class="property-label">Content</div>
+						            <textarea style="margin-top: 0px; margin-bottom: 0px; height: 150px" ng-model="newWidgetObject.content" name="content" ng-required = "widgetType =='EVENTS'">
+						            </textarea>						            
+						        </div>
+					        </div>
+							<div style="height:50px;">
+								        <a id="add-button" style="float:right; margin-top:20px;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="saveNew()">Add New</a>
+					
+							</div>
+							
+							<div att-divider-lines></div>
+					
+						</div>
+					</form>
+					</div>
+				    <div style="height:50px;">
+						<a id="close-button" style="float:right;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="closeDialog()">Close</a>
+					</div>           
+            </div>
+        </div>
+    </div>
+</div>
+	
+<script type="application/javascript">
+    $(document).ready(function(){
+        $(".ngdialog-content").css("width","85%");
+        $(".ngdialog-close").attr('id','dialog-close');
+    });
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html
index 59e6f4fa..1f958b7f 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html
@@ -1,86 +1,92 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="manage-widget-parameters-header"></div>

-<div id="title" class="manage-widget-parameters-title">Manage

-	Widgets Parameters Page</div>

-<div class="widgets-popup-margin">

-	<div class="get-access-table">

-		<div class="table-control manage-widget-parameters-table">

-			<div class="c-ecomp-att-abs-table manage-widget-parameters-table-details">

-				<table b2b-table id="table-main" table-data="ignoredTableData"

-					current-page="ignoredCurrentPage"  ng-show="isLoadingTable">

-					<thead b2b-table-row type="header">

-						<tr>

-							<th id="th-users-2" b2b-table-header key="href" sortable="true">Parameter

-								Key</th>

-							<th id="th-users-3" b2b-table-header key="event_date"

-								sortable="true">My Value</th>

-							<th id="th-users-4" b2b-table-header key="content"

-								sortable="true">Default Value</th>

-							<th id="th-users-5" b2b-table-header key="edit" sortable="false">Edit</th>

-							<th id="th-users-5" b2b-table-header key="edit" sortable="false">Reset to Default</th>

-						</tr>

-					</thead>

-					<tbody b2b-table-row type="body" class="table-body"

-						track-by="$index" row-repeat="rowData in widgetParam">

-						<tr id="tr-rowData">

-							<td b2b-table-body>

-								<div id="widget-parameter-td-parameter-key"

-									ng-bind="rowData.param_key"></div>

-							</td>

-							<td b2b-table-body>

-								<div id="widget-parameter-td-parameter-user-value"

-									ng-hide="rowData.showEdit" ng-bind="rowData.user_value"></div>

-								<input id="widget-input-user-value" type="text"

-								ng-show="rowData.showEdit"

-								ng-model="widgetParam[$index].user_value" />

-							</td>

-

-							<td b2b-table-body>

-								<div id="widget-parameter-td-parameter-default-value"

-									ng-bind="rowData.default_value"></div>

-							</td>

-							<td b2b-table-body>

-								<div ng-hide="rowData.showEdit" ng-click="setEdit($index);">

-									<span class="icon-edit"></span>

-								</div> <span ng-show="rowData.showEdit"> <a att-button

-									btn-type="primary" ng-click="modify($index);"

-									class="button button--primary" size="small">Save</a>

-							</span>

-							</td>

-							<td b2b-table-body>

-								<div ng-click="resetDefault($index);">

-									<span class="icon-edit"></span>

-								</div> 

-							</span>

-							</td>

-						</tr>

-					</tbody>

-

-				</table>

-				<div ng-show = "messageInfo">

-					There is no parameter assoicated with this widget!

-				</div>

-				

-			</div>

-

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="manage-widget-parameters-header"></div>
+<div id="title" class="manage-widget-parameters-title">Manage
+	Widgets Parameters Page</div>
+<div class="widgets-popup-margin">
+	<div class="get-access-table">
+		<div class="table-control manage-widget-parameters-table">
+			<div class="c-ecomp-att-abs-table manage-widget-parameters-table-details">
+				<table b2b-table id="table-main" table-data="ignoredTableData"
+					current-page="ignoredCurrentPage"  ng-show="isLoadingTable">
+					<thead b2b-table-row type="header">
+						<tr>
+							<th id="th-users-2" b2b-table-header key="href" sortable="true">Parameter
+								Key</th>
+							<th id="th-users-3" b2b-table-header key="event_date"
+								sortable="true">My Value</th>
+							<th id="th-users-4" b2b-table-header key="content"
+								sortable="true">Default Value</th>
+							<th id="th-users-5" b2b-table-header key="edit" sortable="false">Edit</th>
+							<th id="th-users-5" b2b-table-header key="edit" sortable="false">Reset to Default</th>
+						</tr>
+					</thead>
+					<tbody b2b-table-row type="body" class="table-body"
+						track-by="$index" row-repeat="rowData in widgetParam">
+						<tr id="tr-rowData">
+							<td b2b-table-body>
+								<div id="widget-parameter-td-parameter-key"
+									ng-bind="rowData.param_key"></div>
+							</td>
+							<td b2b-table-body>
+								<div id="widget-parameter-td-parameter-user-value"
+									ng-hide="rowData.showEdit" ng-bind="rowData.user_value"></div>
+								<input id="widget-input-user-value" type="text"
+								ng-show="rowData.showEdit"
+								ng-model="widgetParam[$index].user_value" />
+							</td>
+
+							<td b2b-table-body>
+								<div id="widget-parameter-td-parameter-default-value"
+									ng-bind="rowData.default_value"></div>
+							</td>
+							<td b2b-table-body>
+								<div ng-hide="rowData.showEdit" ng-click="setEdit($index);">
+									<span class="icon-edit"></span>
+								</div> <span ng-show="rowData.showEdit"> <a att-button
+									btn-type="primary" ng-click="modify($index);"
+									class="button button--primary" size="small">Save</a>
+							</span>
+							</td>
+							<td b2b-table-body>
+								<div ng-click="resetDefault($index);">
+									<span class="icon-edit"></span>
+								</div> 
+							</span>
+							</td>
+						</tr>
+					</tbody>
+
+				</table>
+				<div ng-show = "messageInfo">
+					There is no parameter assoicated with this widget!
+				</div>
+				
+			</div>
+
+		</div>
+	</div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js
index 460618ea..fb9a254f 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js
@@ -1,81 +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';

-

-(function () {

-    class WidgetParameterController {

-        constructor($scope, widgetsCatalogService, userProfileService) {

-        	let widgetId = $scope.ngDialogData.widgetId;

-        	$scope.modflag = false;

-        	$scope.isLoadingTable = false;

-        	$scope.messageInfo = false;

-        	

-        	widgetsCatalogService.getWidgetCatalogParameters(widgetId).then(res => {

-        		if(res.status == 'OK'){

-        			$scope.isLoadingTable = true;

-        			$scope.widgetParam = res.response;

-        		}else if(res.status == 'WARN'){

-        			$scope.messageInfo = true;

-        		}

-             }).catch(err => {

-                 $log.error('WidgetParameterController::init error: ' + err);

-             })

-            	

-        	 $scope.setEdit = function(index) {

- 	        	if($scope.modflag === false){

- 	        		$scope.widgetParam[index].showEdit = true;

- 		        	$scope.modflag = true;

- 	        	}

- 	         }	        

-        	

-        	 $scope.resetDefault = function(index) {

-        		var widgetParamObject = {};

-             	widgetParamObject.user_value = $scope.widgetParam[parseInt(index)].default_value;

-             	widgetParamObject.paramId = $scope.widgetParam[parseInt(index)].param_id;

-             	widgetParamObject.widgetId = widgetId;

-  	        	widgetsCatalogService.saveWidgetParameter(widgetParamObject)

-         		.then(function(res){

-         			if(res.status == 'OK'){

-         				$scope.widgetParam[index].user_value = $scope.widgetParam[index].default_value;

-         			}

-         		});

-  	         }	     

-        	

-        	 $scope.modify = function(index) {

-         		

-         		var widgetParamObject = {};

-         		widgetParamObject.user_value = $scope.widgetParam[parseInt(index)].user_value;

-         		widgetParamObject.paramId = $scope.widgetParam[parseInt(index)].param_id;

-         		widgetParamObject.widgetId = widgetId;

-         		

-         		widgetsCatalogService.saveWidgetParameter(widgetParamObject)

-         		.then(function(res){

-         			if(res.status == 'OK'){

-         				$scope.modflag = false;

-         				$scope.widgetParam[index].showEdit = false;

-         			}

-         		});

-         		

-         	};	

-        }           

-    }

-    WidgetParameterController.$inject = ['$scope', 'widgetsCatalogService', 'userProfileService'];

-    angular.module('ecompApp').controller('WidgetParameterController', WidgetParameterController); 

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class WidgetParameterController {
+        constructor($scope, widgetsCatalogService, userProfileService) {
+        	let widgetId = $scope.ngDialogData.widgetId;
+        	$scope.modflag = false;
+        	$scope.isLoadingTable = false;
+        	$scope.messageInfo = false;
+        	
+        	widgetsCatalogService.getWidgetCatalogParameters(widgetId).then(res => {
+        		if(res.status == 'OK'){
+        			$scope.isLoadingTable = true;
+        			$scope.widgetParam = res.response;
+        		}else if(res.status == 'WARN'){
+        			$scope.messageInfo = true;
+        		}
+             }).catch(err => {
+                 $log.error('WidgetParameterController::init error: ' + err);
+             })
+            	
+        	 $scope.setEdit = function(index) {
+ 	        	if($scope.modflag === false){
+ 	        		$scope.widgetParam[index].showEdit = true;
+ 		        	$scope.modflag = true;
+ 	        	}
+ 	         }	        
+        	
+        	 $scope.resetDefault = function(index) {
+        		var widgetParamObject = {};
+             	widgetParamObject.user_value = $scope.widgetParam[parseInt(index)].default_value;
+             	widgetParamObject.paramId = $scope.widgetParam[parseInt(index)].param_id;
+             	widgetParamObject.widgetId = widgetId;
+  	        	widgetsCatalogService.saveWidgetParameter(widgetParamObject)
+         		.then(function(res){
+         			if(res.status == 'OK'){
+         				$scope.widgetParam[index].user_value = $scope.widgetParam[index].default_value;
+         			}
+         		});
+  	         }	     
+        	
+        	 $scope.modify = function(index) {
+         		
+         		var widgetParamObject = {};
+         		widgetParamObject.user_value = $scope.widgetParam[parseInt(index)].user_value;
+         		widgetParamObject.paramId = $scope.widgetParam[parseInt(index)].param_id;
+         		widgetParamObject.widgetId = widgetId;
+         		
+         		widgetsCatalogService.saveWidgetParameter(widgetParamObject)
+         		.then(function(res){
+         			if(res.status == 'OK'){
+         				$scope.modflag = false;
+         				$scope.widgetParam[index].showEdit = false;
+         			}
+         		});
+         		
+         	};	
+        }           
+    }
+    WidgetParameterController.$inject = ['$scope', 'widgetsCatalogService', 'userProfileService'];
+    angular.module('ecompApp').controller('WidgetParameterController', WidgetParameterController); 
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.less b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.less
index ce63acd4..76521f9b 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.less
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.less
@@ -1,28 +1,28 @@
-.manage-widget-parameters-title{

- 	color: #067ab4;

-    font-family: "Omnes-ECOMP-W02", Arial;;

-    font-size: 24px;

-    margin-left: 30px;

-    width: 1170px;

-    margin-top: 20px; 

-    margin-bottom: 10px;

-}

-

-.manage-widget-parameters-table{

-	margin: 30px;

-}

-

-.manage-widget-parameters-table-details{

-	height: 300px;

-	background-color: #ffffff;

-}

-

-.manage-widget-parameters-header{

-	margin-top: 20px;

-	margin-bottom: 20px;

-	height:20px;

-}

-

-.ngdialog-content{

-	width: 40%;

+.manage-widget-parameters-title{
+ 	color: #067ab4;
+    font-family: "Omnes-ECOMP-W02", Arial;;
+    font-size: 24px;
+    margin-left: 30px;
+    width: 1170px;
+    margin-top: 20px; 
+    margin-bottom: 10px;
+}
+
+.manage-widget-parameters-table{
+	margin: 30px;
+}
+
+.manage-widget-parameters-table-details{
+	height: 300px;
+	background-color: #ffffff;
+}
+
+.manage-widget-parameters-header{
+	margin-top: 20px;
+	margin-bottom: 20px;
+	height:20px;
+}
+
+.ngdialog-content{
+	width: 40%;
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.js b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.js
index fe0bf453..aff4e0c1 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.js
@@ -1,422 +1,422 @@
-/*-

- * ================================================================================

- * 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 () {

-    class CommonWidgetController {

-        constructor(dashboardService, $scope, message, $q, $http, conf, $filter,confirmBoxService,$log) {

-        	$scope.widgetType = message.type;

-        	$scope.widgetTypeDisplay = message.type;

-        	$scope.modflag = false;

-        	

-        	switch (message.type) {

-            case 'EVENTS':

-            	$scope.widgetTypeDisplay = 'Events'

-                break;

-            case 'NEWS':

-            	$scope.widgetTypeDisplay = 'News'

-                break;

-            case 'IMPORTANTRESOURCES':

-            	$scope.widgetTypeDisplay = 'Resources'

-                break;

-        	}

- 

-        	$scope.widgetData = [];

-	        dashboardService.getCommonWidgetData(message.type)

-	        .then(function (res) {

-	        	 // console.log('CommonWidgetController: result is ' + res);

-	        	 $scope.widgetData = res.response.items;

-	         });

-                 

-	         

-	         

-	        $scope.setEdit = function(index) {

-	        	

-	        	//for(var i=0; i<$scope.widgetData )

-	        	

-	        	if($scope.modflag === false){

-	        		$scope.widgetData[index].showEdit = true;

-		        	$scope.modflag = true;

-	        	}

-	         }	         

-        	

-	         $scope.modify = function(index) {

-        		

-        		$scope.widgetObject = {};

-        		$scope.widgetObject.id = $scope.widgetData[parseInt(index)].id;

-        		$scope.widgetObject.category = $scope.widgetData[parseInt(index)].category;

-        		$scope.widgetObject.title = $scope.widgetData[parseInt(index)].title;

-        		$scope.widgetObject.href = $scope.widgetData[parseInt(index)].href;

-        		$scope.widgetObject.eventDate = $scope.widgetData[parseInt(index)].eventDate;

-        		$scope.widgetObject.content = $scope.widgetData[parseInt(index)].content;

-        		$scope.widgetObject.sortOrder = $scope.widgetData[parseInt(index)].sortOrder;

-        		

-        		var validateMsg = $scope.validateWidgetObject($scope.widgetObject);

-    			if (validateMsg) {

-    				confirmBoxService.showInformation(validateMsg).then(isConfirmed => {return;});

-    				return;

-    			}

-    			

-        		dashboardService.saveCommonWidgetData($scope.widgetObject)

-        		.then(function(res){

-        			if (res.status == 'OK') {

-        			dashboardService.getCommonWidgetData(message.type)

-        			.then(function(res){

-        				$scope.widgetData = res.response.items;

-        	        	$scope.modflag = false;

-        				$scope.cancelEdit(index);

-        				});

-        			}

-        			else {

-        				// Save failed

-        				confirmBoxService.showInformation("Save failed").then(isConfirmed => {return;});

-        				return;

-        			}

-        		});   

-

-        	};	

-        	

-        	$scope.newWidgetObject = {};

-        	

-        	// Answers string error if validation fails; 

-        	// answers null if all is well.

-        	$scope.validateWidgetObject = function(wo) {

-        		if (wo.title == null || wo.title == '')

-        			return "Please enter a title.";

-        		if (wo.href == null || wo.href == '' || !validateUrl(wo.href))

-        			return "Please enter a valid URL that starts with http.";

-        		if (wo.sortOrder == null || wo.sortOrder == '' || isNaN(parseInt(wo.sortOrder)))

-        			return "Please enter a number for the sort order.";

-    			if (wo.category=='EVENTS') {

-    				if (wo.eventDate == null || wo.eventDate == '')

-    					return "Please enter a date for the event.";

-    				// Parses and normalizes the date with rollover.

-    				var filteredDate = $filter('date')(wo.eventDate, "yyyy-MM-dd");

-    				// $log.debug('dashboard-widget-controller: date filter yields ' + filteredDate);

-    				// The date picker shows mm/dd/yy.

-    				if (filteredDate == null || filteredDate.length != 10)

-    					return "Please enter a valid date as YYYY-MM-DD";

-    				if (wo.content==null || wo.content=='')

-    					return "Please enter content for the event.";

-    			}

-    			return null;

-    		};

-        	

-        	$scope.saveNew = function() {

-        		$scope.newWidgetObject.category = message.type;

-        		// $log.info($scope.newWidgetObject);

-        		var validateMsg = $scope.validateWidgetObject($scope.newWidgetObject);

-    			if (validateMsg) {

-    				confirmBoxService.showInformation(validateMsg).then(isConfirmed => {return;});

-    				return;

-    			}

-    			// Transform date into expected storage format

-    			$scope.newWidgetObject.eventDate = $filter('date')($scope.newWidgetObject.eventDate, "yyyy-MM-dd");

-

-    			dashboardService.saveCommonWidgetData($scope.newWidgetObject)

-        		.then(function(res){

-        			if (res.status == 'OK') {

-        				$scope.widgetForm.$setPristine();  

-        				confirmBoxService.showInformation('You have added a new item').then(isConfirmed => {

-        				});

-        				dashboardService.getCommonWidgetData(message.type)

-        				.then(function(res){

-        					$scope.widgetData = res.response.items;

-        					$scope.newWidgetObject = {};

-        			});  

-        			}

-        			else {

-        				confirmBoxService.showInformation("Save failed").then(isConfirmed => {return;});

-        				return;

-        			}        			

-        		});        		

-        	};

-        	

-        	$scope.remove = function(index) {

-        		var confirmMsg = 'Are you sure you want to delete this item from the list?' + ' Press OK to delete.';

-        		confirmBoxService.confirm(confirmMsg).then(function (confirmed) {

-                    if (confirmed == true) { 

-                    	$scope.widgetObject = {};

-                		$scope.widgetObject.id = $scope.widgetData[parseInt(index)].id;

-                		$scope.widgetObject.category = $scope.widgetData[parseInt(index)].category;

-                		$scope.widgetObject.title = $scope.widgetData[parseInt(index)].title;

-                		$scope.widgetObject.href = $scope.widgetData[parseInt(index)].href;

-                		$scope.widgetObject.sortOrder = $scope.widgetData[parseInt(index)].sortOrder;

-                		

-                		

-                		dashboardService.removeCommonWidgetData($scope.widgetObject)

-                		.then(function(res){

-                			dashboardService.getCommonWidgetData(message.type)

-                			.then(function(res){

-                				$scope.widgetData = res.response.items;

-                				$scope.cancelEdit(index);

-                			});        			

-                		});                           	

-                    }

-                });

-        				

-        	};	

-        	$scope.closeDialog = function(){

-        		$scope.closeThisDialog( $scope.widgetData);

-        	}

-        	$scope.deleteSpeedDial = function(widget){

-        		

-        	 }

-        	 

-        	 $scope.manage = function(index) {

-        		 	$scope.modflag = true;

-        		 	

-        		 	var thisdata = $scope.widgetData[index];

-        	      	$scope.editMode=true;

-        	      	var category = "#category"+index;

-        	      	var categoryEdit = "#categoryEdit"+index;

-        	      	

-        	      	var title = "#title"+index;

-        	      	var titleEdit = "#titleEdit"+index;

-

-        	      	var url = "#href"+index;

-        	      	var urlEdit = "#hrefEdit"+index;

-        	      	

-        	      	var order = "#order"+index;

-        	      	var orderEdit = "#orderEdit"+index;

-        	  

-        	    	var eventDate = "#eventDate"+index;

-        	      	var eventDateEdit = "#eventDateEdit"+index;

-        	  

-        	      	

-        	      	var dsavebutton  ="#savebutton"+index;

-        	      	var dremovebutton="#removebutton"+index;

-        	      	var dmanagebutton="#managebutton"+index;

-        	      	var deditRbutton="#editRbutton"+index;

-        	      	

-        	      	$(title).css('display', 'none');

-        	        $(titleEdit).css('display', 'inherit'); 

-        	        $(url).css('display', 'none');

-        	        $(urlEdit).css('display', 'inherit'); 

-        	        $(order).css('display', 'none');

-        	        $(orderEdit).css('display', 'inherit');

-        	        $(eventDate).css('display', 'none');

-        	        $(eventDateEdit).css('display', 'inherit');

-        	        

-        	        $(dsavebutton).css('display', 'inherit');

-        	      	$(dremovebutton).css('display', 'inherit');

-        	      	$(dmanagebutton).css('display', 'none');

-        	      	$(deditRbutton).css('display', 'inherit');

-        	    	

-        	      };

-        	      

-        	   $scope.cancelEdit = function(index) {

-        	    	

-	       	    	$scope.editMode=false;

-	    	    	var category = "#category"+index;

-	    	      	var categoryEdit = "#categoryEdit"+index;

-	    	      	

-	    	      	var title = "#title"+index;

-	    	      	var titleEdit = "#titleEdit"+index;

-	

-	    	      	var url = "#href"+index;

-	    	      	var urlEdit = "#hrefEdit"+index;

-	    	      	

-	    	      	var order = "#order"+index;

-	    	      	var orderEdit = "#orderEdit"+index;

-

-	    	      	var eventDate = "#eventDate"+index;

-	    	      	var eventDateEdit = "#eventDateEdit"+index;

-

-	    	    	var dsavebutton  ="#savebutton"+index;

-	    	    	var dremovebutton  ="#removebutton"+index;

-	    	    	var dmanagebutton="#managebutton"+index;

-	    	    	var deditRbutton="#editRbutton"+index;

-	    	

-	    	    	$(title).css('display', 'inherit');

-	    	        $(titleEdit).css('display', 'none'); 

-	    	        

-	    	        $(url).css('display', 'inherit');

-	    	        $(urlEdit).css('display', 'none'); 

-	    	        

-	    	        $(order).css('display', 'inherit');

-	    	        $(orderEdit).css('display', 'none');

-

-	    	        $(eventDate).css('display', 'inherit');

-	    	        $(eventDateEdit).css('display', 'none');

-

-	    	        $(dsavebutton).css('display', 'none');

-        	       	$(dremovebutton).css('display', 'none');

-        	    	$(dmanagebutton).css('display', 'inherit');

-        	    	$(deditRbutton).css('display', 'none');

-        	      	

-        	     };

-        	

-        	$scope.popupConfirmWin = function(title, msgBody, callback){

-            	modalService.popupConfirmWin.apply(null, arguments);

-            };

-        }           

-    }

-    CommonWidgetController.$inject = ['dashboardService', '$scope', 'message', '$q', '$http', 'conf', '$filter','confirmBoxService','$log'];

-    angular.module('ecompApp').controller('CommonWidgetController', CommonWidgetController); 

-})();

-

-angular.module('ecompApp').filter('cut', function () {

-    return function (value, wordwise, max, tail) {

-        if (!value) return '';

-

-        max = parseInt(max, 10);

-        if (!max) return value;

-        if (value.length <= max) return value;

-

-        value = value.substr(0, max);

-        if (wordwise) {

-            var lastspace = value.lastIndexOf(' ');

-            if (lastspace != -1) {

-              //Also remove . and , so its gives a cleaner result.

-              if (value.charAt(lastspace-1) == '.' || value.charAt(lastspace-1) == ',') {

-                lastspace = lastspace - 1;

-              }

-              value = value.substr(0, lastspace);

-            }

-        }

-

-        return value + (tail || ' …');

-    };

-});

-

-angular.module('ecompApp').controller('DatePickerController', function ($scope, uibDateParser) {

-	 	  $scope.today = function() {

-		    $scope.dt = new Date();

-		  };

-		  $scope.today();

-

-		  $scope.clear = function() {

-		    $scope.dt = null;

-		  };

-

-		  $scope.inlineOptions = {

-		    customClass: getDayClass,

-		    minDate: new Date(),

-		    showWeeks: true

-		  };

-

-		  $scope.dateOptions = {

-		    dateDisabled: disabled,

-		    formatYear: 'yy',

-		    minDate: new Date(),

-		    startingDay: 1

-		  };

-

-		  // Disable weekend selection

-		  function disabled(data) {

-		    var date = data.date,

-		      mode = data.mode;

-		    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);

-		  }

-

-		  $scope.toggleMin = function() {

-		    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();

-		    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;

-		  };

-

-		  $scope.toggleMin();

-

-		  $scope.open1 = function() {

-			// console.log('In open1');

-		    $scope.popup1.opened = true;

-		  };

-

-		  $scope.open2 = function() {

-			// console.log('In open2');

-			$scope.popup2.opened = true;

-		  };

-

-		  

-		  $scope.setDate = function(year, month, day) {

-		    $scope.dt = new Date(year, month, day);

-		  };

-

-		  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];

-		  $scope.format = $scope.formats[3];

-		  $scope.altInputFormats = ['M!/d!/yyyy'];

-

-		  $scope.popup1 = {

-		    opened: false

-		  };

-

-		  $scope.popup2 = {

-		    opened: false

-		  };

-

-		  var tomorrow = new Date();

-		  tomorrow.setDate(tomorrow.getDate() + 1);

-		  var afterTomorrow = new Date();

-		  afterTomorrow.setDate(tomorrow.getDate() + 1);

-		  $scope.events = [

-		    {

-		      date: tomorrow,

-		      status: 'full'

-		    },

-		    {

-		      date: afterTomorrow,

-		      status: 'partially'

-		    }

-		  ];

-

-		  function getDayClass(data) {

-		    var date = data.date,

-		      mode = data.mode;

-		    if (mode === 'day') {

-		      var dayToCheck = new Date(date).setHours(0,0,0,0);

-

-		      for (var i = 0; i < $scope.events.length; i++) {

-		        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

-

-		        if (dayToCheck === currentDay) {

-		          return $scope.events[i].status;

-		        }

-		      }

-		    }

-

-		    return '';

-		  }

-});

-

-

-

-function toggleCollapsible(id, clickedIconId, subtitutingIconId){

-	$("#"+id).toggle();

-	$("#"+clickedIconId).toggle();

-	$("#"+subtitutingIconId).toggle();

-	setTimeout(function(){focusFirstEle(id);}, 1000);

-}

-

-function focusFirstEle(id){

-	var focusItems = $("#"+id).find(":focusable");

-	for(var i=0; i<focusItems.length; i++){

-		if(!isHidden(focusItems[i])){

-			var targetClassName = focusItems[i].className;

-			if(targetClassName!='collapsibleArrow'){

-				focusItems[i].focus();

-				return;

-			}

-		}

-	}

-}     

-

-function validateUrl(value){

-    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);

-  }

+/*-
+ * ================================================================================
+ * 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 () {
+    class CommonWidgetController {
+        constructor(dashboardService, $scope, message, $q, $http, conf, $filter,confirmBoxService,$log) {
+        	$scope.widgetType = message.type;
+        	$scope.widgetTypeDisplay = message.type;
+        	$scope.modflag = false;
+        	
+        	switch (message.type) {
+            case 'EVENTS':
+            	$scope.widgetTypeDisplay = 'Events'
+                break;
+            case 'NEWS':
+            	$scope.widgetTypeDisplay = 'News'
+                break;
+            case 'IMPORTANTRESOURCES':
+            	$scope.widgetTypeDisplay = 'Resources'
+                break;
+        	}
+ 
+        	$scope.widgetData = [];
+	        dashboardService.getCommonWidgetData(message.type)
+	        .then(function (res) {
+	        	 // console.log('CommonWidgetController: result is ' + res);
+	        	 $scope.widgetData = res.response.items;
+	         });
+                 
+	         
+	         
+	        $scope.setEdit = function(index) {
+	        	
+	        	//for(var i=0; i<$scope.widgetData )
+	        	
+	        	if($scope.modflag === false){
+	        		$scope.widgetData[index].showEdit = true;
+		        	$scope.modflag = true;
+	        	}
+	         }	         
+        	
+	         $scope.modify = function(index) {
+        		
+        		$scope.widgetObject = {};
+        		$scope.widgetObject.id = $scope.widgetData[parseInt(index)].id;
+        		$scope.widgetObject.category = $scope.widgetData[parseInt(index)].category;
+        		$scope.widgetObject.title = $scope.widgetData[parseInt(index)].title;
+        		$scope.widgetObject.href = $scope.widgetData[parseInt(index)].href;
+        		$scope.widgetObject.eventDate = $scope.widgetData[parseInt(index)].eventDate;
+        		$scope.widgetObject.content = $scope.widgetData[parseInt(index)].content;
+        		$scope.widgetObject.sortOrder = $scope.widgetData[parseInt(index)].sortOrder;
+        		
+        		var validateMsg = $scope.validateWidgetObject($scope.widgetObject);
+    			if (validateMsg) {
+    				confirmBoxService.showInformation(validateMsg).then(isConfirmed => {return;});
+    				return;
+    			}
+    			
+        		dashboardService.saveCommonWidgetData($scope.widgetObject)
+        		.then(function(res){
+        			if (res.status == 'OK') {
+        			dashboardService.getCommonWidgetData(message.type)
+        			.then(function(res){
+        				$scope.widgetData = res.response.items;
+        	        	$scope.modflag = false;
+        				$scope.cancelEdit(index);
+        				});
+        			}
+        			else {
+        				// Save failed
+        				confirmBoxService.showInformation("Save failed").then(isConfirmed => {return;});
+        				return;
+        			}
+        		});   
+
+        	};	
+        	
+        	$scope.newWidgetObject = {};
+        	
+        	// Answers string error if validation fails; 
+        	// answers null if all is well.
+        	$scope.validateWidgetObject = function(wo) {
+        		if (wo.title == null || wo.title == '')
+        			return "Please enter a title.";
+        		if (wo.href == null || wo.href == '' || !validateUrl(wo.href))
+        			return "Please enter a valid URL that starts with http.";
+        		if (wo.sortOrder == null || wo.sortOrder == '' || isNaN(parseInt(wo.sortOrder)))
+        			return "Please enter a number for the sort order.";
+    			if (wo.category=='EVENTS') {
+    				if (wo.eventDate == null || wo.eventDate == '')
+    					return "Please enter a date for the event.";
+    				// Parses and normalizes the date with rollover.
+    				var filteredDate = $filter('date')(wo.eventDate, "yyyy-MM-dd");
+    				// $log.debug('dashboard-widget-controller: date filter yields ' + filteredDate);
+    				// The date picker shows mm/dd/yy.
+    				if (filteredDate == null || filteredDate.length != 10)
+    					return "Please enter a valid date as YYYY-MM-DD";
+    				if (wo.content==null || wo.content=='')
+    					return "Please enter content for the event.";
+    			}
+    			return null;
+    		};
+        	
+        	$scope.saveNew = function() {
+        		$scope.newWidgetObject.category = message.type;
+        		// $log.info($scope.newWidgetObject);
+        		var validateMsg = $scope.validateWidgetObject($scope.newWidgetObject);
+    			if (validateMsg) {
+    				confirmBoxService.showInformation(validateMsg).then(isConfirmed => {return;});
+    				return;
+    			}
+    			// Transform date into expected storage format
+    			$scope.newWidgetObject.eventDate = $filter('date')($scope.newWidgetObject.eventDate, "yyyy-MM-dd");
+
+    			dashboardService.saveCommonWidgetData($scope.newWidgetObject)
+        		.then(function(res){
+        			if (res.status == 'OK') {
+        				$scope.widgetForm.$setPristine();  
+        				confirmBoxService.showInformation('You have added a new item').then(isConfirmed => {
+        				});
+        				dashboardService.getCommonWidgetData(message.type)
+        				.then(function(res){
+        					$scope.widgetData = res.response.items;
+        					$scope.newWidgetObject = {};
+        			});  
+        			}
+        			else {
+        				confirmBoxService.showInformation("Save failed").then(isConfirmed => {return;});
+        				return;
+        			}        			
+        		});        		
+        	};
+        	
+        	$scope.remove = function(index) {
+        		var confirmMsg = 'Are you sure you want to delete this item from the list?' + ' Press OK to delete.';
+        		confirmBoxService.confirm(confirmMsg).then(function (confirmed) {
+                    if (confirmed == true) { 
+                    	$scope.widgetObject = {};
+                		$scope.widgetObject.id = $scope.widgetData[parseInt(index)].id;
+                		$scope.widgetObject.category = $scope.widgetData[parseInt(index)].category;
+                		$scope.widgetObject.title = $scope.widgetData[parseInt(index)].title;
+                		$scope.widgetObject.href = $scope.widgetData[parseInt(index)].href;
+                		$scope.widgetObject.sortOrder = $scope.widgetData[parseInt(index)].sortOrder;
+                		
+                		
+                		dashboardService.removeCommonWidgetData($scope.widgetObject)
+                		.then(function(res){
+                			dashboardService.getCommonWidgetData(message.type)
+                			.then(function(res){
+                				$scope.widgetData = res.response.items;
+                				$scope.cancelEdit(index);
+                			});        			
+                		});                           	
+                    }
+                });
+        				
+        	};	
+        	$scope.closeDialog = function(){
+        		$scope.closeThisDialog( $scope.widgetData);
+        	}
+        	$scope.deleteSpeedDial = function(widget){
+        		
+        	 }
+        	 
+        	 $scope.manage = function(index) {
+        		 	$scope.modflag = true;
+        		 	
+        		 	var thisdata = $scope.widgetData[index];
+        	      	$scope.editMode=true;
+        	      	var category = "#category"+index;
+        	      	var categoryEdit = "#categoryEdit"+index;
+        	      	
+        	      	var title = "#title"+index;
+        	      	var titleEdit = "#titleEdit"+index;
+
+        	      	var url = "#href"+index;
+        	      	var urlEdit = "#hrefEdit"+index;
+        	      	
+        	      	var order = "#order"+index;
+        	      	var orderEdit = "#orderEdit"+index;
+        	  
+        	    	var eventDate = "#eventDate"+index;
+        	      	var eventDateEdit = "#eventDateEdit"+index;
+        	  
+        	      	
+        	      	var dsavebutton  ="#savebutton"+index;
+        	      	var dremovebutton="#removebutton"+index;
+        	      	var dmanagebutton="#managebutton"+index;
+        	      	var deditRbutton="#editRbutton"+index;
+        	      	
+        	      	$(title).css('display', 'none');
+        	        $(titleEdit).css('display', 'inherit'); 
+        	        $(url).css('display', 'none');
+        	        $(urlEdit).css('display', 'inherit'); 
+        	        $(order).css('display', 'none');
+        	        $(orderEdit).css('display', 'inherit');
+        	        $(eventDate).css('display', 'none');
+        	        $(eventDateEdit).css('display', 'inherit');
+        	        
+        	        $(dsavebutton).css('display', 'inherit');
+        	      	$(dremovebutton).css('display', 'inherit');
+        	      	$(dmanagebutton).css('display', 'none');
+        	      	$(deditRbutton).css('display', 'inherit');
+        	    	
+        	      };
+        	      
+        	   $scope.cancelEdit = function(index) {
+        	    	
+	       	    	$scope.editMode=false;
+	    	    	var category = "#category"+index;
+	    	      	var categoryEdit = "#categoryEdit"+index;
+	    	      	
+	    	      	var title = "#title"+index;
+	    	      	var titleEdit = "#titleEdit"+index;
+	
+	    	      	var url = "#href"+index;
+	    	      	var urlEdit = "#hrefEdit"+index;
+	    	      	
+	    	      	var order = "#order"+index;
+	    	      	var orderEdit = "#orderEdit"+index;
+
+	    	      	var eventDate = "#eventDate"+index;
+	    	      	var eventDateEdit = "#eventDateEdit"+index;
+
+	    	    	var dsavebutton  ="#savebutton"+index;
+	    	    	var dremovebutton  ="#removebutton"+index;
+	    	    	var dmanagebutton="#managebutton"+index;
+	    	    	var deditRbutton="#editRbutton"+index;
+	    	
+	    	    	$(title).css('display', 'inherit');
+	    	        $(titleEdit).css('display', 'none'); 
+	    	        
+	    	        $(url).css('display', 'inherit');
+	    	        $(urlEdit).css('display', 'none'); 
+	    	        
+	    	        $(order).css('display', 'inherit');
+	    	        $(orderEdit).css('display', 'none');
+
+	    	        $(eventDate).css('display', 'inherit');
+	    	        $(eventDateEdit).css('display', 'none');
+
+	    	        $(dsavebutton).css('display', 'none');
+        	       	$(dremovebutton).css('display', 'none');
+        	    	$(dmanagebutton).css('display', 'inherit');
+        	    	$(deditRbutton).css('display', 'none');
+        	      	
+        	     };
+        	
+        	$scope.popupConfirmWin = function(title, msgBody, callback){
+            	modalService.popupConfirmWin.apply(null, arguments);
+            };
+        }           
+    }
+    CommonWidgetController.$inject = ['dashboardService', '$scope', 'message', '$q', '$http', 'conf', '$filter','confirmBoxService','$log'];
+    angular.module('ecompApp').controller('CommonWidgetController', CommonWidgetController); 
+})();
+
+angular.module('ecompApp').filter('cut', function () {
+    return function (value, wordwise, max, tail) {
+        if (!value) return '';
+
+        max = parseInt(max, 10);
+        if (!max) return value;
+        if (value.length <= max) return value;
+
+        value = value.substr(0, max);
+        if (wordwise) {
+            var lastspace = value.lastIndexOf(' ');
+            if (lastspace != -1) {
+              //Also remove . and , so its gives a cleaner result.
+              if (value.charAt(lastspace-1) == '.' || value.charAt(lastspace-1) == ',') {
+                lastspace = lastspace - 1;
+              }
+              value = value.substr(0, lastspace);
+            }
+        }
+
+        return value + (tail || ' …');
+    };
+});
+
+angular.module('ecompApp').controller('DatePickerController', function ($scope, uibDateParser) {
+	 	  $scope.today = function() {
+		    $scope.dt = new Date();
+		  };
+		  $scope.today();
+
+		  $scope.clear = function() {
+		    $scope.dt = null;
+		  };
+
+		  $scope.inlineOptions = {
+		    customClass: getDayClass,
+		    minDate: new Date(),
+		    showWeeks: true
+		  };
+
+		  $scope.dateOptions = {
+		    dateDisabled: disabled,
+		    formatYear: 'yy',
+		    minDate: new Date(),
+		    startingDay: 1
+		  };
+
+		  // Disable weekend selection
+		  function disabled(data) {
+		    var date = data.date,
+		      mode = data.mode;
+		    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
+		  }
+
+		  $scope.toggleMin = function() {
+		    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
+		    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
+		  };
+
+		  $scope.toggleMin();
+
+		  $scope.open1 = function() {
+			// console.log('In open1');
+		    $scope.popup1.opened = true;
+		  };
+
+		  $scope.open2 = function() {
+			// console.log('In open2');
+			$scope.popup2.opened = true;
+		  };
+
+		  
+		  $scope.setDate = function(year, month, day) {
+		    $scope.dt = new Date(year, month, day);
+		  };
+
+		  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
+		  $scope.format = $scope.formats[3];
+		  $scope.altInputFormats = ['M!/d!/yyyy'];
+
+		  $scope.popup1 = {
+		    opened: false
+		  };
+
+		  $scope.popup2 = {
+		    opened: false
+		  };
+
+		  var tomorrow = new Date();
+		  tomorrow.setDate(tomorrow.getDate() + 1);
+		  var afterTomorrow = new Date();
+		  afterTomorrow.setDate(tomorrow.getDate() + 1);
+		  $scope.events = [
+		    {
+		      date: tomorrow,
+		      status: 'full'
+		    },
+		    {
+		      date: afterTomorrow,
+		      status: 'partially'
+		    }
+		  ];
+
+		  function getDayClass(data) {
+		    var date = data.date,
+		      mode = data.mode;
+		    if (mode === 'day') {
+		      var dayToCheck = new Date(date).setHours(0,0,0,0);
+
+		      for (var i = 0; i < $scope.events.length; i++) {
+		        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
+
+		        if (dayToCheck === currentDay) {
+		          return $scope.events[i].status;
+		        }
+		      }
+		    }
+
+		    return '';
+		  }
+});
+
+
+
+function toggleCollapsible(id, clickedIconId, subtitutingIconId){
+	$("#"+id).toggle();
+	$("#"+clickedIconId).toggle();
+	$("#"+subtitutingIconId).toggle();
+	setTimeout(function(){focusFirstEle(id);}, 1000);
+}
+
+function focusFirstEle(id){
+	var focusItems = $("#"+id).find(":focusable");
+	for(var i=0; i<focusItems.length; i++){
+		if(!isHidden(focusItems[i])){
+			var targetClassName = focusItems[i].className;
+			if(targetClassName!='collapsibleArrow'){
+				focusItems[i].focus();
+				return;
+			}
+		}
+	}
+}     
+
+function validateUrl(value){
+    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+  }
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js
index 5a763e27..87558fa8 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js
@@ -1,504 +1,525 @@
-/*-

- * ================================================================================

- * 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 _classCallCheck(instance, Constructor) {

-	if (!(instance instanceof Constructor)) {

-		throw new TypeError('Cannot call a class as a function');

-	}

-}

-

-(function() {

-	var HTTP_PROTOCOL_RGX = /https?:\/\//;

-

-	var DashboardCtrl = function DashboardCtrl(conf, applicationsService, $log,

-			$window, userProfileService, $scope, $cookies, $timeout, $interval, 

-			$modal, $state, beReaderService, dashboardService, confirmBoxService, 

-			auditLogService,ngDialog, $compile, widgetsCatalogService) {

-

-		this.conf = conf;	

-		var _this = this;

-

-		_classCallCheck(this, DashboardCtrl);

-

-		// activate spinner

-		this.isLoading = true;

-		this.isCommError = false;

-		$scope.getUserAppsIsDone = false;

-		this.userProfileService = userProfileService;

-		$scope.demoNum = 1;

-		$scope.event_content_show = false;

-		$scope.widgetData = [];

-		$scope.activateThis = function(ele){

-			 $compile(ele.contents())($scope);

-			 $scope.$apply();

-		};

-

-		$scope.editWidgetModalPopup = function(availableData, resourceType) {

-			$scope.editData = JSON.stringify(availableData);

-			$scope.availableDataTemp = $scope.availableData;

-			ngDialog.open({

-					templateUrl : 'app/views/dashboard/dashboard-widget-manage.html',

-					controller : 'CommonWidgetController',

-					resolve : {

-						message : function message() {

-							var message = {

-								type : resourceType,

-								availableData : $scope.editData

-							};

-							return message;

-						}

-					}

-				}).closePromise.then(needUpdate => {	

-					if(resourceType=='NEWS'){

-						$scope.updateNews();

-					}else if(resourceType=='EVENTS'){

-						$scope.updateEvents();

-					}else if(resourceType=='IMPORTANTRESOURCES'){

-						$scope.updateImportRes();

-					}

-	          });		

-		};

-		

-		$scope.editWidgetParameters = function(widgetId) {

-			let data = {

-            	widgetId: widgetId

-            }

-			ngDialog.open({

-					templateUrl : 'app/views/dashboard/dashboard-widget-parameter-manage.html',

-					controller : 'WidgetParameterController',

-					data: data

-				}).closePromise.then(needUpdate => {	

-						

-	          });		

-		};

-		

-		$scope.sort_options = [        

-		                       {index: 0, value: 'N', title: 'Name'},

-		                       {index: 1, value: 'L', title: 'Last used'},

-		                       {index: 2, value: 'F', title: 'Most used'},

-		                       {index: 3, value: 'M', title: 'Manual'}		                       

-		                   ]; 

-		

-		$scope.selectedSortTypeChanged = function(userAppSortTypePref) {

-			$scope.appsViewData = [];

-			$scope.appsView = [];

-			

-			$scope.sort_type = userAppSortTypePref;

-			

-			applicationsService

-			.getAppsOrderBySortPref(userAppSortTypePref)

-				.then(function(res) {

-					_this.apps = res;			

-					$scope.applyPresentationDetailsToApps(_this.apps); 				

-			})	

-			applicationsService

-			.saveAppsSortTypePreference($scope.selectedSortType)

-				.then(function(res) {

-					// Nothing to do

-				})

-		

-		}

-		$scope.$watch('selectedSortType.value', (newVal, oldVal) => {

-			for(var i=0;i<$scope.sort_options.length;i++){

-			if($scope.sort_options[i].value==newVal){

-			$scope.selectedSortType=angular.copy($scope.sort_options[i]);;

-			}

-			}

-			});

-		

-		$scope.restoreSortSelected = function(){

-			confirmBoxService.confirm("Restore the default size and position of all widgets?").then(

-	    			function(confirmed){

-	    				var checkConfirm = confirmed;

-	    				if(checkConfirm === true){

-	    				applicationsService

-	    				.delWidgetsSortPref($scope.widgetsViewData).then(function(){

-	    					$state.reload();

-	    				});

-	    				}

-	    			});

-		/*	if(confirm('Restore the default size and position of all widgets?') == true)

-				{

-			applicationsService

-			.delWidgetsSortPref($scope.widgetsViewData).then(function(){

-				$state.reload();

-			})

-				}*/

-	    			

-		}

-		

-		$scope.applyPresentationDetailsToApps = function(appsReturned) {

-			var rowNo = 0;

-			for (var i = 0; i < _this.apps.length; i++) {

-				$scope.appsView[i] = {

-					sizeX : 1,

-					sizeY : 1,

-					headerText : '',

-					subHeaderText : '',

-					imageLink : '',

-					order : '',

-					url : '',

-					appid: '',

-				};

-				$scope.appsView[i].headerText = appsReturned[i].name;

-				$scope.appsView[i].subHeaderText = appsReturned[i].notes;

-				let imgLnk = '';

-				if (appsReturned[i].imageUrl)

-					imgLnk = conf.api.appThumbnail.replace(':appId', appsReturned[i].id);

-				//$log.debug('DashboardCtlr::applyPresn: imgLink = ' + imgLnk);

-				$scope.appsView[i].imageLink = imgLnk;

-				$scope.appsView[i].order = appsReturned[i].order;

-				$scope.appsView[i].url = appsReturned[i].url;

-				$scope.appsView[i].restrictedApp = appsReturned[i].restrictedApp;

-				$scope.appsView[i].appid = appsReturned[i].id;

-			}

-			$scope.appsView[_this.apps.length] = {

-					addRemoveApps : true,

-					sizeX : 1,

-					sizeY : 1,

-					headerText : 'Add/Remove Applications',

-					subHeaderText : '',

-					imageLink : 'assets/images/cloud.png',

-					order : '',

-					restrictedApp : false,

-					url : '',

-			};

-			if($scope.appsView.length>6){													

-				$(".dashboard-boarder").css({

-					"height" : "400px"

-				});

-			}else{

-				$(".dashboard-boarder").css({

-					"height" : "210px"

-				});

-			}

-			

-			if ($scope.appsView != undefined

-					&& $scope.appsView != null

-					&& $scope.appsView.length > 0) {

-				$scope.appsViewData = $scope.appsView;

-			}

-		}

-		

-$scope.widgetsView = [];

-		

-		$scope.applyPresentationDetailsToWidgets = function(widgetsReturned){

-		 var rowNo = 0;

-		 for (var i = 0; i < widgetsReturned.length; i++) {

-				$scope.widgetsView[i] = {

-					sizeX : '',

-					sizeY :'',

-					headerText:'',

-					widgetText:'',

-					widgetIdentifier : '',

-					url : '',

-					widgetid: '',

-					attrb:'',

-					row:'',

-					col:'',

-				};

-				$scope.widgetsView[i].widgetid = widgetsReturned[i].id;

-				$scope.widgetsView[i].headerText = widgetsReturned[i].headerName;

-				$scope.widgetsView[i].widgetText = widgetsReturned[i].name;

-				

-				if(widgetsReturned[i].headerName.toLowerCase() === 'news'){

-					$scope.widgetsView[i].widgetIdentifier = 'NEWS';

-				}

-				else

-				if(widgetsReturned[i].headerName.toLowerCase() === 'resources'){

-					$scope.widgetsView[i].widgetIdentifier = 'IMPORTANTRESOURCES';

-				}

-				else

-				if(widgetsReturned[i].headerName.toLowerCase() === 'events'){

-					$scope.widgetsView[i].widgetIdentifier = 'EVENTS';

-				}

-

-				$scope.widgetsView[i].url = widgetsReturned[i].url;

-				$scope.widgetsView[i].attrb = widgetsReturned[i].attrs;

-				if(widgetsReturned[i].width === null){

-					$scope.widgetsView[i].sizeX = 2;

-				}else{

-					$scope.widgetsView[i].sizeX = widgetsReturned[i].width;

-				}

-				if(widgetsReturned[i].height === null){

-					$scope.widgetsView[i].sizeY = 2;

-				}else{

-					$scope.widgetsView[i].sizeY = widgetsReturned[i].height;

-				}

-				$scope.widgetsView[i].row = widgetsReturned[i].x;

-				$scope.widgetsView[i].col = widgetsReturned[i].y;

-			}

-		if ($scope.widgetsView != undefined

-				&& $scope.widgetsView != null

-				&& $scope.widgetsView.length > 0) {

-			$scope.widgetsViewData = $scope.widgetsView;

-		}

-		}

-

-	applicationsService

-	.getUserAppsSortTypePreference().then(function(res) {

-			var resJson = {};

-		    resJson.value = res;

-			if (resJson.value==="N" || resJson.value==="") {

-				resJson.index = 0;

-				resJson.title = 'Name';

-			}else if (resJson.value==="L") {

-				resJson.index = 1;

-				resJson.title = 'Last used';

-			}else if(resJson.value==="F"){

-				resJson.index = 2;

-				resJson.title = 'Most used';

-			}else {

-				resJson.index = 3;

-				resJson.title = 'Manual';

-			}	

-			$scope.selectedSortType = resJson;

-			$scope.selectedSortTypeChanged(res);

-

-		

-		});

-		

-	$scope.widgetsList = [];

-	

-	let getUserWidgets = (loginName) => {

-   	 var conf = this.conf;

-		 widgetsCatalogService.getUserWidgets(loginName).then(res => {

-			 if(!(res instanceof Array)){

-				 this.isCommError = true;

-				 return;

-			 }

-			 for(var i = 0; i < res.length; i++){	 

-	   			 var widget_id = res[i][0];

-	   			 var widget_name = res[i][1];

-	   			 let url = this.conf.api.widgetCommon + "/" + widget_id + "/framework.js";

-	   			 var header_name = widget_name;

-	   			 if(res[i][7] == 1){

-	   				header_name = (widget_name.length > 9) ?widget_name.substring(0, 8) + '...' : widget_name;

-	   			 }

-	   			 if(res[i][4] === "S" || res[i][4] === null ){

-	   			 $scope.widgetsList.push({

-		    			   id: widget_id,

-		    			   headerName: header_name,

-		                   name: widget_name,

-		                   url: url,

-		                   attrs: [{attr: 'data-' + res[i][0], value: ''}],

-		                   x: res[i][3], 

-		                   y: res[i][5],

-		                   height: res[i][6],

-		                   width: res[i][7]

-		    		 });

-	   			 }

-	   			 var script = document

-					 .createElement('script');

-					 script.src = url;

-					 script.async = false;

-					 var entry = document

-					 	.getElementsByTagName('script')[0];

-					 entry.parentNode

-					 	.insertBefore(script, entry);

-			 } 

-   		$scope.applyPresentationDetailsToWidgets($scope.widgetsList);

-        }).catch(err => {

-            $log.error('WidgetsHomeCtrl::getUserWidgets error: ' + err);

-        }).finally(()=> {

-       	 

-        });

-   };

-

-      userProfileService.getUserProfile().then(

-			function(profile) {

-				$scope.orgUserId = profile.orgUserId;

-				getUserWidgets($scope.orgUserId);

-	  });

-		

-		/* Widget Gridster Section */

-		$scope.newsGridsterItem = {

-			sizeX : 1,

-			sizeY : 1,

-			headerText : 'News',

-			subHeaderText : '',

-			imageLink : '',

-			order : '',

-			url : ''

-		};

-

-		$scope.eventsGridsterItem = {

-			sizeX : 1,

-			sizeY : 1,

-			headerText : 'Events',

-			subHeaderText : '',

-			imageLink : '',

-			order : '',

-			url : ''

-		};

-

-		$scope.impoResGridsterItem = {

-			sizeX : 1,

-			sizeY : 1,

-			headerText : 'Resources',

-			subHeaderText : '',

-			imageLink : '',

-			order : '',

-			url : ''

-		};

-		

-		this.gridsterAppOpts = {

-				columns : 6,

-				colWidth : 190,

-				rowHeight : 190,

-				margins : [ 20, 20 ],

-				outerMargin : true,

-				pushing : true,

-				floating : true,

-				swapping : true,

-				resizable: {

-					enabled: false,

-				},

-				draggable : {

-					handle:'.icon-content-gridguide',

-					stop: function stop() {	

-						$scope.defaultSortBy = function() {

-							var resJson = {};

-							resJson.value = 'M';

-							resJson.index = 3;

-							resJson.title = 'Manual';

-							$scope.selectedSortType = resJson;

-							applicationsService.saveAppsSortTypeManual($scope.appsViewData)	

-							applicationsService.saveAppsSortTypePreference($scope.selectedSortType)

-						}

-						$scope.defaultSortBy();			

-					}

-				}

-			};

-			

-			this.gridsterWidgetOpts = {

-					columns : 6,

-					colWidth : 190,

-					rowHeight : 190,

-					margins : [ 20, 20 ],

-					outerMargin : true,

-					pushing : true,

-					floating : true,

-					swapping : true,

-					resizable: {

-						enabled: true,

-						stop: function stop(event, uiWidget, $element){

-							if($element.sizeX == 1)

-								$element.headerText = ($element.widgetText.length > 9) ? $element.widgetText.substring(0, 8) + '...' : $element.widgetText;

-							if($element.sizeX >= 2)

-								$element.headerText = $element.widgetText;

-							

-							applicationsService

-							.saveWidgetsSortManual($scope.widgetsViewData)

-					

-						}

-					},

-					draggable : {

-						handle:'.icon-content-gridguide',

-						stop: function stop(){

-							applicationsService

-							.saveWidgetsSortManual($scope.widgetsViewData)

-					

-						}

-					}

-			};

-		

-		this.goToCatalog = function(item) {

-			$state.go('root.appCatalog');

-		} 

-		

-		this.goToWidgetCatLog = function(item) {

-			$state.go('root.widgetCatalog');

-		} 

-		

-		// navigate to application url in new tab

-		this.goToPortal = function(item) {

-			if (!item.url) {

-				$log.error('No URL found for this application, doing nothing!');

-				return;

-			}

-			if (item.restrictedApp) {

-				// Link-based apps open in their own browser tab

-				$window.open(item.url, '_blank');

-			} else {

-				// cache control so browsers load app page every time

-				var ccParam = 'cc=' + new Date().getTime();

-				var urlParts = item.url.split('#');

-				var appUrl = null;

-				if (urlParts.length < 2) {

-					// no #

-					let urlLastChar = item.url.charAt(item.url.length - 1);

-					if (item.url.includes("?"))

-						appUrl = (urlLastChar === '&' ? item.url + ccParam : item.url + '&' + ccParam);

-					else 

-						appUrl = item.url + '?' + ccParam;

-				} else {

-					// has #

-					let urlLastChar = urlParts[0].charAt(urlParts[0].length - 1);

-					if (item.url.includes("?"))

-						appUrl = (urlLastChar === '&' ? urlParts[0] + ccParam + '#' + urlParts[1]  :  urlParts[0] + '&' + ccParam + '#' + urlParts[1]);

-					else

-						appUrl = urlParts[0] + '?' + ccParam + "#" + urlParts[1];

-				}

-				// $log.debug('DashboardCtrlr::goToPortal: opening tab with URL

-				// ' + appUrl);

-				var tabContent = {

-					id: new Date(),

-					title: item.headerText,

-					url: appUrl,

-					appId: item.appId

-				};

-				$cookies.putObject('addTab', tabContent);

-			}

-

-		};

-		

-		this.auditLog = function(app) {

-			console.log(app);

-			auditLogService.storeAudit(app.appid,'app',app.url);

-		};

-		

-		if (getParameterByName('noUserError') != null) {

-			if (getParameterByName('noUserError') == "Show") {

-				$("#errorInfo").show();

-			}

-		}		

-	};

-

-	DashboardCtrl.$inject = [ 'conf', 'applicationsService', '$log', '$window',

-			'userProfileService', '$scope', '$cookies', '$timeout',	'$interval', 

-			'$modal',  '$state', 'beReaderService', 'dashboardService', 'confirmBoxService', 

-			'auditLogService', 'ngDialog', '$compile', 'widgetsCatalogService' ];

-	angular.module('ecompApp').controller('DashboardCtrl', DashboardCtrl);

-})();

-

-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, " ");

-}

+/*-
+ * ================================================================================
+ * 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 _classCallCheck(instance, Constructor) {
+	if (!(instance instanceof Constructor)) {
+		throw new TypeError('Cannot call a class as a function');
+	}
+}
+
+(function() {
+	var HTTP_PROTOCOL_RGX = /https?:\/\//;
+
+	var DashboardCtrl = function DashboardCtrl(conf, applicationsService, $log,
+			$window, userProfileService, $scope, $cookies, $timeout, $interval, 
+			$modal, $state, beReaderService, dashboardService, confirmBoxService, 
+			auditLogService,ngDialog, $compile, widgetsCatalogService) {
+
+		this.conf = conf;	
+		var _this = this;
+
+		_classCallCheck(this, DashboardCtrl);
+
+		// activate spinner
+		this.isLoading = true;
+		this.isCommError = false;
+		$scope.getUserAppsIsDone = false;
+		this.userProfileService = userProfileService;
+		$scope.demoNum = 1;
+		$scope.event_content_show = false;
+		$scope.widgetData = [];
+		$scope.activateThis = function(ele){
+			 $compile(ele.contents())($scope);
+			 $scope.$apply();
+		};
+
+		$scope.editWidgetModalPopup = function(availableData, resourceType) {
+			$scope.editData = JSON.stringify(availableData);
+			$scope.availableDataTemp = $scope.availableData;
+			ngDialog.open({
+					templateUrl : 'app/views/dashboard/dashboard-widget-manage.html',
+					controller : 'CommonWidgetController',
+					resolve : {
+						message : function message() {
+							var message = {
+								type : resourceType,
+								availableData : $scope.editData
+							};
+							return message;
+						}
+					}
+				}).closePromise.then(needUpdate => {	
+					if(resourceType=='NEWS'){
+						$scope.updateNews();
+					}else if(resourceType=='EVENTS'){
+						$scope.updateEvents();
+					}else if(resourceType=='IMPORTANTRESOURCES'){
+						$scope.updateImportRes();
+					}
+	          });		
+		};
+		
+		$scope.editWidgetParameters = function(widgetId) {
+			let data = {
+            	widgetId: widgetId
+            }
+			ngDialog.open({
+					templateUrl : 'app/views/dashboard/dashboard-widget-parameter-manage.html',
+					controller : 'WidgetParameterController',
+					data: data
+				}).closePromise.then(needUpdate => {	
+						
+	          });		
+		};
+		
+		$scope.sort_options = [        
+		                       {index: 0, value: 'N', title: 'Name'},
+		                       {index: 1, value: 'L', title: 'Last used'},
+		                       {index: 2, value: 'F', title: 'Most used'},
+		                       {index: 3, value: 'M', title: 'Manual'}		                       
+		                   ]; 
+		
+		$scope.selectedSortTypeChanged = function(userAppSortTypePref) {
+			$scope.appsViewData = [];
+			$scope.appsView = [];
+			
+			$scope.sort_type = userAppSortTypePref;
+			
+			applicationsService
+			.getAppsOrderBySortPref(userAppSortTypePref)
+				.then(function(res) {
+					_this.apps = res;			
+					$scope.applyPresentationDetailsToApps(_this.apps); 				
+			})	
+			applicationsService
+			.saveAppsSortTypePreference($scope.selectedSortType)
+				.then(function(res) {
+					// Nothing to do
+				})
+		
+		}
+		$scope.$watch('selectedSortType.value', (newVal, oldVal) => {
+			for(var i=0;i<$scope.sort_options.length;i++){
+			if($scope.sort_options[i].value==newVal){
+			$scope.selectedSortType=angular.copy($scope.sort_options[i]);;
+			}
+			}
+			});
+		
+		$scope.restoreSortSelected = function(){
+			confirmBoxService.confirm("Restore the default size and position of all widgets?").then(
+	    			function(confirmed){
+	    				var checkConfirm = confirmed;
+	    				if(checkConfirm === true){
+	    				applicationsService
+	    				.delWidgetsSortPref($scope.widgetsViewData).then(function(){
+	    					$state.reload();
+	    				});
+	    				}
+	    			});
+		/*	if(confirm('Restore the default size and position of all widgets?') == true)
+				{
+			applicationsService
+			.delWidgetsSortPref($scope.widgetsViewData).then(function(){
+				$state.reload();
+			})
+				}*/
+	    			
+		}
+		
+		$scope.applyPresentationDetailsToApps = function(appsReturned) {
+			var rowNo = 0;
+			for (var i = 0; i < _this.apps.length; i++) {
+				$scope.appsView[i] = {
+					sizeX : 1,
+					sizeY : 1,
+					headerText : '',
+					subHeaderText : '',
+					imageLink : '',
+					order : '',
+					url : '',
+					appid: '',
+				};
+				$scope.appsView[i].headerText = appsReturned[i].name;
+				$scope.appsView[i].subHeaderText = appsReturned[i].notes;
+				let imgLnk = '';
+				if (appsReturned[i].imageUrl)
+					imgLnk = conf.api.appThumbnail.replace(':appId', appsReturned[i].id);
+				//$log.debug('DashboardCtlr::applyPresn: imgLink = ' + imgLnk);
+				$scope.appsView[i].imageLink = imgLnk;
+				$scope.appsView[i].order = appsReturned[i].order;
+				$scope.appsView[i].url = appsReturned[i].url;
+				$scope.appsView[i].restrictedApp = appsReturned[i].restrictedApp;
+				$scope.appsView[i].appid = appsReturned[i].id;
+			}
+			$scope.appsView[_this.apps.length] = {
+					addRemoveApps : true,
+					sizeX : 1,
+					sizeY : 1,
+					headerText : 'Add/Remove Applications',
+					subHeaderText : '',
+					imageLink : 'assets/images/cloud.png',
+					order : '',
+					restrictedApp : false,
+					url : '',
+			};
+			if($scope.appsView.length>6){													
+				$(".dashboard-boarder").css({
+					"height" : "400px"
+				});
+			}else{
+				$(".dashboard-boarder").css({
+					"height" : "210px"
+				});
+			}
+			
+			if ($scope.appsView != undefined
+					&& $scope.appsView != null
+					&& $scope.appsView.length > 0) {
+				$scope.appsViewData = $scope.appsView;
+			}
+		}
+		
+$scope.widgetsView = [];
+		
+		$scope.applyPresentationDetailsToWidgets = function(widgetsReturned){
+		 var rowNo = 0;
+		 for (var i = 0; i < widgetsReturned.length; i++) {
+				$scope.widgetsView[i] = {
+					sizeX : '',
+					sizeY :'',
+					headerText:'',
+					widgetText:'',
+					widgetIdentifier : '',
+					url : '',
+					widgetid: '',
+					attrb:'',
+					row:'',
+					col:'',
+				};
+				$scope.widgetsView[i].widgetid = widgetsReturned[i].id;
+				$scope.widgetsView[i].headerText = widgetsReturned[i].headerName;
+				$scope.widgetsView[i].widgetText = widgetsReturned[i].name;
+				
+				if(widgetsReturned[i].headerName.toLowerCase() === 'news'){
+					$scope.widgetsView[i].widgetIdentifier = 'NEWS';
+				}
+				else
+				if(widgetsReturned[i].headerName.toLowerCase() === 'resources'){
+					$scope.widgetsView[i].widgetIdentifier = 'IMPORTANTRESOURCES';
+				}
+				else
+				if(widgetsReturned[i].headerName.toLowerCase() === 'events'){
+					$scope.widgetsView[i].widgetIdentifier = 'EVENTS';
+				}
+
+				$scope.widgetsView[i].url = widgetsReturned[i].url;
+				$scope.widgetsView[i].attrb = widgetsReturned[i].attrs;
+				if(widgetsReturned[i].width === null){
+					$scope.widgetsView[i].sizeX = 2;
+				}else{
+					$scope.widgetsView[i].sizeX = widgetsReturned[i].width;
+				}
+				if(widgetsReturned[i].height === null){
+					$scope.widgetsView[i].sizeY = 2;
+				}else{
+					$scope.widgetsView[i].sizeY = widgetsReturned[i].height;
+				}
+				$scope.widgetsView[i].row = widgetsReturned[i].x;
+				$scope.widgetsView[i].col = widgetsReturned[i].y;
+			}
+		if ($scope.widgetsView != undefined
+				&& $scope.widgetsView != null
+				&& $scope.widgetsView.length > 0) {
+			$scope.widgetsViewData = $scope.widgetsView;
+		}
+		}
+
+	applicationsService
+	.getUserAppsSortTypePreference().then(function(res) {
+			var resJson = {};
+		    resJson.value = res;
+			if (resJson.value==="N" || resJson.value==="") {
+				resJson.index = 0;
+				resJson.title = 'Name';
+			}else if (resJson.value==="L") {
+				resJson.index = 1;
+				resJson.title = 'Last used';
+			}else if(resJson.value==="F"){
+				resJson.index = 2;
+				resJson.title = 'Most used';
+			}else {
+				resJson.index = 3;
+				resJson.title = 'Manual';
+			}	
+			$scope.selectedSortType = resJson;
+			$scope.selectedSortTypeChanged(res);
+
+		
+		});
+		
+	$scope.widgetsList = [];
+	
+	let getUserWidgets = (loginName) => {
+   	 var conf = this.conf;
+		 widgetsCatalogService.getUserWidgets(loginName).then(res => {
+			 if(!(res instanceof Array)){
+				 this.isCommError = true;
+				 return;
+			 }
+			 for(var i = 0; i < res.length; i++){	 
+	   			 var widget_id = res[i][0];
+	   			 var widget_name = res[i][1];
+	   			 let url = this.conf.api.widgetCommon + "/" + widget_id + "/framework.js";
+	   			 var header_name = widget_name;
+	   			 if(res[i][7] == 1){
+	   				header_name = (widget_name.length > 9) ?widget_name.substring(0, 8) + '...' : widget_name;
+	   			 }
+	   			 if(res[i][4] === "S" || res[i][4] === null ){
+	   			 $scope.widgetsList.push({
+		    			   id: widget_id,
+		    			   headerName: header_name,
+		                   name: widget_name,
+		                   url: url,
+		                   attrs: [{attr: 'data-' + res[i][0], value: ''}],
+		                   x: res[i][3], 
+		                   y: res[i][5],
+		                   height: res[i][6],
+		                   width: res[i][7]
+		    		 });
+	   			 }
+	   			 var script = document
+					 .createElement('script');
+					 script.src = url;
+					 script.async = false;
+					 var entry = document
+					 	.getElementsByTagName('script')[0];
+					 entry.parentNode
+					 	.insertBefore(script, entry);
+			 } 
+   		$scope.applyPresentationDetailsToWidgets($scope.widgetsList);
+        }).catch(err => {
+            $log.error('WidgetsHomeCtrl::getUserWidgets error: ' + err);
+        }).finally(()=> {
+       	 
+        });
+   };
+
+      userProfileService.getUserProfile().then(
+			function(profile) {
+				$scope.orgUserId = profile.orgUserId;
+				getUserWidgets($scope.orgUserId);
+	  });
+		
+		/* Widget Gridster Section */
+		$scope.newsGridsterItem = {
+			sizeX : 1,
+			sizeY : 1,
+			headerText : 'News',
+			subHeaderText : '',
+			imageLink : '',
+			order : '',
+			url : ''
+		};
+
+		$scope.eventsGridsterItem = {
+			sizeX : 1,
+			sizeY : 1,
+			headerText : 'Events',
+			subHeaderText : '',
+			imageLink : '',
+			order : '',
+			url : ''
+		};
+
+		$scope.impoResGridsterItem = {
+			sizeX : 1,
+			sizeY : 1,
+			headerText : 'Resources',
+			subHeaderText : '',
+			imageLink : '',
+			order : '',
+			url : ''
+		};
+		
+		this.gridsterAppOpts = {
+				columns : 6,
+				colWidth : 190,
+				rowHeight : 190,
+				margins : [ 20, 20 ],
+				outerMargin : true,
+				pushing : true,
+				floating : true,
+				swapping : true,
+				resizable: {
+					enabled: false,
+				},
+				draggable : {
+					handle:'.icon-content-gridguide',
+					stop: function stop() {	
+						$scope.defaultSortBy = function() {
+							var resJson = {};
+							resJson.value = 'M';
+							resJson.index = 3;
+							resJson.title = 'Manual';
+							$scope.selectedSortType = resJson;
+							applicationsService.saveAppsSortTypeManual($scope.appsViewData)	
+							applicationsService.saveAppsSortTypePreference($scope.selectedSortType)
+						}
+						$scope.defaultSortBy();			
+					}
+				}
+			};
+			
+			this.gridsterWidgetOpts = {
+					columns : 6,
+					colWidth : 190,
+					rowHeight : 190,
+					margins : [ 20, 20 ],
+					outerMargin : true,
+					pushing : true,
+					floating : true,
+					swapping : true,
+					resizable: {
+						enabled: true,
+						stop: function stop(event, uiWidget, $element){
+							if($element.sizeX == 1)
+								$element.headerText = ($element.widgetText.length > 9) ? $element.widgetText.substring(0, 8) + '...' : $element.widgetText;
+							if($element.sizeX >= 2)
+								$element.headerText = $element.widgetText;
+							
+							applicationsService
+							.saveWidgetsSortManual($scope.widgetsViewData)
+					
+						}
+					},
+					draggable : {
+						handle:'.icon-content-gridguide',
+						stop: function stop(){
+							applicationsService
+							.saveWidgetsSortManual($scope.widgetsViewData)
+					
+						}
+					}
+			};
+		
+		this.goToCatalog = function(item) {
+			$state.go('root.appCatalog');
+		} 
+		
+		this.goToWidgetCatLog = function(item) {
+			$state.go('root.widgetCatalog');
+		} 
+		
+		// navigate to application url in new tab
+		this.goToPortal = function(item) {
+			userProfileService.getUserRolesForApplication($scope.orgUserId,item.appid)
+	          .then(res=>{
+	        	  var count = 0;
+	        	  for(var i=0;i<res.length;i++){
+	        		 if(!res[i].isApplied)
+	        			 {
+	        			 count++;
+	        			 }
+	        		   }
+	        	  if((count>0 && res.length == count)||res.length==0)
+	        		  {
+	            		confirmBoxService.showInformation('You have no roles assigned to this application to access.').then(isConfirmed => {});
+
+	        		  }
+	        	  else{
+	        			if (!item.url) {
+	        				$log.error('No URL found for this application, doing nothing!');
+	        				return;
+	        			}
+	        			if (item.restrictedApp) {
+	        				// Link-based apps open in their own browser tab
+	        				$window.open(item.url, '_blank');
+	        			} else {
+	        				// cache control so browsers load app page every time
+	        				var ccParam = 'cc=' + new Date().getTime();
+	        				var urlParts = item.url.split('#');
+	        				var appUrl = null;
+	        				if (urlParts.length < 2) {
+	        					// no #
+	        					let urlLastChar = item.url.charAt(item.url.length - 1);
+	        					if (item.url.includes("?"))
+	        						appUrl = (urlLastChar === '&' ? item.url + ccParam : item.url + '&' + ccParam);
+	        					else 
+	        						appUrl = item.url + '?' + ccParam;
+	        				} else {
+	        					// has #
+	        					let urlLastChar = urlParts[0].charAt(urlParts[0].length - 1);
+	        					if (item.url.includes("?"))
+	        						appUrl = (urlLastChar === '&' ? urlParts[0] + ccParam + '#' + urlParts[1]  :  urlParts[0] + '&' + ccParam + '#' + urlParts[1]);
+	        					else
+	        						appUrl = urlParts[0] + '?' + ccParam + "#" + urlParts[1];
+	        				}
+	        				// $log.debug('DashboardCtrlr::goToPortal: opening tab with URL
+	        				// ' + appUrl);
+	        				var tabContent = {
+	        					id: new Date(),
+	        					title: item.headerText,
+	        					url: appUrl,
+	        					appId: item.appId
+	        				};
+	        				$cookies.putObject('addTab', tabContent);
+	        			}
+	        		  
+	        	  }
+	         });
+		
+			
+		
+
+		};
+		
+		this.auditLog = function(app) {
+			console.log(app);
+			auditLogService.storeAudit(app.appid,'app',app.url);
+		};
+		
+		if (getParameterByName('noUserError') != null) {
+			if (getParameterByName('noUserError') == "Show") {
+				$("#errorInfo").show();
+			}
+		}		
+	};
+
+	DashboardCtrl.$inject = [ 'conf', 'applicationsService', '$log', '$window',
+			'userProfileService', '$scope', '$cookies', '$timeout',	'$interval', 
+			'$modal',  '$state', 'beReaderService', 'dashboardService', 'confirmBoxService', 
+			'auditLogService', 'ngDialog', '$compile', 'widgetsCatalogService' ];
+	angular.module('ecompApp').controller('DashboardCtrl', DashboardCtrl);
+})();
+
+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, " ");
+}
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less
index bf6530b4..ac2a3cba 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less
@@ -1,901 +1,910 @@
-.w-ecomp-dashboard-home {

- .bg_portalWhite;//white for 1702

-   position: @page-main-position;

-  top: @page-main-top;

-  left: @page-main-left;

-  right: @page-main-right;

-  bottom: @page-main-bottom;

-  padding-top: @padding-top;

-  overflow-y: @page-main-overflow-y;

-  padding-left: @padding-left-side;

-

-  .gridster-item-container .gridster-item-body {

-    overflow-y:auto;

-    overflow-x:hidden;

-  }

-

-  .dashboard-home-container {

-      position: relative;

-      padding-right: 0;

-      padding-left: 0;

-      padding-bottom: @container-bottom;

-

-    .dashboard-home-title {

-      .blackText24m;

-      margin: auto;

-      .content_justify;

-    }

-    

-    .portals-list {

-      min-height: 70vh;

-      //display: flex;

-      justify-content: center;

-      flex-flow: row wrap;

-      width: @table-width;

-      //margin-left: 230px;

-      margin-bottom: 63px;

-	  margin:auto;

-      .app-gridster-header {

-        background-color: @u;

-        font-size:12px;

-        overflow:hidden

-      }

-

-      .app-gridster-footer {

-        background-color: @u;

-      }

-

-      .portals-list-item {

-        background-color: @u;

-        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: @u;

-          height: 120px;

-          top: 180px;

-          position: relative;

-          box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);

-          padding: 16px;

-

-          .info-title {

-            .blackText24m;

-            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-error{	  

-  .portalRed;

-  position: absolute;

-  width: 100%;

-  line-height: 1.5em;	

-}

-.w-ecomp-main-disclaimer {

-  text-align: center;

-  .dGray14r;

-  //position: absolute;

-  bottom: -75px;

-  line-height: 1.5em;

-  margin: 0 auto;

-  width:1170px;

-  position: relative;

-

-}

-

-@keyframes fadein {

-  from {

-    opacity: 0;

-  }

-  to {

-    opacity: 1;

-  }

-}

-

-.slide.ng-hide-add, 

-.slide.ng-hide-remove,

-.slide.ng-enter,

-.slide.ng-leave {

-  transition: all 0.5s ease;

-}

-.slide.ng-hide,

-.slide.ng-enter {

-  transform: translate(-100%, 0);

-}

-.slide.ng-enter-active {

-  transform: translate(0, 0);

-}

-.slide.ng-leave {

-  transform: translate(0, 0);

-}

-.slide.ng-leave-active {

-  transform: translate(+100%, 0);

-}

-.dashboard-boarder{

-	// border: 2px solid #ccc!important;    

-	// border-radius: 16px!important; 

-	  height: 210px;

-    overflow: auto;

-}

-.dashboard-information-boarder{

-	border: 2px solid #ccc!important; 

-	border-radius: 16px!important;    

-}

-

-#information-section {

-   margin-top:50px;

-}

-

-.information-section-title{

-    color: #0574ac;

-    font-family: Omnes-ECOMP-W02-Bold,Arial;

-    font-size: 25px;

-    margin: 20px;

-    width: 1170px;

-}

-#left {

-    float: left;

-    width: 33%;

-    height:300px;

-    background-color: white;

-}

-

-#center {

-    float: right;

-    width: 33%;

-    height:300px;

-        background: white;

-} 

-#right {

-    margin-left:34%;

-	margin-right:34%;

-	height:300px;

-	background:white;

-}  

-

-

-/*hover*/

-

-

-.dock ul{

-display: inline-block;

-

-width: auto;

-margin: 0px;

-padding: 0px;

-list-style: none;

-

-}

-.dock ul li {

-width: auto;

-height: auto;

-display: inline-block;

-bottom: 0;

-vertical-align: bottom;

-margin-top: -43px;

-}

-.dock ul li a {

-display: block;

-height: 150px;

-width: 150px;

-position: relative;

--webkit-transition-property: width, height,margin-top;

--webkit-transition-duration: 0.5s;

--o-transition-property: width, height,margin-top;

--o-transition-duration: 0.5s;

--moz-transition-property: width, height,margin-top;

--moz-transition-duration: 0.5s;

-}

-.dock ul li a:hover {

-width: 200px;

-height: 200px;

-margin-top: -50px;

-}

-.dock ul li a img {

-width: 100%;

-position: absolute;

-bottom: 0;

-left: 0;

-border: none;

-padding: 0px 0px 0px 30px;

-}

-.dock_left{

-width: 31px;

--webkit-transform: rotate(33deg);

--moz-transform: rotate(33deg);

--o-transform: rotate(33deg);

-position: relative;

-background: #EEE;

-overflow: hidden;

-float: left;

-height: 100px;

-z-index: 2;

-margin: -18px;

-}

-.dock_right{

-width: 36px;

--webkit-transform: rotate(-33deg);

--moz-transform: rotate(-33deg);

--o-transform: rotate(-33deg);

-position: relative;

-background: #EEE;

-overflow: hidden;

-float: left;

-height: 100px;

-z-index: 2;

-margin: -18px;

-}

-

-

-

-

-/*Time for the CSS*/

-* {margin: 0; padding: 0;}

-body {background: #ccc;}

-

-.slider{

-	width: 640px; /*Same as width of the large image*/

-	position: relative;

-	/*Instead of height we will use padding*/

-	padding-top: 320px; /*That helps bring the labels down*/

-	

-	margin: 50px auto;

-	

-	/*Lets add a shadow*/

-	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);

-}

-

-

-/*Last thing remaining is to add transitions*/

-.slider>img{

-	position: absolute;

-	left: 0; top: 0;

-	transition: all 0.5s;

-}

-

-.slider input[name='slide_switch'] {

-	display: none;

-}

-

-.slider label {

-	/*Lets add some spacing for the thumbnails*/

-	margin: 18px 0 0 18px;

-	border: 3px solid #999;

-	

-	float: left;

-	cursor: pointer;

-	transition: all 0.5s;

-	

-	/*Default style = low opacity*/

-	opacity: 0.6;

-}

-

-.slider label img{

-	display: block;

-}

-

-/*Time to add the click effects*/

-.slider input[name='slide_switch']:checked+label {

-	border-color: #666;

-	opacity: 1;

-}

-/*Clicking any thumbnail now should change its opacity(style)*/

-/*Time to work on the main images*/

-.slider input[name='slide_switch'] ~ img {

-	opacity: 0;

-	transform: scale(1.1);

-}

-/*That hides all main images at a 110% size

-On click the images will be displayed at normal size to complete the effect

-*/

-.slider input[name='slide_switch']:checked+label+img {

-	opacity: 1;

-	transform: scale(1);

-}

-/*Clicking on any thumbnail now should activate the image related to it*/

-

-/*We are done :)*/

-

-

-

-.accordion {

-	width: 895px; height: 320px;

-	overflow: hidden;

-  box-shadow: 0 10px 6px -6px #111;

-  margin: 20px auto

-}

-.accordion ul { width: 200% }

-

-.accordion li {

-	position: relative;

-	display: block;

-	width: 160px;

-	float: left;

-  box-shadow: 0 0 30px 8px #222;

-	transition: all 0.4s ease .300ms;

-}

-

-.accordion ul:hover li {width: 40px }

-.accordion ul li:hover {width: 640px }

-

-.caption {

-	background: rgba(0, 0, 0, 0.5);

-	position: absolute;

-  bottom: 0;	

-	width: 640px

-}

-

-.caption a {

-	display: block;

-	color: #fff;

-	text-decoration: none;

-  font: normal 16px 'Lato', Helvetica, Arial, sans-serif;

-  -webkit-font-smoothing: antialiased;

-	padding: 15px;

-}

-

-

-/*events*/

-.events-date{

-	margin-left: 10px; 

-	float:left; 

-	white-space: normal; 

-	display: inline-block; 

-	vertical-align: middle;

-    width: 55px;

-}

-.event-title-div{

-	float: left;

-	width: 235px;

-	line-height: 20px;

-    padding: 5px;

-   	font-size: 14px; 

-   	margin-left: 4px;

-}

-.events-date{

-	height: 20px;

-	margin-left: 4px; 

-	font-size: 14px; 

-}

-.events-content{

-	font-size: 14px; 

-	color: #444;

-    margin-right: 10px;

-}

-.events-content-body{

-	margin-top:5px;

-	color:#444;

-	margin-left:12px;

-	line-height:1.5;

-}

-.events {

-	border-radius: 4px;

-	padding: 3px;

-	-webkit-user-select: none;   

-}

-.events ul {

-	float: left;

-	width:100%;

-	-webkit-user-select: none

-}

-.events ul li {

-	line-height: 30px; 

-	list-style: none;

-    border-bottom: 2px solid grey;

-    height: 100%;

-    min-height: 42px;

-}

-.events ul li:hover {

-    background: #ddd;

-    cursor: pointer;

-}

-.events ul li a {

-	color: black;

-	text-decoration: none;

-	font: 14px Helvetica, Arial, sans-serif;

-	-webkit-font-smoothing: antialiased;

-	-webkit-user-select: none;

-	font-family: "Omnes-ECOMP-W02", Arial;

-}

-.events-link{

-	color: #067ab4 !important; 

-}

-

-

-/*widgets*/

-

-.handle-e{

-    width: 5px;

-}

-

-.singleBtnBorder {

-    border-radius: 6px 6px 6px 6px;  

-}

-

-.widgetHeaderBtn{

-    

-    height: 30px;

-    background-color: #FFFFFF;

-    position: relative;

-    display: inline-block;

-    -moz-background-clip: padding-box;

-    -webkit-background-clip: padding-box;

-    background-clip: padding-box;

-    -webkit-box-sizing: border-box;

-    -moz-box-sizing: border-box;

-    box-sizing: border-box;

-    padding: 8px 20px;

-    font-size: 14px;

-    line-height: 14px;

-    min-width: 60px;

-    border: none;

-    border-radius: 6px;

-    background-color: #ffffff;

-    background-image: none;

-    color: #ffffff;

-    vertical-align: middle;

-    text-align: center;

-    text-decoration: none;

-    text-transform: capitalize;

-    text-shadow: none !important;

-    white-space: nowrap;

-    cursor: pointer;

-    -webkit-user-select: none;

-    -moz-user-select: none;

-    -ms-user-select: none;

-    -o-user-select: none;

-    user-select: none;

-    -webkit-transition: background-color 0.3s ease-out;

-    -moz-transition: background-color 0.3s ease-out;

-    transition: background-color 0.3s ease-out;

-    }

-  

-.widgetHeaderBtnPosition {

-	width: 30px;

-    min-width: 0px;

-    border: 1px solid #AAAAAA;

-    padding-left: 3px;

-    padding-right: 5px;

-    }

-    

-.icon-anchor {

-    color: #888;

-}

-   

-.widgetHeaderBtn:hover, .widgetHeaderBtn:focus {

-    background: rgba(0, 0, 0, 0);

-    color: #3a7999;

-    box-shadow: inset 0 0 0 2px #3a7999;

-}

-/*news*/

-

-@keyframes ticker {

-	0%   {margin-top: 0}

-	25%  {margin-top: -55px}

-	50%  {margin-top: -110px}

-	75%  {margin-top: -165px}

-	100% {margin-top: 0}

-}

-

-body { background: #333; width: 100%; height: 100% }

-

-.news {

- 

-  width: 350px;

-  height: 250px;

-  margin: 0px auto;

-  // overflow: auto;

-  border-radius: 4px;

-  padding: 3px;

-  -webkit-user-select: none;

-     

-} 

-

-

-

-.news ul {

-  float: left;

-  width:100%;

-  // animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;

-  -webkit-user-select: none

-}

-

-.news ul li {line-height: 30px; list-style: none;

-    border-bottom: 2px solid grey;

-    min-height: 42px;

- }

- 

-.news ul li:hover {

-    background: #ddd;

-    cursor: pointer;

-}

-

-.news ul li a {

-  color: black;

-  text-decoration: none;

-  font-size: 14px;

-  line-height: 1.5;

-  display: inline-block;

-  width:100%;

-  min-height:40px;

-  padding-top: 5px;

-  padding-bottom: 5px;

-  -webkit-font-smoothing: antialiased;

-  -webkit-user-select: none;

-}

-

-.news ul:hover { animation-play-state: paused }

-.news span:hover+ul { animation-play-state: paused }

-/*resources*/

-.resources {

- 

-  width: 100%;

-  height: 200px;

-  margin-left: 5px;

-  border-radius: 4px;

-  padding: 3px;

-  -webkit-user-select: none;

-     

-} 

-

-

-

-.resources ul {

-  float: left;

-  width:100%;

- 

-  -webkit-user-select: none

-}

-

-.resources ul li {line-height: 30px; list-style: none;

-    border-bottom: 2px solid grey;

-    min-height: 42px;

- }

- 

-.resources ul li:hover {

-    background: #ddd;

-    cursor: pointer;

-}

-

-.resources ul li a {

-  color: black;

-  text-decoration: none;

-  font-size: 14px;

-  line-height: 1.5;

-  width:100%;

-  min-height:40px;

-  display: inline-block;

-  padding-top: 5px;

-  padding-bottom: 5px;

-  -webkit-font-smoothing: antialiased;

-  -webkit-user-select: none;

-}

-

-

-/* OTHER COLORS */

-.blue { background: #347fd0 }

-.blue span { background: #2c66be }

-.red { background: #d23435 }

-.red span { background: #c22b2c }

-.green { background: #699B67 }

-.green span { background: #547d52 }

-.magenta { background: #b63ace }

-.magenta span { background: #842696 }

-

-

-/*broadcast*/

-

-.box-one {

-  -webkit-transition:all linear 0.4s;

-  transition:all linear 0.4s;

-  height:100px; width:200px; background:white;    border: 2px solid #ccc!important;

-    border-radius: 16px!important;

-}

-.box-one.ng-hide {

-display: block!important;

-  opacity:0;

-}

-

-.gridsterContent{

-	height:120px;

-}

-

-.gridster-item{

-    z-index:0 !important;

-}

-.gridsterAppContent{

-	height:120px;

-	

-}

-

- .gridsterImage{

- 	height:84px; 

- 	width:168px;

- }

- .grider-content-ecomp{

- 	transition: transform 0.5s ease-out;

- }

-  .grider-content-ecomp:hover{

-    transform: scale(1.1);

-}

-

-

-/*information section*/

-

-.information-section{

-	/*margin-top:25px;*/

-}

-.information-section-gridsterContent{

-	/*height:300px;*/

-}

-.information-sections-gridster-header{

-	color: #0574ac;

-    font-family: Omnes-ECOMP-W02-Bold,Arial;

-    font-size: 25px;

-   

-}

-/*application empty div*/

-.app-error-block {

-    padding-top: 10px;

-   

-}

-/*news empty div*/

-.activity-error-block {

-    padding-top: 60px;

-   

-}

-

-.activity-error-msg1{

-	text-align: center;

-    margin-top: 20px;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    color: #444;

-    font-size: 20px;

-    

-}

-

-.newstape {

-  background: white;

-  color: black;

-  height: 400px;

-  overflow: hidden;

-}

-

-.newstape-content {

-  position: relative;

-  padding: 15px;

-}

-

-.newstape-drag { cursor: ns-resize; }

-

-.text-center { text-align: center; }

-

-.text-right { text-align: right; }

-

-.text-justify { text-align: justify; }

-

-// #newsContainer{

-//   overflow:auto;

-//   height: 100%;

-// }

-

-/*widget header*/

-.optionsMenu{

-	    position: absolute;

-    list-style: none;

-    top: 25px;

-    right: 10px;

-    border: 1px solid #067ab4;

-    display: none;

-    z-index: 2;

-    border-radius: 6px 0px 6px 6px;

-    background: #fff;

-    width: 130px;

-}

-

-.optionsMenuLink {

-    position: relative;

-    padding-left: 8px;

-    padding-right: 2px;

-    font-size: 12px;

-    line-height: 30px;

-    color: #444444;

-}

-.optionsMenu > li:hover a {

-    color: #ffffff !important;

-}

-.optionsMenu > li {

-    width: 100%;

-    text-align: left;

-}

-.optionsMenu > li:hover {

-    background-color: #0faaf7;

-    border-color: none !important;

-    cursor: pointer;

-}

-

-.dashboardSortHeader{

-    margin-left: 756px;

-}

-

-#dashboardAddWidgetPreference{

-    display: inline-block; 

-    font-size: 14px; 

-    color: #3e3e3e; 

-    width: 69%; 

-    text-align: center; 

-    padding: 15px 0px 15px 0px;

-    font-family: "Omnes-ECOMP-W02", Arial;

-}

-

-#dashboardAddWidgetPreference:hover{

-    background-color: #0568ae;

-    color:white !important; 

-}

-

-#dashboardDefaultPreference{

-    display: inline-block; 

-    font-size: 14px; 

-    color: #3e3e3e; 

-    width: 30%; 

-    text-align: center; 

-    padding: 15px 0px 15px 0px; 

-    font-family: "Omnes-ECOMP-W02", Arial;

-}

-

-#dashboardDefaultPreference:hover{

-    background-color: #0568ae;

-    color:white !important;    

-}

-

-.simulateGridHeader{

-	position: relative;

-    height: 50px !important;

-    border: 1px solid #d3d3d3;

-    border-bottom: 0;

-    background-color: #E5E5E5;

-    white-space: nowrap;

-    text-overflow: ellipsis;

-    z-index: 1;

-}

-

-.simulateGridHeaderTitle{

-	line-height: 44px;

-    margin-left: 26px;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    font-size: 18px; 

-    color: #444444;

-    float: left;

-}

-

-.simulateGridHeaderHandle{

-	cursor: move;

-    margin: 12px;

-    position: absolute;

-    top: 0;

-    left: 0;

-    border: 0;

-    vertical-align: middle;

-    -ms-interpolation-mode: bicubic;

-    display: block;

-}

-

-/* apps gridsters */

-ul {

-    list-style: none;

-}

-.gridster-box {

-    height: 100%;

-    border: 1px solid #ccc;

-    background-color: #fff;

- 	transition: transform 0.5s ease-out;

-}

-.gridster-box-header {

-    background-color: #fff;

-    padding: 0 0px 0 10px;

-    border-bottom: 1px solid #ccc;

-    position: relative;

-    height: 50px !important;

-}

-.gridster-box-header h3 {

-    margin-top: 15px;

-    display: inline-block;

-    font-family: "Omnes-ECOMP-W02", Arial;

-}

-

-.gridster-box-header i {

-font-size: 22px; 

-}

-

-.gridster-box-content {

-    padding: 59px;

-}

-.gridster-box:hover{

-    transform: scale(1.1);

-}

-.gridster-box-header-btns {

-    top: 15px;

-    right: 10px;

-    position: absolute;

-}

-

-/*** widgets ***/

-ul {

-    list-style: none;

-}

-.box {

-    height: 100%;

-    border: 1px solid #ccc;

-    background-color: #fff;

-    font-family: "Omnes-ECOMP-W02", Arial;

-}

-.box-header {

-   	height : 50px;

-    background-color: #fff;

-    padding: 0 30px 0 10px;

-    border-bottom: 1px solid #ccc;

-    position: relative;

-}

-.box-header h3 {

-    margin-top: 15px;

-    display: inline-block;

-    font-size: 16px;

-}

-.box-content {

-    position: absolute;

-    width: 100%;

-    top: 50px;

-    left: 0;

-    right: 0;

-    bottom: 29px;

-    border: 1px solid #d3d3d3;

-    box-sizing: border-box;

-    overflow-y: auto;

-    overflow-x: hidden;

-    color: #444444;

-    bottom: 0px;

-}

-.box-header-btns {

-    top: 10px;

-    right: 10px;

-    cursor: pointer;

-    position: absolute;

-}

-

-#widget-boarder{

-  background-color: #eee;

-  border: 1px dashed white;

-}

-.icon-content-gridguide{

-cursor:move;

+.w-ecomp-dashboard-home {
+ .bg_portalWhite;//white for 1702
+   position: @page-main-position;
+  top: @page-main-top;
+  left: @page-main-left;
+  right: @page-main-right;
+  bottom: @page-main-bottom;
+  padding-top: @padding-top;
+  overflow-y: @page-main-overflow-y;
+  padding-left: @padding-left-side;
+
+  .gridster-item-container .gridster-item-body {
+    overflow-y:auto;
+    overflow-x:hidden;
+  }
+
+  .dashboard-home-container {
+      position: relative;
+      padding-right: 0;
+      padding-left: 0;
+      padding-bottom: @container-bottom;
+
+    .dashboard-home-title {
+      .blackText24m;
+      margin: auto;
+      .content_justify;
+    }
+    
+    .portals-list {
+      min-height: 70vh;
+      //display: flex;
+      justify-content: center;
+      flex-flow: row wrap;
+      width: @table-width;
+      //margin-left: 230px;
+      margin-bottom: 63px;
+	  margin:auto;
+      .app-gridster-header {
+        background-color: @u;
+        font-size:12px;
+        overflow:hidden
+      }
+
+      .app-gridster-footer {
+        background-color: @u;
+      }
+
+      .portals-list-item {
+        background-color: @u;
+        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: @u;
+          height: 120px;
+          top: 180px;
+          position: relative;
+          box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
+          padding: 16px;
+
+          .info-title {
+            .blackText24m;
+            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-error{	  
+  .portalRed;
+  position: absolute;
+  width: 100%;
+  line-height: 1.5em;	
+}
+.w-ecomp-main-disclaimer {
+  text-align: center;
+  .dGray14r;
+  //position: absolute;
+  bottom: -75px;
+  line-height: 1.5em;
+  margin: 0 auto;
+  width:1170px;
+  position: relative;
+
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.slide.ng-hide-add, 
+.slide.ng-hide-remove,
+.slide.ng-enter,
+.slide.ng-leave {
+  transition: all 0.5s ease;
+}
+.slide.ng-hide,
+.slide.ng-enter {
+  transform: translate(-100%, 0);
+}
+.slide.ng-enter-active {
+  transform: translate(0, 0);
+}
+.slide.ng-leave {
+  transform: translate(0, 0);
+}
+.slide.ng-leave-active {
+  transform: translate(+100%, 0);
+}
+.dashboard-boarder{
+	// border: 2px solid #ccc!important;    
+	// border-radius: 16px!important; 
+	  height: 210px;
+    overflow: auto;
+}
+.dashboard-information-boarder{
+	border: 2px solid #ccc!important; 
+	border-radius: 16px!important;    
+}
+
+#information-section {
+   margin-top:50px;
+}
+
+.information-section-title{
+    color: #0574ac;
+    font-family: Omnes-ECOMP-W02-Bold,Arial;
+    font-size: 25px;
+    margin: 20px;
+    width: 1170px;
+}
+#left {
+    float: left;
+    width: 33%;
+    height:300px;
+    background-color: white;
+}
+
+#center {
+    float: right;
+    width: 33%;
+    height:300px;
+        background: white;
+} 
+#right {
+    margin-left:34%;
+	margin-right:34%;
+	height:300px;
+	background:white;
+}  
+
+
+/*hover*/
+
+
+.dock ul{
+display: inline-block;
+
+width: auto;
+margin: 0px;
+padding: 0px;
+list-style: none;
+
+}
+.dock ul li {
+width: auto;
+height: auto;
+display: inline-block;
+bottom: 0;
+vertical-align: bottom;
+margin-top: -43px;
+}
+.dock ul li a {
+display: block;
+height: 150px;
+width: 150px;
+position: relative;
+-webkit-transition-property: width, height,margin-top;
+-webkit-transition-duration: 0.5s;
+-o-transition-property: width, height,margin-top;
+-o-transition-duration: 0.5s;
+-moz-transition-property: width, height,margin-top;
+-moz-transition-duration: 0.5s;
+}
+.dock ul li a:hover {
+width: 200px;
+height: 200px;
+margin-top: -50px;
+}
+.dock ul li a img {
+width: 100%;
+position: absolute;
+bottom: 0;
+left: 0;
+border: none;
+padding: 0px 0px 0px 30px;
+}
+.dock_left{
+width: 31px;
+-webkit-transform: rotate(33deg);
+-moz-transform: rotate(33deg);
+-o-transform: rotate(33deg);
+position: relative;
+background: #EEE;
+overflow: hidden;
+float: left;
+height: 100px;
+z-index: 2;
+margin: -18px;
+}
+.dock_right{
+width: 36px;
+-webkit-transform: rotate(-33deg);
+-moz-transform: rotate(-33deg);
+-o-transform: rotate(-33deg);
+position: relative;
+background: #EEE;
+overflow: hidden;
+float: left;
+height: 100px;
+z-index: 2;
+margin: -18px;
+}
+
+
+
+
+/*Time for the CSS*/
+* {margin: 0; padding: 0;}
+body {background: #ccc;}
+
+.slider{
+	width: 640px; /*Same as width of the large image*/
+	position: relative;
+	/*Instead of height we will use padding*/
+	padding-top: 320px; /*That helps bring the labels down*/
+	
+	margin: 50px auto;
+	
+	/*Lets add a shadow*/
+	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
+}
+
+
+/*Last thing remaining is to add transitions*/
+.slider>img{
+	position: absolute;
+	left: 0; top: 0;
+	transition: all 0.5s;
+}
+
+.slider input[name='slide_switch'] {
+	display: none;
+}
+
+.slider label {
+	/*Lets add some spacing for the thumbnails*/
+	margin: 18px 0 0 18px;
+	border: 3px solid #999;
+	
+	float: left;
+	cursor: pointer;
+	transition: all 0.5s;
+	
+	/*Default style = low opacity*/
+	opacity: 0.6;
+}
+
+.slider label img{
+	display: block;
+}
+
+/*Time to add the click effects*/
+.slider input[name='slide_switch']:checked+label {
+	border-color: #666;
+	opacity: 1;
+}
+/*Clicking any thumbnail now should change its opacity(style)*/
+/*Time to work on the main images*/
+.slider input[name='slide_switch'] ~ img {
+	opacity: 0;
+	transform: scale(1.1);
+}
+/*That hides all main images at a 110% size
+On click the images will be displayed at normal size to complete the effect
+*/
+.slider input[name='slide_switch']:checked+label+img {
+	opacity: 1;
+	transform: scale(1);
+}
+/*Clicking on any thumbnail now should activate the image related to it*/
+
+/*We are done :)*/
+
+
+
+.accordion {
+	width: 895px; height: 320px;
+	overflow: hidden;
+  box-shadow: 0 10px 6px -6px #111;
+  margin: 20px auto
+}
+.accordion ul { width: 200% }
+
+.accordion li {
+	position: relative;
+	display: block;
+	width: 160px;
+	float: left;
+  box-shadow: 0 0 30px 8px #222;
+	transition: all 0.4s ease .300ms;
+}
+
+.accordion ul:hover li {width: 40px }
+.accordion ul li:hover {width: 640px }
+
+.caption {
+	background: rgba(0, 0, 0, 0.5);
+	position: absolute;
+  bottom: 0;	
+	width: 640px
+}
+
+.caption a {
+	display: block;
+	color: #fff;
+	text-decoration: none;
+  font: normal 16px 'Lato', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+	padding: 15px;
+}
+
+
+/*events*/
+.events-date{
+	margin-left: 10px; 
+	float:left; 
+	white-space: normal; 
+	display: inline-block; 
+	vertical-align: middle;
+    width: 55px;
+}
+.event-title-div{
+	float: left;
+	width: 235px;
+	line-height: 20px;
+    padding: 5px;
+   	font-size: 14px; 
+   	margin-left: 4px;
+}
+.events-date{
+	height: 20px;
+	margin-left: 4px; 
+	font-size: 14px; 
+}
+.events-content{
+	font-size: 14px; 
+	color: #444;
+    margin-right: 10px;
+}
+.events-content-body{
+	margin-top:5px;
+	color:#444;
+	margin-left:12px;
+	line-height:1.5;
+}
+.events {
+	border-radius: 4px;
+	padding: 3px;
+	-webkit-user-select: none;   
+}
+.events ul {
+	float: left;
+	width:100%;
+	-webkit-user-select: none
+}
+.events ul li {
+	line-height: 30px; 
+	list-style: none;
+    border-bottom: 2px solid grey;
+    height: 100%;
+    min-height: 42px;
+}
+.events ul li:hover {
+    background: #ddd;
+    cursor: pointer;
+}
+.events ul li a {
+	color: black;
+	text-decoration: none;
+	font: 14px Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-webkit-user-select: none;
+	font-family: "Omnes-ECOMP-W02", Arial;
+}
+.events-link{
+	color: #067ab4 !important; 
+}
+
+
+/*widgets*/
+
+.handle-e{
+    width: 5px;
+}
+
+.singleBtnBorder {
+    border-radius: 6px 6px 6px 6px;  
+}
+
+.widgetHeaderBtn{
+    
+    height: 30px;
+    background-color: #FFFFFF;
+    position: relative;
+    display: inline-block;
+    -moz-background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 8px 20px;
+    font-size: 14px;
+    line-height: 14px;
+    min-width: 60px;
+    border: none;
+    border-radius: 6px;
+    background-color: #ffffff;
+    background-image: none;
+    color: #ffffff;
+    vertical-align: middle;
+    text-align: center;
+    text-decoration: none;
+    text-transform: capitalize;
+    text-shadow: none !important;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    -webkit-transition: background-color 0.3s ease-out;
+    -moz-transition: background-color 0.3s ease-out;
+    transition: background-color 0.3s ease-out;
+    }
+  
+.widgetHeaderBtnPosition {
+	width: 30px;
+    min-width: 0px;
+    border: 1px solid #AAAAAA;
+    padding-left: 3px;
+    padding-right: 5px;
+    }
+    
+.icon-anchor {
+    color: #888;
+}
+   
+.widgetHeaderBtn:hover, .widgetHeaderBtn:focus {
+    background: rgba(0, 0, 0, 0);
+    color: #3a7999;
+    box-shadow: inset 0 0 0 2px #3a7999;
+}
+/*news*/
+
+@keyframes ticker {
+	0%   {margin-top: 0}
+	25%  {margin-top: -55px}
+	50%  {margin-top: -110px}
+	75%  {margin-top: -165px}
+	100% {margin-top: 0}
+}
+
+body { background: #333; width: 100%; height: 100% }
+
+.news {
+ 
+  width: 350px;
+  height: 250px;
+  margin: 0px auto;
+  // overflow: auto;
+  border-radius: 4px;
+  padding: 3px;
+  -webkit-user-select: none;
+     
+} 
+
+
+
+.news ul {
+  float: left;
+  width:100%;
+  // animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;
+  -webkit-user-select: none
+}
+
+.news ul li {line-height: 30px; list-style: none;
+    border-bottom: 2px solid grey;
+    min-height: 42px;
+ }
+ 
+.news ul li:hover {
+    background: #ddd;
+    cursor: pointer;
+}
+
+.news ul li a {
+  color: black;
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 1.5;
+  display: inline-block;
+  width:100%;
+  min-height:40px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
+}
+
+.news ul:hover { animation-play-state: paused }
+.news span:hover+ul { animation-play-state: paused }
+/*resources*/
+.resources {
+ 
+  width: 100%;
+  height: 200px;
+  margin-left: 5px;
+  border-radius: 4px;
+  padding: 3px;
+  -webkit-user-select: none;
+     
+} 
+
+
+
+.resources ul {
+  float: left;
+  width:100%;
+ 
+  -webkit-user-select: none
+}
+
+.resources ul li {line-height: 30px; list-style: none;
+    border-bottom: 2px solid grey;
+    min-height: 42px;
+ }
+ 
+.resources ul li:hover {
+    background: #ddd;
+    cursor: pointer;
+}
+
+.resources ul li a {
+  color: black;
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 1.5;
+  width:100%;
+  min-height:40px;
+  display: inline-block;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
+}
+
+
+/* OTHER COLORS */
+.blue { background: #347fd0 }
+.blue span { background: #2c66be }
+.red { background: #d23435 }
+.red span { background: #c22b2c }
+.green { background: #699B67 }
+.green span { background: #547d52 }
+.magenta { background: #b63ace }
+.magenta span { background: #842696 }
+
+
+/*broadcast*/
+
+.box-one {
+  -webkit-transition:all linear 0.4s;
+  transition:all linear 0.4s;
+  height:100px; width:200px; background:white;    border: 2px solid #ccc!important;
+    border-radius: 16px!important;
+}
+.box-one.ng-hide {
+display: block!important;
+  opacity:0;
+}
+
+.gridsterContent{
+	height:120px;
+}
+
+.gridster-item{
+    z-index:0 !important;
+}
+.gridsterAppContent{
+	height:120px;
+	
+}
+
+ .gridsterImage{
+ 	height:84px; 
+ 	width:168px;
+ }
+ .grider-content-ecomp{
+ 	transition: transform 0.5s ease-out;
+ }
+  .grider-content-ecomp:hover{
+    transform: scale(1.1);
+}
+
+
+/*information section*/
+
+.information-section{
+	/*margin-top:25px;*/
+}
+.information-section-gridsterContent{
+	/*height:300px;*/
+}
+.information-sections-gridster-header{
+	color: #0574ac;
+    font-family: Omnes-ECOMP-W02-Bold,Arial;
+    font-size: 25px;
+   
+}
+/*application empty div*/
+.app-error-block {
+    padding-top: 10px;
+   
+}
+/*news empty div*/
+.activity-error-block {
+    padding-top: 60px;
+   
+}
+
+.activity-error-msg1{
+	text-align: center;
+    margin-top: 20px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #444;
+    font-size: 20px;
+    
+}
+
+.newstape {
+  background: white;
+  color: black;
+  height: 400px;
+  overflow: hidden;
+}
+
+.newstape-content {
+  position: relative;
+  padding: 15px;
+}
+
+.newstape-drag { cursor: ns-resize; }
+
+.text-center { text-align: center; }
+
+.text-right { text-align: right; }
+
+.text-justify { text-align: justify; }
+
+// #newsContainer{
+//   overflow:auto;
+//   height: 100%;
+// }
+
+/*widget header*/
+.optionsMenu{
+	    position: absolute;
+    list-style: none;
+    top: 25px;
+    right: 10px;
+    border: 1px solid #067ab4;
+    display: none;
+    z-index: 2;
+    border-radius: 6px 0px 6px 6px;
+    background: #fff;
+    width: 130px;
+}
+
+.optionsMenuLink {
+    position: relative;
+    padding-left: 8px;
+    padding-right: 2px;
+    font-size: 12px;
+    line-height: 30px;
+    color: #444444;
+}
+.optionsMenu > li:hover a {
+    color: #ffffff !important;
+}
+.optionsMenu > li {
+    width: 100%;
+    text-align: left;
+}
+.optionsMenu > li:hover {
+    background-color: #0faaf7;
+    border-color: none !important;
+    cursor: pointer;
+}
+
+.dashboardSortHeader{
+   margin-top: -44px;
+margin-left: 735px;
+}
+
+#dashboard-dropdown
+{
+position: absolute;
+margin-top: -37px;
+left: 80%;
+top: 42px;
+}
+
+#dashboardAddWidgetPreference{
+    display: inline-block; 
+    font-size: 14px; 
+    color: #3e3e3e; 
+    width: 69%; 
+    text-align: center; 
+    padding: 15px 0px 15px 0px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+
+#dashboardAddWidgetPreference:hover{
+    background-color: #0568ae;
+    color:white !important; 
+}
+
+#dashboardDefaultPreference{
+    display: inline-block; 
+    font-size: 14px; 
+    color: #3e3e3e; 
+    width: 30%; 
+    text-align: center; 
+    padding: 15px 0px 15px 0px; 
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+
+#dashboardDefaultPreference:hover{
+    background-color: #0568ae;
+    color:white !important;    
+}
+
+.simulateGridHeader{
+	position: relative;
+    height: 50px !important;
+    border: 1px solid #d3d3d3;
+    border-bottom: 0;
+    background-color: #E5E5E5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+}
+
+.simulateGridHeaderTitle{
+	line-height: 44px;
+    margin-left: 26px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 18px; 
+    color: #444444;
+    float: left;
+}
+
+.simulateGridHeaderHandle{
+	cursor: move;
+    margin: 12px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+    vertical-align: middle;
+    -ms-interpolation-mode: bicubic;
+    display: block;
+}
+
+/* apps gridsters */
+ul {
+    list-style: none;
+}
+.gridster-box {
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+ 	transition: transform 0.5s ease-out;
+}
+.gridster-box-header {
+    background-color: #fff;
+    padding: 0 0px 0 10px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+    height: 50px !important;
+}
+.gridster-box-header h3 {
+    margin-top: 15px;
+    display: inline-block;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+
+.gridster-box-header i {
+font-size: 22px; 
+}
+
+.gridster-box-content {
+    padding: 59px;
+}
+.gridster-box:hover{
+    transform: scale(1.1);
+}
+.gridster-box-header-btns {
+    top: 15px;
+    right: 10px;
+    position: absolute;
+}
+
+/*** widgets ***/
+ul {
+    list-style: none;
+}
+.box {
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+.box-header {
+   	height : 50px;
+    background-color: #fff;
+    padding: 0 30px 0 10px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+}
+.box-header h3 {
+    margin-top: 15px;
+    display: inline-block;
+    font-size: 16px;
+}
+.box-content {
+    position: absolute;
+    width: 100%;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 29px;
+    border: 1px solid #d3d3d3;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    color: #444444;
+    bottom: 0px;
+}
+.box-header-btns {
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    position: absolute;
+}
+
+#widget-boarder{
+  background-color: #eee;
+  border: 1px dashed white;
+}
+.icon-content-gridguide{
+cursor:move;
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
index 5e67526e..9a87c0ba 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
@@ -1,179 +1,183 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-dashboard-home" id="widgets">

-	<div class="dashboard-home-container" id="page-content">

-		<div align="center" id="errorInfo"

-			style="display: none; font-size: 12px; margin-left: 5px">

-			<span style="color: red">You don't have a user account in that

-				application. Please ask the system administrator. </span>

-		</div>

-		<div class="portals-list" style="margin-bottom: 0px;">

-			<div>

-				<div class="simulateGridHeader">

-					<span class="simulateGridHeaderTitle">Applications <span

-						class="dashboardSortHeader">Sort by:</span></span>

-					<div style="float: right; margin: 7px 7px 7px 0px;"

-						class="form-field" att-select="sort_options"

-						ng-model="selectedSortType"

-						id="sort-by-{{selectedSortType.value}}"

-						ng-change="selectedSortTypeChanged(selectedSortType.value)"></div>

-				</div>

-				<div class="dashboard-boarder">

-					<div class="gridster-container override_background">

-						<div ng-if="appsViewData.length==0">

-							<div class="app-error-block">

-								<i class="icon-information full-linear-icon-information"

-									style="margin-left: 50%; font-size: 90px; color: black"></i> <br>

-								<div class="activity-error-msg1">

-									You do not have access to any application or function in ECOMP

-									Portal. <br> Please request access via <a

-										href="https://mylogins.cso.att.com/index.cfm"

-										target="_mylogins">MyLogins</a>.

-								</div>

-							</div>

-						</div>

-

-						<div ng-if="appsViewData.length>0" id="page-content"

-							class="content" gridster="dashboard.gridsterAppOpts">

-							<ul>

-								<li gridster-item="item" ng-repeat="item in appsViewData">

-									<div class="gridster-box" ng-if="item.addRemoveApps == null">

-										<div class="gridster-box-header">

-											<i class="icon-content-gridguide"></i>

-											<h3 style="cursor: context-menu">{{item.headerText |

-												elipsis: 14}}</h3>

-										</div>

-										<div class="gridster-box-content"

-											ng-style="{'cursor':'pointer',

-											'background-image': 'url('+(item.imageLink)+')',

-											'background-color':'white',

-											'background-repeat': 'no-repeat',

-											'background-size': '170px 130px'}"

-											ng-click="dashboard.goToPortal(item);dashboard.auditLog(item)"

-											ng-hide="users.isLoadingTable && !users.getUserAppsIsDone">

-										</div>

-									</div>

-									<div class="gridster-box" ng-if="item.addRemoveApps">

-										<div class="gridster-box-header" style="cursor: pointer;"

-											ng-click="dashboard.goToCatalog()">

-											<i class="icon-content-gridguide"></i>

-											<h3>Select applications...</h3>

-

-										</div>

-										<div class="gridster-box-content"

-											ng-style="{'cursor':'pointer',

-										'order': item.order, 

-										'text-align': 'center',

-										'background-color':'white',

-										'background-repeat': 'no-repeat',

-										'background-size': '170px 130px',

-										'padding': '4px',

-										'opacity': '1'}"

-											ng-click="dashboard.goToCatalog()" class="gridsterContent">

-											<label style="font-size: 12px;">Click

-												here to personalize <br> this applications page

-											</label> <i class="icon-controls-add-maximize"

-												style="font-size: 80px; color: #067ab4"></i>

-										</div>

-									</div>

-								</li>

-							</ul>

-						</div>

-

-					</div>

-

-				</div>

-			</div>

-

-			<br> <br>

-

-

-			<div style="font-family: Omnes-ECOMP-W02;"

-				ng-show=dashboard.isCommError>Failed to communicate with the

-				widget microservice.</div>

-			

-			<div id="widget-boarder" class="content" gridster="dashboard.gridsterWidgetOpts">

-				<ul>

-					<li gridster-item="widget" ng-repeat="widget in widgetsViewData">

-						<div class="box">

-							<div class="box-header">

-							<i style="cursor:move;" class="icon-content-gridguide"></i>

-								<h3>{{ widget.headerText}}</h3>

-								<div class="box-header-btns pull-right"

-									ng-if="isAdminPortalAdmin == true" class="ng-scope">

-										<a id="widgetHeaderBtns"

-											class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder"

-											ng-class="singleBtnBorder" alt="Settings"

-											ng-mousedown="showImpResOption=!showImpResOption"

-											ng-mouseleave="showImpResOption=false" title="Settings"

-											ddh-accessibility-click="13,32" tabindex="0"><span

-											style="color: #888;"><img

-											ng-src="assets/images/generic.png"

-											style="margin-bottom: 3px; margin-left: 3px;" alt="..."

-											aria-label="Tap or Click to move"

-											src="assets/images/generic.png"></span></a>

-

-										<ul class="optionsMenu"

-											style="display: block"

-											ng-show="showImpResOption"

-											ng-mouseenter="showImpResOption=true"

-											ng-mouseleave="showImpResOption=false">

-											<!-- ngIf: widget.duplicateAllowed -->

-											<li ng-show="widget.widgetIdentifier != ''"

-												ng-click="editWidgetModalPopup(importResData, widget.widgetIdentifier);">

-												<a class="optionsMenuLink" href="javascript:void(0)"

-												ddh-accessibility-click="13,32">Edit</a>

-											</li>

-											

-											<li

-												ng-click="editWidgetParameters(widget.widgetid);">

-												<a class="optionsMenuLink" href="javascript:void(0)"

-												ddh-accessibility-click="13,32">Parameters</a>

-											</li>

-											

-											<!-- end ngIf: widget.duplicateAllowed  -->

-										</ul>

-

-								</div>

-							</div>

-							<div class="box-content">

-							<div  dyn-attr="widget.attrb"></div>

-							</div>

-						</div>

-					</li>

-				</ul>

-			</div>

-			<div></div>

-			<div class="gridster-container override_background">

-				<div id="dashboardAddWidgetPreference"

-					ng-style="{'cursor':'pointer'}"

-					ng-click="dashboard.goToWidgetCatLog()">

-					<i class="icon-controls-add-maximize"></i> Add Widget

-				</div>

-				&nbsp;

-				<div id="dashboardDefaultPreference" ng-style="{'cursor':'pointer'}"

-					ng-click="restoreSortSelected()">

-					<i class="icon-arrows-replay-restart"></i> Reset Widget Layout

-				</div>

-			</div>

-		</div>

-

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-dashboard-home" id="widgets">
+	<div class="dashboard-home-container" id="page-content">
+		<div align="center" id="errorInfo"
+			style="display: none; font-size: 12px; margin-left: 5px">
+			<span style="color: red">You don't have a user account in that
+				application. Please ask the system administrator. </span>
+		</div>
+		<div class="portals-list" style="margin-bottom: 0px;">
+			<div>
+				<div class="simulateGridHeader">
+					<span class="simulateGridHeaderTitle">Applications <span
+						class="dashboardSortHeader">Sort by:</span>
+						
+						<div id="dashboard-dropdown">
+						<select id="sort-by-{{selectedSortType.value}}" name="dropdown1" b2b-dropdown  ng-model="selectedSortType.value" ng-change="selectedSortTypeChanged(selectedSortType.value)">  
+				        <option b2b-dropdown-list option-repeat="d in sort_options" value="{{d.value}}">{{d.title}}</option>
+				                </select>
+				                </div>
+				                </span>
+						
+				</div>
+				<div class="dashboard-boarder">
+					<div class="gridster-container override_background">
+						<div ng-if="appsViewData.length==0">
+							<div class="app-error-block">
+								<i class="icon-information full-linear-icon-information"
+									style="margin-left: 50%; font-size: 90px; color: black"></i> <br>
+								<div class="activity-error-msg1">
+									You do not have access to any application or function in ECOMP
+									Portal.
+									<div ng-include src="'app/views/dashboard/dashboard-extension.tpl.html'"></div>
+								</div>
+							</div>
+						</div>
+
+						<div ng-if="appsViewData.length>0" id="page-content"
+							class="content" gridster="dashboard.gridsterAppOpts">
+							<ul>
+								<li gridster-item="item" ng-repeat="item in appsViewData">
+									<div class="gridster-box" ng-if="item.addRemoveApps == null">
+										<div class="gridster-box-header">
+											<i id="gridster-{{item.headerText.split(' ').join('-')}}-icon" class="icon-content-gridguide"></i>
+											<h3 style="cursor: context-menu">{{item.headerText |
+												elipsis: 14}}</h3>
+										</div>
+										<div class="gridster-box-content"
+										id="gridster-{{item.headerText.split(' ').join('-')}}-icon-link"
+											ng-style="{'cursor':'pointer',
+											'background-image': 'url('+(item.imageLink)+')',
+											'background-color':'white',
+											'background-repeat': 'no-repeat',
+											'background-size': '170px 130px'}"
+											ng-click="dashboard.goToPortal(item);dashboard.auditLog(item)"
+											ng-hide="users.isLoadingTable && !users.getUserAppsIsDone">
+										</div>
+									</div>
+									<div class="gridster-box" ng-if="item.addRemoveApps">
+										<div class="gridster-box-header" style="cursor: pointer;"
+											ng-click="dashboard.goToCatalog()">
+											<i class="icon-content-gridguide"></i>
+											<h3>Select applications...</h3>
+
+										</div>
+										<div class="gridster-box-content"
+										id="gridster-personalize"
+											ng-style="{'cursor':'pointer',
+										'order': item.order, 
+										'text-align': 'center',
+										'background-color':'white',
+										'background-repeat': 'no-repeat',
+										'background-size': '170px 130px',
+										'padding': '4px',
+										'opacity': '1'}"
+											ng-click="dashboard.goToCatalog()" class="gridsterContent">
+											<label id="add-icon-label"  style="font-size: 12px;">Click
+												here to personalize <br> this applications page
+											</label> <i  id="add-icon" class="icon-controls-add-maximize"
+												style="font-size: 80px; color: #067ab4"></i>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+
+					</div>
+
+				</div>
+			</div>
+
+			<br> <br>
+
+
+			<div 
+				ng-show=dashboard.isCommError>Failed to communicate with the
+				widget microservice.</div>
+			
+			<div id="widget-boarder" class="content" gridster="dashboard.gridsterWidgetOpts">
+				<ul>
+					<li gridster-item="widget" ng-repeat="widget in widgetsViewData">
+						<div class="box">
+							<div class="box-header">
+							<i id="widget-gridster-{{widget.headerText.split(' ').join('-')}}-icon" style="cursor:move;" class="icon-content-gridguide"></i>
+								<h3>{{ widget.headerText}}</h3>
+								<div class="box-header-btns pull-right"
+									ng-if="isAdminPortalAdmin == true" class="ng-scope">
+										<a id="widgetHeaderBtns"
+											class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder"
+											ng-class="singleBtnBorder" alt="Settings"
+											ng-mousedown="showImpResOption=!showImpResOption"
+											ng-mouseleave="showImpResOption=false" title="Settings"
+											ddh-accessibility-click="13,32" tabindex="0"><span
+											style="color: #888;"><img
+											ng-src="assets/images/generic.png"
+											style="margin-bottom: 3px; margin-left: 3px;" alt="..."
+											aria-label="Tap or Click to move"
+											src="assets/images/generic.png"></span></a>
+
+										<ul class="optionsMenu"
+											style="display: block"
+											ng-show="showImpResOption"
+											ng-mouseenter="showImpResOption=true"
+											ng-mouseleave="showImpResOption=false">
+											<!-- ngIf: widget.duplicateAllowed -->
+											<li ng-show="widget.widgetIdentifier != ''"
+												ng-click="editWidgetModalPopup(importResData, widget.widgetIdentifier);">
+												<a id="edit-widget-popup" class="optionsMenuLink" href="javascript:void(0)"
+												ddh-accessibility-click="13,32">Edit</a>
+											</li>
+											
+											<li
+												ng-click="editWidgetParameters(widget.widgetid);">
+												<a id="parameters-widget-popup" class="optionsMenuLink" href="javascript:void(0)"
+												ddh-accessibility-click="13,32">Parameters</a>
+											</li>
+											
+											<!-- end ngIf: widget.duplicateAllowed  -->
+										</ul>
+
+								</div>
+							</div>
+							<div class="box-content">
+							<div  dyn-attr="widget.attrb"></div>
+							</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div></div>
+			<div class="gridster-container override_background">
+				<div id="dashboardAddWidgetPreference"
+					ng-style="{'cursor':'pointer'}"
+					ng-click="dashboard.goToWidgetCatLog()">
+					<i class="icon-controls-add-maximize"></i> Add Widget
+				</div>
+				&nbsp;
+				<div id="dashboardDefaultPreference" ng-style="{'cursor':'pointer'}"
+					ng-click="restoreSortSelected()">
+					<i class="icon-arrows-replay-restart"></i> Reset Widget Layout
+				</div>
+			</div>
+		</div>
+
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
new file mode 100644
index 00000000..69fe6e4d
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
@@ -0,0 +1,400 @@
+/**
+ * Created by nnaffar on 12/20/15.
+ */
+'use strict';
+(function () {
+    class MenuDetailsModalCtrl {
+        constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) {
+
+        	$scope.isAllApplications = false;
+            let newMenuModel = {
+                name: null,
+                menuId: null,
+                parentMenuId: null,
+                url: null
+            };
+
+            let getAvailableRoles = (appid) => {
+                this.isSaving = true;
+                if (appid != null) {
+                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: About to call getManagedRolesMenu");
+                    functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => {
+                        $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj))
+                        this.availableRoles = rolesObj;
+                        this.preSelectedRoles = {roles:[]};
+
+                        if(($scope.ngDialogData.source==='edit') && this.isMidLevelMenuItem()){
+                            // in Edit flow , for Midlevel menu item no need to preSelect.
+                            this.preSelectedRoles = {roles:[]};
+                        }else if(!angular.isUndefined(this.menuItem.menuDetails) &&
+                            $scope.ngDialogData.source==='edit' && this.isLeafMenuItem() &&
+                            this.menuItem.menuDetails.appid!=appid) {
+                            // in Edit flow , for LeafMenuItem, if appid changed then no need to preSelect.
+                            this.preSelectedRoles = {roles:[]};
+                        }else{
+                            if((!angular.isUndefined(this.menuItem.menuDetails)) &&
+                                (!angular.isUndefined(this.menuItem.menuDetails.roles))){
+                                    $log.debug('menuDetails.roles: ' + this.menuItem.menuDetails.roles);
+                                    for(var i=0; i<this.menuItem.menuDetails.roles.length; i++){
+                                        var role = {"roleId":this.menuItem.menuDetails.roles[i]};
+                                        $log.debug('MenuDetailsModalCtrl::getAvailableRoles: adding role to preselected: ' + i + ': ' + JSON.stringify(role));
+                                        this.preSelectedRoles.roles.push(role);
+                                    }
+                            }
+                        }
+                        $rootScope.$broadcast('availableRolesReady');
+                        this.isSaving = false;
+                    }).catch(err => {
+                        $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err);
+                    });
+                } else {
+                    $log.debug("MenuDetailsModalCtrl::getAvailableRoles: appid was null");
+                }
+            };
+
+            let getAvailableApps = () => {
+            	$scope.isAllApplications = true;
+                functionalMenuService.getAvailableApplications().then(apps => {
+                    $log.debug("MenuDetailsModalCtrl::getAvailableApps: Apps returned = " + JSON.stringify(apps))
+                    this.availableApps = apps;
+                    // Keep track of whether or not the selected app is disabled
+                    if (angular.isDefined(this.selectedApp) && angular.isDefined(this.selectedApp.index)) {
+                        for (var i = 0; i < apps.length; i++) {
+                            if (apps[i].index === this.selectedApp.index) {
+                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: found app with index: " + this.selectedApp.index);
+                                $log.debug("MenuDetailsModalCtrl::getAvailableApps: setting isDisabled to: " + !apps[i].enabled);
+                                this.selectedApp.isDisabled = !apps[i].enabled;
+                                break;
+                            }
+                        }
+                        $log.debug("didn't find index: " + this.selectedApp.index);
+                    }
+                })['catch'](function (err) {
+                    confirmBoxService.showInformation('There was a problem retrieving the Applications. ' +
+                        'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                    $log.error("MenuDetailsModalCtrl::getAvailableApps: getAvailableApps error: " + err);
+                    $scope.isAllApplications = false;
+                }).finally(()=>{
+                    this.isSaving = false;
+                    $scope.isAllApplications = false;
+                });
+            };
+
+            let init = () => {
+            	$scope.isAllApplications = false;
+                $log.info('MenuDetailsModalCtrl::init');
+                this.saveOrContinueBtnText = "Save";
+                this.isSaving = false;
+                this.displayRoles = $scope.ngDialogData.source==='view' ? true : false;
+                this.formEditable = $scope.ngDialogData.source==='view' ? false : true;
+                this.selectedRole = [];
+                this.availableRoles = [];
+                this.menuItem = _.clone($scope.ngDialogData.menuItem);
+                $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined');
+                if(!angular.isUndefined(this.menuItem.menuDetails) &&
+                    ($scope.ngDialogData.source==='view' ||
+                    ($scope.ngDialogData.source==='edit') && this.isLeafMenuItem() )){
+
+                    $log.debug("MenuDetailsModalCtrl::init: menuItem: ");
+                    $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem);
+                    this.menuItem.menu.url = this.menuItem.menuDetails.url;
+                    this.selectedApp={};
+                    this.selectedApp.index = this.menuItem.menuDetails.appid;
+                    getAvailableRoles(this.selectedApp.index);
+
+                }
+
+                if($scope.ngDialogData.source==='view' || $scope.ngDialogData.source==='edit'){
+                    this.menutitle = this.menuItem.menu.name;
+                    this.menuLocation = this.isParentMenuItem() ? this.menuItem.menu.name : this.menuItem.menu.parent.name;
+                }else{
+                    this.menutitle = '';
+                    this.menuLocation = this.menuItem.menu.name;
+                }
+                // Temporarily passing 0 as dummy for getAvailableRoles incase of this.selectedApp is not there i.e., in Add flow
+                //  getAvailableRoles(angular.isUndefined(this.selectedApp) ? 0: this.selectedApp.index );
+                getAvailableApps();
+                $log.debug("MenuDetailsModalCtrl::init: Menu details: " +  JSON.stringify(this.menuItem.menuDetails));
+            };
+
+
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+
+            //This part handles conflict errors (409)
+            this.conflictMessages = {};
+            this.scrollApi = {};
+            let handleConflictErrors = err => {
+                if(!err.data){
+                    return;
+                }
+                if(!err.data.length){ //support objects
+                    err.data = [err.data]
+                }
+                $log.debug('MenuDetailsModalCtrl::handleConflictErrors: err.data = ' + JSON.stringify(err.data));
+                _.forEach(err.data, item => {
+                    _.forEach(item.fields, field => {
+                        //set conflict message
+                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
+                        //set field as invalid
+                        $log.debug('MenuDetailsModalCtrl::handleConflictErrors: fieldName = ' + field.name);
+                        $scope.functionalMenuForm[field.name].$setValidity('conflict', false);
+                        //set watch once to clear error after user correction
+                        watchOnce[field.name]();
+                    });
+                });
+                this.scrollApi.scrollTop();
+            };
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                $log.debug('MenuDetailsModalCtrl::resetConflict: $setValidity(true) = ' + fieldName);
+                if($scope.functionalMenuForm[fieldName]){
+                    $scope.functionalMenuForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+
+            let watchOnce = {
+                text: () => {
+                    let unregisterName = $scope.$watch('functionalMenuDetails.menutitle', (newVal, oldVal) => {
+                        // $log.debug('title:: newVal, oldVal = ' + newVal.toLowerCase() + " | " + oldVal.toLowerCase());
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
+                            resetConflict('text');
+                            unregisterName();
+                        }
+                    });
+                },
+                url: () => {
+                    let unregisterUrl = $scope.$watch('functionalMenuDetails.menuItem.menu.url', (newVal, oldVal) => {
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
+                            resetConflict('url');
+                            unregisterUrl();
+                        }
+                    });
+                }
+            };
+
+            //***************************
+
+            this.isLeafMenuItem = () => {
+                return this.menuItem.menu.children.length>0 ? false : true;
+            };
+
+            this.isMidLevelMenuItem = () => {
+                return this.menuItem.menu.parentMenuId!=null && this.menuItem.menu.children.length>0 ? true : false;
+            };
+
+            this.isParentMenuItem = () => {
+                return this.menuItem.menu.parentMenuId!=null ? false : true;
+            };
+
+            this.updateSelectedApp = (appItem) => {
+                if (!appItem) {
+                    return;
+                }
+                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index));
+                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: ");
+                $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem);
+                this.selectedApp.isDisabled = ! appItem.enabled;
+                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);
+                getAvailableRoles(appItem.index);
+            };
+
+            this.continue = () => {
+                this.displayRoles = true;
+                this.formEditable = false;
+            };
+
+            this.saveChanges = () => {
+
+                //todo : form validation was commented as dialog message is kept for error validations
+                /*if($scope.functionalMenuForm.$invalid){
+                 return;
+                 }*/
+
+                if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) {
+                    confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {});
+                    return;
+                }else if(!this.menuItem.menu.url && !angular.isUndefined(this.selectedApp) && this.selectedApp.index>0){
+                    confirmBoxService.showInformation('Please enter url, or select "No Application"').then(isConfirmed => {});
+                    return;
+                }else if(!this.menutitle){
+                    confirmBoxService.showInformation('Please enter the Menu title').then(isConfirmed => {});
+                    return;
+                }
+
+                this.isSaving = true;
+                var activeMenuItem = {};
+
+                if ($scope.ngDialogData.source === 'edit') {     // Edit Menu Item
+                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item');
+                    activeMenuItem = {
+                        menuId:this.menuItem.menu.menuId,
+                        column:this.menuItem.menu.column,
+                        text:this.menutitle,
+                        parentMenuId:this.menuItem.menu.parentMenuId,
+                        url:this.menuItem.menu.url,
+                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
+                        roles:this.selectedRole
+                    };
+                    // If we have removed the url and appid, we must remove the roles
+                    if (!activeMenuItem.appid && !activeMenuItem.url) {
+                        activeMenuItem.roles = null;
+                    }
+                    functionalMenuService.saveEditedMenuItem(activeMenuItem)
+                        .then(() => {
+                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
+                            $scope.closeThisDialog(true);
+                        }).catch(err => {
+                        if(err.status === 409){//Conflict
+                            handleConflictErrors(err);
+                        } else {
+                            confirmBoxService.showInformation('There was a problem saving your change. ' +
+                                'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                        }
+                        $log.error('MenuDetailsModalCtrl::saveChanges: error - ',err);
+                    }).finally(()=>{
+                        this.isSaving = false;
+                    });
+
+                    $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem));
+                } else {   // New Menu Item
+                    $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item');
+                    var newMenuItem = {
+                        menuId:null, // this is a new menu item
+                        column:this.menuItem.menu.column,
+                        text:this.menutitle,
+                        // We are creating this new menu item under the menu item that was clicked on.
+                        parentMenuId:this.menuItem.menu.menuId,
+                        url:this.menuItem.menu.url,
+                        appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
+                        roles:this.selectedRole
+                    };
+
+                    $log.debug("MenuDetailsModalCtrl::saveChanges:  New Menu output will be: " + JSON.stringify(newMenuItem));
+                    functionalMenuService.saveMenuItem(newMenuItem)
+                        .then(() => {
+                            $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
+                            $scope.closeThisDialog(true);
+                        }).catch(err => {
+                        if(err.status === 409){//Conflict
+                            handleConflictErrors(err);
+                        } else {
+                            confirmBoxService.showInformation('There was a problem saving your menu. ' +
+                                'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+                        }
+                        $log.error('MenuDetailsModalCtrl::saveChanges error: ', err);
+                    }).finally(()=>{
+                        this.isSaving = false;
+                    });
+
+                }
+            };
+
+            init();
+
+            $scope.$on('$stateChangeStart', e => {
+                //Disable navigation when modal is opened
+                e.preventDefault();
+            });
+        }
+    }
+    MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService'];
+    angular.module('ecompApp').controller('MenuDetailsModalCtrl', MenuDetailsModalCtrl);
+
+    angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){
+        return {
+            restrict: 'E',
+            scope: {
+                model: '=',
+                options: '=',
+                populated_roles: '=preSelected',
+                dropdownTitle: '@',
+                source: '='
+            },
+            template: "<div class='btn-group' data-ng-class='{open: open}'>" +
+            "<button class='btn btn-medium'>{{dropdownTitle}}</button>" +
+            "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" +
+            "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" +
+            "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)'  type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" +
+            "</ul>" +
+            "</div>",
+            controller: function ($scope) {
+                $scope.selectedItems = {};
+                $scope.checkAll = false;
+                $scope.$on('availableRolesReady', function() {
+                    init();
+                });
+
+                function init() {
+                    console.log('dropdownMultiselect init');
+                    $scope.dropdownTitle = $scope.source ==='view' ? 'View Roles' : 'Select Roles';
+                    console.log('$scope.populated_roles = ' + $scope.populated_roles);
+                }
+
+                $scope.$watch('populated_roles', function(){
+                    if ($scope.populated_roles && $scope.populated_roles.length>0) {
+                        for (var i = 0; i < $scope.populated_roles.length; i++) {
+                            $scope.model.push($scope.populated_roles[i].roleId);
+                            $scope.selectedItems[$scope.populated_roles[i].roleId] = true;
+                        }
+                        if ($scope.populated_roles.length === $scope.options.length) {
+                            $scope.checkAll = true;
+                        }
+                    }else{
+                        deselectAll();
+                    }
+                });
+
+                $scope.openDropDown = function () {
+
+                };
+
+                $scope.checkAllClicked = function () {
+                    if ($scope.checkAll) {
+                        selectAll();
+                    } else {
+                        deselectAll();
+                    }
+                };
+
+                function selectAll() {
+                    $scope.model = [];
+                    $scope.selectedItems = {};
+                    angular.forEach($scope.options, function (option) {
+                        $scope.model.push(option.roleId);
+                    });
+                    angular.forEach($scope.model, function (id) {
+                        $scope.selectedItems[id] = true;
+                    });
+                    console.log($scope.model);
+                };
+
+                function deselectAll() {
+                    $scope.model = [];
+                    $scope.selectedItems = {};
+                    console.log($scope.model);
+                };
+
+                $scope.setSelectedItem = function (id) {
+                    var filteredArray = [];
+                    if ($scope.selectedItems[id] === true) {
+                        $scope.model.push(id);
+                    } else {
+                        filteredArray = $scope.model.filter(function (value) {
+                            return value != id;
+                        });
+                        $scope.model = filteredArray;
+                        $scope.checkAll = false;
+                    }
+                    console.log(filteredArray);
+                    return false;
+                };
+
+                $scope.setDisable = function(source){
+                    return source ==='view' ? true : false;
+                }
+            }
+        }
+    }]);
+
+})();
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html
new file mode 100644
index 00000000..e80a0265
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.delete.modal.html
@@ -0,0 +1,18 @@
+<div class="functionalMenu-details-modal">
+    <div id="title" class="title">Delete Menu Item</div>
+
+    <div id="functionalMenu-main" class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
+        <form name="functionalMenuForm" novalidate>
+
+            <div class="confirmation-message-wrap">
+                <div class="confirmation-message" ng-bind="confirmBox.message"></div>
+            </div>
+        </form>
+    </div>
+    <div class="dialog-control">
+        <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>
+        <div id='menu-details-next-button' class="next-button"
+             ng-class="{disabled: functionalMenuForm.$invalid}" ng-click="functionalMenuDetails.saveChanges()">Delete</div>
+        <div id='menu-details-cancel-button' class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
new file mode 100644
index 00000000..7ba444eb
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
@@ -0,0 +1,97 @@
+<div class="functionalMenu-details-modal">
+    <div class="title">{{ngDialogData.title}}</div>
+
+
+    <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
+        <form name="functionalMenuForm">
+
+            <div class="span6" >
+					<div class="item-label">Parent</div>
+					<input id="input-parent" ddh-reset class="functionalMenu-height"
+						 ng-model="functionalMenuDetails.menuLocation"
+						type="text"	name="menuItem"  readonly="readonly"  />
+			</div>
+				
+            <div class="span6" >
+                <div class="item-label">Title</div>
+                <input id="input-title" ddh-reset ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " placeholder="Enter text"class="functionalMenu-height" ng-model="functionalMenuDetails.menutitle" type="text" name="text"/>
+                <div id="div-error-conflict" class="error-container" ng-show="functionalMenuDetails.conflictMessages.text">
+                    <small id="msg-error-conflict" id="functionalMenuDetails-input-title-conflict" class="err-message" ng-bind="functionalMenuDetails.conflictMessages.text"></small>
+                </div>
+            </div>
+            
+            
+              <div class="span6">
+                <div class="left-item">
+                   <div class="item-label">URL</div>
+                    <input id="input-url" ddh-reset ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " class="functionalMenu-height" placeholder="http://" class="input-field" ng-model="functionalMenuDetails.menuItem.menu.url" type="url" name="url"/>
+					<div id="error-url-conflict" ng-show="functionalMenuForm.url.$error.url">
+					<small class="err-message"	style="color: Red; font-size: 11px;">Not valid URL!</small>
+				</div>                
+				</div>
+                </div>
+                 <div class="right-item">
+                    <div class="item-label">App</div>
+                    <div class="custom-select-wraps" ng-readonly="checked">
+                    				<div id='ecomp-small-spinner' class="ecomp-small-spinner"
+                    									ng-if="isAllApplications"></div>
+                    				<div ng-if="!isAllApplications">
+                                            <select id="select-app" class="select-field"
+                                ng-model="functionalMenuDetails.selectedApp"
+                                ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedApp);"
+                                ng-options="app.title for app in functionalMenuDetails.availableApps track by app.index"
+                               
+                                required>
+                            <option value="" >No Application</option>
+                        </select>
+                    </div>
+                    </div>
+                    <!--<span class="err-message" ng-show="functionalMenuForm.app.$dirty && functionalMenuForm.app.$error.required"> Please select App!</span>-->
+                 <!--   <pre>{{functionalMenuDetails.menuItem | json}}</pre> -->
+                </div>
+           
+                    
+            <div class="item" ng-show="functionalMenuDetails.displayRoles==true">
+                <div class="item-label">Roles</div>
+                    <dropdown-multiselect id="dropdown-roles" dropdown-title="Select Roles" pre-selected="functionalMenuDetails.preSelectedRoles.roles"
+                                          model="functionalMenuDetails.selectedRole"
+                                          options="functionalMenuDetails.availableRoles" source="ngDialogData.source" >
+                    </dropdown-multiselect>
+            </div>
+            <div ng-show="functionalMenuDetails.selectedApp && functionalMenuDetails.selectedApp.isDisabled" class="err-message">Application is disabled</div>
+             </div>
+        </form>
+    </div>
+    <div class="dialog-control">
+        <div ng-if="ngDialogData.source!='view'">
+            <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>
+            <span ng-if="ngDialogData.source=='edit' && functionalMenuDetails.isLeafMenuItem()">
+                <button class="btn btn-alt btn-small" id="add-menu-button-save"
+                        ng-show="!functionalMenuDetails.menuItem.menu.url ||
+                        !(functionalMenuDetails.selectedApp.index>0) ||
+                        functionalMenuDetails.displayRoles"
+                        ng-disabled="!functionalMenuForm.text.$valid"
+                        ng-click="functionalMenuDetails.saveChanges()">Save</button>
+                <button class="btn btn-alt btn-small" id="add-menu-button-continue"
+                        ng-show="!!functionalMenuDetails.menuItem.menu.url &&
+                        functionalMenuDetails.selectedApp.index>0 &&
+                        functionalMenuDetails.menutitle &&
+                        !functionalMenuDetails.displayRoles"
+                        ng-disabled="!functionalMenuForm.url.$valid" ng-click="functionalMenuDetails.continue()">Continue</button>
+            </span>
+            <span ng-if="ngDialogData.source=='add' || (ngDialogData.source=='edit' && !functionalMenuDetails.isLeafMenuItem())">
+                <button id="button-save-add"
+                        class="btn btn-alt btn-small" ng-show="!functionalMenuDetails.menuItem.menu.url || !(functionalMenuDetails.selectedApp.index>0)
+                || functionalMenuDetails.selectedRole.length>0 || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle"
+                        ng-click="functionalMenuDetails.saveChanges()">Save</button>
+                <button id="button-save-continue" class="save-button" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle
+                && !functionalMenuDetails.selectedRole.length>0" ng-disabled="!functionalMenuForm.url.$valid"
+                        ng-click="functionalMenuDetails.continue()">Continue</button>
+            </span>
+            <button id="button-cancel-close-dialog" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+        </div>
+        <div ng-if="ngDialogData.source=='view'">
+            <div  id="div-close-dialog"  class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less
index 0d5e98fc..ce434b47 100644
--- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less
@@ -1,38 +1,101 @@
 .functionalMenu-details-modal {
-  height: 430px;
+  height: 520px;
   
-  input:not([type="button"]) {
-    height: 13px;
-	} 
-
+ 
   .title {
     //.n18r;
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r;  //ECOMP Dark Gray
     border-bottom: @blue-active 3px solid;
+ }
 
-  }
+ .span6{
+padding-top: 10px;
+ }
+ .right-item{
+ padding-top: 10px;
+ 
+ }
+ 
+ .item{
+  padding-top: 10px;
+ 
+ }
+.functionalMenu-height{
+height:35px;
+width:140%;
+
+}
+
+ select {
+    max-width: 150%;
+    width: 380px;
+		}
+.btn{
+font-family: clearview_att_regular;
+    font-size: 14px !important;
+}
+.btn-group.open .dropdown-toggle {
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    box-shadow: inset 0 0px 0px rgba(0,0,0,.125);
+}
 .btn-group {
-    display: table-cell;
-    max-width: 250px;
-  min-width: 290px;
-   background-color: #f2f2f2;
-  }
+    cursor: pointer;
+    position: relative;
+    border: 1px solid #5a5a5a;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    line-height: 30px;
+       height: 40px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 70%;
+    min-width:50%;
+    background-color: #f2f2f2;
+    }
+    
+    .btn-group>.btn+.dropdown-toggle{
+       
+    margin-left: 80px;
+    padding-top: 10px;
+    }
   .btn-medium{
     width:168px;
+    margin-right: 86px;
   }
-  
-
+   .caret {
+    margin-left: 75px;
+}
+.custom-select-wrap {
+    width: 86%;
+   }
+   .custom-select-wrap::after {
+       right: 101px;
+   }
     
   .dropdown-menu-medium{
-    width:236px;
-    max-height: 200px;
+    max-height: 123px;
     overflow-y: auto;
+    z-index: 99999;
+    padding-left: 8px;
+    padding-right: 8px;
+    position: absolute;
+    top: 39px;
+    width: 100%;
+    background: #fff;
+    border: 1px #d2d2d2 solid;
+    left: 0px;
   }
 
   .functionalMenu-properties-main {
     padding: 16px;
     height: 306px;
     overflow-y: visible;
+    input[type=checkbox][disabled]{
+    height:13px;
+    }
+	input[type=checkbox] {
+	    height: 13px !important;
+	}
 
     .item{
       position: relative;
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.controller.js b/ecomp-portal-FE-common/client/app/views/header/header.controller.js
index 961362a5..33cb8454 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/header/header.controller.js
@@ -1,449 +1,558 @@
-/*-

- * ================================================================================

- * 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 () {

-	class HeaderCtrl {

-        constructor($log, $window, userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state,auditLogService,notificationService) {

-            this.firstName = '';

-            this.lastName = '';

-            this.$log = $log;

-            this.menusService = menusService;

-            this.$scope = $scope;

-            this.favoritesMenuItems = '';

-            $scope.favoriteItemsCount = 0;

-            $scope.favoritesMenuItems = '';

-            $scope.showFavorites = false;

-            $scope.emptyFavorites = false;

-            $scope.favoritesWindow = false;

-            $scope.notificationCount=0;

-            $scope.showNotification = true;

-

-            $scope.hideMenus = false;

-

-            $scope.menuItems = [];

-            $scope.activeClickSubMenu = {

-                x: ''

-            }; 

-            $scope.activeClickMenu = {

-                x: ''

-            };

-            $scope.megaMenuDataObject =[];

-            $scope.notificationCount= notificationService.notificationCount;

-            this.isLoading = true;

-            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

-            

-            var unflatten = function( array, parent, tree ){

-            

-                tree = typeof tree !== 'undefined' ? tree : [];

-                parent = typeof parent !== 'undefined' ? parent : { menuId: null };

-                var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; });

-                

-                if( !_.isEmpty( children )  ){

-                  if( parent.menuId === null ){

-                    tree = children;

-                  }else{

-                    parent['children'] = children

-                  }

-                  _.each( children, function( child ){ unflatten( array, child ) } );

-                }

-            

-                return tree;

-            }

-            

-            userProfileService.getFunctionalMenuStaticInfo()

-            .then(res=> {

-            	// $log.debug('HeaderCtrl::getFunctionalMenuStaticInfo: getting Functional Menu Static Info init');

-            	if(res==null || res.firstName==null || res.firstName=='' || res.lastName==null || res.lastName=='' ){

-            		// $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: failed getting userinfo from shared context.. ');

-            		$log.info('HeaderCtrl: failed to get all required data, trying user profile');

-            		userProfileService.getUserProfile()

-                    .then(profile=> {

-                    	// $log.debug('HeaderCtrl:: getting userinfo from session success');

-                        this.firstName = profile.firstName;

-                        this.lastName = profile.lastName;                     

-                        // $log.debug('HeaderCtrl::getFunctionalMenuStaticInfo: user has the following roles: ' + profile.roles);

-                    }).catch(err=> {

-                        $log.error('Header Controller:: getUserProfile() failed: ' + err);

-                    });

-            	} else {

-            		// $log.debug('HeaderCtrl: fetched Functional Menu Static Info successfully',res);

-            		this.firstName = res.firstName;

-            		this.lastName = res.lastName;           	   	  	  

-            	}

-

-            	menusService.GetFunctionalMenuForUser()

-            	.then(jsonHeaderMenu=> {

-            		$scope.menuItems = unflatten( jsonHeaderMenu );

-            		$scope.megaMenuDataObject = $scope.menuItems;

-            	}).catch(err=> {

-            		$log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err);

-            	});      

-            	

-            }).catch(err=> {

-            	$log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err);

-            });

-            

-          //store audit log

-            $scope.auditLog = function(app,type) {

-            	var comment = 'type: '+type+ ',title: '+app.text+",url: "+app.url;

-        		auditLogService.storeAudit(app.appid,'functional',comment);

-        	};

-

-            $scope.loadFavorites = function () {

-                $scope.hideMenus = false;

-                // $log.debug('HeaderCtrl::loadFavorites: loadFavorites has happened.');

-                if ($scope.favoritesMenuItems == '') {

-                    generateFavoriteItems();

-                    // $log.debug('HeaderCtrl::loadFavorites: loadFavorites is calling generateFavoriteItems()');

-                } else {

-                    // $log.debug('HeaderCtrl::loadFavorites: loadFavorites is NOT calling generateFavoriteItems()');

-                }

-            }

-

-            $scope.goToUrl = (item) =>  {

-               //  $log.error('HeaderCtrl::goToUrl has started',item);

-                let url = item.url;

-                let restrictedApp = item.restrictedApp;

-                if (!url) {

-                    $log.warn('HeaderCtrl::goToUrl: No url found for this application, doing nothing..');

-                    return;

-                }

-                if (restrictedApp) {

-                    $window.open(url, '_blank');

-                } else {

-                	if(item.url=="getAccess" || item.url=="contactUs"){

-                	    // if (url = window.location.href)

-                		$state.go("root."+url);

-                	} else {

-                    	var tabContent = { id: new Date(), title: item.text, url: item.url,appId:item.appid };

-                    	$cookies.putObject('addTab', tabContent );

-                    }

-                    // $log.debug('HeaderCtrl::goToUrl: url = ', url);

-                }

-                $scope.hideMenus = true;

-            }

-            

-            

-            

-            $scope.submenuLevelAction = function(index, column) {

-                if ($scope.favoritesMenuItems == '') {

-                    generateFavoriteItems();

-                    // $log.debug('HeaderCtrl::submenuLevelAction: submenuLevelAction is calling generateFavoriteItems()');

-                } else {

-                    // $log.debug('submenuLevelAction is NOT calling generateFavoriteItems()');

-                }

-                // $log.debug('item hovered: ' + index + '; column = ' + column);

-                // if (column == 2) {  // 2 is Design

-                //     // This is an admitted hack. See aw3218 for reasons why

-                //     $log.debug('submenuLevelAction column == 2');

-                //     $scope.favoritesWindow = false;

-                //     $scope.showFavorites = false;

-                //     $scope.emptyFavorites = false;

-                // }

-                if (index=='Favorites' && $scope.favoriteItemsCount != 0) {

-                    // $log.debug('HeaderCtrl::submenuLevelAction: Showing Favorites window');

-                    // generateFavoriteItems();

-                    $scope.favoritesWindow = true;

-                    $scope.showFavorites = true;

-                    $scope.emptyFavorites = false;

-                }

-                if (index=='Favorites' && $scope.favoriteItemsCount == 0) {

-                    // $log.debug('HeaderCtrl::submenuLevelAction: Hiding Favorites window in favor of No Favorites Window');

-                    // generateFavoriteItems();

-                    $scope.favoritesWindow = true;

-                    $scope.showFavorites = false;

-                    $scope.emptyFavorites = true;

-                }

-                if (index!='Favorites' ) {

-                    $scope.favoritesWindow = false;

-                    $scope.showFavorites = false;

-                    $scope.emptyFavorites = false;

-                }

-

-            };

-            

-            $scope.hideFavoritesWindow = function() {

-                $scope.showFavorites = false;

-                $scope.emptyFavorites = false;

-                // $scope.thirdFourthMenus = true;

-            }

-            

-            $scope.isUrlFavorite = function (menuId) {

-                // $log.debug('array objects in menu favorites = ' + $scope.favoriteItemsCount + '; menuId=' + menuId);

-                var jsonMenu =  JSON.stringify($scope.favoritesMenuItems);

-                var isMenuFavorite =  jsonMenu.indexOf('menuId\":' + menuId);

-                // $log.debug('jsonMenu.indexOf(menuId:' + jsonMenu.indexOf('menuId\":'+menuId));

-                // $log.debug('isMenuFavorite= ' + isMenuFavorite);

-                if (isMenuFavorite==-1) {

-                    return false;

-                } else {

-                    return true;

-                }

-

-            }

-            

-            let generateFavoriteItems  = () => {

-                menusService.getFavoriteItems()

-                    .then(favorites=> {

-                        // $log.debug('HeaderCtrl.getFavoriteItems:: ' + JSON.stringify(favorites));

-                        $scope.favoritesMenuItems = favorites;

-                        $scope.favoriteItemsCount = Object.keys(favorites).length;

-                        // $log.info('HeaderCtrl.getFavoriteItems:: number of favorite menus: ' + $scope.favoriteItemsCount);

-                    }).catch(err=> {

-                        $log.error('HeaderCtrl.getFavoriteItems:: Error retrieving Favorites menus: ' + err);

-                });

-            }

-

-           $scope.setAsFavoriteItem =  function(event, menuId){

-               var jsonMenuID = angular.toJson({'menuId': + menuId });

-               // $log.debug('HeaderCtrl::setFavoriteItems: ' + jsonMenuID  + " - " +  event.target.id);

-

-               menusService.setFavoriteItem(jsonMenuID)

-               .then(() => {

-                   // var elementId = '#'+ event.currentTarget.id;

-                   angular.element('#' + event.target.id).css('color', '#fbb313');

-                   generateFavoriteItems();

-               }).catch(err=> {

-                   $log.error('HeaderCtrl::setFavoriteItems:: API setFavoriteItem error: ' + err);

-               });

-           };

-

-            $scope.removeAsFavoriteItem =  function(event, menuId){

-                // $log.debug('-----------------------------removeAsFavoriteItem: ' + menuId + " - " +  event.target.id);

-                menusService.removeFavoriteItem(menuId)

-                .then(() => {

-                    angular.element('#' + event.target.id).css('color', '#666666');

-                    generateFavoriteItems();

-                }).catch(err=> {

-                    $log.error('HeaderCtrl::removeAsFavoriteItem: API removeFavoriteItem error: ' + err);

-                });

-            };

-

-            $scope.goToPortal = (headerText, url) => {

-                if (!url) {

-                    $log.warn('HeaderCtrl::goToPortal: No url found for this application, doing nothing..');

-                    return;

-                }

-                if (!ECOMP_URL_REGEX.test(url)) {

-                    url = 'http://' + url;

-                }

-

-                if(headerText.startsWith("vUSP")) {

-                	window.open(url, '_blank');//, '_self'

-                }

-                else {

-                	var tabContent = { id: new Date(), title: headerText, url: url };

-                	$cookies.putObject('addTab', tabContent );

-                }

-            };

-

-        }

-    }

-    class LoginSnippetCtrl {

-        constructor($log, $scope, $cookies, $timeout, userProfileService, sessionService) {

-            $scope.firstName="";

-            $scope.lastName="";

-            $scope.displayUserAppRoles=false; 

-            $scope.allAppsLogout = function(){

-            	

-            	var cookieTabs = $cookies.getObject('visInVisCookieTabs');

-             	if(cookieTabs!=null){

-             		for(var t in cookieTabs){

-             		

-             			var url = cookieTabs[t].content;

-             			if(url != "") {

-             				sessionService.logout(url);

-             	      	}

-             		}

-             	}

-             	// wait for individual applications to log out before the portal logout

-             	$timeout(function() {

-             		window.location = "logout.htm";

-             	}, 2000);

-            }

-            

-            

-            try {

-            	userProfileService.getFunctionalMenuStaticInfo()

-                .then(res=> {

-              	  // $log.info('HeaderCtrl::LoginSnippetCtrl: Login information: ' + JSON.stringify(res));

-              	  $scope.firstName = res.firstName;

-              	  $scope.lastName = res.lastName;

-              	  $scope.loginSnippetEmail = res.email;

-              	  $scope.loginSnippetUserid = res.userId;

-              	  $scope.lastLogin = res.last_login;

-                }).catch(err=> {

-              	  $log.error('HeaderCtrl::LoginSnippetCtrl: failed in getFunctionalMenuStaticInfo: ' + err);

-                });

-            } catch (err) {

-                $log.error('HeaderCtrl::LoginSnippetCtrl caught exception: ' + err);

-            }

-            

-            $scope.getUserApplicationRoles= function(){

-          	  $scope.userapproles = [];

-          	  if($scope.displayUserAppRoles)

-	         		$scope.displayUserAppRoles = false;

-	         		 else

-	         			$scope.displayUserAppRoles = true;

-          	  

-        	        userProfileService.getUserAppRoles($scope.loginSnippetUserid)

-        	          .then(res=>{

-        			

-       		 for(var i=0;i<res.length;i++){              			

-	            	var userapprole ={

-	            		App:res[i].appName,

-	            		Roles:res[i].roleNames,	

-	            	};

-	            	

-	            	$scope.userapproles.push(userapprole); 

-       		}

-       		 

-        	});

-        	

-          }

-        }        

-    }

-    class NotificationCtrl{

-    	constructor($log, $scope, $cookies, $timeout, sessionService,notificationService,$interval,ngDialog) {

-    		 $scope.notifications=[];   

-    		 var intervalPromise = null;

-             $scope.notificationCount= notificationService.notificationCount;

-             

-             $scope.getNotification = function(){            	 

-            	 notificationService.getNotification()

-                 .then(res=> {

-                	notificationService.decrementRefreshCount();

-                	var count = notificationService.getRefreshCount();

-                 	if (res==null || res.data==null || res.data.message!='success') {

-                 		$log.error('NotificationCtrl::updateNotifications: failed to get notifications');

-                 		if (intervalPromise != null)

-                 			$interval.cancel(intervalPromise);

-                 	} else if(count<=0){

-                 		if (intervalPromise != null)

-                 			$interval.cancel(intervalPromise);

-                 	} else {

-                 		$scope.notifications = [];

-                 		notificationService.setNotificationCount(res.data.response.length);

-                 		for(var i=0;i<res.data.response.length;i++){

-                 			var data = res.data.response[i];                			

-			            	var notification ={

-			            		id:data.notificationId,

-			            		title:data.msgHeader,

-			            		message:data.msgDescription,

-			            		source:data.msgSource,

-			            		time:data.createdDate,

-			            		priority:data.priority

-			            	};

-			            	$scope.notifications.push(notification);       

-			             }  

-                 	}   	

-                 }).catch(err=> {

-                 	$log.error('NotificationCtrl::getNotification: caught exception: ' + err);

-                 	if (intervalPromise != null)

-                 		$interval.cancel(intervalPromise);

-                 });      

-             }

-             $scope.getNotification();

-             function updateNotifications() {

-            	 $scope.getNotification();

-             }

-             $scope.start = function(rate) {

- 				// stops any running interval to avoid two intervals running at the same time

- 				$scope.stop(); 	

- 				// store the interval promise

- 				intervalPromise = $interval(updateNotifications, rate);

- 			 };

-

- 			 $scope.stop = function() {

- 				$interval.cancel(intervalPromise);

- 			 };

- 			 

-   			

-  			 $scope.showDetailedJsonMessage=function (selectedAdminNotification) {

-   				if (selectedAdminNotification.source!=='EP'){

-				 var messageObject=JSON.parse(selectedAdminNotification.message);

-				 var html="";

-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.source+'</p>';

-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.title+'</p>';

-				 for(var field in  messageObject){

-					 if(field=='eventDate'||field=='lastModifiedDate'){

-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';

-						  

-					 }else{

-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';

-					 

-					 }

-				 }

- 			

- 		     var modalInstance = ngDialog.open({

- 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',

- 				    controller: 'userNotificationCtrl',

- 				    resolve: {

- 				    	message: function () {

- 				    		var message = {

- 				    			   title:    '',

- 		                       		text:    html

- 		                       		

- 		                           	};

- 				          return message;

- 				        },

- 				     

- 				      }

- 				  }); 

- 			

-   				} 

- 			 };

- 			 

- 			notificationService.getNotificationRate().then(res=> {

-            	if (res == null || res.response == null) {

-            		$log.error('NotificationCtrl: failed to notification update rate or duration, check system.properties file.');

-            	} else {

-            		var rate = parseInt(res.response.updateRate);

-					var duration = parseInt(res.response.updateDuration);

-					notificationService.setMaxRefreshCount(parseInt(duration/rate)+1);

-					notificationService.setRefreshCount(notificationService.maxCount);

-           			if (rate != NaN && duration != NaN) {

-						$scope.updateRate=rate;

-						$scope.start($scope.updateRate);

-           			}            			

-            	}

-            }).catch(err=> {

-            	$log.error('NotificationCtrl: getNotificationRate() failed: ' + err);

-            });

-             

-             $scope.deleteNotification = function(index){

-            	 if ($scope.notifications[index].id == null || $scope.notifications[index].id == '') {

-             		$log.error('NotificationCtrl: failed to delete Notification.');

-             		return;

-            	 }

-            	 notificationService.setNotificationRead($scope.notifications[index].id);

-            	 $scope.notifications.splice(index,1);

-            	 notificationService.setNotificationCount($scope.notifications.length);     	 

-             }

-    	}

-    }

-    NotificationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout', 'sessionService','notificationService','$interval','ngDialog'];

-    LoginSnippetCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout','userProfileService', 'sessionService'];

-    HeaderCtrl.$inject = ['$log', '$window', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state','auditLogService','notificationService'];

-    angular.module('ecompApp').controller('HeaderCtrl', HeaderCtrl);

-    angular.module('ecompApp').controller('loginSnippetCtrl', LoginSnippetCtrl);

-    angular.module('ecompApp').controller('notificationCtrl', NotificationCtrl);

-

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+	class HeaderCtrl {
+        constructor($log, $window, userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state,auditLogService,notificationService,recommendationService,ngDialog) {
+            this.firstName = '';
+            this.lastName = '';
+            this.$log = $log;
+            this.menusService = menusService;
+            this.$scope = $scope;
+            this.favoritesMenuItems = '';
+            $scope.favoriteItemsCount = 0;
+            $scope.favoritesMenuItems = '';
+            $scope.showFavorites = false;
+            $scope.emptyFavorites = false;
+            $scope.favoritesWindow = false;
+            $scope.notificationCount=0;
+            $scope.recommendationCount=0;
+            $scope.showNotification = true;
+
+            $scope.hideMenus = false;
+
+            $scope.menuItems = [];
+            $scope.activeClickSubMenu = {
+                x: ''
+            }; 
+            $scope.activeClickMenu = {
+                x: ''
+            };
+            $scope.megaMenuDataObject =[];
+            $scope.notificationCount= notificationService.notificationCount;
+            $scope.recommendationCount= recommendationService.recommendationCount;
+            this.isLoading = true;
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+            
+            var unflatten = function( array, parent, tree ){
+            
+                tree = typeof tree !== 'undefined' ? tree : [];
+                parent = typeof parent !== 'undefined' ? parent : { menuId: null };
+                var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; });
+                
+                if( !_.isEmpty( children )  ){
+                  if( parent.menuId === null ){
+                    tree = children;
+                  }else{
+                    parent['children'] = children
+                  }
+                  _.each( children, function( child ){ unflatten( array, child ) } );
+                }
+            
+                return tree;
+            }
+            
+            userProfileService.getFunctionalMenuStaticInfo()
+            .then(res=> {
+            	// $log.debug('HeaderCtrl::getFunctionalMenuStaticInfo: getting Functional Menu Static Info init');
+            	if(res==null || res.firstName==null || res.firstName=='' || res.lastName==null || res.lastName=='' ){
+            		// $log.info('HeaderCtrl::getFunctionalMenuStaticInfo: failed getting userinfo from shared context.. ');
+            		$log.info('HeaderCtrl: failed to get all required data, trying user profile');
+            		userProfileService.getUserProfile()
+                    .then(profile=> {
+                    	// $log.debug('HeaderCtrl:: getting userinfo from session success');
+                        this.firstName = profile.firstName;
+                        this.lastName = profile.lastName;                     
+                        // $log.debug('HeaderCtrl::getFunctionalMenuStaticInfo: user has the following roles: ' + profile.roles);
+                    }).catch(err=> {
+                        $log.error('Header Controller:: getUserProfile() failed: ' + err);
+                    });
+            	} else {
+            		// $log.debug('HeaderCtrl: fetched Functional Menu Static Info successfully',res);
+            		this.firstName = res.firstName;
+            		this.lastName = res.lastName;           	   	  	  
+            	}
+
+            	menusService.GetFunctionalMenuForUser()
+            	.then(jsonHeaderMenu=> {
+            		$scope.menuItems = unflatten( jsonHeaderMenu );
+            		$scope.megaMenuDataObject = $scope.menuItems;
+            	}).catch(err=> {
+            		$log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err);
+            	});      
+            	
+            }).catch(err=> {
+            	$log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err);
+            });
+            
+          //store audit log
+            $scope.auditLog = function(app,type) {
+            	var comment = 'type: '+type+ ',title: '+app.text+",url: "+app.url;
+        		auditLogService.storeAudit(app.appid,'functional',comment);
+        	};
+
+            $scope.loadFavorites = function () {
+                $scope.hideMenus = false;
+                // $log.debug('HeaderCtrl::loadFavorites: loadFavorites has happened.');
+                if ($scope.favoritesMenuItems == '') {
+                    generateFavoriteItems();
+                    // $log.debug('HeaderCtrl::loadFavorites: loadFavorites is calling generateFavoriteItems()');
+                } else {
+                    // $log.debug('HeaderCtrl::loadFavorites: loadFavorites is NOT calling generateFavoriteItems()');
+                }
+            }
+
+            $scope.goToUrl = (item) =>  {
+               //  $log.error('HeaderCtrl::goToUrl has started',item);
+                let url = item.url;
+                let restrictedApp = item.restrictedApp;
+                if (!url) {
+                    $log.warn('HeaderCtrl::goToUrl: No url found for this application, doing nothing..');
+                    return;
+                }
+                if (restrictedApp) {
+                    $window.open(url, '_blank');
+                } else {
+                	if(item.url=="getAccess" || item.url=="contactUs"){
+                	    // if (url = window.location.href)
+                		$state.go("root."+url);
+                	} else {
+                    	var tabContent = { id: new Date(), title: item.text, url: item.url,appId:item.appid };
+                    	$cookies.putObject('addTab', tabContent );
+                    }
+                    // $log.debug('HeaderCtrl::goToUrl: url = ', url);
+                }
+                $scope.hideMenus = true;
+            }
+            
+            
+            
+            $scope.submenuLevelAction = function(index, column) {
+                if ($scope.favoritesMenuItems == '') {
+                    generateFavoriteItems();
+                    // $log.debug('HeaderCtrl::submenuLevelAction: submenuLevelAction is calling generateFavoriteItems()');
+                } else {
+                    // $log.debug('submenuLevelAction is NOT calling generateFavoriteItems()');
+                }
+                // $log.debug('item hovered: ' + index + '; column = ' + column);
+                // if (column == 2) {  // 2 is Design
+                //     // This is an admitted hack. See aw3218 for reasons why
+                //     $log.debug('submenuLevelAction column == 2');
+                //     $scope.favoritesWindow = false;
+                //     $scope.showFavorites = false;
+                //     $scope.emptyFavorites = false;
+                // }
+                if (index=='Favorites' && $scope.favoriteItemsCount != 0) {
+                    // $log.debug('HeaderCtrl::submenuLevelAction: Showing Favorites window');
+                    // generateFavoriteItems();
+                    $scope.favoritesWindow = true;
+                    $scope.showFavorites = true;
+                    $scope.emptyFavorites = false;
+                }
+                if (index=='Favorites' && $scope.favoriteItemsCount == 0) {
+                    // $log.debug('HeaderCtrl::submenuLevelAction: Hiding Favorites window in favor of No Favorites Window');
+                    // generateFavoriteItems();
+                    $scope.favoritesWindow = true;
+                    $scope.showFavorites = false;
+                    $scope.emptyFavorites = true;
+                }
+                if (index!='Favorites' ) {
+                    $scope.favoritesWindow = false;
+                    $scope.showFavorites = false;
+                    $scope.emptyFavorites = false;
+                }
+
+            };
+            
+            $scope.hideFavoritesWindow = function() {
+                $scope.showFavorites = false;
+                $scope.emptyFavorites = false;
+                // $scope.thirdFourthMenus = true;
+            }
+            
+            $scope.isUrlFavorite = function (menuId) {
+                // $log.debug('array objects in menu favorites = ' + $scope.favoriteItemsCount + '; menuId=' + menuId);
+                var jsonMenu =  JSON.stringify($scope.favoritesMenuItems);
+                var isMenuFavorite =  jsonMenu.indexOf('menuId\":' + menuId);
+                // $log.debug('jsonMenu.indexOf(menuId:' + jsonMenu.indexOf('menuId\":'+menuId));
+                // $log.debug('isMenuFavorite= ' + isMenuFavorite);
+                if (isMenuFavorite==-1) {
+                    return false;
+                } else {
+                    return true;
+                }
+
+            }
+            
+            /*Getting Ecomp portal Title*/
+
+            let getEcompPortalTitle  = () => {
+            	menusService.getEcompPortalTitle()
+            	.then(title=> {
+            		$scope.ecompTitle = title.response;
+            	}).catch(err=> {
+            		$log.error('HeaderCtrl.getEcompPortalTitle:: Error retrieving ECMOP portal title: ' + err);
+            	});
+            }
+            getEcompPortalTitle();
+            
+            let generateFavoriteItems  = () => {
+                menusService.getFavoriteItems()
+                    .then(favorites=> {
+                        // $log.debug('HeaderCtrl.getFavoriteItems:: ' + JSON.stringify(favorites));
+                        $scope.favoritesMenuItems = favorites;
+                        $scope.favoriteItemsCount = Object.keys(favorites).length;
+                        // $log.info('HeaderCtrl.getFavoriteItems:: number of favorite menus: ' + $scope.favoriteItemsCount);
+                    }).catch(err=> {
+                        $log.error('HeaderCtrl.getFavoriteItems:: Error retrieving Favorites menus: ' + err);
+                });
+            }
+
+           $scope.setAsFavoriteItem =  function(event, menuId){
+               var jsonMenuID = angular.toJson({'menuId': + menuId });
+               // $log.debug('HeaderCtrl::setFavoriteItems: ' + jsonMenuID  + " - " +  event.target.id);
+
+               menusService.setFavoriteItem(jsonMenuID)
+               .then(() => {
+                   // var elementId = '#'+ event.currentTarget.id;
+                   angular.element('#' + event.target.id).css('color', '#fbb313');
+                   generateFavoriteItems();
+               }).catch(err=> {
+                   $log.error('HeaderCtrl::setFavoriteItems:: API setFavoriteItem error: ' + err);
+               });
+           };
+
+            $scope.removeAsFavoriteItem =  function(event, menuId){
+                // $log.debug('-----------------------------removeAsFavoriteItem: ' + menuId + " - " +  event.target.id);
+                menusService.removeFavoriteItem(menuId)
+                .then(() => {
+                    angular.element('#' + event.target.id).css('color', '#666666');
+                    generateFavoriteItems();
+                }).catch(err=> {
+                    $log.error('HeaderCtrl::removeAsFavoriteItem: API removeFavoriteItem error: ' + err);
+                });
+            };
+
+            $scope.goToPortal = (headerText, url) => {
+                if (!url) {
+                    $log.warn('HeaderCtrl::goToPortal: No url found for this application, doing nothing..');
+                    return;
+                }
+                if (!ECOMP_URL_REGEX.test(url)) {
+                    url = 'http://' + url;
+                }
+
+                if(headerText.startsWith("vUSP")) {
+                	window.open(url, '_blank');//, '_self'
+                }
+                else {
+                	var tabContent = { id: new Date(), title: headerText, url: url };
+                	$cookies.putObject('addTab', tabContent );
+                }
+            };
+            
+            $scope.editProfile = () => {
+                let data = null;
+               
+                ngDialog.open({
+                    templateUrl: 'app/views/header/profile-edit-dialogs/profile-edit.modal.html',
+                    controller: 'EditProfileModalCtrl',
+                    controllerAs: 'profileDetail',
+                    data: ''
+                }).closePromise.then(needUpdate => {
+                    if(needUpdate.value === true){
+                        // $log.debug('AdminsCtrl:openAddNewAdminModal:: updating table data...');
+                        updateTableData();
+                    }
+                });
+            };
+        }
+    }
+    class LoginSnippetCtrl {
+        constructor($log, $scope, $cookies, $timeout, userProfileService, sessionService) {
+            $scope.firstName="";
+            $scope.lastName="";
+            $scope.displayUserAppRoles=false; 
+            $scope.allAppsLogout = function(){
+            	
+            	var cookieTabs = $cookies.getObject('visInVisCookieTabs');
+             	if(cookieTabs!=null){
+             		for(var t in cookieTabs){
+             		
+             			var url = cookieTabs[t].content;
+             			if(url != "") {
+             				sessionService.logout(url);
+             	      	}
+             		}
+             	}
+             	// wait for individual applications to log out before the portal logout
+             	$timeout(function() {
+             		window.location = "logout.htm";
+             	}, 2000);
+            }
+            
+            
+            try {
+            	userProfileService.getFunctionalMenuStaticInfo()
+                .then(res=> {
+              	  // $log.info('HeaderCtrl::LoginSnippetCtrl: Login information: ' + JSON.stringify(res));
+              	  $scope.firstName = res.firstName;
+              	  $scope.lastName = res.lastName;
+              	  $scope.loginSnippetEmail = res.email;
+              	  $scope.loginSnippetUserid = res.userId;
+              	  $scope.lastLogin = res.last_login;
+                }).catch(err=> {
+              	  $log.error('HeaderCtrl::LoginSnippetCtrl: failed in getFunctionalMenuStaticInfo: ' + err);
+                });
+            } catch (err) {
+                $log.error('HeaderCtrl::LoginSnippetCtrl caught exception: ' + err);
+            }
+            
+            $scope.getUserApplicationRoles= function(){
+          	  $scope.userapproles = [];
+          	  if($scope.displayUserAppRoles)
+	         		$scope.displayUserAppRoles = false;
+	         		 else
+	         			$scope.displayUserAppRoles = true;
+          	  
+        	        userProfileService.getUserAppRoles($scope.loginSnippetUserid)
+        	          .then(res=>{
+        			
+       		 for(var i=0;i<res.length;i++){              			
+	            	var userapprole ={
+	            		App:res[i].appName,
+	            		Roles:res[i].roleNames,	
+	            	};
+	            	
+	            	$scope.userapproles.push(userapprole); 
+       		}
+       		 
+        	});
+        	
+          }
+        }        
+    }
+    class NotificationCtrl{
+    	constructor($log, $scope, $cookies, $timeout, sessionService,notificationService,$interval,ngDialog) {
+    		 $scope.notifications=[];   
+    		 var intervalPromise = null;
+             $scope.notificationCount= notificationService.notificationCount;
+             
+             $scope.getNotification = function(){            	 
+            	 notificationService.getNotification()
+                 .then(res=> {
+                	notificationService.decrementRefreshCount();
+                	var count = notificationService.getRefreshCount();
+                 	if (res==null || res.data==null || res.data.message!='success') {
+                 		$log.error('NotificationCtrl::updateNotifications: failed to get notifications');
+                 		if (intervalPromise != null)
+                 			$interval.cancel(intervalPromise);
+                 	} else if(count<=0){
+                 		if (intervalPromise != null)
+                 			$interval.cancel(intervalPromise);
+                 	} else {
+                 		$scope.notifications = [];
+                 		notificationService.setNotificationCount(res.data.response.length);
+                 		for(var i=0;i<res.data.response.length;i++){
+                 			var data = res.data.response[i];                			
+			            	var notification ={
+			            		id:data.notificationId,
+			            		title:data.msgHeader,
+			            		message:data.msgDescription,
+			            		source:data.msgSource,
+			            		time:data.createdDate,
+			            		priority:data.priority
+			            	};
+			            	$scope.notifications.push(notification);       
+			             }  
+                 	}   	
+                 }).catch(err=> {
+                 	$log.error('NotificationCtrl::getNotification: caught exception: ' + err);
+                 	if (intervalPromise != null)
+                 		$interval.cancel(intervalPromise);
+                 });      
+             }
+             $scope.getNotification();
+             function updateNotifications() {
+            	 $scope.getNotification();
+             }
+             $scope.start = function(rate) {
+ 				// stops any running interval to avoid two intervals running at the same time
+ 				$scope.stop(); 	
+ 				// store the interval promise
+ 				intervalPromise = $interval(updateNotifications, rate);
+ 			 };
+
+ 			 $scope.stop = function() {
+ 				$interval.cancel(intervalPromise);
+ 			 };
+ 			 
+ 			 $scope.showDetailedJsonMessage=function (selectedAdminNotification) {
+        		 notificationService.getMessageRecipients(selectedAdminNotification.id).then(res =>{
+                     $scope.messageRecipients = res;
+				 var messageObject=JSON.parse(selectedAdminNotification.message);
+				 var html="";
+				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.source+'</p>';
+				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.title+'</p>';
+				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
+
+				 for(var field in  messageObject){
+					 if(field=='eventDate'||field=='lastModifiedDate'){
+						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
+						  
+					 }else{
+					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
+					 
+					 }
+				 }
+
+				 var modalInstance = ngDialog.open({
+ 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
+ 				    controller: 'userNotificationCtrl',
+ 				    resolve: {
+ 				    	message: function () {
+ 				    		var message = {
+ 				    			   title:    '',
+ 		                       		text:    html
+ 		                       		
+ 		                           	};
+ 				          return message;
+ 				        },
+ 				     
+ 				      }
+ 				  }); 
+ 		     
+        	 }).catch(err => {
+                 $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
+                 $scope.isLoadingTable = false;
+             });
+        	 };
+ 			 
+ 			notificationService.getNotificationRate().then(res=> {
+            	if (res == null || res.response == null) {
+            		$log.error('NotificationCtrl: failed to notification update rate or duration, check system.properties file.');
+            	} else {
+            		var rate = parseInt(res.response.updateRate);
+					var duration = parseInt(res.response.updateDuration);
+					notificationService.setMaxRefreshCount(parseInt(duration/rate)+1);
+					notificationService.setRefreshCount(notificationService.maxCount);
+           			if (rate != NaN && duration != NaN) {
+						$scope.updateRate=rate;
+						$scope.start($scope.updateRate);
+           			}            			
+            	}
+            }).catch(err=> {
+            	$log.error('NotificationCtrl: getNotificationRate() failed: ' + err);
+            });
+             
+             $scope.deleteNotification = function(index){
+            	 if ($scope.notifications[index].id == null || $scope.notifications[index].id == '') {
+             		$log.error('NotificationCtrl: failed to delete Notification.');
+             		return;
+            	 }
+            	 notificationService.setNotificationRead($scope.notifications[index].id);
+            	 $scope.notifications.splice(index,1);
+            	 notificationService.setNotificationCount($scope.notifications.length);     	 
+             }
+    	}
+    }
+    
+    class RecommendationCtrl{
+    	constructor($log, $scope, $cookies, $timeout, sessionService,recommendationService,notificationService,$interval,ngDialog) {
+    		 $scope.recommendations=[];   
+    		 var intervalPromise = null;
+             $scope.recommendationCount=  recommendationService.recommendationCount;
+             console.log("$",$);
+            $scope.getRecommendations = function(){ 
+            	$("#recommendation-bulb").removeClass('icon-misc-bulbL').addClass('icon-misc-bulb')
+            	 recommendationService.getRecommendations()
+            	 
+                 .then(res=> {
+                	 	$("#recommendation-bulb").removeClass('icon-misc-bulb').addClass('icon-misc-bulbL')
+                	recommendationService.decrementRefreshCount();
+                	var count = recommendationService.getRefreshCount();
+                 	if ( res.data==null) {
+                 		$log.error('RecommendationCtrl::update Recommendation: failed to get recommendation');
+                 		if (intervalPromise != null)
+                 			$interval.cancel(intervalPromise);
+                 	} else if(count>=0){
+                 		if (intervalPromise != null)
+                 			$interval.cancel(intervalPromise);
+                 	} else {
+                 		$scope.recommendations = [];
+                 		recommendationService.setRecommendationCount(res.data.recommendations.length);
+                 		for(var i=0;i<res.data.recommendations.length;i++){
+                 			var data = res.data.recommendations[i];                			
+			            	var recommendations ={
+			            				            			
+			            			recommendation:data
+			            	};
+			            	$scope.recommendations.push(recommendations);       
+			             }  
+                 	}   	
+                 }).catch(err=> {
+                 	$log.error('RecommendationCtrl::gatRecommendations: caught exception: ' + err);
+                 	if (intervalPromise != null)
+                 		$interval.cancel(intervalPromise);
+                 });      
+             }
+             $scope.getRecommendations();
+             
+             function updateRecommendations() {
+            	 $scope.getRecommendations();
+             }
+             
+             notificationService.getNotificationRate().then(res=> {
+              	if (res == null || res.response == null) {
+              		$log.error('NotificationCtrl: failed to notification update rate or duration, check system.properties file.');
+              	} else {
+              		var rate = parseInt(res.response.updateRate);
+  					var duration = parseInt(res.response.updateDuration);
+  					notificationService.setMaxRefreshCount(parseInt(duration/rate)+1);
+  					notificationService.setRefreshCount(notificationService.maxCount);
+             			if (rate != NaN && duration != NaN) {
+  						$scope.updateRate=rate;
+  			            setInterval(function(){$scope.getRecommendations();},rate);
+
+             			}            			
+              	}
+              }).catch(err=> {
+              	$log.error('NotificationCtrl: getNotificationRate() failed: ' + err);
+              });             
+             $scope.deleteRecommendation = function(index){
+            	 if ($scope.recommendations[index] == null || $scope.recommendations[index] == '') {
+             		$log.error('RecommendationCtrl: failed to delete Recommendation.');
+             		return;
+            	 }
+            	 $scope.recommendations.splice(index,1);
+            	 recommendationService.setRecommendationCount($scope.recommendations.length);     	 
+             }
+    	}
+    }
+    NotificationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout', 'sessionService','notificationService','$interval','ngDialog'];
+    RecommendationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout', 'sessionService','recommendationService','notificationService','$interval','ngDialog'];
+    LoginSnippetCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout','userProfileService', 'sessionService'];
+    HeaderCtrl.$inject = ['$log', '$window', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state','auditLogService','notificationService','recommendationService','ngDialog'];
+    angular.module('ecompApp').controller('HeaderCtrl', HeaderCtrl);
+    angular.module('ecompApp').controller('loginSnippetCtrl', LoginSnippetCtrl);
+    angular.module('ecompApp').controller('notificationCtrl', NotificationCtrl);
+    angular.module('ecompApp').controller('recommendationCtrl', RecommendationCtrl);
+
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.controller.spec.js b/ecomp-portal-FE-common/client/app/views/header/header.controller.spec.js
index 3841a2b3..32cc3a1f 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/header/header.controller.spec.js
@@ -1,19 +1,19 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.less b/ecomp-portal-FE-common/client/app/views/header/header.less
index ec57812c..b553cebb 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.less
+++ b/ecomp-portal-FE-common/client/app/views/header/header.less
@@ -197,6 +197,21 @@
     width: 16px;
   }
   
+  .recommendations-count
+  {
+    .border-radius(50%);
+    background:#db3434;
+    color: @colorWhite;
+    font-size: 10px;
+    padding-top: 2px;
+    height: 16px;   
+    position: absolute;
+    right: -7px;
+    text-align: center;
+    top: -8px;
+    width: 16px;
+  }
+  
   .notification-header{
     border-bottom: 1px solid #b4b4b4;
     padding: 10px 40px 0px 40px;
@@ -291,7 +306,7 @@
       	.normal
       	{
         	.border-radius(50%);
-        	background: @colorPeterRiver;
+        	background: steelblue;
         	content: '';
         	height: 8px;
         	width: 8px;
@@ -324,7 +339,7 @@
       
       .button-dismiss
       {
-        color: @colorSilver;
+        color: black;
         font-size: 15px;
         
         &:hover,
@@ -399,7 +414,7 @@
 }
 
 .b2b-header-tabs .header__items{
-	width:90%;
+	width:98%;
 }
 
 .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary{
@@ -407,6 +422,12 @@
 	
 }
 
+.b2b-header-tabs .header__item.profile{
+	margin-right:70px;
+	float:right;
+	position: static;
+}
+
 .third-level-menu{
 column-count: 4;
     line-height: 12px;
@@ -426,10 +447,11 @@ column-count: 4;
 
 .b2b-header-tabs .third-level-menu li a {
     color: #333;
-    display: inline-grid;
+    display: inline-flex;
     padding: 7px 15px;
-    max-width: 228px;
     font-family:"Omnes-ECOMP-W02", Arial;
+    margin-top:5px;
+	margin-bottom:5px;
 }
 
 .b2b-header-tabs .third-level-menu li{
@@ -491,6 +513,24 @@ column-count: 4;
 	width:100%;
 }
 
-.display-userAppRoles-label span{
+.display-userAppRoles-label{
 	font-family:"Omnes-ECOMP-W02", Arial;
-}
\ No newline at end of file
+	white-space:nowrap;
+}
+
+.profile-detail-extension{
+	display:inline-block;
+}
+
+.logout-btn-div{
+	display:inline-block;
+	padding-top: 8px;
+	
+}
+
+.onap-title-logo{
+    position: relative;
+    top: 7px;
+	width: 126.8px;
+    height: 28px;
+}
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
index 65a34ed1..3d1d3305 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
@@ -1,266 +1,330 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div style="position:fixed;width: 100%;top: 0px;left: 0;background-color: #222;z-index:9999">

-    <header class="b2b-header-tabs" b2b-header-responsive>

-        <ul class="header__items" role="navigation">

-<!-- Menu Icon and name -->

-            <li class="header__item icon__item" onclick="window.location = 'applicationsHome'">

-                <span id="logo-image"  class="icon-primary-att-globe"></span>

-                <span id="portal-title" class="portal-title" >OpenECOMP Portal</span>           	

-            </li>

-<!-- First Level menu -->

-            <li b2b-header-menu 

-            	id="megaMenu-{{item.text.split(' ').join('-')}}" 

-            	class="header__item b2b-headermenu" 

-            	ng-repeat="item in megaMenuDataObject" 

-            	ng-mousedown="loadFavorites(item.text)"  

-            	role="presentation">

-            	

-                <a href="javascript:void(0);" 

-                id="parentmenu-tabs"

-                class="menu__item" 

-                role="menuitem">{{item.text}}</a>

-                

-                <div class="header-secondary-wrapper" ng-if="item.active_yn=='Y'">

-                    <ul class="header-secondary" role="menu">

-<!-- Second Level menu -->

-                        <li class="header-subitem" 

-                        id="subItem-{{subItem.text.split(' ').join('-')}}"

-                        b2b-header-submenu 

-                        ng-repeat="i in item.children | orderBy : 'column'" 

-                        ng-mousemove="submenuLevelAction(i.text,i.column)" 

-                        role="presentation">

-           <!-- Favorites -->

-                        	<div ng-if="i.text=='Favorites'" >                       		

-                        		<a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>                

-                        		<i id="favorite-star" data-size="large"  class="icon-star favorites-icon-active"></i>      		

-                        		<div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()" >

-                        			<div class="header-tertiary-wrapper" id="header-favorites">

-			                            <ul class="header-tertiary" role="menu">

-			                                <li role="presentation">

-			                                	<div                                                   

-                                                     ng-repeat="subItem in favoritesMenuItems"

-                                                     ng-show="showFavorites"

-                                                     ng-hide="hideMenus"

-                                                     id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">

-                                                    <div class="fav-links">

-                                                        <i id="favorite-selector-favorites-list"

-                                                           class="icon-star favorites-icon-active"                                                       

-                                                           data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"

-                                                           ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">

-                                                        </i>

-                                                        <a id="favorites-list" aria-label="{{subItem.text}}" ng-click="goToUrl(subItem)">{{subItem.text}}</a>

-                                                    </div>

-                                                </div>	

-                                                	                                	

-			                                    <div id="favorites-empty"  class="favorites-window-empty"   ng-show="emptyFavorites">

-			                                        <p id="p-no-favs-icon" class="no-fav-icon">

-			                                        	<span class="icon-star" ></span>

-			                                        </p>

-			                                        <p id="p-no-favs" class="largeText">No Favorites</p>

-			                                        <p id="p-no-favs-desc"  class="normal">Add your favorite items for quick access.</p>

-				                                </div>

-			                                </li>

-			                            </ul>

-		                            </div>

-                        		</div>             	

-                        	</div>

-            <!-- Support or Help -->

-                        	<div ng-if="item.text=='Support' || item.text=='Help'" id="second-level-menus-help">                      	

-                        		<a href="javascript:void(0);" ng-click="goToUrl(i);auditLog(i,'Support')" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>         	

-                        	</div>

-       		<!-- Others -->

-                        	<div ng-if="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')" >

-                        		<a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>

-	                            <div class="header-tertiary-wrapper" >

-		                            <ul class="third-level-menu"  role="menu" id="third-level-menus">

-<!-- Third Level menu -->	                 

-										

-			                                <li b2b-header-tertiarymenu ng-repeat="link in i.children | orderBy : 'column'" role="presentation" >

-			                                    <i id="level3-star-inactive-{{link.menuId}}" ng-cloak

-                                                    class="icon-star favorites-icon-inactive"  data-size="large"

-                                                    data-ng-click="setAsFavoriteItem($event, link.menuId)"

-                                                    ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)==false">

-                                                </i>

-                                                <i id="level3-star-active-{{link.menuId}}" ng-cloak

-                                                   ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)"

-                                                   class="icon-star favorites-icon-active ng-cloak"  data-size="large"

-                                                   data-ng-click="removeAsFavoriteItem($event, link.menuId)">

-                                                </i>                                              

-                                                

-			                                    <a class="third-level-title"

-                                                          aria-label="{{link.text | elipsis: 50}}"

-                                                          ng-click="goToUrl(link);auditLog(link,'application')">{{link.text| elipsis: 50}}</a>

-<!-- Fourth Level menu -->

-			                                    <div b2b-tertiary-link ng-repeat="title in link.children"  >

-			                                    	<i id="level4-star-inactive-{{title.menuId}}" ng-cloak

-		                                               class="icon-star favorites-icon-inactive"

-		                                               data-ng-click="setAsFavoriteItem($event, title.menuId)"

-		                                               ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)==false">

-		                                            </i>

-		                                            <i id="level4-star-active-{{title.menuId}}" ng-cloak

-		                                               class="icon-star favorites-icon-active"

-		                                               data-ng-click="removeAsFavoriteItem($event, title.menuId)"

-		                                               ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)">

-		                                            </i>

-			                                    	<a href="javascript:void(0);" class="header-tertiaryitem"  ng-class="{'disabled': title.disabled}" role="menuitem" ng-click="goToUrl(title);auditLog(title,'functional')">{{title.text | elipsis: 50}}</a>                                 	

-			                                    </div>

-			                                </li>	

-			                                

-			                                   

-		                              

-		                                                 

-		                            </ul>

-	                            </div>

-                        	</div>

-           

-                        </li>                        

-                    </ul>

-                </div>

-            </li>

-<!-- Right side of the Menu - User Icon and Notification flag -->

-            <div class="login-section">

-     <!-- User Icon -->

-            <li class="header__item profile" aria-haspopup="true">

-				<b2b-flyout>

-					<div b2b-flyout-toggler >

-						<div class="icon-people-oneperson" id="header-user-icon" tabindex="0" b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" role="button"></div>

-		          		<div id="login-snippet-text" class="login-snippet-text">{{header.isGuest ? 'Guest' : header.firstName}}</div>                  

-					</div>					

-		            <b2b-flyout-content horizontal-placement="center" vertical-placement="below">

-						<div  ng-controller="loginSnippetCtrl" >

-							<div id="reg-header-snippet">

-								<div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">

-									<ul class="reg-Details-table">

-										<li>

-					                        <div class="reg-userName-table">

-					                            <div id="reg-userName-table-row">

-					                                <div id="reg-userName-table-cell">

-					                                    <h3 >

-					                                    {{firstName}} {{lastName}}&nbsp;</h3>

-					                                    <span>&nbsp;</span>

-					                                </div>

-					                            </div>

-					                        </div>

-					                    </li>

-										<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn" style=font-weight:bold>Email<span class="visuallyhidden">:

-					                    </span></span></div></li>

-										<li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">

-					                        {{loginSnippetEmail}}</span></div></li>

-					                    <li>&nbsp;</li>

-										<li><div class="reg-userRole-label"><span class="reg-userRole-label-spn" style=font-weight:bold>

-					                        User Id<span class="visuallyhidden">:</span></span></div></li>

-										<li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">

-					                        {{loginSnippetUserid}}<span class="visuallyhidden"></span></span></div></li>

-					                    <li>&nbsp;</li>

-										<li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn" style=font-weight:bold>

-					                        Last login<span class="visuallyhidden">:</span></span></div></li>

-										<li><div class="reg-userLastLogin-value"><span class="reg-userLastLogin-value-spn">

-					                        {{lastLogin}}<span class="visuallyhidden"></span></span></div></li>

-						                <li>&nbsp;</li>

-					 					<li>

-					               			<div class="display-userAppRoles-label">

-					                			<a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-controls-add-maximize" ><span>Applications and Roles</span></a>

-					                 		</div>

-					                        

-					                        <div class="display-userAppRoles-label" ng-show="displayUserAppRoles" style="height:200px; overflow-y:auto;">

-					                             <div ng-repeat="ua in userapproles track by  $index">

-				                                    <div class="reg-userApp-value">

-				                                    	<span class="reg-userApp-value-spn" style=font-weight:bold>{{ua.App}}<span class="visuallyhidden">:</span></span>

-													</div>							           

-					                                <div ng-repeat="role in ua.Roles track by  $index" class="reg-userAppRoles-value" >

-					                                	<span class="reg-userAppRoles-value-spn">{{role}}</span>

-					                                </div>

-					                        	</div>

-					                     	</div>

-					                	</li>

-									</ul>

-					                <div id="reg-logout-div" style="padding-top: 8px">

-					                      <button href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="btn btn-alt btn-small">

-											Log out

-										</button>

-					                </div>

-						        </div>

-							</div>

-						</div>		

-		            </b2b-flyout-content>

-	       		</b2b-flyout>

-            </li> 

-    <!-- Notification flag -->

-            <li class="header__item notification" aria-haspopup="true" class="notification-li">

-            	<b2b-flyout>

-            		<div b2b-flyout-toggler class="notification-div">

-	            		<div class="notifications-count" ng-hide="notificationCount.count==0" ng-bind="notificationCount.count"></div>      	

-						<div  class="icon-content-flag megamenu-notification-overrides" class="b2b-flyout-icon" tabindex="0" b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" role="button"></div>

-		            </div>

-		            <b2b-flyout-content horizontal-placement="center" vertical-placement="below">

-						<div class="notification-content" ng-controller="notificationCtrl" >

-							<div class="ng-scope">

-								<div id="notification" class="notificationBox ">

-									<div align ="right">

-					 					 <a ui-sref="root.notificationHistory" style="font-size: 14px"> View All Recent Notifications </a>

-									</div>

-									<div class="notification-header">

-										<div style="float:left;">

-											<p class="notification-heading">Notifications</p>

-										</div>

-										<div style="clear:both;"></div>

-									</div>

-									<div ng-show="notifications.length==0">

-										<div class="notification-main">

-											<div style="height:113px;">

-												<div align="center" class="icon-information notification-info-icon"></div>

-											</div>

-										<div>

-										<p class="notification-text">No New Notifications.</p>

-									</div>

-									

-								</div>

-							</div>

-							<div class="notification-main" ng-show="notifications.length>0">

-								<ul class="notifications-list">

-									<li class="item" data-id="5" ng-repeat="item in notifications">

-										<div class="icon">

-											<span class="important" ng-show="item.priority==2"/>

-											<span class="normal" ng-show="item.priority==1"/>

-										</div>

-										<div class="details">

-											<span class="title" ng-bind="item.title"></span>

-											<span class="message-body" ng-bind="item.message"></span>

-											<!-- <span class="date" ng-bind="item.time" ></span> -->

-											<mydate>{{item.time | date:'MM/dd/yyyy hh:mm:ss a Z'}}</mydate>			

-										</div>

-										<button type="button" ng-click="deleteNotification($index)" class="button-default button-dismiss js-dismiss">x</button>

-									</li>

-								</ul>

-							</div>

-							<div class="notification-footer">

-								<div class="notification-links">

-									<div style="clear:both;"></div>

-								</div>

-							</div>

-						</div>					

-		            </b2b-flyout-content>

-		        </b2b-flyout>

-            </li>

-            </div>

-        </ul>

-	</header>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div style="position:fixed;width: 100%;top: 0px;left: 0;background-color: #222;z-index:9999">
+    <header class="b2b-header-tabs" b2b-header-responsive>
+        <ul class="header__items" role="navigation">
+<!-- Menu Icon and name -->
+            <li class="header__item icon__item" onclick="window.location = 'applicationsHome'">
+                <div ng-include class="profile-detail-extension" src="'app/views/header/header-logo.html'"></div>             
+                <span id="portal-title" class="portal-title" ng-bind="ecompTitle"></span>           	
+            </li>
+<!-- First Level menu -->
+            <li b2b-header-menu 
+            	id="megaMenu-{{item.text.split(' ').join('-')}}" 
+            	class="header__item b2b-headermenu" 
+            	ng-repeat="item in megaMenuDataObject" 
+            	ng-mousedown="loadFavorites(item.text)"  
+            	role="presentation">
+            	
+                <a href="javascript:void(0);" 
+                id="parentmenu-{{item.text.split(' ').join('-')}}-tabs"
+                class="menu__item" 
+                role="menuitem">{{item.text}}</a>
+                
+                <div class="header-secondary-wrapper" ng-if="item.active_yn=='Y'" ng-hide="hideMenus">
+                    <ul class="header-secondary" role="menu">
+<!-- Second Level menu -->
+                        <li class="header-subitem" 
+                        id="subItem-{{subItem.text.split(' ').join('-')}}"
+                        b2b-header-submenu 
+                        ng-repeat="i in item.children | orderBy : 'column'" 
+                        ng-mousemove="submenuLevelAction(i.text,i.column)" 
+                        role="presentation">
+           <!-- Favorites -->
+                        	<div ng-if="i.text=='Favorites'" >                       		
+                        		<a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>                
+                        		<i id="favorite-star" data-size="large"  class="icon-star favorites-icon-active"></i>      		
+                        		<div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()" >
+                        			<div class="header-tertiary-wrapper" id="header-favorites">
+			                            <ul class="header-tertiary" role="menu">
+			                                <li role="presentation">
+			                                	<div                                                   
+                                                     ng-repeat="subItem in favoritesMenuItems"
+                                                     ng-show="showFavorites"
+                                                     
+                                                     id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">
+                                                    <div class="fav-links">
+                                                        <i id="favorite-selector-favorites-list"
+                                                           class="icon-star favorites-icon-active"                                                       
+                                                           data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
+                                                           ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">
+                                                        </i>
+                                                        <a id="favorites-list" aria-label="{{subItem.text}}" ng-click="goToUrl(subItem)">{{subItem.text}}</a>
+                                                    </div>
+                                                </div>	
+                                                	                                	
+			                                    <div id="favorites-empty"  class="favorites-window-empty"   ng-show="emptyFavorites">
+			                                        <p id="p-no-favs-icon" class="no-fav-icon">
+			                                        	<span class="icon-star" ></span>
+			                                        </p>
+			                                        <p id="p-no-favs" class="largeText">No Favorites</p>
+			                                        <p id="p-no-favs-desc"  class="normal">Add your favorite items for quick access.</p>
+				                                </div>
+			                                </li>
+			                            </ul>
+		                            </div>
+                        		</div>             	
+                        	</div>
+            <!-- Support or Help -->
+                        	<div ng-if="item.text=='Support' || item.text=='Help'" id="second-level-menus-help">                      	
+                        		<a id="second-level-menus-{{i.text.split(' ').join('-')}}-help" href="javascript:void(0);" ng-click="goToUrl(i);auditLog(i,'Support')" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>         	
+                        	</div>
+       		<!-- Others -->
+                        	<div ng-if="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')" >
+                        		<a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text| elipsis: 50}}</a>
+	                            <div class="header-tertiary-wrapper" >
+		                            <ul class="third-level-menu"  role="menu" id="third-level-menus">
+<!-- Third Level menu -->	                 
+										
+			                                <li b2b-header-tertiarymenu ng-repeat="link in i.children | orderBy : 'column'" role="presentation" >
+			                                    <i id="level3-star-inactive-{{link.menuId}}" ng-cloak
+                                                    class="icon-star favorites-icon-inactive"  data-size="large"
+                                                    data-ng-click="setAsFavoriteItem($event, link.menuId)"
+                                                    ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)==false">
+                                                </i>
+                                                <i id="level3-star-active-{{link.menuId}}" ng-cloak
+                                                   ng-if="link.url.length > 1 && isUrlFavorite(link.menuId)"
+                                                   class="icon-star favorites-icon-active ng-cloak"  data-size="large"
+                                                   data-ng-click="removeAsFavoriteItem($event, link.menuId)">
+                                                </i>                                              
+                                                
+			                                    <a class="third-level-title"
+                                                          aria-label="{{link.text | elipsis: 50}}"
+                                                          ng-click="goToUrl(link);auditLog(link,'application')">{{link.text| elipsis: 50}}</a>
+<!-- Fourth Level menu -->
+			                                    <div b2b-tertiary-link ng-repeat="title in link.children"  >
+			                                    	<i id="level4-star-inactive-{{title.menuId}}" ng-cloak
+		                                               class="icon-star favorites-icon-inactive"
+		                                               data-ng-click="setAsFavoriteItem($event, title.menuId)"
+		                                               ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)==false">
+		                                            </i>
+		                                            <i id="level4-star-active-{{title.menuId}}" ng-cloak
+		                                               class="icon-star favorites-icon-active"
+		                                               data-ng-click="removeAsFavoriteItem($event, title.menuId)"
+		                                               ng-if="title.url.length > 1 && isUrlFavorite(title.menuId)">
+		                                            </i>
+			                                    	<a href="javascript:void(0);" class="header-tertiaryitem"  ng-class="{'disabled': title.disabled}" role="menuitem" ng-click="goToUrl(title);auditLog(title,'functional')">{{title.text | elipsis: 50}}</a>                                 	
+			                                    </div>
+			                                </li>	
+			                                
+			                                   
+		                              
+		                                                 
+		                            </ul>
+	                            </div>
+                        	</div>
+           
+                        </li>                        
+                    </ul>
+                </div>
+            </li>
+<!-- Right side of the Menu - User Icon and Notification flag -->
+            <div class="login-section">
+     <!-- User Icon -->
+            <li class="header__item profile" aria-haspopup="true">
+				<b2b-flyout>
+					<div b2b-flyout-toggler >
+						<div class="icon-people-oneperson" id="header-user-icon" tabindex="0" b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" role="button"></div>
+		          		<div id="login-snippet-text" class="login-snippet-text">{{header.isGuest ? 'Guest' : header.firstName}}</div>                  
+					</div>					
+		            <b2b-flyout-content horizontal-placement="center" vertical-placement="below">
+						<div  ng-controller="loginSnippetCtrl" >
+							<div id="reg-header-snippet">
+								<div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
+									<ul class="reg-Details-table">
+										<li>
+					                        <div class="reg-userName-table">
+					                            <div id="reg-userName-table-row">
+					                                <div id="reg-userName-table-cell">
+					                                    <h3 >
+					                                    {{firstName}} {{lastName}}&nbsp;</h3>
+					                                    <span>&nbsp;</span>
+					                                </div>
+					                            </div>
+					                        </div>
+					                    </li>
+										<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn" style=font-weight:bold>Email<span class="visuallyhidden">:
+					                    </span></span></div></li>
+										<li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">
+					                        {{loginSnippetEmail}}</span></div></li>
+					                    <li>&nbsp;</li>
+										<li><div class="reg-userRole-label"><span class="reg-userRole-label-spn" style=font-weight:bold>
+					                        User Id<span class="visuallyhidden">:</span></span></div></li>
+										<li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">
+					                        {{loginSnippetUserid}}<span class="visuallyhidden"></span></span></div></li>
+					                    <li>&nbsp;</li>
+										<li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn" style=font-weight:bold>
+					                        Last login<span class="visuallyhidden">:</span></span></div></li>
+										<li><div class="reg-userLastLogin-value"><span class="reg-userLastLogin-value-spn">
+					                        {{lastLogin}}<span class="visuallyhidden"></span></span></div></li>
+						                <li>&nbsp;</li>
+					 					<li>
+					               			<div class="display-userAppRoles-label">
+					                			<a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-primary-accordion-plus" ng-class="{true: 'icon-primary-accordion-plus', false: 'icon-primary-accordion-minus'}[ !displayUserAppRoles]" >Applications and Roles</a>
+					                 		</div>
+					                 		<br>
+					                        <div class="display-userAppRoles-label" ng-show="displayUserAppRoles" style="height:200px; overflow-y:auto;">
+					                             <div ng-repeat="ua in userapproles track by  $index">
+				                                    <div class="reg-userApp-value">
+				                                    	<span class="reg-userApp-value-spn" style=font-weight:bold>{{ua.App}}<span class="visuallyhidden">:</span></span>
+													</div>							           
+					                                <div ng-repeat="role in ua.Roles track by  $index" class="reg-userAppRoles-value" >
+					                                	<span class="reg-userAppRoles-value-spn">{{role}}</span>
+					                                </div>
+					                                <br>
+					                        	</div>
+					                     	</div>
+					                	</li>
+									</ul>
+					                <div ng-include class="profile-detail-extension" src="'app/views/header/header-extension.tpl.html'"></div>				                							
+					                <div id="reg-logout-div" class="logout-btn-div">
+					                     <button href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="btn btn-alt btn-small">
+											Log out
+										</button>
+					                </div>
+						        </div>
+							</div>
+						</div>		
+		            </b2b-flyout-content>
+	       		</b2b-flyout>
+            </li> 
+    <!-- Notification flag -->
+            <li class="header__item notification" aria-haspopup="true" class="notification-li">
+            	<b2b-flyout>
+            		<div b2b-flyout-toggler class="notification-div">
+	            		<div class="notifications-count" ng-hide="notificationCount.count==0" ng-bind="notificationCount.count"></div>      	
+						<div id="megamenu-notification-button" class="icon-content-flag megamenu-notification-overrides" class="b2b-flyout-icon" tabindex="0" b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" role="button"></div>
+		            </div>
+		            <b2b-flyout-content horizontal-placement="center" vertical-placement="below">
+						<div class="notification-content" ng-controller="notificationCtrl" >
+							<div class="ng-scope">
+								<div id="notification" class="notificationBox ">
+									<div align ="right">
+					 					 <a id="notification-history-link" ui-sref="root.notificationHistory" style="font-size: 14px"> View All Recent Notifications </a>
+									</div>
+									<div class="notification-header">
+										<div style="float:left;">
+											<p class="notification-heading">Notifications</p>
+										</div>
+										<div style="clear:both;"></div>
+									</div>
+									<div ng-show="notifications.length==0">
+										<div class="notification-main">
+											<div style="height:113px;">
+												<div align="center" class="icon-information notification-info-icon"></div>
+											</div>
+										<div>
+										<p class="notification-text">No New Notifications.</p>
+									</div>
+									
+								</div>
+							</div>
+							<div class="notification-main" ng-show="notifications.length>0">
+								<ul class="notifications-list">
+									<li class="item" data-id="5" ng-repeat="item in notifications">
+										<div class="icon">
+											<span class="important" ng-show="item.priority==2"/>
+											<span class="normal" ng-show="item.priority==1"/>
+										</div>
+										<div class="details" ng-click="showDetailedJsonMessage(item)">
+												<span class="title" ng-bind="item.source"></span> <span
+													class="title" ng-bind="item.title"></span> <span
+													class="message-body" ng-if="item.source==='EP'"
+													ng-bind="item.message"></span> <span class="message-body"
+													ng-if="item.source!=='EP'"
+													ng-bind="item.message| elipsis: 27"> </span>
+												<!-- <span class="date" ng-bind="item.time" ></span> -->
+												<mydate>{{item.time | date:'MM/dd/yyyy hh:mm:ss a Z'}}</mydate>
+
+											</div>
+										<button type="button" ng-click="deleteNotification($index)" class="button-default button-dismiss js-dismiss">x</button>
+									</li>
+								</ul>
+							</div>
+							<div class="notification-footer">
+								<div class="notification-links">
+									<div style="clear:both;"></div>
+								</div>
+							</div>
+						</div>					
+		            </b2b-flyout-content>
+		        </b2b-flyout>
+            </li>
+            
+                             <!-- Recommendation Bulb -->
+            
+               <li class="header__item recommendation" aria-haspopup="true" class="recommendation-li">
+            	<b2b-flyout>
+            		<div b2b-flyout-toggler class="recommendation-div">
+	            		<div class="recommendations-count" ng-hide="recommendationCount.count==0" ng-bind="recommendationCount.count"></div>      	
+<div  class="icon-misc-bulbL megamenu-recommendation-overrides" id="recommendation-bulb" tabindex="0" b2b-accessibility-click="13,32" aria-label="recommendation" aria-haspopup="true" aria-expanded="{{flyoutOpened}}" style="font-size: 22px;"role="button"></div>		            </div>
+		            <b2b-flyout-content horizontal-placement="center" vertical-placement="below">
+						<div class="recommendation-content" ng-controller="recommendationCtrl" >
+							<div class="ng-scope">
+								<div id="recommendation" class="notificationBox ">
+									<!-- <div align ="right">
+					 					 <a ui-sref="root.recommendationsHistory" style="font-size: 14px"> View All Recent Notifications </a>
+									</div> -->
+									<div class="notification-header">
+										<div style="float:left;">
+											<p class="notification-heading">Recommendations</p>
+										</div>
+										<div style="clear:both;"></div>
+									</div>
+									<div ng-show="recommendations.length==0">
+										<div class="notification-main">
+											<div style="height:113px;">
+												<div align="center" class="icon-information notification-info-icon"></div>
+											</div>
+										<div>
+										<p class="notification-text">No New Recommendations</p>
+									</div>
+									
+								</div>
+							</div>
+							<div class="notification-main" ng-show="recommendations.length>0">
+								<ul class="notifications-list">
+									<li class="item" data-id="5" ng-repeat="item in recommendations">
+									<div class="icon">
+											<span class="normal" ng-show="item.recommendation"/>
+										</div>
+										<div class="details">
+																			
+										<span class="message-body" ng-bind="item.recommendation"></span>
+											
+											
+										</div>
+ 										<button type="button" ng-click="deleteRecommendation($index)" class="button-default button-dismiss js-dismiss">x</button>
+ 									</li>
+								</ul>
+							</div>
+							<div class="notification-footer">
+								<div class="notification-links">
+									<div style="clear:both;"></div>
+								</div>
+							</div>
+						</div>					
+		            </b2b-flyout-content>
+		        </b2b-flyout>
+            </li>
+            </div>
+        </ul>
+	</header>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
index a8b20739..40b6fb30 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
@@ -1,205 +1,211 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="microservice-add-details-model">

-	<div id="microservice-add-details-title" class="title">microservice Details</div>

-

-	<div id="microservices" class="microservice-scrolling-table">

-		<div class="microservice-properties-main"

-			scroll-top="microserviceAddDetails.scrollApi">

-			<form id="microservices-details-form" name="serviceForm" novalidate

-				autocomplete="off">

-				<div class="item required">

-					<div class="item-label">microservice Name</div>

-					<input id="microservice-details-input-name" class="table-search-field"

-						type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"

-						ng-model="microserviceAddDetails.service.name"

-						ng-change="microserviceAddDetails.updateServiceName()"

-						ng-disabled="microserviceAddDetails.isEditMode" required />

-

-					<div class="error-container"

-						ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">

-						<div ng-messages="serviceForm.name.$error" class="error-container">

-							<small id="microservices-details-input-name-required"

-								class="err-message" ng-message="required">Microservice

-								Name is required</small> <small

-								id="microservices-details-input-name-pattern"

-								class="err-message" ng-message="pattern">Microservice

-								Name must be letters, numbers, or underscore</small>

-						</div>

-					</div>

-

-					<div class="error-container"

-						ng-show="microserviceAddDetails.isEditMode == false && microserviceAddDetails.dupliateName == true">

-						<small id="microservices-details-input-name-dupliated"

-							class="err-message">Name not available - choose different

-							name </small>

-					</div>

-				</div>

-

-				<div class="item required">

-					<div class="item-label">microservice Description</div>

-					<textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"

-						name="desc" ng-model="microserviceAddDetails.service.desc"

-						ng-change="microserviceAddDetails.updateDesc()"></textarea>

-					<div class="error-container"

-						ng-show="(microserviceAddDetails.emptyServiceDesc 

-					|| (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">

-						<small id="microservices-details-input-desc-required"

-							class="err-message">Microservice Description is required</small>

-					</div>

-				</div>

-

-

-

-				<div class="item"

-					ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">

-					<div class="item-label">Client Widgets</div>

-					<div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>

-				</div>

-

-				<div class="item required">

-					<div class="item-label">Application Name</div>

-					<div class="service-select">					

-						<div class="table-dropdown">

-							<select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">

-				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>

-				            </select>

-						</div>

-					</div>

-

-					<div class="error-container"

-						ng-show="(microserviceAddDetails.emptyServiceApp 

-					|| (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">

-						<small id="microservices-details-input-url-required"

-							class="err-message">Please select microservice

-							Application</small>

-					</div>

-				</div>

-

-				<div class="item required">

-					<div class="item-label">microservice Endpoint URL</div>

-					<input id="microservice-details-input-endpoint-url"

-						class="table-search-field" ng-model="microserviceAddDetails.service.url"

-						ng-change="microserviceAddDetails.updateURL()" type="text"

-						name="url" maxlength="200" />

-

-					<div class="error-container"

-						ng-show="(microserviceAddDetails.emptyServiceURL 

-					|| (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">

-						<small id="microservices-details-input-url-required"

-							class="err-message">Microservice Endpoint URL is required</small>

-					</div>

-				</div>

-

-				<div class="item required">

-					<div class="item-label">Security Type</div>

-					<div class="service-select">					

-						<div class="table-dropdown">

-							<select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">

-				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>				            	

-				            </select>

-						</div>

-					</div>				

-				</div>

-

-				<div class="item"

-					ng-show="microserviceAddDetails.service.security.id == 1">

-					<div class="item-label">Username</div>

-					<input id="microservice-details-input-username" class="table-search-field"

-						type="text" name="username" maxlength="100"

-						ng-model="microserviceAddDetails.service.username" />

-				</div>

-

-				<div class="item"

-					ng-show="microserviceAddDetails.service.security.id == 1">

-					<div class="item-label">Password</div>

-					<input id="microservice-details-input-password" class="table-search-field"

-						type="password" name="password" maxlength="100"

-						ng-model="microserviceAddDetails.service.password" />

-				</div>

-

-

-				<div class="item" ng-show="microserviceAddDetails.isEditMode">

-					<div class="left-test-item">

-						<div class="item-label">Test Microservice</div>

-					</div>

-					<div class="right-test-item">

-						<div id="microservice-details-test-button" class="test-button"

-							ng-click="microserviceAddDetails.testServiceURL()">Test</div>

-					</div>

-				</div>

-

-				<div class="item" ng-show="microserviceAddDetails.isEditMode">

-					<div class="item-label">JSON output</div>

-					<textarea id="microservice-details-input-json" class="json-field"

-						name="json"></textarea>

-				</div>

-

-				<div class="add-para-item">

-					<div class="item-label add-label-left">Add User Parameter</div>

-					<div class="icon-primary-accordion-plus"

-						ng-click="microserviceAddDetails.addParameter()"></div>

-				</div>

-				<div class="item">

-					<div class="para-label-item-left"

-						ng-show="microserviceAddDetails.service.parameterList.length > 0">

-						Parameter Key</div>

-					<div class="para-label-item-right"

-						ng-show="microserviceAddDetails.service.parameterList.length > 0">

-						Parameter Default Value</div>

-

-					<div id="microservice-details-user-paramters"

-						ng-repeat="parameter in microserviceAddDetails.service.parameterList">

-

-						<div class="para-item-left">

-							<input id="microservice-details-input-user-parameter-key"

-								class="table-search-field" type="text" name="param-key" maxlength="200"

-								ng-model="parameter.para_key" />

-						</div>

-						<div class="para-item-middle">

-							<input id="microservice-details-input-user-parameter-value"

-								class="table-search-field" type="text" name="param-value"

-								maxlength="200" ng-model="parameter.para_value" />

-						</div>

-

-						<div class="icon-primary-accordion-minus para-item-right"

-							ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>

-					</div>

-

-					<div class="microservice-property">

-						<input id="microservices-checkbox-app-is-enabled" type="checkbox"

-							class="checkbox-field"

-							ng-model="microserviceAddDetails.service.active" />

-						<div class="property-label checkbox-label">Active</div>

-					</div>

-					

-				</div>

-					

-				<div id="microservice-scroll-end"></div>

-				<div class="dialog-control">

-					<button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>				

-					<button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="microserviceAddDetails.closeThisDialog()">Close</button>	

-				</div>

-			</form>

-		</div>

-

-

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="microservice-add-details-model">
+	<div id="microservice-add-details-title" class="title">Microservice Details</div>
+
+	<div id="microservices" class="microservice-scrolling-table">
+		<div class="microservice-properties-main"
+			scroll-top="microserviceAddDetails.scrollApi">
+			<form id="microservices-details-form" name="serviceForm" novalidate
+				autocomplete="off">
+				<div class="item required">
+					<div class="item-label">Microservice Name</div>
+					<input id="microservice-details-input-name" class="table-search-field"
+						type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
+						ng-model="microserviceAddDetails.service.name"
+						ng-change="microserviceAddDetails.updateServiceName()"
+						required />
+
+					<div class="error-container"
+						ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">
+						<div ng-messages="serviceForm.name.$error" class="error-container">
+							<small id="microservices-details-input-name-required"
+								class="err-message" ng-message="required">Microservice
+								Name is required</small> <small
+								id="microservices-details-input-name-pattern"
+								class="err-message" ng-message="pattern">Microservice
+								Name must be letters, numbers, or underscore</small>
+						</div>
+					</div>
+
+					<div class="error-container"
+						ng-show="microserviceAddDetails.dupliateName == true">
+						<small id="microservices-details-input-name-dupliated"
+							class="err-message">Name not available - choose different
+							name </small>
+					</div>
+				</div>
+
+				<div class="item required">
+					<div class="item-label">Microservice Description</div>
+					<textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
+						name="desc" ng-model="microserviceAddDetails.service.desc"
+						ng-change="microserviceAddDetails.updateDesc()"></textarea>
+					<div class="error-container"
+						ng-show="(microserviceAddDetails.emptyServiceDesc 
+					|| (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">
+						<small id="microservices-details-input-desc-required"
+							class="err-message">Microservice Description is required</small>
+					</div>
+				</div>
+
+
+
+				<div class="item"
+					ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">
+					<div class="item-label">Client Widgets</div>
+					<div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>
+				</div>
+
+				<div class="item required">
+					<div class="item-label">Application Name</div>
+					<div class="service-select">					
+						<div class="table-dropdown">
+							<select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">
+				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>
+				            </select>
+						</div>
+					</div>
+
+					<div class="error-container"
+						ng-show="(microserviceAddDetails.emptyServiceApp 
+					|| (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">
+						<small id="microservices-details-input-url-required"
+							class="err-message">Please select microservice
+							Application</small>
+					</div>
+				</div>
+
+				<div class="item required">
+					<div class="item-label">Microservice Endpoint URL</div>
+					<input id="microservice-details-input-endpoint-url"
+						class="table-search-field" ng-model="microserviceAddDetails.service.url"
+						ng-change="microserviceAddDetails.updateURL()" type="text"
+						name="url" maxlength="200" />
+
+					<div class="error-container"
+						ng-show="(microserviceAddDetails.emptyServiceURL 
+					|| (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">
+						<small id="microservices-details-input-url-required"
+							class="err-message">Microservice Endpoint URL is required</small>
+					</div>
+				</div>
+
+				<div class="item required">
+					<div class="item-label">Security Type</div>
+					<div class="service-select">					
+						<div class="table-dropdown">
+							<select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">
+				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>				            	
+				            </select>
+						</div>
+					</div>				
+				</div>
+
+				<div class="item"
+					ng-show="microserviceAddDetails.service.security.id == 1">
+					<div class="item-label">Username</div>
+					<input id="microservice-details-input-username" class="table-search-field"
+						type="text" name="username" maxlength="100"
+						ng-model="microserviceAddDetails.service.username" />
+				</div>
+
+				<div class="item"
+					ng-show="microserviceAddDetails.service.security.id == 1">
+					<div class="item-label">Password</div>
+					<input id="microservice-details-input-password" class="table-search-field"
+						type="password" name="password" maxlength="100"
+						ng-model="microserviceAddDetails.service.password" />
+				</div>
+
+
+				<div class="item" ng-show="microserviceAddDetails.isEditMode">
+					<div class="left-test-item">
+						<div class="item-label">Test Microservice</div>
+					</div>
+					<div class="right-test-item">
+						<div id="microservice-details-test-button" class="test-button"
+							ng-click="microserviceAddDetails.testServiceURL()">Test</div>
+					</div>
+				</div>
+
+				<div class="item" ng-show="microserviceAddDetails.isEditMode">
+					<div class="item-label">JSON output</div>
+					<textarea id="microservice-details-input-json" class="json-field"
+						name="json"></textarea>
+				</div>
+
+				<div class="add-para-item">
+					<div class="item-label add-label-left">Add User Parameter</div>
+					<div class="icon-primary-accordion-plus"
+						ng-click="microserviceAddDetails.addParameter()"></div>
+				</div>
+				<div class="item">
+					<div class="para-label-item-left"
+						ng-show="microserviceAddDetails.service.parameterList.length > 0">
+						Parameter Key</div>
+					<div class="para-label-item-right"
+						ng-show="microserviceAddDetails.service.parameterList.length > 0">
+						Parameter Default Value</div>
+
+					<div id="microservice-details-user-paramters"
+						ng-repeat="parameter in microserviceAddDetails.service.parameterList">
+
+						<div class="para-item-left">
+							<input id="microservice-details-input-user-parameter-key"
+								class="table-search-field" type="text" name="param-key" maxlength="200"
+								ng-model="parameter.para_key" />
+						</div>
+						<div class="para-item-middle">
+							<input id="microservice-details-input-user-parameter-value"
+								class="table-search-field" type="text" name="param-value"
+								maxlength="200" ng-model="parameter.para_value" />
+						</div>
+
+						<div class="icon-primary-accordion-minus para-item-right"
+							ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>
+					</div>
+
+					<div class="microservice-property">
+						<input id="microservices-checkbox-app-is-enabled" type="checkbox"
+							class="checkbox-field"
+							ng-model="microserviceAddDetails.service.active" />
+						<div class="property-label checkbox-label">Active</div>
+					</div>
+					
+				</div>
+					
+				<div id="microservice-scroll-end"></div>
+				<div class="dialog-control">
+					<button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>				
+					<button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="microserviceAddDetails.closeThisDialog()">Close</button>	
+				</div>
+			</form>
+		</div>
+
+
+	</div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
index f6123349..8ce9be64 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
@@ -1,336 +1,337 @@
-/*-

- * ================================================================================

- * 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 () {

-    class MicroserviceAddDetailsCtrl {

-        constructor($scope, $log, $interval, widgetsCatalogService, applicationsService, adminsService, microserviceService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {

-     	    

-          

-            let getAvailableApps = () => {       

-            	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

-            		this.availableApps=[];

-            		apps.unshift({

-                        id: 1,

-                        name: "ECOMP Portal"

-                    });

-            		for(var i = 0; i < apps.length; i++) {

-                        this.availableApps.push({

-                            id: apps[i].id,

-                            name: apps[i].name

-                        });

-                        if(this.isEditMode == true && this.service.appId == apps[i].id){

-                        	this.service.application = this.availableApps[i];

-                        }

-                    }

-            	}).catch(err => {

-                    $log.error(err);

-                });

-            };

-            

-            let getAvailableWidgets = () => {       

-            	microserviceService.getWidgetListByService(this.service.id).then(widgets =>{

-            		this.availableWidgets = [];

-            		for(var i = 0; i < widgets.length; i++){

-            			this.availableWidgets.push({

-            				name: widgets[i]

-            			})

-            		}

-            	}).catch(err => {

-                    $log.error(err);

-                });

-            };

-            

-            

-            let getAvailableSecurityTypes = () => {   

-            	this.availableSecurityTypes = [];

-            	this.availableSecurityTypes.push({

-            		id: 0,

-            		name: 'No Authentication'

-            	});

-            	this.availableSecurityTypes.push({

-            		id: 1,

-            		name: 'Basic Authentication'

-            	});

-            	this.availableSecurityTypes.push({

-            		id: 2,

-            		name: 'Cookie based Authentication'

-            	});

-            }

-

-            let init = () => {

-            	$log.info('MicroserviceAddDetailsCtrl::init');

-                this.service = [];

-                this.service.parameterList = [];

-                this.service.active = true;

-                this.emptyServiceName = false;

-                this.emptyServiceDesc = false;

-                this.emptyServiceURL = false;

-                this.emptyServiceApp = false;

-                this.dupliateName = false;

-                this.serviceList = $scope.ngDialogData.list;

-                

-                if ($scope.ngDialogData && $scope.ngDialogData.service) {

-                	

-                    this.isEditMode = true;

-                    this.service = _.clone($scope.ngDialogData.service);

-                    

-                    console.log(this.service);

-                    if(this.service.active == 'Y')

-                    	this.service.active = true;

-                    else

-                    	this.service.active = false;

-                } else {

-                    this.isEditMode = false;

-                } 

-                getAvailableApps();

-                getAvailableSecurityTypes();

-                //getAvailableWidgets();

-                

-                /**

-				 * 0: Basic Authentication

-				 * 

-				 * TODO: change the structure

-				 */

-                if(this.service.securityType == "No Authentication"){

-                	this.service.security = this.availableSecurityTypes[0];

-                }else if(this.service.securityType == "Basic Authentication"){

-                	this.service.security = this.availableSecurityTypes[1];

-                }else if(this.service.securityType == "Cookie based Authentication"){

-                	this.service.security = this.availableSecurityTypes[2];

-                }

-            };

-             

-            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

-            this.conflictMessages = {};

-            this.scrollApi = {};

-

-            let resetConflict = fieldName => {

-                delete this.conflictMessages[fieldName];

-                if($scope.widgetForm[fieldName]){

-                    $scope.widgetForm[fieldName].$setValidity('conflict', true);

-                }

-            };

-

-            this.addParameter = () => {

-            	document.getElementById('microservice-scroll-end').scrollIntoView();

-            	this.service.parameterList.push({}); 

-            }

-            

-            this.closeThisDialog = () => {

-            	$scope.closeThisDialog(true);

-            }

-            

-            this.removeParamItem = (parameter) => {

-            	microserviceService.getUserParameterById(parameter.id).then((res) => {

-            		if(res.length > 0){

-            			var message = res.length + " users have their own widget parameters. Are you sure you want to delete?";

-            			confirmBoxService.editItem(message).then(isConfirmed => {

-            				if(isConfirmed){

-            					microserviceService.deleteUserParameterById(parameter.id).then((res) => {

-	            					for(var i = 0; i < this.service.parameterList.length; i++){

-	            	            		if(this.service.parameterList[i].para_key == parameter.para_key

-	            	            		&& this.service.parameterList[i].para_value == parameter.para_value){

-	            	            			this.service.parameterList.splice(i, 1);

-	            	            			return;

-	            	            		}

-	            	            	}

-            					});

-            				}

-            			});

-            		}

-            		else{

-            			for(var i = 0; i < this.service.parameterList.length; i++){

-    	            		if(this.service.parameterList[i].para_key == parameter.para_key

-    	            		&& this.service.parameterList[i].para_value == parameter.para_value){

-    	            			this.service.parameterList.splice(i, 1);

-    	            			return;

-    	            		}

-    	            	}

-            		}

-            	});

-            	

-            	

-            }

-            

-            this.updateServiceName = () => {

-            	this.dupliateName = false;

-            	for(var i = 0; i < this.serviceList.length; i++){

-            		if(this.serviceList[i].name == this.service.name){

-            			this.dupliateName = true;

-            			return;

-            		}

-            	}

-            }

-            

-            this.updateDesc = () => {

-            	this.emptyServiceDesc = false;

-            }

-            

-            this.updateURL = () => {

-            	this.emptyServiceURL  = false;

-            }

-            

-            this.updateApp = () => {

-            	this.emptyServiceApp = false;

-            }

-            

-          //This is a fix for dropdown selection, due to b2b dropdown only update value field

-    		$scope.$watch('microserviceAddDetails.service.application.name', (newVal, oldVal) => {

-    			for(var i=0;i<$scope.microserviceAddDetails.availableApps.length;i++){ 			

-    				if($scope.microserviceAddDetails.availableApps[i].name==newVal){

-    					$scope.microserviceAddDetails.service.application=angular.copy($scope.microserviceAddDetails.availableApps[i]);

-    				}

-    			}

-    		});

-    		$scope.$watch('microserviceAddDetails.service.security.name', (newVal, oldVal) => {

-    			for(var i=0;i<$scope.microserviceAddDetails.availableSecurityTypes.length;i++){ 			

-    				if($scope.microserviceAddDetails.availableSecurityTypes[i].name==newVal){

-    					$scope.microserviceAddDetails.service.security=angular.copy($scope.microserviceAddDetails.availableSecurityTypes[i]);

-    				}

-    			}

-    		});

-            

-            let emptyCookies = () => {

-                userProfileService.getUserProfile()

-                .then(profile=> {

-                    $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);

-                    $scope.attuid = profile.attuid;

-                    $log.info('user has the following attuid: ' + profile.attuid);

-                    if ($cookies.getObject($scope.attuid + '_widget') != undefined && $cookies.getObject($scope.attuid + '_widget') != null) {

-                        $cookies.remove($scope.attuid + '_widget');

-                    }

-                });

-            };

-            

-            this.testServiceURL = () =>{

-            	//console.log(this.service.id);

-            	widgetsCatalogService.getServiceJSON(this.service.id).then(res => {

-            		document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(res));

-				});

-            }

-            

-            this.saveChanges = () => {     

-            	/* TODO: add form validation */

-            	

-            	var isValid = true;

-            	this.updateServiceName();

-            	

-            	if(this.service.name == ''

-                || this.service.name == undefined){

-            		this.emptyServiceName = true;

-            		isValid = false;

-            	}

-            	

-            	if(this.dupliateName == true

-            	&& this.isEditMode == false){

-            		isValid = false;

-            	}

-            		

-            	

-            	if(this.service.desc == ''

-            	|| this.service.desc == undefined){

-            		this.emptyServiceDesc = true;

-            		isValid = false;

-            	}

-            	

-            	if(this.service.url == ''

-               	|| this.service.url == undefined){

-              		this.emptyServiceURL = true;

-               		isValid = false;

-               	}

-            		

-            	if(this.service.application == undefined

-             	|| this.service.application == null){

-            		this.emptyServiceApp = true;

-            		isValid = false;

-            	}

-            	

-            	if(!isValid)

-            		return;

-            	

-            	/*

-				 * Check the parameter list, delete those parameters that don't

-				 * have key

-				 */

-            	for(var i = 0; i < this.service.parameterList.length; i++){

-            		if(this.service.parameterList[i].para_key == undefined

-            		|| this.service.parameterList[i].para_key == null

-            		|| this.service.parameterList[i].para_key == ""){

-            			this.service.parameterList.splice(i, 1);

-            			i--;

-            		}

-            	}

-      

-            	var securityType;

-            	var username;

-            	var password;

-            	if(this.service.security == undefined ||

-            	this.service.security == null)

-            		securityType = "No Authentication";

-            	else{

-            		securityType = this.service.security.name;

-            		username = this.service.username;

-            		password = this.service.password;

-            	}

-            	

-            	var active = 'N';

-            	if(this.service.active == true)

-            		active = 'Y';

-            	

-            	var newService = {

-            			name: this.service.name,

-            			desc: this.service.desc,

-            			appId: this.service.application.id,

-            			url: this.service.url,

-            			securityType: securityType,

-            			username: username,

-            			password: password,

-            			active: active,

-            			parameterList: this.service.parameterList

-            	};

-            	

-            	if(this.isEditMode){

-            		// console.log(this.service.parameterList);

-            		var message = "Are you sure you want to change '" + this.service.name + "'?"

-            		confirmBoxService.editItem(message).then(isConfirmed => {

-	            		if(isConfirmed){

-		            		microserviceService.updateService(this.service.id, newService).then(() => {

-		            			// TODO: result validation check

-		            			this.closeThisDialog(); 

-		            		});

-            			}

-            		});

-            	}else{

-            		microserviceService.createService(newService).then(() => {

-            			// TODO: result validation check

-            			$scope.closeThisDialog(true);

-            		});

-            	}

-             	

-            };

-            init();

-            $scope.$on('$stateChangeStart', e => {

-                e.preventDefault();

-            });

-        }

-    }

-    MicroserviceAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'widgetsCatalogService', 'applicationsService', 'adminsService', 'microserviceService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];

-    angular.module('ecompApp').controller('MicroserviceAddDetailsCtrl', MicroserviceAddDetailsCtrl);

-})(); 

+/*-
+ * ================================================================================
+ * 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 () {
+    class MicroserviceAddDetailsCtrl {
+        constructor($scope, $log, $interval, widgetsCatalogService, applicationsService, adminsService, microserviceService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {
+     	    
+          
+            let getAvailableApps = () => {       
+            	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+            		this.availableApps=[];
+            		apps.unshift({
+                        id: 1,
+                        name: "ECOMP Portal"
+                    });
+            		for(var i = 0; i < apps.length; i++) {
+                        this.availableApps.push({
+                            id: apps[i].id,
+                            name: apps[i].name
+                        });
+                        if(this.isEditMode == true && this.service.appId == apps[i].id){
+                        	this.service.application = this.availableApps[i];
+                        }
+                    }
+            	}).catch(err => {
+                    $log.error(err);
+                });
+            };
+            
+            let getAvailableWidgets = () => {       
+            	microserviceService.getWidgetListByService(this.service.id).then(widgets =>{
+            		this.availableWidgets = [];
+            		for(var i = 0; i < widgets.length; i++){
+            			this.availableWidgets.push({
+            				name: widgets[i]
+            			})
+            		}
+            	}).catch(err => {
+                    $log.error(err);
+                });
+            };
+            
+            
+            let getAvailableSecurityTypes = () => {   
+            	this.availableSecurityTypes = [];
+            	this.availableSecurityTypes.push({
+            		id: 0,
+            		name: 'No Authentication'
+            	});
+            	this.availableSecurityTypes.push({
+            		id: 1,
+            		name: 'Basic Authentication'
+            	});
+            	this.availableSecurityTypes.push({
+            		id: 2,
+            		name: 'Cookie based Authentication'
+            	});
+            }
+
+            let init = () => {
+            	$log.info('MicroserviceAddDetailsCtrl::init');
+                this.service = [];
+                this.availableApps=[];
+                this.service.parameterList = [];
+                this.service.active = true;
+                this.emptyServiceName = false;
+                this.emptyServiceDesc = false;
+                this.emptyServiceURL = false;
+                this.emptyServiceApp = false;
+                this.dupliateName = false;
+                this.serviceList = $scope.ngDialogData.list;
+                
+                if ($scope.ngDialogData && $scope.ngDialogData.service) {
+                	
+                    this.isEditMode = true;
+                    this.service = _.clone($scope.ngDialogData.service);
+                    
+                    this.originalName  = this.service.name;
+                    if(this.service.active == 'Y')
+                    	this.service.active = true;
+                    else
+                    	this.service.active = false;
+                } else {
+                    this.isEditMode = false;
+                } 
+                getAvailableApps();
+                getAvailableSecurityTypes();
+                //getAvailableWidgets();
+                
+                /**
+				 * 0: Basic Authentication
+				 * 
+				 * TODO: change the structure
+				 */
+                if(this.service.securityType == "No Authentication"){
+                	this.service.security = this.availableSecurityTypes[0];
+                }else if(this.service.securityType == "Basic Authentication"){
+                	this.service.security = this.availableSecurityTypes[1];
+                }else if(this.service.securityType == "Cookie based Authentication"){
+                	this.service.security = this.availableSecurityTypes[2];
+                }
+            };
+             
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+            this.conflictMessages = {};
+            this.scrollApi = {};
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                if($scope.widgetForm[fieldName]){
+                    $scope.widgetForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+
+            this.addParameter = () => {
+            	document.getElementById('microservice-scroll-end').scrollIntoView();
+            	this.service.parameterList.push({}); 
+            }
+            
+            this.closeThisDialog = () => {
+            	$scope.closeThisDialog(true);
+            }
+            
+            this.removeParamItem = (parameter) => {
+            	microserviceService.getUserParameterById(parameter.id).then((res) => {
+            		if(res.length > 0){
+            			var message = res.length + " users have their own widget parameters. Are you sure you want to delete?";
+            			confirmBoxService.editItem(message).then(isConfirmed => {
+            				if(isConfirmed){
+            					microserviceService.deleteUserParameterById(parameter.id).then((res) => {
+	            					for(var i = 0; i < this.service.parameterList.length; i++){
+	            	            		if(this.service.parameterList[i].para_key == parameter.para_key
+	            	            		&& this.service.parameterList[i].para_value == parameter.para_value){
+	            	            			this.service.parameterList.splice(i, 1);
+	            	            			return;
+	            	            		}
+	            	            	}
+            					});
+            				}
+            			});
+            		}
+            		else{
+            			for(var i = 0; i < this.service.parameterList.length; i++){
+    	            		if(this.service.parameterList[i].para_key == parameter.para_key
+    	            		&& this.service.parameterList[i].para_value == parameter.para_value){
+    	            			this.service.parameterList.splice(i, 1);
+    	            			return;
+    	            		}
+    	            	}
+            		}
+            	});
+            	
+            	
+            }
+            
+            this.updateServiceName = () => {
+            	this.dupliateName = false;
+            	for(var i = 0; i < this.serviceList.length; i++){
+            		if(this.serviceList[i].name == this.service.name){
+            			if(this.isEditMode && this.service.name == this.originalName)
+            				continue;
+            			this.dupliateName = true;
+            			return;
+            		}
+            	}
+            }
+            
+            this.updateDesc = () => {
+            	this.emptyServiceDesc = false;
+            }
+            
+            this.updateURL = () => {
+            	this.emptyServiceURL  = false;
+            }
+            
+            this.updateApp = () => {
+            	this.emptyServiceApp = false;
+            }
+            
+          //This is a fix for dropdown selection, due to b2b dropdown only update value field
+    		$scope.$watch('microserviceAddDetails.service.application.name', (newVal, oldVal) => {
+    			for(var i=0;i<$scope.microserviceAddDetails.availableApps.length;i++){ 			
+    				if($scope.microserviceAddDetails.availableApps[i].name==newVal){
+    					$scope.microserviceAddDetails.service.application=angular.copy($scope.microserviceAddDetails.availableApps[i]);
+    				}
+    			}
+    		});
+    		$scope.$watch('microserviceAddDetails.service.security.name', (newVal, oldVal) => {
+    			for(var i=0;i<$scope.microserviceAddDetails.availableSecurityTypes.length;i++){ 			
+    				if($scope.microserviceAddDetails.availableSecurityTypes[i].name==newVal){
+    					$scope.microserviceAddDetails.service.security=angular.copy($scope.microserviceAddDetails.availableSecurityTypes[i]);
+    				}
+    			}
+    		});
+            
+            let emptyCookies = () => {
+                userProfileService.getUserProfile()
+                .then(profile=> {
+                    $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);
+                    $scope.attuid = profile.attuid;
+                    $log.info('user has the following attuid: ' + profile.attuid);
+                    if ($cookies.getObject($scope.attuid + '_widget') != undefined && $cookies.getObject($scope.attuid + '_widget') != null) {
+                        $cookies.remove($scope.attuid + '_widget');
+                    }
+                });
+            };
+            
+            this.testServiceURL = () =>{
+            	widgetsCatalogService.getServiceJSON(this.service.id).then(res => {
+            		document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(res));
+				});
+            }
+            
+            this.saveChanges = () => {     
+            	/* TODO: add form validation */
+            	
+            	var isValid = true;
+            	this.updateServiceName();
+            	
+            	if(this.service.name == ''
+                || this.service.name == undefined){
+            		this.emptyServiceName = true;
+            		isValid = false;
+            	}
+            	
+            	if(this.dupliateName == true){
+            		isValid = false;
+            	}
+            		
+            	
+            	if(this.service.desc == ''
+            	|| this.service.desc == undefined){
+            		this.emptyServiceDesc = true;
+            		isValid = false;
+            	}
+            	
+            	if(this.service.url == ''
+               	|| this.service.url == undefined){
+              		this.emptyServiceURL = true;
+               		isValid = false;
+               	}
+            		
+            	if(this.service.application == undefined
+             	|| this.service.application == null){
+            		this.emptyServiceApp = true;
+            		isValid = false;
+            	}
+            	
+            	if(!isValid)
+            		return;
+            	
+            	/*
+				 * Check the parameter list, delete those parameters that don't
+				 * have key
+				 */
+            	for(var i = 0; i < this.service.parameterList.length; i++){
+            		if(this.service.parameterList[i].para_key == undefined
+            		|| this.service.parameterList[i].para_key == null
+            		|| this.service.parameterList[i].para_key == ""){
+            			this.service.parameterList.splice(i, 1);
+            			i--;
+            		}
+            	}
+      
+            	var securityType;
+            	var username;
+            	var password;
+            	if(this.service.security == undefined ||
+            	this.service.security == null)
+            		securityType = "No Authentication";
+            	else{
+            		securityType = this.service.security.name;
+            		username = this.service.username;
+            		password = this.service.password;
+            	}
+            	
+            	var active = 'N';
+            	if(this.service.active == true)
+            		active = 'Y';
+            	
+            	var newService = {
+            			name: this.service.name,
+            			desc: this.service.desc,
+            			appId: this.service.application.id,
+            			url: this.service.url,
+            			securityType: securityType,
+            			username: username,
+            			password: password,
+            			active: active,
+            			parameterList: this.service.parameterList
+            	};
+            	
+            	if(this.isEditMode){
+            		// console.log(this.service.parameterList);
+            		var message = "Are you sure you want to change '" + this.service.name + "'?"
+            		confirmBoxService.editItem(message).then(isConfirmed => {
+	            		if(isConfirmed){
+		            		microserviceService.updateService(this.service.id, newService).then(() => {
+		            			// TODO: result validation check
+		            			this.closeThisDialog(); 
+		            		});
+            			}
+            		});
+            	}else{
+            		microserviceService.createService(newService).then(() => {
+            			// TODO: result validation check
+            			$scope.closeThisDialog(true);
+            		});
+            	}
+             	
+            };
+            init();
+            $scope.$on('$stateChangeStart', e => {
+                e.preventDefault();
+            });
+        }
+    }
+    MicroserviceAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'widgetsCatalogService', 'applicationsService', 'adminsService', 'microserviceService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];
+    angular.module('ecompApp').controller('MicroserviceAddDetailsCtrl', MicroserviceAddDetailsCtrl);
+})(); 
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
index 7565b432..74b1b6ae 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
@@ -1,14 +1,14 @@
 .microservice-onboarding{
-  //.bg_portalWhite;//white for 1702
-  .bg_portalGray;  // gray for 1610
-  position: @page-main-position;
-  top: @page-main-top;
-  left: @page-main-left;
-  right: @page-main-right;
-  bottom: @page-main-bottom;
-  padding-top: @padding-top;
-  overflow-y: @page-main-overflow-y;
-  padding-left: @padding-left-side;
+   .bg_portalWhite;//white for 1702
+    //.bg_portalGray;  // gray for 1610
+    position: @page-main-position;
+    top: @page-main-top;
+    left: @page-main-left;
+    right: @page-main-right;
+    bottom: @page-main-bottom;
+    padding-top: @padding-top;
+    overflow-y: @page-main-overflow-y;
+    padding-left: @padding-left-side;
 
     .microservices-table {
   	  width: @table-width;
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
index e3b3128a..ecda542d 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
@@ -1,75 +1,75 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-main">

-	<div class="w-ecomp-main-container">

-		<div class="microservice-onboarding" id="page-content">

-			<div id="microservice-onboarding-title"

-				class="w-ecomp-main-view-title">Microservice Onboarding</div>

-			<div class="microservices-table">

-				<div class="table-control">

-	                <div class="table-control-buttons">

-						<button class="btn btn-alt btn-small"  id="microservice-onboarding-button-add" ng-click="microserviceOnboarding.openAddNewMicroserviceModal()">

-		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Microservice

-		                </button> 

-					</div>

-					<div>

-						<div class="c-ecomp-b2b-abs-table default">

-							<table b2b-table table-data="serviceList"

-								search-string="microserviceOnboarding.searchString"

-								view-per-page="microserviceOnboarding.viewPerPageIgnored"

-								current-page="microserviceOnboarding.currentPageIgnored"

-								total-page="microserviceOnboarding.totalPageIgnored">

-								<thead b2b-table-row type="header">

-									<tr>

-										<th id="microservice-catalog-th-header-name"

-											ng-repeat="header in microserviceOnboarding.serviceTableHeaders"

-											b2b-table-header key="{{header.value}}"

-											sortable="{{header.isSortable}}">{{header.name}}</th>

-										<th id="microservices-catalog-th-header-delete"

-											b2b-table-header sortable="false">Delete</th>

-									</tr>

-								</thead>

-								<tbody b2b-table-row type="body" class="table-body"

-									row-repeat="rowData in serviceList">

-

-									<tr>

-										<td b2b-table-body

-											ng-repeat="header in microserviceOnboarding.serviceTableHeaders"

-											ng-click="microserviceOnboarding.openAddNewMicroserviceModal(rowData)">

-											<div

-												id="microservices-catalog-microservice-name-{{rowData.id}}"

-												ng-bind="rowData[header.value]"></div>

-										</td>

-

-										<td b2b-table-body>

-											<div id="microservice-onboarding-div-delete-{{$index}}"

-												class="icon-misc-trash"

-												ng-click="microserviceOnboarding.deleteService(rowData)"></div>

-										</td>

-									</tr>

-								</tbody>

-							</table>

-						</div>

-					</div>

-				</div>

-			</div>

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+	<div class="w-ecomp-main-container">
+		<div class="microservice-onboarding" id="page-content">
+			<div id="microservice-onboarding-title"
+				class="w-ecomp-main-view-title">Microservice Onboarding</div>
+			<div class="microservices-table">
+				<div class="table-control">
+	                <div class="table-control-buttons">
+						<button class="btn btn-alt btn-small"  id="microservice-onboarding-button-add" ng-click="microserviceOnboarding.openAddNewMicroserviceModal()">
+		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Microservice
+		                </button> 
+					</div>
+					<div>
+						<div class="c-ecomp-b2b-abs-table default">
+							<table b2b-table table-data="serviceList"
+								search-string="microserviceOnboarding.searchString"
+								view-per-page="microserviceOnboarding.viewPerPageIgnored"
+								current-page="microserviceOnboarding.currentPageIgnored"
+								total-page="microserviceOnboarding.totalPageIgnored">
+								<thead b2b-table-row type="header">
+									<tr>
+										<th id="microservice-catalog-th-header-name"
+											ng-repeat="header in microserviceOnboarding.serviceTableHeaders"
+											b2b-table-header key="{{header.value}}"
+											sortable="{{header.isSortable}}">{{header.name}}</th>
+										<th id="microservices-catalog-th-header-delete"
+											b2b-table-header sortable="false">Delete</th>
+									</tr>
+								</thead>
+								<tbody b2b-table-row type="body" class="table-body"
+									row-repeat="rowData in serviceList">
+
+									<tr>
+										<td b2b-table-body
+											ng-repeat="header in microserviceOnboarding.serviceTableHeaders"
+											ng-click="microserviceOnboarding.openAddNewMicroserviceModal(rowData)">
+											<div
+												id="microservices-catalog-microservice-name-{{rowData.id}}"
+												ng-bind="rowData[header.value]"></div>
+										</td>
+
+										<td b2b-table-body>
+											<div id="microservice-onboarding-div-delete-{{$index}}"
+												class="icon-misc-trash"
+												ng-click="microserviceOnboarding.deleteService(rowData)"></div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js
index 609dba38..a5ea9041 100644
--- a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js
@@ -1,83 +1,91 @@
-/*-

- * ================================================================================

- * 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 () {

-

-    class notificationHistoryCtrl {

-        constructor( $scope, $log,notificationService, confirmBoxService, $modal, ngDialog, $state) {

-        	

-        	var priorityItems={"1":"Normal","2":"Important"};

-        	$scope.priorityItems=priorityItems;

-            $scope.externalNotification="External System";

-        	$scope.isLoadingTable = false;

-            $scope.searchString = '';

-            $scope.notificationHistory = [];

-            let getNotificationHistory = () => {

-            	$scope.isLoadingTable = true;

-                notificationService.getNotificationHistory().then(res => {

-                    $scope.notificationHistory = res.data;

-                    $scope.isLoadingTable = false;

-                }).catch(err => {

-                    $log.error('notificationHistoryCtlr:notifSvc.getNotifHist failed: ', err);

-                    $scope.isLoadingTable = false;

-                });

-            }

-

-            getNotificationHistory();           

-        	

-            $scope.showDetailedJsonMessage=function (selectedAdminNotification) {

-				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);

-				 var html="";

-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';

-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';

-				  for(var field in  messageObject){

-					 if(field=='eventDate'||field=='lastModifiedDate'){

-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';

-						  

-					 }else{

-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';

-					 

-					 }

-				 }

-			

-		     var modalInstance = ngDialog.open({

-				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',

-				    controller: 'userNotificationCtrl',

-				    resolve: {

-				    	message: function () {

-				    		var message = {

-				    			   title:    '',

-		                       		text:    html

-		                       		

-		                           	};

-				          return message;

-				        },

-				     

-				      }

-				  }); 

-			

-				 

-			 };

-         }

-    }

-    notificationHistoryCtrl.$inject = ['$scope', '$log', 'notificationService', 'confirmBoxService', '$modal', 'ngDialog', '$state'];

-    angular.module('ecompApp').controller('notificationHistoryCtrl', notificationHistoryCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+
+    class notificationHistoryCtrl {
+        constructor( $scope, $log,notificationService, confirmBoxService, $modal, ngDialog, $state) {
+        	
+        	var priorityItems={"1":"Normal","2":"Important"};
+        	$scope.priorityItems=priorityItems;
+            $scope.externalNotification="External System";
+        	$scope.isLoadingTable = false;
+            $scope.searchString = '';
+            $scope.notificationHistory = [];
+            let getNotificationHistory = () => {
+            	$scope.isLoadingTable = true;
+                notificationService.getNotificationHistory().then(res => {
+                    $scope.notificationHistory = res.data;
+                    $scope.isLoadingTable = false;
+                }).catch(err => {
+                    $log.error('notificationHistoryCtlr:notifSvc.getNotifHist failed: ', err);
+                    $scope.isLoadingTable = false;
+                });
+            }
+
+            getNotificationHistory();           
+        	
+            $scope.showDetailedJsonMessage=function (selectedAdminNotification) {
+       		 notificationService.getMessageRecipients(selectedAdminNotification.notificationId).then(res =>{
+                    $scope.messageRecipients = res;
+				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);
+				 var html="";
+				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';
+				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';
+				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
+
+				 for(var field in  messageObject){
+					 if(field=='eventDate'||field=='lastModifiedDate'){
+						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
+						  
+					 }else{
+					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
+					 
+					 }
+				 }
+
+		     var modalInstance = ngDialog.open({
+				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
+				    controller: 'userNotificationCtrl',
+				    resolve: {
+				    	message: function () {
+				    		var message = {
+				    			   title:    '',
+		                       		text:    html
+		                       		
+		                           	};
+				          return message;
+				        },
+				     
+				      }
+				  }); 
+		     
+       	 }).catch(err => {
+                $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
+                $scope.isLoadingTable = false;
+            });
+
+			 };
+         }
+    }
+    notificationHistoryCtrl.$inject = ['$scope', '$log', 'notificationService', 'confirmBoxService', '$modal', 'ngDialog', '$state'];
+    angular.module('ecompApp').controller('notificationHistoryCtrl', notificationHistoryCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html
index 5cd56e97..f5d0b292 100644
--- a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html
@@ -1,100 +1,100 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-user-notification-history"

-	ng-style="{bottom: tabBottom}">

-	<div class="user-notification-history" id="page-content">

-		<div id='app-title' class="w-ecomp-main-view-title">

-			<h1 class="heading-page" >Recent Notifications</h1>

-		</div>

-		<div class="notifHistTable">

-

-			<div class="table-control">

-				<div class="simulateCatGridHeaderDetails">This table shows

-					notifications published in the last 30 days.</div>

-				<div align="right">

-					<input class="table-search" type="text" id="input-search"

-						placeholder="Search in entire table" ng-model="searchString" />

-				</div>

-			</div>

-

-            <span class="ecomp-spinner" ng-show="isLoadingTable"></span>

-

-			<div id="table-main" class="b2b-table-div" ng-hide="isLoadingTable">

-				<table b2b-table id="notification-history-table"

-					table-data="notificationHistory"

-					search-string="searchString"

-					view-per-page="viewPerPagerIgnored"

-					current-page="ignoredCurrentPage"

-					total-page="totalPageIgnored">

-					<thead b2b-table-row type="header">

-						<tr>

-							<th id="th-notif-0" b2b-table-header key="msgSource"

-								sortable="true" style=" width: 10px;">Message Source</th>

-							<th id="th-notif-1" b2b-table-header key="msgHeader"

-								sortable="true">Message</th>

-							<th id="th-notif-2" b2b-table-header key="startTime"

-								sortable="true">Start Date (Local Time)</th>

-							<th id="th-notif-3" b2b-table-header key="endTime"

-								sortable="true">End Date  (Local Time)</th>

-							<th id="th-notif-4" b2b-table-header key="priority"

-								sortable="true">Priority</th>

-							<th id="th-notif-5" b2b-table-header key="loginId"

-								sortable="true">Created By</th>

-							<th id="th-notif-6" b2b-table-header key="createdDate"

-								sortable="true">Created Time</th>

-						</tr>

-					</thead>

-

-					<tbody b2b-table-row 

-						type="body"

-						class="table-body"

-						track-by="$index"

-						row-repeat="rowData in notificationHistory">

-						<tr id="row-{{$index}}">

-								<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-msgSource">{{rowData.msgSource}}</div>

-							</td>

-								<td class="td-first" b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}"  ng-click="rowData.msgSource=='EP'||showDetailedJsonMessage(rowData)">

-								<div id="{{$index}}-title" style="font-weight: bold;" ng-bind="rowData.msgHeader"></div>

-								<div id="{{$index}}-message" ng-if="rowData.msgSource==='EP'"  style="width:500px" ng-bind="rowData.msgDescription"></div>

-								<div id="{{$index}}-message" ng-if="rowData.msgSource!=='EP'"  ng-bind="rowData.msgDescription| elipsis: 27"></div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-startTime" ng-bind="rowData.startTime |	date:'medium'"></div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-endTime" ng-bind="rowData.endTime |	date:'medium'"></div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-priority" ng-bind="priorityItems[rowData.priority]"></div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-loginId" ng-bind="!rowData.loginId ? externalNotification : rowData.loginId"></div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-createdDate" ng-bind="rowData.createdDate | date:'medium'"></div>

-							</td>

-						</tr>

-					</tbody>

-				</table>

-			</div>

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-user-notification-history"
+	ng-style="{bottom: tabBottom}">
+	<div class="user-notification-history" id="page-content">
+		<div id='app-title' class="w-ecomp-main-view-title">
+			<h1 class="heading-page" >Recent Notifications</h1>
+		</div>
+		<div class="notifHistTable">
+
+			<div class="table-control">
+				<div class="simulateCatGridHeaderDetails">This table shows
+					notifications published in the last 30 days.</div>
+				<div align="right">
+					<input class="table-search" type="text" id="input-search"
+						placeholder="Search in entire table" ng-model="searchString" />
+				</div>
+			</div>
+
+            <span class="ecomp-spinner" ng-show="isLoadingTable"></span>
+
+			<div id="table-main" class="b2b-table-div" ng-hide="isLoadingTable">
+				<table b2b-table id="notification-history-table"
+					table-data="notificationHistory"
+					search-string="searchString"
+					view-per-page="viewPerPagerIgnored"
+					current-page="ignoredCurrentPage"
+					total-page="totalPageIgnored">
+					<thead b2b-table-row type="header">
+						<tr>
+							<th id="th-notif-0" b2b-table-header key="msgSource"
+								sortable="true" style=" width: 10px;">Message Source</th>
+							<th id="th-notif-1" b2b-table-header key="msgHeader"
+								sortable="true">Message</th>
+							<th id="th-notif-2" b2b-table-header key="startTime"
+								sortable="true">Start Date (Local Time)</th>
+							<th id="th-notif-3" b2b-table-header key="endTime"
+								sortable="true">End Date  (Local Time)</th>
+							<th id="th-notif-4" b2b-table-header key="priority"
+								sortable="true">Priority</th>
+							<th id="th-notif-5" b2b-table-header key="loginId"
+								sortable="true">Created By</th>
+							<th id="th-notif-6" b2b-table-header key="createdDate"
+								sortable="true">Created Time</th>
+						</tr>
+					</thead>
+
+					<tbody b2b-table-row 
+						type="body"
+						class="table-body"
+						track-by="$index"
+						row-repeat="rowData in notificationHistory">
+						<tr id="row-{{$index}}">
+								<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-msgSource">{{rowData.msgSource}}</div>
+							</td>
+								<td class="td-first" b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}"  ng-click="rowData.msgSource=='EP'||showDetailedJsonMessage(rowData)">
+								<div id="{{$index}}-title" style="font-weight: bold;" ng-bind="rowData.msgHeader"></div>
+								<div id="{{$index}}-message" ng-if="rowData.msgSource==='EP'"  style="width:500px" ng-bind="rowData.msgDescription"></div>
+								<div id="{{$index}}-message" ng-if="rowData.msgSource!=='EP'"  ng-bind="rowData.msgDescription| elipsis: 27"></div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-startTime" ng-bind="rowData.startTime |	date:'medium'"></div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-endTime" ng-bind="rowData.endTime |	date:'medium'"></div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-priority" ng-bind="priorityItems[rowData.priority]"></div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-loginId" ng-bind="!rowData.loginId ? externalNotification : rowData.loginId"></div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-createdDate" ng-bind="rowData.createdDate | date:'medium'"></div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js
index 54575d39..466998a3 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js
@@ -1,95 +1,95 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/8/15.

- */

-'use strict';

-(function () {

-    class NewPortalAdminModalCtrl {

-        constructor($log, portalAdminsService, $scope, confirmBoxService) {

-

-            let init = () => {

-                this.isSaving = false;

-                /* istanbul ignore if */

-                if($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState){

-                    this.selectedUser = $scope.ngDialogData.selectedUser;

-                    this.dialogState = $scope.ngDialogData.dialogState;

-                }else{

-                    this.selectedUser = null;

-                    this.dialogState = 1;

-                }

-                //this.searchUsersInProgress = false;

-                //this.showNewAdminAppDropdown = false;

-                $log.info('NewPortalAdminModalCtrl:: initiated');

-            };

-

-            this.addNewPortalAdmin = () => {

-                confirmBoxService.makeAdminChanges('Are you sure you want to add "' + this.selectedUser.firstName + ' ' + this.selectedUser.lastName + '" as a Portal Admin?')

-                    .then(isConfirmed => {

-                        if(isConfirmed) {

-                            if (!this.selectedUser || !this.selectedUser.orgUserId) {

-                                $log.error('NewPortalAdminModalCtrl::makeAdminChanges: No portal admin or ID... cannot add');

-                                return;

-                            }

-                            portalAdminsService.addPortalAdmin(this.selectedUser.orgUserId)

-                                .then(() => {

-                                    $log.debug("NewPortalAdminModalCtrl::addNewPortalAdmin: portal admin added successfully");

-                                    $scope.closeThisDialog(true);

-                                }).catch(err => {

-                                    if(err.status === 409) {    //Conflict

-                                        confirmBoxService.showInformation('This user already exists as a portal admin!').then(function (isConfirmed) {

-                                            $scope.closeThisDialog(true);

-                                        });

-                                    } else {

-                                        confirmBoxService.showInformation('There was a unknown problem adding the portal admin. ' + 'Please try again later. Error Status: '+ err.status).then(function (isConfirmed)  {

-                                            $scope.closeThisDialog(true);

-                                        });

-                                    }

-                            });

-                        }

-                    }).catch(err => {

-                        confirmBoxService.showInformation('There was a unknown problem adding the portal admin. ' + 'Please try again later. Error Status: '+ err.status).then(function (isConfirmed)  {

-                            $scope.closeThisDialog(true);

-                        });

-                        $log.error('portalAdminsService.addPortalAdmin error status: '+ err.status);

-                });

-            };

-

-            /**

-             * this function set the selected user

-             * @param user: selected user object

-             */

-            this.setSelectedUser = (user) => {

-                $log.debug('NewPortalAdminModalCtrl::setSelectedUser: selected user: ', user);

-                this.selectedUser = user;

-            };

-

-            init();

-

-            $scope.$on('$stateChangeStart', e => {

-                //Disable navigation when modal is opened

-                //**Nabil - note: this will cause the history back state to be replaced with current state

-                e.preventDefault();

-            });

-        }

-    }

-    NewPortalAdminModalCtrl.$inject = ['$log', 'portalAdminsService', '$scope', 'confirmBoxService'];

-    angular.module('ecompApp').controller('NewPortalAdminModalCtrl', NewPortalAdminModalCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/8/15.
+ */
+'use strict';
+(function () {
+    class NewPortalAdminModalCtrl {
+        constructor($log, portalAdminsService, $scope, confirmBoxService) {
+
+            let init = () => {
+                this.isSaving = false;
+                /* istanbul ignore if */
+                if($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState){
+                    this.selectedUser = $scope.ngDialogData.selectedUser;
+                    this.dialogState = $scope.ngDialogData.dialogState;
+                }else{
+                    this.selectedUser = null;
+                    this.dialogState = 1;
+                }
+                //this.searchUsersInProgress = false;
+                //this.showNewAdminAppDropdown = false;
+                $log.info('NewPortalAdminModalCtrl:: initiated');
+            };
+
+            this.addNewPortalAdmin = () => {
+                confirmBoxService.makeAdminChanges('Are you sure you want to add "' + this.selectedUser.firstName + ' ' + this.selectedUser.lastName + '" as a Portal Admin?')
+                    .then(isConfirmed => {
+                        if(isConfirmed) {
+                            if (!this.selectedUser || !this.selectedUser.orgUserId) {
+                                $log.error('NewPortalAdminModalCtrl::makeAdminChanges: No portal admin or ID... cannot add');
+                                return;
+                            }
+                            portalAdminsService.addPortalAdmin(this.selectedUser.orgUserId)
+                                .then(() => {
+                                    $log.debug("NewPortalAdminModalCtrl::addNewPortalAdmin: portal admin added successfully");
+                                    $scope.closeThisDialog(true);
+                                }).catch(err => {
+                                    if(err.status === 409) {    //Conflict
+                                        confirmBoxService.showInformation('This user already exists as a portal admin!').then(function (isConfirmed) {
+                                            $scope.closeThisDialog(true);
+                                        });
+                                    } else {
+                                        confirmBoxService.showInformation('There was a unknown problem adding the portal admin. ' + 'Please try again later. Error Status: '+ err.status).then(function (isConfirmed)  {
+                                            $scope.closeThisDialog(true);
+                                        });
+                                    }
+                            });
+                        }
+                    }).catch(err => {
+                        confirmBoxService.showInformation('There was a unknown problem adding the portal admin. ' + 'Please try again later. Error Status: '+ err.status).then(function (isConfirmed)  {
+                            $scope.closeThisDialog(true);
+                        });
+                        $log.error('portalAdminsService.addPortalAdmin error status: '+ err.status);
+                });
+            };
+
+            /**
+             * this function set the selected user
+             * @param user: selected user object
+             */
+            this.setSelectedUser = (user) => {
+                $log.debug('NewPortalAdminModalCtrl::setSelectedUser: selected user: ', user);
+                this.selectedUser = user;
+            };
+
+            init();
+
+            $scope.$on('$stateChangeStart', e => {
+                //Disable navigation when modal is opened
+                //**Nabil - note: this will cause the history back state to be replaced with current state
+                e.preventDefault();
+            });
+        }
+    }
+    NewPortalAdminModalCtrl.$inject = ['$log', 'portalAdminsService', '$scope', 'confirmBoxService'];
+    angular.module('ecompApp').controller('NewPortalAdminModalCtrl', NewPortalAdminModalCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.spec.js b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.spec.js
index 3841a2b3..32cc3a1f 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.spec.js
@@ -1,19 +1,19 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html
index d328db82..206dc168 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html
@@ -1,36 +1,42 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="new-admin-modal">

-

-    <div class="search-users">

-

-        <search-users search-title="Add New Portal Admin"

-                      selected-user="newPortalAdmin.selectedUser"></search-users>

-

-        <div class="dialog-control">

-            

-               <button id="pa-search-users-button-save" class="btn btn-alt btn-small"

-                 ng-click="newPortalAdmin.selectedUser && newPortalAdmin.addNewPortalAdmin()"

-                 ng-class="{disabled: !newPortalAdmin.selectedUser}">Save

-            </button>

-            <button id="pa-search-users-button-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>

-        </div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="new-admin-modal">
+
+    <div class="search-users">
+
+        <search-users search-title="Add New Portal Admin"
+                      selected-user="newPortalAdmin.selectedUser"></search-users>
+
+        <div class="dialog-control">
+            
+               <button id="pa-search-users-button-save" class="btn btn-alt btn-small"
+                 ng-click="newPortalAdmin.selectedUser && newPortalAdmin.addNewPortalAdmin()"
+                 ng-class="{disabled: !newPortalAdmin.selectedUser}">Save
+            </button>
+            <button id="pa-search-users-button-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+        </div>
+    </div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js
index 0051e708..89f6d0ae 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js
@@ -1,110 +1,110 @@
-/*-

- * ================================================================================

- * 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 () {

-    class PortalAdminsCtrl {

-        constructor($log, portalAdminsService, ngDialog, confirmBoxService) {

-

-            let updateTableData = () => {

-                this.isLoadingTable = true;

-                portalAdminsService.getPortalAdmins().then(result=> {

-                    $log.debug('PortalAdminsCtrl::updateTableData: result: ' + JSON.stringify(result));

-                    if (!result || !result.length) {

-                        $log.info('PortalAdminsCtrl::updateTableData: no Portal Admins err handling');

-                        this.portalAdminsTableData = [];

-                        return;

-                    }

-                    this.portalAdminsTableData = result;

-                }).catch(err=> {

-                    $log.error('PortalAdminsCtrl::updateTableData error :',err);

-                    confirmBoxService.showInformation('There was a problem retrieving the portal admins. ' +

-                        'Please try again later. Error: ' + err.status).then(isConfirmed => {});

-

-                }).finally(() => {

-                    this.isLoadingTable = false;

-                });

-            };

-

-            let init = () => {

-                $log.info('portalAdminsService.getPortalAdmins::initializing...');

-                this.isLoadingTable = false;

-

-                /*Table general configuration params*/

-                this.searchString= '';

-                /*Table data*/

-                this.portalAdminsTableHeaders = ['First Name', 'Last Name', 'User ID', 'Delete'];

-                this.portalAdminsTableData = [];

-                updateTableData();

-            };

-

-            init();

-

-            this.removePortalAdmin = pAdmin => {

-                $log.debug('PortalAdminsCtrl::removePortalAdmin: pAdmin = ' + JSON.stringify(pAdmin));

-                confirmBoxService.deleteItem(pAdmin.firstName + ' ' + pAdmin.lastName )

-                    .then(isConfirmed => {

-                    if(isConfirmed){

-                        if(!pAdmin || !pAdmin.userId){

-                            $log.error('PortalAdminsCtrl::removePortalAdmin No portal admin or ID... cannot delete');

-                            return;

-                        }

-                        portalAdminsService.removePortalAdmin(pAdmin.userId,pAdmin.loginId).then(() => {

-                            $log.info("PortalAdminsCtrl::removePortalAdmin removed admin");

-                            init();

-                        }).catch(err => {

-                            $log.error('PortalAdminsCtrl::removePortalAdmin.deleteItem error: '+ err);

-                            confirmBoxService.showInformation('There was a problem deleting this portal admins. ' +

-                                'Please try again later. Error: ' + err.status).then(isConfirmed => {});

-                        });

-                    }

-                }).catch(err => {

-                    $log.error('PortalAdminsCtrl::removePortalAdmin.deleteItem error: '+ err);

-                });

-            };

-            

-            this.openAddNewPortalAdminModal = (user) => {

-                let data = null;

-                if(user){

-                    data = {

-                        dialogState: 2,

-                        selectedUser:{

-                            orgUserId: user.orgUserId,

-                            firstName: user.firstName,

-                            lastName: user.lastName

-                        }

-                    }

-                }

-                ngDialog.open({

-                    templateUrl: 'app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html',

-                    controller: 'NewPortalAdminModalCtrl',

-                    controllerAs: 'newPortalAdmin',

-                    data: data

-                }).closePromise.then(needUpdate => {

-                    if(needUpdate.value === true){

-                        $log.debug('PortalAdminsCtrl::openAddNewPortalAdminModal: updating Portal Admin table data...');

-                        updateTableData();

-                    }

-                });

-            };

-        }

-    }

-    PortalAdminsCtrl.$inject = ['$log', 'portalAdminsService', 'ngDialog', 'confirmBoxService'];

-    angular.module('ecompApp').controller('PortalAdminsCtrl', PortalAdminsCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class PortalAdminsCtrl {
+        constructor($log, portalAdminsService, ngDialog, confirmBoxService) {
+
+            let updateTableData = () => {
+                this.isLoadingTable = true;
+                portalAdminsService.getPortalAdmins().then(result=> {
+                    $log.debug('PortalAdminsCtrl::updateTableData: result: ' + JSON.stringify(result));
+                    if (!result || !result.length) {
+                        $log.info('PortalAdminsCtrl::updateTableData: no Portal Admins err handling');
+                        this.portalAdminsTableData = [];
+                        return;
+                    }
+                    this.portalAdminsTableData = result;
+                }).catch(err=> {
+                    $log.error('PortalAdminsCtrl::updateTableData error :',err);
+                    confirmBoxService.showInformation('There was a problem retrieving the portal admins. ' +
+                        'Please try again later. Error: ' + err.status).then(isConfirmed => {});
+
+                }).finally(() => {
+                    this.isLoadingTable = false;
+                });
+            };
+
+            let init = () => {
+                $log.info('portalAdminsService.getPortalAdmins::initializing...');
+                this.isLoadingTable = false;
+
+                /*Table general configuration params*/
+                this.searchString= '';
+                /*Table data*/
+                this.portalAdminsTableHeaders = ['First Name', 'Last Name', 'User ID', 'Delete'];
+                this.portalAdminsTableData = [];
+                updateTableData();
+            };
+
+            init();
+
+            this.removePortalAdmin = pAdmin => {
+                $log.debug('PortalAdminsCtrl::removePortalAdmin: pAdmin = ' + JSON.stringify(pAdmin));
+                confirmBoxService.deleteItem(pAdmin.firstName + ' ' + pAdmin.lastName )
+                    .then(isConfirmed => {
+                    if(isConfirmed){
+                        if(!pAdmin || !pAdmin.userId){
+                            $log.error('PortalAdminsCtrl::removePortalAdmin No portal admin or ID... cannot delete');
+                            return;
+                        }
+                        portalAdminsService.removePortalAdmin(pAdmin.userId,pAdmin.loginId).then(() => {
+                            $log.info("PortalAdminsCtrl::removePortalAdmin removed admin");
+                            init();
+                        }).catch(err => {
+                            $log.error('PortalAdminsCtrl::removePortalAdmin.deleteItem error: '+ err);
+                            confirmBoxService.showInformation('There was a problem deleting this portal admins. ' +
+                                'Please try again later. Error: ' + err.status).then(isConfirmed => {});
+                        });
+                    }
+                }).catch(err => {
+                    $log.error('PortalAdminsCtrl::removePortalAdmin.deleteItem error: '+ err);
+                });
+            };
+            
+            this.openAddNewPortalAdminModal = (user) => {
+                let data = null;
+                if(user){
+                    data = {
+                        dialogState: 2,
+                        selectedUser:{
+                            orgUserId: user.orgUserId,
+                            firstName: user.firstName,
+                            lastName: user.lastName
+                        }
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html',
+                    controller: 'NewPortalAdminModalCtrl',
+                    controllerAs: 'newPortalAdmin',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                    if(needUpdate.value === true){
+                        $log.debug('PortalAdminsCtrl::openAddNewPortalAdminModal: updating Portal Admin table data...');
+                        updateTableData();
+                    }
+                });
+            };
+        }
+    }
+    PortalAdminsCtrl.$inject = ['$log', 'portalAdminsService', 'ngDialog', 'confirmBoxService'];
+    angular.module('ecompApp').controller('PortalAdminsCtrl', PortalAdminsCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
index 43f830cc..33268efb 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
@@ -1,64 +1,64 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-main">

-    <div class="w-ecomp-main-container" >

-        <div class="portal-admins-page-main" id="page-content" >

-            <div id="title" class="w-ecomp-main-view-title">

-            	 <h1 class="heading-page" >Portal Admins</h1>

-            </div>

-            <div class="portal-admins-table">

-                <div class="table-control">

-	                <div class="table-control-fields">

-						<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="portalAdmin.searchString">

-					</div>

-					<div class="table-control-buttons">

-						<button class="btn btn-alt btn-small" ng-click="portalAdmin.openAddNewPortalAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Portal Admin</button> 		

-					</div>      

-                </div>

-

-                <span class="ecomp-spinner" ng-show="portalAdmin.isLoadingTable"></span>

-                

-                <div b2b-table table-data="portalAdmin.portalAdminsTableData"  ng-hide="portalAdmin.isLoadingTable"	search-string="portalAdmin.searchString" class="b2b-table-div">

-					<table>

-						<thead b2b-table-row type="header">

-							<tr >

-								<th b2b-table-header key="firstName" sortable="true" id="col1">First Name</th>

-								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>

-								<th b2b-table-header key="loginId" sortable="true" id="col3">User ID</th>

-								<th b2b-table-header key="" sortable="falses" id="col4">Delete</th>

-							</tr>

-						</thead>

-						<tbody b2b-table-row type="body" 	row-repeat="rowData in portalAdmin.portalAdminsTableData">

-							<tr>

-								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.loginId"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">

-									<span class="icon-misc-trash" ng-click="portalAdmin.removePortalAdmin(rowData)"></span>

-								</td>							

-							</tr>

-						</tbody>

-					</table>

-				</div>

-            </div>

-        </div>

-    </div>

-

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+    <div class="w-ecomp-main-container" >
+        <div class="portal-admins-page-main" id="page-content" >
+            <div id="title" class="w-ecomp-main-view-title">
+            	 <h1 class="heading-page" >Portal Admins</h1>
+            </div>
+            <div class="portal-admins-table">
+                <div class="table-control">
+	                <div class="table-control-fields">
+						<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="portalAdmin.searchString">
+					</div>
+					<div class="table-control-buttons">
+						<button class="btn btn-alt btn-small" ng-click="portalAdmin.openAddNewPortalAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Portal Admin</button> 		
+					</div>      
+                </div>
+
+                <span class="ecomp-spinner" ng-show="portalAdmin.isLoadingTable"></span>
+                
+                <div b2b-table table-data="portalAdmin.portalAdminsTableData"  ng-hide="portalAdmin.isLoadingTable"	search-string="portalAdmin.searchString" class="b2b-table-div">
+					<table>
+						<thead b2b-table-row type="header">
+							<tr >
+								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">First Name</th>
+								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>
+								<th b2b-table-header key="loginId" sortable="true" id="col3">User ID</th>
+								<th b2b-table-header key="" sortable="falses" id="col4">Delete</th>
+							</tr>
+						</thead>
+						<tbody b2b-table-row type="body" 	row-repeat="rowData in portalAdmin.portalAdminsTableData">
+							<tr>
+								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.loginId"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
+									<span class="icon-misc-trash" ng-click="portalAdmin.removePortalAdmin(rowData)"></span>
+								</td>							
+							</tr>
+						</tbody>
+					</table>
+				</div>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html b/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html
index 3970960d..c5673da8 100644
--- a/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html
+++ b/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html
@@ -1,55 +1,59 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-

-<div class="new-admin-modal" style="height: 350px;">

-	<form name="adminForm" novalidate>

-		<div class="title" ng-bind="label" style="color: #5a5a5a;font-size: 18px;border-bottom: #067ab4 3px solid;margin-left:0px"></div>

-

-		<div id="name-property-title" class="property required">

-			<div id="name-property-label" class="property-label" style="margin-bottom: 5px;    color: #5a5a5a;       font-size: 14px;    font-weight: bold;    padding-top: 20px;">

-				<sup><b style="color: Red;">*</b></sup>Name:</div>

-			<input id="name-property-input" type="text" class="input-field" style=" display: inline-block; width: 396px; height: 40px;"ng-model="editRoleFunction.name" maxlength="30" />

-			<div id="name-property-required" ng-show="!editRoleFunction.name||editRoleFunction.name.length==0" style="color: #cf2a2a; font-size: 10px;"><small style="position: absolute;">Name is Required</small>

-				</div>

-		</div>

-		<br />

-		<div id="code-property-title" class="property required">

-			<div id="code-property-label" class="property-label" style="    margin-bottom: 5px;    color: #5a5a5a;       font-size: 14px;    font-weight: bold;    padding-top: 20px;">

-				<sup><b style="color: Red;">*</b></sup>Code:

-			</div>

-		   <input id="code-property-input" type="text" class="input-field" style=" display: inline-block; width: 396px; height: 40px;"

-				ng-model="editRoleFunction.code" ng-disabled="disableCd"

-				maxlength="30" />

-				<div id="code-property-required" ng-show="!editRoleFunction.code||editRoleFunction.code.length==0" style="color: #cf2a2a; font-size: 10px;"><small style="position: absolute;">Code is Required</small>

-				</div>

-		</div>

-		

-

-

-	<div class="dialog-control">

-				

-					<button id="button-app-save" class="save-button" size="small" ng-disabled="(!editRoleFunction.name||editRoleFunction.name.length==0)||(!editRoleFunction.code||editRoleFunction.code.length==0 )" ng-click="!saveRoleFunction(editRoleFunction)";herf="javascript:void(0)">Save</button>

-						

-						<div id="button-app-cancel" class="cancel-button" ng-click="closeThisDialog()" role="button" tabindex="0" herf="javascript:void(0)">Cancel</div>

-		</div>

-	</form>

-</div>

-

-

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<div class="new-admin-modal" style="height: 350px;">
+	<form name="adminForm" novalidate>
+		<div class="title" ng-bind="label" style="color: #5a5a5a;font-size: 18px;border-bottom: #067ab4 3px solid;margin-left:0px"></div>
+
+		<div id="name-property-title" class="property required">
+			<div id="name-property-label" class="property-label" style="margin-bottom: 5px;    color: #5a5a5a;       font-size: 14px;    font-weight: bold;    padding-top: 20px;">
+				<sup><b style="color: Red;">*</b></sup>Name:</div>
+			<input id="name-property-input" type="text" class="input-field" style=" display: inline-block; width: 396px; height: 40px;"ng-model="editRoleFunction.name" maxlength="30" />
+			<div id="name-property-required" ng-show="!editRoleFunction.name||editRoleFunction.name.length==0" style="color: #cf2a2a; font-size: 10px;"><small style="position: absolute;">Name is Required</small>
+				</div>
+		</div>
+		<br />
+		<div id="code-property-title" class="property required">
+			<div id="code-property-label" class="property-label" style="    margin-bottom: 5px;    color: #5a5a5a;       font-size: 14px;    font-weight: bold;    padding-top: 20px;">
+				<sup><b style="color: Red;">*</b></sup>Code:
+			</div>
+		   <input id="code-property-input" type="text" class="input-field" style=" display: inline-block; width: 396px; height: 40px;"
+				ng-model="editRoleFunction.code" ng-disabled="disableCd"
+				maxlength="30" />
+				<div id="code-property-required" ng-show="!editRoleFunction.code||editRoleFunction.code.length==0" style="color: #cf2a2a; font-size: 10px;"><small style="position: absolute;">Code is Required</small>
+				</div>
+		</div>
+		
+
+
+	<div class="dialog-control">
+				
+					<button id="button-app-save" class="save-button" size="small" ng-disabled="(!editRoleFunction.name||editRoleFunction.name.length==0)||(!editRoleFunction.code||editRoleFunction.code.length==0 )" ng-click="!saveRoleFunction(editRoleFunction)";herf="javascript:void(0)">Save</button>
+						
+						<div id="button-app-cancel" class="cancel-button" ng-click="closeThisDialog()" role="button" tabindex="0" herf="javascript:void(0)">Cancel</div>
+		</div>
+	</form>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role-controller.js b/ecomp-portal-FE-common/client/app/views/role/role-controller.js
index c5c7c97c..2bd522a4 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/role/role-controller.js
@@ -1,219 +1,219 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-

-app.controller('roleController', function ($scope, $http, confirmBoxService, ngDialog, RoleService, conf, $stateParams){

-	//$scope.role=${role};

-		

-	$( "#dialogRoleFunction" ).hide();

-	$( "#dialogChildRole" ).hide();

-	

-	//$scope.ociavailableRoleFunctions=${availableRoleFunctions};

-	$scope.fetchRoles = function() {

-	

-	RoleService.getRole($stateParams.roleId).then(function(data){

-		

-		var j = data;

-  		$scope.data = JSON.parse(j.data);

-  		

-  		$scope.role =JSON.parse($scope.data.role);

-  		

-  		$scope.ociavailableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);

-  		$scope.availableRoleFunctions=[];

-  		

-  		if($scope.ociavailableRoleFunctions)

-  			$.each($scope.ociavailableRoleFunctions, function(i, a){ 

-  				var availableRoleFunction = a;

-  				availableRoleFunction.selected = false;

-  			    $.each($scope.role.roleFunctions, function(j, b){ 

-  			    	if(a.code === b.code) {

-  			    		availableRoleFunction.selected = true;

-  			    	}

-  			    });

-  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    

-  		});	

-  		

-

-  		$scope.ociavailableRoles=JSON.parse($scope.data.availableRoles);

-  		$scope.availableRoles=[];

-  		

-  		if($scope.ociavailableRoles)

-  			$.each($scope.ociavailableRoles, function(i, a){ 

-  				var availableRole = a;

-  				availableRole.selected = false;

-  				if($scope.role.childRoles){

-  			    $.each($scope.role.childRoles, function(j, b){ 

-  			    	if(a.id === b.id) {

-  			    		availableRole.selected = true;

-  			    	}

-  			    });

-  				};

-  			    $scope.availableRoles.push(availableRole);	    

-  		});

-  			

-	

-	},function(error){

-		console.log("RoleService.getRole failed", error);

-		//reloadPageOnce();

-	});

-	}

-	

-	$scope.fetchRoles();

-

-	$scope.saveRole = function() {

-				var exists = false,x;	

-				for(x in $scope.availableRoles){

-					if($scope.availableRoles[x].name==$scope.role.name){

-						exists = true;

-						//$modalInstance.close({availableRoleFunctions:message.availableRoleFunctions});

-					}

-				}

-				if (exists) {

-					confirmBoxService.showInformation( "Role already exists.");

-				}

-				else {

-					var uuu = conf.api.saveRole + "?role_id="+$stateParams.roleId;

-					var postData = {

-							role: $scope.role, 

-							childRoles: $scope.role.childRoles,

-							roleFunctions : $scope.role.roleFunctions

-					};

-					$http.post(uuu, JSON.stringify(postData)).then(function(res) {

-						// console.log('roleController::saveRole: ' + JSON.stringify(res));

-						if (res && res.data && res.data.role)

-							confirmBoxService.showInformation("Update Successful.");

-						else

-							confirmBoxService.showInformation('Failed to create role: ' + res.data.error)

-					},

-					function(res){

-						console.log('post failed', res.data);

-						confirmBoxService.showInformation("Error while saving.");

-					}

-					);

-				}

-			};

-		

-	$scope.addNewRoleFunctionModalPopup = function() {

-			var modalInstance = ngDialog.open({

-			    templateUrl: 'app/views/role/role_functions_popup.html',

-			    controller: 'rolepopupController',

-			    

-			    resolve: {

-			    	roleId: function () {

-				          return $stateParams.roleId;

-				        },

-			    	role: function () {

-			          return $scope.role;

-			        },

-			        availableRoles: function () {

-				          return $scope.ociavailableRoles;

-				    },

-				    availableRoleFunctions: function () {

-				          return $scope.ociavailableRoleFunctions;

-				    },

-			      }

-			  });

-			 modalInstance.closePromise.then(response => {

-					if($stateParams.roleId === '0'){

-						return $scope.role;

-					}else{

-						$scope.fetchRoles();

-					}

-	           // $scope.role=response.role;

-	        });

-	};

-		

-	 $scope.addNewChildRoleModalPopup = function() {

-			var modalInstance = ngDialog.open({

-			    templateUrl: 'app/views/role/role_childrole_popup.html',

-			    controller: 'rolepopupController',

-			  

-			    resolve: {

-			    	roleId: function () {

-				          return $stateParams.roleId;

-				        },

-			    	role: function () {

-			          return $scope.role;

-			        },

-			        availableRoles: function () {

-				          return $scope.ociavailableRoles;

-				    },

-				    availableRoleFunctions: function () {

-				          return $scope.ociavailableRoleFunctions;

-				    },

-			      }

-			  }).closePromise.then(function(response){

-					if($stateParams.roleId === '0'){

-						 return $scope.role;

-					}else{

-			            $scope.fetchRoles();

-					}

-	            //$scope.role=response.role;

-	        });

-		};

-		

-		$scope.removeRoleFunction = function(roleFunction) {

-			confirmBoxService.confirm("You are about to remove the role function "+roleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(

-	    			function(confirmed){

-						var uuu = conf.api.toggleRoleRoleFunction + "?role_id=" + $stateParams.roleId;

-						  var postData={roleFunction:roleFunction};

-						  	if(confirmed) {	

-								$http.post(uuu, postData).then(

-										function(response) {

-											$scope.role= response.data.role;

-											$.each($scope.availableRoleFunctions, function(k, c){ 

-							  			    	if(c.code === roleFunction.code) {

-							  			    		c.selected = false;

-							  			    	}

-							  			    });

-										}, 

-										function(response) {

-											confirmBoxService.showInformation("Error while saving.");

-										}

-								);									

-								}

-				

-	    	});

-		

-		};

-		

-		$scope.removeChildRole = function(childRole) {

-			confirmBoxService.confirm("You are about to remove the child role "+childRole.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(

-	    			function(confirmed){

-					var uuu = conf.api.toggleRoleChildRole + "?role_id=" + $stateParams.roleId;

-					  var postData={childRole:childRole};

-					  if(confirmed) {

-							  $http.post(uuu,postData).then( function(response) {

-								  $scope.role=response.data.role;

-								  $.each($scope.availableRoles, function(k, c){ 

-					  			    	if(c.id === childRole.id) {

-					  			    		c.selected = false;

-					  			    	}

-					  			    });

-								  },

-								  

-								  function(data) {

-									  confirmBoxService.showInformation("Error while saving.");

-								  });

-						}				

-	    	});

-			

-		};

-		

-});

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
+app.controller('roleController', function ($scope, $http, confirmBoxService, ngDialog, RoleService, conf, $stateParams){
+	//$scope.role=${role};
+		
+	$( "#dialogRoleFunction" ).hide();
+	$( "#dialogChildRole" ).hide();
+	
+	//$scope.ociavailableRoleFunctions=${availableRoleFunctions};
+	$scope.fetchRoles = function() {
+	
+	RoleService.getRole($stateParams.roleId).then(function(data){
+		
+		var j = data;
+  		$scope.data = JSON.parse(j.data);
+  		
+  		$scope.role =JSON.parse($scope.data.role);
+  		
+  		$scope.ociavailableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
+  		$scope.availableRoleFunctions=[];
+  		
+  		if($scope.ociavailableRoleFunctions)
+  			$.each($scope.ociavailableRoleFunctions, function(i, a){ 
+  				var availableRoleFunction = a;
+  				availableRoleFunction.selected = false;
+  			    $.each($scope.role.roleFunctions, function(j, b){ 
+  			    	if(a.code === b.code) {
+  			    		availableRoleFunction.selected = true;
+  			    	}
+  			    });
+  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    
+  		});	
+  		
+
+  		$scope.ociavailableRoles=JSON.parse($scope.data.availableRoles);
+  		$scope.availableRoles=[];
+  		
+  		if($scope.ociavailableRoles)
+  			$.each($scope.ociavailableRoles, function(i, a){ 
+  				var availableRole = a;
+  				availableRole.selected = false;
+  				if($scope.role.childRoles){
+  			    $.each($scope.role.childRoles, function(j, b){ 
+  			    	if(a.id === b.id) {
+  			    		availableRole.selected = true;
+  			    	}
+  			    });
+  				};
+  			    $scope.availableRoles.push(availableRole);	    
+  		});
+  			
+	
+	},function(error){
+		console.log("RoleService.getRole failed", error);
+		//reloadPageOnce();
+	});
+	}
+	
+	$scope.fetchRoles();
+
+	$scope.saveRole = function() {
+				var exists = false,x;	
+				for(x in $scope.availableRoles){
+					if($scope.availableRoles[x].name==$scope.role.name){
+						exists = true;
+						//$modalInstance.close({availableRoleFunctions:message.availableRoleFunctions});
+					}
+				}
+				if (exists) {
+					confirmBoxService.showInformation( "Role already exists.");
+				}
+				else {
+					var uuu = conf.api.saveRole + "?role_id="+$stateParams.roleId;
+					var postData = {
+							role: $scope.role, 
+							childRoles: $scope.role.childRoles,
+							roleFunctions : $scope.role.roleFunctions
+					};
+					$http.post(uuu, JSON.stringify(postData)).then(function(res) {
+						// console.log('roleController::saveRole: ' + JSON.stringify(res));
+						if (res && res.data && res.data.role)
+							confirmBoxService.showInformation("Update Successful.");
+						else
+							confirmBoxService.showInformation('Failed to create role: ' + res.data.error)
+					},
+					function(res){
+						console.log('post failed', res.data);
+						confirmBoxService.showInformation("Error while saving.");
+					}
+					);
+				}
+			};
+		
+	$scope.addNewRoleFunctionModalPopup = function() {
+			var modalInstance = ngDialog.open({
+			    templateUrl: 'app/views/role/role_functions_popup.html',
+			    controller: 'rolepopupController',
+			    
+			    resolve: {
+			    	roleId: function () {
+				          return $stateParams.roleId;
+				        },
+			    	role: function () {
+			          return $scope.role;
+			        },
+			        availableRoles: function () {
+				          return $scope.ociavailableRoles;
+				    },
+				    availableRoleFunctions: function () {
+				          return $scope.ociavailableRoleFunctions;
+				    },
+			      }
+			  });
+			 modalInstance.closePromise.then(response => {
+					if($stateParams.roleId === '0'){
+						return $scope.role;
+					}else{
+						$scope.fetchRoles();
+					}
+	           // $scope.role=response.role;
+	        });
+	};
+		
+	 $scope.addNewChildRoleModalPopup = function() {
+			var modalInstance = ngDialog.open({
+			    templateUrl: 'app/views/role/role_childrole_popup.html',
+			    controller: 'rolepopupController',
+			  
+			    resolve: {
+			    	roleId: function () {
+				          return $stateParams.roleId;
+				        },
+			    	role: function () {
+			          return $scope.role;
+			        },
+			        availableRoles: function () {
+				          return $scope.ociavailableRoles;
+				    },
+				    availableRoleFunctions: function () {
+				          return $scope.ociavailableRoleFunctions;
+				    },
+			      }
+			  }).closePromise.then(function(response){
+					if($stateParams.roleId === '0'){
+						 return $scope.role;
+					}else{
+			            $scope.fetchRoles();
+					}
+	            //$scope.role=response.role;
+	        });
+		};
+		
+		$scope.removeRoleFunction = function(roleFunction) {
+			confirmBoxService.confirm("You are about to remove the role function "+roleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(
+	    			function(confirmed){
+						var uuu = conf.api.toggleRoleRoleFunction + "?role_id=" + $stateParams.roleId;
+						  var postData={roleFunction:roleFunction};
+						  	if(confirmed) {	
+								$http.post(uuu, postData).then(
+										function(response) {
+											$scope.role= response.data.role;
+											$.each($scope.availableRoleFunctions, function(k, c){ 
+							  			    	if(c.code === roleFunction.code) {
+							  			    		c.selected = false;
+							  			    	}
+							  			    });
+										}, 
+										function(response) {
+											confirmBoxService.showInformation("Error while saving.");
+										}
+								);									
+								}
+				
+	    	});
+		
+		};
+		
+		$scope.removeChildRole = function(childRole) {
+			confirmBoxService.confirm("You are about to remove the child role "+childRole.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(
+	    			function(confirmed){
+					var uuu = conf.api.toggleRoleChildRole + "?role_id=" + $stateParams.roleId;
+					  var postData={childRole:childRole};
+					  if(confirmed) {
+							  $http.post(uuu,postData).then( function(response) {
+								  $scope.role=response.data.role;
+								  $.each($scope.availableRoles, function(k, c){ 
+					  			    	if(c.id === childRole.id) {
+					  			    		c.selected = false;
+					  			    	}
+					  			    });
+								  },
+								  
+								  function(data) {
+									  confirmBoxService.showInformation("Error while saving.");
+								  });
+						}				
+	    	});
+			
+		};
+		
+});
diff --git a/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js b/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js
index c7a1bfd8..e7195996 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js
@@ -1,160 +1,160 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-app.controller('roleFunctionListController', function ($scope,RoleService,$http,$state,conf,confirmBoxService, ngDialog){

-	$( "#dialog" ).hide();

-	

-	RoleService.getRoleFunctionList().then(function(data){

-		

-		var j = data;

-  		$scope.data = JSON.parse(j.data);

-  		$scope.availableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);

-  		

-  		//$scope.resetMenu();

-	

-	},function(error){

-		console.log("failed");

-		//reloadPageOnce();

-	});

-	

-	$scope.editRoleFunction = null;

-	var dialog = null;

-	$scope.editRoleFunctionPopup = function(availableRoleFunction) {

-		$scope.editRoleFunction = availableRoleFunction;

-		$( "#dialog" ).dialog({

-		      modal: true

-	    });

-	};

-	

-	$scope.editRoleFunctionModalPopup = function(availableRoleFunction) {

-		$scope.editRoleFunction = availableRoleFunction;

-		$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;

-		//$scope.availableRoleFunctions={};

-		var modalInstance = ngDialog.open({

-		    templateUrl: 'app/views/role/popup_modal_rolefunction.html',

-		    controller: 'rolefunctionpopupController',

-		    resolve: {

-		    	message: function () {

-		    		var message = {

-		    				availableRoleFunction:  $scope.editRoleFunction,

-		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp

-                           	};

-		          return message;

-		        },

-		        isEditing: function () {

-		        	return true;

-		        }

-		      }

-		  }); 

-		modalInstance.closePromise.then(response =>{

-			if(response.value!=null){

-            	if(response.value.result){

-            		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	

-            	}

-            }            	

-            /*else

-            	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;

-            */

-        });

-	};

-	

-	$scope.addNewRoleFunctionModalPopup = function(availableRoleFunction) {

-		

-		$scope.editRoleFunction = null;

-		$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;

-		//$scope.availableRoleFunctions={};

-		var modalInstance = ngDialog.open({

-		    templateUrl: 'app/views/role/popup_modal_rolefunction.html',

-		    controller: 'rolefunctionpopupController',

-		    resolve: {

-		    	message: function () {

-		    		var message = {

-		    				availableRoleFunction: $scope.editRoleFunction,

-		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp

-                           	};

-		          return message;

-		        },

-		        isEditing: function () {

-		        	return false;

-		        }

-		      }

-		  });

-		modalInstance.closePromise.then(response => {

-            if(response.value!=null){

-            	if(response.value.result){

-            		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	

-            	}

-            }

-           /* if(response.availableRoleFunctions != undefined)

-            	$scope.availableRoleFunctions=response.availableRoleFunctions;

-            else

-            	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;

-            	*/

-        });

-	};

-	

-	$scope.addNewRoleFunctionPopup = function() {

-		$scope.editRoleFunction = null;

-		$( "#dialog" ).dialog({

-		      modal: true

-	    });

-	};

-	

-	$scope.saveRoleFunction = function(availableRoleFunction) {

-		  var uuu = conf.api.saveRoleFuncion;

-		  var postData={availableRoleFunction: availableRoleFunction};

-		  $http.post(uuu,postData).then(function(response) {

-			  var data = response.data;

-	  		$scope.availableRoleFunctions=data.availableRoleFunctions; 

-	  		$scope.editRoleFunction = null;

-	  	  },	  	  

-	  	function() {

-	  		

-	  		confirmBoxService.showInformation("Error while saving");

-	  	  }

-	  	  );

-		};

-	

-		

-		$scope.removeRole = function(availableRoleFunction) {

-			confirmBoxService.confirm("You are about to delete the role function "+availableRoleFunction.name+". Do you want to continue?").then(

-	    			function(confirmed){

-	    				if(confirmed){

-							$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;

-							//$scope.availableRoleFunctions={};

-						  var uuu = conf.api.removeRoleFunction;

-						  var postData={availableRoleFunction: availableRoleFunction};

-					  	  $http.post(uuu,postData).then(function(response) {

-					  		  var data = response.data;

-					  		  if(data.availableRoleFunctions == undefined)

-					  			confirmBoxService.showInformation("Error while deleting: "+ data);

-					  		  else 

-					  			  $scope.availableRoleFunctions=data.availableRoleFunctions; 

-					  	  },

-					  	function() {

-					  		$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;

-					  		confirmBoxService.showInformation("Error while deleting: "+ data.responseText);

-					  	  }

-					  	  );

-	    				}			

-	    			});

-			

-		};

-

-});

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+app.controller('roleFunctionListController', function ($scope,RoleService,$http,$state,conf,confirmBoxService, ngDialog){
+	$( "#dialog" ).hide();
+	
+	RoleService.getRoleFunctionList().then(function(data){
+		
+		var j = data;
+  		$scope.data = JSON.parse(j.data);
+  		$scope.availableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
+  		
+  		//$scope.resetMenu();
+	
+	},function(error){
+		console.log("failed");
+		//reloadPageOnce();
+	});
+	
+	$scope.editRoleFunction = null;
+	var dialog = null;
+	$scope.editRoleFunctionPopup = function(availableRoleFunction) {
+		$scope.editRoleFunction = availableRoleFunction;
+		$( "#dialog" ).dialog({
+		      modal: true
+	    });
+	};
+	
+	$scope.editRoleFunctionModalPopup = function(availableRoleFunction) {
+		$scope.editRoleFunction = availableRoleFunction;
+		$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
+		//$scope.availableRoleFunctions={};
+		var modalInstance = ngDialog.open({
+		    templateUrl: 'app/views/role/popup_modal_rolefunction.html',
+		    controller: 'rolefunctionpopupController',
+		    resolve: {
+		    	message: function () {
+		    		var message = {
+		    				availableRoleFunction:  $scope.editRoleFunction,
+		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp
+                           	};
+		          return message;
+		        },
+		        isEditing: function () {
+		        	return true;
+		        }
+		      }
+		  }); 
+		modalInstance.closePromise.then(response =>{
+			if(response.value!=null){
+            	if(response.value.result){
+            		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	
+            	}
+            }            	
+            /*else
+            	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+            */
+        });
+	};
+	
+	$scope.addNewRoleFunctionModalPopup = function(availableRoleFunction) {
+		
+		$scope.editRoleFunction = null;
+		$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
+		//$scope.availableRoleFunctions={};
+		var modalInstance = ngDialog.open({
+		    templateUrl: 'app/views/role/popup_modal_rolefunction.html',
+		    controller: 'rolefunctionpopupController',
+		    resolve: {
+		    	message: function () {
+		    		var message = {
+		    				availableRoleFunction: $scope.editRoleFunction,
+		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp
+                           	};
+		          return message;
+		        },
+		        isEditing: function () {
+		        	return false;
+		        }
+		      }
+		  });
+		modalInstance.closePromise.then(response => {
+            if(response.value!=null){
+            	if(response.value.result){
+            		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	
+            	}
+            }
+           /* if(response.availableRoleFunctions != undefined)
+            	$scope.availableRoleFunctions=response.availableRoleFunctions;
+            else
+            	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+            	*/
+        });
+	};
+	
+	$scope.addNewRoleFunctionPopup = function() {
+		$scope.editRoleFunction = null;
+		$( "#dialog" ).dialog({
+		      modal: true
+	    });
+	};
+	
+	$scope.saveRoleFunction = function(availableRoleFunction) {
+		  var uuu = conf.api.saveRoleFuncion;
+		  var postData={availableRoleFunction: availableRoleFunction};
+		  $http.post(uuu,postData).then(function(response) {
+			  var data = response.data;
+	  		$scope.availableRoleFunctions=data.availableRoleFunctions; 
+	  		$scope.editRoleFunction = null;
+	  	  },	  	  
+	  	function() {
+	  		
+	  		confirmBoxService.showInformation("Error while saving");
+	  	  }
+	  	  );
+		};
+	
+		
+		$scope.removeRole = function(availableRoleFunction) {
+			confirmBoxService.confirm("You are about to delete the role function "+availableRoleFunction.name+". Do you want to continue?").then(
+	    			function(confirmed){
+	    				if(confirmed){
+							$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
+							//$scope.availableRoleFunctions={};
+						  var uuu = conf.api.removeRoleFunction;
+						  var postData={availableRoleFunction: availableRoleFunction};
+					  	  $http.post(uuu,postData).then(function(response) {
+					  		  var data = response.data;
+					  		  if(data.availableRoleFunctions == undefined)
+					  			confirmBoxService.showInformation("Error while deleting: "+ data);
+					  		  else 
+					  			  $scope.availableRoleFunctions=data.availableRoleFunctions; 
+					  	  },
+					  	function() {
+					  		$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+					  		confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
+					  	  }
+					  	  );
+	    				}			
+	    			});
+			
+		};
+
+});
diff --git a/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js b/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js
index 5ef37165..2e1acf37 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js
@@ -1,147 +1,147 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-app.controller('roleListController', function ($scope,RoleService,confirmBoxService,conf,$state,$http){

-	$scope.showSpinner = true;

-	

-	RoleService.getRoles().then(function(data){

-		$scope.showSpinner = true;

-		var j = data;

-  		$scope.data = JSON.parse(j.data);

-  		$scope.availableRoles =JSON.parse($scope.data.availableRoles);

-  		$scope.showSpinner = false;

-  		//$scope.resetMenu();

-	

-	},function(error){

-		console.log("failed");

-		//reloadPageOnce();

-	});

-	

-	

-		$scope.goToUrl = function(roleIdVal) {

-			$state.go("root.role", {"roleId":roleIdVal});

-		}	

-	//console.log($scope.availableRoles);

-		$scope.toggleRole = function(selected,availableRole) {

-				//alert('toggleRole: '+selected);

-				var toggleType = null;

-				if(selected) {

-					toggleType = "activate";

-				} else {

-					toggleType = "inactivate";

-				}

-				

-				confirmBoxService.confirm("You are about to "+toggleType+" the role "+availableRole.name+". Do you want to continue?").then(

-		    			function(confirmed){

-		    				

-		    				 if(confirmed) {

-			                    var uuu = conf.api.toggleRole;

-								

-								var postData={role:availableRole};

-								$http.post(uuu, postData).then(function(response) {

-									var data = response.data;

-									if (typeof data === 'object') {

-										console.log(data);

-							  			$scope.availableRoles=data.availableRoles; 

-							  			console.log($scope.availableRoles);

-									} else {

-										//

-									}

-

-								}, function(response) {

-									console.log(response.data);

-									availableRole.active=!availableRole.active;

-									confirmBoxService.showInformation("Error while saving.");

-								});

-								

-								/*

-							  	  $.ajax({

-							  		 type : 'POST',

-							  		 url : uuu,

-							  		 dataType: 'json',

-							  		 contentType: 'application/json',

-							  		 data: JSON.stringify(postData),

-							  		 success : function(data){

-							  			console.log(data);

-							  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;}); 

-							  			console.log($scope.availableRoles);

-									 },

-									 error : function(data){

-										 console.log(data);

-										 availableRole.active=!availableRole.active;

-										 confirmBoxService.showInformation("Error while saving.");

-									 }

-							  	  });

-							  	  */

-		    				 }

-		    				 else {

-		    					 availableRole.active=!availableRole.active;

-		    				 }

-					

-		    	});

-		    	//,

-		    	//function(){

-		    //		availableRole.active=!availableRole.active;

-		    	//})

-				

-				  

-		};

-

-		$scope.removeRole = function(role) {

-			

-			confirmBoxService.confirm("You are about to delete the role "+role.name+". Do you want to continue?").then(

-	    			function(confirmed){

-							var uuu = conf.api.removeRole;

-							  var postData={role:role};

-						  /*	  $.ajax({

-						  		 type : 'POST',

-						  		 url : uuu,

-						  		 dataType: 'json',

-						  		 contentType: 'application/json',

-						  		 data: JSON.stringify(postData),

-						  		 success : function(data){

-						  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;});  

-								 },

-								 error : function(data){

-									 console.log(data);

-									 confirmBoxService.showInformation("Error while deleting: "+ data.responseText);

-								 }

-						  	  }); */

-							  

-							  

-							  $http.post(uuu, postData).then(function(response) {

-									var data = response.data;

-									if (typeof data === 'object') {

-							  			$scope.availableRoles=data.availableRoles; 

-									} else {

-										//

-									}

-

-								}, function(response) {

-									console.log(response.data);

-									confirmBoxService.showInformation("Error while deleting: "+ data.responseText);

-								});

-				

-	    	});

-	    	

-			

-		};

-		

-

-});

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+app.controller('roleListController', function ($scope,RoleService,confirmBoxService,conf,$state,$http){
+	$scope.showSpinner = true;
+	
+	RoleService.getRoles().then(function(data){
+		$scope.showSpinner = true;
+		var j = data;
+  		$scope.data = JSON.parse(j.data);
+  		$scope.availableRoles =JSON.parse($scope.data.availableRoles);
+  		$scope.showSpinner = false;
+  		//$scope.resetMenu();
+	
+	},function(error){
+		console.log("failed");
+		//reloadPageOnce();
+	});
+	
+	
+		$scope.goToUrl = function(roleIdVal) {
+			$state.go("root.role", {"roleId":roleIdVal});
+		}	
+	//console.log($scope.availableRoles);
+		$scope.toggleRole = function(selected,availableRole) {
+				//alert('toggleRole: '+selected);
+				var toggleType = null;
+				if(selected) {
+					toggleType = "activate";
+				} else {
+					toggleType = "inactivate";
+				}
+				
+				confirmBoxService.confirm("You are about to "+toggleType+" the role "+availableRole.name+". Do you want to continue?").then(
+		    			function(confirmed){
+		    				
+		    				 if(confirmed) {
+			                    var uuu = conf.api.toggleRole;
+								
+								var postData={role:availableRole};
+								$http.post(uuu, postData).then(function(response) {
+									var data = response.data;
+									if (typeof data === 'object') {
+										console.log(data);
+							  			$scope.availableRoles=data.availableRoles; 
+							  			console.log($scope.availableRoles);
+									} else {
+										//
+									}
+
+								}, function(response) {
+									console.log(response.data);
+									availableRole.active=!availableRole.active;
+									confirmBoxService.showInformation("Error while saving.");
+								});
+								
+								/*
+							  	  $.ajax({
+							  		 type : 'POST',
+							  		 url : uuu,
+							  		 dataType: 'json',
+							  		 contentType: 'application/json',
+							  		 data: JSON.stringify(postData),
+							  		 success : function(data){
+							  			console.log(data);
+							  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;}); 
+							  			console.log($scope.availableRoles);
+									 },
+									 error : function(data){
+										 console.log(data);
+										 availableRole.active=!availableRole.active;
+										 confirmBoxService.showInformation("Error while saving.");
+									 }
+							  	  });
+							  	  */
+		    				 }
+		    				 else {
+		    					 availableRole.active=!availableRole.active;
+		    				 }
+					
+		    	});
+		    	//,
+		    	//function(){
+		    //		availableRole.active=!availableRole.active;
+		    	//})
+				
+				  
+		};
+
+		$scope.removeRole = function(role) {
+			
+			confirmBoxService.confirm("You are about to delete the role "+role.name+". Do you want to continue?").then(
+	    			function(confirmed){
+							var uuu = conf.api.removeRole;
+							  var postData={role:role};
+						  /*	  $.ajax({
+						  		 type : 'POST',
+						  		 url : uuu,
+						  		 dataType: 'json',
+						  		 contentType: 'application/json',
+						  		 data: JSON.stringify(postData),
+						  		 success : function(data){
+						  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;});  
+								 },
+								 error : function(data){
+									 console.log(data);
+									 confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
+								 }
+						  	  }); */
+							  
+							  
+							  $http.post(uuu, postData).then(function(response) {
+									var data = response.data;
+									if (typeof data === 'object') {
+							  			$scope.availableRoles=data.availableRoles; 
+									} else {
+										//
+									}
+
+								}, function(response) {
+									console.log(response.data);
+									confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
+								});
+				
+	    	});
+	    	
+			
+		};
+		
+
+});
diff --git a/ecomp-portal-FE-common/client/app/views/role/role.html b/ecomp-portal-FE-common/client/app/views/role/role.html
index 42793eee..2356058d 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role.html
@@ -1,96 +1,96 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-admins-page-main">

-	<div class="admins-home-container" id="page-content">

-	 	<div id="title" class="w-ecomp-main-view-title">

-	    	<h3 class="heading-page" >Role</h3>

-	    </div>	

-	    <div  class="admins-table" >

-			<div>

-				<br>

-			    <p class="p-info">Please edit the role details below:&nbsp;</p><br>

-			     

-				<div id="role-text" >

-					<label id="role-text-name-label" >*Name:</label>

-					<input id="input-name"  class="input-field" maxlength="30"  type="text" data-ng-model="role.name">					 

-					<br>

-					<label id="role-text-priority-label">Priority:</label>

-					<input id="input-priority" class="input-field" maxlength="30"  type="text" data-ng-model="role.priority">					 	

-				</div>

-				<br>

-				<div align="left" >

-						<button id="button-role-save" type="submit" ng-click="saveRole();" class="btn btn-alt btn-small">Save</button>

-				</div>

-				

-				<br>

-				<div id="page-title"  class="pageTitle">

-					<label>Role Functions</label>

-					<a id="add-new-role" ng-click="addNewRoleFunctionModalPopup();" ng-style="{'cursor':'pointer'}" class="icon-primary-accordion-plus" size="small"></a>

-				</div>

-			

-				<div b2b-table table-data="role.roleFunctions"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">

-					<table>

-						<thead b2b-table-row type="header">

-							<tr >

-								<th id="table-header-name" b2b-table-header key="name" sortable="true" >Name</th>

-								<th id="table-header-remove" b2b-table-header sortable="false" >Remove</th>

-							</tr>

-						</thead>

-						<tbody b2b-table-row type="body" 	row-repeat="roleFunction in role.roleFunctions">

-							<tr >

-								<td id="role-function-{{roleFunction.name}}" b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="roleFunction.name"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">

-					    			<div ng-click="removeRoleFunction(roleFunction);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>

-								</td>							

-							</tr>

-						</tbody>

-					</table>

-				</div>		

-				

-				<a id="manage-role"  href="roleFunctions">Manage Role Functions</a><br><br>

-				

-				<div id="page-title-child" class="pageTitle">

-					<label>Child Roles</label>

-					<a id="add-child-role"  ng-click="addNewChildRoleModalPopup();" ng-style="{'cursor':'pointer'}" class="icon-primary-accordion-plus" size="small"></a>

-				</div>

-				

-				<div b2b-table table-data="role.childRoles"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">

-					<table>

-						<thead b2b-table-row type="header">

-							<tr >

-								<th id="table-header-name" b2b-table-header key="firstName" sortable="true" >Name</th>

-								<th id="table-header-remove" b2b-table-header key="lastName" sortable="true" >Remove</th>

-							</tr>

-						</thead>

-						<tbody b2b-table-row type="body" 	row-repeat="role in role.childRoles">

-							<tr >

-								<td id="role-function-{{role.name}}" b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="role.name"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">

-					    			<div ng-click="removeChildRole(role);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>

-								</td>							

-							</tr>

-						</tbody>

-					</table>

-				</div>					

-			</div>

-	

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-admins-page-main">
+	<div class="admins-home-container" id="page-content">
+	 	<div id="title" class="w-ecomp-main-view-title">
+	    	<h3 class="heading-page" >Role</h3>
+	    </div>	
+	    <div  class="admins-table" >
+			<div>
+				<br>
+			    <p class="p-info">Please edit the role details below:&nbsp;</p><br>
+			     
+				<div id="role-text" >
+					<label id="role-text-name-label" >*Name:</label>
+					<input id="input-name"  class="input-field" maxlength="30"  type="text" data-ng-model="role.name">					 
+					<br>
+					<label id="role-text-priority-label">Priority:</label>
+					<input id="input-priority" class="input-field" maxlength="30"  type="text" data-ng-model="role.priority">					 	
+				</div>
+				<br>
+				<div align="left" >
+						<button id="button-role-save" type="submit" ng-click="saveRole();" class="btn btn-alt btn-small">Save</button>
+				</div>
+				
+				<br>
+				<div id="page-title"  class="pageTitle">
+					<label>Role Functions</label>
+					<a id="add-new-role" ng-click="addNewRoleFunctionModalPopup();" ng-style="{'cursor':'pointer'}" class="icon-primary-accordion-plus" size="small"></a>
+				</div>
+			
+				<div b2b-table table-data="role.roleFunctions"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">
+					<table>
+						<thead b2b-table-row type="header">
+							<tr >
+								<th id="table-header-name" b2b-table-header key="name" sortable="true" >Name</th>
+								<th id="table-header-remove" b2b-table-header sortable="false" >Remove</th>
+							</tr>
+						</thead>
+						<tbody b2b-table-row type="body" 	row-repeat="roleFunction in role.roleFunctions">
+							<tr >
+								<td id="role-function-{{roleFunction.name}}" b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="roleFunction.name"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
+					    			<div ng-click="removeRoleFunction(roleFunction);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
+								</td>							
+							</tr>
+						</tbody>
+					</table>
+				</div>		
+				
+				<a id="manage-role"  href="roleFunctions">Manage Role Functions</a><br><br>
+				
+				<div id="page-title-child" class="pageTitle">
+					<label>Child Roles</label>
+					<a id="add-child-role"  ng-click="addNewChildRoleModalPopup();" ng-style="{'cursor':'pointer'}" class="icon-primary-accordion-plus" size="small"></a>
+				</div>
+				
+				<div b2b-table table-data="role.childRoles"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">
+					<table>
+						<thead b2b-table-row type="header">
+							<tr >
+								<th id="table-header-name" b2b-table-header key="firstName" sortable="true" >Name</th>
+								<th id="table-header-remove" b2b-table-header key="lastName" sortable="true" >Remove</th>
+							</tr>
+						</thead>
+						<tbody b2b-table-row type="body" 	row-repeat="role in role.childRoles">
+							<tr >
+								<td id="role-function-{{role.name}}" b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="role.name"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
+					    			<div ng-click="removeChildRole(role);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
+								</td>							
+							</tr>
+						</tbody>
+					</table>
+				</div>					
+			</div>
+	
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role.less b/ecomp-portal-FE-common/client/app/views/role/role.less
index 42311e64..71d240dc 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role.less
+++ b/ecomp-portal-FE-common/client/app/views/role/role.less
@@ -1,50 +1,50 @@
-.p-info {

-	font-size: 18px;

-}

-

-.input-field {

-	width: 250px !important;

-}

-

-.scrolling-table {

-	width: 548px;

-	margin-left: 16px;

-	height:575px;

-	overflow:auto;

-}

-

-.scrolling-table .scroll-viewport {

-	height: 200px !important;

-	width: 99.5% !important;

-	background-color: white;

-}

-

-.scrolling-table .scroll-overview {

-	margin-top: -14px !important;

-}

-

-.scrolling-table .scroll-viewport:hover {

-	background-color: white;

-}

-

-.scrolling-table #portal-scroll-table-content {

-	height: 200px;

-	position: absolute !important;

-	width: 548px;

-	padding-left: 0px;

-	padding-top: 0px;

-	padding-bottom: 0px;

-	padding-right: 5px;

-}

-

-.vertical .scroll-thumb {

-	width: 13px !important;

-}

-

-.vertical .scroll-bar {

-	width: 15px !important;

-}

-

-.scroll-bar {

-	border-radius: 0px !important;

+.p-info {
+	font-size: 18px;
+}
+
+.input-field {
+	width: 250px !important;
+}
+
+.scrolling-table {
+	width: 548px;
+	margin-left: 16px;
+	height:575px;
+	overflow:auto;
+}
+
+.scrolling-table .scroll-viewport {
+	height: 200px !important;
+	width: 99.5% !important;
+	background-color: white;
+}
+
+.scrolling-table .scroll-overview {
+	margin-top: -14px !important;
+}
+
+.scrolling-table .scroll-viewport:hover {
+	background-color: white;
+}
+
+.scrolling-table #portal-scroll-table-content {
+	height: 200px;
+	position: absolute !important;
+	width: 548px;
+	padding-left: 0px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	padding-right: 5px;
+}
+
+.vertical .scroll-thumb {
+	width: 13px !important;
+}
+
+.vertical .scroll-bar {
+	width: 15px !important;
+}
+
+.scroll-bar {
+	border-radius: 0px !important;
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html b/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html
index 278ef2cd..e96fb062 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html
@@ -1,51 +1,55 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<link rel="stylesheet" href="role.css">

-<div class="application-details-modal">

-    <div id="title" class="title">Select Role Functions</div>

-<div class="scrolling-table">

-

-	<div b2b-table table-data="availableRoles"   class="b2b-table-div">

-		<table>

-			<thead b2b-table-row type="header">

-				<tr >

-					<th b2b-table-header key="firstName" sortable="true" id="col1"></th>

-					<th b2b-table-header key="name" sortable="true" id="col2">Name</th>

-				</tr>

-			</thead>

-			<tbody b2b-table-row type="body" 	row-repeat="rowData in availableRoles">

-				<tr>

-					<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1">

-						<label class="btn-switch-label" tabindex="0" role="option">

-							<input type="checkbox" b2b-switches ng-model="rowData.selected" ng-click="toggleChildRole(rowData.selected,rowData);">

-					    </label> 

-					</td>

-					<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.name"></td>

-											

-				</tr>

-			</tbody>

-		</table>

-	</div>

-</div>

-    <div class="dialog-control">

-        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>      

-    </div>

-</div>

-

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<link rel="stylesheet" href="role.css">
+<div class="application-details-modal">
+    <div id="title" class="title">Select Role Functions</div>
+<div class="scrolling-table">
+
+	<div b2b-table table-data="availableRoles"   class="b2b-table-div">
+		<table>
+			<thead b2b-table-row type="header">
+				<tr >
+					<th b2b-table-header key="firstName" sortable="true" id="col1"></th>
+					<th b2b-table-header key="name" sortable="true" id="col2">Name</th>
+				</tr>
+			</thead>
+			<tbody b2b-table-row type="body" 	row-repeat="rowData in availableRoles">
+				<tr>
+					<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1">
+						<label class="btn-switch-label" tabindex="0" role="option">
+							<input id="row-input-{{$index}}" type="checkbox" b2b-switches ng-model="rowData.selected" ng-click="toggleChildRole(rowData.selected,rowData);">
+					    </label> 
+					</td>
+					<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.name"></td>
+											
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+    <div class="dialog-control">
+        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>      
+    </div>
+</div>
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_function_list.html b/ecomp-portal-FE-common/client/app/views/role/role_function_list.html
index c015ee56..7c50a5ac 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_function_list.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_function_list.html
@@ -1,107 +1,107 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<style>

-.c-ecomp-abs-table .tablesorter-default tbody tr td div {

-  line-height: 20px;

-}

-

-.c-ecomp-abs-table{

-    width: 100%;

-    height: 600px;

-    overflow-x: auto;

-    overflow-y: auto;

-	background-color: white;

-}

-</style>

-<div class="w-ecomp-admins-page-main">

-	<div class="admins-home-container" id="page-content">	

-    <div id="title" class="w-ecomp-main-view-title">

-    <h3 class="heading-page" >Role Functions</h3>

-    </div>

-	        

-	

-	<br>

-	

-	<div class="admins-table">

-	

-	 <!-- <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small" ></a> -->

-	        <div id="create-new-admin" align="left" style="marin-bottom: 50px;">

-				<button id="button-admin-create" type="submit" ng-click="addNewRoleFunctionModalPopup();" 

-					 class="btn btn-alt btn-small">Create</button>

-			</div>

-			

-			<div style="text-align: justify;text-align-last:auto;">

-			<!-- 	Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.  -->

-			</div>

-	

-	<div id="rolesTable" class="c-ecomp-abs-table default"  title="Role Functions">

-	  <table b2b-table table-data="availableRoleFunctions" current-page="1">

-	  	<thead b2b-table-row type="header">

-	  		<tr>

-	  			<th id="table-header-name" b2b-table-header width="70%" key="name" sortable="true">Name</th>

-	  			<th id="table-header-code" b2b-table-header width="10%" key="code" sortable="true">Code</th>

-	  			<th id="table-header-edit" b2b-table-header width="10%" sortable="false">Edit?</th>

-	  			<th id="table-header-delete" b2b-table-header width="10%" sortable="false">Delete?</th>

-	  		</tr>

-	  	</thead>

-	  	<tbody b2b-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->

-		  <tr>

-		    <td id="table-body-role-{{availableRoleFunction['name'].split(' ').join('-')}}" b2b-table-body width="70%" ng-bind="availableRoleFunction['name']"></td>

-		    <td id="table-body-role-{{availableRoleFunction['code']}}" b2b-table-body width="10%" ng-bind="availableRoleFunction['code']"></td>

-		    <td id="table-body" b2b-table-body width="10%">

-		    <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >

-		    <img src="static/fusion/images/editicon.gif">

-		    </a> -->

-		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-edit" href="javascript:void(0)" class="icon-edit"></a></div>

-		    </td>

-		     <td b2b-table-body width="10%">

-		    	<!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->

-		    	<div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-trash" href="javascript:void(0)" class="icon-misc-trash"></a></div>

-		     </td>

-		  </tr>

-		</tbody>

-		</table>

-	</div>

-	

-		   

-	

-	</div>

-	

-	

-	<div id="dialog" title="Add Role Function">

-	   	

-	   	<div id="fn-ebz-container-name" class="fn-ebz-container" >

-		<label id="fn-ebz-label-name" class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>

-		<input id="fn-ebz-input-{{editRoleFunction.name}}" type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"

-			maxlength="30" /> 

-		</div>

-	   	<br/>

-	   	<div id="fn-ebz-container-code" class="fn-ebz-container" >

-		<label id="fn-ebz-label-code" class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>

-		<input id="fn-ebz-input-{{editRoleFunction.code}}" type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="editRoleFunction.code!=null"

-			maxlength="30" /> 

-		</div>

-		<br/>

-		<button id="button-admin-save" type="submit" ng-click="saveRoleFunction(editRoleFunction);"  class="btn btn-alt btn-small">Save</button>

-		

-	</div>

-	

-</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<style>
+.c-ecomp-abs-table .tablesorter-default tbody tr td div {
+  line-height: 20px;
+}
+
+.c-ecomp-abs-table{
+    width: 100%;
+    height: 600px;
+    overflow-x: auto;
+    overflow-y: auto;
+	background-color: white;
+}
+</style>
+<div class="w-ecomp-admins-page-main">
+	<div class="admins-home-container" id="page-content">	
+    <div id="title" class="w-ecomp-main-view-title">
+    <h3 class="heading-page" >Role Functions</h3>
+    </div>
+	        
+	
+	<br>
+	
+	<div class="admins-table">
+	
+	 <!-- <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small" ></a> -->
+	        <div id="create-new-admin" align="left" style="marin-bottom: 50px;">
+				<button id="button-admin-create" type="submit" ng-click="addNewRoleFunctionModalPopup();" 
+					 class="btn btn-alt btn-small">Create</button>
+			</div>
+			
+			<div style="text-align: justify;text-align-last:auto;">
+			<!-- 	Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.  -->
+			</div>
+	
+	<div id="rolesTable" class="c-ecomp-abs-table default"  title="Role Functions">
+	  <table b2b-table table-data="availableRoleFunctions" current-page="1">
+	  	<thead b2b-table-row type="header">
+	  		<tr>
+	  			<th id="table-header-name" b2b-table-header width="70%" key="name" sortable="true">Name</th>
+	  			<th id="table-header-code" b2b-table-header width="10%" key="code" sortable="true">Code</th>
+	  			<th id="table-header-edit" b2b-table-header width="10%" sortable="false">Edit?</th>
+	  			<th id="table-header-delete" b2b-table-header width="10%" sortable="false">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody b2b-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+		  <tr>
+		    <td id="table-body-role-{{availableRoleFunction['name'].split(' ').join('-')}}" b2b-table-body width="70%" ng-bind="availableRoleFunction['name']"></td>
+		    <td id="table-body-role-{{availableRoleFunction['code']}}" b2b-table-body width="10%" ng-bind="availableRoleFunction['code']"></td>
+		    <td id="table-body" b2b-table-body width="10%">
+		    <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >
+		    <img src="static/fusion/images/editicon.gif">
+		    </a> -->
+		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-edit" href="javascript:void(0)" class="icon-edit"></a></div>
+		    </td>
+		     <td b2b-table-body width="10%">
+		    	<!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->
+		    	<div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-trash" href="javascript:void(0)" class="icon-misc-trash"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+		   
+	
+	</div>
+	
+	
+	<div id="dialog" title="Add Role Function">
+	   	
+	   	<div id="fn-ebz-container-name" class="fn-ebz-container" >
+		<label id="fn-ebz-label-name" class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+		<input id="fn-ebz-input-{{editRoleFunction.name}}" type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+			maxlength="30" /> 
+		</div>
+	   	<br/>
+	   	<div id="fn-ebz-container-code" class="fn-ebz-container" >
+		<label id="fn-ebz-label-code" class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+		<input id="fn-ebz-input-{{editRoleFunction.code}}" type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="editRoleFunction.code!=null"
+			maxlength="30" /> 
+		</div>
+		<br/>
+		<button id="button-admin-save" type="submit" ng-click="saveRoleFunction(editRoleFunction);"  class="btn btn-alt btn-small">Save</button>
+		
+	</div>
+	
+</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html b/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html
index 7d80d81e..52c4cb3a 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html
@@ -1,49 +1,55 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<link rel="stylesheet" href="role.css">

-<div class="application-details-modal">

-    <div id="title" class="title">Select Role Functions</div>

-<div class="scrolling-table">

-	<div b2b-table table-data="availableRoleFunctions"   class="b2b-table-div">

-		<table>

-			<thead b2b-table-row type="header">

-				<tr >

-					<th b2b-table-header key="firstName" sortable="true" id="col1"></th>

-					<th b2b-table-header key="name" sortable="true" id="col2">Name</th>

-				</tr>

-			</thead>

-			<tbody b2b-table-row type="body" 	row-repeat="rowData in availableRoleFunctions">

-				<tr>

-					<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1">

-						<label class="btn-switch-label" tabindex="0" role="option">

-							<input type="checkbox" b2b-switches ng-model="rowData.selected" ng-click="toggleRoleFunction(rowData.selected,rowData);">

-					    </label> 

-					</td>

-					<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.name"></td>

-											

-				</tr>

-			</tbody>

-		</table>

-	</div>

-</div>

-    <div class="dialog-control">

-        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<link rel="stylesheet" href="role.css">
+<div class="application-details-modal">
+    <div id="title" class="title">Select Role Functions</div>
+<div class="scrolling-table">
+	<div b2b-table table-data="availableRoleFunctions"   class="b2b-table-div">
+		<table>
+			<thead b2b-table-row type="header">
+				<tr >
+					<th b2b-table-header key="firstName" sortable="true" id="col1"></th>
+					<th b2b-table-header key="name" sortable="true" id="col2">Name</th>
+				</tr>
+			</thead>
+			<tbody b2b-table-row type="body" 	row-repeat="rowData in availableRoleFunctions">
+				<tr>
+					<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1">
+						<label class="btn-switch-label" tabindex="0" role="option">
+							<input id="row-input-{{$index}}" type="checkbox" b2b-switches ng-model="rowData.selected" ng-click="toggleRoleFunction(rowData.selected,rowData);">
+					    </label> 
+					</td>
+					<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.name"></td>
+											
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+    <div class="dialog-control">
+        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>
+    </div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_list.html b/ecomp-portal-FE-common/client/app/views/role/role_list.html
index e8d56cab..74de7c23 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_list.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_list.html
@@ -1,55 +1,57 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-admins-page-main">

-	<div class="admins-home-container" id="page-content">

-		<div id="title" class="w-ecomp-main-view-title">

-			<h1 class="heading-page" >Roles</h1>

-		</div>

-		<div class="admins-table">

-			<div id="button-create-role" align="left" style="marin-bottom: 50px;" >

-				<button ng-click="goToUrl(0)" class = "btn btn-alt btn-small">Create</button>

-			</div>

-			<div b2b-table table-data="availableRoles"  search-string="searchString" class="b2b-table-div">

-		        <table>

-		            <thead b2b-table-row type="header">

-		                <tr>

-		                    <th b2b-table-header key="name" sortable="true" default-sort="a" id="col1">Name</th>

-		                    <th b2b-table-header key="priority" sortable="true" id="col2">Priority</th>

-		                    <th b2b-table-header id="col3" sortable="false">Active</th>

-		                </tr>

-		            </thead>

-		            <tbody b2b-table-row type="body" row-repeat="rowData in availableRoles">

-		                <tr>

-		                    <td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData['name']"></td>

-		                    <td b2b-table-body ng-bind="rowData['priority']"></td>

-		                    <td b2b-table-body headers="rowheader_t1_{{$index}} col3" >

-		                    	<div >

-						    		<label class="btn-switch-label" tabindex="0" role="option">

-										<input type="checkbox" b2b-switches ng-model="rowData.active" ng-click="toggleRole(rowData.active,rowData);">

-								    </label> 

-						    	</div>

-		                    </td>

-		                </tr>

-		            </tbody>

-		        </table>

-		    </div>

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-admins-page-main">
+	<div class="admins-home-container" id="page-content">
+		<div id="title" class="w-ecomp-main-view-title">
+			<h1 class="heading-page" >Roles</h1>
+		</div>
+		<div class="admins-table">
+			<div id="button-create-role" align="left" style="marin-bottom: 50px;" >
+				<button ng-click="goToUrl(0)" class = "btn btn-alt btn-small">Create</button>
+			</div>
+			<div b2b-table table-data="availableRoles"  search-string="searchString" class="b2b-table-div">
+		        <table>
+		            <thead b2b-table-row type="header">
+		                <tr>
+		                    <th b2b-table-header key="name" sortable="true" default-sort="a" id="col1">Name</th>
+		                    <th b2b-table-header key="priority" sortable="true" id="col2">Priority</th>
+		                    <th b2b-table-header id="col3" sortable="false">Active</th>
+		                    <th b2b-table-header id="col4" sortable="false">Edit</th>
+		                </tr>
+		            </thead>
+		            <tbody b2b-table-row type="body" row-repeat="rowData in availableRoles">
+		                <tr>
+		                    <td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData['name']"></td>
+		                    <td b2b-table-body ng-bind="rowData['priority']"></td>
+		                    <td b2b-table-body headers="rowheader_t1_{{$index}} col3" >
+		                    	<div >
+						    		<label class="btn-switch-label" tabindex="0" role="option">
+										<input type="checkbox" b2b-switches ng-model="rowData.active" ng-click="toggleRole(rowData.active,rowData);">
+								    </label> 
+						    	</div>
+		                    </td>
+		                    <td b2b-table-body class="icon-misc-pen" ng-click="goToUrl(rowData.id)"></td>    
+		                </tr>
+		            </tbody>
+		        </table>
+		    </div>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js b/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js
index 6275c760..db5bb1b6 100644
--- a/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js
+++ b/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js
@@ -1,95 +1,95 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-app.controller('rolefunctionpopupController', function ($scope, confirmBoxService, message, $http,RoleService, conf, isEditing){

-				if(message.availableRoleFunction==null) {

-					$scope.label='Add Role Function';

-					var tempText = "";

-				}

-				else{

-					$scope.label='Edit Role Function'

-					$scope.disableCd=true;

-					var tempText = new String(message.availableRoleFunction.name);

-					$scope.editRoleFunction = angular.copy(message.availableRoleFunction);

-				}

-				

-				$scope.tempText = tempText;

-				$scope.isEditing = isEditing;

-				

-				$scope.saveRoleFunction = function(availableRoleFunction) {

-					  var uuu = conf.api.saveRoleFunction;

-					  var postData={availableRoleFunction: availableRoleFunction};

-

-					  if(availableRoleFunction==null){

-						  confirmBoxService.showInformation("Please enter valid role function details.");

-					  }

-					  var exists = false,x;

-					  for(x in message.availableRoleFunctions){

-						  console.log(message.availableRoleFunctions[x].name);

-							if(message.availableRoleFunctions[x].name==availableRoleFunction.name){

-								confirmBoxService.showInformation("Role Function already exists.");

-								exists = true;

-								availableRoleFunction.name = $scope.tempText;

-								break;

-							} 

-							if(!isEditing){

-								if (message.availableRoleFunctions[x].code == availableRoleFunction.code) {

-									confirmBoxService.showInformation("Code already exists. Please create a role function with a different code to proceed.");

-									exists = true;

-									availableRoleFunction.name = $scope.tempText;

-									break;

-								}

-							}

-					  }

-					  

-					  if(!exists && availableRoleFunction.name.trim() != '' && availableRoleFunction.code.trim() != ''){

-			              $http.post(uuu, JSON.stringify(postData)).then(function(res){

-			            	  console.log("data");

-//			            	  console.log(res.data);

-//			            	  $scope.availableRoleFunctionsTemp = res.data.availableRoleFunctions;

-			            	  RoleService.getRoleFunctionList().then(function(data){

-			            			

-			            			var j = data;

-			            	  		$scope.data = JSON.parse(j.data);

-			            	  		$scope.availableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);

-			            	  		

-			            	  		//$scope.resetMenu();

-			            	  		$scope.closeThisDialog({result: true, availableRoleFunctions: $scope.availableRoleFunctions });

-			            		},function(error){

-			            			console.log("failed");

-			            			//reloadPageOnce();

-			            			$scope.closeThisDialog(true);		            			

-			            		});

-			            	  

-			            	  

-			              });						  

-						  

-						  

-						  

-						  

-						}

-				};

-					  

-				  	  

-					

-				$scope.close = function() { 

-					this.closeThisDialog(true);

-				};

-}

-);

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+app.controller('rolefunctionpopupController', function ($scope, confirmBoxService, message, $http,RoleService, conf, isEditing){
+				if(message.availableRoleFunction==null) {
+					$scope.label='Add Role Function';
+					var tempText = "";
+				}
+				else{
+					$scope.label='Edit Role Function'
+					$scope.disableCd=true;
+					var tempText = new String(message.availableRoleFunction.name);
+					$scope.editRoleFunction = angular.copy(message.availableRoleFunction);
+				}
+				
+				$scope.tempText = tempText;
+				$scope.isEditing = isEditing;
+				
+				$scope.saveRoleFunction = function(availableRoleFunction) {
+					  var uuu = conf.api.saveRoleFunction;
+					  var postData={availableRoleFunction: availableRoleFunction};
+
+					  if(availableRoleFunction==null){
+						  confirmBoxService.showInformation("Please enter valid role function details.");
+					  }
+					  var exists = false,x;
+					  for(x in message.availableRoleFunctions){
+						  console.log(message.availableRoleFunctions[x].name);
+							if(message.availableRoleFunctions[x].name==availableRoleFunction.name){
+								confirmBoxService.showInformation("Role Function already exists.");
+								exists = true;
+								availableRoleFunction.name = $scope.tempText;
+								break;
+							} 
+							if(!isEditing){
+								if (message.availableRoleFunctions[x].code == availableRoleFunction.code) {
+									confirmBoxService.showInformation("Code already exists. Please create a role function with a different code to proceed.");
+									exists = true;
+									availableRoleFunction.name = $scope.tempText;
+									break;
+								}
+							}
+					  }
+					  
+					  if(!exists && availableRoleFunction.name.trim() != '' && availableRoleFunction.code.trim() != ''){
+			              $http.post(uuu, JSON.stringify(postData)).then(function(res){
+			            	  console.log("data");
+//			            	  console.log(res.data);
+//			            	  $scope.availableRoleFunctionsTemp = res.data.availableRoleFunctions;
+			            	  RoleService.getRoleFunctionList().then(function(data){
+			            			
+			            			var j = data;
+			            	  		$scope.data = JSON.parse(j.data);
+			            	  		$scope.availableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
+			            	  		
+			            	  		//$scope.resetMenu();
+			            	  		$scope.closeThisDialog({result: true, availableRoleFunctions: $scope.availableRoleFunctions });
+			            		},function(error){
+			            			console.log("failed");
+			            			//reloadPageOnce();
+			            			$scope.closeThisDialog(true);		            			
+			            		});
+			            	  
+			            	  
+			              });						  
+						  
+						  
+						  
+						  
+						}
+				};
+					  
+				  	  
+					
+				$scope.close = function() { 
+					this.closeThisDialog(true);
+				};
+}
+);
diff --git a/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js b/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js
index 7feb7f2f..1176e50a 100644
--- a/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js
+++ b/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js
@@ -1,251 +1,251 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-app.controller('rolepopupController',  function ($scope, role, roleId, confirmBoxService, $http, $state, availableRoles, conf, availableRoleFunctions,ngDialog){

-	

-	  		$scope.role = role;

-	  		console.log($scope.role);

-	  		if($scope.role.childRoles==null){

-	  			$scope.role.childRoles=[];

-	  		}

-	  		

-	  		$scope.ociavailableRoles=availableRoles;

-	  		console.log($scope.ociavailableRoles);

-	  		

-	  		$scope.availableRoles=[];

-	  		if($scope.ociavailableRoles)

-	  			$.each($scope.ociavailableRoles, function(i, a){ 

-	  				var availableRole = a;

-	  				availableRole.selected = false;

-	  				if($scope.role.childRoles){

-	  			    $.each($scope.role.childRoles, function(j, b){ 

-	  			    	if(a.id === b.id) {

-	  			    		availableRole.selected = true;

-	  			    	}

-	  			    });

-	  				};

-	  			    $scope.availableRoles.push(availableRole);	    

-	  			});	

-	  			

-	  		$scope.ociavailableRoleFunctions = availableRoleFunctions; 

-	  		console.log($scope.ociavailableRoleFunctions);

-	  		$scope.availableRoleFunctions = []; 

-	  		if($scope.ociavailableRoleFunctions)

-	  			$.each($scope.ociavailableRoleFunctions, function(i, a){ 

-	  				var availableRoleFunction = a;

-	  				availableRoleFunction.selected = false;

-	  			    $.each($scope.role.roleFunctions, function(j, b){ 

-	  			    	if(a.code === b.code) {

-	  			    		availableRoleFunction.selected = true;

-	  			    	}

-	  			    });

-	  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    

-	  		});

-	  		//$scope.resetMenu();

-		

-		$scope.toggleRoleFunction = function(selected,availableRoleFunction) {

-			//alert('toggleRole: '+selected);

-			 

-			if(!selected) {

-				//remove role function

-				if(role.id==null){

-					var index = $scope.role.roleFunctions.indexOf(availableRoleFunction);

-				 	if(index>=0)

-						$scope.role.roleFunctions.splice(index, 1);

-					return;

-				}

-				var uuu = conf.api.toggleRoleRoleFunction + "?role_id=" + roleId;

-				confirmBoxService.confirm("You are about to remove the role function "+availableRoleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(

-		    			function(confirmed){

-		    					if(confirmed) {	

-								var postData={roleFunction:availableRoleFunction};

-								$http.post(uuu, postData).then(

-										function(response) {

-											$scope.role= response.data.role;

-										}, 

-										function(response) {

-											confirmBoxService.showInformation("Error while saving.");

-										}

-								);

-									

-									

-									

-									

-								}

-		    					 else {

-		    						 availableRoleFunction.selected=!availableRoleFunction.selected;

-			    				 }

-								/*

-							  	  $.ajax({

-							  		 type : 'POST',

-							  		 url : uuu,

-							  		 dataType: 'json',

-							  		 contentType: 'application/json',

-							  		 data: JSON.stringify(postData),

-							  		 success : function(data){

-							  			$scope.$apply(function(){$scope.role=data.role;}); 

-									 },

-									 error : function(data){

-										 modalService.showFailure("Fail","Error while saving.");

-									 }

-							  	  });

-							  	  */

-		    			});

-	

-			} else {

-				//add role function

-				if(role.id==null){

-					$scope.role.roleFunctions.push(availableRoleFunction);

-					return;

-				}

-				var uuu = conf.api.addRoleRoleFunction + "?role_id=" + roleId;

-				

-				confirmBoxService.confirm("You are about to add the role function "+availableRoleFunction.name+" to the role for "+$scope.role.name+". Do you want to continue?").then(

-		    			function(confirmed){

-		    				if(confirmed) {

-								  var postData={roleFunction:availableRoleFunction};

-								  $http.post(uuu,postData).then( function(response) {

-									  $scope.role=response.data.role;

-									  },

-									  

-									  function(data) {

-										  confirmBoxService.showInformation("Error while saving.");

-									  });

-							} else {

-									  availableRoleFunction.selected=!availableRoleFunction.selected;

-							}

-									/*		  

-								  	  $.ajax({

-								  		 type : 'POST',

-								  		 url : uuu,

-								  		 dataType: 'json',

-								  		 contentType: 'application/json',

-								  		 data: JSON.stringify(postData),

-								  		 success : function(data){

-								  			$scope.$apply(function(){$scope.role=data.role;}); 

-										 },

-										 error : function(data){

-											 modalService.showFailure("Fail","Error while saving.");

-										 }

-								  	  });

-								  	  

-									

-						    	},

-						    	function(){

-						    		availableRoleFunction.selected=!availableRoleFunction.selected;

-						    	})*/

-			});

-			

-			  

-	}

-		};

-	

-	$scope.toggleChildRole = function(selected,availableRole) {

-		//alert('toggleRole: '+selected);

-

-		if(!selected) {

-			//remove role

-			if(role.id==null){

-				var index = $scope.role.childRoles.indexOf(availableRole);

-			 	if(index>=0)

-					$scope.role.childRoles.splice(index, 1);

-				return;

-			}

-			var uuu = conf.api.toggleRoleChildRole +"?role_id=" + roleId;

-			

-			confirmBoxService.confirm("You are about to remove the child role "+availableRole.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(

-	    			function(confirmed){

-	    				if(confirmed) {

-	    			

-						var postData={childRole:availableRole};

-						 $http.post(uuu,postData).then(function(response) {

-							  $scope.role=response.data.role;

-							  },

-							  function(data) {

-								  confirmBoxService.showInformation("Error while saving.");

-							  });

-						  } else {

-							  availableRole.selected=false;

-						  }

-	    			});

-					  	 /* $.ajax({

-					  		 type : 'POST',

-					  		 url : uuu,

-					  		 dataType: 'json',

-					  		 contentType: 'application/json',

-					  		 data: JSON.stringify(postData),

-					  		 success : function(data){

-					  			 console.log('role',data.role);

-					  			 $scope.$apply(function(){$scope.role=data.role;}); 

-							 },

-							 error : function(data){

-								 modalService.showFailure("Fail","Error while saving.");

-							 }

-					  	  });

-					  	  */

-				

-	    	

-		} else {

-			//add role

-			if(role.id==null){

-				$scope.role.childRoles.push(availableRole);

-				return;

-			}

-			var uuu = conf.api.addRoleChildRole +"?role_id=" + roleId;

-			

-			confirmBoxService.confirm("You are about to add the child role "+availableRole.name+" to the role for "+$scope.role.name+". Do you want to continue?").then(

-	    			function(confirmed){

-	    				if(confirmed) {

-						  var postData={childRole:availableRole};

-						  $http.post(uuu,postData).then(function(response) {

-							  $scope.role=response.data.role;

-							  },

-							  function(data) {

-								  confirmBoxService.showInformation("Error while saving.");

-							  });

-						  } else {

-							  availableRole.selected=false;

-						  }

-			  	 /* $.ajax({

-			  		 type : 'POST',

-			  		 url : uuu,

-			  		 dataType: 'json',

-			  		 contentType: 'application/json',

-			  		 data: JSON.stringify(postData),

-			  		 success : function(data){

-			  			$scope.$apply(function(){$scope.role=data.role;}); 

-					 },

-					 error : function(data){

-						 modalService.showFailure("Fail","Error while saving.");

-					 }

-			  	});*/

-				

-	    	});

-		

-		  

-	}

-	};

-	

-	$scope.close = function() {

-		console.log('role', $scope.role);

-		//$modalInstance.close({role:$scope.role});

-		this.closeThisDialog(true);

-	};

-	

-});

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+app.controller('rolepopupController',  function ($scope, role, roleId, confirmBoxService, $http, $state, availableRoles, conf, availableRoleFunctions,ngDialog){
+	
+	  		$scope.role = role;
+	  		console.log($scope.role);
+	  		if($scope.role.childRoles==null){
+	  			$scope.role.childRoles=[];
+	  		}
+	  		
+	  		$scope.ociavailableRoles=availableRoles;
+	  		console.log($scope.ociavailableRoles);
+	  		
+	  		$scope.availableRoles=[];
+	  		if($scope.ociavailableRoles)
+	  			$.each($scope.ociavailableRoles, function(i, a){ 
+	  				var availableRole = a;
+	  				availableRole.selected = false;
+	  				if($scope.role.childRoles){
+	  			    $.each($scope.role.childRoles, function(j, b){ 
+	  			    	if(a.id === b.id) {
+	  			    		availableRole.selected = true;
+	  			    	}
+	  			    });
+	  				};
+	  			    $scope.availableRoles.push(availableRole);	    
+	  			});	
+	  			
+	  		$scope.ociavailableRoleFunctions = availableRoleFunctions; 
+	  		console.log($scope.ociavailableRoleFunctions);
+	  		$scope.availableRoleFunctions = []; 
+	  		if($scope.ociavailableRoleFunctions)
+	  			$.each($scope.ociavailableRoleFunctions, function(i, a){ 
+	  				var availableRoleFunction = a;
+	  				availableRoleFunction.selected = false;
+	  			    $.each($scope.role.roleFunctions, function(j, b){ 
+	  			    	if(a.code === b.code) {
+	  			    		availableRoleFunction.selected = true;
+	  			    	}
+	  			    });
+	  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    
+	  		});
+	  		//$scope.resetMenu();
+		
+		$scope.toggleRoleFunction = function(selected,availableRoleFunction) {
+			//alert('toggleRole: '+selected);
+			 
+			if(!selected) {
+				//remove role function
+				if(role.id==null){
+					var index = $scope.role.roleFunctions.indexOf(availableRoleFunction);
+				 	if(index>=0)
+						$scope.role.roleFunctions.splice(index, 1);
+					return;
+				}
+				var uuu = conf.api.toggleRoleRoleFunction + "?role_id=" + roleId;
+				confirmBoxService.confirm("You are about to remove the role function "+availableRoleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(
+		    			function(confirmed){
+		    					if(confirmed) {	
+								var postData={roleFunction:availableRoleFunction};
+								$http.post(uuu, postData).then(
+										function(response) {
+											$scope.role= response.data.role;
+										}, 
+										function(response) {
+											confirmBoxService.showInformation("Error while saving.");
+										}
+								);
+									
+									
+									
+									
+								}
+		    					 else {
+		    						 availableRoleFunction.selected=!availableRoleFunction.selected;
+			    				 }
+								/*
+							  	  $.ajax({
+							  		 type : 'POST',
+							  		 url : uuu,
+							  		 dataType: 'json',
+							  		 contentType: 'application/json',
+							  		 data: JSON.stringify(postData),
+							  		 success : function(data){
+							  			$scope.$apply(function(){$scope.role=data.role;}); 
+									 },
+									 error : function(data){
+										 modalService.showFailure("Fail","Error while saving.");
+									 }
+							  	  });
+							  	  */
+		    			});
+	
+			} else {
+				//add role function
+				if(role.id==null){
+					$scope.role.roleFunctions.push(availableRoleFunction);
+					return;
+				}
+				var uuu = conf.api.addRoleRoleFunction + "?role_id=" + roleId;
+				
+				confirmBoxService.confirm("You are about to add the role function "+availableRoleFunction.name+" to the role for "+$scope.role.name+". Do you want to continue?").then(
+		    			function(confirmed){
+		    				if(confirmed) {
+								  var postData={roleFunction:availableRoleFunction};
+								  $http.post(uuu,postData).then( function(response) {
+									  $scope.role=response.data.role;
+									  },
+									  
+									  function(data) {
+										  confirmBoxService.showInformation("Error while saving.");
+									  });
+							} else {
+									  availableRoleFunction.selected=!availableRoleFunction.selected;
+							}
+									/*		  
+								  	  $.ajax({
+								  		 type : 'POST',
+								  		 url : uuu,
+								  		 dataType: 'json',
+								  		 contentType: 'application/json',
+								  		 data: JSON.stringify(postData),
+								  		 success : function(data){
+								  			$scope.$apply(function(){$scope.role=data.role;}); 
+										 },
+										 error : function(data){
+											 modalService.showFailure("Fail","Error while saving.");
+										 }
+								  	  });
+								  	  
+									
+						    	},
+						    	function(){
+						    		availableRoleFunction.selected=!availableRoleFunction.selected;
+						    	})*/
+			});
+			
+			  
+	}
+		};
+	
+	$scope.toggleChildRole = function(selected,availableRole) {
+		//alert('toggleRole: '+selected);
+
+		if(!selected) {
+			//remove role
+			if(role.id==null){
+				var index = $scope.role.childRoles.indexOf(availableRole);
+			 	if(index>=0)
+					$scope.role.childRoles.splice(index, 1);
+				return;
+			}
+			var uuu = conf.api.toggleRoleChildRole +"?role_id=" + roleId;
+			
+			confirmBoxService.confirm("You are about to remove the child role "+availableRole.name+" from the role for "+$scope.role.name+". Do you want to continue?").then(
+	    			function(confirmed){
+	    				if(confirmed) {
+	    			
+						var postData={childRole:availableRole};
+						 $http.post(uuu,postData).then(function(response) {
+							  $scope.role=response.data.role;
+							  },
+							  function(data) {
+								  confirmBoxService.showInformation("Error while saving.");
+							  });
+						  } else {
+							  availableRole.selected=false;
+						  }
+	    			});
+					  	 /* $.ajax({
+					  		 type : 'POST',
+					  		 url : uuu,
+					  		 dataType: 'json',
+					  		 contentType: 'application/json',
+					  		 data: JSON.stringify(postData),
+					  		 success : function(data){
+					  			 console.log('role',data.role);
+					  			 $scope.$apply(function(){$scope.role=data.role;}); 
+							 },
+							 error : function(data){
+								 modalService.showFailure("Fail","Error while saving.");
+							 }
+					  	  });
+					  	  */
+				
+	    	
+		} else {
+			//add role
+			if(role.id==null){
+				$scope.role.childRoles.push(availableRole);
+				return;
+			}
+			var uuu = conf.api.addRoleChildRole +"?role_id=" + roleId;
+			
+			confirmBoxService.confirm("You are about to add the child role "+availableRole.name+" to the role for "+$scope.role.name+". Do you want to continue?").then(
+	    			function(confirmed){
+	    				if(confirmed) {
+						  var postData={childRole:availableRole};
+						  $http.post(uuu,postData).then(function(response) {
+							  $scope.role=response.data.role;
+							  },
+							  function(data) {
+								  confirmBoxService.showInformation("Error while saving.");
+							  });
+						  } else {
+							  availableRole.selected=false;
+						  }
+			  	 /* $.ajax({
+			  		 type : 'POST',
+			  		 url : uuu,
+			  		 dataType: 'json',
+			  		 contentType: 'application/json',
+			  		 data: JSON.stringify(postData),
+			  		 success : function(data){
+			  			$scope.$apply(function(){$scope.role=data.role;}); 
+					 },
+					 error : function(data){
+						 modalService.showFailure("Fail","Error while saving.");
+					 }
+			  	});*/
+				
+	    	});
+		
+		  
+	}
+	};
+	
+	$scope.close = function() {
+		console.log('role', $scope.role);
+		//$modalInstance.close({role:$scope.role});
+		this.closeThisDialog(true);
+	};
+	
+});
diff --git a/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.controller.js b/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.controller.js
index 6d0f2d1e..63a3abb7 100644
--- a/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.controller.js
@@ -1,63 +1,63 @@
-/*-

- * ================================================================================

- * 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 () {

-    class SidebarCtrl {

-        constructor(applicationsService,userProfileService, $log, $rootScope) {

-            this.$log = $log;

-            this.userProfileService = userProfileService;

-            this.$rootScope = $rootScope;

-            $rootScope.isAdminPortalAdmin = false;

-

-

-            //if (bowser.msie || bowser.msedge)

-            //    $log.debug('SidebarCtrl::init: Browser is: Internet Explorer or Edge');

-            // else

-            //    $log.debug('SidebarCtrl::init: Browser is: ' + bowser.name + ': ' + bowser.version);

-

-            //note: this model should be retrieved from BE via sidebar specific service

-            	userProfileService.getUserProfile()

-                .then(profile=> {

-                	

-                	if (profile.roles.indexOf('System Administrator') > -1) {

-                        $rootScope.isAdminPortalAdmin = true;

-                	} else {

-                		 this.$log.debug('SidebarCtrl::getUserProfile: user is not superAdmin nor admin');

-                	}

-                });

-                // $log.debug('SidebarCtrl::getUserProfile: profile.roles.indexOf(superAdmin) = ' + profile.roles.indexOf('superAdmin'));

-                // $log.debug('SidebarCtrl::getUserProfile: profile.roles.indexOf(admin) = ' + profile.roles.indexOf('admin'));

-            	applicationsService

-    			.getLeftMenuItems()

-    			.then(res=>

-    				 {

-    						//console.log("Menu items is "+JSON.stringify(res));

-    						this.sidebarModel = res;	 

-    				 }).catch(err => {

-            		//confirmBoxService.showInformation('There was a problem creating the menu. ' +

-                    // 'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});

-            		$log.error('SidebarCtrl::getUserProfile: User Profile error occurred: ' + err);

-    				});

-    

-        }

-    }

-    SidebarCtrl.$inject = ['applicationsService','userProfileService', '$log', '$rootScope'];

-    angular.module('ecompApp').controller('SidebarCtrl', SidebarCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class SidebarCtrl {
+        constructor(applicationsService,userProfileService, $log, $rootScope) {
+            this.$log = $log;
+            this.userProfileService = userProfileService;
+            this.$rootScope = $rootScope;
+            $rootScope.isAdminPortalAdmin = false;
+
+
+            //if (bowser.msie || bowser.msedge)
+            //    $log.debug('SidebarCtrl::init: Browser is: Internet Explorer or Edge');
+            // else
+            //    $log.debug('SidebarCtrl::init: Browser is: ' + bowser.name + ': ' + bowser.version);
+
+            //note: this model should be retrieved from BE via sidebar specific service
+            	userProfileService.getUserProfile()
+                .then(profile=> {
+                	
+                	if (profile.roles.indexOf('System Administrator') > -1) {
+                        $rootScope.isAdminPortalAdmin = true;
+                	} else {
+                		 this.$log.debug('SidebarCtrl::getUserProfile: user is not superAdmin nor admin');
+                	}
+                });
+                // $log.debug('SidebarCtrl::getUserProfile: profile.roles.indexOf(superAdmin) = ' + profile.roles.indexOf('superAdmin'));
+                // $log.debug('SidebarCtrl::getUserProfile: profile.roles.indexOf(admin) = ' + profile.roles.indexOf('admin'));
+            	applicationsService
+    			.getLeftMenuItems()
+    			.then(res=>
+    				 {
+    						//console.log("Menu items is "+JSON.stringify(res));
+    						this.sidebarModel = res;	 
+    				 }).catch(err => {
+            		//confirmBoxService.showInformation('There was a problem creating the menu. ' +
+                    // 'Please try again later. Error Status: '+ err.status).then(isConfirmed => {});
+            		$log.error('SidebarCtrl::getUserProfile: User Profile error occurred: ' + err);
+    				});
+    
+        }
+    }
+    SidebarCtrl.$inject = ['applicationsService','userProfileService', '$log', '$rootScope'];
+    angular.module('ecompApp').controller('SidebarCtrl', SidebarCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.less b/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.less
index f86b5afd..97650fed 100644
--- a/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.less
+++ b/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.less
@@ -1,37 +1,37 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

- .w-ecomp-sidebar {

-    position: relative;

-    left: 0;

-    right: 0;

-    top: 5px;

-    padding-left: 0;

-}

-  

-  @media screen and (-webkit-min-device-pixel-ratio:0)

-{ 

-    .w-ecomp-sidebar {

-	  position: relative;

-	  left: 0;

-	  right: 0;

-	  top: -5px;

-	  padding-left: 0;

-    }

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+ .w-ecomp-sidebar {
+    position: relative;
+    left: 0;
+    right: 0;
+    top: 5px;
+    padding-left: 0;
+}
+  
+  @media screen and (-webkit-min-device-pixel-ratio:0)
+{ 
+    .w-ecomp-sidebar {
+	  position: relative;
+	  left: 0;
+	  right: 0;
+	  top: -5px;
+	  padding-left: 0;
+    }
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.tpl.html b/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.tpl.html
index 95492ed1..a5cbf8ff 100644
--- a/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/sidebar/sidebar.tpl.html
@@ -1,20 +1,20 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<left-menu id="sidebar.sidebarModel" sidebar-model="sidebar.sidebarModel" class="w-ecomp-sidebar"></left-menu>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<left-menu id="sidebar.sidebarModel" sidebar-model="sidebar.sidebarModel" class="w-ecomp-sidebar"></left-menu>
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.js b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.js
index 8413382e..8c76abc2 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.js
@@ -1,202 +1,202 @@
-/*-

- * ================================================================================

- * 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 () {

-    class ContactUsManageController {

-        constructor($scope,$log, message, $q, $http, conf,contactUsService,confirmBoxService) {

-        	$scope.contactUsList=[];

-        	$scope.contactUsAllAppList=[];

-        	$scope.errMsg='';

-        	$scope.newContactUs ={

-        			app:'',

-        			name:'',

-        			email:'',

-        			url:'',

-        			desc:''       			

-        	};

-        	/*Get the existing contact us first, then based on the existing, filter from all apps*/

-        	$scope.getContactUsList = function(){

-        		contactUsService.getContactUs().then(res=> {

-            		// $log.info('getting getContactUs',res.response);

-            		if(res!=null && res.response!=null){

-            			for(var i=0; i<res.response.length;i++){

-            				if(res.response[i].appId!=1)

-            					$scope.contactUsList.push(res.response[i]);

-            			}

-            		}

-            		/*get all the apps*/

-            		contactUsService.getListOfApp().then(res=> {

-                    	var tableData=[];

-                    	$scope.contactUsAllAppListTemp=[];

-                    	// $log.info('contactUsService::getListOfApp: getting res');

-                    	var result = (typeof(res.data) != "undefined" && res.data!=null)?res.data:null;

-                    	// $log.info('contactUsService::getListOfApp: result',result);  	

-                    	var res1 = result;

-                        var realAppIndex = 0;

-                        $scope.contactUsAllAppList.length=0;

-                        for (var i = 1; i <= res1.length; i++) {

-                            if (!res1[i - 1].restrictedApp) {

-                            	var okToAdd = true;

-                            	for(var j =0; j<$scope.contactUsList.length;j++){

-                            		if(res1[i - 1].title==$scope.contactUsList[j].appName)

-                            			okToAdd=false;

-                            	}

-                            	// not allowed to add(duplicate) another entry if the app is already available in the table

-                            	if(okToAdd){

-                            		if(res1[i - 1].title){

-                            			$scope.contactUsAllAppList.push({

-                                            index: realAppIndex,

-                                            title: res1[i - 1].title,

-                                            value: res1[i - 1].index

-                                        });

-                            		}       

-                            		realAppIndex = realAppIndex + 1;

-                            	}         

-                            } else {

-                                // $log.debug('contactUsService:getAvailableApps:: Restricted/URL only App will not be used = ' + res1[i - 1].title);

-                            }

-                        }       

-                    }).catch(err=> {

-                        $log.error('contactUsService:error:: ', err);

-                        

-                       

-                    }).finally(() => {

-                        //this.isLoadingTable = false;

-                    });

-            	});

-        	}

-        	

-        	$scope.getContactUsList();

-        	

-        	$scope.closeDialog = function(){

-        		$scope.closeThisDialog( $scope.widgetData);

-        	}

-        	

-        	/*Add new Contact Us*/

-        	$scope.newContactUsFun = function(){ 

-        		if($scope.newContactUs.app.title==null || $scope.newContactUs.app.title=='' ){

-        			confirmBoxService.showInformation('Please select an App to add').then(isConfirmed => {

-        				return;

-        			});	

-        		}

-        					

-    			if($scope.newContactUs.url !=null && $scope.newContactUs.url != '' && !validateUrl($scope.newContactUs.url)){

-    				var warningMsg = "Please enter a valid URL";

-    				confirmBoxService.showInformation(warningMsg).then(isConfirmed => {return;});

-    				return;

-    			}

-    			

-        		contactUsService.addContactUs($scope.newContactUs).then(res=> {

-        			// $log.info('contactUsService: add ContactUs successfully');

-        			$scope.contactUsList.length=0;

-        			// $log.info('contactUsService: refreshing the Contact US table');

-        			$scope.getContactUsList();

-        			$scope.errMsg='';

-        			/*	confirmBoxService.showInformation('You have added a new Contact Us item').then(isConfirmed => {	});*/

-        			var defaultSel={

-    						index: 0,

-                            title: '',

-                            value: ''

-    				}

-    				$scope.newContactUs ={

-    	        			app:defaultSel,       			

-    	        			name:'',

-    	        			email:'',

-    	        			url:'',

-    	        			desc:''       			

-    	        	};

-

-                }).catch(err=> {

-                    $log.error('contactUsService: addContactUs error:: ', err);

-                   // $scope.errMsg=err;

-                    confirmBoxService.showInformation('Add Contact Us list failed: ' + err);

-                   

-                }).finally(() => {

-                    //this.isLoadingTable = false;

-                });

-        	}

-        	/* Edit Contact Us*/

-        	$scope.editContactUsFun = function(contactObj){

-    			// $log.info('contactUsService: edit ContactUs save successfully', contactObj);    			

-    			var contactUsObj={

-                		appId:contactObj.appId,

-                		appName:contactObj.appName,

-                		description:contactObj.description,

-                		contactName:contactObj.contactName,

-                		contactEmail:contactObj.contactEmail,

-                		url:contactObj.url,       		

-                };

-    			

-    			contactUsService.modifyContactUs(contactUsObj).then(res=> {

-        			// $log.info('contactUsService: edit ContactUs successfully');

-    				//	confirmBoxService.showInformation('You have saved the changes').then(isConfirmed => {});

-        			$scope.errMsg='';

-        			

-                }).catch(err=> {

-                    $log.error('contactUsService: editContactUs error:: ', err);

-                    confirmBoxService.showInformation('Edit Contact Us list failed: ' + err);

-                   // $scope.errMsg=err;

-                }).finally(() => {

-                    //this.isLoadingTable = false;

-                });

-        		

-        	}

-        	

-        	$scope.$watch('newContactUs.app.value', (newVal, oldVal) => {

-        		for(var i=0;i<$scope.contactUsAllAppList.length;i++){

-        		if($scope.contactUsAllAppList[i].value==newVal){

-        		$scope.newContactUs.app=angular.copy($scope.contactUsAllAppList[i]);;

-        		}

-        		}

-        		});

-        	/*del Contact Us*/

-        	$scope.delContactUsFun = function(appObj){

-        		var confirmMsg = 'Are you sure you want to delete '+appObj.appName +' from the list?' + ' Press OK to delete.';

-        		confirmBoxService.confirm(confirmMsg).then(function (confirmed) {

-                    if (confirmed == true) {                     	

-                    	contactUsService.removeContactUs(appObj.appId).then(res=> {   

-                    		// $log.info('delContactUsFun: delete ContactUs successfully',res);

-                			$scope.errMsg='';

-                			$scope.contactUsList.length=0;

-                			$scope.getContactUsList();

-                			confirmBoxService.showInformation('Item has been deleted').then(isConfirmed => {});

-                        }).catch(err=> {

-                            $log.error('contactUsService: addContactUs error:: ', err);

-                            confirmBoxService.showInformation('Deletion failed: ' + err);

-                           // $scope.errMsg=err;

-                        }).finally(() => {

-                            //this.isLoadingTable = false;

-                        });

-                    }

-                });

-        		

-        	}	

-        	

-        }        

-    }

-    ContactUsManageController.$inject = ['$scope','$log',  'message', '$q', '$http', 'conf','contactUsService','confirmBoxService'];

-    angular.module('ecompApp').controller('ContactUsManageController', ContactUsManageController);

-

- 

-})();

-function validateUrl(value){

-    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);

-  }

+/*-
+ * ================================================================================
+ * 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 () {
+    class ContactUsManageController {
+        constructor($scope,$log, message, $q, $http, conf,contactUsService,confirmBoxService) {
+        	$scope.contactUsList=[];
+        	$scope.contactUsAllAppList=[];
+        	$scope.errMsg='';
+        	$scope.newContactUs ={
+        			app:'',
+        			name:'',
+        			email:'',
+        			url:'',
+        			desc:''       			
+        	};
+        	/*Get the existing contact us first, then based on the existing, filter from all apps*/
+        	$scope.getContactUsList = function(){
+        		contactUsService.getContactUs().then(res=> {
+            		// $log.info('getting getContactUs',res.response);
+            		if(res!=null && res.response!=null){
+            			for(var i=0; i<res.response.length;i++){
+            				if(res.response[i].appId!=1)
+            					$scope.contactUsList.push(res.response[i]);
+            			}
+            		}
+            		/*get all the apps*/
+            		contactUsService.getListOfApp().then(res=> {
+                    	var tableData=[];
+                    	$scope.contactUsAllAppListTemp=[];
+                    	// $log.info('contactUsService::getListOfApp: getting res');
+                    	var result = (typeof(res.data) != "undefined" && res.data!=null)?res.data:null;
+                    	// $log.info('contactUsService::getListOfApp: result',result);  	
+                    	var res1 = result;
+                        var realAppIndex = 0;
+                        $scope.contactUsAllAppList.length=0;
+                        for (var i = 1; i <= res1.length; i++) {
+                            if (!res1[i - 1].restrictedApp) {
+                            	var okToAdd = true;
+                            	for(var j =0; j<$scope.contactUsList.length;j++){
+                            		if(res1[i - 1].title==$scope.contactUsList[j].appName)
+                            			okToAdd=false;
+                            	}
+                            	// not allowed to add(duplicate) another entry if the app is already available in the table
+                            	if(okToAdd){
+                            		if(res1[i - 1].title){
+                            			$scope.contactUsAllAppList.push({
+                                            index: realAppIndex,
+                                            title: res1[i - 1].title,
+                                            value: res1[i - 1].index
+                                        });
+                            		}       
+                            		realAppIndex = realAppIndex + 1;
+                            	}         
+                            } else {
+                                // $log.debug('contactUsService:getAvailableApps:: Restricted/URL only App will not be used = ' + res1[i - 1].title);
+                            }
+                        }       
+                    }).catch(err=> {
+                        $log.error('contactUsService:error:: ', err);
+                        
+                       
+                    }).finally(() => {
+                        //this.isLoadingTable = false;
+                    });
+            	});
+        	}
+        	
+        	$scope.getContactUsList();
+        	
+        	$scope.closeDialog = function(){
+        		$scope.closeThisDialog( $scope.widgetData);
+        	}
+        	
+        	/*Add new Contact Us*/
+        	$scope.newContactUsFun = function(){ 
+        		if($scope.newContactUs.app.title==null || $scope.newContactUs.app.title=='' ){
+        			confirmBoxService.showInformation('Please select an App to add').then(isConfirmed => {
+        				return;
+        			});	
+        		}
+        					
+    			if($scope.newContactUs.url !=null && $scope.newContactUs.url != '' && !validateUrl($scope.newContactUs.url)){
+    				var warningMsg = "Please enter a valid URL";
+    				confirmBoxService.showInformation(warningMsg).then(isConfirmed => {return;});
+    				return;
+    			}
+    			
+        		contactUsService.addContactUs($scope.newContactUs).then(res=> {
+        			// $log.info('contactUsService: add ContactUs successfully');
+        			$scope.contactUsList.length=0;
+        			// $log.info('contactUsService: refreshing the Contact US table');
+        			$scope.getContactUsList();
+        			$scope.errMsg='';
+        			/*	confirmBoxService.showInformation('You have added a new Contact Us item').then(isConfirmed => {	});*/
+        			var defaultSel={
+    						index: 0,
+                            title: '',
+                            value: ''
+    				}
+    				$scope.newContactUs ={
+    	        			app:defaultSel,       			
+    	        			name:'',
+    	        			email:'',
+    	        			url:'',
+    	        			desc:''       			
+    	        	};
+
+                }).catch(err=> {
+                    $log.error('contactUsService: addContactUs error:: ', err);
+                   // $scope.errMsg=err;
+                    confirmBoxService.showInformation('Add Contact Us list failed: ' + err);
+                   
+                }).finally(() => {
+                    //this.isLoadingTable = false;
+                });
+        	}
+        	/* Edit Contact Us*/
+        	$scope.editContactUsFun = function(contactObj){
+    			// $log.info('contactUsService: edit ContactUs save successfully', contactObj);    			
+    			var contactUsObj={
+                		appId:contactObj.appId,
+                		appName:contactObj.appName,
+                		description:contactObj.description,
+                		contactName:contactObj.contactName,
+                		contactEmail:contactObj.contactEmail,
+                		url:contactObj.url,       		
+                };
+    			
+    			contactUsService.modifyContactUs(contactUsObj).then(res=> {
+        			// $log.info('contactUsService: edit ContactUs successfully');
+    				//	confirmBoxService.showInformation('You have saved the changes').then(isConfirmed => {});
+        			$scope.errMsg='';
+        			
+                }).catch(err=> {
+                    $log.error('contactUsService: editContactUs error:: ', err);
+                    confirmBoxService.showInformation('Edit Contact Us list failed: ' + err);
+                   // $scope.errMsg=err;
+                }).finally(() => {
+                    //this.isLoadingTable = false;
+                });
+        		
+        	}
+        	
+        	$scope.$watch('newContactUs.app.value', (newVal, oldVal) => {
+        		for(var i=0;i<$scope.contactUsAllAppList.length;i++){
+        		if($scope.contactUsAllAppList[i].value==newVal){
+        		$scope.newContactUs.app=angular.copy($scope.contactUsAllAppList[i]);;
+        		}
+        		}
+        		});
+        	/*del Contact Us*/
+        	$scope.delContactUsFun = function(appObj){
+        		var confirmMsg = 'Are you sure you want to delete '+appObj.appName +' from the list?' + ' Press OK to delete.';
+        		confirmBoxService.confirm(confirmMsg).then(function (confirmed) {
+                    if (confirmed == true) {                     	
+                    	contactUsService.removeContactUs(appObj.appId).then(res=> {   
+                    		// $log.info('delContactUsFun: delete ContactUs successfully',res);
+                			$scope.errMsg='';
+                			$scope.contactUsList.length=0;
+                			$scope.getContactUsList();
+                			confirmBoxService.showInformation('Item has been deleted').then(isConfirmed => {});
+                        }).catch(err=> {
+                            $log.error('contactUsService: addContactUs error:: ', err);
+                            confirmBoxService.showInformation('Deletion failed: ' + err);
+                           // $scope.errMsg=err;
+                        }).finally(() => {
+                            //this.isLoadingTable = false;
+                        });
+                    }
+                });
+        		
+        	}	
+        	
+        }        
+    }
+    ContactUsManageController.$inject = ['$scope','$log',  'message', '$q', '$http', 'conf','contactUsService','confirmBoxService'];
+    angular.module('ecompApp').controller('ContactUsManageController', ContactUsManageController);
+
+ 
+})();
+function validateUrl(value){
+    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+  }
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less
index 905f9faa..2625f32c 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less
@@ -138,6 +138,24 @@ background-color: transparent;
 	  border-color: slategrey !important;
 	  width:100%;
   }
+    .mandatory-categories{
+	color: #cf2a2a;
+	font-size: 11px;
+	position:absolute;
+	
+	}
+   .error-container{
+    position: absolute;
+    width: 220px;
+    display: block;
+    height: 12px;
+    line-height: 12px;
+
+    .err-message{
+      color: @funcRed;
+      font-size: 10px;
+    }
+    } 
 .glyphicon {
       position: relative !important;
       line-height: 0 !important;
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html
index c619a18a..4c8f6dee 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html
@@ -1,180 +1,181 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div style="margin-top: 10px; margin-bottom: 10px;"></div>

-<br />

-

-<div style="margin-top: 25px;">

-	<div id="title" class="manage-contactUs-home-title">Manage

-		Contact Us</div>

-	<div class="contact-us-margin">

-		<div class="get-access-table">

-			<div class="table-control">

-				<div class="c-ecomp-portal-abs-table" style="height: 300px">

-					<table b2b-table id="table-main" table-data="contactUsList"

-						current-page="ignoredCurrentPage">

-						<thead b2b-table-row type="header">

-							<tr>

-								<th id="th-users-0" b2b-table-header key="ecomp_function"

-									default-sort="a">App Name</th>

-								<th id="th-users-1" b2b-table-header key="app_name"

-									sortable="true">Contact Name</th>

-								<th id="th-users-2" b2b-table-header key="app_name"

-									sortable="true">Contact Email</th>

-								<th id="th-users-3" b2b-table-header key="role_name"

-									sortable="true">Contact URL</th>

-								<th id="th-users-4" b2b-table-header key="role_name"

-									sortable="true">Description</th>

-								<th id="th-users-5" b2b-table-header key="role_name"

-									sortable="true">Edit</th>

-								<th id="th-users-6" b2b-table-header key="role_name"

-									sortable="true">Delete</th>

-							</tr>

-						</thead>

-						<!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->

-						<tbody b2b-table-row type="body" class="table-body"

-							track-by="$index" row-repeat="rowData in contactUsList">

-							<tr id="tr-rowData" ng-click="">

-								<td b2b-table-body>

-									<div id="users-page-td-appName" ng-bind="rowData.appName"></div>

-								</td>

-								<td b2b-table-body>

-									<div id="users-page-td-name" ng-hide="rowData.showEdit"

-										ng-bind="rowData.contactName"></div> <input

-									class="input-inline-edit-text" type="text"

-									ng-show="rowData.showEdit"

-									ng-model="contactUsList[$index].contactName" />

-								</td>

-								<td b2b-table-body>

-									<div id="users-page-td-email" ng-hide="rowData.showEdit"

-										ng-bind="rowData.contactEmail"></div> <input

-									class="input-inline-edit-text" type="text"

-									ng-show="rowData.showEdit"

-									ng-model="contactUsList[$index].contactEmail" />

-								</td>

-								<td b2b-table-body>

-									<div id="users-page-td-url" ng-hide="rowData.showEdit"

-										ng-bind="rowData.url"></div> <input

-									class="input-inline-edit-text" type="text"

-									ng-show="rowData.showEdit" ng-model="contactUsList[$index].url" />

-								</td>

-								<td b2b-table-body>

-									<div id="users-page-td-descr" ng-hide="rowData.showEdit"

-										ng-bind=" rowData.description"></div> <input

-									class="input-inline-edit-text" type="text"

-									ng-show="rowData.showEdit"

-									ng-model="contactUsList[$index].description" />

-								</td>

-								<td b2b-table-body>

-									<div class="delete-contact-us" ng-hide="rowData.showEdit"

-										ng-click="rowData.showEdit=true">

-										<span class="icon-edit"></span>

-									</div> <span ng-show="rowData.showEdit"> <a

-										btn-type="primary"

-										ng-click="editContactUsFun(rowData); rowData.showEdit=false"

-										class="btn btn-alt btn-small" size="small">Save</a>

-								</span>

-								</td>

-								<td b2b-table-body>

-									<div class="delete-contact-us"

-										ng-click="delContactUsFun(rowData)">

-										<span class="icon-misc-trash"></span>

-									</div>

-								</td>

-							</tr>

-						</tbody>

-					</table>

-				</div>

-

-				<div id="divider-line"></div>

-				<div style="margin-top: 15px; margin-left: -78px;">

-					<div id="addWidgetHeader" class="contact-us-margin">

-						<h1 style="font-size: 18px;">Add Application Contact

-							Information</h1>

-						<!-- <div class="errMsg">{{errMsg}}</div> -->

-					</div>

-					<div id="addWidget" class="contact-us-margin">

-						<div>

-							<div id="add-contact-us-field-appname"

-								class="add-contact-us-field">

-								<div id="mots-property-label" class="property-label">App

-									Name</div>

-								<select id="dropdown1" name="dropdown1" b2b-dropdown

-									placeholder-text="Select an App"

-									ng-model="newContactUs.app.value">

-									<option b2b-dropdown-list

-										option-repeat="d in contactUsAllAppList" value="{{d.value}}">{{d.title}}</option>

-								</select>

-							</div>

-							<br>

-							<div id="add-contact-us-field-contactname"

-								class="add-contact-us-field">

-								<div id="property-label-name" class="property-label">Contact

-									Name</div>

-								<input id="property-input-name" class="input-text-area"

-									type="text" ng-model="newContactUs.name" />

-							</div>

-							<div id="add-contact-us-field-email" class="add-contact-us-field">

-								<div id="property-label-email" class="property-label">Contact

-									Email</div>

-								<input id="property-input-email" class="input-text-area"

-									type="text" ng-model="newContactUs.email" />

-							</div>

-							<div id="add-contact-us-field-url" class="add-contact-us-field">

-								<div id="property-label-url" class="property-label">Contact

-									URL</div>

-								<input id="property-input-url" class="input-text-area"

-									type="text" ng-model="newContactUs.url" />

-							</div>

-							<div id="add-contact-us-field-desc"

-								class="add-contact-us-field-des">

-								<div id="property-label-desc" class="property-label">Description</div>

-								<textarea id="property-input-desc"

-									style="margin-top: 0px; margin-bottom: 0px; height: 100px"

-									ng-model="newContactUs.desc"></textarea>

-							</div>

-						</div>

-						<div style="height: 50px;">

-							<a style="float: right; margin-top: 20px"

-								class="btn btn-alt btn-small" ng-click="newContactUsFun()">Add

-								New</a>

-						</div>

-						<div id="divider-line-bottom"></div>

-

-						<div style="height: 50px;">

-							<a style="float: right; margin-right: -230px !important;"

-								class="btn btn-alt btn-small" ng-click="closeDialog()">Close</a>

-						</div>

-

-					</div>

-

-				</div>

-

-			</div>

-		</div>

-	</div>

-</div>

-

-<script type="application/javascript">

-	

-    $(document).ready(function(){

-        $(".ngdialog-content").css("width","85%")

-    });

-

-</script>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div style="margin-top: 10px; margin-bottom: 10px;"></div>
+<br />
+
+<div style="margin-top: 25px;">
+	<div id="title" class="manage-contactUs-home-title">Manage
+		Contact Us</div>
+	<div class="contact-us-margin">
+		<div class="get-access-table">
+			<div class="table-control">
+				<div class="c-ecomp-portal-abs-table" style="height: 300px">
+					<table b2b-table id="table-main" table-data="contactUsList"
+						current-page="ignoredCurrentPage">
+						<thead b2b-table-row type="header">
+							<tr>
+								<th id="th-users-0" b2b-table-header key="ecomp_function"
+									default-sort="a">App Name</th>
+								<th id="th-users-1" b2b-table-header key="app_name"
+									sortable="true">Contact Name</th>
+								<th id="th-users-2" b2b-table-header key="app_name"
+									sortable="true">Contact Email</th>
+								<th id="th-users-3" b2b-table-header key="role_name"
+									sortable="true">Contact URL</th>
+								<th id="th-users-4" b2b-table-header key="role_name"
+									sortable="true">Description</th>
+								<th id="th-users-5" b2b-table-header key="role_name"
+									sortable="true">Edit</th>
+								<th id="th-users-6" b2b-table-header key="role_name"
+									sortable="true">Delete</th>
+							</tr>
+						</thead>
+						<!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->
+						<tbody b2b-table-row type="body" class="table-body"
+							track-by="$index" row-repeat="rowData in contactUsList">
+							<tr id="tr-rowData" ng-click="">
+								<td b2b-table-body>
+									<div id="users-page-td-appName" ng-bind="rowData.appName"></div>
+								</td>
+								<td b2b-table-body>
+									<div id="users-page-td-name" ng-hide="rowData.showEdit"
+										ng-bind="rowData.contactName"></div> <input
+									class="input-inline-edit-text" type="text"
+									ng-show="rowData.showEdit"
+									ng-model="contactUsList[$index].contactName" />
+								</td>
+								<td b2b-table-body>
+									<div id="users-page-td-email" ng-hide="rowData.showEdit"
+										ng-bind="rowData.contactEmail"></div> <input
+									class="input-inline-edit-text" type="text"
+									ng-show="rowData.showEdit"
+									ng-model="contactUsList[$index].contactEmail" />
+								</td>
+								<td b2b-table-body>
+									<div id="users-page-td-url" ng-hide="rowData.showEdit"
+										ng-bind="rowData.url"></div> <input
+									class="input-inline-edit-text" type="text"
+									ng-show="rowData.showEdit" ng-model="contactUsList[$index].url" />
+								</td>
+								<td b2b-table-body>
+									<div id="users-page-td-descr" ng-hide="rowData.showEdit"
+										ng-bind=" rowData.description"></div> <input
+									class="input-inline-edit-text" type="text"
+									ng-show="rowData.showEdit"
+									ng-model="contactUsList[$index].description" />
+								</td>
+								<td b2b-table-body>
+									<div class="delete-contact-us" ng-hide="rowData.showEdit"
+										ng-click="rowData.showEdit=true">
+										<span class="icon-edit"></span>
+									</div> <span ng-show="rowData.showEdit"> <a
+										btn-type="primary"
+										ng-click="editContactUsFun(rowData); rowData.showEdit=false"
+										class="btn btn-alt btn-small" size="small">Save</a>
+								</span>
+								</td>
+								<td b2b-table-body>
+									<div class="delete-contact-us"
+										ng-click="delContactUsFun(rowData)">
+										<span class="icon-misc-trash"></span>
+									</div>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<div id="divider-line"></div>
+				<div style="margin-top: 15px; margin-left: -78px;">
+					<div id="addWidgetHeader" class="contact-us-margin">
+						<h1 style="font-size: 18px;">Add Application Contact
+							Information</h1>
+						<!-- <div class="errMsg">{{errMsg}}</div> -->
+					</div>
+					<div id="addWidget" class="contact-us-margin">
+						<div>
+							<div id="add-contact-us-field-appname"
+								class="add-contact-us-field">
+								<div id="mots-property-label" class="property-label"><span ID="required" style="color: Red;"visible="false"> *</span>App	Name</div>
+								<select id="dropdown1" name="dropdown1" b2b-dropdown
+									placeholder-text="Select an App"
+									ng-model="newContactUs.app.value">
+									<option b2b-dropdown-list
+										option-repeat="d in contactUsAllAppList" value="{{d.value}}">{{d.title}}</option>
+								</select>
+								<div id="mots-property-label-required" ng-show="newContactUs.app.title==null || newContactUs.app.title=='' ">
+							<small class="mandatory-categories">App Name is Required</small>
+							</div>
+							</div>
+							<br>
+							<div id="add-contact-us-field-contactname"
+								class="add-contact-us-field">
+								<div id="property-label-name" class="property-label">Contact
+									Name</div>
+								<input id="property-input-name" class="input-text-area"
+									type="text" ng-model="newContactUs.name" />
+							</div>
+							<div id="add-contact-us-field-email" class="add-contact-us-field">
+								<div id="property-label-email" class="property-label">Contact
+									Email</div>
+								<input id="property-input-email" class="input-text-area"
+									type="text" ng-model="newContactUs.email" />
+							</div>
+							<div id="add-contact-us-field-url" class="add-contact-us-field">
+								<div id="property-label-url" class="property-label">Contact
+									URL</div>
+								<input id="property-input-url" class="input-text-area"
+									type="text" ng-model="newContactUs.url" />
+							</div>
+							<div id="add-contact-us-field-desc"
+								class="add-contact-us-field-des">
+								<div id="property-label-desc" class="property-label">Description</div>
+								<textarea id="property-input-desc"
+									style="margin-top: 0px; margin-bottom: 0px; height: 100px"
+									ng-model="newContactUs.desc"></textarea>
+							</div>
+						</div>
+						<div style="height: 50px;">
+							<a style="float: right; margin-top: 20px"
+								class="btn btn-alt btn-small" ng-click="newContactUsFun()" ng-disabled="newContactUs.app.title==null || newContactUs.app.title=='' ">Add
+								New</a>
+						</div>
+						<div id="divider-line-bottom"></div>
+
+						<div style="height: 50px;">
+							<a style="float: right; margin-right: -230px !important;"
+								class="btn btn-alt btn-small" ng-click="closeDialog()">Close</a>
+						</div>
+
+					</div>
+
+				</div>
+
+			</div>
+		</div>
+	</div>
+</div>
+
+<script type="application/javascript">
+    $(document).ready(function(){
+        $(".ngdialog-content").css("width","85%");
+        $(".ngdialog-close").attr('id','dialog-close');
+    });
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js
index 0d39a653..eddde0d9 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js
@@ -1,171 +1,171 @@
-/*-

- * ================================================================================

- * 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 () {	

-		

-    class ContactUsCtrl {

-    	constructor($log, contactUsService, applicationsService, $modal, ngDialog, $state,$anchorScroll,$location) {  

-        	

-        	contactUsService.getContactUSPortalDetails().then(res => {

-        		// $log.info('ContactUsCtrl:: contactUsService getContactUSPortalDetails res',res);

-                // $log.info('getting res',res);

-                var result = (typeof(res.response) != "undefined" && res.response!=null)?res.response:null;

-                //	$log.info('result',result);

-                //	$log.info('done');

-                var source = JSON.parse(result);

-                //	$log.info(source); 

-                this.ush_TicketInfoUrl = source.ush_ticket_url; 

-                this.portalInfo_Address = source.feedback_email_address; 

-                this.feedback_Url = source.portal_info_url;                	

-        	}).catch(err=> {

-           	 	$log.error('ContactUsCtrl:error:: ', err);

-            }).finally(() => {

-           });

-        	

-        	let init = () => {

-                // $log.info('ecomp app::contact-us-controller::initializing...');

-                this.appTable=[];

-                this.functionalTableData=[];

-            };

-            init();     

-            

-            let updateContactUsTable = () => {

-            	contactUsService.getAppsAndContacts().then(res=> {

-         			// $log.info('ContactUsCtrl:: contactUsService getAppsAndContacts res',res);

-                 	var tableData=[];

-                 	// $log.info('getting res',res);

-                 	var result = (typeof(res.response) != "undefined" && res.response!=null)?res.response:null;

-                 	// $log.info('result',result);

-                 	// $log.info('done');

-                 	var source = result;

-                 	// $log.info(source);

-                 	// Drop Portal app, empty name entries

-                 	for(var i=0;i<source.length; i++) {

-                 		var dataArr = source[i];

-                 		if ( !dataArr.appName  || dataArr.appId == 1) {

-                 			continue;

-                 		}

-                     	var dataTemp={

-                     		app_name: dataArr.appName,

-                     		contact_name: dataArr.contactName,

-                     		contact_email: dataArr.contactEmail,

-                     		desc: dataArr.description,

-                     		url_Info: dataArr.url,

-                     		app_Id: dataArr.appId,

-                     	}

-                     	tableData.push(dataTemp);

-                 	}              	

-                 	this.appTable=tableData;

-                 }).catch(err=> {

-          		 	 $log.error('ContactUsCtrl.updateContactUsTable:error:: ', err);

-          		 })

-            };

-            

-            contactUsService.getAppCategoryFunctions().then(res=> {

-     			// $log.info('ContactUsCtrl:: contactUsService getAppCategoryFunctionsthen res',res);

-             	var tablefunctionalData=[];

-             	// $log.info('getting res',res);

-             	var result = (typeof(res.response) != "undefined" && res.response!=null)?res.response:null;

-             	// $log.info('result',result);

-             	// $log.info('done');

-             	var source = result;

-             	// $log.info(source);                	

-             	for(var i=0;i<source.length; i++) {

-             		var datafunctionalArr = source[i];

-                 	var datafuntionalTemp={

-                 		category: datafunctionalArr.category,

-                 		app_Name: datafunctionalArr.application,

-                 		functions: datafunctionalArr.functions,

-                 		app_Id: datafunctionalArr.appId,

-                 	}

-                 	tablefunctionalData.push(datafuntionalTemp);

-             	}              	

-             	this.functionalTableData=tablefunctionalData;

-             }).catch(err=> {

-      		 	 $log.error('ContactUsCtrl:error:: ', err);

-      		 })

-            

-            updateContactUsTable();

-            this.editContactUsModalPopup = () => {

-                 // $log.debug('ContactUsCtrl::editContactUsModalPopup updating table data...');               

-                 var modalInstance = ngDialog.open({

-                     templateUrl: 'app/views/support/contact-us/contact-us-manage/contact-us-manage.html',

-                     controller: 'ContactUsManageController',

-                     resolve: {

-                         message: function message() {

-                             var message = {

-                                 type: 'Contact',

-                             };

-                             return message;

-                         }

-                     }

-                 }).closePromise.then(needUpdate => {	              	 

-                	 updateContactUsTable();

-	             });       

-             };

-             

-             this.goToSection = (id) => {

-            	

-            	 var targetDiv = document.getElementById(id);  

-            	 

-            	 var offSetHeight = 0;

-            	 for(var i=0;i<this.appTable.length;i++){  

-            		 if(this.appTable[i].app_Id==id)

-            			 break;

-            		 if(this.appTable[i].showFlag==true){

-            			 offSetHeight+=document.getElementById('collapse'+i).clientHeight;         			

-            		 }

-            	 }

-            	 console.log(offSetHeight);

-            	 this.appTable.forEach(d => d.showFlag = false);

-            	// let index = this.appTable.findIndex(a => a.app_Id == id);

-            	 var index =-1;

-            	 for(var i=0; i<this.appTable.length;i++){

-            		 if(this.appTable[i].app_Id==id){

-            			 index = i;

-            			 break;

-            		 }

-            	 }

-            	 console.log(index);

-            	 if (index > -1) {

-            		 // setting the showFlag to true based on index comparing with the app_Id 

-            		 this.appTable[index].showFlag = true;

-            		 $location.hash('appId'+index);

-            	      $anchorScroll();

-            	/*	 $('#contentId').animate({

-          	            scrollTop: targetDiv.offsetTop-offSetHeight

-          	        }, 'fast');*/

-            	 }            	             	 

-            	 

-             };

-             

-             // Take the user to the application on the get access page.

-             this.goGetAccess = (appName) => {

-            	 // $log.debug('ContactUsCtrl::goGetAccess received name ' + appName);

-            	 applicationsService.goGetAccessAppName = appName;

-            	 $state.go('root.getAccess');

-             };

-             

-        }

-    }

-    ContactUsCtrl.$inject = ['$log','contactUsService', 'applicationsService', '$modal', 'ngDialog', '$state','$anchorScroll','$location'];

-    angular.module('ecompApp').controller('ContactUsCtrl', ContactUsCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {	
+		
+    class ContactUsCtrl {
+    	constructor($log, contactUsService, applicationsService, $modal, ngDialog, $state,$anchorScroll,$location) {  
+        	
+        	contactUsService.getContactUSPortalDetails().then(res => {
+        		// $log.info('ContactUsCtrl:: contactUsService getContactUSPortalDetails res',res);
+                // $log.info('getting res',res);
+                var result = (typeof(res.response) != "undefined" && res.response!=null)?res.response:null;
+                //	$log.info('result',result);
+                //	$log.info('done');
+                var source = JSON.parse(result);
+                //	$log.info(source); 
+                this.ush_TicketInfoUrl = source.ush_ticket_url; 
+                this.portalInfo_Address = source.feedback_email_address; 
+                this.feedback_Url = source.portal_info_url;                	
+        	}).catch(err=> {
+           	 	$log.error('ContactUsCtrl:error:: ', err);
+            }).finally(() => {
+           });
+        	
+        	let init = () => {
+                // $log.info('ecomp app::contact-us-controller::initializing...');
+                this.appTable=[];
+                this.functionalTableData=[];
+            };
+            init();     
+            
+            let updateContactUsTable = () => {
+            	contactUsService.getAppsAndContacts().then(res=> {
+         			// $log.info('ContactUsCtrl:: contactUsService getAppsAndContacts res',res);
+                 	var tableData=[];
+                 	// $log.info('getting res',res);
+                 	var result = (typeof(res.response) != "undefined" && res.response!=null)?res.response:null;
+                 	// $log.info('result',result);
+                 	// $log.info('done');
+                 	var source = result;
+                 	// $log.info(source);
+                 	// Drop Portal app, empty name entries
+                 	for(var i=0;i<source.length; i++) {
+                 		var dataArr = source[i];
+                 		if ( !dataArr.appName  || dataArr.appId == 1) {
+                 			continue;
+                 		}
+                     	var dataTemp={
+                     		app_name: dataArr.appName,
+                     		contact_name: dataArr.contactName,
+                     		contact_email: dataArr.contactEmail,
+                     		desc: dataArr.description,
+                     		url_Info: dataArr.url,
+                     		app_Id: dataArr.appId,
+                     	}
+                     	tableData.push(dataTemp);
+                 	}              	
+                 	this.appTable=tableData;
+                 }).catch(err=> {
+          		 	 $log.error('ContactUsCtrl.updateContactUsTable:error:: ', err);
+          		 })
+            };
+            
+            contactUsService.getAppCategoryFunctions().then(res=> {
+     			// $log.info('ContactUsCtrl:: contactUsService getAppCategoryFunctionsthen res',res);
+             	var tablefunctionalData=[];
+             	// $log.info('getting res',res);
+             	var result = (typeof(res.response) != "undefined" && res.response!=null)?res.response:null;
+             	// $log.info('result',result);
+             	// $log.info('done');
+             	var source = result;
+             	// $log.info(source);                	
+             	for(var i=0;i<source.length; i++) {
+             		var datafunctionalArr = source[i];
+                 	var datafuntionalTemp={
+                 		category: datafunctionalArr.category,
+                 		app_Name: datafunctionalArr.application,
+                 		functions: datafunctionalArr.functions,
+                 		app_Id: datafunctionalArr.appId,
+                 	}
+                 	tablefunctionalData.push(datafuntionalTemp);
+             	}              	
+             	this.functionalTableData=tablefunctionalData;
+             }).catch(err=> {
+      		 	 $log.error('ContactUsCtrl:error:: ', err);
+      		 })
+            
+            updateContactUsTable();
+            this.editContactUsModalPopup = () => {
+                 // $log.debug('ContactUsCtrl::editContactUsModalPopup updating table data...');               
+                 var modalInstance = ngDialog.open({
+                     templateUrl: 'app/views/support/contact-us/contact-us-manage/contact-us-manage.html',
+                     controller: 'ContactUsManageController',
+                     resolve: {
+                         message: function message() {
+                             var message = {
+                                 type: 'Contact',
+                             };
+                             return message;
+                         }
+                     }
+                 }).closePromise.then(needUpdate => {	              	 
+                	 updateContactUsTable();
+	             });       
+             };
+             
+             this.goToSection = (id) => {
+            	
+            	 var targetDiv = document.getElementById(id);  
+            	 
+            	 var offSetHeight = 0;
+            	 for(var i=0;i<this.appTable.length;i++){  
+            		 if(this.appTable[i].app_Id==id)
+            			 break;
+            		 if(this.appTable[i].showFlag==true){
+            			 offSetHeight+=document.getElementById('collapse'+i).clientHeight;         			
+            		 }
+            	 }
+            	 console.log(offSetHeight);
+            	 this.appTable.forEach(d => d.showFlag = false);
+            	// let index = this.appTable.findIndex(a => a.app_Id == id);
+            	 var index =-1;
+            	 for(var i=0; i<this.appTable.length;i++){
+            		 if(this.appTable[i].app_Id==id){
+            			 index = i;
+            			 break;
+            		 }
+            	 }
+            	 console.log(index);
+            	 if (index > -1) {
+            		 // setting the showFlag to true based on index comparing with the app_Id 
+            		 this.appTable[index].showFlag = true;
+            		 $location.hash('appId'+index);
+            	      $anchorScroll();
+            	/*	 $('#contentId').animate({
+          	            scrollTop: targetDiv.offsetTop-offSetHeight
+          	        }, 'fast');*/
+            	 }            	             	 
+            	 
+             };
+             
+             // Take the user to the application on the get access page.
+             this.goGetAccess = (appName) => {
+            	 // $log.debug('ContactUsCtrl::goGetAccess received name ' + appName);
+            	 applicationsService.goGetAccessAppName = appName;
+            	 $state.go('root.getAccess');
+             };
+             
+        }
+    }
+    ContactUsCtrl.$inject = ['$log','contactUsService', 'applicationsService', '$modal', 'ngDialog', '$state','$anchorScroll','$location'];
+    angular.module('ecompApp').controller('ContactUsCtrl', ContactUsCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.spec.js b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.spec.js
index 3841a2b3..32cc3a1f 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.spec.js
@@ -1,19 +1,19 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html
index 9e96b441..444a9820 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html
@@ -1,126 +1,124 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-contactUs-home" style=" overflow:auto;''">

-	<div class="contactUs-home-container" id="page-content">

-		<div class="admins-page-main">

-			<div id="title" class="w-ecomp-main-view-title">

-			<h1 class="heading-page">Contact Us</h1>

-			<button id="edit-button-contact-us" ng-if="isAdminPortalAdmin == true" class="btn btn-alt btn-small" ng-click="contact.editContactUsModalPopup()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Edit Contact Us</button>

-			

-			<div ng-include src="'app/views/support/contact-us/contact-us.aux.html'"></div>

-			

-		<br/> 

-		<!-- Function Categories -->		

-		<div id="appFunctionInfo" style="font-size: 20px;" class="w-ecomp-main-view-title"> Application Functions

-				<div b2b-table table-data="contact.functionalTableData" class="b2b-table-div">

-						<table>

-							<thead b2b-table-row type="header">

-								<tr>

-								  <th id="th-functionalItem-0" b2b-table-header sortable="false">Category</th>	                     

-			                      <th id="th-functionalItem-1" b2b-table-header sortable="false">ECOMP Functions</th>

-			                      <th id="th-functionalItem-2" b2b-table-header sortable="false">ECOMP Application</th>

-			                 	  <!-- <th id="th-functionalItem-3" b2b-table-header >Contact</th> --> 

-							  </tr>

-							</thead>

-							<!--  Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data  -->

-							<tbody b2b-table-row type="body"

-							type="body"  

-		                 	class="table-body" 

-		                 	track-by="$index"

-		                 	row-repeat="rowData in contact.functionalTableData">

-							<tr id="tr-rowData" ng-click="">

-			                 <td b2b-table-body>

-			                    <div id="functional-item-td-category" 

-	                                ng-show="$index == 0 || contact.functionalTableData[$index-1].category != rowData.category"

-			                    	ng-bind="rowData.category">

-			                    </div>

-			                 </td>

-			                 <td b2b-table-body>

-			                    <div id="functional-item-td-functions"  ng-bind="rowData.functions"></div>

-			                 </td>		                 

-			                 <td b2b-table-body>

-			                   <a ng-click="contact.goToSection(rowData.app_Id, $index);">{{rowData.app_Name}}</a>	

-			                 </td>			                 

-			               </tr>

-							</tbody>

-						</table>

-					</div>

-	</div>

-		<br/>

-		<!-- Display applicationInfo panels -->

-		<div id="allAppInfo">

-			<div style="font-size: 20px;" class="w-ecomp-main-view-title"> All Applications		

-			</div>		

-			<div class="contactUs-general-div">

-				<div class="contact-us-table">

-				<div style="height:auto;" class="c-ecomp-portal-abs-table default">

-					<div ng-repeat="rowData in contact.appTable"

-						class="contactUs-collapsible-panel">

-						<div id="{{rowData.app_Id}}" style="height:60px; " class="contactUs-panel-header" ng-click="rowData.showFlag = !rowData.showFlag" >

-							<span id="appId{{$index}}" ng-bind="rowData.app_name" style="position:relative; top:20px"></span>

-							

-							<span style="float: right; margin-right: 30px; margin-top:20px;">

-						 		<img ng-hide="rowData.showFlag"	src="assets/images/chevron_down.png"

-									alt="Expand app contact section"	title="Expand app contact section" /> 

-								<img ng-show="rowData.showFlag" src="assets/images/chevron_up.png"

-									alt="App contact section" title="Collapse app contact section" />

-							</span>

-						</div>

-				

-						<div id="collapse{{$index}}" ng-show="rowData.showFlag"

-							class="contactUs-collapsible-panel">

-							<div class="contactUs-txt" ng-hide="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 

-								<span style="margin-bottom: 20px;"> No application information is available. Please use the links above to contact the ECOMP Portal team. </span>

-							</div>

-		 					<div class="contactUs-txt" ng-show="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 

-							  <table style="border-spacing: 10px 5px; max-width:950px; margin:10px;">

-								<tr>

-									<td class="contactUs-panel-labels" style="width: 120px;">Contact:</td>

-									<td class="contactUs-panel-labels" style="width: 830px;">{{rowData.contact_name}}</td>

-								</tr>

-								<tr>

-									<td class="contactUs-panel-labels">Email:</td>

-									<td class="contactUs-panel-labels"><a ng-href="mailto:{{rowData.contact_email}}" target="_top">{{rowData.contact_email}}</a></td>

-								</tr>

-								<tr>

-									<td class="contactUs-panel-labels">Info URL:</td>

-									<td class="contactUs-panel-labels"><a ng-href="{{rowData.url_Info}}" target="_blank">{{rowData.url_Info}}</a></td>

-								</tr>

-								<tr>

-									<td class="contactUs-panel-labels">Description:</td>

-									<td class="contactUs-panel-labels">{{rowData.desc}}</td>

-								</tr>

-								<tr>

-									<td class="contactUs-panel-labels">Get access:</td>

-									<td class="contactUs-panel-labels"><a href="" ng-click="contact.goGetAccess(rowData.app_name);">Click for application and role information</a></td>

-								</tr>

-							  </table>

-							</div>				

-						</div>

-				

-					</div>

-				</div>

-				</div>

-			</div>

-		</div>

-

-	</div>

-</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-contactUs-home" style=" overflow:auto;''">
+	<div class="contactUs-home-container" id="page-content">
+		<div class="admins-page-main">
+			<div id="title" class="w-ecomp-main-view-title">
+			<h1 class="heading-page">Contact Us</h1>
+			<button id="edit-button-contact-us" ng-if="isAdminPortalAdmin == true" class="btn btn-alt btn-small" ng-click="contact.editContactUsModalPopup()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Edit Contact Us</button>
+			
+			<div ng-include src="'app/views/support/contact-us/contact-us.aux.html'"></div>
+			
+		<br/> 
+		<!-- Function Categories -->		
+		<div id="appFunctionInfo" style="font-size: 20px;" class="w-ecomp-main-view-title"> Application Functions
+				<div b2b-table table-data="contact.functionalTableData" class="b2b-table-div">
+						<table>
+							<thead b2b-table-row type="header">
+								<tr>
+								  <th id="th-functionalItem-0" b2b-table-header sortable="false">Category</th>	                     
+			                      <th id="th-functionalItem-1" b2b-table-header sortable="false">ECOMP Functions</th>
+			                      <th id="th-functionalItem-2" b2b-table-header sortable="false">ECOMP Application</th>
+			                 	  <!-- <th id="th-functionalItem-3" b2b-table-header >Contact</th> --> 
+							  </tr>
+							</thead>
+							<!--  Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data  -->
+							<tbody b2b-table-row type="body"
+							type="body"  
+		                 	class="table-body" 
+		                 	track-by="$index"
+		                 	row-repeat="rowData in contact.functionalTableData">
+							<tr id="tr-rowData" ng-click="">
+			                 <td b2b-table-body>
+			                    <div id="functional-item-td-category" 
+	                                ng-show="$index == 0 || contact.functionalTableData[$index-1].category != rowData.category"
+			                    	ng-bind="rowData.category">
+			                    </div>
+			                 </td>
+			                 <td b2b-table-body>
+			                    <div id="functional-item-td-functions"  ng-bind="rowData.functions"></div>
+			                 </td>		                 
+			                 <td b2b-table-body>
+			                   <a ng-click="contact.goToSection(rowData.app_Id, $index);">{{rowData.app_Name}}</a>	
+			                 </td>			                 
+			               </tr>
+							</tbody>
+						</table>
+					</div>
+	</div>
+		<br/>
+		<!-- Display applicationInfo panels -->
+		<div id="allAppInfo">
+			<div style="font-size: 20px;" class="w-ecomp-main-view-title"> All Applications		
+			</div>		
+			<div class="contactUs-general-div">
+				<div class="contact-us-table">
+				<div style="height:auto;" class="c-ecomp-portal-abs-table default">
+					<div ng-repeat="rowData in contact.appTable"
+						class="contactUs-collapsible-panel">
+						<div id="{{rowData.app_Id}}" style="height:60px; " class="contactUs-panel-header" ng-click="rowData.showFlag = !rowData.showFlag" >
+							<span id="appId{{$index}}" ng-bind="rowData.app_name" style="position:relative; top:20px"></span>
+							
+							<span style="float: right; margin-right: 30px; margin-top:20px;">
+						 		<span ng-show="rowData.showFlag" title="Collapse app contact section" class="icon-controls-upPRIMARY"></span>
+								<span ng-hide="rowData.showFlag" title="Expand app contact section" class="icon-controls-down"></span>
+							</span>
+						</div>
+				
+						<div id="collapse{{$index}}" ng-show="rowData.showFlag"
+							class="contactUs-collapsible-panel">
+							<div class="contactUs-txt" ng-hide="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 
+								<span style="margin-bottom: 20px;"> No application information is available. Please use the links above to contact the ECOMP Portal team. </span>
+							</div>
+		 					<div class="contactUs-txt" ng-show="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 
+							  <table style="border-spacing: 10px 5px; max-width:950px; margin:10px;">
+								<tr>
+									<td class="contactUs-panel-labels" style="width: 120px;">Contact:</td>
+									<td class="contactUs-panel-labels" style="width: 830px;">{{rowData.contact_name}}</td>
+								</tr>
+								<tr>
+									<td class="contactUs-panel-labels">Email:</td>
+									<td class="contactUs-panel-labels"><a ng-href="mailto:{{rowData.contact_email}}" target="_top">{{rowData.contact_email}}</a></td>
+								</tr>
+								<tr>
+									<td class="contactUs-panel-labels">Info URL:</td>
+									<td class="contactUs-panel-labels"><a ng-href="{{rowData.url_Info}}" target="_blank">{{rowData.url_Info}}</a></td>
+								</tr>
+								<tr>
+									<td class="contactUs-panel-labels">Description:</td>
+									<td class="contactUs-panel-labels">{{rowData.desc}}</td>
+								</tr>
+								<tr>
+									<td class="contactUs-panel-labels">Get access:</td>
+									<td class="contactUs-panel-labels"><a href="" ng-click="contact.goGetAccess(rowData.app_name);">Click for application and role information</a></td>
+								</tr>
+							  </table>
+							</div>				
+						</div>
+				
+					</div>
+				</div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.js b/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.js
index 74b5ba4e..c93d8643 100644
--- a/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.js
@@ -1,123 +1,125 @@
-/*-

- * ================================================================================

- * 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 () {

-    class GetAccessCtrl {

-        constructor($log, $scope,  $stateParams, getAccessService, userProfileService, ExternalRequestAccessService, applicationsService, ngDialog) {

-        	// $log.debug('GetAccessCtrl: appService param is: ' + applicationsService.goGetAccessAppName);

-        	var resultAccessValue = null;

-        	

-        	$scope.openAppRoleModal = (itemData) => {    	

-        		if(resultAccessValue){

-        		let data = null;

-                    data = {

-                        dialogState: 2,

-                        selectedUser:{

-                            attuid: $scope.attuid,

-                            firstName: $scope.firstName,

-                            lastName: $scope.lastName,

-                            headerText: itemData.app_name

-                        }

-                    }

-                ngDialog.open({

-                    templateUrl: 'app/views/catalog/add-catalog-dialogs/new-catalog.modal.html',

-                    controller: 'NewCatalogModalCtrl',

-                    controllerAs: 'userInfo',

-                    data: data

-                });

-        		}

-            }

-        	

-            userProfileService.getUserProfile().then(

-        			function(profile) {

-        				$scope.attuid = profile.orgUserId;

-        				$scope.firstName = profile.firstName;

-        				$scope.lastName = profile.lastName;

-        	  });

-            

-        	this.updateAppsList = () => {

-        		ExternalRequestAccessService.getExternalRequestAccessServiceInfo().then(

-			  			function(property) {

-			  				resultAccessValue = property.accessValue;

-				}).catch(err => {

-                    $log.error('GetAccessCtrl: failed getExternalRequestAccessServiceInfo: ' + JSON.Stringify(err));

-                });

-                getAccessService.getListOfApp().then(res=> {

-                	var tableData=[];

-                	// $log.info('GetAccessCtrl::updateAppsList: getting res');

-                	var result = (typeof(res.data) != "undefined" && res.data!=null)?res.data:null;

-                	// $log.info('GetAccessCtrl::updateAppsList: result',result);

-                	// $log.info('GetAccessCtrl::updateAppsList: done');

-                	var source = result;

-                	// $log.info('GetAccessCtrl::updateAppsList source: ', source);

-                	for(var i=0;i<source.length; i++){

-                		var dataArr = source[i];

-                		var checkEcompFuncAvail = 'Ecomp Function Not Available' ; 

-                		var reqStatus = 'Pending'; 

-                		dataArr.ecompFunction = (dataArr.ecompFunction === null) ? checkEcompFuncAvail : dataArr.ecompFunction;

-                		dataArr.reqType = (dataArr.reqType === 'P') ? reqStatus : dataArr.reqType;

-                    	var dataTemp={

-                    		ecomp_function: dataArr.ecompFunction,

-                    		app_name:dataArr.appName,

-                    		role_name:dataArr.roleName,

-                    		current_role:dataArr.roleActive,

-                    		request_type:dataArr.reqType

-                    	}

-                    	tableData.push(dataTemp);

-                	} 

-                	this.appTable=tableData;

-                	if(tableData!=null){

-                		var len = tableData.length;

-                		this.totalPage =  Math.ceil(len/this.viewPerPage);     

-                	}

-                	if( $stateParams.appName != null)

-                		this.searchString = $stateParams.appName;

-                	else

-                		this.searchString = applicationsService.goGetAccessAppName;

-                	// the parameter has been used; clear the value.

-                	applicationsService.goGetAccessAppName = '';

-                }).catch(err=> {

-                    $log.error('GetAccessCtrl:error:: ', err);

-                }).finally(() => {

-                    this.isLoadingTable = false;

-                });

-            };

-            

-            this.updateTable = (num) => {

-                this.startIndex=this.viewPerPage*(num-1);

-                this.currentPage = num;

-            };

-        	let init = () => {

-                // $log.info('GetAccessCtrl:: initializing...');

-                this.searchString = '';

-                this.getAccessTableHeaders = ['ECOMP Function', 'Application Name', 'Role Name', 'Current Role', 'Request Status'];

-                this.appTable=[];

-                this.updateAppsList();             

-                this.viewPerPage=20;

-                this.startIndex=0;

-                this.currentPage = 1;

-                this.totalPage=0;

-            };

-            init();

-        }

-    }

-    GetAccessCtrl.$inject = ['$log', '$scope', '$stateParams', 'getAccessService', 'userProfileService', 'ExternalRequestAccessService','applicationsService', 'ngDialog'];

-    angular.module('ecompApp').controller('GetAccessCtrl', GetAccessCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class GetAccessCtrl {
+        constructor($log, $scope,  $stateParams, getAccessService, userProfileService, ExternalRequestAccessService, applicationsService, ngDialog) {
+        	// $log.debug('GetAccessCtrl: appService param is: ' + applicationsService.goGetAccessAppName);
+        	var resultAccessValue = null;
+        	var externalRequest = true;
+        	
+        	$scope.openAppRoleModal = (itemData) => {    	
+        		if(resultAccessValue){
+        		let data = null;
+                    data = {
+                        dialogState: 2,
+                        selectedUser:{
+                            attuid: $scope.attuid,
+                            firstName: $scope.firstName,
+                            lastName: $scope.lastName,
+                            headerText: itemData.app_name,
+                            extReqValue : externalRequest
+                        }
+                    }
+                ngDialog.open({
+                    templateUrl: 'app/views/catalog/add-catalog-dialogs/new-catalog.modal.html',
+                    controller: 'NewCatalogModalCtrl',
+                    controllerAs: 'userInfo',
+                    data: data
+                });
+        		}
+            }
+        	
+            userProfileService.getUserProfile().then(
+        			function(profile) {
+        				$scope.attuid = profile.orgUserId;
+        				$scope.firstName = profile.firstName;
+        				$scope.lastName = profile.lastName;
+        	  });
+            
+        	this.updateAppsList = () => {
+        		ExternalRequestAccessService.getExternalRequestAccessServiceInfo().then(
+			  			function(property) {
+			  				resultAccessValue = property.accessValue;
+				}).catch(err => {
+                    $log.error('GetAccessCtrl: failed getExternalRequestAccessServiceInfo: ' + JSON.Stringify(err));
+                });
+                getAccessService.getListOfApp().then(res=> {
+                	var tableData=[];
+                	// $log.info('GetAccessCtrl::updateAppsList: getting res');
+                	var result = (typeof(res.data) != "undefined" && res.data!=null)?res.data:null;
+                	// $log.info('GetAccessCtrl::updateAppsList: result',result);
+                	// $log.info('GetAccessCtrl::updateAppsList: done');
+                	var source = result;
+                	// $log.info('GetAccessCtrl::updateAppsList source: ', source);
+                	for(var i=0;i<source.length; i++){
+                		var dataArr = source[i];
+                		var checkEcompFuncAvail = 'Ecomp Function Not Available' ; 
+                		var reqStatus = 'Pending'; 
+                		dataArr.ecompFunction = (dataArr.ecompFunction === null) ? checkEcompFuncAvail : dataArr.ecompFunction;
+                		dataArr.reqType = (dataArr.reqType === 'P') ? reqStatus : dataArr.reqType;
+                    	var dataTemp={
+                    		ecomp_function: dataArr.ecompFunction,
+                    		app_name:dataArr.appName,
+                    		role_name:dataArr.roleName,
+                    		current_role:dataArr.roleActive,
+                    		request_type:dataArr.reqType
+                    	}
+                    	tableData.push(dataTemp);
+                	} 
+                	this.appTable=tableData;
+                	if(tableData!=null){
+                		var len = tableData.length;
+                		this.totalPage =  Math.ceil(len/this.viewPerPage);     
+                	}
+                	if( $stateParams.appName != null)
+                		this.searchString = $stateParams.appName;
+                	else
+                		this.searchString = applicationsService.goGetAccessAppName;
+                	// the parameter has been used; clear the value.
+                	applicationsService.goGetAccessAppName = '';
+                }).catch(err=> {
+                    $log.error('GetAccessCtrl:error:: ', err);
+                }).finally(() => {
+                    this.isLoadingTable = false;
+                });
+            };
+            
+            this.updateTable = (num) => {
+                this.startIndex=this.viewPerPage*(num-1);
+                this.currentPage = num;
+            };
+        	let init = () => {
+                // $log.info('GetAccessCtrl:: initializing...');
+                this.searchString = '';
+                this.getAccessTableHeaders = ['ECOMP Function', 'Application Name', 'Role Name', 'Current Role', 'Request Status'];
+                this.appTable=[];
+                this.updateAppsList();             
+                this.viewPerPage=20;
+                this.startIndex=0;
+                this.currentPage = 1;
+                this.totalPage=0;
+            };
+            init();
+        }
+    }
+    GetAccessCtrl.$inject = ['$log', '$scope', '$stateParams', 'getAccessService', 'userProfileService', 'ExternalRequestAccessService','applicationsService', 'ngDialog'];
+    angular.module('ecompApp').controller('GetAccessCtrl', GetAccessCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.spec.js b/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.spec.js
index 3841a2b3..32cc3a1f 100644
--- a/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.controller.spec.js
@@ -1,19 +1,19 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.tpl.html b/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.tpl.html
index 7f6770ea..08ccbf48 100644
--- a/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/support/get-access/get-access.tpl.html
@@ -1,102 +1,102 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-get-access-home">

-	<div class="get-access-home-container" id="page-content">

-		<div class="admins-page-main">

-			<div id="title" class="w-ecomp-main-view-title">

-			<h1 class="heading-page">Get Access</h1>

-			</div>

-			<div ng-include

-				src="'app/views/support/get-access/get-accessinfo.html'"></div>

-			<div class="get-access-table">

-				<div class="table-control">

-					<input id="input-table-search" class="table-search" type="text"

-						placeholder="Search" ng-model="access.searchString" /> <span

-						class="ecomp-spinner" ng-show="access.isLoadingTable"></span>

-					<div b2b-table table-data="access.appTable"

-						ng-hide="access.isLoadingTable"

-						search-string="access.searchString"

-						class="b2b-table-div">

-						<table>

-							<thead b2b-table-row type="header">

-								<tr>

-									<th id="th-access-0" b2b-table-header key="ecomp_function"

-										sortable="false" >{{access.getAccessTableHeaders[0]}}</th>

-									<th id="th-access-1" b2b-table-header key="app_name"

-										sortable="false">{{access.getAccessTableHeaders[1]}}</th>

-									<th id="th-access-2" b2b-table-header key="role_name"

-										sortable="false">{{access.getAccessTableHeaders[2]}}</th>

-									<th id="th-access-3" b2b-table-header key="current_role"

-										sortable="false">{{access.getAccessTableHeaders[3]}}</th>

-									<th id="th-access-4" b2b-table-header key="request_access"

-										sortable="false">{{access.getAccessTableHeaders[4]}}</th>

-								</tr>

-							</thead>

-							<tbody b2b-table-row type="body"

-								row-repeat="rowData in access.appTable | limitTo:access.viewPerPage:access.startIndex | orderBy:'ecomp_function'"  track-by="$index">

-								<tr id="tr-rowData" ng-click="openAppRoleModal(rowData)">

-									<td b2b-table-body>

-										<div id="access-page-function"

-											ng-if="rowData.ecomp_function !== 'Ecomp Function Not Available'"

-											ng-show="$index == 0 || access.appTable[$index-1].ecomp_function != rowData.ecomp_function"

-											ng-bind="rowData.ecomp_function"></div>

-										<div id="access-page-function"

-											ng-if="rowData.ecomp_function === 'Ecomp Function Not Available'"

-											ng-bind="rowData.ecomp_function"></div>

-									</td>

-									<td b2b-table-body>

-										<div id="access-page-appName"

-											ng-show="$index == 0 || access.appTable[$index-1].app_name != rowData.app_name"

-											ng-bind="rowData.app_name"></div>

-									</td>

-									<td b2b-table-body>

-										<div id="access-page-roleName" ng-bind="rowData.role_name"></div>

-									</td>

-									<td b2b-table-body>

-										<div id="access-page-currentRole"

-											ng-if="rowData.current_role === 'Y'">

-											<i class="icon-included-checkmark"></i>

-										</div>

-									</td>

-									<td b2b-table-body>

-										<div id="access-page-RequestAccess"

-											ng-if="rowData.request_type !== null"

-											ng-bind="rowData.request_type"></div>

-									</td>

-								</tr>

-							</tbody>

-						</table>

-					</div>

-				</div>

-			</div>

-			<div b2b-pagination="" input-id="goto-page-1" total-pages="access.totalPage" current-page="access.currentPage" click-handler="access.updateTable" role="navigation" aria-label="Customer Data Pages"></div>	

-		</div>

-	</div>

-</div>

-

-<style>

-.tablesorter-default {

-	cursor: default;

-}

-

-.admins-page-main .admins-table .table-body {

-	cursor: default;

-}

-</style>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-get-access-home">
+	<div class="get-access-home-container" id="page-content">
+		<div class="admins-page-main">
+			<div id="title" class="w-ecomp-main-view-title">
+			<h1 class="heading-page">Get Access</h1>
+			</div>
+			<div ng-include
+				src="'app/views/support/get-access/get-accessinfo.html'"></div>
+			<div class="get-access-table">
+				<div class="table-control">
+					<input id="input-table-search" class="table-search" type="text"
+						placeholder="Search" ng-model="access.searchString" /> <span
+						class="ecomp-spinner" ng-show="access.isLoadingTable"></span>
+					<div b2b-table table-data="access.appTable"
+						ng-hide="access.isLoadingTable"
+						search-string="access.searchString"
+						class="b2b-table-div">
+						<table>
+							<thead b2b-table-row type="header">
+								<tr>
+									<th id="th-access-0" b2b-table-header key="ecomp_function"
+										sortable="false" >{{access.getAccessTableHeaders[0]}}</th>
+									<th id="th-access-1" b2b-table-header key="app_name"
+										sortable="false">{{access.getAccessTableHeaders[1]}}</th>
+									<th id="th-access-2" b2b-table-header key="role_name"
+										sortable="false">{{access.getAccessTableHeaders[2]}}</th>
+									<th id="th-access-3" b2b-table-header key="current_role"
+										sortable="false">{{access.getAccessTableHeaders[3]}}</th>
+									<th id="th-access-4" b2b-table-header key="request_access"
+										sortable="false">{{access.getAccessTableHeaders[4]}}</th>
+								</tr>
+							</thead>
+							<tbody b2b-table-row type="body"
+								row-repeat="rowData in access.appTable | filter:access.searchString | limitTo:access.viewPerPage:access.startIndex | orderBy:'ecomp_function'"  track-by="$index">
+								<tr id="tr-rowData" ng-click="openAppRoleModal(rowData)">
+									<td b2b-table-body>
+										<div id="access-page-function"
+											ng-if="rowData.ecomp_function !== 'Ecomp Function Not Available'"
+											ng-show="$index == 0 || access.appTable[$index-1].ecomp_function != rowData.ecomp_function"
+											ng-bind="rowData.ecomp_function"></div>
+										<div id="access-page-function"
+											ng-if="rowData.ecomp_function === 'Ecomp Function Not Available'"
+											ng-bind="rowData.ecomp_function"></div>
+									</td>
+									<td b2b-table-body>
+										<div id="access-page-appName"
+											ng-show="$index == 0 || access.appTable[$index-1].app_name != rowData.app_name"
+											ng-bind="rowData.app_name"></div>
+									</td>
+									<td b2b-table-body>
+										<div id="access-page-roleName" ng-bind="rowData.role_name"></div>
+									</td>
+									<td b2b-table-body>
+										<div id="access-page-currentRole"
+											ng-if="rowData.current_role === 'Y'">
+											<i class="icon-controls-check"></i>
+										</div>
+									</td>
+									<td b2b-table-body>
+										<div id="access-page-RequestAccess"
+											ng-if="rowData.request_type !== null"
+											ng-bind="rowData.request_type"></div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+			<div b2b-pagination="" input-id="goto-page-1" total-pages="access.totalPage" current-page="access.currentPage" click-handler="access.updateTable" role="navigation" aria-label="Customer Data Pages"></div>	
+		</div>
+	</div>
+</div>
+
+<style>
+.tablesorter-default {
+	cursor: default;
+}
+
+.admins-page-main .admins-table .table-body {
+	cursor: default;
+}
+</style>
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
index 5a5b7e49..bab9ba5c 100644
--- a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js
@@ -33,6 +33,12 @@
             $rootScope.showFooter = "";
             $cookies.putObject('show_app_header', false,{domain: cookieDomain, path : '/'});
 
+            let  getCookieDomain = function() {
+         	   return window.location.hostname;
+         	}
+          let getContextPath=function() {
+         	   return  window.location.pathname.substring( 0, window.location.pathname.lastIndexOf( '/' ) + 1 );
+         	}
 
             let noRefresh = function () {
                     window.onbeforeunload = function(e) {
@@ -72,8 +78,9 @@
                     if ($scope.tabs.length > 1) {
                         noRefresh();
                     }
-                    $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
-                    $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+                    $cookies.putObject('cookieTabs', $scope.tabs,{domain: getCookieDomain(), path : getContextPath()});
+                    $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: getCookieDomain(), path : getContextPath()});
+                   
             	}
             };
             
@@ -92,8 +99,8 @@
                     if ($scope.tabs.length > 1) {
                         noRefresh();
                     }
-                    $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
-                    $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+                    $cookies.putObject('cookieTabs', $scope.tabs,{domain: getCookieDomain(), path : getContextPath()});
+                    $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: getCookieDomain(), path : getContextPath()});
             	}
             };
             
@@ -124,7 +131,7 @@
               event.preventDefault();
               event.stopPropagation();
               $scope.tabs.splice(index, 1);
-              $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+              $cookies.putObject('cookieTabs', $scope.tabs,{domain: getCookieDomain(), path : getContextPath()});
             };
             
           //adjust height of the tab due to the search popup being hidden 
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
index dd11c60d..5fc2d894 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
@@ -1,36 +1,36 @@
-/*-

- * ================================================================================

- * 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 () {

-

-    class userNotificationCtrl {

-        constructor($scope,   message,  ngDialog) {

-    		$scope.messageData=message.text;

-   			//alert("message.text" + $scope.messageData);

-         }

-    }

-    userNotificationCtrl.$inject = ['$scope',  'message', 'ngDialog'];

-    angular.module('ecompApp').controller('userNotificationCtrl', userNotificationCtrl);

-})();

-

-

-

- 

+/*-
+ * ================================================================================
+ * 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 () {
+
+    class userNotificationCtrl {
+        constructor($scope,   message,  ngDialog) {
+    		$scope.messageData=message.text;
+   			//alert("message.text" + $scope.messageData);
+         }
+    }
+    userNotificationCtrl.$inject = ['$scope',  'message', 'ngDialog'];
+    angular.module('ecompApp').controller('userNotificationCtrl', userNotificationCtrl);
+})();
+
+
+
+ 
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
index 2c22751b..5e5c55db 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
@@ -1,48 +1,48 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-user-json-notification-details-admin"

-	ng-style="{bottom: tabBottom}">

-	 <div class="w-ecomp-main-container" >

-	<div class="user-notification" >

-		<div id="'widgets-details-title" class="w-ecomp-main-json-view-title"> Message Notification Details </div>

-	

-	

-<div class="notifications-properties-main">

-		

-		<div ng-bind-html="messageData"></div>

-		</div>

-		

-            <div class="dialog-control-close">

-               

-                <button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>

-            </div>

-		

-			</div>

-

-</div>

-</div>

-

-<script type="application/javascript">

-    $(document).ready(function(){

-        $(".ngdialog-content").css("width","40%")

-        $(".ngdialog-content").css("height","450px")

-

-    });

-</script>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-user-json-notification-details-admin"
+	ng-style="{bottom: tabBottom}">
+	 <div class="w-ecomp-main-container" >
+	<div class="user-notification" >
+		<div id="'widgets-details-title" class="w-ecomp-main-json-view-title"> Message Notification Details </div>
+	
+	
+<div class="notifications-properties-main">
+		
+		<div ng-bind-html="messageData"></div>
+		</div>
+		
+            <div class="dialog-control-close">
+               
+                <button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>
+            </div>
+		
+			</div>
+
+</div>
+</div>
+
+<script type="application/javascript">
+    $(document).ready(function(){
+        $(".ngdialog-content").css("width","40%")
+        $(".ngdialog-content").css("height","450px")
+
+    });
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
index 51c7bb7c..4207bc6e 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
@@ -1,196 +1,196 @@
-/*-

- * ================================================================================

- * 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 () {

-

-    class userNotificationsCtrl {

-        constructor($scope, $log, notificationService, confirmBoxService, $modal, ngDialog, $state) {

-

-        	var priorityItems={"1":"Normal","2":"Important"};

-        	$scope.priorityItems=priorityItems;

-        	$scope.searchString='';

-            $scope.externalNotification="External System";

-        	$scope.itemExpired={"background-color":"silver "};

-        	$scope.showInput = true;

-        	$scope.totalPages1 = 0;

-        	$scope.viewPerPage1 = 15;

-        	$scope.currentPage1 = 1;

-        	$scope.showLoader = false;

-        	$scope.firstPlay = true;

-        	// Start with empty list to silence error in console

-        	$scope.tableData = [];

-        	$scope.tableAdminNotifItems = [];

-        	 let getAdminNotifications = () => {

-               $scope.isLoadingTable = true;

-        	notificationService.getAdminNotification().then(res => {

-                $scope.adminNotifications = res.data;

-                $scope.isLoadingTable = false;

-                $scope.tableData = res.data;

-    			var totalItems = $scope.tableData.length;

-    			$scope.totalPages1  = Math.ceil(totalItems / $scope.viewPerPage1);

-    			$scope.showLoader = false;

-    			$scope.currentPage1=1;

-    			var endIndex = 1 * $scope.viewPerPage1;

-    			var startIndex = endIndex - $scope.viewPerPage1;

-    			$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex); 

-            	}).catch(err => {

-                $log.error('userNotificationsCtrl:getAdminNotifications:: error ', err);

-                $scope.isLoadingTable = false;

-            });

-             }

-        	 

-      	   getAdminNotifications();           

-

-        	$scope.customPageHandler = function(num) {

-        		$scope.currentPage1=num;

-        		var endIndex = num * $scope.viewPerPage1;

-        		var startIndex = endIndex - $scope.viewPerPage1;

-        		$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex);

-        	};

-        	  

-

-          

-

-           	

-           $scope.removeUserNotification = function (selectedAdminNotification) {

-                selectedAdminNotification.activeYn = 'N';

-                confirmBoxService.deleteItem(selectedAdminNotification.msgHeader)

-                    .then(isConfirmed => {

-                        if (isConfirmed) {

-                            notificationService.updateAdminNotification(selectedAdminNotification)

-                                .then(() => {

-                                    getAdminNotifications();

-                                }).catch(err => {

-                                    switch (err.status) {

-                                        case '409':         // Conflict

-                                            // handleConflictErrors(err);

-                                            break;

-                                        case '500':         // Internal Server

-															// Error

-                                            confirmBoxService.showInformation('There was a problem updating the notification. ' +

-                                                'Please try again later. Error: ' + err.status).then(isConfirmed => { });

-                                            break;

-                                        case '403':         // Forbidden...

-															// possible

-															// webjunction error

-															// to try again

-                                            confirmBoxService.showInformation('There was a problem updating the notification. ' +

-                                                'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });

-                                            break;

-                                        default:

-                                            confirmBoxService.showInformation('There was a problem updating the notification. ' +

-                                                'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });

-                                    }

-                                    $log.error('UserNotifCtlr::updateAdminNOtif failed: ' + JSON.stringify(err));

-                                }).finally(() => {

-                                    var objOffsetVersion = objAgent.indexOf("MSIE");

-                                    if (objOffsetVersion != -1) {

-                                        $window.location.reload();       

-                                    }

-                                });

-                        }

-                    }).catch(err => {

-                        $log.error('UserNotifCtlr::deleteItem error: ' + err);

-                    });

-            }

-           

-

-          

-        	 $scope.showDetailedJsonMessage=function (selectedAdminNotification) {

-        		 notificationService.getMessageRecipients(selectedAdminNotification.notificationId).then(res =>{

-                     $scope.messageRecipients = res;

-				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);

-				 var html="";

-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';

-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';

-				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';

-

-				 for(var field in  messageObject){

-					 if(field=='eventDate'||field=='lastModifiedDate'){

-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';

-						  

-					 }else{

-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';

-					 

-					 }

-				 }

-

- 		     var modalInstance = ngDialog.open({

- 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',

- 				    controller: 'userNotificationCtrl',

- 				    resolve: {

- 				    	message: function () {

- 				    		var message = {

- 				    			   title:    '',

- 		                       		text:    html

- 		                       		

- 		                           	};

- 				          return message;

- 				        },

- 				     

- 				      }

- 				  }); 

- 		     

-        	 }).catch(err => {

-                 $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);

-                 $scope.isLoadingTable = false;

-             });

-

- 			 };

-    

-			 

-            $scope.editUserNotificationModal = function (selectedAdminNotification) {

-

-                // retrieve roleIds here

-                selectedAdminNotification.roleIds = null;

-                notificationService.getNotificationRoles(selectedAdminNotification.notificationId)

-                    .then(res => {

-                        selectedAdminNotification.roleIds = res.data;

-

-                        $scope.openUserNotificationModal(selectedAdminNotification);

-                    }).catch(err => {

-                        $log.error('UserNotifCtlr:getNotificationRoles:: error ', err);

-

-                    });

-            }

-

-            $scope.openUserNotificationModal = function (selectedAdminNotification) {

-                let data = null;

-                if (selectedAdminNotification) {

-                    data = {

-                        notif: selectedAdminNotification

-                    }

-                }

-                ngDialog.open({

-                    templateUrl: 'app/views/user-notifications-admin/user.notifications.modal.page.html',

-                    controller: 'userNotificationsModalCtrl',

-                    controllerAs: 'userNotifModal',

-                    data: data

-                }).closePromise.then(function (needUpdate) {

-                    getAdminNotifications();

-                });

-            }

-

-        }

-    }

-    userNotificationsCtrl.$inject = ['$scope', '$log', 'notificationService', 'confirmBoxService', '$modal', 'ngDialog', '$state'];

-    angular.module('ecompApp').controller('userNotificationsCtrl', userNotificationsCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+
+    class userNotificationsCtrl {
+        constructor($scope, $log, notificationService, confirmBoxService, $modal, ngDialog, $state) {
+
+        	var priorityItems={"1":"Normal","2":"Important"};
+        	$scope.priorityItems=priorityItems;
+        	$scope.searchString='';
+            $scope.externalNotification="External System";
+        	$scope.itemExpired={"background-color":"silver "};
+        	$scope.showInput = true;
+        	$scope.totalPages1 = 0;
+        	$scope.viewPerPage1 = 15;
+        	$scope.currentPage1 = 1;
+        	$scope.showLoader = false;
+        	$scope.firstPlay = true;
+        	// Start with empty list to silence error in console
+        	$scope.tableData = [];
+        	$scope.tableAdminNotifItems = [];
+        	 let getAdminNotifications = () => {
+               $scope.isLoadingTable = true;
+        	notificationService.getAdminNotification().then(res => {
+                $scope.adminNotifications = res.data;
+                $scope.isLoadingTable = false;
+                $scope.tableData = res.data;
+    			var totalItems = $scope.tableData.length;
+    			$scope.totalPages1  = Math.ceil(totalItems / $scope.viewPerPage1);
+    			$scope.showLoader = false;
+    			$scope.currentPage1=1;
+    			var endIndex = 1 * $scope.viewPerPage1;
+    			var startIndex = endIndex - $scope.viewPerPage1;
+    			$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex); 
+            	}).catch(err => {
+                $log.error('userNotificationsCtrl:getAdminNotifications:: error ', err);
+                $scope.isLoadingTable = false;
+            });
+             }
+        	 
+      	   getAdminNotifications();           
+
+        	$scope.customPageHandler = function(num) {
+        		$scope.currentPage1=num;
+        		var endIndex = num * $scope.viewPerPage1;
+        		var startIndex = endIndex - $scope.viewPerPage1;
+        		$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex);
+        	};
+        	  
+
+          
+
+           	
+           $scope.removeUserNotification = function (selectedAdminNotification) {
+                selectedAdminNotification.activeYn = 'N';
+                confirmBoxService.deleteItem(selectedAdminNotification.msgHeader)
+                    .then(isConfirmed => {
+                        if (isConfirmed) {
+                            notificationService.updateAdminNotification(selectedAdminNotification)
+                                .then(() => {
+                                    getAdminNotifications();
+                                }).catch(err => {
+                                    switch (err.status) {
+                                        case '409':         // Conflict
+                                            // handleConflictErrors(err);
+                                            break;
+                                        case '500':         // Internal Server
+															// Error
+                                            confirmBoxService.showInformation('There was a problem updating the notification. ' +
+                                                'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+                                            break;
+                                        case '403':         // Forbidden...
+															// possible
+															// webjunction error
+															// to try again
+                                            confirmBoxService.showInformation('There was a problem updating the notification. ' +
+                                                'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+                                            break;
+                                        default:
+                                            confirmBoxService.showInformation('There was a problem updating the notification. ' +
+                                                'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+                                    }
+                                    $log.error('UserNotifCtlr::updateAdminNOtif failed: ' + JSON.stringify(err));
+                                }).finally(() => {
+                                    var objOffsetVersion = objAgent.indexOf("MSIE");
+                                    if (objOffsetVersion != -1) {
+                                        $window.location.reload();       
+                                    }
+                                });
+                        }
+                    }).catch(err => {
+                        $log.error('UserNotifCtlr::deleteItem error: ' + err);
+                    });
+            }
+           
+
+          
+        	 $scope.showDetailedJsonMessage=function (selectedAdminNotification) {
+        		 notificationService.getMessageRecipients(selectedAdminNotification.notificationId).then(res =>{
+                     $scope.messageRecipients = res;
+				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);
+				 var html="";
+				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';
+				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';
+				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
+
+				 for(var field in  messageObject){
+					 if(field=='eventDate'||field=='lastModifiedDate'){
+						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
+						  
+					 }else{
+					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
+					 
+					 }
+				 }
+
+ 		     var modalInstance = ngDialog.open({
+ 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
+ 				    controller: 'userNotificationCtrl',
+ 				    resolve: {
+ 				    	message: function () {
+ 				    		var message = {
+ 				    			   title:    '',
+ 		                       		text:    html
+ 		                       		
+ 		                           	};
+ 				          return message;
+ 				        },
+ 				     
+ 				      }
+ 				  }); 
+ 		     
+        	 }).catch(err => {
+                 $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
+                 $scope.isLoadingTable = false;
+             });
+
+ 			 };
+    
+			 
+            $scope.editUserNotificationModal = function (selectedAdminNotification) {
+
+                // retrieve roleIds here
+                selectedAdminNotification.roleIds = null;
+                notificationService.getNotificationRoles(selectedAdminNotification.notificationId)
+                    .then(res => {
+                        selectedAdminNotification.roleIds = res.data;
+
+                        $scope.openUserNotificationModal(selectedAdminNotification);
+                    }).catch(err => {
+                        $log.error('UserNotifCtlr:getNotificationRoles:: error ', err);
+
+                    });
+            }
+
+            $scope.openUserNotificationModal = function (selectedAdminNotification) {
+                let data = null;
+                if (selectedAdminNotification) {
+                    data = {
+                        notif: selectedAdminNotification
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/user-notifications-admin/user.notifications.modal.page.html',
+                    controller: 'userNotificationsModalCtrl',
+                    controllerAs: 'userNotifModal',
+                    data: data
+                }).closePromise.then(function (needUpdate) {
+                    getAdminNotifications();
+                });
+            }
+
+        }
+    }
+    userNotificationsCtrl.$inject = ['$scope', '$log', 'notificationService', 'confirmBoxService', '$modal', 'ngDialog', '$state'];
+    angular.module('ecompApp').controller('userNotificationsCtrl', userNotificationsCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
index ebf48075..e17ec46f 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
@@ -1,48 +1,48 @@
-

-.w-ecomp-user-json-notification-details-admin {

- .bg_portalWhite;//white for 1702

-    //.bg_portalGray;  // gray for 1610

-    position: relative;

-    top: 20px;

-    left: -200px;

-    right: @page-main-right;

-    bottom: @page-main-bottom;

-    padding-top: @padding-top;

-    padding-left: @padding-left-side;

-    height: 345px;

-    width: 96%;

-    margin-left: 220px;

-  .w-ecomp-main-json-view-title {

-    //.n18r;

-    .dGray18r;  //AT&T Dark Gray

-    border-bottom: @portalDBlue 3px solid;

-    width:100%;

-  }

-  

-  .notifications-properties-main{

-     padding-top: 16px;

-    font-size: 14px;

-    overflow-y: scroll;

-    max-height: 285px;

-      

-  }

-input:not([type="button"]) {

-  height: 22px; }

-  .widget-properties-main {

-    padding: 16px;

-    height: 460px;

-    overflow-y: auto;

-

-

-    

-

-  }

-

-.dialog-control-close {

-    position: absolute;

-    bottom: -60px;

-    right: 16px;

-}

-

-

+
+.w-ecomp-user-json-notification-details-admin {
+ .bg_portalWhite;//white for 1702
+    //.bg_portalGray;  // gray for 1610
+    position: relative;
+    top: 20px;
+    left: -200px;
+    right: @page-main-right;
+    bottom: @page-main-bottom;
+    padding-top: @padding-top;
+    padding-left: @padding-left-side;
+    height: 345px;
+    width: 96%;
+    margin-left: 220px;
+  .w-ecomp-main-json-view-title {
+    //.n18r;
+    .dGray18r;  //AT&T Dark Gray
+    border-bottom: @portalDBlue 3px solid;
+    width:100%;
+  }
+  
+  .notifications-properties-main{
+     padding-top: 16px;
+    font-size: 14px;
+    overflow-y: scroll;
+    max-height: 285px;
+      
+  }
+input:not([type="button"]) {
+  height: 22px; }
+  .widget-properties-main {
+    padding: 16px;
+    height: 460px;
+    overflow-y: auto;
+
+
+    
+
+  }
+
+.dialog-control-close {
+    position: absolute;
+    bottom: -60px;
+    right: 16px;
+}
+
+
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
index ebd2f93d..7821e070 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
@@ -1,747 +1,747 @@
-/*-

- * ================================================================================

- * 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 () {

-

-    class userNotificationsModalCtrl {

-        constructor($scope, $log, functionalMenuService, confirmBoxService, notificationService, $modal, ngDialog, $state, $filter) {

-

-            let newNotifModel = {

-                'isOnlineUsersOnly': null,

-                'isForAllRolesOptions': null,

-                'selectedPriority': null,

-                'isActive': null,

-                'startTime': null,

-                'endTime': null,

-                'msgHeader': null,

-                'msgDescription': null,

-                'roleIds': null,

-                'roleObj': {notificationRoleIds:null}

-            };

-            

-            $scope.notificationId = null;

-            $scope.selectedCat = null;

-            $scope.selectedEcompFunc = null;

-            this.YN_index_mapping = {

-                "Y": 0,

-                "N": 1

-            }

-            

-            $scope.onlineAllUsersOptions = [

-                { "index": 0, "value": "Y", "title": "Online Users Only" },

-                { "index": 1, "value": "N", "title": "Online & Offline Users" }

-                

-            ];

-

-            $scope.isForAllRolesOptions = [

-                { "index": 0, "value": "Y", "title": "Yes" },

-                { "index": 1, "value": "N", "title": "No" }

-            ];

-

-            $scope.priorityOptions  = [

-                { "index": 0, "value": 1, "title": "Normal" },

-                { "index": 1, "value": 2, "title": "Important" }

-            ];

-

-            $scope.isActiveOptions = [

-                { "index": 0, "value": "Y", "title": "Yes" },

-                { "index": 1, "value": "N", "title": "No" }

-            ];

-            $scope.isActive = $scope.isActiveOptions[0];

-            $scope.selectPriority = $scope.priorityOptions[0];

-            $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[1];

-          $scope.isForAllRoles=$scope.isForAllRolesOptions[0].value;

-          $scope.isFunctionalMenu ="Y";

-

-          $scope.selectedPriority=$scope.priorityOptions[0].value;

-

-            // $scope.notificationRoleIds = [];

-            $scope.msgHeader = '';

-            $scope.msgDescription = '';

-            $scope.treeTitle="Functional Menu";

-            $scope.notifObj= {isCategoriesFunctionalMenu:true};

-

-            let init = () => {

-                // $log.info('userNotificationsModalCtrl::init');

-                this.isSaving = false;

-                var today = new Date();

-                $scope.minDate = today.toISOString().substring(0, 10);

-                var threeMonthsFromNow = new Date();

-                threeMonthsFromNow.setMonth(threeMonthsFromNow.getMonth() + 3);

-                $scope.maxDate = threeMonthsFromNow.toISOString().substring(0, 10);

-                if ($scope.ngDialogData && $scope.ngDialogData.notif) {

-                    // $log.debug('userNotificationsModalCtrl:init:: Edit

-					// notification mode for', $scope.ngDialogData.notif);

-                    $scope.isEditMode = true;

-                    $scope.editModeObj = {isEditMode: true};

-                    this.notif = _.clone($scope.ngDialogData.notif);

-                    $scope.modalPgTitle = 'View Notification'

-                    $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[this.YN_index_mapping[this.notif.isForOnlineUsers]];

-                    $scope.isForAllRoles = $scope.isForAllRolesOptions[this.YN_index_mapping[this.notif.isForAllRoles]].value;

-                    $scope.isActive = $scope.isActiveOptions[this.YN_index_mapping[this.notif.activeYn]];

-                    $scope.selectedPriority = $scope.priorityOptions[this.notif.priority - 1].value;

-                    $scope.startTime = new Date(this.notif.startTime);

-                    $scope.endTime = new Date(this.notif.endTime);

-                    $scope.msgHeader = this.notif.msgHeader;

-                    $scope.msgDescription = this.notif.msgDescription;

-                    $scope.notificationId = this.notif.notificationId;

-                    $scope.notificationRoleIds = this.notif.roleIds;

-                    $scope.roleObj = {notificationRoleIds:this.notif.roleIds};

-                } else {

-                	// $log.debug('AppDetailsModalCtrl:init:: New app mode');

-                    $scope.isEditMode = false;

-                    $scope.editModeObj = {isEditMode: false};

-                    $scope.modalPgTitle = 'Add a New Notification'

-                    this.notif = _.clone(newNotifModel);

-                    $scope.roleObj = {notificationRoleIds:null};

-                }

-            };

-            this.conflictMessages = {};

-            this.scrollApi = {};

-            let handleConflictErrors = err => {

-                if(!err.data){

-                    return;

-                }

-                if(!err.data.length){ // support objects

-                    err.data = [err.data]

-                }

-                _.forEach(err.data, item => {

-                    _.forEach(item.fields, field => {

-                        // set conflict message

-                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];

-                        // set field as invalid

-                        $scope.appForm[field.name].$setValidity('conflict', false);

-                        // set watch once to clear error after user correction

-                        watchOnce[field.name]();

-                    });

-                });

-                this.scrollApi.scrollTop();

-            };

-

-            let resetConflict = fieldName => {

-                delete this.conflictMessages[fieldName];

-                if($scope.appForm[fieldName]){

-                    $scope.appForm[fieldName].$setValidity('conflict', true);

-                }

-            };

-            $scope.addUserNotificationValidation = function () {

-                // // pre-processing

-                if (!($scope.isEditMode)) {                    

-                    var validation=false;

-

-               if($scope.startTime && $scope.endTime && $scope.msgHeader != '' && $scope.msgDescription != '' && ($scope.startTime<$scope.endTime)){

-            	   validation=true;

-            	   if( $scope.isForAllRoles=='N'){

-                       validation =  $scope.checkBoxObj.isAnyRoleSelected;

-                   }

-               }

-               else{

-            	   validation=false;

-            	   }

-                    

-                    	

-                   return !validation; 

-                }

-            }

-            

-            /* format the value for viewing a notification */

-            $scope.formatStartDate = function () {

-            	if ($scope.startTime) {

-            		$scope.startTime = $filter('date')($scope.startTime, 'medium'); 

-           	}            	

-            }

-            

-            /* format the value for viewing a notification */

-            $scope.formatEndDate = function () {

-            	if($scope.endTime){

-            		$scope.endTime = $filter('date')($scope.endTime, 'medium');

-            	}

-            }

-            

-            $scope.addUserNotification = function () {

-                $scope.notificationRoleIds = [];

-                // pre-processing

-                for (var key in $scope.checkboxIdDict) {

-                    if ($scope.checkboxIdDict[key].is_box_checked && ($scope.checkboxIdDict[key].role_id != null)) {

-                        var role_ids = $scope.checkboxIdDict[key].role_id;

-                        for (var i in role_ids) {

-                            if (!($scope.notificationRoleIds.indexOf(role_ids[i]) > -1)) {

-                                $scope.notificationRoleIds.push(role_ids[i]);

-                            }

-                        }

-                    }

-                }

-

-                $scope.notificationRoleIds.sort();

-                if (($scope.isOnlineUsersOnly) && ($scope.isForAllRoles) && ($scope.selectedPriority) && ($scope.isActive)

-                    && ($scope.startTime) && ($scope.endTime) && ($scope.msgHeader != '') && ($scope.msgDescription != '')) {

-                    this.newUserNotification =

-                        {

-                            'notificationId':$scope.notificationId,

-                            'isForOnlineUsers': $scope.isOnlineUsersOnly.value,

-                            'isForAllRoles': $scope.isForAllRoles,

-                            'priority': $scope.selectedPriority,

-                            'activeYn': $scope.isActive.value,

-                            'startTime': $scope.startTime,

-                            'endTime': $scope.endTime,

-                            'msgHeader': $scope.msgHeader,

-                            'msgDescription': $scope.msgDescription,

-                            'roleIds': $scope.notificationRoleIds,

-                            'createdDate': new Date()

-                        };

-

-                    // POST ajax call here;

-                    if ($scope.isEditMode) {

-                        notificationService.updateAdminNotification(this.newUserNotification)

-                            .then(() => {

-                                //$log.debug('NotificationService:updateAdminNotification:: Admin notification update succeeded!');

-                                $scope.closeThisDialog(true);

-                                // emptyCookies();

-                            }).catch(err => {

-                                $log.error('notificationService.updateAdminNotfication failed: ' + JSON.stringify(err));

-                                switch (err.status) {

-                                    case '409':         // Conflict

-                                        // handleConflictErrors(err);

-                                        break;

-                                    case '500':         // Internal Server Error

-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +

-                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });

-                                        break;

-                                    case '403':         // Forbidden... possible

-														// webjunction error to

-														// try again

-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +

-                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });

-                                        break;

-                                    default:

-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +

-                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });

-                                }

-                            }).finally(() => {

-                                // for bug in IE 11

-                                var objOffsetVersion = objAgent.indexOf("MSIE");

-                                if (objOffsetVersion != -1) {

-                                    $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');

-                                    $window.location.reload();   

-                                }

-                                // for bug in IE 11

-                            });

-

-                    } else {

-                        notificationService.addAdminNotification(this.newUserNotification)

-                            .then((res) => {

-                                $log.debug('notificationService:addAdminNotification:: Admin notification creation succeeded!,',res);

-                                if(res.status=='ERROR'){

-                                	 confirmBoxService.showInformation('There was a problem adding the notification. ' +

-                                             ' Error: ' + res.response).then(isConfirmed => { });

-

-                                	

-                                }

-                                else{

-                                	 $scope.closeThisDialog(true);

-                                }

-                               

-                                // emptyCookies();

-                            }).catch(err => {

-                                switch (err.status) {

-                                    case '409':         // Conflict

-                                        // handleConflictErrors(err);

-                                        break;

-                                    case '500':         // Internal Server Error

-                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +

-                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });

-                                        break;

-                                    default:

-                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +

-                                            'Please try again. If the problem persists, then try again later. Error: ' +

-                                            err.status).then(isConfirmed => { });

-                                }

-                                $log.error('notificationService:addAdminNotification error:: ' + JSON.stringify(err));

-                            })

-                    }

-

-                   

-                } else {

-                    $log.warn('please fill in all required fields');

-                	confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => { });

-                }

-            }

-            // Populate the category list for category dropdown list

-            let getFunctionalMenu = () => {

-                this.isLoadingTable = true;

-                $scope.notifObj= {isCategoriesFunctionalMenu:true};

-                functionalMenuService.getFunctionalMenuRole().then(role_res => {

-                    var menu_role_dict = {};

-                    for (var i in role_res) {

-                        // if first time appear in menu_role_dict

-                        if (!(role_res[i].menuId in menu_role_dict)) {

-                            menu_role_dict[role_res[i].menuId] = [role_res[i].roleId];

-                        } else {

-                            menu_role_dict[role_res[i].menuId].push(role_res[i].roleId);

-                        }

-                    }

-                    functionalMenuService.getManagedFunctionalMenuForNotificationTree().then(res => {

-                        let actualData = [];

-                        var exclude_list = ['Favorites']

-                        // Adding children and label attribute to all objects in

-                        $scope.checkboxIdDict = {};

-                        $scope.checkBoxObj = {isAnyRoleSelected:false};

-                        for (let i = 0; i < res.length; i++) {

-                            res[i].children = [];

-                            res[i].label = res[i].text;

-                            res[i].id = res[i].text;

-                            // res[i].is_box_checked = false;

-                            res[i].can_check = true;

-                            res[i].roleId = menu_role_dict[res[i].menuId];

-                            $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId };

-                        }

-

-                        // Adding actual child items to children array in res

-						// objects

-                        $scope.parentChildDict ={};

-                        $scope.parentChildRoleIdDict ={};

-                        for (let i = 0; i < res.length; i++) {

-                            let parentId = res[i].menuId;

-                            $scope.parentChildDict[parentId] = [];

-                            $scope.parentChildRoleIdDict[parentId]=[];

-                            for (let j = 0; j < res.length; j++) {

-                                let childId = res[j].parentMenuId;

-                                if (parentId === childId) {

-                                    res[i].children.push(res[j]);

-                                    $scope.parentChildDict[parentId].push(res[j].menuId);

-                                    //if res[j].roleId is defined

-                                    if (res[j].roleId) {

-                                    	for (let k in res[j].roleId) {

-                                            $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);

-                                    	}

-                                    	

-                                    }

-                                }

-                            }

-                        }

-                        

-                        //check if grand children exist

-                            for (var key in $scope.parentChildDict){

-                            	var children = $scope.parentChildDict[key];

-                            	var isGrandParent = false;

-                            	if (children.length>0) {

-                            		for (var i in children) {

-                            			if ($scope.parentChildDict[children[i]].length>0){

-                            				isGrandParent = true;

-                            				break;

-                            			}

-                            		}

-                            	}

-                            	if (isGrandParent) {

-                                	for (var i in children) {

-                                		// if the child has children

-                                		if ($scope.parentChildDict[children[i]].length>0) {

-                                			for (var j in $scope.parentChildRoleIdDict[children[i]]) {

-                                				

-                                				if ($scope.parentChildRoleIdDict[key].indexOf($scope.parentChildRoleIdDict[children[i]][j]) === -1) {

-                                					$scope.parentChildRoleIdDict[key].push($scope.parentChildRoleIdDict[children[i]][j]);

-                                				}

-                                			}

-                                		} else {

-                                			 

-                                		}

-                                	}

-                            	}

-

-                            };                            

-                                                        

-

-                                var ListMenuIdToRemove = [];

-                        //$scope.parentObj = {ListMenuIdToRemove : []};

-                        //get the list of menuId that needs to be removed 

-                        for (let i = 0; i < res.length; i++) {

-                            if ((res[i].children.length==0)&&(!res[i].roleId)) {

-                                var menuIdToRemove = res[i].menuId;

-                                if (ListMenuIdToRemove.indexOf(menuIdToRemove) === -1){

-                                    ListMenuIdToRemove.push(menuIdToRemove);

-                                }

-                            }

-                        }

-

-                        // a scope variable that marks whether each functional menu item should be displayed.

-                        $scope.toShowItemDict = {};                        

-                        for (let i = 0; i < res.length; i++) {

-                            if (res[i].roleId==null) {

-                                if (res[i].children.length==0) {

-                                    $scope.toShowItemDict[res[i].menuId]=false;                                

-                                } else if(res[i].children.length>0){

-                                    if($scope.parentChildDict[res[i].menuId].length === _.intersection($scope.parentChildDict[res[i].menuId], ListMenuIdToRemove).length){

-                                        $scope.toShowItemDict[res[i].menuId]=false;                                

-                                    } else {

-                                        $scope.toShowItemDict[res[i].menuId]=true;                                

-                                    }

-                                }

-                            } else {

-                                $scope.toShowItemDict[res[i].menuId]=true;

-                            }

-                        }

- 

-                        // Sort the top-level menu items in order based on the

-						// column

-                        res.sort(function (a, b) {

-                            return a.column - b.column;

-                        });

-

-                        // Sort all the children in order based on the column

-                        for (let i = 0; i < res.length; i++) {

-                            res[i].children.sort(function (a, b) {

-                                return a.column - b.column;

-                            });

-                        }

-

-                        // Forming actual parent items

-                        for (let i = 0; i < res.length; i++) {

-                            let parentId = res[i].parentMenuId;

-                            if (parentId === null) {

-                                actualData.push(res[i]);

-                            }

-                        }

-

-                        // $scope.treedata = actualData;

-                        var treedata = actualData[0].children;

-                        $scope.treedata = [];

-                        for (var i in treedata) {

-                            if (!(treedata[i].label.indexOf(exclude_list) > -1)) {

-                                $scope.treedata.push(treedata[i])

-                            }

-                        }

-

-                    }).catch(err => {

-                        $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);

-                    }).finally(() => {

-                        this.isLoadingTable = false;

-                    })

-

-                }).catch(err => {

-                    $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);

-                })

-                    ;

-            }

-     

-            

-            let getAppRoleIds = () => {

-                $scope.notifObj= {isCategoriesFunctionalMenu:false};

-                notificationService.getAppRoleIds().then(res => {

-                	

-                    res = res.data;

-                    let actualData = [];

-                    // var exclude_list = ['Favorites']

-                    var app_id_name_list = {};

-                        $scope.checkboxIdDict = {};

-                        $scope.checkBoxObj = {isAnyRoleSelected:false};

-

-                    for (let i = 0; i < res.length; i++) {

-                        if (!(res[i].appId in app_id_name_list)) {

-                            app_id_name_list[res[i].appId] = res[i].appName;

-                        }

-

-                        res[i].children = [];

-                        res[i].label = res[i].roleName;

-                        res[i].id = res[i].roleId;

-                        res[i].menuId = res[i].roleId;

-                        res[i].parentMenuId = res[i].appId;

-                        res[i].can_check = true;

-                        res[i].roleId = [res[i].roleId];

-                        $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId};   

-                    }

-                    

-                    for (var app_id in app_id_name_list) {

-                        var new_res = {};

-                        new_res.children = [];

-                        new_res.label = app_id_name_list[app_id];

-                        new_res.id = app_id;

-                        new_res.menuId = app_id;

-                        new_res.parentMenuId = null;

-                        new_res.appId = null;

-                        new_res.can_check = true;

-                        new_res.roleId = null;

-                        $scope.checkboxIdDict[new_res.id]= { 'is_box_checked': false, 'role_id': new_res.roleId };

-                        res.push(new_res);

-                    }

-                    $scope.parentChildRoleIdDict ={};

-                    //Adding actual child items to children array in res objects

-                    for (let i = 0; i < res.length; i++) {

-                        let parentId = res[i].menuId;

-                        $scope.parentChildRoleIdDict[parentId]=[];

-                        for (let j = 0; j < res.length; j++) {

-                            let childId = res[j].parentMenuId;

-                            if (parentId == childId) {

-                                res[i].children.push(res[j]);

-                                if (res[j].roleId) {

-                                	for (let k in res[j].roleId) {

-                                        $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);

-                                	}

-                                	

-                                }

-                            }

-                        }

-                    }

-                    //Forming actual parent items

-                    for (let i = 0; i < res.length; i++) {

-                        let parentId = res[i].parentMenuId;

-                        if (parentId === null) {

-                            actualData.push(res[i]);

-                        }

-                    }

-

-                    $scope.treedata = actualData;

-                }).catch(err => {

-                    $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);

-                }).finally(() => {

-                    this.isLoadingTable = false;

-                })

-            }

-            $scope.getFunctionalMenu= function() {

-            $scope.treeTitle="Functional Menu";

-            getFunctionalMenu();

-            }

-            $scope.getAppRoleIds = function() {

-            $scope.treeTitle="Applications/Roles";

-                getAppRoleIds();

-            }

-             

-            init();

-            getFunctionalMenu();

-

-        }

-        

-    }

-    

-    userNotificationsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'confirmBoxService', 'notificationService', '$modal', 'ngDialog', '$state', '$filter'];

-    angular.module('ecompApp').controller('userNotificationsModalCtrl', userNotificationsModalCtrl);

-    

-    angular.module('ecompApp').directive('attDatepickerCustom', ['$log', function($log) {

-        return {

-            restrict: 'A',

-          require: 'ngModel',

-            scope: {},

-            

-            controller: ['$scope', '$element', '$attrs', '$compile', 'datepickerConfig', 'datepickerService', function($scope, $element, $attrs, $compile, datepickerConfig, datepickerService) {

-               var dateFormatString = angular.isDefined($attrs.dateFormat) ? $scope.$parent.$eval($attrs.dateFormat) : datepickerConfig.dateFormat;

-               var selectedDateMessage = '<div class="sr-focus hidden-spoken" tabindex="-1">the date you selected is {{$parent.current | date : \'' + dateFormatString + '\'}}</div>';

-               $element.removeAttr('att-datepicker-custom');

-                $element.removeAttr('ng-model');

-                $element.attr('ng-value', '$parent.current |  date:"EEEE, MMMM d, y"');

-                $element.attr('aria-describedby', 'datepicker');

-               

-                $element.attr('maxlength', 10);

-

-                var wrapperElement = angular.element('<div></div>');

-                wrapperElement.attr('datepicker-popup', '');

-                wrapperElement.attr('current', 'current');

-

-                datepickerService.setAttributes($attrs, wrapperElement);

-                datepickerService.bindScope($attrs, $scope);

-

-                wrapperElement.html('');

-                wrapperElement.append($element.prop('outerHTML'));

-                if (navigator.userAgent.match(/MSIE 8/) === null) {

-                    wrapperElement.append(selectedDateMessage);

-                }

-                var elm = wrapperElement.prop('outerHTML');

-                elm = $compile(elm)($scope);

-                $element.replaceWith(elm);

-            }],

-            link: function(scope, elem, attr, ctrl) {

-                if (!ctrl) {

-                    // do nothing if no ng-model

-                    $log.error("ng-model is required.");

-                    return;

-                }

-

-                scope.$watch('current', function(value) {

-                    ctrl.$setViewValue(value);

-                });

-                ctrl.$render = function() {

-                    scope.current = ctrl.$viewValue;

-                };

-              

-            }

-        };

-    }]);

-

-    angular.module('ecompApp').directive('jqTreeUserNotif', ['functionalMenuService', '$log', 'confirmBoxService', '$compile', function (functionalMenuService, $log, confirmBoxService, $compile) {

-        return {

-            scope: true,

-            templateUrl: 'jq-tree-tmpl-user-notif.html',

-            link: function (scope, el, attrs) {

-

-                var $jqTree = el.find('#jqTreeUserNotif').tree({

-                    data: scope.treedata,

-                    autoOpen: scope.editModeObj.isEditMode,

-                    dragAndDrop: false,

-                    onCreateLi: function (node, $li) {

-                        node.is_checked = false;

-                        if (node.roleId&&scope.roleObj.notificationRoleIds) {

-                            node.is_checked = (node.roleId.length === _.intersection(node.roleId, scope.roleObj.notificationRoleIds).length);

-                        }                        

-                        if (typeof node.id =="string"){

-                            $li.attr('id', node.id.replace(/\s+/g, '_'));

-                        }

-                        var isChecked = '';

-                        if (node.is_checked) {

-                            isChecked = 'checked="checked"';

-                        }

-                        if (node.can_check) {

-                            var toShow = true;

-                            if (scope.notifObj.isCategoriesFunctionalMenu) {

-                                toShow = scope.toShowItemDict[node.menuId];

-                            }

-                            var isDisabled = "";

-                            if (scope.editModeObj.isEditMode) {

-                                isDisabled = " disabled"

-                                	

-                                	//if node is a parent/grandparent node

-                                    if (node.children.length>0){

-                                             	//whether to show node first

-                                    	if (_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {

-                                    		toShow=true;

-                                    		if (scope.parentChildRoleIdDict[node.menuId].length==_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {

-                                                isChecked = 'checked="checked"';                                			

-                                    		}

-                                    	} else {

-                                    		toShow=false;

-                                    	}

-                                    } 

-                                    //if node is a child node

-                                    else {

-                                    	if (node.is_checked) {

-                                        	toShow=true;                                	

-                                    	} else {

-                                    		toShow=false;

-                                    	}

-                                    }

-

-                              }

-

-                            

-

-                            var template = '<input ng-click="thisCheckboxClicked($event)" type="checkbox" class="edit js-node-check" data-node-menu-id="' + node.menuId + '"  data-node-id="' + node.id + '" ' + isChecked + ' ng-show="' + toShow + '"' + isDisabled+ '/>'

-

-                            var templateEl = angular.element(template);

-                            var $jqCheckbox = $compile(templateEl)(scope);

-							if (toShow){

-									$li.find('.jqtree-element').prepend($jqCheckbox);

-								} else {

-									$li.find('.jqtree-element').remove();

-									}

-                        }

-                    }

-                });

-

-                scope.thisCheckboxClicked = function (e) {

-                

-                	var nodeId = e.target.attributes[4].value;

-                	

-             

-               

-                	var sBrowser, sUsrAg = window.navigator.userAgent;

-                	//if (sUsrAg.indexOf("Firefox") > -1) {

-                	

-                	if (sUsrAg.indexOf("Trident") > -1) {

-                		nodeId = e.target.attributes[5].value;

-                	}

-                    

-//                	if (sUsrAg.indexOf("MSIE") > 1) {

-//                		alert("hELLO tHIS IS IE10");

-//                		nodeId = e.target.attributes[3].value;

-//                		alert('nodeId 26 of IE 45 : '+nodeId);

-//                	}

-//                	

-                	var version = navigator.userAgent.match(/Firefox\/(.*)$/);

-                	

-                	if(version && version.length > 1){

-                	if(parseInt(version[1]) >= 50){

-                		nodeId = e.target.attributes[3].value;

-                	} else if(parseInt(version[1]) >= 45){

-                		

-                		nodeId = e.target.attributes[2].value;

-                	}

-                }

-                	var thisNode = el.find('#jqTreeUserNotif').tree('getNodeById', nodeId);

-                    var isChecked = e.target.checked;

-                    scope.checkboxIdDict[nodeId]['is_box_checked'] = isChecked;

-

-                    thisNode = angular.element(thisNode);

-                    if (thisNode[0].hasOwnProperty('children') && thisNode[0].children.length > 0) {

-                        var jsNodeCheckList = angular.element(e.target).parent().next().find('.js-node-check')

-                        // check/uncheck children items

-                        jsNodeCheckList.prop('checked', isChecked);

-

-                        for (var i in jsNodeCheckList) {

-                            var singlediv = jsNodeCheckList[i];

-                            if (typeof singlediv == 'object' & (!singlediv.length)) {

-                            	

-                            	var tempNodeId = angular.element(singlediv)[0].attributes[4].value;

-                            

-                                

-                                

-                                if (sUsrAg.indexOf("Trident") > -1) {

-                                	

-                                	var tempNodeId = angular.element(singlediv)[0].attributes[5].value;

-                                	

-                               

-                                }

-                                

-//                                if (sUsrAg.indexOf("MSIE") > 0) {

-//                                    var tempNodeId = angular.element(singlediv)[0].attributes[3].value;

-//                                    alert('tempNodeId 2 FF 45 : '+tempNodeId);

-//                                    }

-                                if(version && version.length > 1){

-                                	if(parseInt(version[1]) >= 50){

-                                		tempNodeId = angular.element(singlediv)[0].attributes[3].value;

-                                	} 

-                                	else if(parseInt(version[1]) >= 45){

-                                		tempNodeId = angular.element(singlediv)[0].attributes[2].value;

-                                	}

-                                }

-                                scope.checkboxIdDict[tempNodeId]['is_box_checked'] = isChecked;

-                            }

-                        }

-                    }

-

-                    scope.checkBoxObj.isAnyRoleSelected = false;

-                    for (var key in scope.checkboxIdDict) {

-                        if (scope.checkboxIdDict[key]['is_box_checked']&&scope.checkboxIdDict[key]['role_id']) {

-                            scope.checkBoxObj.isAnyRoleSelected = true;

-                            break;

-                        }

-                    }

-                }

-

-

-

-                scope.$watch('treedata', function (oldValue, newValue) {

-                    if (oldValue !== newValue) {

-                        $jqTree.tree('loadData', scope.treedata);

-                        $jqTree.tree('reload', function () {

-                        });

-                    }

-                });

-            }

-        };

-    }]);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+
+    class userNotificationsModalCtrl {
+        constructor($scope, $log, functionalMenuService, confirmBoxService, notificationService, $modal, ngDialog, $state, $filter) {
+
+            let newNotifModel = {
+                'isOnlineUsersOnly': null,
+                'isForAllRolesOptions': null,
+                'selectedPriority': null,
+                'isActive': null,
+                'startTime': null,
+                'endTime': null,
+                'msgHeader': null,
+                'msgDescription': null,
+                'roleIds': null,
+                'roleObj': {notificationRoleIds:null}
+            };
+            
+            $scope.notificationId = null;
+            $scope.selectedCat = null;
+            $scope.selectedEcompFunc = null;
+            this.YN_index_mapping = {
+                "Y": 0,
+                "N": 1
+            }
+            
+            $scope.onlineAllUsersOptions = [
+                { "index": 0, "value": "Y", "title": "Online Users Only" },
+                { "index": 1, "value": "N", "title": "Online & Offline Users" }
+                
+            ];
+
+            $scope.isForAllRolesOptions = [
+                { "index": 0, "value": "Y", "title": "Yes" },
+                { "index": 1, "value": "N", "title": "No" }
+            ];
+
+            $scope.priorityOptions  = [
+                { "index": 0, "value": 1, "title": "Normal" },
+                { "index": 1, "value": 2, "title": "Important" }
+            ];
+
+            $scope.isActiveOptions = [
+                { "index": 0, "value": "Y", "title": "Yes" },
+                { "index": 1, "value": "N", "title": "No" }
+            ];
+            $scope.isActive = $scope.isActiveOptions[0];
+            $scope.selectPriority = $scope.priorityOptions[0];
+            $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[1];
+          $scope.isForAllRoles=$scope.isForAllRolesOptions[0].value;
+          $scope.isFunctionalMenu ="Y";
+
+          $scope.selectedPriority=$scope.priorityOptions[0].value;
+
+            // $scope.notificationRoleIds = [];
+            $scope.msgHeader = '';
+            $scope.msgDescription = '';
+            $scope.treeTitle="Functional Menu";
+            $scope.notifObj= {isCategoriesFunctionalMenu:true};
+
+            let init = () => {
+                // $log.info('userNotificationsModalCtrl::init');
+                this.isSaving = false;
+                var today = new Date();
+                $scope.minDate = today.toISOString().substring(0, 10);
+                var threeMonthsFromNow = new Date();
+                threeMonthsFromNow.setMonth(threeMonthsFromNow.getMonth() + 3);
+                $scope.maxDate = threeMonthsFromNow.toISOString().substring(0, 10);
+                if ($scope.ngDialogData && $scope.ngDialogData.notif) {
+                    // $log.debug('userNotificationsModalCtrl:init:: Edit
+					// notification mode for', $scope.ngDialogData.notif);
+                    $scope.isEditMode = true;
+                    $scope.editModeObj = {isEditMode: true};
+                    this.notif = _.clone($scope.ngDialogData.notif);
+                    $scope.modalPgTitle = 'View Notification'
+                    $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[this.YN_index_mapping[this.notif.isForOnlineUsers]];
+                    $scope.isForAllRoles = $scope.isForAllRolesOptions[this.YN_index_mapping[this.notif.isForAllRoles]].value;
+                    $scope.isActive = $scope.isActiveOptions[this.YN_index_mapping[this.notif.activeYn]];
+                    $scope.selectedPriority = $scope.priorityOptions[this.notif.priority - 1].value;
+                    $scope.startTime = new Date(this.notif.startTime);
+                    $scope.endTime = new Date(this.notif.endTime);
+                    $scope.msgHeader = this.notif.msgHeader;
+                    $scope.msgDescription = this.notif.msgDescription;
+                    $scope.notificationId = this.notif.notificationId;
+                    $scope.notificationRoleIds = this.notif.roleIds;
+                    $scope.roleObj = {notificationRoleIds:this.notif.roleIds};
+                } else {
+                	// $log.debug('AppDetailsModalCtrl:init:: New app mode');
+                    $scope.isEditMode = false;
+                    $scope.editModeObj = {isEditMode: false};
+                    $scope.modalPgTitle = 'Add a New Notification'
+                    this.notif = _.clone(newNotifModel);
+                    $scope.roleObj = {notificationRoleIds:null};
+                }
+            };
+            this.conflictMessages = {};
+            this.scrollApi = {};
+            let handleConflictErrors = err => {
+                if(!err.data){
+                    return;
+                }
+                if(!err.data.length){ // support objects
+                    err.data = [err.data]
+                }
+                _.forEach(err.data, item => {
+                    _.forEach(item.fields, field => {
+                        // set conflict message
+                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
+                        // set field as invalid
+                        $scope.appForm[field.name].$setValidity('conflict', false);
+                        // set watch once to clear error after user correction
+                        watchOnce[field.name]();
+                    });
+                });
+                this.scrollApi.scrollTop();
+            };
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                if($scope.appForm[fieldName]){
+                    $scope.appForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+            $scope.addUserNotificationValidation = function () {
+                // // pre-processing
+                if (!($scope.isEditMode)) {                    
+                    var validation=false;
+
+               if($scope.startTime && $scope.endTime && $scope.msgHeader != '' && $scope.msgDescription != '' && ($scope.startTime<$scope.endTime)){
+            	   validation=true;
+            	   if( $scope.isForAllRoles=='N'){
+                       validation =  $scope.checkBoxObj.isAnyRoleSelected;
+                   }
+               }
+               else{
+            	   validation=false;
+            	   }
+                    
+                    	
+                   return !validation; 
+                }
+            }
+            
+            /* format the value for viewing a notification */
+            $scope.formatStartDate = function () {
+            	if ($scope.startTime) {
+            		$scope.startTime = $filter('date')($scope.startTime, 'medium'); 
+           	}            	
+            }
+            
+            /* format the value for viewing a notification */
+            $scope.formatEndDate = function () {
+            	if($scope.endTime){
+            		$scope.endTime = $filter('date')($scope.endTime, 'medium');
+            	}
+            }
+            
+            $scope.addUserNotification = function () {
+                $scope.notificationRoleIds = [];
+                // pre-processing
+                for (var key in $scope.checkboxIdDict) {
+                    if ($scope.checkboxIdDict[key].is_box_checked && ($scope.checkboxIdDict[key].role_id != null)) {
+                        var role_ids = $scope.checkboxIdDict[key].role_id;
+                        for (var i in role_ids) {
+                            if (!($scope.notificationRoleIds.indexOf(role_ids[i]) > -1)) {
+                                $scope.notificationRoleIds.push(role_ids[i]);
+                            }
+                        }
+                    }
+                }
+
+                $scope.notificationRoleIds.sort();
+                if (($scope.isOnlineUsersOnly) && ($scope.isForAllRoles) && ($scope.selectedPriority) && ($scope.isActive)
+                    && ($scope.startTime) && ($scope.endTime) && ($scope.msgHeader != '') && ($scope.msgDescription != '')) {
+                    this.newUserNotification =
+                        {
+                            'notificationId':$scope.notificationId,
+                            'isForOnlineUsers': $scope.isOnlineUsersOnly.value,
+                            'isForAllRoles': $scope.isForAllRoles,
+                            'priority': $scope.selectedPriority,
+                            'activeYn': $scope.isActive.value,
+                            'startTime': $scope.startTime,
+                            'endTime': $scope.endTime,
+                            'msgHeader': $scope.msgHeader,
+                            'msgDescription': $scope.msgDescription,
+                            'roleIds': $scope.notificationRoleIds,
+                            'createdDate': new Date()
+                        };
+
+                    // POST ajax call here;
+                    if ($scope.isEditMode) {
+                        notificationService.updateAdminNotification(this.newUserNotification)
+                            .then(() => {
+                                //$log.debug('NotificationService:updateAdminNotification:: Admin notification update succeeded!');
+                                $scope.closeThisDialog(true);
+                                // emptyCookies();
+                            }).catch(err => {
+                                $log.error('notificationService.updateAdminNotfication failed: ' + JSON.stringify(err));
+                                switch (err.status) {
+                                    case '409':         // Conflict
+                                        // handleConflictErrors(err);
+                                        break;
+                                    case '500':         // Internal Server Error
+                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
+                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+                                        break;
+                                    case '403':         // Forbidden... possible
+														// webjunction error to
+														// try again
+                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
+                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+                                        break;
+                                    default:
+                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
+                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+                                }
+                            }).finally(() => {
+                                // for bug in IE 11
+                                var objOffsetVersion = objAgent.indexOf("MSIE");
+                                if (objOffsetVersion != -1) {
+                                    $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');
+                                    $window.location.reload();   
+                                }
+                                // for bug in IE 11
+                            });
+
+                    } else {
+                        notificationService.addAdminNotification(this.newUserNotification)
+                            .then((res) => {
+                                $log.debug('notificationService:addAdminNotification:: Admin notification creation succeeded!,',res);
+                                if(res.status=='ERROR'){
+                                	 confirmBoxService.showInformation('There was a problem adding the notification. ' +
+                                             ' Error: ' + res.response).then(isConfirmed => { });
+
+                                	
+                                }
+                                else{
+                                	 $scope.closeThisDialog(true);
+                                }
+                               
+                                // emptyCookies();
+                            }).catch(err => {
+                                switch (err.status) {
+                                    case '409':         // Conflict
+                                        // handleConflictErrors(err);
+                                        break;
+                                    case '500':         // Internal Server Error
+                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +
+                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+                                        break;
+                                    default:
+                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +
+                                            'Please try again. If the problem persists, then try again later. Error: ' +
+                                            err.status).then(isConfirmed => { });
+                                }
+                                $log.error('notificationService:addAdminNotification error:: ' + JSON.stringify(err));
+                            })
+                    }
+
+                   
+                } else {
+                    $log.warn('please fill in all required fields');
+                	confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => { });
+                }
+            }
+            // Populate the category list for category dropdown list
+            let getFunctionalMenu = () => {
+                this.isLoadingTable = true;
+                $scope.notifObj= {isCategoriesFunctionalMenu:true};
+                functionalMenuService.getFunctionalMenuRole().then(role_res => {
+                    var menu_role_dict = {};
+                    for (var i in role_res) {
+                        // if first time appear in menu_role_dict
+                        if (!(role_res[i].menuId in menu_role_dict)) {
+                            menu_role_dict[role_res[i].menuId] = [role_res[i].roleId];
+                        } else {
+                            menu_role_dict[role_res[i].menuId].push(role_res[i].roleId);
+                        }
+                    }
+                    functionalMenuService.getManagedFunctionalMenuForNotificationTree().then(res => {
+                        let actualData = [];
+                        var exclude_list = ['Favorites']
+                        // Adding children and label attribute to all objects in
+                        $scope.checkboxIdDict = {};
+                        $scope.checkBoxObj = {isAnyRoleSelected:false};
+                        for (let i = 0; i < res.length; i++) {
+                            res[i].children = [];
+                            res[i].label = res[i].text;
+                            res[i].id = res[i].text;
+                            // res[i].is_box_checked = false;
+                            res[i].can_check = true;
+                            res[i].roleId = menu_role_dict[res[i].menuId];
+                            $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId };
+                        }
+
+                        // Adding actual child items to children array in res
+						// objects
+                        $scope.parentChildDict ={};
+                        $scope.parentChildRoleIdDict ={};
+                        for (let i = 0; i < res.length; i++) {
+                            let parentId = res[i].menuId;
+                            $scope.parentChildDict[parentId] = [];
+                            $scope.parentChildRoleIdDict[parentId]=[];
+                            for (let j = 0; j < res.length; j++) {
+                                let childId = res[j].parentMenuId;
+                                if (parentId === childId) {
+                                    res[i].children.push(res[j]);
+                                    $scope.parentChildDict[parentId].push(res[j].menuId);
+                                    //if res[j].roleId is defined
+                                    if (res[j].roleId) {
+                                    	for (let k in res[j].roleId) {
+                                            $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
+                                    	}
+                                    	
+                                    }
+                                }
+                            }
+                        }
+                        
+                        //check if grand children exist
+                            for (var key in $scope.parentChildDict){
+                            	var children = $scope.parentChildDict[key];
+                            	var isGrandParent = false;
+                            	if (children.length>0) {
+                            		for (var i in children) {
+                            			if ($scope.parentChildDict[children[i]].length>0){
+                            				isGrandParent = true;
+                            				break;
+                            			}
+                            		}
+                            	}
+                            	if (isGrandParent) {
+                                	for (var i in children) {
+                                		// if the child has children
+                                		if ($scope.parentChildDict[children[i]].length>0) {
+                                			for (var j in $scope.parentChildRoleIdDict[children[i]]) {
+                                				
+                                				if ($scope.parentChildRoleIdDict[key].indexOf($scope.parentChildRoleIdDict[children[i]][j]) === -1) {
+                                					$scope.parentChildRoleIdDict[key].push($scope.parentChildRoleIdDict[children[i]][j]);
+                                				}
+                                			}
+                                		} else {
+                                			 
+                                		}
+                                	}
+                            	}
+
+                            };                            
+                                                        
+
+                                var ListMenuIdToRemove = [];
+                        //$scope.parentObj = {ListMenuIdToRemove : []};
+                        //get the list of menuId that needs to be removed 
+                        for (let i = 0; i < res.length; i++) {
+                            if ((res[i].children.length==0)&&(!res[i].roleId)) {
+                                var menuIdToRemove = res[i].menuId;
+                                if (ListMenuIdToRemove.indexOf(menuIdToRemove) === -1){
+                                    ListMenuIdToRemove.push(menuIdToRemove);
+                                }
+                            }
+                        }
+
+                        // a scope variable that marks whether each functional menu item should be displayed.
+                        $scope.toShowItemDict = {};                        
+                        for (let i = 0; i < res.length; i++) {
+                            if (res[i].roleId==null) {
+                                if (res[i].children.length==0) {
+                                    $scope.toShowItemDict[res[i].menuId]=false;                                
+                                } else if(res[i].children.length>0){
+                                    if($scope.parentChildDict[res[i].menuId].length === _.intersection($scope.parentChildDict[res[i].menuId], ListMenuIdToRemove).length){
+                                        $scope.toShowItemDict[res[i].menuId]=false;                                
+                                    } else {
+                                        $scope.toShowItemDict[res[i].menuId]=true;                                
+                                    }
+                                }
+                            } else {
+                                $scope.toShowItemDict[res[i].menuId]=true;
+                            }
+                        }
+ 
+                        // Sort the top-level menu items in order based on the
+						// column
+                        res.sort(function (a, b) {
+                            return a.column - b.column;
+                        });
+
+                        // Sort all the children in order based on the column
+                        for (let i = 0; i < res.length; i++) {
+                            res[i].children.sort(function (a, b) {
+                                return a.column - b.column;
+                            });
+                        }
+
+                        // Forming actual parent items
+                        for (let i = 0; i < res.length; i++) {
+                            let parentId = res[i].parentMenuId;
+                            if (parentId === null) {
+                                actualData.push(res[i]);
+                            }
+                        }
+
+                        // $scope.treedata = actualData;
+                        var treedata = actualData[0].children;
+                        $scope.treedata = [];
+                        for (var i in treedata) {
+                            if (!(treedata[i].label.indexOf(exclude_list) > -1)) {
+                                $scope.treedata.push(treedata[i])
+                            }
+                        }
+
+                    }).catch(err => {
+                        $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
+                    }).finally(() => {
+                        this.isLoadingTable = false;
+                    })
+
+                }).catch(err => {
+                    $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
+                })
+                    ;
+            }
+     
+            
+            let getAppRoleIds = () => {
+                $scope.notifObj= {isCategoriesFunctionalMenu:false};
+                notificationService.getAppRoleIds().then(res => {
+                	
+                    res = res.data;
+                    let actualData = [];
+                    // var exclude_list = ['Favorites']
+                    var app_id_name_list = {};
+                        $scope.checkboxIdDict = {};
+                        $scope.checkBoxObj = {isAnyRoleSelected:false};
+
+                    for (let i = 0; i < res.length; i++) {
+                        if (!(res[i].appId in app_id_name_list)) {
+                            app_id_name_list[res[i].appId] = res[i].appName;
+                        }
+
+                        res[i].children = [];
+                        res[i].label = res[i].roleName;
+                        res[i].id = res[i].roleId;
+                        res[i].menuId = res[i].roleId;
+                        res[i].parentMenuId = res[i].appId;
+                        res[i].can_check = true;
+                        res[i].roleId = [res[i].roleId];
+                        $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId};   
+                    }
+                    
+                    for (var app_id in app_id_name_list) {
+                        var new_res = {};
+                        new_res.children = [];
+                        new_res.label = app_id_name_list[app_id];
+                        new_res.id = app_id;
+                        new_res.menuId = app_id;
+                        new_res.parentMenuId = null;
+                        new_res.appId = null;
+                        new_res.can_check = true;
+                        new_res.roleId = null;
+                        $scope.checkboxIdDict[new_res.id]= { 'is_box_checked': false, 'role_id': new_res.roleId };
+                        res.push(new_res);
+                    }
+                    $scope.parentChildRoleIdDict ={};
+                    //Adding actual child items to children array in res objects
+                    for (let i = 0; i < res.length; i++) {
+                        let parentId = res[i].menuId;
+                        $scope.parentChildRoleIdDict[parentId]=[];
+                        for (let j = 0; j < res.length; j++) {
+                            let childId = res[j].parentMenuId;
+                            if (parentId == childId) {
+                                res[i].children.push(res[j]);
+                                if (res[j].roleId) {
+                                	for (let k in res[j].roleId) {
+                                        $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
+                                	}
+                                	
+                                }
+                            }
+                        }
+                    }
+                    //Forming actual parent items
+                    for (let i = 0; i < res.length; i++) {
+                        let parentId = res[i].parentMenuId;
+                        if (parentId === null) {
+                            actualData.push(res[i]);
+                        }
+                    }
+
+                    $scope.treedata = actualData;
+                }).catch(err => {
+                    $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
+                }).finally(() => {
+                    this.isLoadingTable = false;
+                })
+            }
+            $scope.getFunctionalMenu= function() {
+            $scope.treeTitle="Functional Menu";
+            getFunctionalMenu();
+            }
+            $scope.getAppRoleIds = function() {
+            $scope.treeTitle="Applications/Roles";
+                getAppRoleIds();
+            }
+             
+            init();
+            getFunctionalMenu();
+
+        }
+        
+    }
+    
+    userNotificationsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'confirmBoxService', 'notificationService', '$modal', 'ngDialog', '$state', '$filter'];
+    angular.module('ecompApp').controller('userNotificationsModalCtrl', userNotificationsModalCtrl);
+    
+    angular.module('ecompApp').directive('attDatepickerCustom', ['$log', function($log) {
+        return {
+            restrict: 'A',
+          require: 'ngModel',
+            scope: {},
+            
+            controller: ['$scope', '$element', '$attrs', '$compile', 'datepickerConfig', 'datepickerService', function($scope, $element, $attrs, $compile, datepickerConfig, datepickerService) {
+               var dateFormatString = angular.isDefined($attrs.dateFormat) ? $scope.$parent.$eval($attrs.dateFormat) : datepickerConfig.dateFormat;
+               var selectedDateMessage = '<div class="sr-focus hidden-spoken" tabindex="-1">the date you selected is {{$parent.current | date : \'' + dateFormatString + '\'}}</div>';
+               $element.removeAttr('att-datepicker-custom');
+                $element.removeAttr('ng-model');
+                $element.attr('ng-value', '$parent.current |  date:"EEEE, MMMM d, y"');
+                $element.attr('aria-describedby', 'datepicker');
+               
+                $element.attr('maxlength', 10);
+
+                var wrapperElement = angular.element('<div></div>');
+                wrapperElement.attr('datepicker-popup', '');
+                wrapperElement.attr('current', 'current');
+
+                datepickerService.setAttributes($attrs, wrapperElement);
+                datepickerService.bindScope($attrs, $scope);
+
+                wrapperElement.html('');
+                wrapperElement.append($element.prop('outerHTML'));
+                if (navigator.userAgent.match(/MSIE 8/) === null) {
+                    wrapperElement.append(selectedDateMessage);
+                }
+                var elm = wrapperElement.prop('outerHTML');
+                elm = $compile(elm)($scope);
+                $element.replaceWith(elm);
+            }],
+            link: function(scope, elem, attr, ctrl) {
+                if (!ctrl) {
+                    // do nothing if no ng-model
+                    $log.error("ng-model is required.");
+                    return;
+                }
+
+                scope.$watch('current', function(value) {
+                    ctrl.$setViewValue(value);
+                });
+                ctrl.$render = function() {
+                    scope.current = ctrl.$viewValue;
+                };
+              
+            }
+        };
+    }]);
+
+    angular.module('ecompApp').directive('jqTreeUserNotif', ['functionalMenuService', '$log', 'confirmBoxService', '$compile', function (functionalMenuService, $log, confirmBoxService, $compile) {
+        return {
+            scope: true,
+            templateUrl: 'jq-tree-tmpl-user-notif.html',
+            link: function (scope, el, attrs) {
+
+                var $jqTree = el.find('#jqTreeUserNotif').tree({
+                    data: scope.treedata,
+                    autoOpen: scope.editModeObj.isEditMode,
+                    dragAndDrop: false,
+                    onCreateLi: function (node, $li) {
+                        node.is_checked = false;
+                        if (node.roleId&&scope.roleObj.notificationRoleIds) {
+                            node.is_checked = (node.roleId.length === _.intersection(node.roleId, scope.roleObj.notificationRoleIds).length);
+                        }                        
+                        if (typeof node.id =="string"){
+                            $li.attr('id', node.id.replace(/\s+/g, '_'));
+                        }
+                        var isChecked = '';
+                        if (node.is_checked) {
+                            isChecked = 'checked="checked"';
+                        }
+                        if (node.can_check) {
+                            var toShow = true;
+                            if (scope.notifObj.isCategoriesFunctionalMenu) {
+                                toShow = scope.toShowItemDict[node.menuId];
+                            }
+                            var isDisabled = "";
+                            if (scope.editModeObj.isEditMode) {
+                                isDisabled = " disabled"
+                                	
+                                	//if node is a parent/grandparent node
+                                    if (node.children.length>0){
+                                             	//whether to show node first
+                                    	if (_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {
+                                    		toShow=true;
+                                    		if (scope.parentChildRoleIdDict[node.menuId].length==_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {
+                                                isChecked = 'checked="checked"';                                			
+                                    		}
+                                    	} else {
+                                    		toShow=false;
+                                    	}
+                                    } 
+                                    //if node is a child node
+                                    else {
+                                    	if (node.is_checked) {
+                                        	toShow=true;                                	
+                                    	} else {
+                                    		toShow=false;
+                                    	}
+                                    }
+
+                              }
+
+                            
+
+                            var template = '<input ng-click="thisCheckboxClicked($event)" type="checkbox" class="edit js-node-check" data-node-menu-id="' + node.menuId + '"  data-node-id="' + node.id + '" ' + isChecked + ' ng-show="' + toShow + '"' + isDisabled+ '/>'
+
+                            var templateEl = angular.element(template);
+                            var $jqCheckbox = $compile(templateEl)(scope);
+							if (toShow){
+									$li.find('.jqtree-element').prepend($jqCheckbox);
+								} else {
+									$li.find('.jqtree-element').remove();
+									}
+                        }
+                    }
+                });
+
+                scope.thisCheckboxClicked = function (e) {
+                
+                	var nodeId = e.target.attributes[4].value;
+                	
+             
+               
+                	var sBrowser, sUsrAg = window.navigator.userAgent;
+                	//if (sUsrAg.indexOf("Firefox") > -1) {
+                	
+                	if (sUsrAg.indexOf("Trident") > -1) {
+                		nodeId = e.target.attributes[5].value;
+                	}
+                    
+//                	if (sUsrAg.indexOf("MSIE") > 1) {
+//                		alert("hELLO tHIS IS IE10");
+//                		nodeId = e.target.attributes[3].value;
+//                		alert('nodeId 26 of IE 45 : '+nodeId);
+//                	}
+//                	
+                	var version = navigator.userAgent.match(/Firefox\/(.*)$/);
+                	
+                	if(version && version.length > 1){
+                	if(parseInt(version[1]) >= 50){
+                		nodeId = e.target.attributes[3].value;
+                	} else if(parseInt(version[1]) >= 45){
+                		
+                		nodeId = e.target.attributes[2].value;
+                	}
+                }
+                	var thisNode = el.find('#jqTreeUserNotif').tree('getNodeById', nodeId);
+                    var isChecked = e.target.checked;
+                    scope.checkboxIdDict[nodeId]['is_box_checked'] = isChecked;
+
+                    thisNode = angular.element(thisNode);
+                    if (thisNode[0].hasOwnProperty('children') && thisNode[0].children.length > 0) {
+                        var jsNodeCheckList = angular.element(e.target).parent().next().find('.js-node-check')
+                        // check/uncheck children items
+                        jsNodeCheckList.prop('checked', isChecked);
+
+                        for (var i in jsNodeCheckList) {
+                            var singlediv = jsNodeCheckList[i];
+                            if (typeof singlediv == 'object' & (!singlediv.length)) {
+                            	
+                            	var tempNodeId = angular.element(singlediv)[0].attributes[4].value;
+                            
+                                
+                                
+                                if (sUsrAg.indexOf("Trident") > -1) {
+                                	
+                                	var tempNodeId = angular.element(singlediv)[0].attributes[5].value;
+                                	
+                               
+                                }
+                                
+//                                if (sUsrAg.indexOf("MSIE") > 0) {
+//                                    var tempNodeId = angular.element(singlediv)[0].attributes[3].value;
+//                                    alert('tempNodeId 2 FF 45 : '+tempNodeId);
+//                                    }
+                                if(version && version.length > 1){
+                                	if(parseInt(version[1]) >= 50){
+                                		tempNodeId = angular.element(singlediv)[0].attributes[3].value;
+                                	} 
+                                	else if(parseInt(version[1]) >= 45){
+                                		tempNodeId = angular.element(singlediv)[0].attributes[2].value;
+                                	}
+                                }
+                                scope.checkboxIdDict[tempNodeId]['is_box_checked'] = isChecked;
+                            }
+                        }
+                    }
+
+                    scope.checkBoxObj.isAnyRoleSelected = false;
+                    for (var key in scope.checkboxIdDict) {
+                        if (scope.checkboxIdDict[key]['is_box_checked']&&scope.checkboxIdDict[key]['role_id']) {
+                            scope.checkBoxObj.isAnyRoleSelected = true;
+                            break;
+                        }
+                    }
+                }
+
+
+
+                scope.$watch('treedata', function (oldValue, newValue) {
+                    if (oldValue !== newValue) {
+                        $jqTree.tree('loadData', scope.treedata);
+                        $jqTree.tree('reload', function () {
+                        });
+                    }
+                });
+            }
+        };
+    }]);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
index e342692a..ac7f4895 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
@@ -1,161 +1,167 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="user-notification-details-modal">

-	<!--<div class="functional-menu-container">-->

-	<div id="app-title" class="title">{{modalPgTitle}}</div>

-	<div class="user-notification-details-contents">

-		<div class="left-container">

-			<div class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">

-				<div class="user-notif-label">Broadcast to All Categories</div>

-				<label id="label-yes" class="simulateCatGridHeaderRadioButton"> <input

-					id="radio-button-yes" type="radio" ng-model="isForAllRoles" value="Y"> Yes

-				</label> <label id="label-no" class="simulateCatGridHeaderRadioButton"> <input

-					id="radio-button-no" type="radio" ng-model="isForAllRoles" value="N"> No

-				</label>

-			</div>

-			<div 

-				style="padding-left: 10px; {{(! isForAllRoles ||isForAllRoles=='Y')? 'opacity : 0.6; pointer-events: none;':' '}} {{isEditMode? 'opacity : 0.6;':' '}} "

-				class="user-notif-label">

-				<div id="notifcation-label-user" class="user-notif-label">

-					<span ng-show="isForAllRoles=='N'" runat="server" ID="required" style="color: Red;">*</span>

-					Categories

-				</div>

-				<div>

-

-				<div id="notifcation-label-user-div" class="user-notif-label"></div>

-				<label id="funcMenu-label-yes" > <input id="radio-button-funcMenu"

-				type="radio" ng-model="isFunctionalMenu" ng-click="getFunctionalMenu()" value="Y"> Functional Menu

-				<br/>

-				</label> <label id="approles-label-no" > <input id="radio-button-approles"

-				type="radio" ng-model="isFunctionalMenu" ng-click="getAppRoleIds()" value="N"> Application Roles

-				</label>

-

-				<div id="approles-checkbox" ng-show="!checkBoxObj.isAnyRoleSelected&&(isForAllRoles=='N')&&(!isEditMode)">

-					

-					<div id="approles-checkbox-required" ng-show="!checkBoxObj.isAnyRoleSelected" >

-						

-

-						<small class="checkbox-categories">At least

-							one category is required</small>

-

-					</div>

-				</div>

-				

-				</div>

-				

-				<div  id="tree1">

-					<div id="Service_Creation"></div>

-				</div>

-				<div 

-					

-					id="jq-tree-div" jq-tree-user-notif ></div>

-

-					

-

-				<script type="text/ng-template" id="jq-tree-tmpl-user-notif.html">

-            	<div  id="jqTreeUserNotif" class="tree"></div>

-        	</script>

-			</div>

-			<div>

-

-				<div id="add-user-notif-priority" class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">

-					<div id="user-notification-priority-label" class="user-notif-label">Priority</div>

-					<label id="label-important" class="simulateCatGridHeaderRadioButton"> <input

-						id="radio-button-normal" type="radio" ng-model="selectedPriority" value="1"> Normal

-					</label> <label id="label-normal" class="simulateCatGridHeaderRadioButton"> <input

-						id="radio-button-important" type="radio" ng-model="selectedPriority" value="2">

-						Important

-					</label>

-				</div>

-			</div>

-		</div>

-		<div id="app-conatiner-right" class="right-container">

-

-			<div id="add-user-notif-startdate" class="add-widget-field"

-				style="padding-bottom: 12px; width: 301px !important;{{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">

-				<div id="user-notification-startdate-label" class="user-notif-label">

-					<div class="user-notif-label">

-						<span runat="server" ID="required" style="color: Red;">*</span>

-						Start Date (Local Time)

-					</div>

-					<input class="notif-input-calendar" id="datepicker-start" type="text" 

-						ng-model="startTime" b2b-datepicker min="minDate" max="maxDate" 

-						required />

-					<div id="user-startdate-required" ng-show="!startTime">

-						<small class="mandatory-categories">Start Date is Required</small>

-					</div>

-				</div>

-				<div ng-show="!isEditMode" ng-init="formatStartDate()"></div> 

-			</div>			

-

-			<div id="add-user-notif-enddate" class="add-widget-field"

-				style="padding-bottom: 12px;     width: 301px !important; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">

-				<div id="user-notification-enddate-label" class="user-notif-label">

-					<span runat="server" ID="required" style="color: Red;">*</span> End	Date (Local Time)

-				</div>

-				<input class="notif-input-calendar" type="text" id="datepicker-end" 

-					ng-model="endTime" b2b-datepicker min="minDate" max="maxDate" 

-					required />

-				<div id="user-enddate-required" ng-show="!endTime" >

-					<small class="mandatory-categories">End Date is Required</small>

-				</div>

-				<div id="user-enddate-error" ng-show="endTime&&startTime&&startTime.getTime()>=endTime.getTime()" style="color: #cf2a2a; font-size: 10px;">

-					<small style="position: absolute;">End Date must be greater than start Date</small>

-				</div>

-				<div ng-show="!isEditMode" ng-init="formatEndDate()" ></div> 

-			</div>

-

-			<div id="add-user-notif-title" class="add-widget-field"

-				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">

-				<div id="user-notification-title-label" class="user-notif-label">

-					<span runat="server" ID="required" style="color: Red;"

-						visible="false"> *</span> Title

-				</div>

-				<textarea id="add-notification-input-title" class="notif-input" ng-model="msgHeader" name="content" style="height: 50px;">

-                </textarea>

-				<div id="user-title-required" ng-show="msgHeader.length == 0">

-					<small class="mandatory-categories">Title is Required</small>

-				</div>

-			</div>

-			

-			<div id="add-user-notif-message" class="add-widget-field"

-				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">

-				<div id="user-notif-message-label" class="user-notif-label">

-					<span runat="server" ID="required" style="color: Red;"

-						visible="false"> *</span> Message

-				</div>

-				<textarea id="user-notif-input-message" class="notif-input" style="height: 150px"

-					ng-model="msgDescription" name="content">

-				</textarea>

-				<div id="user-notif-message-required" ng-show="msgDescription.length ==0 ">

-				<small class="mandatory-categories">Message is Required</small>

-				</div>

-			</div>

-

-			<div class="dialog-control">

-				<a ng-show="!isEditMode">

-				<button id="button-notification-save" class="btn btn-alt btn-small" size="small" ng-disabled="addUserNotificationValidation()"

-					ng-click="addUserNotification()">Save</button></a> 						

-				<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()" role="button" tabindex="0">Cancel</button>

-			</div>

-			

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="user-notification-details-modal">
+	<!--<div class="functional-menu-container">-->
+	<div id="app-title" class="title">{{modalPgTitle}}</div>
+	<div class="user-notification-details-contents">
+		<div class="left-container">
+			<div class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
+				<div class="user-notif-label">Broadcast to All Categories</div>
+				<label id="label-yes" class="simulateCatGridHeaderRadioButton"> <input
+					id="radio-button-yes" type="radio" ng-model="isForAllRoles" value="Y"> Yes
+				</label> <label id="label-no" class="simulateCatGridHeaderRadioButton"> <input
+					id="radio-button-no" type="radio" ng-model="isForAllRoles" value="N"> No
+				</label>
+			</div>
+			<div 
+				style="padding-left: 10px; {{(! isForAllRoles ||isForAllRoles=='Y')? 'opacity : 0.6; pointer-events: none;':' '}} {{isEditMode? 'opacity : 0.6;':' '}} "
+				class="user-notif-label">
+				<div id="notifcation-label-user" class="user-notif-label">
+					<span ng-show="isForAllRoles=='N'" runat="server" ID="required" style="color: Red;">*</span>
+					Categories
+				</div>
+				<div>
+
+				<div id="notifcation-label-user-div" class="user-notif-label"></div>
+				<label id="funcMenu-label-yes" > <input id="radio-button-funcMenu"
+				type="radio" ng-model="isFunctionalMenu" ng-click="getFunctionalMenu()" value="Y"> Functional Menu
+				<br/>
+				</label> <label id="approles-label-no" > <input id="radio-button-approles"
+				type="radio" ng-model="isFunctionalMenu" ng-click="getAppRoleIds()" value="N"> Application Roles
+				</label>
+
+				<div id="approles-checkbox" ng-show="!checkBoxObj.isAnyRoleSelected&&(isForAllRoles=='N')&&(!isEditMode)">
+					
+					<div id="approles-checkbox-required" ng-show="!checkBoxObj.isAnyRoleSelected" >
+						
+
+						<small class="checkbox-categories">At least
+							one category is required</small>
+
+					</div>
+				</div>
+				
+				</div>
+				
+				<div  id="tree1">
+					<div id="Service_Creation"></div>
+				</div>
+				<div 
+					
+					id="jq-tree-div" jq-tree-user-notif ></div>
+
+					
+
+				<script type="text/ng-template" id="jq-tree-tmpl-user-notif.html">
+            	<div  id="jqTreeUserNotif" class="tree"></div>
+        	</script>
+			</div>
+			<div>
+
+				<div id="add-user-notif-priority" class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
+					<div id="user-notification-priority-label" class="user-notif-label">Priority</div>
+					<label id="label-important" class="simulateCatGridHeaderRadioButton"> <input
+						id="radio-button-normal" type="radio" ng-model="selectedPriority" value="1"> Normal
+					</label> <label id="label-normal" class="simulateCatGridHeaderRadioButton"> <input
+						id="radio-button-important" type="radio" ng-model="selectedPriority" value="2">
+						Important
+					</label>
+				</div>
+			</div>
+		</div>
+		<div id="app-conatiner-right" class="right-container">
+
+			<div id="add-user-notif-startdate" class="add-widget-field"
+				style="padding-bottom: 12px; width: 301px !important;{{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
+				<div id="user-notification-startdate-label" class="user-notif-label">
+					<div class="user-notif-label">
+						<span runat="server" ID="required" style="color: Red;">*</span>
+						Start Date (Local Time)
+					</div>
+					<input class="notif-input-calendar" id="datepicker-start" type="text" 
+						ng-model="startTime" b2b-datepicker min="minDate" max="maxDate" 
+						required />
+					<div id="user-startdate-required" ng-show="!startTime">
+						<small class="mandatory-categories">Start Date is Required</small>
+					</div>
+				</div>
+				<div ng-show="!isEditMode" ng-init="formatStartDate()"></div> 
+			</div>			
+
+			<div id="add-user-notif-enddate" class="add-widget-field"
+				style="padding-bottom: 12px;     width: 301px !important; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
+				<div id="user-notification-enddate-label" class="user-notif-label">
+					<span runat="server" ID="required" style="color: Red;">*</span> End	Date (Local Time)
+				</div>
+				<input class="notif-input-calendar" type="text" id="datepicker-end" 
+					ng-model="endTime" b2b-datepicker min="minDate" max="maxDate" 
+					required />
+				<div id="user-enddate-required" ng-show="!endTime" >
+					<small class="mandatory-categories">End Date is Required</small>
+				</div>
+				<div id="user-enddate-error" ng-show="endTime&&startTime&&startTime.getTime()>=endTime.getTime()" style="color: #cf2a2a; font-size: 10px;">
+					<small style="position: absolute;">End Date must be greater than start Date</small>
+				</div>
+				<div ng-show="!isEditMode" ng-init="formatEndDate()" ></div> 
+			</div>
+
+			<div id="add-user-notif-title" class="add-widget-field"
+				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
+				<div id="user-notification-title-label" class="user-notif-label">
+					<span runat="server" ID="required" style="color: Red;"
+						visible="false"> *</span> Title
+				</div>
+				<textarea id="add-notification-input-title" class="notif-input" ng-model="msgHeader" name="content" style="height: 50px;">
+                </textarea>
+				<div id="user-title-required" ng-show="msgHeader.length == 0">
+					<small class="mandatory-categories">Title is Required</small>
+				</div>
+			</div>
+			
+			<div id="add-user-notif-message" class="add-widget-field"
+				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
+				<div id="user-notif-message-label" class="user-notif-label">
+					<span runat="server" ID="required" style="color: Red;"
+						visible="false"> *</span> Message
+				</div>
+				<textarea id="user-notif-input-message" class="notif-input" style="height: 150px"
+					ng-model="msgDescription" name="content">
+				</textarea>
+				<div id="user-notif-message-required" ng-show="msgDescription.length ==0 ">
+				<small class="mandatory-categories">Message is Required</small>
+				</div>
+			</div>
+
+			<div class="dialog-control">
+				<a ng-show="!isEditMode">
+				<button id="button-notification-save" class="btn btn-alt btn-small" size="small" ng-disabled="addUserNotificationValidation()"
+					ng-click="addUserNotification()">Save</button></a> 						
+				<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()" role="button" tabindex="0">Cancel</button>
+			</div>
+			
+		</div>
+	</div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
index 742946f2..72c92c21 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
@@ -1,117 +1,117 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-user-notification-admin"

-	ng-style="{bottom: tabBottom}">

-	 <div class="w-ecomp-main-container" >

-	<div class="user-notification" id="page-content">

-		<div id="title" class="w-ecomp-main-view-title">

-			<h1 class="heading-page" >User Notifications</h1>

-		</div>

-		<div class="userNotifTable">

-		

-		   <div class="table-control-fields">

-		   <input class="input-table-search" type="text" id="table-search-field"

-						placeholder="Search in entire table" ng-model="searchString" />

-					</div>

-			  <div class="table-control-buttons" ng-controller="userNotificationsCtrl">

-						<button class="btn btn-alt btn-small"id="button-openAddNewApp"   ng-click="openUserNotificationModal()" >

-		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Notification

-		                </button> 

-					</div>

-		

-			<span class="ecomp-spinner" ng-show="isLoadingTable"></span>

-			<div class="b2b-table-div"

-				ng-hide="isLoadingTable" id="table-main">

-				<table b2b-table id="table-main" table-data="adminNotifications" search-string="searchString"

-					current-page="ignoredCurrentPage">

-					<thead b2b-table-row type="header">

-						<tr>

-							<th id="th-notif-0" b2b-table-header key="msgSource"

-								sortable="true" style=" width: 10px;">Message Source</th>

-							<th id="th-notif-1" b2b-table-header key="msgHeader"

-								sortable="true" style=" width: 10px;">Message</th>

-							<th id="th-notif-2"  b2b-table-header key="startTime"

-								sortable="true">Start Date (Local Time)</th>

-							<th id="th-notif-3" b2b-table-header key="endTime"

-								sortable="true">End Date  (Local Time)</th>

-							<th id="th-notif-4" b2b-table-header key="priority"

-								sortable="true">Priority</th>

-							<th id="th-notif-5" b2b-table-header key="loginId"

-								sortable="true">Created By</th>

-							<th id="th-notif-6" b2b-table-header key="createdDate"

-								sortable="true">Created Time</th>

-							<th id="th-notif-7" b2b-table-header key="isForAllRoles"

-								sortable="true">All Users (Roles)?</th>

-							<th id="th-notif-8" b2b-table-header key="edit" sortable="false">View/Delete</th>

-						</tr>

-					</thead>

-					<tbody b2b-table-row type="body" class="table-body"

-						row-repeat="rowData in tableAdminNotifItems">

-						<tr>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div  id="{{$index}}-msgSource">{{rowData.msgSource}}</div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?' color:lightgray !important':''}}">

-								<div id="{{$index}}-msgHeader" style="font-weight: bold;">{{rowData.msgHeader}}</div>

-								<div id="{{$index}}-message" ng-if="rowData.msgSource==='EP'" style="width:500px"  ng-bind="rowData.msgDescription"></div>

-								<div id="{{$index}}-message" ng-if="rowData.msgSource!=='EP'"  ng-bind="rowData.msgDescription| elipsis: 27"></div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-startTime">{{rowData.startTime |

-									date:'medium'}}</div>

-							</td >

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-endTime">{{rowData.endTime |

-									date:'medium'}}</div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-priority">{{priorityItems[rowData.priority]}}</div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-loginId">{{!rowData.loginId ?externalNotification: rowData.loginId}}</div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-createdDate">{{rowData.createdDate |

-									date:'medium'}}</div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">

-								<div id="{{$index}}-isForAllRoles">{{rowData.isForAllRoles}}</div>

-							</td>

-							<td b2b-table-body style="{{rowData.expired?' color:lightgray !important':''}}">

-							

-							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource==='EP'" ng-click="editUserNotificationModal(rowData)"class="icon-overview"  >  /</p> 

-							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource!=='EP'" ng-click="showDetailedJsonMessage(rowData)"class="icon-overview"  >/ </p> 

-							<p id="{{$index}}-notification-delete" ng-click="removeUserNotification(rowData)" class="icon-misc-trash"></p> 

-							

-						

-							</td>

-						</tr>

-					</tbody>

-				</table>

-				

-			</div>

-					<div b2b-pagination="" total-pages="totalPages1"

-						current-page="currentPage1" click-handler="customPageHandler"

-						role="navigation" aria-label="Customer Data Pages"></div>

-				

-						

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-user-notification-admin"
+	ng-style="{bottom: tabBottom}">
+	 <div class="w-ecomp-main-container" >
+	<div class="user-notification" id="page-content">
+		<div id="title" class="w-ecomp-main-view-title">
+			<h1 class="heading-page" >User Notifications</h1>
+		</div>
+		<div class="userNotifTable">
+		
+		   <div class="table-control-fields">
+		   <input class="input-table-search" type="text" id="table-search-field"
+						placeholder="Search in entire table" ng-model="searchString" />
+					</div>
+			  <div class="table-control-buttons" ng-controller="userNotificationsCtrl">
+						<button class="btn btn-alt btn-small"id="button-openAddNewApp"   ng-click="openUserNotificationModal()" >
+		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Notification
+		                </button> 
+					</div>
+		
+			<span class="ecomp-spinner" ng-show="isLoadingTable"></span>
+			<div class="b2b-table-div"
+				ng-hide="isLoadingTable" id="table-main">
+				<table b2b-table id="table-main" table-data="adminNotifications" search-string="searchString"
+					current-page="ignoredCurrentPage">
+					<thead b2b-table-row type="header">
+						<tr>
+							<th id="th-notif-0" b2b-table-header key="msgSource"
+								sortable="true" style=" width: 10px;">Message Source</th>
+							<th id="th-notif-1" b2b-table-header key="msgHeader"
+								sortable="true" style=" width: 10px;">Message</th>
+							<th id="th-notif-2"  b2b-table-header key="startTime"
+								sortable="true">Start Date (Local Time)</th>
+							<th id="th-notif-3" b2b-table-header key="endTime"
+								sortable="true">End Date  (Local Time)</th>
+							<th id="th-notif-4" b2b-table-header key="priority"
+								sortable="true">Priority</th>
+							<th id="th-notif-5" b2b-table-header key="loginId"
+								sortable="true">Created By</th>
+							<th id="th-notif-6" b2b-table-header key="createdDate"
+								sortable="true">Created Time</th>
+							<th id="th-notif-7" b2b-table-header key="isForAllRoles"
+								sortable="true">All Users (Roles)?</th>
+							<th id="th-notif-8" b2b-table-header key="edit" sortable="false">View/Delete</th>
+						</tr>
+					</thead>
+					<tbody b2b-table-row type="body" class="table-body"
+						row-repeat="rowData in tableAdminNotifItems">
+						<tr>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div  id="{{$index}}-msgSource">{{rowData.msgSource}}</div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?' color:lightgray !important':''}}">
+								<div id="{{$index}}-msgHeader" style="font-weight: bold;">{{rowData.msgHeader}}</div>
+								<div id="{{$index}}-message" ng-if="rowData.msgSource==='EP'" style="width:500px"  ng-bind="rowData.msgDescription"></div>
+								<div id="{{$index}}-message" ng-if="rowData.msgSource!=='EP'"  ng-bind="rowData.msgDescription| elipsis: 27"></div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-startTime">{{rowData.startTime |
+									date:'medium'}}</div>
+							</td >
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-endTime">{{rowData.endTime |
+									date:'medium'}}</div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-priority">{{priorityItems[rowData.priority]}}</div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-loginId">{{!rowData.loginId ?externalNotification: rowData.loginId}}</div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-createdDate">{{rowData.createdDate |
+									date:'medium'}}</div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
+								<div id="{{$index}}-isForAllRoles">{{rowData.isForAllRoles}}</div>
+							</td>
+							<td b2b-table-body style="{{rowData.expired?' color:lightgray !important':''}}">
+							
+							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource==='EP'" ng-click="editUserNotificationModal(rowData)"class="icon-overview"  >  /</p> 
+							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource!=='EP'" ng-click="showDetailedJsonMessage(rowData)"class="icon-overview"  >/ </p> 
+							<p id="{{$index}}-notification-delete" ng-click="removeUserNotification(rowData)" class="icon-misc-trash"></p> 
+							
+						
+							</td>
+						</tr>
+					</tbody>
+				</table>
+				
+			</div>
+					<div b2b-pagination="" total-pages="totalPages1"
+						current-page="currentPage1" click-handler="customPageHandler"
+						role="navigation" aria-label="Customer Data Pages"></div>
+				
+						
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html
index 9527c750..e3bcf0a4 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html
@@ -1,32 +1,32 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="new-user-modal">

-	<div class="search-users-directive">

-		<div class="title">Bulk User Upload Acknowledgement</div>

-		<div class="main">

-			<h1>The valid entries have been uploaded.</h1>

-

-			<div class="dialog-control">

-				<div id="search-user-cancel-button" class="cancel-button"

-					ng-click="closeDialog()">OK</div>

-			</div>

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="new-user-modal">
+	<div class="search-users-directive">
+		<div class="title">Bulk User Upload Acknowledgement</div>
+		<div class="main">
+			<h1>The valid entries have been uploaded.</h1>
+
+			<div class="dialog-control">
+				<div id="search-user-cancel-button" class="cancel-button"
+					ng-click="closeDialog()">OK</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html
index a3c0b534..6df7d240 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html
@@ -1,83 +1,83 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="bulk-user-modal">

-	<div class="title">Bulk User Upload Confirmation</div>

-		<div class="main">

-

-			<!-- progress indicator -->

-			<div class="upload-instructions"

-				ng-show="isProcessing">

-				{{progressMsg}}

-				<br>

-				<br>

-				<span class="ecomp-spinner"></span>

-			</div>

-

-			<div ng-hide="isProcessing">

-				<div class="upload-instructions">

-				Click OK to upload the valid requests. 

-				Invalid requests will be ignored.</div>

-				<div class="c-ecomp-portal-abs-table default"

-					style="height: 250px !important">

-					<table b2b-table table-data="uploadFile"

-						search-string="bulkUser.searchString"

-						view-per-page="bulkUser.viewPerPageIgnored"

-						current-page="bulkUser.currentPageIgnored"

-						total-page="bulkUser.totalPageIgnored">

-						<thead b2b-table-row type="header">

-							<tr>

-								<th id="th-line" b2b-table-header sortable="false">Line</th>

-								<th id="th-orgUserId" b2b-table-header sortable="false">Org User ID

-									</th>

-								<th id="th-approle" b2b-table-header sortable="false">App

-									Role</th>

-								<th id="th-status" b2b-table-header sortable="false">Status</th>

-							</tr>

-						</thead>

-						<!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->

-						<tbody b2b-table-row type="body" class="table-body"

-							row-repeat="rowData in uploadFile">

-							<tr id="tr-rowData">

-								<td class="td-first" b2b-table-body>

-									<div ng-bind="rowData.line"></div>

-								</td>

-								<td b2b-table-body>

-									<div ng-bind="rowData.orgUserId"></div>

-								</td>

-								<td b2b-table-body>

-									<div ng-bind="rowData.role"></div>

-								</td>

-								<td b2b-table-body>

-									<div ng-bind="rowData.status"></div>

-								</td>

-							</tr>

-						</tbody>

-					</table>

-				</div>

-

-			</div>

-			<div class="dialog-control">		

-					<button id="bulk-user-ok-button" class="btn btn-alt btn-small" ng-class="{disabled: isValidating}"

-					ng-click="updateDB()">Ok</button>

-					<button id="bulk-user-cancel-button" class="btn btn-alt btn-small" ng-click="cancelUpload()">Cancel</button>

-					

-			</div>

-		</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="bulk-user-modal">
+	<div class="title">Bulk User Upload Confirmation</div>
+		<div class="main">
+
+			<!-- progress indicator -->
+			<div class="upload-instructions"
+				ng-show="isProcessing">
+				{{progressMsg}}
+				<br>
+				<br>
+				<span class="ecomp-spinner"></span>
+			</div>
+
+			<div ng-hide="isProcessing">
+				<div class="upload-instructions">
+				Click OK to upload the valid requests. 
+				Invalid requests will be ignored.</div>
+				<div class="c-ecomp-portal-abs-table default"
+					style="height: 250px !important">
+					<table b2b-table table-data="uploadFile"
+						search-string="bulkUser.searchString"
+						view-per-page="bulkUser.viewPerPageIgnored"
+						current-page="bulkUser.currentPageIgnored"
+						total-page="bulkUser.totalPageIgnored">
+						<thead b2b-table-row type="header">
+							<tr>
+								<th id="th-line" b2b-table-header sortable="false">Line</th>
+								<th id="th-orgUserId" b2b-table-header sortable="false">Org User ID
+									</th>
+								<th id="th-approle" b2b-table-header sortable="false">App
+									Role</th>
+								<th id="th-status" b2b-table-header sortable="false">Status</th>
+							</tr>
+						</thead>
+						<!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->
+						<tbody b2b-table-row type="body" class="table-body"
+							row-repeat="rowData in uploadFile">
+							<tr id="tr-rowData">
+								<td class="td-first" b2b-table-body>
+									<div ng-bind="rowData.line"></div>
+								</td>
+								<td b2b-table-body>
+									<div ng-bind="rowData.orgUserId"></div>
+								</td>
+								<td b2b-table-body>
+									<div ng-bind="rowData.role"></div>
+								</td>
+								<td b2b-table-body>
+									<div ng-bind="rowData.status"></div>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+			</div>
+			<div class="dialog-control">		
+					<button id="bulk-user-ok-button" class="btn btn-alt btn-small" ng-class="{disabled: isValidating}"
+					ng-click="updateDB()">Ok</button>
+					<button id="bulk-user-cancel-button" class="btn btn-alt btn-small" ng-click="cancelUpload()">Cancel</button>
+					
+			</div>
+		</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js
index e3046b86..e73fe290 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js
@@ -1,577 +1,577 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * bulk user upload controller

- */

-'use strict';

-(function () {

-    class BulkUserModalCtrl {

-    	constructor($scope, $log, $filter, $q, usersService, applicationsService, confirmBoxService, functionalMenuService, ngDialog) {

-    		

-    		// Set to true for copious console output

-    		var debug = false;

-    		// Roles fetched from app service

-    		var appRolesResult = [];

-    		// Users fetched from user service

-    		var	userCheckResult = [];

-    		// Requests for user-role assignment built by validator

-    		var appUserRolesRequest = [];

-    		

-    		let init = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::init');

-    			// Angular insists on this.

-    			$scope.fileModel = {};

-    			// Model for drop-down

-    			$scope.adminApps = [];

-    			// Enable modal controls

-    			this.step1 = true;

-    			this.fileSelected = false;

-

-    			// Flag that indicates background work is proceeding

-    			$scope.isProcessing = true;

-

-    			// Load user's admin applications

-    			applicationsService.getAdminApps().promise().then(apps => {

-    				if (debug)

-    					$log.debug('BulkUserModalCtrl::init: getAdminApps returned' + JSON.stringify(apps));

-                    if (!apps || typeof(apps) != 'object') {

-                        $log.error('BulkUserModalCtrl::init: getAdminApps returned unexpected data');

-                    }

-                    else {

-                    	if (debug)

-                    		$log.debug('BulkUserModalCtrl::init:  admin apps length is ', apps.length);

-                    	

-                    	// Sort app names and populate the drop-down model

-                        let sortedApps = apps.sort(getSortOrder('name', true));

-                        for (let i = 0; i < sortedApps.length; ++i) {

-                            $scope.adminApps.push({

-                                index: i,

-                                id: sortedApps[i].id,

-                                value: sortedApps[i].name,

-                                title: sortedApps[i].name

-                            });

-                        }

-                        // Pick the first one in the list

-                        $scope.selectedApplication = $scope.adminApps[0];

-                    }

-    				$scope.isProcessing = false;

-                }).catch(err => {

-                    $log.error('BulkUserModalCtrl::init: getAdminApps threw', err);

-                	$scope.isProcessing = false;

-                });

-    			

-    		}; // init

-    		

-    		// Answers a function that compares properties with the specified name.

-    		let getSortOrder = (prop, foldCase) => {

-                return function(a, b) {

-                	let aProp = foldCase ? a[prop].toLowerCase() : a[prop];

-                	let bProp = foldCase ? b[prop].toLowerCase() : b[prop];

-                    if (aProp > bProp)

-                        return 1;

-                    else if (aProp < bProp) 

-                        return -1;

-                    else

-                    	return 0;

-                }

-            }

-    		

-    		//This is a fix for dropdown selection, due to b2b dropdown only update value field

-    		$scope.$watch('selectedApplication.value', (newVal, oldVal) => {

-    			for(var i=0;i<$scope.adminApps.length;i++){ 			

-    				if($scope.adminApps[i].value==newVal){

-    					$scope.selectedApplication=angular.copy($scope.adminApps[i]);;

-    				}

-    			}

-    		});

-

-    		// Invoked when user picks an app on the drop-down.

-    		$scope.appSelected = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::appSelected: selectedApplication.id is ' + $scope.selectedApplication.id);

-    			this.appSelected = true;

-    		}

-    		

-    		// Caches the file name supplied by the event handler.

-    		$scope.fileChangeHandler = (event, files) => {

-    			this.fileSelected = true;

-    			this.fileToRead = files[0];

-    			if (debug)

-    				$log.debug("BulkUserModalCtrl::fileChangeHandler: file is ", this.fileToRead);

-    		}; // file change handler

-    		

-    		/**

-    		 * Reads the contents of the file, calls portal endpoints

-    		 * to validate roles, userIds and existing role assignments;

-    		 * ultimately builds array of requests to be sent.

-    		 * Creates scope variable with input file contents for

-    		 * communication with functions.

-    		 * 

-    		 * This function performs a synchronous step-by-step process

-    		 * using asynchronous promises. The code could all be inline

-    		 * here but the nesting becomes unwieldy.

-    		 */

-    		$scope.readValidateFile = () => {

-    			$scope.isProcessing = true;

-    			$scope.progressMsg = 'Reading upload file..';

-    			var reader = new FileReader();

-    			reader.onload = function(event) {

-    				$scope.uploadFile = $filter('csvToObj')(reader.result);

-    				if (debug)

-    					$log.debug('BulkUserModalCtrl::readValidateFile onload: data length is ' + $scope.uploadFile.length);

-    				// sort input by orgUserId

-    				$scope.uploadFile.sort(getSortOrder('orgUserId', true));

-    				

-    				let appid = $scope.selectedApplication.id;

-    				$scope.progressMsg = 'Fetching application roles..';

-                    functionalMenuService.getManagedRolesMenu(appid).then(function (rolesObj) {

-                    	if (debug)

-                    		$log.debug("BulkUserModalCtrl::readValidateFile: managedRolesMenu returned " + JSON.stringify(rolesObj));

-           				appRolesResult = rolesObj;

-           				$scope.progressMsg = 'Validating application roles..';

-                    	$scope.verifyRoles();

-    				

-                    	let userPromises = $scope.buildUserChecks();

-                    	if (debug)

-                    		$log.debug('BulkUserModalCtrl::readValidateFile: userPromises length is ' + userPromises.length);

-                    	$scope.progressMsg = 'Validating Org Users..';

-                    	$q.all(userPromises).then(function() {

-                    		if (debug)

-                    			$log.debug('BulkUserModalCtrl::readValidateFile: userCheckResult length is ' + userCheckResult.length);

-                    		$scope.evalUserCheckResults();

-    					

-                    		let appPromises = $scope.buildAppRoleChecks();

-                    		if (debug)

-                    			$log.debug('BulkUserModalCtrl::readValidateFile: appPromises length is ' + appPromises.length);

-                    		$scope.progressMsg = 'Querying application for user roles..';

-                    		$q.all(appPromises).then( function() {

-                    			if (debug)

-                    				$log.debug('BulkUserModalCtrl::readValidateFile: appUserRolesRequest length is ' + appUserRolesRequest.length);

-                    			$scope.evalAppRoleCheckResults();

-                    			

-	    						// Re sort by line for the confirmation dialog

-	    						$scope.uploadFile.sort(getSortOrder('line', false));

-	    						// We're done, confirm box may show the table

-	    						if (debug)

-	    							$log.debug('BulkUserModalCtrl::readValidateFile inner-then ends');

-	    						$scope.progressMsg = 'Done.';

-	    						$scope.isProcessing = false;

-                    		},

-                    		function(error) {

-                    			$log.error('BulkUserModalCtrl::readValidateFile: failed retrieving user-app roles');

-	    						$scope.isProcessing = false;

-                    		}

-                    		); // then of app promises

-                    	},

-                    	function(error) {

-                    		$log.error('BulkUserModalCtrl::readValidateFile: failed retrieving user info');

-                    		$scope.isProcessing = false;

-                    	}

-                    	); // then of user promises

-                    },

-                    function(error) {

-                    	$log.error('BulkUserModalCtrl::readValidateFile: failed retrieving app role info');

-                    	$scope.isProcessing = false;

-                    }

-                    ); // then of role promise

-           

-    			} // onload

-    			

-    			// Invoke the reader on the selected file

-    			reader.readAsText(this.fileToRead);

-    		}; 

-    		

-    		/**

-    		 * Evaluates the result set returned by the app role service.

-    		 * Sets an uploadFile array element status if a role is not defined.

-    		 * Reads and writes scope variable uploadFile.

-    		 * Reads closure variable appRolesResult.

-    		 */

-    		$scope.verifyRoles = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::verifyRoles: appRoles is ' + JSON.stringify(appRolesResult));

-    			// check roles in upload file against defined app roles

-    			$scope.uploadFile.forEach( function (uploadRow) {

-    				// skip rows that already have a defined status: headers etc.

-    				if (uploadRow.status) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::verifyRoles: skip row ' + uploadRow.line);

-    					return;

-    				}

-    				uploadRow.role = uploadRow.role.trim();

-    				var foundRole=false;

-    				for (var i=0; i < appRolesResult.length; i++) {

-    					if (uploadRow.role.toUpperCase() === appRolesResult[i].rolename.trim().toUpperCase()) {

-    						if (debug)

-    							$log.debug('BulkUserModalCtrl::verifyRoles: match on role ' + uploadRow.role);

-    						foundRole=true;

-    						break;

-    					}

-    				};

-    				if (!foundRole) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::verifyRoles: NO match on role ' + uploadRow.role);

-    					uploadRow.status = 'Invalid role';

-    				};

-    			}); // foreach

-    		}; // verifyRoles

-    		

-    		/**

-    		 * Builds and returns an array of promises to invoke the 

-    		 * searchUsers service for each unique Org User UID in the input.

-    		 * Reads and writes scope variable uploadFile, which must be sorted by Org User UID.

-    		 * The promise function writes to closure variable userCheckResult

-    		 */

-    		$scope.buildUserChecks = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::buildUserChecks: uploadFile length is ' + $scope.uploadFile.length);

-    			userCheckResult = [];

-    			let promises = [];

-    			let prevRow = null;

-    			$scope.uploadFile.forEach(function (uploadRow) {

-    				if (uploadRow.status) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::buildUserChecks: skip row ' + uploadRow.line);

-    					return;

-    				};

-    				// detect repeated UIDs

-    				if (prevRow == null || prevRow.orgUserId.toLowerCase() !== uploadRow.orgUserId.toLowerCase()) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::buildUserChecks: create request for orgUserId ' + uploadRow.orgUserId);

-    					let userPromise = usersService.searchUsers(uploadRow.orgUserId).promise().then( (usersList) => {

-    						if (typeof usersList[0] !== "undefined") {

-    							userCheckResult.push({ 

-    								orgUserId:    usersList[0].orgUserId,

-    								firstName: usersList[0].firstName,

-    								lastName:  usersList[0].lastName,

-    								jobTitle:  usersList[0].jobTitle

-    							});

-    						}

-    						else {

-    							// User not found.

-    							if (debug)

-    								$log.debug('BulkUserModalCtrl::buildUserChecks: searchUsers returned null');

-    						}

-    					}, function(error){

-    						$log.error('BulkUserModalCtrl::buildUserChecks: searchUsers failed ' + JSON.stringify(error));

-    					}); 

-    					promises.push(userPromise);

-    				}

-    				else {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::buildUserChecks: skip repeated orgUserId ' + uploadRow.orgUserId);    					

-    				}

-    				prevRow = uploadRow;

-    			}); // foreach

-    			return promises;

-    		}; // buildUserChecks

-    		

-    		/**

-    		 * Evaluates the result set returned by the user service to set

-    		 * the uploadFile array element status if the user was not found.

-    		 * Reads and writes scope variable uploadFile.

-    		 * Reads closure variable userCheckResult.

-    		 */

-    		$scope.evalUserCheckResults = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::evalUserCheckResult: uploadFile length is ' + $scope.uploadFile.length);

-    			$scope.uploadFile.forEach(function (uploadRow) {

-    				if (uploadRow.status) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::evalUserCheckResults: skip row ' + uploadRow.line);

-    					return;

-    				};

-    				let foundorgUserId = false;

-    				userCheckResult.forEach(function(userItem) {

-    					if (uploadRow.orgUserId.toLowerCase() === userItem.orgUserId.toLowerCase()) {

-    						if (debug)

-    							$log.debug('BulkUserModalCtrl::evalUserCheckResults: found orgUserId ' + uploadRow.orgUserId);

-    						foundorgUserId=true;

-    					};

-    				});

-    				if (!foundorgUserId) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::evalUserCheckResults: NO match on orgUserId ' + uploadRow.orgUserId);

-    					uploadRow.status = 'Invalid orgUserId';

-    				}

-    			}); // foreach

-    		}; // evalUserCheckResults

-

-            /**

-    		 * Builds and returns an array of promises to invoke the getUserAppRoles

-    		 * service for each unique Org User in the input file.

-    		 * Each promise creates an update to be sent to the remote application

-    		 * with all role names.

-    		 * Reads scope variable uploadFile, which must be sorted by Org User.

-    		 * The promise function writes to closure variable appUserRolesRequest

-    		 */

-    		$scope.buildAppRoleChecks = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::buildAppRoleChecks: uploadFile length is ' + $scope.uploadFile.length); 

-    			appUserRolesRequest = [];

-    			let appId = $scope.selectedApplication.id;

-    			let promises = [];

-    			let prevRow = null;

-    			$scope.uploadFile.forEach( function (uploadRow) {

-    				if (uploadRow.status) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::buildAppRoleChecks: skip row ' + uploadRow.line);

-    					return;

-    				}

-    				// Because the input is sorted, generate only one request for each Org User

-    				if (prevRow == null || prevRow.orgUserId.toLowerCase() !== uploadRow.orgUserId.toLowerCase()) {

-            			 if (debug)

-            				 $log.debug('BulkUserModalCtrl::buildAppRoleChecks: create request for orgUserId ' + uploadRow.orgUserId);

-            			 let appPromise = usersService.getUserAppRoles(appId, uploadRow.orgUserId).promise().then( (userAppRolesResult) => {

-            				 // Reply for unknown user has all defined roles with isApplied=false on each.  

-            				 if (typeof userAppRolesResult[0] !== "undefined") {

-            					 if (debug)

-            						 $log.debug('BulkUserModalCtrl::buildAppRoleChecks: adding result ' 

-            								 + JSON.stringify(userAppRolesResult));

-            					 appUserRolesRequest.push({

-            						 orgUserId: uploadRow.orgUserId,

-            						 userAppRoles: userAppRolesResult                    					 

-            					 });

-            				 } else {

-            					 $log.error('BulkUserModalCtrl::buildAppRoleChecks: getUserAppRoles returned ' + JSON.stringify(userAppRolesResult));

-            				 };

-            			 }, function(error){

-            				 $log.error('BulkUserModalCtrl::buildAppRoleChecks: getUserAppRoles failed ', error);

-            			 });

-            			 promises.push(appPromise);

-    				} else {

-            			 if (debug)

-            				 $log.debug('BulkUserModalCtrl::buildAppRoleChecks: duplicate orgUserId, skip: '+ uploadRow.orgUserId);

-            		 }

-            		 prevRow = uploadRow;

-            	 }); // foreach

-    			return promises;

-    		}; // buildAppRoleChecks

-    		

-    		/**

-    		 * Evaluates the result set returned by the app service and adjusts 

-    		 * the list of updates to be sent to the remote application by setting

-    		 * isApplied=true for each role name found in the upload file.

-    		 * Reads and writes scope variable uploadFile.

-    		 * Reads closure variable appUserRolesRequest.

-    		 */

-    		$scope.evalAppRoleCheckResults = () => {

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: uploadFile length is ' + $scope.uploadFile.length);

-    			$scope.uploadFile.forEach(function (uploadRow) {

-    				if (uploadRow.status) {

-    					if (debug)

-    						$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: skip row ' + uploadRow.line);

-    					return;

-    				}

-    				// Search for the match in the app-user-roles array

-    				appUserRolesRequest.forEach( function (appUserRoleObj) {

-    					if (uploadRow.orgUserId.toLowerCase() === appUserRoleObj.orgUserId.toLowerCase()) {

-    						if (debug)

-    							$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: match on orgUserId ' + uploadRow.orgUserId);

-    						let roles = appUserRoleObj.userAppRoles;

-    						roles.forEach(function (appRoleItem) {

-    							//if (debug)

-    							//	$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: checking uploadRow.role='

-    							//			+ uploadRow.role + ', appRoleItem.roleName= ' + appRoleItem.roleName);

-    							if (uploadRow.role === appRoleItem.roleName) {

-    								if (appRoleItem.isApplied) {

-    									if (debug)

-    										$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: existing role ' 

-    											+ appRoleItem.roleName);

-    									uploadRow.status = 'Role exists';

-    								}

-    								else {

-    									if (debug)

-    										$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: new role ' 

-    											+ appRoleItem.roleName);

-    									// After much back-and-forth I decided a clear indicator

-    									// is better than blank in the table status column.

-    									uploadRow.status = 'OK';

-    									appRoleItem.isApplied = true;

-    								}

-    								// This count is not especially interesting.

-    								// numberUserRolesSucceeded++;

-    							}

-    						}); // for each role

-    					}

-    				}); // for each result		

-    			}); // for each row

-    		}; // evalAppRoleCheckResults

-             

-    		/**

-    		 * Sends requests to Portal requesting user role assignment.

-    		 * That endpoint handles creation of the user at the remote app if necessary.

-    		 * Reads closure variable appUserRolesRequest.

-    		 * Invoked by the Next button on the confirmation dialog.

-    		 */

-    		$scope.updateDB = () => {

-    			$scope.isProcessing = true;

-    			$scope.progressMsg = 'Sending requests to application..';

-    			if (debug)

-    				$log.debug('BulkUserModalCtrl::updateDB: request length is ' + appUserRolesRequest.length);

-    			var numberUsersSucceeded = 0;

-    			let promises = [];

-    			appUserRolesRequest.forEach(function(appUserRoleObj) {

-    				if (debug) 

-    					$log.debug('BulkUserModalCtrl::updateDB: appUserRoleObj is ' + JSON.stringify(appUserRoleObj));

-                     let updateRequest = {

-                    		 orgUserId: appUserRoleObj.orgUserId, 

-                    		 appId: $scope.selectedApplication.id, 

-                    		 appRoles: appUserRoleObj.userAppRoles

-                     };

-                     if (debug)

-                    	 $log.debug('BulkUserModalCtrl::updateDB: updateRequest is ' + JSON.stringify(updateRequest));

-                     let updatePromise = usersService.updateUserAppRoles(updateRequest).promise().then(res => {

-                    	 if (debug)

-                    		 $log.debug('BulkUserModalCtrl::updateDB: updated successfully: ' + JSON.stringify(res));

-                    	 numberUsersSucceeded++;

-                     }).catch(err => {

-                    	 // What to do if one of many fails??

-                    	 $log.error('BulkUserModalCtrl::updateDB failed: ', err);

-                    	 confirmBoxService.showInformation(

-                    			 'Failed to update the user application roles. ' +

-                    			 'Error: ' + err.status).then(isConfirmed => { });

-                     }).finally( () => {

-                    	 // $log.debug('BulkUserModalCtrl::updateDB: finally()');

-                     });

-                     promises.push(updatePromise);

-            	 }); // for each

-    			

-            	 // Run all the promises

-            	 $q.all(promises).then(function(){

-            		 $scope.isProcessing = false;

-            		 confirmBoxService.showInformation('Processed ' + numberUsersSucceeded + ' users.').then(isConfirmed => {

-            			 // Close the upload-confirm dialog

-            			 ngDialog.close();

-            		 });

-            	 });

-             }; // updateDb

-             

-    		// Sets the variable that hides/reveals the user controls

-    		$scope.step2 = () => {

-    			this.fileSelected = false;

-    			$scope.selectedFile = null;

-    			$scope.fileModel = null;

-    			this.step1 = false;  			

-    		}

-    		

-             // Navigate between dialog screens using step number: 1,2,...

-             $scope.navigateBack = () => {

-            	 this.step1 = true;

-                 this.fileSelected = false;

-             };

-             

-             // Opens a dialog to show the data to be uploaded.

-             // Invoked by the upload button on the bulk user dialog.

-             $scope.confirmUpload = () => {

-            	// Start the process

-            	$scope.readValidateFile();

-            	// Dialog shows progress

-            	ngDialog.open({

-            		templateUrl: 'app/views/users/new-user-dialogs/bulk-user.confirm.html',

-            		scope: $scope

-            	});

-             };

-

-             // Invoked by the Cancel button on the confirmation dialog.

-             $scope.cancelUpload = () => {

-            	 ngDialog.close();

-             };

-             

-             init();

-    	} // constructor

-    } // class

-    BulkUserModalCtrl.$inject = ['$scope', '$log', '$filter', '$q', 'usersService', 'applicationsService', 'confirmBoxService', 'functionalMenuService', 'ngDialog'];    

-    angular.module('ecompApp').controller('BulkUserModalCtrl', BulkUserModalCtrl);

-

-    angular.module('ecompApp').directive('fileChange', ['$parse', function($parse){

-    	return {

-    		require: 'ngModel',

-    	    restrict: 'A',

-    	    link : function($scope, element, attrs, ngModel) {

-    	    	var attrHandler = $parse(attrs['fileChange']);

-    	    	var handler=function(e) {

-    	    		$scope.$apply(function() {

-    	    			attrHandler($scope, { $event:e, files:e.target.files } );

-    	    			$scope.selectedFile = e.target.files[0].name;

-    	    		});

-    	    	};

-    	    	element[0].addEventListener('change',handler,false);

-    	   }

-    	}

-    }]);

-

-    angular.module('ecompApp').filter('csvToObj',function() {

-    	return function(input) {

-    	    var result = [];

-    	    var len, i, line, o;

-    		var lines = input.split('\n');

-    	    // Need 1-based index below

-    	    for (len = lines.length, i = 1; i <= len; ++i) {

-    	    	// Use 0-based index for array

-    	    	line = lines[i - 1].trim();

-   	    		if (line.length == 0) {

-   	    			// console.log("Skipping blank line");

-   	    			result.push({

-   	    				line: i,

-   	    				orgUserId: '',

-   	    				role: '',

-   	    				status: 'Blank line'

-   	    			});

-   	    			continue;

-   	    		}

-   	    		o = line.split(',');

-   	    		if (o.length !== 2) {

-   	    			// other lengths not valid for upload

-   	    			result.push({

-   	    				line: i,

-   	    				orgUserId: line,   

-   	    				role: '',

-   	    				status: 'Failed to find 2 comma-separated values'

-   	    			});

-   	    		}

-   	    		else {

-   	    			// console.log("Valid line: ", val);

-   	    			let entry = {

-   	    					line: i,

-   	    					orgUserId: o[0],

-   	    					role: o[1]

-   	    					// leave status undefined, this could be valid.

-   	    			};

-   	    			if (o[0].toLowerCase() === 'orgUserId') {

-   	    				// not valid for upload, so set status

-   	    				entry.status = 'Header';

-   	    			}

-   	    			else if (o[0].trim() == '' || o[1].trim() == '') {

-   	    				// defend against line with only a single comma etc.

-   	    				entry.status = 'Failed to find 2 non-empty values';   	    				

-   	    			}

-   	    			result.push(entry);

-   	    		} // len 2

-    	    } // for

-    	    return result;

-    	};

-    });

-    

-  

-        

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * bulk user upload controller
+ */
+'use strict';
+(function () {
+    class BulkUserModalCtrl {
+    	constructor($scope, $log, $filter, $q, usersService, applicationsService, confirmBoxService, functionalMenuService, ngDialog) {
+    		
+    		// Set to true for copious console output
+    		var debug = false;
+    		// Roles fetched from app service
+    		var appRolesResult = [];
+    		// Users fetched from user service
+    		var	userCheckResult = [];
+    		// Requests for user-role assignment built by validator
+    		var appUserRolesRequest = [];
+    		
+    		let init = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::init');
+    			// Angular insists on this.
+    			$scope.fileModel = {};
+    			// Model for drop-down
+    			$scope.adminApps = [];
+    			// Enable modal controls
+    			this.step1 = true;
+    			this.fileSelected = false;
+
+    			// Flag that indicates background work is proceeding
+    			$scope.isProcessing = true;
+
+    			// Load user's admin applications
+    			applicationsService.getAdminApps().promise().then(apps => {
+    				if (debug)
+    					$log.debug('BulkUserModalCtrl::init: getAdminApps returned' + JSON.stringify(apps));
+                    if (!apps || typeof(apps) != 'object') {
+                        $log.error('BulkUserModalCtrl::init: getAdminApps returned unexpected data');
+                    }
+                    else {
+                    	if (debug)
+                    		$log.debug('BulkUserModalCtrl::init:  admin apps length is ', apps.length);
+                    	
+                    	// Sort app names and populate the drop-down model
+                        let sortedApps = apps.sort(getSortOrder('name', true));
+                        for (let i = 0; i < sortedApps.length; ++i) {
+                            $scope.adminApps.push({
+                                index: i,
+                                id: sortedApps[i].id,
+                                value: sortedApps[i].name,
+                                title: sortedApps[i].name
+                            });
+                        }
+                        // Pick the first one in the list
+                        $scope.selectedApplication = $scope.adminApps[0];
+                    }
+    				$scope.isProcessing = false;
+                }).catch(err => {
+                    $log.error('BulkUserModalCtrl::init: getAdminApps threw', err);
+                	$scope.isProcessing = false;
+                });
+    			
+    		}; // init
+    		
+    		// Answers a function that compares properties with the specified name.
+    		let getSortOrder = (prop, foldCase) => {
+                return function(a, b) {
+                	let aProp = foldCase ? a[prop].toLowerCase() : a[prop];
+                	let bProp = foldCase ? b[prop].toLowerCase() : b[prop];
+                    if (aProp > bProp)
+                        return 1;
+                    else if (aProp < bProp) 
+                        return -1;
+                    else
+                    	return 0;
+                }
+            }
+    		
+    		//This is a fix for dropdown selection, due to b2b dropdown only update value field
+    		$scope.$watch('selectedApplication.value', (newVal, oldVal) => {
+    			for(var i=0;i<$scope.adminApps.length;i++){ 			
+    				if($scope.adminApps[i].value==newVal){
+    					$scope.selectedApplication=angular.copy($scope.adminApps[i]);;
+    				}
+    			}
+    		});
+
+    		// Invoked when user picks an app on the drop-down.
+    		$scope.appSelected = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::appSelected: selectedApplication.id is ' + $scope.selectedApplication.id);
+    			this.appSelected = true;
+    		}
+    		
+    		// Caches the file name supplied by the event handler.
+    		$scope.fileChangeHandler = (event, files) => {
+    			this.fileSelected = true;
+    			this.fileToRead = files[0];
+    			if (debug)
+    				$log.debug("BulkUserModalCtrl::fileChangeHandler: file is ", this.fileToRead);
+    		}; // file change handler
+    		
+    		/**
+    		 * Reads the contents of the file, calls portal endpoints
+    		 * to validate roles, userIds and existing role assignments;
+    		 * ultimately builds array of requests to be sent.
+    		 * Creates scope variable with input file contents for
+    		 * communication with functions.
+    		 * 
+    		 * This function performs a synchronous step-by-step process
+    		 * using asynchronous promises. The code could all be inline
+    		 * here but the nesting becomes unwieldy.
+    		 */
+    		$scope.readValidateFile = () => {
+    			$scope.isProcessing = true;
+    			$scope.progressMsg = 'Reading upload file..';
+    			var reader = new FileReader();
+    			reader.onload = function(event) {
+    				$scope.uploadFile = $filter('csvToObj')(reader.result);
+    				if (debug)
+    					$log.debug('BulkUserModalCtrl::readValidateFile onload: data length is ' + $scope.uploadFile.length);
+    				// sort input by orgUserId
+    				$scope.uploadFile.sort(getSortOrder('orgUserId', true));
+    				
+    				let appid = $scope.selectedApplication.id;
+    				$scope.progressMsg = 'Fetching application roles..';
+                    functionalMenuService.getManagedRolesMenu(appid).then(function (rolesObj) {
+                    	if (debug)
+                    		$log.debug("BulkUserModalCtrl::readValidateFile: managedRolesMenu returned " + JSON.stringify(rolesObj));
+           				appRolesResult = rolesObj;
+           				$scope.progressMsg = 'Validating application roles..';
+                    	$scope.verifyRoles();
+    				
+                    	let userPromises = $scope.buildUserChecks();
+                    	if (debug)
+                    		$log.debug('BulkUserModalCtrl::readValidateFile: userPromises length is ' + userPromises.length);
+                    	$scope.progressMsg = 'Validating Org Users..';
+                    	$q.all(userPromises).then(function() {
+                    		if (debug)
+                    			$log.debug('BulkUserModalCtrl::readValidateFile: userCheckResult length is ' + userCheckResult.length);
+                    		$scope.evalUserCheckResults();
+    					
+                    		let appPromises = $scope.buildAppRoleChecks();
+                    		if (debug)
+                    			$log.debug('BulkUserModalCtrl::readValidateFile: appPromises length is ' + appPromises.length);
+                    		$scope.progressMsg = 'Querying application for user roles..';
+                    		$q.all(appPromises).then( function() {
+                    			if (debug)
+                    				$log.debug('BulkUserModalCtrl::readValidateFile: appUserRolesRequest length is ' + appUserRolesRequest.length);
+                    			$scope.evalAppRoleCheckResults();
+                    			
+	    						// Re sort by line for the confirmation dialog
+	    						$scope.uploadFile.sort(getSortOrder('line', false));
+	    						// We're done, confirm box may show the table
+	    						if (debug)
+	    							$log.debug('BulkUserModalCtrl::readValidateFile inner-then ends');
+	    						$scope.progressMsg = 'Done.';
+	    						$scope.isProcessing = false;
+                    		},
+                    		function(error) {
+                    			$log.error('BulkUserModalCtrl::readValidateFile: failed retrieving user-app roles');
+	    						$scope.isProcessing = false;
+                    		}
+                    		); // then of app promises
+                    	},
+                    	function(error) {
+                    		$log.error('BulkUserModalCtrl::readValidateFile: failed retrieving user info');
+                    		$scope.isProcessing = false;
+                    	}
+                    	); // then of user promises
+                    },
+                    function(error) {
+                    	$log.error('BulkUserModalCtrl::readValidateFile: failed retrieving app role info');
+                    	$scope.isProcessing = false;
+                    }
+                    ); // then of role promise
+           
+    			} // onload
+    			
+    			// Invoke the reader on the selected file
+    			reader.readAsText(this.fileToRead);
+    		}; 
+    		
+    		/**
+    		 * Evaluates the result set returned by the app role service.
+    		 * Sets an uploadFile array element status if a role is not defined.
+    		 * Reads and writes scope variable uploadFile.
+    		 * Reads closure variable appRolesResult.
+    		 */
+    		$scope.verifyRoles = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::verifyRoles: appRoles is ' + JSON.stringify(appRolesResult));
+    			// check roles in upload file against defined app roles
+    			$scope.uploadFile.forEach( function (uploadRow) {
+    				// skip rows that already have a defined status: headers etc.
+    				if (uploadRow.status) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::verifyRoles: skip row ' + uploadRow.line);
+    					return;
+    				}
+    				uploadRow.role = uploadRow.role.trim();
+    				var foundRole=false;
+    				for (var i=0; i < appRolesResult.length; i++) {
+    					if (uploadRow.role.toUpperCase() === appRolesResult[i].rolename.trim().toUpperCase()) {
+    						if (debug)
+    							$log.debug('BulkUserModalCtrl::verifyRoles: match on role ' + uploadRow.role);
+    						foundRole=true;
+    						break;
+    					}
+    				};
+    				if (!foundRole) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::verifyRoles: NO match on role ' + uploadRow.role);
+    					uploadRow.status = 'Invalid role';
+    				};
+    			}); // foreach
+    		}; // verifyRoles
+    		
+    		/**
+    		 * Builds and returns an array of promises to invoke the 
+    		 * searchUsers service for each unique Org User UID in the input.
+    		 * Reads and writes scope variable uploadFile, which must be sorted by Org User UID.
+    		 * The promise function writes to closure variable userCheckResult
+    		 */
+    		$scope.buildUserChecks = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::buildUserChecks: uploadFile length is ' + $scope.uploadFile.length);
+    			userCheckResult = [];
+    			let promises = [];
+    			let prevRow = null;
+    			$scope.uploadFile.forEach(function (uploadRow) {
+    				if (uploadRow.status) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::buildUserChecks: skip row ' + uploadRow.line);
+    					return;
+    				};
+    				// detect repeated UIDs
+    				if (prevRow == null || prevRow.orgUserId.toLowerCase() !== uploadRow.orgUserId.toLowerCase()) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::buildUserChecks: create request for orgUserId ' + uploadRow.orgUserId);
+    					let userPromise = usersService.searchUsers(uploadRow.orgUserId).promise().then( (usersList) => {
+    						if (typeof usersList[0] !== "undefined") {
+    							userCheckResult.push({ 
+    								orgUserId:    usersList[0].orgUserId,
+    								firstName: usersList[0].firstName,
+    								lastName:  usersList[0].lastName,
+    								jobTitle:  usersList[0].jobTitle
+    							});
+    						}
+    						else {
+    							// User not found.
+    							if (debug)
+    								$log.debug('BulkUserModalCtrl::buildUserChecks: searchUsers returned null');
+    						}
+    					}, function(error){
+    						$log.error('BulkUserModalCtrl::buildUserChecks: searchUsers failed ' + JSON.stringify(error));
+    					}); 
+    					promises.push(userPromise);
+    				}
+    				else {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::buildUserChecks: skip repeated orgUserId ' + uploadRow.orgUserId);    					
+    				}
+    				prevRow = uploadRow;
+    			}); // foreach
+    			return promises;
+    		}; // buildUserChecks
+    		
+    		/**
+    		 * Evaluates the result set returned by the user service to set
+    		 * the uploadFile array element status if the user was not found.
+    		 * Reads and writes scope variable uploadFile.
+    		 * Reads closure variable userCheckResult.
+    		 */
+    		$scope.evalUserCheckResults = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::evalUserCheckResult: uploadFile length is ' + $scope.uploadFile.length);
+    			$scope.uploadFile.forEach(function (uploadRow) {
+    				if (uploadRow.status) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::evalUserCheckResults: skip row ' + uploadRow.line);
+    					return;
+    				};
+    				let foundorgUserId = false;
+    				userCheckResult.forEach(function(userItem) {
+    					if (uploadRow.orgUserId.toLowerCase() === userItem.orgUserId.toLowerCase()) {
+    						if (debug)
+    							$log.debug('BulkUserModalCtrl::evalUserCheckResults: found orgUserId ' + uploadRow.orgUserId);
+    						foundorgUserId=true;
+    					};
+    				});
+    				if (!foundorgUserId) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::evalUserCheckResults: NO match on orgUserId ' + uploadRow.orgUserId);
+    					uploadRow.status = 'Invalid orgUserId';
+    				}
+    			}); // foreach
+    		}; // evalUserCheckResults
+
+            /**
+    		 * Builds and returns an array of promises to invoke the getUserAppRoles
+    		 * service for each unique Org User in the input file.
+    		 * Each promise creates an update to be sent to the remote application
+    		 * with all role names.
+    		 * Reads scope variable uploadFile, which must be sorted by Org User.
+    		 * The promise function writes to closure variable appUserRolesRequest
+    		 */
+    		$scope.buildAppRoleChecks = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::buildAppRoleChecks: uploadFile length is ' + $scope.uploadFile.length); 
+    			appUserRolesRequest = [];
+    			let appId = $scope.selectedApplication.id;
+    			let promises = [];
+    			let prevRow = null;
+    			$scope.uploadFile.forEach( function (uploadRow) {
+    				if (uploadRow.status) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::buildAppRoleChecks: skip row ' + uploadRow.line);
+    					return;
+    				}
+    				// Because the input is sorted, generate only one request for each Org User
+    				if (prevRow == null || prevRow.orgUserId.toLowerCase() !== uploadRow.orgUserId.toLowerCase()) {
+            			 if (debug)
+            				 $log.debug('BulkUserModalCtrl::buildAppRoleChecks: create request for orgUserId ' + uploadRow.orgUserId);
+            			 let appPromise = usersService.getUserAppRoles(appId, uploadRow.orgUserId).promise().then( (userAppRolesResult) => {
+            				 // Reply for unknown user has all defined roles with isApplied=false on each.  
+            				 if (typeof userAppRolesResult[0] !== "undefined") {
+            					 if (debug)
+            						 $log.debug('BulkUserModalCtrl::buildAppRoleChecks: adding result ' 
+            								 + JSON.stringify(userAppRolesResult));
+            					 appUserRolesRequest.push({
+            						 orgUserId: uploadRow.orgUserId,
+            						 userAppRoles: userAppRolesResult                    					 
+            					 });
+            				 } else {
+            					 $log.error('BulkUserModalCtrl::buildAppRoleChecks: getUserAppRoles returned ' + JSON.stringify(userAppRolesResult));
+            				 };
+            			 }, function(error){
+            				 $log.error('BulkUserModalCtrl::buildAppRoleChecks: getUserAppRoles failed ', error);
+            			 });
+            			 promises.push(appPromise);
+    				} else {
+            			 if (debug)
+            				 $log.debug('BulkUserModalCtrl::buildAppRoleChecks: duplicate orgUserId, skip: '+ uploadRow.orgUserId);
+            		 }
+            		 prevRow = uploadRow;
+            	 }); // foreach
+    			return promises;
+    		}; // buildAppRoleChecks
+    		
+    		/**
+    		 * Evaluates the result set returned by the app service and adjusts 
+    		 * the list of updates to be sent to the remote application by setting
+    		 * isApplied=true for each role name found in the upload file.
+    		 * Reads and writes scope variable uploadFile.
+    		 * Reads closure variable appUserRolesRequest.
+    		 */
+    		$scope.evalAppRoleCheckResults = () => {
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: uploadFile length is ' + $scope.uploadFile.length);
+    			$scope.uploadFile.forEach(function (uploadRow) {
+    				if (uploadRow.status) {
+    					if (debug)
+    						$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: skip row ' + uploadRow.line);
+    					return;
+    				}
+    				// Search for the match in the app-user-roles array
+    				appUserRolesRequest.forEach( function (appUserRoleObj) {
+    					if (uploadRow.orgUserId.toLowerCase() === appUserRoleObj.orgUserId.toLowerCase()) {
+    						if (debug)
+    							$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: match on orgUserId ' + uploadRow.orgUserId);
+    						let roles = appUserRoleObj.userAppRoles;
+    						roles.forEach(function (appRoleItem) {
+    							//if (debug)
+    							//	$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: checking uploadRow.role='
+    							//			+ uploadRow.role + ', appRoleItem.roleName= ' + appRoleItem.roleName);
+    							if (uploadRow.role === appRoleItem.roleName) {
+    								if (appRoleItem.isApplied) {
+    									if (debug)
+    										$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: existing role ' 
+    											+ appRoleItem.roleName);
+    									uploadRow.status = 'Role exists';
+    								}
+    								else {
+    									if (debug)
+    										$log.debug('BulkUserModalCtrl::evalAppRoleCheckResults: new role ' 
+    											+ appRoleItem.roleName);
+    									// After much back-and-forth I decided a clear indicator
+    									// is better than blank in the table status column.
+    									uploadRow.status = 'OK';
+    									appRoleItem.isApplied = true;
+    								}
+    								// This count is not especially interesting.
+    								// numberUserRolesSucceeded++;
+    							}
+    						}); // for each role
+    					}
+    				}); // for each result		
+    			}); // for each row
+    		}; // evalAppRoleCheckResults
+             
+    		/**
+    		 * Sends requests to Portal requesting user role assignment.
+    		 * That endpoint handles creation of the user at the remote app if necessary.
+    		 * Reads closure variable appUserRolesRequest.
+    		 * Invoked by the Next button on the confirmation dialog.
+    		 */
+    		$scope.updateDB = () => {
+    			$scope.isProcessing = true;
+    			$scope.progressMsg = 'Sending requests to application..';
+    			if (debug)
+    				$log.debug('BulkUserModalCtrl::updateDB: request length is ' + appUserRolesRequest.length);
+    			var numberUsersSucceeded = 0;
+    			let promises = [];
+    			appUserRolesRequest.forEach(function(appUserRoleObj) {
+    				if (debug) 
+    					$log.debug('BulkUserModalCtrl::updateDB: appUserRoleObj is ' + JSON.stringify(appUserRoleObj));
+                     let updateRequest = {
+                    		 orgUserId: appUserRoleObj.orgUserId, 
+                    		 appId: $scope.selectedApplication.id, 
+                    		 appRoles: appUserRoleObj.userAppRoles
+                     };
+                     if (debug)
+                    	 $log.debug('BulkUserModalCtrl::updateDB: updateRequest is ' + JSON.stringify(updateRequest));
+                     let updatePromise = usersService.updateUserAppRoles(updateRequest).promise().then(res => {
+                    	 if (debug)
+                    		 $log.debug('BulkUserModalCtrl::updateDB: updated successfully: ' + JSON.stringify(res));
+                    	 numberUsersSucceeded++;
+                     }).catch(err => {
+                    	 // What to do if one of many fails??
+                    	 $log.error('BulkUserModalCtrl::updateDB failed: ', err);
+                    	 confirmBoxService.showInformation(
+                    			 'Failed to update the user application roles. ' +
+                    			 'Error: ' + err.status).then(isConfirmed => { });
+                     }).finally( () => {
+                    	 // $log.debug('BulkUserModalCtrl::updateDB: finally()');
+                     });
+                     promises.push(updatePromise);
+            	 }); // for each
+    			
+            	 // Run all the promises
+            	 $q.all(promises).then(function(){
+            		 $scope.isProcessing = false;
+            		 confirmBoxService.showInformation('Processed ' + numberUsersSucceeded + ' users.').then(isConfirmed => {
+            			 // Close the upload-confirm dialog
+            			 ngDialog.close();
+            		 });
+            	 });
+             }; // updateDb
+             
+    		// Sets the variable that hides/reveals the user controls
+    		$scope.step2 = () => {
+    			this.fileSelected = false;
+    			$scope.selectedFile = null;
+    			$scope.fileModel = null;
+    			this.step1 = false;  			
+    		}
+    		
+             // Navigate between dialog screens using step number: 1,2,...
+             $scope.navigateBack = () => {
+            	 this.step1 = true;
+                 this.fileSelected = false;
+             };
+             
+             // Opens a dialog to show the data to be uploaded.
+             // Invoked by the upload button on the bulk user dialog.
+             $scope.confirmUpload = () => {
+            	// Start the process
+            	$scope.readValidateFile();
+            	// Dialog shows progress
+            	ngDialog.open({
+            		templateUrl: 'app/views/users/new-user-dialogs/bulk-user.confirm.html',
+            		scope: $scope
+            	});
+             };
+
+             // Invoked by the Cancel button on the confirmation dialog.
+             $scope.cancelUpload = () => {
+            	 ngDialog.close();
+             };
+             
+             init();
+    	} // constructor
+    } // class
+    BulkUserModalCtrl.$inject = ['$scope', '$log', '$filter', '$q', 'usersService', 'applicationsService', 'confirmBoxService', 'functionalMenuService', 'ngDialog'];    
+    angular.module('ecompApp').controller('BulkUserModalCtrl', BulkUserModalCtrl);
+
+    angular.module('ecompApp').directive('fileChange', ['$parse', function($parse){
+    	return {
+    		require: 'ngModel',
+    	    restrict: 'A',
+    	    link : function($scope, element, attrs, ngModel) {
+    	    	var attrHandler = $parse(attrs['fileChange']);
+    	    	var handler=function(e) {
+    	    		$scope.$apply(function() {
+    	    			attrHandler($scope, { $event:e, files:e.target.files } );
+    	    			$scope.selectedFile = e.target.files[0].name;
+    	    		});
+    	    	};
+    	    	element[0].addEventListener('change',handler,false);
+    	   }
+    	}
+    }]);
+
+    angular.module('ecompApp').filter('csvToObj',function() {
+    	return function(input) {
+    	    var result = [];
+    	    var len, i, line, o;
+    		var lines = input.split('\n');
+    	    // Need 1-based index below
+    	    for (len = lines.length, i = 1; i <= len; ++i) {
+    	    	// Use 0-based index for array
+    	    	line = lines[i - 1].trim();
+   	    		if (line.length == 0) {
+   	    			// console.log("Skipping blank line");
+   	    			result.push({
+   	    				line: i,
+   	    				orgUserId: '',
+   	    				role: '',
+   	    				status: 'Blank line'
+   	    			});
+   	    			continue;
+   	    		}
+   	    		o = line.split(',');
+   	    		if (o.length !== 2) {
+   	    			// other lengths not valid for upload
+   	    			result.push({
+   	    				line: i,
+   	    				orgUserId: line,   
+   	    				role: '',
+   	    				status: 'Failed to find 2 comma-separated values'
+   	    			});
+   	    		}
+   	    		else {
+   	    			// console.log("Valid line: ", val);
+   	    			let entry = {
+   	    					line: i,
+   	    					orgUserId: o[0],
+   	    					role: o[1]
+   	    					// leave status undefined, this could be valid.
+   	    			};
+   	    			if (o[0].toLowerCase() === 'orgUserId') {
+   	    				// not valid for upload, so set status
+   	    				entry.status = 'Header';
+   	    			}
+   	    			else if (o[0].trim() == '' || o[1].trim() == '') {
+   	    				// defend against line with only a single comma etc.
+   	    				entry.status = 'Failed to find 2 non-empty values';   	    				
+   	    			}
+   	    			result.push(entry);
+   	    		} // len 2
+    	    } // for
+    	    return result;
+    	};
+    });
+    
+  
+        
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html
index 3d479cb9..7945e54a 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html
@@ -1,70 +1,76 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="bulk-user-modal">

-	<div class="title">Bulk User Upload</div>

-	<div class="main">

-		<div ng-show="bulkUser.step1">

-			<div class="upload-instructions">Select Application:</div>

-			<div class="c-ecomp-portal-abs-select default">

-

-			      <select id="bulk-user-dropdown-apps" name="dropdown1" b2b-dropdown  ng-model="selectedApplication.value" ng-disabled="isProcessing" ng-class="{disabled: isProcessing}">  

-				        <option b2b-dropdown-list option-repeat="d in adminApps" value="{{d.value}}">{{d.title}}</option>

-				                </select>

-

-			</div>

-		</div>

-

-		<div ng-hide="bulkUser.step1">

-			<div class="upload-instructions">Select Upload File:</div>

-

-			<!-- input type=file is difficult to style.

-				 Instead use a label styled as a button. -->

-			<label class="file-label"> 

-				<input type="file"

-					file-change="fileChangeHandler($event,files)" 

-					ng-model="fileModel" />

-					<span>Browse...</span>

-			</label>{{selectedFile}}

-			<div class="upload-instructions">File must have one entry per line with this format:

-			<pre>orgUserId, role name</pre>

-			</div>

-		</div>

-

-		<!-- progress indicator in middle -->

-		<div ng-show="isProcessing">

-			<span class="ecomp-spinner"></span>

-		</div>

-

-		<div class="dialog-control">

-				

-				<button id="bulk-user-back-button" class="btn btn-alt btn-small"

-				ng-hide="bulkUser.step1" ng-click="navigateBack()">Back</button>

-			<button id="bulk-user-next-button" class="btn btn-alt btn-small"

-				ng-hide="!bulkUser.step1" ng-click="!isProcessing && step2()"

-				ng-class="{disabled: isProcessing}">Next</button>

-			<button id="bulk-user-upload-button" class="btn btn-alt btn-small"

-				ng-hide="bulkUser.step1"

-				ng-click="bulkUser.fileSelected && confirmUpload()"

-				ng-class="{disabled: !bulkUser.fileSelected}">Upload</button>

-			<button id="bulk-user-cancel-button" class="btn btn-alt btn-small"

-				ng-click="closeThisDialog()">Cancel</button>

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="bulk-user-modal">
+	<div class="title">Bulk User Upload</div>
+	<div class="main">
+		<div ng-show="bulkUser.step1">
+			<div class="upload-instructions">Select Application:</div>
+			<div class="c-ecomp-portal-abs-select default">
+
+			      <select id="bulk-user-dropdown-apps" name="dropdown1" b2b-dropdown  ng-model="selectedApplication.value" ng-disabled="isProcessing" ng-class="{disabled: isProcessing}">  
+				        <option b2b-dropdown-list option-repeat="d in adminApps" value="{{d.value}}">{{d.title}}</option>
+				                </select>
+
+			</div>
+		</div>
+
+		<div ng-hide="bulkUser.step1">
+			<div class="upload-instructions">Select Upload File:</div>
+
+			<!-- input type=file is difficult to style.
+				 Instead use a label styled as a button. -->
+			<label class="file-label"> 
+				<input type="file"
+					file-change="fileChangeHandler($event,files)" 
+					ng-model="fileModel" />
+					<span>Browse...</span>
+			</label>{{selectedFile}}
+			<div class="upload-instructions">File must have one entry per line with this format:
+			<pre>orgUserId, role name</pre>
+			</div>
+		</div>
+
+		<!-- progress indicator in middle -->
+		<div ng-show="isProcessing">
+			<span class="ecomp-spinner"></span>
+		</div>
+
+		<div class="dialog-control">
+				
+				<button id="bulk-user-back-button" class="btn btn-alt btn-small"
+				ng-hide="bulkUser.step1" ng-click="navigateBack()">Back</button>
+			<button id="bulk-user-next-button" class="btn btn-alt btn-small"
+				ng-hide="!bulkUser.step1" ng-click="!isProcessing && step2()"
+				ng-class="{disabled: isProcessing}">Next</button>
+			<button id="bulk-user-upload-button" class="btn btn-alt btn-small"
+				ng-hide="bulkUser.step1"
+				ng-click="bulkUser.fileSelected && confirmUpload()"
+				ng-class="{disabled: !bulkUser.fileSelected}">Upload</button>
+			<button id="bulk-user-cancel-button" class="btn btn-alt btn-small"
+				ng-click="closeThisDialog()">Cancel</button>
+		</div>
+	</div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js
index 882f1e8f..6550a1ee 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js
@@ -1,216 +1,217 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/20/15.

- */

-'use strict';

-(function () {

-    class NewUserModalCtrl {

-        constructor($scope, $log, usersService, applicationsService, confirmBoxService) {

-            let init = () => {

-                //$log.info('NewUserModalCtrl::init');

-                this.isSaving = false;

-                this.anyChanges = false;

-                this.adminApps = [];

-                this.isGettingAdminApps = false;

-                if($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState){

-                    this.selectedUser = $scope.ngDialogData.selectedUser;

-                    this.dialogState = $scope.ngDialogData.dialogState;

-                    this.isShowBack = false;

-                    if(this.dialogState === 3){

-                        this.getUserAppsRoles();

-                    }

-                }else{

-                    this.isShowBack = true;

-                    this.selectedUser = null;

-                    this.dialogState = 1;

-                }

-            };

-

-            this.appChanged = (index) => {

-                let myApp = this.adminApps[index];

-                //$log.debug('NewUserModalCtrl::appChanged: index: ', index, '; app id: ', myApp.id, 'app name: ',myApp.name);

-                myApp.isChanged = true;

-                this.anyChanges = true;

-            }

-

-            this.deleteApp = (app) => {

-                let appMessage = this.selectedUser.firstName + ' ' + this.selectedUser.lastName;

-                confirmBoxService.deleteItem(appMessage).then(isConfirmed => {

-                    if(isConfirmed){

-                        this.anyChanges = true;

-                        app.isChanged = true;

-                        app.isDeleted = true; // use this to hide the app in the display

-                        app.appRoles.forEach(function(role){

-                            role.isApplied = false;

-                        });

-                    }

-                }).catch(err => {

-                    $log.error('NewUserModalCtrl::deleteApp error: ',err);

-                    confirmBoxService.showInformation('There was a problem deleting the the applications. ' +

-                        'Please try again later. Error: ' + err.status).then(isConfirmed => {});

-                });

-            };

-

-            this.getUserAppsRoles = () => {

-                if (!this.selectedUser || !this.selectedUser.orgUserId) {

-                    $log.error('NewUserModalCtrl::getUserAppsRoles error: No user is selected');

-                    this.dialogState = 1;

-                    return;

-                }

-                //$log.debug('NewUserModalCtrl::getUserAppsRoles: about to call getAdminAppsSimpler');

-                this.isGettingAdminApps = true;

-                applicationsService.getAdminAppsSimpler().then((apps) => {

-                    //$log.debug('NewUserModalCtrl::getUserAppsRoles: beginning of then for getAdminAppsSimpler');

-                    this.isGettingAdminApps = false;

-                    if (!apps || !apps.length) {

-                        $log.error('NewUserModalCtrl::getUserAppsRoles error: no admin apps found');

-                        return null;

-                    }

-                    //$log.debug('NewUserModalCtrl::getUserAppsRoles: then for getAdminAppsSimpler: step 2');

-                    //$log.debug('NewUserModalCtrl::getUserAppsRoles: admin apps: ', apps);

-                    this.adminApps = apps;

-                    this.dialogState = 3;

-                    this.userAppRoles = {};

-                    this.numberAppsProcessed = 0;

-                    this.isLoading = true;

-                    apps.forEach(app => {

-                        //$log.debug('NewUserModalCtrl::getUserAppsRoles: app: id: ', app.id, 'name: ',app.name);

-                        // Keep track of which app has changed, so we know which apps to update using a BE API

-                        app.isChanged = false;

-                        // Each of these specifies a state, which corresponds to a different message and style that gets displayed

-                        app.isLoading = true;

-                        app.isError = false;

-                        app.isDeleted = false;

-                        app.printNoChanges = false;

-                        app.isUpdating = false;

-                        app.isErrorUpdating = false;

-                        app.isDoneUpdating = false;

-                        app.errorMessage = "";

-                        usersService.getUserAppRoles(app.id, this.selectedUser.orgUserId).promise().then((userAppRolesResult) => {

-                            //$log.debug('NewUserModalCtrl::getUserAppsRoles: got a result for app: ',app.id,': ',app.name,': ',userAppRolesResult);

-                            app.appRoles = userAppRolesResult;

-                            app.isLoading = false;

-

-                        }).catch(err => {

-                            $log.error(err);

-                            app.isError = true;

-                            app.isLoading = false;

-                            app.errorMessage = err.headers('FEErrorString');

-                            //$log.debug('NewUserModalCtrl::getUserAppsRoles: in new-user.controller: response header: '+err.headers('FEErrorString'));

-                        }).finally(()=>{

-                            this.numberAppsProcessed++;

-                            if (this.numberAppsProcessed === this.adminApps.length) {

-                                this.isLoading = false;

-                            }

-                        });

-                    })

-                    return;

-                }).catch(err => {

-                    $log.error(err);

-                })

-

-            }

-

-            /**

-             * Update the selected user apps with the new roles.

-             * If no roles remain, set the user to inactive.

-             */

-            this.updateUserAppsRoles = () => {

-                // $log.debug('NewUserModalCtrl::updateUserAppsRoles: entering updateUserAppsRoles');

-                if(!this.selectedUser || !this.selectedUser.orgUserId || !this.adminApps){

-                    $log.error('NewUserModalCtrl::updateUserAppsRoles: mmissing arguments');

-                    return;

-                }

-                this.isSaving = true;

-                //$log.debug('NewUserModalCtrl::updateUserAppsRoles: going to update user: ' + this.selectedUser.orgUserId);

-                this.numberAppsProcessed = 0;

-                this.numberAppsSucceeded = 0;

-                this.adminApps.forEach(app => {

-                    if (app.isChanged) {

-                        //$log.debug('NewUserModalCtrl::updateUserAppsRoles: app roles have changed; going to update: id: ', app.id, '; name: ', app.name);

-                        app.isUpdating = true;

-                        var newUserAppRoles = {

-                        	orgUserId: this.selectedUser.orgUserId,

-                        	appId: app.id, 

-                        	appRoles: app.appRoles,

-                        	appName: app.name

-                        }; 

-                        usersService.updateUserAppRoles(newUserAppRoles).promise()

-                        .then(res => {

-                            //$log.debug('NewUserModalCtrl::updateUserAppsRoles: User app roles updated successfully on app: ',app.id);

-                            app.isUpdating = false;

-                            app.isDoneUpdating = true;

-                            this.numberAppsSucceeded++;

-                        }).catch(err => {

-                            $log.error(err);

-                            app.isErrorUpdating = true;

-                            confirmBoxService.showInformation(

-                            		'Failed to update the user application roles: ' + err.status)

-                            		.then(isConfirmed => {});

-                        }).finally(()=>{

-                            this.numberAppsProcessed++;

-                            if (this.numberAppsProcessed === this.adminApps.length) {

-                                this.isSaving = false; // hide the spinner

-                            }

-                            if (this.numberAppsSucceeded === this.adminApps.length) {

-                                $scope.closeThisDialog(true);//close and resolve dialog promise with true (to update the table)

-                            }

-                        })

-                    } else {

-                        //$log.debug('NewUserModalCtrl::updateUserAppsRoles: app roles have NOT changed; NOT going to update: id: ', app.id, '; name: ', app.name);

-                        app.noChanges = true;

-                        app.isError = false; //remove the error message; just show the No Changes messages

-                        this.numberAppsProcessed++;

-                        this.numberAppsSucceeded++;

-                        if (this.numberAppsProcessed === this.adminApps.length) {

-                            this.isSaving = false; // hide the spinner

-                        }

-                        if (this.numberAppsSucceeded === this.adminApps.length) {

-                            $scope.closeThisDialog(true);//close and resolve dialog promise with true (to update the table)

-                        }

-                    }

-                });

-            };

-

-            /**

-             * Navigate between dialog screens using step number: 1,2,...

-             */

-            this.navigateBack = () => {

-                if (this.dialogState === 1) {

-                    //back from 1st screen?

-                }

-                if (this.dialogState === 3) {

-                    this.dialogState = 1;

-                }

-            };

-

-            init();

-

-            $scope.$on('$stateChangeStart', e => {

-                //Disable navigation when modal is opened

-                //**Nabil - note: this will cause the history back state to be replaced with current state

-                e.preventDefault();

-            });

-        }

-    }

-    NewUserModalCtrl.$inject = ['$scope', '$log', 'usersService', 'applicationsService', 'confirmBoxService'];

-    angular.module('ecompApp').controller('NewUserModalCtrl', NewUserModalCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/20/15.
+ */
+'use strict';
+(function () {
+    class NewUserModalCtrl {
+        constructor($scope, $log, usersService, applicationsService, confirmBoxService) {
+            var extRequestValue = false;
+            let init = () => {
+                //$log.info('NewUserModalCtrl::init');
+                this.isSaving = false;
+                this.anyChanges = false;
+                this.adminApps = [];
+                this.isGettingAdminApps = false;
+                if($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState){
+                    this.selectedUser = $scope.ngDialogData.selectedUser;
+                    this.dialogState = $scope.ngDialogData.dialogState;
+                    this.isShowBack = false;
+                    if(this.dialogState === 3){
+                        this.getUserAppsRoles();
+                    }
+                }else{
+                    this.isShowBack = true;
+                    this.selectedUser = null;
+                    this.dialogState = 1;
+                }
+            };
+
+            this.appChanged = (index) => {
+                let myApp = this.adminApps[index];
+                //$log.debug('NewUserModalCtrl::appChanged: index: ', index, '; app id: ', myApp.id, 'app name: ',myApp.name);
+                myApp.isChanged = true;
+                this.anyChanges = true;
+            }
+
+            this.deleteApp = (app) => {
+                let appMessage = this.selectedUser.firstName + ' ' + this.selectedUser.lastName;
+                confirmBoxService.deleteItem(appMessage).then(isConfirmed => {
+                    if(isConfirmed){
+                        this.anyChanges = true;
+                        app.isChanged = true;
+                        app.isDeleted = true; // use this to hide the app in the display
+                        app.appRoles.forEach(function(role){
+                            role.isApplied = false;
+                        });
+                    }
+                }).catch(err => {
+                    $log.error('NewUserModalCtrl::deleteApp error: ',err);
+                    confirmBoxService.showInformation('There was a problem deleting the the applications. ' +
+                        'Please try again later. Error: ' + err.status).then(isConfirmed => {});
+                });
+            };
+
+            this.getUserAppsRoles = () => {
+                if (!this.selectedUser || !this.selectedUser.orgUserId) {
+                    $log.error('NewUserModalCtrl::getUserAppsRoles error: No user is selected');
+                    this.dialogState = 1;
+                    return;
+                }
+                //$log.debug('NewUserModalCtrl::getUserAppsRoles: about to call getAdminAppsSimpler');
+                this.isGettingAdminApps = true;
+                applicationsService.getAdminAppsSimpler().then((apps) => {
+                    //$log.debug('NewUserModalCtrl::getUserAppsRoles: beginning of then for getAdminAppsSimpler');
+                    this.isGettingAdminApps = false;
+                    if (!apps || !apps.length) {
+                        $log.error('NewUserModalCtrl::getUserAppsRoles error: no admin apps found');
+                        return null;
+                    }
+                    //$log.debug('NewUserModalCtrl::getUserAppsRoles: then for getAdminAppsSimpler: step 2');
+                    //$log.debug('NewUserModalCtrl::getUserAppsRoles: admin apps: ', apps);
+                    this.adminApps = apps;
+                    this.dialogState = 3;
+                    this.userAppRoles = {};
+                    this.numberAppsProcessed = 0;
+                    this.isLoading = true;
+                    apps.forEach(app => {
+                        //$log.debug('NewUserModalCtrl::getUserAppsRoles: app: id: ', app.id, 'name: ',app.name);
+                        // Keep track of which app has changed, so we know which apps to update using a BE API
+                        app.isChanged = false;
+                        // Each of these specifies a state, which corresponds to a different message and style that gets displayed
+                        app.isLoading = true;
+                        app.isError = false;
+                        app.isDeleted = false;
+                        app.printNoChanges = false;
+                        app.isUpdating = false;
+                        app.isErrorUpdating = false;
+                        app.isDoneUpdating = false;
+                        app.errorMessage = "";
+                        usersService.getUserAppRoles(app.id, this.selectedUser.orgUserId, extRequestValue).promise().then((userAppRolesResult) => {
+                            //$log.debug('NewUserModalCtrl::getUserAppsRoles: got a result for app: ',app.id,': ',app.name,': ',userAppRolesResult);
+                            app.appRoles = userAppRolesResult;
+                            app.isLoading = false;
+
+                        }).catch(err => {
+                            $log.error(err);
+                            app.isError = true;
+                            app.isLoading = false;
+                            app.errorMessage = err.headers('FEErrorString');
+                            //$log.debug('NewUserModalCtrl::getUserAppsRoles: in new-user.controller: response header: '+err.headers('FEErrorString'));
+                        }).finally(()=>{
+                            this.numberAppsProcessed++;
+                            if (this.numberAppsProcessed === this.adminApps.length) {
+                                this.isLoading = false;
+                            }
+                        });
+                    })
+                    return;
+                }).catch(err => {
+                    $log.error(err);
+                })
+
+            }
+
+            /**
+             * Update the selected user apps with the new roles.
+             * If no roles remain, set the user to inactive.
+             */
+            this.updateUserAppsRoles = () => {
+                // $log.debug('NewUserModalCtrl::updateUserAppsRoles: entering updateUserAppsRoles');
+                if(!this.selectedUser || !this.selectedUser.orgUserId || !this.adminApps){
+                    $log.error('NewUserModalCtrl::updateUserAppsRoles: mmissing arguments');
+                    return;
+                }
+                this.isSaving = true;
+                //$log.debug('NewUserModalCtrl::updateUserAppsRoles: going to update user: ' + this.selectedUser.orgUserId);
+                this.numberAppsProcessed = 0;
+                this.numberAppsSucceeded = 0;
+                this.adminApps.forEach(app => {
+                    if (app.isChanged) {
+                        //$log.debug('NewUserModalCtrl::updateUserAppsRoles: app roles have changed; going to update: id: ', app.id, '; name: ', app.name);
+                        app.isUpdating = true;
+                        var newUserAppRoles = {
+                        	orgUserId: this.selectedUser.orgUserId,
+                        	appId: app.id, 
+                        	appRoles: app.appRoles,
+                        	appName: app.name
+                        }; 
+                        usersService.updateUserAppRoles(newUserAppRoles).promise()
+                        .then(res => {
+                            //$log.debug('NewUserModalCtrl::updateUserAppsRoles: User app roles updated successfully on app: ',app.id);
+                            app.isUpdating = false;
+                            app.isDoneUpdating = true;
+                            this.numberAppsSucceeded++;
+                        }).catch(err => {
+                            $log.error(err);
+                            app.isErrorUpdating = true;
+                            confirmBoxService.showInformation(
+                            		'Failed to update the user application roles: ' + err.status)
+                            		.then(isConfirmed => {});
+                        }).finally(()=>{
+                            this.numberAppsProcessed++;
+                            if (this.numberAppsProcessed === this.adminApps.length) {
+                                this.isSaving = false; // hide the spinner
+                            }
+                            if (this.numberAppsSucceeded === this.adminApps.length) {
+                                $scope.closeThisDialog(true);//close and resolve dialog promise with true (to update the table)
+                            }
+                        })
+                    } else {
+                        //$log.debug('NewUserModalCtrl::updateUserAppsRoles: app roles have NOT changed; NOT going to update: id: ', app.id, '; name: ', app.name);
+                        app.noChanges = true;
+                        app.isError = false; //remove the error message; just show the No Changes messages
+                        this.numberAppsProcessed++;
+                        this.numberAppsSucceeded++;
+                        if (this.numberAppsProcessed === this.adminApps.length) {
+                            this.isSaving = false; // hide the spinner
+                        }
+                        if (this.numberAppsSucceeded === this.adminApps.length) {
+                            $scope.closeThisDialog(true);//close and resolve dialog promise with true (to update the table)
+                        }
+                    }
+                });
+            };
+
+            /**
+             * Navigate between dialog screens using step number: 1,2,...
+             */
+            this.navigateBack = () => {
+                if (this.dialogState === 1) {
+                    //back from 1st screen?
+                }
+                if (this.dialogState === 3) {
+                    this.dialogState = 1;
+                }
+            };
+
+            init();
+
+            $scope.$on('$stateChangeStart', e => {
+                //Disable navigation when modal is opened
+                //**Nabil - note: this will cause the history back state to be replaced with current state
+                e.preventDefault();
+            });
+        }
+    }
+    NewUserModalCtrl.$inject = ['$scope', '$log', 'usersService', 'applicationsService', 'confirmBoxService'];
+    angular.module('ecompApp').controller('NewUserModalCtrl', NewUserModalCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.spec.js b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.spec.js
index 8d5ac749..bdc29583 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.spec.js
@@ -1,255 +1,255 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/20/15.

- */

-'use strict';

-

-describe('Controller: NewUserModalCtrl ', () => {

-    beforeEach(module('testUtils'));

-    beforeEach(module('ecompApp'));

-

-        let promisesTestUtils;

-        //destroy $http default cache before starting to prevent the error 'default cache already exists'

-        //_promisesTestUtils_ comes from testUtils for promises resolve/reject

-        beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {

-            _CacheFactory_.destroyAll();

-            promisesTestUtils = _promisesTestUtils_;

-        }));

-

-        let newUser, $controller, $q, $rootScope, $log, $scope;

-

-        let applicationsServiceMock, usersServiceMock, confirmBoxServiceMock;

-        let deferredAdminApps, deferredUsersAccounts, deferredUsersAppRoles, deferredUsersAppRoleUpdate;

-

-        beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

-            $rootScope = _$rootScope_;

-            $q = _$q_;

-            $controller = _$controller_;

-            $log = _$log_;

-        }));

-

-    beforeEach(()=> {

-            [deferredAdminApps, deferredUsersAccounts, deferredUsersAppRoles, deferredUsersAppRoleUpdate] = [$q.defer(),$q.defer(), $q.defer(), $q.defer()];

-

-            /*applicationsServiceMock = {

-                getAdminApps: () => {

-                    var promise = () => {return deferredAdminApps.promise};

-                    var cancel = jasmine.createSpy();

-                    return {

-                        promise: promise,

-                        cancel: cancel

-                    }

-                }

-            };*/

-

-            confirmBoxServiceMock = {

-                deleteItem: () => {

-                    var promise = () => {return deferredAdminApps.promise};

-                    var cancel = jasmine.createSpy();

-                    return {

-                        promise: promise,

-                        cancel: cancel

-                    }

-                }

-            };

-

-            applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock', ['getAdminAppsSimpler']);

-            applicationsServiceMock.getAdminAppsSimpler.and.returnValue(deferredAdminApps.promise);

-

-            usersServiceMock = jasmine.createSpyObj('usersServiceMock', ['getAccountUsers','getUserAppRoles','updateUserAppsRoles']);

-

-            //applicationsServiceMock.getAdminApps().promise().and.returnValue(deferredAdminApps.promise);

-            usersServiceMock.getAccountUsers.and.returnValue(deferredUsersAccounts.promise);

-            usersServiceMock.getUserAppRoles.and.returnValue(deferredUsersAppRoles.promise);

-            usersServiceMock.updateUserAppsRoles.and.returnValue(deferredUsersAppRoleUpdate.promise);

-

-            $scope = $rootScope.$new();

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: $scope,

-                $log: $log,

-                usersService: usersServiceMock,

-                applicationsService: applicationsServiceMock,

-                confirmBoxService: confirmBoxServiceMock

-            });

-            //$scope.users = users;

-        });

-

-        /*beforeEach(()=> {

-            scope = $rootScope.$new();

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: scope,

-                $log: $log,

-                usersService: usersService,

-                applicationsService: applicationsService,

-                confirmBoxService: confirmBoxService

-            });

-        });*/

-

-

-        it('should open modal window without user when no user is selected', ()=> {

-            expect(newUser.selectedUser).toBe(null);

-        });

-

-        it('should open modal window with selectedUser apps roles when user is selected', ()=> {

-            let roles = {apps: [{id: 1, appRoles: [{id: 3, isApplied: true}]}]};

-            let someUser = {orgUserId: 'asdfjl'};

-

-           deferredUsersAppRoles.resolve(roles);

-           deferredAdminApps.resolve(roles.apps);

-

-            $scope.ngDialogData = {

-                selectedUser: someUser,

-                dialogState: 2

-            };

-

-            //inject ngDialogData to the scope controller

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: $scope,

-                $log: $log,

-                usersService: usersServiceMock,

-                applicationsService: applicationsServiceMock,

-                confirmBoxService: confirmBoxServiceMock

-            });

-

-            newUser.getUserAppsRoles();

-            $scope.$apply();

-

-            expect(newUser.selectedUser).toBe(someUser);

-            expect(newUser.adminApps).toEqual(roles.apps);

-        });

-

-        it('should push to apps order list only apps that has applied roles when initializing', () => {

-            let roles = {apps: [{appId: 13, appRoles: [{id: 3, isApplied: true}]},{appId: 20, appRoles: [{id: 3, isApplied: false}]}]};

-            let someUser = {orgUserId: 'asdfjl'};

-

-            deferredUsersAppRoles.resolve(roles);

-            //deferredAdminApps.resolve(roles.apps);

-

-            $scope.ngDialogData = {

-                selectedUser: someUser,

-                dialogState: 2

-            };

-

-            //inject ngDialogData to the scope controller

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: $scope,

-                $log: $log,

-                usersService: usersServiceMock,

-                applicationsService: applicationsServiceMock,

-                confirmBoxService: confirmBoxServiceMock

-            });

-

-            $scope.$apply();

-

-           // expect(newUser.appsOrder).toEqual([13]);

-        });

-

-        it('should push app to apps order list when applying at least one role to user from app', () => {

-            let roles = {apps: [{appId: 13, appRoles: [{id: 3, isApplied: true}]},{appId: 20, appRoles: [{id: 3, isApplied: false}]}]};

-            let someUser = {orgUserId: 'asdfjl'};

-

-            // promisesTestUtils.resolvePromise(usersService, 'getUserAppsRoles', roles);

-            deferredUsersAppRoles.resolve(roles);

-

-            $scope.ngDialogData = {

-                selectedUser: someUser,

-                dialogState: 2

-            };

-

-            //inject ngDialogData to the scope controller

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: $scope,

-                $log: $log,

-                usersService: usersServiceMock,

-                applicationsService: applicationsServiceMock,

-                confirmBoxService: confirmBoxServiceMock

-            });

-

-            //$scope.$apply();

-            //newUser.updateAppsOrder({appId: 39, appRoles: [{id: 13, isApplied: true}]});

-            $scope.$apply();

-

-          //  expect(newUser.appsOrder).toEqual([13, 39]);

-        });

-

-

-        it('should remove app from list when removing all user roles in it', () => {

-            let roles = {apps: [{appName: 'aaa', appId: 13, appRoles: [{id: 3, isApplied: true}]},{appName: 'vvv', appId: 20, appRoles: [{id: 3, isApplied: true}]}]};

-            let someUser = {orgUserId: 'asdfjl'};

-

-           // promisesTestUtils.resolvePromise(usersService, 'getUserAppsRoles', roles);

-            promisesTestUtils.resolvePromise(confirmBoxServiceMock, 'deleteItem', true);

-

-            deferredUsersAppRoles.resolve(roles);

-

-            $scope.ngDialogData = {

-                selectedUser: someUser,

-                dialogState: 2

-            };

-

-            //inject ngDialogData to the scope controller

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: $scope,

-                $log: $log,

-                usersService: usersServiceMock,

-                applicationsService: applicationsServiceMock,

-                confirmBoxService: confirmBoxServiceMock

-            });

-

-            $scope.$apply();

-            newUser.deleteApp(roles.apps[0]);

-            $scope.$apply();

-

-           // expect(newUser.appsOrder).toEqual([20]);

-        });

-

-        it('should close the modal when update changes succeeded', () => {

-            let roles = {apps: [{appName: 'aaa', appId: 13, appRoles: [{id: 3, isApplied: true}]},{appName: 'vvv', appId: 20, appRoles: [{id: 3, isApplied: true}]}]};

-            let someUser = {orgUserId: 'asdfjl'};

-            //promisesTestUtils.resolvePromise(usersServiceMock, 'getUserAppsRoles', roles);

-            //promisesTestUtils.resolvePromise(usersServiceMock, 'updateUserAppsRoles');

-            deferredUsersAppRoles.resolve(roles);

-            deferredUsersAppRoleUpdate.resolve();

-            deferredAdminApps.resolve(roles.apps);

-

-            $scope.ngDialogData = {

-                selectedUser: someUser,

-                dialogState: 2

-            };

-

-            //inject ngDialogData to the scope controller

-            newUser = $controller('NewUserModalCtrl', {

-                $scope: $scope,

-                $log: $log,

-                usersService: usersServiceMock,

-                applicationsService: applicationsServiceMock,

-                confirmBoxService: confirmBoxServiceMock

-            });

-            $scope.closeThisDialog = function(){};

-            spyOn($scope, 'closeThisDialog');

-

-            newUser.getUserAppsRoles();

-            $scope.$apply();

-            newUser.updateUserAppsRoles();

-            $scope.$apply();

-            expect($scope.closeThisDialog).toHaveBeenCalledWith(true);

-        });

-    });

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/20/15.
+ */
+'use strict';
+
+describe('Controller: NewUserModalCtrl ', () => {
+    beforeEach(module('testUtils'));
+    beforeEach(module('ecompApp'));
+
+        let promisesTestUtils;
+        //destroy $http default cache before starting to prevent the error 'default cache already exists'
+        //_promisesTestUtils_ comes from testUtils for promises resolve/reject
+        beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {
+            _CacheFactory_.destroyAll();
+            promisesTestUtils = _promisesTestUtils_;
+        }));
+
+        let newUser, $controller, $q, $rootScope, $log, $scope;
+
+        let applicationsServiceMock, usersServiceMock, confirmBoxServiceMock;
+        let deferredAdminApps, deferredUsersAccounts, deferredUsersAppRoles, deferredUsersAppRoleUpdate;
+
+        beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+            $rootScope = _$rootScope_;
+            $q = _$q_;
+            $controller = _$controller_;
+            $log = _$log_;
+        }));
+
+    beforeEach(()=> {
+            [deferredAdminApps, deferredUsersAccounts, deferredUsersAppRoles, deferredUsersAppRoleUpdate] = [$q.defer(),$q.defer(), $q.defer(), $q.defer()];
+
+            /*applicationsServiceMock = {
+                getAdminApps: () => {
+                    var promise = () => {return deferredAdminApps.promise};
+                    var cancel = jasmine.createSpy();
+                    return {
+                        promise: promise,
+                        cancel: cancel
+                    }
+                }
+            };*/
+
+            confirmBoxServiceMock = {
+                deleteItem: () => {
+                    var promise = () => {return deferredAdminApps.promise};
+                    var cancel = jasmine.createSpy();
+                    return {
+                        promise: promise,
+                        cancel: cancel
+                    }
+                }
+            };
+
+            applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock', ['getAdminAppsSimpler']);
+            applicationsServiceMock.getAdminAppsSimpler.and.returnValue(deferredAdminApps.promise);
+
+            usersServiceMock = jasmine.createSpyObj('usersServiceMock', ['getAccountUsers','getUserAppRoles','updateUserAppsRoles']);
+
+            //applicationsServiceMock.getAdminApps().promise().and.returnValue(deferredAdminApps.promise);
+            usersServiceMock.getAccountUsers.and.returnValue(deferredUsersAccounts.promise);
+            usersServiceMock.getUserAppRoles.and.returnValue(deferredUsersAppRoles.promise);
+            usersServiceMock.updateUserAppsRoles.and.returnValue(deferredUsersAppRoleUpdate.promise);
+
+            $scope = $rootScope.$new();
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: $scope,
+                $log: $log,
+                usersService: usersServiceMock,
+                applicationsService: applicationsServiceMock,
+                confirmBoxService: confirmBoxServiceMock
+            });
+            //$scope.users = users;
+        });
+
+        /*beforeEach(()=> {
+            scope = $rootScope.$new();
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: scope,
+                $log: $log,
+                usersService: usersService,
+                applicationsService: applicationsService,
+                confirmBoxService: confirmBoxService
+            });
+        });*/
+
+
+        it('should open modal window without user when no user is selected', ()=> {
+            expect(newUser.selectedUser).toBe(null);
+        });
+
+        it('should open modal window with selectedUser apps roles when user is selected', ()=> {
+            let roles = {apps: [{id: 1, appRoles: [{id: 3, isApplied: true}]}]};
+            let someUser = {orgUserId: 'asdfjl'};
+
+           deferredUsersAppRoles.resolve(roles);
+           deferredAdminApps.resolve(roles.apps);
+
+            $scope.ngDialogData = {
+                selectedUser: someUser,
+                dialogState: 2
+            };
+
+            //inject ngDialogData to the scope controller
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: $scope,
+                $log: $log,
+                usersService: usersServiceMock,
+                applicationsService: applicationsServiceMock,
+                confirmBoxService: confirmBoxServiceMock
+            });
+
+            newUser.getUserAppsRoles();
+            $scope.$apply();
+
+            expect(newUser.selectedUser).toBe(someUser);
+            expect(newUser.adminApps).toEqual(roles.apps);
+        });
+
+        it('should push to apps order list only apps that has applied roles when initializing', () => {
+            let roles = {apps: [{appId: 13, appRoles: [{id: 3, isApplied: true}]},{appId: 20, appRoles: [{id: 3, isApplied: false}]}]};
+            let someUser = {orgUserId: 'asdfjl'};
+
+            deferredUsersAppRoles.resolve(roles);
+            //deferredAdminApps.resolve(roles.apps);
+
+            $scope.ngDialogData = {
+                selectedUser: someUser,
+                dialogState: 2
+            };
+
+            //inject ngDialogData to the scope controller
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: $scope,
+                $log: $log,
+                usersService: usersServiceMock,
+                applicationsService: applicationsServiceMock,
+                confirmBoxService: confirmBoxServiceMock
+            });
+
+            $scope.$apply();
+
+           // expect(newUser.appsOrder).toEqual([13]);
+        });
+
+        it('should push app to apps order list when applying at least one role to user from app', () => {
+            let roles = {apps: [{appId: 13, appRoles: [{id: 3, isApplied: true}]},{appId: 20, appRoles: [{id: 3, isApplied: false}]}]};
+            let someUser = {orgUserId: 'asdfjl'};
+
+            // promisesTestUtils.resolvePromise(usersService, 'getUserAppsRoles', roles);
+            deferredUsersAppRoles.resolve(roles);
+
+            $scope.ngDialogData = {
+                selectedUser: someUser,
+                dialogState: 2
+            };
+
+            //inject ngDialogData to the scope controller
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: $scope,
+                $log: $log,
+                usersService: usersServiceMock,
+                applicationsService: applicationsServiceMock,
+                confirmBoxService: confirmBoxServiceMock
+            });
+
+            //$scope.$apply();
+            //newUser.updateAppsOrder({appId: 39, appRoles: [{id: 13, isApplied: true}]});
+            $scope.$apply();
+
+          //  expect(newUser.appsOrder).toEqual([13, 39]);
+        });
+
+
+        it('should remove app from list when removing all user roles in it', () => {
+            let roles = {apps: [{appName: 'aaa', appId: 13, appRoles: [{id: 3, isApplied: true}]},{appName: 'vvv', appId: 20, appRoles: [{id: 3, isApplied: true}]}]};
+            let someUser = {orgUserId: 'asdfjl'};
+
+           // promisesTestUtils.resolvePromise(usersService, 'getUserAppsRoles', roles);
+            promisesTestUtils.resolvePromise(confirmBoxServiceMock, 'deleteItem', true);
+
+            deferredUsersAppRoles.resolve(roles);
+
+            $scope.ngDialogData = {
+                selectedUser: someUser,
+                dialogState: 2
+            };
+
+            //inject ngDialogData to the scope controller
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: $scope,
+                $log: $log,
+                usersService: usersServiceMock,
+                applicationsService: applicationsServiceMock,
+                confirmBoxService: confirmBoxServiceMock
+            });
+
+            $scope.$apply();
+            newUser.deleteApp(roles.apps[0]);
+            $scope.$apply();
+
+           // expect(newUser.appsOrder).toEqual([20]);
+        });
+
+        it('should close the modal when update changes succeeded', () => {
+            let roles = {apps: [{appName: 'aaa', appId: 13, appRoles: [{id: 3, isApplied: true}]},{appName: 'vvv', appId: 20, appRoles: [{id: 3, isApplied: true}]}]};
+            let someUser = {orgUserId: 'asdfjl'};
+            //promisesTestUtils.resolvePromise(usersServiceMock, 'getUserAppsRoles', roles);
+            //promisesTestUtils.resolvePromise(usersServiceMock, 'updateUserAppsRoles');
+            deferredUsersAppRoles.resolve(roles);
+            deferredUsersAppRoleUpdate.resolve();
+            deferredAdminApps.resolve(roles.apps);
+
+            $scope.ngDialogData = {
+                selectedUser: someUser,
+                dialogState: 2
+            };
+
+            //inject ngDialogData to the scope controller
+            newUser = $controller('NewUserModalCtrl', {
+                $scope: $scope,
+                $log: $log,
+                usersService: usersServiceMock,
+                applicationsService: applicationsServiceMock,
+                confirmBoxService: confirmBoxServiceMock
+            });
+            $scope.closeThisDialog = function(){};
+            spyOn($scope, 'closeThisDialog');
+
+            newUser.getUserAppsRoles();
+            $scope.$apply();
+            newUser.updateUserAppsRoles();
+            $scope.$apply();
+            expect($scope.closeThisDialog).toHaveBeenCalledWith(true);
+        });
+    });
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html
index 5f26152b..5fec021a 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html
@@ -1,84 +1,90 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="new-user-modal">

-

-    <div class="search-users" ng-show="newUser.dialogState===1">

-

-        <search-users search-title="New User"

-                      selected-user="newUser.selectedUser"></search-users>

-

-        <div class="dialog-control">   

-            <button class="btn btn-alt btn-small" id="next-button"  ng-click="newUser.selectedUser && newUser.getUserAppsRoles()"

-                 ng-class="{disabled: !newUser.selectedUser}">Next

-            </button>

-             <button class="btn btn-alt btn-small" id="cancel-button" ng-click="closeThisDialog()">Cancel</button>

-            

-        </div>

-    </div>

-

-    <div class="user-apps-roles" ng-show="newUser.dialogState===3">

-        <div class="title"

-             ng-bind="newUser.selectedUser.firstName + ' ' + newUser.selectedUser.lastName + ' (' + newUser.selectedUser.orgUserId + ')'"></div>

-

-

-        <div class="app-roles-main">

-            <div class="app-roles-main-title">

-                <span class="left">Access and roles:</span>

-            </div>

-

-            <div class="app-roles-list">

-                <div class="app-item" ng-repeat="app in (newUser.adminApps) track by app.id"  id="app-name-{{app.name.split(' ').join('-')}}" ng-show="!app.isDeleted">

-                    <div class="app-item-left" id="div-app-name-{{app.name.split(' ').join('-')}}">{{app.name | elipsis: 27}}</div>

-                    <div class="app-item-right" id="div-app-name-dropdown-{{app.name.split(' ').join('-')}}" ng-show="!app.isError && !app.isLoading && !app.noChanges && !app.isUpdating && !app.isDoneUpdating && !app.isErrorUpdating">

-                        <multiple-select id="app-roles"

-                                         unique-data="{{$index}}"

-                                         placeholder="Select roles"

-                                         ng-model="app.appRoles"

-                                         on-change="newUser.appChanged($index)"

-                                         name-attr="roleName"

-                                         value-attr="isApplied"></multiple-select>

-                    </div>

-                    <div id="app-item-no-contact" class="app-item-right-error" ng-show="app.isError">{{app.errorMessage}}</div>

-                    <div id="app-item-contacting" class="app-item-right-contacting" ng-show="app.isLoading">Contacting application...</div>

-                    <div id="app-item-no-changes" class="app-item-right-contacting" ng-show="app.noChanges">No changes</div>

-                    <div id="app-item-no-updating" class="app-item-right-contacting" ng-show="app.isUpdating">Updating application...</div>

-                    <div id="app-item-done-updating" class="app-item-right-contacting" ng-show="app.isDoneUpdating">Finished updating application</div>

-                    <div id="app-item-cannot-update" class="app-item-right-error" ng-show="app.isErrorUpdating">Could not update application...</div>

-                    <div id="app-item-delete" class="app-item-delete" ng-click="newUser.deleteApp(app)" ng-show="!app.isLoading && !app.isError"></div>

-                    <div id='ecomp-small-spinner' class="ecomp-small-spinner" ng-show="app.isLoading"></div>

-                </div>

-            </div>

-            

-             <div class="dialog-control">

-                <span id="ecomp-save-spinner" class="ecomp-save-spinner" ng-show="newUser.isSaving || newUser.isGettingAdminApps"></span>

-                <button id="new-user-back-button" class="btn btn-alt btn-small"  ng-show="newUser.isShowBack" ng-click="newUser.navigateBack()">Back</button>

-                <button id="new-user-save-button" class="btn btn-alt btn-small" ng-click="newUser.updateUserAppsRoles()"

-                      ng-disabled="(newUser.anyChanges == false)">Save

-                </button>

-                <button id="new-user-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>

-            </div>

-

-        </div>

-

-    </div>

-

-

-

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="new-user-modal">
+
+    <div class="search-users" ng-show="newUser.dialogState===1">
+
+        <search-users search-title="New User"
+                      selected-user="newUser.selectedUser"></search-users>
+
+        <div class="dialog-control">   
+            <button class="btn btn-alt btn-small" id="next-button"  ng-click="newUser.selectedUser && newUser.getUserAppsRoles()"
+                 ng-class="{disabled: !newUser.selectedUser}">Next
+            </button>
+             <button class="btn btn-alt btn-small" id="cancel-button" ng-click="closeThisDialog()">Cancel</button>
+            
+        </div>
+    </div>
+
+    <div class="user-apps-roles" ng-show="newUser.dialogState===3">
+        <div class="title"
+             ng-bind="newUser.selectedUser.firstName + ' ' + newUser.selectedUser.lastName + ' (' + newUser.selectedUser.orgUserId + ')'"></div>
+
+
+        <div class="app-roles-main">
+            <div class="app-roles-main-title">
+                <span class="left">Access and roles:</span>
+            </div>
+
+            <div class="app-roles-list">
+                <div class="app-item" ng-repeat="app in (newUser.adminApps) track by app.id"  id="app-name-{{app.name.split(' ').join('-')}}" ng-show="!app.isDeleted">
+                    <div class="app-item-left" id="div-app-name-{{app.name.split(' ').join('-')}}">{{app.name | elipsis: 27}}</div>
+                    <div class="app-item-right" id="div-app-name-dropdown-{{app.name.split(' ').join('-')}}" ng-show="!app.isError && !app.isLoading && !app.noChanges && !app.isUpdating && !app.isDoneUpdating && !app.isErrorUpdating">
+                        <multiple-select id="app-roles"
+                                         unique-data="{{$index}}"
+                                         placeholder="Select roles"
+                                         ng-model="app.appRoles"
+                                         on-change="newUser.appChanged($index)"
+                                         name-attr="roleName"
+                                         value-attr="isApplied"></multiple-select>
+                    </div>
+                    <div id="app-item-no-contact" class="app-item-right-error" ng-show="app.isError">{{app.errorMessage}}</div>
+                    <div id="app-item-contacting" class="app-item-right-contacting" ng-show="app.isLoading">Contacting application...</div>
+                    <div id="app-item-no-changes" class="app-item-right-contacting" ng-show="app.noChanges">No changes</div>
+                    <div id="app-item-no-updating" class="app-item-right-contacting" ng-show="app.isUpdating">Updating application...</div>
+                    <div id="app-item-done-updating" class="app-item-right-contacting" ng-show="app.isDoneUpdating">Finished updating application</div>
+                    <div id="app-item-cannot-update" class="app-item-right-error" ng-show="app.isErrorUpdating">Could not update application...</div>
+                    <div id="app-item-delete" class="app-item-delete" ng-click="newUser.deleteApp(app)" ng-show="!app.isLoading && !app.isError"></div>
+                    <div id='ecomp-small-spinner' class="ecomp-small-spinner" ng-show="app.isLoading"></div>
+                </div>
+            </div>
+            
+             <div class="dialog-control">
+                <span id="ecomp-save-spinner" class="ecomp-save-spinner" ng-show="newUser.isSaving || newUser.isGettingAdminApps"></span>
+                <button id="new-user-back-button" class="btn btn-alt btn-small"  ng-show="newUser.isShowBack" ng-click="newUser.navigateBack()">Back</button>
+                <button id="new-user-save-button" class="btn btn-alt btn-small" ng-click="newUser.updateUserAppsRoles()"
+                      ng-disabled="(newUser.anyChanges == false)">Save
+                </button>
+                <button id="new-user-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+            </div>
+
+        </div>
+
+    </div>
+
+
+
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".ngdialog-close").attr('id','dialog-close');
+});
+</script>
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.controller.js b/ecomp-portal-FE-common/client/app/views/users/users.controller.js
index 1aa67601..ac223ed6 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/users/users.controller.js
@@ -1,243 +1,244 @@
-/*-

- * ================================================================================

- * 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 () {

-    class UsersCtrl {

-        constructor($log, applicationsService, usersService, confirmBoxService, $scope, ngDialog) {

-            this.$log = $log;

-            $scope.adminAppsIsNull = false;

-            $scope.appsIsDown = false;

-            $scope.noUsersInApp = false;

-            $scope.multiAppAdmin = false;

-

-            $log.info('UsersCtrl:: initializing...');

-            /**

-             * Handle all active HTTP requests

-             * activeRequests @type {Array[requests with cancel option]}

-             */

-            let activeRequests = [];

-            let clearReq = (req) => {

-                activeRequests.splice(activeRequests.indexOf(req), 1);

-            };

-

-            let init = () => {

-                this.isLoadingTable = false;

-                this.selectedApp = null;

-                this.isAppSelectDisabled = false;

-                this.selectApp = 'Select application';

-                this.adminApps = [{index: 0, id: 0, value: this.selectApp, title: this.selectApp}];

-                getAdminApps();

-

-                /*Table general configuration params*/

-                this.searchString = '';

-                /*Table data*/

-                this.usersTableHeaders = ['First Name', 'Last Name', 'User ID', 'Roles'];

-                this.accountUsers = [];

-            };

-

-            let getAdminApps = () => {

-                $log.debug('UsersCtrl::getAdminApps: - Starting getAdminApps');

-                try {

-                    this.isLoadingTable = true;

-                    let adminAppsReq = applicationsService.getAdminApps();

-                    adminAppsReq.promise().then(apps => {

-                        if (!apps || !apps.length) {

-                            $log.error('UsersCtrl::getAdminApps:  - no apps found');

-                            return null;

-                        }

-                        $log.debug('UsersCtrl::getAdminApps: Apps for this user are: ' + JSON.stringify(apps));

-                        if (apps.length >= 2) {

-                            $log.info('UsersCtrl::getAdminApps:  - more than one app for this admin:', apps.length, ' apps');

-                            $scope.multiAppAdmin = true;

-                        } else {

-                            this.adminApps = [] ;

-                        }

-                        let sortedApps = apps.sort(getSortOrder("name"));

-                        let realAppIndex = 1;

-                        for(let i=1; i<=sortedApps.length; i++){

-                            this.adminApps.push({

-                                index: realAppIndex,

-                                id: sortedApps[i - 1].id,

-                                value: sortedApps[i - 1].name,

-                                title: sortedApps[i - 1].name

-                            });

-                            realAppIndex = realAppIndex + 1;

-                        }

-

-                        $log.debug('UsersCtrl::getAdminApps: Apps for this user are: ' + JSON.stringify(this.adminApps));

-

-                        this.selectedApp = this.adminApps[0];

-                        clearReq(adminAppsReq);

-                        $scope.adminAppsIsNull = false;

-                        }).catch(e => {

-                            $scope.adminAppsIsNull = true;

-                            $log.error('UsersCtrl::getAdminApps:  - getAdminApps() failed = '+ e.message);

-                            clearReq(adminAppsReq);

-                            confirmBoxService.showInformation('There was a problem retrieving the applications. ' +

-                                'Please try again later.').then(isConfirmed => {});

-

-                    }).finally(() => {

-                            this.isLoadingTable = false;

-                        });

-                    } catch (e) {

-                        $scope.adminAppsIsNull = true;

-                        $log.error('UsersCtrl::getAdminApps:  - getAdminApps() failed!');

-                        this.isLoadingTable = false;

-                    }

-            };

-

-            let getSortOrder = (prop) => {

-                return function(a, b) {

-                    if (a[prop] > b[prop]) {

-                        return 1;

-                    } else if (a[prop] < b[prop]) {

-                        return -1;

-                    }

-                    return 0;

-                }

-            }

-

-            this.updateUsersList = () => {

-                $scope.appsIsDown = false;

-                $scope.noUsersInApp = false;

-                // $log.debug('UsersCtrl::updateUsersList: Starting updateUsersList');

-                //reset search string

-                this.searchString = '';

-                //should i disable this too in case of moving between tabs?

-                this.isAppSelectDisabled = true;

-                //activate spinner

-                this.isLoadingTable = true;

-                

-                if(this.adminApps!=null && this.selectedApp!=null){

-                	 var tempSelected = null;

-                	 for(let i=0; i<=this.adminApps.length; i++){

-                     	if(typeof this.adminApps[i] != 'undefined' && this.selectedApp.value==this.adminApps[i].value){

-                     		tempSelected=_.clone(this.adminApps[i]);

-                     	}

-                     }

-                     if(tempSelected!=null){

-                     	this.selectedApp= tempSelected;

-                     }

-                }

-               

-                if (this.selectedApp.title != this.selectApp) { // 'Select Application'

-                    usersService.getAccountUsers(this.selectedApp.id)

-                        .then(accountUsers => {

-                            $log.debug('UsersCtrl::updateUsersList accountUsers: '+ accountUsers);

-                            if (angular.isObject(accountUsers)===false) {

-                                $log.error('UsersCtrl::updateUsersList accountUsers: App is down!');

-                                $scope.appsIsDown = true;

-                            }

-                            $log.debug('UsersCtrl::updateUsersList length: '+ Object.keys(accountUsers).length);

-                            this.isAppSelectDisabled = false;

-                            this.accountUsers = accountUsers;

-                            if (angular.isObject(accountUsers) && Object.keys(accountUsers).length === 0) {

-                                $log.debug('UsersCtrl::updateUsersList accountUsers: App has no users.');

-                                $scope.noUsersInApp = true;

-                            }

-                        }).catch(err => {

-                            this.isAppSelectDisabled = false;

-                            $log.error('UsersCtrl::updateUsersList error: ' + err);

-                            confirmBoxService.showInformation('There was a problem updating the users List. ' +

-                                'Please try again later.').then(isConfirmed => {});

-                            $scope.appsIsDown = true;

-                        }).finally(() => {

-                            this.isLoadingTable = false;

-                            $scope.noAppSelected = false;

-                    });

-                } else {

-                    // this.selectedApp = this.adminApps[0];

-                    this.isAppSelectDisabled = false;

-                    this.isLoadingTable = false;

-                    $scope.noUsersInApp = false;

-                    $scope.noAppSelected = true;

-                }

-            };

-

-

-            this.openAddNewUserModal = (user) => {

-                let data = null;

-                if (user) {

-                    data = {

-                        dialogState: 3,

-                        selectedUser: {

-                            orgUserId: user.orgUserId,

-                            firstName: user.firstName,

-                            lastName: user.lastName

-                        }

-                    }

-                }

-                ngDialog.open({

-                    templateUrl: 'app/views/users/new-user-dialogs/new-user.modal.html',

-                    controller: 'NewUserModalCtrl',

-                    controllerAs: 'newUser',

-                    data: data

-                }).closePromise.then(needUpdate => {

-                    if (needUpdate.value === true) {

-                        $log.debug('UsersCtrl::openAddNewUserModal updating table data...');

-                        this.updateUsersList();

-                    }

-                });

-            };

-            

-            this.openBulkUserUploadModal = (adminApps) => {

-                let data = null;

-                if (adminApps) {

-                    data = {

-                        dialogState: 3,

-                        selectedApplication: {

-                            appid: adminApps[0].appid,

-                            appName: adminApps[0].appName

-                        }

-                    }

-                }

-                ngDialog.open({

-                    templateUrl: 'app/views/users/new-user-dialogs/bulk-user.modal.html',

-                    controller: 'BulkUserModalCtrl',

-                    controllerAs: 'bulkUser',

-                    data: data

-                }).closePromise.then(needUpdate => {

-                	this.updateUsersList();

-                });

-            };

-

-

-            $scope.$watch('users.selectedApp.value', (newVal, oldVal) => {

-                if (!newVal || _.isEqual(newVal, oldVal)) {

-                    return;

-                }

-                $log.debug('UsersCtrl::openAddNewUserModal:$watch selectedApp -> Fire with: ', newVal);

-                this.accountUsers = []; //reset table and show swirl here

-                this.updateUsersList();

-            });

-

-            $scope.$on('$destroy', () => {

-                //cancel all active requests when closing the modal

-                activeRequests.forEach(req => {

-                    req.cancel();

-                });

-            });

-

-            init();

-        }

-    }

-    UsersCtrl.$inject = ['$log', 'applicationsService', 'usersService', 'confirmBoxService', '$scope', 'ngDialog'];

-    angular.module('ecompApp').controller('UsersCtrl', UsersCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class UsersCtrl {
+        constructor($log, applicationsService, usersService, confirmBoxService, $scope, ngDialog) {
+            this.$log = $log;
+            $scope.adminAppsIsNull = false;
+            $scope.appsIsDown = false;
+            $scope.noUsersInApp = false;
+            $scope.multiAppAdmin = false;
+
+            $log.info('UsersCtrl:: initializing...');
+            /**
+             * Handle all active HTTP requests
+             * activeRequests @type {Array[requests with cancel option]}
+             */
+            let activeRequests = [];
+            let clearReq = (req) => {
+                activeRequests.splice(activeRequests.indexOf(req), 1);
+            };
+
+            let init = () => {
+                this.isLoadingTable = false;
+                this.selectedApp = null;
+                this.isAppSelectDisabled = false;
+                this.selectApp = 'Select application';
+                this.adminApps = [{index: 0, id: 0, value: this.selectApp, title: this.selectApp}];
+                getAdminApps();
+
+                /*Table general configuration params*/
+                this.searchString = '';
+                /*Table data*/
+                this.usersTableHeaders = ['First Name', 'Last Name', 'User ID', 'Roles'];
+                this.accountUsers = [];
+            };
+
+            let getAdminApps = () => {
+                $log.debug('UsersCtrl::getAdminApps: - Starting getAdminApps');
+                try {
+                    this.isLoadingTable = true;
+                    let adminAppsReq = applicationsService.getAdminApps();
+                    adminAppsReq.promise().then(apps => {
+                        if (!apps || !apps.length) {
+                            $log.error('UsersCtrl::getAdminApps:  - no apps found');
+                            return null;
+                        }
+                        $log.debug('UsersCtrl::getAdminApps: Apps for this user are: ' + JSON.stringify(apps));
+                        if (apps.length >= 2) {
+                            $log.info('UsersCtrl::getAdminApps:  - more than one app for this admin:', apps.length, ' apps');
+                            $scope.multiAppAdmin = true;
+                        } else {
+                            this.adminApps = [] ;
+                        }
+                        let sortedApps = apps.sort(getSortOrder("name"));
+                        let realAppIndex = 1;
+                        for(let i=1; i<=sortedApps.length; i++){
+                            this.adminApps.push({
+                                index: realAppIndex,
+                                id: sortedApps[i - 1].id,
+                                value: sortedApps[i - 1].name,
+                                title: sortedApps[i - 1].name
+                            });
+                            realAppIndex = realAppIndex + 1;
+                        }
+
+                        $log.debug('UsersCtrl::getAdminApps: Apps for this user are: ' + JSON.stringify(this.adminApps));
+
+                        this.selectedApp = this.adminApps[0];
+                        clearReq(adminAppsReq);
+                        $scope.adminAppsIsNull = false;
+                        }).catch(e => {
+                            $scope.adminAppsIsNull = true;
+                            $log.error('UsersCtrl::getAdminApps:  - getAdminApps() failed = '+ e.message);
+                            clearReq(adminAppsReq);
+                            confirmBoxService.showInformation('There was a problem retrieving the applications. ' +
+                                'Please try again later.').then(isConfirmed => {});
+
+                    }).finally(() => {
+                            this.isLoadingTable = false;
+                        });
+                    } catch (e) {
+                        $scope.adminAppsIsNull = true;
+                        $log.error('UsersCtrl::getAdminApps:  - getAdminApps() failed!');
+                        this.isLoadingTable = false;
+                    }
+            };
+
+            let getSortOrder = (prop) => {
+                return function(a, b) {
+                    if (a[prop] > b[prop]) {
+                        return 1;
+                    } else if (a[prop] < b[prop]) {
+                        return -1;
+                    }
+                    return 0;
+                }
+            }
+
+            this.updateUsersList = () => {
+                $scope.appsIsDown = false;
+                $scope.noUsersInApp = false;
+                // $log.debug('UsersCtrl::updateUsersList: Starting updateUsersList');
+                //reset search string
+                this.searchString = '';
+                //should i disable this too in case of moving between tabs?
+                this.isAppSelectDisabled = true;
+                //activate spinner
+                this.isLoadingTable = true;
+                
+                if(this.adminApps!=null && this.selectedApp!=null){
+                	 var tempSelected = null;
+                	 for(let i=0; i<=this.adminApps.length; i++){
+                     	if(typeof this.adminApps[i] != 'undefined' && this.selectedApp.value==this.adminApps[i].value){
+                     		tempSelected=_.clone(this.adminApps[i]);
+                     	}
+                     }
+                     if(tempSelected!=null){
+                     	this.selectedApp= tempSelected;
+                     }
+                }
+               
+                if (this.selectedApp.title != this.selectApp) { // 'Select Application'
+                    usersService.getAccountUsers(this.selectedApp.id)
+                        .then(accountUsers => {
+                            $log.debug('UsersCtrl::updateUsersList accountUsers: '+ accountUsers);
+                            if (angular.isObject(accountUsers)===false) {
+                                $log.error('UsersCtrl::updateUsersList accountUsers: App is down!');
+                                $scope.appsIsDown = true;
+                            }
+                            $log.debug('UsersCtrl::updateUsersList length: '+ Object.keys(accountUsers).length);
+                            this.isAppSelectDisabled = false;
+                            this.accountUsers = accountUsers;
+                            if (angular.isObject(accountUsers) && Object.keys(accountUsers).length === 0) {
+                                $log.debug('UsersCtrl::updateUsersList accountUsers: App has no users.');
+                                $scope.noUsersInApp = true;
+                            }
+                        }).catch(err => {
+                            this.isAppSelectDisabled = false;
+                            $log.error('UsersCtrl::updateUsersList error: ' + err);
+                            confirmBoxService.showInformation('There was a problem updating the users List. ' +
+                                'Please try again later.').then(isConfirmed => {});
+                            $scope.appsIsDown = true;
+                        }).finally(() => {
+                            this.isLoadingTable = false;
+                            $scope.noAppSelected = false;
+                    });
+                } else {
+                    // this.selectedApp = this.adminApps[0];
+                    this.isAppSelectDisabled = false;
+                    this.isLoadingTable = false;
+                    $scope.noUsersInApp = false;
+                    $scope.noAppSelected = true;
+                }
+            };
+
+
+            this.openAddNewUserModal = (user) => {
+                let data = null;
+                if (user) {
+                    data = {
+                        dialogState: 3,
+                        selectedUser: {
+                            orgUserId: user.orgUserId,
+                            firstName: user.firstName,
+                            lastName: user.lastName,
+
+                        }
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/users/new-user-dialogs/new-user.modal.html',
+                    controller: 'NewUserModalCtrl',
+                    controllerAs: 'newUser',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                    if (needUpdate.value === true) {
+                        $log.debug('UsersCtrl::openAddNewUserModal updating table data...');
+                        this.updateUsersList();
+                    }
+                });
+            };
+            
+            this.openBulkUserUploadModal = (adminApps) => {
+                let data = null;
+                if (adminApps) {
+                    data = {
+                        dialogState: 3,
+                        selectedApplication: {
+                            appid: adminApps[0].appid,
+                            appName: adminApps[0].appName
+                        }
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/users/new-user-dialogs/bulk-user.modal.html',
+                    controller: 'BulkUserModalCtrl',
+                    controllerAs: 'bulkUser',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                	this.updateUsersList();
+                });
+            };
+
+
+            $scope.$watch('users.selectedApp.value', (newVal, oldVal) => {
+                if (!newVal || _.isEqual(newVal, oldVal)) {
+                    return;
+                }
+                $log.debug('UsersCtrl::openAddNewUserModal:$watch selectedApp -> Fire with: ', newVal);
+                this.accountUsers = []; //reset table and show swirl here
+                this.updateUsersList();
+            });
+
+            $scope.$on('$destroy', () => {
+                //cancel all active requests when closing the modal
+                activeRequests.forEach(req => {
+                    req.cancel();
+                });
+            });
+
+            init();
+        }
+    }
+    UsersCtrl.$inject = ['$log', 'applicationsService', 'usersService', 'confirmBoxService', '$scope', 'ngDialog'];
+    angular.module('ecompApp').controller('UsersCtrl', UsersCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.controller.spec.js b/ecomp-portal-FE-common/client/app/views/users/users.controller.spec.js
index 96231163..0b3c0110 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/users/users.controller.spec.js
@@ -1,141 +1,141 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-// /**

-//  * Created by nnaffar on 12/17/15.

-//  */

-// 'use strict';

-//

-// describe('Controller: UsersCtrl ', () => {

-//     beforeEach(module('ecompApp'));

-//

-//     //destroy $http default cache before starting to prevent the error 'default cache already exists'

-//     beforeEach(inject((_CacheFactory_)=> {

-//         _CacheFactory_.destroyAll();

-//     }));

-//

-//     let users, $controller, $q, $rootScope, $log, $scope;

-//

-//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

-//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];

-//     }));

-//

-//     let applicationsServiceMock, usersServiceMock;

-//     let deferredAdminApps, deferredUsersAccounts;

-//     beforeEach(()=> {

-//         [deferredAdminApps, deferredUsersAccounts] = [$q.defer(), $q.defer()];

-//

-//         applicationsServiceMock = {

-//             getAdminApps: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             }

-//         };

-//

-//         usersServiceMock = jasmine.createSpyObj('usersServiceMock', ['getAccountUsers']);

-//

-//         //applicationsServiceMock.getAdminApps().promise().and.returnValue(deferredAdminApps.promise);

-//         usersServiceMock.getAccountUsers.and.returnValue(deferredUsersAccounts.promise);

-//

-//         $scope = $rootScope.$new();

-//         users = $controller('UsersCtrl', {

-//             $log: $log,

-//             applicationsService: applicationsServiceMock,

-//             usersService: usersServiceMock,

-//             $scope: $scope

-//         });

-//         $scope.users = users;

-//     });

-//

-//     //MOCKS

-//     let appsListMock = [

-//         {value: 'SSP', title: 'SSP', id: 3},

-//         {value: 'ASDC', title: 'ASDC', id: 23},

-//         {value: 'Formation', title: 'Formation', id: 223}

-//     ];

-//

-//     let usersListMock = [

-//         {

-//             "orgUserId": "nn605g",

-//             "firstName": "Nabil",

-//             "lastName": "Naffar",

-//             "roles": [

-//                 {

-//                     "roleId": 1,

-//                     "roleName": "Standard user"

-//                 },

-//                 {

-//                     "roleId": 9,

-//                     "roleName": "Super standard user"

-//                 },

-//                 {

-//                     "roleId": 2,

-//                     "roleName": "Super duper standard user"

-//                 }

-//             ]

-//         }];

-//     let secondUsersListMock = [

-//         {

-//             "orgUserId": "sadf7",

-//             "firstName": "John",

-//             "lastName": "Hall",

-//             "roles": [

-//                 {

-//                     "roleId": 1,

-//                     "roleName": "Standard user"

-//                 },

-//                 {

-//                     "roleId": 2,

-//                     "roleName": "Super duper standard user"

-//                 }

-//             ]

-//         }];

-//

-//     it('should get all user\'s administrated applications when initializing the view', ()=> {

-//         deferredAdminApps.resolve(appsListMock);

-//         deferredUsersAccounts.resolve(usersListMock);

-//         $scope.$apply();

-//         expect(users.adminApps).toEqual(appsListMock);

-//         expect(users.selectedApp).toEqual(appsListMock[0]);

-//     });

-//

-//     it('should get first application users by default when initializing the view', () => {

-//         $scope.$apply();

-//         deferredAdminApps.resolve(appsListMock);

-//         deferredUsersAccounts.resolve(usersListMock);

-//         $scope.$apply();

-//         expect(users.accountUsers).toEqual(usersListMock);

-//     });

-//

-//     it('should get application users when changing application', () => {

-//         $scope.$apply();

-//         deferredAdminApps.resolve(appsListMock);

-//         $scope.$apply();

-//

-//         users.selectedApp = appsListMock[1];

-//         deferredUsersAccounts.resolve(secondUsersListMock);

-//         $scope.$apply('users');//change app

-//

-//         expect(users.accountUsers).toEqual(secondUsersListMock);

-//     });

-// });

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+// /**
+//  * Created by nnaffar on 12/17/15.
+//  */
+// 'use strict';
+//
+// describe('Controller: UsersCtrl ', () => {
+//     beforeEach(module('ecompApp'));
+//
+//     //destroy $http default cache before starting to prevent the error 'default cache already exists'
+//     beforeEach(inject((_CacheFactory_)=> {
+//         _CacheFactory_.destroyAll();
+//     }));
+//
+//     let users, $controller, $q, $rootScope, $log, $scope;
+//
+//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];
+//     }));
+//
+//     let applicationsServiceMock, usersServiceMock;
+//     let deferredAdminApps, deferredUsersAccounts;
+//     beforeEach(()=> {
+//         [deferredAdminApps, deferredUsersAccounts] = [$q.defer(), $q.defer()];
+//
+//         applicationsServiceMock = {
+//             getAdminApps: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             }
+//         };
+//
+//         usersServiceMock = jasmine.createSpyObj('usersServiceMock', ['getAccountUsers']);
+//
+//         //applicationsServiceMock.getAdminApps().promise().and.returnValue(deferredAdminApps.promise);
+//         usersServiceMock.getAccountUsers.and.returnValue(deferredUsersAccounts.promise);
+//
+//         $scope = $rootScope.$new();
+//         users = $controller('UsersCtrl', {
+//             $log: $log,
+//             applicationsService: applicationsServiceMock,
+//             usersService: usersServiceMock,
+//             $scope: $scope
+//         });
+//         $scope.users = users;
+//     });
+//
+//     //MOCKS
+//     let appsListMock = [
+//         {value: 'SSP', title: 'SSP', id: 3},
+//         {value: 'ASDC', title: 'ASDC', id: 23},
+//         {value: 'Formation', title: 'Formation', id: 223}
+//     ];
+//
+//     let usersListMock = [
+//         {
+//             "orgUserId": "nn605g",
+//             "firstName": "Nabil",
+//             "lastName": "Naffar",
+//             "roles": [
+//                 {
+//                     "roleId": 1,
+//                     "roleName": "Standard user"
+//                 },
+//                 {
+//                     "roleId": 9,
+//                     "roleName": "Super standard user"
+//                 },
+//                 {
+//                     "roleId": 2,
+//                     "roleName": "Super duper standard user"
+//                 }
+//             ]
+//         }];
+//     let secondUsersListMock = [
+//         {
+//             "orgUserId": "sadf7",
+//             "firstName": "John",
+//             "lastName": "Hall",
+//             "roles": [
+//                 {
+//                     "roleId": 1,
+//                     "roleName": "Standard user"
+//                 },
+//                 {
+//                     "roleId": 2,
+//                     "roleName": "Super duper standard user"
+//                 }
+//             ]
+//         }];
+//
+//     it('should get all user\'s administrated applications when initializing the view', ()=> {
+//         deferredAdminApps.resolve(appsListMock);
+//         deferredUsersAccounts.resolve(usersListMock);
+//         $scope.$apply();
+//         expect(users.adminApps).toEqual(appsListMock);
+//         expect(users.selectedApp).toEqual(appsListMock[0]);
+//     });
+//
+//     it('should get first application users by default when initializing the view', () => {
+//         $scope.$apply();
+//         deferredAdminApps.resolve(appsListMock);
+//         deferredUsersAccounts.resolve(usersListMock);
+//         $scope.$apply();
+//         expect(users.accountUsers).toEqual(usersListMock);
+//     });
+//
+//     it('should get application users when changing application', () => {
+//         $scope.$apply();
+//         deferredAdminApps.resolve(appsListMock);
+//         $scope.$apply();
+//
+//         users.selectedApp = appsListMock[1];
+//         deferredUsersAccounts.resolve(secondUsersListMock);
+//         $scope.$apply('users');//change app
+//
+//         expect(users.accountUsers).toEqual(secondUsersListMock);
+//     });
+// });
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.less b/ecomp-portal-FE-common/client/app/views/users/users.less
index 7a0e9ebb..4c38b33c 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.less
+++ b/ecomp-portal-FE-common/client/app/views/users/users.less
@@ -1,25 +1,30 @@
 .users-page-main{
-  .bg_portalWhite;//white for 1702
- //.bg_portalGray;  // gray for 1610
-  position: @page-main-position;
-  top: @page-main-top;
-  left: @page-main-left;
-  right: @page-main-right;
-  bottom: @page-main-bottom;
-  padding-top: @padding-top;
-  overflow-y: @page-main-overflow-y;
-  padding-left: @padding-left-side;
-#input-table-search::-webkit-input-placeholder,
-{
-font-style: italic;
-  color:    #D7D7D7;
-}
+	  .bg_portalWhite;//white for 1702
+	 //.bg_portalGray;  // gray for 1610
+	  position: @page-main-position;
+	  top: @page-main-top;
+	  left: @page-main-left;
+	  right: @page-main-right;
+	  bottom: @page-main-bottom;
+	  padding-top: @padding-top;
+	  overflow-y: @page-main-overflow-y;
+	  padding-left: @padding-left-side;
+	#input-table-search::-webkit-input-placeholder,
+	{
+	font-style: italic;
+	  color:    #D7D7D7;
+	}
     .users-table {
-      width: @table-width;
-      //margin-left: @table-margin-left;
-      margin: 0 auto;
-
+	  width: @table-width;
+	  //margin-left: @table-margin-left;
+	  margin: 0 auto;
     }
+    
+    .table-users-div{
+	width:15px;
+	font-size:23px;
+	cursor: pointer;
+	}
 
   .error-text {
     width: 1170px;
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.tpl.html b/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
index ff3edde0..606ced6e 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
@@ -1,98 +1,98 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-main">

-    <div class="w-ecomp-main-container" >

-        <div class="users-page-main" id="page-content">

-            <div id="users-page-title" class="w-ecomp-main-view-title">

-            	 <h1 class="heading-page" >Users</h1>

-            </div>

-            <div class="users-table">

-                <div class="table-control">

-                    <div class="table-control-fields">		

-						<div class="table-dropdown">

-							<select id="dropdown1" name="dropdown1" b2b-dropdown placeholder-text="Select Application" ng-model="users.selectedApp.value">

-				            	<option b2b-dropdown-list option-repeat="d in users.adminApps" value="{{d.value}}">{{d.title}}</option>

-				            </select>

-						</div>

-						<div>

-							<input id="input-table-search" placeholder="Search" class="table-search-field" type="text" data-ng-model="users.searchString">

-						</div>

-						<button class="btn btn-alt btn-small" ng-click="users.openAddNewUserModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add User</button> 

-	                   	<button class="btn btn-alt btn-small" ng-click="users.openBulkUserUploadModal()"><i class="icon-arrows-upload" aria-hidden="true"></i>&nbsp;Bulk Upload</button>

-					</div>

-                </div>

-                <div ng-hide="users.isLoadingTable">

-                    <div class="error-text" id="div-select-app" ng-show="noAppSelected">

-                        <p class="error-help">Use the 'Select application' dropdown to see users.</p>

-                    </div>

-                    <div class="error-text"

-                         id="div-error-no-users"

-                         ng-show="noUsersInApp">

-                        <p>&nbsp;</p>

-                        <p class="error-help">

-                        	No users found. Select "Add User" to add a User to the application.

-                        </p>

-                    </div>

-                    <div class="error-text"

-                         id="div-error-app-down"

-                         ng-show="appsIsDown" >

-                        <p>&nbsp;</p>

-                        <p class="error-help">

-                        	Failed to communicate with the application.

-                            Please try again later or contact a system administrator.

-                        </p>

-                    </div>

-                </div>

-                <span class="ecomp-spinner" ng-show="users.isLoadingTable"></span>

-                <div b2b-table table-data="users.accountUsers"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">

-					<table>

-						<thead b2b-table-row type="header">

-							<tr >

-								<th b2b-table-header key="firstName" sortable="true" id="col1">First Name</th>

-								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>

-								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>

-								<th b2b-table-header key="" sortable="falses" id="col4">Roles</th>

-							</tr>

-						</thead>

-						<tbody b2b-table-row type="body" 	row-repeat="rowData in users.accountUsers">

-							<tr ng-click="users.openAddNewUserModal(rowData)">

-								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.orgUserId"></td>

-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">

-									<div class="ecomp-table-repeat" ng-repeat="role in rowData.roles" ng-bind="role.name"></div>

-								</td>							

-							</tr>

-						</tbody>

-					</table>

-				</div>

-            </div>

-            <div class="error-text"  id="div-error-403" ng-show="adminAppsIsNull==true">

-                <h1>Attention:</h1>

-                <p>&nbsp;</p>

-                <p class="error-help">It appears that you have not been added as an admin yet to an application.</p>

-                <p>&nbsp;</p>

-                <p class="error-help">Click on the Admins link to the left and check and see if you are listed as an admin for an application.

-                    If not, you can add yourself to the appropriate application.</p>

-            </div>

-        </div>

-    </div>

-

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+    <div class="w-ecomp-main-container" >
+        <div class="users-page-main" id="page-content">
+            <div id="users-page-title" class="w-ecomp-main-view-title">
+            	 <h1 class="heading-page" >Users</h1>
+            </div>
+            <div class="users-table">
+                <div class="table-control">
+                    <div class="table-control-fields">		
+						<div class="table-dropdown">
+							<select id="dropdown1" name="dropdown1" b2b-dropdown placeholder-text="Select Application" ng-model="users.selectedApp.value">
+				            	<option b2b-dropdown-list option-repeat="d in users.adminApps" value="{{d.value}}">{{d.title}}</option>
+				            </select>
+						</div>
+						<div>
+							<input id="input-table-search" placeholder="Search" class="table-search-field" type="text" data-ng-model="users.searchString">
+						</div>
+						<button class="btn btn-alt btn-small" ng-click="users.openAddNewUserModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add User</button> 
+	                   	<button class="btn btn-alt btn-small" ng-click="users.openBulkUserUploadModal()"><i class="icon-arrows-upload" aria-hidden="true"></i>&nbsp;Bulk Upload</button>
+					</div>
+                </div>
+                <div ng-hide="users.isLoadingTable">
+                    <div class="error-text" id="div-select-app" ng-show="noAppSelected">
+                        <p class="error-help">Use the 'Select application' dropdown to see users.</p>
+                    </div>
+                    <div class="error-text"
+                         id="div-error-no-users"
+                         ng-show="noUsersInApp">
+                        <p>&nbsp;</p>
+                        <p class="error-help">
+                        	No users found. Select "Add User" to add a User to the application.
+                        </p>
+                    </div>
+                    <div class="error-text"
+                         id="div-error-app-down"
+                         ng-show="appsIsDown" >
+                        <p>&nbsp;</p>
+                        <p class="error-help">
+                        	Failed to communicate with the application.
+                            Please try again later or contact a system administrator.
+                        </p>
+                    </div>
+                </div>
+                <span class="ecomp-spinner" ng-show="users.isLoadingTable"></span>
+                <div b2b-table table-data="users.accountUsers"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">
+					<table>
+						<thead b2b-table-row type="header">
+							<tr >
+								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">First Name</th>
+								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>
+								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>
+								<th b2b-table-header key="" sortable="falses" id="col4">Roles</th>
+							</tr>
+						</thead>
+						<tbody b2b-table-row type="body" 	row-repeat="rowData in users.accountUsers" class="table-users-div">
+							<tr ng-click="users.openAddNewUserModal(rowData)">
+								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.orgUserId"></td>
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
+									<div class="ecomp-table-repeat" ng-repeat="role in rowData.roles" ng-bind="role.name"></div>
+								</td>							
+							</tr>
+						</tbody>
+					</table>
+				</div>
+            </div>
+            <div class="error-text"  id="div-error-403" ng-show="adminAppsIsNull==true">
+                <h1>Attention:</h1>
+                <p>&nbsp;</p>
+                <p class="error-help">It appears that you have not been added as an admin yet to an application.</p>
+                <p>&nbsp;</p>
+                <p class="error-help">Click on the Admins link to the left and check and see if you are listed as an admin for an application.
+                    If not, you can add yourself to the appropriate application.</p>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js
index 2b0cc5cf..859b9a8e 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.js
@@ -1,350 +1,350 @@
-/*-

- * ================================================================================

- * 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 () {

-

-    class WidgetCatalogCtrl {

-        constructor(widgetsService, $log, $cookies, $scope, conf, beReaderService, widgetsCatalogService, userProfileService,dashboardService,$compile, ngDialog) {

-            

-        	$scope.editWidgetModalPopup = function(availableData, resourceType) {

-    			$scope.editData = JSON.stringify(availableData);

-    			$scope.availableDataTemp = $scope.availableData;

-    			ngDialog.open({

-    					templateUrl : 'app/views/dashboard/dashboard-widget-manage.html',

-    					controller : 'CommonWidgetController',

-    					resolve : {

-    						message : function message() {

-    							var message = {

-    								type : resourceType,

-    								availableData : $scope.editData

-    							};

-    							return message;

-    						}

-    					}

-    				}).closePromise.then(needUpdate => {	

-    					if(resourceType=='NEWS'){

-    						$scope.updateNews();

-    					}else if(resourceType=='EVENTS'){

-    						$scope.updateEvents();

-    					}else if(resourceType=='IMPORTANTRESOURCES'){

-    						$scope.updateImportRes();

-    					}

-    	          });		

-    		};

-    		

-        	$scope.WidgetCatView = [];  

-        	$scope.applyPresentationDetailsToWidgetsCatalog = function(widgetsReturned){

-        		var rowNo = 0;

-        		for (var i = 0; i < widgetsReturned.length; i++) {

-        		$scope.WidgetCatView[i] = {

-        		sizeX : 2,

-        		sizeY : 2,

-        		headerText:'',

-        		widgetIdentifier : '',

-        		url : '',

-        		widgetid: '',

-        		attrb:'',

-        		select: false,

-        		};

-        		$scope.WidgetCatView[i].widgetid = widgetsReturned[i].id;

-        		$scope.WidgetCatView[i].headerText = widgetsReturned[i].headerName;

-

-        		if(widgetsReturned[i].headerName === 'widget-news'){

-        		$scope.WidgetCatView[i].widgetIdentifier = 'NEWS';

-        		}

-        		else

-        		if(widgetsReturned[i].headerName === 'widget-resources'){

-        		$scope.WidgetCatView[i].widgetIdentifier = 'IMPORTANTRESOURCES';

-        		}

-        		else

-        		if(widgetsReturned[i].headerName === 'widget-events'){

-        		$scope.WidgetCatView[i].widgetIdentifier = 'EVENTS';

-        		}

-

-        		$scope.WidgetCatView[i].url = widgetsReturned[i].url;

-        		$scope.WidgetCatView[i].attrb = widgetsReturned[i].attrs;

-        		$scope.WidgetCatView[i].select = widgetsReturned[i].select;        		

-        		}

-

-        		$scope.widgetViewData = $scope.WidgetCatView;

-        		

-        		}

-        	

-        	/** Widget code starts */

-            let getUserWidgets = (loginName) => {

-            	 

-            	 this.isCommError = false;

-            	 var conf = this.conf;

-        		 widgetsCatalogService.getUserWidgets(loginName).then(res => {

-        			 

-        			 if(!(res instanceof Array)){

-        				this.isCommError = true;

-        				return;

-        			 }

-            		 for(var i = 0; i < res.length; i++){	

-            			 var widget_id = res[i][0];

-            			 var widget_name = res[i][1];

-            			 let url = this.conf.api.widgetCommon + "/" + widget_id + "/framework.js";

-            			 $scope.widgetsList.push({

-			    			   id: widget_id,

-			                   name: widget_name,

-			                   headerName: widget_name,

-			                   url: url,

-			                   attrs: [{attr: 'data-' + widget_id, value: ''}],

-			                   status: res[i][4],

-			                   select: (res[i][4] == 'S' || res[i][4] === null) ? true : false

-			    		 }); 

-            			 var script = document

-         				 .createElement('script');

-         				 script.src = url;

-         				 script.async = true;

-         				 var entry = document

-         				 	.getElementsByTagName('script')[0];

-         				 entry.parentNode

-         				 	.insertBefore(script, entry);

-            		 }

-            		 $scope.applyPresentationDetailsToWidgetsCatalog($scope.widgetsList);

-                 }).catch(err => {

-                     $log.error('WidgetCatalogCtrl::getUserWidgets caught error', err);

-                 }).finally(()=> {

-                	 

-                 });

-            };

-            

-            let init = () => {

-            	userProfileService.getUserProfile()

-                .then(profile=> {

-                    // $log.info('WidgetCatalogCtrl::getUserProfile: ',

-					// profile);

-                    $scope.orgUserId = profile.orgUserId;

-                    $scope.widgetsViewData = [];

-                    $scope.widgetsView = [];    

-                	getUserWidgets($scope.orgUserId);  

-                });

-                this.conf = conf;

-                $scope.widgetsList = [];

-            };

-            

-            /** Widget code ends */

-          

-            $scope.activateThis = function(ele){

-   			 	$compile(ele.contents())($scope);

-   			 	$scope.$apply();

-            };

-            $scope.setCommonWidget = function() {

-            	/* News Events Resources */

-                var widgetLength = ($scope.widgetsViewData==null || $scope.widgetsViewData.length==0) ? 0:$scope.widgetsViewData.length;

-                $scope.widgetsViewData[widgetLength] = {

-                        sizeX: 2,

-                        sizeY: 2,

-                        headerText: 'News',

-                        width: '',

-                        height: '',

-                        url: '',

-                        selected:true

-                    };

-                $scope.widgetsViewData[widgetLength+1] = {

-                        sizeX: 2,

-                        sizeY: 2,

-                        headerText: 'Calendar Events',

-                        width: '',

-                        height: '',

-                        url: '',

-                        selected:true

-                    };

-                $scope.widgetsViewData[widgetLength+2] = {

-                        sizeX: 2,

-                        sizeY: 2,

-                        headerText: 'Resources',

-                        width: '',

-                        height: '',

-                        url: '',

-                        selected:true

-                    };

-                

-                /* Setting News data */

-        		$scope.newsData = [];

-        		$scope.updateNews = function() {

-        			$scope.newsData.length=0;

-        			dashboardService.getCommonWidgetData('NEWS').then(function(res) {

-        				// $log.info(res.message);

-        				var newsDataJsonArray = res.response.items;

-        				for (var i = 0; i < newsDataJsonArray.length; i++) {

-        					$scope.newsData.push(newsDataJsonArray[i]);

-        				}

-        			})['catch'](function(err) {

-        				$log.error('dashboard controller: failed to get news list', err);        				

-        			});

-        		}

-        		$scope.updateNews();

-        		/* Setting Events data */

-

-        		$scope.eventData = [];

-        		

-        		$scope.updateEvents = function() {

-        			$scope.eventData.length=0;

-        			dashboardService.getCommonWidgetData('EVENTS').then(function(res) {

-        				var eventDataJsonArray = res.response.items;	

-        				for (var i = 0; i < eventDataJsonArray.length; i++) {

-        					if(eventDataJsonArray[i].eventDate !=null) {

-        						// yyyy-mm-dd

-        						eventDataJsonArray[i].year = eventDataJsonArray[i].eventDate.substring(2,4);

-        						eventDataJsonArray[i].mon  = eventDataJsonArray[i].eventDate.substring(5,7);

-        						eventDataJsonArray[i].day  = eventDataJsonArray[i].eventDate.substring(8,10);

-        					}

-        					$scope.eventData.push(eventDataJsonArray[i]);

-        				}

-        			})['catch'](function(err) {

-        				$log.error('dashboard controller: failed to get Events list', err);	

-        			});

-        		}

-        		$scope.updateEvents();

-        		/* Setting Important Resources data */

-

-        		$scope.importResData = [];

-        		$scope.updateImportRes = function() {

-        			$scope.importResData.length=0;

-        			dashboardService.getCommonWidgetData('IMPORTANTRESOURCES').then(

-        					function(res) {

-        						// $log.info(res);

-        						var importResDataJSONArray = res.response.items;

-        						for (var i = 0; i < importResDataJSONArray.length; i++) {

-        							$scope.importResData.push(importResDataJSONArray[i]);

-        						}

-        					})['catch'](function(err) {

-        				$log.error('dashboard controller: failed to get resources list...', err);

-        			});

-        		}

-        		$scope.updateImportRes();

-                

-                /** ******End hardcoded news events and resources*************** */

-        		

-            }

-            

-        	$scope.newsGridsterItem = {

-        			headerText : 'Test',

-        			subHeaderText : ''

-        	};

-        	

-        	$scope.newsGridsterItem = {

-    			headerText : 'News',

-    			subHeaderText : ''

-    		};

-            

-            $scope.eventsGridsterItem = {

-            	headerText : 'Events',

-        		subHeaderText : ''

-        	};

-

-        	$scope.impoResGridsterItem = {

-        		headerText : 'Resources',

-        		subHeaderText : ''

-        	};

-        	

-            this.gridsterOpts = {

-                columns: 6,

-                colWidth: 190,

-                rowHeight: 190,

-                margins: [20, 20],

-                outerMargin: true,

-                pushing: true,

-                floating: true,

-                swapping: true,

-                draggable: {

-                	handle: '.icon-content-gridguide'

-                }

-            };

-            

-            // Run this function when user clicks on checkbox.

-    		$scope.storeSelection = function(widget) {

-    			

-    			// not needed as only 'SHOW' and 'HIDE' status_cd is expected from the micro service now

-    			/*var pendingFlag = false;    			

-    			if(widget.access) 

-    				pendingFlag = false;

-    			else

-    				pendingFlag =  widget.pending;	*/	

-    			

-    			var appData = { 

-    					widgetId: widget.widgetid,

-    					select  : widget.select,

-    				//	pending : pendingFlag	

-    			};

-

-    			widgetsCatalogService.updateWidgetCatalog(appData).then(

-    				function(result) {

-    					// $log.debug('CatalogCtrl:storeSelection result is ', result);

-    				})['catch'](function(err) {

-    					$log.error('CatalogCtrl:storeSelection: exception: ', err);

-    				});

-    		};

-

-            init();

-        }

-    }

-    

-    

-    

-    WidgetCatalogCtrl.$inject = ['widgetsService', '$log', '$cookies', '$scope', 'conf', 'beReaderService', 'widgetsCatalogService', 'userProfileService','dashboardService','$compile','ngDialog'];

-    angular.module('ecompApp').controller('WidgetCatalogCtrl', WidgetCatalogCtrl);

-

-    angular.module('ecompApp').constant('refreshInterval', '30000');

-

-    angular.module('ecompApp').directive('refreshIframe', ['$interval', 'refreshInterval', function ($interval, refreshInterval) {

-

-        function link(scope, element, attrs) {

-            var timeoutId;

-

-            function updateIframe() {

-                if(attrs.isEnlarged == "false")

-                {

-                    element.attr('src', element.attr('src'));

-                }

-            }

-

-            element.on('$destroy', function () {

-                $interval.cancel(timeoutId);

-            });

-

-            // start the UI update process; save the timeoutId for cancelling

-            /*

-			 * timeoutId = $interval(function () { updateIframe(); // update DOM },

-			 * refreshInterval);

-			 */

-        }

-

-        return {

-            link: link

-        };

-    } ]);

-

-})();

-

-

-app.directive('dynAttr', function() {

-    return {

-        scope: { list: '=dynAttr' },

-        link: function(scope, elem, attrs){

-            for(var attr in scope.list){

-                elem.attr(scope.list[attr].attr, scope.list[attr].value);   

-            }

-        }

-    };

-});	 

+/*-
+ * ================================================================================
+ * 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 () {
+
+    class WidgetCatalogCtrl {
+        constructor(widgetsService, $log, $cookies, $scope, conf, beReaderService, widgetsCatalogService, userProfileService,dashboardService,$compile, ngDialog) {
+            
+        	$scope.editWidgetModalPopup = function(availableData, resourceType) {
+    			$scope.editData = JSON.stringify(availableData);
+    			$scope.availableDataTemp = $scope.availableData;
+    			ngDialog.open({
+    					templateUrl : 'app/views/dashboard/dashboard-widget-manage.html',
+    					controller : 'CommonWidgetController',
+    					resolve : {
+    						message : function message() {
+    							var message = {
+    								type : resourceType,
+    								availableData : $scope.editData
+    							};
+    							return message;
+    						}
+    					}
+    				}).closePromise.then(needUpdate => {	
+    					if(resourceType=='NEWS'){
+    						$scope.updateNews();
+    					}else if(resourceType=='EVENTS'){
+    						$scope.updateEvents();
+    					}else if(resourceType=='IMPORTANTRESOURCES'){
+    						$scope.updateImportRes();
+    					}
+    	          });		
+    		};
+    		
+        	$scope.WidgetCatView = [];  
+        	$scope.applyPresentationDetailsToWidgetsCatalog = function(widgetsReturned){
+        		var rowNo = 0;
+        		for (var i = 0; i < widgetsReturned.length; i++) {
+        		$scope.WidgetCatView[i] = {
+        		sizeX : 2,
+        		sizeY : 2,
+        		headerText:'',
+        		widgetIdentifier : '',
+        		url : '',
+        		widgetid: '',
+        		attrb:'',
+        		select: false,
+        		};
+        		$scope.WidgetCatView[i].widgetid = widgetsReturned[i].id;
+        		$scope.WidgetCatView[i].headerText = widgetsReturned[i].headerName;
+
+        		if(widgetsReturned[i].headerName === 'widget-news'){
+        		$scope.WidgetCatView[i].widgetIdentifier = 'NEWS';
+        		}
+        		else
+        		if(widgetsReturned[i].headerName === 'widget-resources'){
+        		$scope.WidgetCatView[i].widgetIdentifier = 'IMPORTANTRESOURCES';
+        		}
+        		else
+        		if(widgetsReturned[i].headerName === 'widget-events'){
+        		$scope.WidgetCatView[i].widgetIdentifier = 'EVENTS';
+        		}
+
+        		$scope.WidgetCatView[i].url = widgetsReturned[i].url;
+        		$scope.WidgetCatView[i].attrb = widgetsReturned[i].attrs;
+        		$scope.WidgetCatView[i].select = widgetsReturned[i].select;        		
+        		}
+
+        		$scope.widgetViewData = $scope.WidgetCatView;
+        		
+        		}
+        	
+        	/** Widget code starts */
+            let getUserWidgets = (loginName) => {
+            	 
+            	 this.isCommError = false;
+            	 var conf = this.conf;
+        		 widgetsCatalogService.getUserWidgets(loginName).then(res => {
+        			 
+        			 if(!(res instanceof Array)){
+        				this.isCommError = true;
+        				return;
+        			 }
+            		 for(var i = 0; i < res.length; i++){	
+            			 var widget_id = res[i][0];
+            			 var widget_name = res[i][1];
+            			 let url = this.conf.api.widgetCommon + "/" + widget_id + "/framework.js";
+            			 $scope.widgetsList.push({
+			    			   id: widget_id,
+			                   name: widget_name,
+			                   headerName: widget_name,
+			                   url: url,
+			                   attrs: [{attr: 'data-' + widget_id, value: ''}],
+			                   status: res[i][4],
+			                   select: (res[i][4] == 'S' || res[i][4] === null) ? true : false
+			    		 }); 
+            			 var script = document
+         				 .createElement('script');
+         				 script.src = url;
+         				 script.async = true;
+         				 var entry = document
+         				 	.getElementsByTagName('script')[0];
+         				 entry.parentNode
+         				 	.insertBefore(script, entry);
+            		 }
+            		 $scope.applyPresentationDetailsToWidgetsCatalog($scope.widgetsList);
+                 }).catch(err => {
+                     $log.error('WidgetCatalogCtrl::getUserWidgets caught error', err);
+                 }).finally(()=> {
+                	 
+                 });
+            };
+            
+            let init = () => {
+            	userProfileService.getUserProfile()
+                .then(profile=> {
+                    // $log.info('WidgetCatalogCtrl::getUserProfile: ',
+					// profile);
+                    $scope.orgUserId = profile.orgUserId;
+                    $scope.widgetsViewData = [];
+                    $scope.widgetsView = [];    
+                	getUserWidgets($scope.orgUserId);  
+                });
+                this.conf = conf;
+                $scope.widgetsList = [];
+            };
+            
+            /** Widget code ends */
+          
+            $scope.activateThis = function(ele){
+   			 	$compile(ele.contents())($scope);
+   			 	$scope.$apply();
+            };
+            $scope.setCommonWidget = function() {
+            	/* News Events Resources */
+                var widgetLength = ($scope.widgetsViewData==null || $scope.widgetsViewData.length==0) ? 0:$scope.widgetsViewData.length;
+                $scope.widgetsViewData[widgetLength] = {
+                        sizeX: 2,
+                        sizeY: 2,
+                        headerText: 'News',
+                        width: '',
+                        height: '',
+                        url: '',
+                        selected:true
+                    };
+                $scope.widgetsViewData[widgetLength+1] = {
+                        sizeX: 2,
+                        sizeY: 2,
+                        headerText: 'Calendar Events',
+                        width: '',
+                        height: '',
+                        url: '',
+                        selected:true
+                    };
+                $scope.widgetsViewData[widgetLength+2] = {
+                        sizeX: 2,
+                        sizeY: 2,
+                        headerText: 'Resources',
+                        width: '',
+                        height: '',
+                        url: '',
+                        selected:true
+                    };
+                
+                /* Setting News data */
+        		$scope.newsData = [];
+        		$scope.updateNews = function() {
+        			$scope.newsData.length=0;
+        			dashboardService.getCommonWidgetData('NEWS').then(function(res) {
+        				// $log.info(res.message);
+        				var newsDataJsonArray = res.response.items;
+        				for (var i = 0; i < newsDataJsonArray.length; i++) {
+        					$scope.newsData.push(newsDataJsonArray[i]);
+        				}
+        			})['catch'](function(err) {
+        				$log.error('dashboard controller: failed to get news list', err);        				
+        			});
+        		}
+        		$scope.updateNews();
+        		/* Setting Events data */
+
+        		$scope.eventData = [];
+        		
+        		$scope.updateEvents = function() {
+        			$scope.eventData.length=0;
+        			dashboardService.getCommonWidgetData('EVENTS').then(function(res) {
+        				var eventDataJsonArray = res.response.items;	
+        				for (var i = 0; i < eventDataJsonArray.length; i++) {
+        					if(eventDataJsonArray[i].eventDate !=null) {
+        						// yyyy-mm-dd
+        						eventDataJsonArray[i].year = eventDataJsonArray[i].eventDate.substring(2,4);
+        						eventDataJsonArray[i].mon  = eventDataJsonArray[i].eventDate.substring(5,7);
+        						eventDataJsonArray[i].day  = eventDataJsonArray[i].eventDate.substring(8,10);
+        					}
+        					$scope.eventData.push(eventDataJsonArray[i]);
+        				}
+        			})['catch'](function(err) {
+        				$log.error('dashboard controller: failed to get Events list', err);	
+        			});
+        		}
+        		$scope.updateEvents();
+        		/* Setting Important Resources data */
+
+        		$scope.importResData = [];
+        		$scope.updateImportRes = function() {
+        			$scope.importResData.length=0;
+        			dashboardService.getCommonWidgetData('IMPORTANTRESOURCES').then(
+        					function(res) {
+        						// $log.info(res);
+        						var importResDataJSONArray = res.response.items;
+        						for (var i = 0; i < importResDataJSONArray.length; i++) {
+        							$scope.importResData.push(importResDataJSONArray[i]);
+        						}
+        					})['catch'](function(err) {
+        				$log.error('dashboard controller: failed to get resources list...', err);
+        			});
+        		}
+        		$scope.updateImportRes();
+                
+                /** ******End hardcoded news events and resources*************** */
+        		
+            }
+            
+        	$scope.newsGridsterItem = {
+        			headerText : 'Test',
+        			subHeaderText : ''
+        	};
+        	
+        	$scope.newsGridsterItem = {
+    			headerText : 'News',
+    			subHeaderText : ''
+    		};
+            
+            $scope.eventsGridsterItem = {
+            	headerText : 'Events',
+        		subHeaderText : ''
+        	};
+
+        	$scope.impoResGridsterItem = {
+        		headerText : 'Resources',
+        		subHeaderText : ''
+        	};
+        	
+            this.gridsterOpts = {
+                columns: 6,
+                colWidth: 190,
+                rowHeight: 190,
+                margins: [20, 20],
+                outerMargin: true,
+                pushing: true,
+                floating: true,
+                swapping: true,
+                draggable: {
+                	handle: '.icon-content-gridguide'
+                }
+            };
+            
+            // Run this function when user clicks on checkbox.
+    		$scope.storeSelection = function(widget) {
+    			
+    			// not needed as only 'SHOW' and 'HIDE' status_cd is expected from the micro service now
+    			/*var pendingFlag = false;    			
+    			if(widget.access) 
+    				pendingFlag = false;
+    			else
+    				pendingFlag =  widget.pending;	*/	
+    			
+    			var appData = { 
+    					widgetId: widget.widgetid,
+    					select  : widget.select,
+    				//	pending : pendingFlag	
+    			};
+
+    			widgetsCatalogService.updateWidgetCatalog(appData).then(
+    				function(result) {
+    					// $log.debug('CatalogCtrl:storeSelection result is ', result);
+    				})['catch'](function(err) {
+    					$log.error('CatalogCtrl:storeSelection: exception: ', err);
+    				});
+    		};
+
+            init();
+        }
+    }
+    
+    
+    
+    WidgetCatalogCtrl.$inject = ['widgetsService', '$log', '$cookies', '$scope', 'conf', 'beReaderService', 'widgetsCatalogService', 'userProfileService','dashboardService','$compile','ngDialog'];
+    angular.module('ecompApp').controller('WidgetCatalogCtrl', WidgetCatalogCtrl);
+
+    angular.module('ecompApp').constant('refreshInterval', '30000');
+
+    angular.module('ecompApp').directive('refreshIframe', ['$interval', 'refreshInterval', function ($interval, refreshInterval) {
+
+        function link(scope, element, attrs) {
+            var timeoutId;
+
+            function updateIframe() {
+                if(attrs.isEnlarged == "false")
+                {
+                    element.attr('src', element.attr('src'));
+                }
+            }
+
+            element.on('$destroy', function () {
+                $interval.cancel(timeoutId);
+            });
+
+            // start the UI update process; save the timeoutId for cancelling
+            /*
+			 * timeoutId = $interval(function () { updateIframe(); // update DOM },
+			 * refreshInterval);
+			 */
+        }
+
+        return {
+            link: link
+        };
+    } ]);
+
+})();
+
+
+app.directive('dynAttr', function() {
+    return {
+        scope: { list: '=dynAttr' },
+        link: function(scope, elem, attrs){
+            for(var attr in scope.list){
+                elem.attr(scope.list[attr].attr, scope.list[attr].value);   
+            }
+        }
+    };
+});	 
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js
index 77659d93..5c42f4ce 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.controller.spec.js
@@ -1,20 +1,20 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html
index 1b77a28c..84bf0f57 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html
@@ -1,76 +1,76 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-main">

-	<div class="w-ecomp-main-container">

-		<div class="widget-catalog" id="widget-page-content">

-			<div id="title" class="w-ecomp-main-view-title">

-				<h1 class="heading-page">Widget Catalog</h1>

-			</div>

-			<div class="widget-centerAlignment">

-				<div class="portals-list">

-					<div ng-show="widgetCatalog.isCommError">Failed to

-						communicate with the widget microservice.</div>

-					<div id="widgets" class="information-section"

-						ng-hide="widgetCatalog.isCommError">

-						<div id="news-gridster-container"

-							class="gridster-container override_background">

-							<div class="content" gridster="widgetCatalog.gridsterOpts">

-								<ul>

-									<li gridster-item="widget" ng-repeat="widget in widgetViewData">

-										<div class="box">

-											<div class="box-header">

-												<i style="cursor: move;" class="icon-content-gridguide"></i>

-												<h3>{{ widget.headerText}}</h3>

-												<div class="form-row">

-													<label id="widget-checkbox-label" class="checkbox"> <input type="checkbox"

-														id="{{widget.headerText.split(' ').join('-')}}-checkbox"

-														ng-model="widget.select"

-														ng-change="storeSelection(widget)"> <i

-														class="skin"></i>

-													</label>

-												</div>

-											</div>

-											<div class="box-content">

-												<div dyn-attr="widget.attrb"></div>

-											</div>

-										</div>

-									</li>

-								</ul>

-							</div>

-						</div>

-					</div>

-					<div ng-show="widgetCatalog.isEnlarged">

-						<div id="widgets-button-enlarge-close"

-							class="enlarge-close-button"

-							ng-click="widgetCatalog.isEnlarged=false">X</div>

-						<iframe id="iframe-widget-enlarge-close"

-							ng-src="{{widgetCatalog.enlargeURL | trusted}}"

-							class="enlarge-content"> </iframe>

-					</div>

-				</div>

-			</div>

-

-			<div id="widgets-disclaimer" class="w-ecomp-main-disclaimer">

-				To request access to an application widget, please visit the <a

-					ng-href="getAccess">Get Access</a> page.

-			</div>

-		</div>

-	</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+	<div class="w-ecomp-main-container">
+		<div class="widget-catalog" id="widget-page-content">
+			<div id="title" class="w-ecomp-main-view-title">
+				<h1 class="heading-page">Widget Catalog</h1>
+			</div>
+			<div class="widget-centerAlignment">
+				<div class="portals-list">
+					<div ng-show="widgetCatalog.isCommError">Failed to
+						communicate with the widget microservice.</div>
+					<div id="widgets" class="information-section"
+						ng-hide="widgetCatalog.isCommError">
+						<div id="news-gridster-container"
+							class="gridster-container override_background">
+							<div class="content" gridster="widgetCatalog.gridsterOpts">
+								<ul>
+									<li gridster-item="widget" ng-repeat="widget in widgetViewData">
+										<div class="box">
+											<div class="box-header">
+												<i style="cursor: move;" class="icon-content-gridguide"></i>
+												<h3>{{ widget.headerText}}</h3>
+												<div class="form-row">
+													<label id="widget-checkbox-label" class="checkbox"> <input type="checkbox"
+														id="{{widget.headerText.split(' ').join('-')}}-checkbox"
+														ng-model="widget.select"
+														ng-change="storeSelection(widget)"> <i
+														class="skin"></i>
+													</label>
+												</div>
+											</div>
+											<div class="box-content">
+												<div dyn-attr="widget.attrb"></div>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+					<div ng-show="widgetCatalog.isEnlarged">
+						<div id="widgets-button-enlarge-close"
+							class="enlarge-close-button"
+							ng-click="widgetCatalog.isEnlarged=false">X</div>
+						<iframe id="iframe-widget-enlarge-close"
+							ng-src="{{widgetCatalog.enlargeURL | trusted}}"
+							class="enlarge-content"> </iframe>
+					</div>
+				</div>
+			</div>
+
+			<div id="widgets-disclaimer" class="w-ecomp-main-disclaimer">
+				To request access to an application widget, please visit the <a
+					ng-href="getAccess">Get Access</a> page.
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
index 0a9dd12c..ad88c02b 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
@@ -1,381 +1,381 @@
-/*-

- * ================================================================================

- * 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 () {

-    class WidgetOnboardingDetailsModalCtrl {

-        constructor($scope, $log, $interval, applicationsService, adminsService, microserviceService, widgetsCatalogService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {

-     	    

-    	    this.appUpdate = function(){

-    	    	this.hasSelectedApp = false;

-    	    	this.appCounter = 0;

-    	    	for(var i = 0; i < this.availableApps.length; i++){

-    	    		if(this.availableApps[i].isSelected){

-    	    			this.appCounter++;

-    	    			if(!this.hasSelectedApp)

-    	    				this.hasSelectedApp = true;

-    	    		}

-    	    		if(this.availableApps[i].isSelected

-    	    		&& this.availableApps[i].roles.length == 0){

-    	    			var index = i;

-    	    			this.availableRoles = [];    

-    	    			adminsService.getRolesByApp(this.availableApps[i].id).then(roles => {

- 				    	   for(var i = 0; i < roles.length; i++){

- 				    		   this.availableRoles.push({

- 				    			   id: roles[i].id,

- 				                   name: roles[i].name,

- 				                   isSelected: false,

- 				    		   }); 

- 				    	   }

- 				    	   this.availableApps[index].roles = this.availableRoles;

-    	    			});

-    	    		}

-			    }

-    	    	this.allRoleSelected = true;

-    	    	this.checkRoleSelected();

-    	    }

-    	    

-    	    this.roleUpdate = function(app){

-	    		this.allRoleSelected = true;

-    	    	for(var i = 0; i < app.roles.length; i++){

-    	    		if(app.roles[i].isSelected){

-    	    			app.roleSelected = true;

-    	    			this.checkRoleSelected();

-    	    			return;

-    	    		}

-    	    	}

-	    		app.roleSelected = false;

-	    		this.checkRoleSelected();

-    	    }

-    	    

-    	    this.checkRoleSelected = function(){

-    	    	for(var i = 0; i < this.availableApps.length; i++){

-            		if(this.availableApps[i].isSelected

-            		&& !this.availableApps[i].roleSelected){

-            			this.allRoleSelected = false;

-            			return;

-            		}

-            	}

-    	    }

-    	    	   

-    	    this.getAppName = function(appId){

-    	    	 for(var i = 0; i < this.availableApps.length; i++){

-    	    		 if(this.availableApps[i].id == appId){

-    	    			 return this.availableApps[i].name;

-    	    		 }

-    	    	 }

-    	    }

-    	    

-            let newWidgetModel = {

-                name: null,

-                roleId: null,

-                roleName: null,

-                appId: null,

-                appName: null,

-                url: null,

-                showAppOptions: false,

-                showRoleOptions: false,

-                hasSelectedApp: false

-            };

-          

-            let getAvailableApps = () => {           	

-            	

-            	if(this.isEditMode == false){	

-	            	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

-	            		this.availableApps=[];

-	            		for(var i=0;i<apps.length;i++) {

-	                        if (!apps[i].restrictedApp) {

-                            this.availableApps.push({

-                                id: apps[i].id,

-                                name: apps[i].name,

-                                roles: [],

-                                roleSelected: false,

-                                isSelected: false,

-                            });

-	                        }

-	                    }

-	                }).catch(err => {

-	                    $log.error(err);

-	                });

-            	}

-            	else if(this.isEditMode == true){

-            		if(this.widget.allowAllUser == "Y")

-            			this.widget.allUser = true;

-            		applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

-	            		this.availableApps=[];

-	            		let selectedApps = {};

-	            		var availableApps = this.availableApps;  

-	            		this.allRoleSelected = true;

-	            		for(var i=0; i < this.widget.widgetRoles.length; i++){

-	            			if(selectedApps[this.widget.widgetRoles[i].app.appId] != undefined)

-	            				selectedApps[this.widget.widgetRoles[i].app.appId] += this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";"; 

-	            			else{

-	            				selectedApps[this.widget.widgetRoles[i].app.appId] = this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";";        		

-	            				this.appCounter++;

-	            			}

-	            		}         		

-	            		apps.forEach(function(app, index){

-		    				availableApps.push({

-		                       id: app.id,

-		                       name: app.name,

-		                       roles: [],

-		                       roleSelected: false,

-		                       isSelected: false,

-		    				});

-		    				if(selectedApps[app.id] != undefined){

-			    				adminsService.getRolesByApp(app.id).then(roles => {

-		        				var role = selectedApps[app.id].split(';');

-			            		var selectedRoles = [];

-			            		var n = 0;

-			            		while((n+1) < role.length){

-			                		selectedRoles.push({

-						    			   id: role[n++],

-						                   name: role[n++],

-						                   isSelected: true,

-						    		});

-			            		}					

-			    				for(var m = 0; m < roles.length; m++){

-						    		var hasSelected = true;

-			    					for(var n = 0; n < selectedRoles.length; n++){

-			    						if(selectedRoles[n].id == roles[m].id){

-			    							hasSelected = false;

-						    				break;

-						    			}

-						    		}

-						    		if(hasSelected){

-						    		   selectedRoles.push({

-						    			   id: roles[m].id,

-						                   name: roles[m].name,

-						                   isSelected: false,

-						    		   }); 

-						    		}	   

-			    				}  

-			    				availableApps[index].roleSelected = true;

-			    				availableApps[index].isSelected = true;

-			    				availableApps[index].roles = selectedRoles;

-		    					});

-		    				}

-	            		})

-	                })

-            	}

-            };

-            

-            let getAvailableServices = () =>{

-            	microserviceService.getServiceList().then(services => {

-              		this.availableServices = [];

-              		for(var i = 0; i < services.length; i++){

-              			this.availableServices.push({

-              				id: services[i].id,

-              				name: services[i].name,

-              				option: services[i].name + ": " + services[i].url

-              			});

-              			

-              			if(this.widget.service != null && this.widget.service.id == services[i].id){

-              				this.widget.serviceURL = this.availableServices[i];

-              			}

-              		}

-                }).catch(err => {

-                   $log.error(err);

-                });

-            }

-            

-

-            let init = () => {

-            	$log.info('WidgetOnboardingDetailsModalCtrl::init');

-                this.widgetsList = [];

-                this.duplicatedName = true;

-                this.allRoleSelected = false;

-                this.appCounter = 0;

-            	this.isSaving = false;

-            	this.allUser = false;

-            	this.emptyWidgetName = false;

-            	

-                if ($scope.ngDialogData && $scope.ngDialogData.widget) {

-                    this.isEditMode = true;

-            		this.allRoleSelected = true;

-                    this.widget = _.clone($scope.ngDialogData.widget);

-                } else {

-                    this.isEditMode = false;

-                    this.widget = _.clone(newWidgetModel);

-                }

-                

-                widgetsCatalogService.getManagedWidgets().then(res => {

-            		for(var i = 0; i < res.length; i++){

-            			this.widgetsList.push(res[i].name);

-            		}

-                 }).catch(err => {

-                     $log.error('WidgetOnboardingDetailsModalCtrl::init error: ' + err);

-                 }).finally(()=> {

-                     this.isLoadingTable = false;

-                 });

-                 getAvailableApps();

-                 getAvailableServices();

-            };

-            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

-            this.conflictMessages = {};

-            this.scrollApi = {};

-

-            let resetConflict = fieldName => {

-                delete this.conflictMessages[fieldName];

-                if($scope.widgetForm[fieldName]){

-                    $scope.widgetForm[fieldName].$setValidity('conflict', true);

-                }

-            };

-            

-            this.updateSelectedRole = () => {

-                if (!this.selectedRole) {

-                    return;

-                }

-                this.widget.RoleId = this.selectedRole.id;

-                this.widget.RoleName = this.selectedRole.name;

-            };

-            

-            let emptyCookies = () => {

-                userProfileService.getUserProfile()

-                .then(profile=> {

-                    $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);

-                    $scope.orgUserId = profile.orgUserId;

-                    $log.info('user has the following orgUserId: ' + profile.orgUserId);

-                    if ($cookies.getObject($scope.orgUserId + '_widget') != undefined && $cookies.getObject($scope.orgUserId + '_widget') != null) {

-                        $cookies.remove($scope.orgUserId + '_widget');

-                    }

-                });

-            };

-              

-            this.updateWidgetName = () => {

-            	for(var i = 0; i < this.widgetsList.length; i++){

-            		if(this.widget.name.toUpperCase() == this.widgetsList[i].toUpperCase()){

-            			this.duplicatedName = false;

-            			return;

-            		}

-            	}

-            	this.duplicatedName = true;

-            };

-            

-            this.saveChanges = () => {     

-            	

-            	if(!this.isEditMode)

-            		this.updateWidgetName();

-            	

-            	if(this.duplicatedName == false 

-            	   || this.widget.name == ''

-            	   || this.widget.name == undefined){

-                    	this.emptyWidgetName = true;

-                    	return;

-                }

-            	

-            	if((this.widget.file == undefined && !this.isEditMode) ||

-            	(!this.widget.allUser && this.appCounter == 0) ||

-            	this.widget.name == null ||

-            	(!this.widget.allUser && !this.allRoleSelected) ||

-            	this.widget.saving == true)

-            		return;	

-            	

-            	

-        		this.widget.saving = true;

-            	var selectedRoles = [];

-            	if(!this.widget.allUser){

-	            	for(var i = 0; i < this.availableApps.length; i++){

-	            		if(this.availableApps[i].isSelected){

-		        			for(var n = 0; n < this.availableApps[i].roles.length; n++) {

-			    				if(this.availableApps[i].roles[n].isSelected){

-			    				var role = {

-								app: {

-									appId: this.availableApps[i].id

-								},

-								roleId: this.availableApps[i].roles[n].id,

-								roleName: this.availableApps[i].roles[n].name,

-								};

-			    				selectedRoles.push(role);

-			    				}

-			            	}

-	            		}

-	            	}

-            	}

-            	

-            	var allowAllUser = 0;

-            	if(this.widget.allUser)

-            		allowAllUser = 1;  	

-            	

-            	var serviceId = null;

-            	if(this.widget.serviceURL != null &&

-            	this.widget.serviceURL != undefined){

-            		serviceId = this.widget.serviceURL.id;

-            	}

-            	

-            	

-            	var file_loc = this.widget.name + ".zip";

-            	var newWidget = {

-            			name: this.widget.name,

-            			desc: this.widget.desc,

-            			widgetRoles: selectedRoles,

-            			fileLocation: file_loc,

-            			allowAllUser: allowAllUser,

-            			serviceId: serviceId

-            	};

-            	

-            	if(this.isEditMode){

-            		

-            		if(this.widget.file != undefined){

-            			widgetsCatalogService.updateWidgetWithFile(this.widget.file, this.widget.id, newWidget).then(res => {

-            				if(!res.valid){

-            					if(!res.error){

-                					confirmBoxService.showInformation("Could not save. Please retry.");

-                					this.widget.saving = false;

-                					return;

-                				}

-            					confirmBoxService.showInformation(res.error);

-            					this.widget.saving = false;

-            					return;

-            				}

-            				$scope.closeThisDialog(true);

-    	            		this.widget.saving = false;

-            			});	

-            		}

-            		else{

-            			widgetsCatalogService.updateWidget(this.widget.id, newWidget)

-	            		.then(() => {

-	            			$scope.closeThisDialog(true); 

-	                    });

-            		}

-            	}

-            	else{

-            		widgetsCatalogService.createWidget(newWidget, this.widget.file).then(res => {

-	            		if(!res.valid){

-	        				if(!res.error)

-	        					confirmBoxService.showInformation("Could not save. Please retry.");

-	        				else

-	        					confirmBoxService.showInformation(res.error);

-	        				this.widget.saving = false;

-	        				return;

-	        			}

-	            		$scope.closeThisDialog(true);

-	            		this.widget.saving = false;

-            		});

-            	}

-            };

-            init();

-            $scope.$on('$stateChangeStart', e => {

-                e.preventDefault();

-            });

-        }

-    }

-    WidgetOnboardingDetailsModalCtrl.$inject = ['$scope', '$log', '$interval', 'applicationsService', 'adminsService', 'microserviceService', 'widgetsCatalogService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];

-    angular.module('ecompApp').controller('WidgetOnboardingDetailsModalCtrl', WidgetOnboardingDetailsModalCtrl);

-})(); 

+/*-
+ * ================================================================================
+ * 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 () {
+    class WidgetOnboardingDetailsModalCtrl {
+        constructor($scope, $log, $interval, applicationsService, adminsService, microserviceService, widgetsCatalogService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {
+     	    
+    	    this.appUpdate = function(){
+    	    	this.hasSelectedApp = false;
+    	    	this.appCounter = 0;
+    	    	for(var i = 0; i < this.availableApps.length; i++){
+    	    		if(this.availableApps[i].isSelected){
+    	    			this.appCounter++;
+    	    			if(!this.hasSelectedApp)
+    	    				this.hasSelectedApp = true;
+    	    		}
+    	    		if(this.availableApps[i].isSelected
+    	    		&& this.availableApps[i].roles.length == 0){
+    	    			var index = i;
+    	    			this.availableRoles = [];    
+    	    			adminsService.getRolesByApp(this.availableApps[i].id).then(roles => {
+ 				    	   for(var i = 0; i < roles.length; i++){
+ 				    		   this.availableRoles.push({
+ 				    			   id: roles[i].id,
+ 				                   name: roles[i].name,
+ 				                   isSelected: false,
+ 				    		   }); 
+ 				    	   }
+ 				    	   this.availableApps[index].roles = this.availableRoles;
+    	    			});
+    	    		}
+			    }
+    	    	this.allRoleSelected = true;
+    	    	this.checkRoleSelected();
+    	    }
+    	    
+    	    this.roleUpdate = function(app){
+	    		this.allRoleSelected = true;
+    	    	for(var i = 0; i < app.roles.length; i++){
+    	    		if(app.roles[i].isSelected){
+    	    			app.roleSelected = true;
+    	    			this.checkRoleSelected();
+    	    			return;
+    	    		}
+    	    	}
+	    		app.roleSelected = false;
+	    		this.checkRoleSelected();
+    	    }
+    	    
+    	    this.checkRoleSelected = function(){
+    	    	for(var i = 0; i < this.availableApps.length; i++){
+            		if(this.availableApps[i].isSelected
+            		&& !this.availableApps[i].roleSelected){
+            			this.allRoleSelected = false;
+            			return;
+            		}
+            	}
+    	    }
+    	    	   
+    	    this.getAppName = function(appId){
+    	    	 for(var i = 0; i < this.availableApps.length; i++){
+    	    		 if(this.availableApps[i].id == appId){
+    	    			 return this.availableApps[i].name;
+    	    		 }
+    	    	 }
+    	    }
+    	    
+            let newWidgetModel = {
+                name: null,
+                roleId: null,
+                roleName: null,
+                appId: null,
+                appName: null,
+                url: null,
+                showAppOptions: false,
+                showRoleOptions: false,
+                hasSelectedApp: false
+            };
+          
+            let getAvailableApps = () => {           	
+            	
+            	if(this.isEditMode == false){	
+	            	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+	            		this.availableApps=[];
+	            		for(var i=0;i<apps.length;i++) {
+	                        if (!apps[i].restrictedApp) {
+                            this.availableApps.push({
+                                id: apps[i].id,
+                                name: apps[i].name,
+                                roles: [],
+                                roleSelected: false,
+                                isSelected: false,
+                            });
+	                        }
+	                    }
+	                }).catch(err => {
+	                    $log.error(err);
+	                });
+            	}
+            	else if(this.isEditMode == true){
+            		if(this.widget.allowAllUser == "Y")
+            			this.widget.allUser = true;
+            		applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+	            		this.availableApps=[];
+	            		let selectedApps = {};
+	            		var availableApps = this.availableApps;  
+	            		this.allRoleSelected = true;
+	            		for(var i=0; i < this.widget.widgetRoles.length; i++){
+	            			if(selectedApps[this.widget.widgetRoles[i].app.appId] != undefined)
+	            				selectedApps[this.widget.widgetRoles[i].app.appId] += this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";"; 
+	            			else{
+	            				selectedApps[this.widget.widgetRoles[i].app.appId] = this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";";        		
+	            				this.appCounter++;
+	            			}
+	            		}         		
+	            		apps.forEach(function(app, index){
+		    				availableApps.push({
+		                       id: app.id,
+		                       name: app.name,
+		                       roles: [],
+		                       roleSelected: false,
+		                       isSelected: false,
+		    				});
+		    				if(selectedApps[app.id] != undefined){
+			    				adminsService.getRolesByApp(app.id).then(roles => {
+		        				var role = selectedApps[app.id].split(';');
+			            		var selectedRoles = [];
+			            		var n = 0;
+			            		while((n+1) < role.length){
+			                		selectedRoles.push({
+						    			   id: role[n++],
+						                   name: role[n++],
+						                   isSelected: true,
+						    		});
+			            		}					
+			    				for(var m = 0; m < roles.length; m++){
+						    		var hasSelected = true;
+			    					for(var n = 0; n < selectedRoles.length; n++){
+			    						if(selectedRoles[n].id == roles[m].id){
+			    							hasSelected = false;
+						    				break;
+						    			}
+						    		}
+						    		if(hasSelected){
+						    		   selectedRoles.push({
+						    			   id: roles[m].id,
+						                   name: roles[m].name,
+						                   isSelected: false,
+						    		   }); 
+						    		}	   
+			    				}  
+			    				availableApps[index].roleSelected = true;
+			    				availableApps[index].isSelected = true;
+			    				availableApps[index].roles = selectedRoles;
+		    					});
+		    				}
+	            		})
+	                })
+            	}
+            };
+            
+            let getAvailableServices = () =>{
+            	microserviceService.getServiceList().then(services => {
+              		this.availableServices = [];
+              		for(var i = 0; i < services.length; i++){
+              			this.availableServices.push({
+              				id: services[i].id,
+              				name: services[i].name,
+              				option: services[i].name + ": " + services[i].url
+              			});
+              			
+              			if(this.widget.serviceId != null && this.widget.serviceId == services[i].id){
+              				this.widget.serviceURL = this.availableServices[i];
+              			}
+              		}
+                }).catch(err => {
+                   $log.error(err);
+                });
+            }
+            
+
+            let init = () => {
+            	$log.info('WidgetOnboardingDetailsModalCtrl::init');
+                this.widgetsList = [];
+                this.duplicatedName = true;
+                this.allRoleSelected = false;
+                this.appCounter = 0;
+            	this.isSaving = false;
+            	this.allUser = false;
+            	this.emptyWidgetName = false;
+            	
+                if ($scope.ngDialogData && $scope.ngDialogData.widget) {
+                    this.isEditMode = true;
+            		this.allRoleSelected = true;
+                    this.widget = _.clone($scope.ngDialogData.widget);
+                } else {
+                    this.isEditMode = false;
+                    this.widget = _.clone(newWidgetModel);
+                }
+                
+                widgetsCatalogService.getManagedWidgets().then(res => {
+            		for(var i = 0; i < res.length; i++){
+            			this.widgetsList.push(res[i].name);
+            		}
+                 }).catch(err => {
+                     $log.error('WidgetOnboardingDetailsModalCtrl::init error: ' + err);
+                 }).finally(()=> {
+                     this.isLoadingTable = false;
+                 });
+                 getAvailableApps();
+                 getAvailableServices();
+            };
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+            this.conflictMessages = {};
+            this.scrollApi = {};
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                if($scope.widgetForm[fieldName]){
+                    $scope.widgetForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+            
+            this.updateSelectedRole = () => {
+                if (!this.selectedRole) {
+                    return;
+                }
+                this.widget.RoleId = this.selectedRole.id;
+                this.widget.RoleName = this.selectedRole.name;
+            };
+            
+            let emptyCookies = () => {
+                userProfileService.getUserProfile()
+                .then(profile=> {
+                    $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);
+                    $scope.orgUserId = profile.orgUserId;
+                    $log.info('user has the following orgUserId: ' + profile.orgUserId);
+                    if ($cookies.getObject($scope.orgUserId + '_widget') != undefined && $cookies.getObject($scope.orgUserId + '_widget') != null) {
+                        $cookies.remove($scope.orgUserId + '_widget');
+                    }
+                });
+            };
+              
+            this.updateWidgetName = () => {
+            	for(var i = 0; i < this.widgetsList.length; i++){
+            		if(this.widget.name.toUpperCase() == this.widgetsList[i].toUpperCase()){
+            			this.duplicatedName = false;
+            			return;
+            		}
+            	}
+            	this.duplicatedName = true;
+            };
+            
+            this.saveChanges = () => {     
+            	
+            	if(!this.isEditMode)
+            		this.updateWidgetName();
+            	
+            	if(this.duplicatedName == false 
+            	   || this.widget.name == ''
+            	   || this.widget.name == undefined){
+                    	this.emptyWidgetName = true;
+                    	return;
+                }
+            	
+            	if((this.widget.file == undefined && !this.isEditMode) ||
+            	(!this.widget.allUser && this.appCounter == 0) ||
+            	this.widget.name == null ||
+            	(!this.widget.allUser && !this.allRoleSelected) ||
+            	this.widget.saving == true)
+            		return;	
+            	
+            	
+        		this.widget.saving = true;
+            	var selectedRoles = [];
+            	if(!this.widget.allUser){
+	            	for(var i = 0; i < this.availableApps.length; i++){
+	            		if(this.availableApps[i].isSelected){
+		        			for(var n = 0; n < this.availableApps[i].roles.length; n++) {
+			    				if(this.availableApps[i].roles[n].isSelected){
+			    				var role = {
+								app: {
+									appId: this.availableApps[i].id
+								},
+								roleId: this.availableApps[i].roles[n].id,
+								roleName: this.availableApps[i].roles[n].name,
+								};
+			    				selectedRoles.push(role);
+			    				}
+			            	}
+	            		}
+	            	}
+            	}
+            	
+            	var allowAllUser = 0;
+            	if(this.widget.allUser)
+            		allowAllUser = 1;  	
+            	
+            	var serviceId = null;
+            	if(this.widget.serviceURL != null &&
+            	this.widget.serviceURL != undefined){
+            		serviceId = this.widget.serviceURL.id;
+            	}
+            	
+            	
+            	var file_loc = this.widget.name + ".zip";
+            	var newWidget = {
+            			name: this.widget.name,
+            			desc: this.widget.desc,
+            			widgetRoles: selectedRoles,
+            			fileLocation: file_loc,
+            			allowAllUser: allowAllUser,
+            			serviceId: serviceId
+            	};
+            	
+            	if(this.isEditMode){
+            		
+            		if(this.widget.file != undefined){
+            			widgetsCatalogService.updateWidgetWithFile(this.widget.file, this.widget.id, newWidget).then(res => {
+            				if(!res.valid){
+            					if(!res.error){
+                					confirmBoxService.showInformation("Could not save. Please retry.");
+                					this.widget.saving = false;
+                					return;
+                				}
+            					confirmBoxService.showInformation(res.error);
+            					this.widget.saving = false;
+            					return;
+            				}
+            				$scope.closeThisDialog(true);
+    	            		this.widget.saving = false;
+            			});	
+            		}
+            		else{
+            			widgetsCatalogService.updateWidget(this.widget.id, newWidget)
+	            		.then(() => {
+	            			$scope.closeThisDialog(true); 
+	                    });
+            		}
+            	}
+            	else{
+            		widgetsCatalogService.createWidget(newWidget, this.widget.file).then(res => {
+	            		if(!res.valid){
+	        				if(!res.error)
+	        					confirmBoxService.showInformation("Could not save. Please retry.");
+	        				else
+	        					confirmBoxService.showInformation(res.error);
+	        				this.widget.saving = false;
+	        				return;
+	        			}
+	            		$scope.closeThisDialog(true);
+	            		this.widget.saving = false;
+            		});
+            	}
+            };
+            init();
+            $scope.$on('$stateChangeStart', e => {
+                e.preventDefault();
+            });
+        }
+    }
+    WidgetOnboardingDetailsModalCtrl.$inject = ['$scope', '$log', '$interval', 'applicationsService', 'adminsService', 'microserviceService', 'widgetsCatalogService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];
+    angular.module('ecompApp').controller('WidgetOnboardingDetailsModalCtrl', WidgetOnboardingDetailsModalCtrl);
+})(); 
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js
index 1762fadb..927836ae 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js
@@ -1,154 +1,154 @@
-/*-

- * ================================================================================

- * 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: WidgetDetailsModalCtrl', ()=> {

-//     /**

-//      * INITIALIZATION

-//      */

-//     beforeEach(module('testUtils'));

-//     beforeEach(module('ecompApp'));

-//

-//     let promisesTestUtils;

-//     //destroy $http default cache before starting to prevent the error 'default cache already exists'

-//     //_promisesTestUtils_ comes from testUtils for promises resolve/reject

-//     beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {

-//         _CacheFactory_.destroyAll();

-//         promisesTestUtils = _promisesTestUtils_;

-//     }));

-//

-//     let widgetDetails, scope, $controller, $q, $rootScope, $log, widgetsService, errorMessageByCode, ECOMP_URL_REGEX;

-//     let deferredAdminApps, deferredUserProfile;

-//     let applicationsServiceMock, widgetsServiceMock, userProfileServiceMock;

-//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

-//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];

-//

-//         deferredAdminApps = $q.defer();

-//         deferredUserProfile = $q.defer();

-//         /*applicationsServiceMock = {

-//             getAppsForSuperAdminAndAccountAdmin: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             }

-//         };*/

-//

-//         widgetsServiceMock = {

-//             updateWidget: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             },

-//             createWidget: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             }

-//         };

-//

-//         userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);

-//         userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);

-//

-//         applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock',['getAppsForSuperAdminAndAccountAdmin']);

-//         applicationsServiceMock.getAppsForSuperAdminAndAccountAdmin.and.returnValue(deferredAdminApps.promise);

-//

-//     }));

-//

-//     beforeEach(()=> {

-//         errorMessageByCode = [];

-//         ECOMP_URL_REGEX = "";

-//         scope = $rootScope.$new();

-//         createController(scope);

-//     });

-//

-//     let createController = scopeObj => {

-//         widgetDetails = $controller('WidgetDetailsModalCtrl', {

-//             $scope: scope,

-//             $log: $log,

-//             applicationsService: applicationsServiceMock,

-//             widgetsService: widgetsServiceMock,

-//             errorMessageByCode: errorMessageByCode,

-//             ECOMP_URL_REGEX: ECOMP_URL_REGEX,

-//             userProfileService: userProfileServiceMock

-//         });

-//     };

-//

-//     /**

-//      * MOCK DATA

-//      */

-//     let newWidgetModel = {

-//         name: null,

-//         appId: null,

-//         appName: null,

-//         width: 360,

-//         height: 300,

-//         url: null

-//     };

-//     let exsistingWidget = {

-//         name: 'some widget',

-//         appId: 1,

-//         appName: 'APP NAME',

-//         width: 360,

-//         height: 300,

-//         url: 'http://a.com'

-//     };

-//     let adminApps = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];

-//

-//     /**

-//      * TEST CASES

-//      */

-//     it('should initialize controller with new widget mode when opening the modal without selected widget', ()=> {

-//         expect(widgetDetails.widget).toEqual(newWidgetModel);

-//     });

-//

-//     it('should initialize controller with exsisting widget details when opening the modal with selected widget', ()=> {

-//         scope.ngDialogData = {

-//             widget: exsistingWidget

-//         };

-//         createController(scope);

-//         expect(widgetDetails.widget).toEqual(exsistingWidget);

-//     });

-//

-//     it('should populate widget selected app name and id when initializing controller with widget', () =>{

-//         deferredAdminApps.resolve(adminApps);

-//         scope.ngDialogData = {

-//             widget: exsistingWidget

-//         };

-//         createController(scope);

-//         scope.$apply();

-//         expect(widgetDetails.widget.appId).toEqual(adminApps[0].id);

-//         expect(widgetDetails.widget.appName).toEqual(adminApps[0].name);

-//     });

-//

-//     //TODO:

-//     //save changes fail - conflict handling

-//     //save changes success

-//

-//

-//

-// });

+/*-
+ * ================================================================================
+ * 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: WidgetDetailsModalCtrl', ()=> {
+//     /**
+//      * INITIALIZATION
+//      */
+//     beforeEach(module('testUtils'));
+//     beforeEach(module('ecompApp'));
+//
+//     let promisesTestUtils;
+//     //destroy $http default cache before starting to prevent the error 'default cache already exists'
+//     //_promisesTestUtils_ comes from testUtils for promises resolve/reject
+//     beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {
+//         _CacheFactory_.destroyAll();
+//         promisesTestUtils = _promisesTestUtils_;
+//     }));
+//
+//     let widgetDetails, scope, $controller, $q, $rootScope, $log, widgetsService, errorMessageByCode, ECOMP_URL_REGEX;
+//     let deferredAdminApps, deferredUserProfile;
+//     let applicationsServiceMock, widgetsServiceMock, userProfileServiceMock;
+//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];
+//
+//         deferredAdminApps = $q.defer();
+//         deferredUserProfile = $q.defer();
+//         /*applicationsServiceMock = {
+//             getAppsForSuperAdminAndAccountAdmin: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             }
+//         };*/
+//
+//         widgetsServiceMock = {
+//             updateWidget: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             },
+//             createWidget: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             }
+//         };
+//
+//         userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);
+//         userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);
+//
+//         applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock',['getAppsForSuperAdminAndAccountAdmin']);
+//         applicationsServiceMock.getAppsForSuperAdminAndAccountAdmin.and.returnValue(deferredAdminApps.promise);
+//
+//     }));
+//
+//     beforeEach(()=> {
+//         errorMessageByCode = [];
+//         ECOMP_URL_REGEX = "";
+//         scope = $rootScope.$new();
+//         createController(scope);
+//     });
+//
+//     let createController = scopeObj => {
+//         widgetDetails = $controller('WidgetDetailsModalCtrl', {
+//             $scope: scope,
+//             $log: $log,
+//             applicationsService: applicationsServiceMock,
+//             widgetsService: widgetsServiceMock,
+//             errorMessageByCode: errorMessageByCode,
+//             ECOMP_URL_REGEX: ECOMP_URL_REGEX,
+//             userProfileService: userProfileServiceMock
+//         });
+//     };
+//
+//     /**
+//      * MOCK DATA
+//      */
+//     let newWidgetModel = {
+//         name: null,
+//         appId: null,
+//         appName: null,
+//         width: 360,
+//         height: 300,
+//         url: null
+//     };
+//     let exsistingWidget = {
+//         name: 'some widget',
+//         appId: 1,
+//         appName: 'APP NAME',
+//         width: 360,
+//         height: 300,
+//         url: 'http://a.com'
+//     };
+//     let adminApps = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];
+//
+//     /**
+//      * TEST CASES
+//      */
+//     it('should initialize controller with new widget mode when opening the modal without selected widget', ()=> {
+//         expect(widgetDetails.widget).toEqual(newWidgetModel);
+//     });
+//
+//     it('should initialize controller with exsisting widget details when opening the modal with selected widget', ()=> {
+//         scope.ngDialogData = {
+//             widget: exsistingWidget
+//         };
+//         createController(scope);
+//         expect(widgetDetails.widget).toEqual(exsistingWidget);
+//     });
+//
+//     it('should populate widget selected app name and id when initializing controller with widget', () =>{
+//         deferredAdminApps.resolve(adminApps);
+//         scope.ngDialogData = {
+//             widget: exsistingWidget
+//         };
+//         createController(scope);
+//         scope.$apply();
+//         expect(widgetDetails.widget.appId).toEqual(adminApps[0].id);
+//         expect(widgetDetails.widget.appName).toEqual(adminApps[0].name);
+//     });
+//
+//     //TODO:
+//     //save changes fail - conflict handling
+//     //save changes success
+//
+//
+//
+// });
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
index 2fa56443..9e1c1696 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
@@ -1,156 +1,156 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="widget-details-modal">

-	<div id="'widgets-details-title" class="title">Widget Details</div>

-

-	<div class="widget-properties-main"

-		scroll-top="widgetOnboardingDetails.scrollApi">

-		<form id="widgets-details-form" name="widgetForm" novalidate

-			autocomplete="off">

-

-			<div class="item required">

-				<div class="item-label">Widget Name</div>

-				<input id="widgets-details-input-name" class="input-field"

-					type="text" ng-model="widgetOnboardingDetails.widget.name"

-					ng-change="widgetOnboardingDetails.updateWidgetName()" name="name"

-					ng-pattern="/^[\w -]*$/" maxlength="100"

-					ng-disabled="widgetOnboardingDetails.isEditMode" required />

-

-				<div class="error-container"

-					ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && !widgetOnboardingDetails.duplicatedName">

-					<div id="widgets-details-input-name-conflict" class="err-message">Name

-						not available - choose different name</div>

-				</div>

-

-				<div class="error-container"

-					ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && widgetOnboardingDetails.duplicatedName">

-					<div ng-messages="widgetForm.name.$error" class="error-container">

-						<small id="widgets-details-input-name-required"

-							class="err-message" ng-message="required">Widget Name is

-							required</small> <small id="widgets-details-input-name-pattern"

-							class="err-message" ng-message="pattern">Widget Name must

-							be letters, numbers, or underscore</small>

-					</div>

-				</div>

-			</div>

-

-

-			<div class="item">

-				<div class="item-label">Widget Description</div>

-				<input id="widgets-details-input-name" class="input-field"

-					type="text" ng-model="widgetOnboardingDetails.widget.desc"

-					name="desc" maxlength="200" />

-			</div>

-

-			<div class="widget-property">

-				<input id="widgets-checkbox-app-is-enabled" type="checkbox"

-					class="checkbox-field"

-					ng-model="widgetOnboardingDetails.widget.allUser" />

-				<div class="property-label checkbox-label">Allow all user

-					access</div>

-			</div>

-

-

-			<div class="item" ng-show="!widgetOnboardingDetails.isEditMode">

-				<div class="item-label">Service Endpoint</div>

-				<div>

-					<select id="widgets-details-input-endpoint-url" name="url"

-						class="input-field"

-						ng-model="widgetOnboardingDetails.widget.serviceURL"

-						ng-options="service as service.option

-						  for service in widgetOnboardingDetails.availableServices">

-						<option value="" selected="selected">Select Microservice

-							Endpoint</option>

-					</select>

-				</div>

-			</div>

-

-			<div class="item required"

-				ng-show="!widgetOnboardingDetails.widget.allUser">

-				<div class="item-label">Application Name</div>

-				<div>

-					<multiple-select id="widget-applications" unique-data="{{$index}}"

-						placeholder="Select Applications"

-						ng-model="widgetOnboardingDetails.availableApps"

-						on-change="widgetOnboardingDetails.appUpdate()" name-attr="name"

-						value-attr="isSelected"> </multiple-select>

-				</div>

-				<div class="error-container"

-					ng-show="widgetOnboardingDetails.appCounter == 0">

-					<div id="widgets-details-input-name-conflict" class="err-message">Please

-						select at least one Application</div>

-				</div>

-			</div>

-

-			<div class="item" ng-show="!widgetOnboardingDetails.widget.allUser">

-				<div ng-show="widgetOnboardingDetails.hasSelectedApp"

-					class="item-label">User Role Name</div>

-				<div ng-repeat="appRoles in widgetOnboardingDetails.availableApps"

-					id="roles-{{appRoles.roles.split(' ').join('-')}}">

-					<div class="item required">

-						<div class="app-item-left" ng-show="appRoles.isSelected">{{appRoles.name}}</div>

-						<div class="app-item-right" ng-show="appRoles.isSelected">

-							<multiple-select id="widget-roles-by-application"

-								unique-data="{{$index}}" placeholder="Select Roles"

-								ng-model="appRoles.roles" name-attr="name"

-								on-change="widgetOnboardingDetails.roleUpdate(appRoles)"

-								value-attr="isSelected"></multiple-select>

-							<div class="error-container" ng-show="!appRoles.roleSelected">

-								<div id="widgets-details-input-name-conflict"

-									class="err-message">Please select at least one role</div>

-							</div>

-						</div>

-					</div>

-				</div>

-			</div>

-

-			<div class="item required">

-				<div class="item-label">Upload Widget</div>

-				<div>

-					<input id="widget-onboarding-details-upload-file"

-						file-model="widgetOnboardingDetails.widget.file" type="file"

-						style="height: 24px;" />

-

-

-					<div class="error-container"

-						ng-show="widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode">

-						<div class="err-message">Please upload your widget (.zip)</div>

-					</div>

-				</div>

-			</div>

-		</form>

-	</div>

-

-	<div class="dialog-control">

-		<span class="ecomp-save-spinner"

-			ng-show="widgetOnboardingDetails.isSaving"></span>

-		<button id="widgets-details-save-button" class="btn btn-alt btn-small"

-			ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName 

-			|| (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)

-			|| (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"

-			ng-click="widgetOnboardingDetails.saveChanges()">Save</button>

-		<button id="widgets-details-cancel-button"

-			class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>

-

-	</div>

-

-

-

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="widget-details-modal">
+	<div id="'widgets-details-title" class="title">Widget Details</div>
+
+	<div class="widget-properties-main"
+		scroll-top="widgetOnboardingDetails.scrollApi">
+		<form id="widgets-details-form" name="widgetForm" novalidate
+			autocomplete="off">
+
+			<div class="item required">
+				<div class="item-label">Widget Name</div>
+				<input id="widgets-details-input-name" class="input-field"
+					type="text" ng-model="widgetOnboardingDetails.widget.name"
+					ng-change="widgetOnboardingDetails.updateWidgetName()" name="name"
+					ng-pattern="/^[\w -]*$/" maxlength="100"
+					ng-disabled="widgetOnboardingDetails.isEditMode" required />
+
+				<div class="error-container"
+					ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && !widgetOnboardingDetails.duplicatedName">
+					<div id="widgets-details-input-name-conflict" class="err-message">Name
+						not available - choose different name</div>
+				</div>
+
+				<div class="error-container"
+					ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && widgetOnboardingDetails.duplicatedName">
+					<div ng-messages="widgetForm.name.$error" class="error-container">
+						<small id="widgets-details-input-name-required"
+							class="err-message" ng-message="required">Widget Name is
+							required</small> <small id="widgets-details-input-name-pattern"
+							class="err-message" ng-message="pattern">Widget Name must
+							be letters, numbers, space, dash or underscore</small>
+					</div>
+				</div>
+			</div>
+
+
+			<div class="item">
+				<div class="item-label">Widget Description</div>
+				<input id="widgets-details-input-name" class="input-field"
+					type="text" ng-model="widgetOnboardingDetails.widget.desc"
+					name="desc" maxlength="200" />
+			</div>
+
+			<div class="item">
+				<div class="item-label">Service Endpoint</div>
+				<div>
+					<select id="widgets-details-input-endpoint-url" name="url"
+						class="input-field"
+						ng-model="widgetOnboardingDetails.widget.serviceURL"
+						ng-options="service as service.option
+						  for service in widgetOnboardingDetails.availableServices"
+						  ng-disabled="widgetOnboardingDetails.isEditMode">
+						<option value="" selected="selected">Select Microservice
+							Endpoint</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="widget-property">
+				<input id="widgets-checkbox-app-is-enabled" type="checkbox"
+					class="checkbox-field"
+					ng-model="widgetOnboardingDetails.widget.allUser" />
+				<div class="property-label checkbox-label">Allow all user
+					access</div>
+			</div>
+
+			<div class="item required"
+				ng-show="!widgetOnboardingDetails.widget.allUser">
+				<div class="item-label">Application Name</div>
+				<div>
+					<multiple-select id="widget-applications" unique-data="{{$index}}"
+						placeholder="Select Applications"
+						ng-model="widgetOnboardingDetails.availableApps"
+						on-change="widgetOnboardingDetails.appUpdate()" name-attr="name"
+						value-attr="isSelected"> </multiple-select>
+				</div>
+				<div class="error-container"
+					ng-show="widgetOnboardingDetails.appCounter == 0">
+					<div id="widgets-details-input-name-conflict" class="err-message">Please
+						select at least one Application</div>
+				</div>
+			</div>
+
+			<div class="item" ng-show="!widgetOnboardingDetails.widget.allUser">
+				<div ng-show="widgetOnboardingDetails.hasSelectedApp"
+					class="item-label">User Role Name</div>
+				<div ng-repeat="appRoles in widgetOnboardingDetails.availableApps"
+					id="roles-{{appRoles.roles.split(' ').join('-')}}">
+					<div class="item required">
+						<div class="app-item-left" ng-show="appRoles.isSelected">{{appRoles.name}}</div>
+						<div class="app-item-right" ng-show="appRoles.isSelected">
+							<multiple-select id="widget-roles-by-application"
+								unique-data="{{$index}}" placeholder="Select Roles"
+								ng-model="appRoles.roles" name-attr="name"
+								on-change="widgetOnboardingDetails.roleUpdate(appRoles)"
+								value-attr="isSelected"></multiple-select>
+							<div class="error-container" ng-show="!appRoles.roleSelected">
+								<div id="widgets-details-input-name-conflict"
+									class="err-message">Please select at least one role</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="item required">
+				<div class="item-label">Upload Widget</div>
+				<div>
+					<input id="widget-onboarding-details-upload-file"
+						file-model="widgetOnboardingDetails.widget.file" type="file"
+						style="height: 24px;" />
+
+
+					<div class="error-container"
+						ng-show="widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode">
+						<div class="err-message">Please upload your widget (.zip)</div>
+					</div>
+				</div>
+			</div>
+		</form>
+	</div>
+
+	<div class="dialog-control">
+		<span class="ecomp-save-spinner"
+			ng-show="widgetOnboardingDetails.isSaving"></span>
+		<button id="widgets-details-save-button" class="btn btn-alt btn-small"
+			ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName 
+			|| (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)
+			|| (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"
+			ng-click="widgetOnboardingDetails.saveChanges()">Save</button>
+		<button id="widgets-details-cancel-button"
+			class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+
+	</div>
+
+
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js
index a9e5c416..661c63a3 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js
@@ -1,204 +1,204 @@
-/*-

- * ================================================================================

- * 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 () {

-    class WidgetOnboardingCtrl {

-        constructor($log, applicationsService, widgetsCatalogService, ngDialog, confirmBoxService,

-                    userProfileService, $cookies, $scope) {

-            $scope.infoMessage = true;

-

-            let populateAvailableApps = widgets => {

-            	let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};

-                this.availableApps = [allPortalsFilterObject];

-                this.filterByApp = this.availableApps[0];

-                applicationsService.getAppsForSuperAdminAndAccountAdmin().then(myApps => {

-                	var reSortedApp = myApps.sort(getSortOrder("name"));

-                    var realAppIndex = 1;

-                    for (let i = 1; i <= reSortedApp.length; i++) {

-                        if (!reSortedApp[i-1].restrictedApp) {

-                            this.availableApps.push({

-                                index: realAppIndex,

-                                title: reSortedApp[i - 1].name,

-                                value: reSortedApp[i - 1].name

-                            })

-                            realAppIndex = realAppIndex + 1;

-                        }

-                    }

-                }).catch(err => {

-                    $log.error('WidgetOnboardingCtrl:getAppsForSuperAdmin failed', err);

-                });

-            };

-                 

-            let getOnboardingWidgets = () => {

-                this.isLoadingTable = true;

-                this.isCommError = false;

-                widgetsCatalogService.getManagedWidgets().then(res => {

-                	if(!(res instanceof Array)){

-        				this.isCommError = true;

-        				return;

-        			 }

-                	

-                    var reSortedWidget = res.sort(getSortOrder("name"));

-                    $scope.widgetsList = reSortedWidget;

-                    for(var i = 0; i < $scope.widgetsList.length; i++){

-                    	let set = new Set();

-                    	var info = "";

-                    	var appContent = [];

-                    	var appName = [];	

-                    	for(var n = 0; n < $scope.widgetsList[i].widgetRoles.length; n++){

-                    		set.add($scope.widgetsList[i].widgetRoles[n].app.appName);

-                    	}

-                    	if($scope.widgetsList[i].allowAllUser == "Y"){

-                    		info = "All Applications";

-                    		appContent.push("All Applications");

-                    		appName.push("All Applications");

-                    	}

-                    	

-                    	set.forEach(function (item) {

-                    		info = item.toString() + " - ";

-                    		for(var n = 0; n < $scope.widgetsList[i].widgetRoles.length; n++){

-                    			if(item.toString() == $scope.widgetsList[i].widgetRoles[n].app.appName){

-                        			info += $scope.widgetsList[i].widgetRoles[n].roleName + "; ";

-                        		}

-                    		}

-                    		appContent.push(info);

-                    		appName.push(item.toString());

-                    	});

-                    	$scope.widgetsList[i].appContent = appContent;

-                    	$scope.widgetsList[i].appName = appName;

-                	}

-                    populateAvailableApps(reSortedWidget);

-                }).catch(err => {

-                	// Land here when the micro service is down

-                    $log.error('WidgetOnboardingCtrl::getOnboardingWidgets caught error', err);

-                }).finally(()=> {

-                    this.isLoadingTable = false;

-                });

-             

-            };

-            

-            

-            // Refactor this into a directive

-            let getSortOrder = (prop) => {

-                return function(a, b) {

-                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {

-                        return 1;

-                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {

-                        return -1;

-                    }

-                    return 0;

-                }

-            }

-

-            $scope.hideMe = function () {

-                $scope.infoMessage = false;

-            }

-

-            let init = () => {

-            	this.isLoadingTable = false;

-                getOnboardingWidgets();

-                this.searchString = '';

-                this.widgetsTableHeaders = [

-                    {name: 'Widget Name', value: 'name', isSortable: false}

-                ];

-                $scope.widgetsList = [];

-            };

-           

-            this.filterByDropdownValue = item => {            	

-                if(this.filterByApp.value === '')

-                    return true;

-                

-             	for(var i = 0; i < item.appName.length; i++){

-                	if(item.appName[i] == this.filterByApp.value

-                	|| item.appName[i] == 'All Applications'){

-                		return true;

-                	}

-            	}

-                return false;

-            };

-

-            this.openWidgetCatalogDetailsModal = (selectedWidget) => {

-            	let data = null;

-                if(selectedWidget){

-                    if(!selectedWidget.id){

-                        $log.error('WidgetOnboardingCtrl:openWidgetCatalogDetailModal: widget id not found');

-                        return;

-                    }

-                    data = {

-                        widget: selectedWidget

-                    }

-                }

-                ngDialog.open({

-                    templateUrl: 'app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html',

-                    controller: 'WidgetOnboardingDetailsModalCtrl',

-                    controllerAs: 'widgetOnboardingDetails',

-                    data: data

-                }).closePromise.then(needUpdate => {

-                	if(needUpdate.value === true){

-                        getOnboardingWidgets();

-                    }

-                });

-            };

-

-            this.deleteWidget = widget => { 

-            	

-               confirmBoxService.deleteItem(widget.name).then(isConfirmed => {

-                	if(isConfirmed){

-                        if(!widget || !widget.id){

-                            $log.error('WidgetOnboardingCtrl::deleteWidget: No widget or ID... cannot delete');

-                            return;

-                        }

-                        widgetsCatalogService.deleteWidget(widget.id).then(() => {

-                        	$scope.widgetsList.splice($scope.widgetsList.indexOf(widget), 1);

-                        }).catch(err => {

-                            $log.error('WidgetOnboardingCtrl::deleteWidget error:',err);

-                        });

-                    }

-                }).catch(err => {

-                    $log.error('WidgetOnboardingCtrl::deleteWidget error:',err);

-                });

-                

-            };

-            

-            

-            this.downloadWidget = widget => {

-	        	widgetsCatalogService.downloadWidgetFile(widget.id).then(res => {

-	        		var data = res;

-	        		var filename = widget.name + ".zip";

-	        		

-	        		if (data == undefined || data == null){

-	        			confirmBoxService.showInformation("Could not download. Please retry.");

-	        			return;         	

-	        		}

-	        		var a = document.createElement('a');

-	        		var blob = new Blob([data], {type: 'application/octet-stream'});

-	        		a.href = URL.createObjectURL(blob);

-	        		a.download = filename;

-	        		a.click();

-	        	});

-            };

-            

-            init();

-        }

-    }

-    WidgetOnboardingCtrl.$inject = ['$log', 'applicationsService', 'widgetsCatalogService', 'ngDialog', 'confirmBoxService',

-        'userProfileService','$cookies', '$scope'];

-    angular.module('ecompApp').controller('WidgetOnboardingCtrl', WidgetOnboardingCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class WidgetOnboardingCtrl {
+        constructor($log, applicationsService, widgetsCatalogService, ngDialog, confirmBoxService,
+                    userProfileService, $cookies, $scope) {
+            $scope.infoMessage = true;
+
+            let populateAvailableApps = widgets => {
+            	let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};
+                this.availableApps = [allPortalsFilterObject];
+                this.filterByApp = this.availableApps[0];
+                applicationsService.getAppsForSuperAdminAndAccountAdmin().then(myApps => {
+                	var reSortedApp = myApps.sort(getSortOrder("name"));
+                    var realAppIndex = 1;
+                    for (let i = 1; i <= reSortedApp.length; i++) {
+                        if (!reSortedApp[i-1].restrictedApp) {
+                            this.availableApps.push({
+                                index: realAppIndex,
+                                title: reSortedApp[i - 1].name,
+                                value: reSortedApp[i - 1].name
+                            })
+                            realAppIndex = realAppIndex + 1;
+                        }
+                    }
+                }).catch(err => {
+                    $log.error('WidgetOnboardingCtrl:getAppsForSuperAdmin failed', err);
+                });
+            };
+                 
+            let getOnboardingWidgets = () => {
+                this.isLoadingTable = true;
+                this.isCommError = false;
+                widgetsCatalogService.getManagedWidgets().then(res => {
+                	if(!(res instanceof Array)){
+        				this.isCommError = true;
+        				return;
+        			 }
+                	
+                    var reSortedWidget = res.sort(getSortOrder("name"));
+                    $scope.widgetsList = reSortedWidget;
+                    for(var i = 0; i < $scope.widgetsList.length; i++){
+                    	let set = new Set();
+                    	var info = "";
+                    	var appContent = [];
+                    	var appName = [];	
+                    	for(var n = 0; n < $scope.widgetsList[i].widgetRoles.length; n++){
+                    		set.add($scope.widgetsList[i].widgetRoles[n].app.appName);
+                    	}
+                    	if($scope.widgetsList[i].allowAllUser == "Y"){
+                    		info = "All Applications";
+                    		appContent.push("All Applications");
+                    		appName.push("All Applications");
+                    	}
+                    	
+                    	set.forEach(function (item) {
+                    		info = item.toString() + " - ";
+                    		for(var n = 0; n < $scope.widgetsList[i].widgetRoles.length; n++){
+                    			if(item.toString() == $scope.widgetsList[i].widgetRoles[n].app.appName){
+                        			info += $scope.widgetsList[i].widgetRoles[n].roleName + "; ";
+                        		}
+                    		}
+                    		appContent.push(info);
+                    		appName.push(item.toString());
+                    	});
+                    	$scope.widgetsList[i].appContent = appContent;
+                    	$scope.widgetsList[i].appName = appName;
+                	}
+                    populateAvailableApps(reSortedWidget);
+                }).catch(err => {
+                	// Land here when the micro service is down
+                    $log.error('WidgetOnboardingCtrl::getOnboardingWidgets caught error', err);
+                }).finally(()=> {
+                    this.isLoadingTable = false;
+                });
+             
+            };
+            
+            
+            // Refactor this into a directive
+            let getSortOrder = (prop) => {
+                return function(a, b) {
+                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {
+                        return 1;
+                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {
+                        return -1;
+                    }
+                    return 0;
+                }
+            }
+
+            $scope.hideMe = function () {
+                $scope.infoMessage = false;
+            }
+
+            let init = () => {
+            	this.isLoadingTable = false;
+                getOnboardingWidgets();
+                this.searchString = '';
+                this.widgetsTableHeaders = [
+                    {name: 'Widget Name', value: 'name', isSortable: false}
+                ];
+                $scope.widgetsList = [];
+            };
+           
+            this.filterByDropdownValue = item => {            	
+                if(this.filterByApp.value === '')
+                    return true;
+                
+             	for(var i = 0; i < item.appName.length; i++){
+                	if(item.appName[i] == this.filterByApp.value
+                	|| item.appName[i] == 'All Applications'){
+                		return true;
+                	}
+            	}
+                return false;
+            };
+
+            this.openWidgetCatalogDetailsModal = (selectedWidget) => {
+            	let data = null;
+                if(selectedWidget){
+                    if(!selectedWidget.id){
+                        $log.error('WidgetOnboardingCtrl:openWidgetCatalogDetailModal: widget id not found');
+                        return;
+                    }
+                    data = {
+                        widget: selectedWidget
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html',
+                    controller: 'WidgetOnboardingDetailsModalCtrl',
+                    controllerAs: 'widgetOnboardingDetails',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                	if(needUpdate.value === true){
+                        getOnboardingWidgets();
+                    }
+                });
+            };
+
+            this.deleteWidget = widget => { 
+            	
+               confirmBoxService.deleteItem(widget.name).then(isConfirmed => {
+                	if(isConfirmed){
+                        if(!widget || !widget.id){
+                            $log.error('WidgetOnboardingCtrl::deleteWidget: No widget or ID... cannot delete');
+                            return;
+                        }
+                        widgetsCatalogService.deleteWidget(widget.id).then(() => {
+                        	$scope.widgetsList.splice($scope.widgetsList.indexOf(widget), 1);
+                        }).catch(err => {
+                            $log.error('WidgetOnboardingCtrl::deleteWidget error:',err);
+                        });
+                    }
+                }).catch(err => {
+                    $log.error('WidgetOnboardingCtrl::deleteWidget error:',err);
+                });
+                
+            };
+            
+            
+            this.downloadWidget = widget => {
+	        	widgetsCatalogService.downloadWidgetFile(widget.id).then(res => {
+	        		var data = res;
+	        		var filename = widget.name + ".zip";
+	        		
+	        		if (data == undefined || data == null){
+	        			confirmBoxService.showInformation("Could not download. Please retry.");
+	        			return;         	
+	        		}
+	        		var a = document.createElement('a');
+	        		var blob = new Blob([data], {type: 'application/octet-stream'});
+	        		a.href = URL.createObjectURL(blob);
+	        		a.download = filename;
+	        		a.click();
+	        	});
+            };
+            
+            init();
+        }
+    }
+    WidgetOnboardingCtrl.$inject = ['$log', 'applicationsService', 'widgetsCatalogService', 'ngDialog', 'confirmBoxService',
+        'userProfileService','$cookies', '$scope'];
+    angular.module('ecompApp').controller('WidgetOnboardingCtrl', WidgetOnboardingCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js
index 77659d93..5c42f4ce 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js
@@ -1,20 +1,20 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less
index f832b8f9..6085a908 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less
@@ -24,9 +24,15 @@ font-style: italic;
       .ico_trash_default;
     }
     .c-ecomp-abs-select{
+    height: 25px;
     width: 440px;
     display: inline-block;
     margin-right: 10px;
     }
 
+#widget-onboarding-button-add
+{
+margin-bottom: 8px;
+}
+
 }
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html
index 808deb8c..aae0fd7c 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html
@@ -1,113 +1,115 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="w-ecomp-main">

-	<div class="w-ecomp-main-container">

-		<div class="widget-onboarding" id="page-content">

-			<div id="title" class="w-ecomp-main-view-title">

-				<h1 class="heading-page">Widget Onboarding</h1>

-			</div>

-			<div class="widgets-table">

-				<div class="table-control">

-					<div class="c-ecomp-abs-select default">

-						<div class="table-dropdown">

-							<select id="dropdown1" name="dropdown1" b2b-dropdown

-								placeholder-text="All application"

-								ng-model="widgetOnboarding.filterByApp.value">

-								<option b2b-dropdown-list

-									option-repeat="d in widgetOnboarding.availableApps"

-									value="{{d.value}}">{{d.title}}</option>

-							</select>

-						</div>

-					</div>

-					<input class="table-search" type="text"

-						id="widget-onboarding-table-search"

-						placeholder="Search in entire table"

-						ng-model="widgetOnboarding.searchString" />

-

-					<button id="widget-onboarding-button-add"

-						class="btn btn-alt btn-small"

-						ng-click="widgetOnboarding.openWidgetCatalogDetailsModal()">

-						<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add

-						Widget

-					</button>

-

-					<div id="widget-onboarding-communcation-message"

-						ng-show="widgetOnboarding.isCommError">Failed to communicate

-						with the widget microservice.</div>

-

-					<div ng-hide="widgetOnboarding.isCommError">

-						<div b2b-table table-data="portalAdmin.portalAdminsTableData"

-							ng-hide="widgetOnboarding.isLoadingTable"

-							search-string="portalAdmin.searchString" class="b2b-table-div">

-							<table>

-								<thead b2b-table-row type="header">

-									<tr>

-										<th id="widgets-catalog-th-header-name"

-											ng-repeat="header in widgetOnboarding.widgetsTableHeaders"

-											b2b-table-header key="{{header.value}}"

-											sortable="{{header.isSortable}}">{{header.name}}</th>

-										<th id="widgets-catalog-th-header-url" b2b-table-header

-											key="appName" sortable="false">Application</th>

-

-										<th id="widgets-catalog-th-header-download" b2b-table-header

-											sortable="false">Download</th>

-

-										<th id="widgets-catalog-th-header-delete" b2b-table-header

-											sortable="false">Delete</th>

-									</tr>

-								</thead>

-								<tbody b2b-table-row type="body" class="table-body"

-									row-repeat="rowData in widgetsList | filter:widgetOnboarding.filterByDropdownValue">

-									<tr>

-										<td b2b-table-body

-											ng-repeat="header in widgetOnboarding.widgetsTableHeaders"

-											ng-click="widgetOnboarding.openWidgetCatalogDetailsModal(rowData)">

-											<div id="widgets-catalog-widget-name-{{rowData.id}}"

-												ng-bind="rowData[header.value]"></div>

-										</td>

-

-										<td b2b-table-body

-											ng-click="widgetOnboarding.openWidgetCatalogDetailsModal(rowData)">

-											<div ng-repeat="row in rowData.appContent">

-												<div id="widget-catalog-widget-application-{{rowData.id}}"

-													ng-bind="row"></div>

-											</div>

-										</td>

-

-										<td b2b-table-body>

-											<div class="icon-download"

-												ng-click="widgetOnboarding.downloadWidget(rowData)"></div>

-										</td>

-

-										<td b2b-table-body>

-											<div id="widget-onboarding-div-delete-widget-{{$index}}" class="delete-widget"

-												ng-click="widgetOnboarding.deleteWidget(rowData)"></div>

-										</td>

-									</tr>

-								</tbody>

-							</table>

-						</div>

-					</div>

-				</div>

-			</div>

-		</div>

-	</div>

-</div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+	<div class="w-ecomp-main-container">
+		<div class="widget-onboarding" id="page-content">
+			<div id="title" class="w-ecomp-main-view-title">
+				<h1 class="heading-page">Widget Onboarding</h1>
+			</div>
+			<div class="widgets-table">
+				<div class="table-control">
+					<div class="c-ecomp-abs-select default">
+						<div class="table-dropdown">
+							<select id="dropdown1" name="dropdown1" b2b-dropdown
+								placeholder-text="All application"
+								ng-model="widgetOnboarding.filterByApp.value">
+								<option b2b-dropdown-list
+									option-repeat="d in widgetOnboarding.availableApps"
+									value="{{d.value}}">{{d.title}}</option>
+							</select>
+						</div>
+					</div>
+					<input class="table-search" type="text"
+						id="widget-onboarding-table-search"
+						placeholder="Search in entire table"
+						ng-model="widgetOnboarding.searchString" />
+
+					<button id="widget-onboarding-button-add"
+						class="btn btn-alt btn-small"
+						ng-click="widgetOnboarding.openWidgetCatalogDetailsModal()">
+						<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add
+						Widget
+					</button>
+
+					<div id="widget-onboarding-communcation-message"
+						ng-show="widgetOnboarding.isCommError">Failed to communicate
+						with the widget microservice.</div>
+
+					<div ng-hide="widgetOnboarding.isCommError">
+						<div b2b-table table-data="portalAdmin.portalAdminsTableData"
+							ng-hide="widgetOnboarding.isLoadingTable"
+							search-string="portalAdmin.searchString" class="b2b-table-div">
+							<table>
+								<thead b2b-table-row type="header">
+									<tr>
+										<th id="widgets-catalog-th-header-name"
+											ng-repeat="header in widgetOnboarding.widgetsTableHeaders"
+											b2b-table-header key="{{header.value}}"
+											sortable="{{header.isSortable}}">{{header.name}}</th>
+										<th id="widgets-catalog-th-header-url" b2b-table-header
+											key="appName" sortable="false">Application</th>
+
+										<th id="widgets-catalog-th-header-download" b2b-table-header
+											sortable="false">Download</th>
+
+										<th id="widgets-catalog-th-header-delete" b2b-table-header
+											sortable="false">Delete</th>
+									</tr>
+								</thead>
+								<tbody b2b-table-row type="body" class="table-body"
+									row-repeat="rowData in widgetsList | filter:widgetOnboarding.filterByDropdownValue">
+									<tr>
+										<td b2b-table-body
+											ng-repeat="header in widgetOnboarding.widgetsTableHeaders"
+											id="widgets-catalog-widget-name-{{rowData.id}}-body"
+											ng-click="widgetOnboarding.openWidgetCatalogDetailsModal(rowData)">
+											<div id="widgets-catalog-widget-name-{{rowData.id}}"
+												ng-bind="rowData[header.value]"></div>
+										</td>
+
+										<td b2b-table-body
+											id="widget-catalog-widget-application-{{rowData.id}}-body"
+											ng-click="widgetOnboarding.openWidgetCatalogDetailsModal(rowData)">
+											<div ng-repeat="row in rowData.appContent">
+												<div id="widget-catalog-widget-application-{{rowData.id}}"
+													ng-bind="row"></div>
+											</div>
+										</td>
+
+										<td b2b-table-body>
+											<div id="widget-onboarding-div-download-widget-{{$index}}" class="icon-arrows-download"
+												ng-click="widgetOnboarding.downloadWidget(rowData)"></div>
+										</td>
+
+										<td b2b-table-body>
+											<div id="widget-onboarding-div-delete-widget-{{$index}}" class="icon-misc-trash"
+												ng-click="widgetOnboarding.deleteWidget(rowData)"></div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.js b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.js
index eb628b4f..a7c29043 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.js
@@ -1,226 +1,226 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

-/**

- * Created by nnaffar on 12/20/15.

- */

-'use strict';

-(function () {

-    class WidgetDetailsModalCtrl {

-        constructor($scope, $log, applicationsService, widgetsService, errorMessageByCode,

-                    ECOMP_URL_REGEX, $window, userProfileService, $cookies, $rootScope) {

-

-            let newWidgetModel = {

-                name: null,

-                appId: null,

-                appName: null,

-                width: 360,

-                height: 300,

-                url: null

-            };

-

-            let getAvailableApps = () => {

-                applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

-                    this.availableApps=[];

-                    for(var i=0;i<apps.length;i++) {

-                        if (!apps[i].restrictedApp) {

-                            $log.debug('WidgetDetailsModalCtrl::getAvailableApps: pushing {id: ', apps[i].id, 'name: ', apps[i].name,

-                                            'restrictedApp: ', apps[i].restrictedApp, '}');

-                            this.availableApps.push({

-                                id: apps[i].id,

-                                name: apps[i].name,

-                                restrictedApp: apps[i].restrictedApp

-                            });

-                        }

-                    }

-                    

-                    if (this.isEditMode) {

-                        this.selectedApp = _.find(apps, {id: this.widget.appId});

-                        if(!this.selectedApp){

-                            //workaround to display validation errors for apps dropdown in case selectedApp isn't valid

-                            $scope.widgetForm.app.$dirty = true;

-                        }

-                    } else {

-                        this.selectedApp = null;

-                    }

-                    //init appId & appName with selectedApp

-                    this.updateSelectedApp();

-                }).catch(err => {

-                    confirmBoxService.showInformation('There was a problem retrieving the Widgets. ' +

-                        'Please try again later.').then(isConfirmed => {});

-                    $log.error('WidgetDetailsModalCtrl::getAvailableApps error: '+ err);

-                });

-            };

-            /**/

-

-            let init = () => {

-                this.isSaving = false;

-                if ($scope.ngDialogData && $scope.ngDialogData.widget) {

-                    $log.debug('WidgetDetailsModalCtrl::getAvailableApps: Edit widget mode for', $scope.ngDialogData.widget);

-                    this.isEditMode = true;

-                    this.widget = _.clone($scope.ngDialogData.widget);

-                } else {

-                    $log.debug('WidgetDetailsModalCtrl::init: New app mode');

-                    this.isEditMode = false;

-                    this.widget = _.clone(newWidgetModel);

-                }

-                getAvailableApps();

-            };

-

-            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

-

-            //This part handles conflict errors (409)

-            this.conflictMessages = {};

-            this.scrollApi = {};

-            let handleConflictErrors = err => {

-                if(!err.data){

-                    return;

-                }

-                if(!err.data.length){ //support objects

-                    err.data = [err.data]

-                }

-                _.forEach(err.data, item => {

-                    _.forEach(item.fields, field => {

-                        //set conflict message

-                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];

-                        //set field as invalid

-                        $scope.widgetForm[field.name].$setValidity('conflict', false);

-                        //set watch once to clear error after user correction

-                        watchOnce[field.name]();

-                    });

-                });

-                this.scrollApi.scrollTop();

-            };

-

-            let resetConflict = fieldName => {

-                delete this.conflictMessages[fieldName];

-                if($scope.widgetForm[fieldName]){

-                    $scope.widgetForm[fieldName].$setValidity('conflict', true);

-                }

-            };

-

-            let watchOnce = {

-                name: () => {

-                    let unregisterName = $scope.$watchGroup(['widgetDetails.selectedApp','widgetDetails.widget.name'], (newVal, oldVal) => {

-                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){

-                            resetConflict('name');

-                            unregisterName();

-                        }

-                    });

-                },

-                url: () => {

-                    let unregisterUrl = $scope.$watch('widgetDetails.widget.url', (newVal, oldVal) => {

-                        if(newVal.toLowerCase() !== oldVal.toLowerCase()) {

-                            resetConflict('url');

-                            unregisterUrl();

-                        }

-                    });

-                }

-            };

-            //***************************

-

-            this.updateSelectedApp = () => {

-                if (!this.selectedApp) {

-                    return;

-                }

-                this.widget.appId = this.selectedApp.id;

-                this.widget.appName = this.selectedApp.name;

-            };

-

-            let emptyCookies = () => {

-                userProfileService.getUserProfile()

-                    .then(profile=> {

-                        $scope.orgUserId = profile.orgUserId;

-                        if ($cookies.getObject($scope.orgUserId + '_widget') != undefined && $cookies.getObject($scope.orgUserId + '_widget') != null) {

-                            $cookies.remove($scope.orgUserId + '_widget');

-                        }

-                    }).catch(err => {

-                        $log.error('WidgetDetailsModalCtrl::emptyCookies: There was a problem emptying the cookies! No user error presented though.');

-                    });

-            };

-

-            this.saveChanges = () => {

-                if($scope.widgetForm.$invalid){

-                    return;

-                }

-                this.isSaving = true;

-                if(this.isEditMode){

-                    widgetsService.updateWidget(this.widget.id, this.widget)

-                        .then(() => {

-                            $log.debug('WidgetDetailsModalCtrl::saveChanges: Widget update succeeded!');

-                            $scope.closeThisDialog(true);

-                            emptyCookies();

-                        }).catch(err => {

-                            if(err.status === 409){//Conflict

-                                handleConflictErrors(err);

-                            } else {

-                                confirmBoxService.showInformation('There was a problem saving the Widget. ' +

-                                    'Please try again later. Error Status: ' + err.status).then(isConfirmed => {});

-                            }

-                            $log.error('WidgetDetailsModalCtrl::saveChanges error: ', err);

-                        }).finally(()=>{

-                            this.isSaving = false;

-                            // for bug in IE 11

-                            var objOffsetVersion = objAgent.indexOf("MSIE");

-                            if (objOffsetVersion != -1) {

-                                $log.debug('WidgetDetailsModalCtrl::saveChanges: Browser is IE, forcing Refresh');

-                                $window.location.reload();            // for bug in IE 11

-                            }

-                            // for bug in IE 11

-                        });

-                } else {

-                    widgetsService.createWidget(this.widget)

-                        .then(() => {

-                            $log.debug('WidgetDetailsModalCtrl::createWidget: Widget creation succeeded!');

-                            $scope.closeThisDialog(true);

-                            emptyCookies();

-                            $rootScope.noWidgets = false;

-                        }).catch(err => {

-                        if(err.status === 409){//Conflict

-                            handleConflictErrors(err);

-                        } else {

-                            confirmBoxService.showInformation('There was a problem creating the Widget. ' +

-                                'Please try again later. Error Status: ' + err.status).then(isConfirmed => {});

-                        }

-                        $log.error('WidgetDetailsModalCtrl::createWidget error: ',err);

-                    }).finally(()=>{

-                        this.isSaving = false;

-                        // for bug in IE 11

-                        var objOffsetVersion = objAgent.indexOf("MSIE");

-                        if (objOffsetVersion != -1) {

-                            $log.debug('WidgetDetailsModalCtrl::createWidget: Browser is IE, forcing Refresh');

-                            $window.location.reload();            // for bug in IE 11

-                        }

-                        // for bug in IE 11

-                    });

-                }

-            };

-

-            init();

-

-            $scope.$on('$stateChangeStart', e => {

-                //Disable navigation when modal is opened

-                e.preventDefault();

-            });

-        }

-    }

-    WidgetDetailsModalCtrl.$inject = ['$scope', '$log', 'applicationsService', 'widgetsService', 'errorMessageByCode',

-        'ECOMP_URL_REGEX', '$window','userProfileService','$cookies', '$rootScope'];

-    angular.module('ecompApp').controller('WidgetDetailsModalCtrl', WidgetDetailsModalCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+/**
+ * Created by nnaffar on 12/20/15.
+ */
+'use strict';
+(function () {
+    class WidgetDetailsModalCtrl {
+        constructor($scope, $log, applicationsService, widgetsService, errorMessageByCode,
+                    ECOMP_URL_REGEX, $window, userProfileService, $cookies, $rootScope) {
+
+            let newWidgetModel = {
+                name: null,
+                appId: null,
+                appName: null,
+                width: 360,
+                height: 300,
+                url: null
+            };
+
+            let getAvailableApps = () => {
+                applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+                    this.availableApps=[];
+                    for(var i=0;i<apps.length;i++) {
+                        if (!apps[i].restrictedApp) {
+                            $log.debug('WidgetDetailsModalCtrl::getAvailableApps: pushing {id: ', apps[i].id, 'name: ', apps[i].name,
+                                            'restrictedApp: ', apps[i].restrictedApp, '}');
+                            this.availableApps.push({
+                                id: apps[i].id,
+                                name: apps[i].name,
+                                restrictedApp: apps[i].restrictedApp
+                            });
+                        }
+                    }
+                    
+                    if (this.isEditMode) {
+                        this.selectedApp = _.find(apps, {id: this.widget.appId});
+                        if(!this.selectedApp){
+                            //workaround to display validation errors for apps dropdown in case selectedApp isn't valid
+                            $scope.widgetForm.app.$dirty = true;
+                        }
+                    } else {
+                        this.selectedApp = null;
+                    }
+                    //init appId & appName with selectedApp
+                    this.updateSelectedApp();
+                }).catch(err => {
+                    confirmBoxService.showInformation('There was a problem retrieving the Widgets. ' +
+                        'Please try again later.').then(isConfirmed => {});
+                    $log.error('WidgetDetailsModalCtrl::getAvailableApps error: '+ err);
+                });
+            };
+            /**/
+
+            let init = () => {
+                this.isSaving = false;
+                if ($scope.ngDialogData && $scope.ngDialogData.widget) {
+                    $log.debug('WidgetDetailsModalCtrl::getAvailableApps: Edit widget mode for', $scope.ngDialogData.widget);
+                    this.isEditMode = true;
+                    this.widget = _.clone($scope.ngDialogData.widget);
+                } else {
+                    $log.debug('WidgetDetailsModalCtrl::init: New app mode');
+                    this.isEditMode = false;
+                    this.widget = _.clone(newWidgetModel);
+                }
+                getAvailableApps();
+            };
+
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+
+            //This part handles conflict errors (409)
+            this.conflictMessages = {};
+            this.scrollApi = {};
+            let handleConflictErrors = err => {
+                if(!err.data){
+                    return;
+                }
+                if(!err.data.length){ //support objects
+                    err.data = [err.data]
+                }
+                _.forEach(err.data, item => {
+                    _.forEach(item.fields, field => {
+                        //set conflict message
+                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
+                        //set field as invalid
+                        $scope.widgetForm[field.name].$setValidity('conflict', false);
+                        //set watch once to clear error after user correction
+                        watchOnce[field.name]();
+                    });
+                });
+                this.scrollApi.scrollTop();
+            };
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                if($scope.widgetForm[fieldName]){
+                    $scope.widgetForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+
+            let watchOnce = {
+                name: () => {
+                    let unregisterName = $scope.$watchGroup(['widgetDetails.selectedApp','widgetDetails.widget.name'], (newVal, oldVal) => {
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
+                            resetConflict('name');
+                            unregisterName();
+                        }
+                    });
+                },
+                url: () => {
+                    let unregisterUrl = $scope.$watch('widgetDetails.widget.url', (newVal, oldVal) => {
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()) {
+                            resetConflict('url');
+                            unregisterUrl();
+                        }
+                    });
+                }
+            };
+            //***************************
+
+            this.updateSelectedApp = () => {
+                if (!this.selectedApp) {
+                    return;
+                }
+                this.widget.appId = this.selectedApp.id;
+                this.widget.appName = this.selectedApp.name;
+            };
+
+            let emptyCookies = () => {
+                userProfileService.getUserProfile()
+                    .then(profile=> {
+                        $scope.orgUserId = profile.orgUserId;
+                        if ($cookies.getObject($scope.orgUserId + '_widget') != undefined && $cookies.getObject($scope.orgUserId + '_widget') != null) {
+                            $cookies.remove($scope.orgUserId + '_widget');
+                        }
+                    }).catch(err => {
+                        $log.error('WidgetDetailsModalCtrl::emptyCookies: There was a problem emptying the cookies! No user error presented though.');
+                    });
+            };
+
+            this.saveChanges = () => {
+                if($scope.widgetForm.$invalid){
+                    return;
+                }
+                this.isSaving = true;
+                if(this.isEditMode){
+                    widgetsService.updateWidget(this.widget.id, this.widget)
+                        .then(() => {
+                            $log.debug('WidgetDetailsModalCtrl::saveChanges: Widget update succeeded!');
+                            $scope.closeThisDialog(true);
+                            emptyCookies();
+                        }).catch(err => {
+                            if(err.status === 409){//Conflict
+                                handleConflictErrors(err);
+                            } else {
+                                confirmBoxService.showInformation('There was a problem saving the Widget. ' +
+                                    'Please try again later. Error Status: ' + err.status).then(isConfirmed => {});
+                            }
+                            $log.error('WidgetDetailsModalCtrl::saveChanges error: ', err);
+                        }).finally(()=>{
+                            this.isSaving = false;
+                            // for bug in IE 11
+                            var objOffsetVersion = objAgent.indexOf("MSIE");
+                            if (objOffsetVersion != -1) {
+                                $log.debug('WidgetDetailsModalCtrl::saveChanges: Browser is IE, forcing Refresh');
+                                $window.location.reload();            // for bug in IE 11
+                            }
+                            // for bug in IE 11
+                        });
+                } else {
+                    widgetsService.createWidget(this.widget)
+                        .then(() => {
+                            $log.debug('WidgetDetailsModalCtrl::createWidget: Widget creation succeeded!');
+                            $scope.closeThisDialog(true);
+                            emptyCookies();
+                            $rootScope.noWidgets = false;
+                        }).catch(err => {
+                        if(err.status === 409){//Conflict
+                            handleConflictErrors(err);
+                        } else {
+                            confirmBoxService.showInformation('There was a problem creating the Widget. ' +
+                                'Please try again later. Error Status: ' + err.status).then(isConfirmed => {});
+                        }
+                        $log.error('WidgetDetailsModalCtrl::createWidget error: ',err);
+                    }).finally(()=>{
+                        this.isSaving = false;
+                        // for bug in IE 11
+                        var objOffsetVersion = objAgent.indexOf("MSIE");
+                        if (objOffsetVersion != -1) {
+                            $log.debug('WidgetDetailsModalCtrl::createWidget: Browser is IE, forcing Refresh');
+                            $window.location.reload();            // for bug in IE 11
+                        }
+                        // for bug in IE 11
+                    });
+                }
+            };
+
+            init();
+
+            $scope.$on('$stateChangeStart', e => {
+                //Disable navigation when modal is opened
+                e.preventDefault();
+            });
+        }
+    }
+    WidgetDetailsModalCtrl.$inject = ['$scope', '$log', 'applicationsService', 'widgetsService', 'errorMessageByCode',
+        'ECOMP_URL_REGEX', '$window','userProfileService','$cookies', '$rootScope'];
+    angular.module('ecompApp').controller('WidgetDetailsModalCtrl', WidgetDetailsModalCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.spec.js
index 1762fadb..927836ae 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.controller.spec.js
@@ -1,154 +1,154 @@
-/*-

- * ================================================================================

- * 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: WidgetDetailsModalCtrl', ()=> {

-//     /**

-//      * INITIALIZATION

-//      */

-//     beforeEach(module('testUtils'));

-//     beforeEach(module('ecompApp'));

-//

-//     let promisesTestUtils;

-//     //destroy $http default cache before starting to prevent the error 'default cache already exists'

-//     //_promisesTestUtils_ comes from testUtils for promises resolve/reject

-//     beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {

-//         _CacheFactory_.destroyAll();

-//         promisesTestUtils = _promisesTestUtils_;

-//     }));

-//

-//     let widgetDetails, scope, $controller, $q, $rootScope, $log, widgetsService, errorMessageByCode, ECOMP_URL_REGEX;

-//     let deferredAdminApps, deferredUserProfile;

-//     let applicationsServiceMock, widgetsServiceMock, userProfileServiceMock;

-//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {

-//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];

-//

-//         deferredAdminApps = $q.defer();

-//         deferredUserProfile = $q.defer();

-//         /*applicationsServiceMock = {

-//             getAppsForSuperAdminAndAccountAdmin: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             }

-//         };*/

-//

-//         widgetsServiceMock = {

-//             updateWidget: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             },

-//             createWidget: () => {

-//                 var promise = () => {return deferredAdminApps.promise};

-//                 var cancel = jasmine.createSpy();

-//                 return {

-//                     promise: promise,

-//                     cancel: cancel

-//                 }

-//             }

-//         };

-//

-//         userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);

-//         userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);

-//

-//         applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock',['getAppsForSuperAdminAndAccountAdmin']);

-//         applicationsServiceMock.getAppsForSuperAdminAndAccountAdmin.and.returnValue(deferredAdminApps.promise);

-//

-//     }));

-//

-//     beforeEach(()=> {

-//         errorMessageByCode = [];

-//         ECOMP_URL_REGEX = "";

-//         scope = $rootScope.$new();

-//         createController(scope);

-//     });

-//

-//     let createController = scopeObj => {

-//         widgetDetails = $controller('WidgetDetailsModalCtrl', {

-//             $scope: scope,

-//             $log: $log,

-//             applicationsService: applicationsServiceMock,

-//             widgetsService: widgetsServiceMock,

-//             errorMessageByCode: errorMessageByCode,

-//             ECOMP_URL_REGEX: ECOMP_URL_REGEX,

-//             userProfileService: userProfileServiceMock

-//         });

-//     };

-//

-//     /**

-//      * MOCK DATA

-//      */

-//     let newWidgetModel = {

-//         name: null,

-//         appId: null,

-//         appName: null,

-//         width: 360,

-//         height: 300,

-//         url: null

-//     };

-//     let exsistingWidget = {

-//         name: 'some widget',

-//         appId: 1,

-//         appName: 'APP NAME',

-//         width: 360,

-//         height: 300,

-//         url: 'http://a.com'

-//     };

-//     let adminApps = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];

-//

-//     /**

-//      * TEST CASES

-//      */

-//     it('should initialize controller with new widget mode when opening the modal without selected widget', ()=> {

-//         expect(widgetDetails.widget).toEqual(newWidgetModel);

-//     });

-//

-//     it('should initialize controller with exsisting widget details when opening the modal with selected widget', ()=> {

-//         scope.ngDialogData = {

-//             widget: exsistingWidget

-//         };

-//         createController(scope);

-//         expect(widgetDetails.widget).toEqual(exsistingWidget);

-//     });

-//

-//     it('should populate widget selected app name and id when initializing controller with widget', () =>{

-//         deferredAdminApps.resolve(adminApps);

-//         scope.ngDialogData = {

-//             widget: exsistingWidget

-//         };

-//         createController(scope);

-//         scope.$apply();

-//         expect(widgetDetails.widget.appId).toEqual(adminApps[0].id);

-//         expect(widgetDetails.widget.appName).toEqual(adminApps[0].name);

-//     });

-//

-//     //TODO:

-//     //save changes fail - conflict handling

-//     //save changes success

-//

-//

-//

-// });

+/*-
+ * ================================================================================
+ * 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: WidgetDetailsModalCtrl', ()=> {
+//     /**
+//      * INITIALIZATION
+//      */
+//     beforeEach(module('testUtils'));
+//     beforeEach(module('ecompApp'));
+//
+//     let promisesTestUtils;
+//     //destroy $http default cache before starting to prevent the error 'default cache already exists'
+//     //_promisesTestUtils_ comes from testUtils for promises resolve/reject
+//     beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {
+//         _CacheFactory_.destroyAll();
+//         promisesTestUtils = _promisesTestUtils_;
+//     }));
+//
+//     let widgetDetails, scope, $controller, $q, $rootScope, $log, widgetsService, errorMessageByCode, ECOMP_URL_REGEX;
+//     let deferredAdminApps, deferredUserProfile;
+//     let applicationsServiceMock, widgetsServiceMock, userProfileServiceMock;
+//     beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+//         [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];
+//
+//         deferredAdminApps = $q.defer();
+//         deferredUserProfile = $q.defer();
+//         /*applicationsServiceMock = {
+//             getAppsForSuperAdminAndAccountAdmin: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             }
+//         };*/
+//
+//         widgetsServiceMock = {
+//             updateWidget: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             },
+//             createWidget: () => {
+//                 var promise = () => {return deferredAdminApps.promise};
+//                 var cancel = jasmine.createSpy();
+//                 return {
+//                     promise: promise,
+//                     cancel: cancel
+//                 }
+//             }
+//         };
+//
+//         userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);
+//         userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);
+//
+//         applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock',['getAppsForSuperAdminAndAccountAdmin']);
+//         applicationsServiceMock.getAppsForSuperAdminAndAccountAdmin.and.returnValue(deferredAdminApps.promise);
+//
+//     }));
+//
+//     beforeEach(()=> {
+//         errorMessageByCode = [];
+//         ECOMP_URL_REGEX = "";
+//         scope = $rootScope.$new();
+//         createController(scope);
+//     });
+//
+//     let createController = scopeObj => {
+//         widgetDetails = $controller('WidgetDetailsModalCtrl', {
+//             $scope: scope,
+//             $log: $log,
+//             applicationsService: applicationsServiceMock,
+//             widgetsService: widgetsServiceMock,
+//             errorMessageByCode: errorMessageByCode,
+//             ECOMP_URL_REGEX: ECOMP_URL_REGEX,
+//             userProfileService: userProfileServiceMock
+//         });
+//     };
+//
+//     /**
+//      * MOCK DATA
+//      */
+//     let newWidgetModel = {
+//         name: null,
+//         appId: null,
+//         appName: null,
+//         width: 360,
+//         height: 300,
+//         url: null
+//     };
+//     let exsistingWidget = {
+//         name: 'some widget',
+//         appId: 1,
+//         appName: 'APP NAME',
+//         width: 360,
+//         height: 300,
+//         url: 'http://a.com'
+//     };
+//     let adminApps = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];
+//
+//     /**
+//      * TEST CASES
+//      */
+//     it('should initialize controller with new widget mode when opening the modal without selected widget', ()=> {
+//         expect(widgetDetails.widget).toEqual(newWidgetModel);
+//     });
+//
+//     it('should initialize controller with exsisting widget details when opening the modal with selected widget', ()=> {
+//         scope.ngDialogData = {
+//             widget: exsistingWidget
+//         };
+//         createController(scope);
+//         expect(widgetDetails.widget).toEqual(exsistingWidget);
+//     });
+//
+//     it('should populate widget selected app name and id when initializing controller with widget', () =>{
+//         deferredAdminApps.resolve(adminApps);
+//         scope.ngDialogData = {
+//             widget: exsistingWidget
+//         };
+//         createController(scope);
+//         scope.$apply();
+//         expect(widgetDetails.widget.appId).toEqual(adminApps[0].id);
+//         expect(widgetDetails.widget.appName).toEqual(adminApps[0].name);
+//     });
+//
+//     //TODO:
+//     //save changes fail - conflict handling
+//     //save changes success
+//
+//
+//
+// });
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html
index 46a5b1c7..0f77ef63 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html
@@ -1,152 +1,152 @@
-<!--

-  ================================================================================

-  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.

-  ================================================================================

-  -->

-<div class="widget-details-modal">

-    <div id="'widgets-details-title" class="title">Widget Details</div>

-

-    <div class="widget-properties-main" scroll-top="widgetDetails.scrollApi">

-        <form id="widgets-details-form" name="widgetForm" novalidate autocomplete="off">

-            <!-- We can remove this script once we get to AT&T Corporate Firefox version 47

-                 autocomplete="off" won't work until v47 -->

-            <script type="text/javascript">

-                document.getElementById("appForm").reset();

-            </script>

-            <div class="item required">

-                <div class="item-label">Application Name</div>

-                <div class="custom-select-wrap">

-                    <select id="widgets-details-select-app"

-                            class="select-field"

-                            ng-model="widgetDetails.selectedApp"

-                            ng-change="widgetDetails.updateSelectedApp();"

-                            ng-options="app.name for app in widgetDetails.availableApps track by app.id"

-                            ng-disabled="!widgetDetails.availableApps || !widgetDetails.availableApps.length"

-                            name="app"

-                            required>

-                        <option id="widgets-details-select-app-disabled" value="" disabled style="display: none;">Select application</option>

-                    </select>

-                </div>

-                <div class="error-container" ng-show="widgetForm.app.$dirty">

-                    <div ng-messages="widgetForm.app.$error" class="error-container">

-                        <small id="widgets-details-select-app-error-required" class="err-message" ng-message="required">Application is required</small>

-                    </div>

-                </div>

-            </div>

-            <div class="item required">

-                <div class="item-label">Widget Name</div>

-                <input id="widgets-details-input-name"

-                       class="input-field"

-                       type="text"

-                       ng-model="widgetDetails.widget.name"

-                       name="name"

-                       maxlength="100"

-                       ng-pattern="/^[a-zA-Z0-9_\s\&]*$/"

-                       required/>

-

-                <div class="error-container" ng-show="widgetDetails.conflictMessages.name">

-                    <small id="widgets-details-input-name-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.name"></small>

-                </div>

-                <div class="error-container" ng-show="widgetForm.name.$dirty || widgetDetails.isEditMode">

-                    <div ng-messages="widgetForm.name.$error" class="error-container">

-                        <small id="widgets-details-input-name-required" class="err-message" ng-message="required">Widget Name is required</small>

-                        <small id="widgets-details-input-name-pattern" class="err-message" ng-message="pattern">Widget Name must be letters, numbers, or underscore</small>

-                    </div>

-                </div>

-            </div>

-            <div class="item required">

-                <div class="left-item">

-                    <div class="item-label">Width</div>

-                    <input id="widgets-details-input-width"

-                           class="input-field"

-                           type="number"

-                           ng-model="widgetDetails.widget.width"

-                           name="width"

-                           min="300"

-                           required

-                           disabled/>

-

-                    <div class="error-container" ng-show="widgetForm.width.$dirty || widgetDetails.isEditMode">

-                        <div ng-messages="widgetForm.width.$error" class="error-container">

-                            <small id="widgets-details-input-width-required" class="err-message" ng-message="required">Widget width is required</small>

-                            <small id="widgets-details-input-min-width" class="err-message" ng-message="min">Minimum width is 300</small>

-                        </div>

-                    </div>

-                </div>

-                <div class="right-item required">

-                    <div class="item-label">Height</div>

-                    <input id="widgets-details-input-height"

-                           class="input-field"

-                           type="number"

-                           ng-model="widgetDetails.widget.height"

-                           name="height"

-                           min="200"

-                           required

-                           disabled/>

-

-                    <div class="error-container" ng-show="widgetForm.height.$dirty || widgetDetails.isEditMode">

-                        <div ng-messages="widgetForm.height.$error" class="error-container">

-                            <small id="widgets-details-input-height-required" class="err-message" ng-message="required">Widget height is required</small>

-                            <small id="widgets-details-input-height-minimum" class="err-message" ng-message="min">Minimum height is 200</small>

-                        </div>

-                    </div>

-                </div>

-            </div>

-            <div class="item required">

-                <div class="item-label">URL</div>

-                <input id="widgets-details-input-URL"

-                       class="input-field"

-                       type="url"

-                       ng-model="widgetDetails.widget.url"

-                       name="url"

-                       maxlength="256"

-                       ng-pattern="widgetDetails.ECOMP_URL_REGEX"

-                       required/>

-

-                <!--

-                <div class="url-validation-button"

-                     ng-class="{'disabled': widgetForm.url.$invalid}"

-                     ng-click="(widgetForm.url.$invalid) || widgetDetails.validateUrl()">Validate URL

-                </div>

-                -->

-

-                <div class="error-container" ng-show="widgetDetails.conflictMessages.url">

-                    <small id="widgets-details-input-URL-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.url"></small>

-                </div>

-                <div class="error-container" ng-show="widgetForm.url.$dirty || widgetDetails.isEditMode">

-                    <div ng-messages="widgetForm.url.$error" class="error-container">

-                        <small id="widgets-details-input-URL-required" class="err-message" ng-message="required">Widget URL is required</small>

-                        <small id="widgets-details-input-URL-pattern" class="err-message" ng-message="pattern">Incorrect URL pattern</small>

-                    </div>

-                    <!--

-                    <div class="error-container" ng-show="widgetForm.url.$valid && !widgetDetails.conflictMessages.url">

-                        <small class="err-message" ng-hide="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>

-                        <small class="valid-message" ng-show="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>

-                    </div>

-                    -->

-                </div>

-

-            </div>

-        </form>

-    </div>

-    <div class="dialog-control">

-        <span class="ecomp-save-spinner" ng-show="widgetDetails.isSaving"></span>

-        <div id="widgets-details-next-button" class="next-button"

-             ng-class="{disabled: widgetForm.$invalid}" ng-click="widgetDetails.saveChanges()">Save</div>

-        <div id="widgets-details-cancel-button" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>

-    </div>

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="widget-details-modal">
+    <div id="'widgets-details-title" class="title">Widget Details</div>
+
+    <div class="widget-properties-main" scroll-top="widgetDetails.scrollApi">
+        <form id="widgets-details-form" name="widgetForm" novalidate autocomplete="off">
+            <!-- We can remove this script once we get to AT&T Corporate Firefox version 47
+                 autocomplete="off" won't work until v47 -->
+            <script type="text/javascript">
+                document.getElementById("appForm").reset();
+            </script>
+            <div class="item required">
+                <div class="item-label">Application Name</div>
+                <div class="custom-select-wrap">
+                    <select id="widgets-details-select-app"
+                            class="select-field"
+                            ng-model="widgetDetails.selectedApp"
+                            ng-change="widgetDetails.updateSelectedApp();"
+                            ng-options="app.name for app in widgetDetails.availableApps track by app.id"
+                            ng-disabled="!widgetDetails.availableApps || !widgetDetails.availableApps.length"
+                            name="app"
+                            required>
+                        <option id="widgets-details-select-app-disabled" value="" disabled style="display: none;">Select application</option>
+                    </select>
+                </div>
+                <div class="error-container" ng-show="widgetForm.app.$dirty">
+                    <div ng-messages="widgetForm.app.$error" class="error-container">
+                        <small id="widgets-details-select-app-error-required" class="err-message" ng-message="required">Application is required</small>
+                    </div>
+                </div>
+            </div>
+            <div class="item required">
+                <div class="item-label">Widget Name</div>
+                <input id="widgets-details-input-name"
+                       class="input-field"
+                       type="text"
+                       ng-model="widgetDetails.widget.name"
+                       name="name"
+                       maxlength="100"
+                       ng-pattern="/^[a-zA-Z0-9_\s\&]*$/"
+                       required/>
+
+                <div class="error-container" ng-show="widgetDetails.conflictMessages.name">
+                    <small id="widgets-details-input-name-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.name"></small>
+                </div>
+                <div class="error-container" ng-show="widgetForm.name.$dirty || widgetDetails.isEditMode">
+                    <div ng-messages="widgetForm.name.$error" class="error-container">
+                        <small id="widgets-details-input-name-required" class="err-message" ng-message="required">Widget Name is required</small>
+                        <small id="widgets-details-input-name-pattern" class="err-message" ng-message="pattern">Widget Name must be letters, numbers, or underscore</small>
+                    </div>
+                </div>
+            </div>
+            <div class="item required">
+                <div class="left-item">
+                    <div class="item-label">Width</div>
+                    <input id="widgets-details-input-width"
+                           class="input-field"
+                           type="number"
+                           ng-model="widgetDetails.widget.width"
+                           name="width"
+                           min="300"
+                           required
+                           disabled/>
+
+                    <div class="error-container" ng-show="widgetForm.width.$dirty || widgetDetails.isEditMode">
+                        <div ng-messages="widgetForm.width.$error" class="error-container">
+                            <small id="widgets-details-input-width-required" class="err-message" ng-message="required">Widget width is required</small>
+                            <small id="widgets-details-input-min-width" class="err-message" ng-message="min">Minimum width is 300</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="right-item required">
+                    <div class="item-label">Height</div>
+                    <input id="widgets-details-input-height"
+                           class="input-field"
+                           type="number"
+                           ng-model="widgetDetails.widget.height"
+                           name="height"
+                           min="200"
+                           required
+                           disabled/>
+
+                    <div class="error-container" ng-show="widgetForm.height.$dirty || widgetDetails.isEditMode">
+                        <div ng-messages="widgetForm.height.$error" class="error-container">
+                            <small id="widgets-details-input-height-required" class="err-message" ng-message="required">Widget height is required</small>
+                            <small id="widgets-details-input-height-minimum" class="err-message" ng-message="min">Minimum height is 200</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="item required">
+                <div class="item-label">URL</div>
+                <input id="widgets-details-input-URL"
+                       class="input-field"
+                       type="url"
+                       ng-model="widgetDetails.widget.url"
+                       name="url"
+                       maxlength="256"
+                       ng-pattern="widgetDetails.ECOMP_URL_REGEX"
+                       required/>
+
+                <!--
+                <div class="url-validation-button"
+                     ng-class="{'disabled': widgetForm.url.$invalid}"
+                     ng-click="(widgetForm.url.$invalid) || widgetDetails.validateUrl()">Validate URL
+                </div>
+                -->
+
+                <div class="error-container" ng-show="widgetDetails.conflictMessages.url">
+                    <small id="widgets-details-input-URL-conflict" class="err-message" ng-bind="widgetDetails.conflictMessages.url"></small>
+                </div>
+                <div class="error-container" ng-show="widgetForm.url.$dirty || widgetDetails.isEditMode">
+                    <div ng-messages="widgetForm.url.$error" class="error-container">
+                        <small id="widgets-details-input-URL-required" class="err-message" ng-message="required">Widget URL is required</small>
+                        <small id="widgets-details-input-URL-pattern" class="err-message" ng-message="pattern">Incorrect URL pattern</small>
+                    </div>
+                    <!--
+                    <div class="error-container" ng-show="widgetForm.url.$valid && !widgetDetails.conflictMessages.url">
+                        <small class="err-message" ng-hide="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>
+                        <small class="valid-message" ng-show="widgetDetails.urlValidity.isValid" ng-bind="widgetDetails.urlValidity.message"></small>
+                    </div>
+                    -->
+                </div>
+
+            </div>
+        </form>
+    </div>
+    <div class="dialog-control">
+        <span class="ecomp-save-spinner" ng-show="widgetDetails.isSaving"></span>
+        <div id="widgets-details-next-button" class="next-button"
+             ng-class="{disabled: widgetForm.$invalid}" ng-click="widgetDetails.saveChanges()">Save</div>
+        <div id="widgets-details-cancel-button" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+    </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.js b/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.js
index e46f1ce5..1998d6d1 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.js
@@ -1,168 +1,168 @@
-/*-

- * ================================================================================

- * 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 () {

-    class WidgetsCtrl {

-        constructor($log, applicationsService, widgetsService, ngDialog, confirmBoxService,

-                    userProfileService, $cookies, $scope, $rootScope) {

-            //$log.info('WidgetsCtrl::init: Starting Up');

-            $scope.infoMessage = true;

-            $rootScope.noWidgets = false;

-

-            let populateAvailableApps = widgets => {

-                let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};

-                this.availableApps = [allPortalsFilterObject];

-                this.filterByApp = this.availableApps[0];

-                applicationsService.getAppsForSuperAdminAndAccountAdmin().then(myApps => {

-                    var reSortedApp = myApps.sort(getSortOrder("name"));

-                    var realAppIndex = 1;

-                    for (let i = 1; i <= reSortedApp.length; i++) {

-                        if (!reSortedApp[i-1].restrictedApp) {

-                            $log.debug('WidgetsCtrl::populateAvailableApps: pushing {index: ', realAppIndex, 'title: ', reSortedApp[i - 1].name,

-                                'value: ', reSortedApp[i - 1].name, '}');

-                            this.availableApps.push({

-                                index: realAppIndex,

-                                title: reSortedApp[i - 1].name,

-                                value: reSortedApp[i - 1].name

-                            })

-                            realAppIndex = realAppIndex + 1;

-                        }

-                    }

-                }).catch(err => {

-                    $log.error(err);

-                });

-            };

-

-            let getOnboardingWidgets = () => {

-                this.isLoadingTable = true;

-                widgetsService.getManagedWidgets().then(res => {

-                    $log.debug('WidgetsCtrl.getOnboardingWidgets:: ' + JSON.stringify(res));

-                    // if (JSON.stringify(res) === '[]') {

-                    //     confirmBoxService.showInformation('There are currently no Widgets. ').then(isConfirmed => {});

-                    // }

-                    var reSortedWidget = res.sort(getSortOrder("name"));

-                    this.widgetsList = reSortedWidget;

-                    populateAvailableApps(reSortedWidget);

-                    // $log.info('WidgetsHomeCtrl::getUserWidgets count : ' + $scope.widgetsList.length);

-                    if (Object.keys(res).length === 0 ) {

-                        $rootScope.noWidgets = true;

-                        $scope.isLoadingTable = false;

-                        $log.info('WidgetsHomeCtrl::getUserWidgets: There are no available Widgets');

-                    }

-                }).catch(err => {

-                    confirmBoxService.showInformation('There was a problem retrieving the Widgets. ' +

-                        'Please try again later.').then(isConfirmed => {});

-                    $log.error('WidgetsCtrl::getOnboardingWidgets error: ' + err);

-                }).finally(()=> {

-                    this.isLoadingTable = false;

-                });

-            };

-

-            // Refactor this into a directive

-            let getSortOrder = (prop) => {

-                return function(a, b) {

-                    // $log.debug('a = ' + JSON.stringify(a) + "| b = " + JSON.stringify(b));

-                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {

-                        return 1;

-                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {

-                        return -1;

-                    }

-                    return 0;

-                }

-            }

-

-            $scope.hideMe = function () {

-                $scope.infoMessage = false;

-            }

-

-            let init = () => {

-                this.isLoadingTable = false;

-                getOnboardingWidgets();

-

-                /*Table general configuration params*/

-                this.searchString = '';

-                /*Table data*/

-                this.widgetsTableHeaders = [

-                    {name: 'Widget Name', value: 'name', isSortable: false},

-                    {name: 'Application', value: 'appName', isSortable: true},

-                    {name: 'Width', value: 'width', isSortable: false},

-                    {name: 'Height', value: 'height', isSortable: false}

-                ];

-                this.widgetsList = [];

-            };

-

-            this.filterByDropdownValue = item => {

-                if(this.filterByApp.value === ''){

-                    return true;

-                }

-                return item.appName === this.filterByApp.value;

-            };

-

-            this.openWidgetDetailsModal = (selectedWidget) => {

-                let data = null;

-                if(selectedWidget){

-                    if(!selectedWidget.id){

-                        $log.error('Widget id not found');

-                        return;

-                    }

-                    data = {

-                        widget: selectedWidget

-                    }

-                }

-                ngDialog.open({

-                    templateUrl: 'app/views/widgets/widget-details-dialog/widget-details.modal.html',

-                    controller: 'WidgetDetailsModalCtrl',

-                    controllerAs: 'widgetDetails',

-                    data: data

-                }).closePromise.then(needUpdate => {

-                    if(needUpdate.value === true){

-                        $log.debug('WidgetsCtrl::openWidgetDetailsModal: updating table data...');

-                        getOnboardingWidgets();

-                    }

-                });

-            };

-

-            this.deleteWidget = widget => {

-                confirmBoxService.deleteItem(widget.name).then(isConfirmed => {

-                    if(isConfirmed){

-                        if(!widget || !widget.id){

-                            $log.error('WidgetsCtrl::deleteWidget: No widget or ID... cannot delete');

-                            return;

-                        }

-                        widgetsService.deleteWidget(widget.id).then(() => {

-                            this.widgetsList.splice(this.widgetsList.indexOf(widget), 1);

-                        }).catch(err => {

-                            $log.error('WidgetsCtrl::deleteWidget error:',err);

-                            confirmBoxService.showInformation('There was a problem deleting the Widget. ' +

-                                'Please try again later.').then(isConfirmed => {});

-                        });

-                    }

-                }).catch(err => {

-                    $log.error('WidgetsCtrl::deleteWidget error:',err);

-                });

-            };

-

-            init();

-        }

-    }

-    WidgetsCtrl.$inject = ['$log', 'applicationsService', 'widgetsService', 'ngDialog', 'confirmBoxService',

-        'userProfileService','$cookies', '$scope', '$rootScope'];

-    angular.module('ecompApp').controller('WidgetsCtrl', WidgetsCtrl);

-})();

+/*-
+ * ================================================================================
+ * 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 () {
+    class WidgetsCtrl {
+        constructor($log, applicationsService, widgetsService, ngDialog, confirmBoxService,
+                    userProfileService, $cookies, $scope, $rootScope) {
+            //$log.info('WidgetsCtrl::init: Starting Up');
+            $scope.infoMessage = true;
+            $rootScope.noWidgets = false;
+
+            let populateAvailableApps = widgets => {
+                let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};
+                this.availableApps = [allPortalsFilterObject];
+                this.filterByApp = this.availableApps[0];
+                applicationsService.getAppsForSuperAdminAndAccountAdmin().then(myApps => {
+                    var reSortedApp = myApps.sort(getSortOrder("name"));
+                    var realAppIndex = 1;
+                    for (let i = 1; i <= reSortedApp.length; i++) {
+                        if (!reSortedApp[i-1].restrictedApp) {
+                            $log.debug('WidgetsCtrl::populateAvailableApps: pushing {index: ', realAppIndex, 'title: ', reSortedApp[i - 1].name,
+                                'value: ', reSortedApp[i - 1].name, '}');
+                            this.availableApps.push({
+                                index: realAppIndex,
+                                title: reSortedApp[i - 1].name,
+                                value: reSortedApp[i - 1].name
+                            })
+                            realAppIndex = realAppIndex + 1;
+                        }
+                    }
+                }).catch(err => {
+                    $log.error(err);
+                });
+            };
+
+            let getOnboardingWidgets = () => {
+                this.isLoadingTable = true;
+                widgetsService.getManagedWidgets().then(res => {
+                    $log.debug('WidgetsCtrl.getOnboardingWidgets:: ' + JSON.stringify(res));
+                    // if (JSON.stringify(res) === '[]') {
+                    //     confirmBoxService.showInformation('There are currently no Widgets. ').then(isConfirmed => {});
+                    // }
+                    var reSortedWidget = res.sort(getSortOrder("name"));
+                    this.widgetsList = reSortedWidget;
+                    populateAvailableApps(reSortedWidget);
+                    // $log.info('WidgetsHomeCtrl::getUserWidgets count : ' + $scope.widgetsList.length);
+                    if (Object.keys(res).length === 0 ) {
+                        $rootScope.noWidgets = true;
+                        $scope.isLoadingTable = false;
+                        $log.info('WidgetsHomeCtrl::getUserWidgets: There are no available Widgets');
+                    }
+                }).catch(err => {
+                    confirmBoxService.showInformation('There was a problem retrieving the Widgets. ' +
+                        'Please try again later.').then(isConfirmed => {});
+                    $log.error('WidgetsCtrl::getOnboardingWidgets error: ' + err);
+                }).finally(()=> {
+                    this.isLoadingTable = false;
+                });
+            };
+
+            // Refactor this into a directive
+            let getSortOrder = (prop) => {
+                return function(a, b) {
+                    // $log.debug('a = ' + JSON.stringify(a) + "| b = " + JSON.stringify(b));
+                    if (a[prop].toLowerCase() > b[prop].toLowerCase()) {
+                        return 1;
+                    } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {
+                        return -1;
+                    }
+                    return 0;
+                }
+            }
+
+            $scope.hideMe = function () {
+                $scope.infoMessage = false;
+            }
+
+            let init = () => {
+                this.isLoadingTable = false;
+                getOnboardingWidgets();
+
+                /*Table general configuration params*/
+                this.searchString = '';
+                /*Table data*/
+                this.widgetsTableHeaders = [
+                    {name: 'Widget Name', value: 'name', isSortable: false},
+                    {name: 'Application', value: 'appName', isSortable: true},
+                    {name: 'Width', value: 'width', isSortable: false},
+                    {name: 'Height', value: 'height', isSortable: false}
+                ];
+                this.widgetsList = [];
+            };
+
+            this.filterByDropdownValue = item => {
+                if(this.filterByApp.value === ''){
+                    return true;
+                }
+                return item.appName === this.filterByApp.value;
+            };
+
+            this.openWidgetDetailsModal = (selectedWidget) => {
+                let data = null;
+                if(selectedWidget){
+                    if(!selectedWidget.id){
+                        $log.error('Widget id not found');
+                        return;
+                    }
+                    data = {
+                        widget: selectedWidget
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/widgets/widget-details-dialog/widget-details.modal.html',
+                    controller: 'WidgetDetailsModalCtrl',
+                    controllerAs: 'widgetDetails',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                    if(needUpdate.value === true){
+                        $log.debug('WidgetsCtrl::openWidgetDetailsModal: updating table data...');
+                        getOnboardingWidgets();
+                    }
+                });
+            };
+
+            this.deleteWidget = widget => {
+                confirmBoxService.deleteItem(widget.name).then(isConfirmed => {
+                    if(isConfirmed){
+                        if(!widget || !widget.id){
+                            $log.error('WidgetsCtrl::deleteWidget: No widget or ID... cannot delete');
+                            return;
+                        }
+                        widgetsService.deleteWidget(widget.id).then(() => {
+                            this.widgetsList.splice(this.widgetsList.indexOf(widget), 1);
+                        }).catch(err => {
+                            $log.error('WidgetsCtrl::deleteWidget error:',err);
+                            confirmBoxService.showInformation('There was a problem deleting the Widget. ' +
+                                'Please try again later.').then(isConfirmed => {});
+                        });
+                    }
+                }).catch(err => {
+                    $log.error('WidgetsCtrl::deleteWidget error:',err);
+                });
+            };
+
+            init();
+        }
+    }
+    WidgetsCtrl.$inject = ['$log', 'applicationsService', 'widgetsService', 'ngDialog', 'confirmBoxService',
+        'userProfileService','$cookies', '$scope', '$rootScope'];
+    angular.module('ecompApp').controller('WidgetsCtrl', WidgetsCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.spec.js
index 3841a2b3..32cc3a1f 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.spec.js
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widgets.controller.spec.js
@@ -1,19 +1,19 @@
-/*-

- * ================================================================================

- * 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.

- * ================================================================================

- */

+/*-
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widgets.tpl.html b/ecomp-portal-FE-common/client/app/views/widgets/widgets.tpl.html
index 8afb8267..9d6f66f8 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widgets.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widgets.tpl.html
@@ -1,81 +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.

-  ================================================================================

-  -->

-<div class="w-ecomp-main">

-    <div class="w-ecomp-main-container">

-        <div class="widgets-page-main" id="page-content">

-            <div id="widget-onboarding-title" class="w-ecomp-main-view-title">Widget Onboarding</div>

-            <div class="widgets-table">

-                <div class="table-control">

-                        <div class="c-ecomp-portal-abs-select default">

-                            <div class="form-field" id="widegets-available-apps"

-                                 att-select="widgets.availableApps"

-                                 ng-model="widgets.filterByApp"></div>

-                        </div>

-                    <input class="table-search" type="text" id="widget-onboarding-table-search"

-                           placeholder="Search in entire table"

-                           ng-model="widgets.searchString"/>

-

-                    <div id="widget-onboarding-button-add" class="add-button" ng-click="widgets.openWidgetDetailsModal()">Add Widget</div>

-                </div>

-                <div class="error-text" ng-show="infoMessage">

-                    <span class="error-help">Only widgets for active applications are displayed.</span>

-                    <button type="button" class="close" ng-click="hideMe()">&times;</button>

-                </div>

-                <div class="error-text" ng-show="noWidgets">

-                    <span class="informational">There are currently no widgets available.</span>

-                </div>

-

-                <span class="ecomp-spinner" ng-show="widgets.isLoadingTable"></span>

-                <div class="c-ecomp-portal-abs-table default" ng-hide="widgets.isLoadingTable">

-                    <table b2b-table

-                           table-data="widgets.widgetsList"

-                           search-string="widgets.searchString"

-                           view-per-page="widgets.viewPerPageIgnored"

-                           current-page="widgets.currentPageIgnored"

-                           total-page="widgets.totalPageIgnored">

-                        <thead b2b-table-row type="header">

-                        <tr>

-                            <th id="widget-onboarding-th-header-name" ng-repeat="header in widgets.widgetsTableHeaders" b2b-table-header key="{{header.value}}" sortable="{{header.isSortable}}">{{header.name}}</th>

-                            <th id="widget-onboarding-th-header-url" b2b-table-header  key="url" sortable="{{false}}">URL</th>

-                            <th id="widget-onboarding-th-header-delete" b2b-table-header  sortable="{{false}}">Delete</th>

-                        </tr>

-                        </thead>

-                        <tbody b2b-table-row type="body"

-                               class="table-body"

-                               row-repeat="rowData in widgets.widgetsList | filter:widgets.filterByDropdownValue">

-                        <tr >

-                            <td b2b-table-body ng-repeat="header in widgets.widgetsTableHeaders" ng-click="widgets.openWidgetDetailsModal(rowData)">

-                                <div id="widget-onboarding-div-{{rowData[header.value].split(' ').join('-')}}" ng-bind="rowData[header.value]"></div>

-                            </td>

-                            <td b2b-table-body ng-click="widgets.openWidgetDetailsModal(rowData)">

-                                <div id="widget-onboarding-div-url-{{rowData[header.value].split(' ').join('-')}}" ng-bind="rowData.url | trusted"></div>

-                            </td>

-                            <td b2b-table-body>

-                                <div id="widget-onboarding-div-delete-widget-{{$index}}" class="delete-widget" ng-click="widgets.deleteWidget(rowData)"></div>

-                            </td>

-                        </tr>

-                        </tbody>

-                    </table>

-                </div>

-            </div>

-        </div>

-    </div>

-

-</div>

+<!--
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+    <div class="w-ecomp-main-container">
+        <div class="widgets-page-main" id="page-content">
+            <div id="widget-onboarding-title" class="w-ecomp-main-view-title">Widget Onboarding</div>
+            <div class="widgets-table">
+                <div class="table-control">
+                        <div class="c-ecomp-portal-abs-select default">
+                            <div class="form-field" id="widegets-available-apps"
+                                 att-select="widgets.availableApps"
+                                 ng-model="widgets.filterByApp"></div>
+                        </div>
+                    <input class="table-search" type="text" id="widget-onboarding-table-search"
+                           placeholder="Search in entire table"
+                           ng-model="widgets.searchString"/>
+
+                    <div id="widget-onboarding-button-add" class="add-button" ng-click="widgets.openWidgetDetailsModal()">Add Widget</div>
+                </div>
+                <div class="error-text" ng-show="infoMessage">
+                    <span class="error-help">Only widgets for active applications are displayed.</span>
+                    <button type="button" class="close" ng-click="hideMe()">&times;</button>
+                </div>
+                <div class="error-text" ng-show="noWidgets">
+                    <span class="informational">There are currently no widgets available.</span>
+                </div>
+
+                <span class="ecomp-spinner" ng-show="widgets.isLoadingTable"></span>
+                <div class="c-ecomp-portal-abs-table default" ng-hide="widgets.isLoadingTable">
+                    <table b2b-table
+                           table-data="widgets.widgetsList"
+                           search-string="widgets.searchString"
+                           view-per-page="widgets.viewPerPageIgnored"
+                           current-page="widgets.currentPageIgnored"
+                           total-page="widgets.totalPageIgnored">
+                        <thead b2b-table-row type="header">
+                        <tr>
+                            <th id="widget-onboarding-th-header-name" ng-repeat="header in widgets.widgetsTableHeaders" b2b-table-header key="{{header.value}}" sortable="{{header.isSortable}}">{{header.name}}</th>
+                            <th id="widget-onboarding-th-header-url" b2b-table-header  key="url" sortable="{{false}}">URL</th>
+                            <th id="widget-onboarding-th-header-delete" b2b-table-header  sortable="{{false}}">Delete</th>
+                        </tr>
+                        </thead>
+                        <tbody b2b-table-row type="body"
+                               class="table-body"
+                               row-repeat="rowData in widgets.widgetsList | filter:widgets.filterByDropdownValue">
+                        <tr >
+                            <td b2b-table-body ng-repeat="header in widgets.widgetsTableHeaders" ng-click="widgets.openWidgetDetailsModal(rowData)">
+                                <div id="widget-onboarding-div-{{rowData[header.value].split(' ').join('-')}}" ng-bind="rowData[header.value]"></div>
+                            </td>
+                            <td b2b-table-body ng-click="widgets.openWidgetDetailsModal(rowData)">
+                                <div id="widget-onboarding-div-url-{{rowData[header.value].split(' ').join('-')}}" ng-bind="rowData.url | trusted"></div>
+                            </td>
+                            <td b2b-table-body>
+                                <div id="widget-onboarding-div-delete-widget-{{$index}}" class="delete-widget" ng-click="widgets.deleteWidget(rowData)"></div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/ecomp-portal-FE-common/client/bower_components_external/b2b/css/b2b-angular/b2b-angular.css b/ecomp-portal-FE-common/client/bower_components_external/b2b/css/b2b-angular/b2b-angular.css
index 32774d62..47181f80 100644
--- a/ecomp-portal-FE-common/client/bower_components_external/b2b/css/b2b-angular/b2b-angular.css
+++ b/ecomp-portal-FE-common/client/bower_components_external/b2b/css/b2b-angular/b2b-angular.css
@@ -1,11827 +1,11827 @@
-/*! b2b-angular-library - v1.0.1 - Last updated: 2017-03-02. Copyright (c) 2016 AT&T Services, Inc. */ 

-.b2b-horizontal-table {

-  border: 1px solid;

-  width: 651px; }

-  .b2b-horizontal-table ::-webkit-scrollbar {

-    height: 10px; }

-  .b2b-horizontal-table ::-webkit-scrollbar-thumb {

-    background: #666666;

-    border-radius: 5px; }

-  .b2b-horizontal-table .b2b-horizontal-table-inner-container {

-    width: 650px;

-    padding-left: 150px;

-    overflow-x: scroll; }

-  .b2b-horizontal-table th:first-child {

-    background-color: #FFFFFF; }

-  .b2b-horizontal-table td:first-child {

-    background-color: #FFFFFF;

-    border-top: 1px solid #cccccc;

-    border-right: 1px solid #cccccc;

-    margin-top: -0.5px; }

-  .b2b-horizontal-table tr th:nth-child(2), .b2b-horizontal-table tr td:nth-child(2) {

-    border-left: none; }

-  .b2b-horizontal-table .b2b-horizontal-table-column-info {

-    padding-top: 16px;

-    text-align: center; }

-  .b2b-horizontal-table .b2b-horizontal-table-arrows .btn-arrow:hover, .b2b-horizontal-table .b2b-horizontal-table-arrows .btn-arrow:focus {

-    text-decoration: none; }

-  .b2b-horizontal-table .b2b-horizontal-table-arrows .left {

-    float: left;

-    margin: 10px;

-    color: #0568ae; }

-    .b2b-horizontal-table .b2b-horizontal-table-arrows .left[disabled] {

-      color: #767676;

-      cursor: not-allowed; }

-  .b2b-horizontal-table .b2b-horizontal-table-arrows .right {

-    float: right;

-    clear: right;

-    margin: 10px;

-    color: #0568ae; }

-    .b2b-horizontal-table .b2b-horizontal-table-arrows .right[disabled] {

-      color: #767676;

-      cursor: not-allowed; }

-    .b2b-horizontal-table .b2b-horizontal-table-arrows .right.btn-arrow .btn {

-      margin-right: 0;

-      margin-left: 10px; }

-

-@-moz-document url-prefix() {

-  .b2b-horizontal-table td:first-child {

-    border-top: none; } }

-* {

-  box-sizing: border-box; }

-

-:root {

-  -ms-overflow-style: -ms-autohiding-scrollbar;

-  overflow-y: scroll;

-  -ms-text-size-adjust: 100%;

-  -webkit-text-size-adjust: 100%;

-  box-sizing: border-box;

-  font: 0.625pc/1.5 sans-serif;

-  text-rendering: optimizeLegibility; }

-

-html {

-  overflow-y: scroll;

-  -webkit-overflow-scrolling: touch;

-  height: 100%;

-  position: relative; }

-

-h1,

-h2,

-h3,

-h4,

-h5,

-p,

-blockquote,

-figure,

-ol,

-ul {

-  margin: 0;

-  padding: 0; }

-

-/* a:focus {

-  outline: thin dotted #191919;

-} */

-sub,

-sup {

-  font-size: 75%;

-  line-height: 0;

-  position: relative;

-  vertical-align: top; }

-

-sup {

-  top: .75em;

-  display: inline-block; }

-

-sub {

-  bottom: -0.25em; }

-

-img {

-  max-width: 100%;

-  height: auto;

-  vertical-align: middle;

-  border: 0;

-  -ms-interpolation-mode: bicubic; }

-

-.img-no-rwd {

-  max-width: inherit !important; }

-

-svg {

-  display: inline-block; }

-

-.responsive-img {

-  width: 100%;

-  height: auto; }

-

-button,

-input,

-select,

-textarea {

-  margin: 0;

-  font-size: 100%;

-  vertical-align: middle; }

-

-::-moz-focus-inner {

-  padding: 0;

-  border: 0; }

-

-button,

-html input[type="button"],

-input[type="reset"],

-input[type="submit"] {

-  appearance: button;

-  cursor: pointer; }

-

-label,

-select,

-button,

-input[type="button"],

-input[type="reset"],

-input[type="submit"],

-input[type="radio"],

-input[type="checkbox"] {

-  cursor: pointer; }

-

-input[type=search] {

-  -webkit-appearance: textfield; }

-

-input[type=search]:-webkit-search-cancel-button,

-input[type=search]:-webkit-search-decoration {

-  -webkit-appearance: none; }

-

-textarea {

-  overflow: auto;

-  vertical-align: top;

-  resize: none; }

-

-select {

-  -moz-appearance: none;

-  -webkit-appearance: none; }

-

-[aria-busy=true] {

-  cursor: progress; }

-

-[aria-controls] {

-  cursor: pointer; }

-

-body {

-  background-color: #ffffff;

-  color: #191919;

-  font-family: "Omnes-ECOMP-W02", Arial;

-/*  font-size: 1.6rem;

-  line-height: 2rem;*/

-  margin: 0;

-  position: relative;

-  width: 100%;

-  -moz-osx-font-smoothing: grayscale;

-  -webkit-font-smoothing: antialiased; }

-

-small {

-  font-size: 1.6rem; }

-

-.container {

-  margin: 0 auto;

-  padding: 0; }

-

-.tooltip {

-  display: inline-block;

-  height: 20px;

-  margin: 1px 0 0 7px;

-  vertical-align: middle; }

-

-.tooltip-wrapper {

-  display: none; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02";

-  src: url("fonts/Omnes_ATTW02.eot");

-  src: url("fonts/Omnes_ATTW02.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02.woff") format("woff"), url("fonts/Omnes_ATTW02.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Medium";

-  src: url("fonts/Omnes_ATTW02Medium.eot");

-  src: url("fonts/Omnes_ATTW02Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Medium.woff") format("woff"), url("fonts/Omnes_ATTW02Medium.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Italic";

-  src: url("fonts/Omnes_ATTW02Italic.eot");

-  src: url("fonts/Omnes_ATTW02Italic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Italic.woff") format("woff"), url("fonts/Omnes_ATTW02Italic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Light";

-  src: url("fonts/Omnes_ATTW02Light.eot");

-  src: url("fonts/Omnes_ATTW02Light.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Light.woff") format("woff"), url("fonts/Omnes_ATTW02Light.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Bold";

-  src: url("fonts/Omnes_ATTW02Bold.eot");

-  src: url("fonts/Omnes_ATTW02Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Bold.woff") format("woff"), url("fonts/Omnes_ATTW02Bold.woff2") format("woff2"), url("fonts/Omnes_ATTW02Bold.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Light-Italic";

-  src: url("fonts/Omnes_ATTW02LightItalic.eot");

-  src: url("fonts/Omnes_ATTW02LightItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02LightItalic.woff") format("woff"), url("fonts/Omnes_ATTW02LightItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02LightItalic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Medium-Italic";

-  src: url("fonts/Omnes_ATTW02MediumItalic.eot");

-  src: url("fonts/Omnes_ATTW02MediumItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02MediumItalic.woff") format("woff"), url("fonts/Omnes_ATTW02MediumItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02MediumItalic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Bold-Italic";

-  src: url("fonts/Omnes_ATTW02BoldItalic.eot");

-  src: url("fonts/Omnes_ATTW02BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02BoldItalic.woff") format("woff"), url("fonts/Omnes_ATTW02BoldItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02BoldItalic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-/* TODO: Build a reference page for these classes */

-.font-regular {

-  font-family: "Omnes-ECOMP-W02", Arial !important; }

-

-.font-light {

-  font-family: "Omnes-ECOMP-W02-Light", Arial !important; }

-

-.font-italic {

-  font-family: "Omnes-ECOMP-W02-Italic", Arial !important; }

-

-.font-light-italic {

-  font-family: "Omnes-ECOMP-W02-Light-Italic", Arial !important; }

-

-.font-medium {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial !important; }

-

-.font-medium-italic {

-  font-family: "Omnes-ECOMP-W02-Medium-Italic", Arial !important; }

-

-.font-reset {

-  font-style: normal;

-  font-variant: normal;

-  font-weight: normal;

-  text-transform: none; }

-

-.visible-phone {

-  display: none !important; }

-

-.visible-tablet {

-  display: none !important; }

-

-.hidden-desktop {

-  display: none !important; }

-

-.visible-desktop {

-  display: inherit !important; }

-

-.row,

-.row-nowrap {

-  margin-left: 0; }

-

-.row:before,

-.row-nowrap:before,

-.row:after,

-.row-nowrap:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.row:after,

-.row-nowrap:after {

-  clear: both; }

-

-.row:before,

-.row-nowrap:before,

-.row:after,

-.row-nowrap:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.row:after,

-.row-nowrap:after {

-  clear: both; }

-

-.row,

-.row-nowrap {

-  display: flex; }

-

-.row > [class*="span"],

-.row-nowrap > [class*="span"] {

-  float: left;

-  margin-right: 14px;

-  margin-right: 1.40845%\9; }

-

-.row > [class*="span"]:last-child,

-.row-nowrap > [class*="span"]:last-child {

-  margin-right: 0; }

-

-.row > [class*="span"].centered,

-.row-nowrap > [class*="span"].centered {

-  margin-left: auto !important;

-  margin-right: auto !important; }

-

-.row.no-flex,

-.row-nowrap.no-flex {

-  display: block; }

-

-.row.no-flex > [class*="span"],

-.row-nowrap.no-flex > [class*="span"] {

-  margin-right: 1.408450704225352%; }

-

-.row.no-flex > [class*="span"]:last-child,

-.row-nowrap.no-flex > [class*="span"]:last-child {

-  margin-right: 0; }

-

-.row.flex-justify,

-.row-nowrap.flex-justify {

-  justify-content: space-between; }

-

-.row.flex-justify > [class*="span"],

-.row-nowrap.flex-justify > [class*="span"] {

-  flex: 1 1 0; }

-

-.row.flex-justify > .flex-col,

-.row-nowrap.flex-justify > .flex-col {

-  margin-right: 14px;

-  margin-right: 1.40845%\9; }

-

-.row.flex-wrap,

-.row-nowrap.flex-wrap {

-  flex-wrap: wrap; }

-

-.align-items-top {

-  align-items: flex-start; }

-

-.align-items-center {

-  align-items: center; }

-

-.align-items-bottom {

-  align-items: flex-end; }

-

-.align-self-top {

-  align-self: flex-start; }

-

-.align-self-center {

-  align-self: center; }

-

-.align-self-bottom {

-  align-self: flex-end; }

-

-.row .fixed-230 {

-  flex: 0;

-  display: block;

-  width: 230px;

-  vertical-align: top;

-  min-width: 230px;

-  background-color: #efefef; }

-

-.row .fluid-space {

-  flex: 1 1 0;

-  display: block;

-  vertical-align: top;

-  padding-left: 0;

-  padding-right: 20px;

-  width: 100%; }

-

-.row .fixed-230 + .fluid-space {

-  padding-left: 20px;

-  padding-right: 20px; }

-

-.row .fluid-space:last-child {

-  padding-right: 0; }

-

-.span1 {

-  width: 7.042253521126761%; }

-

-.span2 {

-  width: 15.49295774647887%; }

-

-.span3 {

-  width: 23.94366197183099%; }

-

-.span4 {

-  width: 32.3943661971831%; }

-

-.span5 {

-  width: 40.84507042253521%; }

-

-.span6 {

-  width: 49.29577464788733%; }

-

-.span7 {

-  width: 57.74647887323944%; }

-

-.span8 {

-  width: 66.19718309859155%; }

-

-.span9 {

-  width: 74.64788732394367%; }

-

-.span10 {

-  width: 83.09859154929578%; }

-

-.span11 {

-  width: 91.54929577464789%; }

-

-.span12 {

-  width: 100%; }

-

-.offset1 {

-  margin-left: 8.450704225352113%; }

-

-.offset2 {

-  margin-left: 16.90140845070423%; }

-

-.offset3 {

-  margin-left: 25.35211267605634%; }

-

-.offset4 {

-  margin-left: 33.8028169%; }

-

-.offset5 {

-  margin-left: 42.25352113%; }

-

-.offset6 {

-  margin-left: 50.70422535%; }

-

-.offset7 {

-  margin-left: 59.15492958%; }

-

-.offset8 {

-  margin-left: 67.6056338%; }

-

-.offset9 {

-  margin-left: 76.05633803%; }

-

-.offset10 {

-  margin-left: 84.50704225%; }

-

-.offset11 {

-  margin-left: 92.95774648%; }

-

-.align-center {

-  margin: 0 auto;

-  text-align: center; }

-

-[class*="span"].align-center {

-  margin: 0 auto !important;

-  float: none; }

-

-.align-left .container {

-  padding-left: 0 !important;

-  margin: 0 !important; }

-

-/* BEGIN RESPONSIVE-4.LESS ************** */

-@media (min-width: 1025px) {

-  .row > [class*="span"],

-  .row-nowrap > [class*="span"] {

-    margin-right: 20px;

-    margin-right: 1.487301587301587%\9; }

-  .container {

-    padding-left: 20px;

-    padding-right: 20px;

-    max-width: 1260px; }

-  /* 1col = 6.878306878306879 */

-  /* 1colgutter = 1.587301587301587 */

-  .span0 {

-    display: none; }

-  .span1 {

-    width: 6.878306878306879%; }

-  .span2 {

-    width: 15.34391534391534%; }

-  .span3 {

-    width: 23.80952380952381%; }

-  .span4 {

-    width: 32.27513227513228%; }

-  .span5 {

-    width: 40.74074074074074%; }

-  .span6 {

-    width: 49.20634920634921%; }

-  .span7 {

-    width: 57.67195767195767%; }

-  .span8 {

-    width: 66.13756613756614%; }

-  .span9 {

-    width: 74.60317460317461%; }

-  .span10 {

-    width: 83.06878306878308%; }

-  .span11 {

-    width: 91.53439153439154%; }

-  .span12 {

-    width: 100%; }

-  .offset1 {

-    margin-left: 8.465608465608466%; }

-  .offset2 {

-    margin-left: 16.93121693121693%; }

-  .offset3 {

-    margin-left: 25.3968253968254%; }

-  .offset4 {

-    margin-left: 33.86243386%; }

-  .offset5 {

-    margin-left: 42.32804233%; }

-  .offset6 {

-    margin-left: 50.79365079%; }

-  .offset7 {

-    margin-left: 59.25925926%; }

-  .offset8 {

-    margin-left: 67.72486772%; }

-  .offset9 {

-    margin-left: 76.19047619%; }

-  .offset10 {

-    margin-left: 84.65608466%; }

-  .offset11 {

-    margin-left: 93.12169312%; }

-  .tooltip-size-control {

-    position: relative;

-    width: 400px; }

-  .thumbnails > li {

-    margin-left: 1.40845070422535%; }

-  .row .thumbnails {

-    margin-left: 0; } }

-

-/* END RESPONSIVE-4.LESS ****************** */

-/* BEGIN RESPONSIVE-3.LESS ******************* */

-@media (min-width: 768px) and (max-width: 1024px) {

-  .hidden-desktop {

-    display: inherit !important; }

-  .visible-desktop {

-    display: none !important; }

-  .visible-tablet {

-    display: inherit !important; }

-  .hidden-tablet {

-    display: none !important; }

-  .container {

-    width: 100%;

-    margin: 0 auto;

-    padding-left: 20px;

-    padding-right: 20px; }

-  .span0-md {

-    display: none; }

-  .span1-md {

-    width: 7.042253521126761%; }

-  .span2-md {

-    width: 15.49295774647887%; }

-  .span3-md {

-    width: 23.94366197183099%; }

-  .span4-md {

-    width: 32.3943661971831%; }

-  .span5-md {

-    width: 40.84507042253521%; }

-  .span6-md {

-    width: 49.29577464788733%; }

-  .span7-md {

-    width: 57.74647887323944%; }

-  .span8-md {

-    width: 66.19718309859155%; }

-  .span9-md {

-    width: 74.64788732394367%; }

-  .span10-md {

-    width: 83.09859154929578%; }

-  .span11-md {

-    width: 91.54929577464789%; }

-  .span12-md {

-    width: 100%; }

-  .offset1-md {

-    margin-left: 8.450704225352113%; }

-  .offset2-md {

-    margin-left: 16.90140845070423%; }

-  .offset3-md {

-    margin-left: 25.35211267605634%; }

-  .offset4-md {

-    margin-left: 33.8028169%; }

-  .offset5-md {

-    margin-left: 42.25352113%; }

-  .offset6-md {

-    margin-left: 50.70422535%; }

-  .offset7-md {

-    margin-left: 59.15492958%; }

-  .offset8-md {

-    margin-left: 67.6056338%; }

-  .offset9-md {

-    margin-left: 76.05633803%; }

-  .offset10-md {

-    margin-left: 84.50704225%; }

-  .offset11-md {

-    margin-left: 92.95774648%; }

-  .tooltip-size-control {

-    position: relative;

-    width: 300px; } }

-

-/* END RESPONSIVE-3.LESS ******************* */

-/* BEGIN RESPONSIVE-2.LESS *************** */

-@media (max-width: 767px) {

-  .hidden-desktop {

-    display: inherit !important; }

-  .visible-desktop {

-    display: none !important; }

-  .visible-phone {

-    display: inherit !important; }

-  .visible-tablet {

-    display: inherit !important; }

-  .hidden-phone {

-    display: none !important; }

-  .hidden-tablet {

-    display: none !important; }

-  .container {

-    width: auto;

-    padding-left: 15px;

-    padding-right: 15px; }

-  /*.row{ display:block; }*/

-  .row > [class*="span"] {

-    float: none;

-    margin-left: 0;

-    margin-right: 0;

-    width: 100%; }

-  .row {

-    display: block; }

-  .row.flex > .flex-col,

-  .row-nowrap.flex > .flex-col {

-    margin-right: 0; }

-  .row .fixed-230 {

-    display: block;

-    width: 100%; }

-  .row .fluid-space {

-    display: block;

-    padding-left: 0;

-    padding-right: 0;

-    width: auto; }

-  .row .fluid-space + .fixed-230 {

-    padding-left: 0; }

-  .row .fluid-space:last-child {

-    padding-right: 0; }

-  .span0-sm {

-    display: none; }

-  .span1-sm {

-    width: 7.042253521126761%; }

-  .span2-sm {

-    width: 15.49295774647887%; }

-  .span3-sm {

-    width: 23.94366197183099%; }

-  .span4-sm {

-    width: 32.3943661971831%; }

-  .span5-sm {

-    width: 40.84507042253521%; }

-  .span6-sm {

-    width: 49.29577464788733%; }

-  .span7-sm {

-    width: 57.74647887323944%; }

-  .span8-sm {

-    width: 66.19718309859155%; }

-  .span9-sm {

-    width: 74.64788732394367%; }

-  .span10-sm {

-    width: 83.09859154929578%; }

-  .span11-sm {

-    width: 91.54929577464789%; }

-  .span12-sm {

-    width: 100%; }

-  .offset1-sm {

-    margin-left: 8.450704225352113%; }

-  .offset2-sm {

-    margin-left: 16.90140845070423%; }

-  .offset3-sm {

-    margin-left: 25.35211267605634%; }

-  .offset4-sm {

-    margin-left: 33.8028169%; }

-  .offset5-sm {

-    margin-left: 42.25352113%; }

-  .offset6-sm {

-    margin-left: 50.70422535%; }

-  .offset7-sm {

-    margin-left: 59.15492958%; }

-  .offset8-sm {

-    margin-left: 67.6056338%; }

-  .offset9-sm {

-    margin-left: 76.05633803%; }

-  .offset10-sm {

-    margin-left: 84.50704225%; }

-  .offset11-sm {

-    margin-left: 92.95774648%; }

-  input {

-    padding: 8px 15px 8px 15px; }

-  .field-group input.input-emphasized[type="search"] + .reset-field:after {

-    top: 14px; }

-  .field-group input.input-emphasized[type="search"] + .reset-field {

-    height: 46px;

-    top: 1px; }

-  .marquee {

-    margin-bottom: 30px; }

-  .marquee .blur-overlay {

-    border-radius: 0;

-    position: absolute;

-    bottom: 0;

-    left: 0;

-    width: 100%;

-    margin: 0;

-    padding: 34px 15px 30px; }

-  .marquee + div {

-    margin-top: 30px; }

-  .marquee h1 {

-    font-size: 1.8rem;

-    letter-spacing: -0.035px; }

-  .marquee .lead {

-    font-size: 3.0rem;

-    line-height: 3.6rem;

-    margin-bottom: 0; }

-  .marquee p:not(.lead) {

-    font-family: "Omnes-ECOMP-W02-Light" , Arial;

-    font-size: 1.8rem;

-    margin-bottom: 0; }

-  .marquee .btn-fullwidth {

-    margin-top: 10px;

-    width: 100%;

-    float: none; }

-  .tooltip-size-control {

-    width: 100%; }

-  .table-wrapper,

-  .accordion-table-layout {

-    margin-left: -15px;

-    margin-right: -15px; }

-  .table-wrapper caption {

-    padding-left: 15px; } }

-

-@media (max-width: 480px) {

-  .span1-xsm {

-    width: 7.042253521126761%; }

-  .span2-xsm {

-    width: 15.49295774647887%; }

-  .span3-xsm {

-    width: 23.94366197183099%; }

-  .span4-xsm {

-    width: 32.3943661971831%; }

-  .span5-xsm {

-    width: 40.84507042253521%; }

-  .span6-xsm {

-    width: 49.29577464788733%; }

-  .span7-xsm {

-    width: 57.74647887323944%; }

-  .span8-xsm {

-    width: 66.19718309859155%; }

-  .span9-xsm {

-    width: 74.64788732394367%; }

-  .span10-xsm {

-    width: 83.09859154929578%; }

-  .span11-xsm {

-    width: 91.54929577464789%; }

-  .span12-xsm {

-    width: 100%; }

-  .offset1-xsm {

-    margin-left: 8.450704225352113%; }

-  .offset2-xsm {

-    margin-left: 16.90140845070423%; }

-  .offset3-xsm {

-    margin-left: 25.35211267605634%; }

-  .offset4-xsm {

-    margin-left: 33.8028169%; }

-  .offset5-xsm {

-    margin-left: 42.25352113%; }

-  .offset6-xsm {

-    margin-left: 50.70422535%; }

-  .offset7-xsm {

-    margin-left: 59.15492958%; }

-  .offset8-xsm {

-    margin-left: 67.6056338%; }

-  .offset9-xsm {

-    margin-left: 76.05633803%; }

-  .offset10-xsm {

-    margin-left: 84.50704225%; }

-  .offset11-xsm {

-    margin-left: 92.95774648%; } }

-

-/* END RESPONSIVE-2.LESS ******************* */

-/* BEGIN RESPONSIVE-1.LESS ************** */

-.xxxxxxxx-begin-responsive-480px.less {

-  /* placeholder */ }

-

-@media (max-width: 480px) {

-  .hidden-desktop {

-    display: inherit !important; }

-  .hidden-tablet {

-    display: inherit !important; }

-  .hidden-phone {

-    display: none !important; }

-  .visible-desktop {

-    display: none !important; }

-  .visible-tablet {

-    display: none !important; }

-  .visible-phone {

-    display: inherit !important; }

-  .container {

-    width: auto;

-    padding-left: 15px;

-    padding-right: 15px; } }

-

-@font-face {

-  font-family: 'icoPrimary';

-  src: url("fonts/icons/icoPrimary.eot?timestamp=@@timestamp");

-  src: url("fonts/icons/icoPrimary.eot?timestamp=@@timestamp#iefix") format("embedded-opentype"), url("data:font/woff2; charset=utf-8;base64,d09GMgABAAAAABD0AAsAAAAAIegAABClAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAfBEICroMr2IBNgIkA4EgC1IABCAFgyoHIBupG1GUj1aB7Gdh7HA7jbPiOgkYNpcuoRGZ37q6G3w0QpLZI9q02bs97HSRw5ogEesTAjElSqy0FGpCCRWzJBXR9DXJiydPX7T+Ip7vq3Pv2mcm2W+ShSugqkVXWVfbquUDpNKMTezCAYKwBVR91VU1+/0yazd3Lg9/AVmoSmRNKGStQEmoXKfLdLXNNyxbs5Yfwc8kTV8FeDfk73Xq+p9zCqBT5NCYYSvusE3/f1mxnmQFWA6RnaJdkoqgAvFKLJdQbnlDXMbO3TvsHZa1ZsvFBqhZqAl6879jOe2lIjbiiEUU6HPz354AaHoI7QMGgDpOXQeAvZtjQTfBi9SwGR2SIFAN8E15bK7/byAvdR15B0eq3dPoY80wQNCRBpSOYaquB+mFOI/OPmQdcg6lDWUMzf2mPPFfIgEMIB8Vhmz3g8Q/IzYiOSH/Lz9muMlr/jtGiCJVD2IyIRDYAKCZgxRuYmymuEdFrlK6KIorkyoV0Jgn91QkTcVrHlnDg0jnUvGnTA92OqstI80g6PVEEm6BJ58mg+OFFJIiZSQJRK/PEoSkZFHIMFiIwSg5iVar1xtzjZI/tyLTWigIQa1DY08zd4EUSVJK8Gz82QyGgCCkMyoZr7IHBBsvEoBwgxx6h+4EV3YeZwzc4W52q6lXGM9evr6oy1gTMmP79l5RTsJBClIq7jrFUaLH1BlHKTeOKPwhzFfAQqrZ2mdSzISbZTdbdQl5bjevMrg6SgcDfJsLwZ/gjUAu7PiWjAuyegyQbSvIRz8KdZreQMHJY91AKf2ArQnUq2M6QdzlV0h1cKvJFCQVXWrjZUR+mfsPuqrSKAw7vXHdA4jIfVYLo4QrFyzwSOWFzqWWIKXKCEE+n6FtUFH2YbuLsSii68GKBu9o6y0RSZVJ6FRPGxY6Wb2FSJub7hiVhvKqc+F2ZtFE3vy1GtWhiilfD6YouogRzzUU9QRuchi1FjSJJgeylOAoWaCMiX6CWJbjEw6CqMHl0OrKXnIfH7FAFHoZV2FPGgcTV4VSp4ELLxaGwcusuFYdvr5GheLQpKy5GMVLTbBdzuKpytLgd8xSTL08wGmaatJUkkztzRHn2w1Xct5RnWGYyhc+auWs9aErust7X2pNknPQ2B2xIlkrnvHaZA1jFaxXrNVb3cXM+hsVaV1EXdc/huV7XRgkZtxMJhCI4mMuecG0QWlOcxNicqGmtL5Yl1MtLdMuJZAYGFr+/P8+gr7e06WKrICOPml5b5Sf7tmW1JdFGrwGUEwBf/ugoV77AoqJkjXmTRyNQO+F45oBx8CweKoOWwPZj+aomITyzIUd5nHykU3h0LJjuvrUF2MQTKJTKF3omb9SMBepKzcOhZBoAWkP8+mKQRI+dD7mrTs3znGe6gr/mwGLt422RgkZnEDSK3zTEJuKNuypY3YIlACmD/E9UiDiW2pRpQFoIgY7UcwtdgFPmOI1KptGbgcZMkRPIREEQT6lN2dwYWs3U1lqLIorlivL7I4rN2oukpq/qu/QZiikJ5jZH+SjMMi4EXhLg9b7QhPFhFjkFki1i1pl8SNzSoZkDACAalthJVIMPBQdXQdiqtHyZrzsHFI1T5Gb6wPe+qNx+crLqRAFgeKxDOFLaukLuRIbl/ourN1HPnsxaSqUSLpJAXWIYs5UHlzOXzuteVtoQ9hau02jSTcwSs6UMVxp7dI8ung189KKGvmmpMtZF8G85uXCLcWOprejUii+ko1h/AYKs28W8lVRxlHzLI3XJYBelGiLoBBX01ilMCJwScYKsWmLVkmq3hLYezFPsXpoGkVE5aRiCpXBlhyDAsMTY/jqTSxhSLVsMwKRptxYOTg30SKjXESn43ch5IpJaBAUozLiiL05h3Fv0VN2IQVOPehaVXcThJXuuUP07jSi5YgkX2ndValmfTYCjkkCWR8V63ctCjduimfsyJwyXMMi0V6sJBKjXkPZ56wEKGZTEvPG49iM57DV0TwzvaYbajGyUZv0NuTSsnNYBdvKsVZ80SobcaqLo+xtycdXWB+FcsLCVjAcE0eYu6bcbIAxp3N1M+GWLWpksrCjNS5NMpa365lnKZz9bAw3TUuws386w6Zoq20INqiI5w/boj3XHG9/C3MNubDPWsPY/O5u09KaHVOf+vbCgu3+6z5//jc2vXnoO896lqr8R6+f2/+3/Id9t16NzQwm4gf+PncKN87cnnbF+sZXu3+sH5hdu8N1wRwqX6mdkxYu6pw+sW2997RlbPcH0/ZmTC8raJhvqPKYLvXHRhWudJ1Liu64Nz1W8PzkrZp6Z9LWpSP6fa/kdETO32qo9piy5EebyrZ4nnduD+7TLUhvKr613OaZIfbAshG9RfHkhuZOayS3tCbN4lZQQOUt7CEYG95Y7LrV1nEsHErjtvc7U3FsAU4PVnTl3GUMT+i0jMk+bNV9k3a984q/YP+GVL9/c+pBVZ7Gvrd4a81CErT+ojV89xV8dPwpYSkhdeQFsbU/BImq2YOBHTsCg7NnF7Smp9Vs1IHiwstT7vCvX+e/c8oU/x3r1t/pJwZ5vcwDM5Q4XaliSPRz3lVO0/posZkkb11CSuJ1weOcUyd/YPjR8IEMNpzXWqe+plZfVyty0Ta+hbOS+4Pf5+eQB1TkesscVVylVfWpwqpeIo+ZoNBXpr+m7+D83+FFaR3pYBNKfmNFtoNLqD+VsMNrGbzE/1kJMbia6E+rDmfQxMiOnos7MBPGczniMTmEC0RIN5G5tSsIWTFMdU1VqI6Xpri6VYdDOJypzNwIhQfQq/IHhgEY5LaybdyPNqvkJkJV6tvK2iyFAwbOgV9Wx9VnSraqrlGptkLhKMtVKSz+URWSxvuO4w5c+ZoW+nHfeEuEP8SwJA1THlNe7bQ/rsYFBzQfaIpwlKlCcBEi6ADB/HoNDjMowhoPzicj9C72LEWiQtTTeZbsSH8kbccSNEkpuNMeSQ9V0ZlhnvATXeK1XMiOLlVcNbkokdXLjVbLbcF2Y2BnWSxWtjMQKN8Jesoj7q5ySmoZhELhgawx451aHRErl0sOS5WjK7SR/70L9DPSJxQFHJCod5eSp4TGVrqNha981GKj7l0W2QAYb4DIgf7MRzL6D3oWg0RR8Hob0w/2ZzyS2Y+CrO0HbWQjILQRItofbI/YPtamLAOeQjAgH0d4IjtMVhCykoSZ7YHKsCquropUYZpZHT90yiY4+ECT4RefbRyPNykYkPewzh5K73tqrO/kkiUnfWPHCirpaTkWfa3vxypHHMydVDyqsTnYNtppK0W+fwozn7eXbcxSxhQIuIX6Wr1GH9Sr9SEi9YvM8YU/+8jIKk8QNbnTIquTCzti6ZyeS491FCYtiZvjFpYTzJp41vJp4J6lULO3NnWBM700r7aqrZmaIBZaBzeGbWVzV84YVf1EU853ybe8b7QojW6d5HDbeafdSdEgB2+32+D3NRpj54fZLwvC99mVzccCu8LEiqxx2YNZWEaH0/677E86jRpT8it4PjlV+Mu6J0Vh144nfrg77dq1wLWe/Y6994T//mvZWSjZN5H8ePVdv36Wwf/u1Y8JAkAIsBKbl47Ll9++2wzmu9/e9HFLzbIYIO41PbOPPMdEOCU/3Sg9a3bX57+hFtVv1NVXWUINujqdSpevU+q862up1UEROWGr63KbvtWcZYFjgd1WQeQIQKfv/fRKVdLxpCkCVlC7aAVO2p58udqwMfsljBIv7tt1UNKjATlYVfE1pmhKf10H3qktgGC/kYk6imEfAALQvGuq/BZoxCaUw2EsjWDQX9RTmMJJxqqDJLXLkXA4UU8z1DHto99cmRs9NvfsBpBnVCcfwc3xBfAZHKQp6yrHAetqau7Y/3qvEfPOzguH15gjv45zhAYoTAEAlYrW3iuxRcuBeAgAUCkE0ttVJq/ZnGKiMV2qMXtN5OxaIKljlsAszEVLJyYof/m8/L/cdcydFqyuDKfkeZiudqlBdxIAGK4b9JUNAEBS0cjW0hKqLzrGGiOnh3KQ/zP+avzv3uyVqkr6jqEERzETpZddeWYZuMFzMCckS8bWU8OdbYMBh8s10jG433q4j128fIas0f1p8rkb6jweLnX7OtuL+kpGBcrKgoESn9SsUvR4Pc0KX6atPtKUnJ3lTw6Sw8xTjUZQsArReKdhKA8Z9axQK95JCQIbf6d4dVoFXum8/L+RPeZOzU+iJ4+kzV/xyvj1IhSXlObJifEYeN2dxp+mD3oyxtTWTEjLz2e60vNVeAbz3vOiChblVxi/NFbko0rPy+6g473UEa6BhoHqSRNqfVRa3Zz9L9FcPLKtpDTQVjywaMCVMuJm0JFLXsOki3ypXQ70cBq6yXYAgEmkm0C6ZmZzjMlyCROr6iq6K1Zs7MovYVA47f9pWVit40j6vHVwGk/4uay9spjYHWVCzCIMeS7ceBFT4sNoRzwPXw8b/4KIjNR2D+hitbmpNR9o86D4fgvE4DgMWLpa1aARLEtHarsBwkeHS20xkbBYWCwsnsd7PCixPw2A8gwfyq3D5A8Mhu/kYWNu5IP+rfKHhvF4EcYMAOT+kX3gyOjgct+RvgW99/bc+9z5vp4+wyP3Htnx8PupRCcPPCfxIznC8Yh7PMBL3FtWTrcBOMK32gxsKw22MVvMd9ga1ZzZ3+N2thOtW3R/Z88Do5MDPzmEW/zAvoN37evbJ++7d9+F3fLaiznEQ/7Gp5K2Jw8OmgJasSIPEpK3UzRDYiWL8KxtIc2veoLtVb+vYS8K+/MXt7erb7Bu9U2WvS5eavPNPl/Fq+ol0Tlzoxnq1WS5trnU5LReMjlMTxQvdmm411KfpVyhbFzALMcLnn7llvEH1e+z6sfZCer3QJ4ozNngqVQ8oPAiWV332kDBUz0DlqjlkpUniltC1ktm3OZRj7ZDe4nEtHFtjFw6J46fLsQdzCbqh5kOvOkqu3czy/E2vJzB8xBjE47hSeAQUDQ+NIIJJHcgc33JO5go3T5nbvdKNih/LyMcY/AKjIRcPkhVk/UiuI5Kobe/Wfmb29tOdK4Y3xGNAZo99oRLIycsxqF/53E//4rOrZ7IcyUrz1zamdx7l22wa9VPbTt/+3RpwS7XGPXTfznuQ4seHl/I1Bfh7v704h7DbJ1YrZ9fk1Cjh89vud1+e6Dn9oLND1k2nyGb15Py4uQHm/bPPjd6TvWE86Nnb7oWF5eHKmfisSDQBo638MeOe4u9vwwNv3pLvPs/SCLXK3U61/uidPwYDwAaoAEAXk1sFTnoJryR2CFc6H1YnqgROygXnEj8QI9B6wABAAJ4aV5G3xSx/DcViwEA4HX9bwcnNv8/hYF6CgBUCoBj8/ctSgEwLfAaYK1MjKj3JKNalv6Np+hn6IVTECHLyhCO9gGOC0EIQwCL8Cq+AZgJs8mkBPDCFHwJcAOWw3x4DAZhFkRgrBZK8p8ApGFPeAVEoOa7qxHgnjy5EWikZwYFSliTQYMGqgAL+zIYYCE5QwEamBTUgAXu+SEdYXWNHjSQQYEAm5G2CX7EEE5kMCBDFiogxGbRQD5cnhVZ8IcXEWAWRGABBGDxrs+DaZm26jMzoXkuN4Qh+sQlDhpwMeaDHfLABW7SRUiQ/qzjCjAKohCDZTA3bBHS848Uz/MxDNlf8H9qtgQaVMKluR6D6M4VxWl3PQozoE+HVbPq54ZtzPEO3AU0bAAAAAA=") format("woff2"), url("data:application/font-woff; charset=utf-8;base64,d09GRgABAAAAACJAAAsAAAAAIfQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgEAQFaGNtYXAAAAFoAAAAfAAAAHy9F7zuZ2FzcAAAAeQAAAAIAAAACAAAABBnbHlmAAAB7AAAHRgAAB0Yg9YlNWhlYWQAAB8EAAAANgAAADYLSS2jaGhlYQAAHzwAAAAkAAAAJAbOAvZobXR4AAAfYAAAAKAAAACglK4SEGxvY2EAACAAAAAAUgAAAFKIhIEEbWF4cAAAIFQAAAAgAAAAIAA4ANNuYW1lAAAgdAAAAaoAAAGq0IdVx3Bvc3QAACIgAAAAIAAAACAAAwAAAAMD6QGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6jwCzP7NATMCzAEzAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAGAAAAAUABAAAwAEAAEAIOkb6SLpJekn6WzqPP/9//8AAAAAACDpAOkf6SXpJ+ls6jz//f//AAH/4xcEFwEW/xb+FroV6wADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAYACf7JA/0CtwASAC0ATABzAJgArQAAFx4DMzI+AjcOAyMiJicFMj4CNz4BNz4BNw4DIyIuAiceAzMnIi4CJxQWFx4BFx4DMzI+Ajc+AT0BDgMjAQ4BBwYWFx4DMzI+Ajc2NCcuAScWDgIjIi4CNT4BNTIwIyUeARUUDgIjIiY1NDY3DgEHDgEVFB4CMzI+AjU0JicuAScnLgEjIgYHDgEVFBYzMj4CNTYmJ8ogSE5ULDBbVE0hDzlUbkN1mSgBWC9gWk8dEh4PCRAGHGuLpFU8eWxXGRddf55YiGGQYzYHBAQCDQsXU3mhZYqwaC0GCQsJda3SZv6cCxYEAgMCDEmExolTkXBJCwQEBxELAXarvEZKhmQ7AgQCAgMXAgE+c6VmmFcJCxMjEQcHVIeqVluGWCoPEw0ZDUo6gElJgzoRFJCEQXFUMAIPD84ZJxsOESEuHQodGxQqGBoNGiYaDCYYDiEPKUQvGhMmOCYzTjQb3ig8Rx8VMBMJGA0YNy8eJzY2DxVGIh0lUEMsAaIVQRMJCgcYPDMjFCc5JQ0fExUwEzFQOB8cMEIlCxEGogIFBBU2LyBWJQwaDRMlFQgQBCY+LBgbKzYbExsWDRYKNiIlJSQJEgogORIcJBIGDggAAAEA+gCaAw0A5gANAAAlISImNTQ2MyEyFhUUBgLg/kAOGBURAcYPGBqaFRERFRURERUAAAACAAD+wAQAAsAAEwAnAAABIi4CNTQ+AjMyHgIVFA4CAyIOAhUUHgIzMj4CNTQuAgIAarqLUVGLumpquotRUYu6al+of0pKfqlfX6h/Skp+qf7AUYu6amq6i1FRi7pqarqLUQPQSn6pX1+of0pKf6hfX6h/SgAAAAADAEn/UgO3Ai4AEAAgADAAAAEhIgYdARQWMyEyNj0BNCYjESEiBh0BFBYzITI2PQE0JgMhIgYdARQWMyEyNj0BNCYDkvzcDxYWDwMkDxYWD/zcDxYWDwMkDxYWD/zcDxYWDwMkDxYWAi4WD0kPFhYPSQ8W/tsVD0oPFRUPSg8V/twWD0kPFhYPSQ8WAAQAqv8VA1YCawAPAB0AKgA7AAABISIGFREUFjMhMjY1ETQmAyMiJjU0NjsBMhYVFAY3DgEHBiY3PgE3NhYHNxQGIyEiJjURNDYzITIWFREDIv28Fh4eFgJEFh4ew0QJDQ0JRAkMDIQCEgwWHwQDEgwWHwUbDAj97ggLCwgCEggMAmseFf0QFR4eFQLwFR785QwJCQ0NCQkMDQwSAgQfFQwSAwQfFmwIDAwIAlYICwsI/aoAAAYAnP8VA2QCawAQACEASABUAGEAbwAAATQmIyEiBhURFBYzITI2NREDISImNQM0NjMhMhYVERQGIwMRFAYjISImNTQ2MyEyNjURNCYjISIGFREUBiMiJjURNDYzITIWFQMiBhUUFjMyNjU0JgciJjU0NjMyFhUUBiMnFAYrASImNTQ2OwEyFgNkHRT9mhQdHRQCZhQdMf2aCxABEQsCZgwQEAwYEg3+CAUGBgUB+AQFBQT+CAQFBwQFBhINAfgNElERGRkREhgYEggNDQgJDAwJTQYEVgQGBgRWBAYCOxQcHBT9ChQcHBQC9vzvEAsC9gsQEAv9CgsQAtT92Q0RBgUEBgUEAicDBQUD/pQEBwcEAWwMEhIM/ZwYEREYGBERGD0MCAgMDAgIDBQEBgYEBQYGAAAAAgBj/24DnQIBACIAMwAAASEiBhURFBYzIRUjIgYVFBYzITI2NTQmKwE1ITI2NRE0JiMDFAYjISImNRE0NjMhMhYVEQNp/S4WHh4WAU2IDBAQDAFIDBAQDIgBTRYeHhYFDAn9YgkMDAkCngkMAgEeFf5IFh47EQwLERELDBE7HhYBuBUe/i8JDAwJAYQIDAwI/nwAAAMAdf9/A4sCGgAiADIAWQAAASEiBhURFBYzIRUjIgYVFBYzITI2NTQmKwE1ITI2NRE0JiMTFAYjISImNRE0NjMhMhYVBxEUBiMhIiY1NDYzITI2NRE0JiMhIgYVERQGIyImNRE0NjMhMhYVA2X9NhAWFhABWpkEBwcEAUgEBwcEmQFaEBYWEBEKB/02BwoKBwLKBwonDgr9yQQHBwQCNwECAgH9kgECBgUEBg4KAm4KDgIaFw/+CRAWQgcEBAcHBAQHQhYQAfcPF/3jBwkJBwH3BwkJBzD+bgoOBgUEBgIBAZIBAgIB/vYEBwcEAQoKDg4KAAADAQT/DwL8AngAHAAqADsAAAEuASsBIgYHDgEVERQWFx4BOwEyNjc+ATURNCYnAyMiJjU0NjsBMhYVFAY3FAYjISImNRE0NjMhMhYVEQKrJHUPBg91JCgpKSgkdQ8HDnUkKCkpKIBWDRISDVYNEhKLDAj+oggMDAgBXggMAnMDAgIDBCsm/UolKwQDAgIDBCslArYmKwT82BINDRITDA0ShwgMDAgCFgkMDAn96gAAAAIAAP7ABAACwAATACcAAAEiLgI1ND4CMzIeAhUUDgIDIg4CFRQeAjMyPgI1NC4CAgBquotRUYu6amq6i1FRi7pqUIxoPD1ojE9QjGg8PGiM/sBRi7pqarqLUVGLumpquotRA4A8aIxQUIxoPD1ojE9QjGg8AAAAAAEAAP7ABAACwAAoAAABBx4BFRQOAiMiLgI1ND4CMzUiDgIVFB4CMzI+AjU0LgInA2lYMzw9aIxPT4xoPT1ojE9quotRUYu6amq6i1EVJzgjAilbM4xPT4xoPT1ojE9PjGg9gFGLumpquotRUYu6ajVlXFEiAAAAAAIA+v+6Aw0BxgANABsAAAUiJjURNDYzMhYVERQGNyEiJjU0NjMhMhYVFAYCAA4YFRERFRjS/kAOGBURAcYPGBpGFREBwA4YFRH+Og8R4BURERUVEREVAAAFAQD/DAMAAnsAHAA6AEkAVwB+AAABLgEjIgYHDgEVERQWFx4BMzoBMTI2Nz4BNRE0JhMUBgcOASMiJicuATURNDY3PgEzOgExMhYXHgEVEScjIgYVFBY7ATI2NTQmIxUjIiY1NDY7ATIWFRQGExEUBiMhIiY1NDYzITI2NRE0JiMhIgYVERQGIyImNRE0NjMhMhYVAqsngAQEgCcqKysqJHMQAgIEgCcqKysVHyIngQEBgSciHx8iI3YNAgEBgSciH79WERgYEVYRGBgRVggMDAhWCAwMlRMN/rAFBgYFAVAFBgYF/rAFBgYEBQYTDQFQDRMCdgQBAQQDLSj9SictBAMBAQMELScCtigt/PUfIAMEAQEEAyAfArYfIQMEAQEEAyEf/UorGBERGRkRERg+DAkIDAwICQwCnf3hDhIGBQQGBgUCHwQGBgT+fwQGBgQBgQ0SEg0AAAMAVf8VA6sCawAUAC4APwAAJRQOAiMiLgI1ND4CMzIeAhUFMzQ2NTQmIyIGFRQWNz4BMzIWFRQGBwYWMQcUFjsBMjY9ATQmKwEiBh0BA6tDdJxYWJx0Q0N0nFhYnHRD/iM+lFNKU040AQUwNigtgQgBAQ0VFAoUFhYUChQVwFicdENDdJxYWJx0Q0N0nFhoTzBdOEhVIh8LAiM8JiA7KmgHAnEUFBQUCRQWFhQJAAAAAwBV/xUDqwJrABQAKwA7AAAlFA4CIyIuAjU0PgIzMh4CFSUTHgE7ATI2NxM2JicuASsBIgYHDgEXEzQmKwEiBh0BFBY7ATI2NQOrQ3ScWFicdENDdJxYWJx0Q/4cGAEKEQkRCwIXAgQHBxMMFAwTBwcEAnQcGgsZHBwZCxocwFicdENDdJxYWJx0Q0N0nFjg/vQIGxkLAQoPFwcIBwcIBxcO/kQZHBwZChkcHBkAAAACARr/YQLmAh8AIQAyAAAlPgM1NCYjIgYHBiY1ND4CMzIWFRQOAgcOASMiJjcTMzI2PQE0JisBIgYdARQWMwGvATlENzQxQ0AFAVwcOVc7bHk8ST8CAx4XGiECMRAhJCMiECEhIx91QkAlICImK04rAxA2GzoxIGVSQD8sLi8ODRgY/uwhIA0iISIhDSAhAAACANL/hAMrAesAEQAjAAAXIiYnJjQ3ATYyFxYUBwEOASMhIiYnASY0NzYyFwEWFAcOASP3ChIJDg4CDw8qEQ8P/fEIEgsCDwsSCP3xDg4PKhECDw8PCRIKfAgGDyoRAg8PDw8qEf30CAkIBgIPDyoRDw/98Q4qEgYIAAAAAgAA/sAEAALAABMAJwAAASIuAjU0PgIzMh4CFRQOAgMiDgIVFB4CMzI+AjU0LgICAGq6i1FRi7pqarqLUVGLumpfqH9KSn6pX1+of0pKfqn+wFGLumpquotRUYu6amq6i1ED0Ep+qV9fqH9KSn+oX1+of0oAAAAAAQDV/4oDLgHcABYAAAkBDgEjIiYvASY2Nz4BHwEBPgEXHgEHAy7+yQgcDw4ZCb8LAw0NJg2jASILJhAQCAoBnP4MDhANC/AOJgwMAQySAZAPBwsKJhAAAAMAaP9SA5kCLgAuAEUAVQAABRQGBw4BIyEiJicuATU0MDE8ATE0NjU+ATcBPgEzMTIWFwEeARcUFhUwFhU4ARUBFx4BOwEyNj8BNiYnLgErASIGBw4BFxM0JisBIgYdARQWOwEyNjUDmRANDiUU/ZcVJQ4NDwECCAYBNQ4rGRkrDgE1BggCAQH+PRIBBwwHDQcCEQIEBQQOCQ8JDgUFBAJWFRMIExQUEwgTFVwRIQsLCgoLCyERAQEBBAgEChUKAhcZHh4Z/ekKFQoECAQBAQEBkcUGFBMIxAoRBgUGBgUGEAv+uRMVFRMHExQUEwAAAAEAav+DA6EB/QBIAAABIS4BJy4BKwEiBhUUFjsBEhY5AR4BFw4BFRQWMzI2NTQmJzMUBhUUFjMyNjU0JicmIisBIiYnITgBMzgBMTI2PwI0NjU0JiMDcf3hBQkEAg8KnwsREQuIPhcJJR4DBCodHSoBAYwBKR4dKiYaAgQB/zQsCQGTAREaBD4BAR0TAZoVJxEJDREMCxH+7mQmMw0HDwgdKiodBAcDAwcEHSoqHRwoAgEhHRQQ6QUCBAIUHQAAAAQAXf9zA6QB5wAuAGsAkwCuAAAlMCIxISImNTQ2MzEFMDI5ATI2PwEwNDU0JiMhIiY1NDYzMSEyFhUcARUPAQ4BIxcUBiMiJjU8ATcjHAEVFAYjIiY1NDY3LgEnMCYDIyImNTQ2OwEyFhcUHgIVHgEXPgEzMhYXMz4BMzIWFSUxLgEnOAExLgEnLgEjIgYHMQ4BBzgBMQ4BBzEOARUUFjMyNjU0JjUFNCYjIgYHMQ4BBzgBMQ4BBzEUBhUUFjMyNjUDNgH+bwQHBwQBkQEKDgI/EAv96wQGBgQCFRQcAT4EGhElMCEiMAGYMCEiMAYGExoIF0GWBAYGBJ4EBgEcIhwHFhALHREZKQmjCigZIjD+sAEBAQEDAQgbEAsUCAIEAgEDAgMFJBkZIwEBOyQYERoIAgMBAQEBASQZGCRLBwQFBgELCe0DAQsQBwQEBx0UAgQCBekQFIchMDAhAwUDAwUDITAwIQwVCRAwIGUBHwYFBAYEBAJ6k3sCHSkOCwwcFhYcMCILAwUDAwUCDRAIBwIDAgMEAgcPCBgkJBgDBQMLGSQQDQIFAwMFAwMFAxgkJBgAAAABADP/MQPNAlUANQAAJTQmIyE1NC4CIyIOAh0BOAExFBYzMjY1OAE5ATU0NjMyFh0BIyIGFTERMRQWMyEyNjUxEQPNIBb+eiZBVzEyV0ElHRUUHVI6OVILFyAgFwH0FyChFh+YMFQ/JCQ/VDAdFR0dFR03TU03mB8W/sQWHh4WATwAAAAEAF//SgOhAjYADQAbAG4AgAAABSEiJjU0NjMhMhYVFAYnISImNTQ2MyEyFhUUBjc0JiMhNTQuAiMiDgIdARQWFx4BMzI2PQE0NjMyFh0BFBYzMjY9ATQmIyIGHQEUBiMiJicuAT0BND4CMzIeAh0BIyIGBxEeATMhMjY3MxEDFAYjISImNRE0NjMhMhYVERUDMf7HBQYGBQE5BAcHBP7HBQYGBQE5BAcHbCIX/rQjPFEuLlI8IwgIBxIKEyBHMjJHBgQFBlM7O1QVCAYLBAQFIDdJKilKNiBHFyEBASEXAagVHwQBFRUP/lgOFRUOAagPFT8GBQQGBgQFBnYHBAQHBwQEB1YWIZwsTjoiIjpOLEILEwcFBxkYQjBFRTBCBAYGBEI5UVE5QhALAwQDCwZCKEY0Hx80RiicIRf+9RcgGhIBF/70DhQUDgELDhQUDv79CAAAAgDP/zEDMQJVACAAKgAAJTQmKwE1NC4CIyIOAh0BIyIGFTERMRQWMyEyNjUxESU0NjMyFh0BITUDMSAXCyVBVzIxV0EmCxcgIBcB9Bcg/kRSOTpS/umhFh+YMFQ/JCQ/VDCYHxb+xBYeHhYBPM03TU03mJgAAAAABQDN/xQDMwJsAB8ARABdAGsAeQAAJTQmJzU0LgIjIg4CHQEOAQcjERUzHgEzITI2NzMRATIeAh0BIzU0JiMiBh0BFBYzMjY9ATQ2MzIWHQEhNTQ+AjMBFAYjISImJzURNT4BMyE4ATkBMzIWFRMHJyEiJjU0NjMhMhYVFAYnISImNTQ2MyEyFhUUBgMzIBcoRFw0NFxEKBQeBAEBBCQXAeYXJAQB/s0wVD4lRl5DQl4GBQQGUjk6Uf6PJD9ULwEdGRH+GhIYAQEZEQGJXREZAQFp/pkFBgYFAWcEBgYE/pkFBgYFAWcEBgaFFyIDuTJYQiYmQlgyuQIcFP7DCxUeHhUBPgHRIjxQLri4QFxcQEoFBgYFSjhOTji4uC5QPCL8/BEXFxEDASwDERgYEf7ZC0sGBAUGBgUEBocHBAQHBwQEBwAADQB2/1QDhQJQACIAMgBCAEkAWQBpAHkAiQCZAKAAsADAANAAAAEjNTQmIw4BHQEhNTQmIw4BHQEjIgYVERQWMyEyNjURNCYjARQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhUnLgE1MxQGExQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhUTFAYrASImPQE0NjsBMhYVNRQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhU3MxQGJy4BExQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhU1FAYrASImPQE0NjsBMhYVA2ZhGRERFv6TGRERFmENEhINAtENEhIN/c8GBXEEBgYEcQUGBgVxBAYGBHEFBhgRFlEZuQYEcQUGBgVxBAYGBHEFBgYFcQQGsgYEcQQGBgRxBAYGBHEEBgYEcQQGBgRxBAYGBHEEBhtRGRERFpgGBHIEBgYEcgQGBgRyBAYGBHIEBgYEcgQGBgRyBAYB/ikRGAEaESYpERgBGhEmEg39lA0SEg0CbA0S/ZoFBgYFbAUGBgVCBAYGBG0EBgYE+gEXERIY/ewFBgYFbAUGBgVCBAYGBG0EBgYE/uUFBgYFbAUGBgVCBAYGBG0EBgYEQQQGBgRtBAYGBHUSGAEBF/3TBQYGBWwFBgYFQgQGBgRtBAYGBEEEBgYEbQQGBgQAAA8Abv9mA5ICdwApAC4AMgA2ADoAPgBCAFAAXgCEAIkAkQCVAJkAoQAAJTgBNRE0JisBNTQmIyIGHQEhNTQmIyIGHQEjIgYVERQWMyEyNjUROAE1BTMVIzU7ARUjJSM1MwcjNTMXMxUjNzMVIwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUnNDY7ARUUFjMyNj0BIRUUFjMyNj0BMzIWFREjNTMyNjU0JiMhNRcVIzUzAyImPQEzFSMzNTMVMzUzFTMjNTMVFAYjA5IeFkweFRUf/qkeFRUeTBYeHhYCvBYe/PGyssirqwFwr6/Fq6sWr6/Fq6sQEQ0MEhIMDRH+QhIMDBISDAwSgBINTB4VFR4BVx8VFR5MDRGsMAQHBwT9g7KyspMNErKTqasWr6ONqxENwQEBMRUfHBYeHhYcHBYeHhYcHxX9phUeHhUBJwELlpaWq6KioreWlpYCIw0REQ1RDBISDFENERENUQwSEgwBDBIfFR4eFR8fFR4eFR8SDP7YogYFBAZxhqKi/g4SDHKQkJCQkJByDBIAAAAAAQC6/3kDSAIHAB8AACUUBisBFRQGIyImPQEjIiY1NDY7ATU0NjMyFh0BMzIWA0gpHrkpHh0quR0qKh25Kh0eKbkeKcAdKrkdKioduSodHSq5HSoqHbkqAAEAuQB5A0cBBwANAAAlISImNTQ2MyEyFhUUBgMA/gAdKiodAgAdKip5Kh0dKiodHSoAAAAGAGn/ZAOdAhYADQAbADoARwBWAGcAAAE0JisBIgYVFBY7AT4BFzQmIyEiBhUUFjMhPgEXIzU0Ji8BLgEjISIGFREjIgYdARQWMyEyNj0BLgEjATQ2MyEVFBY7ARUhEQMiJjU0NjsBMhYVFAYrAQUUBiMhIiY9ATQ2MyEyFh0BAiYMC6oJDgwLqgsMig0L/tAJDw0LATAJD6w9CAdsBxMJ/oYRGDoYIyMYAr4YIwMkGv26CAcBRwgEb/4vWwkODAtbCQ4MC1sCLAgG/k4GCAgGAa8GCAFKCA8NCgsNAg1PCQ4MCwsNAwxD0gkUBm0GCBcS/rYjG8cYIiIYxx0kASoHCG8FB8EBLf5sDQsJDgwLCQ+ABwgIBxEHCAgHEQAAAAAIAGP/XgOfAh8AEAAhAC8APQBLAFkAhACHAAAFISImPQE0NjMhMhYdAQ4BIwEiBh0BFBYzITI2PQE0JiMhFzQmKwEiBhUUFjsBMjYFNCYjISIGFRQWMyEyNgM0JiMhIgYVFBYzITI2JzQmKwEiBhUUFjsBMjYlJy4BIyEiBhURFBYzMjY1ETQ2MyEyFhcVFBY7ARQWHQEUFjMyNj0BLgEnJxcjA1z9SBonJxoCuxomAica/UgSFxcSArsSFxcS/UWeBwWBBAcHBIEFBwGOCAT+eAQICAQBiAQIGAcE/qMEBwcEAV0GBbUHBacEBwcEpwUHAQRsCRgL/q0WHwcFBAgTDQFTAgUCBwV9AwgEBAgFCgl4Z2eiJhrHGyYmG8caJgEzFxLHERgYEccSFzcEBwcEBQcHjgUHBwUEBwcBSQQICAQECAhQBQcHBQQIBk9tCAkfFv7/BAgIBAEBDhABAn4ECAIEA4kECAgEiQ4bBltmAAIAWP8VA60CawAUACsAAAEiDgIVFB4CMzI+AjU0LgIjFwEOASMiJi8BJjY3NjIfARM+ARceAQcCAlibdENDdJtYWZt0Q0N0m1nz/v4IFg0MFAifCQILCx8Mh/IJIA0NBwkCa0N0nFhYnHRDQ3ScWFicdEP1/l8LDQoJyAwfCwoKegFODAYJCCANAAAAAwBV/xUDqwJrABQAIQAuAAAlFA4CIyIuAjU0PgIzMh4CFQUyNiMuATcTIwMGFjMTMjY1NCYjIgYVFBYzA6tDdJxYWJx0Q0N0nFhYnHRD/j4hDAEYDAY3RTgJGyY5FRcVFBUXFRTAWJx0Q0N0nFhYnHRDQ3ScWPohAhYbAQb++ygtAaMbEw8RGxMOEgABAHb/QQOKAi4AKAAAATYyHwEeAR8BHgEPAQ4BHwEWBi8BJiIPAQYmPwE2Ji8BJjY/AT4BPwEB5QsgC1ELNBm1GQoSgxIUBB8FGhehF0AWohcZBB8EFBKDEgoZtRk0C1ECLhcXoxcmAxsDHxJ/Ej0ZtBkSC1UMDFULEhm0GT0SfxIfAxsDJhejAAAAAAEAmv/vA1cBfQAZAAATNDY3NjIfATc2MhcWFAcBDgEjIiYnAS4BNZoKChQ4FPT0FDkUFBT+7w0kExMjDv7wCgoBTA0ZChQU9PUUFBQ4FP7uDQ8PDQERChkNAAAAAQAAAAEAAJw5MTFfDzz1AAsEAAAAAADUFPWTAAAAANQU9ZMAAP7ABAACwAAAAAgAAgAAAAAAAAABAAACzP7NAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAAKAQAAAAAAAAAAAAAAACuAAAEAAAJBAAA+gQAAAAEAABJBAAAqgQAAJwEAABjBAAAdQQAAQQEAAAABAAAAAQAAPoEAAEABAAAVQQAAFUEAAEaBAAA0gQAAAAEAADVBAAAaAQAAGoEAABdBAAAMwQAAF8EAADPBAAAzQQAAHYEAABuBAAAugQAALkEAABpBAAAYwQAAFgEAABVBAAAdgQAAJoAAAAAAAoAFAAeAQ4BKAFkAaoCBAKeAugDYgO6A/YEMgReBQoFYgW6BgIGQAZ8BqgHIAeACFoInAlGCYIKJAsuC/4MKgxEDNQNjA3SDhgOXg6MAAAAAQAAACgA0QAPAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAoAAAABAAAAAAACAAcAewABAAAAAAADAAoAPwABAAAAAAAEAAoAkAABAAAAAAAFAAsAHgABAAAAAAAGAAoAXQABAAAAAAAKABoArgADAAEECQABABQACgADAAEECQACAA4AggADAAEECQADABQASQADAAEECQAEABQAmgADAAEECQAFABYAKQADAAEECQAGABQAZwADAAEECQAKADQAyGljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeVZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeWljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeVJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeUZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("woff"), url("fonts/icons/icoPrimary.ttf?timestamp=@@timestamp") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-[class*="icon-primary-"],

-.nav-links a:after,

-.bellyband-link a:after,

-.breadcrumb > li:after,

-.checkbox input:checked + .skin:after,

-.checkbox input.indeterminate + .skin:after,

-.checkbox input:indeterminate + .skin:after,

-.selectWrap.large:before,

-.form-row.error .error-msg:before,

-.close:before,

-.reset-field:before,

-.cssIcon-globe:before,

-.selectWrap:after {

-  color: #0568ae;

-  display: inline-block;

-  font-family: 'icoPrimary' !important;

-  font-style: normal;

-  font-size: 20px;

-  font-weight: normal;

-  font-variant: normal;

-  height: 1em;

-  margin-right: 7px;

-  text-transform: none;

-  line-height: 1;

-  -webkit-font-smoothing: antialiased;

-  -moz-osx-font-smoothing: grayscale;

-  position: relative;

-  speak: none;

-  -webkit-user-select: none;

-  -moz-user-select: none;

-  -ms-user-select: none;

-  user-select: none;

-  vertical-align: middle;

-  width: 1em; }

-

-[class*="icon-primary-"]:before,

-[class*="icon-primary-"]:after {

-  box-sizing: border-box;

-  display: inline-block;

-  font-size: 1em;

-  height: 1em;

-  position: relative;

-  top: 0;

-  left: 0;

-  vertical-align: middle;

-  width: 1em; }

-

-.icon-primary-att-globe:before,

-.cssIcon-globe:before {

-  content: "\e900";

-  color: #44c7f5; }

-

-.icon-primary-hamburger:before {

-  content: "\e903"; }

-

-.icon-primary-secure:before {

-  content: "\e918"; }

-

-.icon-primary-secureL:before {

-  content: "\e919"; }

-

-.icon-primary-padlockopen:before {

-  content: "\e916"; }

-

-.icon-primary-padlockopenL:before {

-  content: "\e917"; }

-

-.icon-primary-shoppingcart:before {

-  content: "\e914"; }

-

-.icon-primary-shoppingcartL:before {

-  content: "\e915"; }

-

-.icon-primary-print:before {

-  content: "\e921"; }

-

-.icon-primary-printL:before {

-  content: "\e922"; }

-

-.icon-primary-mobilesmartphone:before {

-  content: "\e908"; }

-

-.icon-primary-mobilesmartphoneL:before {

-  content: "\e90c"; }

-

-.icon-primary-tablet:before {

-  content: "\e904"; }

-

-.icon-primary-tabletL:before {

-  content: "\e905"; }

-

-.icon-primary-tv:before {

-  content: "\e906"; }

-

-.icon-primary-tvL:before {

-  content: "\e907"; }

-

-.icon-primary-calendar {

-  width: 100% !important; }

-

-.icon-primary-calendar:before {

-  content: "\e91a";

-  z-index: 1; }

-

-.icon-primary-calendarL:before {

-  content: "\e91b"; }

-

-.icon-primary-star:before {

-  content: "\e96c"; }

-

-.icon-primary-close:before,

-.close:before,

-.reset-field:before {

-  content: "\e910"; }

-

-.icon-primary-down:before {

-  content: "\ea3c"; }

-

-.checkbox input.indeterminate + .skin:after,

-.icon-primary-subtractminimize:before {

-  content: "\e920"; }

-

-.icon-primary-add-maximize:before {

-  content: "\e91f"; }

-

-.icon-primary-check:before,

-.checkbox input:checked + .skin:after {

-  content: "\e912"; }

-

-.icon-primary-questionmark:before {

-  content: "\e90f"; }

-

-.icon-primary-badgealert:before,

-.form-row.error .error-msg:before {

-  content: "\e90e"; }

-

-.icon-primary-approval:before {

-  content: "\e925"; }

-

-.icon-primary-flat-info:before {

-  content: "\e927"; }

-

-.icon-primary-alert:before {

-  content: "\e913"; }

-

-.icon-primary-tooltip:before,

-.icon-primary-flat-faq:before {

-  content: "\e90d"; }

-

-.icon-primary-tooltip {

-  font-size: 20px; }

-

-.nav-links a:after,

-.bellyband-link a:after,

-.breadcrumb > li:after,

-.icon-primary-right:before {

-  content: "\ea3c";

-  transform: rotate(-90deg); }

-

-.icon-primary-left:before {

-  content: "\ea3c";

-  transform: rotate(90deg); }

-

-.icon-primary-accordion-plus:after,

-.icon-primary-collapsed:after,

-.icon-primary-accordion-minus:after,

-.icon-primary-expanded:after {

-  content: "";

-  position: absolute;

-  top: 0;

-  z-index: 1; }

-

-.icon-primary-accordion-minus,

-.icon-primary-expanded,

-.icon-primary-accordion-plus,

-.icon-primary-collapsed {

-  font-size: 20px !important; }

-

-:not(.ds2-no-colors) .icon-primary-accordion-minus:before,

-:not(.ds2-no-colors) .icon-primary-expanded:before {

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20fill%3D%22%230568ae%22%20d%3D%22M15.1%2011.3H5.9c-.4%200-.8-.3-.8-.8s.3-.8.8-.8h9.3c.4%200%20.8.3.8.8s-.4.8-.9.8z%22%2F%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M10.5%2021C4.7%2021%200%2016.3%200%2010.5S4.7%200%2010.5%200%2021%204.7%2021%2010.5%2016.3%2021%2010.5%2021zm0-20C5.3%201%201%205.3%201%2010.5S5.3%2020%2010.5%2020s9.5-4.3%209.5-9.5S15.7%201%2010.5%201z%22%2F%3E%3C%2Fsvg%3E");

-  content: ""; }

-

-:not(.ds2-no-colors) .icon-primary-accordion-plus:before,

-:not(.ds2-no-colors) .icon-primary-collapsed:before {

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20fill%3D%22%230568ae%22%20d%3D%22M10.5%2015.9c-.4%200-.8-.3-.8-.8V5.9c0-.4.3-.8.8-.8s.8.3.8.8v9.3c0%20.4-.4.7-.8.7z%22%2F%3E%3Cpath%20fill%3D%22%230568ae%22%20d%3D%22M15.1%2011.3H5.9c-.4%200-.8-.3-.8-.8s.3-.8.8-.8h9.3c.4%200%20.8.3.8.8s-.4.8-.9.8z%22%2F%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M10.5%2021C4.7%2021%200%2016.3%200%2010.5S4.7%200%2010.5%200%2021%204.7%2021%2010.5%2016.3%2021%2010.5%2021zm0-20C5.3%201%201%205.3%201%2010.5S5.3%2020%2010.5%2020s9.5-4.3%209.5-9.5S15.7%201%2010.5%201z%22%2F%3E%3C%2Fsvg%3E");

-  content: ""; }

-

-.ds2-no-colors .icon-primary-accordion-minus:before,

-.ds2-no-colors .icon-primary-expanded:before {

-  background-image: none;

-  content: "\e901"; }

-

-.ds2-no-colors .icon-primary-accordion-minus:after,

-.ds2-no-colors .icon-primary-expanded:after {

-  content: "\e902"; }

-

-.ds2-no-colors .icon-primary-accordion-plus:before,

-.ds2-no-colors .icon-primary-collapsed:before {

-  background-image: none;

-  content: "\e90b"; }

-

-.ds2-no-colors .icon-primary-accordion-plus:after,

-.ds2-no-colors .icon-primary-collapsed:after {

-  content: "\e911"; }

-

-.icon-primary-circle-arrow {

-  outline: 1px solid transparent;

-  border-radius: 50%;

-  font-size: 20px !important;

-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);

-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);

-  margin-right: 7px; }

-

-.icon-primary-circle-arrow:after {

-  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20baseProfile%3D%22tiny%22%3E%3Ccircle%20r%3D%2217%22%20cy%3D%2218%22%20cx%3D%2218%22%20stroke-width%3D%221%22%20fill%3D%22transparent%22%20stroke%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E");

-  content: "";

-  position: absolute;

-  top: 0;

-  z-index: 2; }

-

-.icon-primary-circle-arrow:before {

-  border-radius: 50%;

-  content: "\ea3c";

-  font-size: 12px;

-  top: 0;

-  position: absolute;

-  transform: rotate(-90deg);

-  width: 20px;

-  z-index: 1; }

-

-[class*="icon-primary-"] [class*="icon-primary-"] {

-  display: inline-block;

-  float: left;

-  font-size: 1em;

-  margin-left: -1em;

-  position: absolute; }

-

-[class*="icon-primary-"].white {

-  color: #fff; }

-

-[class*="icon-primary-"].black {

-  color: #000; }

-

-[class*="icon-primary-"].blue {

-  color: #0568ae; }

-

-[class*="icon-primary-"].green {

-  color: #007a3e; }

-

-@-webkit-viewport {

-  width: device-width; }

-

-@-moz-viewport {

-  width: device-width; }

-

-@-ms-viewport {

-  width: device-width; }

-

-@-o-viewport {

-  width: device-width; }

-

-@viewport {

-  width: device-width; }

-

-.clearfix:before,

-.clearfix:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.clearfix:after {

-  clear: both; }

-

-.pull-right {

-  float: right !important; }

-

-.pull-left {

-  float: left !important; }

-

-.float-children-left:before,

-.float-children-left:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.float-children-left:after {

-  clear: both; }

-

-.float-children-left > div {

-  float: left;

-  white-space: nowrap; }

-

-.block {

-  display: block !important; }

-

-.inline {

-  display: inline !important; }

-

-.inline-block {

-  display: inline-block !important; }

-

-.table-cell {

-  display: table-cell !important;

-  width: 1%;

-  vertical-align: middle; }

-

-@media (max-width: 767px) {

-  .full-bleed {

-    width: auto;

-    margin-left: -15px;

-    margin-right: -15px;

-    padding: 15px; } }

-

-@media (min-width: 768px) {

-  .full-bleed {

-    width: auto;

-    margin-left: -20px;

-    margin-right: -20px;

-    padding: 20px; } }

-

-@media (max-width: 480px) {

-  .full-bleed {

-    width: auto;

-    margin-left: -15px;

-    margin-right: -15px;

-    padding: 0 15px; } }

-

-.fade {

-  opacity: 0;

-  filter: alpha(opacity=0);

-  transition: opacity .15s linear; }

-

-.fade.in {

-  opacity: 1;

-  filter: alpha(opacity=100); }

-

-.b2bCollapse {

-  display: none; }

-

-.collapse.in {

-  height: auto; }

-

-.nowrap {

-  white-space: nowrap; }

-

-.pre {

-  white-space: pre; }

-

-.hidden-spoken {

-  border: 0 none !important;

-  clip: rect(0px, 0px, 0px, 0px) !important;

-  height: 1px !important;

-  letter-spacing: 0;

-  line-height: 0;

-  overflow: hidden !important;

-  margin-top: -1px;

-  padding: 0 !important;

-  position: absolute !important;

-  width: 1px !important; }

-

-[data-sr-text].hidden-spoken:before {

-  border: 0 none !important;

-  content: attr(data-sr-text);

-  clip: rect(0px, 0px, 0px, 0px) !important;

-  height: 1px !important;

-  letter-spacing: 0;

-  line-height: 0;

-  overflow: hidden !important;

-  padding: 0 !important;

-  position: absolute !important;

-  width: 100% !important;

-  z-index: -1; }

-

-[data-sr-text].hidden-spoken {

-  position: relative !important;

-  width: auto !important; }

-

-[data-show-between] {

-  display: none;

-  visibility: hidden; }

-

-.noscroll-y {

-  overflow-y: hidden !important; }

-

-.invisible {

-  visibility: hidden !important;

-  opacity: 0 !important; }

-

-.transparent {

-  background-color: rgba(255, 255, 255, 0) !important; }

-

-.hide {

-  display: none !important; }

-

-.show {

-  display: block !important; }

-

-.rel {

-  position: relative !important; }

-

-.legend-pad {

-  padding: 0 15px; }

-

-.border-top {

-  border-top-width: 1px !important; }

-

-.border-left {

-  border-left-width: 1px !important; }

-

-.border-right {

-  border-right-width: 1px !important; }

-

-.border-bottom {

-  border-bottom-width: 1px !important; }

-

-.border-dark {

-  border-color: #000; }

-

-.border-light {

-  border-color: #fff; }

-

-.no-border-top {

-  border-top-width: 0 !important; }

-

-.no-border-left {

-  border-left-width: 0 !important; }

-

-.no-border-right {

-  border-right-width: 0 !important; }

-

-.no-border-bottom {

-  border-bottom-width: 0 !important; }

-

-.align-middle {

-  margin: 0 auto !important; }

-

-.align-top {

-  position: absolute;

-  top: 0; }

-

-.align-bottom {

-  position: absolute;

-  bottom: 0; }

-

-.valign-top {

-  vertical-align: top !important; }

-

-.valign-middle {

-  vertical-align: middle !important; }

-

-.valign-bottom {

-  vertical-align: bottom !important; }

-

-.align-children-middle > * {

-  margin: 0 auto; }

-

-[class*="valign-children-"] {

-  display: table; }

-

-[class*="valign-children-"] > * {

-  display: table-cell; }

-

-.valign-children-top > * {

-  vertical-align: top; }

-

-.valign-children-middle > * {

-  vertical-align: middle; }

-

-.valign-children-bottom > * {

-  vertical-align: bottom; }

-

-.no-pad {

-  padding: 0 !important; }

-

-.top-space {

-  margin-top: 60px !important; }

-

-.bottom-space {

-  margin-bottom: 60px !important; }

-

-.top-pad {

-  padding-top: 60px !important; }

-

-.bottom-pad {

-  padding-bottom: 60px !important; }

-

-@media (max-width: 767px) {

-  .top-space {

-    margin-top: 30px !important; }

-  .bottom-space {

-    margin-bottom: 30px !important; }

-  .top-pad {

-    padding-top: 30px !important; }

-  .bottom-pad {

-    padding-bottom: 30px !important; } }

-

-.affix {

-  position: fixed; }

-

-.img-landscape,

-.img-portrait {

-  position: relative; }

-

-@media (orientation: landscape) {

-  .img-landscape {

-    display: block; }

-  .img-portrait {

-    display: none !important; } }

-

-@media (orientation: portrait) {

-  .img-landscape {

-    display: none !important; }

-  .img-portrait {

-    display: block; } }

-

-.dark-bg {

-  background-color: #222222; }

-

-/* ... JAVASCRIPT HOOKS .................

-   ... used by javascript ............... */

-.autoSize,

-.autoSize-this {

-  position: relative; }

-

-.truncate {

-  white-space: nowrap;

-  overflow: hidden;

-  text-overflow: ellipsis; }

-

-.placeholdersjs {

-  color: #5a5a5a !important; }

-

-.jshook-return-focus-here {

-  display: block; }

-

-.visible-print {

-  display: none !important; }

-

-.hidden-print {

-  display: inherit !important; }

-

-@media print {

-  .visible-print {

-    display: inherit !important; }

-  .hidden-print {

-    display: none !important; }

-  * {

-    color: #000 !important;

-    background: transparent !important;

-    box-shadow: none !important; }

-  a,

-  a:visited {

-    text-decoration: underline; }

-  pre,

-  blockquote {

-    border: 1px solid #000;

-    page-break-inside: avoid; }

-  thead {

-    display: table-header-group; }

-  tr,

-  img {

-    page-break-inside: avoid; }

-  img {

-    max-width: 100% !important; }

-  @page {

-    margin: 0.5cm; }

-  p,

-  h2,

-  h3 {

-    orphans: 3;

-    widows: 3; }

-  h2,

-  h3 {

-    page-break-after: avoid; } }

-

-.mar-top-0 {

-  margin-top: 0px; }

-

-.mar-top-30 {

-  margin-top: 30px; }

-

-a:focus {

-  outline: thin dotted #191919; }

-

-h1,

-h2,

-h3,

-h4,

-h5,

-h6 {

-  font-weight: normal;

-  text-rendering: optimizeLegibility;

-  margin: 0;

-  line-height: 1; }

-

-.heading-page {

-  font-size: 3.8rem !important;

-  font-family: "Omnes-ECOMP-W02-Light", Arial;

-  margin-bottom: 40px; }

-

-.heading-major-section {

-  font-size: 3rem !important;

-  font-family: "Omnes-ECOMP-W02-Light" , Arial;

-  margin-bottom: 40px !important; }

-

-.heading-sub-section {

-  font-size: 2.4rem !important;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  margin-bottom: 40px; }

-

-.heading-group {

-  font-size: 2rem !important;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #ea7400;

-  margin-bottom: 20px !important; }

-

-.heading-medium {

-  font-size: 2rem !important;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  margin-bottom: 20px; }

-

-.heading-medium-emphasis {

-  font-size: 2rem !important;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  margin-bottom: 20px; }

-

-.heading-small {

-  font-size: 1.8rem !important;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  margin-bottom: 20px; }

-

-.heading-small-emphasis {

-  font-size: 1.8rem !important;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  margin-bottom: 20px; }

-

-.heading-micro {

-  font-size: 1.3rem !important;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  text-transform: uppercase;

-  color: #da0081;

-  margin-bottom: 10px; }

-

-* + .heading-major-section {

-  margin-top: 60px; }

-

-* + .heading-sub-section {

-  margin-top: 60px; }

-

-* + .heading-group {

-  margin-top: 40px !important; }

-

-* + .heading-medium {

-  margin-top: 40px; }

-

-* + .heading-medium-emphasis {

-  margin-top: 40px; }

-

-* + .heading-small {

-  margin-top: 40px; }

-

-* + .heading-small-emphasis {

-  margin-top: 40px; }

-

-* + .heading-micro {

-  margin-top: 20px; }

-

-.lead {

-  color: #666;

-  font-family: "Omnes-ECOMP-W02-Light-Italic", Arial;

-  font-size: 2.4rem;

-  line-height: 2.8rem;

-  margin-top: 10px;

-  letter-spacing: -0.024rem; }

-

-.eyebrow {

-  text-transform: uppercase;

-  line-height: .65 !important; }

-

-.eyebrow,

-.subheading {

-  font-size: 1.4rem !important;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #666; }

-

-.eyebrow + .heading-major-section,

-.eyebrow + .heading-sub-section {

-  margin-top: 4px; }

-

-.subheading {

-  margin-top: 10px; }

-

-@media (max-width: 767px) {

-  h1,

-  h2,

-  h3,

-  h4,

-  h5,

-  h6,

-  .heading-page {

-    font-size: 2rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 30px; }

-  .heading-major-section {

-    font-size: 2rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 30px; }

-  .heading-sub-section {

-    font-size: 2rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 20px; }

-  .heading-medium {

-    font-size: 2rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 20px; }

-  .heading-medium-emphasis {

-    font-size: 2rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 20px; }

-  .heading-small {

-    font-size: 1.6rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 10px; }

-  .heading-small-emphasis {

-    font-size: 1.6rem;

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    margin-bottom: 5px; }

-  * + .heading-major-section {

-    margin-top: 30px; }

-  * + .heading-sub-section {

-    margin-top: 30px; }

-  * + .heading-group {

-    margin-top: 20px; }

-  * + .heading-medium {

-    margin-top: 20px; }

-  * + .heading-medium-emphasis {

-    margin-top: 20px; }

-  * + .heading-small {

-    margin-top: 20px; }

-  * + .heading-small-emphasis {

-    margin-top: 20px; }

-  * + .heading-micro {

-    margin-top: 10px; } }

-

-/* Standard Type styles */

-.zeromargin {

-  margin: 0 !important; }

-

-a {

-  color: #0568ae;

-  text-decoration: none; }

-

-a:hover,

-a:focus {

-  text-decoration: underline; }

-

-a:active {

-  color: #0568ae; }

-

-.a-min {

-  font-size: 12px; }

-

-.a-small {

-  font-size: 14px; }

-

-.a-max {

-  font-size: 18px; }

-

-a.show-qualifier {

-  margin-right: 25px;

-  position: relative; }

-

-a.show-qualifier:after {

-  color: #333333;

-  display: inline-block;

-  white-space: pre !important; }

-

-a[href$="pdf"].show-qualifier:after,

-a.show-qualifier.pdf:after {

-  content: " (PDF)"; }

-

-a[href$="psd"].show-qualifier:after,

-a.show-qualifier.psd:after {

-  content: " (PSD)"; }

-

-.standalone-link {

-  display: flex; }

-

-/* 20px for the icon, 10px left of icon */

-.standalone-link.small {

-  font-size: 1.4rem; }

-

-.standalone-link.small i[class*="icon-primary-"] {

-  font-size: 16px;

-  top: 2px; }

-

-.standalone-link.large {

-  font-size: 1.8rem; }

-

-.standalone-link.large i[class*="icon-primary-"] {

-  font-size: 24px;

-  top: -1px; }

-

-p {

-  margin: 0 0 12px 0;

-  line-height: 2rem; }

-

-.p-small {

-  font-size: 1.4rem;

-  line-height: 1.8rem; }

-

-p + .p-small {

-  margin: 10px 0 0; }

-

-.p-micro {

-  font-size: 1.2rem;

-  line-height: 1.5rem; }

-

-p + .p-micro {

-  margin: 10px 0 0; }

-

-.p-max {

-  font-size: 1.8rem; }

-

-p + .p-max {

-  margin: 10px 0 0; }

-

-b,

-strong {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-weight: normal; }

-

-i,

-em {

-  font-family: "Omnes-ECOMP-W02-Italic", Arial;

-  font-style: normal; }

-

-.strike {

-  text-decoration: line-through; }

-

-sup {

-  display: inline-block;

-  font-style: normal;

-  height: 1em;

-  position: relative;

-  vertical-align: text-top;

-  width: auto; }

-

-.text-legal {

-  color: #5a5a5a;

-  font-size: 1.1rem;

-  line-height: 1.5rem;

-  margin: 0 0 10px; }

-

-.text-legal.legal-module {

-  line-height: 1.3rem;

-  margin: 0 0 12px; }

-

-.text-legal b,

-.text-legal strong {

-  font-weight: bold; }

-

-.text-legal a {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.text-left {

-  text-align: left !important; }

-

-.text-right {

-  text-align: right !important; }

-

-.text-center {

-  text-align: center !important; }

-

-.text-justified {

-  text-align: justify !important; }

-

-ul {

-  padding: 0;

-  margin: 0;

-  list-style: none; }

-

-ul.bullet,

-ul.no-bullet,

-ul.lower-alpha,

-ul.lower-roman,

-ol {

-  padding: 0;

-  margin: 12px 0 0 20px; }

-

-ul.bullet li,

-ul.no-bullet li,

-ul.lower-alpha li,

-ul.lower-roman li,

-ol li {

-  padding-left: 15px;

-  line-height: 20px;

-  position: relative; }

-

-ul.bullet li + li,

-ul.no-bullet li + li,

-ul.lower-alpha li + li,

-ul.lower-roman li + li,

-ol li + li {

-  margin-top: 12px; }

-

-ul.bullet > li:before,

-ul.no-bullet > li:before,

-ul.lower-alpha > li:before,

-ul.lower-roman > li:before,

-ol > li:before {

-  background-color: #333333;

-  border: 2px solid #333333;

-  border-radius: 100%;

-  content: " ";

-  display: block;

-  height: 1px;

-  left: 0;

-  position: absolute;

-  top: 8px;

-  width: 1px; }

-

-ul.bullet ul,

-ul.no-bullet ul,

-ul.lower-alpha ul,

-ul.lower-roman ul,

-ol ul,

-ul.bullet ol,

-ul.no-bullet ol,

-ul.lower-alpha ol,

-ul.lower-roman ol,

-ol ol {

-  margin-top: 12px; }

-

-ul + *,

-ol + * {

-  margin-top: 20px; }

-

-ul.no-bullet,

-ul.lower-alpha,

-ul.lower-roman {

-  margin: 0; }

-

-ul.no-bullet > li,

-ul.lower-alpha > li,

-ul.lower-roman > li {

-  padding-left: 0; }

-

-ul.no-bullet > li:before,

-ul.lower-alpha > li:before,

-ul.lower-roman > li:before {

-  display: none !important; }

-

-ol {

-  margin: 20px 0 0 32px; }

-

-ol li {

-  padding-left: 3px; }

-

-ol li:before {

-  display: none; }

-

-ol ol {

-  margin-left: 25px; }

-

-ol ul {

-  margin-left: -5px; }

-

-ul ul,

-ul ol,

-ol ol,

-ol ul {

-  margin-top: 0; }

-

-ul.lower-roman {

-  list-style-type: lower-roman;

-  margin-top: 12px;

-  margin-left: 35px;

-  margin-bottom: 0; }

-

-ul.lower-alpha {

-  list-style-type: lower-alpha;

-  margin-top: 12px;

-  margin-left: 35px;

-  margin-bottom: 0; }

-

-dl {

-  display: table;

-  margin: 0 0 20px;

-  width: 100%; }

-

-dt,

-dd {

-  display: table-cell; }

-

-.btn {

-  background-color: transparent;

-  background-clip: padding-box;

-  border: 1px solid transparent;

-  border-radius: 8px;

-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);

-  cursor: pointer;

-  display: inline-block;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 1.9rem;

-  font-weight: normal;

-  line-height: 1;

-  margin: 0 7px 10px 0;

-  max-width: 470px;

-  min-width: 70px;

-  padding: 14px 19px 11px 18px;

-  position: relative;

-  text-align: center;

-  vertical-align: middle;

-  white-space: nowrap;

-  overflow: hidden; }

-  .btn:focus {

-    outline: 1px dotted #000;

-    outline-offset: -5px; }

-  .btn:last-child {

-    margin-right: 0; }

-  .btn::-moz-focus-inner {

-    padding: 0;

-    border: 0; }

-  .btn i[class*="icon-primary-"].icon-primary-small {

-    font-size: 24px;

-    top: -2px; }

-  .btn i[class*="icon-primary-"].icon-primary-medium {

-    font-size: 30px;

-    top: -2px; }

-  .btn i[class*="icon-primary-"].icon-primary-large {

-    font-size: 36px;

-    top: -2px; }

-

-a.btn {

-  vertical-align: middle; }

-  a.btn:hover {

-    text-decoration: none; }

-

-.field-group + .btn {

-  margin-left: 20px; }

-

-.btn-primary {

-  border-color: #ea7400 transparent #d16500;

-  background-color: #ea7400 transparent #d16500;

-  background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);

-  color: #ffffff;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-weight: bold; }

-  .btn-primary:hover {

-    text-decoration: none;

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }

-  .btn-primary:focus {

-    text-decoration: none;

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }

-  .btn-primary:active {

-    text-decoration: none;

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }

-

-.btn-arrow {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.6rem;

-  font-weight: normal;

-  background-color: transparent;

-  border: none;

-  padding: 5px 0 0;

-  top: -4px;

-  color: #333333;

-  position: relative; }

-  .btn-arrow:hover {

-    text-decoration: underline; }

-    .btn-arrow:hover .btn-primary {

-      text-decoration: none;

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }

-    .btn-arrow:hover .btn-secondary {

-      color: #0568ae;

-      outline-color: #000000 !important;

-      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }

-    .btn-arrow:hover .btn-alt {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }

-    .btn-arrow:hover .btn-specialty {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }

-  .btn-arrow:focus {

-    text-decoration: underline;

-    outline: 1px dotted #666; }

-    .btn-arrow:focus .btn-primary {

-      text-decoration: none;

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }

-    .btn-arrow:focus .btn-secondary {

-      color: #0568ae;

-      outline-color: #000000 !important;

-      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }

-    .btn-arrow:focus .btn-alt {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }

-    .btn-arrow:focus .btn-specialty {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }

-  .btn-arrow:active .btn-primary {

-    text-decoration: none;

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }

-  .btn-arrow:active .btn-secondary {

-    color: #0568ae;

-    outline-color: #000000 !important;

-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }

-  .btn-arrow:active .btn-alt {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }

-  .btn-arrow:active .btn-specialty {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }

-  .btn-arrow .btn-alt {

-    border-color: #087ac2 transparent #0568ae;

-    background-color: #0568ae;

-    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);

-    color: #ffffff; }

-    .btn-arrow .btn-alt:hover {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }

-    .btn-arrow .btn-alt:focus {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }

-    .btn-arrow .btn-alt:active {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }

-  .btn-arrow::-moz-focus-inner {

-    padding: 0;

-    border: 0; }

-  .btn-arrow .btn {

-    border: 1px solid transparent;

-    border-radius: 100%;

-    height: 36px;

-    margin-bottom: 0;

-    margin-right: 7px;

-    max-width: 36px;

-    min-width: 20px;

-    padding: 0;

-    margin-top: -4px;

-    vertical-align: middle;

-    width: 36px; }

-    .btn-arrow .btn .icon-primary-left {

-      bottom: 0;

-      display: block;

-      height: 100%;

-      left: 0;

-      line-height: 0;

-      position: absolute;

-      right: 0;

-      text-indent: 0;

-      top: 0; }

-      .btn-arrow .btn .icon-primary-left:before {

-        position: absolute;

-        font-size: 1.6rem;

-        left: 1px;

-        top: 9px; }

-    .btn-arrow .btn .icon-primary-right {

-      bottom: 0;

-      display: block;

-      height: 100%;

-      left: 0;

-      line-height: 0;

-      position: absolute;

-      right: 0;

-      text-indent: 0;

-      top: 0;

-      color: #ffffff; }

-      .btn-arrow .btn .icon-primary-right:before {

-        position: absolute;

-        font-size: 1.6rem;

-        left: 17px;

-        top: 9px; }

-  .btn-arrow .btn.btn-primary .icon-primary-left {

-    color: #fff; }

-  .btn-arrow .btn.btn-primary .icon-primary-right {

-    color: #fff; }

-  .btn-arrow .btn.btn-alt .icon-primary-left {

-    color: #fff; }

-  .btn-arrow .btn.btn-alt .icon-primary-right {

-    color: #fff; }

-  .btn-arrow .btn.btn-secondary {

-    border: 1px solid #d2d2d2; }

-    .btn-arrow .btn.btn-secondary .icon-primary-left {

-      color: #0568ae; }

-    .btn-arrow .btn.btn-secondary .icon-primary-right {

-      color: #0568ae; }

-  .btn-arrow .btn.btn-small {

-    height: 20px;

-    max-width: 20px;

-    min-width: 20px;

-    width: 20px;

-    top: -1px; }

-    .btn-arrow .btn.btn-small .icon-primary-left:before {

-      font-size: 10px;

-      top: 4px;

-      left: 0; }

-    .btn-arrow .btn.btn-small .icon-primary-right:before {

-      font-size: 10px;

-      top: 4px;

-      left: 10px; }

-  .btn-arrow .btn.btn-large .icon-primary-left:before {

-    font-size: 112%;

-    top: 12px;

-    left: 23px; }

-  .btn-arrow .btn.btn-large .icon-primary-right:before {

-    font-size: 112%;

-    top: 12px;

-    left: 23px; }

-

-.btn-secondary {

-  border: 1px solid #d2d2d2;

-  background-color: #f2f2f2;

-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);

-  color: #0568ae;

-  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);

-  padding: 14px 18px 11px 17px; }

-  .btn-secondary:hover {

-    color: #0568ae;

-    outline-color: #000000 !important;

-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }

-  .btn-secondary:focus {

-    color: #0568ae;

-    outline-color: #000000 !important;

-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }

-  .btn-secondary:active {

-    color: #0568ae;

-    outline-color: #000000 !important;

-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }

-

-.btn-alt {

-  border-color: #087ac2 transparent #0568ae;

-  background-color: #0568ae;

-  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);

-  color: #ffffff; }

-  .btn-alt:hover {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }

-  .btn-alt:focus {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }

-  .btn-alt:active {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }

-

-.btn-specialty {

-  border-color: #008744 transparent #007a3e;

-  background-color: #007a3e;

-  background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);

-  color: #ffffff; }

-  .btn-specialty:hover {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }

-  .btn-specialty:focus {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }

-  .btn-specialty:active {

-    color: #ffffff;

-    outline-color: #ffffff !important;

-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }

-

-.btn-clear {

-  background: transparent !important;

-  border-color: transparent !important;

-  font-weight: normal;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  box-shadow: none;

-  text-decoration: none;

-  color: #0568ae; }

-  .btn-clear:focus {

-    text-decoration: underline; }

-  .btn-clear:hover {

-    text-decoration: underline; }

-

-.isIE .btn:focus {

-  outline: none !important;

-  text-decoration: none !important; }

-  .isIE .btn:focus:after {

-    display: block;

-    content: "";

-    position: absolute;

-    top: 4px;

-    left: 4px;

-    right: 4px;

-    bottom: 4px;

-    border: 1px dotted #000; }

-

-.isIE .btn:active {

-  outline: none !important;

-  text-decoration: none !important; }

-  .isIE .btn:active:after {

-    display: block;

-    content: "";

-    position: absolute;

-    top: 4px;

-    left: 4px;

-    right: 4px;

-    bottom: 4px;

-    border: 1px dotted #000; }

-

-.isIE .btn.active {

-  outline: none !important;

-  text-decoration: none !important; }

-  .isIE .btn.active:not(:focus):after {

-    border: 1px solid #000; }

-  .isIE .btn.active:after {

-    display: block;

-    content: "";

-    position: absolute;

-    top: 4px;

-    left: 4px;

-    right: 4px;

-    bottom: 4px;

-    border: 1px dotted #000; }

-

-.isIE .btn.btn-primary:focus:after {

-  border: 2px dashed #fff; }

-

-.isIE .btn.btn-specialty:focus:after {

-  border: 2px dashed #fff; }

-

-.isIE .btn.btn-alt:focus:after {

-  border: 2px dashed #fff; }

-

-.btn.disabled {

-  background-image: none;

-  background-color: #767676;

-  box-shadow: none;

-  cursor: not-allowed;

-  color: #ffffff;

-  border-color: transparent;

-  outline: 0 !important; }

-  .btn.disabled:hover {

-    color: #f2f2f2;

-    outline: none !important; }

-  .btn.disabled:focus {

-    color: #f2f2f2;

-    outline: none !important; }

-

-.btn[disabled] {

-  background-image: none;

-  background-color: #767676;

-  box-shadow: none;

-  cursor: not-allowed;

-  color: #ffffff;

-  border-color: transparent;

-  outline: 0 !important; }

-  .btn[disabled]:hover {

-    color: #f2f2f2;

-    outline: none !important; }

-  .btn[disabled]:focus {

-    color: #f2f2f2;

-    outline: none !important; }

-

-.btn[disabled="disabled"] {

-  background-image: none;

-  background-color: #767676;

-  box-shadow: none;

-  cursor: not-allowed;

-  color: #ffffff;

-  border-color: transparent;

-  outline: 0 !important; }

-  .btn[disabled="disabled"]:hover {

-    color: #f2f2f2;

-    outline: none !important; }

-  .btn[disabled="disabled"]:focus {

-    color: #f2f2f2;

-    outline: none !important; }

-

-.btn-arrow[disabled] .btn {

-  background-image: none;

-  background-color: #767676;

-  box-shadow: none;

-  cursor: not-allowed;

-  color: #ffffff;

-  border-color: transparent;

-  outline: 0 !important; }

-  .btn-arrow[disabled] .btn:hover {

-    color: #f2f2f2;

-    outline: none !important; }

-  .btn-arrow[disabled] .btn:focus {

-    color: #f2f2f2;

-    outline: none !important; }

-

-.btn-arrow[disabled] .icon-primary-left {

-  color: #fff !important; }

-

-.btn-arrow[disabled] .icon-primary-right {

-  color: #fff !important; }

-

-.btn-arrow.disabled .btn {

-  background-image: none;

-  background-color: #767676;

-  box-shadow: none;

-  cursor: not-allowed;

-  color: #ffffff;

-  border-color: transparent;

-  outline: 0 !important; }

-  .btn-arrow.disabled .btn:hover {

-    color: #f2f2f2;

-    outline: none !important; }

-  .btn-arrow.disabled .btn:focus {

-    color: #f2f2f2;

-    outline: none !important; }

-

-.btn-arrow.disabled .icon-primary-left {

-  color: #fff !important; }

-

-.btn-arrow.disabled .icon-primary-right {

-  color: #fff !important; }

-

-.btn-medium {

-  padding: 12px 19px 11px 18px;

-  font-size: 1.7rem; }

-

-.btn-small {

-  padding: 10px 19px 9px 18px;

-  font-size: 1.5rem;

-  border-radius: 8px; }

-

-.btn-fullwidth {

-  width: 100%; }

-

-*:not(.btn-arrow) > .btn > i[class*="icon-primary-"] {

-  margin-top: -20px;

-  margin-bottom: -20px; }

-

-.enhanced-cta-group {

-  display: -ms-flexbox;

-  display: flex;

-  -ms-flex-direction: row-reverse;

-  flex-direction: row-reverse;

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3A%23959595%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;

-  background-position: 0 -1px;

-  background-repeat: repeat-x; }

-  .enhanced-cta-group > .cta-button-group {

-    border-top: 0;

-    background-image: none !important; }

-    .enhanced-cta-group > .cta-button-group + .cta-button-group a {

-      font-size: 1.4rem;

-      line-height: 1em; }

-      .enhanced-cta-group > .cta-button-group + .cta-button-group a a {

-        margin-right: 0; }

-    .enhanced-cta-group > .cta-button-group hr {

-      min-height: 14px; }

-    .enhanced-cta-group > .cta-button-group + .cta-button-group {

-      -ms-flex-align: center;

-      -ms-grid-row-align: center;

-      align-items: center;

-      -ms-flex-direction: row;

-      flex-direction: row;

-      padding: 10px 0; }

-

-.cta-button-group {

-  text-align: right;

-  -ms-flex-align: baseline;

-  align-items: baseline;

-  padding: 20px 0 10px;

-  width: 100%; }

-  .cta-button-group.nodots {

-    background-image: none !important; }

-  .cta-button-group .hidden-phone {

-    margin-right: 14px; }

-  .cta-button-group .btn + .btn {

-    margin-right: 20px !important; }

-  .cta-button-group .btn:not(.hidden-phone):not(.visible-phone) {

-    margin-right: 0; }

-

-.isMobile .btn-arrow .btn.btn-small .icon-primary-left:before {

-  left: -1px; }

-

-.isMobile .btn-arrow .btn.btn-large .icon-primary-left:before {

-  left: 24px; }

-

-.isMobile .btn-arrow .btn.btn-large .icon-primary-right:before {

-  left: 24px; }

-

-@media (max-width: 1024px) {

-  .field-group + .btn {

-    margin-left: 15px; } }

-

-@media (max-width: 767px) {

-  .cta-button-group {

-    text-align: center; }

-    .cta-button-group > .btn {

-      display: block;

-      float: none;

-      width: 100%;

-      margin-left: auto !important;

-      margin-right: auto !important; } }

-

-.btn-group {

-  border-radius: 8px;

-  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);

-  display: -ms-flexbox;

-  display: flex;

-  -ms-flex-pack: justify;

-  justify-content: space-between;

-  margin-bottom: 10px;

-  max-width: 470px;

-  min-width: 290px;

-  position: relative;

-  vertical-align: middle;

-  width: 100%; }

-  .btn-group > .btn {

-    box-shadow: none;

-    -ms-flex: 1;

-    flex: 1;

-    position: relative;

-    float: left;

-    margin-right: -1px;

-    margin-bottom: 0;

-    padding-left: 0;

-    padding-right: 0;

-    text-align: center; }

-  .btn-group:not([data-select-color]) .btn.active:not(:first-child) {

-    margin-right: -1px;

-    border-left: 1px solid #d2d2d2 !important; }

-  .btn-group:not([data-select-color]) .btn[disabled]:not(:first-child) {

-    border-left: 1px solid #d2d2d2 !important; }

-  .btn-group:not([data-select-color]) .btn[disabled] + .btn[disabled] {

-    border-left: 1px solid #ebebeb !important; }

-  .btn-group:not([data-select-color]) > .btn.active {

-    border-color: #087ac2 transparent #0568ae;

-    background-color: #0568ae;

-    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);

-    color: #ffffff; }

-    .btn-group:not([data-select-color]) > .btn.active:hover {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: #0563a6;

-      border-color: #0563a6; }

-    .btn-group:not([data-select-color]) > .btn.active:focus {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: #0563a6;

-      border-color: #0563a6; }

-    .btn-group:not([data-select-color]) > .btn.active:active {

-      color: #ffffff;

-      outline-color: #ffffff !important;

-      background: #0563a6;

-      border-color: #0563a6; }

-  .btn-group:not([data-select-color]) > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

-    border-radius: 0; }

-  .btn-group:not([data-select-color]) > .btn:first-child:not(:last-child):not(.dropdown-toggle) {

-    border-top-right-radius: 0;

-    border-bottom-right-radius: 0; }

-  .btn-group:not([data-select-color]) > .btn:last-child:not(:first-child) {

-    border-top-left-radius: 0;

-    border-bottom-left-radius: 0; }

-  .btn-group:not([data-select-color]) > .dropdown-toggle:not(:first-child) {

-    border-top-left-radius: 0;

-    border-bottom-left-radius: 0; }

-  .btn-group > .active {

-    text-decoration: none;

-    outline: 1px dotted transparent; }

-    .btn-group > .active:focus {

-      outline: 1px dotted #ffffff; }

-

-.btn-group.btn-fullwidth > .btn {

-  -ms-flex: 1;

-  flex: 1; }

-

-.btn-group[data-select-color] {

-  margin-top: 5px;

-  box-shadow: none;

-  -ms-flex-pack: start;

-  justify-content: flex-start;

-  -ms-flex-wrap: wrap;

-  flex-wrap: wrap; }

-  .btn-group[data-select-color] .btn {

-    border: 1px solid #959595;

-    border-radius: 4px;

-    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);

-    margin-right: 10px;

-    margin-bottom: 10px;

-    height: 40px;

-    font-size: 16px;

-    color: #333333;

-    max-width: 60px;

-    min-width: 60px;

-    -ms-flex: 0;

-    flex: 0; }

-  .btn-group[data-select-color] > .btn.active:focus {

-    outline: 1px dotted #191919;

-    outline-offset: 4px; }

-

-button .btn-fill {

-  background-clip: padding-box;

-  border: 0;

-  border-radius: 4px;

-  bottom: 0;

-  display: block;

-  height: auto;

-  left: 0;

-  margin: 5px;

-  position: absolute;

-  right: 0;

-  top: 0;

-  width: auto; }

-

-button .btn-fill[style*="#fff"] {

-  border: 1px solid #d2d2d2; }

-

-[data-select-color] .btn.active {

-  background: none !important;

-  outline: 0;

-  margin-right: 10px;

-  border-width: 3px;

-  color: #333333;

-  line-height: 12px; }

-  [data-select-color] .btn.active > .btn-fill {

-    margin: 3px; }

-  [data-select-color] .btn.active:hover {

-    color: #333333; }

-

-[data-select-color] .btn:active {

-  background: none !important;

-  outline: 0;

-  margin-right: 10px;

-  border-width: 3px;

-  color: #333333;

-  line-height: 12px; }

-  [data-select-color] .btn:active > .btn-fill {

-    margin: 3px; }

-  [data-select-color] .btn:active:hover {

-    color: #333333; }

-

-.btn-group[data-select-color="orange"] > .btn.active {

-  border-color: #ea7400; }

-

-.btn-group[data-select-color="blue"] > .btn.active {

-  border-color: #0568ae; }

-

-.btn-group[data-select-color="green"] > .btn.active {

-  border-color: #007a3e; }

-

-.btn-spinbutton-toggle.btn-group {

-  display: block !important;

-  height: 40px !important;

-  margin-top: 5px;

-  max-width: 138px;

-  min-width: 138px;

-  white-space: nowrap; }

-

-.btn-spinbutton-toggle .btn {

-  border-radius: 6px;

-  font-weight: normal;

-  -ms-flex: unset;

-  flex: unset;

-  height: 40px;

-  letter-spacing: normal;

-  min-width: auto;

-  padding: 3px 0 0;

-  text-align: center;

-  min-width: 46px;

-  width: 46px; }

-

-.btn-spinbutton-toggle .btn[data-max-value] {

-  border-bottom: 1px solid #d2d2d2;

-  border-top: 1px solid #d2d2d2;

-  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.08) inset;

-  background-color: #fff;

-  cursor: text;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 2rem;

-  font-weight: normal;

-  padding: 4px 0 0;

-  text-align: center;

-  min-width: 46px !important;

-  width: 46px; }

-  .btn-spinbutton-toggle .btn[data-max-value]:focus {

-    border-color: #0568ae;

-    outline: none; }

-    .btn-spinbutton-toggle .btn[data-max-value]:focus + .btn {

-      border-left: 1px solid #0568ae;

-      transition: border 0.3s linear 0s; }

-

-.btn-spinbutton-toggle .icon-primary-subtractminimize {

-  font-size: 30px !important;

-  color: #0568ae !important; }

-

-.btn-spinbutton-toggle .icon-primary-add-maximize {

-  font-size: 30px !important;

-  color: #0568ae !important; }

-

-.btn-spinbutton-toggle .btn[disabled].icon-primary-subtractminimize {

-  background-color: #d2d2d2;

-  color: #767676 !important; }

-

-.btn-spinbutton-toggle .btn[disabled].icon-primary-add-maximize {

-  background-color: #d2d2d2;

-  color: #767676 !important; }

-

-.btn-spinbutton-toggle input.btn[disabled] {

-  background-color: #d2d2d2;

-  color: #5a5a5a;

-  cursor: not-allowed; }

-

-.btn-group.btn-spinbutton-toggle .btn[disabled] + .btn[disabled] {

-  border-left: 1px solid #f0f0f0 !important; }

-

-.btn-group.btn-spinbutton-toggle .btn[data-max-value]:focus + .btn:not(:first-child) {

-  border-left: 1px solid #0568ae !important; }

-

-@media (max-width: 480px) {

-  .btn-group:not([data-select-color]) > .btn {

-    font-size: 1.3rem;

-    min-width: auto; } }

-

-.reset-field,

-.close {

-  float: right;

-  background: none;

-  width: 34px;

-  height: 34px;

-  padding: 0;

-  overflow: hidden;

-  display: inline-block; }

-

-.reset-field {

-  display: none; }

-

-.reset-field:before {

-  font-size: 22px;

-  color: #5a5a5a; }

-

-.input-emphasized + .reset-field:before {

-  font-size: 29px;

-  color: #5a5a5a; }

-

-.reset-field:active,

-.reset-field:hover,

-.reset-field:focus {

-  display: block !important; }

-

-button.close {

-  border: 0;

-  appearance: none; }

-

-.corner-button {

-  box-shadow: 0 -50px 0 0 #f2f2f2 inset;

-  height: 69px;

-  /*overflow: hidden;*/

-  position: absolute;

-  right: -35px;

-  top: -35px;

-  transform: rotate(45deg);

-  width: 69px; }

-

-.corner-button .close:before {

-  bottom: -7px;

-  color: #0568ae;

-  display: block;

-  font-size: 20px;

-  height: 50px;

-  left: -11px;

-  position: absolute;

-  width: 50px; }

-

-.corner-button .close {

-  float: none;

-  height: 45px;

-  margin: 0;

-  position: absolute;

-  right: 12px;

-  top: 45px;

-  transform: rotate(45deg);

-  width: 45px; }

-

-.corner-button .close:focus {

-  outline: 1px dotted black; }

-

-.ds2-no-colors .corner-button .close {

-  border: 1px solid black; }

-

-.field-group input + .reset-field {

-  background: none;

-  height: 36px;

-  width: 45px;

-  display: none;

-  padding: 0;

-  position: absolute;

-  right: 0;

-  top: 0;

-  box-shadow: none;

-  border: none;

-  content: " "; }

-

-.field-group input[type="search"] + .reset-field,

-.field-group input[type="search"] + .btn-search + .reset-field,

-.tooltip-onclick input + .reset-field,

-.tooltip-onclick input + .icon-primary-tooltip + .reset-field,

-.tooltip-onclick textarea + .reset-field,

-.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field {

-  right: 45px; }

-

-.field-group input[type="search"] + .reset-field:after,

-.field-group input[type="search"] + .btn-search + .reset-field:after,

-.tooltip-onclick input + .reset-field:after,

-.tooltip-onclick input + .icon-primary-tooltip + .reset-field:after,

-.tooltip-onclick textarea + .reset-field:after,

-.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field:after {

-  background-color: #d2d2d2;

-  content: "";

-  display: block;

-  height: 20px;

-  position: absolute;

-  right: 0;

-  top: 8px;

-  width: 1px; }

-

-.tooltip-onclick input + .reset-field,

-.tooltip-onclick input + .icon-primary-tooltip + .reset-field {

-  right: 50px !important; }

-

-.tooltip-onclick textarea + .reset-field,

-.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field {

-  right: 45px !important;

-  width: 40px; }

-

-.field-group input.input-emphasized + .reset-field {

-  width: 45px;

-  height: 46px;

-  right: 6px; }

-

-.field-group input.input-emphasized + .reset-field:after {

-  top: 14px; }

-

-.field-group [disabled] + .reset-field {

-  display: none; }

-

-.ds2_touchevents .field-group input + .reset-field:focus,

-.ds2_touchevents .field-group input:focus + .reset-field,

-.ds2_touchevents textarea:focus + .reset-field,

-.ds2_touchevents textarea + .reset-field:focus {

-  display: block;

-  position: absolute;

-  right: 0px;

-  top: 0;

-  border: none; }

-

-.ds2_touchevents .field-group input {

-  padding: 8px 55px 8px 15px;

-  -webkit-appearance: none; }

-

-.ds2_touchevents textarea:focus {

-  padding: 15px 55px 15px 15px; }

-

-.ds2_touchevents textarea:focus + .reset-field {

-  border: none;

-  position: absolute;

-  right: 6px;

-  top: 5px; }

-

-.ds2_touchevents textarea.hasScrollbar:focus {

-  padding: 15px 35px 15px 15px; }

-

-.ds2_touchevents textarea.hasScrollbar:focus + .reset-field {

-  right: 22px; }

-

-.form-row.error .error-msg {

-  display: block;

-  font-size: 14px;

-  line-height: 14px;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  position: relative;

-  padding-left: 18px; }

-

-.form-row.error .error-msg:before {

-  color: #cf2a2a;

-  font-size: 14px;

-  left: 0;

-  line-height: 14px;

-  position: absolute;

-  vertical-align: middle; }

-

-.form-row.error label,

-.form-row.error .error-msg,

-.form-row.error button.awd-select,

-.form-row.error select.awd-select + span,

-.form-row.error .checkbox,

-.form-row.error .radio,

-.form-row.error legend.error,

-.form-row.error input {

-  color: #cf2a2a; }

-

-.form-row.error .btn-group > .btn,

-.form-row.error button.awd-select,

-.form-row.error .awd-select-list,

-.form-row.error select.awd-select + span,

-.form-row.error textarea,

-.form-row.error input,

-.form-row.error .checkbox .skin,

-.form-row.error .radio .skin {

-  border-color: #cf2a2a !important; }

-

-.form-row.error .checkbox input:checked:not(:disabled) + .skin {

-  background-color: #cf2a2a; }

-

-.form-row.error .radio input:checked + .skin:after {

-  background-color: #cf2a2a; }

-

-.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg {

-  margin-top: -11px;

-  border-bottom-left-radius: 0;

-  border-bottom-right-radius: 0; }

-

-.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg + .helpertext {

-  margin: 0 0 10px; }

-

-.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg + .helpertext:before,

-.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg + .helpertext:after {

-  display: none; }

-

-.error .helpertext {

-  border-color: #cf2a2a;

-  /*border-radius:0;*/ }

-

-.error .helpertext:before {

-  border-top-color: #cf2a2a; }

-

-.error .tooltip-onfocus .helpertext {

-  margin: 14px 0 10px 0; }

-

-.error [class*="price"],

-.error [class*="pricing-"] {

-  color: #cf2a2a; }

-

-input:-ms-clear {

-  display: none; }

-

-input[type]::-webkit-inner-spin-button,

-input[type]::-webkit-outer-spin-button {

-  -webkit-appearance: none; }

-

-/*  input[type] {

-  -moz-appearance: textfield; } 

- */

-form {

-  margin: 0; }

-

-fieldset {

-  padding: 0;

-  margin: 0;

-  border: 0; }

-

-label,

-legend {

-  display: inline-block;

-  font-size: 1.4rem;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-legend {

-  display: block; }

-

-.error-msg {

-  display: none; }

-

-select,

-textarea,

-input {

-  border-radius: 6px;

-  color: #5a5a5a;

-  display: inline-block;

-  font-size: 1.6rem;

-  margin: 0px;

-  padding: 0 15px 0 15px;

-  vertical-align: middle;

-  line-height: normal; }

-

-select::-webkit-input-placeholder,

-textarea::-webkit-input-placeholder,

-input::-webkit-input-placeholder {

-  color: #5a5a5a;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial;

-  font-style: normal;

-  opacity: 1; }

-

-select:-moz-placeholder,

-textarea:-moz-placeholder,

-input:-moz-placeholder {

-  color: #5a5a5a;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial;

-  font-style: normal;

-  opacity: 1; }

-

-select::-moz-placeholder,

-textarea::-moz-placeholder,

-input::-moz-placeholder {

-  color: #5a5a5a;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial;

-  font-style: normal;

-  opacity: 1; }

-

-select:-ms-input-placeholder,

-textarea:-ms-input-placeholder,

-input:-ms-input-placeholder {

-  color: #5a5a5a;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial;

-  transition: none;

-  opacity: 1; }

-

-select:placeholder,

-textarea:placeholder,

-input:placeholder {

-  color: #5a5a5a;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial;

-  font-style: normal;

-  opacity: 1; }

-

-select:last-child,

-textarea:last-child,

-input:last-child {

-  margin-right: 0; }

-

-input:not([type="button"]) {

-  height: 36px; }

-

-input.input-emphasized {

-  font-size: 1.8rem;

-  height: 48px;

-  padding: 13px 20px 13px; }

-

-input[type="search"]:focus {

-  padding-right: 88px; }

-

-input[type="search"] {

-  padding-right: 40px;

-  -webkit-appearance: none !important; }

-

-input[type="search"].input-emphasized {

-  padding-right: 45px; }

-

-.btn-search[class*="btn"] {

-  background-color: transparent;

-  background-position: 50% 50%;

-  background-size: 20px;

-  background-repeat: no-repeat;

-  border: none;

-  height: 100%;

-  margin-left: 0;

-  margin-top: 0;

-  min-width: 45px !important;

-  outline-offset: 0;

-  padding: 0 !important;

-  position: absolute;

-  right: 0;

-  top: 0;

-  border-radius: 0 5px 5px 0;

-  min-width: 44px;

-  width: 44px; }

-

-.input-emphasized + .btn-search[class*="btn"],

-.input-emphasized + .reset-field + .btn-search[class*="btn"] {

-  background-size: 26px;

-  height: 46px;

-  top: 1px;

-  outline-offset: -3px;

-  margin-bottom: 0;

-  border-radius: 0 5px 5px 0; }

-

-input[type="search"].input-emphasized + .reset-field {

-  right: 45px !important; }

-

-.search-suggestion-wrapper {

-  position: relative;

-  margin-bottom: 15px; }

-

-/*styles from dropdown*/

-.search-suggestion-list {

-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);

-  border-radius: 0 0 6px 6px;

-  position: relative;

-  border: 1px solid #0568ae;

-  border-top: 0;

-  padding: 15px 0;

-  background-color: #f2f2f2;

-  z-index: 1000;

-  width: 100%;

-  max-height: 400px;

-  overflow-y: auto; }

-

-.search-suggestion-list:empty {

-  display: none; }

-

-.search-suggestion-item {

-  position: relative;

-  z-index: -1;

-  padding: 0 15px;

-  line-height: 4.0rem;

-  color: #5a5a5a; }

-

-.search-suggestion-item a {

-  text-decoration: none;

-  color: #5a5a5a; }

-

-.search-suggestion-item:hover,

-.search-suggestion-item:focus {

-  cursor: pointer;

-  background-color: #d2d2d2; }

-

-input[data-provide="datepicker"],

-[data-provide="datepicker"]:-moz-placeholder,

-[data-provide="datepicker"]:-ms-input-placeholder,

-[data-provide="datepicker"]:-webkit-input-placeholder {

-  color: #0568ae !important;

-  opacity: 1;

-  filter: alpha(opacity=100); }

-

-input[disabled],

-input[readonly],

-select[disabled],

-select[readonly],

-textarea[disabled],

-textarea[readonly],

-span.icon-primary-calendar.disabled,

-span.icon-primary-calendar.readonly {

-  cursor: not-allowed;

-  background-color: #f2f2f2;

-  box-shadow: none; }

-

-span.icon-primary-calendar.disabled input,

-span.icon-primary-calendar.readonly input {

-  color: #959595 !important; }

-

-textarea {

-  display: block;

-  width: 100%;

-  max-width: 100%;

-  padding: 15px; }

-

-textarea.small {

-  line-height: 20px; }

-

-textarea + .reset-field {

-  display: none; }

-

-textarea::-webkit-input-placeholder {

-  line-height: .99; }

-

-textarea:-moz-placeholder {

-  line-height: .99; }

-

-textarea::-moz-placeholder {

-  line-height: .99; }

-

-textarea:-ms-input-placeholder {

-  line-height: .99; }

-

-textarea:placeholder {

-  line-height: .99; }

-

-textarea,

-input {

-  background-color: #ffffff;

-  border: 1px solid #d2d2d2; 

-/* -webkit-appearance: none; */

-  box-shadow: 2px 3px 2px -2px rgba(0, 0, 0, 0.08) inset;

-  transition: border .3s linear 0s;

-  font-family: "Omnes-ECOMP-W02", Arial; }

-

-textarea:focus,

-input:focus {

-  outline: 0;

-  border-color: #0568ae; }

-

-.input-append {

-  display: table; }

-

-.input-append > div {

-  display: table-cell;

-  width: 1%; }

-

-.input-append > .field-group {

-  width: 100%; }

-

-.row .field-group input[class*="span"] {

-  float: none; }

-

-.field-group {

-  position: relative;

-  display: inline-block; }

-

-label + .field-group,

-label + .input-append,

-label + .row,

-label + .row-nowrap,

-label + .form-row {

-  margin-top: 5px; }

-

-.field-group {

-  position: relative;

-  display: block; }

-

-.field-group input:not([type="button"])[disabled] {

-  padding-right: 15px; }

-

-input:invalid,

-textarea:invalid,

-select:invalid {

-  outline: none !important; }

-

-.form-row {

-  margin-top: 20px; }

-

-.form-row.nomar {

-  margin: 0; }

-

-.row-nowrap.no-flex.form-row > label + br {

-  margin-bottom: 5px; }

-

-span.form-row {

-  display: inline-block; }

-

-legend + .form-row {

-  margin-top: 20px; }

-

-.tooltip-onclick input {

-  padding-right: 45px; }

-

-.ds2_touchevents .tooltip-onclick input:focus {

-  padding-right: 95px; }

-

-span.icon-primary-calendar {

-  display: block;

-  position: relative;

-  background-color: #fff;

-  border-radius: 4px;

-  overflow: hidden;

-  height: 36px; }

-

-span.icon-primary-calendar:before {

-  position: absolute;

-  top: 7px;

-  left: 13px;

-  color: #0568ae; }

-

-span.icon-primary-calendar.disabled {

-  background-color: #f2f2f2; }

-

-span.icon-primary-calendar.disabled:before {

-  color: #959595; }

-

-span.icon-primary-calendar input {

-  padding-left: 35px;

-  color: #0568ae;

-  transition: border-color 0.3s linear 0s;

-  box-shadow: 2px 3px 2px -2px rgba(0, 0, 0, 0.08) inset;

-  position: absolute;

-  top: 0;

-  left: 0; }

-

-.faux-input + input.datepicker-input:not([disabled]) {

-  cursor: pointer;

-  margin-left: 0;

-  background-color: #fff;

-  position: absolute;

-  left: 0;

-  top: 0;

-  z-index: 0; }

-

-.faux-input {

-  background-color: transparent !important;

-  border: 1px solid transparent;

-  border-radius: 4px;

-  font-size: 1.6rem;

-  height: 35px;

-  left: 0;

-  line-height: 35px;

-  margin-bottom: 10px;

-  margin-right: 6px;

-  padding: 0 0 0 35px;

-  position: relative;

-  text-align: left;

-  top: 0;

-  vertical-align: middle;

-  width: 100%;

-  z-index: 1; }

-

-.faux-input:disabled {

-  cursor: not-allowed; }

-

-.faux-input:focus + .datepicker-input,

-[data-calendar-state="opened"] + .datepicker-input {

-  border-color: #0568ae;

-  box-shadow: 2px 3px 2px -2px rgba(5, 116, 172, 0.35) inset;

-  outline: 0 none; }

-

-.form-row.error .error-msg {

-  display: block;

-  font-size: 14px;

-  line-height: 14px;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  position: relative;

-  padding-left: 18px;

-  margin-top: 10px; }

-

-.form-row.error .error-msg > .icon-primary-badgealert {

-  height: 14px;

-  width: 14px;

-  position: absolute;

-  left: 0;

-  margin-right: 0; }

-

-.form-row.error .error-msg > .icon-primary-badgealert:before {

-  color: #cf2a2a;

-  font-size: 14px;

-  left: 0;

-  line-height: 14px;

-  position: absolute;

-  vertical-align: middle; }

-

-.form-row.error label,

-.form-row.error .error-msg,

-.form-row.error button.awd-select,

-.form-row.error select.awd-select + span,

-.form-row.error .checkbox,

-.form-row.error .radio,

-.form-row.error legend.error,

-.form-row.error input,

-.form-row.error textarea {

-  color: #cf2a2a; }

-

-.form-row.error .btn-group > .btn,

-.form-row.error button.awd-select,

-.form-row.error .awd-select-list,

-.form-row.error select.awd-select + span,

-.form-row.error textarea,

-.form-row.error input,

-.form-row.error .checkbox .skin,

-.form-row.error .radio .skin {

-  border-color: #cf2a2a !important; }

-

-.form-row.error .checkbox input:checked:not(:disabled) + .skin {

-  background-color: #cf2a2a; }

-

-.form-row.error .radio input:checked + .skin:after {

-  background-color: #cf2a2a; }

-

-.error [class*="price"],

-.error [class*="pricing-"] {

-  color: #cf2a2a; }

-

-hr,

-.hr-or {

-  display: block;

-  height: 1px;

-  margin: 15px 0;

-  border: none;

-  background-repeat: repeat-x;

-  background-color: #959595;

-  position: relative; }

-

-hr.dark {

-  background-color: #959595; }

-

-hr.lite {

-  background-color: #d2d2d2; }

-

-.hr-or:before {

-  background-color: #fff;

-  color: #666;

-  content: " OR ";

-  display: block;

-  font-size: 1.4rem;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  height: 16px;

-  left: 50%;

-  line-height: 1.6rem;

-  margin-left: -15px;

-  margin-top: -8px;

-  position: absolute;

-  text-align: center;

-  top: 50%;

-  width: 30px;

-  z-index: 1111; }

-

-hr.hr-dotted.dark {

-  background-color: transparent;

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E");

-  background-position: bottom;

-  background-repeat: repeat-x;

-  background-size: 4px 1px;

-  width: 100%; }

-

-hr.hr-dotted.lite {

-  background-color: transparent;

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(204%2C204%2C204%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E"); }

-

-hr.is-vertical.dark,

-hr.hr-or.dark,

-hr.is-vertical.lite,

-hr.hr-or.lite {

-  display: inline-block;

-  height: auto;

-  margin: 0 15px;

-  min-height: 20px;

-  width: 1px; }

-

-hr.is-vertical.dark,

-hr.hr-or.dark {

-  background-color: #959595; }

-

-hr.is-vertical.lite,

-hr.hr-or.lite {

-  background-color: #d2d2d2; }

-

-.hr-dotted.is-vertical.dark,

-.hr-dotted.is-vertical.lite {

-  background-color: transparent;

-  background-repeat: repeat-y;

-  background-size: 1px 4px;

-  height: auto;

-  min-height: 20px;

-  width: 1px; }

-

-.hr-dotted.is-vertical.dark {

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A1px%3B%20height%3A100%25%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%22100%25%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%221%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E"); }

-

-.hr-dotted.is-vertical.lite {

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A1px%3B%20height%3A100%25%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(204%2C204%2C204%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%22100%25%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%221%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E"); }

-

-.row-nowrap > .span + hr.is-vertical,

-.row > .span + hr.is-vertical {

-  margin: 0 0 0 -20px; }

-

-@media (max-width: 767px) {

-  hr,

-  .hr-or {

-    margin: 30px 0; }

-  hr.full {

-    margin-left: -15px;

-    margin-right: -15px; }

-  .hr-or.is-vertical {

-    min-height: 1px;

-    height: 1px;

-    width: 100%; }

-  .row-nowrap > .span + hr.is-vertical {

-    margin: 0 0 0 -15px; }

-  .row > .span + hr.is-vertical {

-    min-height: 1px;

-    height: 1px;

-    width: 100%;

-    margin: 0;

-    display: block; }

-  .row > .span + hr.is-vertical.lite {

-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(204%2C204%2C204%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;

-    background-size: 4px 1px;

-    background-repeat: repeat-x; }

-  .row > .span + hr.is-vertical.dark {

-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;

-    background-size: 4px 1px;

-    background-repeat: repeat-x; } }

-

-hr.bottom-space-only {

-  margin-top: 0; }

-

-.hr-nomargin {

-  margin: 0; }

-

-.radio {

-  position: relative;

-  min-height: 24px;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.6rem;

-  margin-bottom: 5px; }

-  .radio input {

-    -webkit-tap-highlight-color: transparent;

-    height: 10px;

-    margin: 6px;

-    opacity: 0;

-    outline: none;

-    position: absolute;

-    left: 1px;

-    top: 1px;

-    width: 10px; }

-    .radio input:focus + .skin {

-      border-color: #0568ae; }

-      .radio input:focus + .skin:before {

-        content: "";

-        height: 34px;

-        left: -6px;

-        top: -6px;

-        outline: 1px dotted #000000;

-        position: absolute;

-        width: 34px; }

-    .radio input + .skin {

-      border-radius: 100%; }

-    .radio input:checked + .skin:after {

-      background-color: #0568ae;

-      border-radius: 100%;

-      border: 3px solid #FFFFFF;

-      content: "";

-      display: block;

-      height: 16px;

-      position: absolute;

-      width: 16px; }

-    .radio input:disabled + .skin {

-      cursor: not-allowed;

-      background-color: #d2d2d2;

-      border-color: #d2d2d2;

-      color: #666666; }

-      .radio input:disabled + .skin + span {

-        cursor: not-allowed;

-        color: #666666; }

-    .radio input:disabled:checked + .skin:after {

-      background-color: #666666; }

-    .radio input:invalid + .skin {

-      border: solid 1px #cf2a2a; }

-  .radio .skin {

-    background-color: #FFFFFF;

-    border: 1px solid #d2d2d2;

-    border-radius: 3px;

-    display: inline-block;

-    height: 24px;

-    left: 0;

-    position: absolute;

-    top: 0;

-    width: 24px; }

-  .radio span {

-    display: inline-block;

-    margin-left: 34px;

-    margin-top: 0;

-    position: relative;

-    top: 3px; }

-  .radio label {

-    font-size: 1.6rem;

-    font-family: "Omnes-ECOMP-W02", Arial; }

-

-.radio.inline {

-  display: inline-block;

-  margin-bottom: 10px;

-  vertical-align: middle;

-  margin-right: 10px; }

-  .radio.inline:last-child {

-    margin-right: 0; }

-

-.radio-box {

-  border: 1px solid #d2d2d2;

-  border-radius: 8px; }

-  .radio-box > [role="radio"] label {

-    padding: 15px 15px 20px 15px;

-    display: block;

-    width: 100%; }

-    .radio-box > [role="radio"] label .skin + span {

-      top: 2px; }

-  .radio-box > [role="radio"] + div {

-    padding: 0 15px 15px 47px; }

-  .radio-box > [aria-checked="false"] label > input {

-    top: 15px;

-    left: 15px; }

-  .radio-box > [aria-checked="false"] label .skin {

-    top: 15px;

-    left: 15px; }

-  .radio-box > [aria-checked="true"] label > input {

-    top: 13px;

-    left: 13px; }

-  .radio-box > [aria-checked="true"] label .skin {

-    top: 13px;

-    left: 13px; }

-

-.radio-box.active {

-  border: 3px solid #0568ae; }

-  .radio-box.active > [role="radio"] label {

-    padding: 13px 14px 19px 13px; }

-

-.checkbox {

-  position: relative;

-  min-height: 24px;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.6rem;

-  margin-bottom: 5px; }

-  .checkbox input {

-    -webkit-tap-highlight-color: transparent;

-    height: 10px;

-    margin: 6px;

-    opacity: 0;

-    outline: none;

-    position: absolute;

-    left: 1px;

-    top: 1px;

-    width: 10px; }

-    .checkbox input:focus + .skin {

-      border-color: #0568ae; }

-      .checkbox input:focus + .skin:before {

-        content: "";

-        height: 34px;

-        left: -6px;

-        top: -6px;

-        outline: 1px dotted #000000;

-        position: absolute;

-        width: 34px; }

-    .checkbox input:checked:not(:disabled) + .skin {

-      background-color: #0568ae;

-      border-color: #0568ae; }

-    .checkbox input:checked:disabled + .skin:after {

-      color: #5A5A5A; }

-    .checkbox input:checked + .skin:after {

-      height: 24px;

-      width: 24px;

-      background-color: transparent;

-      font-size: 23.4px;

-      color: #FFFFFF;

-      line-height: 21px; }

-    .checkbox input:disabled + .skin {

-      cursor: not-allowed;

-      background-color: #d2d2d2;

-      border-color: #d2d2d2;

-      color: #666666; }

-      .checkbox input:disabled + .skin + span {

-        cursor: not-allowed;

-        color: #666666; }

-    .checkbox input:invalid + .skin {

-      border: solid 1px #cf2a2a; }

-    .checkbox input:indeterminate + .skin:after {

-      background-color: transparent;

-      font-size: 25px;

-      color: #0574ac;

-      content: "\e920"; }

-  .checkbox .skin {

-    background-color: #fff;

-    border: 1px solid #d2d2d2;

-    border-radius: 3px;

-    display: inline-block;

-    height: 24px;

-    width: 24px;

-    position: absolute;

-    left: 0;

-    top: 0; }

-  .checkbox span {

-    display: inline-block;

-    margin-left: 34px;

-    margin-top: 0;

-    position: relative;

-    top: 3px; }

-  .checkbox label {

-    font-size: 1.6rem;

-    font-family: "Omnes-ECOMP-W02", Arial; }

-  .checkbox input {

-    z-index: 9999; }

-  .checkbox input.indeterminate + .skin:after {

-    font-size: 22px;

-    color: #0568ae; }

-

-.checkbox.inline {

-  display: inline-block;

-  margin-bottom: 10px;

-  vertical-align: middle;

-  margin-right: 10px; }

-  .checkbox.inline:last-child {

-    margin-right: 0; }

-

-.checkbox.checkbox-selectall {

-  margin: 20px 0 0 24px; }

-

-.terms-after-checkbox {

-  margin-top: 15px; }

-

-.indeterminate-margin {

-  padding-left: 24px; }

-

-.tiny-accordion {

-  border-bottom: 1px solid #d2d2d2; }

-

-.toggle-header,

-.inactive-toggle-header {

-  border-color: #fff;

-  color: #0568ae;

-  cursor: pointer;

-  display: block;

-  font-size: 2.0rem;

-  line-height: 2.2rem;

-  min-height: 41px;

-  position: relative;

-  padding: 16px 55px 16px 15px; }

-

-.toggle-header.opened {

-  color: #333333; }

-

-.tiny-accordion .toggle-header,

-.tiny-accordion .inactive-toggle-header {

-  padding: 16px 55px 16px 15px;

-  border-top: 1px solid #d2d2d2; }

-

-.tiny-accordion .toggle-header:focus {

-  text-decoration: underline; }

-

-.tiny-accordion.iconleft .toggle-header,

-.tiny-accordion.iconleft .inactive-toggle-header {

-  padding: 15px 15px 15px 50px; }

-

-.accordion-content {

-  font-size: 1.4rem; }

-

-.accordion-content .toggle-header:first-child {

-  margin-top: 16px; }

-

-.tiny-accordion .toggle-header + .accordion-content {

-  padding: 0 50px 15px 15px; }

-

-.tiny-accordion.iconleft .toggle-header + .accordion-content {

-  padding: 0 15px 15px 50px; }

-

-.toggle-header .icon-primary-accordion-plus,

-.toggle-header .icon-primary-accordion-minus {

-  display: inline-block;

-  font-size: 20px;

-  margin: 0;

-  padding: 0;

-  position: absolute;

-  right: 15px;

-  vertical-align: middle;

-  top: 16px;

-  font-weight: bold; }

-

-.tiny-accordion.iconleft .toggle-header .icon-primary-accordion-plus,

-.tiny-accordion.iconleft .toggle-header .icon-primary-accordion-minus {

-  left: 15px; }

-

-.inactive-toggle-header:hover {

-  cursor: inherit; }

-

-.tiny-accordion-to-tabs,

-.tiny-tabs {

-  position: relative;

-  width: 100%;

-  margin: 0px;

-  padding: 0px; }

-

-.tiny-tabs [class*="icon-primary-accordion-"] {

-  display: none !important; }

-

-.tiny-accordion-to-tabs:before,

-.tiny-accordion-to-tabs:after,

-.tiny-tabs:before,

-.tiny-tabs:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.tiny-accordion-to-tabs:after,

-.tiny-tabs:after {

-  clear: both; }

-

-.tiny-accordion-to-tabs:before,

-.tiny-accordion-to-tabs:after,

-.tiny-tabs:before,

-.tiny-tabs:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.tiny-accordion-to-tabs:after,

-.tiny-tabs:after {

-  clear: both; }

-

-.tiny-tabs > .toggle-header {

-  display: inline-block;

-  float: left;

-  border-top: none;

-  overflow: hidden;

-  height: 70px;

-  text-align: center;

-  background-color: #fff;

-  border-radius: 0px;

-  padding: 26px 20px 25px 20px !important;

-  border-top: 1px solid #fff;

-  -webkit-filter: none;

-  filter: none;

-  background-clip: padding-box;

-  border-bottom: 1px solid #d2d2d2;

-  font-weight: normal;

-  border-right: 1px solid #d2d2d2;

-  white-space: nowrap; }

-

-.tiny-tabs .toggle-header + div {

-  left: 0px;

-  position: absolute;

-  top: 69px;

-  border-top: 1px solid #d2d2d2;

-  padding: 0;

-  display: block;

-  border-bottom: none;

-  width: 100%; }

-

-.accordion-pad {

-  padding-top: 30px;

-  padding-bottom: 30px; }

-

-.tiny-tabs .opened {

-  color: #333333;

-  border-top: 5px solid #0568ae !important;

-  padding-top: 22px !important;

-  border-bottom: none;

-  background-color: #fff;

-  -webkit-filter: none;

-  filter: none;

-  cursor: default;

-  z-index: 999; }

-

-.tiny-tabs .toggle-header:focus {

-  text-decoration: underline;

-  outline: thin dotted #666;

-  outline-offset: 0; }

-

-.tiny-tabs .toggle-header:first-child {

-  border-left: none;

-  margin-left: 0; }

-

-.tiny-tabs .toggle-header:first-child {

-  border-left: 1px solid #fff; }

-

-.tiny-tabs .opened:first-child {

-  border-left: 1px solid #d2d2d2; }

-

-.tiny-tabs .toggle-header:nth-last-of-type(2) {

-  border-right-color: #fff; }

-

-.tiny-tabs .opened:nth-last-of-type(2) {

-  border-right: 1px solid #d2d2d2; }

-

-@media (max-width: 767px) {

-  .tiny-accordion,

-  .tiny-accordion-to-tabs {

-    margin-left: -15px;

-    margin-right: -15px;

-    width: auto; }

-  .tiny-accordion-to-tabs {

-    display: block;

-    border-bottom: 1px solid #d2d2d2; }

-  .tiny-accordion-to-tabs .toggle-header {

-    display: block;

-    min-height: 41px;

-    padding: 16px 50px 16px 15px;

-    border-top: 1px solid #d2d2d2; }

-  .tiny-accordion-to-tabs .toggle-header:focus {

-    text-decoration: underline; }

-  .tiny-accordion-to-tabs .toggle-header + .accordion-content {

-    padding: 0 50px 15px 15px; } }

-

-@media (min-width: 768px) {

-  .tiny-accordion-to-tabs [class*="icon-primary-accordion-"] {

-    display: none !important; }

-  .tiny-accordion-to-tabs > .toggle-header {

-    display: inline-block;

-    float: left;

-    border-top: none;

-    /*overflow: hidden;*/

-    height: 70px;

-    text-align: center;

-    background-color: #fff;

-    border-radius: 0px;

-    padding: 26px 20px 25px 20px !important;

-    border-top: 1px solid #fff;

-    -webkit-filter: none;

-    filter: none;

-    background-clip: padding-box;

-    border-bottom: 1px solid #d2d2d2;

-    font-weight: normal;

-    border-right: 1px solid #d2d2d2;

-    white-space: nowrap; }

-  .tiny-accordion-to-tabs .toggle-header + div {

-    left: 0px;

-    position: absolute;

-    top: 69px;

-    border-top: 1px solid #d2d2d2;

-    padding-top: 30px;

-    padding-left: 20px;

-    display: block;

-    border-bottom: none;

-    width: 100%; }

-  .tiny-accordion-to-tabs .opened {

-    color: #333333;

-    border-top: 5px solid #0568ae !important;

-    padding-top: 22px !important;

-    border-bottom: none;

-    background-color: #fff;

-    -webkit-filter: none;

-    filter: none;

-    cursor: default;

-    text-decoration: none;

-    z-index: 999; }

-  .tiny-accordion-to-tabs .toggle-header:focus {

-    text-decoration: underline;

-    outline: thin dotted #666;

-    outline-offset: 0px; }

-  .tiny-accordion-to-tabs .toggle-header:nth-last-of-type(2) {

-    border-right: none; }

-  .tiny-accordion-to-tabs .toggle-header:first-child {

-    border-left: none;

-    margin-left: 0; }

-  .tiny-accordion-to-tabs .toggle-header:first-child {

-    border-left: 1px solid #fff; }

-  .tiny-accordion-to-tabs .opened:first-child {

-    border-left: 1px solid #d2d2d2; }

-  .tiny-accordion-to-tabs .opened:nth-last-of-type(2) {

-    border-right: 1px solid #d2d2d2; } }

-

-.toggle-header .tooltip .icon-primary-tooltip {

-  margin-top: -5px; }

-

-.accordion-content {

-  transition: all 0.8s linear; }

-

-.opaque-content {

-  opacity: 0; }

-

-.tiny-tabs .toggle-header {

-  display: inline-block;

-  float: left;

-  border-top: none;

-  overflow: hidden;

-  height: 70px;

-  text-align: center;

-  background-color: #fff;

-  border-radius: 0px;

-  padding: 22px 20px 25px 20px !important;

-  border-top: 5px solid #fff;

-  -webkit-filter: none;

-  filter: none;

-  background-clip: padding-box;

-  border-bottom: 1px solid #ccc;

-  font-weight: normal;

-  border-right: 1px solid #ccc;

-  white-space: nowrap; }

-

-.tiny-tabs .toggle-header:first-child {

-  margin-left: 0; }

-

-.tiny-tabs div:first-child .toggle-header {

-  margin-left: 30px; }

-

-.tiny-tabs > div .toggle-header.opened {

-  border-bottom: 0 !important; }

-

-.tiny-accordion-to-tabs > div > div.toggle-header {

-  background-clip: padding-box;

-  background-color: #fff;

-  border-bottom: 1px solid #ccc;

-  border-radius: 0;

-  border-top: 5px solid #fff;

-  display: inline-block;

-  filter: none;

-  float: left;

-  font-weight: normal;

-  overflow: hidden;

-  padding: 22px 20px 21px !important;

-  text-align: center;

-  white-space: nowrap; }

-

-.tiny-accordion-to-tabs .toggle-header:first-child {

-  margin-left: 0; }

-

-.tiny-accordion-to-tabs div:first-child .toggle-header {

-  margin-left: 30px;

-  border-bottom: 0 !important; }

-

-.tiny-accordion-to-tabs > div .toggle-header.opened {

-  border-bottom: 0 !important; }

-

-@media (max-width: 767px) {

-  .tiny-accordion-to-tabs {

-    display: block !important;

-    border-bottom: 1px solid #ccc !important; }

-  .tiny-accordion-to-tabs > div > div.toggle-header {

-    display: block !important;

-    float: none;

-    text-align: left;

-    min-height: 41px !important;

-    padding: 15px 50px 15px 15px !important;

-    border-top: 1px solid #ccc; }

-  .tiny-accordion-to-tabs > div > div.toggle-header:first-child {

-    margin-left: 0 !important; }

-  .tiny-accordion-to-tabs > div > div.toggle-header + .accordion-content {

-    padding: 0 50px 15px 15px; }

-  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-plus {

-    background-position: 0 0;

-    background-size: 20px 40px; }

-  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-minus {

-    background-position: 0 -20px;

-    background-size: 20px 40px; }

-  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-plus,

-  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-minus {

-    display: inline-block;

-    height: 20px;

-    margin: 0;

-    padding: 0;

-    position: absolute;

-    right: 15px;

-    vertical-align: middle;

-    width: 20px; } }

-

-.alert {

-  background-color: #5a5a5a;

-  border-radius: 8px;

-  color: #fff;

-  margin-top: 15px;

-  padding: 0;

-  position: relative;

-  border: 0; }

-

-.alert h3,

-.alert h4 {

-  color: #fff;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 1.6rem;

-  margin: 0 20px 5px 0; }

-

-.alert div {

-  padding: 15px 20px; }

-

-.alert div:first-child {

-  border-radius: 8px 0 0 8px;

-  width: 1%; }

-

-.alert div:first-child + div {

-  border: 1px solid transparent;

-  border-left: none;

-  border-radius: 0 8px 8px 0; }

-

-.alert-error {

-  background-color: #cf2a2a;

-  border: 1px solid #cf2a2a; }

-

-.alert-info {

-  background-color: #44c8f5;

-  border: 1px solid #44c8f5; }

-

-.alert-success {

-  background-color: #c5d63d;

-  border: 1px solid #c5d63d; }

-

-.alert [class*="icon-primary-"] {

-  color: #fff;

-  font-size: 30px;

-  margin-right: 0; }

-

-.alert .close {

-  height: 30px;

-  position: absolute;

-  right: 1px;

-  top: 1px;

-  width: 30px; }

-

-.alert .close:before {

-  color: #fff;

-  margin-right: 0;

-  position: absolute;

-  right: 9px;

-  top: 9px; }

-

-.alert a {

-  color: #fff;

-  text-decoration: underline; }

-

-.alert .close:focus {

-  outline: 1px dotted #666; }

-

-.alert p {

-  font-size: 1.4rem; }

-

-.alert p:last-child {

-  margin-bottom: 0; }

-

-.alert .standalone-link i[class*="icon-primary-"] {

-  font-size: 20px;

-  margin-right: 5px; }

-

-@media (max-width: 767px) {

-  .alert {

-    border-radius: 0;

-    margin: 0 -15px; }

-  .alert + .alert {

-    margin-top: 4px; }

-  .alert div {

-    padding: 15px 10px; }

-  .alert div:first-child {

-    border-radius: 0;

-    padding: 15px; }

-  .alert h3,

-  .alert h4 {

-    font-size: 1.4rem; }

-  .alert p {

-    font-size: 1.2rem; }

-  .alert .close {

-    right: 5px;

-    top: 5px; }

-  .alert .standalone-link i[class*="icon-primary-"] {

-    font-size: 16px; } }

-

-.alert h3 {

-  margin: 0;

-  font-size: 16px; }

-

-.alert p {

-  font-size: 14px; }

-

-.alert p a {

-  color: #FFFFFF;

-  text-decoration: underline; }

-

-.alert div:first-child + div {

-  padding-right: 25px; }

-

-.alert div:last-child {

-  padding-right: 20px !important; }

-

-.alert p [class*="icon-primary-"] {

-  color: #fff;

-  font-size: 20px;

-  margin-right: 0; }

-

-@media (max-width: 767px) {

-  .alert h3 {

-    font-size: 14px; }

-  .alert div:first-child + div {

-    padding-right: 20px; }

-  .alert div:last-child {

-    padding-right: 15px !important; }

-  .alert div:first-child {

-    padding: 15px; }

-  .alert p {

-    font-size: 12px; }

-  .alert p [class*="icon-primary-"] {

-    font-size: 16px; } }

-

-.b2b-audio {

-  width: auto;

-  margin: 10px auto;

-  height: 35px; }

-  .b2b-audio .controls-wrapper {

-    display: inline-block;

-    font-size: 25px;

-    cursor: pointer; }

-    .b2b-audio .controls-wrapper i {

-      font-size: 25px;

-      margin-right: 0px;

-      color: #444; }

-      .b2b-audio .controls-wrapper i:hover {

-        color: #0574AC; }

-  .b2b-audio .seek-bar-container-wrapper {

-    display: inline-block;

-    outline: 0;

-    min-width: 180px;

-    margin-right: 10px;

-    margin-left: 10px;

-    height: 14px;

-    padding-top: 5px; }

-    .b2b-audio .seek-bar-container-wrapper .timing-container {

-      padding-top: 13px;

-      color: #333;

-      font-size: 12px; }

-      .b2b-audio .seek-bar-container-wrapper .timing-container .timing-container-left {

-        float: left;

-        line-height: 100%; }

-      .b2b-audio .seek-bar-container-wrapper .timing-container .timing-container-right {

-        float: right;

-        line-height: 100%; }

-      .b2b-audio .seek-bar-container-wrapper .timing-container .timing-container-spacer {

-        clear: both; }

-  .b2b-audio .seek-bar-tooltip {

-    text-align: center;

-    min-width: 76px; }

-

-.b2b-audio-popover {

-  width: 22px; }

-  .b2b-audio-popover .volume-popover {

-    height: 100px !important;

-    width: 6px !important;

-    margin: 7px auto; }

-  .b2b-audio-popover .min-label {

-    margin-top: 5px; }

-

-.b2b-audio-native {

-  width: auto;

-  height: auto; }

-

-.b2b-audio-recorder {

-  border: 1px solid #ccc;

-  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.15);

-  height: 63px;

-  min-height: 63px;

-  min-width: 347px; }

-  .b2b-audio-recorder .b2b-elapsed-time {

-    margin: 23px 0 24px 15px;

-    font-size: 16px;

-    font-style: italic;

-    color: #767676; }

-  .b2b-audio-recorder .b2b-controls {

-    width: 68px;

-    cursor: pointer; }

-    .b2b-audio-recorder .b2b-controls i.icoControls-record {

-      font-size: 64px;

-      color: black;

-      float: right;

-      margin-right: 10px; }

-      .b2b-audio-recorder .b2b-controls i.icoControls-record:focus, .b2b-audio-recorder .b2b-controls i.icoControls-record:hover {

-        color: #0568ae; }

-    .b2b-audio-recorder .b2b-controls i.icoControls-stop {

-      font-size: 36px;

-      color: black;

-      float: right;

-      margin-right: 20px;

-      margin-top: 12px; }

-      .b2b-audio-recorder .b2b-controls i.icoControls-stop:focus, .b2b-audio-recorder .b2b-controls i.icoControls-stop:hover {

-        color: #0568ae; }

-

-.b2b-top-btn {

-  height: 36px;

-  width: 36px;

-  border-radius: 7px; }

-

-.b2b-top-btn > i {

-  position: absolute;

-  top: 13px;

-  left: 9px;

-  width: 11px;

-  height: 18px; }

-

-.b2b-badge {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  background-color: #5A5A5A;

-  border-radius: 12px;

-  color: #FFFFFF;

-  display: inline-block;

-  font-size: 1.5rem;

-  font-weight: normal;

-  height: 20px;

-  line-height: 0;

-  margin-top: 0;

-  min-width: 20px;

-  padding: 0 5px;

-  text-align: center;

-  vertical-align: baseline; }

-  .b2b-badge:empty {

-    display: none; }

-

-* + .b2b-heading-micro {

-  margin-top: 20px !important; }

-

-.b2b-heading-micro {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-weight: normal;

-  text-rendering: optimizeLegibility;

-  font-size: 1.2rem !important;

-  text-transform: uppercase !important;

-  margin-bottom: 20px !important;

-  line-height: 1.2 !important; }

-

-.b2b-no-colors .b2b-badge {

-  border: 1px solid transparent; }

-

-.btn > .b2b-badge {

-  margin-right: 5px; }

-

-a > .b2b-badge {

-  margin-right: 6px;

-  padding-top: 10px; }

-

-.b2b-badge-urgent {

-  background-color: #cf2a2a; }

-

-.bellyband-container {

-  margin: 0 -15px; }

-

-.bellyband-group {

-  width: auto; }

-

-.bellyband-link {

-  border-top: 1px solid #d2d2d2; }

-

-.bellyband-link a {

-  display: block;

-  height: 40px;

-  line-height: 40px;

-  padding: 0 15px;

-  position: relative;

-  text-decoration: none; }

-

-.bellyband-link a:hover > div span,

-.bellyband-link a:focus > div span {

-  text-decoration: underline; }

-

-.bellyband-link a:after {

-  color: #666;

-  font-size: 2.3rem;

-  height: 20px;

-  position: absolute;

-  right: 5px;

-  top: 12px;

-  width: 18px; }

-

-.dark-bg .bellyband-link a:after {

-  color: white; }

-

-.bellyband-link img[src$="svg"].hidden-desktop,

-.bellyband-link [class*="icon-primary-"].hidden-desktop {

-  display: inline-block !important;

-  float: left;

-  font-size: 24px;

-  height: 24px;

-  margin-right: 5px;

-  margin-top: 8px;

-  width: 24px; }

-

-.dark-bg .bellyband-link [class*="icon-primary-"].hidden-desktop,

-.dark-bg .bellyband-link [class*="icon-primary-"].visible-desktop {

-  color: #fff; }

-

-.bellyband-link img[src$="svg"].visible-desktop {

-  display: none !important; }

-

-.bellyband-link p {

-  margin-top: -10px;

-  margin-left: 29px;

-  font-size: 1.4rem;

-  color: #666; }

-

-@media (min-width: 481px) and (max-width: 767px) {

-  .bellyband-container {

-    display: flex;

-    margin: 0; }

-  .bellyband-group {

-    align-content: flex-start;

-    align-items: stretch;

-    display: inline-flex;

-    flex-direction: column;

-    flex-wrap: wrap;

-    margin-top: 1px;

-    width: 100%; }

-  .bellyband-group .row {

-    display: flex !important; }

-  .bellyband-link {

-    padding-top: 0;

-    position: relative;

-    border-top: none;

-    margin-bottom: 20px;

-    width: 50%; }

-  .bellyband-link a {

-    height: inherit;

-    line-height: inherit;

-    display: flex;

-    padding: 0; }

-  .bellyband-link a:after {

-    display: none; }

-  .bellyband-link a span {

-    display: block;

-    padding-top: 10px; }

-  .bellyband-link p {

-    display: block;

-    padding: 0 15px 0 0;

-    margin-bottom: 0;

-    margin-left: 0;

-    margin-top: 0; }

-  .bellyband-link a:focus p {

-    text-decoration: none; } }

-

-@media (min-width: 768px) {

-  .bellyband-group {

-    margin: 0;

-    max-width: 100%;

-    display: flex;

-    flex-wrap: wrap;

-    justify-content: center; }

-  .bellyband-group .row {

-    display: block; }

-  .bellyband-group .row .span {

-    float: none;

-    margin-right: 0;

-    margin-bottom: 30px;

-    display: flex;

-    justify-content: space-between; }

-  .bellyband-link {

-    border-top: none;

-    flex: 0 0 auto;

-    margin-right: 0;

-    margin-bottom: 30px; }

-  .bellyband-link:last-child {

-    margin-right: 0; }

-  .bellyband-link a {

-    height: auto;

-    line-height: 1;

-    text-align: center; }

-  .bellyband-link a:after {

-    display: none; }

-  .bellyband-link img[src$="svg"].hidden-desktop,

-  .bellyband-link [class*="icon-primary-"].hidden-desktop {

-    display: none !important; }

-  .bellyband-link img[src$="svg"].visible-desktop,

-  .bellyband-link [class*="icon-primary-"].visible-desktop {

-    display: block !important;

-    font-size: 50px;

-    height: 50px;

-    margin-right: 0;

-    margin-top: 0;

-    margin-left: auto;

-    margin-right: auto;

-    width: auto; }

-  .bellyband-link a span {

-    display: block;

-    margin-top: 12px;

-    line-height: 2rem; }

-  .bellyband-link p {

-    display: block;

-    text-align: center;

-    margin-top: 6px;

-    margin-left: 0;

-    padding-left: 0 !important;

-    color: #666;

-    line-height: 1.8rem; } }

-

-@media (max-width: 480px) {

-  .bellyband-link-tall a {

-    height: auto;

-    padding: 0 40px 10px 15px; }

-  .bellyband-link-tall p {

-    line-height: 1.8rem;

-    margin-bottom: 0; }

-  .bellyband-link-tall > a:after {

-    margin-top: -8px;

-    top: 50%; } }

-

-.b2b-boardstrip {

-  display: inline-block;

-  width: 100%;

-  border-bottom: 1px solid #9d9d9d;

-  position: relative;

-  padding-top: 15px; }

-  .b2b-boardstrip .boardstrip-reel {

-    margin-bottom: 15px; }

-  .b2b-boardstrip .boardstrip-item--add {

-    border: 1px dashed #ccc;

-    background: #FFFFFF;

-    color: #0574ac;

-    width: 140px;

-    height: 80px;

-    font-size: 14px;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    -webkit-border-radius: 3px;

-    -moz-border-radius: 3px;

-    border-radius: 3px;

-    position: absolute;

-    left: 29px;

-    top: 15px; }

-    .b2b-boardstrip .boardstrip-item--add:hover, .b2b-boardstrip .boardstrip-item--add:focus {

-      border: 2px solid #007A3E;

-      cursor: pointer; }

-    .b2b-boardstrip .boardstrip-item--add i {

-      font-size: 14px;

-      margin-left: auto;

-      margin-right: auto;

-      text-align: initial; }

-    .b2b-boardstrip .boardstrip-item--add .centered {

-      margin-left: auto;

-      margin-right: auto;

-      margin-top: 27px;

-      margin-bottom: 35px;

-      display: block; }

-  .b2b-boardstrip .board-viewport {

-    float: left;

-    margin-left: 210px;

-    max-height: 95px;

-    position: relative;

-    height: 95px;

-    overflow: hidden;

-    width: 0px; }

-    .b2b-boardstrip .board-viewport .boardstrip-container {

-      width: 0px;

-      margin-left: 0;

-      left: 0px;

-      position: absolute;

-      list-style: none;

-      -webkit-transition: left 1000ms;

-      transition: left 1000ms; }

-    .b2b-boardstrip .board-viewport .board-item {

-      width: 140px;

-      height: 80px;

-      border: 1px solid #ccc;

-      margin: 0 15px 15px 0;

-      background-color: #FFFFFF;

-      border-radius: 3px;

-      float: left;

-      overflow: hidden; }

-      .b2b-boardstrip .board-viewport .board-item:hover, .b2b-boardstrip .board-viewport .board-item:focus {

-        border: 2px solid #007A3E;

-        background-color: white;

-        cursor: pointer; }

-      .b2b-boardstrip .board-viewport .board-item .board-img {

-        width: 61px;

-        height: 40px;

-        margin: 0 auto; }

-        .b2b-boardstrip .board-viewport .board-item .board-img img {

-          max-width: 100%; }

-      .b2b-boardstrip .board-viewport .board-item .title {

-        text-align: center;

-        line-height: 16px;

-        color: #666;

-        font-size: 14px;

-        font-family: "Omnes-ECOMP-W02", Arial;

-        padding: 10px 0; }

-      .b2b-boardstrip .board-viewport .board-item.selected {

-        background-color: #FFFFFF;

-        border: 2px solid #0574ac; }

-      .b2b-boardstrip .board-viewport .board-item .board-caret {

-        cursor: default;

-        outline: 0;

-        position: absolute;

-        bottom: 7px; }

-        .b2b-boardstrip .board-viewport .board-item .board-caret .board-caret-indicator {

-          border-left: 8px solid transparent;

-          border-right: 8px solid transparent;

-          border-bottom: 8px solid #999;

-          width: 0px;

-          height: 0px;

-          position: absolute;

-          left: 61px;

-          bottom: -7px; }

-        .b2b-boardstrip .board-viewport .board-item .board-caret .board-caret-arrow-up {

-          width: 0px;

-          height: 0px;

-          border-style: solid;

-          border-width: 0 8px 8px 8px;

-          border-color: transparent transparent #FFFFFF transparent;

-          left: 61px;

-          position: absolute; }

-  .b2b-boardstrip .arrow {

-    font-size: 14px;

-    cursor: pointer;

-    color: #0574ac; }

-    .b2b-boardstrip .arrow:hover {

-      color: #0574ac; }

-    .b2b-boardstrip .arrow.disabled {

-      color: #767676 !important;

-      cursor: not-allowed; }

-  .b2b-boardstrip .prev-items {

-    display: inline-block;

-    margin-top: auto;

-    margin-bottom: auto;

-    margin-right: 15px;

-    position: absolute;

-    left: 0;

-    top: 45px;

-    -webkit-user-select: none;

-    -moz-user-select: none;

-    -ms-user-select: none;

-    -o-user-select: none;

-    user-select: none; }

-  .b2b-boardstrip .next-items {

-    display: inline-block;

-    margin-top: 30px;

-    margin-bottom: auto;

-    margin-left: 10px;

-    -webkit-user-select: none;

-    -moz-user-select: none;

-    -ms-user-select: none;

-    -o-user-select: none;

-    user-select: none; }

-  .b2b-boardstrip .centered {

-    display: table-cell;

-    text-align: center;

-    vertical-align: middle; }

-

-.breadcrumb {

-  padding: 10px 15px;

-  height: 40px;

-  list-style: none;

-  border-bottom: 1px solid #d2d2d2;

-  font-size: 1.2rem;

-  width: 100%;

-  z-index: 1000; }

-

-.breadcrumb > li {

-  position: relative;

-  display: inline-block;

-  margin-right: 15px; }

-

-.breadcrumb > li:after {

-  font-size: 8px;

-  margin-right: 0;

-  right: -8px;

-  color: #333333; }

-

-.breadcrumb > li:last-child {

-  color: #333333; }

-

-.breadcrumb > li:last-child:after {

-  content: ""; }

-

-.breadcrumb li > * {

-  float: none !important;

-  margin: 0; }

-

-.breadcrumb {

-  padding: 10px 15px !important; }

-

-/* ARROW */

-/* spanish */

-.datepicker {

-  background-color: #FFFFFF;

-  padding: 0;

-  border-radius: 5px;

-  direction: ltr; }

-  .datepicker > div {

-    display: none; }

-  .datepicker table {

-    -webkit-touch-callout: none;

-    -webkit-user-select: none;

-    -moz-user-select: none;

-    -ms-user-select: none;

-    user-select: none;

-    margin: 0 0 0 0; }

-  .datepicker td {

-    text-align: center;

-    display: block;

-    width: 30px;

-    height: 30px;

-    border: none; }

-    .datepicker td span {

-      display: block;

-      width: 23%;

-      height: 54px;

-      line-height: 54px;

-      float: left;

-      margin: 1%;

-      cursor: pointer;

-      border-radius: 4px; }

-      .datepicker td span:hover {

-        background: #eeeeee; }

-    .datepicker td span.disabled {

-      background: none;

-      color: #5A5A5A;

-      cursor: default; }

-      .datepicker td span.disabled:hover {

-        background: none;

-        color: #5A5A5A;

-        cursor: default; }

-    .datepicker td span.active {

-      color: #FFFFFF;

-      background-color: #0568ae;

-      border-color: #357ebd; }

-      .datepicker td span.active:hover {

-        color: #FFFFFF;

-        background-color: #0568ae;

-        border-color: #357ebd; }

-    .datepicker td span.active.disabled {

-      color: #FFFFFF;

-      background-color: #0568ae;

-      border-color: #357ebd; }

-  .datepicker th {

-    text-align: center;

-    display: block;

-    width: 30px;

-    height: 30px;

-    border: none; }

-  .datepicker tbody:focus {

-    outline: none; }

-  .datepicker td.day {

-    background-color: transparent;

-    color: #0568ae;

-    cursor: pointer;

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    font-size: 16px;

-    height: 34px;

-    line-height: 30rem;

-    margin: -2px -1px 0 0;

-    overflow: hidden;

-    text-align: center;

-    width: 42px; }

-  .datepicker:focus {

-    outline: 1px dotted #191919;

-    outline-offset: -2px; }

-  .datepicker th[tabindex]:focus {

-    outline-offset: -15px; }

-  .datepicker td.day.focused {

-    background: #ededed;

-    cursor: pointer; }

-  .datepicker td.day.focused.active {

-    background-color: #ededed;

-    color: #0568ae; }

-  .datepicker td.disabled {

-    font-family: "Omnes-ECOMP-W02", Arial;

-    color: #5A5A5A;

-    cursor: default; }

-    .datepicker td.disabled:hover {

-      font-family: "Omnes-ECOMP-W02", Arial;

-      color: #5A5A5A;

-      cursor: default; }

-      .datepicker td.disabled:hover .show-date {

-        font-family: "Omnes-ECOMP-W02", Arial;

-        color: #5A5A5A; }

-    .datepicker td.disabled .show-date {

-      font-family: "Omnes-ECOMP-W02", Arial;

-      color: #5A5A5A; }

-  .datepicker td.today {

-    color: #FFFFFF;

-    background-color: #0568ae; }

-    .datepicker td.today:hover {

-      color: #FFFFFF;

-      background-color: #0568ae;

-      color: #FFFFFF;

-      background-color: #0568ae; }

-    .datepicker td.today:active {

-      color: #FFFFFF;

-      background-color: #0568ae; }

-    .datepicker td.today:focus {

-      color: #FFFFFF;

-      background-color: #0568ae; }

-  .datepicker td.today.disabled {

-    color: #FFFFFF;

-    background-color: #0568ae; }

-  .datepicker td.today.active {

-    color: #FFFFFF;

-    background-color: #0568ae; }

-    .datepicker td.today.active:hover {

-      color: #FFFFFF; }

-  .datepicker td.selected {

-    color: #FFFFFF;

-    background-color: #959595; }

-    .datepicker td.selected:hover {

-      color: #FFFFFF;

-      background-color: #959595; }

-  .datepicker td.selected.disabled {

-    color: #FFFFFF;

-    background-color: #959595; }

-  .datepicker td.active:not(.new) {

-    color: #FFFFFF;

-    border-color: #357ebd; }

-    .datepicker td.active:not(.new) .show-date {

-      color: #0568ae;

-      font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-  .datepicker td.active:hover:not(.new) {

-    color: #FFFFFF;

-    border-color: #357ebd; }

-    .datepicker td.active:hover:not(.new) .show-date {

-      color: #0568ae;

-      font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-  .datepicker .start-date .show-date {

-    background-color: #0568ae;

-    color: #FFFFFF !important;

-    border-radius: 5px 0 0 5px;

-    z-index: 1; }

-    .datepicker .start-date .show-date:before {

-      background-color: #0568ae;

-      content: "";

-      display: block;

-      height: 26px;

-      left: 20px;

-      position: absolute;

-      width: 100%;

-      z-index: -1; }

-  .datepicker .between-date .show-date {

-    background-color: #0568ae;

-    color: #FFFFFF !important; }

-    .datepicker .between-date .show-date:before {

-      background-color: #0568ae;

-      content: "";

-      display: block;

-      height: 26px;

-      left: 0;

-      position: absolute;

-      width: 100%;

-      z-index: -1; }

-  .datepicker .between-date:first-child .show-date:before {

-    background-color: #FFFFFF;

-    content: "";

-    height: 26px;

-    position: absolute;

-    left: 0;

-    width: 8px; }

-  .datepicker .end-date .show-date {

-    background-color: #0568ae;

-    color: #FFFFFF !important;

-    border-radius: 0 5px 5px 0; }

-    .datepicker .end-date .show-date:before {

-      background-color: #0568ae;

-      content: "";

-      display: block;

-      height: 26px;

-      left: -20px;

-      position: absolute;

-      width: 100%;

-      z-index: -1; }

-  .datepicker .end-date:first-child .show-date:after {

-    background-color: #FFFFFF;

-    content: "";

-    height: 26px;

-    position: absolute;

-    left: 0;

-    width: 8px; }

-  .datepicker .end-date:first-child .show-date::before {

-    background-color: #FFFFFF; }

-  .datepicker tr td.start-date:last-child .show-date:after {

-    background-color: #FFFFFF;

-    content: "";

-    height: 26px;

-    position: absolute;

-    right: 0;

-    width: 8px; }

-  .datepicker tr td.start-date:last-child:focus .show-date:after {

-    height: 30px;

-    width: 30px;

-    background-color: transparent; }

-  .datepicker tr td.start-date:first-child:focus .show-date:after {

-    height: 30px;

-    width: 30px;

-    background-color: transparent; }

-  .datepicker tr td.between-date:last-child .show-date:after {

-    background-color: #FFFFFF;

-    content: "";

-    height: 26px;

-    position: absolute;

-    right: 0;

-    width: 8px; }

-  .datepicker tr td.between-date:last-child:focus .show-date:after {

-    height: 30px;

-    width: 30px;

-    background-color: transparent; }

-  .datepicker tr td.between-date:first-child:focus .show-date:after {

-    height: 30px;

-    width: 30px;

-    background-color: transparent; }

-  .datepicker tr td.end-date:last-child:focus .show-date:after {

-    height: 30px;

-    width: 30px;

-    background-color: transparent; }

-  .datepicker tr td.end-date:first-child:focus .show-date:after {

-    height: 30px;

-    width: 30px;

-    background-color: transparent; }

-  .datepicker th.datepicker-switch {

-    width: 198px;

-    font-size: 20px;

-    font-weight: normal;

-    cursor: default !important; }

-  .datepicker thead tr:first-child th {

-    cursor: pointer;

-    height: 60px;

-    line-height: 60px; }

-  .datepicker thead tr:first-child th.cw {

-    cursor: default;

-    background-color: transparent; }

-  .datepicker tfoot tr th {

-    cursor: pointer;

-    height: 60px;

-    line-height: 60px;

-    height: auto;

-    line-height: normal; }

-    .datepicker tfoot tr th li {

-      margin-bottom: 5px; }

-  .datepicker .prev {

-    color: transparent;

-    font-size: 0;

-    margin: 0 -1px -1px 0;

-    width: 46px; }

-    .datepicker .prev i {

-      color: #0568ae;

-      position: absolute;

-      font-size: 27px;

-      margin: 0;

-      top: 15px;

-      left: 8px; }

-  .datepicker .next {

-    color: transparent;

-    font-size: 0;

-    margin: 0 -1px -1px 0;

-    width: 46px; }

-    .datepicker .next i {

-      color: #0568ae;

-      position: absolute;

-      font-size: 27px;

-      margin: 0;

-      top: 15px;

-      right: 8px; }

-  .datepicker .cw {

-    font-size: 10px;

-    width: 12px;

-    padding: 0 2px 0 5px;

-    vertical-align: middle; }

-  .datepicker .due-date .show-date {

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    background-color: #cf2a2a;

-    border-radius: 5px;

-    color: #FFFFFF !important; }

-  .datepicker .day.active .show-date:after {

-    border: 2px solid #0568ae;

-    border-radius: 7px;

-    content: "";

-    display: block;

-    height: 30px;

-    left: 4px;

-    position: absolute;

-    top: 0;

-    width: 30px; }

-  .datepicker .day:focus .show-date:after {

-    border: 2px solid #0568ae;

-    border-radius: 7px;

-    content: "";

-    display: block;

-    height: 30px;

-    left: 4px;

-    position: absolute;

-    top: 0;

-    width: 30px;

-    height: 30px;

-    left: 4px;

-    top: 0;

-    width: 30px; }

-  .datepicker .due-date.disabled .show-date:after {

-    border: 2px solid #0568ae;

-    border-radius: 7px;

-    content: "";

-    display: block;

-    height: 30px;

-    left: 4px;

-    position: absolute;

-    top: 0;

-    width: 30px; }

-  .datepicker .day.due-date:focus .show-date:after {

-    height: 30px;

-    left: 4px;

-    top: 0;

-    width: 30px; }

-  .datepicker .due-date.old:after {

-    visibility: hidden; }

-  .datepicker .due-date.new:after {

-    visibility: hidden; }

-  .datepicker .due-date.active:after {

-    border-color: #FFFFFF; }

-  .datepicker .due-date.active.focused {

-    color: #0568ae !important; }

-    .datepicker .due-date.active.focused:after {

-      border-color: #cf2a2a !important; }

-  .datepicker .dow {

-    height: 24px;

-    width: 42px;

-    font-weight: normal;

-    position: relative;

-    overflow: hidden;

-    color: transparent;

-    letter-spacing: -6px;

-    margin: 0 -1px -1px 0; }

-    .datepicker .dow span[aria-hidden="true"] {

-      bottom: 0;

-      color: #5A5A5A;

-      display: block;

-      left: 1px;

-      letter-spacing: 0;

-      line-height: .9;

-      margin: 0 auto;

-      padding: 0;

-      position: relative;

-      width: 22px; }

-  .datepicker .calendar-legend {

-    margin-top: 3px;

-    margin-bottom: 20px; }

-    .datepicker .calendar-legend li {

-      font-size: 1.4rem;

-      font-weight: normal;

-      margin-bottom: 5px;

-      padding-left: 10px;

-      padding-top: 5px;

-      position: relative; }

-  .datepicker i.legend-due-date {

-    background-color: #cf2a2a;

-    border-radius: 5px;

-    height: 18px;

-    width: 18px;

-    margin-right: 8px;

-    vertical-align: middle;

-    display: inline-block; }

-  .datepicker i.legend-selected-date {

-    background-color: #FFFFFF;

-    border: 2px solid #0568ae;

-    border-radius: 5px;

-    height: 18px;

-    width: 18px;

-    margin-right: 8px;

-    vertical-align: middle;

-    display: inline-block; }

-  .datepicker i.legend-selectedisdue {

-    background-color: #FFFFFF;

-    border: 2px solid #0568ae;

-    border-radius: 5px;

-    display: inline-block;

-    height: 18px;

-    margin-right: 8px;

-    position: relative;

-    vertical-align: middle;

-    width: 18px; }

-    .datepicker i.legend-selectedisdue:after {

-      background-color: #cf2a2a;

-      border-radius: 3px;

-      content: "";

-      display: block;

-      height: 10px;

-      left: 2px;

-      position: absolute;

-      top: 2px;

-      width: 10px; }

-  .datepicker .text-left {

-    width: 100%; }

-  .datepicker .active.old {

-    background-color: #ededed !important;

-    color: #ededed !important; }

-

-.datepicker-inline {

-  width: 220px; }

-

-.datepicker.datepicker-rtl {

-  direction: rtl; }

-  .datepicker.datepicker-rtl td span {

-    float: right; }

-

-.datepicker-dropdown {

-  top: 0;

-  left: 0; }

-  .datepicker-dropdown:before {

-    content: " ";

-    display: inline-block;

-    border-left: 10px solid transparent;

-    border-right: 10px solid transparent;

-    border-bottom: 10px solid #d2d2d2;

-    border-top: 0;

-    border-bottom-color: rgba(0, 0, 0, 0.2);

-    position: absolute; }

-  .datepicker-dropdown:after {

-    content: " ";

-    display: inline-block;

-    border-left: 10px solid transparent;

-    border-right: 10px solid transparent;

-    border-bottom: 10px solid #fff;

-    border-top: 0;

-    position: absolute; }

-

-.datepicker-dropdown.datepicker-orient-left:before {

-  left: 16px; }

-

-.datepicker-dropdown.datepicker-orient-left:after {

-  left: 16px; }

-

-.datepicker-dropdown.datepicker-orient-right:before {

-  right: 16px; }

-

-.datepicker-dropdown.datepicker-orient-right:after {

-  right: 16px; }

-

-.datepicker-dropdown.datepicker-orient-top:before {

-  top: -10px; }

-

-.datepicker-dropdown.datepicker-orient-top:after {

-  top: -9px; }

-

-.datepicker-dropdown.datepicker-orient-bottom:before {

-  bottom: -7px;

-  border-bottom: 0;

-  border-top: 7px solid #959595; }

-

-.datepicker-dropdown.datepicker-orient-bottom:after {

-  bottom: -6px;

-  border-bottom: 0;

-  border-top: 6px solid #fff; }

-

-.datepicker.days div.datepicker-days {

-  display: block; }

-

-.datepicker.months div.datepicker-months {

-  display: block; }

-

-.datepicker.years div.datepicker-years {

-  display: block; }

-

-.show-date {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #0568ae;

-  height: 26px;

-  line-height: 26px;

-  margin: 4px auto 0;

-  width: 26px; }

-

-.input-group.date .input-group-addon i {

-  cursor: pointer;

-  width: 16px;

-  height: 16px; }

-

-.datepicker.dropdown-menu {

-  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.7);

-  position: absolute;

-  top: 100%;

-  left: 0;

-  float: left;

-  display: none;

-  margin-top: 13px;

-  width: 290px;

-  list-style: none;

-  background-color: #FFFFFF;

-  border: 1px solid #d2d2d2;

-  border: 1px solid rgba(0, 0, 0, 0.2);

-  border-radius: 5px;

-  color: #333333;

-  font-size: 13px;

-  line-height: 1.428571429;

-  z-index: 1050; }

-  .datepicker.dropdown-menu th {

-    display: block;

-    float: left;

-    padding: 0;

-    position: relative; }

-  .datepicker.dropdown-menu td {

-    display: block;

-    float: left;

-    padding: 0;

-    position: relative; }

-

-.s {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: -62px 0; }

-

-.m {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: -5px 0; }

-

-.t {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: -19px 0; }

-

-.w {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: -34px 0; }

-

-.f {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: -49px 0; }

-

-.d {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: 0 0; }

-

-.l {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: 0 0; }

-

-.v {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: 0 0; }

-

-.j {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: #FFFFFF;

-  background-repeat: no-repeat;

-  background-position: 0 0; }

-

-.b2b-coachmark-label {

-  z-index: 1060;

-  opacity: 1;

-  cursor: not-allowed;

-  position: relative; }

-

-.b2b-coachmark-highlight {

-  border: 1px solid #d3d3d3;

-  cursor: default;

-  z-index: 1045;

-  opacity: 1;

-  background-color: #ffffff;

-  border-radius: 10px;

-  position: relative;

-  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.25);

-  padding: 10px;

-  position: absolute; }

-

-.b2b-coachmark-highlight-mask {

-  z-index: 1100;

-  opacity: .1; }

-

-.b2b-coachmark-container {

-  border: 1px solid #cccccc;

-  width: 316px;

-  pointer-events: auto;

-  -webkit-box-sizing: border-box;

-  -moz-box-sizing: border-box;

-  box-sizing: border-box;

-  font-size: 16px;

-  -webkit-transition: opacity .2s ease-out;

-  -moz-transition: opacity .2s ease-out;

-  transition: opacity .2s ease-out;

-  background: #fff;

-  border-radius: 20px;

-  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.15);

-  color: #333;

-  line-height: 20px;

-  position: absolute;

-  top: 50px;

-  left: -97px;

-  display: block;

-  background-color: #ffffff;

-  z-index: 1050;

-  opacity: 1; }

-  .b2b-coachmark-container i.b2b-coachmark-caret {

-    position: absolute;

-    top: -12px;

-    left: 47%;

-    opacity: 1;

-    z-index: 1050; }

-  .b2b-coachmark-container i.b2b-coachmark-caret:before {

-    content: "";

-    border-left: 12px solid transparent;

-    border-right: 12px solid transparent;

-    border-bottom: 12px solid #d3d3d3;

-    position: absolute;

-    top: -1px; }

-  .b2b-coachmark-container i.b2b-coachmark-caret:after {

-    content: "";

-    border-left: 12px solid transparent;

-    border-right: 12px solid transparent;

-    border-bottom: 12px solid #fff;

-    position: absolute; }

-  .b2b-coachmark-container .b2b-coachmark-header {

-    position: relative;

-    height: 47px;

-    overflow: hidden; }

-    .b2b-coachmark-container .b2b-coachmark-header .corner-button {

-      box-shadow: 0 -24px 0 0 #f2f2f2 inset;

-      height: 69px;

-      position: absolute;

-      right: -33px;

-      top: -38px;

-      transform: rotate(45deg);

-      width: 69px; }

-  .b2b-coachmark-container .b2b-coachmark-countlabel {

-    font-size: 12px;

-    font-family: "Omnes-ECOMP-W02, Arial";

-    color: #333333;

-    margin-left: 20px;

-    margin-top: 20px; }

-  .b2b-coachmark-container .b2b-coachmark-content {

-    padding: 0px 20px 20px 20px;

-    float: left; }

-    .b2b-coachmark-container .b2b-coachmark-content .icon-misc-dimmer {

-      font-size: 32px;

-      float: left;

-      margin-right: 10px;

-      width: 32px; }

-    .b2b-coachmark-container .b2b-coachmark-content .offscreen-text {

-      position: absolute;

-      left: -10000px;

-      top: auto;

-      width: 1px;

-      height: 1px;

-      overflow: hidden; }

-    .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-content-header {

-      font-size: 16px;

-      color: #333333;

-      line-height: 18px;

-      float: left;

-      width: 220px; }

-    .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-description {

-      font-size: 14px;

-      line-height: 18px;

-      color: #333333;

-      width: 100%;

-      float: left;

-      margin-top: 15px; }

-    .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-btn-group {

-      margin-top: 20px;

-      float: left;

-      text-align: right;

-      width: 100%; }

-      .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-btn-group .b2b-coachmark-link {

-        font-family: "Omnes-ECOMP-W02-Medium", Arial;

-        font-size: 15px;

-        color: #0574ac;

-        line-height: 18px;

-        margin-right: 20px; }

-      .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-btn-group button {

-        font-size: 15px;

-        margin: 0px; }

-

-.datepicker {

-  background-color: #fff;

-  padding: 0;

-  border-radius: 5px;

-  direction: ltr; }

-

-.datepicker-inline {

-  width: 220px; }

-

-.datepicker.datepicker-rtl {

-  direction: rtl; }

-

-.datepicker.datepicker-rtl td span {

-  float: right; }

-

-.datepicker-dropdown {

-  top: 0;

-  left: 0; }

-

-/* ARROW */

-.datepicker-dropdown:before {

-  content: " ";

-  display: inline-block;

-  border-left: 10px solid transparent;

-  border-right: 10px solid transparent;

-  border-bottom: 10px solid #d2d2d2;

-  border-top: 0;

-  border-bottom-color: rgba(0, 0, 0, 0.2);

-  position: absolute; }

-

-.datepicker-dropdown:after {

-  content: " ";

-  display: inline-block;

-  border-left: 10px solid transparent;

-  border-right: 10px solid transparent;

-  border-bottom: 10px solid #fff;

-  border-top: 0;

-  position: absolute; }

-

-.datepicker-dropdown.datepicker-orient-left:before,

-.datepicker-dropdown.datepicker-orient-left:after {

-  left: 16px; }

-

-.datepicker-dropdown.datepicker-orient-right:before,

-.datepicker-dropdown.datepicker-orient-right:after {

-  right: 16px; }

-

-.datepicker-dropdown.datepicker-orient-top:before {

-  top: -10px; }

-

-.datepicker-dropdown.datepicker-orient-top:after {

-  top: -9px; }

-

-.datepicker-dropdown.datepicker-orient-bottom:before {

-  bottom: -7px;

-  border-bottom: 0;

-  border-top: 7px solid #959595; }

-

-.datepicker-dropdown.datepicker-orient-bottom:after {

-  bottom: -6px;

-  border-bottom: 0;

-  border-top: 6px solid #fff; }

-

-.datepicker > div {

-  display: none; }

-

-.datepicker.days div.datepicker-days {

-  display: block; }

-

-.datepicker.months div.datepicker-months {

-  display: block; }

-

-.datepicker.years div.datepicker-years {

-  display: block; }

-

-.datepicker table {

-  -webkit-touch-callout: none;

-  -webkit-user-select: none;

-  -khtml-user-select: none;

-  -moz-user-select: none;

-  -ms-user-select: none;

-  user-select: none;

-  margin: 0 0 0 0; }

-

-.datepicker td,

-.datepicker th {

-  text-align: center;

-  display: block;

-  width: 30px;

-  height: 30px;

-  border: none; }

-

-.datepicker tbody :focus {

-  outline: none; }

-

-.datepicker td.day {

-  background-color: transparent;

-  color: #0568ae;

-  cursor: pointer;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 16px;

-  height: 34px;

-  line-height: 30rem;

-  margin: -2px -1px 0 0;

-  overflow: hidden;

-  text-align: center;

-  width: 42px; }

-

-.datepicker :focus {

-  outline: 1px dotted #000;

-  outline-offset: -2px; }

-

-.datepicker td.day.focused {

-  background: #ededed;

-  cursor: pointer; }

-

-.datepicker td.day.focused.active {

-  background-color: #ededed;

-  color: #0568ae; }

-

-.datepicker td.disabled,

-.datepicker td.disabled:hover {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  color: #5a5a5a;

-  cursor: default; }

-

-.datepicker td.today,

-.datepicker td.today:hover,

-.datepicker td.today.disabled {

-  color: #fff;

-  background-color: #0568ae; }

-

-.datepicker td.today.active,

-.datepicker td.today:active,

-.datepicker td.today:hover,

-.datepicker td.today:focus {

-  color: #fff;

-  background-color: #0568ae; }

-

-.datepicker td.today.active:hover {

-  color: #fff; }

-

-.datepicker td.selected,

-.datepicker td.selected:hover,

-.datepicker td.selected.disabled {

-  color: #ffffff;

-  background-color: #959595; }

-

-.datepicker td.active:not(.new),

-.datepicker td.active:hover:not(.new) {

-  color: #ffffff;

-  border-color: #357ebd; }

-

-.show-date {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #0568ae;

-  height: 26px;

-  line-height: 26px;

-  margin: 4px auto 0;

-  width: 26px; }

-

-.datepicker .start-date .show-date,

-.datepicker .between-date .show-date,

-.datepicker .end-date .show-date {

-  background-color: #0568ae;

-  color: #fff !important; }

-

-.datepicker .start-date .show-date {

-  border-radius: 5px 0 0 5px;

-  z-index: 1; }

-

-.datepicker .start-date .show-date:before {

-  background-color: #0568ae;

-  content: "";

-  display: block;

-  height: 26px;

-  left: 20px;

-  position: absolute;

-  width: 100%;

-  z-index: -1; }

-

-.datepicker .between-date .show-date:before {

-  background-color: #0568ae;

-  content: "";

-  display: block;

-  height: 26px;

-  left: 0;

-  position: absolute;

-  width: 100%;

-  z-index: -1; }

-

-.datepicker .end-date .show-date {

-  border-radius: 0 5px 5px 0; }

-

-.datepicker .end-date .show-date:before {

-  background-color: #0568ae;

-  content: "";

-  display: block;

-  height: 26px;

-  left: -20px;

-  position: absolute;

-  width: 100%;

-  z-index: -1; }

-

-.datepicker .between-date:first-child .show-date:before {

-  background-color: #fff;

-  content: "";

-  height: 26px;

-  position: absolute;

-  left: 0;

-  width: 8px; }

-

-.datepicker .end-date:first-child .show-date:after {

-  background-color: #fff;

-  content: "";

-  height: 26px;

-  position: absolute;

-  left: 0;

-  width: 8px; }

-

-.datepicker .end-date:first-child .show-date::before {

-  background-color: #fff; }

-

-.datepicker tr td.start-date:last-child .show-date:after,

-.datepicker tr td.between-date:last-child .show-date:after {

-  background-color: #fff;

-  content: "";

-  height: 26px;

-  position: absolute;

-  right: 0;

-  width: 8px; }

-

-.datepicker tr td.start-date:last-child:focus .show-date:after,

-.datepicker tr td.end-date:last-child:focus .show-date:after,

-.datepicker tr td.between-date:last-child:focus .show-date:after,

-.datepicker tr td.start-date:first-child:focus .show-date:after,

-.datepicker tr td.end-date:first-child:focus .show-date:after,

-.datepicker tr td.between-date:first-child:focus .show-date:after {

-  height: 30px;

-  width: 30px;

-  background-color: transparent; }

-

-.datepicker td.active:not(.new) .show-date,

-.datepicker td.active:hover:not(.new) .show-date {

-  color: #0568ae;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.datepicker td.disabled .show-date,

-.datepicker td.disabled:hover .show-date {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  color: #5a5a5a; }

-

-.datepicker td span {

-  display: block;

-  width: 23%;

-  height: 54px;

-  line-height: 54px;

-  float: left;

-  margin: 1%;

-  cursor: pointer;

-  border-radius: 4px; }

-

-.datepicker td span:hover {

-  background: #eeeeee; }

-

-.datepicker td span.disabled,

-.datepicker td span.disabled:hover {

-  background: none;

-  color: #5a5a5a;

-  cursor: default; }

-

-.datepicker td span.active,

-.datepicker td span.active:hover,

-.datepicker td span.active.disabled {

-  color: #ffffff;

-  background-color: #0568ae;

-  border-color: #357ebd; }

-

-.datepicker th.datepicker-switch {

-  width: 198px;

-  font-size: 20px;

-  font-weight: normal;

-  cursor: default !important; }

-

-.datepicker thead tr:first-child th,

-.datepicker tfoot tr th {

-  cursor: pointer;

-  height: 60px;

-  line-height: 60px; }

-

-.datepicker tfoot tr th {

-  height: auto;

-  line-height: normal; }

-

-.datepicker tfoot tr th li {

-  margin-bottom: 5px; }

-

-.datepicker .prev,

-.datepicker .next {

-  color: transparent;

-  font-size: 0;

-  margin: 0 -1px -1px 0;

-  width: 46px; }

-

-.datepicker .prev i,

-.datepicker .next i {

-  color: #0568ae;

-  position: absolute;

-  font-size: 27px;

-  margin: 0;

-  top: 15px; }

-

-.datepicker .prev i {

-  left: 8px; }

-

-.datepicker .next i {

-  right: 8px; }

-

-.datepicker .cw {

-  font-size: 10px;

-  width: 12px;

-  padding: 0 2px 0 5px;

-  vertical-align: middle; }

-

-.datepicker thead tr:first-child th.cw {

-  cursor: default;

-  background-color: transparent; }

-

-.input-group.date .input-group-addon i {

-  cursor: pointer;

-  width: 16px;

-  height: 16px; }

-

-.datepicker.dropdown-menu {

-  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.7);

-  position: absolute;

-  top: 100%;

-  left: 0;

-  float: left;

-  display: none;

-  margin-top: 13px;

-  width: 290px;

-  list-style: none;

-  background-color: #ffffff;

-  border: 1px solid #d2d2d2;

-  border: 1px solid rgba(0, 0, 0, 0.2);

-  border-radius: 5px;

-  color: #333333;

-  font-size: 13px;

-  line-height: 1.428571429;

-  z-index: 1050; }

-

-.datepicker.dropdown-menu th,

-.datepicker.dropdown-menu td {

-  display: block;

-  float: left;

-  padding: 0;

-  position: relative; }

-

-.datepicker .due-date .show-date {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  background-color: #cf2a2a;

-  border-radius: 5px;

-  color: #fff !important; }

-

-.datepicker .day.active .show-date:after,

-.datepicker .day:focus .show-date:after,

-.datepicker .due-date.disabled .show-date:after {

-  border: 2px solid #0568ae;

-  border-radius: 7px;

-  content: "";

-  display: block;

-  height: 30px;

-  left: 4px;

-  position: absolute;

-  top: 0;

-  width: 30px; }

-

-.datepicker .day:focus .show-date:after {

-  height: 30px;

-  left: 4px;

-  top: 0;

-  width: 30px; }

-

-.datepicker .day.due-date:focus .show-date:after {

-  height: 30px;

-  left: 4px;

-  top: 0;

-  width: 30px; }

-

-.datepicker .due-date.old:after,

-.datepicker .due-date.new:after {

-  visibility: hidden; }

-

-.datepicker .due-date.active:after {

-  border-color: #fff; }

-

-.datepicker .due-date.active.focused {

-  color: #0568ae !important; }

-

-.datepicker .due-date.active.focused:after {

-  border-color: #cf2a2a !important; }

-

-.datepicker .dow {

-  height: 24px;

-  width: 42px;

-  font-weight: normal;

-  position: relative;

-  overflow: hidden;

-  color: transparent;

-  letter-spacing: -6px;

-  margin: 0 -1px -1px 0; }

-

-.datepicker .dow span[aria-hidden="true"] {

-  bottom: 0;

-  color: #5a5a5a;

-  display: block;

-  left: 1px;

-  letter-spacing: 0;

-  line-height: .9;

-  margin: 0 auto;

-  padding: 0;

-  position: relative;

-  width: 22px; }

-

-.datepicker .calendar-legend {

-  margin-top: 3px;

-  margin-bottom: 20px; }

-

-.datepicker .calendar-legend li {

-  font-size: 1.4rem;

-  font-weight: normal;

-  margin-bottom: 5px;

-  padding-left: 10px;

-  padding-top: 5px;

-  position: relative; }

-

-.datepicker i.legend-due-date {

-  background-color: #cf2a2a;

-  border-radius: 5px;

-  height: 18px;

-  width: 18px;

-  margin-right: 8px;

-  vertical-align: middle;

-  display: inline-block; }

-

-.datepicker i.legend-selected-date {

-  background-color: #fff;

-  border: 2px solid #0568ae;

-  border-radius: 5px;

-  height: 18px;

-  width: 18px;

-  margin-right: 8px;

-  vertical-align: middle;

-  display: inline-block; }

-

-.datepicker i.legend-selectedisdue {

-  background-color: #fff;

-  border: 2px solid #0568ae;

-  border-radius: 5px;

-  display: inline-block;

-  height: 18px;

-  margin-right: 8px;

-  position: relative;

-  vertical-align: middle;

-  width: 18px; }

-

-.datepicker i.legend-selectedisdue:after {

-  background-color: #cf2a2a;

-  border-radius: 3px;

-  content: "";

-  display: block;

-  height: 10px;

-  left: 2px;

-  position: absolute;

-  top: 2px;

-  width: 10px; }

-

-.datepicker .text-left {

-  width: 100%; }

-

-.datepicker .active.old {

-  background-color: #ededed !important;

-  color: #ededed !important; }

-

-.s,

-.m,

-.t,

-.w,

-.f,

-.d,

-.l,

-.v,

-.j {

-  display: block;

-  height: 20px;

-  width: 12px;

-  margin: 0 auto;

-  background-color: white;

-  background-repeat: no-repeat; }

-

-.s {

-  background-position: -62px 0; }

-

-.m {

-  background-position: -5px 0; }

-

-.t {

-  background-position: -19px 0; }

-

-.w {

-  background-position: -34px 0; }

-

-.f {

-  background-position: -49px 0; }

-

-/* spanish */

-.d {

-  background-position: 0 0; }

-

-.l {

-  background-position: 0 0; }

-

-.v {

-  background-position: 0 0; }

-

-.j {

-  background-position: 0 0; }

-

-/* remove focus outline when dropdown is opened */

-/*resolve blue focus outline over dropdown with error*/

-select {

-  margin-right: -1;

-  max-width: 100%;

-  height: 36px;

-  line-height: 25px;

-  width: auto;

-  background-color: #FFFFFF; }

-

-.selectWrap.disabled .icon-primary-down {

-  color: #767676; }

-

-.selectWrap.disabled input.awd-select {

-  z-index: 0;

-  padding: 10px 45px 10px 15px;

-  text-indent: 0; }

-

-.selectWrap.disabled button.awd-select {

-  z-index: 0;

-  text-indent: 15; }

-

-.selectWrap.disabled:after {

-  color: #5A5A5A;

-  cursor: not-allowed; }

-

-input.awd-select {

-  background-color: transparent;

-  border: 1px solid #d2d2d2;

-  border-radius: 6px;

-  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);

-  color: #333333;

-  display: block;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  /*font-size: 1.6rem;*/

-  height: 36px;

-  line-height: 0;

-  margin-bottom: 0;

-  padding: 12px 45px 8px 0;

-  position: relative;

-  text-align: left;

-  top: 0;

-  width: 100%;

-  z-index: 10;

-  padding: 12px 45px 8px 15px;

-  user-select: none; }

-  input.awd-select:focus {

-    border-color: #0568ae !important; }

-

-button.awd-select {

-  background-color: transparent;

-  border: 1px solid #d2d2d2;

-  border-radius: 6px;

-  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);

-  color: #333333;

-  display: block;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  /*font-size: 1.6rem;*/

-  height: 36px;

-  line-height: 36px;

-  margin-bottom: 0;

-  /*padding-right: 41px;*/

-  position: relative;

-  text-align: left;

-  top: 0;

-  width: 100%;

-  z-index: 10; }

-  button.awd-select:not(.large) {

-    text-indent: 15px;

-    white-space: nowrap;

-    overflow: hidden;

-    text-overflow: clip;

-    text-overflow: ellipsis; }

-  button.awd-select img {

-    height: 26px;

-    margin-right: 7px;

-    margin-top: -10px;

-    position: relative;

-    top: 2px;

-    vertical-align: text-bottom; }

-  button.awd-select:focus {

-    border-color: #0568ae !important; }

-  button.awd-select i {

-    font-size: 23px;

-    position: absolute;

-    right: 33px;

-    top: 5px;

-    z-index: 1000; }

-

-button.awd-select.large {

-  align-items: center;

-  display: flex;

-  height: 60px;

-  line-height: 20px;

-  overflow: hidden;

-  padding-left: 70px;

-  vertical-align: middle; }

-  button.awd-select.large img {

-    height: 40px;

-    left: 20px;

-    position: absolute;

-    top: 20px;

-    width: 40px; }

-

-.selectWrap.large {

-  height: 60px; }

-  .selectWrap.large .awd-select-list-item {

-    align-items: center;

-    display: flex;

-    height: 60px;

-    line-height: 20px;

-    overflow: hidden;

-    padding-left: 70px;

-    vertical-align: middle; }

-    .selectWrap.large .awd-select-list-item img {

-      height: 40px;

-      left: 20px;

-      position: absolute;

-      top: 20px;

-      width: 40px;

-      top: 10px; }

-

-button.awd-select.active {

-  border-radius: 6px 6px 0 0; }

-  button.awd-select.active:focus {

-    border-color: #d2d2d2 !important; }

-

-input.awd-select.active {

-  border-radius: 6px 6px 0 0; }

-  input.awd-select.active:focus {

-    border-color: #d2d2d2 !important; }

-

-.selectWrapper {

-  position: relative; }

-

-span.selectWrap input[readonly]:focus {

-  color: transparent;

-  text-shadow: 0 0 0 #000; }

-

-.isIE.ds2-no-colors .awd-select:focus {

-  outline: 1px dashed transparent; }

-

-.awd-select-list {

-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);

-  border-radius: 0 0 6px 6px;

-  position: absolute;

-  border: 1px solid #d2d2d2;

-  border-top: 0;

-  padding: 0;

-  background-color: #f2f2f2;

-  z-index: 1000;

-  width: 100%;

-  max-height: 320px;

-  overflow-y: auto; }

-

-.awd-select-list-item {

-  cursor: pointer;

-  height: 100%;

-  min-height: 36px;

-  line-height: 38px;

-  overflow: hidden;

-  padding: 0 15px;

-  position: relative;

-  text-overflow: ellipsis;

-  white-space: nowrap;

-  z-index: 1000; }

-  .awd-select-list-item:hover {

-    cursor: pointer;

-    background-color: #d2d2d2;

-    outline: 1px dashed transparent; }

-  .awd-select-list-item:focus {

-    cursor: pointer;

-    background-color: #d2d2d2;

-    outline: 1px dashed transparent; }

-  .awd-select-list-item img {

-    margin-top: 0;

-    margin-right: 7px;

-    height: 26px;

-    width: 26px; }

-

-.selectWrap {

-  border-radius: 6px;

-  position: relative;

-  height: 36px;

-  line-height: 28px;

-  display: block;

-  margin: 0;

-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);

-  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);

-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }

-  .selectWrap:not(.large) .awd-select-list-item:first-child {

-    margin-top: 15px; }

-  .selectWrap:not(.large) .awd-select-list-item:last-child {

-    margin-bottom: 15px; }

-  .selectWrap .icon-primary-down {

-    font-size: 23px;

-    margin-top: -11px;

-    position: absolute;

-    right: 4px;

-    top: 50%; }

-  .selectWrap + [aria-expanded="true"] {

-    padding-bottom: 9px;

-    padding-top: 20px; }

-

-.awd-select-list-item[aria-selected="true"] {

-  background-color: #d2d2d2; }

-

-span input.awd-select {

-  width: 100%;

-  cursor: pointer;

-  text-overflow: ellipsis;

-  padding-right: 45px; }

-

-li.optgroup-wrapper {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  cursor: default !important;

-  padding: 0px 15px; }

-  li.optgroup-wrapper:first-child {

-    padding-top: 10px; }

-  li.optgroup-wrapper:hover {

-    background-color: #f2f2f2; }

-

-ul.optgroup {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  cursor: pointer !important;

-  margin: 0 -15px; }

-  ul.optgroup li {

-    padding: 0 0 0 33px; }

-

-label + .selectWrap {

-  margin-top: 4px; }

-

-.selectorModule {

-  border-radius: 6px;

-  position: relative;

-  height: 36px;

-  line-height: 28px;

-  display: block;

-  margin: 0;

-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);

-  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);

-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }

-

-.group .selectWrap {

-  margin: 0 0 10px 0; }

-

-select.awd-select {

-  position: relative;

-  top: 0;

-  left: 0;

-  font-size: 16px;

-  z-index: 1010;

-  height: 33px;

-  min-width: 100%;

-  opacity: 0.01; }

-  select.awd-select > optgroup {

-    padding-left: 8px;

-    font-style: normal;

-    margin-top: 10px; }

-    select.awd-select > optgroup:first-child {

-      margin-top: 0; }

-    select.awd-select > optgroup > option {

-      padding-left: 8px; }

-  select.awd-select > option {

-    padding-left: 8px; }

-  select.awd-select + span {

-    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);

-    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);

-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);

-    position: absolute;

-    top: 0;

-    left: 0;

-    z-index: 0;

-    display: block;

-    border: 1px solid #d2d2d2;

-    border-radius: 6px;

-    height: 35px;

-    line-height: 0;

-    padding: 18px 45px 15px 15px;

-    width: 100%;

-    font-size: 1.6rem;

-    padding-right: 45px;

-    white-space: nowrap;

-    overflow: hidden;

-    text-overflow: ellipsis; }

-    select.awd-select + span > i {

-      font-size: 23px;

-      position: absolute;

-      right: 33px;

-      top: 5px;

-      z-index: 1000; }

-      select.awd-select + span > i:before {

-        left: 1px;

-        position: absolute;

-        top: -1px; }

-  select.awd-select:focus + span {

-    border-color: #0568ae; }

-

-.isIE select.awd-select + span {

-  line-height: 1; }

-

-[data-default-option="true"] {

-  color: #767676 !important;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial; }

-

-.placeholdercolor {

-  color: #767676 !important;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial; }

-

-.filterTank button.awd-select {

-  border-color: #d2d2d2;

-  background-color: #333333;

-  color: #FFFFFF;

-  color: #333333; }

-  .filterTank button.awd-select:after {

-    background-color: #FFFFFF !important;

-    border-color: #d2d2d2; }

-

-.utility-bg button.awd-select {

-  border-color: #d2d2d2;

-  background-color: #333333;

-  color: #FFFFFF;

-  color: #333333; }

-  .utility-bg button.awd-select:after {

-    background-color: #FFFFFF !important;

-    border-color: #d2d2d2; }

-

-.utility-bg select.awd-select + span {

-  border-color: #d2d2d2;

-  border-color: #d2d2d2;

-  background-color: #333333;

-  background-color: #333333;

-  color: #FFFFFF;

-  color: #FFFFFF; }

-  .utility-bg select.awd-select + span:after {

-    background-color: #FFFFFF !important;

-    background-color: #FFFFFF !important;

-    border-color: #d2d2d2;

-    border-color: #d2d2d2; }

-

-.utility-bg select.awd-select:focus + span {

-  border-color: #d2d2d2;

-  border-color: #d2d2d2;

-  background-color: #333333;

-  background-color: #333333;

-  color: #FFFFFF;

-  color: #FFFFFF; }

-  .utility-bg select.awd-select:focus + span:after {

-    background-color: #FFFFFF !important;

-    background-color: #FFFFFF !important;

-    border-color: #d2d2d2;

-    border-color: #d2d2d2; }

-

-.utility-bg select.awd-select:hover + span {

-  border-color: #d2d2d2;

-  border-color: #d2d2d2;

-  background-color: #333333;

-  background-color: #333333;

-  color: #FFFFFF;

-  color: #FFFFFF; }

-  .utility-bg select.awd-select:hover + span:after {

-    background-color: #FFFFFF !important;

-    background-color: #FFFFFF !important;

-    border-color: #d2d2d2;

-    border-color: #d2d2d2; }

-

-input.awd-select[disabled] {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  input.awd-select[disabled] + span {

-    cursor: not-allowed;

-    border-color: #d2d2d2;

-    background-color: #d2d2d2;

-    background-image: none;

-    color: #5A5A5A; }

-

-button.awd-select[disabled] {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  button.awd-select[disabled]:after {

-    background-color: #d2d2d2 !important;

-    border-color: #d2d2d2; }

-

-select.awd-select[disabled] + span {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  select.awd-select[disabled] + span:after {

-    background-color: #d2d2d2 !important;

-    border-color: #d2d2d2; }

-

-select.awd-select[disabled]:focus + span {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-

-select.awd-select[disabled]:hover + span {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-

-input.awd-select[disabled="disabled"] {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  input.awd-select[disabled="disabled"] + span {

-    cursor: not-allowed;

-    border-color: #d2d2d2;

-    background-color: #d2d2d2;

-    background-image: none;

-    color: #5A5A5A; }

-

-select.awd-select[disabled="disabled"] + span {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  select.awd-select[disabled="disabled"] + span:after {

-    background-color: #d2d2d2 !important;

-    border-color: #d2d2d2; }

-

-select.awd-select[disabled="disabled"]:focus + span {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  select.awd-select[disabled="disabled"]:focus + span:after {

-    background-color: #d2d2d2 !important;

-    border-color: #d2d2d2; }

-

-select.awd-select[disabled="disabled"]:hover + span {

-  cursor: not-allowed;

-  border-color: #d2d2d2;

-  background-color: #d2d2d2;

-  background-image: none;

-  color: #5A5A5A; }

-  select.awd-select[disabled="disabled"]:hover + span:after {

-    background-color: #d2d2d2 !important;

-    border-color: #d2d2d2; }

-

-.ddexpand-wrapper > h2 {

-  margin-bottom: 11px; }

-  .ddexpand-wrapper > h2 + p {

-    margin-bottom: 4px; }

-

-.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .form-row {

-  margin-top: 11px; }

-

-.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .row + .row .form-row {

-  margin-top: 14px; }

-

-.modal .awd-select-list {

-  z-index: 1060 !important; }

-

-.form-row.error button.awd-select.active:focus {

-  border-color: #cf2a2a !important; }

-

-.form-row.error input.awd-select.active:focus {

-  border-color: #cf2a2a !important; }

-

-.awd-module-list .module-list-item[aria-selected="true"] {

-  background-color: #f2f2f2; }

-

-li.module-list-item[aria-selected="true"]:before {

-  color: #0568ae;

-  display: inline-block;

-  font-family: "icoControls" !important;

-  font-style: normal;

-  font-size: 20px;

-  font-weight: normal;

-  font-variant: normal;

-  height: 1em;

-  margin-right: 7px;

-  text-transform: none;

-  line-height: 1;

-  -webkit-font-smoothing: antialiased;

-  -moz-osx-font-smoothing: grayscale;

-  position: relative;

-  speak: none;

-  -webkit-user-select: none;

-  -moz-user-select: none;

-  -ms-user-select: none;

-  user-select: none;

-  vertical-align: middle;

-  width: 1em;

-  content: "\e907";

-  box-sizing: border-box;

-  display: inline-block;

-  font-size: 2em;

-  height: 1em;

-  position: absolute;

-  top: 20px;

-  right: 0px;

-  vertical-align: middle;

-  width: 1em;

-  color: #007a3e; }

-

-@media (min-width: 768px) {

-  span[class*="large"] {

-    max-width: 370px; }

-  .large {

-    max-width: 370px; } }

-

-@media (max-width: 767px) {

-  .selectWrap.large:after {

-    right: 5px; }

-  .selectWrap.large .awd-select-list-item {

-    padding-right: 41px; }

-  .selectWrap + div > h4 {

-    margin-bottom: 0;

-    font-size: 16px; } }

-

-/**********************Dropdown Chrome scrolling fix start ********************/

-input.awd-select {

-  -webkit-user-select: text;

-  -moz-user-select: text;

-  -ms-user-select: text;

-  user-select: text; }

-

-input.awd-select.focused {

-  -webkit-user-select: none !important;

-  -moz-user-select: none !important;

-  -ms-user-select: none !important;

-  user-select: none !important; }

-

-/**********************Dropdown Chrome scrolling fix end ********************/

-.mpc-expanders {

-  border-bottom: 1px solid #e4e4e4;

-  border-top: 1px solid #e4e4e4; }

-

-.mpc-expanders + .mpc-expanders {

-  border-top: 0px; }

-

-.mpc-expanders .heading-medium {

-  margin-bottom: 10px; }

-

-.mpc-expanders .p-small {

-  margin-top: 5px; }

-

-.mpc-expander-body {

-  border-top: 1px solid #e4e4e4; }

-

-.mpc-expander-body .mpc-expanders {

-  border-bottom: 1px solid #e4e4e4;

-  border-top: 0; }

-

-.mpc-expander-body .mpc-expanders:last-child {

-  border-bottom: 0px; }

-

-.ddh-blue {

-  color: #0574ac; }

-

-.b2b-dragdrop {

-  border: 1px dashed #bbb;

-  border-radius: 5px;

-  padding: 0;

-  text-align: center;

-  color: #bbb;

-  position: relative; }

-

-.b2b-dragdrop-over {

-  background: #0091d9;

-  color: #006496; }

-  .b2b-dragdrop-over:after {

-    content: "Drop the file";

-    color: #fff;

-    width: 80px;

-    height: 20px;

-    overflow: hidden;

-    margin: auto;

-    position: absolute;

-    top: 0;

-    left: 0;

-    bottom: 0;

-    right: 0; }

-

-.b2b-file-container {

-  position: relative;

-  overflow: hidden;

-  display: inline-table;

-  font-weight: 400; }

-  .b2b-file-container [type=file] {

-    position: absolute;

-    cursor: inherit;

-    display: block;

-    font-size: 0;

-    opacity: 0;

-    height: 0;

-    width: 0;

-    left: 0;

-    top: 0;

-    -ms-filter: "alpha(Opacity=0)"; }

-

-.b2b-upload-link {

-  color: #0568ae; }

-

-.b2b-flyout {

-  position: relative;

-  display: inline-block;

-  cursor: default; }

-

-.b2b-flyout-icon {

-  cursor: pointer; }

-  .b2b-flyout-icon:focus {

-    outline: thin dotted #666;

-    outline-offset: -1px; }

-

-.b2b-flyout .b2b-flyout-container {

-  border: 1px solid #d3d3d3;

-  width: 300px;

-  padding: 20px;

-  pointer-events: auto;

-  -webkit-box-sizing: border-box;

-  -moz-box-sizing: border-box;

-  box-sizing: border-box;

-  font-size: 16px;

-  -webkit-transition: opacity .2s ease-out;

-  -moz-transition: opacity .2s ease-out;

-  transition: opacity .2s ease-out;

-  background: #fff;

-  border-radius: 6px;

-  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.25);

-  color: #333;

-  line-height: 20px;

-  position: absolute;

-  top: 35px;

-  opacity: 0;

-  z-index: 1010;

-  display: none; }

-  .b2b-flyout .b2b-flyout-container.open-flyout {

-    opacity: 1;

-    display: block; }

-

-.b2b-flyout i.b2b-flyout-caret {

-  position: absolute;

-  top: -8px;

-  left: 50%;

-  opacity: 0;

-  z-index: 1011;

-  display: none; }

-  .b2b-flyout i.b2b-flyout-caret.open-flyout {

-    opacity: 1;

-    display: block; }

-  .b2b-flyout i.b2b-flyout-caret:before {

-    content: "";

-    border-left: 8px solid transparent;

-    border-right: 8px solid transparent;

-    border-bottom: 8px solid #d3d3d3;

-    position: absolute;

-    top: -1px; }

-  .b2b-flyout i.b2b-flyout-caret:after {

-    content: "";

-    border-left: 8px solid transparent;

-    border-right: 8px solid transparent;

-    border-bottom: 8px solid #fff;

-    position: absolute; }

-

-.b2b-flyout .b2b-flyout-container.b2b-flyout-left i.b2b-flyout-caret {

-  left: 16px !important; }

-

-.b2b-flyout .b2b-flyout-container.b2b-flyout-right i.b2b-flyout-caret {

-  left: inherit !important;

-  right: 30px !important; }

-

-.b2b-flyout .b2b-flyout-container.b2b-flyout-above {

-  box-shadow: 0 -5px 6px 0 rgba(0, 0, 0, 0.25); }

-  .b2b-flyout .b2b-flyout-container.b2b-flyout-above i.b2b-flyout-caret {

-    top: auto;

-    bottom: 0px; }

-    .b2b-flyout .b2b-flyout-container.b2b-flyout-above i.b2b-flyout-caret:before {

-      top: auto;

-      bottom: -9px;

-      border-top: 8px solid #d3d3d3;

-      border-bottom: none; }

-    .b2b-flyout .b2b-flyout-container.b2b-flyout-above i.b2b-flyout-caret:after {

-      border-top: 8px solid #fff;

-      border-bottom: none; }

-

-.b2b-flyout .b2b-flyout-container.b2b-flyout-centerLeft i.b2b-flyout-caret {

-  left: inherit !important;

-  right: -7px !important;

-  top: 8px;

-  transform: rotate(90deg); }

-

-.b2b-flyout .b2b-flyout-container.b2b-flyout-centerRight i.b2b-flyout-caret {

-  left: -8px !important;

-  top: 296px;

-  transform: rotate(-90deg); }

-

-.b2b-flyout .buttons-group {

-  margin-top: 20px; }

-  .b2b-flyout .buttons-group .cta-button-group {

-    width: 100%;

-    border-top: 1px solid #ccc;

-    padding: 20px 0 0; }

-    .b2b-flyout .buttons-group .cta-button-group button {

-      margin-bottom: 0; }

-

-.b2b-flyout .heading {

-  font-size: 20px;

-  margin-bottom: 10px; }

-

-.b2b-flyout .body-text {

-  font-size: 14px;

-  margin-bottom: 30px; }

-

-.b2b-footer-wrapper {

-  width: 100%;

-  background-color: #222; }

-

-.b2b-footer-container {

-  width: 980px;

-  margin: 0 auto;

-  padding-top: 15px; }

-  .b2b-footer-container .footer-columns {

-    display: inline-block;

-    text-align: left;

-    vertical-align: top; }

-    .b2b-footer-container .footer-columns.three-column, .b2b-footer-container .footer-columns.four-column, .b2b-footer-container .footer-columns.five-column {

-      padding-top: 30px; }

-    .b2b-footer-container .footer-columns.three-column {

-      width: 33.3%;

-      padding-left: 75px; }

-    .b2b-footer-container .footer-columns.four-column {

-      width: 25%;

-      padding-left: 75px; }

-    .b2b-footer-container .footer-columns.five-column {

-      width: 20%; }

-    .b2b-footer-container .footer-columns .b2b-footer-header {

-      color: #009fdb;

-      font-size: 18px;

-      font-style: normal;

-      font-family: "Omnes-ECOMP-W02-Medium", Arial;

-      line-height: 23.9px;

-      margin: 0; }

-    .b2b-footer-container .footer-columns li {

-      padding: 7.5px 0; }

-    .b2b-footer-container .footer-columns ul li:first-child {

-      padding-top: 15px; }

-    .b2b-footer-container .footer-columns li a {

-      color: #fff;

-      font-size: 16px;

-      font-family: "Omnes-ECOMP-W02", Arial; }

-  .b2b-footer-container .footer-nav-content {

-    padding-bottom: 10px; }

-    .b2b-footer-container .footer-nav-content li {

-      display: inline;

-      font-size: 14px;

-      color: #fff;

-      vertical-align: middle; }

-      .b2b-footer-container .footer-nav-content li a {

-        color: #fff;

-        font-size: 14px;

-        vertical-align: middle;

-        margin-right: 5px;

-        font-family: "Omnes-ECOMP-W02", Arial; }

-

-.b2b-footer-wrapper .b2b-footer-container hr {

-  background: #d2d2d2;

-  margin-top: 50px; }

-

-.b2b-footer-wrapper .divider-bottom-footer {

-  padding: 45px 0 50px 0; }

-

-.b2b-footer-wrapper .footerLogo {

-  margin: 10px 0 0 0px;

-  vertical-align: top; }

-  .b2b-footer-wrapper .footerLogo div {

-    display: inline-block; }

-  .b2b-footer-wrapper .footerLogo .icon-primary-att-globe {

-    font-size: 40px; }

-  .b2b-footer-wrapper .footerLogo .logo-title {

-    color: #fff;

-    margin-left: 10px;

-    display: inline-block;

-    font-size: 26px;

-    margin-top: 0px; }

-

-.b2b-footer-wrapper .copyright-text {

-  color: #fff;

-  font-size: 11px;

-  text-align: left;

-  font-family: "Omnes-ECOMP-W02", Arial; }

-  .b2b-footer-wrapper .copyright-text a {

-    color: #fff;

-    text-decoration: underline;

-    display: inline-block; }

-    .b2b-footer-wrapper .copyright-text a:hover {

-      text-decoration: none; }

-

-@media (max-width: 768px) {

-  .b2b-footer-wrapper {

-    padding: 0 15px; }

-  .b2b-footer-container {

-    width: 100%; }

-    .b2b-footer-container .footer-columns.three-column, .b2b-footer-container .footer-columns.four-column, .b2b-footer-container .footer-columns.five-column {

-      width: 50%; }

-  .b2b-footer-wrapper .divider-bottom-footer {

-    padding-top: 15px; }

-    .b2b-footer-wrapper .divider-bottom-footer .footer-links {

-      width: 100%; }

-  .b2b-footer-wrapper .footerLogo {

-    margin: 30px 0 0 0; }

-    .b2b-footer-wrapper .footerLogo .footer-logo {

-      margin: 0;

-      padding-left: 10px; } }

-

-.b2b-header-tabs {

-  background-color: #222;

-  width: 100%;

-  position: relative;

-  height: 45px; }

-  .b2b-header-tabs .icon-primary-att-globe {

-    color: #0568ae; }

-  .b2b-header-tabs a:focus {

-    border: 1px solid white; }

-  .b2b-header-tabs .header__items {

-    width: 980px;

-    margin: 0 auto;

-    display: block;

-    list-style: none;

-    padding: 6px 0px 0px 0px;

-    border-spacing: 30px 0; }

-  .b2b-header-tabs .header__item {

-    display: inline-block;

-    text-align: left;

-    width: auto;

-    font-size: 16px;

-    font-family: "Omnes-ECOMP-W02, Arial";

-    cursor: pointer;

-    padding: 5px 15px;

-    color: #fff; }

-    .b2b-header-tabs .header__item.b2b-headermenu {

-      padding: 0; }

-      .b2b-header-tabs .header__item.b2b-headermenu:last-child {

-        background: none; }

-      .b2b-header-tabs .header__item.b2b-headermenu a.menu__item {

-        color: #fff;

-        text-decoration: none;

-        display: inline-block;

-        padding: 5px 15px; }

-    .b2b-header-tabs .header__item.active {

-      background-color: #fff;

-      border-radius: 2px;

-      border-bottom-left-radius: 0;

-      border-bottom-right-radius: 0; }

-      .b2b-header-tabs .header__item.active a.menu__item {

-        color: #0578ae; }

-  .b2b-header-tabs li:focus {

-    outline: 2px solid #0578ae; }

-  .b2b-header-tabs .header__item .header-secondary-wrapper, .b2b-header-tabs .header__item .header-tertiary-wrapper {

-    background-color: #fff;

-    position: absolute;

-    width: 100%;

-    left: 0;

-    top: 42px;

-    border-bottom: solid 1px #ccc;

-    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);

-    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);

-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);

-    display: none;

-    z-index: 111; }

-  .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary {

-    background-color: #fff;

-    width: 980px;

-    margin: 0 auto; }

-  .b2b-header-tabs .header__item.active .header-secondary-wrapper {

-    display: block; }

-  .b2b-header-tabs .header-secondary .header-subitem {

-    display: inline-block;

-    width: auto;

-    margin: 0 15px; }

-    .b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary-wrapper {

-      display: block; }

-    .b2b-header-tabs .header-secondary .header-subitem a.menu__item {

-      display: inline-block;

-      padding: 15px 0;

-      color: #333; }

-      .b2b-header-tabs .header-secondary .header-subitem a.menu__item:hover, .b2b-header-tabs .header-secondary .header-subitem a.menu__item:focus {

-        color: #0578ae; }

-

-/** Secondary Menu **/

-.b2b-labelhide {

-  position: absolute;

-  clip: rect(1px, 1px, 1px, 1px); }

-

-/** Tertiary Level Menu **/

-.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {

-  position: absolute;

-  z-index: 111;

-  top: 25px; }

-  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after, .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {

-    content: '';

-    border-left: 8px solid transparent;

-    border-right: 8px solid transparent;

-    position: absolute;

-    -webkit-transition: left .2s ease-out;

-    -moz-transition: left .2s ease-out;

-    transition: left .2s ease-out; }

-  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after {

-    border-bottom: 8px solid #fff;

-    top: 10px; }

-  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {

-    border-bottom: 8px solid #ccc;

-    top: 9px; }

-

-.b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary {

-  border-top: solid 1px #ccc; }

-

-.b2b-header-tabs .header-tertiary:after {

-  content: '';

-  clear: both;

-  display: block; }

-

-.b2b-header-tabs .header-tertiary li {

-  display: inline-block;

-  padding: 0;

-  float: left; }

-  .b2b-header-tabs .header-tertiary li a {

-    color: #333;

-    display: block;

-    padding: 10px 15px; }

-  .b2b-header-tabs .header-tertiary li label {

-    text-align: left;

-    display: block;

-    font-size: 16px;

-    font-weight: bold;

-    color: #857B7B;

-    padding: 15px 0 0 15px; }

-

-.b2b-header-tabs .header__item.skip {

-  padding: 0;

-  display: inline-block;

-  cursor: default !important; }

-  .b2b-header-tabs .header__item.skip a {

-    color: transparent;

-    font-size: 12px;

-    line-height: 15px;

-    text-decoration: none; }

-    .b2b-header-tabs .header__item.skip a:focus {

-      color: #fff;

-      outline: 2px solid #0578ae; }

-

-.b2b-header-tabs .selectWrap {

-  min-width: 150px; }

-  .b2b-header-tabs .selectWrap button.awd-select {

-    height: 30px;

-    line-height: 31px;

-    font-size: 1rem;

-    display: inline-block; }

-  .b2b-header-tabs .selectWrap .awd-select-list {

-    background-color: #fff;

-    color: #333;

-    -webkit-transition: opacity .2s ease-out;

-    -moz-transition: opacity .2s ease-out;

-    transition: opacity .2s ease-out;

-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); }

-

-@media (max-width: 768px) {

-  .b2b-header-tabs {

-    padding: 0 15px; }

-    .b2b-header-tabs .header__items, .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary {

-      width: 100%; }

-    .b2b-header-tabs .header__item {

-      padding: 5px 0; }

-    .b2b-header-tabs .globe-text {

-      display: none; }

-    .b2b-header-tabs .header__item.b2b-headermenu a.menu__item {

-      padding: 5px 7px 9px 7px; }

-    .b2b-header-tabs .header__item .header-tertiary-wrapper {

-      top: 30px; }

-    .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {

-      top: 14px; }

-    .b2b-header-tabs .header__item .header-secondary-wrapper {

-      top: 45px; }

-    .b2b-header-tabs .header__item.profile {

-      padding-left: 15px;

-      float: none; } }

-

-/************* Header - Start *************/

-.b2b-header-tabs {

-  background-color: #222;

-  width: 100%;

-  position: relative;

-  height: 45px; }

-

-.b2b-header-tabs .icon-primary-primary-att-globe {

-  color: #0568ae;

-  font-size: 34px;

-  bottom: 1px; }

-

-/*

- *TODO: delete below .icon-primary-att-globel will not be used 

- *instead the one above, icon-primary-primary-att-globe not available here

- */

-.b2b-header-tabs .icon-primary-att-globe {

-  color: #0568ae;

-  font-size: 34px; }

-

-.b2b-header-tabs .globe-text {

-  margin-left: 20px;

-  font-size: 2rem; }

-

-.b2b-header-tabs .header__items {

-  width: 980px;

-  margin: 0 auto;

-  display: block;

-  list-style: none;

-  border-spacing: 30px 0;

-  padding: 3px 0px 0px 0px; }

-

-.b2b-header-tabs .header__item {

-  display: inline-block;

-  text-align: left;

-  width: auto;

-  font-size: 14px;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  cursor: pointer;

-  padding: 0 15px 4px 15px;

-  /*margin-top:-3px;*/

-  color: #fff; }

-

-.b2b-header-tabs .header__item.b2b-headermenu {

-  padding: 0; }

-

-.b2b-header-tabs .header__item.b2b-headermenu a.menu__item {

-  color: #fff;

-  text-decoration: none;

-  display: inline-block;

-  padding: 8px 15px 12px 15px;

-  font-size: 16px; }

-

-.b2b-header-tabs .header__item.active {

-  background-color: #fff;

-  border-radius: 2px;

-  border-bottom-left-radius: 0;

-  border-bottom-right-radius: 0; }

-

-.b2b-header-tabs .header__item.active a.menu__item {

-  color: #0578ae; }

-

-.b2b-header-tabs li:focus {

-  outline: 2px solid #0578ae; }

-

-/** profile pop Over **/

-.b2b-header-tabs .header__item.profile {

-  position: relative;

-  float: right; }

-

-/** Secondary Menu **/

-.b2b-header-tabs .header__item .header-secondary-wrapper, .b2b-header-tabs .header__item .header-tertiary-wrapper {

-  background-color: #fff;

-  position: absolute;

-  width: 100%;

-  left: 0;

-  top: 42px;

-  border-bottom: solid 1px #ccc;

-  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);

-  -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);

-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);

-  display: none;

-  z-index: 111; }

-

-.b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary {

-  background-color: #fff;

-  width: 980px;

-  margin: 0 auto; }

-

-.b2b-header-tabs .header__item.active .header-secondary-wrapper,

-.b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary-wrapper {

-  display: block; }

-

-.b2b-header-tabs .header-secondary .header-subitem {

-  display: inline-block;

-  width: auto;

-  margin: 0 15px; }

-

-.b2b-header-tabs .header-secondary .header-subitem a.menu__item {

-  display: inline-block;

-  padding: 15px 0;

-  color: #333;

-  font-size: 14px; }

-

-.b2b-header-tabs .header-secondary .header-subitem a.menu__item:hover, .b2b-header-tabs .header-secondary .header-subitem a.menu__item:focus {

-  color: #0578ae; }

-

-.b2b-label-hide {

-  position: absolute;

-  clip: rect(1px, 1px, 1px, 1px); }

-

-/** Tertiary Level Menu **/

-.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after,

-.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {

-  content: '';

-  border-left: 8px solid transparent;

-  border-right: 8px solid transparent;

-  position: absolute;

-  -webkit-transition: left .2s ease-out;

-  -moz-transition: left .2s ease-out;

-  transition: left .2s ease-out; }

-

-.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {

-  position: absolute;

-  z-index: 111;

-  top: 25px; }

-

-.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after {

-  border-bottom: 8px solid #fff;

-  top: 10px; }

-

-.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {

-  border-bottom: 8px solid #ccc;

-  top: 9px; }

-

-/** Tertiary Level Menu **/

-.b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary {

-  border-top: solid 1px #ccc; }

-

-.b2b-header-tabs .header-tertiary:after {

-  content: '';

-  clear: both;

-  display: block; }

-

-.b2b-header-tabs .header-tertiary li {

-  display: inline-block;

-  padding: 0;

-  float: left; }

-

-.b2b-header-tabs .header-tertiary li a {

-  color: #333;

-  display: block;

-  padding: 7px 15px;

-  max-width: 228px; }

-

-.b2b-header-tabs .header-tertiary li label {

-  text-align: left;

-  display: block;

-  font-size: 14px !important;

-  font-weight: bold;

-  color: #857B7B;

-  padding: 15px 0 0 15px; }

-

-/** Quarternary Level Menu **/

-.b2b-header-tabs .header-quarternary {

-  width: 100%;

-  float: left; }

-

-.b2b-header-tabs .header-quarternary li {

-  padding-left: 15px;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  display: none; }

-

-.b2b-header-tabs .header-quarternary li.active {

-  display: block; }

-

-.b2b-header-tabs .header-quarternary li a {

-  color: #666666;

-  font-size: 14px;

-  padding: 0px 10px 10px 10px; }

-

-/** Skip Navigation**/

-.b2b-header-tabs .header__item.skip {

-  padding: 0;

-  display: inline-block;

-  cursor: default !important; }

-

-.b2b-header-tabs .header__item.skip a {

-  color: transparent;

-  font-size: 12px;

-  line-height: 15px;

-  text-decoration: none; }

-

-.b2b-header-tabs .header__item.skip a:focus {

-  color: #fff;

-  outline: 2px solid #0578ae; }

-

-/** Dropdown css inside Header ****/

-.b2b-header-tabs .selectWrap {

-  min-width: 150px; }

-

-.b2b-header-tabs .selectWrap button.awd-select, .b2b-header-tabs .selectWrap input.awd-select {

-  height: 36px;

-  line-height: 8px;

-  font-size: 1rem;

-  display: inline-block; }

-

-.b2b-header-tabs .selectWrap .awd-select-list {

-  background-color: #fff;

-  color: #333;

-  -webkit-transition: opacity .2s ease-out;

-  -moz-transition: opacity .2s ease-out;

-  transition: opacity .2s ease-out;

-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); }

-

-/*

- * responsive header media queries

- */

-@media screen and (max-width: 1100px) {

-  .b2b-header-tabs .globe-text {

-    display: none; }

-  .b2b-header-tabs .header__item.profile {

-    padding-left: 15px;

-    float: none; }

-  .b2b-header-tabs .header__items {

-    padding-top: 0px; } }

-

-@media screen and (max-width: 950px) {

-  .header__item.profile {

-    top: 20px; }

-  .b2b-header-tabs {

-    height: 90px; }

-  .selectWrap {

-    bottom: 15px; }

-  .b2b-header-tabs .header__items {

-    padding-top: 25px; }

-  .b2b-header-tabs .header__item .header-secondary-wrapper, .b2b-header-tabs .header__item .header-tertiary-wrapper {

-    top: 80px; }

-  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {

-    top: 35px; }

-  .b2b-header-tabs .header__item.b2b-headermenu a.menu__item {

-    padding-bottom: 30px; }

-  .b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary {

-    margin-top: -28px; } }

-

-/*************** Header - END ******************/

-.hp-container {

-  display: block;

-  max-width: 408px; }

-  .hp-container i:focus {

-    outline: thin dotted #666; }

-  .hp-container .icon-misc-pen {

-    cursor: pointer; }

-  .hp-container .icon-misc-trash {

-    cursor: pointer; }

-

-.hp-selected {

-  border-bottom: 1px solid #ccc;

-  border-bottom: 1px solid #ccc;

-  margin-bottom: 16px;

-  padding-bottom: 16px; }

-  .hp-selected .selected-days {

-    padding-bottom: 16px; }

-    .hp-selected .selected-days .day {

-      padding-top: 10px;

-      float: left; }

-

-.hp-checkbox {

-  padding-top: 20px;

-  margin: 16px auto 0 auto; }

-  .hp-checkbox label {

-    position: relative;

-    width: 20px;

-    margin-right: 34px; }

-    .hp-checkbox label span {

-      position: absolute;

-      top: -20px;

-      left: 0px;

-      margin-left: 0px; }

-

-.hp-dropdowns {

-  margin-top: 15px;

-  display: flex;

-  display: -webkit-flex;

-  display: -ms-flexbox; }

-

-.hp-buttons {

-  margin-top: 20px;

-  display: flex;

-  display: -webkit-flex;

-  display: -ms-flexbox; }

-

-.hp-dropdowns .radio-buttons {

-  margin-top: 30px; }

-  .hp-dropdowns .radio-buttons .radio {

-    margin-right: 15px; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02";

-  src: url("fonts/Omnes_ATTW02.eot");

-  src: url("fonts/Omnes_ATTW02.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02.woff") format("woff"), url("fonts/Omnes_ATTW02.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Medium";

-  src: url("fonts/Omnes_ATTW02Medium.eot");

-  src: url("fonts/Omnes_ATTW02Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Medium.woff") format("woff"), url("fonts/Omnes_ATTW02Medium.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Italic";

-  src: url("fonts/Omnes_ATTW02Italic.eot");

-  src: url("fonts/Omnes_ATTW02Italic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Italic.woff") format("woff"), url("fonts/Omnes_ATTW02Italic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Light";

-  src: url("fonts/Omnes_ATTW02Light.eot");

-  src: url("fonts/Omnes_ATTW02Light.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Light.woff") format("woff"), url("fonts/Omnes_ATTW02Light.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Bold";

-  src: url("fonts/Omnes_ATTW02Bold.eot");

-  src: url("fonts/Omnes_ATTW02Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Bold.woff") format("woff"), url("fonts/Omnes_ATTW02Bold.woff2") format("woff2"), url("fonts/Omnes_ATTW02Bold.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Light-Italic";

-  src: url("fonts/Omnes_ATTW02LightItalic.eot");

-  src: url("fonts/Omnes_ATTW02LightItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02LightItalic.woff") format("woff"), url("fonts/Omnes_ATTW02LightItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02LightItalic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Medium-Italic";

-  src: url("fonts/Omnes_ATTW02MediumItalic.eot");

-  src: url("fonts/Omnes_ATTW02MediumItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02MediumItalic.woff") format("woff"), url("fonts/Omnes_ATTW02MediumItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02MediumItalic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-@font-face {

-  font-family: "Omnes-ECOMP-W02-Bold-Italic";

-  src: url("fonts/Omnes_ATTW02BoldItalic.eot");

-  src: url("fonts/Omnes_ATTW02BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02BoldItalic.woff") format("woff"), url("fonts/Omnes_ATTW02BoldItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02BoldItalic.ttf") format("truetype");

-  font-weight: normal;

-  font-style: normal; }

-

-/* TODO: Build a reference page for these classes */

-.font-regular {

-  font-family: "Omnes-ECOMP-W02", Arial !important; }

-

-.font-light {

-  font-family: "Omnes-ECOMP-W02-Light", Arial !important; }

-

-.font-italic {

-  font-family: "Omnes-ECOMP-W02-Italic", Arial !important; }

-

-.font-light-italic {

-  font-family: "Omnes-ECOMP-W02-Light-Italic", Arial !important; }

-

-.font-medium {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial !important; }

-

-.font-medium-italic {

-  font-family: "Omnes-ECOMP-W02-Medium-Italic", Arial !important; }

-

-.font-reset {

-  font-style: normal;

-  font-variant: normal;

-  font-weight: normal;

-  text-transform: none; }

-

-.b2b-nav-menu {

-  background-color: #efefef;

-  border: 1px solid #efefef;

-  width: 230px;

-  font-size: 1.4rem; }

-

-.b2b-subnav-container > ul {

-  padding: 0px; }

-

-.b2b-subnav-content {

-  margin: 0;

-  margin-bottom: 10px; }

-

-.b2b-subnav-content > li {

-  border-bottom: 1px solid #999999;

-  position: relative;

-  cursor: pointer; }

-

-.b2b-subnav-content > li > a {

-  text-decoration: none;

-  line-height: 18px;

-  display: block;

-  padding: 10px; }

-

-.b2b-subnav-content > li > a.expand {

-  color: #333; }

-

-.b2b-subnav-content > li ul {

-  overflow: hidden;

-  max-height: 0;

-  transition-duration: 0.5s;

-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }

-

-.b2b-subnav-content > li ul.expand {

-  transition-duration: 0.7s;

-  transition-timing-function: ease-in-out;

-  max-height: 1000px;

-  overflow: hidden; }

-

-.b2b-subnav-content > li > a:focus, .b2b-subnav-content > li ul > li > a:focus {

-  outline: thin dotted #666; }

-

-.b2b-subnav-content > li ul > li > a {

-  line-height: 18px;

-  padding: 8px 0;

-  display: block;

-  outline-offset: -4px;

-  padding-left: 10px; }

-

-.b2b-icon-primary-plus-minus {

-  display: inline-block;

-  height: 20px;

-  margin-right: 10px;

-  padding: 0;

-  position: absolute;

-  right: 0px;

-  top: 10px;

-  vertical-align: middle;

-  width: 20px; }

-

-@media (min-width: 320px) and (max-width: 767px) {

-  .b2b-nav-menu {

-    background-color: #fff;

-    border: 1px solid white;

-    width: 100%; }

-  .b2b-subnav-content > li {

-    padding-left: 10px; }

-  .b2b-subnav-container > ul:first-child {

-    border-top: 1px solid #999; }

-  .b2b-icon-primary-plus-minus {

-    right: 10px; }

-  .b2b-subnav-content > li li > a.active {

-    color: #0574ac;

-    text-decoration: none;

-    font-family: "Omnes-ECOMP-W02", Arial; } }

-

-.b2b-list-box-item {

-  white-space: nowrap;

-  margin: 1px;

-  border: 1px solid transparent;

-  outline: none;

-  visibility: inherit;

-  display: inherit;

-  text-align: left;

-  overflow: hidden;

-  cursor: pointer;

-  padding: 5px 0 5px;

-  padding-left: 15px;

-  -moz-user-select: none;

-  -webkit-user-select: none;

-  -ms-user-select: none; }

-  .b2b-list-box-item:focus {

-    border: 2px solid #5e8cb3; }

-

-.b2b-list-box-item--selected {

-  background-color: #cfdde9; }

-

-.btn.disabled[ddh-load-button] {

-  line-height: 46px;

-  padding: 0 19px 0 18px; }

-

-.btn.disabled[ddh-load-button] {

-  color: #666666; }

-

-.icon-primary-spinner-ddh.large {

-  height: 50px;

-  width: 50px; }

-

-.icon-primary-spinner-ddh.small {

-  height: 30px;

-  width: 30px; }

-

-.icon-primary-spinner-ddh {

-  -webkit-animation: 1s linear infinite spinner;

-  animation: 1s linear infinite spinner;

-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgaWQ9InN2Zy1zcGlubmVyIiB4PSIwcHgiIHk9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgIDxwYXRoIGZpbGw9IiNGNUY1RjUiIGQ9Ik0xOCAzNkM4LjEgMzYgMCAyNy45IDAgMThTOC4xIDAgMTggMHMxOCA4LjEgMTggMTgtOC4xIDE4LTE4IDE4em0wLTMxLjVjLTcuNSAwLTEzLjUgNi0xMy41IDEzLjVTMTAuNiAzMS41IDE4IDMxLjVjNy41IDAgMTMuNS02LjEgMTMuNS0xMy41IDAtNy41LTYtMTMuNS0xMy41LTEzLjV6Ii8+CiAgIDxwYXRoIGZpbGw9IiMwNTY4QUUiIGlkPSJzcGlubmVyIiBkPSJNMzAuNyA1LjNsLTMuMSAzLjJjMi40IDIuNCAzLjkgNS44IDMuOSA5LjUgMCA3LjQtNi4xIDEzLjUtMTMuNSAxMy41UzQuNSAyNS40IDQuNSAxOCAxMC42IDQuNSAxOCA0LjVWMEM4LjEgMCAwIDguMSAwIDE4czguMSAxOCAxOCAxOCAxOC04LjEgMTgtMThjMC01LTItOS41LTUuMy0xMi43eiIgdHJhbnNmb3JtPSIiPiAgICAgIAogICA8L3BhdGg+Cjwvc3ZnPg==); }

-

-.btn-small .icon-primary-spinner-ddh {

-  height: 30px !important;

-  width: 30px !important; }

-

-.btn-small .icon-primary-spinner {

-  height: 30px;

-  width: 30px; }

-

-.load-backdrop {

-  position: absolute;

-  top: 50%;

-  left: 50%; }

-

-.body.styled-by-modal {

-  position: fixed; }

-

-.b2b-modal-backdrop {

-  position: fixed;

-  top: 0;

-  right: 0;

-  bottom: 0;

-  left: 0;

-  z-index: -1; }

-

-.b2b-modal-backdrop.fade {

-  background-color: #000;

-  opacity: 0;

-  filter: alpha(opacity=0);

-  transition: all 0.3s linear 0s; }

-

-.b2b-modal-backdrop.fade.in {

-  z-index: 1040;

-  opacity: 0.7;

-  filter: alpha(opacity=70);

-  background-color: #000;

-  transition: opacity 0.3s linear 0s; }

-

-.modalwrapper {

-  height: 100%;

-  width: 100%;

-  left: 0;

-  overflow-y: hidden;

-  position: absolute;

-  right: 0;

-  padding: 20px;

-  top: 0;

-  z-index: -1; }

-

-.modalwrapper.active {

-  z-index: 1050;

-  overflow-y: auto; }

-

-.modal {

-  background-clip: padding-box;

-  background-color: #ffffff;

-  border: 1px solid rgba(0, 0, 0, 0.1);

-  border-radius: 8px;

-  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.4);

-  margin: 0 auto;

-  /*margin-bottom:10%;*/

-  outline: medium none;

-  /*position: absolute;*/

-  height: 0;

-  min-height: 150px;

-  overflow: hidden;

-  /*top: 10%;*/

-  width: 100%;

-  z-index: -1; }

-

-.modalwrapper.modal-docked .modal {

-  max-height: 80%;

-  height: 80%;

-  overflow: hidden;

-  top: 0; }

-

-.modal.fade.in {

-  position: relative;

-  height: auto;

-  overflow: auto;

-  top: 10%;

-  z-index: 1060;

-  transition: opacity .5s linear 0s; }

-

-.modal.fade.in.modal-landscape {

-  overflow-y: auto; }

-

-.modal.fade {

-  transition: opacity .5s linear 0s; }

-

-.fade.in {

-  opacity: 1; }

-

-.fade {

-  opacity: 0; }

-

-.b2b-modal-header {

-  align-items: center;

-  border-radius: 8px 8px 0 0;

-  display: flex;

-  min-height: 60px;

-  overflow: hidden;

-  padding: 30px 46px 30px 30px;

-  position: relative; }

-

-.b2b-modal-header > h2 {

-  line-height: 1;

-  margin: 0;

-  padding: 0; }

-

-.modal-header-portrait {

-  -webkit-overflow-scrolling: auto; }

-

-.modal-header-landscape {

-  -webkit-overflow-scrolling: auto; }

-

-.b2b-modal-body {

-  -webkit-overflow-scrolling: touch;

-  padding: 0 30px 20px;

-  position: relative;

-  width: auto; }

-

-.b2b-modal-body:focus {

-  outline: 1px dotted #333333; }

-

-.modal-form {

-  margin-bottom: 0; }

-

-.b2b-modal-footer {

-  background-color: #fff;

-  width: 100%;

-  padding: 0 30px;

-  border-radius: 0;

-  position: absolute;

-  bottom: 0; }

-

-:not(.modal-docked) .b2b-modal-footer {

-  position: relative; }

-

-.modal-docked .b2b-modal-footer {

-  border-top: 1px solid #d2d2d2; }

-

-.modal-landscape .b2b-modal-footer {

-  position: relative; }

-

-.b2b-modal-footer .cta-button-group {

-  display: flex;

-  justify-content: flex-end;

-  padding: 20px 0 5px;

-  width: 100%; }

-

-.b2b-modal-footer .cta-button-group .btn {

-  margin-left: auto;

-  margin-right: auto;

-  float: right;

-  margin-left: 10px; }

-

-.b2b-modal-footer .cta-button-group .btn + .btn {

-  margin-right: 0 !important; }

-

-[class*="modal-"] {

-  width: 100%; }

-

-.modal-small {

-  max-width: 420px; }

-

-.modal-medium {

-  max-width: 620px; }

-

-.modal-large {

-  max-width: 720px; }

-

-.modal-xlarge {

-  max-width: 860px; }

-

-.modal-jumbo {

-  max-width: 1000px; }

-

-.modalwrapper.modal-docked {

-  height: 100%;

-  display: flex;

-  align-items: center; }

-

-.modalwrapper.modal-docked .b2b-modal-body {

-  height: 80%;

-  overflow-y: scroll;

-  padding-bottom: 60px; }

-

-.modalwrapper.modal-docked .modal {

-  max-height: 80%;

-  height: 80%;

-  overflow: hidden;

-  top: 0; }

-

-.modalwrapper.modal-docked .b2b-modal-body > *:last-child {

-  margin-bottom: 60px; }

-

-@media (max-width: 767px) {

-  .modalwrapper {

-    padding: 15px;

-    overflow-x: hidden; }

-  .modal.fade.in {

-    top: 0;

-    right: 0;

-    left: 0;

-    margin-bottom: 15px;

-    border: none; }

-  .b2b-modal-header {

-    padding: 20px 46px 20px 15px; }

-  .b2b-modal-body {

-    width: 100%;

-    padding: 0 15px 15px; }

-  .modalwrapper.modal-docked {

-    position: absolute;

-    height: 100%;

-    padding: 0; }

-  .modalwrapper.modal-docked .modal.fade.in {

-    margin-bottom: 0;

-    width: 100% !important;

-    max-height: 100%;

-    height: 100%;

-    border-radius: 0; }

-  .modalwrapper.modal-docked .b2b-modal-body {

-    overflow-y: scroll;

-    height: 100%; }

-  .modalwrapper.modal-docked.modal-landscape {

-    overflow-y: hidden;

-    position: fixed; }

-  .modalwrapper.modal-docked.modal-landscape .modal {

-    overflow-y: scroll;

-    max-width: 100%; }

-  .modalwrapper.modal-docked.modal-landscape .b2b-modal-body {

-    height: auto;

-    overflow-y: hidden; }

-  .b2b-modal-footer {

-    padding: 0 15px; }

-  .b2b-modal-footer .cta-button-group {

-    display: block;

-    padding: 15px 0; }

-  .b2b-modal-footer .cta-button-group .btn {

-    float: none; }

-  .b2b-modal-footer .cta-button-group .btn + .btn {

-    margin-bottom: 0; }

-  .b2b-modal-footer .cta-button-group a.visible-phone {

-    align-items: center;

-    display: flex !important;

-    height: 42px;

-    justify-content: center; } }

-

-.b2b-modal-footer > .cta-button-group {

-  line-height: 40px; }

-

-.ajaxed,

-.modal.fade.in .b2b-modal-header,

-.modal.fade.in .b2b-modal-body,

-.modal.fade.in .b2b-modal-footer {

-  animation-duration: 0.01s;

-  -o-animation-duration: 0.01s;

-  -ms-animation-duration: 0.01s;

-  -moz-animation-duration: 0.01s;

-  -webkit-animation-duration: 0.01s;

-  animation-name: DOMinsertion;

-  -o-animation-name: DOMinsertion;

-  -ms-animation-name: DOMinsertion;

-  -moz-animation-name: DOMinsertion;

-  -webkit-animation-name: DOMinsertion; }

-

-.monthselector thead tr th {

-  min-width: 46px; }

-

-.monthselector thead tr:after {

-  content: "";

-  position: absolute;

-  left: 20px;

-  top: 52px;

-  height: 1px;

-  width: 85%;

-  border-bottom: 1px solid #ccc; }

-

-.monthselector tbody tr:last-child {

-  height: 50px; }

-

-.monthselector td.day {

-  margin: 1px 4px !important;

-  width: 64px !important; }

-

-.monthselector .datepicker-switch {

-  width: 195px !important; }

-

-.monthselector .show-date {

-  width: 30px !important; }

-

-.monthselector button.faux-input {

-  width: 100%; }

-  .monthselector button.faux-input:focus {

-    border: 1px solid #0574ac; }

-  .monthselector button.faux-input:disabled {

-    cursor: not-allowed; }

-

-.monthselector .cta-button-group {

-  padding: 0 20px; }

-  .monthselector .cta-button-group a {

-    margin-right: 20px; }

-

-.monthselector .day.active .show-date:after, .monthselector .day:focus .show-date:after, .monthselector .due-date.disabled .show-date:after {

-  height: 30px;

-  left: 9px !important;

-  top: 0;

-  width: 42px !important; }

-

-.monthselector .disabled.day:focus .show-date:after {

-  border: none; }

-

-.monthselector .icon-primary-calendar {

-  display: block; }

-

-.b2b-ml-nav {

-  padding: 0 10px 0 10px;

-  width: 320px; }

-

-.b2b-ml-nav ul {

-  list-style: none;

-  list-style-type: none; }

-

-.b2b-ml-nav a {

-  display: block;

-  padding: 0 0 5px 30px;

-  line-height: 22px;

-  margin-left: -10px;

-  color: #333;

-  font-size: 1.4rem; }

-

-.b2b-ml-nav a:focus {

-  outline-offset: 1px; }

-

-.b2b-ml-nav li:focus {

-  outline: none; }

-

-.b2b-ml-nav li:focus > a {

-  outline: thin dotted #666;

-  outline-offset: 1px; }

-

-.b2b-ml-nav ul li {

-  border-left: 1px solid #ccc; }

-

-.b2b-ml-nav ul ul {

-  padding: 0 0 0 20px; }

-

-.b2b-ml-nav ul > li {

-  position: relative;

-  line-height: 18px; }

-

-.b2b-ml-nav a > span {

-  background-color: #FFF;

-  display: inline;

-  margin: 0;

-  padding: 0;

-  position: absolute;

-  left: -11px;

-  top: 0; }

-

-.b2b-ml-nav a > span > i {

-  font-size: 20px; }

-

-.b2b-ml-nav a:only-child {

-  color: #0574ac; }

-

-.b2b-ml-nav a:only-child > span {

-  left: -6px;

-  border-radius: 50%;

-  line-height: 7px;

-  top: 5px; }

-

-.b2b-ml-nav a:only-child > span > i {

-  background-color: inherit;

-  background: #fff;

-  font-size: 10px; }

-

-.b2b-ml-nav ul li:first-child > a:only-child > span {

-  left: -6px;

-  border-radius: 50%;

-  line-height: 12px;

-  top: 0px; }

-

-.b2b-ml-nav li a + ul {

-  display: none; }

-

-.b2b-ml-nav li a.active + ul {

-  display: block; }

-

-/*to overide ng-doc inline property for library demo - TODO: Move to docs.css*/

-.b2b-ml-nav a [class^="icon-primary-"], a [class*=" icon-primary-"], a [class^="icon-primary-"]:before, a [class*=" icon-primary-"]:before {

-  display: inline-block; }

-

-.b2b-alerts-messages {

-  background-color: #fff;

-  border-radius: 8px;

-  height: auto; }

-  .b2b-alerts-messages h3 {

-    color: #333 !important;

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    margin-bottom: 0 !important; }

-  .b2b-alerts-messages h4 {

-    color: #333 !important;

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    margin-bottom: 0 !important; }

-  .b2b-alerts-messages .alert-info {

-    background-color: #0574ac;

-    border: 0; }

-  .b2b-alerts-messages .alert-error {

-    background-color: #cf2a2a;

-    border: 0; }

-  .b2b-alerts-messages .alert-success {

-    background-color: #1b7e28;

-    border: 0; }

-  .b2b-alerts-messages div:nth-child(2) {

-    padding: 0 0 15px 10px;

-    vertical-align: baseline; }

-  .b2b-alerts-messages .close:before {

-    color: #767676; }

-  .b2b-alerts-messages p {

-    font-size: 14px;

-    color: #333;

-    font-family: "Omnes-ECOMP-W02", Arial; }

-    .b2b-alerts-messages p a {

-      color: #333; }

-  .b2b-alerts-messages .btn-small {

-    margin-bottom: 0px; }

-

-.b2b-alerts-success {

-  border: 1px solid #1b7e28; }

-

-.b2b-alerts-error {

-  border: 1px solid #cf2a2a; }

-

-.b2b-alerts-info {

-  border: 1px solid #0574ac; }

-

-/* TODO: Rearange this and move to patches if needed */

-.b2b-breadcrumb-css-override > li {

-  margin-right: 24px; }

-

-.b2b-breadcrumb-css-override li > * {

-  float: left !important; }

-

-.b2b-css-override ul.nav-tabs {

-  margin-bottom: 0; }

-

-.b2b-css-override div.tab-content {

-  margin-top: 0;

-  border-top: none; }

-

-.b2b-css-override .tab-content .prettyprint, .b2b-css-override .usage .prettyprint {

-  max-height: 500px;

-  overflow-y: auto; }

-

-.b2b-top-nav-buttons-css-override {

-  margin-bottom: 0;

-  margin-top: 2px; }

-

-.b2b-auto-width {

-  width: auto !important; }

-

-.b2b-toggle-header-active {

-  color: #0568ae; }

-

-.b2b-toggle-header-inactive {

-  color: #333333; }

-

-.b2b-toggle-header-icon {

-  cursor: pointer; }

-

-.tab-content > .tab-pane {

-  display: none; }

-

-.tab-content > .active {

-  display: block; }

-

-.icon-primary-circle:before {

-  background-image: url("data:image/svg+xml,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Ccircle%20fill%3D%22transparent%22%20stroke%3D%22%23666%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2216%22%2F%3E%3C%2Fsvg%3E");

-  content: "";

-  position: absolute;

-  top: 0;

-  z-index: 1; }

-

-.ds2-no-colors .icon-primary-circle:before {

-  background-image: none;

-  content: "\e902"; }

-

-i:focus {

-  outline: thin dotted #666; }

-

-.p-col-md-12 {

-  width: 50%; }

-

-.pager__item {

-  border-radius: 0;

-  cursor: default;

-  display: inline-block;

-  margin: 5px;

-  width: 22px;

-  height: 23px;

-  /*transition: all 0.3s ease-out 0s;*/

-  vertical-align: baseline; }

-

-.pager {

-  padding-top: 10px;

-  padding-bottom: 20px;

-  text-align: center;

-  margin: 0 auto; }

-

-.pager__item--input {

-  color: #067ab4;

-  max-height: 32px;

-  max-width: 40px;

-  padding-left: 0;

-  padding-right: 0;

-  text-align: center;

-  margin-left: 10px; }

-

-.row.section-row {

-  margin-bottom: 20px; }

-

-.pager__item--active {

-  border-bottom: 2px solid #0574ac;

-  border-radius: 0;

-  color: #333333; }

-

-.pager a.pager__item--active:hover {

-  cursor: default; }

-

-.pager a:hover, .pager a:focus {

-  text-decoration: none;

-  color: #333333;

-  cursor: pointer; }

-

-.pager a.disabled:hover, .pager a.disabled:focus {

-  cursor: not-allowed; }

-

-.row.section-row.b2b-page {

-  display: block; }

-

-a.pager__item--next:focus, a.pager__item--prev:focus {

-  text-decoration: none;

-  border: 0; }

-

-.pager__item--next, .pager__item--prev {

-  margin: 5px;

-  padding: 1.5px 6px 1.5px 6px; }

-

-.pager .disabled i {

-  pointer-events: none;

-  cursor: default;

-  color: #c4c4c4; }

-

-.fieldLabel {

-  color: #666666; }

-

-.fieldLabel input {

-  color: #666666; }

-

-.pSelect {

-  float: right;

-  width: 150px; }

-

-.numericResult {

-  margin-bottom: 20px;

-  font-size: 1.6rem;

-  margin-top: 20px;

-  display: inline-block;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.mobile-view > .pager__item {

-  margin: 5px 10px;

-  width: 24px;

-  height: 34px;

-  vertical-align: middle;

-  line-height: 34px; }

-

-.fade1, .fadel {

-  opacity: 0.4; }

-

-.fade2, .fadesl {

-  opacity: 0.6; }

-

-h4#pagination-truncated {

-  margin-top: 50px; }

-

-h4#pagination-large-count {

-  margin-top: 50px; }

-

-.p-col-md-12 input {

-  margin-left: 20px; }

-

-.pager a .icon-primary-right:before {

-  display: inline-block; }

-

-.pager a .icon-primary-left:before {

-  display: inline-block; }

-

-.page-heading {

-  background: white none repeat scroll 0 0;

-  margin-bottom: -12px;

-  padding-left: 10px;

-  padding-right: 10px;

-  position: relative; }

-

-.numericResult:focus {

-  outline: 1px dotted #0574ac; }

-

-.page-heading-group {

-  color: #ef6f00;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.pager > div > span.fieldLabel {

-  margin-left: 18px; }

-

-.pager .fieldLabel .btn-arrow {

-  top: 0;

-  left: 10px; }

-

-.b2b-p-col-md-12 {

-  width: 50%; }

-  .b2b-p-col-md-12 input {

-    margin-left: 20px; }

-

-.b2b-pager__item {

-  border-radius: 0;

-  cursor: default;

-  display: inline-block;

-  margin: 5px;

-  min-width: 23px;

-  height: 23px;

-  vertical-align: baseline; }

-

-.b2b-pager__item--noclick {

-  pointer-events: none !important;

-  cursor: default !important; }

-

-.b2b-pager {

-  padding-top: 10px;

-  padding-bottom: 20px;

-  text-align: center;

-  margin: 0 auto; }

-  .b2b-pager a:hover {

-    text-decoration: none;

-    color: #333333;

-    cursor: pointer; }

-  .b2b-pager a:focus {

-    text-decoration: none;

-    color: #333333;

-    cursor: pointer; }

-  .b2b-pager a .icon-primary-right:before {

-    display: inline-block; }

-  .b2b-pager a .icon-primary-left:before {

-    display: inline-block; }

-  .b2b-pager .disabled i {

-    pointer-events: none;

-    cursor: default;

-    color: #c4c4c4; }

-

-.b2b-pager__item--input {

-  color: #067ab4;

-  max-height: 32px;

-  max-width: 60px;

-  padding-left: 0;

-  padding-right: 0;

-  text-align: center;

-  margin-left: 10px; }

-

-.row.section-row {

-  margin-bottom: 20px; }

-

-.b2b-pager__item--active {

-  border-bottom: 2px solid #0574ac;

-  border-radius: 0;

-  color: #333333; }

-

-.row.section-row.b2b-page {

-  display: block; }

-

-a.b2b-pager__item--next:focus {

-  text-decoration: none;

-  border: 0; }

-

-a.b2b-pager__item--next-disabled {

-  outline: 0; }

-

-a.b2b-pager__item--next-disabled > [class^="icon-primary-"] {

-  color: #cccccc;

-  cursor: not-allowed;

-  outline: 0; }

-

-a.b2b-pager__item--prev:focus {

-  text-decoration: none;

-  border: 0; }

-

-a.b2b-pager__item--prev-disabled {

-  outline: 0; }

-

-a.b2b-pager__item--prev-disabled > [class^="icon-primary-"] {

-  color: #cccccc;

-  cursor: not-allowed; }

-

-.b2b-pager__item--next {

-  margin: 5px;

-  padding: 1.5px 6px 1.5px 6px; }

-

-.b2b-pager__item--prev {

-  margin: 5px;

-  padding: 1.5px 6px 1.5px 6px; }

-

-.fieldLabel {

-  color: #666666; }

-  .fieldLabel input {

-    color: #666666; }

-  .fieldLabel .btn-arrow {

-    top: 0;

-    left: 10px; }

-

-.b2b-pSelect {

-  float: right;

-  width: 150px; }

-

-.b2b-numericResult {

-  margin-bottom: 20px;

-  font-size: 1.6rem;

-  margin-top: 20px; }

-

-.b2b-mobile-view > .b2b-pager__item {

-  margin: 5px 10px;

-  min-width: 23px;

-  height: 34px;

-  vertical-align: middle;

-  line-height: 34px; }

-

-.b2b-fade1 {

-  opacity: 0.4; }

-

-.b2b-fade2 {

-  opacity: 0.6; }

-

-.b2b-fadesl {

-  opacity: 0.6; }

-

-h4#b2b-pagination-truncated {

-  margin-top: 50px; }

-

-h4#b2b-pagination-large-count {

-  margin-top: 50px; }

-

-.b2b-page-heading {

-  background: white none repeat scroll 0 0;

-  margin-bottom: -12px;

-  padding-left: 10px;

-  padding-right: 10px;

-  position: relative; }

-

-.b2b-numericResult:focus {

-  outline: 1px dotted #0574ac; }

-

-.b2b-page-heading-group {

-  color: #ef6f00;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.b2b-pager > div > span.fieldLabel {

-  margin-left: 18px; }

-

-input.b2b-phone-mask-input {

-  padding-right: 15px; }

-  input.b2b-phone-mask-input:hover, input.b2b-phone-mask-input:focus {

-    padding-right: 15px; }

-

-/************************** Start - Should be removed after the styling in global is fixed *******************/

-input::-ms-clear {

-  display: none; }

-

-/************************** End - Should be removed after the styling in global is fixed *******************/

-@media (max-width: 767px) {

-  input::-ms-clear {

-    display: block; } }

-

-.pivot-link-group {

-  background-color: #5a5a5a;

-  border-top: 1px solid #959595; }

-

-.pivot-links > li {

-  border-bottom: 1px solid #959595; }

-

-.pivot-links > li > a {

-  color: #fff;

-  display: block;

-  padding: 12px 15px 10px;

-  line-height: normal; }

-

-.b2b-profile-block-container {

-  min-height: 200px;

-  height: auto;

-  background-color: #fff;

-  border-radius: 8px;

-  border: 1px solid #ccc;

-  box-shadow: 0px 1px 1px 1px  #ccc;

-  display: inline-table;

-  margin: 15px 15px; }

-

-.b2b-profile-block-details p, .b2b-profile-block-details div {

-  padding: 2px 7px;

-  font-size: 1.4rem; }

-

-.b2b-profile-block-details .radio-label, .b2b-profile-block-details a {

-  font-size: 1.4rem; }

-

-.b2b-profile-block-details p label, .b2b-profile-block-details p span {

-  padding-left: 10px; }

-

-.b2b-profile-block-footer {

-  margin-bottom: 12px;

-  margin-top: 5px;

-  height: 35px; }

-

-.b2b-profile-block-details p {

-  word-wrap: break-word;

-  height: 61px; }

-  .b2b-profile-block-details p:first-child {

-    margin-top: 10px; }

-  .b2b-profile-block-details p:after {

-    content: ' ';

-    display: block;

-    border: 0.2px solid #ccc;

-    margin-top: 12px; }

-

-.b2b-profile-block-details .radio {

-  margin-left: 15px;

-  height: 30px; }

-

-.b2b-approval-icon {

-  color: #1b7e28;

-  float: right;

-  position: relative;

-  left: 10px; }

-  .b2b-approval-icon i {

-    color: #1b7e28;

-    float: right; }

-

-.b2b-profile-link {

-  float: right;

-  position: relative;

-  left: -4px; }

-

-a.link-profile {

-  position: relative;

-  left: -5px;

-  float: right;

-  margin-bottom: 16px; }

-

-.b2b-profile-block-radio {

-  position: relative;

-  top: -5px; }

-

-.b2b-profile-card {

-  min-width: 229px;

-  min-height: 354px;

-  margin: 10px;

-  border: solid 1px #CCC;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  display: inline-block;

-  vertical-align: top; }

-  .b2b-profile-card .top-block {

-    padding: 15px 20px;

-    background-color: #e4e4e4;

-    max-height: 153px; }

-  .b2b-profile-card .bottom-block {

-    padding: 15px 20px 15px 20px;

-    background-color: #fff; }

-  .b2b-profile-card .profile-image {

-    background: #e4e4e4;

-    margin-bottom: 15px;

-    text-align: center; }

-    .b2b-profile-card .profile-image .default-img {

-      display: inline-block;

-      width: 60px;

-      height: 60px;

-      margin-bottom: 10px;

-      border: 6px solid #fff;

-      border-radius: 99em;

-      -webkit-border-radius: 99em;

-      -moz-border-radius: 99em;

-      /* background-color: #eee; */ }

-

-.profile-image img {

-  display: inline-block;

-  width: 60px;

-  height: 60px;

-  margin-bottom: 10px;

-  border: 6px solid #fff;

-  border-radius: 99em;

-  -webkit-border-radius: 99em;

-  -moz-border-radius: 99em;

-  /* background-color: #eee; */ }

-

-.b2b-profile-card .profile-image .default-img {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  color: #333;

-  background-color: #fff;

-  font-size: 32px;

-  line-height: 22px;

-  padding: 5px;

-  padding-top: 13px;

-  width: 60px;

-  height: 60px;

-  text-transform: uppercase; }

-

-.b2b-profile-card .profile-image .name {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 16px;

-  color: #333;

-  text-align: center;

-  margin-bottom: 5px;

-  margin-top: 5px;

-  overflow: hidden;

-  word-break: break-word;

-  white-space: normal;

-  text-transform: capitalize; }

-

-.b2b-profile-card .profile-image .status-icon {

-  border-radius: 10px;

-  border: 1px solid #fff;

-  margin: 0 3px 0 0;

-  width: 10px;

-  height: 10px;

-  display: inline-block;

-  vertical-align: middle; }

-

-.b2b-profile-card .profile-image .status {

-  font-size: 12px;

-  line-height: 15px;

-  text-align: center;

-  margin: 0 15px 0 0;

-  color: #444; }

-

-.b2b-profile-card .status .circle {

-  width: 10px;

-  height: 10px;

-  border-radius: 50%;

-  margin: 30px 6px 0px 20px;

-  text-align: center;

-  background-color: #444; }

-

-.b2b-profile-card .profile-image .status-green {

-  background-color: #0c0; }

-

-.b2b-profile-card .profile-image .status-red {

-  background-color: red; }

-

-.b2b-profile-card .profile-image .status-blue {

-  background-color: #00f; }

-

-.b2b-profile-card .profile-image .status-yellow {

-  background-color: #ff0; }

-

-.b2b-profile-card .profile-image .status .status-badge {

-  margin-left: 5px;

-  border: dotted 1px #444;

-  background-color: transparent;

-  font-weight: 400;

-  color: #444;

-  height: 17px;

-  padding: 0 5px;

-  font-size: 11px;

-  padding-left: 5px;

-  padding-right: 5px; }

-

-.b2b-profile-card .profile-details {

-  background: #fff; }

-  .b2b-profile-card .profile-details label {

-    display: block;

-    cursor: text;

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    font-weight: bolder;

-    font-size: 14px;

-    color: #333;

-    padding: 0;

-    margin: 0; }

-  .b2b-profile-card .profile-details div {

-    margin: 0;

-    font-size: 14px;

-    color: #333;

-    padding-bottom: 6.5px; }

-

-.b2b-profile-card .b2b-add-user {

-  background: white;

-  border-style: dotted;

-  font-size: 16px;

-  color: #333;

-  position: relative; }

-  .b2b-profile-card .b2b-add-user i {

-    font-size: 30px;

-    padding-bottom: 15px; }

-

-.b2b-profile-card .atcenter {

-  cursor: pointer;

-  margin-top: 60%;

-  vertical-align: middle;

-  text-align: center; }

-

-.b2b-profile-card .tooltip {

-  cursor: pointer; }

-  .b2b-profile-card .tooltip .helpertext {

-    position: relative;

-    color: white; }

-

-.b2b-profile-card .tooltip-wrapper {

-  position: relative; }

-

-/* Overrides for tooltip absolute positioning */

-@media (min-width: 1025px) {

-  .b2b-profile-card .tooltip-size-control {

-    width: 100% !important; } }

-

-@-webkit-keyframes progress-bar-stripes {

-  from {

-    background-position: 0 0; }

-  to {

-    background-position: 80px 0; } }

-

-@keyframes progress-bar-stripes {

-  from {

-    background-position: 0 0; }

-  to {

-    background-position: 80px 0; } }

-

-.progress {

-  background-color: #e4e4e4;

-  border-radius: 4px;

-  height: 14px;

-  margin-bottom: 20px;

-  min-width: 250px;

-  overflow: hidden;

-  padding: 0;

-  position: relative; }

-

-a .progress {

-  margin-bottom: 0; }

-

-.progress .bar {

-  background-color: #666;

-  border-radius: 4px;

-  display: -webkit-flex;

-  display: -ms-flexbox;

-  display: flex;

-  height: 100%;

-  width: 0; }

-

-.progress-arrow {

-  display: -webkit-flex;

-  display: -ms-flexbox;

-  display: flex;

-  -webkit-align-items: center;

-  -ms-flex-align: center;

-  align-items: center;

-  -webkit-justify-content: flex-end;

-  -ms-flex-pack: end;

-  justify-content: flex-end; }

-

-.progress-link + .usage-bar {

-  margin-top: 5px; }

-

-.progress-success .bar, .progress .bar-success {

-  background-color: #1b7e28; }

-

-.progress-warning .bar, .progress .bar-warning {

-  background-color: #ef6f00; }

-

-.progress-danger .bar, .progress .bar-danger {

-  background-color: #cf2a2a; }

-

-.progress.increment {

-  display: -webkit-flex;

-  display: -ms-flexbox;

-  display: flex; }

-

-.progress.increment .bar:first-child:not(:last-child) {

-  border-right: none;

-  border-radius: 4px 0 0 4px; }

-

-.progress.increment .bar:last-child:not(:first-child) {

-  border-left: none;

-  border-radius: 0 4px 4px 0; }

-

-.progress.increment .bar + .bar:not(:last-child) {

-  border-left: none;

-  border-right: none;

-  border-radius: 0; }

-

-.progress.increment .bar:not(:first-child) {

-  border-left: 1px solid white !important; }

-

-.usage-bar {

-  display: table;

-  float: none;

-  width: 100%;

-  margin-bottom: 1px; }

-

-.usage-bar > .usage-text {

-  display: table-cell;

-  width: 1%; }

-

-.progress + .usage-bar {

-  margin-top: -15px; }

-

-.usage-bar .usage-text {

-  font-size: 1.4rem; }

-

-.usage-bar .usage-text:first-child {

-  white-space: nowrap; }

-

-.usage-bar .usage-text.text-right {

-  vertical-align: top;

-  font-size: 1.4rem;

-  width: auto !important; }

-

-.usage-bar .usage-text.text-right:before {

-  content: "";

-  display: table;

-  height: .1em; }

-

-.usage-bar.billing-cycle .usage-text {

-  font-size: 1.4rem; }

-

-.usage-bar.billing-cycle .usage-text.text-right {

-  vertical-align: bottom; }

-

-.progress.autocolor [data-percentage="1"], .progress.autocolor [data-percentage="2"], .progress.autocolor [data-percentage="3"], .progress.autocolor [data-percentage="4"], .progress.autocolor [data-percentage="5"], .progress.autocolor [data-percentage="6"], .progress.autocolor [data-percentage="7"], .progress.autocolor [data-percentage="8"], .progress.autocolor [data-percentage="9"], .progress.autocolor [data-percentage="10"] .progress.autocolor [data-percentage^="2"], .progress.autocolor [data-percentage^="3"], .progress.autocolor [data-percentage^="4"], .progress.autocolor [data-percentage^="5"], .progress.autocolor [data-percentage="60"], .progress.autocolor [data-percentage="61"], .progress.autocolor [data-percentage="62"], .progress.autocolor [data-percentage="63"], .progress.autocolor [data-percentage="64"] {

-  background-color: #1b7e28; }

-

-.progress.autocolor [data-percentage="65"], .progress.autocolor [data-percentage="66"], .progress.autocolor [data-percentage="67"], .progress.autocolor [data-percentage="68"], .progress.autocolor [data-percentage="69"], .progress.autocolor [data-percentage^="7"], .progress.autocolor [data-percentage^="8"] {

-  background-color: #ef6f00; }

-

-.progress.autocolor [data-percentage^="9"], .progress.autocolor [data-percentage="100"] {

-  background-color: #cf2a2a; }

-

-.b2b-seek-bar-container {

-  position: relative; }

-  .b2b-seek-bar-container div {

-    position: absolute; }

-  .b2b-seek-bar-container .b2b-seek-bar-track-container {

-    width: 100%; }

-  .b2b-seek-bar-container .b2b-seek-bar-track {

-    width: 100%;

-    height: 6px;

-    background-color: #cccccc;

-    border-radius: 10px; }

-  .b2b-seek-bar-container .b2b-seek-bar-track-fill {

-    width: 100%;

-    height: 6px;

-    background-color: #cccccc;

-    border-radius: 10px;

-    width: 0;

-    background-color: #157BB2;

-    transition: width 0s linear; }

-

-.seek-bar-container .seek-bar-knob-container {

-  transition: left 0s linear; }

-

-.b2b-seek-bar-container .b2b-seek-bar-knob {

-  width: 14px;

-  height: 14px;

-  border-radius: 10px;

-  top: -4px;

-  left: -8px;

-  border: 1px solid #cccccc;

-  background: white;

-  cursor: pointer; }

-

-.b2b-seek-bar-container .b2b-seek-bar-knob:focus {

-  outline: thin dotted #666; }

-

-.b2b-seek-bar-container.vertical {

-  width: 100%;

-  height: 100%;

-  margin: 0 auto;

-  position: relative;

-  border-radius: 10px; }

-  .b2b-seek-bar-container.vertical .b2b-seek-bar-track-container {

-    position: relative;

-    height: 100%; }

-  .b2b-seek-bar-container.vertical .b2b-seek-bar-track {

-    position: absolute;

-    height: 100%; }

-  .b2b-seek-bar-container.vertical .b2b-seek-bar-track-fill {

-    position: absolute;

-    bottom: 0;

-    height: 0;

-    width: 100%; }

-  .b2b-seek-bar-container.vertical .b2b-seek-bar-knob-container {

-    transition: bottom .01s linear;

-    position: relative;

-    bottom: 0; }

-  .b2b-seek-bar-container.vertical .b2b-seek-bar-knob {

-    position: absolute;

-    border-radius: 10px;

-    top: -7px;

-    left: -4px; }

-

-.form-search .search-query {

-  width: 100% !important; }

-

-.form-search .well {

-  margin-top: 0; }

-

-.form-search > ul.nav > li.section {

-  min-height: 20px !important; }

-

-input.b2b-search-input-field {

-  margin-bottom: 0px; }

-

-.search-suggestion-list {

-  background-color: #FFFFFF;

-  border: 1px solid #ccc;

-  border-radius: 0 0 6px 6px;

-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);

-  margin-top: -5px;

-  max-height: 400px;

-  overflow-x: hidden;

-  overflow-y: auto;

-  padding: 15px 0;

-  position: absolute;

-  width: 100%;

-  z-index: 1000; }

-  .search-suggestion-list > li.active {

-    background-color: #cccccc; }

-  .search-suggestion-list:empty {

-    display: none; }

-

-.b2b-search-hightlight {

-  font-weight: bold; }

-

-input[type="text"]::-moz-placeholder {

-  color: #767676;

-  font-family: "Omnes-ECOMP-W02-Italic", Arial; }

-

-input[type="text"]:focus {

-  z-index: 1000; }

-

-input[type="text"] + .reset-field {

-  background-color: #FFFFFF;

-  height: 90%;

-  top: 5%; }

-

-.btn-search:focus {

-  outline: 1px dotted #0574ac; }

-

-.field-group input:not([type="button"])[disabled] ~ .btn-search {

-  background-color: #eee; }

-

-.btn-search[class*="btn"] {

-  background-color: #FFFFFF;

-  background-size: 20px 20px;

-  border-radius: 0 1.5rem 1.5rem 0;

-  height: 3rem;

-  min-width: 4.4rem !important;

-  right: 0.15rem;

-  top: 0.15rem;

-  width: 4.4rem; }

-

-.search-suggestion-wrapper {

-  margin-bottom: 15px;

-  position: relative; }

-  .search-suggestion-wrapper .no-result {

-    padding: 0px 15px; }

-

-.search-suggestion-item {

-  color: #333333;

-  line-height: 4rem;

-  padding: 0 15px;

-  position: relative;

-  z-index: 1000; }

-  .search-suggestion-item:hover {

-    background-color: #e4e4e4;

-    cursor: pointer; }

-  .search-suggestion-item:focus {

-    background-color: #e4e4e4;

-    cursor: pointer; }

-  .search-suggestion-item a {

-    color: #333333;

-    text-decoration: none; }

-

-.btn-search i {

-  color: #767676; }

-

-input.b2b-search-input-field:focus ~ .btn-search > i, .btn-search:focus > i {

-  color: #0568ae; }

-

-button.btn-search[disabled] {

-  cursor: not-allowed; }

-  button.btn-search[disabled] i {

-    color: #767676; }

-

-.linkSelectorModule {

-  position: relative;

-  height: 32px;

-  line-height: 20px;

-  border: 0px;

-  width: auto;

-  display: block; }

-  .linkSelectorModule .icon-primary-down {

-    font-size: 23px;

-    margin-top: -10px;

-    position: absolute;

-    top: 50%;

-    margin-left: -30px; }

-  .linkSelectorModule .selectModule {

-    background-color: transparent;

-    border: none;

-    color: #0568ae;

-    cursor: pointer;

-    border: 1px solid transparent;

-    box-shadow: none;

-    padding-right: 35px;

-    position: relative;

-    user-select: none;

-    font-size: 1.6rem; }

-    .linkSelectorModule .selectModule:focus {

-      border: 1px dotted #ccc;

-      box-shadow: none;

-      -moz-user-select: none; }

-    .linkSelectorModule .selectModule:hover {

-      text-decoration: underline; }

-  .linkSelectorModule .active + .moduleWrapper:before {

-    background-color: #FFFFFF;

-    border-color: #d2d2d2;

-    border-style: solid;

-    border-width: 1px 1px 0 0;

-    content: "";

-    display: block;

-    height: 15px;

-    right: 122px;

-    margin: 0;

-    position: absolute;

-    top: -8px;

-    -webkit-transform: rotate(-45deg);

-    transform: rotate(-45deg);

-    width: 15px; }

-  .linkSelectorModule .moduleWrapper {

-    top: 40px; }

-  .linkSelectorModule ul.awd-module-list {

-    border-radius: 6px 6px 0px 0px; }

-

-.selectorModule .icon-primary-down {

-  font-size: 23px;

-  margin-top: -11px;

-  position: absolute;

-  right: 4px;

-  top: 50%; }

-

-.selectorModule .selectModule {

-  border: 1px solid #d2d2d2;

-  border-radius: 6px;

-  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);

-  display: block;

-  width: 100%;

-  padding-left: 15px;

-  background-color: transparent;

-  cursor: pointer; }

-  .selectorModule .selectModule:focus {

-    border: 1px solid #0568ae;

-    -moz-user-select: none; }

-  .selectorModule .selectModule span.module-data {

-    position: absolute;

-    bottom: 6px;

-    line-height: 20px; }

-  .selectorModule .selectModule img + span.module-data {

-    padding-left: 45px; }

-

-.selectorModule .selectModule.active {

-  border-bottom-right-radius: 0px;

-  border-bottom-left-radius: 0px; }

-

-.selectorModule .moduleWrapper {

-  position: absolute;

-  width: 100% !important;

-  border-top: none; }

-

-.selectorModule ul.awd-module-list {

-  border-radius: 0px 0px 6px 6px; }

-

-.selectorModule .large > img {

-  height: 30px;

-  position: absolute;

-  width: 30px;

-  top: 20px;

-  left: 15px; }

-

-.selectModule {

-  background-color: transparent;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  color: #333333;

-  font-size: 1.6rem;

-  height: 36px;

-  line-height: 35px;

-  margin-bottom: 0;

-  position: relative;

-  text-align: left;

-  top: 0;

-  z-index: 10;

-  padding: 0px;

-  margin: 0px;

-  cursor: pointer; }

-

-.moduleWrapper {

-  background-color: #FFFFFF;

-  position: absolute;

-  color: #191919;

-  z-index: 9999;

-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);

-  border-radius: 0px 0px 6px 6px; }

-  .moduleWrapper .module-list-item img {

-    height: 30px;

-    position: absolute;

-    width: 30px;

-    top: 30px;

-    left: 15px;

-    align-self: center; }

-  .moduleWrapper span {

-    display: block;

-    white-space: nowrap;

-    font-size: 1.5rem; }

-

-.awd-module-list {

-  overflow-y: auto;

-  z-index: 9999;

-  max-height: 360px;

-  border: 1px solid #d2d2d2; }

-  .awd-module-list .module-list-item > .module-data {

-    overflow: ellipsis;

-    white-space: nowrap;

-    line-height: 20px;

-    font-size: 1.6rem;

-    border-bottom: 1px dotted #959595;

-    margin: 0px 15px 0px 15px;

-    padding-right: 50px;

-    padding-bottom: 14px;

-    padding-top: 14px;

-    align-self: center;

-    width: 100%; }

-  .awd-module-list .module-list-item:hover {

-    background-color: #f2f2f2; }

-  .awd-module-list .module-list-item:active {

-    background-color: #f2f2f2; }

-  .awd-module-list .module-list-item[aria-selected="true"] {

-    background-color: #f2f2f2; }

-

-.module-list-item {

-  cursor: pointer;

-  overflow: hidden;

-  position: relative;

-  overflow: ellipsis;

-  white-space: nowrap;

-  z-index: 1000;

-  color: #191919;

-  display: flex; }

-  .module-list-item:last-of-type .module-data {

-    border-bottom: none; }

-  .module-list-item img + span.module-data {

-    padding-left: 45px; }

-

-.module-groups:first-of-type .module-list-item:last-of-type .module-data {

-  border-bottom: 1px solid #959595; }

-

-.module-groupitem {

-  padding-bottom: 4px; }

-

-.selectorModule.large {

-  height: 72px;

-  vertical-align: middle;

-  text-align: left; }

-  .selectorModule.large .moduleWrapper {

-    top: 71px; }

-  .selectorModule.large input {

-    height: 72px;

-    vertical-align: middle;

-    text-align: left; }

-  .selectorModule.large button {

-    height: 72px;

-    vertical-align: middle;

-    text-align: left; }

-  .selectorModule.large .selectModule img {

-    left: 15px;

-    top: 21px; }

-

-ul.module-groupitem li {

-  margin: 0 -15px 0 -15px; }

-

-span.module-data span {

-  display: block;

-  line-height: 20px;

-  font-size: 1.5rem; }

-

-li.module-groups {

-  cursor: default !important;

-  padding: 18px 15px 0px 15px; }

-

-li.module-list-item[selected]:before {

-  box-sizing: border-box;

-  display: inline-block;

-  font-size: 2em;

-  height: 1em;

-  position: absolute;

-  top: 20px;

-  right: 0px;

-  vertical-align: middle;

-  width: 1em;

-  color: #007a3e; }

-

-ul.module-optinalcta {

-  position: relative;

-  height: 44px;

-  margin-top: 0px;

-  border-bottom: 1px solid #d2d2d2;

-  border-left: 1px solid #d2d2d2;

-  border-right: 1px solid #d2d2d2;

-  border-radius: 0px 0px 6px 6px; }

-  ul.module-optinalcta li {

-    position: absolute;

-    bottom: 10px; }

-  ul.module-optinalcta a {

-    text-indent: 15px;

-    padding: 15px; }

-

-.b2b-slider-container {

-  position: relative; }

-  .b2b-slider-container.slider-disabled {

-    cursor: not-allowed !important; }

-  .b2b-slider-container div {

-    position: absolute; }

-  .b2b-slider-container .slider-track-container {

-    width: 100%;

-    cursor: pointer; }

-  .b2b-slider-container .slider-track {

-    width: 100%;

-    height: 6px;

-    background-color: #cccccc;

-    border-radius: 10px; }

-  .b2b-slider-container .slider-track-fill {

-    width: 100%;

-    height: 6px;

-    background-color: #cccccc;

-    border-radius: 10px;

-    width: 0;

-    background-color: #157BB2;

-    transition: width 0s linear; }

-  .b2b-slider-container .slider-knob-container {

-    transition: left 0s linear; }

-    .b2b-slider-container .slider-knob-container.slider-knob-hidden {

-      display: none !important; }

-  .b2b-slider-container .slider-knob {

-    width: 14px;

-    height: 14px;

-    border-radius: 10px;

-    top: -4px;

-    left: -8px;

-    border: 1px solid #cccccc;

-    background: white;

-    cursor: pointer; }

-    .b2b-slider-container .slider-knob:focus {

-      outline: thin dotted #666; }

-

-.b2b-slider-endpoints-container {

-  margin-top: 13px;

-  color: #333;

-  font-size: 12px; }

-  .b2b-slider-endpoints-container .b2b-slider-endpoints-left {

-    float: left;

-    line-height: 100%; }

-  .b2b-slider-endpoints-container .b2b-slider-endpoints-right {

-    float: right;

-    line-height: 100%; }

-  .b2b-slider-endpoints-container::after {

-    clear: both;

-    content: "";

-    display: block; }

-

-.b2b-slider-container.vertical {

-  width: 100%;

-  height: 100%;

-  margin: 0 auto;

-  position: relative;

-  border-radius: 10px; }

-  .b2b-slider-container.vertical .slider-track-container {

-    position: relative;

-    height: 100%; }

-  .b2b-slider-container.vertical .slider-track {

-    position: absolute;

-    height: 100%; }

-  .b2b-slider-container.vertical .slider-track-fill {

-    position: absolute;

-    bottom: 0;

-    height: 0;

-    width: 100%; }

-  .b2b-slider-container.vertical .slider-knob-container {

-    transition: bottom 0s linear;

-    position: relative;

-    bottom: 0; }

-    .b2b-slider-container.vertical .slider-knob-container.slider-knob-hidden {

-      display: none !important; }

-  .b2b-slider-container.vertical .slider-knob {

-    position: absolute;

-    border-radius: 10px;

-    top: -7px;

-    left: -4px; }

-

-.icon-primary-spinner {

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20id%3D%22svg-spinner%22%20x%3D%220px%22%20y%3D%220px%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%20%3Cpath%20fill%3D%22%23F5F5F5%22%20d%3D%22M18%2036C8.1%2036%200%2027.9%200%2018S8.1%200%2018%200s18%208.1%2018%2018-8.1%2018-18%2018zm0-31.5c-7.5%200-13.5%206-13.5%2013.5S10.6%2031.5%2018%2031.5c7.5%200%2013.5-6.1%2013.5-13.5%200-7.5-6-13.5-13.5-13.5z%22%2F%3E%0A%20%20%20%3Cpath%20fill%3D%22%230568AE%22%20id%3D%22spinner%22%20d%3D%22M30.7%205.3l-3.1%203.2c2.4%202.4%203.9%205.8%203.9%209.5%200%207.4-6.1%2013.5-13.5%2013.5S4.5%2025.4%204.5%2018%2010.6%204.5%2018%204.5V0C8.1%200%200%208.1%200%2018s8.1%2018%2018%2018%2018-8.1%2018-18c0-5-2-9.5-5.3-12.7z%22%3E%0A%20%20%20%20%20%20%3CanimateTransform%20%0A%20%20%20%20%20%20%20%20%20attributeType%3D%22xml%22%0A%20%20%20%20%20%20%20%20%20attributeName%3D%22transform%22%0A%20%20%20%20%20%20%20%20%20type%3D%22rotate%22%0A%20%20%20%20%20%20%20%20%20from%3D%220%2018%2018%22%0A%20%20%20%20%20%20%20%20%20to%3D%22360%2018%2018%22%0A%20%20%20%20%20%20%20%20%20dur%3D%221.0s%22%0A%20%20%20%20%20%20%20%20%20repeatCount%3D%22indefinite%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E");

-  height: 50px;

-  width: 50px; }

-

-.icon-primary-spinner.small {

-  margin-right: 5px;

-  height: 30px !important;

-  width: 30px !important; }

-

-.isIE .icon-primary-spinner,

-.isIE .icon-primary-spinner.small {

-  animation: spinner 1s linear infinite; }

-

-.ds2-no-colors .icon-primary-spinner {

-  animation: spinner 1s linear infinite;

-  border: 5px dotted transparent;

-  border-radius: 50%; }

-

-@keyframes spinner {

-  0% {

-    transform: rotate(0deg); }

-  100% {

-    transform: rotate(359deg); } }

-

-.b2b-status-tracker > .btn-arrow:nth-of-type(1) {

-  margin-right: 10px; }

-

-.b2b-status-tracker > .btn-arrow:nth-of-type(2) {

-  margin-left: 20px; }

-

-.b2b-status-tracker > .btn-arrow {

-  height: 20px;

-  margin-top: 25px;

-  overflow: visible; }

-  .b2b-status-tracker > .btn-arrow > .btn-secondary > .icon-primary-left {

-    margin-right: 5px;

-    color: #0574ac; }

-  .b2b-status-tracker > .btn-arrow > .btn-secondary > .icon-primary-right {

-    color: #0574ac; }

-

-.b2b-status-tracker > .b2b-status-tracker-step {

-  padding: 0;

-  position: relative; }

-

-.b2b-status-tracker-step {

-  margin-left: 5px; }

-

-.b2b-status-tracker > .b2b-status-tracker-step .b2b-status-tracker-heading {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 14px;

-  color: #767676;

-  margin-bottom: 10px; }

-

-.b2b-status-tracker > .b2b-status-tracker-step.complete > .b2b-status-tracker-heading {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #1b7e28; }

-

-.b2b-status-tracker > .b2b-status-tracker-step.complete > .progress > .progress-bar {

-  width: 100%;

-  background-color: #1b7e28; }

-

-.b2b-status-tracker > .b2b-status-tracker-step.complete > .b2b-status-tracker-estimate {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #333333; }

-  .b2b-status-tracker > .b2b-status-tracker-step.complete > .b2b-status-tracker-estimate > .icoControls-approval {

-    color: #1b7e28; }

-

-.b2b-status-tracker > .b2b-status-tracker-step.current > .b2b-status-tracker-heading {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #333333; }

-

-.b2b-status-tracker > .b2b-status-tracker-step.current > .progress > .progress-bar {

-  width: 100%;

-  background-color: #333333; }

-

-.b2b-status-tracker > .b2b-status-tracker-step.current > .b2b-status-tracker-estimate > .icon-misc-time {

-  color: #333333; }

-

-.b2b-status-tracker > .b2b-status-tracker-step > .progress {

-  position: relative;

-  border-radius: 1.5px;

-  height: 3px;

-  margin-bottom: 10px;

-  background-color: #c5c5c5; }

-  .b2b-status-tracker > .b2b-status-tracker-step > .progress > .progress-bar {

-    width: 0;

-    height: 3px; }

-

-.b2b-status-tracker > .b2b-status-tracker-step > .b2b-status-tracker-estimate {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 14px;

-  color: #767676;

-  margin-bottom: 10px; }

-  .b2b-status-tracker > .b2b-status-tracker-step > .b2b-status-tracker-estimate > .icon-misc-time {

-    color: #767676; }

-

-.b2b-status-tracker > .b2b-status-tracker-step > .b2b-status-tracker-description {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 12px;

-  color: #767676;

-  padding-right: 15px; }

-

-.step-indicator {

-  height: auto;

-  padding: 40px 0; }

-

-.step-heading {

-  color: #333333;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 3.8rem;

-  line-height: 0.8; }

-

-.steps {

-  display: flex;

-  height: 5px;

-  margin-top: 60px;

-  position: relative; }

-

-.steps li {

-  color: #5a5a5a;

-  flex: 1;

-  margin-right: 5px;

-  background-color: #c4c4c4;

-  outline: 1px solid transparent; }

-

-.steps li:first-child {

-  border-radius: 4px 0 0 4px; }

-

-.steps li:last-child {

-  margin-right: 0;

-  border-radius: 0 4px 4px 0; }

-

-.steps li.step-on,

-.steps li.step-done {

-  background-color: #007a3e;

-  color: #007a3e;

-  border: 1px solid transparent; }

-

-.step-text {

-  bottom: 29px;

-  display: inline-block;

-  font-size: 1.8rem;

-  margin-top: 0;

-  position: relative;

-  white-space: nowrap; }

-

-.step-on .step-text {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.steps li .step-text[data-large-text]:before {

-  content: attr(data-large-text) " "; }

-

-.step-confirmation {

-  color: #007a3e;

-  margin-bottom: 30px; }

-

-.step-confirmation > div {

-  display: flex; }

-

-.step-confirmation > div i {

-  color: #007a3e;

-  font-size: 50px;

-  margin-right: 10px; }

-

-.step-confirmation.centered > div i {

-  margin-left: -60px; }

-

-.step-confirmation > div h3 {

-  font-size: 2.4rem;

-  margin: 26px 0 20px; }

-

-.step-confirmation > p {

-  margin: 0; }

-

-@media (max-width: 1024px) {

-  .step-indicator {

-    padding: 25px 0; }

-  .steps {

-    margin-top: 0; }

-  .step-heading {

-    font-size: 2.4rem;

-    margin-bottom: 11px; }

-  .step-text {

-    display: none; }

-  .step-on .step-text {

-    bottom: 6px;

-    display: block;

-    font-size: 1.2rem;

-    left: 0;

-    line-height: 1;

-    margin-top: 10px;

-    position: absolute;

-    top: 4px; }

-  .steps li .step-text[data-sm-text]:before {

-    content: attr(data-sm-text) " ";

-    color: #333333; }

-  .step-confirmation {

-    margin-top: 30px !important; } }

-

-@media (max-width: 767px) {

-  .step-confirmation.centered > div i {

-    margin-left: 0; }

-  .step-confirmation.centered > p {

-    margin-left: 40px; }

-  .step-confirmation > div h3 {

-    font-size: 1.8rem;

-    margin: 13px 0 10px; }

-  .step-confirmation > div i {

-    font-size: 30px;

-    margin-right: 10px; } }

-

-.step-indicator.vertical {

-  height: auto; }

-

-.vertical .step-heading {

-  font-size: 24px; }

-

-.vertical .steps {

-  display: block;

-  height: inherit;

-  width: 100%; }

-

-.vertical .steps li {

-  align-items: center;

-  background-color: transparent;

-  display: flex;

-  height: 60px;

-  margin: 0 0 4px;

-  padding: 0 0 0 20px;

-  position: relative; }

-

-.vertical .steps li .step-text {

-  align-self: center;

-  color: #0568ae;

-  display: block;

-  margin: 0;

-  position: relative;

-  font-size: 14px;

-  top: 0; }

-

-.vertical .steps li .step-text[data-large-text]:before {

-  content: attr(data-large-text) " "; }

-

-.vertical .steps li:after {

-  background-color: transparent;

-  border-left: 4px solid #d2d2d2;

-  content: "";

-  height: 60px;

-  left: 0;

-  margin: 0;

-  padding: 0;

-  position: absolute;

-  top: 0;

-  width: 4px; }

-

-.vertical .steps li.step-on:after,

-.vertical .steps li.step-done:after {

-  border-color: #0568ae; }

-

-.b2b-step-tracker {

-  height: auto;

-  padding: 0px 0px 0px 0px; }

-  .b2b-step-tracker .btn.btn-left {

-    margin-right: 10px; }

-  .b2b-step-tracker .btn.btn-right {

-    margin-left: 5px; }

-  .b2b-step-tracker .b2b-left-arrow {

-    float: left;

-    margin-top: -5px; }

-  .b2b-step-tracker .b2b-right-arrow {

-    float: right;

-    margin-top: -5px; }

-  .b2b-step-tracker .b2b-steps {

-    display: flex;

-    height: 5px;

-    margin-top: 30px;

-    position: relative; }

-    .b2b-step-tracker .b2b-steps li {

-      color: #767676;

-      flex: 1;

-      margin-right: 5px;

-      background-color: #767676;

-      outline: 1px solid transparent;

-      height: 3px; }

-      .b2b-step-tracker .b2b-steps li.b2b-step-done {

-        background-color: #1b7e28;

-        color: #007a3e;

-        height: 3px; }

-      .b2b-step-tracker .b2b-steps li.b2b-step-on {

-        background-color: #333333;

-        color: #333333;

-        height: 3px;

-        font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-      .b2b-step-tracker .b2b-steps li .b2b-step-text {

-        bottom: 29px;

-        display: inline-block;

-        font-size: 14px;

-        margin-top: 0;

-        position: relative;

-        white-space: nowrap; }

-      .b2b-step-tracker .b2b-steps li .b2b-step-text[data-large-text]:before {

-        content: attr(data-large-text) " "; }

-    .b2b-step-tracker .b2b-steps li:first-child {

-      border-radius: 2px 0 0 2px; }

-    .b2b-step-tracker .b2b-steps li:last-child {

-      margin-right: 0;

-      border-radius: 0 2px 2px 0; }

-

-@media (max-width: 1024px) {

-  .b2b-step-tracker {

-    padding: 25px 0; }

-    .b2b-step-tracker .b2b-steps {

-      margin-top: 0; }

-      .b2b-step-tracker .b2b-steps li .b2b-step-text {

-        display: none; }

-      .b2b-step-tracker .b2b-steps li .b2b-step-text[data-sm-text]:before {

-        content: attr(data-sm-text) " ";

-        color: #333333; }

-      .b2b-step-tracker .b2b-steps li.b2b-step-on .b2b-step-text {

-        bottom: 6px;

-        display: block;

-        font-size: 10px;

-        left: 0;

-        line-height: 1;

-        margin-top: 10px;

-        position: absolute;

-        top: 4px; } }

-

-.strength-meter-container {

-  height: 26px;

-  max-width: 450px; }

-

-.strength-meter-gauge {

-  border-radius: 2px;

-  background-color: #d2d2d2;

-  height: 5px;

-  display: block;

-  position: relative;

-  outline: 1px solid transparent; }

-

-.strength-meter-gauge-fill {

-  height: 100%;

-  display: block;

-  border-radius: 2px;

-  text-indent: -9999px;

-  width: 0%;

-  border: 2px solid transparent; }

-

-.strength-meter-gauge-fill.strength-meter-animate {

-  transition: width 0.5s linear, background-color 0.5s linear; }

-

-.strength-meter-animate[style*="20"] {

-  background-color: #cf2a2a; }

-

-.strength-meter-animate[style*="20"] + .strength-meter-divider + .strength-meter-content:after {

-  content: "Unacceptable"; }

-

-.strength-meter-animate[style*="40"] {

-  background-color: #ea7400; }

-

-.strength-meter-animate[style*="40"] + .strength-meter-divider + .strength-meter-content:after {

-  content: "Weak"; }

-

-.strength-meter-animate[style*="60"] {

-  background-color: #ea7400; }

-

-.strength-meter-animate[style*="60"] + .strength-meter-divider + .strength-meter-content:after {

-  content: "Fair"; }

-

-.strength-meter-animate[style*="80"] {

-  background-color: #007a3e; }

-

-.strength-meter-animate[style*="80"] + .strength-meter-divider + .strength-meter-content:after {

-  content: "Good"; }

-

-.strength-meter-animate[style*="100"] {

-  background-color: #007a3e; }

-

-.strength-meter-animate[style*="100"] + .strength-meter-divider + .strength-meter-content:after {

-  content: "Excellent"; }

-

-.strength-meter-divider {

-  position: absolute;

-  top: 0;

-  bottom: 0;

-  left: 0;

-  right: 0;

-  display: flex;

-  overflow: hidden; }

-

-.strength-meter-divider span {

-  background: transparent;

-  display: block;

-  flex-grow: 1;

-  border-right: solid 1px #fff; }

-

-.strength-meter-divider span:first-child {

-  border-radius: 2px 0 0 2px; }

-

-.strength-meter-divider span + .strength-meter-divider span {

-  border-radius: 0; }

-

-.strength-meter-divider span:last-child {

-  border-radius: 0 2px 2px 0;

-  border-right: 0; }

-

-.strength-meter-content {

-  font-size: 14px;

-  line-height: 1;

-  padding-top: 7px;

-  position: absolute; }

-

-.strength-meter-content:before {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  content: "Password strength: "; }

-

-.strength-meter-content:after {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.strength-meter-container {

-  height: 26px;

-  min-width: 290px;

-  max-width: 450px; }

-

-.strength-meter-container .strength-meter-gauge {

-  border-radius: 2px;

-  background-color: #cccccc;

-  box-shadow: 0 1px 1px -1px #333 inset;

-  height: 5px;

-  display: block;

-  overflow: hidden;

-  position: relative; }

-

-.strength-meter-container > .strength-meter-gauge > .strength-meter-gauge-fill {

-  height: 100%;

-  box-shadow: 0 1px 1px -1px #999 inset;

-  display: block;

-  text-indent: -9999px;

-  width: 0%; }

-

-.strength-meter-container > .strength-meter-gauge > .strength-meter-gauge-fill.strength-meter-animate {

-  transition: width 0ms ease-out, background-color 0ms ease-in; }

-

-.strength-meter-container > .strength-meter-gauge > .strength-meter-divider {

-  position: absolute;

-  top: 0;

-  bottom: 0;

-  left: 0;

-  right: 0;

-  display: flex; }

-

-.strength-meter-container > .strength-meter-gauge > .strength-meter-divider span {

-  background: transparent;

-  display: block;

-  flex-grow: 1;

-  border-right: solid 1px #fff; }

-

-.strength-meter-container > .strength-meter-gauge > .strength-meter-divider span:last-child {

-  border-right: 0; }

-

-.strength-meter-container > .strength-meter-content {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 14px;

-  line-height: 1;

-  padding-top: 7px; }

-

-.strength-meter-container > .strength-meter-content:before {

-  content: none; }

-

-.strength-meter-container > .strength-meter-content > .strength-meter-content-state {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial; }

-

-.btn-switch-label {

-  display: flex;

-  align-items: center; }

-  .btn-switch-label:focus .btn-switch {

-    outline: 1px dotted #666;

-    outline-offset: 5px; }

-  .btn-switch-label input:focus .btn-switch {

-    outline: 1px dotted #666;

-    outline-offset: 5px; }

-  .btn-switch-label > span {

-    flex: 1; }

-

-.btn-switch {

-  background-color: #fff;

-  border: 1px solid #d2d2d2;

-  border-radius: 16px;

-  box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.15) inset, 0 5px 5px -5px rgba(0, 0, 0, 0.15);

-  height: 32px;

-  overflow: hidden;

-  position: relative;

-  width: 80px;

-  user-select: none; }

-  .btn-switch input[type="checkbox"] {

-    left: 0;

-    margin: 0;

-    opacity: 0;

-    position: absolute;

-    top: 0;

-    transition: none; }

-    .btn-switch input[type="checkbox"] + .switch-overlay .btn-slider-on .activo {

-      font: 0px/0 "Omnes-ECOMP-W02"; }

-    .btn-switch input[type="checkbox"] + .switch-overlay .btn-slider-on + .btn + .btn-slider-off .inactivo {

-      font: 0px/0 "Omnes-ECOMP-W02"; }

-  .btn-switch input:checked + .switch-overlay {

-    left: 0;

-    transition: all .3s linear .0s; }

-    .btn-switch input:checked + .switch-overlay .switch-handle {

-      background-color: #007a3e;

-      background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);

-      transition: background-color 0.3s linear 0s;

-      border: 1px solid transparent; }

-  .btn-switch input + .switch-overlay {

-    left: -48px;

-    transition: all .3s linear .0s; }

-    .btn-switch input + .switch-overlay .switch-handle {

-      background-color: #f2f2f2;

-      background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);

-      transition: background-color 0.3s linear 0s;

-      border: 1px solid #d2d2d2; }

-  .btn-switch input[disabled] + .switch-overlay {

-    left: 0;

-    width: 100% !important;

-    background-color: #d2d2d2;

-    color: #959595;

-    cursor: not-allowed !important; }

-    .btn-switch input[disabled] + .switch-overlay .btn-slider-on {

-      display: none; }

-    .btn-switch input[disabled] + .switch-overlay .activo {

-      display: none; }

-    .btn-switch input[disabled] + .switch-overlay .switch-handle {

-      display: none; }

-    .btn-switch input[disabled] + .switch-overlay .btn-slider-off {

-      left: 0;

-      text-align: center;

-      padding: 0; }

-  .btn-switch input[disabled]:checked + .switch-overlay {

-    left: 0;

-    width: 100% !important;

-    background-color: #fff; }

-    .btn-switch input[disabled]:checked + .switch-overlay .btn-slider-off {

-      display: none; }

-      .btn-switch input[disabled]:checked + .switch-overlay .btn-slider-off + .inactivo {

-        display: none; }

-    .btn-switch input[disabled]:checked + .switch-overlay .switch-handle {

-      display: none; }

-    .btn-switch input[disabled]:checked + .switch-overlay .btn-slider-on {

-      display: block;

-      text-align: center;

-      padding: 0;

-      color: #007a3e !important;

-      font-weight: bold; }

-    .btn-switch input[disabled]:checked + .switch-overlay .activo {

-      display: block;

-      text-align: center;

-      padding: 0;

-      color: #007a3e !important;

-      font-weight: bold; }

-  .btn-switch input[disabled]:checked + .btn-slider-on {

-    display: block; }

-  .btn-switch input[disabled] + .btn-slider-on + .switch-handle {

-    width: 100%;

-    margin: 0; }

-    .btn-switch input[disabled] + .btn-slider-on + .switch-handle + .btn-slider-off {

-      display: block; }

-  .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on {

-    display: none; }

-    .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on .activo {

-      border: medium none;

-      color: #666;

-      font: 16px/32px "Omnes-ECOMP-W02";

-      height: auto;

-      margin: 0 auto;

-      width: auto; }

-      .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on .activo:before {

-        display: none; }

-    .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off {

-      display: block;

-      padding: 0;

-      text-align: center;

-      color: #333333; }

-      .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off .inactivo {

-        border: medium none;

-        color: #666;

-        font: 16px/32px "Omnes-ECOMP-W02";

-        height: auto;

-        margin: 0 auto;

-        width: auto; }

-        .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off .inactivo:before {

-          display: none; }

-  .btn-switch input[type="checkbox"][disabled]:checked + .switch-overlay .btn-slider-on {

-    display: block;

-    padding: 0;

-    text-align: center;

-    color: #007a3e; }

-    .btn-switch input[type="checkbox"][disabled]:checked + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off {

-      display: none; }

-  .btn-switch input[type="checkbox"][disabled]:checked + .switch-overlay .activo {

-    color: #007a3e;

-    font-weight: bold; }

-

-.switch-overlay {

-  border-radius: 16px;

-  color: black !important;

-  font-size: 1.6rem;

-  height: 32px;

-  left: 0;

-  position: absolute;

-  top: -1px;

-  width: 126px;

-  overflow: hidden; }

-

-.btn-slider-on {

-  left: -1px;

-  text-align: left;

-  padding-left: 12px;

-  display: inline-block;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  height: 32px;

-  line-height: 32px;

-  position: absolute;

-  top: 1px;

-  width: 80px; }

-

-.btn-slider-off {

-  display: inline-block;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  height: 32px;

-  line-height: 32px;

-  position: absolute;

-  top: 1px;

-  width: 80px;

-  right: 1px;

-  text-align: right;

-  padding-right: 11px; }

-

-.switch-handle {

-  border-radius: 50%;

-  display: inline-block;

-  height: 26px;

-  left: 50px;

-  position: absolute;

-  top: 3px;

-  width: 26px; }

-

-.activo {

-  display: block;

-  font-size: 0.1px;

-  line-height: 40px;

-  overflow: hidden; }

-  .activo:before {

-    background-image: none;

-    border-left: 3px solid #007a3e;

-    content: " ";

-    height: 18px;

-    left: 22px;

-    margin: 2px auto;

-    position: absolute;

-    top: 5px;

-    width: 0; }

-

-.inactivo {

-  font-size: 0.1px;

-  line-height: 40px; }

-  .inactivo:before {

-    background-image: none;

-    border: 3px solid #959595;

-    border-radius: 100%;

-    content: " ";

-    display: block;

-    position: absolute;

-    top: 4px;

-    right: 3px;

-    height: 16px;

-    width: 16px; }

-

-table {

-  max-width: 100%;

-  background-color: transparent;

-  border-collapse: collapse;

-  border-spacing: 0;

-  width: 100%;

-  margin-bottom: 20px; }

-

-table caption {

-  text-align: left; }

-

-table thead th {

-  vertical-align: bottom; }

-

-table th,

-table td {

-  padding: 19px 20px;

-  line-height: 1;

-  font-size: 1.4rem;

-  text-align: left;

-  vertical-align: top;

-  word-wrap: break-word; }

-

-table th {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 1.6rem;

-  font-weight: normal;

-  color: #333333;

-  padding: 13px 20px; }

-

-table tbody td {

-  border-left: 1px solid #d2d2d2;

-  border-top: 1px solid #d2d2d2; }

-

-table tbody td:first-child {

-  border-left: none; }

-

-.tiny-accordion.iconleft.accordion-table-layout .toggle-header,

-.tiny-accordion.iconleft.accordion-table-layout .toggle-header + .accordion-content,

-.tiny-accordion.iconleft.accordion-table-layout .inactive-toggle-header {

-  padding: 0 0 0 50px; }

-

-.faux-table-cell,

-.inactive-toggle-header .faux-table-cell {

-  display: table-cell;

-  width: 100%;

-  padding: 13px 0 10px 0;

-  font-size: 16px;

-  color: #333333; }

-

-.accordion-content .faux-table-cell {

-  display: table-cell;

-  width: 100%;

-  padding: 0 0 10px 0; }

-

-.faux-table-cell:last-child {

-  text-align: right;

-  min-width: 100px;

-  max-width: 150px;

-  width: 1%;

-  background-color: #f2f2f2;

-  color: #333333;

-  font-size: 14px;

-  border-left: 1px solid #d2d2d2;

-  padding: 0 20px 0 10px; }

-

-.tiny-accordion.iconleft.accordion-table-layout .toggle-header.opened .hide-when-expanded {

-  opacity: 1; }

-

-.tiny-accordion.iconleft.accordion-table-layout .toggle-header.opened .hide-when-expanded {

-  opacity: 0;

-  transition: opacity .3s linear .2s; }

-

-@media (max-width: 767px) {

-  table th,

-  table td {

-    padding: 19px 10px; }

-  table th:first-child,

-  table td:first-child {

-    padding: 19px 15px; } }

-

-.data-row-list ul > li {

-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important; }

-

-table {

-  border-bottom: 1px solid #d2d2d2; }

-

-table th,

-table td {

-  padding: 15px 15px 10px; }

-

-.data-row .col-1 {

-  white-space: nowrap;

-  padding: 15px 15px 0 15px;

-  position: relative;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.4rem;

-  border-top: 1px solid #d2d2d2; }

-

-.data-row.has-button .col-1 {

-  padding: 0; }

-

-.complex-table .data-row .col-1 {

-  color: #0568ae;

-  cursor: pointer; }

-

-.data-row.opened {

-  box-shadow: 0 -2px 0 0 #d2d2d2; }

-

-.data-row.opened td,

-.data-row.opened th {

-  border-left: 1px solid transparent;

-  border-bottom: 1px solid transparent; }

-

-.data-row.opened + .data-row-list {

-  box-shadow: 0 1px 0 0 #d2d2d2; }

-

-.data-row.opened + .data-row-list > td {

-  padding-top: 0; }

-

-.data-row.opened + .data-row-list + .data-row.opened {

-  box-shadow: 0 -1px 0 0 #d2d2d2; }

-

-.data-row button {

-  background-color: transparent;

-  border: medium none;

-  border-radius: 0;

-  color: #0568ae;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.4rem;

-  left: 0;

-  margin: 0;

-  padding: 12px 15px 7px;

-  position: relative;

-  text-align: left;

-  top: 0;

-  vertical-align: middle; }

-

-.data-row button:focus {

-  outline: 1px dotted black; }

-

-.data-row .col-1 i {

-  top: -1px;

-  margin-right: 10px;

-  display: inline-block !important; }

-

-.data-row-list th:first-child {

-  background-color: inherit !important;

-  border-top: none;

-  padding: 0 15px 15px;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.4rem; }

-

-.data-row-list ul {

-  margin: 0 0 0 30px; }

-

-.data-row-list ul > li:before {

-  display: none; }

-

-.data-row-list ul > li {

-  /* background-image in tables.less */

-  background-position: left 13px;

-  background-repeat: repeat-x;

-  background-size: 4px 1px;

-  display: table;

-  padding-left: 0;

-  width: 100%; }

-

-.data-row-list li div {

-  display: table-cell;

-  background-color: white;

-  float: left;

-  text-align: left;

-  padding-left: 0;

-  padding-right: 7px; }

-

-.data-row-list li div + div {

-  float: right;

-  text-align: right;

-  padding-right: 0;

-  padding-left: 7px; }

-

-.complex-table td:nth-child(1),

-.complex-table td:nth-child(2),

-.complex-table td:nth-child(3),

-.complex-table td:nth-child(4),

-.complex-table td:nth-child(5),

-.complex-table td:nth-child(6),

-.complex-table td:nth-child(7),

-.complex-table td:nth-child(8),

-.complex-table td:nth-child(9) {

-  white-space: nowrap; }

-

-th:nth-child(8) {

-  word-wrap: break-word;

-  word-spacing: 0; }

-

-.align-col-right {

-  text-align: right; }

-

-.complex-table th:not(:first-child),

-.complex-table td:not(:first-child) {

-  text-align: right; }

-

-.striped tbody > tr td {

-  background-color: transparent !important; }

-

-.striped tbody > tr.data-row.odd,

-.striped tbody > tr.data-row.odd + .data-row-list,

-.striped tbody > tr.data-row.odd + .data-row-list li div {

-  background-color: #f2f2f2 !important; }

-

-.striped tbody > tr:not('.data-row'):nth-child(even) {

-  background-color: #f2f2f2; }

-

-.b2b-table-div .selectWrap {

-  width: 290px;

-  position: relative;

-  left: 10px;

-  display: inline-table;

-  margin-bottom: 0px; }

-

-.b2b-external-sort-div {

-  float: right;

-  padding-bottom: 25px; }

-

-.b2b-external-sort-div .sortButton {

-  font-size: 36px;

-  border: 1px solid #ccc;

-  background: #FFF;

-  border-radius: 6px; }

-

-.b2b-external-sort-label {

-  padding-bottom: 10px; }

-

-.b2b-external-sort-div a:hover {

-  cursor: pointer; }

-

-.b2b-external-sort-div a:hover, .b2b-external-sort-div a:focus {

-  text-decoration: none; }

-

-.b2b-external-sort-label label {

-  position: relative;

-  left: 10px; }

-

-.tablesorter-default .tablesorter-header.sorter-false .tablesorter-header-inner {

-  background: 0 0;

-  cursor: default; }

-

-.tablesorter-default .tablesorter-header .tablesorter-header-inner {

-  /*  background-image: url(images/tables/upanddown.png);*/

-  background-position: center right;

-  background-repeat: no-repeat;

-  cursor: pointer;

-  white-space: normal;

-  display: inline-block;

-  vertical-align: baseline;

-  zoom: 1;

-  *display: inline;

-  *vertical-align: auto;

-  /*  padding: 0 24px 0 0;*/ }

-

-.tablesorter-default .tablesorter-header.sorter-false .tablesorter-header-inner {

-  padding: 0; }

-

-.tablesorter-default .tablesorter-header.tablesort-sortable .tablesorter-header-inner span {

-  margin-right: 24px;

-  display: inline-block; }

-

-/*

-.tablesorter-default thead .headerSortUp .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerAsc .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerSortUp .tablesorter-header-inner {

-  background-image: url(images/tables/up.png);

-}

-

-.tablesorter-default thead .headerSortDown .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerDesc .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerSortDown .tablesorter-header-inner {

-  background-image: url(images/tables/down.png);

-}

-*/

-.tablesorter-default thead .headerSortUp .tablesorter-header-inner,

-.tablesorter-default thead .tablesorter-headerAsc .tablesorter-header-inner,

-.tablesorter-default thead .tablesorter-headerSortUp .tablesorter-header-inner,

-.tablesorter-default thead .headerSortDown .tablesorter-header-inner,

-.tablesorter-default thead .tablesorter-headerDesc .tablesorter-header-inner,

-.tablesorter-default thead .tablesorter-headerSortDown .tablesorter-header-inner {

-  padding-right: 0;

-  line-height: 16px; }

-

-.tablesorter-default thead .headerSortUp .tablesorter-header-inner:after,

-.tablesorter-default thead .tablesorter-headerAsc .tablesorter-header-inner:after,

-.tablesorter-default thead .tablesorter-headerSortUp .tablesorter-header-inner:after {

-  font-family: 'icoPrimary' !important;

-  speak: none;

-  font-style: normal;

-  font-size: 24px;

-  font-weight: normal;

-  font-variant: normal;

-  text-transform: none;

-  line-height: 14px;

-  -webkit-font-smoothing: antialiased;

-  -moz-osx-font-smoothing: grayscale;

-  -moz-user-select: none;

-  -ms-user-select: none;

-  -webkit-user-select: none;

-  user-select: none;

-  content: "\ea3c";

-  /*    position: relative;*/

-  position: absolute;

-  text-decoration: inherit;

-  display: inline-block;

-  transform: rotate(180deg);

-  margin-left: -22px;

-  margin-top: 2px; }

-

-.tablesorter-default thead .headerSortDown .tablesorter-header-inner:after,

-.tablesorter-default thead .tablesorter-headerDesc .tablesorter-header-inner:after,

-.tablesorter-default thead .tablesorter-headerSortDown .tablesorter-header-inner:after {

-  font-family: 'icoPrimary' !important;

-  speak: none;

-  font-style: normal;

-  font-size: 24px;

-  font-weight: normal;

-  font-variant: normal;

-  text-transform: none;

-  line-height: 14px;

-  -webkit-font-smoothing: antialiased;

-  -moz-osx-font-smoothing: grayscale;

-  -moz-user-select: none;

-  -ms-user-select: none;

-  -webkit-user-select: none;

-  user-select: none;

-  content: "\ea3c";

-  /*    position: relative;*/

-  position: absolute;

-  text-decoration: inherit;

-  display: inline-block;

-  margin-left: -22px;

-  margin-top: 2px; }

-

-.tablesorter-search-highlight {

-  font-weight: 700; }

-

-.tablesorter-headerRow th:focus {

-  outline: thin dotted #666;

-  outline-offset: -1px; }

-

-.b2b-table-message {

-  font-family: "Omnes-ECOMP-W02", Arial; }

-  .b2b-table-message .b2b-magnify-glass {

-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20enable-background%3D%22new%200%200%2036%2036%22%3E%3Cpath%20d%3D%22M27.847%208.26c-1.805-1.803-4.202-2.795-6.751-2.795-2.548%200-4.945.993-6.749%202.796-1.803%201.803-2.796%204.2-2.796%206.75%200%201.879.543%203.681%201.576%205.242l-7.059%207.059c-.357.356-.554.831-.554%201.336-.001.505.196.98.554%201.337.357.356.832.552%201.336.552.503%200%20.977-.196%201.336-.553l7.047-7.048c1.576%201.062%203.402%201.622%205.309%201.622%202.55%200%204.948-.993%206.751-2.796%201.803-1.804%202.796-4.201%202.796-6.751%200-2.549-.993-4.947-2.796-6.751zm-6.761.96c3.186%200%205.778%202.592%205.778%205.778%200%203.186-2.592%205.778-5.778%205.778-3.186%200-5.778-2.592-5.778-5.778%200-3.185%202.592-5.778%205.778-5.778z%22%20fill%3D%22%23767676%22%2F%3E%3C%2Fsvg%3E");

-    background-repeat: no-repeat;

-    background-position: center;

-    height: 50px; }

-  .b2b-table-message .b2b-alert {

-    font-size: 50px; }

-  .b2b-table-message .b2b-loading-dots {

-    font-size: 50px;

-    margin-bottom: 20px; }

-  .b2b-table-message .b2b-message {

-    text-align: center;

-    padding-bottom: 45px;

-    padding-top: 40px;

-    border-style: solid;

-    border-width: 1px;

-    border-top: none;

-    padding-bottom: 45px;

-    border-color: #d2d2d2;

-    width: 100%;

-    min-height: 220px; }

-  .b2b-table-message .b2b-error-title {

-    font-family: "Omnes-ECOMP-W02", Arial;

-    color: #444444;

-    line-height: 26px;

-    margin-top: 10px; }

-  .b2b-table-message .b2b-message-title {

-    color: #444;

-    font-family: "Omnes-ECOMP-W02", Arial; }

-

-.b2b-table-scrollbar {

-  border: 1px solid;

-  width: 651px; }

-  .b2b-table-scrollbar .b2b-table-inner-container {

-    width: 650px;

-    padding-left: 150px;

-    overflow-x: scroll; }

-  .b2b-table-scrollbar th:first-child {

-    background-color: #FFFFFF; }

-  .b2b-table-scrollbar td:first-child {

-    background-color: #FFFFFF;

-    border-top: 1px solid #cccccc;

-    border-right: 1px solid #cccccc;

-    margin-top: -0.5px; }

-  .b2b-table-scrollbar tr {

-    th: nth-child(2), td; }

-    .b2b-table-scrollbar tr :nth-child(2) {

-      border-left: none; }

-  .b2b-table-scrollbar tr:last-child > td:first-child {

-    border-bottom: 1px solid #cccccc; }

-

-.b2b-scrollbar-arrow-left {

-  float: left;

-  margin: 10px; }

-

-.b2b-scrollbar-arrow-right {

-  float: right;

-  clear: right;

-  margin: 10px; }

-  .b2b-scrollbar-arrow-right.btn-arrow .btn {

-    margin-right: 0; }

-

-.b2b-table-scrollbar ::-webkit-scrollbar {

-  height: 10px; }

-

-.b2b-table-scrollbar ::-webkit-scrollbar-thumb {

-  background: #666666;

-  border-radius: 5px; }

-

-.tabs {

-  margin-left: 0;

-  margin-bottom: 20px;

-  list-style: none; }

-

-.tabs > li > a {

-  display: block; }

-

-.tabs > li > a:hover,

-.tabs > li > a:focus {

-  text-decoration: none;

-  background-color: #d2d2d2; }

-

-.tabs > .pull-right {

-  float: right; }

-

-.tabs:before,

-.tabs:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.tabs:after {

-  clear: both; }

-

-.tabs > li {

-  float: left; }

-

-.tabs > li > a {

-  padding-right: 20px;

-  padding-left: 20px;

-  margin-right: 3px;

-  line-height: 16px; }

-

-.tabs {

-  margin: 0; }

-

-.tabs > li {

-  margin-bottom: -1px; }

-

-.tabs > li:first-child {

-  margin-left: 20px; }

-

-.tabs > li > a {

-  padding: 12px 20px;

-  border: 1px solid #d2d2d2;

-  border-radius: 6px 6px 0 0;

-  background-color: #f2f2f2;

-  color: #5a5a5a;

-  border-color: #d2d2d2; }

-

-.tabs > li > a {

-  margin-right: 6px; }

-

-.tabs > li > a,

-.tabs > li > a:hover,

-.tabs > li > a:focus {

-  background-image: none;

-  background-color: #ffffff;

-  color: #5a5a5a;

-  border-color: #d2d2d2;

-  border-bottom: 1px solid transparent;

-  cursor: pointer; }

-

-.tabs.tabs-justified,

-.tabs.promo-tabs {

-  width: 100%;

-  border-bottom: 0;

-  margin-bottom: -1px; }

-

-.tabs.tabs-justified > li,

-.tabs.promo-tabs > li {

-  display: table-cell;

-  float: none;

-  width: 1%;

-  border-left: 1px solid #d2d2d2; }

-

-.tabs.tabs-justified > li.active,

-.tabs.promo-tabs > li.active {

-  position: relative;

-  z-index: 1000; }

-

-.tabs.tabs-justified > li > a {

-  padding-right: 5px;

-  padding-left: 5px; }

-

-.tabs.tabs-justified > li > a,

-.tabs.promo-tabs > li > a {

-  text-align: center; }

-

-.tabs.promo-tabs > li > a {

-  padding: 0;

-  margin: 0;

-  border-radius: 0;

-  border: none;

-  color: #0568ae;

-  font-size: 1.2rem;

-  text-align: center;

-  padding: 6px 10px 10px;

-  border-top: 4px solid #e6e6e6;

-  filter: none;

-  border-bottom: 1px solid #d2d2d2;

-  background-color: #f9f9f9; }

-

-.tabs > li:last-child > a {

-  margin-right: 0; }

-

-.tabs.promo-tabs > li.active > a {

-  color: #333333;

-  border-top: 4px solid #ea7400;

-  border-bottom-color: white;

-  background-color: #fff !important;

-  filter: none;

-  cursor: default; }

-

-.tabs.promo-tabs > li:first-child {

-  border-left: none; }

-

-.tabs.promo-tabs > li > a img {

-  max-width: inherit;

-  max-height: 39px;

-  margin: 0 auto 5px auto;

-  display: block; }

-

-.tabbable:before,

-.tabbable:after {

-  display: table;

-  content: "";

-  line-height: 0; }

-

-.tabbable:after {

-  clear: both; }

-

-.tab-content {

-  overflow: auto;

-  border: 1px solid #e6e6e6; }

-

-.tabs.promo-tabs + .tab-content {

-  border: none;

-  border-bottom: 1px solid #e6e6e6; }

-

-.tab-content > .tab-pane {

-  padding: 10px 15px; }

-

-.tab-content.noborder {

-  border: none; }

-

-.tab-content.noborder > .tab-pane {

-  padding: 0; }

-

-.tab-content > .tab-pane {

-  display: none; }

-

-.tab-content > .active {

-  display: block; }

-

-.tabs.promo-tabs > li > a {

-  font-size: 2.0rem;

-  height: 70px;

-  padding: 20px 20px 24px;

-  background-color: #FFFFFF;

-  border-top: 5px solid #FFFFFF;

-  white-space: nowrap; }

-

-.tabs.promo-tabs > li.active > a {

-  border-top: 5px solid #0574ac; }

-

-.tabs.promo-tabs > li > a:hover {

-  color: #333333; }

-

-.tabs.promo-tabs > li {

-  width: auto; }

-

-.tabs > li[disabled="disabled"] > a:hover {

-  cursor: not-allowed; }

-

-.b2b-tags {

-  background-color: #f2f2f2;

-  -webkit-transition: all .3s ease-out;

-  -moz-transition: all .3s ease-out;

-  transition: all .3s ease-out;

-  margin: 3px 5px 3px 0;

-  padding: 2px 15px;

-  border-radius: 6px;

-  border: 1px solid #c9c9c9;

-  display: inline-block; }

-  .b2b-tags .tags__item {

-    font-size: 14px;

-    vertical-align: baseline;

-    zoom: 1;

-    color: #333; }

-    .b2b-tags .tags__item i {

-      color: #0574ac;

-      font-size: 14px;

-      font-weight: bold;

-      margin-left: 10px; }

-      .b2b-tags .tags__item i:hover {

-        cursor: pointer; }

-    .b2b-tags .tags__item i:focus {

-      outline: thin dotted #666; }

-    .b2b-tags .tags__item:last-child {

-      margin-right: 0; }

-    .b2b-tags .tags__item:hover {

-      text-decoration: none; }

-    .b2b-tags .tags__item:focus {

-      outline: 1px dotted #666; }

-

-.tooltip-size-control {

-  display: block; }

-

-.tooltip {

-  display: inline-block;

-  height: 20px;

-  vertical-align: middle;

-  margin: 1px 0 0 7px; }

-

-p .tooltip {

-  margin: -3px 7px 0 0; }

-

-label .tooltip {

-  margin: 1px 0 0 7px; }

-

-.tooltip .icon-primary-tooltip {

-  background: none;

-  border: none;

-  display: inline-block;

-  font-size: 20px;

-  height: 20px;

-  margin: 0;

-  position: relative;

-  width: 20px; }

-

-.tooltip .icon-primary-tooltip:before {

-  top: 0; }

-

-.tooltip .icon-primary-tooltip:focus {

-  text-decoration: none;

-  outline: 1px dotted black; }

-

-.tooltip.active .icon-primary-tooltip:focus {

-  outline: none; }

-

-.tooltip .arrow {

-  display: none;

-  border-color: transparent;

-  border-style: solid;

-  background-color: #0568ae;

-  height: 20px;

-  width: 20px;

-  position: absolute;

-  top: 0;

-  right: 0;

-  bottom: 0;

-  left: 0;

-  opacity: 0;

-  transform: rotate(45deg); }

-

-.tooltip.active .icon-primary-tooltip[data-placement="top"] .arrow {

-  display: block;

-  bottom: 32px;

-  top: auto;

-  border-width: 0 1px 1px 0; }

-

-.tooltip.active .icon-primary-tooltip[data-placement="bottom"] .arrow {

-  border-width: 1px 0 0 1px;

-  display: block;

-  bottom: -33px;

-  top: auto; }

-

-.tooltip.active .arrow {

-  opacity: 1; }

-

-.tooltip .closingtooltip {

-  display: block; }

-

-.tooltip.active .closingtooltip {

-  display: none; }

-

-.tooltip-wrapper {

-  position: absolute;

-  margin-top: 20px;

-  left: 15px;

-  right: 15px;

-  display: none;

-  opacity: 0;

-  z-index: 1010;

-  text-align: left; }

-

-.helpertext {

-  background-color: #0568ae;

-  border: 1px solid transparent;

-  border-radius: 6px;

-  color: #fff;

-  display: none;

-  margin: 0;

-  padding: 25px;

-  position: relative;

-  text-align: left;

-  width: 100%;

-  top: 0;

-  z-index: 1009; }

-

-.tooltip .helpertext {

-  position: absolute; }

-

-.tooltip.active .icon-primary-tooltip[data-placement="bottom"] + .tooltip-wrapper .helpertext {

-  bottom: inherit;

-  top: 19px; }

-

-.tooltip.active .icon-primary-tooltip[data-placement="top"] + .tooltip-wrapper .helpertext {

-  top: inherit;

-  bottom: 38px; }

-

-.tooltip.active .tooltip-wrapper {

-  opacity: 1;

-  display: block;

-  margin-top: 0; }

-

-.tooltip.active .tooltip-wrapper .helpertext {

-  display: block; }

-

-.tooltip-onclick .btn.icon-primary-tooltip {

-  border: medium none;

-  box-shadow: none;

-  color: #0568ae;

-  font-size: 20px;

-  height: 34px;

-  line-height: 36px;

-  margin: 0;

-  min-width: 50px;

-  padding: 0;

-  position: absolute;

-  right: 0;

-  top: 0; }

-

-.tooltip-onclick .icon-primary-tooltip:before {

-  display: inline;

-  position: relative; }

-

-.tooltip-onclick textarea + .reset-field + .icon-primary-tooltip {

-  top: 4px;

-  right: 5px;

-  min-width: 40px; }

-

-.tooltip-onclick.active .helpertext:before,

-.tooltip-onfocus.active .helpertext:before {

-  background-color: #0568ae;

-  border-color: transparent;

-  border-style: solid;

-  border-width: 1px 1px 0 0;

-  content: "";

-  display: block;

-  height: 15px;

-  left: 17px;

-  margin: 0;

-  position: absolute;

-  top: -7px;

-  transform: rotate(-45deg);

-  width: 15px; }

-

-.tooltip-onclick.active .helpertext {

-  display: block;

-  opacity: 1;

-  margin: 14px 0 0; }

-

-.tooltip-onclick.active .helpertext:before {

-  left: inherit;

-  right: 18px; }

-

-.tooltip-onclick .reset-field {

-  right: 37px; }

-

-.tooltip-onclick .reset-field:before {

-  position: relative;

-  top: -1px; }

-

-.tooltip-onfocus.active .helpertext {

-  display: block;

-  margin: 14px 0 10px 0; }

-

-.popover-title {

-  display: block;

-  font-size: 14px;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-weight: bold;

-  margin-bottom: 8px;

-  white-space: normal; }

-

-.popover-content {

-  display: block;

-  font-size: 12px;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  line-height: 1.5rem;

-  white-space: normal; }

-

-.popover-content span,

-.popover-content p {

-  line-height: 1.5rem; }

-

-.popover-content p:last-child {

-  margin-bottom: 0; }

-

-.tooltip .tooltip-element {

-  position: relative; }

-

-.tooltip .icon-primary-tooltip:hover {

-  text-decoration: none; }

-

-.tooltip.active .tooltip-element[data-placement="top"] .arrow {

-  display: block;

-  bottom: 32px;

-  top: auto; }

-

-.tooltip.active .tooltip-element[data-placement="bottom"] .arrow {

-  display: block;

-  border-color: transparent transparent #0574ac;

-  bottom: -33px;

-  top: auto; }

-

-.tooltip.active .tooltip-element[data-placement="bottom"] + .tooltip-wrapper .helpertext {

-  bottom: inherit;

-  top: 19px; }

-

-.tooltip.active .tooltip-element[data-placement="top"] + .tooltip-wrapper .helpertext {

-  top: inherit;

-  bottom: 38px; }

-

-.b2b-tree {

-  padding: 0 10px 0 10px;

-  width: 320px; }

-  .b2b-tree ul {

-    list-style: none;

-    list-style-type: none; }

-  .b2b-tree a {

-    display: block;

-    padding: 0 0 5px 30px;

-    line-height: 22px;

-    margin-left: -10px;

-    font-size: 1.4rem;

-    outline-offset: -1px; }

-  .b2b-tree li:focus {

-    outline: none; }

-    .b2b-tree li:focus > a {

-      outline: thin dotted #666;

-      outline-offset: -1px; }

-  .b2b-tree ul li {

-    border-left: 1px solid #ccc; }

-    .b2b-tree ul li.bg > a {

-      color: #333;

-      background-image: url("../style/images/treebg.png"); }

-    .b2b-tree ul li .b2b-tree-tooltip {

-      display: none;

-      position: absolute;

-      top: -25px;

-      left: 100%;

-      white-space: nowrap;

-      margin-left: 10px;

-      z-index: 1010;

-      font-family: "Omnes-ECOMP-W02", Arial;

-      font-size: 12px; }

-    .b2b-tree ul li .b2b-tree-tooltip-content {

-      background-color: #0568ae;

-      margin-left: 9px;

-      border-radius: 6px;

-      color: #fff;

-      padding: 25px; }

-    .b2b-tree ul li .b2b-tree-arrow-left {

-      width: 0;

-      height: 0;

-      border-top: 10px solid transparent;

-      border-bottom: 10px solid transparent;

-      border-right: 10px solid #0568ae;

-      position: absolute;

-      top: 25px; }

-    .b2b-tree ul li.activeTooltip > a .b2b-tree-tooltip {

-      display: block; }

-  .b2b-tree ul ul {

-    padding: 0 0 0 20px; }

-  .b2b-tree ul > li {

-    position: relative;

-    line-height: 18px; }

-  .b2b-tree a > span.b2b-tree-node-icon {

-    background-color: #FFF;

-    display: inline;

-    margin: 0;

-    padding: 0;

-    position: absolute;

-    left: -11px;

-    top: 0;

-    line-height: 14px;

-    width: 11px; }

-    .b2b-tree a > span.b2b-tree-node-icon > i {

-      font-size: 20px; }

-  .b2b-tree a:only-child {

-    color: #0574ac; }

-    .b2b-tree a:only-child > span.b2b-tree-node-icon {

-      left: -11px;

-      border-radius: 50%;

-      line-height: 7px;

-      top: 0; }

-      .b2b-tree a:only-child > span.b2b-tree-node-icon > i {

-        background-color: inherit;

-        background: #fff; }

-  .b2b-tree a > span.b2b-tree-node-icon > i.icon-primary-circle {

-    background-color: inherit;

-    background: #fff;

-    font-size: 10px; }

-  .b2b-tree a.b2b-locked-node:after {

-    content: "\ec58";

-    float: right;

-    font-family: 'icoSecurityalerts' !important; }

-  .b2b-tree a:hover .b2b-locked-node:after {

-    text-decoration: none; }

-  .b2b-tree ul li:first-child > a:only-child > span.b2b-tree-node-icon {

-    left: -11px;

-    border-radius: 50%;

-    line-height: 12px; }

-  .b2b-tree ul li:last-child > a:only-child > span.b2b-tree-node-icon {

-    height: 27px;

-    background-color: #fff; }

-  .b2b-tree li a + ul {

-    height: 0;

-    overflow: hidden; }

-  .b2b-tree li a.active + ul {

-    height: auto;

-    overflow: visible; }

-  .b2b-tree li a.grp {

-    font-family: "Omnes-ECOMP-W02-Italic", Arial; }

-    .b2b-tree li a.grp.active {

-      color: #333; }

-  .b2b-tree span.end {

-    left: -6px !important;

-    top: 5px !important; }

-  .b2b-tree span.first-link {

-    width: 3px !important;

-    height: 15px !important;

-    top: 0px !important;

-    left: -2px !important;

-    background: #fff; }

-

-.b2b-tree-checkbox {

-  padding: 0 10px 0 10px;

-  width: 320px; }

-  .b2b-tree-checkbox ul {

-    list-style: none;

-    list-style-type: none; }

-  .b2b-tree-checkbox a {

-    display: block;

-    padding: 0 0 5px 30px;

-    line-height: 22px;

-    margin-left: -10px;

-    font-size: 14px;

-    outline-offset: -1px; }

-  .b2b-tree-checkbox li:focus {

-    outline: none; }

-    .b2b-tree-checkbox li:focus > a {

-      outline: thin dotted #666;

-      outline-offset: -1px; }

-  .b2b-tree-checkbox ul li {

-    border-left: 1px solid #ccc; }

-  .b2b-tree-checkbox ul ul {

-    padding: 0 0 0 20px; }

-  .b2b-tree-checkbox ul > li {

-    position: relative;

-    line-height: 18px; }

-  .b2b-tree-checkbox a > span.nodeIcon {

-    background-color: #FFF;

-    display: inline;

-    margin: 0;

-    padding: 0;

-    position: absolute;

-    left: -11px;

-    top: 0;

-    line-height: 14px;

-    width: 11px; }

-    .b2b-tree-checkbox a > span.nodeIcon > i {

-      font-size: 20px; }

-    .b2b-tree-checkbox a > span.nodeIcon.end {

-      margin-top: 10px; }

-  .b2b-tree-checkbox a:only-child {

-    color: #0574ac; }

-    .b2b-tree-checkbox a:only-child > span.nodeIcon {

-      left: -11px;

-      border-radius: 50%;

-      line-height: 7px;

-      top: 0; }

-      .b2b-tree-checkbox a:only-child > span.nodeIcon > i {

-        background-color: inherit;

-        background: #fff; }

-  .b2b-tree-checkbox a > span.nodeIcon > i.icon-primary-circle {

-    background-color: inherit;

-    background: #fff;

-    font-size: 10px; }

-  .b2b-tree-checkbox ul li:first-child > a:only-child > span {

-    left: -11px;

-    border-radius: 50%;

-    line-height: 12px;

-    top: 0px; }

-  .b2b-tree-checkbox ul li:first-child > a:only-child > span.end {

-    margin-top: 0px; }

-  .b2b-tree-checkbox ul li:first-child > a:only-child > span i.icon-primary-circle {

-    top: 8px; }

-  .b2b-tree-checkbox ul li:last-child > a:only-child > span {

-    height: 34px;

-    background-color: #fff; }

-  .b2b-tree-checkbox li a + ul {

-    height: 0;

-    overflow: hidden; }

-  .b2b-tree-checkbox li a.active + ul {

-    height: auto; }

-  .b2b-tree-checkbox li a.grp {

-    font-family: "Omnes-ECOMP-W02-Italic", Arial; }

-  .b2b-tree-checkbox span.end {

-    left: -6px !important; }

-  .b2b-tree-checkbox .checkbox {

-    margin-bottom: 0px;

-    margin-top: 2px;

-    font-size: 14px; }

-    .b2b-tree-checkbox .checkbox input:indeterminate + .skin:after {

-      content: "\2014";

-      padding-left: 2px;

-      font-family: inherit !important;

-      line-height: inherit !important; }

-  .b2b-tree-checkbox span.first-link {

-    width: 3px !important;

-    height: 15px !important;

-    top: 0px !important;

-    left: -2px !important;

-    background: #fff; }

-

-.b2b-widget-window {

-  width: 147px;

-  right: 5px;

-  top: 60px;

-  position: absolute;

-  border: 1px solid #ccc;

-  background-color: #fff;

-  border-radius: 8px;

-  z-index: 1000; }

-  .b2b-widget-window li {

-    margin: 15px; }

-

-.b2b-widget-container {

-  background-color: #fff;

-  border-radius: 8px;

-  border: 1px solid #ccc;

-  position: relative; }

-  .b2b-widget-container .b2b-widget-header {

-    font-family: "Omnes-ECOMP-W02", Arial;

-    color: #333;

-    height: 55px;

-    padding-left: 15px;

-    padding-top: 19px; }

-    .b2b-widget-container .b2b-widget-header .header {

-      font-size: 18px; }

-  .b2b-widget-container .b2b-widget-header-icons {

-    font-size: 16px;

-    color: #0574ac; }

-

-.b2b-widget-header-icons button {

-  border: none;

-  background: transparent;

-  color: #0574ac; }

-  .b2b-widget-header-icons button:focus {

-    outline-style: solid;

-    outline-width: 1px;

-    outline-color: #0574ac; }

-  .b2b-widget-header-icons button:first-child {

-    margin-right: 0px; }

-

-.b2b-widget-container .b2b-widget-content {

-  height: 325px;

-  margin: 0;

-  padding: 20px;

-  position: relative;

-  border-top: 1px solid #ccc; }

-

-.b2b-widget-content .form-row:first-child {

-  margin-top: 0; }

-

-.b2b-widget-header-icons button.icoControls-gear:focus, .b2b-widget-header-icons button.icon-primary-close:focus {

-  outline: thin dotted #666; }

-

-.b2b-widget-header .icon-primary-close:before {

-  content: '-';

-  display: inline-block;

-  margin: 0;

-  padding: 0;

-  outline: none; }

-

-.b2b-widget-window .arrow_box {

-  background: #fff;

-  border: 1px solid #ccc; }

-

-.b2b-widget-window.arrow_box:after, .b2b-widget-window.arrow_box:before {

-  bottom: 100%;

-  left: 75%;

-  border: solid transparent;

-  content: " ";

-  height: 0;

-  width: 0;

-  position: absolute;

-  pointer-events: none; }

-

-.b2b-widget-window.arrow_box:after {

-  border-color: rgba(255, 255, 255, 0);

-  border-bottom-color: #fff;

-  border-width: 10px;

-  margin-left: 1px; }

-

-.b2b-widget-window.arrow_box:before {

-  border-color: rgba(204, 204, 204, 0);

-  border-bottom-color: #ccc;

-  border-width: 11px;

-  margin-left: 0px; }

-

-/************************** Overrides for Filters ***************************/

-.filter-container .filter-header h2 {

-  line-height: 1 !important;

-  margin: 0 !important; }

-

-.filter-container .icon-primary-spinner:before {

-  content: none; }

-

-.filter-container .fixed-230-subnav {

-  margin: 10px !important;

-  width: inherit !important; }

-

-.filter-container .unlinked:focus {

-  outline: thin dotted #666 !important; }

-

-.filter-container .unlinked.active {

-  color: inherit !important; }

-

-.filter-container .fixed-230-subnav a > i {

-  background: none; }

-

-.filter-container .fixed-230-subnav ul {

-  margin: 0 0 10px 10px; }

-

-/************************** Overrides for Filters ***************************/

-.row .filter-container {

-  background-color: #fff; }

-

-.filter-header {

-  overflow: hidden;

-  padding: 20px 0;

-  position: relative; }

-

-.filter-header h2 {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 2.4rem;

-  margin-bottom: 0; }

-

-.filter-selected {

-  border-top: 1px solid #ccc;

-  padding-top: 20px; }

-

-.filter-selected > span {

-  font-size: 1.3rem;

-  text-transform: uppercase; }

-

-.filter-selected > a.clear-all-filters {

-  float: right;

-  font-size: 1.4rem; }

-

-.filter-selected > span,

-.filter-selected > a.clear-all-filters {

-  font-family: Omnes-ECOMP-W02-Medium, Arial; }

-

-.filter-selected-group {

-  padding-top: 15px; }

-

-.filter-selected-badge {

-  background-color: #f2f2f2;

-  border-radius: 15px;

-  display: inline-block;

-  font-size: 1.4rem;

-  margin-bottom: 10px;

-  padding: 0 0 0 12px; }

-

-.filter-selected-badge .icoControls-optionsoff {

-  background: transparent none repeat scroll 0 0;

-  border: medium none;

-  font-size: 2.5em;

-  margin: 0;

-  padding: 0; }

-

-.filters .fixed-230-subnav > ng-transclude > div:first-child {

-  border-top: 1px solid #ccc; }

-

-.filters .fixed-230-subnav > ng-transclude > div {

-  border-bottom: 1px solid #ccc; }

-

-.filter-results {

-  align-items: center;

-  border-bottom: 1px solid #ccc;

-  display: flex;

-  flex-wrap: wrap;

-  height: 50px;

-  -webkit-justify-content: space-between;

-  -ms-flex-pack: justify;

-  justify-content: space-between; }

-

-.filter-results-sortby > span {

-  text-transform: uppercase; }

-

-.filter-results-view .icon-primary-content-gridguide {

-  font-size: 2em;

-  margin-right: 0; }

-

-.filter-container .fixed-230-subnav > ng-transclude > div > a {

-  font-size: 1.8rem;

-  margin: 0;

-  padding: 15px 20px 15px 0;

-  color: #0574ac !important;

-  cursor: pointer !important;

-  font-family: "Omnes-ECOMP-W02", Arial !important;

-  outline-offset: inherit !important;

-  position: relative;

-  height: auto;

-  width: auto; }

-

-.filter-container .fixed-230-subnav a > i {

-  right: 0;

-  top: 15px; }

-

-.filter-container .fixed-230-subnav .icon-primary-collapsed:before, .filter-container .fixed-230-subnav .icon-primary-expanded:before {

-  float: right; }

-

-.filter-container .fixed-230-subnav ul.collapse {

-  position: inherit;

-  transition: height 0.5s ease;

-  height: 0;

-  overflow: hidden; }

-

-.filter-container .checkbox .icon-primary-spinner {

-  height: 24px;

-  position: absolute;

-  width: 24px; }

-

-.fixed-230-subnav.affix {

-  margin: -28px 0 0; }

-

-#nav-menu .b2b-menu,

-#nav-menu .fixed-230-subnav {

-  margin: 0; }

-

-.b2b-menu > li,

-.fixed-230-subnav > div {

-  border-bottom: 1px solid #ccc;

-  line-height: 4.0rem; }

-

-.b2b-menu > li:first-child,

-.fixed-230-subnav > li:first-child {

-  border-top: 1px solid #ccc; }

-

-.b2b-menu div > a,

-.fixed-230-subnav div > a {

-  color: #0574ac;

-  cursor: pointer;

-  display: block;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 1.4rem;

-  margin: 0;

-  outline-offset: -1px;

-  padding: 0 10px;

-  position: relative; }

-

-.fixed-230-subnav div > a.live {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  color: #666; }

-

-.fixed-230-subnav > ng-transclude > div li > a {

-  display: block;

-  font-size: 1.4rem;

-  line-height: 20px; }

-

-.fixed-230-subnav > ng-transclude > div li > a.active {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  text-decoration: none;

-  color: #666; }

-

-#nav-menu .fixed-230-subnav a > i {

-  top: 10px; }

-

-.fixed-230-subnav > li > a.active > i:after {

-  display: none; }

-

-.b2b-menu ul,

-.fixed-230-subnav ul {

-  margin: 0 0 10px 0; }

-

-.b2b-menu ul div a,

-.fixed-230-subnav ul div a {

-  padding: 0 10px; }

-

-.unlinked {

-  outline: medium none !important;

-  text-decoration: none !important; }

-

-@media (max-width: 1024px) {

-  .filter-container .fixed-230-subnav {

-    margin: 0 20px;

-    width: auto; }

-  .filter-container .fixed-230-subnav > li {

-    margin: 0; }

-  .row .filter-container {

-    display: none;

-    height: 100%;

-    left: 0;

-    position: fixed;

-    overflow: auto;

-    top: 0;

-    transition: all 0.5s ease 0s;

-    width: 285px;

-    z-index: 9999; }

-  .filter-header {

-    padding-left: 20px; }

-  .filter-selected {

-    margin: 0 20px 10px; } }

-

-.b2b-pane-selector-wrapper {

-  width: 100%;

-  display: block;

-  border-top: solid 1px #ccc;

-  border-bottom: solid 1px #ccc; }

-  .b2b-pane-selector-wrapper .side-nav {

-    width: 20% !important;

-    display: inline-block;

-    float: left; }

-  .b2b-pane-selector-wrapper .pane-container {

-    width: 80%;

-    vertical-align: top;

-    margin: 0;

-    padding-top: 30px;

-    border-left: solid 1px #ccc;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    display: none; }

-    .b2b-pane-selector-wrapper .pane-container.active {

-      display: inline-block; }

-    .b2b-pane-selector-wrapper .pane-container .pane-container-top {

-      padding-left: 15px; }

-    .b2b-pane-selector-wrapper .pane-container .panes {

-      display: -webkit-flex;

-      display: flex;

-      border-top: solid 1px #ccc;

-      margin-top: 30px; }

-      .b2b-pane-selector-wrapper .pane-container .panes div.pane-block {

-        height: inherit;

-        overflow-y: auto;

-        border-right: solid 1px #ccc;

-        position: relative;

-        flex: 1;

-        -webkit-flex: 1;

-        /* Safari 6.1+ */

-        -ms-flex: 1;

-        /* IE 10 */ }

-        .b2b-pane-selector-wrapper .pane-container .panes div.pane-block:focus {

-          outline: dotted 1px #333333; }

-    .b2b-pane-selector-wrapper .pane-container .search-block {

-      position: relative;

-      float: right; }

-      .b2b-pane-selector-wrapper .pane-container .search-block input[type="search"]:focus {

-        padding-right: 40px; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row p {

-      margin-top: 15px; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block div {

-      border-bottom: solid 1px #ccc; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row {

-      display: block;

-      padding: 19px 14px 19px 14px;

-      margin-top: 0px;

-      border: dotted 1px transparent;

-      border-bottom: solid 1px #ccc; }

-      .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row:focus {

-        border: dotted 1px #333333 !important; }

-      .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row:last-child {

-        border-bottom: none; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block > .no-content {

-      text-align: center;

-      border-bottom: none;

-      display: block;

-      position: absolute;

-      top: 45%;

-      left: 0;

-      right: 0; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block div:last-child {

-      border-bottom: none; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row span.margin-chk {

-      margin: 15px 15px 0px 15px;

-      float: left; }

-    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row .checkbox-selectall {

-      margin: 0px 0 0 24px !important; }

-  .b2b-pane-selector-wrapper .side-nav li {

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    border: none;

-    border-top: solid 1px #ccc;

-    display: block !important;

-    width: auto !important;

-    margin-left: 0px !important; }

-    .b2b-pane-selector-wrapper .side-nav li.active {

-      background-color: #f6f6f6;

-      position: inherit !important; }

-      .b2b-pane-selector-wrapper .side-nav li.active > a {

-        font-size: 16px;

-        color: #333;

-        text-decoration: none;

-        border: none;

-        background-color: transparent;

-        padding: 20px 15px;

-        display: block;

-        height: auto;

-        border-left: 4px solid #0574ac; }

-    .b2b-pane-selector-wrapper .side-nav li > a {

-      font-size: 16px;

-      color: #333;

-      text-decoration: none;

-      border: none;

-      background-color: transparent;

-      padding: 20px 15px;

-      display: block;

-      height: auto;

-      text-align: left; }

-    .b2b-pane-selector-wrapper .side-nav li > a:focus {

-      border-right: dotted 1px #333333; }

-    .b2b-pane-selector-wrapper .side-nav li:first-child {

-      border-top: none;

-      margin-left: none !important; }

-/********************* Utility CSS Starts **********************/

-.offscreen-text {

-  position: absolute;

-  left: -10000px;

-  top: auto;

-  width: 1px;

-  height: 1px;

-  overflow: hidden; }

-

-/********************* Utility CSS Ends **********************/

-/* Fix for alignment issue on Cancel link inside modal */

-.b2b-modal-footer > .cta-button-group {

-  line-height: 40px; }

-

-/* .att-dark-green { // Not used

-  color: #007a3e;

-} */

-.colors-off-msg {

-  display: none; }

-

-button .colors-off-msg {

-  position: relative; }

-

-.ds2-no-colors .colors-off-msg {

-  display: block; }

-

-.ds2-no-colors [data-colordatatext] button .colors-off-msg {

-  font-size: 1.1rem;

-  line-height: normal;

-  padding: 5px 0;

-  position: absolute;

-  top: 0;

-  white-space: normal;

-  width: 60px; }

-

-/* Not used

-.make-all-white * {

-  color: #fff;

-}

-.make-all-white a {

-  text-decoration: underline;

-} */

-.loader > span {

-  display: block;

-  padding-top: 20px; }

-

-.modal > .loader {

-  left: 50%;

-  margin-left: -25px;

-  margin-top: -25px;

-  position: absolute;

-  top: 50%; }

-

-#pageLevelLoader.modal {

-  background-color: transparent;

-  border: none;

-  box-shadow: none;

-  top: 40%; }

-

-.modal.fade .loader {

-  display: none; }

-

-.modal.fade.in .loader {

-  display: block; }

-

-.btn.disabled[data-loading-text] {

-  padding: 0 19px 0 18px;

-  line-height: 46px; }

-

-.btn.disabled[data-loading-text] img {

-  position: relative;

-  top: 2px; }

-

-/*  Seems to already be in docs.css

-.fixed-230.leftnav {

-  position: relative;

-}

-.fixed-230-subnav {

-  margin: 10px;

-}

-.fixed-230-subnav > li:first-child {

-  border-top: none;

-}

-.fixed-230-subnav > li {

-  border-bottom: 1px solid #d2d2d2;

-}

-.fixed-230-subnav > li > a {

-  display: block;

-  font-size: 1.4rem;

-  line-height: normal;

-  margin: 0 -9px;

-  padding: 11px 35px 12px 9px;

-  outline-offset: 0;

-  position: relative;

-}

-.fixed-230-subnav > li > a.live {

-  color: #333333;

-  font-family: "Omnes-ECOMP-W02-Medium";

-}

-.fixed-230-subnav a > i {

-  right: 10px;

-  margin: 0;

-  position: absolute;

-  top: 10px;

-}

-.fixed-230-subnav a > i:after {

-  display: none;

-}

-.fixed-230-subnav > li li > a {

-  display: block;

-  font-size: 1.4rem;

-  line-height: 18px;

-}

-.fixed-230-subnav > li li > a.active {

-  color: #333333;

-  font-family: "Omnes-ECOMP-W02-Medium";

-  text-decoration: none;

-}

-.fixed-230-subnav ul {

-  margin: 0 0 10px;

-} */

-.unlinked {

-  color: #0568ae !important;

-  font-family: "Omnes-ECOMP-W02" !important; }

-

-.unlinked.active {

-  color: inherit !important; }

-

-/* @media (max-width: 767px) {

-  .row.has-leftnav {

-    flex-wrap: wrap;

-  }

-  .row.has-leftnav .fluid-space {

-    padding-right: 0;

-  }

-  .row .fixed-230 {

-    background-color: #fff;

-    width: auto;

-  }

-  .row .leftnav {

-    background-color: #fff !important;

-    display: block !important;

-  }

-  .fixed-230-subnav {

-    margin: 10px 0 0;

-    width: 100%;

-  }

-  .fixed-230-subnav > li {

-    margin-left: -15px;

-    margin-right: -15px;

-  }

-  .fixed-230-subnav > li:first-child {

-    border-top: 1px solid #d2d2d2;

-  }

-  .fixed-230-subnav > li > a {

-    margin: 0;

-  }

-  .fixed-230-subnav a:hover,

-  .fixed-230-subnav a:focus {

-    text-decoration: none !important;

-  }

-  .fixed-230-subnav > li li > a {

-    padding: 5px 10px;

-  }

-  .fixed-230-subnav > li li > a.active {

-    color: inherit;

-    font-family: "Omnes-ECOMP-W02-Medium";

-  }

-} */

-@keyframes DOMinsertion {

-  from {

-    outline-color: transparent; }

-  to {

-    outline-color: transparent; } }

-

-@-moz-keyframes DOMinsertion {

-  from {

-    outline-color: transparent; }

-  to {

-    outline-color: transparent; } }

-

-@-webkit-keyframes DOMinsertion {

-  from {

-    outline-color: transparent; }

-  to {

-    outline-color: transparent; } }

-

-@-ms-keyframes DOMinsertion {

-  from {

-    outline-color: transparent; }

-  to {

-    outline-color: transparent; } }

-

-@-o-keyframes DOMinsertion {

-  from {

-    outline-color: transparent; }

-  to {

-    outline-color: transparent; } }

-

-.ajaxed,

-.modal.fade.in .b2b-modal-header,

-.modal.fade.in .b2b-modal-body,

-.modal.fade.in .b2b-modal-footer {

-  animation-duration: 0.01s;

-  -o-animation-duration: 0.01s;

-  -ms-animation-duration: 0.01s;

-  -moz-animation-duration: 0.01s;

-  -webkit-animation-duration: 0.01s;

-  animation-name: DOMinsertion;

-  -o-animation-name: DOMinsertion;

-  -ms-animation-name: DOMinsertion;

-  -moz-animation-name: DOMinsertion;

-  -webkit-animation-name: DOMinsertion; }

-

-.dda-css-override ul.nav-tabs {

-  margin-bottom: 0; }

-

-.dda-css-override div.tab-content {

-  margin-top: 0;

-  border-top: none; }

-

-.dda-css-override .tab-content .prettyprint, .dda-css-override .usage .prettyprint {

-  max-height: 500px;

-  overflow-y: auto; }

-

-.formsWithinProcessButton {

-  margin-right: 0px; }

-

-.heading-sub-section-form {

-  font-size: 2.4rem;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  margin-bottom: 20px;

-  margin-top: 10px; }

-

-.heading-small-form {

-  font-size: 1.6rem;

-  font-family: "Omnes-ECOMP-W02, Arial";

-  margin-top: 0px; }

-

-.icon-primary-form-sizeL {

-  font-size: 50px; }

-

-.icon-primary-form-size {

-  font-size: 30px; }

-

-.spanformfix {

-  margin-right: 15px !important; }

-

-@media (max-width: 767px) {

-  .heading-sub-section-form {

-    font-size: 1.8rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-bottom: 20px;

-    padding-top: 10px;

-    margin-top: 30px; }

-  .heading-small-form {

-    font-size: 1.4rem;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    margin-top: 0px; } }

-

-@media (max-width: 479px) {

-  .icon-primary-form-resizeL {

-    display: none; }

-  .icon-primary-form-resize {

-    display: none; }

-  .heading-center-form {

-    margin-left: 20px; } }

-

-@media (min-width: 480px) {

-  .icon-primary-form-resizeL {

-    display: none; }

-  .icon-primary-form-resize {

-    display: inherit; }

-  .icon-primary-center-min {

-    margin-top: 30px; } }

-

-@media (min-width: 768px) {

-  .icon-primary-form-resizeL {

-    display: inherit;

-    margin-top: 30px; }

-  .icon-primary-form-resize {

-    display: none; }

-  .center-form-align {

-    margin-top: 35px; } }

-

-@media (min-width: 1024px) {

-  .icon-primary-form-resizeL {

-    display: inherit;

-    margin-top: 0px; }

-  .icon-primary-form-resize {

-    display: none; }

-  .center-form-align {

-    margin-top: 5px; } }

-

-.data-row.has-button td.col-1 {

-  padding: 0; }

-

-.tab-content > .tab-pane {

-  display: none; }

-

-.tab-content > .active {

-  display: block; }

-

-.icon-primary-circle:before {

-  background-image: url("data:image/svg+xml,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Ccircle%20fill%3D%22transparent%22%20stroke%3D%22%23666%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2216%22%2F%3E%3C%2Fsvg%3E");

-  content: "";

-  position: absolute;

-  top: 0;

-  z-index: 1; }

-

-.icon-primary-primary-circle:before {

-  background-image: url("data:image/svg+xml,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Ccircle%20fill%3D%22transparent%22%20stroke%3D%22%23666%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2216%22%2F%3E%3C%2Fsvg%3E");

-  content: "";

-  position: absolute;

-  top: 0;

-  z-index: 1; }

-/* Flyout inputs color is not aligned */

-textarea, input {

-  color: #333; }

-

-.isIE .btn-primary.btn:focus::after,

-.isIE .btn-specialty.btn:focus::after,

-.isIE .btn-alt.btn:focus::after {

-  border: 1px dashed #fff !important; }

-.b2b-config-section-container {

-  height: auto;

-  min-height: 330px;

-  width: 815px;

-  background-color: #fff;

-  border: 1px solid #ccc;

-  display: inline-table;

-  border-radius: 6px; }

-

-.b2b-config-section-first-div {

-  border-right: 1px solid #ccc;

-  height: auto;

-  min-height: 330px; }

-

-.b2b-config-section-icon-primary-font {

-  font-size: 50px;

-  height: 31px;

-  line-height: 31px; }

-

-.b2b-config-section-padding {

-  padding: 20px 20px 15px 15px;

-  height: auto; }

-

-.b2b-config-sec-flyout {

-  position: relative;

-  left: 10px;

-  float: right;

-  color: #0574ac;

-  font-size: 16px;

-  font-family: "Omnes-ECOMP-W02", Arial; }

-

-.b2b-config-sec-divider {

-  border-bottom: 1px solid #ccc; }

-

-.b2b-confi-sec-span-border {

-  border-right: 1px solid;

-  height: auto; }

-

-.b2b-config-sec-speed-div {

-  text-align: center;

-  margin-top: 20px; }

-

-.b2b-config-sec-label-font {

-  font-size: 16px; }

-

-.b2b-config-sec-expander-main {

-  padding: 0 5px 0px 15px; }

-

-.b2b-config-sec-expander-body .b2b-config-vlan-padding {

-  padding: 5px 15px 10px 0px; }

-

-.b2b-conif-sec-row-height {

-  height: 110px; }

-

-.b2b-config-sec-expander-body {

-  font-size: 14px; }

-  .b2b-config-sec-expander-body .b2b-config-vlan-data {

-    font-family: "Omnes-ECOMP-W02-Medium", Arial;

-    padding-left: 15px; }

-

-.b2b-config-sec-expander-body-first-div {

-  border-top: 1px solid #ccc; }

-

-.b2b-config-sec-expander-body .tooltip {

-  position: static;

-  opacity: 1; }

-

-.b2b-config-section-container .row > [class*="span"] {

-  margin-right: 0px; }

-

-.b2b-config-vlan-icons {

-  font-size: 16px;

-  float: right;

-  margin-right: 0px; }

-

-.b2b-config-section-container .span6 {

-  width: 50%; }

-

-.b2b-config-sec-data-link-style {

-  position: relative;

-  left: 95%;

-  top: 30px;

-  border-radius: 50%;

-  width: 23px;

-  height: 23px;

-  background: #fff;

-  border: 1px solid #ccc;

-  color: #666666; }

-

-.b2b-config-sec-text-align {

-  text-align: center;

-  margin-top: 15px;

-  margin-bottom: 35px;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 14px;

-  color: #333333; }

-

-.b2b-config-port-text-align {

-  text-align: center;

-  margin-top: 15px;

-  margin-bottom: 8px;

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 14px;

-  color: #333333; }

-

-.b2b-config-port-text-label {

-  margin-top: 6px;

-  margin-bottom: 8px;

-  font-size: 14px;

-  text-align: center; }

-

-.b2b-confi-sec-last-div p {

-  font-size: 14px;

-  padding: 10px 15px 0 15px; }

-

-.b2b-confi-sec-router-label {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 16px;

-  color: #333333;

-  float: left;

-  width: 100%;

-  margin-bottom: 7px; }

-

-.b2b-config-vlan-label {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 14px;

-  color: #333333;

-  margin-top: 1px;

-  margin-bottom: 9px; }

-

-.b2b-config-vlan-info {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 14px;

-  color: #333333;

-  margin-bottom: 1px; }

-  .b2b-config-vlan-info .icon-misc-pen {

-    padding-left: 7px; }

-

-.b2b-confi-sec-model-label {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 14px;

-  color: #333333; }

-

-.b2b-confi-sec-router-info {

-  float: left;

-  width: 62%; }

-

-.b2b-config-sec-speed-sec {

-  border-right: 1px solid #ccc; }

-

-.b2b-config-sec-speed-label {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 20px;

-  color: #333333;

-  text-align: center; }

-  .b2b-config-sec-speed-label i {

-    margin-left: 15px;

-    font-size: 16px; }

-

-.b2b-config-sec-yellow-flag-div {

-  width: 1.6%;

-  background-color: #ffb18c; }

-

-.b2b-config-sec-expander-icons {

-  margin-top: 6px; }

-  .b2b-config-sec-expander-icons .icon-misc-trash {

-    margin-right: 10px; }

-

-.b2b-config-sec-yellow-flag .b2b-config-sec-expander-icons {

-  left: 40px; }

-

-.b2b-config-sec-expander-body-icons .icon-misc-pen {

-  position: relative;

-  left: 18px; }

-.b2b-directory-listing .listBox {

-  height: 310px;

-  width: 450px;

-  padding-left: 1px;

-  padding-right: 1px;

-  font-family: "Omnes-ECOMP-W02", Arial; }

-

-.b2b-directory-listing .listBox:focus {

-  outline: thin dotted #666; }

-

-.b2b-directory-listing .b2b-directory-listing-no-results {

-  font-weight: bold; }

-

-.b2b-directory-listing .b2b-directory-listing-list {

-  font-family: "Omnes-ECOMP-W02", Arial;

-  color: #5a5a5a;

-  overflow-x: hidden;

-  position: relative;

-  height: 300px;

-  border: 1px solid #333;

-  border-radius: 6px;

-  margin-bottom: 10px; }

-

-.b2b-directory-listing .b2b-directory-listing-item {

-  margin: 1px;

-  border: 1px solid transparent;

-  outline: none;

-  text-align: left;

-  overflow: hidden;

-  cursor: pointer;

-  padding-top: 13px;

-  padding-bottom: 7px;

-  padding-left: 15px;

-  -moz-user-select: none;

-  -webkit-user-select: none;

-  -ms-user-select: none;

-  word-wrap: break-word; }

-  .b2b-directory-listing .b2b-directory-listing-item:focus {

-    border: 1px #3399FF solid; }

-

-.b2b-directory-listing .b2b-directory-listing-item-selected {

-  color: #fff;

-  background-color: #3399FF; }

-

-.b2b-directory-listing input[type="text"] {

-  padding-right: 30px; }

-  .b2b-directory-listing input[type="text"]:focus, .b2b-directory-listing input[type="text"]:hover {

-    padding-right: 30px; }

-

-.b2b-directory-listing .row .btns {

-  margin-right: 90px;

-  margin-left: -115px;

-  margin-top: 100px; }

-

-.b2b-directory-listing .btn-right {

-  margin-bottom: 15px !important; }

-  .b2b-directory-listing .btn-right:after {

-    content: "  \27A1"; }

-

-.b2b-directory-listing .btn-left {

-  margin-top: 10px !important; }

-

-.b2b-directory-listing .btn-remove {

-  margin-right: auto !important;

-  margin-bottom: 15px; }

-

-.b2b-directory-listing .btn-remove-all {

-  margin-top: 0;

-  margin-bottom: 61px !important;

-  /* need to be removed */

-  margin-right: auto !important; }

-

-.b2b-directory-listing .btn-add-all {

-  margin-top: 0;

-  margin-bottom: 61px !important; }

-

-.b2b-directory-listing .btn-left:before {

-  content: "\2B05  "; }

-

-.b2b-directory-listing .btn-search[class*="btn"] {

-  right: 0.09rem; }

-

-.b2b-directory-listing .btn {

-  width: 130px; }

-

-.b2b-directory-listing-disabled {

-  cursor: not-allowed; }

-

-.b2b-directory-listing-label-heading {

-  margin-top: 24px;

-  padding-bottom: 5px; }

-

-.b2b-dl-list-box option {

-  padding-top: 13px;

-  padding-bottom: 7px;

-  padding-left: 15px; }

-

-.b2b-dl-modal-button-div {

-  padding-top: 110px;

-  text-align: center; }

-.b2b-tmpl-notification-card {

-  border-radius: 6px;

-  height: auto;

-  width: 420px;

-  background-color: #ffffff;

-  border: 1px solid rgba(0, 0, 0, 0.1);

-  border-radius: 8px;

-  overflow: hidden; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-header {

-    padding-left: 30px;

-    font-family: "Omnes-ECOMP-W02", Arial;

-    color: #333333;

-    font-size: 24px;

-    margin-top: 2px;

-    display: inline-block;

-    min-height: 60px;

-    position: relative; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-body {

-    padding: 0 30px 20px;

-    position: relative; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-header-title {

-    margin-top: 10px; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button {

-    box-shadow: 0 -50px 0 0 #f2f2f2 inset;

-    height: 69px;

-    position: absolute;

-    border-color: #f2f2f2 #f2f2f2 transparent transparent;

-    border-style: solid;

-    border-width: 35px;

-    height: 0;

-    right: -295px;

-    top: -4px;

-    width: 69px;

-    /*Old properties */

-    box-shadow: none;

-    transform: none; }

-    .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button .close {

-      height: 48px;

-      right: -40px;

-      top: -40px;

-      width: 48px;

-      position: relative;

-      /*Old properties */

-      transform: none; }

-      .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button .close:before {

-        color: #0568ae;

-        display: block;

-        font-size: 20px;

-        height: auto;

-        right: -4px;

-        top: 4px;

-        width: auto;

-        /*Old properties */

-        left: auto;

-        height: auto;

-        bottom: auto; }

-      .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button .close:focus {

-        outline: 1px dotted black; }

-  .b2b-tmpl-notification-card button.close {

-    -webkit-appearance: none;

-    moz-appearance: none;

-    appearance: none; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-icon-primary-cirlce {

-    width: 30px;

-    height: 30px;

-    border-radius: 50%; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-outer-cirlce {

-    background: #f0f5f5;

-    border-radius: 50%;

-    height: 16px;

-    width: 16px;

-    vertical-align: middle; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-inner-cirlce {

-    background: #fff;

-    width: 22px;

-    height: 22px;

-    position: relative;

-    border-radius: 50%;

-    display: block;

-    left: 4px;

-    top: 4px;

-    border: 1px solid #767676; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-row {

-    padding-top: 10px; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-sub-header {

-    margin-top: 0px; }

-  .b2b-tmpl-notification-card .b2b-tmpl-favourite-view-item {

-    background-color: #fff;

-    margin-top: 25px;

-    border-top: 1px solid #ccc; }

-    .b2b-tmpl-notification-card .b2b-tmpl-favourite-view-item .cta-button-group {

-      line-height: 40px;

-      padding-top: 20px; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-edit-section .cta-button-group {

-    line-height: 40px;

-    padding-top: 15px; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-add-item-container {

-    padding-top: 30px; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-link-active {

-    pointer-events: none;

-    cursor: default;

-    color: #ccc; }

-  .b2b-tmpl-notification-card .b2b-tmpl-card-cursor:hover {

-    cursor: pointer; }

-.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-icon {

-  text-align: center;

-  margin-top: 91px; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-icon i {

-    font-size: 99px;

-    color: #1b7e28; }

-

-.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-heading {

-  color: #333333;

-  text-align: center;

-  margin-top: 20px; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-heading h1 {

-    font-size: 38px; }

-

-.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-sub-heading {

-  color: #333333;

-  text-align: center; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-sub-heading h5 {

-    font-size: 18px; }

-

-.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-info {

-  padding-left: 18%;

-  font-size: 16px;

-  margin-top: 20px; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-info ul {

-    list-style-type: disc;

-    list-style-position: inside; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-info li {

-    padding-top: 5px; }

-

-.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-link-section {

-  font-size: 15px;

-  color: #0574ac;

-  margin-top: 20px;

-  text-align: center;

-  margin-bottom: 55px; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-link-section .b2b-tmpl-order-confirmation-link {

-    margin-right: 8%; }

-  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-link-section a {

-    cursor: pointer; }

-.b2b-tmpl-profile-block-container {

-  min-height: 200px;

-  height: auto;

-  background-color: #fff;

-  border-radius: 8px;

-  border: 1px solid #ccc;

-  box-shadow: 0px 1px 1px 1px #ccc;

-  display: inline-table;

-  margin: 15px 15px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-title {

-    font-weight: bold; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-footer {

-    margin-bottom: 12px;

-    margin-top: 5px;

-    height: 35px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p {

-    word-wrap: break-word;

-    height: 61px; }

-    .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p:first-child {

-      margin-top: 10px; }

-    .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p:after {

-      content: ' ';

-      display: block;

-      border: 0.2px solid #ccc;

-      margin-top: 12px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details .radio {

-    margin-left: 15px;

-    height: 30px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p, .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details div {

-    padding: 2px 7px;

-    font-size: 14px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details .radio-label, .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details a {

-    font-size: 14px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p label, .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p span {

-    padding-left: 10px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-approval-icon {

-    color: #1b7e28;

-    float: right;

-    position: relative;

-    left: 10px; }

-    .b2b-tmpl-profile-block-container .b2b-tmpl-approval-icon i {

-      color: #1b7e28;

-      float: right; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-link {

-    float: right;

-    position: relative;

-    left: -4px; }

-  .b2b-tmpl-profile-block-container a.link-profile {

-    position: relative;

-    left: -5px;

-    float: right;

-    margin-bottom: 16px; }

-  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-radio {

-    position: relative;

-    top: -5px; }

-.b2b-static-route-container {

-  padding-left: 32px;

-  display: inline-block; }

-

-.b2b-static-route-label-heading {

-  font-family: "Omnes-ECOMP-W02-Medium", Arial;

-  font-size: 16px !important;

-  color: #333333;

-  font-style: normal;

-  text-align: left; }

-

-label.b2b-static-route-label-heading {

-  margin-bottom: 12px;

-  margin-top: 15px;

-  display: block; }

-

-#b2b-static-route-input {

-  margin: 5px 0 5px; }

-

-.b2b-static-route-list {

-  margin-bottom: 30px;

-  width: 216px;

-  float: left;

-  margin-right: 20px;

-  max-height: 540px;

-  overflow-y: auto; }

-  .b2b-static-route-list .status-text {

-    flex: 1;

-    display: flex;

-    align-items: center;

-    outline: 0; }

-

-.b2b-static-route-list-item {

-  border: 1px #cccccc solid;

-  font-family: "Omnes-ECOMP-W02", Arial;

-  font-size: 14px;

-  display: flex;

-  cursor: pointer; }

-  .b2b-static-route-list-item > .status-bar {

-    padding: 20px 0 20px;

-    background-color: #ea7400;

-    border-radius: 0;

-    width: 10px;

-    display: inline-block;

-    margin-right: 20px;

-    height: 100%;

-    float: left; }

-    .b2b-static-route-list-item > .status-bar:after {

-      content: '.';

-      visibility: hidden; }

-  .b2b-static-route-list-item > .status-bar-unedited {

-    padding: 20px 0 20px;

-    background-color: #ffb81c;

-    border-radius: 0;

-    width: 10px;

-    display: inline-block;

-    margin-right: 20px;

-    height: 100%;

-    float: left;

-    background-color: transparent; }

-    .b2b-static-route-list-item > .status-bar-unedited:after {

-      content: '.';

-      visibility: hidden; }

-

-.b2b-static-route-list-item:focus {

-  outline: 1px dashed #00f; }

-

-.b2b-static-route-list-item--selected {

-  background: #f2f2f2; }

-

-.b2b-static-route-content {

-  display: inline-block; }

-

-

-/*

-To Remove later

-*/

-

-.selectWrap::after { 

-  align-items: center; 

-  background-position: 7px 7px; 

-  background-repeat: no-repeat; 

-  background-size: auto 23px; 

-  border-left: 1px solid transparent; 

-  color: #0568ae; 

-  display: flex; 

-  font-size: 23px; 

-  height: 36px; 

-  margin-right: 0; 

-  overflow: hidden; 

-  position: absolute; 

-  right: 0; 

-  text-indent: 7px; 

-  top: 0; 

-  user-select: none; 

-  width: 41px; 

-  z-index: 0; 

-  position: absolute !important; 

-  display: flex !important; 

+/*! b2b-angular-library - v1.0.1 - Last updated: 2017-03-02. Copyright (c) 2016 AT&T Services, Inc. */ 
+.b2b-horizontal-table {
+  border: 1px solid;
+  width: 651px; }
+  .b2b-horizontal-table ::-webkit-scrollbar {
+    height: 10px; }
+  .b2b-horizontal-table ::-webkit-scrollbar-thumb {
+    background: #666666;
+    border-radius: 5px; }
+  .b2b-horizontal-table .b2b-horizontal-table-inner-container {
+    width: 650px;
+    padding-left: 150px;
+    overflow-x: scroll; }
+  .b2b-horizontal-table th:first-child {
+    background-color: #FFFFFF; }
+  .b2b-horizontal-table td:first-child {
+    background-color: #FFFFFF;
+    border-top: 1px solid #cccccc;
+    border-right: 1px solid #cccccc;
+    margin-top: -0.5px; }
+  .b2b-horizontal-table tr th:nth-child(2), .b2b-horizontal-table tr td:nth-child(2) {
+    border-left: none; }
+  .b2b-horizontal-table .b2b-horizontal-table-column-info {
+    padding-top: 16px;
+    text-align: center; }
+  .b2b-horizontal-table .b2b-horizontal-table-arrows .btn-arrow:hover, .b2b-horizontal-table .b2b-horizontal-table-arrows .btn-arrow:focus {
+    text-decoration: none; }
+  .b2b-horizontal-table .b2b-horizontal-table-arrows .left {
+    float: left;
+    margin: 10px;
+    color: #0568ae; }
+    .b2b-horizontal-table .b2b-horizontal-table-arrows .left[disabled] {
+      color: #767676;
+      cursor: not-allowed; }
+  .b2b-horizontal-table .b2b-horizontal-table-arrows .right {
+    float: right;
+    clear: right;
+    margin: 10px;
+    color: #0568ae; }
+    .b2b-horizontal-table .b2b-horizontal-table-arrows .right[disabled] {
+      color: #767676;
+      cursor: not-allowed; }
+    .b2b-horizontal-table .b2b-horizontal-table-arrows .right.btn-arrow .btn {
+      margin-right: 0;
+      margin-left: 10px; }
+
+@-moz-document url-prefix() {
+  .b2b-horizontal-table td:first-child {
+    border-top: none; } }
+* {
+  box-sizing: border-box; }
+
+:root {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  overflow-y: scroll;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  box-sizing: border-box;
+  font: 0.625pc/1.5 sans-serif;
+  text-rendering: optimizeLegibility; }
+
+html {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  height: 100%;
+  position: relative; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+blockquote,
+figure,
+ol,
+ul {
+  margin: 0;
+  padding: 0; }
+
+/* a:focus {
+  outline: thin dotted #191919;
+} */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: top; }
+
+sup {
+  top: .75em;
+  display: inline-block; }
+
+sub {
+  bottom: -0.25em; }
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border: 0;
+  -ms-interpolation-mode: bicubic; }
+
+.img-no-rwd {
+  max-width: inherit !important; }
+
+svg {
+  display: inline-block; }
+
+.responsive-img {
+  width: 100%;
+  height: auto; }
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle; }
+
+::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  appearance: button;
+  cursor: pointer; }
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer; }
+
+input[type=search] {
+  -webkit-appearance: textfield; }
+
+input[type=search]:-webkit-search-cancel-button,
+input[type=search]:-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: none; }
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none; }
+
+[aria-busy=true] {
+  cursor: progress; }
+
+[aria-controls] {
+  cursor: pointer; }
+
+body {
+  background-color: #ffffff;
+  color: #191919;
+  font-family: "Omnes-ECOMP-W02", Arial;
+/*  font-size: 1.6rem;
+  line-height: 2rem;*/
+  margin: 0;
+  position: relative;
+  width: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased; }
+
+small {
+  font-size: 1.6rem; }
+
+.container {
+  margin: 0 auto;
+  padding: 0; }
+
+.tooltip {
+  display: inline-block;
+  height: 20px;
+  margin: 1px 0 0 7px;
+  vertical-align: middle; }
+
+.tooltip-wrapper {
+  display: none; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02";
+  src: url("fonts/Omnes_ATTW02.eot");
+  src: url("fonts/Omnes_ATTW02.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02.woff") format("woff"), url("fonts/Omnes_ATTW02.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Medium";
+  src: url("fonts/Omnes_ATTW02Medium.eot");
+  src: url("fonts/Omnes_ATTW02Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Medium.woff") format("woff"), url("fonts/Omnes_ATTW02Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Italic";
+  src: url("fonts/Omnes_ATTW02Italic.eot");
+  src: url("fonts/Omnes_ATTW02Italic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Italic.woff") format("woff"), url("fonts/Omnes_ATTW02Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Light";
+  src: url("fonts/Omnes_ATTW02Light.eot");
+  src: url("fonts/Omnes_ATTW02Light.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Light.woff") format("woff"), url("fonts/Omnes_ATTW02Light.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Bold";
+  src: url("fonts/Omnes_ATTW02Bold.eot");
+  src: url("fonts/Omnes_ATTW02Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Bold.woff") format("woff"), url("fonts/Omnes_ATTW02Bold.woff2") format("woff2"), url("fonts/Omnes_ATTW02Bold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Light-Italic";
+  src: url("fonts/Omnes_ATTW02LightItalic.eot");
+  src: url("fonts/Omnes_ATTW02LightItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02LightItalic.woff") format("woff"), url("fonts/Omnes_ATTW02LightItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02LightItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Medium-Italic";
+  src: url("fonts/Omnes_ATTW02MediumItalic.eot");
+  src: url("fonts/Omnes_ATTW02MediumItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02MediumItalic.woff") format("woff"), url("fonts/Omnes_ATTW02MediumItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02MediumItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Bold-Italic";
+  src: url("fonts/Omnes_ATTW02BoldItalic.eot");
+  src: url("fonts/Omnes_ATTW02BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02BoldItalic.woff") format("woff"), url("fonts/Omnes_ATTW02BoldItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02BoldItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+/* TODO: Build a reference page for these classes */
+.font-regular {
+  font-family: "Omnes-ECOMP-W02", Arial !important; }
+
+.font-light {
+  font-family: "Omnes-ECOMP-W02-Light", Arial !important; }
+
+.font-italic {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial !important; }
+
+.font-light-italic {
+  font-family: "Omnes-ECOMP-W02-Light-Italic", Arial !important; }
+
+.font-medium {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial !important; }
+
+.font-medium-italic {
+  font-family: "Omnes-ECOMP-W02-Medium-Italic", Arial !important; }
+
+.font-reset {
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  text-transform: none; }
+
+.visible-phone {
+  display: none !important; }
+
+.visible-tablet {
+  display: none !important; }
+
+.hidden-desktop {
+  display: none !important; }
+
+.visible-desktop {
+  display: inherit !important; }
+
+.row,
+.row-nowrap {
+  margin-left: 0; }
+
+.row:before,
+.row-nowrap:before,
+.row:after,
+.row-nowrap:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.row:after,
+.row-nowrap:after {
+  clear: both; }
+
+.row:before,
+.row-nowrap:before,
+.row:after,
+.row-nowrap:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.row:after,
+.row-nowrap:after {
+  clear: both; }
+
+.row,
+.row-nowrap {
+  display: flex; }
+
+.row > [class*="span"],
+.row-nowrap > [class*="span"] {
+  float: left;
+  margin-right: 14px;
+  margin-right: 1.40845%\9; }
+
+.row > [class*="span"]:last-child,
+.row-nowrap > [class*="span"]:last-child {
+  margin-right: 0; }
+
+.row > [class*="span"].centered,
+.row-nowrap > [class*="span"].centered {
+  margin-left: auto !important;
+  margin-right: auto !important; }
+
+.row.no-flex,
+.row-nowrap.no-flex {
+  display: block; }
+
+.row.no-flex > [class*="span"],
+.row-nowrap.no-flex > [class*="span"] {
+  margin-right: 1.408450704225352%; }
+
+.row.no-flex > [class*="span"]:last-child,
+.row-nowrap.no-flex > [class*="span"]:last-child {
+  margin-right: 0; }
+
+.row.flex-justify,
+.row-nowrap.flex-justify {
+  justify-content: space-between; }
+
+.row.flex-justify > [class*="span"],
+.row-nowrap.flex-justify > [class*="span"] {
+  flex: 1 1 0; }
+
+.row.flex-justify > .flex-col,
+.row-nowrap.flex-justify > .flex-col {
+  margin-right: 14px;
+  margin-right: 1.40845%\9; }
+
+.row.flex-wrap,
+.row-nowrap.flex-wrap {
+  flex-wrap: wrap; }
+
+.align-items-top {
+  align-items: flex-start; }
+
+.align-items-center {
+  align-items: center; }
+
+.align-items-bottom {
+  align-items: flex-end; }
+
+.align-self-top {
+  align-self: flex-start; }
+
+.align-self-center {
+  align-self: center; }
+
+.align-self-bottom {
+  align-self: flex-end; }
+
+.row .fixed-230 {
+  flex: 0;
+  display: block;
+  width: 230px;
+  vertical-align: top;
+  min-width: 230px;
+  background-color: #efefef; }
+
+.row .fluid-space {
+  flex: 1 1 0;
+  display: block;
+  vertical-align: top;
+  padding-left: 0;
+  padding-right: 20px;
+  width: 100%; }
+
+.row .fixed-230 + .fluid-space {
+  padding-left: 20px;
+  padding-right: 20px; }
+
+.row .fluid-space:last-child {
+  padding-right: 0; }
+
+.span1 {
+  width: 7.042253521126761%; }
+
+.span2 {
+  width: 15.49295774647887%; }
+
+.span3 {
+  width: 23.94366197183099%; }
+
+.span4 {
+  width: 32.3943661971831%; }
+
+.span5 {
+  width: 40.84507042253521%; }
+
+.span6 {
+  width: 49.29577464788733%; }
+
+.span7 {
+  width: 57.74647887323944%; }
+
+.span8 {
+  width: 66.19718309859155%; }
+
+.span9 {
+  width: 74.64788732394367%; }
+
+.span10 {
+  width: 83.09859154929578%; }
+
+.span11 {
+  width: 91.54929577464789%; }
+
+.span12 {
+  width: 100%; }
+
+.offset1 {
+  margin-left: 8.450704225352113%; }
+
+.offset2 {
+  margin-left: 16.90140845070423%; }
+
+.offset3 {
+  margin-left: 25.35211267605634%; }
+
+.offset4 {
+  margin-left: 33.8028169%; }
+
+.offset5 {
+  margin-left: 42.25352113%; }
+
+.offset6 {
+  margin-left: 50.70422535%; }
+
+.offset7 {
+  margin-left: 59.15492958%; }
+
+.offset8 {
+  margin-left: 67.6056338%; }
+
+.offset9 {
+  margin-left: 76.05633803%; }
+
+.offset10 {
+  margin-left: 84.50704225%; }
+
+.offset11 {
+  margin-left: 92.95774648%; }
+
+.align-center {
+  margin: 0 auto;
+  text-align: center; }
+
+[class*="span"].align-center {
+  margin: 0 auto !important;
+  float: none; }
+
+.align-left .container {
+  padding-left: 0 !important;
+  margin: 0 !important; }
+
+/* BEGIN RESPONSIVE-4.LESS ************** */
+@media (min-width: 1025px) {
+  .row > [class*="span"],
+  .row-nowrap > [class*="span"] {
+    margin-right: 20px;
+    margin-right: 1.487301587301587%\9; }
+  .container {
+    padding-left: 20px;
+    padding-right: 20px;
+    max-width: 1260px; }
+  /* 1col = 6.878306878306879 */
+  /* 1colgutter = 1.587301587301587 */
+  .span0 {
+    display: none; }
+  .span1 {
+    width: 6.878306878306879%; }
+  .span2 {
+    width: 15.34391534391534%; }
+  .span3 {
+    width: 23.80952380952381%; }
+  .span4 {
+    width: 32.27513227513228%; }
+  .span5 {
+    width: 40.74074074074074%; }
+  .span6 {
+    width: 49.20634920634921%; }
+  .span7 {
+    width: 57.67195767195767%; }
+  .span8 {
+    width: 66.13756613756614%; }
+  .span9 {
+    width: 74.60317460317461%; }
+  .span10 {
+    width: 83.06878306878308%; }
+  .span11 {
+    width: 91.53439153439154%; }
+  .span12 {
+    width: 100%; }
+  .offset1 {
+    margin-left: 8.465608465608466%; }
+  .offset2 {
+    margin-left: 16.93121693121693%; }
+  .offset3 {
+    margin-left: 25.3968253968254%; }
+  .offset4 {
+    margin-left: 33.86243386%; }
+  .offset5 {
+    margin-left: 42.32804233%; }
+  .offset6 {
+    margin-left: 50.79365079%; }
+  .offset7 {
+    margin-left: 59.25925926%; }
+  .offset8 {
+    margin-left: 67.72486772%; }
+  .offset9 {
+    margin-left: 76.19047619%; }
+  .offset10 {
+    margin-left: 84.65608466%; }
+  .offset11 {
+    margin-left: 93.12169312%; }
+  .tooltip-size-control {
+    position: relative;
+    width: 400px; }
+  .thumbnails > li {
+    margin-left: 1.40845070422535%; }
+  .row .thumbnails {
+    margin-left: 0; } }
+
+/* END RESPONSIVE-4.LESS ****************** */
+/* BEGIN RESPONSIVE-3.LESS ******************* */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .hidden-desktop {
+    display: inherit !important; }
+  .visible-desktop {
+    display: none !important; }
+  .visible-tablet {
+    display: inherit !important; }
+  .hidden-tablet {
+    display: none !important; }
+  .container {
+    width: 100%;
+    margin: 0 auto;
+    padding-left: 20px;
+    padding-right: 20px; }
+  .span0-md {
+    display: none; }
+  .span1-md {
+    width: 7.042253521126761%; }
+  .span2-md {
+    width: 15.49295774647887%; }
+  .span3-md {
+    width: 23.94366197183099%; }
+  .span4-md {
+    width: 32.3943661971831%; }
+  .span5-md {
+    width: 40.84507042253521%; }
+  .span6-md {
+    width: 49.29577464788733%; }
+  .span7-md {
+    width: 57.74647887323944%; }
+  .span8-md {
+    width: 66.19718309859155%; }
+  .span9-md {
+    width: 74.64788732394367%; }
+  .span10-md {
+    width: 83.09859154929578%; }
+  .span11-md {
+    width: 91.54929577464789%; }
+  .span12-md {
+    width: 100%; }
+  .offset1-md {
+    margin-left: 8.450704225352113%; }
+  .offset2-md {
+    margin-left: 16.90140845070423%; }
+  .offset3-md {
+    margin-left: 25.35211267605634%; }
+  .offset4-md {
+    margin-left: 33.8028169%; }
+  .offset5-md {
+    margin-left: 42.25352113%; }
+  .offset6-md {
+    margin-left: 50.70422535%; }
+  .offset7-md {
+    margin-left: 59.15492958%; }
+  .offset8-md {
+    margin-left: 67.6056338%; }
+  .offset9-md {
+    margin-left: 76.05633803%; }
+  .offset10-md {
+    margin-left: 84.50704225%; }
+  .offset11-md {
+    margin-left: 92.95774648%; }
+  .tooltip-size-control {
+    position: relative;
+    width: 300px; } }
+
+/* END RESPONSIVE-3.LESS ******************* */
+/* BEGIN RESPONSIVE-2.LESS *************** */
+@media (max-width: 767px) {
+  .hidden-desktop {
+    display: inherit !important; }
+  .visible-desktop {
+    display: none !important; }
+  .visible-phone {
+    display: inherit !important; }
+  .visible-tablet {
+    display: inherit !important; }
+  .hidden-phone {
+    display: none !important; }
+  .hidden-tablet {
+    display: none !important; }
+  .container {
+    width: auto;
+    padding-left: 15px;
+    padding-right: 15px; }
+  /*.row{ display:block; }*/
+  .row > [class*="span"] {
+    float: none;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%; }
+  .row {
+    display: block; }
+  .row.flex > .flex-col,
+  .row-nowrap.flex > .flex-col {
+    margin-right: 0; }
+  .row .fixed-230 {
+    display: block;
+    width: 100%; }
+  .row .fluid-space {
+    display: block;
+    padding-left: 0;
+    padding-right: 0;
+    width: auto; }
+  .row .fluid-space + .fixed-230 {
+    padding-left: 0; }
+  .row .fluid-space:last-child {
+    padding-right: 0; }
+  .span0-sm {
+    display: none; }
+  .span1-sm {
+    width: 7.042253521126761%; }
+  .span2-sm {
+    width: 15.49295774647887%; }
+  .span3-sm {
+    width: 23.94366197183099%; }
+  .span4-sm {
+    width: 32.3943661971831%; }
+  .span5-sm {
+    width: 40.84507042253521%; }
+  .span6-sm {
+    width: 49.29577464788733%; }
+  .span7-sm {
+    width: 57.74647887323944%; }
+  .span8-sm {
+    width: 66.19718309859155%; }
+  .span9-sm {
+    width: 74.64788732394367%; }
+  .span10-sm {
+    width: 83.09859154929578%; }
+  .span11-sm {
+    width: 91.54929577464789%; }
+  .span12-sm {
+    width: 100%; }
+  .offset1-sm {
+    margin-left: 8.450704225352113%; }
+  .offset2-sm {
+    margin-left: 16.90140845070423%; }
+  .offset3-sm {
+    margin-left: 25.35211267605634%; }
+  .offset4-sm {
+    margin-left: 33.8028169%; }
+  .offset5-sm {
+    margin-left: 42.25352113%; }
+  .offset6-sm {
+    margin-left: 50.70422535%; }
+  .offset7-sm {
+    margin-left: 59.15492958%; }
+  .offset8-sm {
+    margin-left: 67.6056338%; }
+  .offset9-sm {
+    margin-left: 76.05633803%; }
+  .offset10-sm {
+    margin-left: 84.50704225%; }
+  .offset11-sm {
+    margin-left: 92.95774648%; }
+  input {
+    padding: 8px 15px 8px 15px; }
+  .field-group input.input-emphasized[type="search"] + .reset-field:after {
+    top: 14px; }
+  .field-group input.input-emphasized[type="search"] + .reset-field {
+    height: 46px;
+    top: 1px; }
+  .marquee {
+    margin-bottom: 30px; }
+  .marquee .blur-overlay {
+    border-radius: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    padding: 34px 15px 30px; }
+  .marquee + div {
+    margin-top: 30px; }
+  .marquee h1 {
+    font-size: 1.8rem;
+    letter-spacing: -0.035px; }
+  .marquee .lead {
+    font-size: 3.0rem;
+    line-height: 3.6rem;
+    margin-bottom: 0; }
+  .marquee p:not(.lead) {
+    font-family: "Omnes-ECOMP-W02-Light" , Arial;
+    font-size: 1.8rem;
+    margin-bottom: 0; }
+  .marquee .btn-fullwidth {
+    margin-top: 10px;
+    width: 100%;
+    float: none; }
+  .tooltip-size-control {
+    width: 100%; }
+  .table-wrapper,
+  .accordion-table-layout {
+    margin-left: -15px;
+    margin-right: -15px; }
+  .table-wrapper caption {
+    padding-left: 15px; } }
+
+@media (max-width: 480px) {
+  .span1-xsm {
+    width: 7.042253521126761%; }
+  .span2-xsm {
+    width: 15.49295774647887%; }
+  .span3-xsm {
+    width: 23.94366197183099%; }
+  .span4-xsm {
+    width: 32.3943661971831%; }
+  .span5-xsm {
+    width: 40.84507042253521%; }
+  .span6-xsm {
+    width: 49.29577464788733%; }
+  .span7-xsm {
+    width: 57.74647887323944%; }
+  .span8-xsm {
+    width: 66.19718309859155%; }
+  .span9-xsm {
+    width: 74.64788732394367%; }
+  .span10-xsm {
+    width: 83.09859154929578%; }
+  .span11-xsm {
+    width: 91.54929577464789%; }
+  .span12-xsm {
+    width: 100%; }
+  .offset1-xsm {
+    margin-left: 8.450704225352113%; }
+  .offset2-xsm {
+    margin-left: 16.90140845070423%; }
+  .offset3-xsm {
+    margin-left: 25.35211267605634%; }
+  .offset4-xsm {
+    margin-left: 33.8028169%; }
+  .offset5-xsm {
+    margin-left: 42.25352113%; }
+  .offset6-xsm {
+    margin-left: 50.70422535%; }
+  .offset7-xsm {
+    margin-left: 59.15492958%; }
+  .offset8-xsm {
+    margin-left: 67.6056338%; }
+  .offset9-xsm {
+    margin-left: 76.05633803%; }
+  .offset10-xsm {
+    margin-left: 84.50704225%; }
+  .offset11-xsm {
+    margin-left: 92.95774648%; } }
+
+/* END RESPONSIVE-2.LESS ******************* */
+/* BEGIN RESPONSIVE-1.LESS ************** */
+.xxxxxxxx-begin-responsive-480px.less {
+  /* placeholder */ }
+
+@media (max-width: 480px) {
+  .hidden-desktop {
+    display: inherit !important; }
+  .hidden-tablet {
+    display: inherit !important; }
+  .hidden-phone {
+    display: none !important; }
+  .visible-desktop {
+    display: none !important; }
+  .visible-tablet {
+    display: none !important; }
+  .visible-phone {
+    display: inherit !important; }
+  .container {
+    width: auto;
+    padding-left: 15px;
+    padding-right: 15px; } }
+
+@font-face {
+  font-family: 'icoPrimary';
+  src: url("fonts/icons/icoPrimary.eot?timestamp=@@timestamp");
+  src: url("fonts/icons/icoPrimary.eot?timestamp=@@timestamp#iefix") format("embedded-opentype"), url("data:font/woff2; charset=utf-8;base64,d09GMgABAAAAABD0AAsAAAAAIegAABClAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAfBEICroMr2IBNgIkA4EgC1IABCAFgyoHIBupG1GUj1aB7Gdh7HA7jbPiOgkYNpcuoRGZ37q6G3w0QpLZI9q02bs97HSRw5ogEesTAjElSqy0FGpCCRWzJBXR9DXJiydPX7T+Ip7vq3Pv2mcm2W+ShSugqkVXWVfbquUDpNKMTezCAYKwBVR91VU1+/0yazd3Lg9/AVmoSmRNKGStQEmoXKfLdLXNNyxbs5Yfwc8kTV8FeDfk73Xq+p9zCqBT5NCYYSvusE3/f1mxnmQFWA6RnaJdkoqgAvFKLJdQbnlDXMbO3TvsHZa1ZsvFBqhZqAl6879jOe2lIjbiiEUU6HPz354AaHoI7QMGgDpOXQeAvZtjQTfBi9SwGR2SIFAN8E15bK7/byAvdR15B0eq3dPoY80wQNCRBpSOYaquB+mFOI/OPmQdcg6lDWUMzf2mPPFfIgEMIB8Vhmz3g8Q/IzYiOSH/Lz9muMlr/jtGiCJVD2IyIRDYAKCZgxRuYmymuEdFrlK6KIorkyoV0Jgn91QkTcVrHlnDg0jnUvGnTA92OqstI80g6PVEEm6BJ58mg+OFFJIiZSQJRK/PEoSkZFHIMFiIwSg5iVar1xtzjZI/tyLTWigIQa1DY08zd4EUSVJK8Gz82QyGgCCkMyoZr7IHBBsvEoBwgxx6h+4EV3YeZwzc4W52q6lXGM9evr6oy1gTMmP79l5RTsJBClIq7jrFUaLH1BlHKTeOKPwhzFfAQqrZ2mdSzISbZTdbdQl5bjevMrg6SgcDfJsLwZ/gjUAu7PiWjAuyegyQbSvIRz8KdZreQMHJY91AKf2ArQnUq2M6QdzlV0h1cKvJFCQVXWrjZUR+mfsPuqrSKAw7vXHdA4jIfVYLo4QrFyzwSOWFzqWWIKXKCEE+n6FtUFH2YbuLsSii68GKBu9o6y0RSZVJ6FRPGxY6Wb2FSJub7hiVhvKqc+F2ZtFE3vy1GtWhiilfD6YouogRzzUU9QRuchi1FjSJJgeylOAoWaCMiX6CWJbjEw6CqMHl0OrKXnIfH7FAFHoZV2FPGgcTV4VSp4ELLxaGwcusuFYdvr5GheLQpKy5GMVLTbBdzuKpytLgd8xSTL08wGmaatJUkkztzRHn2w1Xct5RnWGYyhc+auWs9aErust7X2pNknPQ2B2xIlkrnvHaZA1jFaxXrNVb3cXM+hsVaV1EXdc/huV7XRgkZtxMJhCI4mMuecG0QWlOcxNicqGmtL5Yl1MtLdMuJZAYGFr+/P8+gr7e06WKrICOPml5b5Sf7tmW1JdFGrwGUEwBf/ugoV77AoqJkjXmTRyNQO+F45oBx8CweKoOWwPZj+aomITyzIUd5nHykU3h0LJjuvrUF2MQTKJTKF3omb9SMBepKzcOhZBoAWkP8+mKQRI+dD7mrTs3znGe6gr/mwGLt422RgkZnEDSK3zTEJuKNuypY3YIlACmD/E9UiDiW2pRpQFoIgY7UcwtdgFPmOI1KptGbgcZMkRPIREEQT6lN2dwYWs3U1lqLIorlivL7I4rN2oukpq/qu/QZiikJ5jZH+SjMMi4EXhLg9b7QhPFhFjkFki1i1pl8SNzSoZkDACAalthJVIMPBQdXQdiqtHyZrzsHFI1T5Gb6wPe+qNx+crLqRAFgeKxDOFLaukLuRIbl/ourN1HPnsxaSqUSLpJAXWIYs5UHlzOXzuteVtoQ9hau02jSTcwSs6UMVxp7dI8ung189KKGvmmpMtZF8G85uXCLcWOprejUii+ko1h/AYKs28W8lVRxlHzLI3XJYBelGiLoBBX01ilMCJwScYKsWmLVkmq3hLYezFPsXpoGkVE5aRiCpXBlhyDAsMTY/jqTSxhSLVsMwKRptxYOTg30SKjXESn43ch5IpJaBAUozLiiL05h3Fv0VN2IQVOPehaVXcThJXuuUP07jSi5YgkX2ndValmfTYCjkkCWR8V63ctCjduimfsyJwyXMMi0V6sJBKjXkPZ56wEKGZTEvPG49iM57DV0TwzvaYbajGyUZv0NuTSsnNYBdvKsVZ80SobcaqLo+xtycdXWB+FcsLCVjAcE0eYu6bcbIAxp3N1M+GWLWpksrCjNS5NMpa365lnKZz9bAw3TUuws386w6Zoq20INqiI5w/boj3XHG9/C3MNubDPWsPY/O5u09KaHVOf+vbCgu3+6z5//jc2vXnoO896lqr8R6+f2/+3/Id9t16NzQwm4gf+PncKN87cnnbF+sZXu3+sH5hdu8N1wRwqX6mdkxYu6pw+sW2997RlbPcH0/ZmTC8raJhvqPKYLvXHRhWudJ1Liu64Nz1W8PzkrZp6Z9LWpSP6fa/kdETO32qo9piy5EebyrZ4nnduD+7TLUhvKr613OaZIfbAshG9RfHkhuZOayS3tCbN4lZQQOUt7CEYG95Y7LrV1nEsHErjtvc7U3FsAU4PVnTl3GUMT+i0jMk+bNV9k3a984q/YP+GVL9/c+pBVZ7Gvrd4a81CErT+ojV89xV8dPwpYSkhdeQFsbU/BImq2YOBHTsCg7NnF7Smp9Vs1IHiwstT7vCvX+e/c8oU/x3r1t/pJwZ5vcwDM5Q4XaliSPRz3lVO0/posZkkb11CSuJ1weOcUyd/YPjR8IEMNpzXWqe+plZfVyty0Ta+hbOS+4Pf5+eQB1TkesscVVylVfWpwqpeIo+ZoNBXpr+m7+D83+FFaR3pYBNKfmNFtoNLqD+VsMNrGbzE/1kJMbia6E+rDmfQxMiOnos7MBPGczniMTmEC0RIN5G5tSsIWTFMdU1VqI6Xpri6VYdDOJypzNwIhQfQq/IHhgEY5LaybdyPNqvkJkJV6tvK2iyFAwbOgV9Wx9VnSraqrlGptkLhKMtVKSz+URWSxvuO4w5c+ZoW+nHfeEuEP8SwJA1THlNe7bQ/rsYFBzQfaIpwlKlCcBEi6ADB/HoNDjMowhoPzicj9C72LEWiQtTTeZbsSH8kbccSNEkpuNMeSQ9V0ZlhnvATXeK1XMiOLlVcNbkokdXLjVbLbcF2Y2BnWSxWtjMQKN8Jesoj7q5ySmoZhELhgawx451aHRErl0sOS5WjK7SR/70L9DPSJxQFHJCod5eSp4TGVrqNha981GKj7l0W2QAYb4DIgf7MRzL6D3oWg0RR8Hob0w/2ZzyS2Y+CrO0HbWQjILQRItofbI/YPtamLAOeQjAgH0d4IjtMVhCykoSZ7YHKsCquropUYZpZHT90yiY4+ECT4RefbRyPNykYkPewzh5K73tqrO/kkiUnfWPHCirpaTkWfa3vxypHHMydVDyqsTnYNtppK0W+fwozn7eXbcxSxhQIuIX6Wr1GH9Sr9SEi9YvM8YU/+8jIKk8QNbnTIquTCzti6ZyeS491FCYtiZvjFpYTzJp41vJp4J6lULO3NnWBM700r7aqrZmaIBZaBzeGbWVzV84YVf1EU853ybe8b7QojW6d5HDbeafdSdEgB2+32+D3NRpj54fZLwvC99mVzccCu8LEiqxx2YNZWEaH0/677E86jRpT8it4PjlV+Mu6J0Vh144nfrg77dq1wLWe/Y6994T//mvZWSjZN5H8ePVdv36Wwf/u1Y8JAkAIsBKbl47Ll9++2wzmu9/e9HFLzbIYIO41PbOPPMdEOCU/3Sg9a3bX57+hFtVv1NVXWUINujqdSpevU+q862up1UEROWGr63KbvtWcZYFjgd1WQeQIQKfv/fRKVdLxpCkCVlC7aAVO2p58udqwMfsljBIv7tt1UNKjATlYVfE1pmhKf10H3qktgGC/kYk6imEfAALQvGuq/BZoxCaUw2EsjWDQX9RTmMJJxqqDJLXLkXA4UU8z1DHto99cmRs9NvfsBpBnVCcfwc3xBfAZHKQp6yrHAetqau7Y/3qvEfPOzguH15gjv45zhAYoTAEAlYrW3iuxRcuBeAgAUCkE0ttVJq/ZnGKiMV2qMXtN5OxaIKljlsAszEVLJyYof/m8/L/cdcydFqyuDKfkeZiudqlBdxIAGK4b9JUNAEBS0cjW0hKqLzrGGiOnh3KQ/zP+avzv3uyVqkr6jqEERzETpZddeWYZuMFzMCckS8bWU8OdbYMBh8s10jG433q4j128fIas0f1p8rkb6jweLnX7OtuL+kpGBcrKgoESn9SsUvR4Pc0KX6atPtKUnJ3lTw6Sw8xTjUZQsArReKdhKA8Z9axQK95JCQIbf6d4dVoFXum8/L+RPeZOzU+iJ4+kzV/xyvj1IhSXlObJifEYeN2dxp+mD3oyxtTWTEjLz2e60vNVeAbz3vOiChblVxi/NFbko0rPy+6g473UEa6BhoHqSRNqfVRa3Zz9L9FcPLKtpDTQVjywaMCVMuJm0JFLXsOki3ypXQ70cBq6yXYAgEmkm0C6ZmZzjMlyCROr6iq6K1Zs7MovYVA47f9pWVit40j6vHVwGk/4uay9spjYHWVCzCIMeS7ceBFT4sNoRzwPXw8b/4KIjNR2D+hitbmpNR9o86D4fgvE4DgMWLpa1aARLEtHarsBwkeHS20xkbBYWCwsnsd7PCixPw2A8gwfyq3D5A8Mhu/kYWNu5IP+rfKHhvF4EcYMAOT+kX3gyOjgct+RvgW99/bc+9z5vp4+wyP3Htnx8PupRCcPPCfxIznC8Yh7PMBL3FtWTrcBOMK32gxsKw22MVvMd9ga1ZzZ3+N2thOtW3R/Z88Do5MDPzmEW/zAvoN37evbJ++7d9+F3fLaiznEQ/7Gp5K2Jw8OmgJasSIPEpK3UzRDYiWL8KxtIc2veoLtVb+vYS8K+/MXt7erb7Bu9U2WvS5eavPNPl/Fq+ol0Tlzoxnq1WS5trnU5LReMjlMTxQvdmm411KfpVyhbFzALMcLnn7llvEH1e+z6sfZCer3QJ4ozNngqVQ8oPAiWV332kDBUz0DlqjlkpUniltC1ktm3OZRj7ZDe4nEtHFtjFw6J46fLsQdzCbqh5kOvOkqu3czy/E2vJzB8xBjE47hSeAQUDQ+NIIJJHcgc33JO5go3T5nbvdKNih/LyMcY/AKjIRcPkhVk/UiuI5Kobe/Wfmb29tOdK4Y3xGNAZo99oRLIycsxqF/53E//4rOrZ7IcyUrz1zamdx7l22wa9VPbTt/+3RpwS7XGPXTfznuQ4seHl/I1Bfh7v704h7DbJ1YrZ9fk1Cjh89vud1+e6Dn9oLND1k2nyGb15Py4uQHm/bPPjd6TvWE86Nnb7oWF5eHKmfisSDQBo638MeOe4u9vwwNv3pLvPs/SCLXK3U61/uidPwYDwAaoAEAXk1sFTnoJryR2CFc6H1YnqgROygXnEj8QI9B6wABAAJ4aV5G3xSx/DcViwEA4HX9bwcnNv8/hYF6CgBUCoBj8/ctSgEwLfAaYK1MjKj3JKNalv6Np+hn6IVTECHLyhCO9gGOC0EIQwCL8Cq+AZgJs8mkBPDCFHwJcAOWw3x4DAZhFkRgrBZK8p8ApGFPeAVEoOa7qxHgnjy5EWikZwYFSliTQYMGqgAL+zIYYCE5QwEamBTUgAXu+SEdYXWNHjSQQYEAm5G2CX7EEE5kMCBDFiogxGbRQD5cnhVZ8IcXEWAWRGABBGDxrs+DaZm26jMzoXkuN4Qh+sQlDhpwMeaDHfLABW7SRUiQ/qzjCjAKohCDZTA3bBHS848Uz/MxDNlf8H9qtgQaVMKluR6D6M4VxWl3PQozoE+HVbPq54ZtzPEO3AU0bAAAAAA=") format("woff2"), url("data:application/font-woff; charset=utf-8;base64,d09GRgABAAAAACJAAAsAAAAAIfQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgEAQFaGNtYXAAAAFoAAAAfAAAAHy9F7zuZ2FzcAAAAeQAAAAIAAAACAAAABBnbHlmAAAB7AAAHRgAAB0Yg9YlNWhlYWQAAB8EAAAANgAAADYLSS2jaGhlYQAAHzwAAAAkAAAAJAbOAvZobXR4AAAfYAAAAKAAAACglK4SEGxvY2EAACAAAAAAUgAAAFKIhIEEbWF4cAAAIFQAAAAgAAAAIAA4ANNuYW1lAAAgdAAAAaoAAAGq0IdVx3Bvc3QAACIgAAAAIAAAACAAAwAAAAMD6QGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6jwCzP7NATMCzAEzAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAGAAAAAUABAAAwAEAAEAIOkb6SLpJekn6WzqPP/9//8AAAAAACDpAOkf6SXpJ+ls6jz//f//AAH/4xcEFwEW/xb+FroV6wADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAYACf7JA/0CtwASAC0ATABzAJgArQAAFx4DMzI+AjcOAyMiJicFMj4CNz4BNz4BNw4DIyIuAiceAzMnIi4CJxQWFx4BFx4DMzI+Ajc+AT0BDgMjAQ4BBwYWFx4DMzI+Ajc2NCcuAScWDgIjIi4CNT4BNTIwIyUeARUUDgIjIiY1NDY3DgEHDgEVFB4CMzI+AjU0JicuAScnLgEjIgYHDgEVFBYzMj4CNTYmJ8ogSE5ULDBbVE0hDzlUbkN1mSgBWC9gWk8dEh4PCRAGHGuLpFU8eWxXGRddf55YiGGQYzYHBAQCDQsXU3mhZYqwaC0GCQsJda3SZv6cCxYEAgMCDEmExolTkXBJCwQEBxELAXarvEZKhmQ7AgQCAgMXAgE+c6VmmFcJCxMjEQcHVIeqVluGWCoPEw0ZDUo6gElJgzoRFJCEQXFUMAIPD84ZJxsOESEuHQodGxQqGBoNGiYaDCYYDiEPKUQvGhMmOCYzTjQb3ig8Rx8VMBMJGA0YNy8eJzY2DxVGIh0lUEMsAaIVQRMJCgcYPDMjFCc5JQ0fExUwEzFQOB8cMEIlCxEGogIFBBU2LyBWJQwaDRMlFQgQBCY+LBgbKzYbExsWDRYKNiIlJSQJEgogORIcJBIGDggAAAEA+gCaAw0A5gANAAAlISImNTQ2MyEyFhUUBgLg/kAOGBURAcYPGBqaFRERFRURERUAAAACAAD+wAQAAsAAEwAnAAABIi4CNTQ+AjMyHgIVFA4CAyIOAhUUHgIzMj4CNTQuAgIAarqLUVGLumpquotRUYu6al+of0pKfqlfX6h/Skp+qf7AUYu6amq6i1FRi7pqarqLUQPQSn6pX1+of0pKf6hfX6h/SgAAAAADAEn/UgO3Ai4AEAAgADAAAAEhIgYdARQWMyEyNj0BNCYjESEiBh0BFBYzITI2PQE0JgMhIgYdARQWMyEyNj0BNCYDkvzcDxYWDwMkDxYWD/zcDxYWDwMkDxYWD/zcDxYWDwMkDxYWAi4WD0kPFhYPSQ8W/tsVD0oPFRUPSg8V/twWD0kPFhYPSQ8WAAQAqv8VA1YCawAPAB0AKgA7AAABISIGFREUFjMhMjY1ETQmAyMiJjU0NjsBMhYVFAY3DgEHBiY3PgE3NhYHNxQGIyEiJjURNDYzITIWFREDIv28Fh4eFgJEFh4ew0QJDQ0JRAkMDIQCEgwWHwQDEgwWHwUbDAj97ggLCwgCEggMAmseFf0QFR4eFQLwFR785QwJCQ0NCQkMDQwSAgQfFQwSAwQfFmwIDAwIAlYICwsI/aoAAAYAnP8VA2QCawAQACEASABUAGEAbwAAATQmIyEiBhURFBYzITI2NREDISImNQM0NjMhMhYVERQGIwMRFAYjISImNTQ2MyEyNjURNCYjISIGFREUBiMiJjURNDYzITIWFQMiBhUUFjMyNjU0JgciJjU0NjMyFhUUBiMnFAYrASImNTQ2OwEyFgNkHRT9mhQdHRQCZhQdMf2aCxABEQsCZgwQEAwYEg3+CAUGBgUB+AQFBQT+CAQFBwQFBhINAfgNElERGRkREhgYEggNDQgJDAwJTQYEVgQGBgRWBAYCOxQcHBT9ChQcHBQC9vzvEAsC9gsQEAv9CgsQAtT92Q0RBgUEBgUEAicDBQUD/pQEBwcEAWwMEhIM/ZwYEREYGBERGD0MCAgMDAgIDBQEBgYEBQYGAAAAAgBj/24DnQIBACIAMwAAASEiBhURFBYzIRUjIgYVFBYzITI2NTQmKwE1ITI2NRE0JiMDFAYjISImNRE0NjMhMhYVEQNp/S4WHh4WAU2IDBAQDAFIDBAQDIgBTRYeHhYFDAn9YgkMDAkCngkMAgEeFf5IFh47EQwLERELDBE7HhYBuBUe/i8JDAwJAYQIDAwI/nwAAAMAdf9/A4sCGgAiADIAWQAAASEiBhURFBYzIRUjIgYVFBYzITI2NTQmKwE1ITI2NRE0JiMTFAYjISImNRE0NjMhMhYVBxEUBiMhIiY1NDYzITI2NRE0JiMhIgYVERQGIyImNRE0NjMhMhYVA2X9NhAWFhABWpkEBwcEAUgEBwcEmQFaEBYWEBEKB/02BwoKBwLKBwonDgr9yQQHBwQCNwECAgH9kgECBgUEBg4KAm4KDgIaFw/+CRAWQgcEBAcHBAQHQhYQAfcPF/3jBwkJBwH3BwkJBzD+bgoOBgUEBgIBAZIBAgIB/vYEBwcEAQoKDg4KAAADAQT/DwL8AngAHAAqADsAAAEuASsBIgYHDgEVERQWFx4BOwEyNjc+ATURNCYnAyMiJjU0NjsBMhYVFAY3FAYjISImNRE0NjMhMhYVEQKrJHUPBg91JCgpKSgkdQ8HDnUkKCkpKIBWDRISDVYNEhKLDAj+oggMDAgBXggMAnMDAgIDBCsm/UolKwQDAgIDBCslArYmKwT82BINDRITDA0ShwgMDAgCFgkMDAn96gAAAAIAAP7ABAACwAATACcAAAEiLgI1ND4CMzIeAhUUDgIDIg4CFRQeAjMyPgI1NC4CAgBquotRUYu6amq6i1FRi7pqUIxoPD1ojE9QjGg8PGiM/sBRi7pqarqLUVGLumpquotRA4A8aIxQUIxoPD1ojE9QjGg8AAAAAAEAAP7ABAACwAAoAAABBx4BFRQOAiMiLgI1ND4CMzUiDgIVFB4CMzI+AjU0LgInA2lYMzw9aIxPT4xoPT1ojE9quotRUYu6amq6i1EVJzgjAilbM4xPT4xoPT1ojE9PjGg9gFGLumpquotRUYu6ajVlXFEiAAAAAAIA+v+6Aw0BxgANABsAAAUiJjURNDYzMhYVERQGNyEiJjU0NjMhMhYVFAYCAA4YFRERFRjS/kAOGBURAcYPGBpGFREBwA4YFRH+Og8R4BURERUVEREVAAAFAQD/DAMAAnsAHAA6AEkAVwB+AAABLgEjIgYHDgEVERQWFx4BMzoBMTI2Nz4BNRE0JhMUBgcOASMiJicuATURNDY3PgEzOgExMhYXHgEVEScjIgYVFBY7ATI2NTQmIxUjIiY1NDY7ATIWFRQGExEUBiMhIiY1NDYzITI2NRE0JiMhIgYVERQGIyImNRE0NjMhMhYVAqsngAQEgCcqKysqJHMQAgIEgCcqKysVHyIngQEBgSciHx8iI3YNAgEBgSciH79WERgYEVYRGBgRVggMDAhWCAwMlRMN/rAFBgYFAVAFBgYF/rAFBgYEBQYTDQFQDRMCdgQBAQQDLSj9SictBAMBAQMELScCtigt/PUfIAMEAQEEAyAfArYfIQMEAQEEAyEf/UorGBERGRkRERg+DAkIDAwICQwCnf3hDhIGBQQGBgUCHwQGBgT+fwQGBgQBgQ0SEg0AAAMAVf8VA6sCawAUAC4APwAAJRQOAiMiLgI1ND4CMzIeAhUFMzQ2NTQmIyIGFRQWNz4BMzIWFRQGBwYWMQcUFjsBMjY9ATQmKwEiBh0BA6tDdJxYWJx0Q0N0nFhYnHRD/iM+lFNKU040AQUwNigtgQgBAQ0VFAoUFhYUChQVwFicdENDdJxYWJx0Q0N0nFhoTzBdOEhVIh8LAiM8JiA7KmgHAnEUFBQUCRQWFhQJAAAAAwBV/xUDqwJrABQAKwA7AAAlFA4CIyIuAjU0PgIzMh4CFSUTHgE7ATI2NxM2JicuASsBIgYHDgEXEzQmKwEiBh0BFBY7ATI2NQOrQ3ScWFicdENDdJxYWJx0Q/4cGAEKEQkRCwIXAgQHBxMMFAwTBwcEAnQcGgsZHBwZCxocwFicdENDdJxYWJx0Q0N0nFjg/vQIGxkLAQoPFwcIBwcIBxcO/kQZHBwZChkcHBkAAAACARr/YQLmAh8AIQAyAAAlPgM1NCYjIgYHBiY1ND4CMzIWFRQOAgcOASMiJjcTMzI2PQE0JisBIgYdARQWMwGvATlENzQxQ0AFAVwcOVc7bHk8ST8CAx4XGiECMRAhJCMiECEhIx91QkAlICImK04rAxA2GzoxIGVSQD8sLi8ODRgY/uwhIA0iISIhDSAhAAACANL/hAMrAesAEQAjAAAXIiYnJjQ3ATYyFxYUBwEOASMhIiYnASY0NzYyFwEWFAcOASP3ChIJDg4CDw8qEQ8P/fEIEgsCDwsSCP3xDg4PKhECDw8PCRIKfAgGDyoRAg8PDw8qEf30CAkIBgIPDyoRDw/98Q4qEgYIAAAAAgAA/sAEAALAABMAJwAAASIuAjU0PgIzMh4CFRQOAgMiDgIVFB4CMzI+AjU0LgICAGq6i1FRi7pqarqLUVGLumpfqH9KSn6pX1+of0pKfqn+wFGLumpquotRUYu6amq6i1ED0Ep+qV9fqH9KSn+oX1+of0oAAAAAAQDV/4oDLgHcABYAAAkBDgEjIiYvASY2Nz4BHwEBPgEXHgEHAy7+yQgcDw4ZCb8LAw0NJg2jASILJhAQCAoBnP4MDhANC/AOJgwMAQySAZAPBwsKJhAAAAMAaP9SA5kCLgAuAEUAVQAABRQGBw4BIyEiJicuATU0MDE8ATE0NjU+ATcBPgEzMTIWFwEeARcUFhUwFhU4ARUBFx4BOwEyNj8BNiYnLgErASIGBw4BFxM0JisBIgYdARQWOwEyNjUDmRANDiUU/ZcVJQ4NDwECCAYBNQ4rGRkrDgE1BggCAQH+PRIBBwwHDQcCEQIEBQQOCQ8JDgUFBAJWFRMIExQUEwgTFVwRIQsLCgoLCyERAQEBBAgEChUKAhcZHh4Z/ekKFQoECAQBAQEBkcUGFBMIxAoRBgUGBgUGEAv+uRMVFRMHExQUEwAAAAEAav+DA6EB/QBIAAABIS4BJy4BKwEiBhUUFjsBEhY5AR4BFw4BFRQWMzI2NTQmJzMUBhUUFjMyNjU0JicmIisBIiYnITgBMzgBMTI2PwI0NjU0JiMDcf3hBQkEAg8KnwsREQuIPhcJJR4DBCodHSoBAYwBKR4dKiYaAgQB/zQsCQGTAREaBD4BAR0TAZoVJxEJDREMCxH+7mQmMw0HDwgdKiodBAcDAwcEHSoqHRwoAgEhHRQQ6QUCBAIUHQAAAAQAXf9zA6QB5wAuAGsAkwCuAAAlMCIxISImNTQ2MzEFMDI5ATI2PwEwNDU0JiMhIiY1NDYzMSEyFhUcARUPAQ4BIxcUBiMiJjU8ATcjHAEVFAYjIiY1NDY3LgEnMCYDIyImNTQ2OwEyFhcUHgIVHgEXPgEzMhYXMz4BMzIWFSUxLgEnOAExLgEnLgEjIgYHMQ4BBzgBMQ4BBzEOARUUFjMyNjU0JjUFNCYjIgYHMQ4BBzgBMQ4BBzEUBhUUFjMyNjUDNgH+bwQHBwQBkQEKDgI/EAv96wQGBgQCFRQcAT4EGhElMCEiMAGYMCEiMAYGExoIF0GWBAYGBJ4EBgEcIhwHFhALHREZKQmjCigZIjD+sAEBAQEDAQgbEAsUCAIEAgEDAgMFJBkZIwEBOyQYERoIAgMBAQEBASQZGCRLBwQFBgELCe0DAQsQBwQEBx0UAgQCBekQFIchMDAhAwUDAwUDITAwIQwVCRAwIGUBHwYFBAYEBAJ6k3sCHSkOCwwcFhYcMCILAwUDAwUCDRAIBwIDAgMEAgcPCBgkJBgDBQMLGSQQDQIFAwMFAwMFAxgkJBgAAAABADP/MQPNAlUANQAAJTQmIyE1NC4CIyIOAh0BOAExFBYzMjY1OAE5ATU0NjMyFh0BIyIGFTERMRQWMyEyNjUxEQPNIBb+eiZBVzEyV0ElHRUUHVI6OVILFyAgFwH0FyChFh+YMFQ/JCQ/VDAdFR0dFR03TU03mB8W/sQWHh4WATwAAAAEAF//SgOhAjYADQAbAG4AgAAABSEiJjU0NjMhMhYVFAYnISImNTQ2MyEyFhUUBjc0JiMhNTQuAiMiDgIdARQWFx4BMzI2PQE0NjMyFh0BFBYzMjY9ATQmIyIGHQEUBiMiJicuAT0BND4CMzIeAh0BIyIGBxEeATMhMjY3MxEDFAYjISImNRE0NjMhMhYVERUDMf7HBQYGBQE5BAcHBP7HBQYGBQE5BAcHbCIX/rQjPFEuLlI8IwgIBxIKEyBHMjJHBgQFBlM7O1QVCAYLBAQFIDdJKilKNiBHFyEBASEXAagVHwQBFRUP/lgOFRUOAagPFT8GBQQGBgQFBnYHBAQHBwQEB1YWIZwsTjoiIjpOLEILEwcFBxkYQjBFRTBCBAYGBEI5UVE5QhALAwQDCwZCKEY0Hx80RiicIRf+9RcgGhIBF/70DhQUDgELDhQUDv79CAAAAgDP/zEDMQJVACAAKgAAJTQmKwE1NC4CIyIOAh0BIyIGFTERMRQWMyEyNjUxESU0NjMyFh0BITUDMSAXCyVBVzIxV0EmCxcgIBcB9Bcg/kRSOTpS/umhFh+YMFQ/JCQ/VDCYHxb+xBYeHhYBPM03TU03mJgAAAAABQDN/xQDMwJsAB8ARABdAGsAeQAAJTQmJzU0LgIjIg4CHQEOAQcjERUzHgEzITI2NzMRATIeAh0BIzU0JiMiBh0BFBYzMjY9ATQ2MzIWHQEhNTQ+AjMBFAYjISImJzURNT4BMyE4ATkBMzIWFRMHJyEiJjU0NjMhMhYVFAYnISImNTQ2MyEyFhUUBgMzIBcoRFw0NFxEKBQeBAEBBCQXAeYXJAQB/s0wVD4lRl5DQl4GBQQGUjk6Uf6PJD9ULwEdGRH+GhIYAQEZEQGJXREZAQFp/pkFBgYFAWcEBgYE/pkFBgYFAWcEBgaFFyIDuTJYQiYmQlgyuQIcFP7DCxUeHhUBPgHRIjxQLri4QFxcQEoFBgYFSjhOTji4uC5QPCL8/BEXFxEDASwDERgYEf7ZC0sGBAUGBgUEBocHBAQHBwQEBwAADQB2/1QDhQJQACIAMgBCAEkAWQBpAHkAiQCZAKAAsADAANAAAAEjNTQmIw4BHQEhNTQmIw4BHQEjIgYVERQWMyEyNjURNCYjARQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhUnLgE1MxQGExQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhUTFAYrASImPQE0NjsBMhYVNRQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhU3MxQGJy4BExQGKwEiJj0BNDY7ATIWFTUUBisBIiY9ATQ2OwEyFhU1FAYrASImPQE0NjsBMhYVA2ZhGRERFv6TGRERFmENEhINAtENEhIN/c8GBXEEBgYEcQUGBgVxBAYGBHEFBhgRFlEZuQYEcQUGBgVxBAYGBHEFBgYFcQQGsgYEcQQGBgRxBAYGBHEEBgYEcQQGBgRxBAYGBHEEBhtRGRERFpgGBHIEBgYEcgQGBgRyBAYGBHIEBgYEcgQGBgRyBAYB/ikRGAEaESYpERgBGhEmEg39lA0SEg0CbA0S/ZoFBgYFbAUGBgVCBAYGBG0EBgYE+gEXERIY/ewFBgYFbAUGBgVCBAYGBG0EBgYE/uUFBgYFbAUGBgVCBAYGBG0EBgYEQQQGBgRtBAYGBHUSGAEBF/3TBQYGBWwFBgYFQgQGBgRtBAYGBEEEBgYEbQQGBgQAAA8Abv9mA5ICdwApAC4AMgA2ADoAPgBCAFAAXgCEAIkAkQCVAJkAoQAAJTgBNRE0JisBNTQmIyIGHQEhNTQmIyIGHQEjIgYVERQWMyEyNjUROAE1BTMVIzU7ARUjJSM1MwcjNTMXMxUjNzMVIwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUnNDY7ARUUFjMyNj0BIRUUFjMyNj0BMzIWFREjNTMyNjU0JiMhNRcVIzUzAyImPQEzFSMzNTMVMzUzFTMjNTMVFAYjA5IeFkweFRUf/qkeFRUeTBYeHhYCvBYe/PGyssirqwFwr6/Fq6sWr6/Fq6sQEQ0MEhIMDRH+QhIMDBISDAwSgBINTB4VFR4BVx8VFR5MDRGsMAQHBwT9g7KyspMNErKTqasWr6ONqxENwQEBMRUfHBYeHhYcHBYeHhYcHxX9phUeHhUBJwELlpaWq6KioreWlpYCIw0REQ1RDBISDFENERENUQwSEgwBDBIfFR4eFR8fFR4eFR8SDP7YogYFBAZxhqKi/g4SDHKQkJCQkJByDBIAAAAAAQC6/3kDSAIHAB8AACUUBisBFRQGIyImPQEjIiY1NDY7ATU0NjMyFh0BMzIWA0gpHrkpHh0quR0qKh25Kh0eKbkeKcAdKrkdKioduSodHSq5HSoqHbkqAAEAuQB5A0cBBwANAAAlISImNTQ2MyEyFhUUBgMA/gAdKiodAgAdKip5Kh0dKiodHSoAAAAGAGn/ZAOdAhYADQAbADoARwBWAGcAAAE0JisBIgYVFBY7AT4BFzQmIyEiBhUUFjMhPgEXIzU0Ji8BLgEjISIGFREjIgYdARQWMyEyNj0BLgEjATQ2MyEVFBY7ARUhEQMiJjU0NjsBMhYVFAYrAQUUBiMhIiY9ATQ2MyEyFh0BAiYMC6oJDgwLqgsMig0L/tAJDw0LATAJD6w9CAdsBxMJ/oYRGDoYIyMYAr4YIwMkGv26CAcBRwgEb/4vWwkODAtbCQ4MC1sCLAgG/k4GCAgGAa8GCAFKCA8NCgsNAg1PCQ4MCwsNAwxD0gkUBm0GCBcS/rYjG8cYIiIYxx0kASoHCG8FB8EBLf5sDQsJDgwLCQ+ABwgIBxEHCAgHEQAAAAAIAGP/XgOfAh8AEAAhAC8APQBLAFkAhACHAAAFISImPQE0NjMhMhYdAQ4BIwEiBh0BFBYzITI2PQE0JiMhFzQmKwEiBhUUFjsBMjYFNCYjISIGFRQWMyEyNgM0JiMhIgYVFBYzITI2JzQmKwEiBhUUFjsBMjYlJy4BIyEiBhURFBYzMjY1ETQ2MyEyFhcVFBY7ARQWHQEUFjMyNj0BLgEnJxcjA1z9SBonJxoCuxomAica/UgSFxcSArsSFxcS/UWeBwWBBAcHBIEFBwGOCAT+eAQICAQBiAQIGAcE/qMEBwcEAV0GBbUHBacEBwcEpwUHAQRsCRgL/q0WHwcFBAgTDQFTAgUCBwV9AwgEBAgFCgl4Z2eiJhrHGyYmG8caJgEzFxLHERgYEccSFzcEBwcEBQcHjgUHBwUEBwcBSQQICAQECAhQBQcHBQQIBk9tCAkfFv7/BAgIBAEBDhABAn4ECAIEA4kECAgEiQ4bBltmAAIAWP8VA60CawAUACsAAAEiDgIVFB4CMzI+AjU0LgIjFwEOASMiJi8BJjY3NjIfARM+ARceAQcCAlibdENDdJtYWZt0Q0N0m1nz/v4IFg0MFAifCQILCx8Mh/IJIA0NBwkCa0N0nFhYnHRDQ3ScWFicdEP1/l8LDQoJyAwfCwoKegFODAYJCCANAAAAAwBV/xUDqwJrABQAIQAuAAAlFA4CIyIuAjU0PgIzMh4CFQUyNiMuATcTIwMGFjMTMjY1NCYjIgYVFBYzA6tDdJxYWJx0Q0N0nFhYnHRD/j4hDAEYDAY3RTgJGyY5FRcVFBUXFRTAWJx0Q0N0nFhYnHRDQ3ScWPohAhYbAQb++ygtAaMbEw8RGxMOEgABAHb/QQOKAi4AKAAAATYyHwEeAR8BHgEPAQ4BHwEWBi8BJiIPAQYmPwE2Ji8BJjY/AT4BPwEB5QsgC1ELNBm1GQoSgxIUBB8FGhehF0AWohcZBB8EFBKDEgoZtRk0C1ECLhcXoxcmAxsDHxJ/Ej0ZtBkSC1UMDFULEhm0GT0SfxIfAxsDJhejAAAAAAEAmv/vA1cBfQAZAAATNDY3NjIfATc2MhcWFAcBDgEjIiYnAS4BNZoKChQ4FPT0FDkUFBT+7w0kExMjDv7wCgoBTA0ZChQU9PUUFBQ4FP7uDQ8PDQERChkNAAAAAQAAAAEAAJw5MTFfDzz1AAsEAAAAAADUFPWTAAAAANQU9ZMAAP7ABAACwAAAAAgAAgAAAAAAAAABAAACzP7NAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAAKAQAAAAAAAAAAAAAAACuAAAEAAAJBAAA+gQAAAAEAABJBAAAqgQAAJwEAABjBAAAdQQAAQQEAAAABAAAAAQAAPoEAAEABAAAVQQAAFUEAAEaBAAA0gQAAAAEAADVBAAAaAQAAGoEAABdBAAAMwQAAF8EAADPBAAAzQQAAHYEAABuBAAAugQAALkEAABpBAAAYwQAAFgEAABVBAAAdgQAAJoAAAAAAAoAFAAeAQ4BKAFkAaoCBAKeAugDYgO6A/YEMgReBQoFYgW6BgIGQAZ8BqgHIAeACFoInAlGCYIKJAsuC/4MKgxEDNQNjA3SDhgOXg6MAAAAAQAAACgA0QAPAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAoAAAABAAAAAAACAAcAewABAAAAAAADAAoAPwABAAAAAAAEAAoAkAABAAAAAAAFAAsAHgABAAAAAAAGAAoAXQABAAAAAAAKABoArgADAAEECQABABQACgADAAEECQACAA4AggADAAEECQADABQASQADAAEECQAEABQAmgADAAEECQAFABYAKQADAAEECQAGABQAZwADAAEECQAKADQAyGljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeVZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeWljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeVJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb1ByaW1hcnkAaQBjAG8AUAByAGkAbQBhAHIAeUZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("woff"), url("fonts/icons/icoPrimary.ttf?timestamp=@@timestamp") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+[class*="icon-primary-"],
+.nav-links a:after,
+.bellyband-link a:after,
+.breadcrumb > li:after,
+.checkbox input:checked + .skin:after,
+.checkbox input.indeterminate + .skin:after,
+.checkbox input:indeterminate + .skin:after,
+.selectWrap.large:before,
+.form-row.error .error-msg:before,
+.close:before,
+.reset-field:before,
+.cssIcon-globe:before,
+.selectWrap:after {
+  color: #0568ae;
+  display: inline-block;
+  font-family: 'icoPrimary' !important;
+  font-style: normal;
+  font-size: 20px;
+  font-weight: normal;
+  font-variant: normal;
+  height: 1em;
+  margin-right: 7px;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  speak: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  width: 1em; }
+
+[class*="icon-primary-"]:before,
+[class*="icon-primary-"]:after {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 1em;
+  height: 1em;
+  position: relative;
+  top: 0;
+  left: 0;
+  vertical-align: middle;
+  width: 1em; }
+
+.icon-primary-att-globe:before,
+.cssIcon-globe:before {
+  content: "\e900";
+  color: #44c7f5; }
+
+.icon-primary-hamburger:before {
+  content: "\e903"; }
+
+.icon-primary-secure:before {
+  content: "\e918"; }
+
+.icon-primary-secureL:before {
+  content: "\e919"; }
+
+.icon-primary-padlockopen:before {
+  content: "\e916"; }
+
+.icon-primary-padlockopenL:before {
+  content: "\e917"; }
+
+.icon-primary-shoppingcart:before {
+  content: "\e914"; }
+
+.icon-primary-shoppingcartL:before {
+  content: "\e915"; }
+
+.icon-primary-print:before {
+  content: "\e921"; }
+
+.icon-primary-printL:before {
+  content: "\e922"; }
+
+.icon-primary-mobilesmartphone:before {
+  content: "\e908"; }
+
+.icon-primary-mobilesmartphoneL:before {
+  content: "\e90c"; }
+
+.icon-primary-tablet:before {
+  content: "\e904"; }
+
+.icon-primary-tabletL:before {
+  content: "\e905"; }
+
+.icon-primary-tv:before {
+  content: "\e906"; }
+
+.icon-primary-tvL:before {
+  content: "\e907"; }
+
+.icon-primary-calendar {
+  width: 100% !important; }
+
+.icon-primary-calendar:before {
+  content: "\e91a";
+  z-index: 1; }
+
+.icon-primary-calendarL:before {
+  content: "\e91b"; }
+
+.icon-primary-star:before {
+  content: "\e96c"; }
+
+.icon-primary-close:before,
+.close:before,
+.reset-field:before {
+  content: "\e910"; }
+
+.icon-primary-down:before {
+  content: "\ea3c"; }
+
+.checkbox input.indeterminate + .skin:after,
+.icon-primary-subtractminimize:before {
+  content: "\e920"; }
+
+.icon-primary-add-maximize:before {
+  content: "\e91f"; }
+
+.icon-primary-check:before,
+.checkbox input:checked + .skin:after {
+  content: "\e912"; }
+
+.icon-primary-questionmark:before {
+  content: "\e90f"; }
+
+.icon-primary-badgealert:before,
+.form-row.error .error-msg:before {
+  content: "\e90e"; }
+
+.icon-primary-approval:before {
+  content: "\e925"; }
+
+.icon-primary-flat-info:before {
+  content: "\e927"; }
+
+.icon-primary-alert:before {
+  content: "\e913"; }
+
+.icon-primary-tooltip:before,
+.icon-primary-flat-faq:before {
+  content: "\e90d"; }
+
+.icon-primary-tooltip {
+  font-size: 20px; }
+
+.nav-links a:after,
+.bellyband-link a:after,
+.breadcrumb > li:after,
+.icon-primary-right:before {
+  content: "\ea3c";
+  transform: rotate(-90deg); }
+
+.icon-primary-left:before {
+  content: "\ea3c";
+  transform: rotate(90deg); }
+
+.icon-primary-accordion-plus:after,
+.icon-primary-collapsed:after,
+.icon-primary-accordion-minus:after,
+.icon-primary-expanded:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  z-index: 1; }
+
+.icon-primary-accordion-minus,
+.icon-primary-expanded,
+.icon-primary-accordion-plus,
+.icon-primary-collapsed {
+  font-size: 20px !important; }
+
+:not(.ds2-no-colors) .icon-primary-accordion-minus:before,
+:not(.ds2-no-colors) .icon-primary-expanded:before {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20fill%3D%22%230568ae%22%20d%3D%22M15.1%2011.3H5.9c-.4%200-.8-.3-.8-.8s.3-.8.8-.8h9.3c.4%200%20.8.3.8.8s-.4.8-.9.8z%22%2F%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M10.5%2021C4.7%2021%200%2016.3%200%2010.5S4.7%200%2010.5%200%2021%204.7%2021%2010.5%2016.3%2021%2010.5%2021zm0-20C5.3%201%201%205.3%201%2010.5S5.3%2020%2010.5%2020s9.5-4.3%209.5-9.5S15.7%201%2010.5%201z%22%2F%3E%3C%2Fsvg%3E");
+  content: ""; }
+
+:not(.ds2-no-colors) .icon-primary-accordion-plus:before,
+:not(.ds2-no-colors) .icon-primary-collapsed:before {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20fill%3D%22%230568ae%22%20d%3D%22M10.5%2015.9c-.4%200-.8-.3-.8-.8V5.9c0-.4.3-.8.8-.8s.8.3.8.8v9.3c0%20.4-.4.7-.8.7z%22%2F%3E%3Cpath%20fill%3D%22%230568ae%22%20d%3D%22M15.1%2011.3H5.9c-.4%200-.8-.3-.8-.8s.3-.8.8-.8h9.3c.4%200%20.8.3.8.8s-.4.8-.9.8z%22%2F%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M10.5%2021C4.7%2021%200%2016.3%200%2010.5S4.7%200%2010.5%200%2021%204.7%2021%2010.5%2016.3%2021%2010.5%2021zm0-20C5.3%201%201%205.3%201%2010.5S5.3%2020%2010.5%2020s9.5-4.3%209.5-9.5S15.7%201%2010.5%201z%22%2F%3E%3C%2Fsvg%3E");
+  content: ""; }
+
+.ds2-no-colors .icon-primary-accordion-minus:before,
+.ds2-no-colors .icon-primary-expanded:before {
+  background-image: none;
+  content: "\e901"; }
+
+.ds2-no-colors .icon-primary-accordion-minus:after,
+.ds2-no-colors .icon-primary-expanded:after {
+  content: "\e902"; }
+
+.ds2-no-colors .icon-primary-accordion-plus:before,
+.ds2-no-colors .icon-primary-collapsed:before {
+  background-image: none;
+  content: "\e90b"; }
+
+.ds2-no-colors .icon-primary-accordion-plus:after,
+.ds2-no-colors .icon-primary-collapsed:after {
+  content: "\e911"; }
+
+.icon-primary-circle-arrow {
+  outline: 1px solid transparent;
+  border-radius: 50%;
+  font-size: 20px !important;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+  margin-right: 7px; }
+
+.icon-primary-circle-arrow:after {
+  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20baseProfile%3D%22tiny%22%3E%3Ccircle%20r%3D%2217%22%20cy%3D%2218%22%20cx%3D%2218%22%20stroke-width%3D%221%22%20fill%3D%22transparent%22%20stroke%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E");
+  content: "";
+  position: absolute;
+  top: 0;
+  z-index: 2; }
+
+.icon-primary-circle-arrow:before {
+  border-radius: 50%;
+  content: "\ea3c";
+  font-size: 12px;
+  top: 0;
+  position: absolute;
+  transform: rotate(-90deg);
+  width: 20px;
+  z-index: 1; }
+
+[class*="icon-primary-"] [class*="icon-primary-"] {
+  display: inline-block;
+  float: left;
+  font-size: 1em;
+  margin-left: -1em;
+  position: absolute; }
+
+[class*="icon-primary-"].white {
+  color: #fff; }
+
+[class*="icon-primary-"].black {
+  color: #000; }
+
+[class*="icon-primary-"].blue {
+  color: #0568ae; }
+
+[class*="icon-primary-"].green {
+  color: #007a3e; }
+
+@-webkit-viewport {
+  width: device-width; }
+
+@-moz-viewport {
+  width: device-width; }
+
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
+@viewport {
+  width: device-width; }
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.clearfix:after {
+  clear: both; }
+
+.pull-right {
+  float: right !important; }
+
+.pull-left {
+  float: left !important; }
+
+.float-children-left:before,
+.float-children-left:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.float-children-left:after {
+  clear: both; }
+
+.float-children-left > div {
+  float: left;
+  white-space: nowrap; }
+
+.block {
+  display: block !important; }
+
+.inline {
+  display: inline !important; }
+
+.inline-block {
+  display: inline-block !important; }
+
+.table-cell {
+  display: table-cell !important;
+  width: 1%;
+  vertical-align: middle; }
+
+@media (max-width: 767px) {
+  .full-bleed {
+    width: auto;
+    margin-left: -15px;
+    margin-right: -15px;
+    padding: 15px; } }
+
+@media (min-width: 768px) {
+  .full-bleed {
+    width: auto;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding: 20px; } }
+
+@media (max-width: 480px) {
+  .full-bleed {
+    width: auto;
+    margin-left: -15px;
+    margin-right: -15px;
+    padding: 0 15px; } }
+
+.fade {
+  opacity: 0;
+  filter: alpha(opacity=0);
+  transition: opacity .15s linear; }
+
+.fade.in {
+  opacity: 1;
+  filter: alpha(opacity=100); }
+
+.b2bCollapse {
+  display: none; }
+
+.collapse.in {
+  height: auto; }
+
+.nowrap {
+  white-space: nowrap; }
+
+.pre {
+  white-space: pre; }
+
+.hidden-spoken {
+  border: 0 none !important;
+  clip: rect(0px, 0px, 0px, 0px) !important;
+  height: 1px !important;
+  letter-spacing: 0;
+  line-height: 0;
+  overflow: hidden !important;
+  margin-top: -1px;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important; }
+
+[data-sr-text].hidden-spoken:before {
+  border: 0 none !important;
+  content: attr(data-sr-text);
+  clip: rect(0px, 0px, 0px, 0px) !important;
+  height: 1px !important;
+  letter-spacing: 0;
+  line-height: 0;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 100% !important;
+  z-index: -1; }
+
+[data-sr-text].hidden-spoken {
+  position: relative !important;
+  width: auto !important; }
+
+[data-show-between] {
+  display: none;
+  visibility: hidden; }
+
+.noscroll-y {
+  overflow-y: hidden !important; }
+
+.invisible {
+  visibility: hidden !important;
+  opacity: 0 !important; }
+
+.transparent {
+  background-color: rgba(255, 255, 255, 0) !important; }
+
+.hide {
+  display: none !important; }
+
+.show {
+  display: block !important; }
+
+.rel {
+  position: relative !important; }
+
+.legend-pad {
+  padding: 0 15px; }
+
+.border-top {
+  border-top-width: 1px !important; }
+
+.border-left {
+  border-left-width: 1px !important; }
+
+.border-right {
+  border-right-width: 1px !important; }
+
+.border-bottom {
+  border-bottom-width: 1px !important; }
+
+.border-dark {
+  border-color: #000; }
+
+.border-light {
+  border-color: #fff; }
+
+.no-border-top {
+  border-top-width: 0 !important; }
+
+.no-border-left {
+  border-left-width: 0 !important; }
+
+.no-border-right {
+  border-right-width: 0 !important; }
+
+.no-border-bottom {
+  border-bottom-width: 0 !important; }
+
+.align-middle {
+  margin: 0 auto !important; }
+
+.align-top {
+  position: absolute;
+  top: 0; }
+
+.align-bottom {
+  position: absolute;
+  bottom: 0; }
+
+.valign-top {
+  vertical-align: top !important; }
+
+.valign-middle {
+  vertical-align: middle !important; }
+
+.valign-bottom {
+  vertical-align: bottom !important; }
+
+.align-children-middle > * {
+  margin: 0 auto; }
+
+[class*="valign-children-"] {
+  display: table; }
+
+[class*="valign-children-"] > * {
+  display: table-cell; }
+
+.valign-children-top > * {
+  vertical-align: top; }
+
+.valign-children-middle > * {
+  vertical-align: middle; }
+
+.valign-children-bottom > * {
+  vertical-align: bottom; }
+
+.no-pad {
+  padding: 0 !important; }
+
+.top-space {
+  margin-top: 60px !important; }
+
+.bottom-space {
+  margin-bottom: 60px !important; }
+
+.top-pad {
+  padding-top: 60px !important; }
+
+.bottom-pad {
+  padding-bottom: 60px !important; }
+
+@media (max-width: 767px) {
+  .top-space {
+    margin-top: 30px !important; }
+  .bottom-space {
+    margin-bottom: 30px !important; }
+  .top-pad {
+    padding-top: 30px !important; }
+  .bottom-pad {
+    padding-bottom: 30px !important; } }
+
+.affix {
+  position: fixed; }
+
+.img-landscape,
+.img-portrait {
+  position: relative; }
+
+@media (orientation: landscape) {
+  .img-landscape {
+    display: block; }
+  .img-portrait {
+    display: none !important; } }
+
+@media (orientation: portrait) {
+  .img-landscape {
+    display: none !important; }
+  .img-portrait {
+    display: block; } }
+
+.dark-bg {
+  background-color: #222222; }
+
+/* ... JAVASCRIPT HOOKS .................
+   ... used by javascript ............... */
+.autoSize,
+.autoSize-this {
+  position: relative; }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; }
+
+.placeholdersjs {
+  color: #5a5a5a !important; }
+
+.jshook-return-focus-here {
+  display: block; }
+
+.visible-print {
+  display: none !important; }
+
+.hidden-print {
+  display: inherit !important; }
+
+@media print {
+  .visible-print {
+    display: inherit !important; }
+  .hidden-print {
+    display: none !important; }
+  * {
+    color: #000 !important;
+    background: transparent !important;
+    box-shadow: none !important; }
+  a,
+  a:visited {
+    text-decoration: underline; }
+  pre,
+  blockquote {
+    border: 1px solid #000;
+    page-break-inside: avoid; }
+  thead {
+    display: table-header-group; }
+  tr,
+  img {
+    page-break-inside: avoid; }
+  img {
+    max-width: 100% !important; }
+  @page {
+    margin: 0.5cm; }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3; }
+  h2,
+  h3 {
+    page-break-after: avoid; } }
+
+.mar-top-0 {
+  margin-top: 0px; }
+
+.mar-top-30 {
+  margin-top: 30px; }
+
+a:focus {
+  outline: thin dotted #191919; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  margin: 0;
+  line-height: 1; }
+
+.heading-page {
+  font-size: 3.8rem !important;
+  font-family: "Omnes-ECOMP-W02-Light", Arial;
+  margin-bottom: 40px; }
+
+.heading-major-section {
+  font-size: 3rem !important;
+  font-family: "Omnes-ECOMP-W02-Light" , Arial;
+  margin-bottom: 40px !important; }
+
+.heading-sub-section {
+  font-size: 2.4rem !important;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  margin-bottom: 40px; }
+
+.heading-group {
+  font-size: 2rem !important;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #ea7400;
+  margin-bottom: 20px !important; }
+
+.heading-medium {
+  font-size: 2rem !important;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  margin-bottom: 20px; }
+
+.heading-medium-emphasis {
+  font-size: 2rem !important;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  margin-bottom: 20px; }
+
+.heading-small {
+  font-size: 1.8rem !important;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  margin-bottom: 20px; }
+
+.heading-small-emphasis {
+  font-size: 1.8rem !important;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  margin-bottom: 20px; }
+
+.heading-micro {
+  font-size: 1.3rem !important;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  text-transform: uppercase;
+  color: #da0081;
+  margin-bottom: 10px; }
+
+* + .heading-major-section {
+  margin-top: 60px; }
+
+* + .heading-sub-section {
+  margin-top: 60px; }
+
+* + .heading-group {
+  margin-top: 40px !important; }
+
+* + .heading-medium {
+  margin-top: 40px; }
+
+* + .heading-medium-emphasis {
+  margin-top: 40px; }
+
+* + .heading-small {
+  margin-top: 40px; }
+
+* + .heading-small-emphasis {
+  margin-top: 40px; }
+
+* + .heading-micro {
+  margin-top: 20px; }
+
+.lead {
+  color: #666;
+  font-family: "Omnes-ECOMP-W02-Light-Italic", Arial;
+  font-size: 2.4rem;
+  line-height: 2.8rem;
+  margin-top: 10px;
+  letter-spacing: -0.024rem; }
+
+.eyebrow {
+  text-transform: uppercase;
+  line-height: .65 !important; }
+
+.eyebrow,
+.subheading {
+  font-size: 1.4rem !important;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #666; }
+
+.eyebrow + .heading-major-section,
+.eyebrow + .heading-sub-section {
+  margin-top: 4px; }
+
+.subheading {
+  margin-top: 10px; }
+
+@media (max-width: 767px) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .heading-page {
+    font-size: 2rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 30px; }
+  .heading-major-section {
+    font-size: 2rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 30px; }
+  .heading-sub-section {
+    font-size: 2rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 20px; }
+  .heading-medium {
+    font-size: 2rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 20px; }
+  .heading-medium-emphasis {
+    font-size: 2rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 20px; }
+  .heading-small {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 10px; }
+  .heading-small-emphasis {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    margin-bottom: 5px; }
+  * + .heading-major-section {
+    margin-top: 30px; }
+  * + .heading-sub-section {
+    margin-top: 30px; }
+  * + .heading-group {
+    margin-top: 20px; }
+  * + .heading-medium {
+    margin-top: 20px; }
+  * + .heading-medium-emphasis {
+    margin-top: 20px; }
+  * + .heading-small {
+    margin-top: 20px; }
+  * + .heading-small-emphasis {
+    margin-top: 20px; }
+  * + .heading-micro {
+    margin-top: 10px; } }
+
+/* Standard Type styles */
+.zeromargin {
+  margin: 0 !important; }
+
+a {
+  color: #0568ae;
+  text-decoration: none; }
+
+a:hover,
+a:focus {
+  text-decoration: underline; }
+
+a:active {
+  color: #0568ae; }
+
+.a-min {
+  font-size: 12px; }
+
+.a-small {
+  font-size: 14px; }
+
+.a-max {
+  font-size: 18px; }
+
+a.show-qualifier {
+  margin-right: 25px;
+  position: relative; }
+
+a.show-qualifier:after {
+  color: #333333;
+  display: inline-block;
+  white-space: pre !important; }
+
+a[href$="pdf"].show-qualifier:after,
+a.show-qualifier.pdf:after {
+  content: " (PDF)"; }
+
+a[href$="psd"].show-qualifier:after,
+a.show-qualifier.psd:after {
+  content: " (PSD)"; }
+
+.standalone-link {
+  display: flex; }
+
+/* 20px for the icon, 10px left of icon */
+.standalone-link.small {
+  font-size: 1.4rem; }
+
+.standalone-link.small i[class*="icon-primary-"] {
+  font-size: 16px;
+  top: 2px; }
+
+.standalone-link.large {
+  font-size: 1.8rem; }
+
+.standalone-link.large i[class*="icon-primary-"] {
+  font-size: 24px;
+  top: -1px; }
+
+p {
+  margin: 0 0 12px 0;
+  line-height: 2rem; }
+
+.p-small {
+  font-size: 1.4rem;
+  line-height: 1.8rem; }
+
+p + .p-small {
+  margin: 10px 0 0; }
+
+.p-micro {
+  font-size: 1.2rem;
+  line-height: 1.5rem; }
+
+p + .p-micro {
+  margin: 10px 0 0; }
+
+.p-max {
+  font-size: 1.8rem; }
+
+p + .p-max {
+  margin: 10px 0 0; }
+
+b,
+strong {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-weight: normal; }
+
+i,
+em {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal; }
+
+.strike {
+  text-decoration: line-through; }
+
+sup {
+  display: inline-block;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  vertical-align: text-top;
+  width: auto; }
+
+.text-legal {
+  color: #5a5a5a;
+  font-size: 1.1rem;
+  line-height: 1.5rem;
+  margin: 0 0 10px; }
+
+.text-legal.legal-module {
+  line-height: 1.3rem;
+  margin: 0 0 12px; }
+
+.text-legal b,
+.text-legal strong {
+  font-weight: bold; }
+
+.text-legal a {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.text-left {
+  text-align: left !important; }
+
+.text-right {
+  text-align: right !important; }
+
+.text-center {
+  text-align: center !important; }
+
+.text-justified {
+  text-align: justify !important; }
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none; }
+
+ul.bullet,
+ul.no-bullet,
+ul.lower-alpha,
+ul.lower-roman,
+ol {
+  padding: 0;
+  margin: 12px 0 0 20px; }
+
+ul.bullet li,
+ul.no-bullet li,
+ul.lower-alpha li,
+ul.lower-roman li,
+ol li {
+  padding-left: 15px;
+  line-height: 20px;
+  position: relative; }
+
+ul.bullet li + li,
+ul.no-bullet li + li,
+ul.lower-alpha li + li,
+ul.lower-roman li + li,
+ol li + li {
+  margin-top: 12px; }
+
+ul.bullet > li:before,
+ul.no-bullet > li:before,
+ul.lower-alpha > li:before,
+ul.lower-roman > li:before,
+ol > li:before {
+  background-color: #333333;
+  border: 2px solid #333333;
+  border-radius: 100%;
+  content: " ";
+  display: block;
+  height: 1px;
+  left: 0;
+  position: absolute;
+  top: 8px;
+  width: 1px; }
+
+ul.bullet ul,
+ul.no-bullet ul,
+ul.lower-alpha ul,
+ul.lower-roman ul,
+ol ul,
+ul.bullet ol,
+ul.no-bullet ol,
+ul.lower-alpha ol,
+ul.lower-roman ol,
+ol ol {
+  margin-top: 12px; }
+
+ul + *,
+ol + * {
+  margin-top: 20px; }
+
+ul.no-bullet,
+ul.lower-alpha,
+ul.lower-roman {
+  margin: 0; }
+
+ul.no-bullet > li,
+ul.lower-alpha > li,
+ul.lower-roman > li {
+  padding-left: 0; }
+
+ul.no-bullet > li:before,
+ul.lower-alpha > li:before,
+ul.lower-roman > li:before {
+  display: none !important; }
+
+ol {
+  margin: 20px 0 0 32px; }
+
+ol li {
+  padding-left: 3px; }
+
+ol li:before {
+  display: none; }
+
+ol ol {
+  margin-left: 25px; }
+
+ol ul {
+  margin-left: -5px; }
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-top: 0; }
+
+ul.lower-roman {
+  list-style-type: lower-roman;
+  margin-top: 12px;
+  margin-left: 35px;
+  margin-bottom: 0; }
+
+ul.lower-alpha {
+  list-style-type: lower-alpha;
+  margin-top: 12px;
+  margin-left: 35px;
+  margin-bottom: 0; }
+
+dl {
+  display: table;
+  margin: 0 0 20px;
+  width: 100%; }
+
+dt,
+dd {
+  display: table-cell; }
+
+.btn {
+  background-color: transparent;
+  background-clip: padding-box;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  display: inline-block;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 1.9rem;
+  font-weight: normal;
+  line-height: 1;
+  margin: 0 7px 10px 0;
+  max-width: 470px;
+  min-width: 70px;
+  padding: 14px 19px 11px 18px;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden; }
+  .btn:focus {
+    outline: 1px dotted #000;
+    outline-offset: -5px; }
+  .btn:last-child {
+    margin-right: 0; }
+  .btn::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  .btn i[class*="icon-primary-"].icon-primary-small {
+    font-size: 24px;
+    top: -2px; }
+  .btn i[class*="icon-primary-"].icon-primary-medium {
+    font-size: 30px;
+    top: -2px; }
+  .btn i[class*="icon-primary-"].icon-primary-large {
+    font-size: 36px;
+    top: -2px; }
+
+a.btn {
+  vertical-align: middle; }
+  a.btn:hover {
+    text-decoration: none; }
+
+.field-group + .btn {
+  margin-left: 20px; }
+
+.btn-primary {
+  border-color: #ea7400 transparent #d16500;
+  background-color: #ea7400 transparent #d16500;
+  background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);
+  color: #ffffff;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-weight: bold; }
+  .btn-primary:hover {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-primary:focus {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-primary:active {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+
+.btn-arrow {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.6rem;
+  font-weight: normal;
+  background-color: transparent;
+  border: none;
+  padding: 5px 0 0;
+  top: -4px;
+  color: #333333;
+  position: relative; }
+  .btn-arrow:hover {
+    text-decoration: underline; }
+    .btn-arrow:hover .btn-primary {
+      text-decoration: none;
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+    .btn-arrow:hover .btn-secondary {
+      color: #0568ae;
+      outline-color: #000000 !important;
+      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+    .btn-arrow:hover .btn-alt {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+    .btn-arrow:hover .btn-specialty {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow:focus {
+    text-decoration: underline;
+    outline: 1px dotted #666; }
+    .btn-arrow:focus .btn-primary {
+      text-decoration: none;
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+    .btn-arrow:focus .btn-secondary {
+      color: #0568ae;
+      outline-color: #000000 !important;
+      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+    .btn-arrow:focus .btn-alt {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+    .btn-arrow:focus .btn-specialty {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow:active .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-arrow:active .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-arrow:active .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+  .btn-arrow:active .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow .btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+    .btn-arrow .btn-alt:hover {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+    .btn-arrow .btn-alt:focus {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+    .btn-arrow .btn-alt:active {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-arrow::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  .btn-arrow .btn {
+    border: 1px solid transparent;
+    border-radius: 100%;
+    height: 36px;
+    margin-bottom: 0;
+    margin-right: 7px;
+    max-width: 36px;
+    min-width: 20px;
+    padding: 0;
+    margin-top: -4px;
+    vertical-align: middle;
+    width: 36px; }
+    .btn-arrow .btn .icon-primary-left {
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      line-height: 0;
+      position: absolute;
+      right: 0;
+      text-indent: 0;
+      top: 0; }
+      .btn-arrow .btn .icon-primary-left:before {
+        position: absolute;
+        font-size: 1.6rem;
+        left: 1px;
+        top: 9px; }
+    .btn-arrow .btn .icon-primary-right {
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      line-height: 0;
+      position: absolute;
+      right: 0;
+      text-indent: 0;
+      top: 0;
+      color: #ffffff; }
+      .btn-arrow .btn .icon-primary-right:before {
+        position: absolute;
+        font-size: 1.6rem;
+        left: 17px;
+        top: 9px; }
+  .btn-arrow .btn.btn-primary .icon-primary-left {
+    color: #fff; }
+  .btn-arrow .btn.btn-primary .icon-primary-right {
+    color: #fff; }
+  .btn-arrow .btn.btn-alt .icon-primary-left {
+    color: #fff; }
+  .btn-arrow .btn.btn-alt .icon-primary-right {
+    color: #fff; }
+  .btn-arrow .btn.btn-secondary {
+    border: 1px solid #d2d2d2; }
+    .btn-arrow .btn.btn-secondary .icon-primary-left {
+      color: #0568ae; }
+    .btn-arrow .btn.btn-secondary .icon-primary-right {
+      color: #0568ae; }
+  .btn-arrow .btn.btn-small {
+    height: 20px;
+    max-width: 20px;
+    min-width: 20px;
+    width: 20px;
+    top: -1px; }
+    .btn-arrow .btn.btn-small .icon-primary-left:before {
+      font-size: 10px;
+      top: 4px;
+      left: 0; }
+    .btn-arrow .btn.btn-small .icon-primary-right:before {
+      font-size: 10px;
+      top: 4px;
+      left: 10px; }
+  .btn-arrow .btn.btn-large .icon-primary-left:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+  .btn-arrow .btn.btn-large .icon-primary-right:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+
+.btn-secondary {
+  border: 1px solid #d2d2d2;
+  background-color: #f2f2f2;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  color: #0568ae;
+  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+  padding: 14px 18px 11px 17px; }
+  .btn-secondary:hover {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-secondary:focus {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-secondary:active {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+
+.btn-alt {
+  border-color: #087ac2 transparent #0568ae;
+  background-color: #0568ae;
+  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+  color: #ffffff; }
+  .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+.btn-specialty {
+  border-color: #008744 transparent #007a3e;
+  background-color: #007a3e;
+  background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);
+  color: #ffffff; }
+  .btn-specialty:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-specialty:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-specialty:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+
+.btn-clear {
+  background: transparent !important;
+  border-color: transparent !important;
+  font-weight: normal;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  box-shadow: none;
+  text-decoration: none;
+  color: #0568ae; }
+  .btn-clear:focus {
+    text-decoration: underline; }
+  .btn-clear:hover {
+    text-decoration: underline; }
+
+.isIE .btn:focus {
+  outline: none !important;
+  text-decoration: none !important; }
+  .isIE .btn:focus:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    border: 1px dotted #000; }
+
+.isIE .btn:active {
+  outline: none !important;
+  text-decoration: none !important; }
+  .isIE .btn:active:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    border: 1px dotted #000; }
+
+.isIE .btn.active {
+  outline: none !important;
+  text-decoration: none !important; }
+  .isIE .btn.active:not(:focus):after {
+    border: 1px solid #000; }
+  .isIE .btn.active:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    border: 1px dotted #000; }
+
+.isIE .btn.btn-primary:focus:after {
+  border: 2px dashed #fff; }
+
+.isIE .btn.btn-specialty:focus:after {
+  border: 2px dashed #fff; }
+
+.isIE .btn.btn-alt:focus:after {
+  border: 2px dashed #fff; }
+
+.btn.disabled {
+  background-image: none;
+  background-color: #767676;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: #ffffff;
+  border-color: transparent;
+  outline: 0 !important; }
+  .btn.disabled:hover {
+    color: #f2f2f2;
+    outline: none !important; }
+  .btn.disabled:focus {
+    color: #f2f2f2;
+    outline: none !important; }
+
+.btn[disabled] {
+  background-image: none;
+  background-color: #767676;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: #ffffff;
+  border-color: transparent;
+  outline: 0 !important; }
+  .btn[disabled]:hover {
+    color: #f2f2f2;
+    outline: none !important; }
+  .btn[disabled]:focus {
+    color: #f2f2f2;
+    outline: none !important; }
+
+.btn[disabled="disabled"] {
+  background-image: none;
+  background-color: #767676;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: #ffffff;
+  border-color: transparent;
+  outline: 0 !important; }
+  .btn[disabled="disabled"]:hover {
+    color: #f2f2f2;
+    outline: none !important; }
+  .btn[disabled="disabled"]:focus {
+    color: #f2f2f2;
+    outline: none !important; }
+
+.btn-arrow[disabled] .btn {
+  background-image: none;
+  background-color: #767676;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: #ffffff;
+  border-color: transparent;
+  outline: 0 !important; }
+  .btn-arrow[disabled] .btn:hover {
+    color: #f2f2f2;
+    outline: none !important; }
+  .btn-arrow[disabled] .btn:focus {
+    color: #f2f2f2;
+    outline: none !important; }
+
+.btn-arrow[disabled] .icon-primary-left {
+  color: #fff !important; }
+
+.btn-arrow[disabled] .icon-primary-right {
+  color: #fff !important; }
+
+.btn-arrow.disabled .btn {
+  background-image: none;
+  background-color: #767676;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: #ffffff;
+  border-color: transparent;
+  outline: 0 !important; }
+  .btn-arrow.disabled .btn:hover {
+    color: #f2f2f2;
+    outline: none !important; }
+  .btn-arrow.disabled .btn:focus {
+    color: #f2f2f2;
+    outline: none !important; }
+
+.btn-arrow.disabled .icon-primary-left {
+  color: #fff !important; }
+
+.btn-arrow.disabled .icon-primary-right {
+  color: #fff !important; }
+
+.btn-medium {
+  padding: 12px 19px 11px 18px;
+  font-size: 1.7rem; }
+
+.btn-small {
+  padding: 10px 19px 9px 18px;
+  font-size: 1.5rem;
+  border-radius: 8px; }
+
+.btn-fullwidth {
+  width: 100%; }
+
+*:not(.btn-arrow) > .btn > i[class*="icon-primary-"] {
+  margin-top: -20px;
+  margin-bottom: -20px; }
+
+.enhanced-cta-group {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3A%23959595%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;
+  background-position: 0 -1px;
+  background-repeat: repeat-x; }
+  .enhanced-cta-group > .cta-button-group {
+    border-top: 0;
+    background-image: none !important; }
+    .enhanced-cta-group > .cta-button-group + .cta-button-group a {
+      font-size: 1.4rem;
+      line-height: 1em; }
+      .enhanced-cta-group > .cta-button-group + .cta-button-group a a {
+        margin-right: 0; }
+    .enhanced-cta-group > .cta-button-group hr {
+      min-height: 14px; }
+    .enhanced-cta-group > .cta-button-group + .cta-button-group {
+      -ms-flex-align: center;
+      -ms-grid-row-align: center;
+      align-items: center;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      padding: 10px 0; }
+
+.cta-button-group {
+  text-align: right;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  padding: 20px 0 10px;
+  width: 100%; }
+  .cta-button-group.nodots {
+    background-image: none !important; }
+  .cta-button-group .hidden-phone {
+    margin-right: 14px; }
+  .cta-button-group .btn + .btn {
+    margin-right: 20px !important; }
+  .cta-button-group .btn:not(.hidden-phone):not(.visible-phone) {
+    margin-right: 0; }
+
+.isMobile .btn-arrow .btn.btn-small .icon-primary-left:before {
+  left: -1px; }
+
+.isMobile .btn-arrow .btn.btn-large .icon-primary-left:before {
+  left: 24px; }
+
+.isMobile .btn-arrow .btn.btn-large .icon-primary-right:before {
+  left: 24px; }
+
+@media (max-width: 1024px) {
+  .field-group + .btn {
+    margin-left: 15px; } }
+
+@media (max-width: 767px) {
+  .cta-button-group {
+    text-align: center; }
+    .cta-button-group > .btn {
+      display: block;
+      float: none;
+      width: 100%;
+      margin-left: auto !important;
+      margin-right: auto !important; } }
+
+.btn-group {
+  border-radius: 8px;
+  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  max-width: 470px;
+  min-width: 290px;
+  position: relative;
+  vertical-align: middle;
+  width: 100%; }
+  .btn-group > .btn {
+    box-shadow: none;
+    -ms-flex: 1;
+    flex: 1;
+    position: relative;
+    float: left;
+    margin-right: -1px;
+    margin-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center; }
+  .btn-group:not([data-select-color]) .btn.active:not(:first-child) {
+    margin-right: -1px;
+    border-left: 1px solid #d2d2d2 !important; }
+  .btn-group:not([data-select-color]) .btn[disabled]:not(:first-child) {
+    border-left: 1px solid #d2d2d2 !important; }
+  .btn-group:not([data-select-color]) .btn[disabled] + .btn[disabled] {
+    border-left: 1px solid #ebebeb !important; }
+  .btn-group:not([data-select-color]) > .btn.active {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+    .btn-group:not([data-select-color]) > .btn.active:hover {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: #0563a6;
+      border-color: #0563a6; }
+    .btn-group:not([data-select-color]) > .btn.active:focus {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: #0563a6;
+      border-color: #0563a6; }
+    .btn-group:not([data-select-color]) > .btn.active:active {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: #0563a6;
+      border-color: #0563a6; }
+  .btn-group:not([data-select-color]) > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    border-radius: 0; }
+  .btn-group:not([data-select-color]) > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0; }
+  .btn-group:not([data-select-color]) > .btn:last-child:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  .btn-group:not([data-select-color]) > .dropdown-toggle:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  .btn-group > .active {
+    text-decoration: none;
+    outline: 1px dotted transparent; }
+    .btn-group > .active:focus {
+      outline: 1px dotted #ffffff; }
+
+.btn-group.btn-fullwidth > .btn {
+  -ms-flex: 1;
+  flex: 1; }
+
+.btn-group[data-select-color] {
+  margin-top: 5px;
+  box-shadow: none;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  .btn-group[data-select-color] .btn {
+    border: 1px solid #959595;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+    margin-right: 10px;
+    margin-bottom: 10px;
+    height: 40px;
+    font-size: 16px;
+    color: #333333;
+    max-width: 60px;
+    min-width: 60px;
+    -ms-flex: 0;
+    flex: 0; }
+  .btn-group[data-select-color] > .btn.active:focus {
+    outline: 1px dotted #191919;
+    outline-offset: 4px; }
+
+button .btn-fill {
+  background-clip: padding-box;
+  border: 0;
+  border-radius: 4px;
+  bottom: 0;
+  display: block;
+  height: auto;
+  left: 0;
+  margin: 5px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto; }
+
+button .btn-fill[style*="#fff"] {
+  border: 1px solid #d2d2d2; }
+
+[data-select-color] .btn.active {
+  background: none !important;
+  outline: 0;
+  margin-right: 10px;
+  border-width: 3px;
+  color: #333333;
+  line-height: 12px; }
+  [data-select-color] .btn.active > .btn-fill {
+    margin: 3px; }
+  [data-select-color] .btn.active:hover {
+    color: #333333; }
+
+[data-select-color] .btn:active {
+  background: none !important;
+  outline: 0;
+  margin-right: 10px;
+  border-width: 3px;
+  color: #333333;
+  line-height: 12px; }
+  [data-select-color] .btn:active > .btn-fill {
+    margin: 3px; }
+  [data-select-color] .btn:active:hover {
+    color: #333333; }
+
+.btn-group[data-select-color="orange"] > .btn.active {
+  border-color: #ea7400; }
+
+.btn-group[data-select-color="blue"] > .btn.active {
+  border-color: #0568ae; }
+
+.btn-group[data-select-color="green"] > .btn.active {
+  border-color: #007a3e; }
+
+.btn-spinbutton-toggle.btn-group {
+  display: block !important;
+  height: 40px !important;
+  margin-top: 5px;
+  max-width: 138px;
+  min-width: 138px;
+  white-space: nowrap; }
+
+.btn-spinbutton-toggle .btn {
+  border-radius: 6px;
+  font-weight: normal;
+  -ms-flex: unset;
+  flex: unset;
+  height: 40px;
+  letter-spacing: normal;
+  min-width: auto;
+  padding: 3px 0 0;
+  text-align: center;
+  min-width: 46px;
+  width: 46px; }
+
+.btn-spinbutton-toggle .btn[data-max-value] {
+  border-bottom: 1px solid #d2d2d2;
+  border-top: 1px solid #d2d2d2;
+  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.08) inset;
+  background-color: #fff;
+  cursor: text;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 2rem;
+  font-weight: normal;
+  padding: 4px 0 0;
+  text-align: center;
+  min-width: 46px !important;
+  width: 46px; }
+  .btn-spinbutton-toggle .btn[data-max-value]:focus {
+    border-color: #0568ae;
+    outline: none; }
+    .btn-spinbutton-toggle .btn[data-max-value]:focus + .btn {
+      border-left: 1px solid #0568ae;
+      transition: border 0.3s linear 0s; }
+
+.btn-spinbutton-toggle .icon-primary-subtractminimize {
+  font-size: 30px !important;
+  color: #0568ae !important; }
+
+.btn-spinbutton-toggle .icon-primary-add-maximize {
+  font-size: 30px !important;
+  color: #0568ae !important; }
+
+.btn-spinbutton-toggle .btn[disabled].icon-primary-subtractminimize {
+  background-color: #d2d2d2;
+  color: #767676 !important; }
+
+.btn-spinbutton-toggle .btn[disabled].icon-primary-add-maximize {
+  background-color: #d2d2d2;
+  color: #767676 !important; }
+
+.btn-spinbutton-toggle input.btn[disabled] {
+  background-color: #d2d2d2;
+  color: #5a5a5a;
+  cursor: not-allowed; }
+
+.btn-group.btn-spinbutton-toggle .btn[disabled] + .btn[disabled] {
+  border-left: 1px solid #f0f0f0 !important; }
+
+.btn-group.btn-spinbutton-toggle .btn[data-max-value]:focus + .btn:not(:first-child) {
+  border-left: 1px solid #0568ae !important; }
+
+@media (max-width: 480px) {
+  .btn-group:not([data-select-color]) > .btn {
+    font-size: 1.3rem;
+    min-width: auto; } }
+
+.reset-field,
+.close {
+  float: right;
+  background: none;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  overflow: hidden;
+  display: inline-block; }
+
+.reset-field {
+  display: none; }
+
+.reset-field:before {
+  font-size: 22px;
+  color: #5a5a5a; }
+
+.input-emphasized + .reset-field:before {
+  font-size: 29px;
+  color: #5a5a5a; }
+
+.reset-field:active,
+.reset-field:hover,
+.reset-field:focus {
+  display: block !important; }
+
+button.close {
+  border: 0;
+  appearance: none; }
+
+.corner-button {
+  box-shadow: 0 -50px 0 0 #f2f2f2 inset;
+  height: 69px;
+  /*overflow: hidden;*/
+  position: absolute;
+  right: -35px;
+  top: -35px;
+  transform: rotate(45deg);
+  width: 69px; }
+
+.corner-button .close:before {
+  bottom: -7px;
+  color: #0568ae;
+  display: block;
+  font-size: 20px;
+  height: 50px;
+  left: -11px;
+  position: absolute;
+  width: 50px; }
+
+.corner-button .close {
+  float: none;
+  height: 45px;
+  margin: 0;
+  position: absolute;
+  right: 12px;
+  top: 45px;
+  transform: rotate(45deg);
+  width: 45px; }
+
+.corner-button .close:focus {
+  outline: 1px dotted black; }
+
+.ds2-no-colors .corner-button .close {
+  border: 1px solid black; }
+
+.field-group input + .reset-field {
+  background: none;
+  height: 36px;
+  width: 45px;
+  display: none;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  box-shadow: none;
+  border: none;
+  content: " "; }
+
+.field-group input[type="search"] + .reset-field,
+.field-group input[type="search"] + .btn-search + .reset-field,
+.tooltip-onclick input + .reset-field,
+.tooltip-onclick input + .icon-primary-tooltip + .reset-field,
+.tooltip-onclick textarea + .reset-field,
+.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field {
+  right: 45px; }
+
+.field-group input[type="search"] + .reset-field:after,
+.field-group input[type="search"] + .btn-search + .reset-field:after,
+.tooltip-onclick input + .reset-field:after,
+.tooltip-onclick input + .icon-primary-tooltip + .reset-field:after,
+.tooltip-onclick textarea + .reset-field:after,
+.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field:after {
+  background-color: #d2d2d2;
+  content: "";
+  display: block;
+  height: 20px;
+  position: absolute;
+  right: 0;
+  top: 8px;
+  width: 1px; }
+
+.tooltip-onclick input + .reset-field,
+.tooltip-onclick input + .icon-primary-tooltip + .reset-field {
+  right: 50px !important; }
+
+.tooltip-onclick textarea + .reset-field,
+.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field {
+  right: 45px !important;
+  width: 40px; }
+
+.field-group input.input-emphasized + .reset-field {
+  width: 45px;
+  height: 46px;
+  right: 6px; }
+
+.field-group input.input-emphasized + .reset-field:after {
+  top: 14px; }
+
+.field-group [disabled] + .reset-field {
+  display: none; }
+
+.ds2_touchevents .field-group input + .reset-field:focus,
+.ds2_touchevents .field-group input:focus + .reset-field,
+.ds2_touchevents textarea:focus + .reset-field,
+.ds2_touchevents textarea + .reset-field:focus {
+  display: block;
+  position: absolute;
+  right: 0px;
+  top: 0;
+  border: none; }
+
+.ds2_touchevents .field-group input {
+  padding: 8px 55px 8px 15px;
+  -webkit-appearance: none; }
+
+.ds2_touchevents textarea:focus {
+  padding: 15px 55px 15px 15px; }
+
+.ds2_touchevents textarea:focus + .reset-field {
+  border: none;
+  position: absolute;
+  right: 6px;
+  top: 5px; }
+
+.ds2_touchevents textarea.hasScrollbar:focus {
+  padding: 15px 35px 15px 15px; }
+
+.ds2_touchevents textarea.hasScrollbar:focus + .reset-field {
+  right: 22px; }
+
+.form-row.error .error-msg {
+  display: block;
+  font-size: 14px;
+  line-height: 14px;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  position: relative;
+  padding-left: 18px; }
+
+.form-row.error .error-msg:before {
+  color: #cf2a2a;
+  font-size: 14px;
+  left: 0;
+  line-height: 14px;
+  position: absolute;
+  vertical-align: middle; }
+
+.form-row.error label,
+.form-row.error .error-msg,
+.form-row.error button.awd-select,
+.form-row.error select.awd-select + span,
+.form-row.error .checkbox,
+.form-row.error .radio,
+.form-row.error legend.error,
+.form-row.error input {
+  color: #cf2a2a; }
+
+.form-row.error .btn-group > .btn,
+.form-row.error button.awd-select,
+.form-row.error .awd-select-list,
+.form-row.error select.awd-select + span,
+.form-row.error textarea,
+.form-row.error input,
+.form-row.error .checkbox .skin,
+.form-row.error .radio .skin {
+  border-color: #cf2a2a !important; }
+
+.form-row.error .checkbox input:checked:not(:disabled) + .skin {
+  background-color: #cf2a2a; }
+
+.form-row.error .radio input:checked + .skin:after {
+  background-color: #cf2a2a; }
+
+.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg {
+  margin-top: -11px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg + .helpertext {
+  margin: 0 0 10px; }
+
+.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg + .helpertext:before,
+.error .tooltip-onclick .icon-primary-tooltip.active + .error-msg + .helpertext:after {
+  display: none; }
+
+.error .helpertext {
+  border-color: #cf2a2a;
+  /*border-radius:0;*/ }
+
+.error .helpertext:before {
+  border-top-color: #cf2a2a; }
+
+.error .tooltip-onfocus .helpertext {
+  margin: 14px 0 10px 0; }
+
+.error [class*="price"],
+.error [class*="pricing-"] {
+  color: #cf2a2a; }
+
+input:-ms-clear {
+  display: none; }
+
+input[type]::-webkit-inner-spin-button,
+input[type]::-webkit-outer-spin-button {
+  -webkit-appearance: none; }
+
+/*  input[type] {
+  -moz-appearance: textfield; } 
+ */
+form {
+  margin: 0; }
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0; }
+
+label,
+legend {
+  display: inline-block;
+  font-size: 1.4rem;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+legend {
+  display: block; }
+
+.error-msg {
+  display: none; }
+
+select,
+textarea,
+input {
+  border-radius: 6px;
+  color: #5a5a5a;
+  display: inline-block;
+  font-size: 1.6rem;
+  margin: 0px;
+  padding: 0 15px 0 15px;
+  vertical-align: middle;
+  line-height: normal; }
+
+select::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::-webkit-input-placeholder {
+  color: #5a5a5a;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+  opacity: 1; }
+
+select:-moz-placeholder,
+textarea:-moz-placeholder,
+input:-moz-placeholder {
+  color: #5a5a5a;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+  opacity: 1; }
+
+select::-moz-placeholder,
+textarea::-moz-placeholder,
+input::-moz-placeholder {
+  color: #5a5a5a;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+  opacity: 1; }
+
+select:-ms-input-placeholder,
+textarea:-ms-input-placeholder,
+input:-ms-input-placeholder {
+  color: #5a5a5a;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  transition: none;
+  opacity: 1; }
+
+select:placeholder,
+textarea:placeholder,
+input:placeholder {
+  color: #5a5a5a;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+  opacity: 1; }
+
+select:last-child,
+textarea:last-child,
+input:last-child {
+  margin-right: 0; }
+
+input:not([type="button"]) {
+  height: 36px; }
+
+input.input-emphasized {
+  font-size: 1.8rem;
+  height: 48px;
+  padding: 13px 20px 13px; }
+
+input[type="search"]:focus {
+  padding-right: 88px; }
+
+input[type="search"] {
+  padding-right: 40px;
+  -webkit-appearance: none !important; }
+
+input[type="search"].input-emphasized {
+  padding-right: 45px; }
+
+.btn-search[class*="btn"] {
+  background-color: transparent;
+  background-position: 50% 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  border: none;
+  height: 100%;
+  margin-left: 0;
+  margin-top: 0;
+  min-width: 45px !important;
+  outline-offset: 0;
+  padding: 0 !important;
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-radius: 0 5px 5px 0;
+  min-width: 44px;
+  width: 44px; }
+
+.input-emphasized + .btn-search[class*="btn"],
+.input-emphasized + .reset-field + .btn-search[class*="btn"] {
+  background-size: 26px;
+  height: 46px;
+  top: 1px;
+  outline-offset: -3px;
+  margin-bottom: 0;
+  border-radius: 0 5px 5px 0; }
+
+input[type="search"].input-emphasized + .reset-field {
+  right: 45px !important; }
+
+.search-suggestion-wrapper {
+  position: relative;
+  margin-bottom: 15px; }
+
+/*styles from dropdown*/
+.search-suggestion-list {
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 0 0 6px 6px;
+  position: relative;
+  border: 1px solid #0568ae;
+  border-top: 0;
+  padding: 15px 0;
+  background-color: #f2f2f2;
+  z-index: 1000;
+  width: 100%;
+  max-height: 400px;
+  overflow-y: auto; }
+
+.search-suggestion-list:empty {
+  display: none; }
+
+.search-suggestion-item {
+  position: relative;
+  z-index: -1;
+  padding: 0 15px;
+  line-height: 4.0rem;
+  color: #5a5a5a; }
+
+.search-suggestion-item a {
+  text-decoration: none;
+  color: #5a5a5a; }
+
+.search-suggestion-item:hover,
+.search-suggestion-item:focus {
+  cursor: pointer;
+  background-color: #d2d2d2; }
+
+input[data-provide="datepicker"],
+[data-provide="datepicker"]:-moz-placeholder,
+[data-provide="datepicker"]:-ms-input-placeholder,
+[data-provide="datepicker"]:-webkit-input-placeholder {
+  color: #0568ae !important;
+  opacity: 1;
+  filter: alpha(opacity=100); }
+
+input[disabled],
+input[readonly],
+select[disabled],
+select[readonly],
+textarea[disabled],
+textarea[readonly],
+span.icon-primary-calendar.disabled,
+span.icon-primary-calendar.readonly {
+  cursor: not-allowed;
+  background-color: #f2f2f2;
+  box-shadow: none; }
+
+span.icon-primary-calendar.disabled input,
+span.icon-primary-calendar.readonly input {
+  color: #959595 !important; }
+
+textarea {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 15px; }
+
+textarea.small {
+  line-height: 20px; }
+
+textarea + .reset-field {
+  display: none; }
+
+textarea::-webkit-input-placeholder {
+  line-height: .99; }
+
+textarea:-moz-placeholder {
+  line-height: .99; }
+
+textarea::-moz-placeholder {
+  line-height: .99; }
+
+textarea:-ms-input-placeholder {
+  line-height: .99; }
+
+textarea:placeholder {
+  line-height: .99; }
+
+textarea,
+input {
+  background-color: #ffffff;
+  border: 1px solid #d2d2d2; 
+/* -webkit-appearance: none; */
+  box-shadow: 2px 3px 2px -2px rgba(0, 0, 0, 0.08) inset;
+  transition: border .3s linear 0s;
+  font-family: "Omnes-ECOMP-W02", Arial; }
+
+textarea:focus,
+input:focus {
+  outline: 0;
+  border-color: #0568ae; }
+
+.input-append {
+  display: table; }
+
+.input-append > div {
+  display: table-cell;
+  width: 1%; }
+
+.input-append > .field-group {
+  width: 100%; }
+
+.row .field-group input[class*="span"] {
+  float: none; }
+
+.field-group {
+  position: relative;
+  display: inline-block; }
+
+label + .field-group,
+label + .input-append,
+label + .row,
+label + .row-nowrap,
+label + .form-row {
+  margin-top: 5px; }
+
+.field-group {
+  position: relative;
+  display: block; }
+
+.field-group input:not([type="button"])[disabled] {
+  padding-right: 15px; }
+
+input:invalid,
+textarea:invalid,
+select:invalid {
+  outline: none !important; }
+
+.form-row {
+  margin-top: 20px; }
+
+.form-row.nomar {
+  margin: 0; }
+
+.row-nowrap.no-flex.form-row > label + br {
+  margin-bottom: 5px; }
+
+span.form-row {
+  display: inline-block; }
+
+legend + .form-row {
+  margin-top: 20px; }
+
+.tooltip-onclick input {
+  padding-right: 45px; }
+
+.ds2_touchevents .tooltip-onclick input:focus {
+  padding-right: 95px; }
+
+span.icon-primary-calendar {
+  display: block;
+  position: relative;
+  background-color: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 36px; }
+
+span.icon-primary-calendar:before {
+  position: absolute;
+  top: 7px;
+  left: 13px;
+  color: #0568ae; }
+
+span.icon-primary-calendar.disabled {
+  background-color: #f2f2f2; }
+
+span.icon-primary-calendar.disabled:before {
+  color: #959595; }
+
+span.icon-primary-calendar input {
+  padding-left: 35px;
+  color: #0568ae;
+  transition: border-color 0.3s linear 0s;
+  box-shadow: 2px 3px 2px -2px rgba(0, 0, 0, 0.08) inset;
+  position: absolute;
+  top: 0;
+  left: 0; }
+
+.faux-input + input.datepicker-input:not([disabled]) {
+  cursor: pointer;
+  margin-left: 0;
+  background-color: #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 0; }
+
+.faux-input {
+  background-color: transparent !important;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 1.6rem;
+  height: 35px;
+  left: 0;
+  line-height: 35px;
+  margin-bottom: 10px;
+  margin-right: 6px;
+  padding: 0 0 0 35px;
+  position: relative;
+  text-align: left;
+  top: 0;
+  vertical-align: middle;
+  width: 100%;
+  z-index: 1; }
+
+.faux-input:disabled {
+  cursor: not-allowed; }
+
+.faux-input:focus + .datepicker-input,
+[data-calendar-state="opened"] + .datepicker-input {
+  border-color: #0568ae;
+  box-shadow: 2px 3px 2px -2px rgba(5, 116, 172, 0.35) inset;
+  outline: 0 none; }
+
+.form-row.error .error-msg {
+  display: block;
+  font-size: 14px;
+  line-height: 14px;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  position: relative;
+  padding-left: 18px;
+  margin-top: 10px; }
+
+.form-row.error .error-msg > .icon-primary-badgealert {
+  height: 14px;
+  width: 14px;
+  position: absolute;
+  left: 0;
+  margin-right: 0; }
+
+.form-row.error .error-msg > .icon-primary-badgealert:before {
+  color: #cf2a2a;
+  font-size: 14px;
+  left: 0;
+  line-height: 14px;
+  position: absolute;
+  vertical-align: middle; }
+
+.form-row.error label,
+.form-row.error .error-msg,
+.form-row.error button.awd-select,
+.form-row.error select.awd-select + span,
+.form-row.error .checkbox,
+.form-row.error .radio,
+.form-row.error legend.error,
+.form-row.error input,
+.form-row.error textarea {
+  color: #cf2a2a; }
+
+.form-row.error .btn-group > .btn,
+.form-row.error button.awd-select,
+.form-row.error .awd-select-list,
+.form-row.error select.awd-select + span,
+.form-row.error textarea,
+.form-row.error input,
+.form-row.error .checkbox .skin,
+.form-row.error .radio .skin {
+  border-color: #cf2a2a !important; }
+
+.form-row.error .checkbox input:checked:not(:disabled) + .skin {
+  background-color: #cf2a2a; }
+
+.form-row.error .radio input:checked + .skin:after {
+  background-color: #cf2a2a; }
+
+.error [class*="price"],
+.error [class*="pricing-"] {
+  color: #cf2a2a; }
+
+hr,
+.hr-or {
+  display: block;
+  height: 1px;
+  margin: 15px 0;
+  border: none;
+  background-repeat: repeat-x;
+  background-color: #959595;
+  position: relative; }
+
+hr.dark {
+  background-color: #959595; }
+
+hr.lite {
+  background-color: #d2d2d2; }
+
+.hr-or:before {
+  background-color: #fff;
+  color: #666;
+  content: " OR ";
+  display: block;
+  font-size: 1.4rem;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  height: 16px;
+  left: 50%;
+  line-height: 1.6rem;
+  margin-left: -15px;
+  margin-top: -8px;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  width: 30px;
+  z-index: 1111; }
+
+hr.hr-dotted.dark {
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E");
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 4px 1px;
+  width: 100%; }
+
+hr.hr-dotted.lite {
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(204%2C204%2C204%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E"); }
+
+hr.is-vertical.dark,
+hr.hr-or.dark,
+hr.is-vertical.lite,
+hr.hr-or.lite {
+  display: inline-block;
+  height: auto;
+  margin: 0 15px;
+  min-height: 20px;
+  width: 1px; }
+
+hr.is-vertical.dark,
+hr.hr-or.dark {
+  background-color: #959595; }
+
+hr.is-vertical.lite,
+hr.hr-or.lite {
+  background-color: #d2d2d2; }
+
+.hr-dotted.is-vertical.dark,
+.hr-dotted.is-vertical.lite {
+  background-color: transparent;
+  background-repeat: repeat-y;
+  background-size: 1px 4px;
+  height: auto;
+  min-height: 20px;
+  width: 1px; }
+
+.hr-dotted.is-vertical.dark {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A1px%3B%20height%3A100%25%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%22100%25%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%221%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E"); }
+
+.hr-dotted.is-vertical.lite {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A1px%3B%20height%3A100%25%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(204%2C204%2C204%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%22100%25%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%221%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E"); }
+
+.row-nowrap > .span + hr.is-vertical,
+.row > .span + hr.is-vertical {
+  margin: 0 0 0 -20px; }
+
+@media (max-width: 767px) {
+  hr,
+  .hr-or {
+    margin: 30px 0; }
+  hr.full {
+    margin-left: -15px;
+    margin-right: -15px; }
+  .hr-or.is-vertical {
+    min-height: 1px;
+    height: 1px;
+    width: 100%; }
+  .row-nowrap > .span + hr.is-vertical {
+    margin: 0 0 0 -15px; }
+  .row > .span + hr.is-vertical {
+    min-height: 1px;
+    height: 1px;
+    width: 100%;
+    margin: 0;
+    display: block; }
+  .row > .span + hr.is-vertical.lite {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(204%2C204%2C204%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;
+    background-size: 4px 1px;
+    background-repeat: repeat-x; }
+  .row > .span + hr.is-vertical.dark {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;
+    background-size: 4px 1px;
+    background-repeat: repeat-x; } }
+
+hr.bottom-space-only {
+  margin-top: 0; }
+
+.hr-nomargin {
+  margin: 0; }
+
+.radio {
+  position: relative;
+  min-height: 24px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.6rem;
+  margin-bottom: 5px; }
+  .radio input {
+    -webkit-tap-highlight-color: transparent;
+    height: 10px;
+    margin: 6px;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 10px; }
+    .radio input:focus + .skin {
+      border-color: #0568ae; }
+      .radio input:focus + .skin:before {
+        content: "";
+        height: 34px;
+        left: -6px;
+        top: -6px;
+        outline: 1px dotted #000000;
+        position: absolute;
+        width: 34px; }
+    .radio input + .skin {
+      border-radius: 100%; }
+    .radio input:checked + .skin:after {
+      background-color: #0568ae;
+      border-radius: 100%;
+      border: 3px solid #FFFFFF;
+      content: "";
+      display: block;
+      height: 16px;
+      position: absolute;
+      width: 16px; }
+    .radio input:disabled + .skin {
+      cursor: not-allowed;
+      background-color: #d2d2d2;
+      border-color: #d2d2d2;
+      color: #666666; }
+      .radio input:disabled + .skin + span {
+        cursor: not-allowed;
+        color: #666666; }
+    .radio input:disabled:checked + .skin:after {
+      background-color: #666666; }
+    .radio input:invalid + .skin {
+      border: solid 1px #cf2a2a; }
+  .radio .skin {
+    background-color: #FFFFFF;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 24px; }
+  .radio span {
+    display: inline-block;
+    margin-left: 34px;
+    margin-top: 0;
+    position: relative;
+    top: 3px; }
+  .radio label {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial; }
+
+.radio.inline {
+  display: inline-block;
+  margin-bottom: 10px;
+  vertical-align: middle;
+  margin-right: 10px; }
+  .radio.inline:last-child {
+    margin-right: 0; }
+
+.radio-box {
+  border: 1px solid #d2d2d2;
+  border-radius: 8px; }
+  .radio-box > [role="radio"] label {
+    padding: 15px 15px 20px 15px;
+    display: block;
+    width: 100%; }
+    .radio-box > [role="radio"] label .skin + span {
+      top: 2px; }
+  .radio-box > [role="radio"] + div {
+    padding: 0 15px 15px 47px; }
+  .radio-box > [aria-checked="false"] label > input {
+    top: 15px;
+    left: 15px; }
+  .radio-box > [aria-checked="false"] label .skin {
+    top: 15px;
+    left: 15px; }
+  .radio-box > [aria-checked="true"] label > input {
+    top: 13px;
+    left: 13px; }
+  .radio-box > [aria-checked="true"] label .skin {
+    top: 13px;
+    left: 13px; }
+
+.radio-box.active {
+  border: 3px solid #0568ae; }
+  .radio-box.active > [role="radio"] label {
+    padding: 13px 14px 19px 13px; }
+
+.checkbox {
+  position: relative;
+  min-height: 24px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.6rem;
+  margin-bottom: 5px; }
+  .checkbox input {
+    -webkit-tap-highlight-color: transparent;
+    height: 10px;
+    margin: 6px;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 10px; }
+    .checkbox input:focus + .skin {
+      border-color: #0568ae; }
+      .checkbox input:focus + .skin:before {
+        content: "";
+        height: 34px;
+        left: -6px;
+        top: -6px;
+        outline: 1px dotted #000000;
+        position: absolute;
+        width: 34px; }
+    .checkbox input:checked:not(:disabled) + .skin {
+      background-color: #0568ae;
+      border-color: #0568ae; }
+    .checkbox input:checked:disabled + .skin:after {
+      color: #5A5A5A; }
+    .checkbox input:checked + .skin:after {
+      height: 24px;
+      width: 24px;
+      background-color: transparent;
+      font-size: 23.4px;
+      color: #FFFFFF;
+      line-height: 21px; }
+    .checkbox input:disabled + .skin {
+      cursor: not-allowed;
+      background-color: #d2d2d2;
+      border-color: #d2d2d2;
+      color: #666666; }
+      .checkbox input:disabled + .skin + span {
+        cursor: not-allowed;
+        color: #666666; }
+    .checkbox input:invalid + .skin {
+      border: solid 1px #cf2a2a; }
+    .checkbox input:indeterminate + .skin:after {
+      background-color: transparent;
+      font-size: 25px;
+      color: #0574ac;
+      content: "\e920"; }
+  .checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0; }
+  .checkbox span {
+    display: inline-block;
+    margin-left: 34px;
+    margin-top: 0;
+    position: relative;
+    top: 3px; }
+  .checkbox label {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial; }
+  .checkbox input {
+    z-index: 9999; }
+  .checkbox input.indeterminate + .skin:after {
+    font-size: 22px;
+    color: #0568ae; }
+
+.checkbox.inline {
+  display: inline-block;
+  margin-bottom: 10px;
+  vertical-align: middle;
+  margin-right: 10px; }
+  .checkbox.inline:last-child {
+    margin-right: 0; }
+
+.checkbox.checkbox-selectall {
+  margin: 20px 0 0 24px; }
+
+.terms-after-checkbox {
+  margin-top: 15px; }
+
+.indeterminate-margin {
+  padding-left: 24px; }
+
+.tiny-accordion {
+  border-bottom: 1px solid #d2d2d2; }
+
+.toggle-header,
+.inactive-toggle-header {
+  border-color: #fff;
+  color: #0568ae;
+  cursor: pointer;
+  display: block;
+  font-size: 2.0rem;
+  line-height: 2.2rem;
+  min-height: 41px;
+  position: relative;
+  padding: 16px 55px 16px 15px; }
+
+.toggle-header.opened {
+  color: #333333; }
+
+.tiny-accordion .toggle-header,
+.tiny-accordion .inactive-toggle-header {
+  padding: 16px 55px 16px 15px;
+  border-top: 1px solid #d2d2d2; }
+
+.tiny-accordion .toggle-header:focus {
+  text-decoration: underline; }
+
+.tiny-accordion.iconleft .toggle-header,
+.tiny-accordion.iconleft .inactive-toggle-header {
+  padding: 15px 15px 15px 50px; }
+
+.accordion-content {
+  font-size: 1.4rem; }
+
+.accordion-content .toggle-header:first-child {
+  margin-top: 16px; }
+
+.tiny-accordion .toggle-header + .accordion-content {
+  padding: 0 50px 15px 15px; }
+
+.tiny-accordion.iconleft .toggle-header + .accordion-content {
+  padding: 0 15px 15px 50px; }
+
+.toggle-header .icon-primary-accordion-plus,
+.toggle-header .icon-primary-accordion-minus {
+  display: inline-block;
+  font-size: 20px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 15px;
+  vertical-align: middle;
+  top: 16px;
+  font-weight: bold; }
+
+.tiny-accordion.iconleft .toggle-header .icon-primary-accordion-plus,
+.tiny-accordion.iconleft .toggle-header .icon-primary-accordion-minus {
+  left: 15px; }
+
+.inactive-toggle-header:hover {
+  cursor: inherit; }
+
+.tiny-accordion-to-tabs,
+.tiny-tabs {
+  position: relative;
+  width: 100%;
+  margin: 0px;
+  padding: 0px; }
+
+.tiny-tabs [class*="icon-primary-accordion-"] {
+  display: none !important; }
+
+.tiny-accordion-to-tabs:before,
+.tiny-accordion-to-tabs:after,
+.tiny-tabs:before,
+.tiny-tabs:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.tiny-accordion-to-tabs:after,
+.tiny-tabs:after {
+  clear: both; }
+
+.tiny-accordion-to-tabs:before,
+.tiny-accordion-to-tabs:after,
+.tiny-tabs:before,
+.tiny-tabs:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.tiny-accordion-to-tabs:after,
+.tiny-tabs:after {
+  clear: both; }
+
+.tiny-tabs > .toggle-header {
+  display: inline-block;
+  float: left;
+  border-top: none;
+  overflow: hidden;
+  height: 70px;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 0px;
+  padding: 26px 20px 25px 20px !important;
+  border-top: 1px solid #fff;
+  -webkit-filter: none;
+  filter: none;
+  background-clip: padding-box;
+  border-bottom: 1px solid #d2d2d2;
+  font-weight: normal;
+  border-right: 1px solid #d2d2d2;
+  white-space: nowrap; }
+
+.tiny-tabs .toggle-header + div {
+  left: 0px;
+  position: absolute;
+  top: 69px;
+  border-top: 1px solid #d2d2d2;
+  padding: 0;
+  display: block;
+  border-bottom: none;
+  width: 100%; }
+
+.accordion-pad {
+  padding-top: 30px;
+  padding-bottom: 30px; }
+
+.tiny-tabs .opened {
+  color: #333333;
+  border-top: 5px solid #0568ae !important;
+  padding-top: 22px !important;
+  border-bottom: none;
+  background-color: #fff;
+  -webkit-filter: none;
+  filter: none;
+  cursor: default;
+  z-index: 999; }
+
+.tiny-tabs .toggle-header:focus {
+  text-decoration: underline;
+  outline: thin dotted #666;
+  outline-offset: 0; }
+
+.tiny-tabs .toggle-header:first-child {
+  border-left: none;
+  margin-left: 0; }
+
+.tiny-tabs .toggle-header:first-child {
+  border-left: 1px solid #fff; }
+
+.tiny-tabs .opened:first-child {
+  border-left: 1px solid #d2d2d2; }
+
+.tiny-tabs .toggle-header:nth-last-of-type(2) {
+  border-right-color: #fff; }
+
+.tiny-tabs .opened:nth-last-of-type(2) {
+  border-right: 1px solid #d2d2d2; }
+
+@media (max-width: 767px) {
+  .tiny-accordion,
+  .tiny-accordion-to-tabs {
+    margin-left: -15px;
+    margin-right: -15px;
+    width: auto; }
+  .tiny-accordion-to-tabs {
+    display: block;
+    border-bottom: 1px solid #d2d2d2; }
+  .tiny-accordion-to-tabs .toggle-header {
+    display: block;
+    min-height: 41px;
+    padding: 16px 50px 16px 15px;
+    border-top: 1px solid #d2d2d2; }
+  .tiny-accordion-to-tabs .toggle-header:focus {
+    text-decoration: underline; }
+  .tiny-accordion-to-tabs .toggle-header + .accordion-content {
+    padding: 0 50px 15px 15px; } }
+
+@media (min-width: 768px) {
+  .tiny-accordion-to-tabs [class*="icon-primary-accordion-"] {
+    display: none !important; }
+  .tiny-accordion-to-tabs > .toggle-header {
+    display: inline-block;
+    float: left;
+    border-top: none;
+    /*overflow: hidden;*/
+    height: 70px;
+    text-align: center;
+    background-color: #fff;
+    border-radius: 0px;
+    padding: 26px 20px 25px 20px !important;
+    border-top: 1px solid #fff;
+    -webkit-filter: none;
+    filter: none;
+    background-clip: padding-box;
+    border-bottom: 1px solid #d2d2d2;
+    font-weight: normal;
+    border-right: 1px solid #d2d2d2;
+    white-space: nowrap; }
+  .tiny-accordion-to-tabs .toggle-header + div {
+    left: 0px;
+    position: absolute;
+    top: 69px;
+    border-top: 1px solid #d2d2d2;
+    padding-top: 30px;
+    padding-left: 20px;
+    display: block;
+    border-bottom: none;
+    width: 100%; }
+  .tiny-accordion-to-tabs .opened {
+    color: #333333;
+    border-top: 5px solid #0568ae !important;
+    padding-top: 22px !important;
+    border-bottom: none;
+    background-color: #fff;
+    -webkit-filter: none;
+    filter: none;
+    cursor: default;
+    text-decoration: none;
+    z-index: 999; }
+  .tiny-accordion-to-tabs .toggle-header:focus {
+    text-decoration: underline;
+    outline: thin dotted #666;
+    outline-offset: 0px; }
+  .tiny-accordion-to-tabs .toggle-header:nth-last-of-type(2) {
+    border-right: none; }
+  .tiny-accordion-to-tabs .toggle-header:first-child {
+    border-left: none;
+    margin-left: 0; }
+  .tiny-accordion-to-tabs .toggle-header:first-child {
+    border-left: 1px solid #fff; }
+  .tiny-accordion-to-tabs .opened:first-child {
+    border-left: 1px solid #d2d2d2; }
+  .tiny-accordion-to-tabs .opened:nth-last-of-type(2) {
+    border-right: 1px solid #d2d2d2; } }
+
+.toggle-header .tooltip .icon-primary-tooltip {
+  margin-top: -5px; }
+
+.accordion-content {
+  transition: all 0.8s linear; }
+
+.opaque-content {
+  opacity: 0; }
+
+.tiny-tabs .toggle-header {
+  display: inline-block;
+  float: left;
+  border-top: none;
+  overflow: hidden;
+  height: 70px;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 0px;
+  padding: 22px 20px 25px 20px !important;
+  border-top: 5px solid #fff;
+  -webkit-filter: none;
+  filter: none;
+  background-clip: padding-box;
+  border-bottom: 1px solid #ccc;
+  font-weight: normal;
+  border-right: 1px solid #ccc;
+  white-space: nowrap; }
+
+.tiny-tabs .toggle-header:first-child {
+  margin-left: 0; }
+
+.tiny-tabs div:first-child .toggle-header {
+  margin-left: 30px; }
+
+.tiny-tabs > div .toggle-header.opened {
+  border-bottom: 0 !important; }
+
+.tiny-accordion-to-tabs > div > div.toggle-header {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+  border-top: 5px solid #fff;
+  display: inline-block;
+  filter: none;
+  float: left;
+  font-weight: normal;
+  overflow: hidden;
+  padding: 22px 20px 21px !important;
+  text-align: center;
+  white-space: nowrap; }
+
+.tiny-accordion-to-tabs .toggle-header:first-child {
+  margin-left: 0; }
+
+.tiny-accordion-to-tabs div:first-child .toggle-header {
+  margin-left: 30px;
+  border-bottom: 0 !important; }
+
+.tiny-accordion-to-tabs > div .toggle-header.opened {
+  border-bottom: 0 !important; }
+
+@media (max-width: 767px) {
+  .tiny-accordion-to-tabs {
+    display: block !important;
+    border-bottom: 1px solid #ccc !important; }
+  .tiny-accordion-to-tabs > div > div.toggle-header {
+    display: block !important;
+    float: none;
+    text-align: left;
+    min-height: 41px !important;
+    padding: 15px 50px 15px 15px !important;
+    border-top: 1px solid #ccc; }
+  .tiny-accordion-to-tabs > div > div.toggle-header:first-child {
+    margin-left: 0 !important; }
+  .tiny-accordion-to-tabs > div > div.toggle-header + .accordion-content {
+    padding: 0 50px 15px 15px; }
+  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-plus {
+    background-position: 0 0;
+    background-size: 20px 40px; }
+  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-minus {
+    background-position: 0 -20px;
+    background-size: 20px 40px; }
+  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-plus,
+  .tiny-accordion-to-tabs > div > div.toggle-header .icon-primary-accordion-minus {
+    display: inline-block;
+    height: 20px;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 15px;
+    vertical-align: middle;
+    width: 20px; } }
+
+.alert {
+  background-color: #5a5a5a;
+  border-radius: 8px;
+  color: #fff;
+  margin-top: 15px;
+  padding: 0;
+  position: relative;
+  border: 0; }
+
+.alert h3,
+.alert h4 {
+  color: #fff;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 1.6rem;
+  margin: 0 20px 5px 0; }
+
+.alert div {
+  padding: 15px 20px; }
+
+.alert div:first-child {
+  border-radius: 8px 0 0 8px;
+  width: 1%; }
+
+.alert div:first-child + div {
+  border: 1px solid transparent;
+  border-left: none;
+  border-radius: 0 8px 8px 0; }
+
+.alert-error {
+  background-color: #cf2a2a;
+  border: 1px solid #cf2a2a; }
+
+.alert-info {
+  background-color: #44c8f5;
+  border: 1px solid #44c8f5; }
+
+.alert-success {
+  background-color: #c5d63d;
+  border: 1px solid #c5d63d; }
+
+.alert [class*="icon-primary-"] {
+  color: #fff;
+  font-size: 30px;
+  margin-right: 0; }
+
+.alert .close {
+  height: 30px;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 30px; }
+
+.alert .close:before {
+  color: #fff;
+  margin-right: 0;
+  position: absolute;
+  right: 9px;
+  top: 9px; }
+
+.alert a {
+  color: #fff;
+  text-decoration: underline; }
+
+.alert .close:focus {
+  outline: 1px dotted #666; }
+
+.alert p {
+  font-size: 1.4rem; }
+
+.alert p:last-child {
+  margin-bottom: 0; }
+
+.alert .standalone-link i[class*="icon-primary-"] {
+  font-size: 20px;
+  margin-right: 5px; }
+
+@media (max-width: 767px) {
+  .alert {
+    border-radius: 0;
+    margin: 0 -15px; }
+  .alert + .alert {
+    margin-top: 4px; }
+  .alert div {
+    padding: 15px 10px; }
+  .alert div:first-child {
+    border-radius: 0;
+    padding: 15px; }
+  .alert h3,
+  .alert h4 {
+    font-size: 1.4rem; }
+  .alert p {
+    font-size: 1.2rem; }
+  .alert .close {
+    right: 5px;
+    top: 5px; }
+  .alert .standalone-link i[class*="icon-primary-"] {
+    font-size: 16px; } }
+
+.alert h3 {
+  margin: 0;
+  font-size: 16px; }
+
+.alert p {
+  font-size: 14px; }
+
+.alert p a {
+  color: #FFFFFF;
+  text-decoration: underline; }
+
+.alert div:first-child + div {
+  padding-right: 25px; }
+
+.alert div:last-child {
+  padding-right: 20px !important; }
+
+.alert p [class*="icon-primary-"] {
+  color: #fff;
+  font-size: 20px;
+  margin-right: 0; }
+
+@media (max-width: 767px) {
+  .alert h3 {
+    font-size: 14px; }
+  .alert div:first-child + div {
+    padding-right: 20px; }
+  .alert div:last-child {
+    padding-right: 15px !important; }
+  .alert div:first-child {
+    padding: 15px; }
+  .alert p {
+    font-size: 12px; }
+  .alert p [class*="icon-primary-"] {
+    font-size: 16px; } }
+
+.b2b-audio {
+  width: auto;
+  margin: 10px auto;
+  height: 35px; }
+  .b2b-audio .controls-wrapper {
+    display: inline-block;
+    font-size: 25px;
+    cursor: pointer; }
+    .b2b-audio .controls-wrapper i {
+      font-size: 25px;
+      margin-right: 0px;
+      color: #444; }
+      .b2b-audio .controls-wrapper i:hover {
+        color: #0574AC; }
+  .b2b-audio .seek-bar-container-wrapper {
+    display: inline-block;
+    outline: 0;
+    min-width: 180px;
+    margin-right: 10px;
+    margin-left: 10px;
+    height: 14px;
+    padding-top: 5px; }
+    .b2b-audio .seek-bar-container-wrapper .timing-container {
+      padding-top: 13px;
+      color: #333;
+      font-size: 12px; }
+      .b2b-audio .seek-bar-container-wrapper .timing-container .timing-container-left {
+        float: left;
+        line-height: 100%; }
+      .b2b-audio .seek-bar-container-wrapper .timing-container .timing-container-right {
+        float: right;
+        line-height: 100%; }
+      .b2b-audio .seek-bar-container-wrapper .timing-container .timing-container-spacer {
+        clear: both; }
+  .b2b-audio .seek-bar-tooltip {
+    text-align: center;
+    min-width: 76px; }
+
+.b2b-audio-popover {
+  width: 22px; }
+  .b2b-audio-popover .volume-popover {
+    height: 100px !important;
+    width: 6px !important;
+    margin: 7px auto; }
+  .b2b-audio-popover .min-label {
+    margin-top: 5px; }
+
+.b2b-audio-native {
+  width: auto;
+  height: auto; }
+
+.b2b-audio-recorder {
+  border: 1px solid #ccc;
+  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.15);
+  height: 63px;
+  min-height: 63px;
+  min-width: 347px; }
+  .b2b-audio-recorder .b2b-elapsed-time {
+    margin: 23px 0 24px 15px;
+    font-size: 16px;
+    font-style: italic;
+    color: #767676; }
+  .b2b-audio-recorder .b2b-controls {
+    width: 68px;
+    cursor: pointer; }
+    .b2b-audio-recorder .b2b-controls i.icoControls-record {
+      font-size: 64px;
+      color: black;
+      float: right;
+      margin-right: 10px; }
+      .b2b-audio-recorder .b2b-controls i.icoControls-record:focus, .b2b-audio-recorder .b2b-controls i.icoControls-record:hover {
+        color: #0568ae; }
+    .b2b-audio-recorder .b2b-controls i.icoControls-stop {
+      font-size: 36px;
+      color: black;
+      float: right;
+      margin-right: 20px;
+      margin-top: 12px; }
+      .b2b-audio-recorder .b2b-controls i.icoControls-stop:focus, .b2b-audio-recorder .b2b-controls i.icoControls-stop:hover {
+        color: #0568ae; }
+
+.b2b-top-btn {
+  height: 36px;
+  width: 36px;
+  border-radius: 7px; }
+
+.b2b-top-btn > i {
+  position: absolute;
+  top: 13px;
+  left: 9px;
+  width: 11px;
+  height: 18px; }
+
+.b2b-badge {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  background-color: #5A5A5A;
+  border-radius: 12px;
+  color: #FFFFFF;
+  display: inline-block;
+  font-size: 1.5rem;
+  font-weight: normal;
+  height: 20px;
+  line-height: 0;
+  margin-top: 0;
+  min-width: 20px;
+  padding: 0 5px;
+  text-align: center;
+  vertical-align: baseline; }
+  .b2b-badge:empty {
+    display: none; }
+
+* + .b2b-heading-micro {
+  margin-top: 20px !important; }
+
+.b2b-heading-micro {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-size: 1.2rem !important;
+  text-transform: uppercase !important;
+  margin-bottom: 20px !important;
+  line-height: 1.2 !important; }
+
+.b2b-no-colors .b2b-badge {
+  border: 1px solid transparent; }
+
+.btn > .b2b-badge {
+  margin-right: 5px; }
+
+a > .b2b-badge {
+  margin-right: 6px;
+  padding-top: 10px; }
+
+.b2b-badge-urgent {
+  background-color: #cf2a2a; }
+
+.bellyband-container {
+  margin: 0 -15px; }
+
+.bellyband-group {
+  width: auto; }
+
+.bellyband-link {
+  border-top: 1px solid #d2d2d2; }
+
+.bellyband-link a {
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+  position: relative;
+  text-decoration: none; }
+
+.bellyband-link a:hover > div span,
+.bellyband-link a:focus > div span {
+  text-decoration: underline; }
+
+.bellyband-link a:after {
+  color: #666;
+  font-size: 2.3rem;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  top: 12px;
+  width: 18px; }
+
+.dark-bg .bellyband-link a:after {
+  color: white; }
+
+.bellyband-link img[src$="svg"].hidden-desktop,
+.bellyband-link [class*="icon-primary-"].hidden-desktop {
+  display: inline-block !important;
+  float: left;
+  font-size: 24px;
+  height: 24px;
+  margin-right: 5px;
+  margin-top: 8px;
+  width: 24px; }
+
+.dark-bg .bellyband-link [class*="icon-primary-"].hidden-desktop,
+.dark-bg .bellyband-link [class*="icon-primary-"].visible-desktop {
+  color: #fff; }
+
+.bellyband-link img[src$="svg"].visible-desktop {
+  display: none !important; }
+
+.bellyband-link p {
+  margin-top: -10px;
+  margin-left: 29px;
+  font-size: 1.4rem;
+  color: #666; }
+
+@media (min-width: 481px) and (max-width: 767px) {
+  .bellyband-container {
+    display: flex;
+    margin: 0; }
+  .bellyband-group {
+    align-content: flex-start;
+    align-items: stretch;
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-top: 1px;
+    width: 100%; }
+  .bellyband-group .row {
+    display: flex !important; }
+  .bellyband-link {
+    padding-top: 0;
+    position: relative;
+    border-top: none;
+    margin-bottom: 20px;
+    width: 50%; }
+  .bellyband-link a {
+    height: inherit;
+    line-height: inherit;
+    display: flex;
+    padding: 0; }
+  .bellyband-link a:after {
+    display: none; }
+  .bellyband-link a span {
+    display: block;
+    padding-top: 10px; }
+  .bellyband-link p {
+    display: block;
+    padding: 0 15px 0 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-top: 0; }
+  .bellyband-link a:focus p {
+    text-decoration: none; } }
+
+@media (min-width: 768px) {
+  .bellyband-group {
+    margin: 0;
+    max-width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center; }
+  .bellyband-group .row {
+    display: block; }
+  .bellyband-group .row .span {
+    float: none;
+    margin-right: 0;
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: space-between; }
+  .bellyband-link {
+    border-top: none;
+    flex: 0 0 auto;
+    margin-right: 0;
+    margin-bottom: 30px; }
+  .bellyband-link:last-child {
+    margin-right: 0; }
+  .bellyband-link a {
+    height: auto;
+    line-height: 1;
+    text-align: center; }
+  .bellyband-link a:after {
+    display: none; }
+  .bellyband-link img[src$="svg"].hidden-desktop,
+  .bellyband-link [class*="icon-primary-"].hidden-desktop {
+    display: none !important; }
+  .bellyband-link img[src$="svg"].visible-desktop,
+  .bellyband-link [class*="icon-primary-"].visible-desktop {
+    display: block !important;
+    font-size: 50px;
+    height: 50px;
+    margin-right: 0;
+    margin-top: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: auto; }
+  .bellyband-link a span {
+    display: block;
+    margin-top: 12px;
+    line-height: 2rem; }
+  .bellyband-link p {
+    display: block;
+    text-align: center;
+    margin-top: 6px;
+    margin-left: 0;
+    padding-left: 0 !important;
+    color: #666;
+    line-height: 1.8rem; } }
+
+@media (max-width: 480px) {
+  .bellyband-link-tall a {
+    height: auto;
+    padding: 0 40px 10px 15px; }
+  .bellyband-link-tall p {
+    line-height: 1.8rem;
+    margin-bottom: 0; }
+  .bellyband-link-tall > a:after {
+    margin-top: -8px;
+    top: 50%; } }
+
+.b2b-boardstrip {
+  display: inline-block;
+  width: 100%;
+  border-bottom: 1px solid #9d9d9d;
+  position: relative;
+  padding-top: 15px; }
+  .b2b-boardstrip .boardstrip-reel {
+    margin-bottom: 15px; }
+  .b2b-boardstrip .boardstrip-item--add {
+    border: 1px dashed #ccc;
+    background: #FFFFFF;
+    color: #0574ac;
+    width: 140px;
+    height: 80px;
+    font-size: 14px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    position: absolute;
+    left: 29px;
+    top: 15px; }
+    .b2b-boardstrip .boardstrip-item--add:hover, .b2b-boardstrip .boardstrip-item--add:focus {
+      border: 2px solid #007A3E;
+      cursor: pointer; }
+    .b2b-boardstrip .boardstrip-item--add i {
+      font-size: 14px;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: initial; }
+    .b2b-boardstrip .boardstrip-item--add .centered {
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 27px;
+      margin-bottom: 35px;
+      display: block; }
+  .b2b-boardstrip .board-viewport {
+    float: left;
+    margin-left: 210px;
+    max-height: 95px;
+    position: relative;
+    height: 95px;
+    overflow: hidden;
+    width: 0px; }
+    .b2b-boardstrip .board-viewport .boardstrip-container {
+      width: 0px;
+      margin-left: 0;
+      left: 0px;
+      position: absolute;
+      list-style: none;
+      -webkit-transition: left 1000ms;
+      transition: left 1000ms; }
+    .b2b-boardstrip .board-viewport .board-item {
+      width: 140px;
+      height: 80px;
+      border: 1px solid #ccc;
+      margin: 0 15px 15px 0;
+      background-color: #FFFFFF;
+      border-radius: 3px;
+      float: left;
+      overflow: hidden; }
+      .b2b-boardstrip .board-viewport .board-item:hover, .b2b-boardstrip .board-viewport .board-item:focus {
+        border: 2px solid #007A3E;
+        background-color: white;
+        cursor: pointer; }
+      .b2b-boardstrip .board-viewport .board-item .board-img {
+        width: 61px;
+        height: 40px;
+        margin: 0 auto; }
+        .b2b-boardstrip .board-viewport .board-item .board-img img {
+          max-width: 100%; }
+      .b2b-boardstrip .board-viewport .board-item .title {
+        text-align: center;
+        line-height: 16px;
+        color: #666;
+        font-size: 14px;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        padding: 10px 0; }
+      .b2b-boardstrip .board-viewport .board-item.selected {
+        background-color: #FFFFFF;
+        border: 2px solid #0574ac; }
+      .b2b-boardstrip .board-viewport .board-item .board-caret {
+        cursor: default;
+        outline: 0;
+        position: absolute;
+        bottom: 7px; }
+        .b2b-boardstrip .board-viewport .board-item .board-caret .board-caret-indicator {
+          border-left: 8px solid transparent;
+          border-right: 8px solid transparent;
+          border-bottom: 8px solid #999;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          left: 61px;
+          bottom: -7px; }
+        .b2b-boardstrip .board-viewport .board-item .board-caret .board-caret-arrow-up {
+          width: 0px;
+          height: 0px;
+          border-style: solid;
+          border-width: 0 8px 8px 8px;
+          border-color: transparent transparent #FFFFFF transparent;
+          left: 61px;
+          position: absolute; }
+  .b2b-boardstrip .arrow {
+    font-size: 14px;
+    cursor: pointer;
+    color: #0574ac; }
+    .b2b-boardstrip .arrow:hover {
+      color: #0574ac; }
+    .b2b-boardstrip .arrow.disabled {
+      color: #767676 !important;
+      cursor: not-allowed; }
+  .b2b-boardstrip .prev-items {
+    display: inline-block;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-right: 15px;
+    position: absolute;
+    left: 0;
+    top: 45px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none; }
+  .b2b-boardstrip .next-items {
+    display: inline-block;
+    margin-top: 30px;
+    margin-bottom: auto;
+    margin-left: 10px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none; }
+  .b2b-boardstrip .centered {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle; }
+
+.breadcrumb {
+  padding: 10px 15px;
+  height: 40px;
+  list-style: none;
+  border-bottom: 1px solid #d2d2d2;
+  font-size: 1.2rem;
+  width: 100%;
+  z-index: 1000; }
+
+.breadcrumb > li {
+  position: relative;
+  display: inline-block;
+  margin-right: 15px; }
+
+.breadcrumb > li:after {
+  font-size: 8px;
+  margin-right: 0;
+  right: -8px;
+  color: #333333; }
+
+.breadcrumb > li:last-child {
+  color: #333333; }
+
+.breadcrumb > li:last-child:after {
+  content: ""; }
+
+.breadcrumb li > * {
+  float: none !important;
+  margin: 0; }
+
+.breadcrumb {
+  padding: 10px 15px !important; }
+
+/* ARROW */
+/* spanish */
+.datepicker {
+  background-color: #FFFFFF;
+  padding: 0;
+  border-radius: 5px;
+  direction: ltr; }
+  .datepicker > div {
+    display: none; }
+  .datepicker table {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin: 0 0 0 0; }
+  .datepicker td {
+    text-align: center;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: none; }
+    .datepicker td span {
+      display: block;
+      width: 23%;
+      height: 54px;
+      line-height: 54px;
+      float: left;
+      margin: 1%;
+      cursor: pointer;
+      border-radius: 4px; }
+      .datepicker td span:hover {
+        background: #eeeeee; }
+    .datepicker td span.disabled {
+      background: none;
+      color: #5A5A5A;
+      cursor: default; }
+      .datepicker td span.disabled:hover {
+        background: none;
+        color: #5A5A5A;
+        cursor: default; }
+    .datepicker td span.active {
+      color: #FFFFFF;
+      background-color: #0568ae;
+      border-color: #357ebd; }
+      .datepicker td span.active:hover {
+        color: #FFFFFF;
+        background-color: #0568ae;
+        border-color: #357ebd; }
+    .datepicker td span.active.disabled {
+      color: #FFFFFF;
+      background-color: #0568ae;
+      border-color: #357ebd; }
+  .datepicker th {
+    text-align: center;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: none; }
+  .datepicker tbody:focus {
+    outline: none; }
+  .datepicker td.day {
+    background-color: transparent;
+    color: #0568ae;
+    cursor: pointer;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-size: 16px;
+    height: 34px;
+    line-height: 30rem;
+    margin: -2px -1px 0 0;
+    overflow: hidden;
+    text-align: center;
+    width: 42px; }
+  .datepicker:focus {
+    outline: 1px dotted #191919;
+    outline-offset: -2px; }
+  .datepicker th[tabindex]:focus {
+    outline-offset: -15px; }
+  .datepicker td.day.focused {
+    background: #ededed;
+    cursor: pointer; }
+  .datepicker td.day.focused.active {
+    background-color: #ededed;
+    color: #0568ae; }
+  .datepicker td.disabled {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5A5A5A;
+    cursor: default; }
+    .datepicker td.disabled:hover {
+      font-family: "Omnes-ECOMP-W02", Arial;
+      color: #5A5A5A;
+      cursor: default; }
+      .datepicker td.disabled:hover .show-date {
+        font-family: "Omnes-ECOMP-W02", Arial;
+        color: #5A5A5A; }
+    .datepicker td.disabled .show-date {
+      font-family: "Omnes-ECOMP-W02", Arial;
+      color: #5A5A5A; }
+  .datepicker td.today {
+    color: #FFFFFF;
+    background-color: #0568ae; }
+    .datepicker td.today:hover {
+      color: #FFFFFF;
+      background-color: #0568ae;
+      color: #FFFFFF;
+      background-color: #0568ae; }
+    .datepicker td.today:active {
+      color: #FFFFFF;
+      background-color: #0568ae; }
+    .datepicker td.today:focus {
+      color: #FFFFFF;
+      background-color: #0568ae; }
+  .datepicker td.today.disabled {
+    color: #FFFFFF;
+    background-color: #0568ae; }
+  .datepicker td.today.active {
+    color: #FFFFFF;
+    background-color: #0568ae; }
+    .datepicker td.today.active:hover {
+      color: #FFFFFF; }
+  .datepicker td.selected {
+    color: #FFFFFF;
+    background-color: #959595; }
+    .datepicker td.selected:hover {
+      color: #FFFFFF;
+      background-color: #959595; }
+  .datepicker td.selected.disabled {
+    color: #FFFFFF;
+    background-color: #959595; }
+  .datepicker td.active:not(.new) {
+    color: #FFFFFF;
+    border-color: #357ebd; }
+    .datepicker td.active:not(.new) .show-date {
+      color: #0568ae;
+      font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+  .datepicker td.active:hover:not(.new) {
+    color: #FFFFFF;
+    border-color: #357ebd; }
+    .datepicker td.active:hover:not(.new) .show-date {
+      color: #0568ae;
+      font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+  .datepicker .start-date .show-date {
+    background-color: #0568ae;
+    color: #FFFFFF !important;
+    border-radius: 5px 0 0 5px;
+    z-index: 1; }
+    .datepicker .start-date .show-date:before {
+      background-color: #0568ae;
+      content: "";
+      display: block;
+      height: 26px;
+      left: 20px;
+      position: absolute;
+      width: 100%;
+      z-index: -1; }
+  .datepicker .between-date .show-date {
+    background-color: #0568ae;
+    color: #FFFFFF !important; }
+    .datepicker .between-date .show-date:before {
+      background-color: #0568ae;
+      content: "";
+      display: block;
+      height: 26px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      z-index: -1; }
+  .datepicker .between-date:first-child .show-date:before {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    left: 0;
+    width: 8px; }
+  .datepicker .end-date .show-date {
+    background-color: #0568ae;
+    color: #FFFFFF !important;
+    border-radius: 0 5px 5px 0; }
+    .datepicker .end-date .show-date:before {
+      background-color: #0568ae;
+      content: "";
+      display: block;
+      height: 26px;
+      left: -20px;
+      position: absolute;
+      width: 100%;
+      z-index: -1; }
+  .datepicker .end-date:first-child .show-date:after {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    left: 0;
+    width: 8px; }
+  .datepicker .end-date:first-child .show-date::before {
+    background-color: #FFFFFF; }
+  .datepicker tr td.start-date:last-child .show-date:after {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    right: 0;
+    width: 8px; }
+  .datepicker tr td.start-date:last-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent; }
+  .datepicker tr td.start-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent; }
+  .datepicker tr td.between-date:last-child .show-date:after {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    right: 0;
+    width: 8px; }
+  .datepicker tr td.between-date:last-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent; }
+  .datepicker tr td.between-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent; }
+  .datepicker tr td.end-date:last-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent; }
+  .datepicker tr td.end-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent; }
+  .datepicker th.datepicker-switch {
+    width: 198px;
+    font-size: 20px;
+    font-weight: normal;
+    cursor: default !important; }
+  .datepicker thead tr:first-child th {
+    cursor: pointer;
+    height: 60px;
+    line-height: 60px; }
+  .datepicker thead tr:first-child th.cw {
+    cursor: default;
+    background-color: transparent; }
+  .datepicker tfoot tr th {
+    cursor: pointer;
+    height: 60px;
+    line-height: 60px;
+    height: auto;
+    line-height: normal; }
+    .datepicker tfoot tr th li {
+      margin-bottom: 5px; }
+  .datepicker .prev {
+    color: transparent;
+    font-size: 0;
+    margin: 0 -1px -1px 0;
+    width: 46px; }
+    .datepicker .prev i {
+      color: #0568ae;
+      position: absolute;
+      font-size: 27px;
+      margin: 0;
+      top: 15px;
+      left: 8px; }
+  .datepicker .next {
+    color: transparent;
+    font-size: 0;
+    margin: 0 -1px -1px 0;
+    width: 46px; }
+    .datepicker .next i {
+      color: #0568ae;
+      position: absolute;
+      font-size: 27px;
+      margin: 0;
+      top: 15px;
+      right: 8px; }
+  .datepicker .cw {
+    font-size: 10px;
+    width: 12px;
+    padding: 0 2px 0 5px;
+    vertical-align: middle; }
+  .datepicker .due-date .show-date {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    background-color: #cf2a2a;
+    border-radius: 5px;
+    color: #FFFFFF !important; }
+  .datepicker .day.active .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px; }
+  .datepicker .day:focus .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    left: 4px;
+    top: 0;
+    width: 30px; }
+  .datepicker .due-date.disabled .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px; }
+  .datepicker .day.due-date:focus .show-date:after {
+    height: 30px;
+    left: 4px;
+    top: 0;
+    width: 30px; }
+  .datepicker .due-date.old:after {
+    visibility: hidden; }
+  .datepicker .due-date.new:after {
+    visibility: hidden; }
+  .datepicker .due-date.active:after {
+    border-color: #FFFFFF; }
+  .datepicker .due-date.active.focused {
+    color: #0568ae !important; }
+    .datepicker .due-date.active.focused:after {
+      border-color: #cf2a2a !important; }
+  .datepicker .dow {
+    height: 24px;
+    width: 42px;
+    font-weight: normal;
+    position: relative;
+    overflow: hidden;
+    color: transparent;
+    letter-spacing: -6px;
+    margin: 0 -1px -1px 0; }
+    .datepicker .dow span[aria-hidden="true"] {
+      bottom: 0;
+      color: #5A5A5A;
+      display: block;
+      left: 1px;
+      letter-spacing: 0;
+      line-height: .9;
+      margin: 0 auto;
+      padding: 0;
+      position: relative;
+      width: 22px; }
+  .datepicker .calendar-legend {
+    margin-top: 3px;
+    margin-bottom: 20px; }
+    .datepicker .calendar-legend li {
+      font-size: 1.4rem;
+      font-weight: normal;
+      margin-bottom: 5px;
+      padding-left: 10px;
+      padding-top: 5px;
+      position: relative; }
+  .datepicker i.legend-due-date {
+    background-color: #cf2a2a;
+    border-radius: 5px;
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block; }
+  .datepicker i.legend-selected-date {
+    background-color: #FFFFFF;
+    border: 2px solid #0568ae;
+    border-radius: 5px;
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block; }
+  .datepicker i.legend-selectedisdue {
+    background-color: #FFFFFF;
+    border: 2px solid #0568ae;
+    border-radius: 5px;
+    display: inline-block;
+    height: 18px;
+    margin-right: 8px;
+    position: relative;
+    vertical-align: middle;
+    width: 18px; }
+    .datepicker i.legend-selectedisdue:after {
+      background-color: #cf2a2a;
+      border-radius: 3px;
+      content: "";
+      display: block;
+      height: 10px;
+      left: 2px;
+      position: absolute;
+      top: 2px;
+      width: 10px; }
+  .datepicker .text-left {
+    width: 100%; }
+  .datepicker .active.old {
+    background-color: #ededed !important;
+    color: #ededed !important; }
+
+.datepicker-inline {
+  width: 220px; }
+
+.datepicker.datepicker-rtl {
+  direction: rtl; }
+  .datepicker.datepicker-rtl td span {
+    float: right; }
+
+.datepicker-dropdown {
+  top: 0;
+  left: 0; }
+  .datepicker-dropdown:before {
+    content: " ";
+    display: inline-block;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #d2d2d2;
+    border-top: 0;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    position: absolute; }
+  .datepicker-dropdown:after {
+    content: " ";
+    display: inline-block;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #fff;
+    border-top: 0;
+    position: absolute; }
+
+.datepicker-dropdown.datepicker-orient-left:before {
+  left: 16px; }
+
+.datepicker-dropdown.datepicker-orient-left:after {
+  left: 16px; }
+
+.datepicker-dropdown.datepicker-orient-right:before {
+  right: 16px; }
+
+.datepicker-dropdown.datepicker-orient-right:after {
+  right: 16px; }
+
+.datepicker-dropdown.datepicker-orient-top:before {
+  top: -10px; }
+
+.datepicker-dropdown.datepicker-orient-top:after {
+  top: -9px; }
+
+.datepicker-dropdown.datepicker-orient-bottom:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #959595; }
+
+.datepicker-dropdown.datepicker-orient-bottom:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #fff; }
+
+.datepicker.days div.datepicker-days {
+  display: block; }
+
+.datepicker.months div.datepicker-months {
+  display: block; }
+
+.datepicker.years div.datepicker-years {
+  display: block; }
+
+.show-date {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #0568ae;
+  height: 26px;
+  line-height: 26px;
+  margin: 4px auto 0;
+  width: 26px; }
+
+.input-group.date .input-group-addon i {
+  cursor: pointer;
+  width: 16px;
+  height: 16px; }
+
+.datepicker.dropdown-menu {
+  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  float: left;
+  display: none;
+  margin-top: 13px;
+  width: 290px;
+  list-style: none;
+  background-color: #FFFFFF;
+  border: 1px solid #d2d2d2;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  color: #333333;
+  font-size: 13px;
+  line-height: 1.428571429;
+  z-index: 1050; }
+  .datepicker.dropdown-menu th {
+    display: block;
+    float: left;
+    padding: 0;
+    position: relative; }
+  .datepicker.dropdown-menu td {
+    display: block;
+    float: left;
+    padding: 0;
+    position: relative; }
+
+.s {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: -62px 0; }
+
+.m {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: -5px 0; }
+
+.t {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: -19px 0; }
+
+.w {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: -34px 0; }
+
+.f {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: -49px 0; }
+
+.d {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: 0 0; }
+
+.l {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: 0 0; }
+
+.v {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: 0 0; }
+
+.j {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: #FFFFFF;
+  background-repeat: no-repeat;
+  background-position: 0 0; }
+
+.b2b-coachmark-label {
+  z-index: 1060;
+  opacity: 1;
+  cursor: not-allowed;
+  position: relative; }
+
+.b2b-coachmark-highlight {
+  border: 1px solid #d3d3d3;
+  cursor: default;
+  z-index: 1045;
+  opacity: 1;
+  background-color: #ffffff;
+  border-radius: 10px;
+  position: relative;
+  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.25);
+  padding: 10px;
+  position: absolute; }
+
+.b2b-coachmark-highlight-mask {
+  z-index: 1100;
+  opacity: .1; }
+
+.b2b-coachmark-container {
+  border: 1px solid #cccccc;
+  width: 316px;
+  pointer-events: auto;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 16px;
+  -webkit-transition: opacity .2s ease-out;
+  -moz-transition: opacity .2s ease-out;
+  transition: opacity .2s ease-out;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.15);
+  color: #333;
+  line-height: 20px;
+  position: absolute;
+  top: 50px;
+  left: -97px;
+  display: block;
+  background-color: #ffffff;
+  z-index: 1050;
+  opacity: 1; }
+  .b2b-coachmark-container i.b2b-coachmark-caret {
+    position: absolute;
+    top: -12px;
+    left: 47%;
+    opacity: 1;
+    z-index: 1050; }
+  .b2b-coachmark-container i.b2b-coachmark-caret:before {
+    content: "";
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    border-bottom: 12px solid #d3d3d3;
+    position: absolute;
+    top: -1px; }
+  .b2b-coachmark-container i.b2b-coachmark-caret:after {
+    content: "";
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    border-bottom: 12px solid #fff;
+    position: absolute; }
+  .b2b-coachmark-container .b2b-coachmark-header {
+    position: relative;
+    height: 47px;
+    overflow: hidden; }
+    .b2b-coachmark-container .b2b-coachmark-header .corner-button {
+      box-shadow: 0 -24px 0 0 #f2f2f2 inset;
+      height: 69px;
+      position: absolute;
+      right: -33px;
+      top: -38px;
+      transform: rotate(45deg);
+      width: 69px; }
+  .b2b-coachmark-container .b2b-coachmark-countlabel {
+    font-size: 12px;
+    font-family: "Omnes-ECOMP-W02, Arial";
+    color: #333333;
+    margin-left: 20px;
+    margin-top: 20px; }
+  .b2b-coachmark-container .b2b-coachmark-content {
+    padding: 0px 20px 20px 20px;
+    float: left; }
+    .b2b-coachmark-container .b2b-coachmark-content .icon-misc-dimmer {
+      font-size: 32px;
+      float: left;
+      margin-right: 10px;
+      width: 32px; }
+    .b2b-coachmark-container .b2b-coachmark-content .offscreen-text {
+      position: absolute;
+      left: -10000px;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden; }
+    .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-content-header {
+      font-size: 16px;
+      color: #333333;
+      line-height: 18px;
+      float: left;
+      width: 220px; }
+    .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-description {
+      font-size: 14px;
+      line-height: 18px;
+      color: #333333;
+      width: 100%;
+      float: left;
+      margin-top: 15px; }
+    .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-btn-group {
+      margin-top: 20px;
+      float: left;
+      text-align: right;
+      width: 100%; }
+      .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-btn-group .b2b-coachmark-link {
+        font-family: "Omnes-ECOMP-W02-Medium", Arial;
+        font-size: 15px;
+        color: #0574ac;
+        line-height: 18px;
+        margin-right: 20px; }
+      .b2b-coachmark-container .b2b-coachmark-content .b2b-coachmark-btn-group button {
+        font-size: 15px;
+        margin: 0px; }
+
+.datepicker {
+  background-color: #fff;
+  padding: 0;
+  border-radius: 5px;
+  direction: ltr; }
+
+.datepicker-inline {
+  width: 220px; }
+
+.datepicker.datepicker-rtl {
+  direction: rtl; }
+
+.datepicker.datepicker-rtl td span {
+  float: right; }
+
+.datepicker-dropdown {
+  top: 0;
+  left: 0; }
+
+/* ARROW */
+.datepicker-dropdown:before {
+  content: " ";
+  display: inline-block;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid #d2d2d2;
+  border-top: 0;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute; }
+
+.datepicker-dropdown:after {
+  content: " ";
+  display: inline-block;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid #fff;
+  border-top: 0;
+  position: absolute; }
+
+.datepicker-dropdown.datepicker-orient-left:before,
+.datepicker-dropdown.datepicker-orient-left:after {
+  left: 16px; }
+
+.datepicker-dropdown.datepicker-orient-right:before,
+.datepicker-dropdown.datepicker-orient-right:after {
+  right: 16px; }
+
+.datepicker-dropdown.datepicker-orient-top:before {
+  top: -10px; }
+
+.datepicker-dropdown.datepicker-orient-top:after {
+  top: -9px; }
+
+.datepicker-dropdown.datepicker-orient-bottom:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #959595; }
+
+.datepicker-dropdown.datepicker-orient-bottom:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #fff; }
+
+.datepicker > div {
+  display: none; }
+
+.datepicker.days div.datepicker-days {
+  display: block; }
+
+.datepicker.months div.datepicker-months {
+  display: block; }
+
+.datepicker.years div.datepicker-years {
+  display: block; }
+
+.datepicker table {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 0 0 0; }
+
+.datepicker td,
+.datepicker th {
+  text-align: center;
+  display: block;
+  width: 30px;
+  height: 30px;
+  border: none; }
+
+.datepicker tbody :focus {
+  outline: none; }
+
+.datepicker td.day {
+  background-color: transparent;
+  color: #0568ae;
+  cursor: pointer;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 16px;
+  height: 34px;
+  line-height: 30rem;
+  margin: -2px -1px 0 0;
+  overflow: hidden;
+  text-align: center;
+  width: 42px; }
+
+.datepicker :focus {
+  outline: 1px dotted #000;
+  outline-offset: -2px; }
+
+.datepicker td.day.focused {
+  background: #ededed;
+  cursor: pointer; }
+
+.datepicker td.day.focused.active {
+  background-color: #ededed;
+  color: #0568ae; }
+
+.datepicker td.disabled,
+.datepicker td.disabled:hover {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  color: #5a5a5a;
+  cursor: default; }
+
+.datepicker td.today,
+.datepicker td.today:hover,
+.datepicker td.today.disabled {
+  color: #fff;
+  background-color: #0568ae; }
+
+.datepicker td.today.active,
+.datepicker td.today:active,
+.datepicker td.today:hover,
+.datepicker td.today:focus {
+  color: #fff;
+  background-color: #0568ae; }
+
+.datepicker td.today.active:hover {
+  color: #fff; }
+
+.datepicker td.selected,
+.datepicker td.selected:hover,
+.datepicker td.selected.disabled {
+  color: #ffffff;
+  background-color: #959595; }
+
+.datepicker td.active:not(.new),
+.datepicker td.active:hover:not(.new) {
+  color: #ffffff;
+  border-color: #357ebd; }
+
+.show-date {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #0568ae;
+  height: 26px;
+  line-height: 26px;
+  margin: 4px auto 0;
+  width: 26px; }
+
+.datepicker .start-date .show-date,
+.datepicker .between-date .show-date,
+.datepicker .end-date .show-date {
+  background-color: #0568ae;
+  color: #fff !important; }
+
+.datepicker .start-date .show-date {
+  border-radius: 5px 0 0 5px;
+  z-index: 1; }
+
+.datepicker .start-date .show-date:before {
+  background-color: #0568ae;
+  content: "";
+  display: block;
+  height: 26px;
+  left: 20px;
+  position: absolute;
+  width: 100%;
+  z-index: -1; }
+
+.datepicker .between-date .show-date:before {
+  background-color: #0568ae;
+  content: "";
+  display: block;
+  height: 26px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: -1; }
+
+.datepicker .end-date .show-date {
+  border-radius: 0 5px 5px 0; }
+
+.datepicker .end-date .show-date:before {
+  background-color: #0568ae;
+  content: "";
+  display: block;
+  height: 26px;
+  left: -20px;
+  position: absolute;
+  width: 100%;
+  z-index: -1; }
+
+.datepicker .between-date:first-child .show-date:before {
+  background-color: #fff;
+  content: "";
+  height: 26px;
+  position: absolute;
+  left: 0;
+  width: 8px; }
+
+.datepicker .end-date:first-child .show-date:after {
+  background-color: #fff;
+  content: "";
+  height: 26px;
+  position: absolute;
+  left: 0;
+  width: 8px; }
+
+.datepicker .end-date:first-child .show-date::before {
+  background-color: #fff; }
+
+.datepicker tr td.start-date:last-child .show-date:after,
+.datepicker tr td.between-date:last-child .show-date:after {
+  background-color: #fff;
+  content: "";
+  height: 26px;
+  position: absolute;
+  right: 0;
+  width: 8px; }
+
+.datepicker tr td.start-date:last-child:focus .show-date:after,
+.datepicker tr td.end-date:last-child:focus .show-date:after,
+.datepicker tr td.between-date:last-child:focus .show-date:after,
+.datepicker tr td.start-date:first-child:focus .show-date:after,
+.datepicker tr td.end-date:first-child:focus .show-date:after,
+.datepicker tr td.between-date:first-child:focus .show-date:after {
+  height: 30px;
+  width: 30px;
+  background-color: transparent; }
+
+.datepicker td.active:not(.new) .show-date,
+.datepicker td.active:hover:not(.new) .show-date {
+  color: #0568ae;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.datepicker td.disabled .show-date,
+.datepicker td.disabled:hover .show-date {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  color: #5a5a5a; }
+
+.datepicker td span {
+  display: block;
+  width: 23%;
+  height: 54px;
+  line-height: 54px;
+  float: left;
+  margin: 1%;
+  cursor: pointer;
+  border-radius: 4px; }
+
+.datepicker td span:hover {
+  background: #eeeeee; }
+
+.datepicker td span.disabled,
+.datepicker td span.disabled:hover {
+  background: none;
+  color: #5a5a5a;
+  cursor: default; }
+
+.datepicker td span.active,
+.datepicker td span.active:hover,
+.datepicker td span.active.disabled {
+  color: #ffffff;
+  background-color: #0568ae;
+  border-color: #357ebd; }
+
+.datepicker th.datepicker-switch {
+  width: 198px;
+  font-size: 20px;
+  font-weight: normal;
+  cursor: default !important; }
+
+.datepicker thead tr:first-child th,
+.datepicker tfoot tr th {
+  cursor: pointer;
+  height: 60px;
+  line-height: 60px; }
+
+.datepicker tfoot tr th {
+  height: auto;
+  line-height: normal; }
+
+.datepicker tfoot tr th li {
+  margin-bottom: 5px; }
+
+.datepicker .prev,
+.datepicker .next {
+  color: transparent;
+  font-size: 0;
+  margin: 0 -1px -1px 0;
+  width: 46px; }
+
+.datepicker .prev i,
+.datepicker .next i {
+  color: #0568ae;
+  position: absolute;
+  font-size: 27px;
+  margin: 0;
+  top: 15px; }
+
+.datepicker .prev i {
+  left: 8px; }
+
+.datepicker .next i {
+  right: 8px; }
+
+.datepicker .cw {
+  font-size: 10px;
+  width: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle; }
+
+.datepicker thead tr:first-child th.cw {
+  cursor: default;
+  background-color: transparent; }
+
+.input-group.date .input-group-addon i {
+  cursor: pointer;
+  width: 16px;
+  height: 16px; }
+
+.datepicker.dropdown-menu {
+  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.7);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  float: left;
+  display: none;
+  margin-top: 13px;
+  width: 290px;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid #d2d2d2;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  color: #333333;
+  font-size: 13px;
+  line-height: 1.428571429;
+  z-index: 1050; }
+
+.datepicker.dropdown-menu th,
+.datepicker.dropdown-menu td {
+  display: block;
+  float: left;
+  padding: 0;
+  position: relative; }
+
+.datepicker .due-date .show-date {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  background-color: #cf2a2a;
+  border-radius: 5px;
+  color: #fff !important; }
+
+.datepicker .day.active .show-date:after,
+.datepicker .day:focus .show-date:after,
+.datepicker .due-date.disabled .show-date:after {
+  border: 2px solid #0568ae;
+  border-radius: 7px;
+  content: "";
+  display: block;
+  height: 30px;
+  left: 4px;
+  position: absolute;
+  top: 0;
+  width: 30px; }
+
+.datepicker .day:focus .show-date:after {
+  height: 30px;
+  left: 4px;
+  top: 0;
+  width: 30px; }
+
+.datepicker .day.due-date:focus .show-date:after {
+  height: 30px;
+  left: 4px;
+  top: 0;
+  width: 30px; }
+
+.datepicker .due-date.old:after,
+.datepicker .due-date.new:after {
+  visibility: hidden; }
+
+.datepicker .due-date.active:after {
+  border-color: #fff; }
+
+.datepicker .due-date.active.focused {
+  color: #0568ae !important; }
+
+.datepicker .due-date.active.focused:after {
+  border-color: #cf2a2a !important; }
+
+.datepicker .dow {
+  height: 24px;
+  width: 42px;
+  font-weight: normal;
+  position: relative;
+  overflow: hidden;
+  color: transparent;
+  letter-spacing: -6px;
+  margin: 0 -1px -1px 0; }
+
+.datepicker .dow span[aria-hidden="true"] {
+  bottom: 0;
+  color: #5a5a5a;
+  display: block;
+  left: 1px;
+  letter-spacing: 0;
+  line-height: .9;
+  margin: 0 auto;
+  padding: 0;
+  position: relative;
+  width: 22px; }
+
+.datepicker .calendar-legend {
+  margin-top: 3px;
+  margin-bottom: 20px; }
+
+.datepicker .calendar-legend li {
+  font-size: 1.4rem;
+  font-weight: normal;
+  margin-bottom: 5px;
+  padding-left: 10px;
+  padding-top: 5px;
+  position: relative; }
+
+.datepicker i.legend-due-date {
+  background-color: #cf2a2a;
+  border-radius: 5px;
+  height: 18px;
+  width: 18px;
+  margin-right: 8px;
+  vertical-align: middle;
+  display: inline-block; }
+
+.datepicker i.legend-selected-date {
+  background-color: #fff;
+  border: 2px solid #0568ae;
+  border-radius: 5px;
+  height: 18px;
+  width: 18px;
+  margin-right: 8px;
+  vertical-align: middle;
+  display: inline-block; }
+
+.datepicker i.legend-selectedisdue {
+  background-color: #fff;
+  border: 2px solid #0568ae;
+  border-radius: 5px;
+  display: inline-block;
+  height: 18px;
+  margin-right: 8px;
+  position: relative;
+  vertical-align: middle;
+  width: 18px; }
+
+.datepicker i.legend-selectedisdue:after {
+  background-color: #cf2a2a;
+  border-radius: 3px;
+  content: "";
+  display: block;
+  height: 10px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  width: 10px; }
+
+.datepicker .text-left {
+  width: 100%; }
+
+.datepicker .active.old {
+  background-color: #ededed !important;
+  color: #ededed !important; }
+
+.s,
+.m,
+.t,
+.w,
+.f,
+.d,
+.l,
+.v,
+.j {
+  display: block;
+  height: 20px;
+  width: 12px;
+  margin: 0 auto;
+  background-color: white;
+  background-repeat: no-repeat; }
+
+.s {
+  background-position: -62px 0; }
+
+.m {
+  background-position: -5px 0; }
+
+.t {
+  background-position: -19px 0; }
+
+.w {
+  background-position: -34px 0; }
+
+.f {
+  background-position: -49px 0; }
+
+/* spanish */
+.d {
+  background-position: 0 0; }
+
+.l {
+  background-position: 0 0; }
+
+.v {
+  background-position: 0 0; }
+
+.j {
+  background-position: 0 0; }
+
+/* remove focus outline when dropdown is opened */
+/*resolve blue focus outline over dropdown with error*/
+select {
+  margin-right: -1;
+  max-width: 100%;
+  height: 36px;
+  line-height: 25px;
+  width: auto;
+  background-color: #FFFFFF; }
+
+.selectWrap.disabled .icon-primary-down {
+  color: #767676; }
+
+.selectWrap.disabled input.awd-select {
+  z-index: 0;
+  padding: 10px 45px 10px 15px;
+  text-indent: 0; }
+
+.selectWrap.disabled button.awd-select {
+  z-index: 0;
+  text-indent: 15; }
+
+.selectWrap.disabled:after {
+  color: #5A5A5A;
+  cursor: not-allowed; }
+
+input.awd-select {
+  background-color: transparent;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+  color: #333333;
+  display: block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  /*font-size: 1.6rem;*/
+  height: 36px;
+  line-height: 0;
+  margin-bottom: 0;
+  padding: 12px 45px 8px 0;
+  position: relative;
+  text-align: left;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+  padding: 12px 45px 8px 15px;
+  user-select: none; }
+  input.awd-select:focus {
+    border-color: #0568ae !important; }
+
+button.awd-select {
+  background-color: transparent;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+  color: #333333;
+  display: block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  /*font-size: 1.6rem;*/
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 0;
+  /*padding-right: 41px;*/
+  position: relative;
+  text-align: left;
+  top: 0;
+  width: 100%;
+  z-index: 10; }
+  button.awd-select:not(.large) {
+    text-indent: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+    text-overflow: ellipsis; }
+  button.awd-select img {
+    height: 26px;
+    margin-right: 7px;
+    margin-top: -10px;
+    position: relative;
+    top: 2px;
+    vertical-align: text-bottom; }
+  button.awd-select:focus {
+    border-color: #0568ae !important; }
+  button.awd-select i {
+    font-size: 23px;
+    position: absolute;
+    right: 33px;
+    top: 5px;
+    z-index: 1000; }
+
+button.awd-select.large {
+  align-items: center;
+  display: flex;
+  height: 60px;
+  line-height: 20px;
+  overflow: hidden;
+  padding-left: 70px;
+  vertical-align: middle; }
+  button.awd-select.large img {
+    height: 40px;
+    left: 20px;
+    position: absolute;
+    top: 20px;
+    width: 40px; }
+
+.selectWrap.large {
+  height: 60px; }
+  .selectWrap.large .awd-select-list-item {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    line-height: 20px;
+    overflow: hidden;
+    padding-left: 70px;
+    vertical-align: middle; }
+    .selectWrap.large .awd-select-list-item img {
+      height: 40px;
+      left: 20px;
+      position: absolute;
+      top: 20px;
+      width: 40px;
+      top: 10px; }
+
+button.awd-select.active {
+  border-radius: 6px 6px 0 0; }
+  button.awd-select.active:focus {
+    border-color: #d2d2d2 !important; }
+
+input.awd-select.active {
+  border-radius: 6px 6px 0 0; }
+  input.awd-select.active:focus {
+    border-color: #d2d2d2 !important; }
+
+.selectWrapper {
+  position: relative; }
+
+span.selectWrap input[readonly]:focus {
+  color: transparent;
+  text-shadow: 0 0 0 #000; }
+
+.isIE.ds2-no-colors .awd-select:focus {
+  outline: 1px dashed transparent; }
+
+.awd-select-list {
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 0 0 6px 6px;
+  position: absolute;
+  border: 1px solid #d2d2d2;
+  border-top: 0;
+  padding: 0;
+  background-color: #f2f2f2;
+  z-index: 1000;
+  width: 100%;
+  max-height: 320px;
+  overflow-y: auto; }
+
+.awd-select-list-item {
+  cursor: pointer;
+  height: 100%;
+  min-height: 36px;
+  line-height: 38px;
+  overflow: hidden;
+  padding: 0 15px;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  z-index: 1000; }
+  .awd-select-list-item:hover {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent; }
+  .awd-select-list-item:focus {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent; }
+  .awd-select-list-item img {
+    margin-top: 0;
+    margin-right: 7px;
+    height: 26px;
+    width: 26px; }
+
+.selectWrap {
+  border-radius: 6px;
+  position: relative;
+  height: 36px;
+  line-height: 28px;
+  display: block;
+  margin: 0;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
+  .selectWrap:not(.large) .awd-select-list-item:first-child {
+    margin-top: 15px; }
+  .selectWrap:not(.large) .awd-select-list-item:last-child {
+    margin-bottom: 15px; }
+  .selectWrap .icon-primary-down {
+    font-size: 23px;
+    margin-top: -11px;
+    position: absolute;
+    right: 4px;
+    top: 50%; }
+  .selectWrap + [aria-expanded="true"] {
+    padding-bottom: 9px;
+    padding-top: 20px; }
+
+.awd-select-list-item[aria-selected="true"] {
+  background-color: #d2d2d2; }
+
+span input.awd-select {
+  width: 100%;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  padding-right: 45px; }
+
+li.optgroup-wrapper {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  cursor: default !important;
+  padding: 0px 15px; }
+  li.optgroup-wrapper:first-child {
+    padding-top: 10px; }
+  li.optgroup-wrapper:hover {
+    background-color: #f2f2f2; }
+
+ul.optgroup {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  cursor: pointer !important;
+  margin: 0 -15px; }
+  ul.optgroup li {
+    padding: 0 0 0 33px; }
+
+label + .selectWrap {
+  margin-top: 4px; }
+
+.selectorModule {
+  border-radius: 6px;
+  position: relative;
+  height: 36px;
+  line-height: 28px;
+  display: block;
+  margin: 0;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
+
+.group .selectWrap {
+  margin: 0 0 10px 0; }
+
+select.awd-select {
+  position: relative;
+  top: 0;
+  left: 0;
+  font-size: 16px;
+  z-index: 1010;
+  height: 33px;
+  min-width: 100%;
+  opacity: 0.01; }
+  select.awd-select > optgroup {
+    padding-left: 8px;
+    font-style: normal;
+    margin-top: 10px; }
+    select.awd-select > optgroup:first-child {
+      margin-top: 0; }
+    select.awd-select > optgroup > option {
+      padding-left: 8px; }
+  select.awd-select > option {
+    padding-left: 8px; }
+  select.awd-select + span {
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: block;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    height: 35px;
+    line-height: 0;
+    padding: 18px 45px 15px 15px;
+    width: 100%;
+    font-size: 1.6rem;
+    padding-right: 45px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+    select.awd-select + span > i {
+      font-size: 23px;
+      position: absolute;
+      right: 33px;
+      top: 5px;
+      z-index: 1000; }
+      select.awd-select + span > i:before {
+        left: 1px;
+        position: absolute;
+        top: -1px; }
+  select.awd-select:focus + span {
+    border-color: #0568ae; }
+
+.isIE select.awd-select + span {
+  line-height: 1; }
+
+[data-default-option="true"] {
+  color: #767676 !important;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+.placeholdercolor {
+  color: #767676 !important;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+.filterTank button.awd-select {
+  border-color: #d2d2d2;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #333333; }
+  .filterTank button.awd-select:after {
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2; }
+
+.utility-bg button.awd-select {
+  border-color: #d2d2d2;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #333333; }
+  .utility-bg button.awd-select:after {
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select + span {
+  border-color: #d2d2d2;
+  border-color: #d2d2d2;
+  background-color: #333333;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #FFFFFF; }
+  .utility-bg select.awd-select + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select:focus + span {
+  border-color: #d2d2d2;
+  border-color: #d2d2d2;
+  background-color: #333333;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #FFFFFF; }
+  .utility-bg select.awd-select:focus + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select:hover + span {
+  border-color: #d2d2d2;
+  border-color: #d2d2d2;
+  background-color: #333333;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #FFFFFF; }
+  .utility-bg select.awd-select:hover + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+input.awd-select[disabled] {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  input.awd-select[disabled] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+button.awd-select[disabled] {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  button.awd-select[disabled]:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled] + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled] + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled]:focus + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+
+select.awd-select[disabled]:hover + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+
+input.awd-select[disabled="disabled"] {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  input.awd-select[disabled="disabled"] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+select.awd-select[disabled="disabled"] + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled="disabled"] + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled="disabled"]:focus + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled="disabled"]:focus + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled="disabled"]:hover + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled="disabled"]:hover + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+.ddexpand-wrapper > h2 {
+  margin-bottom: 11px; }
+  .ddexpand-wrapper > h2 + p {
+    margin-bottom: 4px; }
+
+.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .form-row {
+  margin-top: 11px; }
+
+.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .row + .row .form-row {
+  margin-top: 14px; }
+
+.modal .awd-select-list {
+  z-index: 1060 !important; }
+
+.form-row.error button.awd-select.active:focus {
+  border-color: #cf2a2a !important; }
+
+.form-row.error input.awd-select.active:focus {
+  border-color: #cf2a2a !important; }
+
+.awd-module-list .module-list-item[aria-selected="true"] {
+  background-color: #f2f2f2; }
+
+li.module-list-item[aria-selected="true"]:before {
+  color: #0568ae;
+  display: inline-block;
+  font-family: "icoControls" !important;
+  font-style: normal;
+  font-size: 20px;
+  font-weight: normal;
+  font-variant: normal;
+  height: 1em;
+  margin-right: 7px;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  speak: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  width: 1em;
+  content: "\e907";
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 2em;
+  height: 1em;
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  vertical-align: middle;
+  width: 1em;
+  color: #007a3e; }
+
+@media (min-width: 768px) {
+  span[class*="large"] {
+    max-width: 370px; }
+  .large {
+    max-width: 370px; } }
+
+@media (max-width: 767px) {
+  .selectWrap.large:after {
+    right: 5px; }
+  .selectWrap.large .awd-select-list-item {
+    padding-right: 41px; }
+  .selectWrap + div > h4 {
+    margin-bottom: 0;
+    font-size: 16px; } }
+
+/**********************Dropdown Chrome scrolling fix start ********************/
+input.awd-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text; }
+
+input.awd-select.focused {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important; }
+
+/**********************Dropdown Chrome scrolling fix end ********************/
+.mpc-expanders {
+  border-bottom: 1px solid #e4e4e4;
+  border-top: 1px solid #e4e4e4; }
+
+.mpc-expanders + .mpc-expanders {
+  border-top: 0px; }
+
+.mpc-expanders .heading-medium {
+  margin-bottom: 10px; }
+
+.mpc-expanders .p-small {
+  margin-top: 5px; }
+
+.mpc-expander-body {
+  border-top: 1px solid #e4e4e4; }
+
+.mpc-expander-body .mpc-expanders {
+  border-bottom: 1px solid #e4e4e4;
+  border-top: 0; }
+
+.mpc-expander-body .mpc-expanders:last-child {
+  border-bottom: 0px; }
+
+.ddh-blue {
+  color: #0574ac; }
+
+.b2b-dragdrop {
+  border: 1px dashed #bbb;
+  border-radius: 5px;
+  padding: 0;
+  text-align: center;
+  color: #bbb;
+  position: relative; }
+
+.b2b-dragdrop-over {
+  background: #0091d9;
+  color: #006496; }
+  .b2b-dragdrop-over:after {
+    content: "Drop the file";
+    color: #fff;
+    width: 80px;
+    height: 20px;
+    overflow: hidden;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0; }
+
+.b2b-file-container {
+  position: relative;
+  overflow: hidden;
+  display: inline-table;
+  font-weight: 400; }
+  .b2b-file-container [type=file] {
+    position: absolute;
+    cursor: inherit;
+    display: block;
+    font-size: 0;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    left: 0;
+    top: 0;
+    -ms-filter: "alpha(Opacity=0)"; }
+
+.b2b-upload-link {
+  color: #0568ae; }
+
+.b2b-flyout {
+  position: relative;
+  display: inline-block;
+  cursor: default; }
+
+.b2b-flyout-icon {
+  cursor: pointer; }
+  .b2b-flyout-icon:focus {
+    outline: thin dotted #666;
+    outline-offset: -1px; }
+
+.b2b-flyout .b2b-flyout-container {
+  border: 1px solid #d3d3d3;
+  width: 300px;
+  padding: 20px;
+  pointer-events: auto;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 16px;
+  -webkit-transition: opacity .2s ease-out;
+  -moz-transition: opacity .2s ease-out;
+  transition: opacity .2s ease-out;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.25);
+  color: #333;
+  line-height: 20px;
+  position: absolute;
+  top: 35px;
+  opacity: 0;
+  z-index: 1010;
+  display: none; }
+  .b2b-flyout .b2b-flyout-container.open-flyout {
+    opacity: 1;
+    display: block; }
+
+.b2b-flyout i.b2b-flyout-caret {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  opacity: 0;
+  z-index: 1011;
+  display: none; }
+  .b2b-flyout i.b2b-flyout-caret.open-flyout {
+    opacity: 1;
+    display: block; }
+  .b2b-flyout i.b2b-flyout-caret:before {
+    content: "";
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #d3d3d3;
+    position: absolute;
+    top: -1px; }
+  .b2b-flyout i.b2b-flyout-caret:after {
+    content: "";
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #fff;
+    position: absolute; }
+
+.b2b-flyout .b2b-flyout-container.b2b-flyout-left i.b2b-flyout-caret {
+  left: 16px !important; }
+
+.b2b-flyout .b2b-flyout-container.b2b-flyout-right i.b2b-flyout-caret {
+  left: inherit !important;
+  right: 30px !important; }
+
+.b2b-flyout .b2b-flyout-container.b2b-flyout-above {
+  box-shadow: 0 -5px 6px 0 rgba(0, 0, 0, 0.25); }
+  .b2b-flyout .b2b-flyout-container.b2b-flyout-above i.b2b-flyout-caret {
+    top: auto;
+    bottom: 0px; }
+    .b2b-flyout .b2b-flyout-container.b2b-flyout-above i.b2b-flyout-caret:before {
+      top: auto;
+      bottom: -9px;
+      border-top: 8px solid #d3d3d3;
+      border-bottom: none; }
+    .b2b-flyout .b2b-flyout-container.b2b-flyout-above i.b2b-flyout-caret:after {
+      border-top: 8px solid #fff;
+      border-bottom: none; }
+
+.b2b-flyout .b2b-flyout-container.b2b-flyout-centerLeft i.b2b-flyout-caret {
+  left: inherit !important;
+  right: -7px !important;
+  top: 8px;
+  transform: rotate(90deg); }
+
+.b2b-flyout .b2b-flyout-container.b2b-flyout-centerRight i.b2b-flyout-caret {
+  left: -8px !important;
+  top: 296px;
+  transform: rotate(-90deg); }
+
+.b2b-flyout .buttons-group {
+  margin-top: 20px; }
+  .b2b-flyout .buttons-group .cta-button-group {
+    width: 100%;
+    border-top: 1px solid #ccc;
+    padding: 20px 0 0; }
+    .b2b-flyout .buttons-group .cta-button-group button {
+      margin-bottom: 0; }
+
+.b2b-flyout .heading {
+  font-size: 20px;
+  margin-bottom: 10px; }
+
+.b2b-flyout .body-text {
+  font-size: 14px;
+  margin-bottom: 30px; }
+
+.b2b-footer-wrapper {
+  width: 100%;
+  background-color: #222; }
+
+.b2b-footer-container {
+  width: 980px;
+  margin: 0 auto;
+  padding-top: 15px; }
+  .b2b-footer-container .footer-columns {
+    display: inline-block;
+    text-align: left;
+    vertical-align: top; }
+    .b2b-footer-container .footer-columns.three-column, .b2b-footer-container .footer-columns.four-column, .b2b-footer-container .footer-columns.five-column {
+      padding-top: 30px; }
+    .b2b-footer-container .footer-columns.three-column {
+      width: 33.3%;
+      padding-left: 75px; }
+    .b2b-footer-container .footer-columns.four-column {
+      width: 25%;
+      padding-left: 75px; }
+    .b2b-footer-container .footer-columns.five-column {
+      width: 20%; }
+    .b2b-footer-container .footer-columns .b2b-footer-header {
+      color: #009fdb;
+      font-size: 18px;
+      font-style: normal;
+      font-family: "Omnes-ECOMP-W02-Medium", Arial;
+      line-height: 23.9px;
+      margin: 0; }
+    .b2b-footer-container .footer-columns li {
+      padding: 7.5px 0; }
+    .b2b-footer-container .footer-columns ul li:first-child {
+      padding-top: 15px; }
+    .b2b-footer-container .footer-columns li a {
+      color: #fff;
+      font-size: 16px;
+      font-family: "Omnes-ECOMP-W02", Arial; }
+  .b2b-footer-container .footer-nav-content {
+    padding-bottom: 10px; }
+    .b2b-footer-container .footer-nav-content li {
+      display: inline;
+      font-size: 14px;
+      color: #fff;
+      vertical-align: middle; }
+      .b2b-footer-container .footer-nav-content li a {
+        color: #fff;
+        font-size: 14px;
+        vertical-align: middle;
+        margin-right: 5px;
+        font-family: "Omnes-ECOMP-W02", Arial; }
+
+.b2b-footer-wrapper .b2b-footer-container hr {
+  background: #d2d2d2;
+  margin-top: 50px; }
+
+.b2b-footer-wrapper .divider-bottom-footer {
+  padding: 45px 0 50px 0; }
+
+.b2b-footer-wrapper .footerLogo {
+  margin: 10px 0 0 0px;
+  vertical-align: top; }
+  .b2b-footer-wrapper .footerLogo div {
+    display: inline-block; }
+  .b2b-footer-wrapper .footerLogo .icon-primary-att-globe {
+    font-size: 40px; }
+  .b2b-footer-wrapper .footerLogo .logo-title {
+    color: #fff;
+    margin-left: 10px;
+    display: inline-block;
+    font-size: 26px;
+    margin-top: 0px; }
+
+.b2b-footer-wrapper .copyright-text {
+  color: #fff;
+  font-size: 11px;
+  text-align: left;
+  font-family: "Omnes-ECOMP-W02", Arial; }
+  .b2b-footer-wrapper .copyright-text a {
+    color: #fff;
+    text-decoration: underline;
+    display: inline-block; }
+    .b2b-footer-wrapper .copyright-text a:hover {
+      text-decoration: none; }
+
+@media (max-width: 768px) {
+  .b2b-footer-wrapper {
+    padding: 0 15px; }
+  .b2b-footer-container {
+    width: 100%; }
+    .b2b-footer-container .footer-columns.three-column, .b2b-footer-container .footer-columns.four-column, .b2b-footer-container .footer-columns.five-column {
+      width: 50%; }
+  .b2b-footer-wrapper .divider-bottom-footer {
+    padding-top: 15px; }
+    .b2b-footer-wrapper .divider-bottom-footer .footer-links {
+      width: 100%; }
+  .b2b-footer-wrapper .footerLogo {
+    margin: 30px 0 0 0; }
+    .b2b-footer-wrapper .footerLogo .footer-logo {
+      margin: 0;
+      padding-left: 10px; } }
+
+.b2b-header-tabs {
+  background-color: #222;
+  width: 100%;
+  position: relative;
+  height: 45px; }
+  .b2b-header-tabs .icon-primary-att-globe {
+    color: #0568ae; }
+  .b2b-header-tabs a:focus {
+    border: 1px solid white; }
+  .b2b-header-tabs .header__items {
+    width: 980px;
+    margin: 0 auto;
+    display: block;
+    list-style: none;
+    padding: 6px 0px 0px 0px;
+    border-spacing: 30px 0; }
+  .b2b-header-tabs .header__item {
+    display: inline-block;
+    text-align: left;
+    width: auto;
+    font-size: 16px;
+    font-family: "Omnes-ECOMP-W02, Arial";
+    cursor: pointer;
+    padding: 5px 15px;
+    color: #fff; }
+    .b2b-header-tabs .header__item.b2b-headermenu {
+      padding: 0; }
+      .b2b-header-tabs .header__item.b2b-headermenu:last-child {
+        background: none; }
+      .b2b-header-tabs .header__item.b2b-headermenu a.menu__item {
+        color: #fff;
+        text-decoration: none;
+        display: inline-block;
+        padding: 5px 15px; }
+    .b2b-header-tabs .header__item.active {
+      background-color: #fff;
+      border-radius: 2px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0; }
+      .b2b-header-tabs .header__item.active a.menu__item {
+        color: #0578ae; }
+  .b2b-header-tabs li:focus {
+    outline: 2px solid #0578ae; }
+  .b2b-header-tabs .header__item .header-secondary-wrapper, .b2b-header-tabs .header__item .header-tertiary-wrapper {
+    background-color: #fff;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 42px;
+    border-bottom: solid 1px #ccc;
+    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
+    display: none;
+    z-index: 111; }
+  .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary {
+    background-color: #fff;
+    width: 980px;
+    margin: 0 auto; }
+  .b2b-header-tabs .header__item.active .header-secondary-wrapper {
+    display: block; }
+  .b2b-header-tabs .header-secondary .header-subitem {
+    display: inline-block;
+    width: auto;
+    margin: 0 15px; }
+    .b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary-wrapper {
+      display: block; }
+    .b2b-header-tabs .header-secondary .header-subitem a.menu__item {
+      display: inline-block;
+      padding: 15px 0;
+      color: #333; }
+      .b2b-header-tabs .header-secondary .header-subitem a.menu__item:hover, .b2b-header-tabs .header-secondary .header-subitem a.menu__item:focus {
+        color: #0578ae; }
+
+/** Secondary Menu **/
+.b2b-labelhide {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px); }
+
+/** Tertiary Level Menu **/
+.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {
+  position: absolute;
+  z-index: 111;
+  top: 25px; }
+  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after, .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {
+    content: '';
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    position: absolute;
+    -webkit-transition: left .2s ease-out;
+    -moz-transition: left .2s ease-out;
+    transition: left .2s ease-out; }
+  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after {
+    border-bottom: 8px solid #fff;
+    top: 10px; }
+  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {
+    border-bottom: 8px solid #ccc;
+    top: 9px; }
+
+.b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary {
+  border-top: solid 1px #ccc; }
+
+.b2b-header-tabs .header-tertiary:after {
+  content: '';
+  clear: both;
+  display: block; }
+
+.b2b-header-tabs .header-tertiary li {
+  display: inline-block;
+  padding: 0;
+  float: left; }
+  .b2b-header-tabs .header-tertiary li a {
+    color: #333;
+    display: block;
+    padding: 10px 15px; }
+  .b2b-header-tabs .header-tertiary li label {
+    text-align: left;
+    display: block;
+    font-size: 16px;
+    font-weight: bold;
+    color: #857B7B;
+    padding: 15px 0 0 15px; }
+
+.b2b-header-tabs .header__item.skip {
+  padding: 0;
+  display: inline-block;
+  cursor: default !important; }
+  .b2b-header-tabs .header__item.skip a {
+    color: transparent;
+    font-size: 12px;
+    line-height: 15px;
+    text-decoration: none; }
+    .b2b-header-tabs .header__item.skip a:focus {
+      color: #fff;
+      outline: 2px solid #0578ae; }
+
+.b2b-header-tabs .selectWrap {
+  min-width: 150px; }
+  .b2b-header-tabs .selectWrap button.awd-select {
+    height: 30px;
+    line-height: 31px;
+    font-size: 1rem;
+    display: inline-block; }
+  .b2b-header-tabs .selectWrap .awd-select-list {
+    background-color: #fff;
+    color: #333;
+    -webkit-transition: opacity .2s ease-out;
+    -moz-transition: opacity .2s ease-out;
+    transition: opacity .2s ease-out;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); }
+
+@media (max-width: 768px) {
+  .b2b-header-tabs {
+    padding: 0 15px; }
+    .b2b-header-tabs .header__items, .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary {
+      width: 100%; }
+    .b2b-header-tabs .header__item {
+      padding: 5px 0; }
+    .b2b-header-tabs .globe-text {
+      display: none; }
+    .b2b-header-tabs .header__item.b2b-headermenu a.menu__item {
+      padding: 5px 7px 9px 7px; }
+    .b2b-header-tabs .header__item .header-tertiary-wrapper {
+      top: 30px; }
+    .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {
+      top: 14px; }
+    .b2b-header-tabs .header__item .header-secondary-wrapper {
+      top: 45px; }
+    .b2b-header-tabs .header__item.profile {
+      padding-left: 15px;
+      float: none; } }
+
+/************* Header - Start *************/
+.b2b-header-tabs {
+  background-color: #222;
+  width: 100%;
+  position: relative;
+  height: 45px; }
+
+.b2b-header-tabs .icon-primary-primary-att-globe {
+  color: #0568ae;
+  font-size: 34px;
+  bottom: 1px; }
+
+/*
+ *TODO: delete below .icon-primary-att-globel will not be used 
+ *instead the one above, icon-primary-primary-att-globe not available here
+ */
+.b2b-header-tabs .icon-primary-att-globe {
+  color: #0568ae;
+  font-size: 34px; }
+
+.b2b-header-tabs .globe-text {
+  margin-left: 20px;
+  font-size: 2rem; }
+
+.b2b-header-tabs .header__items {
+  width: 980px;
+  margin: 0 auto;
+  display: block;
+  list-style: none;
+  border-spacing: 30px 0;
+  padding: 3px 0px 0px 0px; }
+
+.b2b-header-tabs .header__item {
+  display: inline-block;
+  text-align: left;
+  width: auto;
+  font-size: 14px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  cursor: pointer;
+  padding: 0 15px 4px 15px;
+  /*margin-top:-3px;*/
+  color: #fff; }
+
+.b2b-header-tabs .header__item.b2b-headermenu {
+  padding: 0; }
+
+.b2b-header-tabs .header__item.b2b-headermenu a.menu__item {
+  color: #fff;
+  text-decoration: none;
+  display: inline-block;
+  padding: 8px 15px 12px 15px;
+  font-size: 16px; }
+
+.b2b-header-tabs .header__item.active {
+  background-color: #fff;
+  border-radius: 2px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.b2b-header-tabs .header__item.active a.menu__item {
+  color: #0578ae; }
+
+.b2b-header-tabs li:focus {
+  outline: 2px solid #0578ae; }
+
+/** profile pop Over **/
+.b2b-header-tabs .header__item.profile {
+  position: relative;
+  float: right; }
+
+/** Secondary Menu **/
+.b2b-header-tabs .header__item .header-secondary-wrapper, .b2b-header-tabs .header__item .header-tertiary-wrapper {
+  background-color: #fff;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 42px;
+  border-bottom: solid 1px #ccc;
+  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
+  display: none;
+  z-index: 111; }
+
+.b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary {
+  background-color: #fff;
+  width: 980px;
+  margin: 0 auto; }
+
+.b2b-header-tabs .header__item.active .header-secondary-wrapper,
+.b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary-wrapper {
+  display: block; }
+
+.b2b-header-tabs .header-secondary .header-subitem {
+  display: inline-block;
+  width: auto;
+  margin: 0 15px; }
+
+.b2b-header-tabs .header-secondary .header-subitem a.menu__item {
+  display: inline-block;
+  padding: 15px 0;
+  color: #333;
+  font-size: 14px; }
+
+.b2b-header-tabs .header-secondary .header-subitem a.menu__item:hover, .b2b-header-tabs .header-secondary .header-subitem a.menu__item:focus {
+  color: #0578ae; }
+
+.b2b-label-hide {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px); }
+
+/** Tertiary Level Menu **/
+.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after,
+.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {
+  content: '';
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  position: absolute;
+  -webkit-transition: left .2s ease-out;
+  -moz-transition: left .2s ease-out;
+  transition: left .2s ease-out; }
+
+.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {
+  position: absolute;
+  z-index: 111;
+  top: 25px; }
+
+.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:after {
+  border-bottom: 8px solid #fff;
+  top: 10px; }
+
+.b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret:before {
+  border-bottom: 8px solid #ccc;
+  top: 9px; }
+
+/** Tertiary Level Menu **/
+.b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary {
+  border-top: solid 1px #ccc; }
+
+.b2b-header-tabs .header-tertiary:after {
+  content: '';
+  clear: both;
+  display: block; }
+
+.b2b-header-tabs .header-tertiary li {
+  display: inline-block;
+  padding: 0;
+  float: left; }
+
+.b2b-header-tabs .header-tertiary li a {
+  color: #333;
+  display: block;
+  padding: 7px 15px;
+  max-width: 228px; }
+
+.b2b-header-tabs .header-tertiary li label {
+  text-align: left;
+  display: block;
+  font-size: 14px !important;
+  font-weight: bold;
+  color: #857B7B;
+  padding: 15px 0 0 15px; }
+
+/** Quarternary Level Menu **/
+.b2b-header-tabs .header-quarternary {
+  width: 100%;
+  float: left; }
+
+.b2b-header-tabs .header-quarternary li {
+  padding-left: 15px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  display: none; }
+
+.b2b-header-tabs .header-quarternary li.active {
+  display: block; }
+
+.b2b-header-tabs .header-quarternary li a {
+  color: #666666;
+  font-size: 14px;
+  padding: 0px 10px 10px 10px; }
+
+/** Skip Navigation**/
+.b2b-header-tabs .header__item.skip {
+  padding: 0;
+  display: inline-block;
+  cursor: default !important; }
+
+.b2b-header-tabs .header__item.skip a {
+  color: transparent;
+  font-size: 12px;
+  line-height: 15px;
+  text-decoration: none; }
+
+.b2b-header-tabs .header__item.skip a:focus {
+  color: #fff;
+  outline: 2px solid #0578ae; }
+
+/** Dropdown css inside Header ****/
+.b2b-header-tabs .selectWrap {
+  min-width: 150px; }
+
+.b2b-header-tabs .selectWrap button.awd-select, .b2b-header-tabs .selectWrap input.awd-select {
+  height: 36px;
+  line-height: 8px;
+  font-size: 1rem;
+  display: inline-block; }
+
+.b2b-header-tabs .selectWrap .awd-select-list {
+  background-color: #fff;
+  color: #333;
+  -webkit-transition: opacity .2s ease-out;
+  -moz-transition: opacity .2s ease-out;
+  transition: opacity .2s ease-out;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); }
+
+/*
+ * responsive header media queries
+ */
+@media screen and (max-width: 1100px) {
+  .b2b-header-tabs .globe-text {
+    display: none; }
+  .b2b-header-tabs .header__item.profile {
+    padding-left: 15px;
+    float: none; }
+  .b2b-header-tabs .header__items {
+    padding-top: 0px; } }
+
+@media screen and (max-width: 950px) {
+  .header__item.profile {
+    top: 20px; }
+  .b2b-header-tabs {
+    height: 90px; }
+  .selectWrap {
+    bottom: 15px; }
+  .b2b-header-tabs .header__items {
+    padding-top: 25px; }
+  .b2b-header-tabs .header__item .header-secondary-wrapper, .b2b-header-tabs .header__item .header-tertiary-wrapper {
+    top: 80px; }
+  .b2b-header-tabs .header-secondary .header-subitem.active i.menuCaret {
+    top: 35px; }
+  .b2b-header-tabs .header__item.b2b-headermenu a.menu__item {
+    padding-bottom: 30px; }
+  .b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary {
+    margin-top: -28px; } }
+
+/*************** Header - END ******************/
+.hp-container {
+  display: block;
+  max-width: 408px; }
+  .hp-container i:focus {
+    outline: thin dotted #666; }
+  .hp-container .icon-misc-pen {
+    cursor: pointer; }
+  .hp-container .icon-misc-trash {
+    cursor: pointer; }
+
+.hp-selected {
+  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 16px;
+  padding-bottom: 16px; }
+  .hp-selected .selected-days {
+    padding-bottom: 16px; }
+    .hp-selected .selected-days .day {
+      padding-top: 10px;
+      float: left; }
+
+.hp-checkbox {
+  padding-top: 20px;
+  margin: 16px auto 0 auto; }
+  .hp-checkbox label {
+    position: relative;
+    width: 20px;
+    margin-right: 34px; }
+    .hp-checkbox label span {
+      position: absolute;
+      top: -20px;
+      left: 0px;
+      margin-left: 0px; }
+
+.hp-dropdowns {
+  margin-top: 15px;
+  display: flex;
+  display: -webkit-flex;
+  display: -ms-flexbox; }
+
+.hp-buttons {
+  margin-top: 20px;
+  display: flex;
+  display: -webkit-flex;
+  display: -ms-flexbox; }
+
+.hp-dropdowns .radio-buttons {
+  margin-top: 30px; }
+  .hp-dropdowns .radio-buttons .radio {
+    margin-right: 15px; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02";
+  src: url("fonts/Omnes_ATTW02.eot");
+  src: url("fonts/Omnes_ATTW02.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02.woff") format("woff"), url("fonts/Omnes_ATTW02.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Medium";
+  src: url("fonts/Omnes_ATTW02Medium.eot");
+  src: url("fonts/Omnes_ATTW02Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Medium.woff") format("woff"), url("fonts/Omnes_ATTW02Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Italic";
+  src: url("fonts/Omnes_ATTW02Italic.eot");
+  src: url("fonts/Omnes_ATTW02Italic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Italic.woff") format("woff"), url("fonts/Omnes_ATTW02Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Light";
+  src: url("fonts/Omnes_ATTW02Light.eot");
+  src: url("fonts/Omnes_ATTW02Light.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Light.woff") format("woff"), url("fonts/Omnes_ATTW02Light.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Bold";
+  src: url("fonts/Omnes_ATTW02Bold.eot");
+  src: url("fonts/Omnes_ATTW02Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02Bold.woff") format("woff"), url("fonts/Omnes_ATTW02Bold.woff2") format("woff2"), url("fonts/Omnes_ATTW02Bold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Light-Italic";
+  src: url("fonts/Omnes_ATTW02LightItalic.eot");
+  src: url("fonts/Omnes_ATTW02LightItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02LightItalic.woff") format("woff"), url("fonts/Omnes_ATTW02LightItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02LightItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Medium-Italic";
+  src: url("fonts/Omnes_ATTW02MediumItalic.eot");
+  src: url("fonts/Omnes_ATTW02MediumItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02MediumItalic.woff") format("woff"), url("fonts/Omnes_ATTW02MediumItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02MediumItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Omnes-ECOMP-W02-Bold-Italic";
+  src: url("fonts/Omnes_ATTW02BoldItalic.eot");
+  src: url("fonts/Omnes_ATTW02BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/Omnes_ATTW02BoldItalic.woff") format("woff"), url("fonts/Omnes_ATTW02BoldItalic.woff2") format("woff2"), url("fonts/Omnes_ATTW02BoldItalic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+/* TODO: Build a reference page for these classes */
+.font-regular {
+  font-family: "Omnes-ECOMP-W02", Arial !important; }
+
+.font-light {
+  font-family: "Omnes-ECOMP-W02-Light", Arial !important; }
+
+.font-italic {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial !important; }
+
+.font-light-italic {
+  font-family: "Omnes-ECOMP-W02-Light-Italic", Arial !important; }
+
+.font-medium {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial !important; }
+
+.font-medium-italic {
+  font-family: "Omnes-ECOMP-W02-Medium-Italic", Arial !important; }
+
+.font-reset {
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  text-transform: none; }
+
+.b2b-nav-menu {
+  background-color: #efefef;
+  border: 1px solid #efefef;
+  width: 230px;
+  font-size: 1.4rem; }
+
+.b2b-subnav-container > ul {
+  padding: 0px; }
+
+.b2b-subnav-content {
+  margin: 0;
+  margin-bottom: 10px; }
+
+.b2b-subnav-content > li {
+  border-bottom: 1px solid #999999;
+  position: relative;
+  cursor: pointer; }
+
+.b2b-subnav-content > li > a {
+  text-decoration: none;
+  line-height: 18px;
+  display: block;
+  padding: 10px; }
+
+.b2b-subnav-content > li > a.expand {
+  color: #333; }
+
+.b2b-subnav-content > li ul {
+  overflow: hidden;
+  max-height: 0;
+  transition-duration: 0.5s;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }
+
+.b2b-subnav-content > li ul.expand {
+  transition-duration: 0.7s;
+  transition-timing-function: ease-in-out;
+  max-height: 1000px;
+  overflow: hidden; }
+
+.b2b-subnav-content > li > a:focus, .b2b-subnav-content > li ul > li > a:focus {
+  outline: thin dotted #666; }
+
+.b2b-subnav-content > li ul > li > a {
+  line-height: 18px;
+  padding: 8px 0;
+  display: block;
+  outline-offset: -4px;
+  padding-left: 10px; }
+
+.b2b-icon-primary-plus-minus {
+  display: inline-block;
+  height: 20px;
+  margin-right: 10px;
+  padding: 0;
+  position: absolute;
+  right: 0px;
+  top: 10px;
+  vertical-align: middle;
+  width: 20px; }
+
+@media (min-width: 320px) and (max-width: 767px) {
+  .b2b-nav-menu {
+    background-color: #fff;
+    border: 1px solid white;
+    width: 100%; }
+  .b2b-subnav-content > li {
+    padding-left: 10px; }
+  .b2b-subnav-container > ul:first-child {
+    border-top: 1px solid #999; }
+  .b2b-icon-primary-plus-minus {
+    right: 10px; }
+  .b2b-subnav-content > li li > a.active {
+    color: #0574ac;
+    text-decoration: none;
+    font-family: "Omnes-ECOMP-W02", Arial; } }
+
+.b2b-list-box-item {
+  white-space: nowrap;
+  margin: 1px;
+  border: 1px solid transparent;
+  outline: none;
+  visibility: inherit;
+  display: inherit;
+  text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 5px 0 5px;
+  padding-left: 15px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none; }
+  .b2b-list-box-item:focus {
+    border: 2px solid #5e8cb3; }
+
+.b2b-list-box-item--selected {
+  background-color: #cfdde9; }
+
+.btn.disabled[ddh-load-button] {
+  line-height: 46px;
+  padding: 0 19px 0 18px; }
+
+.btn.disabled[ddh-load-button] {
+  color: #666666; }
+
+.icon-primary-spinner-ddh.large {
+  height: 50px;
+  width: 50px; }
+
+.icon-primary-spinner-ddh.small {
+  height: 30px;
+  width: 30px; }
+
+.icon-primary-spinner-ddh {
+  -webkit-animation: 1s linear infinite spinner;
+  animation: 1s linear infinite spinner;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgaWQ9InN2Zy1zcGlubmVyIiB4PSIwcHgiIHk9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgIDxwYXRoIGZpbGw9IiNGNUY1RjUiIGQ9Ik0xOCAzNkM4LjEgMzYgMCAyNy45IDAgMThTOC4xIDAgMTggMHMxOCA4LjEgMTggMTgtOC4xIDE4LTE4IDE4em0wLTMxLjVjLTcuNSAwLTEzLjUgNi0xMy41IDEzLjVTMTAuNiAzMS41IDE4IDMxLjVjNy41IDAgMTMuNS02LjEgMTMuNS0xMy41IDAtNy41LTYtMTMuNS0xMy41LTEzLjV6Ii8+CiAgIDxwYXRoIGZpbGw9IiMwNTY4QUUiIGlkPSJzcGlubmVyIiBkPSJNMzAuNyA1LjNsLTMuMSAzLjJjMi40IDIuNCAzLjkgNS44IDMuOSA5LjUgMCA3LjQtNi4xIDEzLjUtMTMuNSAxMy41UzQuNSAyNS40IDQuNSAxOCAxMC42IDQuNSAxOCA0LjVWMEM4LjEgMCAwIDguMSAwIDE4czguMSAxOCAxOCAxOCAxOC04LjEgMTgtMThjMC01LTItOS41LTUuMy0xMi43eiIgdHJhbnNmb3JtPSIiPiAgICAgIAogICA8L3BhdGg+Cjwvc3ZnPg==); }
+
+.btn-small .icon-primary-spinner-ddh {
+  height: 30px !important;
+  width: 30px !important; }
+
+.btn-small .icon-primary-spinner {
+  height: 30px;
+  width: 30px; }
+
+.load-backdrop {
+  position: absolute;
+  top: 50%;
+  left: 50%; }
+
+.body.styled-by-modal {
+  position: fixed; }
+
+.b2b-modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1; }
+
+.b2b-modal-backdrop.fade {
+  background-color: #000;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  transition: all 0.3s linear 0s; }
+
+.b2b-modal-backdrop.fade.in {
+  z-index: 1040;
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+  background-color: #000;
+  transition: opacity 0.3s linear 0s; }
+
+.modalwrapper {
+  height: 100%;
+  width: 100%;
+  left: 0;
+  overflow-y: hidden;
+  position: absolute;
+  right: 0;
+  padding: 20px;
+  top: 0;
+  z-index: -1; }
+
+.modalwrapper.active {
+  z-index: 1050;
+  overflow-y: auto; }
+
+.modal {
+  background-clip: padding-box;
+  background-color: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.4);
+  margin: 0 auto;
+  /*margin-bottom:10%;*/
+  outline: medium none;
+  /*position: absolute;*/
+  height: 0;
+  min-height: 150px;
+  overflow: hidden;
+  /*top: 10%;*/
+  width: 100%;
+  z-index: -1; }
+
+.modalwrapper.modal-docked .modal {
+  max-height: 80%;
+  height: 80%;
+  overflow: hidden;
+  top: 0; }
+
+.modal.fade.in {
+  position: relative;
+  height: auto;
+  overflow: auto;
+  top: 10%;
+  z-index: 1060;
+  transition: opacity .5s linear 0s; }
+
+.modal.fade.in.modal-landscape {
+  overflow-y: auto; }
+
+.modal.fade {
+  transition: opacity .5s linear 0s; }
+
+.fade.in {
+  opacity: 1; }
+
+.fade {
+  opacity: 0; }
+
+.b2b-modal-header {
+  align-items: center;
+  border-radius: 8px 8px 0 0;
+  display: flex;
+  min-height: 60px;
+  overflow: hidden;
+  padding: 30px 46px 30px 30px;
+  position: relative; }
+
+.b2b-modal-header > h2 {
+  line-height: 1;
+  margin: 0;
+  padding: 0; }
+
+.modal-header-portrait {
+  -webkit-overflow-scrolling: auto; }
+
+.modal-header-landscape {
+  -webkit-overflow-scrolling: auto; }
+
+.b2b-modal-body {
+  -webkit-overflow-scrolling: touch;
+  padding: 0 30px 20px;
+  position: relative;
+  width: auto; }
+
+.b2b-modal-body:focus {
+  outline: 1px dotted #333333; }
+
+.modal-form {
+  margin-bottom: 0; }
+
+.b2b-modal-footer {
+  background-color: #fff;
+  width: 100%;
+  padding: 0 30px;
+  border-radius: 0;
+  position: absolute;
+  bottom: 0; }
+
+:not(.modal-docked) .b2b-modal-footer {
+  position: relative; }
+
+.modal-docked .b2b-modal-footer {
+  border-top: 1px solid #d2d2d2; }
+
+.modal-landscape .b2b-modal-footer {
+  position: relative; }
+
+.b2b-modal-footer .cta-button-group {
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px 0 5px;
+  width: 100%; }
+
+.b2b-modal-footer .cta-button-group .btn {
+  margin-left: auto;
+  margin-right: auto;
+  float: right;
+  margin-left: 10px; }
+
+.b2b-modal-footer .cta-button-group .btn + .btn {
+  margin-right: 0 !important; }
+
+[class*="modal-"] {
+  width: 100%; }
+
+.modal-small {
+  max-width: 420px; }
+
+.modal-medium {
+  max-width: 620px; }
+
+.modal-large {
+  max-width: 720px; }
+
+.modal-xlarge {
+  max-width: 860px; }
+
+.modal-jumbo {
+  max-width: 1000px; }
+
+.modalwrapper.modal-docked {
+  height: 100%;
+  display: flex;
+  align-items: center; }
+
+.modalwrapper.modal-docked .b2b-modal-body {
+  height: 80%;
+  overflow-y: scroll;
+  padding-bottom: 60px; }
+
+.modalwrapper.modal-docked .modal {
+  max-height: 80%;
+  height: 80%;
+  overflow: hidden;
+  top: 0; }
+
+.modalwrapper.modal-docked .b2b-modal-body > *:last-child {
+  margin-bottom: 60px; }
+
+@media (max-width: 767px) {
+  .modalwrapper {
+    padding: 15px;
+    overflow-x: hidden; }
+  .modal.fade.in {
+    top: 0;
+    right: 0;
+    left: 0;
+    margin-bottom: 15px;
+    border: none; }
+  .b2b-modal-header {
+    padding: 20px 46px 20px 15px; }
+  .b2b-modal-body {
+    width: 100%;
+    padding: 0 15px 15px; }
+  .modalwrapper.modal-docked {
+    position: absolute;
+    height: 100%;
+    padding: 0; }
+  .modalwrapper.modal-docked .modal.fade.in {
+    margin-bottom: 0;
+    width: 100% !important;
+    max-height: 100%;
+    height: 100%;
+    border-radius: 0; }
+  .modalwrapper.modal-docked .b2b-modal-body {
+    overflow-y: scroll;
+    height: 100%; }
+  .modalwrapper.modal-docked.modal-landscape {
+    overflow-y: hidden;
+    position: fixed; }
+  .modalwrapper.modal-docked.modal-landscape .modal {
+    overflow-y: scroll;
+    max-width: 100%; }
+  .modalwrapper.modal-docked.modal-landscape .b2b-modal-body {
+    height: auto;
+    overflow-y: hidden; }
+  .b2b-modal-footer {
+    padding: 0 15px; }
+  .b2b-modal-footer .cta-button-group {
+    display: block;
+    padding: 15px 0; }
+  .b2b-modal-footer .cta-button-group .btn {
+    float: none; }
+  .b2b-modal-footer .cta-button-group .btn + .btn {
+    margin-bottom: 0; }
+  .b2b-modal-footer .cta-button-group a.visible-phone {
+    align-items: center;
+    display: flex !important;
+    height: 42px;
+    justify-content: center; } }
+
+.b2b-modal-footer > .cta-button-group {
+  line-height: 40px; }
+
+.ajaxed,
+.modal.fade.in .b2b-modal-header,
+.modal.fade.in .b2b-modal-body,
+.modal.fade.in .b2b-modal-footer {
+  animation-duration: 0.01s;
+  -o-animation-duration: 0.01s;
+  -ms-animation-duration: 0.01s;
+  -moz-animation-duration: 0.01s;
+  -webkit-animation-duration: 0.01s;
+  animation-name: DOMinsertion;
+  -o-animation-name: DOMinsertion;
+  -ms-animation-name: DOMinsertion;
+  -moz-animation-name: DOMinsertion;
+  -webkit-animation-name: DOMinsertion; }
+
+.monthselector thead tr th {
+  min-width: 46px; }
+
+.monthselector thead tr:after {
+  content: "";
+  position: absolute;
+  left: 20px;
+  top: 52px;
+  height: 1px;
+  width: 85%;
+  border-bottom: 1px solid #ccc; }
+
+.monthselector tbody tr:last-child {
+  height: 50px; }
+
+.monthselector td.day {
+  margin: 1px 4px !important;
+  width: 64px !important; }
+
+.monthselector .datepicker-switch {
+  width: 195px !important; }
+
+.monthselector .show-date {
+  width: 30px !important; }
+
+.monthselector button.faux-input {
+  width: 100%; }
+  .monthselector button.faux-input:focus {
+    border: 1px solid #0574ac; }
+  .monthselector button.faux-input:disabled {
+    cursor: not-allowed; }
+
+.monthselector .cta-button-group {
+  padding: 0 20px; }
+  .monthselector .cta-button-group a {
+    margin-right: 20px; }
+
+.monthselector .day.active .show-date:after, .monthselector .day:focus .show-date:after, .monthselector .due-date.disabled .show-date:after {
+  height: 30px;
+  left: 9px !important;
+  top: 0;
+  width: 42px !important; }
+
+.monthselector .disabled.day:focus .show-date:after {
+  border: none; }
+
+.monthselector .icon-primary-calendar {
+  display: block; }
+
+.b2b-ml-nav {
+  padding: 0 10px 0 10px;
+  width: 320px; }
+
+.b2b-ml-nav ul {
+  list-style: none;
+  list-style-type: none; }
+
+.b2b-ml-nav a {
+  display: block;
+  padding: 0 0 5px 30px;
+  line-height: 22px;
+  margin-left: -10px;
+  color: #333;
+  font-size: 1.4rem; }
+
+.b2b-ml-nav a:focus {
+  outline-offset: 1px; }
+
+.b2b-ml-nav li:focus {
+  outline: none; }
+
+.b2b-ml-nav li:focus > a {
+  outline: thin dotted #666;
+  outline-offset: 1px; }
+
+.b2b-ml-nav ul li {
+  border-left: 1px solid #ccc; }
+
+.b2b-ml-nav ul ul {
+  padding: 0 0 0 20px; }
+
+.b2b-ml-nav ul > li {
+  position: relative;
+  line-height: 18px; }
+
+.b2b-ml-nav a > span {
+  background-color: #FFF;
+  display: inline;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: -11px;
+  top: 0; }
+
+.b2b-ml-nav a > span > i {
+  font-size: 20px; }
+
+.b2b-ml-nav a:only-child {
+  color: #0574ac; }
+
+.b2b-ml-nav a:only-child > span {
+  left: -6px;
+  border-radius: 50%;
+  line-height: 7px;
+  top: 5px; }
+
+.b2b-ml-nav a:only-child > span > i {
+  background-color: inherit;
+  background: #fff;
+  font-size: 10px; }
+
+.b2b-ml-nav ul li:first-child > a:only-child > span {
+  left: -6px;
+  border-radius: 50%;
+  line-height: 12px;
+  top: 0px; }
+
+.b2b-ml-nav li a + ul {
+  display: none; }
+
+.b2b-ml-nav li a.active + ul {
+  display: block; }
+
+/*to overide ng-doc inline property for library demo - TODO: Move to docs.css*/
+.b2b-ml-nav a [class^="icon-primary-"], a [class*=" icon-primary-"], a [class^="icon-primary-"]:before, a [class*=" icon-primary-"]:before {
+  display: inline-block; }
+
+.b2b-alerts-messages {
+  background-color: #fff;
+  border-radius: 8px;
+  height: auto; }
+  .b2b-alerts-messages h3 {
+    color: #333 !important;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    margin-bottom: 0 !important; }
+  .b2b-alerts-messages h4 {
+    color: #333 !important;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    margin-bottom: 0 !important; }
+  .b2b-alerts-messages .alert-info {
+    background-color: #0574ac;
+    border: 0; }
+  .b2b-alerts-messages .alert-error {
+    background-color: #cf2a2a;
+    border: 0; }
+  .b2b-alerts-messages .alert-success {
+    background-color: #1b7e28;
+    border: 0; }
+  .b2b-alerts-messages div:nth-child(2) {
+    padding: 0 0 15px 10px;
+    vertical-align: baseline; }
+  .b2b-alerts-messages .close:before {
+    color: #767676; }
+  .b2b-alerts-messages p {
+    font-size: 14px;
+    color: #333;
+    font-family: "Omnes-ECOMP-W02", Arial; }
+    .b2b-alerts-messages p a {
+      color: #333; }
+  .b2b-alerts-messages .btn-small {
+    margin-bottom: 0px; }
+
+.b2b-alerts-success {
+  border: 1px solid #1b7e28; }
+
+.b2b-alerts-error {
+  border: 1px solid #cf2a2a; }
+
+.b2b-alerts-info {
+  border: 1px solid #0574ac; }
+
+/* TODO: Rearange this and move to patches if needed */
+.b2b-breadcrumb-css-override > li {
+  margin-right: 24px; }
+
+.b2b-breadcrumb-css-override li > * {
+  float: left !important; }
+
+.b2b-css-override ul.nav-tabs {
+  margin-bottom: 0; }
+
+.b2b-css-override div.tab-content {
+  margin-top: 0;
+  border-top: none; }
+
+.b2b-css-override .tab-content .prettyprint, .b2b-css-override .usage .prettyprint {
+  max-height: 500px;
+  overflow-y: auto; }
+
+.b2b-top-nav-buttons-css-override {
+  margin-bottom: 0;
+  margin-top: 2px; }
+
+.b2b-auto-width {
+  width: auto !important; }
+
+.b2b-toggle-header-active {
+  color: #0568ae; }
+
+.b2b-toggle-header-inactive {
+  color: #333333; }
+
+.b2b-toggle-header-icon {
+  cursor: pointer; }
+
+.tab-content > .tab-pane {
+  display: none; }
+
+.tab-content > .active {
+  display: block; }
+
+.icon-primary-circle:before {
+  background-image: url("data:image/svg+xml,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Ccircle%20fill%3D%22transparent%22%20stroke%3D%22%23666%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2216%22%2F%3E%3C%2Fsvg%3E");
+  content: "";
+  position: absolute;
+  top: 0;
+  z-index: 1; }
+
+.ds2-no-colors .icon-primary-circle:before {
+  background-image: none;
+  content: "\e902"; }
+
+i:focus {
+  outline: thin dotted #666; }
+
+.p-col-md-12 {
+  width: 50%; }
+
+.pager__item {
+  border-radius: 0;
+  cursor: default;
+  display: inline-block;
+  margin: 5px;
+  width: 22px;
+  height: 23px;
+  /*transition: all 0.3s ease-out 0s;*/
+  vertical-align: baseline; }
+
+.pager {
+  padding-top: 10px;
+  padding-bottom: 20px;
+  text-align: center;
+  margin: 0 auto; }
+
+.pager__item--input {
+  color: #067ab4;
+  max-height: 32px;
+  max-width: 40px;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  margin-left: 10px; }
+
+.row.section-row {
+  margin-bottom: 20px; }
+
+.pager__item--active {
+  border-bottom: 2px solid #0574ac;
+  border-radius: 0;
+  color: #333333; }
+
+.pager a.pager__item--active:hover {
+  cursor: default; }
+
+.pager a:hover, .pager a:focus {
+  text-decoration: none;
+  color: #333333;
+  cursor: pointer; }
+
+.pager a.disabled:hover, .pager a.disabled:focus {
+  cursor: not-allowed; }
+
+.row.section-row.b2b-page {
+  display: block; }
+
+a.pager__item--next:focus, a.pager__item--prev:focus {
+  text-decoration: none;
+  border: 0; }
+
+.pager__item--next, .pager__item--prev {
+  margin: 5px;
+  padding: 1.5px 6px 1.5px 6px; }
+
+.pager .disabled i {
+  pointer-events: none;
+  cursor: default;
+  color: #c4c4c4; }
+
+.fieldLabel {
+  color: #666666; }
+
+.fieldLabel input {
+  color: #666666; }
+
+.pSelect {
+  float: right;
+  width: 150px; }
+
+.numericResult {
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  margin-top: 20px;
+  display: inline-block;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.mobile-view > .pager__item {
+  margin: 5px 10px;
+  width: 24px;
+  height: 34px;
+  vertical-align: middle;
+  line-height: 34px; }
+
+.fade1, .fadel {
+  opacity: 0.4; }
+
+.fade2, .fadesl {
+  opacity: 0.6; }
+
+h4#pagination-truncated {
+  margin-top: 50px; }
+
+h4#pagination-large-count {
+  margin-top: 50px; }
+
+.p-col-md-12 input {
+  margin-left: 20px; }
+
+.pager a .icon-primary-right:before {
+  display: inline-block; }
+
+.pager a .icon-primary-left:before {
+  display: inline-block; }
+
+.page-heading {
+  background: white none repeat scroll 0 0;
+  margin-bottom: -12px;
+  padding-left: 10px;
+  padding-right: 10px;
+  position: relative; }
+
+.numericResult:focus {
+  outline: 1px dotted #0574ac; }
+
+.page-heading-group {
+  color: #ef6f00;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.pager > div > span.fieldLabel {
+  margin-left: 18px; }
+
+.pager .fieldLabel .btn-arrow {
+  top: 0;
+  left: 10px; }
+
+.b2b-p-col-md-12 {
+  width: 50%; }
+  .b2b-p-col-md-12 input {
+    margin-left: 20px; }
+
+.b2b-pager__item {
+  border-radius: 0;
+  cursor: default;
+  display: inline-block;
+  margin: 5px;
+  min-width: 23px;
+  height: 23px;
+  vertical-align: baseline; }
+
+.b2b-pager__item--noclick {
+  pointer-events: none !important;
+  cursor: default !important; }
+
+.b2b-pager {
+  padding-top: 10px;
+  padding-bottom: 20px;
+  text-align: center;
+  margin: 0 auto; }
+  .b2b-pager a:hover {
+    text-decoration: none;
+    color: #333333;
+    cursor: pointer; }
+  .b2b-pager a:focus {
+    text-decoration: none;
+    color: #333333;
+    cursor: pointer; }
+  .b2b-pager a .icon-primary-right:before {
+    display: inline-block; }
+  .b2b-pager a .icon-primary-left:before {
+    display: inline-block; }
+  .b2b-pager .disabled i {
+    pointer-events: none;
+    cursor: default;
+    color: #c4c4c4; }
+
+.b2b-pager__item--input {
+  color: #067ab4;
+  max-height: 32px;
+  max-width: 60px;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  margin-left: 10px; }
+
+.row.section-row {
+  margin-bottom: 20px; }
+
+.b2b-pager__item--active {
+  border-bottom: 2px solid #0574ac;
+  border-radius: 0;
+  color: #333333; }
+
+.row.section-row.b2b-page {
+  display: block; }
+
+a.b2b-pager__item--next:focus {
+  text-decoration: none;
+  border: 0; }
+
+a.b2b-pager__item--next-disabled {
+  outline: 0; }
+
+a.b2b-pager__item--next-disabled > [class^="icon-primary-"] {
+  color: #cccccc;
+  cursor: not-allowed;
+  outline: 0; }
+
+a.b2b-pager__item--prev:focus {
+  text-decoration: none;
+  border: 0; }
+
+a.b2b-pager__item--prev-disabled {
+  outline: 0; }
+
+a.b2b-pager__item--prev-disabled > [class^="icon-primary-"] {
+  color: #cccccc;
+  cursor: not-allowed; }
+
+.b2b-pager__item--next {
+  margin: 5px;
+  padding: 1.5px 6px 1.5px 6px; }
+
+.b2b-pager__item--prev {
+  margin: 5px;
+  padding: 1.5px 6px 1.5px 6px; }
+
+.fieldLabel {
+  color: #666666; }
+  .fieldLabel input {
+    color: #666666; }
+  .fieldLabel .btn-arrow {
+    top: 0;
+    left: 10px; }
+
+.b2b-pSelect {
+  float: right;
+  width: 150px; }
+
+.b2b-numericResult {
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+  margin-top: 20px; }
+
+.b2b-mobile-view > .b2b-pager__item {
+  margin: 5px 10px;
+  min-width: 23px;
+  height: 34px;
+  vertical-align: middle;
+  line-height: 34px; }
+
+.b2b-fade1 {
+  opacity: 0.4; }
+
+.b2b-fade2 {
+  opacity: 0.6; }
+
+.b2b-fadesl {
+  opacity: 0.6; }
+
+h4#b2b-pagination-truncated {
+  margin-top: 50px; }
+
+h4#b2b-pagination-large-count {
+  margin-top: 50px; }
+
+.b2b-page-heading {
+  background: white none repeat scroll 0 0;
+  margin-bottom: -12px;
+  padding-left: 10px;
+  padding-right: 10px;
+  position: relative; }
+
+.b2b-numericResult:focus {
+  outline: 1px dotted #0574ac; }
+
+.b2b-page-heading-group {
+  color: #ef6f00;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.b2b-pager > div > span.fieldLabel {
+  margin-left: 18px; }
+
+input.b2b-phone-mask-input {
+  padding-right: 15px; }
+  input.b2b-phone-mask-input:hover, input.b2b-phone-mask-input:focus {
+    padding-right: 15px; }
+
+/************************** Start - Should be removed after the styling in global is fixed *******************/
+input::-ms-clear {
+  display: none; }
+
+/************************** End - Should be removed after the styling in global is fixed *******************/
+@media (max-width: 767px) {
+  input::-ms-clear {
+    display: block; } }
+
+.pivot-link-group {
+  background-color: #5a5a5a;
+  border-top: 1px solid #959595; }
+
+.pivot-links > li {
+  border-bottom: 1px solid #959595; }
+
+.pivot-links > li > a {
+  color: #fff;
+  display: block;
+  padding: 12px 15px 10px;
+  line-height: normal; }
+
+.b2b-profile-block-container {
+  min-height: 200px;
+  height: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  box-shadow: 0px 1px 1px 1px  #ccc;
+  display: inline-table;
+  margin: 15px 15px; }
+
+.b2b-profile-block-details p, .b2b-profile-block-details div {
+  padding: 2px 7px;
+  font-size: 1.4rem; }
+
+.b2b-profile-block-details .radio-label, .b2b-profile-block-details a {
+  font-size: 1.4rem; }
+
+.b2b-profile-block-details p label, .b2b-profile-block-details p span {
+  padding-left: 10px; }
+
+.b2b-profile-block-footer {
+  margin-bottom: 12px;
+  margin-top: 5px;
+  height: 35px; }
+
+.b2b-profile-block-details p {
+  word-wrap: break-word;
+  height: 61px; }
+  .b2b-profile-block-details p:first-child {
+    margin-top: 10px; }
+  .b2b-profile-block-details p:after {
+    content: ' ';
+    display: block;
+    border: 0.2px solid #ccc;
+    margin-top: 12px; }
+
+.b2b-profile-block-details .radio {
+  margin-left: 15px;
+  height: 30px; }
+
+.b2b-approval-icon {
+  color: #1b7e28;
+  float: right;
+  position: relative;
+  left: 10px; }
+  .b2b-approval-icon i {
+    color: #1b7e28;
+    float: right; }
+
+.b2b-profile-link {
+  float: right;
+  position: relative;
+  left: -4px; }
+
+a.link-profile {
+  position: relative;
+  left: -5px;
+  float: right;
+  margin-bottom: 16px; }
+
+.b2b-profile-block-radio {
+  position: relative;
+  top: -5px; }
+
+.b2b-profile-card {
+  min-width: 229px;
+  min-height: 354px;
+  margin: 10px;
+  border: solid 1px #CCC;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  display: inline-block;
+  vertical-align: top; }
+  .b2b-profile-card .top-block {
+    padding: 15px 20px;
+    background-color: #e4e4e4;
+    max-height: 153px; }
+  .b2b-profile-card .bottom-block {
+    padding: 15px 20px 15px 20px;
+    background-color: #fff; }
+  .b2b-profile-card .profile-image {
+    background: #e4e4e4;
+    margin-bottom: 15px;
+    text-align: center; }
+    .b2b-profile-card .profile-image .default-img {
+      display: inline-block;
+      width: 60px;
+      height: 60px;
+      margin-bottom: 10px;
+      border: 6px solid #fff;
+      border-radius: 99em;
+      -webkit-border-radius: 99em;
+      -moz-border-radius: 99em;
+      /* background-color: #eee; */ }
+
+.profile-image img {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  margin-bottom: 10px;
+  border: 6px solid #fff;
+  border-radius: 99em;
+  -webkit-border-radius: 99em;
+  -moz-border-radius: 99em;
+  /* background-color: #eee; */ }
+
+.b2b-profile-card .profile-image .default-img {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  color: #333;
+  background-color: #fff;
+  font-size: 32px;
+  line-height: 22px;
+  padding: 5px;
+  padding-top: 13px;
+  width: 60px;
+  height: 60px;
+  text-transform: uppercase; }
+
+.b2b-profile-card .profile-image .name {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 16px;
+  color: #333;
+  text-align: center;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: normal;
+  text-transform: capitalize; }
+
+.b2b-profile-card .profile-image .status-icon {
+  border-radius: 10px;
+  border: 1px solid #fff;
+  margin: 0 3px 0 0;
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  vertical-align: middle; }
+
+.b2b-profile-card .profile-image .status {
+  font-size: 12px;
+  line-height: 15px;
+  text-align: center;
+  margin: 0 15px 0 0;
+  color: #444; }
+
+.b2b-profile-card .status .circle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: 30px 6px 0px 20px;
+  text-align: center;
+  background-color: #444; }
+
+.b2b-profile-card .profile-image .status-green {
+  background-color: #0c0; }
+
+.b2b-profile-card .profile-image .status-red {
+  background-color: red; }
+
+.b2b-profile-card .profile-image .status-blue {
+  background-color: #00f; }
+
+.b2b-profile-card .profile-image .status-yellow {
+  background-color: #ff0; }
+
+.b2b-profile-card .profile-image .status .status-badge {
+  margin-left: 5px;
+  border: dotted 1px #444;
+  background-color: transparent;
+  font-weight: 400;
+  color: #444;
+  height: 17px;
+  padding: 0 5px;
+  font-size: 11px;
+  padding-left: 5px;
+  padding-right: 5px; }
+
+.b2b-profile-card .profile-details {
+  background: #fff; }
+  .b2b-profile-card .profile-details label {
+    display: block;
+    cursor: text;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-weight: bolder;
+    font-size: 14px;
+    color: #333;
+    padding: 0;
+    margin: 0; }
+  .b2b-profile-card .profile-details div {
+    margin: 0;
+    font-size: 14px;
+    color: #333;
+    padding-bottom: 6.5px; }
+
+.b2b-profile-card .b2b-add-user {
+  background: white;
+  border-style: dotted;
+  font-size: 16px;
+  color: #333;
+  position: relative; }
+  .b2b-profile-card .b2b-add-user i {
+    font-size: 30px;
+    padding-bottom: 15px; }
+
+.b2b-profile-card .atcenter {
+  cursor: pointer;
+  margin-top: 60%;
+  vertical-align: middle;
+  text-align: center; }
+
+.b2b-profile-card .tooltip {
+  cursor: pointer; }
+  .b2b-profile-card .tooltip .helpertext {
+    position: relative;
+    color: white; }
+
+.b2b-profile-card .tooltip-wrapper {
+  position: relative; }
+
+/* Overrides for tooltip absolute positioning */
+@media (min-width: 1025px) {
+  .b2b-profile-card .tooltip-size-control {
+    width: 100% !important; } }
+
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0; }
+  to {
+    background-position: 80px 0; } }
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0; }
+  to {
+    background-position: 80px 0; } }
+
+.progress {
+  background-color: #e4e4e4;
+  border-radius: 4px;
+  height: 14px;
+  margin-bottom: 20px;
+  min-width: 250px;
+  overflow: hidden;
+  padding: 0;
+  position: relative; }
+
+a .progress {
+  margin-bottom: 0; }
+
+.progress .bar {
+  background-color: #666;
+  border-radius: 4px;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  width: 0; }
+
+.progress-arrow {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end; }
+
+.progress-link + .usage-bar {
+  margin-top: 5px; }
+
+.progress-success .bar, .progress .bar-success {
+  background-color: #1b7e28; }
+
+.progress-warning .bar, .progress .bar-warning {
+  background-color: #ef6f00; }
+
+.progress-danger .bar, .progress .bar-danger {
+  background-color: #cf2a2a; }
+
+.progress.increment {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.progress.increment .bar:first-child:not(:last-child) {
+  border-right: none;
+  border-radius: 4px 0 0 4px; }
+
+.progress.increment .bar:last-child:not(:first-child) {
+  border-left: none;
+  border-radius: 0 4px 4px 0; }
+
+.progress.increment .bar + .bar:not(:last-child) {
+  border-left: none;
+  border-right: none;
+  border-radius: 0; }
+
+.progress.increment .bar:not(:first-child) {
+  border-left: 1px solid white !important; }
+
+.usage-bar {
+  display: table;
+  float: none;
+  width: 100%;
+  margin-bottom: 1px; }
+
+.usage-bar > .usage-text {
+  display: table-cell;
+  width: 1%; }
+
+.progress + .usage-bar {
+  margin-top: -15px; }
+
+.usage-bar .usage-text {
+  font-size: 1.4rem; }
+
+.usage-bar .usage-text:first-child {
+  white-space: nowrap; }
+
+.usage-bar .usage-text.text-right {
+  vertical-align: top;
+  font-size: 1.4rem;
+  width: auto !important; }
+
+.usage-bar .usage-text.text-right:before {
+  content: "";
+  display: table;
+  height: .1em; }
+
+.usage-bar.billing-cycle .usage-text {
+  font-size: 1.4rem; }
+
+.usage-bar.billing-cycle .usage-text.text-right {
+  vertical-align: bottom; }
+
+.progress.autocolor [data-percentage="1"], .progress.autocolor [data-percentage="2"], .progress.autocolor [data-percentage="3"], .progress.autocolor [data-percentage="4"], .progress.autocolor [data-percentage="5"], .progress.autocolor [data-percentage="6"], .progress.autocolor [data-percentage="7"], .progress.autocolor [data-percentage="8"], .progress.autocolor [data-percentage="9"], .progress.autocolor [data-percentage="10"] .progress.autocolor [data-percentage^="2"], .progress.autocolor [data-percentage^="3"], .progress.autocolor [data-percentage^="4"], .progress.autocolor [data-percentage^="5"], .progress.autocolor [data-percentage="60"], .progress.autocolor [data-percentage="61"], .progress.autocolor [data-percentage="62"], .progress.autocolor [data-percentage="63"], .progress.autocolor [data-percentage="64"] {
+  background-color: #1b7e28; }
+
+.progress.autocolor [data-percentage="65"], .progress.autocolor [data-percentage="66"], .progress.autocolor [data-percentage="67"], .progress.autocolor [data-percentage="68"], .progress.autocolor [data-percentage="69"], .progress.autocolor [data-percentage^="7"], .progress.autocolor [data-percentage^="8"] {
+  background-color: #ef6f00; }
+
+.progress.autocolor [data-percentage^="9"], .progress.autocolor [data-percentage="100"] {
+  background-color: #cf2a2a; }
+
+.b2b-seek-bar-container {
+  position: relative; }
+  .b2b-seek-bar-container div {
+    position: absolute; }
+  .b2b-seek-bar-container .b2b-seek-bar-track-container {
+    width: 100%; }
+  .b2b-seek-bar-container .b2b-seek-bar-track {
+    width: 100%;
+    height: 6px;
+    background-color: #cccccc;
+    border-radius: 10px; }
+  .b2b-seek-bar-container .b2b-seek-bar-track-fill {
+    width: 100%;
+    height: 6px;
+    background-color: #cccccc;
+    border-radius: 10px;
+    width: 0;
+    background-color: #157BB2;
+    transition: width 0s linear; }
+
+.seek-bar-container .seek-bar-knob-container {
+  transition: left 0s linear; }
+
+.b2b-seek-bar-container .b2b-seek-bar-knob {
+  width: 14px;
+  height: 14px;
+  border-radius: 10px;
+  top: -4px;
+  left: -8px;
+  border: 1px solid #cccccc;
+  background: white;
+  cursor: pointer; }
+
+.b2b-seek-bar-container .b2b-seek-bar-knob:focus {
+  outline: thin dotted #666; }
+
+.b2b-seek-bar-container.vertical {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 10px; }
+  .b2b-seek-bar-container.vertical .b2b-seek-bar-track-container {
+    position: relative;
+    height: 100%; }
+  .b2b-seek-bar-container.vertical .b2b-seek-bar-track {
+    position: absolute;
+    height: 100%; }
+  .b2b-seek-bar-container.vertical .b2b-seek-bar-track-fill {
+    position: absolute;
+    bottom: 0;
+    height: 0;
+    width: 100%; }
+  .b2b-seek-bar-container.vertical .b2b-seek-bar-knob-container {
+    transition: bottom .01s linear;
+    position: relative;
+    bottom: 0; }
+  .b2b-seek-bar-container.vertical .b2b-seek-bar-knob {
+    position: absolute;
+    border-radius: 10px;
+    top: -7px;
+    left: -4px; }
+
+.form-search .search-query {
+  width: 100% !important; }
+
+.form-search .well {
+  margin-top: 0; }
+
+.form-search > ul.nav > li.section {
+  min-height: 20px !important; }
+
+input.b2b-search-input-field {
+  margin-bottom: 0px; }
+
+.search-suggestion-list {
+  background-color: #FFFFFF;
+  border: 1px solid #ccc;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+  margin-top: -5px;
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 15px 0;
+  position: absolute;
+  width: 100%;
+  z-index: 1000; }
+  .search-suggestion-list > li.active {
+    background-color: #cccccc; }
+  .search-suggestion-list:empty {
+    display: none; }
+
+.b2b-search-hightlight {
+  font-weight: bold; }
+
+input[type="text"]::-moz-placeholder {
+  color: #767676;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+input[type="text"]:focus {
+  z-index: 1000; }
+
+input[type="text"] + .reset-field {
+  background-color: #FFFFFF;
+  height: 90%;
+  top: 5%; }
+
+.btn-search:focus {
+  outline: 1px dotted #0574ac; }
+
+.field-group input:not([type="button"])[disabled] ~ .btn-search {
+  background-color: #eee; }
+
+.btn-search[class*="btn"] {
+  background-color: #FFFFFF;
+  background-size: 20px 20px;
+  border-radius: 0 1.5rem 1.5rem 0;
+  height: 3rem;
+  min-width: 4.4rem !important;
+  right: 0.15rem;
+  top: 0.15rem;
+  width: 4.4rem; }
+
+.search-suggestion-wrapper {
+  margin-bottom: 15px;
+  position: relative; }
+  .search-suggestion-wrapper .no-result {
+    padding: 0px 15px; }
+
+.search-suggestion-item {
+  color: #333333;
+  line-height: 4rem;
+  padding: 0 15px;
+  position: relative;
+  z-index: 1000; }
+  .search-suggestion-item:hover {
+    background-color: #e4e4e4;
+    cursor: pointer; }
+  .search-suggestion-item:focus {
+    background-color: #e4e4e4;
+    cursor: pointer; }
+  .search-suggestion-item a {
+    color: #333333;
+    text-decoration: none; }
+
+.btn-search i {
+  color: #767676; }
+
+input.b2b-search-input-field:focus ~ .btn-search > i, .btn-search:focus > i {
+  color: #0568ae; }
+
+button.btn-search[disabled] {
+  cursor: not-allowed; }
+  button.btn-search[disabled] i {
+    color: #767676; }
+
+.linkSelectorModule {
+  position: relative;
+  height: 32px;
+  line-height: 20px;
+  border: 0px;
+  width: auto;
+  display: block; }
+  .linkSelectorModule .icon-primary-down {
+    font-size: 23px;
+    margin-top: -10px;
+    position: absolute;
+    top: 50%;
+    margin-left: -30px; }
+  .linkSelectorModule .selectModule {
+    background-color: transparent;
+    border: none;
+    color: #0568ae;
+    cursor: pointer;
+    border: 1px solid transparent;
+    box-shadow: none;
+    padding-right: 35px;
+    position: relative;
+    user-select: none;
+    font-size: 1.6rem; }
+    .linkSelectorModule .selectModule:focus {
+      border: 1px dotted #ccc;
+      box-shadow: none;
+      -moz-user-select: none; }
+    .linkSelectorModule .selectModule:hover {
+      text-decoration: underline; }
+  .linkSelectorModule .active + .moduleWrapper:before {
+    background-color: #FFFFFF;
+    border-color: #d2d2d2;
+    border-style: solid;
+    border-width: 1px 1px 0 0;
+    content: "";
+    display: block;
+    height: 15px;
+    right: 122px;
+    margin: 0;
+    position: absolute;
+    top: -8px;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    width: 15px; }
+  .linkSelectorModule .moduleWrapper {
+    top: 40px; }
+  .linkSelectorModule ul.awd-module-list {
+    border-radius: 6px 6px 0px 0px; }
+
+.selectorModule .icon-primary-down {
+  font-size: 23px;
+  margin-top: -11px;
+  position: absolute;
+  right: 4px;
+  top: 50%; }
+
+.selectorModule .selectModule {
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+  display: block;
+  width: 100%;
+  padding-left: 15px;
+  background-color: transparent;
+  cursor: pointer; }
+  .selectorModule .selectModule:focus {
+    border: 1px solid #0568ae;
+    -moz-user-select: none; }
+  .selectorModule .selectModule span.module-data {
+    position: absolute;
+    bottom: 6px;
+    line-height: 20px; }
+  .selectorModule .selectModule img + span.module-data {
+    padding-left: 45px; }
+
+.selectorModule .selectModule.active {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px; }
+
+.selectorModule .moduleWrapper {
+  position: absolute;
+  width: 100% !important;
+  border-top: none; }
+
+.selectorModule ul.awd-module-list {
+  border-radius: 0px 0px 6px 6px; }
+
+.selectorModule .large > img {
+  height: 30px;
+  position: absolute;
+  width: 30px;
+  top: 20px;
+  left: 15px; }
+
+.selectModule {
+  background-color: transparent;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  color: #333333;
+  font-size: 1.6rem;
+  height: 36px;
+  line-height: 35px;
+  margin-bottom: 0;
+  position: relative;
+  text-align: left;
+  top: 0;
+  z-index: 10;
+  padding: 0px;
+  margin: 0px;
+  cursor: pointer; }
+
+.moduleWrapper {
+  background-color: #FFFFFF;
+  position: absolute;
+  color: #191919;
+  z-index: 9999;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 0px 0px 6px 6px; }
+  .moduleWrapper .module-list-item img {
+    height: 30px;
+    position: absolute;
+    width: 30px;
+    top: 30px;
+    left: 15px;
+    align-self: center; }
+  .moduleWrapper span {
+    display: block;
+    white-space: nowrap;
+    font-size: 1.5rem; }
+
+.awd-module-list {
+  overflow-y: auto;
+  z-index: 9999;
+  max-height: 360px;
+  border: 1px solid #d2d2d2; }
+  .awd-module-list .module-list-item > .module-data {
+    overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 20px;
+    font-size: 1.6rem;
+    border-bottom: 1px dotted #959595;
+    margin: 0px 15px 0px 15px;
+    padding-right: 50px;
+    padding-bottom: 14px;
+    padding-top: 14px;
+    align-self: center;
+    width: 100%; }
+  .awd-module-list .module-list-item:hover {
+    background-color: #f2f2f2; }
+  .awd-module-list .module-list-item:active {
+    background-color: #f2f2f2; }
+  .awd-module-list .module-list-item[aria-selected="true"] {
+    background-color: #f2f2f2; }
+
+.module-list-item {
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  overflow: ellipsis;
+  white-space: nowrap;
+  z-index: 1000;
+  color: #191919;
+  display: flex; }
+  .module-list-item:last-of-type .module-data {
+    border-bottom: none; }
+  .module-list-item img + span.module-data {
+    padding-left: 45px; }
+
+.module-groups:first-of-type .module-list-item:last-of-type .module-data {
+  border-bottom: 1px solid #959595; }
+
+.module-groupitem {
+  padding-bottom: 4px; }
+
+.selectorModule.large {
+  height: 72px;
+  vertical-align: middle;
+  text-align: left; }
+  .selectorModule.large .moduleWrapper {
+    top: 71px; }
+  .selectorModule.large input {
+    height: 72px;
+    vertical-align: middle;
+    text-align: left; }
+  .selectorModule.large button {
+    height: 72px;
+    vertical-align: middle;
+    text-align: left; }
+  .selectorModule.large .selectModule img {
+    left: 15px;
+    top: 21px; }
+
+ul.module-groupitem li {
+  margin: 0 -15px 0 -15px; }
+
+span.module-data span {
+  display: block;
+  line-height: 20px;
+  font-size: 1.5rem; }
+
+li.module-groups {
+  cursor: default !important;
+  padding: 18px 15px 0px 15px; }
+
+li.module-list-item[selected]:before {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 2em;
+  height: 1em;
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  vertical-align: middle;
+  width: 1em;
+  color: #007a3e; }
+
+ul.module-optinalcta {
+  position: relative;
+  height: 44px;
+  margin-top: 0px;
+  border-bottom: 1px solid #d2d2d2;
+  border-left: 1px solid #d2d2d2;
+  border-right: 1px solid #d2d2d2;
+  border-radius: 0px 0px 6px 6px; }
+  ul.module-optinalcta li {
+    position: absolute;
+    bottom: 10px; }
+  ul.module-optinalcta a {
+    text-indent: 15px;
+    padding: 15px; }
+
+.b2b-slider-container {
+  position: relative; }
+  .b2b-slider-container.slider-disabled {
+    cursor: not-allowed !important; }
+  .b2b-slider-container div {
+    position: absolute; }
+  .b2b-slider-container .slider-track-container {
+    width: 100%;
+    cursor: pointer; }
+  .b2b-slider-container .slider-track {
+    width: 100%;
+    height: 6px;
+    background-color: #cccccc;
+    border-radius: 10px; }
+  .b2b-slider-container .slider-track-fill {
+    width: 100%;
+    height: 6px;
+    background-color: #cccccc;
+    border-radius: 10px;
+    width: 0;
+    background-color: #157BB2;
+    transition: width 0s linear; }
+  .b2b-slider-container .slider-knob-container {
+    transition: left 0s linear; }
+    .b2b-slider-container .slider-knob-container.slider-knob-hidden {
+      display: none !important; }
+  .b2b-slider-container .slider-knob {
+    width: 14px;
+    height: 14px;
+    border-radius: 10px;
+    top: -4px;
+    left: -8px;
+    border: 1px solid #cccccc;
+    background: white;
+    cursor: pointer; }
+    .b2b-slider-container .slider-knob:focus {
+      outline: thin dotted #666; }
+
+.b2b-slider-endpoints-container {
+  margin-top: 13px;
+  color: #333;
+  font-size: 12px; }
+  .b2b-slider-endpoints-container .b2b-slider-endpoints-left {
+    float: left;
+    line-height: 100%; }
+  .b2b-slider-endpoints-container .b2b-slider-endpoints-right {
+    float: right;
+    line-height: 100%; }
+  .b2b-slider-endpoints-container::after {
+    clear: both;
+    content: "";
+    display: block; }
+
+.b2b-slider-container.vertical {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 10px; }
+  .b2b-slider-container.vertical .slider-track-container {
+    position: relative;
+    height: 100%; }
+  .b2b-slider-container.vertical .slider-track {
+    position: absolute;
+    height: 100%; }
+  .b2b-slider-container.vertical .slider-track-fill {
+    position: absolute;
+    bottom: 0;
+    height: 0;
+    width: 100%; }
+  .b2b-slider-container.vertical .slider-knob-container {
+    transition: bottom 0s linear;
+    position: relative;
+    bottom: 0; }
+    .b2b-slider-container.vertical .slider-knob-container.slider-knob-hidden {
+      display: none !important; }
+  .b2b-slider-container.vertical .slider-knob {
+    position: absolute;
+    border-radius: 10px;
+    top: -7px;
+    left: -4px; }
+
+.icon-primary-spinner {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20id%3D%22svg-spinner%22%20x%3D%220px%22%20y%3D%220px%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%20%3Cpath%20fill%3D%22%23F5F5F5%22%20d%3D%22M18%2036C8.1%2036%200%2027.9%200%2018S8.1%200%2018%200s18%208.1%2018%2018-8.1%2018-18%2018zm0-31.5c-7.5%200-13.5%206-13.5%2013.5S10.6%2031.5%2018%2031.5c7.5%200%2013.5-6.1%2013.5-13.5%200-7.5-6-13.5-13.5-13.5z%22%2F%3E%0A%20%20%20%3Cpath%20fill%3D%22%230568AE%22%20id%3D%22spinner%22%20d%3D%22M30.7%205.3l-3.1%203.2c2.4%202.4%203.9%205.8%203.9%209.5%200%207.4-6.1%2013.5-13.5%2013.5S4.5%2025.4%204.5%2018%2010.6%204.5%2018%204.5V0C8.1%200%200%208.1%200%2018s8.1%2018%2018%2018%2018-8.1%2018-18c0-5-2-9.5-5.3-12.7z%22%3E%0A%20%20%20%20%20%20%3CanimateTransform%20%0A%20%20%20%20%20%20%20%20%20attributeType%3D%22xml%22%0A%20%20%20%20%20%20%20%20%20attributeName%3D%22transform%22%0A%20%20%20%20%20%20%20%20%20type%3D%22rotate%22%0A%20%20%20%20%20%20%20%20%20from%3D%220%2018%2018%22%0A%20%20%20%20%20%20%20%20%20to%3D%22360%2018%2018%22%0A%20%20%20%20%20%20%20%20%20dur%3D%221.0s%22%0A%20%20%20%20%20%20%20%20%20repeatCount%3D%22indefinite%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
+  height: 50px;
+  width: 50px; }
+
+.icon-primary-spinner.small {
+  margin-right: 5px;
+  height: 30px !important;
+  width: 30px !important; }
+
+.isIE .icon-primary-spinner,
+.isIE .icon-primary-spinner.small {
+  animation: spinner 1s linear infinite; }
+
+.ds2-no-colors .icon-primary-spinner {
+  animation: spinner 1s linear infinite;
+  border: 5px dotted transparent;
+  border-radius: 50%; }
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(359deg); } }
+
+.b2b-status-tracker > .btn-arrow:nth-of-type(1) {
+  margin-right: 10px; }
+
+.b2b-status-tracker > .btn-arrow:nth-of-type(2) {
+  margin-left: 20px; }
+
+.b2b-status-tracker > .btn-arrow {
+  height: 20px;
+  margin-top: 25px;
+  overflow: visible; }
+  .b2b-status-tracker > .btn-arrow > .btn-secondary > .icon-primary-left {
+    margin-right: 5px;
+    color: #0574ac; }
+  .b2b-status-tracker > .btn-arrow > .btn-secondary > .icon-primary-right {
+    color: #0574ac; }
+
+.b2b-status-tracker > .b2b-status-tracker-step {
+  padding: 0;
+  position: relative; }
+
+.b2b-status-tracker-step {
+  margin-left: 5px; }
+
+.b2b-status-tracker > .b2b-status-tracker-step .b2b-status-tracker-heading {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 14px;
+  color: #767676;
+  margin-bottom: 10px; }
+
+.b2b-status-tracker > .b2b-status-tracker-step.complete > .b2b-status-tracker-heading {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #1b7e28; }
+
+.b2b-status-tracker > .b2b-status-tracker-step.complete > .progress > .progress-bar {
+  width: 100%;
+  background-color: #1b7e28; }
+
+.b2b-status-tracker > .b2b-status-tracker-step.complete > .b2b-status-tracker-estimate {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #333333; }
+  .b2b-status-tracker > .b2b-status-tracker-step.complete > .b2b-status-tracker-estimate > .icoControls-approval {
+    color: #1b7e28; }
+
+.b2b-status-tracker > .b2b-status-tracker-step.current > .b2b-status-tracker-heading {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #333333; }
+
+.b2b-status-tracker > .b2b-status-tracker-step.current > .progress > .progress-bar {
+  width: 100%;
+  background-color: #333333; }
+
+.b2b-status-tracker > .b2b-status-tracker-step.current > .b2b-status-tracker-estimate > .icon-misc-time {
+  color: #333333; }
+
+.b2b-status-tracker > .b2b-status-tracker-step > .progress {
+  position: relative;
+  border-radius: 1.5px;
+  height: 3px;
+  margin-bottom: 10px;
+  background-color: #c5c5c5; }
+  .b2b-status-tracker > .b2b-status-tracker-step > .progress > .progress-bar {
+    width: 0;
+    height: 3px; }
+
+.b2b-status-tracker > .b2b-status-tracker-step > .b2b-status-tracker-estimate {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 14px;
+  color: #767676;
+  margin-bottom: 10px; }
+  .b2b-status-tracker > .b2b-status-tracker-step > .b2b-status-tracker-estimate > .icon-misc-time {
+    color: #767676; }
+
+.b2b-status-tracker > .b2b-status-tracker-step > .b2b-status-tracker-description {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 12px;
+  color: #767676;
+  padding-right: 15px; }
+
+.step-indicator {
+  height: auto;
+  padding: 40px 0; }
+
+.step-heading {
+  color: #333333;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 3.8rem;
+  line-height: 0.8; }
+
+.steps {
+  display: flex;
+  height: 5px;
+  margin-top: 60px;
+  position: relative; }
+
+.steps li {
+  color: #5a5a5a;
+  flex: 1;
+  margin-right: 5px;
+  background-color: #c4c4c4;
+  outline: 1px solid transparent; }
+
+.steps li:first-child {
+  border-radius: 4px 0 0 4px; }
+
+.steps li:last-child {
+  margin-right: 0;
+  border-radius: 0 4px 4px 0; }
+
+.steps li.step-on,
+.steps li.step-done {
+  background-color: #007a3e;
+  color: #007a3e;
+  border: 1px solid transparent; }
+
+.step-text {
+  bottom: 29px;
+  display: inline-block;
+  font-size: 1.8rem;
+  margin-top: 0;
+  position: relative;
+  white-space: nowrap; }
+
+.step-on .step-text {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.steps li .step-text[data-large-text]:before {
+  content: attr(data-large-text) " "; }
+
+.step-confirmation {
+  color: #007a3e;
+  margin-bottom: 30px; }
+
+.step-confirmation > div {
+  display: flex; }
+
+.step-confirmation > div i {
+  color: #007a3e;
+  font-size: 50px;
+  margin-right: 10px; }
+
+.step-confirmation.centered > div i {
+  margin-left: -60px; }
+
+.step-confirmation > div h3 {
+  font-size: 2.4rem;
+  margin: 26px 0 20px; }
+
+.step-confirmation > p {
+  margin: 0; }
+
+@media (max-width: 1024px) {
+  .step-indicator {
+    padding: 25px 0; }
+  .steps {
+    margin-top: 0; }
+  .step-heading {
+    font-size: 2.4rem;
+    margin-bottom: 11px; }
+  .step-text {
+    display: none; }
+  .step-on .step-text {
+    bottom: 6px;
+    display: block;
+    font-size: 1.2rem;
+    left: 0;
+    line-height: 1;
+    margin-top: 10px;
+    position: absolute;
+    top: 4px; }
+  .steps li .step-text[data-sm-text]:before {
+    content: attr(data-sm-text) " ";
+    color: #333333; }
+  .step-confirmation {
+    margin-top: 30px !important; } }
+
+@media (max-width: 767px) {
+  .step-confirmation.centered > div i {
+    margin-left: 0; }
+  .step-confirmation.centered > p {
+    margin-left: 40px; }
+  .step-confirmation > div h3 {
+    font-size: 1.8rem;
+    margin: 13px 0 10px; }
+  .step-confirmation > div i {
+    font-size: 30px;
+    margin-right: 10px; } }
+
+.step-indicator.vertical {
+  height: auto; }
+
+.vertical .step-heading {
+  font-size: 24px; }
+
+.vertical .steps {
+  display: block;
+  height: inherit;
+  width: 100%; }
+
+.vertical .steps li {
+  align-items: center;
+  background-color: transparent;
+  display: flex;
+  height: 60px;
+  margin: 0 0 4px;
+  padding: 0 0 0 20px;
+  position: relative; }
+
+.vertical .steps li .step-text {
+  align-self: center;
+  color: #0568ae;
+  display: block;
+  margin: 0;
+  position: relative;
+  font-size: 14px;
+  top: 0; }
+
+.vertical .steps li .step-text[data-large-text]:before {
+  content: attr(data-large-text) " "; }
+
+.vertical .steps li:after {
+  background-color: transparent;
+  border-left: 4px solid #d2d2d2;
+  content: "";
+  height: 60px;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 4px; }
+
+.vertical .steps li.step-on:after,
+.vertical .steps li.step-done:after {
+  border-color: #0568ae; }
+
+.b2b-step-tracker {
+  height: auto;
+  padding: 0px 0px 0px 0px; }
+  .b2b-step-tracker .btn.btn-left {
+    margin-right: 10px; }
+  .b2b-step-tracker .btn.btn-right {
+    margin-left: 5px; }
+  .b2b-step-tracker .b2b-left-arrow {
+    float: left;
+    margin-top: -5px; }
+  .b2b-step-tracker .b2b-right-arrow {
+    float: right;
+    margin-top: -5px; }
+  .b2b-step-tracker .b2b-steps {
+    display: flex;
+    height: 5px;
+    margin-top: 30px;
+    position: relative; }
+    .b2b-step-tracker .b2b-steps li {
+      color: #767676;
+      flex: 1;
+      margin-right: 5px;
+      background-color: #767676;
+      outline: 1px solid transparent;
+      height: 3px; }
+      .b2b-step-tracker .b2b-steps li.b2b-step-done {
+        background-color: #1b7e28;
+        color: #007a3e;
+        height: 3px; }
+      .b2b-step-tracker .b2b-steps li.b2b-step-on {
+        background-color: #333333;
+        color: #333333;
+        height: 3px;
+        font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+      .b2b-step-tracker .b2b-steps li .b2b-step-text {
+        bottom: 29px;
+        display: inline-block;
+        font-size: 14px;
+        margin-top: 0;
+        position: relative;
+        white-space: nowrap; }
+      .b2b-step-tracker .b2b-steps li .b2b-step-text[data-large-text]:before {
+        content: attr(data-large-text) " "; }
+    .b2b-step-tracker .b2b-steps li:first-child {
+      border-radius: 2px 0 0 2px; }
+    .b2b-step-tracker .b2b-steps li:last-child {
+      margin-right: 0;
+      border-radius: 0 2px 2px 0; }
+
+@media (max-width: 1024px) {
+  .b2b-step-tracker {
+    padding: 25px 0; }
+    .b2b-step-tracker .b2b-steps {
+      margin-top: 0; }
+      .b2b-step-tracker .b2b-steps li .b2b-step-text {
+        display: none; }
+      .b2b-step-tracker .b2b-steps li .b2b-step-text[data-sm-text]:before {
+        content: attr(data-sm-text) " ";
+        color: #333333; }
+      .b2b-step-tracker .b2b-steps li.b2b-step-on .b2b-step-text {
+        bottom: 6px;
+        display: block;
+        font-size: 10px;
+        left: 0;
+        line-height: 1;
+        margin-top: 10px;
+        position: absolute;
+        top: 4px; } }
+
+.strength-meter-container {
+  height: 26px;
+  max-width: 450px; }
+
+.strength-meter-gauge {
+  border-radius: 2px;
+  background-color: #d2d2d2;
+  height: 5px;
+  display: block;
+  position: relative;
+  outline: 1px solid transparent; }
+
+.strength-meter-gauge-fill {
+  height: 100%;
+  display: block;
+  border-radius: 2px;
+  text-indent: -9999px;
+  width: 0%;
+  border: 2px solid transparent; }
+
+.strength-meter-gauge-fill.strength-meter-animate {
+  transition: width 0.5s linear, background-color 0.5s linear; }
+
+.strength-meter-animate[style*="20"] {
+  background-color: #cf2a2a; }
+
+.strength-meter-animate[style*="20"] + .strength-meter-divider + .strength-meter-content:after {
+  content: "Unacceptable"; }
+
+.strength-meter-animate[style*="40"] {
+  background-color: #ea7400; }
+
+.strength-meter-animate[style*="40"] + .strength-meter-divider + .strength-meter-content:after {
+  content: "Weak"; }
+
+.strength-meter-animate[style*="60"] {
+  background-color: #ea7400; }
+
+.strength-meter-animate[style*="60"] + .strength-meter-divider + .strength-meter-content:after {
+  content: "Fair"; }
+
+.strength-meter-animate[style*="80"] {
+  background-color: #007a3e; }
+
+.strength-meter-animate[style*="80"] + .strength-meter-divider + .strength-meter-content:after {
+  content: "Good"; }
+
+.strength-meter-animate[style*="100"] {
+  background-color: #007a3e; }
+
+.strength-meter-animate[style*="100"] + .strength-meter-divider + .strength-meter-content:after {
+  content: "Excellent"; }
+
+.strength-meter-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  overflow: hidden; }
+
+.strength-meter-divider span {
+  background: transparent;
+  display: block;
+  flex-grow: 1;
+  border-right: solid 1px #fff; }
+
+.strength-meter-divider span:first-child {
+  border-radius: 2px 0 0 2px; }
+
+.strength-meter-divider span + .strength-meter-divider span {
+  border-radius: 0; }
+
+.strength-meter-divider span:last-child {
+  border-radius: 0 2px 2px 0;
+  border-right: 0; }
+
+.strength-meter-content {
+  font-size: 14px;
+  line-height: 1;
+  padding-top: 7px;
+  position: absolute; }
+
+.strength-meter-content:before {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  content: "Password strength: "; }
+
+.strength-meter-content:after {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.strength-meter-container {
+  height: 26px;
+  min-width: 290px;
+  max-width: 450px; }
+
+.strength-meter-container .strength-meter-gauge {
+  border-radius: 2px;
+  background-color: #cccccc;
+  box-shadow: 0 1px 1px -1px #333 inset;
+  height: 5px;
+  display: block;
+  overflow: hidden;
+  position: relative; }
+
+.strength-meter-container > .strength-meter-gauge > .strength-meter-gauge-fill {
+  height: 100%;
+  box-shadow: 0 1px 1px -1px #999 inset;
+  display: block;
+  text-indent: -9999px;
+  width: 0%; }
+
+.strength-meter-container > .strength-meter-gauge > .strength-meter-gauge-fill.strength-meter-animate {
+  transition: width 0ms ease-out, background-color 0ms ease-in; }
+
+.strength-meter-container > .strength-meter-gauge > .strength-meter-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex; }
+
+.strength-meter-container > .strength-meter-gauge > .strength-meter-divider span {
+  background: transparent;
+  display: block;
+  flex-grow: 1;
+  border-right: solid 1px #fff; }
+
+.strength-meter-container > .strength-meter-gauge > .strength-meter-divider span:last-child {
+  border-right: 0; }
+
+.strength-meter-container > .strength-meter-content {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 14px;
+  line-height: 1;
+  padding-top: 7px; }
+
+.strength-meter-container > .strength-meter-content:before {
+  content: none; }
+
+.strength-meter-container > .strength-meter-content > .strength-meter-content-state {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial; }
+
+.btn-switch-label {
+  display: flex;
+  align-items: center; }
+  .btn-switch-label:focus .btn-switch {
+    outline: 1px dotted #666;
+    outline-offset: 5px; }
+  .btn-switch-label input:focus .btn-switch {
+    outline: 1px dotted #666;
+    outline-offset: 5px; }
+  .btn-switch-label > span {
+    flex: 1; }
+
+.btn-switch {
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 16px;
+  box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.15) inset, 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+  height: 32px;
+  overflow: hidden;
+  position: relative;
+  width: 80px;
+  user-select: none; }
+  .btn-switch input[type="checkbox"] {
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transition: none; }
+    .btn-switch input[type="checkbox"] + .switch-overlay .btn-slider-on .activo {
+      font: 0px/0 "Omnes-ECOMP-W02"; }
+    .btn-switch input[type="checkbox"] + .switch-overlay .btn-slider-on + .btn + .btn-slider-off .inactivo {
+      font: 0px/0 "Omnes-ECOMP-W02"; }
+  .btn-switch input:checked + .switch-overlay {
+    left: 0;
+    transition: all .3s linear .0s; }
+    .btn-switch input:checked + .switch-overlay .switch-handle {
+      background-color: #007a3e;
+      background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);
+      transition: background-color 0.3s linear 0s;
+      border: 1px solid transparent; }
+  .btn-switch input + .switch-overlay {
+    left: -48px;
+    transition: all .3s linear .0s; }
+    .btn-switch input + .switch-overlay .switch-handle {
+      background-color: #f2f2f2;
+      background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+      transition: background-color 0.3s linear 0s;
+      border: 1px solid #d2d2d2; }
+  .btn-switch input[disabled] + .switch-overlay {
+    left: 0;
+    width: 100% !important;
+    background-color: #d2d2d2;
+    color: #959595;
+    cursor: not-allowed !important; }
+    .btn-switch input[disabled] + .switch-overlay .btn-slider-on {
+      display: none; }
+    .btn-switch input[disabled] + .switch-overlay .activo {
+      display: none; }
+    .btn-switch input[disabled] + .switch-overlay .switch-handle {
+      display: none; }
+    .btn-switch input[disabled] + .switch-overlay .btn-slider-off {
+      left: 0;
+      text-align: center;
+      padding: 0; }
+  .btn-switch input[disabled]:checked + .switch-overlay {
+    left: 0;
+    width: 100% !important;
+    background-color: #fff; }
+    .btn-switch input[disabled]:checked + .switch-overlay .btn-slider-off {
+      display: none; }
+      .btn-switch input[disabled]:checked + .switch-overlay .btn-slider-off + .inactivo {
+        display: none; }
+    .btn-switch input[disabled]:checked + .switch-overlay .switch-handle {
+      display: none; }
+    .btn-switch input[disabled]:checked + .switch-overlay .btn-slider-on {
+      display: block;
+      text-align: center;
+      padding: 0;
+      color: #007a3e !important;
+      font-weight: bold; }
+    .btn-switch input[disabled]:checked + .switch-overlay .activo {
+      display: block;
+      text-align: center;
+      padding: 0;
+      color: #007a3e !important;
+      font-weight: bold; }
+  .btn-switch input[disabled]:checked + .btn-slider-on {
+    display: block; }
+  .btn-switch input[disabled] + .btn-slider-on + .switch-handle {
+    width: 100%;
+    margin: 0; }
+    .btn-switch input[disabled] + .btn-slider-on + .switch-handle + .btn-slider-off {
+      display: block; }
+  .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on {
+    display: none; }
+    .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on .activo {
+      border: medium none;
+      color: #666;
+      font: 16px/32px "Omnes-ECOMP-W02";
+      height: auto;
+      margin: 0 auto;
+      width: auto; }
+      .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on .activo:before {
+        display: none; }
+    .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off {
+      display: block;
+      padding: 0;
+      text-align: center;
+      color: #333333; }
+      .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off .inactivo {
+        border: medium none;
+        color: #666;
+        font: 16px/32px "Omnes-ECOMP-W02";
+        height: auto;
+        margin: 0 auto;
+        width: auto; }
+        .btn-switch input[type="checkbox"][disabled] + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off .inactivo:before {
+          display: none; }
+  .btn-switch input[type="checkbox"][disabled]:checked + .switch-overlay .btn-slider-on {
+    display: block;
+    padding: 0;
+    text-align: center;
+    color: #007a3e; }
+    .btn-switch input[type="checkbox"][disabled]:checked + .switch-overlay .btn-slider-on + .switch-handle + .btn-slider-off {
+      display: none; }
+  .btn-switch input[type="checkbox"][disabled]:checked + .switch-overlay .activo {
+    color: #007a3e;
+    font-weight: bold; }
+
+.switch-overlay {
+  border-radius: 16px;
+  color: black !important;
+  font-size: 1.6rem;
+  height: 32px;
+  left: 0;
+  position: absolute;
+  top: -1px;
+  width: 126px;
+  overflow: hidden; }
+
+.btn-slider-on {
+  left: -1px;
+  text-align: left;
+  padding-left: 12px;
+  display: inline-block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  height: 32px;
+  line-height: 32px;
+  position: absolute;
+  top: 1px;
+  width: 80px; }
+
+.btn-slider-off {
+  display: inline-block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  height: 32px;
+  line-height: 32px;
+  position: absolute;
+  top: 1px;
+  width: 80px;
+  right: 1px;
+  text-align: right;
+  padding-right: 11px; }
+
+.switch-handle {
+  border-radius: 50%;
+  display: inline-block;
+  height: 26px;
+  left: 50px;
+  position: absolute;
+  top: 3px;
+  width: 26px; }
+
+.activo {
+  display: block;
+  font-size: 0.1px;
+  line-height: 40px;
+  overflow: hidden; }
+  .activo:before {
+    background-image: none;
+    border-left: 3px solid #007a3e;
+    content: " ";
+    height: 18px;
+    left: 22px;
+    margin: 2px auto;
+    position: absolute;
+    top: 5px;
+    width: 0; }
+
+.inactivo {
+  font-size: 0.1px;
+  line-height: 40px; }
+  .inactivo:before {
+    background-image: none;
+    border: 3px solid #959595;
+    border-radius: 100%;
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 4px;
+    right: 3px;
+    height: 16px;
+    width: 16px; }
+
+table {
+  max-width: 100%;
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin-bottom: 20px; }
+
+table caption {
+  text-align: left; }
+
+table thead th {
+  vertical-align: bottom; }
+
+table th,
+table td {
+  padding: 19px 20px;
+  line-height: 1;
+  font-size: 1.4rem;
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word; }
+
+table th {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 1.6rem;
+  font-weight: normal;
+  color: #333333;
+  padding: 13px 20px; }
+
+table tbody td {
+  border-left: 1px solid #d2d2d2;
+  border-top: 1px solid #d2d2d2; }
+
+table tbody td:first-child {
+  border-left: none; }
+
+.tiny-accordion.iconleft.accordion-table-layout .toggle-header,
+.tiny-accordion.iconleft.accordion-table-layout .toggle-header + .accordion-content,
+.tiny-accordion.iconleft.accordion-table-layout .inactive-toggle-header {
+  padding: 0 0 0 50px; }
+
+.faux-table-cell,
+.inactive-toggle-header .faux-table-cell {
+  display: table-cell;
+  width: 100%;
+  padding: 13px 0 10px 0;
+  font-size: 16px;
+  color: #333333; }
+
+.accordion-content .faux-table-cell {
+  display: table-cell;
+  width: 100%;
+  padding: 0 0 10px 0; }
+
+.faux-table-cell:last-child {
+  text-align: right;
+  min-width: 100px;
+  max-width: 150px;
+  width: 1%;
+  background-color: #f2f2f2;
+  color: #333333;
+  font-size: 14px;
+  border-left: 1px solid #d2d2d2;
+  padding: 0 20px 0 10px; }
+
+.tiny-accordion.iconleft.accordion-table-layout .toggle-header.opened .hide-when-expanded {
+  opacity: 1; }
+
+.tiny-accordion.iconleft.accordion-table-layout .toggle-header.opened .hide-when-expanded {
+  opacity: 0;
+  transition: opacity .3s linear .2s; }
+
+@media (max-width: 767px) {
+  table th,
+  table td {
+    padding: 19px 10px; }
+  table th:first-child,
+  table td:first-child {
+    padding: 19px 15px; } }
+
+.data-row-list ul > li {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important; }
+
+table {
+  border-bottom: 1px solid #d2d2d2; }
+
+table th,
+table td {
+  padding: 15px 15px 10px; }
+
+.data-row .col-1 {
+  white-space: nowrap;
+  padding: 15px 15px 0 15px;
+  position: relative;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.4rem;
+  border-top: 1px solid #d2d2d2; }
+
+.data-row.has-button .col-1 {
+  padding: 0; }
+
+.complex-table .data-row .col-1 {
+  color: #0568ae;
+  cursor: pointer; }
+
+.data-row.opened {
+  box-shadow: 0 -2px 0 0 #d2d2d2; }
+
+.data-row.opened td,
+.data-row.opened th {
+  border-left: 1px solid transparent;
+  border-bottom: 1px solid transparent; }
+
+.data-row.opened + .data-row-list {
+  box-shadow: 0 1px 0 0 #d2d2d2; }
+
+.data-row.opened + .data-row-list > td {
+  padding-top: 0; }
+
+.data-row.opened + .data-row-list + .data-row.opened {
+  box-shadow: 0 -1px 0 0 #d2d2d2; }
+
+.data-row button {
+  background-color: transparent;
+  border: medium none;
+  border-radius: 0;
+  color: #0568ae;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.4rem;
+  left: 0;
+  margin: 0;
+  padding: 12px 15px 7px;
+  position: relative;
+  text-align: left;
+  top: 0;
+  vertical-align: middle; }
+
+.data-row button:focus {
+  outline: 1px dotted black; }
+
+.data-row .col-1 i {
+  top: -1px;
+  margin-right: 10px;
+  display: inline-block !important; }
+
+.data-row-list th:first-child {
+  background-color: inherit !important;
+  border-top: none;
+  padding: 0 15px 15px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.4rem; }
+
+.data-row-list ul {
+  margin: 0 0 0 30px; }
+
+.data-row-list ul > li:before {
+  display: none; }
+
+.data-row-list ul > li {
+  /* background-image in tables.less */
+  background-position: left 13px;
+  background-repeat: repeat-x;
+  background-size: 4px 1px;
+  display: table;
+  padding-left: 0;
+  width: 100%; }
+
+.data-row-list li div {
+  display: table-cell;
+  background-color: white;
+  float: left;
+  text-align: left;
+  padding-left: 0;
+  padding-right: 7px; }
+
+.data-row-list li div + div {
+  float: right;
+  text-align: right;
+  padding-right: 0;
+  padding-left: 7px; }
+
+.complex-table td:nth-child(1),
+.complex-table td:nth-child(2),
+.complex-table td:nth-child(3),
+.complex-table td:nth-child(4),
+.complex-table td:nth-child(5),
+.complex-table td:nth-child(6),
+.complex-table td:nth-child(7),
+.complex-table td:nth-child(8),
+.complex-table td:nth-child(9) {
+  white-space: nowrap; }
+
+th:nth-child(8) {
+  word-wrap: break-word;
+  word-spacing: 0; }
+
+.align-col-right {
+  text-align: right; }
+
+.complex-table th:not(:first-child),
+.complex-table td:not(:first-child) {
+  text-align: right; }
+
+.striped tbody > tr td {
+  background-color: transparent !important; }
+
+.striped tbody > tr.data-row.odd,
+.striped tbody > tr.data-row.odd + .data-row-list,
+.striped tbody > tr.data-row.odd + .data-row-list li div {
+  background-color: #f2f2f2 !important; }
+
+.striped tbody > tr:not('.data-row'):nth-child(even) {
+  background-color: #f2f2f2; }
+
+.b2b-table-div .selectWrap {
+  width: 290px;
+  position: relative;
+  left: 10px;
+  display: inline-table;
+  margin-bottom: 0px; }
+
+.b2b-external-sort-div {
+  float: right;
+  padding-bottom: 25px; }
+
+.b2b-external-sort-div .sortButton {
+  font-size: 36px;
+  border: 1px solid #ccc;
+  background: #FFF;
+  border-radius: 6px; }
+
+.b2b-external-sort-label {
+  padding-bottom: 10px; }
+
+.b2b-external-sort-div a:hover {
+  cursor: pointer; }
+
+.b2b-external-sort-div a:hover, .b2b-external-sort-div a:focus {
+  text-decoration: none; }
+
+.b2b-external-sort-label label {
+  position: relative;
+  left: 10px; }
+
+.tablesorter-default .tablesorter-header.sorter-false .tablesorter-header-inner {
+  background: 0 0;
+  cursor: default; }
+
+.tablesorter-default .tablesorter-header .tablesorter-header-inner {
+  /*  background-image: url(images/tables/upanddown.png);*/
+  background-position: center right;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  white-space: normal;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  /*  padding: 0 24px 0 0;*/ }
+
+.tablesorter-default .tablesorter-header.sorter-false .tablesorter-header-inner {
+  padding: 0; }
+
+.tablesorter-default .tablesorter-header.tablesort-sortable .tablesorter-header-inner span {
+  margin-right: 24px;
+  display: inline-block; }
+
+/*
+.tablesorter-default thead .headerSortUp .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerAsc .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerSortUp .tablesorter-header-inner {
+  background-image: url(images/tables/up.png);
+}
+
+.tablesorter-default thead .headerSortDown .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerDesc .tablesorter-header-inner,.tablesorter-default thead .tablesorter-headerSortDown .tablesorter-header-inner {
+  background-image: url(images/tables/down.png);
+}
+*/
+.tablesorter-default thead .headerSortUp .tablesorter-header-inner,
+.tablesorter-default thead .tablesorter-headerAsc .tablesorter-header-inner,
+.tablesorter-default thead .tablesorter-headerSortUp .tablesorter-header-inner,
+.tablesorter-default thead .headerSortDown .tablesorter-header-inner,
+.tablesorter-default thead .tablesorter-headerDesc .tablesorter-header-inner,
+.tablesorter-default thead .tablesorter-headerSortDown .tablesorter-header-inner {
+  padding-right: 0;
+  line-height: 16px; }
+
+.tablesorter-default thead .headerSortUp .tablesorter-header-inner:after,
+.tablesorter-default thead .tablesorter-headerAsc .tablesorter-header-inner:after,
+.tablesorter-default thead .tablesorter-headerSortUp .tablesorter-header-inner:after {
+  font-family: 'icoPrimary' !important;
+  speak: none;
+  font-style: normal;
+  font-size: 24px;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  content: "\ea3c";
+  /*    position: relative;*/
+  position: absolute;
+  text-decoration: inherit;
+  display: inline-block;
+  transform: rotate(180deg);
+  margin-left: -22px;
+  margin-top: 2px; }
+
+.tablesorter-default thead .headerSortDown .tablesorter-header-inner:after,
+.tablesorter-default thead .tablesorter-headerDesc .tablesorter-header-inner:after,
+.tablesorter-default thead .tablesorter-headerSortDown .tablesorter-header-inner:after {
+  font-family: 'icoPrimary' !important;
+  speak: none;
+  font-style: normal;
+  font-size: 24px;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  content: "\ea3c";
+  /*    position: relative;*/
+  position: absolute;
+  text-decoration: inherit;
+  display: inline-block;
+  margin-left: -22px;
+  margin-top: 2px; }
+
+.tablesorter-search-highlight {
+  font-weight: 700; }
+
+.tablesorter-headerRow th:focus {
+  outline: thin dotted #666;
+  outline-offset: -1px; }
+
+.b2b-table-message {
+  font-family: "Omnes-ECOMP-W02", Arial; }
+  .b2b-table-message .b2b-magnify-glass {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%20enable-background%3D%22new%200%200%2036%2036%22%3E%3Cpath%20d%3D%22M27.847%208.26c-1.805-1.803-4.202-2.795-6.751-2.795-2.548%200-4.945.993-6.749%202.796-1.803%201.803-2.796%204.2-2.796%206.75%200%201.879.543%203.681%201.576%205.242l-7.059%207.059c-.357.356-.554.831-.554%201.336-.001.505.196.98.554%201.337.357.356.832.552%201.336.552.503%200%20.977-.196%201.336-.553l7.047-7.048c1.576%201.062%203.402%201.622%205.309%201.622%202.55%200%204.948-.993%206.751-2.796%201.803-1.804%202.796-4.201%202.796-6.751%200-2.549-.993-4.947-2.796-6.751zm-6.761.96c3.186%200%205.778%202.592%205.778%205.778%200%203.186-2.592%205.778-5.778%205.778-3.186%200-5.778-2.592-5.778-5.778%200-3.185%202.592-5.778%205.778-5.778z%22%20fill%3D%22%23767676%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 50px; }
+  .b2b-table-message .b2b-alert {
+    font-size: 50px; }
+  .b2b-table-message .b2b-loading-dots {
+    font-size: 50px;
+    margin-bottom: 20px; }
+  .b2b-table-message .b2b-message {
+    text-align: center;
+    padding-bottom: 45px;
+    padding-top: 40px;
+    border-style: solid;
+    border-width: 1px;
+    border-top: none;
+    padding-bottom: 45px;
+    border-color: #d2d2d2;
+    width: 100%;
+    min-height: 220px; }
+  .b2b-table-message .b2b-error-title {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #444444;
+    line-height: 26px;
+    margin-top: 10px; }
+  .b2b-table-message .b2b-message-title {
+    color: #444;
+    font-family: "Omnes-ECOMP-W02", Arial; }
+
+.b2b-table-scrollbar {
+  border: 1px solid;
+  width: 651px; }
+  .b2b-table-scrollbar .b2b-table-inner-container {
+    width: 650px;
+    padding-left: 150px;
+    overflow-x: scroll; }
+  .b2b-table-scrollbar th:first-child {
+    background-color: #FFFFFF; }
+  .b2b-table-scrollbar td:first-child {
+    background-color: #FFFFFF;
+    border-top: 1px solid #cccccc;
+    border-right: 1px solid #cccccc;
+    margin-top: -0.5px; }
+  .b2b-table-scrollbar tr {
+    th: nth-child(2), td; }
+    .b2b-table-scrollbar tr :nth-child(2) {
+      border-left: none; }
+  .b2b-table-scrollbar tr:last-child > td:first-child {
+    border-bottom: 1px solid #cccccc; }
+
+.b2b-scrollbar-arrow-left {
+  float: left;
+  margin: 10px; }
+
+.b2b-scrollbar-arrow-right {
+  float: right;
+  clear: right;
+  margin: 10px; }
+  .b2b-scrollbar-arrow-right.btn-arrow .btn {
+    margin-right: 0; }
+
+.b2b-table-scrollbar ::-webkit-scrollbar {
+  height: 10px; }
+
+.b2b-table-scrollbar ::-webkit-scrollbar-thumb {
+  background: #666666;
+  border-radius: 5px; }
+
+.tabs {
+  margin-left: 0;
+  margin-bottom: 20px;
+  list-style: none; }
+
+.tabs > li > a {
+  display: block; }
+
+.tabs > li > a:hover,
+.tabs > li > a:focus {
+  text-decoration: none;
+  background-color: #d2d2d2; }
+
+.tabs > .pull-right {
+  float: right; }
+
+.tabs:before,
+.tabs:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.tabs:after {
+  clear: both; }
+
+.tabs > li {
+  float: left; }
+
+.tabs > li > a {
+  padding-right: 20px;
+  padding-left: 20px;
+  margin-right: 3px;
+  line-height: 16px; }
+
+.tabs {
+  margin: 0; }
+
+.tabs > li {
+  margin-bottom: -1px; }
+
+.tabs > li:first-child {
+  margin-left: 20px; }
+
+.tabs > li > a {
+  padding: 12px 20px;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px 6px 0 0;
+  background-color: #f2f2f2;
+  color: #5a5a5a;
+  border-color: #d2d2d2; }
+
+.tabs > li > a {
+  margin-right: 6px; }
+
+.tabs > li > a,
+.tabs > li > a:hover,
+.tabs > li > a:focus {
+  background-image: none;
+  background-color: #ffffff;
+  color: #5a5a5a;
+  border-color: #d2d2d2;
+  border-bottom: 1px solid transparent;
+  cursor: pointer; }
+
+.tabs.tabs-justified,
+.tabs.promo-tabs {
+  width: 100%;
+  border-bottom: 0;
+  margin-bottom: -1px; }
+
+.tabs.tabs-justified > li,
+.tabs.promo-tabs > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+  border-left: 1px solid #d2d2d2; }
+
+.tabs.tabs-justified > li.active,
+.tabs.promo-tabs > li.active {
+  position: relative;
+  z-index: 1000; }
+
+.tabs.tabs-justified > li > a {
+  padding-right: 5px;
+  padding-left: 5px; }
+
+.tabs.tabs-justified > li > a,
+.tabs.promo-tabs > li > a {
+  text-align: center; }
+
+.tabs.promo-tabs > li > a {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  border: none;
+  color: #0568ae;
+  font-size: 1.2rem;
+  text-align: center;
+  padding: 6px 10px 10px;
+  border-top: 4px solid #e6e6e6;
+  filter: none;
+  border-bottom: 1px solid #d2d2d2;
+  background-color: #f9f9f9; }
+
+.tabs > li:last-child > a {
+  margin-right: 0; }
+
+.tabs.promo-tabs > li.active > a {
+  color: #333333;
+  border-top: 4px solid #ea7400;
+  border-bottom-color: white;
+  background-color: #fff !important;
+  filter: none;
+  cursor: default; }
+
+.tabs.promo-tabs > li:first-child {
+  border-left: none; }
+
+.tabs.promo-tabs > li > a img {
+  max-width: inherit;
+  max-height: 39px;
+  margin: 0 auto 5px auto;
+  display: block; }
+
+.tabbable:before,
+.tabbable:after {
+  display: table;
+  content: "";
+  line-height: 0; }
+
+.tabbable:after {
+  clear: both; }
+
+.tab-content {
+  overflow: auto;
+  border: 1px solid #e6e6e6; }
+
+.tabs.promo-tabs + .tab-content {
+  border: none;
+  border-bottom: 1px solid #e6e6e6; }
+
+.tab-content > .tab-pane {
+  padding: 10px 15px; }
+
+.tab-content.noborder {
+  border: none; }
+
+.tab-content.noborder > .tab-pane {
+  padding: 0; }
+
+.tab-content > .tab-pane {
+  display: none; }
+
+.tab-content > .active {
+  display: block; }
+
+.tabs.promo-tabs > li > a {
+  font-size: 2.0rem;
+  height: 70px;
+  padding: 20px 20px 24px;
+  background-color: #FFFFFF;
+  border-top: 5px solid #FFFFFF;
+  white-space: nowrap; }
+
+.tabs.promo-tabs > li.active > a {
+  border-top: 5px solid #0574ac; }
+
+.tabs.promo-tabs > li > a:hover {
+  color: #333333; }
+
+.tabs.promo-tabs > li {
+  width: auto; }
+
+.tabs > li[disabled="disabled"] > a:hover {
+  cursor: not-allowed; }
+
+.b2b-tags {
+  background-color: #f2f2f2;
+  -webkit-transition: all .3s ease-out;
+  -moz-transition: all .3s ease-out;
+  transition: all .3s ease-out;
+  margin: 3px 5px 3px 0;
+  padding: 2px 15px;
+  border-radius: 6px;
+  border: 1px solid #c9c9c9;
+  display: inline-block; }
+  .b2b-tags .tags__item {
+    font-size: 14px;
+    vertical-align: baseline;
+    zoom: 1;
+    color: #333; }
+    .b2b-tags .tags__item i {
+      color: #0574ac;
+      font-size: 14px;
+      font-weight: bold;
+      margin-left: 10px; }
+      .b2b-tags .tags__item i:hover {
+        cursor: pointer; }
+    .b2b-tags .tags__item i:focus {
+      outline: thin dotted #666; }
+    .b2b-tags .tags__item:last-child {
+      margin-right: 0; }
+    .b2b-tags .tags__item:hover {
+      text-decoration: none; }
+    .b2b-tags .tags__item:focus {
+      outline: 1px dotted #666; }
+
+.tooltip-size-control {
+  display: block; }
+
+.tooltip {
+  display: inline-block;
+  height: 20px;
+  vertical-align: middle;
+  margin: 1px 0 0 7px; }
+
+p .tooltip {
+  margin: -3px 7px 0 0; }
+
+label .tooltip {
+  margin: 1px 0 0 7px; }
+
+.tooltip .icon-primary-tooltip {
+  background: none;
+  border: none;
+  display: inline-block;
+  font-size: 20px;
+  height: 20px;
+  margin: 0;
+  position: relative;
+  width: 20px; }
+
+.tooltip .icon-primary-tooltip:before {
+  top: 0; }
+
+.tooltip .icon-primary-tooltip:focus {
+  text-decoration: none;
+  outline: 1px dotted black; }
+
+.tooltip.active .icon-primary-tooltip:focus {
+  outline: none; }
+
+.tooltip .arrow {
+  display: none;
+  border-color: transparent;
+  border-style: solid;
+  background-color: #0568ae;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transform: rotate(45deg); }
+
+.tooltip.active .icon-primary-tooltip[data-placement="top"] .arrow {
+  display: block;
+  bottom: 32px;
+  top: auto;
+  border-width: 0 1px 1px 0; }
+
+.tooltip.active .icon-primary-tooltip[data-placement="bottom"] .arrow {
+  border-width: 1px 0 0 1px;
+  display: block;
+  bottom: -33px;
+  top: auto; }
+
+.tooltip.active .arrow {
+  opacity: 1; }
+
+.tooltip .closingtooltip {
+  display: block; }
+
+.tooltip.active .closingtooltip {
+  display: none; }
+
+.tooltip-wrapper {
+  position: absolute;
+  margin-top: 20px;
+  left: 15px;
+  right: 15px;
+  display: none;
+  opacity: 0;
+  z-index: 1010;
+  text-align: left; }
+
+.helpertext {
+  background-color: #0568ae;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #fff;
+  display: none;
+  margin: 0;
+  padding: 25px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  top: 0;
+  z-index: 1009; }
+
+.tooltip .helpertext {
+  position: absolute; }
+
+.tooltip.active .icon-primary-tooltip[data-placement="bottom"] + .tooltip-wrapper .helpertext {
+  bottom: inherit;
+  top: 19px; }
+
+.tooltip.active .icon-primary-tooltip[data-placement="top"] + .tooltip-wrapper .helpertext {
+  top: inherit;
+  bottom: 38px; }
+
+.tooltip.active .tooltip-wrapper {
+  opacity: 1;
+  display: block;
+  margin-top: 0; }
+
+.tooltip.active .tooltip-wrapper .helpertext {
+  display: block; }
+
+.tooltip-onclick .btn.icon-primary-tooltip {
+  border: medium none;
+  box-shadow: none;
+  color: #0568ae;
+  font-size: 20px;
+  height: 34px;
+  line-height: 36px;
+  margin: 0;
+  min-width: 50px;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0; }
+
+.tooltip-onclick .icon-primary-tooltip:before {
+  display: inline;
+  position: relative; }
+
+.tooltip-onclick textarea + .reset-field + .icon-primary-tooltip {
+  top: 4px;
+  right: 5px;
+  min-width: 40px; }
+
+.tooltip-onclick.active .helpertext:before,
+.tooltip-onfocus.active .helpertext:before {
+  background-color: #0568ae;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px 1px 0 0;
+  content: "";
+  display: block;
+  height: 15px;
+  left: 17px;
+  margin: 0;
+  position: absolute;
+  top: -7px;
+  transform: rotate(-45deg);
+  width: 15px; }
+
+.tooltip-onclick.active .helpertext {
+  display: block;
+  opacity: 1;
+  margin: 14px 0 0; }
+
+.tooltip-onclick.active .helpertext:before {
+  left: inherit;
+  right: 18px; }
+
+.tooltip-onclick .reset-field {
+  right: 37px; }
+
+.tooltip-onclick .reset-field:before {
+  position: relative;
+  top: -1px; }
+
+.tooltip-onfocus.active .helpertext {
+  display: block;
+  margin: 14px 0 10px 0; }
+
+.popover-title {
+  display: block;
+  font-size: 14px;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-weight: bold;
+  margin-bottom: 8px;
+  white-space: normal; }
+
+.popover-content {
+  display: block;
+  font-size: 12px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  line-height: 1.5rem;
+  white-space: normal; }
+
+.popover-content span,
+.popover-content p {
+  line-height: 1.5rem; }
+
+.popover-content p:last-child {
+  margin-bottom: 0; }
+
+.tooltip .tooltip-element {
+  position: relative; }
+
+.tooltip .icon-primary-tooltip:hover {
+  text-decoration: none; }
+
+.tooltip.active .tooltip-element[data-placement="top"] .arrow {
+  display: block;
+  bottom: 32px;
+  top: auto; }
+
+.tooltip.active .tooltip-element[data-placement="bottom"] .arrow {
+  display: block;
+  border-color: transparent transparent #0574ac;
+  bottom: -33px;
+  top: auto; }
+
+.tooltip.active .tooltip-element[data-placement="bottom"] + .tooltip-wrapper .helpertext {
+  bottom: inherit;
+  top: 19px; }
+
+.tooltip.active .tooltip-element[data-placement="top"] + .tooltip-wrapper .helpertext {
+  top: inherit;
+  bottom: 38px; }
+
+.b2b-tree {
+  padding: 0 10px 0 10px;
+  width: 320px; }
+  .b2b-tree ul {
+    list-style: none;
+    list-style-type: none; }
+  .b2b-tree a {
+    display: block;
+    padding: 0 0 5px 30px;
+    line-height: 22px;
+    margin-left: -10px;
+    font-size: 1.4rem;
+    outline-offset: -1px; }
+  .b2b-tree li:focus {
+    outline: none; }
+    .b2b-tree li:focus > a {
+      outline: thin dotted #666;
+      outline-offset: -1px; }
+  .b2b-tree ul li {
+    border-left: 1px solid #ccc; }
+    .b2b-tree ul li.bg > a {
+      color: #333;
+      background-image: url("../style/images/treebg.png"); }
+    .b2b-tree ul li .b2b-tree-tooltip {
+      display: none;
+      position: absolute;
+      top: -25px;
+      left: 100%;
+      white-space: nowrap;
+      margin-left: 10px;
+      z-index: 1010;
+      font-family: "Omnes-ECOMP-W02", Arial;
+      font-size: 12px; }
+    .b2b-tree ul li .b2b-tree-tooltip-content {
+      background-color: #0568ae;
+      margin-left: 9px;
+      border-radius: 6px;
+      color: #fff;
+      padding: 25px; }
+    .b2b-tree ul li .b2b-tree-arrow-left {
+      width: 0;
+      height: 0;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-right: 10px solid #0568ae;
+      position: absolute;
+      top: 25px; }
+    .b2b-tree ul li.activeTooltip > a .b2b-tree-tooltip {
+      display: block; }
+  .b2b-tree ul ul {
+    padding: 0 0 0 20px; }
+  .b2b-tree ul > li {
+    position: relative;
+    line-height: 18px; }
+  .b2b-tree a > span.b2b-tree-node-icon {
+    background-color: #FFF;
+    display: inline;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    left: -11px;
+    top: 0;
+    line-height: 14px;
+    width: 11px; }
+    .b2b-tree a > span.b2b-tree-node-icon > i {
+      font-size: 20px; }
+  .b2b-tree a:only-child {
+    color: #0574ac; }
+    .b2b-tree a:only-child > span.b2b-tree-node-icon {
+      left: -11px;
+      border-radius: 50%;
+      line-height: 7px;
+      top: 0; }
+      .b2b-tree a:only-child > span.b2b-tree-node-icon > i {
+        background-color: inherit;
+        background: #fff; }
+  .b2b-tree a > span.b2b-tree-node-icon > i.icon-primary-circle {
+    background-color: inherit;
+    background: #fff;
+    font-size: 10px; }
+  .b2b-tree a.b2b-locked-node:after {
+    content: "\ec58";
+    float: right;
+    font-family: 'icoSecurityalerts' !important; }
+  .b2b-tree a:hover .b2b-locked-node:after {
+    text-decoration: none; }
+  .b2b-tree ul li:first-child > a:only-child > span.b2b-tree-node-icon {
+    left: -11px;
+    border-radius: 50%;
+    line-height: 12px; }
+  .b2b-tree ul li:last-child > a:only-child > span.b2b-tree-node-icon {
+    height: 27px;
+    background-color: #fff; }
+  .b2b-tree li a + ul {
+    height: 0;
+    overflow: hidden; }
+  .b2b-tree li a.active + ul {
+    height: auto;
+    overflow: visible; }
+  .b2b-tree li a.grp {
+    font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+    .b2b-tree li a.grp.active {
+      color: #333; }
+  .b2b-tree span.end {
+    left: -6px !important;
+    top: 5px !important; }
+  .b2b-tree span.first-link {
+    width: 3px !important;
+    height: 15px !important;
+    top: 0px !important;
+    left: -2px !important;
+    background: #fff; }
+
+.b2b-tree-checkbox {
+  padding: 0 10px 0 10px;
+  width: 320px; }
+  .b2b-tree-checkbox ul {
+    list-style: none;
+    list-style-type: none; }
+  .b2b-tree-checkbox a {
+    display: block;
+    padding: 0 0 5px 30px;
+    line-height: 22px;
+    margin-left: -10px;
+    font-size: 14px;
+    outline-offset: -1px; }
+  .b2b-tree-checkbox li:focus {
+    outline: none; }
+    .b2b-tree-checkbox li:focus > a {
+      outline: thin dotted #666;
+      outline-offset: -1px; }
+  .b2b-tree-checkbox ul li {
+    border-left: 1px solid #ccc; }
+  .b2b-tree-checkbox ul ul {
+    padding: 0 0 0 20px; }
+  .b2b-tree-checkbox ul > li {
+    position: relative;
+    line-height: 18px; }
+  .b2b-tree-checkbox a > span.nodeIcon {
+    background-color: #FFF;
+    display: inline;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    left: -11px;
+    top: 0;
+    line-height: 14px;
+    width: 11px; }
+    .b2b-tree-checkbox a > span.nodeIcon > i {
+      font-size: 20px; }
+    .b2b-tree-checkbox a > span.nodeIcon.end {
+      margin-top: 10px; }
+  .b2b-tree-checkbox a:only-child {
+    color: #0574ac; }
+    .b2b-tree-checkbox a:only-child > span.nodeIcon {
+      left: -11px;
+      border-radius: 50%;
+      line-height: 7px;
+      top: 0; }
+      .b2b-tree-checkbox a:only-child > span.nodeIcon > i {
+        background-color: inherit;
+        background: #fff; }
+  .b2b-tree-checkbox a > span.nodeIcon > i.icon-primary-circle {
+    background-color: inherit;
+    background: #fff;
+    font-size: 10px; }
+  .b2b-tree-checkbox ul li:first-child > a:only-child > span {
+    left: -11px;
+    border-radius: 50%;
+    line-height: 12px;
+    top: 0px; }
+  .b2b-tree-checkbox ul li:first-child > a:only-child > span.end {
+    margin-top: 0px; }
+  .b2b-tree-checkbox ul li:first-child > a:only-child > span i.icon-primary-circle {
+    top: 8px; }
+  .b2b-tree-checkbox ul li:last-child > a:only-child > span {
+    height: 34px;
+    background-color: #fff; }
+  .b2b-tree-checkbox li a + ul {
+    height: 0;
+    overflow: hidden; }
+  .b2b-tree-checkbox li a.active + ul {
+    height: auto; }
+  .b2b-tree-checkbox li a.grp {
+    font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+  .b2b-tree-checkbox span.end {
+    left: -6px !important; }
+  .b2b-tree-checkbox .checkbox {
+    margin-bottom: 0px;
+    margin-top: 2px;
+    font-size: 14px; }
+    .b2b-tree-checkbox .checkbox input:indeterminate + .skin:after {
+      content: "\2014";
+      padding-left: 2px;
+      font-family: inherit !important;
+      line-height: inherit !important; }
+  .b2b-tree-checkbox span.first-link {
+    width: 3px !important;
+    height: 15px !important;
+    top: 0px !important;
+    left: -2px !important;
+    background: #fff; }
+
+.b2b-widget-window {
+  width: 147px;
+  right: 5px;
+  top: 60px;
+  position: absolute;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  border-radius: 8px;
+  z-index: 1000; }
+  .b2b-widget-window li {
+    margin: 15px; }
+
+.b2b-widget-container {
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  position: relative; }
+  .b2b-widget-container .b2b-widget-header {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #333;
+    height: 55px;
+    padding-left: 15px;
+    padding-top: 19px; }
+    .b2b-widget-container .b2b-widget-header .header {
+      font-size: 18px; }
+  .b2b-widget-container .b2b-widget-header-icons {
+    font-size: 16px;
+    color: #0574ac; }
+
+.b2b-widget-header-icons button {
+  border: none;
+  background: transparent;
+  color: #0574ac; }
+  .b2b-widget-header-icons button:focus {
+    outline-style: solid;
+    outline-width: 1px;
+    outline-color: #0574ac; }
+  .b2b-widget-header-icons button:first-child {
+    margin-right: 0px; }
+
+.b2b-widget-container .b2b-widget-content {
+  height: 325px;
+  margin: 0;
+  padding: 20px;
+  position: relative;
+  border-top: 1px solid #ccc; }
+
+.b2b-widget-content .form-row:first-child {
+  margin-top: 0; }
+
+.b2b-widget-header-icons button.icoControls-gear:focus, .b2b-widget-header-icons button.icon-primary-close:focus {
+  outline: thin dotted #666; }
+
+.b2b-widget-header .icon-primary-close:before {
+  content: '-';
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  outline: none; }
+
+.b2b-widget-window .arrow_box {
+  background: #fff;
+  border: 1px solid #ccc; }
+
+.b2b-widget-window.arrow_box:after, .b2b-widget-window.arrow_box:before {
+  bottom: 100%;
+  left: 75%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none; }
+
+.b2b-widget-window.arrow_box:after {
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #fff;
+  border-width: 10px;
+  margin-left: 1px; }
+
+.b2b-widget-window.arrow_box:before {
+  border-color: rgba(204, 204, 204, 0);
+  border-bottom-color: #ccc;
+  border-width: 11px;
+  margin-left: 0px; }
+
+/************************** Overrides for Filters ***************************/
+.filter-container .filter-header h2 {
+  line-height: 1 !important;
+  margin: 0 !important; }
+
+.filter-container .icon-primary-spinner:before {
+  content: none; }
+
+.filter-container .fixed-230-subnav {
+  margin: 10px !important;
+  width: inherit !important; }
+
+.filter-container .unlinked:focus {
+  outline: thin dotted #666 !important; }
+
+.filter-container .unlinked.active {
+  color: inherit !important; }
+
+.filter-container .fixed-230-subnav a > i {
+  background: none; }
+
+.filter-container .fixed-230-subnav ul {
+  margin: 0 0 10px 10px; }
+
+/************************** Overrides for Filters ***************************/
+.row .filter-container {
+  background-color: #fff; }
+
+.filter-header {
+  overflow: hidden;
+  padding: 20px 0;
+  position: relative; }
+
+.filter-header h2 {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 2.4rem;
+  margin-bottom: 0; }
+
+.filter-selected {
+  border-top: 1px solid #ccc;
+  padding-top: 20px; }
+
+.filter-selected > span {
+  font-size: 1.3rem;
+  text-transform: uppercase; }
+
+.filter-selected > a.clear-all-filters {
+  float: right;
+  font-size: 1.4rem; }
+
+.filter-selected > span,
+.filter-selected > a.clear-all-filters {
+  font-family: Omnes-ECOMP-W02-Medium, Arial; }
+
+.filter-selected-group {
+  padding-top: 15px; }
+
+.filter-selected-badge {
+  background-color: #f2f2f2;
+  border-radius: 15px;
+  display: inline-block;
+  font-size: 1.4rem;
+  margin-bottom: 10px;
+  padding: 0 0 0 12px; }
+
+.filter-selected-badge .icoControls-optionsoff {
+  background: transparent none repeat scroll 0 0;
+  border: medium none;
+  font-size: 2.5em;
+  margin: 0;
+  padding: 0; }
+
+.filters .fixed-230-subnav > ng-transclude > div:first-child {
+  border-top: 1px solid #ccc; }
+
+.filters .fixed-230-subnav > ng-transclude > div {
+  border-bottom: 1px solid #ccc; }
+
+.filter-results {
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  flex-wrap: wrap;
+  height: 50px;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+
+.filter-results-sortby > span {
+  text-transform: uppercase; }
+
+.filter-results-view .icon-primary-content-gridguide {
+  font-size: 2em;
+  margin-right: 0; }
+
+.filter-container .fixed-230-subnav > ng-transclude > div > a {
+  font-size: 1.8rem;
+  margin: 0;
+  padding: 15px 20px 15px 0;
+  color: #0574ac !important;
+  cursor: pointer !important;
+  font-family: "Omnes-ECOMP-W02", Arial !important;
+  outline-offset: inherit !important;
+  position: relative;
+  height: auto;
+  width: auto; }
+
+.filter-container .fixed-230-subnav a > i {
+  right: 0;
+  top: 15px; }
+
+.filter-container .fixed-230-subnav .icon-primary-collapsed:before, .filter-container .fixed-230-subnav .icon-primary-expanded:before {
+  float: right; }
+
+.filter-container .fixed-230-subnav ul.collapse {
+  position: inherit;
+  transition: height 0.5s ease;
+  height: 0;
+  overflow: hidden; }
+
+.filter-container .checkbox .icon-primary-spinner {
+  height: 24px;
+  position: absolute;
+  width: 24px; }
+
+.fixed-230-subnav.affix {
+  margin: -28px 0 0; }
+
+#nav-menu .b2b-menu,
+#nav-menu .fixed-230-subnav {
+  margin: 0; }
+
+.b2b-menu > li,
+.fixed-230-subnav > div {
+  border-bottom: 1px solid #ccc;
+  line-height: 4.0rem; }
+
+.b2b-menu > li:first-child,
+.fixed-230-subnav > li:first-child {
+  border-top: 1px solid #ccc; }
+
+.b2b-menu div > a,
+.fixed-230-subnav div > a {
+  color: #0574ac;
+  cursor: pointer;
+  display: block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.4rem;
+  margin: 0;
+  outline-offset: -1px;
+  padding: 0 10px;
+  position: relative; }
+
+.fixed-230-subnav div > a.live {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  color: #666; }
+
+.fixed-230-subnav > ng-transclude > div li > a {
+  display: block;
+  font-size: 1.4rem;
+  line-height: 20px; }
+
+.fixed-230-subnav > ng-transclude > div li > a.active {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  text-decoration: none;
+  color: #666; }
+
+#nav-menu .fixed-230-subnav a > i {
+  top: 10px; }
+
+.fixed-230-subnav > li > a.active > i:after {
+  display: none; }
+
+.b2b-menu ul,
+.fixed-230-subnav ul {
+  margin: 0 0 10px 0; }
+
+.b2b-menu ul div a,
+.fixed-230-subnav ul div a {
+  padding: 0 10px; }
+
+.unlinked {
+  outline: medium none !important;
+  text-decoration: none !important; }
+
+@media (max-width: 1024px) {
+  .filter-container .fixed-230-subnav {
+    margin: 0 20px;
+    width: auto; }
+  .filter-container .fixed-230-subnav > li {
+    margin: 0; }
+  .row .filter-container {
+    display: none;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    transition: all 0.5s ease 0s;
+    width: 285px;
+    z-index: 9999; }
+  .filter-header {
+    padding-left: 20px; }
+  .filter-selected {
+    margin: 0 20px 10px; } }
+
+.b2b-pane-selector-wrapper {
+  width: 100%;
+  display: block;
+  border-top: solid 1px #ccc;
+  border-bottom: solid 1px #ccc; }
+  .b2b-pane-selector-wrapper .side-nav {
+    width: 20% !important;
+    display: inline-block;
+    float: left; }
+  .b2b-pane-selector-wrapper .pane-container {
+    width: 80%;
+    vertical-align: top;
+    margin: 0;
+    padding-top: 30px;
+    border-left: solid 1px #ccc;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    display: none; }
+    .b2b-pane-selector-wrapper .pane-container.active {
+      display: inline-block; }
+    .b2b-pane-selector-wrapper .pane-container .pane-container-top {
+      padding-left: 15px; }
+    .b2b-pane-selector-wrapper .pane-container .panes {
+      display: -webkit-flex;
+      display: flex;
+      border-top: solid 1px #ccc;
+      margin-top: 30px; }
+      .b2b-pane-selector-wrapper .pane-container .panes div.pane-block {
+        height: inherit;
+        overflow-y: auto;
+        border-right: solid 1px #ccc;
+        position: relative;
+        flex: 1;
+        -webkit-flex: 1;
+        /* Safari 6.1+ */
+        -ms-flex: 1;
+        /* IE 10 */ }
+        .b2b-pane-selector-wrapper .pane-container .panes div.pane-block:focus {
+          outline: dotted 1px #333333; }
+    .b2b-pane-selector-wrapper .pane-container .search-block {
+      position: relative;
+      float: right; }
+      .b2b-pane-selector-wrapper .pane-container .search-block input[type="search"]:focus {
+        padding-right: 40px; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row p {
+      margin-top: 15px; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block div {
+      border-bottom: solid 1px #ccc; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row {
+      display: block;
+      padding: 19px 14px 19px 14px;
+      margin-top: 0px;
+      border: dotted 1px transparent;
+      border-bottom: solid 1px #ccc; }
+      .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row:focus {
+        border: dotted 1px #333333 !important; }
+      .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row:last-child {
+        border-bottom: none; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block > .no-content {
+      text-align: center;
+      border-bottom: none;
+      display: block;
+      position: absolute;
+      top: 45%;
+      left: 0;
+      right: 0; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block div:last-child {
+      border-bottom: none; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row span.margin-chk {
+      margin: 15px 15px 0px 15px;
+      float: left; }
+    .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row .checkbox-selectall {
+      margin: 0px 0 0 24px !important; }
+  .b2b-pane-selector-wrapper .side-nav li {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    border: none;
+    border-top: solid 1px #ccc;
+    display: block !important;
+    width: auto !important;
+    margin-left: 0px !important; }
+    .b2b-pane-selector-wrapper .side-nav li.active {
+      background-color: #f6f6f6;
+      position: inherit !important; }
+      .b2b-pane-selector-wrapper .side-nav li.active > a {
+        font-size: 16px;
+        color: #333;
+        text-decoration: none;
+        border: none;
+        background-color: transparent;
+        padding: 20px 15px;
+        display: block;
+        height: auto;
+        border-left: 4px solid #0574ac; }
+    .b2b-pane-selector-wrapper .side-nav li > a {
+      font-size: 16px;
+      color: #333;
+      text-decoration: none;
+      border: none;
+      background-color: transparent;
+      padding: 20px 15px;
+      display: block;
+      height: auto;
+      text-align: left; }
+    .b2b-pane-selector-wrapper .side-nav li > a:focus {
+      border-right: dotted 1px #333333; }
+    .b2b-pane-selector-wrapper .side-nav li:first-child {
+      border-top: none;
+      margin-left: none !important; }
+/********************* Utility CSS Starts **********************/
+.offscreen-text {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden; }
+
+/********************* Utility CSS Ends **********************/
+/* Fix for alignment issue on Cancel link inside modal */
+.b2b-modal-footer > .cta-button-group {
+  line-height: 40px; }
+
+/* .att-dark-green { // Not used
+  color: #007a3e;
+} */
+.colors-off-msg {
+  display: none; }
+
+button .colors-off-msg {
+  position: relative; }
+
+.ds2-no-colors .colors-off-msg {
+  display: block; }
+
+.ds2-no-colors [data-colordatatext] button .colors-off-msg {
+  font-size: 1.1rem;
+  line-height: normal;
+  padding: 5px 0;
+  position: absolute;
+  top: 0;
+  white-space: normal;
+  width: 60px; }
+
+/* Not used
+.make-all-white * {
+  color: #fff;
+}
+.make-all-white a {
+  text-decoration: underline;
+} */
+.loader > span {
+  display: block;
+  padding-top: 20px; }
+
+.modal > .loader {
+  left: 50%;
+  margin-left: -25px;
+  margin-top: -25px;
+  position: absolute;
+  top: 50%; }
+
+#pageLevelLoader.modal {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  top: 40%; }
+
+.modal.fade .loader {
+  display: none; }
+
+.modal.fade.in .loader {
+  display: block; }
+
+.btn.disabled[data-loading-text] {
+  padding: 0 19px 0 18px;
+  line-height: 46px; }
+
+.btn.disabled[data-loading-text] img {
+  position: relative;
+  top: 2px; }
+
+/*  Seems to already be in docs.css
+.fixed-230.leftnav {
+  position: relative;
+}
+.fixed-230-subnav {
+  margin: 10px;
+}
+.fixed-230-subnav > li:first-child {
+  border-top: none;
+}
+.fixed-230-subnav > li {
+  border-bottom: 1px solid #d2d2d2;
+}
+.fixed-230-subnav > li > a {
+  display: block;
+  font-size: 1.4rem;
+  line-height: normal;
+  margin: 0 -9px;
+  padding: 11px 35px 12px 9px;
+  outline-offset: 0;
+  position: relative;
+}
+.fixed-230-subnav > li > a.live {
+  color: #333333;
+  font-family: "Omnes-ECOMP-W02-Medium";
+}
+.fixed-230-subnav a > i {
+  right: 10px;
+  margin: 0;
+  position: absolute;
+  top: 10px;
+}
+.fixed-230-subnav a > i:after {
+  display: none;
+}
+.fixed-230-subnav > li li > a {
+  display: block;
+  font-size: 1.4rem;
+  line-height: 18px;
+}
+.fixed-230-subnav > li li > a.active {
+  color: #333333;
+  font-family: "Omnes-ECOMP-W02-Medium";
+  text-decoration: none;
+}
+.fixed-230-subnav ul {
+  margin: 0 0 10px;
+} */
+.unlinked {
+  color: #0568ae !important;
+  font-family: "Omnes-ECOMP-W02" !important; }
+
+.unlinked.active {
+  color: inherit !important; }
+
+/* @media (max-width: 767px) {
+  .row.has-leftnav {
+    flex-wrap: wrap;
+  }
+  .row.has-leftnav .fluid-space {
+    padding-right: 0;
+  }
+  .row .fixed-230 {
+    background-color: #fff;
+    width: auto;
+  }
+  .row .leftnav {
+    background-color: #fff !important;
+    display: block !important;
+  }
+  .fixed-230-subnav {
+    margin: 10px 0 0;
+    width: 100%;
+  }
+  .fixed-230-subnav > li {
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .fixed-230-subnav > li:first-child {
+    border-top: 1px solid #d2d2d2;
+  }
+  .fixed-230-subnav > li > a {
+    margin: 0;
+  }
+  .fixed-230-subnav a:hover,
+  .fixed-230-subnav a:focus {
+    text-decoration: none !important;
+  }
+  .fixed-230-subnav > li li > a {
+    padding: 5px 10px;
+  }
+  .fixed-230-subnav > li li > a.active {
+    color: inherit;
+    font-family: "Omnes-ECOMP-W02-Medium";
+  }
+} */
+@keyframes DOMinsertion {
+  from {
+    outline-color: transparent; }
+  to {
+    outline-color: transparent; } }
+
+@-moz-keyframes DOMinsertion {
+  from {
+    outline-color: transparent; }
+  to {
+    outline-color: transparent; } }
+
+@-webkit-keyframes DOMinsertion {
+  from {
+    outline-color: transparent; }
+  to {
+    outline-color: transparent; } }
+
+@-ms-keyframes DOMinsertion {
+  from {
+    outline-color: transparent; }
+  to {
+    outline-color: transparent; } }
+
+@-o-keyframes DOMinsertion {
+  from {
+    outline-color: transparent; }
+  to {
+    outline-color: transparent; } }
+
+.ajaxed,
+.modal.fade.in .b2b-modal-header,
+.modal.fade.in .b2b-modal-body,
+.modal.fade.in .b2b-modal-footer {
+  animation-duration: 0.01s;
+  -o-animation-duration: 0.01s;
+  -ms-animation-duration: 0.01s;
+  -moz-animation-duration: 0.01s;
+  -webkit-animation-duration: 0.01s;
+  animation-name: DOMinsertion;
+  -o-animation-name: DOMinsertion;
+  -ms-animation-name: DOMinsertion;
+  -moz-animation-name: DOMinsertion;
+  -webkit-animation-name: DOMinsertion; }
+
+.dda-css-override ul.nav-tabs {
+  margin-bottom: 0; }
+
+.dda-css-override div.tab-content {
+  margin-top: 0;
+  border-top: none; }
+
+.dda-css-override .tab-content .prettyprint, .dda-css-override .usage .prettyprint {
+  max-height: 500px;
+  overflow-y: auto; }
+
+.formsWithinProcessButton {
+  margin-right: 0px; }
+
+.heading-sub-section-form {
+  font-size: 2.4rem;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  margin-bottom: 20px;
+  margin-top: 10px; }
+
+.heading-small-form {
+  font-size: 1.6rem;
+  font-family: "Omnes-ECOMP-W02, Arial";
+  margin-top: 0px; }
+
+.icon-primary-form-sizeL {
+  font-size: 50px; }
+
+.icon-primary-form-size {
+  font-size: 30px; }
+
+.spanformfix {
+  margin-right: 15px !important; }
+
+@media (max-width: 767px) {
+  .heading-sub-section-form {
+    font-size: 1.8rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-bottom: 20px;
+    padding-top: 10px;
+    margin-top: 30px; }
+  .heading-small-form {
+    font-size: 1.4rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    margin-top: 0px; } }
+
+@media (max-width: 479px) {
+  .icon-primary-form-resizeL {
+    display: none; }
+  .icon-primary-form-resize {
+    display: none; }
+  .heading-center-form {
+    margin-left: 20px; } }
+
+@media (min-width: 480px) {
+  .icon-primary-form-resizeL {
+    display: none; }
+  .icon-primary-form-resize {
+    display: inherit; }
+  .icon-primary-center-min {
+    margin-top: 30px; } }
+
+@media (min-width: 768px) {
+  .icon-primary-form-resizeL {
+    display: inherit;
+    margin-top: 30px; }
+  .icon-primary-form-resize {
+    display: none; }
+  .center-form-align {
+    margin-top: 35px; } }
+
+@media (min-width: 1024px) {
+  .icon-primary-form-resizeL {
+    display: inherit;
+    margin-top: 0px; }
+  .icon-primary-form-resize {
+    display: none; }
+  .center-form-align {
+    margin-top: 5px; } }
+
+.data-row.has-button td.col-1 {
+  padding: 0; }
+
+.tab-content > .tab-pane {
+  display: none; }
+
+.tab-content > .active {
+  display: block; }
+
+.icon-primary-circle:before {
+  background-image: url("data:image/svg+xml,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Ccircle%20fill%3D%22transparent%22%20stroke%3D%22%23666%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2216%22%2F%3E%3C%2Fsvg%3E");
+  content: "";
+  position: absolute;
+  top: 0;
+  z-index: 1; }
+
+.icon-primary-primary-circle:before {
+  background-image: url("data:image/svg+xml,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Ccircle%20fill%3D%22transparent%22%20stroke%3D%22%23666%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2216%22%2F%3E%3C%2Fsvg%3E");
+  content: "";
+  position: absolute;
+  top: 0;
+  z-index: 1; }
+/* Flyout inputs color is not aligned */
+textarea, input {
+  color: #333; }
+
+.isIE .btn-primary.btn:focus::after,
+.isIE .btn-specialty.btn:focus::after,
+.isIE .btn-alt.btn:focus::after {
+  border: 1px dashed #fff !important; }
+.b2b-config-section-container {
+  height: auto;
+  min-height: 330px;
+  width: 815px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  display: inline-table;
+  border-radius: 6px; }
+
+.b2b-config-section-first-div {
+  border-right: 1px solid #ccc;
+  height: auto;
+  min-height: 330px; }
+
+.b2b-config-section-icon-primary-font {
+  font-size: 50px;
+  height: 31px;
+  line-height: 31px; }
+
+.b2b-config-section-padding {
+  padding: 20px 20px 15px 15px;
+  height: auto; }
+
+.b2b-config-sec-flyout {
+  position: relative;
+  left: 10px;
+  float: right;
+  color: #0574ac;
+  font-size: 16px;
+  font-family: "Omnes-ECOMP-W02", Arial; }
+
+.b2b-config-sec-divider {
+  border-bottom: 1px solid #ccc; }
+
+.b2b-confi-sec-span-border {
+  border-right: 1px solid;
+  height: auto; }
+
+.b2b-config-sec-speed-div {
+  text-align: center;
+  margin-top: 20px; }
+
+.b2b-config-sec-label-font {
+  font-size: 16px; }
+
+.b2b-config-sec-expander-main {
+  padding: 0 5px 0px 15px; }
+
+.b2b-config-sec-expander-body .b2b-config-vlan-padding {
+  padding: 5px 15px 10px 0px; }
+
+.b2b-conif-sec-row-height {
+  height: 110px; }
+
+.b2b-config-sec-expander-body {
+  font-size: 14px; }
+  .b2b-config-sec-expander-body .b2b-config-vlan-data {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    padding-left: 15px; }
+
+.b2b-config-sec-expander-body-first-div {
+  border-top: 1px solid #ccc; }
+
+.b2b-config-sec-expander-body .tooltip {
+  position: static;
+  opacity: 1; }
+
+.b2b-config-section-container .row > [class*="span"] {
+  margin-right: 0px; }
+
+.b2b-config-vlan-icons {
+  font-size: 16px;
+  float: right;
+  margin-right: 0px; }
+
+.b2b-config-section-container .span6 {
+  width: 50%; }
+
+.b2b-config-sec-data-link-style {
+  position: relative;
+  left: 95%;
+  top: 30px;
+  border-radius: 50%;
+  width: 23px;
+  height: 23px;
+  background: #fff;
+  border: 1px solid #ccc;
+  color: #666666; }
+
+.b2b-config-sec-text-align {
+  text-align: center;
+  margin-top: 15px;
+  margin-bottom: 35px;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 14px;
+  color: #333333; }
+
+.b2b-config-port-text-align {
+  text-align: center;
+  margin-top: 15px;
+  margin-bottom: 8px;
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 14px;
+  color: #333333; }
+
+.b2b-config-port-text-label {
+  margin-top: 6px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  text-align: center; }
+
+.b2b-confi-sec-last-div p {
+  font-size: 14px;
+  padding: 10px 15px 0 15px; }
+
+.b2b-confi-sec-router-label {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 16px;
+  color: #333333;
+  float: left;
+  width: 100%;
+  margin-bottom: 7px; }
+
+.b2b-config-vlan-label {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 14px;
+  color: #333333;
+  margin-top: 1px;
+  margin-bottom: 9px; }
+
+.b2b-config-vlan-info {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 14px;
+  color: #333333;
+  margin-bottom: 1px; }
+  .b2b-config-vlan-info .icon-misc-pen {
+    padding-left: 7px; }
+
+.b2b-confi-sec-model-label {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 14px;
+  color: #333333; }
+
+.b2b-confi-sec-router-info {
+  float: left;
+  width: 62%; }
+
+.b2b-config-sec-speed-sec {
+  border-right: 1px solid #ccc; }
+
+.b2b-config-sec-speed-label {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 20px;
+  color: #333333;
+  text-align: center; }
+  .b2b-config-sec-speed-label i {
+    margin-left: 15px;
+    font-size: 16px; }
+
+.b2b-config-sec-yellow-flag-div {
+  width: 1.6%;
+  background-color: #ffb18c; }
+
+.b2b-config-sec-expander-icons {
+  margin-top: 6px; }
+  .b2b-config-sec-expander-icons .icon-misc-trash {
+    margin-right: 10px; }
+
+.b2b-config-sec-yellow-flag .b2b-config-sec-expander-icons {
+  left: 40px; }
+
+.b2b-config-sec-expander-body-icons .icon-misc-pen {
+  position: relative;
+  left: 18px; }
+.b2b-directory-listing .listBox {
+  height: 310px;
+  width: 450px;
+  padding-left: 1px;
+  padding-right: 1px;
+  font-family: "Omnes-ECOMP-W02", Arial; }
+
+.b2b-directory-listing .listBox:focus {
+  outline: thin dotted #666; }
+
+.b2b-directory-listing .b2b-directory-listing-no-results {
+  font-weight: bold; }
+
+.b2b-directory-listing .b2b-directory-listing-list {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  color: #5a5a5a;
+  overflow-x: hidden;
+  position: relative;
+  height: 300px;
+  border: 1px solid #333;
+  border-radius: 6px;
+  margin-bottom: 10px; }
+
+.b2b-directory-listing .b2b-directory-listing-item {
+  margin: 1px;
+  border: 1px solid transparent;
+  outline: none;
+  text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+  padding-top: 13px;
+  padding-bottom: 7px;
+  padding-left: 15px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  word-wrap: break-word; }
+  .b2b-directory-listing .b2b-directory-listing-item:focus {
+    border: 1px #3399FF solid; }
+
+.b2b-directory-listing .b2b-directory-listing-item-selected {
+  color: #fff;
+  background-color: #3399FF; }
+
+.b2b-directory-listing input[type="text"] {
+  padding-right: 30px; }
+  .b2b-directory-listing input[type="text"]:focus, .b2b-directory-listing input[type="text"]:hover {
+    padding-right: 30px; }
+
+.b2b-directory-listing .row .btns {
+  margin-right: 90px;
+  margin-left: -115px;
+  margin-top: 100px; }
+
+.b2b-directory-listing .btn-right {
+  margin-bottom: 15px !important; }
+  .b2b-directory-listing .btn-right:after {
+    content: "  \27A1"; }
+
+.b2b-directory-listing .btn-left {
+  margin-top: 10px !important; }
+
+.b2b-directory-listing .btn-remove {
+  margin-right: auto !important;
+  margin-bottom: 15px; }
+
+.b2b-directory-listing .btn-remove-all {
+  margin-top: 0;
+  margin-bottom: 61px !important;
+  /* need to be removed */
+  margin-right: auto !important; }
+
+.b2b-directory-listing .btn-add-all {
+  margin-top: 0;
+  margin-bottom: 61px !important; }
+
+.b2b-directory-listing .btn-left:before {
+  content: "\2B05  "; }
+
+.b2b-directory-listing .btn-search[class*="btn"] {
+  right: 0.09rem; }
+
+.b2b-directory-listing .btn {
+  width: 130px; }
+
+.b2b-directory-listing-disabled {
+  cursor: not-allowed; }
+
+.b2b-directory-listing-label-heading {
+  margin-top: 24px;
+  padding-bottom: 5px; }
+
+.b2b-dl-list-box option {
+  padding-top: 13px;
+  padding-bottom: 7px;
+  padding-left: 15px; }
+
+.b2b-dl-modal-button-div {
+  padding-top: 110px;
+  text-align: center; }
+.b2b-tmpl-notification-card {
+  border-radius: 6px;
+  height: auto;
+  width: 420px;
+  background-color: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-header {
+    padding-left: 30px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #333333;
+    font-size: 24px;
+    margin-top: 2px;
+    display: inline-block;
+    min-height: 60px;
+    position: relative; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-body {
+    padding: 0 30px 20px;
+    position: relative; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-header-title {
+    margin-top: 10px; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button {
+    box-shadow: 0 -50px 0 0 #f2f2f2 inset;
+    height: 69px;
+    position: absolute;
+    border-color: #f2f2f2 #f2f2f2 transparent transparent;
+    border-style: solid;
+    border-width: 35px;
+    height: 0;
+    right: -295px;
+    top: -4px;
+    width: 69px;
+    /*Old properties */
+    box-shadow: none;
+    transform: none; }
+    .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button .close {
+      height: 48px;
+      right: -40px;
+      top: -40px;
+      width: 48px;
+      position: relative;
+      /*Old properties */
+      transform: none; }
+      .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button .close:before {
+        color: #0568ae;
+        display: block;
+        font-size: 20px;
+        height: auto;
+        right: -4px;
+        top: 4px;
+        width: auto;
+        /*Old properties */
+        left: auto;
+        height: auto;
+        bottom: auto; }
+      .b2b-tmpl-notification-card .b2b-tmpl-card-corner-button .close:focus {
+        outline: 1px dotted black; }
+  .b2b-tmpl-notification-card button.close {
+    -webkit-appearance: none;
+    moz-appearance: none;
+    appearance: none; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-icon-primary-cirlce {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-outer-cirlce {
+    background: #f0f5f5;
+    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+    vertical-align: middle; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-inner-cirlce {
+    background: #fff;
+    width: 22px;
+    height: 22px;
+    position: relative;
+    border-radius: 50%;
+    display: block;
+    left: 4px;
+    top: 4px;
+    border: 1px solid #767676; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-row {
+    padding-top: 10px; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-sub-header {
+    margin-top: 0px; }
+  .b2b-tmpl-notification-card .b2b-tmpl-favourite-view-item {
+    background-color: #fff;
+    margin-top: 25px;
+    border-top: 1px solid #ccc; }
+    .b2b-tmpl-notification-card .b2b-tmpl-favourite-view-item .cta-button-group {
+      line-height: 40px;
+      padding-top: 20px; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-edit-section .cta-button-group {
+    line-height: 40px;
+    padding-top: 15px; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-add-item-container {
+    padding-top: 30px; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-link-active {
+    pointer-events: none;
+    cursor: default;
+    color: #ccc; }
+  .b2b-tmpl-notification-card .b2b-tmpl-card-cursor:hover {
+    cursor: pointer; }
+.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-icon {
+  text-align: center;
+  margin-top: 91px; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-icon i {
+    font-size: 99px;
+    color: #1b7e28; }
+
+.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-heading {
+  color: #333333;
+  text-align: center;
+  margin-top: 20px; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-heading h1 {
+    font-size: 38px; }
+
+.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-sub-heading {
+  color: #333333;
+  text-align: center; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-sub-heading h5 {
+    font-size: 18px; }
+
+.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-info {
+  padding-left: 18%;
+  font-size: 16px;
+  margin-top: 20px; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-info ul {
+    list-style-type: disc;
+    list-style-position: inside; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-info li {
+    padding-top: 5px; }
+
+.b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-link-section {
+  font-size: 15px;
+  color: #0574ac;
+  margin-top: 20px;
+  text-align: center;
+  margin-bottom: 55px; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-link-section .b2b-tmpl-order-confirmation-link {
+    margin-right: 8%; }
+  .b2b-tmpl-order-confirmation .b2b-tmpl-order-confirmation-link-section a {
+    cursor: pointer; }
+.b2b-tmpl-profile-block-container {
+  min-height: 200px;
+  height: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  box-shadow: 0px 1px 1px 1px #ccc;
+  display: inline-table;
+  margin: 15px 15px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-title {
+    font-weight: bold; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-footer {
+    margin-bottom: 12px;
+    margin-top: 5px;
+    height: 35px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p {
+    word-wrap: break-word;
+    height: 61px; }
+    .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p:first-child {
+      margin-top: 10px; }
+    .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p:after {
+      content: ' ';
+      display: block;
+      border: 0.2px solid #ccc;
+      margin-top: 12px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details .radio {
+    margin-left: 15px;
+    height: 30px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p, .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details div {
+    padding: 2px 7px;
+    font-size: 14px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details .radio-label, .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details a {
+    font-size: 14px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p label, .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-details p span {
+    padding-left: 10px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-approval-icon {
+    color: #1b7e28;
+    float: right;
+    position: relative;
+    left: 10px; }
+    .b2b-tmpl-profile-block-container .b2b-tmpl-approval-icon i {
+      color: #1b7e28;
+      float: right; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-link {
+    float: right;
+    position: relative;
+    left: -4px; }
+  .b2b-tmpl-profile-block-container a.link-profile {
+    position: relative;
+    left: -5px;
+    float: right;
+    margin-bottom: 16px; }
+  .b2b-tmpl-profile-block-container .b2b-tmpl-profile-block-radio {
+    position: relative;
+    top: -5px; }
+.b2b-static-route-container {
+  padding-left: 32px;
+  display: inline-block; }
+
+.b2b-static-route-label-heading {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  font-size: 16px !important;
+  color: #333333;
+  font-style: normal;
+  text-align: left; }
+
+label.b2b-static-route-label-heading {
+  margin-bottom: 12px;
+  margin-top: 15px;
+  display: block; }
+
+#b2b-static-route-input {
+  margin: 5px 0 5px; }
+
+.b2b-static-route-list {
+  margin-bottom: 30px;
+  width: 216px;
+  float: left;
+  margin-right: 20px;
+  max-height: 540px;
+  overflow-y: auto; }
+  .b2b-static-route-list .status-text {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    outline: 0; }
+
+.b2b-static-route-list-item {
+  border: 1px #cccccc solid;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 14px;
+  display: flex;
+  cursor: pointer; }
+  .b2b-static-route-list-item > .status-bar {
+    padding: 20px 0 20px;
+    background-color: #ea7400;
+    border-radius: 0;
+    width: 10px;
+    display: inline-block;
+    margin-right: 20px;
+    height: 100%;
+    float: left; }
+    .b2b-static-route-list-item > .status-bar:after {
+      content: '.';
+      visibility: hidden; }
+  .b2b-static-route-list-item > .status-bar-unedited {
+    padding: 20px 0 20px;
+    background-color: #ffb81c;
+    border-radius: 0;
+    width: 10px;
+    display: inline-block;
+    margin-right: 20px;
+    height: 100%;
+    float: left;
+    background-color: transparent; }
+    .b2b-static-route-list-item > .status-bar-unedited:after {
+      content: '.';
+      visibility: hidden; }
+
+.b2b-static-route-list-item:focus {
+  outline: 1px dashed #00f; }
+
+.b2b-static-route-list-item--selected {
+  background: #f2f2f2; }
+
+.b2b-static-route-content {
+  display: inline-block; }
+
+
+/*
+To Remove later
+*/
+
+.selectWrap::after { 
+  align-items: center; 
+  background-position: 7px 7px; 
+  background-repeat: no-repeat; 
+  background-size: auto 23px; 
+  border-left: 1px solid transparent; 
+  color: #0568ae; 
+  display: flex; 
+  font-size: 23px; 
+  height: 36px; 
+  margin-right: 0; 
+  overflow: hidden; 
+  position: absolute; 
+  right: 0; 
+  text-indent: 7px; 
+  top: 0; 
+  user-select: none; 
+  width: 41px; 
+  z-index: 0; 
+  position: absolute !important; 
+  display: flex !important; 
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/README.md b/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/README.md
index 8c30ec55..addbd91b 100644
--- a/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/README.md
+++ b/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/README.md
@@ -19,4 +19,8 @@ scope.toggleDrawer = function(showmenu){
 	}
 	else
 		document.getElementById('page-content').style.paddingLeft = "230px";           	
-};
\ No newline at end of file
+};
+
+26 May 2017 : Changed b2b sort icons
++
+"<i ng-class=\"{'icon-controls-upPRIMARY active': sortPattern === 'ascending', 'icon-controls-down active down': sortPattern === 'descending'}\"></i>\n" 
diff --git a/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/b2b-library.min.js b/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/b2b-library.min.js
index ecf62a20..bea9fb70 100644
--- a/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/b2b-library.min.js
+++ b/ecomp-portal-FE-common/client/bower_components_external/b2b/js/b2b-angular/b2b-library.min.js
@@ -1,22055 +1,22055 @@
-/*! b2b-angular-library - v1.0.1 - Last updated: 2017-03-02. Copyright (c) 2016 AT&T Services, Inc. */ 

-angular.module("b2b.att.tpls", ['b2bTemplate/audioPlayer/audioPlayer.html', 'b2bTemplate/audioRecorder/audioRecorder.html', 'b2bTemplate/backToTop/backToTop.html', 'b2bTemplate/boardstrip/b2bAddBoard.html', 'b2bTemplate/boardstrip/b2bBoard.html', 'b2bTemplate/boardstrip/b2bBoardstrip.html', 'b2bTemplate/calendar/datepicker-popup.html', 'b2bTemplate/calendar/datepicker.html', 'b2bTemplate/coachmark/coachmark.html', 'b2bTemplate/dropdowns/b2bDropdownDesktop.html', 'b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html', 'b2bTemplate/dropdowns/b2bDropdownListDesktop.html', 'b2bTemplate/fileUpload/fileUpload.html', 'b2bTemplate/flyout/flyout.html', 'b2bTemplate/flyout/flyoutContent.html', 'b2bTemplate/footer/footer_column_switch_tpl.html', 'b2bTemplate/horizontalTable/horizontalTable.html', 'b2bTemplate/hourPicker/b2bHourpicker.html', 'b2bTemplate/hourPicker/b2bHourpickerPanel.html', 'b2bTemplate/hourPicker/b2bHourpickerValue.html', 'b2bTemplate/leftNavigation/leftNavigation.html', 'b2bTemplate/listbox/listbox.html', 'b2bTemplate/modalsAndAlerts/b2b-backdrop.html', 'b2bTemplate/modalsAndAlerts/b2b-window.html', 'b2bTemplate/monthSelector/monthSelector-popup.html', 'b2bTemplate/monthSelector/monthSelector.html', 'b2bTemplate/monthSelector/monthSelectorLink.html', 'b2bTemplate/pagination/b2b-pagination.html', 'b2bTemplate/paneSelector/paneSelector.html', 'b2bTemplate/paneSelector/paneSelectorPane.html', 'b2bTemplate/profileCard/profileCard-addUser.html', 'b2bTemplate/profileCard/profileCard.html', 'b2bTemplate/searchField/searchField.html', 'b2bTemplate/seekBar/seekBar.html', 'b2bTemplate/slider/slider.html', 'b2bTemplate/spinButton/spinButton.html', 'b2bTemplate/statusTracker/statusTracker.html', 'b2bTemplate/stepTracker/stepTracker.html', 'b2bTemplate/switches/switches-spanish.html', 'b2bTemplate/switches/switches.html', 'b2bTemplate/tableMessages/tableMessage.html', 'b2bTemplate/tables/b2bTable.html', 'b2bTemplate/tables/b2bTableBody.html', 'b2bTemplate/tables/b2bTableHeaderSortable.html', 'b2bTemplate/tables/b2bTableHeaderUnsortable.html', 'b2bTemplate/tableScrollbar/tableScrollbar.html', 'b2bTemplate/tabs/b2bTab.html', 'b2bTemplate/tabs/b2bTabset.html', 'b2bTemplate/treeNav/groupedTree.html', 'b2bTemplate/treeNav/treeMember.html', 'b2bTemplate/treeNav/ungroupedTree.html', 'b2bTemplate/treeNodeCheckbox/groupedTree.html', 'b2bTemplate/treeNodeCheckbox/treeMember.html', 'b2bTemplate/treeNodeCheckbox/ungroupedTree.html']);angular.module("b2b.att", ["b2b.att.tpls", 'b2b.att.addressInputTemplate','b2b.att.arrows','b2b.att.audioPlayer','b2b.att.audioRecorder','b2b.att.backToTop','b2b.att.badgesForAlerts','b2b.att.boardstrip','b2b.att.breadcrumbs','b2b.att.buttonGroups','b2b.att.buttons','b2b.att.calendar','b2b.att.checkboxes','b2b.att.coachmark','b2b.att.configurationSection','b2b.att.directoryListingTemplate','b2b.att.dropdowns','b2b.att.fileUpload','b2b.att.filters','b2b.att.flyout','b2b.att.footer','b2b.att.header','b2b.att.headings','b2b.att.horizontalTable','b2b.att.hourPicker','b2b.att.inputTemplate','b2b.att.leftNavigation','b2b.att.links','b2b.att.listbox','b2b.att.loaderAnimation','b2b.att.messageWrapper','b2b.att.modalsAndAlerts','b2b.att.monthSelector','b2b.att.multiLevelNavigation','b2b.att.multipurposeExpander','b2b.att.notesMessagesAndErrors','b2b.att.notificationCardTemplate','b2b.att.orderConfirmationTemplate','b2b.att.pagination','b2b.att.paneSelector','b2b.att.phoneNumberInput','b2b.att.profileBlockTemplate','b2b.att.profileCard','b2b.att.radios','b2b.att.searchField','b2b.att.seekBar','b2b.att.selectorModule','b2b.att.separators','b2b.att.slider','b2b.att.spinButton','b2b.att.staticRouteTemplate','b2b.att.statusTracker','b2b.att.stepTracker','b2b.att.switches','b2b.att.tableMessages','b2b.att.tables','b2b.att.tableScrollbar','b2b.att.tabs','b2b.att.tagBadges','b2b.att.textArea','b2b.att.tooltipsForForms','b2b.att.treeNav','b2b.att.treeNodeCheckbox','b2b.att.utilities']);/**

- * @ngdoc directive

- * @name Template.att:Address Input

- *

- * @description

- *  <file src="src/addressInputTemplate/docs/readme.md" />

- *

- * @usage

-

- *

- * @example

- *  <section id="code">   

- <example module="b2b.att">

- <file src="src/addressInputTemplate/docs/demo.html" />

- <file src="src/addressInputTemplate/docs/demo.js" />

- </example>

- </section>

- *

- */

-angular.module('b2b.att.addressInputTemplate', ['ngMessages']);

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:arrows

- *

- * @description

- *  <file src="src/arrows/docs/readme.md" />

- *

- * @usage

- *   Please refer demo.html tab in Example section below.

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/arrows/docs/demo.html" />

-            <file src="src/arrows/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.arrows', []);

-/**

- * @ngdoc directive

- * @name Videos, audio & animation.att:Audio Player

- * @scope

- * @param {string} audioSrcUrl - MP3 audio source URL or Blob URL

- * @description

- *  <file src="src/audioPlayer/docs/readme.md" />

- *

- * @usage

- * 

- <div b2b-audio audio-src-url='audioSrcUrl'></div>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/audioPlayer/docs/demo.html" />

-            <file src="src/audioPlayer/docs/demo.js" />

-       </example>

-    </section>

- *

- */

- 

-angular.module('b2b.att.audioPlayer', ['b2b.att.utilities', 'b2b.att.seekBar'])

-    .constant('AudioPlayerConfig', {

-        'defaultVolume': 50,

-        'timeShiftInSeconds': 5

-    })

-    .filter('trustedAudioUrl', ['$sce', function ($sce) {

-        return function (audioFileFullPath) {

-            return audioFileFullPath ? $sce.trustAsResourceUrl(audioFileFullPath) : 'undefined';

-        };

-    }])

-    .directive('b2bAudio', ['$log', '$timeout', 'AudioPlayerConfig', '$compile', 'events', function ($log, $timeout, AudioPlayerConfig, $compile, events) {

-        return {

-            restrict: 'EA',

-            replace: true,

-            scope: {

-                audioSrcUrl: '='

-            },

-            templateUrl: 'b2bTemplate/audioPlayer/audioPlayer.html',

-            controller: function ($scope) {

-

-                $scope.audio = {};

-

-                if (!angular.isDefined($scope.audioSrcUrl)) {

-                    $log.warn('b2b-audio : audio-src-url undefined');

-                    $scope.audioSrcUrl = undefined;

-                    $scope.audio.mp3 = undefined;

-                }

-

-            },

-            link: function (scope, element) {

-                var audioElement = angular.element(element[0].querySelector('audio'))[0];

-                scope.audio.audioElement = audioElement;

-                

-                function setAttributes(element, attributes) {

-                    Object.keys(attributes).forEach(function (name) {

-                        element.setAttribute(name, attributes[name]);

-                    });

-                }

-

-                $timeout(function () {

-                    // TODO: Replace with DDA Tooltip

-                    var seekBarKnob = element[0].querySelector('.b2b-seek-bar-knob');

-                    var tooltipObject = {

-                        'tooltip': '{{timeFormatter(audio.currentTime)}}',

-                        'tooltip-placement': 'above',

-                        'tooltip-style': 'blue',

-                        'tooltip-trigger': 'mousedown',

-                        'tooltip-append-to-body': 'false',

-                        'tooltip-offset': '-10',

-                        'refer-by': 'seek-bar-tooltip'

-                    };

-                    setAttributes(seekBarKnob, tooltipObject);

-                    $compile(seekBarKnob)(scope);

-                });

-

-                if (angular.isDefined(scope.audioSrcUrl)) {

-                    scope.audio.mp3 = scope.audioSrcUrl;

-                }

-

-                scope.audio.currentTime = 0;

-                scope.audio.currentVolume = AudioPlayerConfig.defaultVolume;

-                scope.audio.timeShiftInSeconds = AudioPlayerConfig.timeShiftInSeconds;

-                scope.isPlayInProgress = false;

-                scope.isReady = false;

-                scope.isAudioDragging = false;

-

-                $timeout(function () {

-                    audioElement.load();

-                    audioElement.volume = scope.audio.currentVolume / 100;

-                });

-

-                scope.$watch('audioSrcUrl', function (newVal, oldVal) {

-                    if (newVal !== oldVal) {

-                        if (!newVal) {

-                            $log.warn('b2b-audio : audio-src-url undefined. Please provide a valid URL');

-                        }

-                        

-                        scope.audio.mp3 = newVal;

-                        $timeout(function () {

-                            audioElement.load();

-                        });

-                    }

-                });

-

-                scope.playAudio = function () {

-                    if (scope.isReady) {

-                        audioElement.play();

-                    }

-                };

-

-                audioElement.onplay = function () {

-                    scope.isPlayInProgress = true;

-                    scope.$digest();

-                };

-

-                scope.pauseAudio = function () {

-                    audioElement.pause();

-                };

-

-                audioElement.onpause = function () {

-                    scope.isPlayInProgress = false;

-                    scope.$digest();

-                };

-

-                scope.toggleAudio = function () {

-                    if (audioElement.paused) {

-                        scope.playAudio();

-                    } else {

-                        scope.pauseAudio();

-                    }

-                };

-

-                scope.volumeUp = function (delta) {

-                    if (!delta) {

-                        delta = 0.1;

-                    } else {

-                        delta = delta / 100;

-                    }

-                    audioElement.muted = false;

-                    if (audioElement.volume < 1) {

-                        audioElement.volume = Math.min((Math.round((audioElement.volume + delta) * 100) / 100), 1);

-                    }

-                    scope.audio.currentVolume = audioElement.volume * 100;

-                    return audioElement.volume;

-                };

-

-                scope.volumeDown = function (delta) {

-                    if (!delta) {

-                        delta = 0.1;

-                    } else {

-                        delta = delta / 100;

-                    }

-                    audioElement.muted = false;

-                    if (audioElement.volume > 0) {

-                        audioElement.volume = Math.max((Math.round((audioElement.volume - delta) * 100) / 100), 0);

-                    }

-                    scope.audio.currentVolume = audioElement.volume * 100;

-                    return audioElement.volume;

-                };

-

-                var volumeHandler = function (e) {

-                    events.preventDefault(e);

-                    if ((e.wheelDelta && e.wheelDelta > 0) || (e.detail && e.detail < 0)) {

-                        scope.volumeUp();

-                    } else {

-                        scope.volumeDown();

-                    }

-                    scope.$digest();

-                };

-

-                

-

-                scope.$watch('audio.currentVolume', function (newVal, oldVal) {

-                    if (newVal !== oldVal) {

-                        audioElement.volume = newVal / 100;

-                    }

-                });

-

-                scope.setCurrentTime = function (timeInSec) {

-                    audioElement.currentTime = timeInSec;

-                };

-

-                scope.setAudioPosition = function (val) {

-                    if (scope.isReady) {

-                        scope.setCurrentTime(val);

-                        scope.isAudioDragging = false;

-                    }

-                };

-

-                function getTimestampArray(timestamp) {

-                    var d = Math.abs(timestamp) / 1000; // delta

-                    var r = {}; // result

-                    var s = { // structure

-                        day: 86400,

-                        hour: 3600,

-                        minute: 60,

-                        second: 1

-                    };

-

-                    Object.keys(s).forEach(function (key) {

-                        r[key] = Math.floor(d / s[key]);

-                        d -= r[key] * s[key];

-                    });

-

-                    return r;

-                };

-

-                scope.timeFormatter = function (timeInSec) {

-                    var formattedTime = '00:00';

-

-                    if (!timeInSec || timeInSec < 1) {

-                        return formattedTime;

-                    }

-

-                    if (typeof timeInSec === 'string') {

-                        return timeInSec;

-                    }

-

-                    var dateArray = getTimestampArray(timeInSec * 1000);

-                    Object.keys(dateArray).forEach(function (key) {

-                        if (dateArray[key] === 0) {

-                            dateArray[key] = '00';

-                        } else if (dateArray[key] < 10) {

-                            dateArray[key] = '0' + dateArray[key];

-                        }

-                    });

-

-                    formattedTime = dateArray['minute'] + ':' + dateArray['second'];

-

-                    if (dateArray['hour'] !== '00') {

-                        formattedTime = dateArray['hour'] + ':' + formattedTime;

-                    }

-

-                    if (dateArray['day'] !== '00') {

-                        formattedTime = dateArray['day'] + ':' + formattedTime;

-                    }

-

-                    return formattedTime;

-                };

-

-                audioElement.onloadedmetadata = function () {

-                    scope.audio.duration = audioElement.duration;

-                    scope.$digest();

-                };

-

-                audioElement.ontimeupdate = function () {

-                    if (!scope.isAudioDragging) {

-                        scope.audio.currentTime = audioElement.currentTime;

-                        scope.$digest();

-                    }

-                };

-

-                audioElement.onended = function () {

-                    scope.setCurrentTime(0);

-                    scope.audio.currentTime = 0;

-                    if (!audioElement.paused) {

-                        scope.pauseAudio();

-                    }

-                    scope.$digest();

-                };

-

-                audioElement.oncanplay = function () {

-                    scope.isReady = true;

-                    scope.isPlayInProgress = !audioElement.paused;

-                    scope.$digest();

-                };

-

-                var onloadstart = function () {

-                    scope.isReady = false;

-                    scope.isPlayInProgress = !audioElement.paused;

-                    scope.audio.currentTime = 0;

-                    scope.audio.duration = 0;

-                    scope.$digest();

-                };

-                audioElement.addEventListener("loadstart", onloadstart);

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Videos, audio & animation.att:Audio Recorder

- * @scope

- * @param {function} callback - A callback to handle the WAV blob

- * @param {object} config - A config object with properties startRecordingMessage & whileRecordingMessage

- * @description

- *  <file src="src/audioRecorder/docs/readme.md" />

- *

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/audioRecorder/docs/demo.html" />

-            <file src="src/audioRecorder/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.audioRecorder', ['b2b.att.utilities'])

-    .constant('AudioRecorderConfig', {

-        'startRecordingMessage': 'Click on REC icon to being recording',

-        'whileRecordingMessage': 'Recording...'

-    })

-    .directive('b2bAudioRecorder', ['$interval', 'AudioRecorderConfig', 'b2bUserAgent', 'b2bRecorder', function($interval, AudioRecorderConfig, b2bUserAgent, b2bRecorder) {

-        return {

-            restrict: 'EA',

-            replace: true,

-            scope: {

-                callback: '&'

-            },

-            templateUrl: 'b2bTemplate/audioRecorder/audioRecorder.html',

-            controller: function($scope) {

-

-                function hasGetUserMedia() {

-                    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||

-                        navigator.mozGetUserMedia || navigator.msGetUserMedia);

-                }

-

-                if (!hasGetUserMedia()) {

-                    throw new Error('Your broswer does not support MediaRecorder API');

-                }

-

-                if (!(b2bUserAgent.isFF() || b2bUserAgent.isChrome())) {

-                    throw new Error('b2bAudioRecorder does not support this browser!');

-                }

-

-            },

-            link: function(scope, element) {

-                scope.elapsedTime = 0;

-                scope.isRecording = false;

-                scope.config = {};

-                scope.config.startRecordingMessage = AudioRecorderConfig.startRecordingMessage;

-                scope.config.whileRecordingMessage = AudioRecorderConfig.whileRecordingMessage;

-                

-

-                var timer = undefined; // Interval promise

-                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

-                var stream;

-                var audio = angular.element(element[0].querySelector('audio'))[0];

-                var recorder = undefined;

-

-                function startRecording() {

-                    scope.isRecording = true;

-                    navigator.mediaDevices.getUserMedia({

-                        audio: true

-                    }).then(function(stream) {

-                        //create the MediaStreamAudioSourceNode

-                        context = new AudioContext();

-                        source = context.createMediaStreamSource(stream);

-                        recorder = new b2bRecorder(source);

-                        recorder.record();

-

-                        timer = $interval(function() {

-                            scope.elapsedTime += 1;

-                        }, 1000, 0);

-                    }).catch(function(err) {

-                        angular.noop();

-                    });

-

-                };

-

-                function stopRecording() {

-                    scope.isRecording = false;

-                    recorder.stop();

-                    var audio = {};

-                    recorder.exportWAV(function(s) {

-                        audio.src = window.URL.createObjectURL(s);

-                        context.close().then(function() {

-                            if (timer) {

-                                $interval.cancel(timer);

-                            }

-                            scope.elapsedTime = 0;

-                            

-                            recorder.clear();

-                            recorder = undefined;

-                        });

-                        if (angular.isFunction(scope.callback)){

-                            scope.callback({'data': audio});    

-                        }

-                    });

-                    

-                    

-                }

-

-                scope.toggleRecording = function() {

-                    if (scope.isRecording) {

-                        stopRecording();

-                    } else {

-                        startRecording();

-                    }

-                };

-

-

-

-                //TODO: Move this into utilities

-                function getTimestampArray(timestamp) {

-                    var d = Math.abs(timestamp) / 1000; // delta

-                    var r = {}; // result

-                    var s = { // structure

-                        day: 86400,

-                        hour: 3600,

-                        minute: 60,

-                        second: 1

-                    };

-

-                    Object.keys(s).forEach(function(key) {

-                        r[key] = Math.floor(d / s[key]);

-                        d -= r[key] * s[key];

-                    });

-

-                    return r;

-                };

-                scope.timeFormatter = function(timeInSec) {

-                    var formattedTime = '00:00';

-

-                    if (!timeInSec || timeInSec < 1) {

-                        return formattedTime;

-                    }

-

-                    if (typeof timeInSec === 'string') {

-                        return timeInSec;

-                    }

-

-                    var dateArray = getTimestampArray(timeInSec * 1000);

-                    Object.keys(dateArray).forEach(function(key) {

-                        if (dateArray[key] === 0) {

-                            dateArray[key] = '00';

-                        } else if (dateArray[key] < 10) {

-                            dateArray[key] = '0' + dateArray[key];

-                        }

-                    });

-

-                    formattedTime = dateArray['minute'] + ':' + dateArray['second'];

-

-                    if (dateArray['hour'] !== '00') {

-                        formattedTime = dateArray['hour'] + ':' + formattedTime;

-                    }

-

-                    if (dateArray['day'] !== '00') {

-                        formattedTime = dateArray['day'] + ':' + formattedTime;

-                    }

-

-                    return formattedTime;

-                };

-

-                scope.$on('$destroy', function() {

-                    if (timer) {

-                        $interval.cancel(timer);

-                    }

-                });

-            }

-        };

-    }]);

-

-/**

- * @ngdoc directive

- * @name Navigation.att:Back To Top

- * @scope

- * @description

- *  <file src="src/backToTop/docs/readme.md" />

- * @param {integer} scrollSpeed - Scroll speed in seconds, default is 1

-*

- * @usage

- * 

-    <div ng-controller="backToTopController">

-        <div b2b-backtotop></div>

-    </div>

- * 

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/backToTop/docs/demo.html" />

-            <file src="src/backToTop/docs/demo.js" />

-       </example>

-    </section>

- *

- */

- 

-angular.module('b2b.att.backToTop', ['b2b.att.utilities','b2b.att.position'])

-    .directive('b2bBacktotopButton', [function () {

-        return {

-            restrict: 'EA',

-            replace: true,

-            templateUrl: 'b2bTemplate/backToTop/backToTop.html',

-            link: function (scope, elem, attr) {

-                elem.bind('click', function(evt) {

-                    var scrollSpeed = parseInt(attr.scrollSpeed) || 1;

-                    TweenLite.to(window, scrollSpeed, {scrollTo:{x: 0, y: 0}});

-                });

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Messages, modals & alerts.att:badgesForAlerts

- *

- * @description

- *  <file src="src/badgesForAlerts/docs/readme.md" />

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/badgesForAlerts/docs/demo.html" />

-            <file src="src/badgesForAlerts/docs/demo.js" />

-       </example>

-        </section>

- *

- */

-angular.module('b2b.att.badgesForAlerts', []);

-/**

- * @ngdoc directive

- * @name Misc.att:boardstrip

- *

- * @description

- *  <file src="src/boardstrip/docs/readme.md" />

- *

- * @usage

- * See demo section

- * @example

-    <section id="code">

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/boardstrip/docs/demo.html" />

-            <file src="src/boardstrip/docs/demo.js" />

-        </example>

-    </section>

- */

-angular.module('b2b.att.boardstrip', ['b2b.att.utilities'])

-    .constant('BoardStripConfig', {

-        'maxVisibleBoards': 4,

-        'boardsToScroll': 1,

-        /* These parameters are non-configurable and remain unaltered, until there is a change in corresponding CSS */

-        'boardLength': 140,

-        'boardMargin': 15

-    })

-    .directive('b2bBoard', [function () {

-        return {

-            restrict: 'AE',

-            replace: true,

-            transclude: true,

-            require: '^b2bBoardStrip',

-            scope: {

-                boardIndex: '=',

-                boardLabel: '='

-            },

-            templateUrl: 'b2bTemplate/boardstrip/b2bBoard.html',

-            link: function (scope, element, attrs, ctrls) {

-

-                var parentCtrl = ctrls;

-

-                scope.getCurrentIndex = function () {

-                    return parentCtrl.getCurrentIndex();

-                };

-                scope.selectBoard = function (boardIndex) {

-                    if (!isNaN(boardIndex)) {

-                        parentCtrl.setCurrentIndex(boardIndex);

-                    }

-                };

-            }

-        };

-    }])

-    .directive('b2bBoardStrip', ['BoardStripConfig', '$timeout', function (BoardStripConfig, $timeout) {

-        return {

-            restrict: 'AE',

-            replace: true,

-            transclude: true,

-            require: ['?ngModel', 'b2bBoardStrip'],

-            scope: {

-                boardsMasterArray: '=',

-                onAddBoard: '&?'

-            },

-            templateUrl: 'b2bTemplate/boardstrip/b2bBoardstrip.html',

-            controller: function ($scope) {

-                if (!angular.isDefined($scope.boardsMasterArray)) {

-                    $scope.boardsMasterArray = [];

-                }

-

-                this.rectifyMaxVisibleBoards = function () {

-                    if (this.maxVisibleIndex >= $scope.boardsMasterArray.length) {

-                        this.maxVisibleIndex = $scope.boardsMasterArray.length - 1;

-                    }

-

-                    if (this.maxVisibleIndex < 0) {

-                        this.maxVisibleIndex = 0;

-                    }

-                };

-

-                this.resetBoardStrip = function () {

-                    $scope.currentIndex = 0;

-

-                    this.maxVisibleIndex = BoardStripConfig.maxVisibleBoards - 1;

-                    this.minVisibleIndex = 0;

-

-                    this.rectifyMaxVisibleBoards();

-                };

-

-                this.getCurrentIndex = function () {

-                    return $scope.currentIndex;

-                };

-                this.setCurrentIndex = function (indx) {

-                    $scope.currentIndex = indx;

-                };

-

-                this.getBoardsMasterArrayLength = function () {

-                    return $scope.boardsMasterArray.length;

-                };

-

-                $scope.addBoardPressedFlag = false;

-                this.getAddBoardPressedFlag = function () {

-                    return $scope.addBoardPressedFlag;

-                };

-                this.setAddBoardPressedFlag = function (booleanValue) {

-                    $scope.addBoardPressedFlag = booleanValue;

-                };

-

-            },

-            link: function (scope, element, attrs, ctrls) {

-

-                var ngModelCtrl = ctrls[0];

-                var ctrl = ctrls[1];

-

-                var oldTimeout;

-                var animationTimeout = 1000;

-

-                var getBoardViewportWidth = function (numberOfVisibleBoards) {

-                    return numberOfVisibleBoards * (BoardStripConfig.boardLength + BoardStripConfig.boardMargin);

-                };

-                if (element[0].querySelector(".board-viewport")) {

-                    angular.element(element[0].querySelector(".board-viewport")).css({

-                        "width": getBoardViewportWidth(BoardStripConfig.maxVisibleBoards) + "px"

-                    });

-                }

-

-                var getBoardstripContainerWidth = function (totalNumberOfBoards) {

-                    return totalNumberOfBoards * (BoardStripConfig.boardLength + BoardStripConfig.boardMargin);

-                };

-                if (element[0].querySelector(".boardstrip-container")) {

-                    angular.element(element[0].querySelector(".boardstrip-container")).css({

-                        "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"

-                    });

-                    angular.element(element[0].querySelector(".boardstrip-container")).css({

-                        "left": "0px"

-                    });

-                }

-

-                var calculateAndGetBoardstripContainerAdjustment = function () {

-

-                    var calculatedAdjustmentValue;

-

-                    if (ctrl.getBoardsMasterArrayLength() <= BoardStripConfig.maxVisibleBoards) {

-                        calculatedAdjustmentValue = 0;

-                    } else {

-                        calculatedAdjustmentValue = (ctrl.minVisibleIndex * (BoardStripConfig.boardLength + BoardStripConfig.boardMargin)) * -1;

-                    }

-

-                    return calculatedAdjustmentValue;

-                };

-

-                var animateBoardstripContainerAdjustment = function (elementToFocusAfterAnimation) {

-                    var oldContainerAdjustment = angular.element(element[0].querySelector(".boardstrip-container"))[0].style.left;

-                    var containerAdjustment = calculateAndGetBoardstripContainerAdjustment();

-                    if (oldContainerAdjustment !== containerAdjustment + 'px') {

-                        angular.element(element[0].querySelector(".boardstrip-container")).css({

-                            "left": containerAdjustment + "px"

-                        });

-

-                        $timeout.cancel(oldTimeout);

-                        oldTimeout = $timeout(function () {

-                            elementToFocusAfterAnimation.focus();

-                        }, animationTimeout);

-                    } else {

-                        elementToFocusAfterAnimation.focus();

-                    }

-                };

-

-                var updateBoardsTabIndex = function (boardArray, minViewIndex, maxViewIndex) {

-                    for (var i = 0; i < boardArray.length; i++) {

-                        angular.element(boardArray[i]).attr('tabindex', '-1');

-                    }

-                    for (var j = minViewIndex; j <= maxViewIndex; j++) {

-                        angular.element(boardArray[j]).attr('tabindex', '0');

-                    }

-                };

-

-                $timeout(function () {

-                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                });

-

-                scope.$watchCollection('boardsMasterArray', function (newVal, oldVal) {

-                    if (newVal !== oldVal) {

-                        /* When a board is removed */

-                        if (newVal.length < oldVal.length) {

-                            ctrl.resetBoardStrip();

-                            $timeout(function () {

-

-                                var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                                if (currentBoardArray.length !== 0) {

-                                    animateBoardstripContainerAdjustment(currentBoardArray[0]);

-                                } else {

-                                    element[0].querySelector('div.boardstrip-item--add').focus();

-                                }

-

-                                angular.element(element[0].querySelector(".boardstrip-container")).css({

-                                    "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"

-                                });

-                                /* Update tabindecies to ensure keyboard navigation behaves correctly */

-                                updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                            });

-                        }

-                        /* When a board is added */

-                        else {

-                            if (ctrl.getAddBoardPressedFlag()) {

-                                ctrl.maxVisibleIndex = ctrl.getBoardsMasterArrayLength() - 1;

-                                ctrl.minVisibleIndex = Math.max(ctrl.maxVisibleIndex - BoardStripConfig.maxVisibleBoards + 1, 0);

-

-                                ctrl.setCurrentIndex(ctrl.maxVisibleIndex);

-

-                                $timeout(function () {

-                                    angular.element(element[0].querySelector(".boardstrip-container")).css({

-                                        "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"

-                                    });

-

-                                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                                    animateBoardstripContainerAdjustment(currentBoardArray[currentBoardArray.length - 1]);

-                                    /* Update tabindecies to ensure keyboard navigation behaves correctly */

-                                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                                });

-                            } else {

-                                if (ctrl.minVisibleIndex === 0 && ctrl.getBoardsMasterArrayLength() < BoardStripConfig.maxVisibleBoards + 1) {

-                                    ctrl.maxVisibleIndex = ctrl.getBoardsMasterArrayLength() - 1;

-                                    ctrl.rectifyMaxVisibleBoards();

-                                }

-

-                                $timeout(function () {

-                                    angular.element(element[0].querySelector(".boardstrip-container")).css({

-                                        "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"

-                                    });

-

-                                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                                    /* Update tabindecies to ensure keyboard navigation behaves correctly */

-                                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                                });

-                            }

-

-                            ctrl.setAddBoardPressedFlag(false);

-                        }

-                    }

-                });

-

-                scope.nextBoard = function () {

-                    ctrl.maxVisibleIndex += BoardStripConfig.boardsToScroll;

-                    ctrl.rectifyMaxVisibleBoards();

-                    ctrl.minVisibleIndex = ctrl.maxVisibleIndex - (BoardStripConfig.maxVisibleBoards - 1);

-

-                    $timeout.cancel(oldTimeout);

-                    angular.element(element[0].querySelector(".boardstrip-container")).css({

-                        "left": calculateAndGetBoardstripContainerAdjustment() + "px"

-                    });

-

-                    $timeout(function () {

-                        var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-

-                        /* Remove tabindex from non-visible boards */

-                        updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-

-                        if (!(scope.isNextBoard())) {

-                            try {

-                                currentBoardArray[currentBoardArray.length - 1].focus();

-                            } catch (e) { /* IE8 may throw exception */ }

-                        }

-                    }, animationTimeout);

-                };

-                scope.prevBoard = function () {

-

-                    ctrl.minVisibleIndex -= BoardStripConfig.boardsToScroll;

-                    if (ctrl.minVisibleIndex < 0) {

-                        ctrl.minVisibleIndex = 0;

-                    }

-

-                    ctrl.maxVisibleIndex = ctrl.minVisibleIndex + BoardStripConfig.maxVisibleBoards - 1;

-                    ctrl.rectifyMaxVisibleBoards();

-

-                    $timeout.cancel(oldTimeout);

-                    angular.element(element[0].querySelector(".boardstrip-container")).css({

-                        "left": calculateAndGetBoardstripContainerAdjustment() + "px"

-                    });

-

-                    $timeout(function () {

-                        var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-

-                        /* Remove tabindex from non-visible boards */

-                        updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-

-                        if (ctrl.minVisibleIndex === 0) {

-                            try {

-                                element[0].querySelector('div.boardstrip-item--add').focus();

-                            } catch (e) { /* IE8 may throw exception */ }

-                        }

-                    });

-                };

-

-                scope.isPrevBoard = function () {

-                    return (ctrl.minVisibleIndex > 0);

-                };

-                scope.isNextBoard = function () {

-                    return (ctrl.getBoardsMasterArrayLength() - 1 > ctrl.maxVisibleIndex);

-                };

-

-                ngModelCtrl.$render = function () {

-                    if (ngModelCtrl.$viewValue || ngModelCtrl.$viewValue === 0) {

-                        var newCurrentIndex = ngModelCtrl.$viewValue;

-

-                        if (!(newCurrentIndex = parseInt(newCurrentIndex, 10))) {

-                            newCurrentIndex = 0;

-                        }

-

-                        if (newCurrentIndex <= 0) {

-                            ctrl.resetBoardStrip();

-                            newCurrentIndex = 0;

-

-                            var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                            if (currentBoardArray.length !== 0) {

-                                animateBoardstripContainerAdjustment(currentBoardArray[0]);

-                            } else {

-                                element[0].querySelector('div.boardstrip-item--add').focus();

-                            }

-                            /* Update tabindecies to ensure keyboard navigation behaves correctly */

-                            updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                        } else if (newCurrentIndex >= ctrl.getBoardsMasterArrayLength()) {

-                            ctrl.maxVisibleIndex = ctrl.getBoardsMasterArrayLength() - 1;

-                            ctrl.rectifyMaxVisibleBoards();

-                            ctrl.minVisibleIndex = Math.max(ctrl.maxVisibleIndex - BoardStripConfig.maxVisibleBoards + 1, 0);

-

-                            newCurrentIndex = ctrl.maxVisibleIndex;

-

-                            $timeout(function () {

-                                var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                                animateBoardstripContainerAdjustment(currentBoardArray[newCurrentIndex]);

-                                /* Update tabindecies to ensure keyboard navigation behaves correctly */

-                                updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                            });

-                        } else {

-

-                            if (!(newCurrentIndex >= ctrl.minVisibleIndex && newCurrentIndex <= ctrl.maxVisibleIndex)) {

-                                ctrl.minVisibleIndex = newCurrentIndex;

-                                ctrl.maxVisibleIndex = ctrl.minVisibleIndex + BoardStripConfig.maxVisibleBoards - 1;

-                                ctrl.rectifyMaxVisibleBoards();

-

-                                if (ctrl.getBoardsMasterArrayLength() < BoardStripConfig.maxVisibleBoards) {

-                                    ctrl.minVisibleIndex = 0;

-                                } else {

-                                    ctrl.minVisibleIndex = Math.max(ctrl.maxVisibleIndex - BoardStripConfig.maxVisibleBoards + 1, 0);

-                                }

-

-                                $timeout(function () {

-                                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');

-                                    animateBoardstripContainerAdjustment(currentBoardArray[newCurrentIndex]);

-                                    /* Update tabindecies to ensure keyboard navigation behaves correctly */

-                                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);

-                                });

-                            }

-                        }

-                        scope.currentIndex = newCurrentIndex;

-                        ngModelCtrl.$setViewValue(newCurrentIndex);

-                    } else {

-                        ctrl.resetBoardStrip();

-                        ngModelCtrl.$setViewValue(0);

-                    }

-                };

-

-                scope.$watch('currentIndex', function (newVal, oldVal) {

-                    if (newVal !== oldVal && ngModelCtrl && ngModelCtrl.$viewValue !== newVal) {

-                        ngModelCtrl.$setViewValue(newVal);

-                    }

-                });

-            }

-        };

-    }])

-    .directive('b2bAddBoard', ['BoardStripConfig', '$parse', function (BoardStripConfig, $parse) {

-        return {

-            restrict: 'AE',

-            replace: true,

-            require: '^b2bBoardStrip',

-            scope: {

-                onAddBoard: '&?'

-            },

-            templateUrl: 'b2bTemplate/boardstrip/b2bAddBoard.html',

-            link: function (scope, element, attrs, ctrl) {

-                scope.addBoard = function () {

-                    if (attrs['onAddBoard']) {

-                        scope.onAddBoard = $parse(scope.onAddBoard);

-                        scope.onAddBoard();

-                        ctrl.setAddBoardPressedFlag(true);

-                    }

-                };

-            }

-        };

-    }])

-    .directive('b2bBoardNavigation', ['keymap', 'events', function (keymap, events) {

-        return {

-            restrict: 'AE',

-            link: function (scope, elem) {

-

-                var prevElem = keymap.KEY.LEFT;

-                var nextElem = keymap.KEY.RIGHT;

-

-                elem.bind('keydown', function (ev) {

-

-                    if (!(ev.keyCode)) {

-                        ev.keyCode = ev.which;

-                    }

-

-                    switch (ev.keyCode) {

-                    case nextElem:

-                        events.preventDefault(ev);

-                        events.stopPropagation(ev);

-

-                        if (elem[0].nextElementSibling && parseInt(angular.element(elem[0].nextElementSibling).attr('tabindex')) >= 0) {

-                            angular.element(elem[0])[0].nextElementSibling.focus();

-                        } else {

-                            /* IE8 fix */

-                            var el = angular.element(elem[0])[0];

-                            do {

-                                if (el.nextSibling) {

-                                    el = el.nextSibling;

-                                } else {

-                                    break;

-                                }

-                            } while (el && el.tagName !== 'LI');

-

-                            if (el.tagName && el.tagName === 'LI' && parseInt(angular.element(el).attr('tabindex')) >= 0) {

-                                el.focus();

-                            }

-                        }

-

-                        break;

-                    case prevElem:

-                        events.preventDefault(ev);

-                        events.stopPropagation(ev);

-

-                        if (elem[0].previousElementSibling && parseInt(angular.element(elem[0].previousElementSibling).attr('tabindex')) >= 0) {

-                            angular.element(elem[0])[0].previousElementSibling.focus();

-                        } else {

-                            /* IE8 fix */

-                            var el1 = angular.element(elem[0])[0];

-                            do {

-                                if (el1.previousSibling) {

-                                    el1 = el1.previousSibling;

-                                } else {

-                                    break;

-                                }

-                            } while (el1 && el1.tagName !== 'LI');

-

-                            if (el1.tagName && el1.tagName === 'LI' && parseInt(angular.element(el1).attr('tabindex')) >= 0) {

-                                el1.focus();

-                            }

-                        }

-                        break;

-                    default:

-                        break;

-                    }

-                });

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Navigation.att:breadcrumbs

- *

- * @description

- *  <file src="src/breadcrumbs/docs/readme.md" />

- * @usage

-    <ul class="breadcrumb">

-        <li ng-repeat="link in breadCrumbsLink"><a tabindex="{{(idx==$index)?-1:0}}" href='javascript:void(0)' ng-click="clickActive($index)" ng-class="{'active':idx==$index, '': idx!=$index}">{{link.title}}</a></li>

-    </ul>

- * @example

- <example module="b2b.att">

- <file src="src/breadcrumbs/docs/demo.html" />

- <file src="src/breadcrumbs/docs/demo.js" />

- </example>

- */

-angular.module('b2b.att.breadcrumbs',[])

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:buttonGroups

- *

- * @description

- *  <file src="src/buttonGroups/docs/readme.md" />

- *

- * @usage

-<h2>Radio Aproach</h2>

-<div class="btn-group" b2b-key prev="37,38" next="39,40" circular-traversal role="radiogroup">

-    <button type="button" class="btn btn-secondary" b2b-key-item ng-focus="radioModel='Button 1'" ng-model="radioModel" b2b-btn-radio="'Button 1'" tabindex="{{(!radioModel || 'Button 1'===radioModel)?0:-1}}">Button 1</button>

-    <button type="button" class="btn btn-secondary" b2b-key-item ng-focus="radioModel='Button 2'" ng-model="radioModel" b2b-btn-radio="'Button 2'" tabindex="{{(!radioModel || 'Button 2'===radioModel)?0:-1}}">Button 2</button>

-    <button type="button" class="btn btn-secondary" b2b-key-item ng-focus="radioModel='Button 3'" ng-model="radioModel" b2b-btn-radio="'Button 3'" tabindex="{{(!radioModel || 'Button 3'===radioModel)?0:-1}}">Button 3</button>

-</div>

-

-<h2>Checkbox Aproach</h2>

-<span b2b-button-group class="btn-group btn-fullwidth" role="group" max-select="3" ng-model="checkModel1">

-    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button1" b2b-btn-checkbox>Button1</button>

-    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button2" b2b-btn-checkbox>Button2</button>

-    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button3" b2b-btn-checkbox>Button3</button>

-    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button4" b2b-btn-checkbox>Button4</button>

-    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button5" b2b-btn-checkbox>Button5</button>

-</span>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/buttonGroups/docs/demo.html" />

-            <file src="src/buttonGroups/docs/demo.js" />

-       </example>

-        </section>

- *

- */

-angular.module('b2b.att.buttonGroups', ['b2b.att.utilities'])

-    .constant('buttonConfig', {

-        activeClass: 'active',

-        toggleEvent: 'click'

-    })

-    .directive('b2bBtnRadio', ['buttonConfig', function (buttonConfig) {

-        var activeClass = buttonConfig.activeClass || 'active';

-        var toggleEvent = buttonConfig.toggleEvent || 'click';

-

-        return {

-            require: 'ngModel',

-            link: function (scope, element, attrs, ngModelCtrl) {

-                var notMobile = !/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

-

-                if (notMobile) {

-                    element.bind('focus', function () {

-                        scope.$apply(function () {

-                            ngModelCtrl.$setViewValue(scope.$eval(attrs.b2bBtnRadio));

-                            ngModelCtrl.$render();

-                        });

-                    });

-                }

-

-                element.attr('role', 'radio');

-

-                //model -> UI

-                ngModelCtrl.$render = function () {

-                    element.toggleClass(activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.b2bBtnRadio)));

-                    if (angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.b2bBtnRadio))) {

-                        element.attr("aria-checked", true);

-                    } else {

-                        element.attr("aria-checked", false);

-                    }

-                };

-

-                //ui->model

-                element.bind(toggleEvent, function () {

-                    if (!element.hasClass(activeClass)) {

-                        scope.$apply(function () {

-                            ngModelCtrl.$setViewValue(scope.$eval(attrs.b2bBtnRadio));

-                            ngModelCtrl.$render();

-                        });

-                    }

-                });

-            }

-        };

-    }])

-    .directive('b2bBtnCheckbox', ['buttonConfig', function (buttonConfig) {

-        var activeClass = buttonConfig.activeClass || 'active';

-        var toggleEvent = buttonConfig.toggleEvent || 'click';

-

-        return {

-            require: ['ngModel', '^^b2bButtonGroup'],

-            link: function (scope, element, attrs, ctrls) {

-

-                var ngModelCtrl = ctrls[0];

-                var parentCtrl = ctrls[1];

-

-                element.attr('role', 'checkbox');

-                element.attr('aria-describedby', parentCtrl.getStateDescriptionElemId());

-

-                function getTrueValue() {

-                    var trueValue = scope.$eval(attrs.b2bBtnCheckboxTrue);

-                    return angular.isDefined(trueValue) ? trueValue : true;

-                }

-

-                function getFalseValue() {

-                    var falseValue = scope.$eval(attrs.b2bBtnCheckboxFalse);

-                    return angular.isDefined(falseValue) ? falseValue : false;

-                }

-

-                //model -> UI

-                ngModelCtrl.$render = function () {

-                    element.toggleClass(activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue()));

-                    if ((angular.equals(ngModelCtrl.$modelValue, getTrueValue()))) {

-                        element.attr("aria-checked", true);

-                    } else {

-                        element.attr("aria-checked", false);

-                    }

-                };

-

-                //ui->model

-                element.bind(toggleEvent, function () {

-                    scope.$apply(function () {

-                        ngModelCtrl.$setViewValue(element.hasClass(activeClass) ? getFalseValue() : getTrueValue());

-                        ngModelCtrl.$render();

-                    });

-                });

-            }

-        };

-    }])

-    .directive('b2bButtonGroup', ['$timeout', '$compile', function ($timeout, $compile) {

-        return {

-            restrict: 'A',

-            scope: {

-                maxSelect: "=",

-                ngModelButtonState: '=ngModel'

-            },

-            controller: ['$scope', '$element', function ($scope, $element) {

-                $scope.nSel = 0;

-

-                var stateDescriptionElem = angular.element('<span id="b2b_button_group_' + $scope.$id + '" class="hide" aria-hidden="true">{{nSel}} of {{maxSelect}} options selected.</span>');

-                $compile(stateDescriptionElem)($scope);

-                $element.after(stateDescriptionElem);

-

-                this.getStateDescriptionElemId = function () {

-                    return stateDescriptionElem.attr('id');

-                };

-            }],

-            link: function (scope, element) {

-

-

-                var executeFxn = function () {

-                    scope.nSel = 0;

-                    angular.forEach(scope.ngModelButtonState, function (value, key) {

-                        if (value === true) {

-                            scope.nSel += 1;

-                        }

-                    });

-

-                    if (scope.nSel >= scope.maxSelect) {

-                        angular.forEach(element.children(), function (chd) {

-                            if (chd.className.indexOf('active') < 0) {

-                                chd.disabled = true;

-                                chd.setAttribute('aria-disabled', true);

-                            }

-                        });

-                    } else {

-                        angular.forEach(element.children(), function (chd) {

-                            chd.disabled = false;

-                            chd.setAttribute('aria-disabled', false);

-                        });

-                    }

-                    scope.$digest();

-                };

-

-                $timeout(function () {

-                    executeFxn();

-                });

-                element.bind('click', executeFxn);

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:buttons

- * @element input

- * @function

- *

- * @description

- *  <file src="src/buttons/docs/readme.md" />

- * @usage

- *

-Button shape

-<button class="btn" type="button">Button</button> button.btn (button shape only)

-<button aria-label="Custom aria label" class="btn" type="button">Button</button> button.btn (button shape only) with custom aria label

-<button aria-label="Click on button/Press enter" class="btn" type="button" onclick="javascript:alert('It works!');">Click on button/Press enter</button> button.btn with click functionality

-<a b2b-keyup-click="32" href="javascript:void(0)" class="btn" role="button">Button</a> a.btn (button shape only)

-<button class="btn btn-primary">Button</button> .btn-primary

-<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-primary" role="button">Button</a> a.btn-primary

-

-5 Button colors

-<button class="btn btn-secondary">Button</button> .btn-secondary

-<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-secondary" role="button">Button</a> a.btn-secondary

-<button class="btn btn-alt">Button</button> .btn-alt

-<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-alt" role="button">Button</a> a.btn-alt

-<button class="btn btn-specialty">Button</button> .btn-specialty

-<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-specialty" role="button">Button</a> a.btn-specialty

-<button class="btn btn-specialty" disabled="">Button</button> disabled="disabled"

-<a b2b-keyup-click="32" aria-disabled="true" href="javascript:void(0)" class="btn btn-primary disabled" role="button">Button</a> a.disabled

-

-3 button heights

-<button class="btn btn-secondary">Button</button> .btn is default and 46px height

-<button class="btn btn-secondary btn-medium">Button</button> .btn-medium is 42px

-<button class="btn btn-secondary btn-small">Button</button> .btn-small is 36px

-

-.row-nowrap 2 up buttons

-<div class="row-nowrap">

-    <button class="btn btn-secondary btn-fullwidth" type="button">Cancel</button>

-    <button class="btn btn-primary btn-fullwidth" type="button">Continue</button>

-</div>

-

-.row 2 up buttons (desktop) stacked (mobile) (different order)

-<div class="row cta-button-group">

-    <button class="span btn btn-secondary btn-fullwidth hidden-phone" type="button">Cancel</button>

-    <button class="span btn btn-primary btn-fullwidth" type="button">Continue</button>

-    <button class="span btn btn-secondary btn-fullwidth visible-phone" type="button">Cancel</button>

-</div>

-

- * @example

- *  <section id="code">

-               <b>HTML + AngularJS</b>

- *              <example module="b2b.att">

- *              <file src="src/buttons/docs/demo.html" />

-                 <file src="src/buttons/docs/demo.js" />

- *              </example>

-            </section>

- *

- */

-angular.module('b2b.att.buttons', ['b2b.att.utilities']);

-/**

- * @ngdoc directive

- * @name Forms.att:calendar

- *

- * @description

- *  <file src="src/calendar/docs/readme.md" />

- * @usage

- *  <input type="text" ng-model="dt" b2b-datepicker>

- *

- * @example

-   <section id="code">

-    <b>HTML + AngularJS</b>

-    <example module="b2b.att">

-     <file src="src/calendar/docs/demo.html" />

-     <file src="src/calendar/docs/demo.js" />

-    </example>

-   </section>

- */

-angular.module('b2b.att.calendar', ['b2b.att.position', 'b2b.att.utilities'])

-

-.constant('b2bDatepickerConfig', {

-    dateFormat: 'MM/dd/yyyy',

-    dayFormat: 'd',

-    monthFormat: 'MMMM',

-    yearFormat: 'yyyy',

-    dayHeaderFormat: 'EEEE',

-    dayTitleFormat: 'MMMM yyyy',

-    disableWeekend: false,

-    disableSunday: false,

-    disableDates: null,

-    onSelectClose: null,

-    startingDay: 0,

-    minDate: null,

-    maxDate: null,

-    dueDate: null,

-    fromDate: null,

-    legendIcon: null,

-    legendMessage: null,

-    calendarDisabled: false,

-    collapseWait: 0,

-    orientation: 'left',

-    inline: false,

-    helperText: 'The date you selected is $date. In case of mobile double tap to open calendar. Select a date to close the calendar.',

-    datepickerEvalAttributes: ['dateFormat', 'dayFormat', 'monthFormat', 'yearFormat', 'dayHeaderFormat', 'dayTitleFormat', 'disableWeekend', 'disableSunday', 'startingDay', 'collapseWait', 'orientation'],

-    datepickerWatchAttributes: ['min', 'max', 'due', 'from', 'legendIcon', 'legendMessage', 'ngDisabled'],

-    datepickerFunctionAttributes: ['disableDates', 'onSelectClose']

-})

-

-.factory('b2bDatepickerService', ['b2bDatepickerConfig', 'dateFilter', function (b2bDatepickerConfig, dateFilter) {

-    var setAttributes = function (attr, elem) {

-        if (angular.isDefined(attr) && attr !== null && angular.isDefined(elem) && elem !== null) {

-            var attributes = b2bDatepickerConfig.datepickerEvalAttributes.concat(b2bDatepickerConfig.datepickerWatchAttributes, b2bDatepickerConfig.datepickerFunctionAttributes);

-            for (var key in attr) {

-                var val = attr[key];

-                if (attributes.indexOf(key) !== -1 && angular.isDefined(val)) {

-                    elem.attr(key.toSnakeCase(), key);

-                }

-            }

-        }

-    };

-

-    var bindScope = function (attr, scope) {

-        if (angular.isDefined(attr) && attr !== null && angular.isDefined(scope) && scope !== null) {

-            var evalFunction = function (key, val) {

-                scope[key] = scope.$parent.$eval(val);

-            };

-

-            var watchFunction = function (key, val) {

-                scope.$parent.$watch(val, function (value) {

-                    scope[key] = value;

-                });

-                scope.$watch(key, function (value) {

-                    scope.$parent[val] = value;

-                });

-            };

-

-            var evalAttributes = b2bDatepickerConfig.datepickerEvalAttributes;

-            var watchAttributes = b2bDatepickerConfig.datepickerWatchAttributes;

-            for (var key in attr) {

-                var val = attr[key];

-                if (evalAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {

-                    evalFunction(key, val);

-                } else if (watchAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {

-                    watchFunction(key, val);

-                }

-            }

-        }

-    };

-

-    return {

-        setAttributes: setAttributes,

-        bindScope: bindScope

-    };

-}])

-

-.controller('b2bDatepickerController', ['$scope', '$attrs', 'dateFilter', '$element', '$position', 'b2bDatepickerConfig', function ($scope, $attrs, dateFilter, $element, $position, dtConfig) {

-    var format = {

-            date: getValue($attrs.dateFormat, dtConfig.dateFormat),

-            day: getValue($attrs.dayFormat, dtConfig.dayFormat),

-            month: getValue($attrs.monthFormat, dtConfig.monthFormat),

-            year: getValue($attrs.yearFormat, dtConfig.yearFormat),

-            dayHeader: getValue($attrs.dayHeaderFormat, dtConfig.dayHeaderFormat),

-            dayTitle: getValue($attrs.dayTitleFormat, dtConfig.dayTitleFormat),

-            disableWeekend: getValue($attrs.disableWeekend, dtConfig.disableWeekend),

-            disableSunday: getValue($attrs.disableSunday, dtConfig.disableSunday),

-            disableDates: getValue($attrs.disableDates, dtConfig.disableDates)

-        },

-        startingDay = getValue($attrs.startingDay, dtConfig.startingDay);

-

-    $scope.minDate = dtConfig.minDate ? $scope.resetTime(dtConfig.minDate) : null;

-    $scope.maxDate = dtConfig.maxDate ? $scope.resetTime(dtConfig.maxDate) : null;

-    $scope.dueDate = dtConfig.dueDate ? $scope.resetTime(dtConfig.dueDate) : null;

-    $scope.fromDate = dtConfig.fromDate ? $scope.resetTime(dtConfig.fromDate) : null;

-    $scope.legendIcon = dtConfig.legendIcon ? dtConfig.legendIcon : null;

-    $scope.legendMessage = dtConfig.legendMessage ? dtConfig.legendMessage : null;

-    $scope.ngDisabled = dtConfig.calendarDisabled ? dtConfig.calendarDisabled : null;

-    $scope.collapseWait = getValue($attrs.collapseWait, dtConfig.collapseWait);

-    $scope.orientation = getValue($attrs.orientation, dtConfig.orientation);

-    $scope.onSelectClose = getValue($attrs.onSelectClose, dtConfig.onSelectClose);

-

-    $scope.inline = $attrs.inline === 'true' ? true : dtConfig.inline;

-

-    function getValue(value, defaultValue) {

-        return angular.isDefined(value) ? $scope.$parent.$eval(value) : defaultValue;

-    }

-

-    function getDaysInMonth(year, month) {

-        return new Date(year, month, 0).getDate();

-    }

-

-    function getDates(startDate, n) {

-        var dates = new Array(n);

-        var current = startDate,

-            i = 0;

-        while (i < n) {

-            dates[i++] = new Date(current);

-            current.setDate(current.getDate() + 1);

-        }

-        return dates;

-    }

-

-    this.updatePosition = function (b2bDatepickerPopupTemplate) {

-        $scope.position = $position.offset($element);

-        $scope.position.top = $scope.position.top + $element.find('input').prop('offsetHeight');

-        if ($scope.orientation === 'right') {

-            $scope.position.left = $scope.position.left - (((b2bDatepickerPopupTemplate && b2bDatepickerPopupTemplate.prop('offsetWidth')) || 290) - $element.find('input').prop('offsetWidth'));

-        }

-    };

-

-    function isSelected(dt) {

-        if (dt && angular.isDate($scope.currentDate) && compare(dt, $scope.currentDate) === 0) {

-            return true;

-        }

-        return false;

-    }

-

-    function isFromDate(dt) {

-        if (dt && angular.isDate($scope.fromDate) && compare(dt, $scope.fromDate) === 0) {

-            return true;

-        }

-        return false;

-    }

-

-    function isDateRange(dt) {

-        if (dt && $scope.fromDate && angular.isDate($scope.currentDate) && (compare(dt, $scope.fromDate) >= 0) && (compare(dt, $scope.currentDate) <= 0)) {

-            return true;

-        } else if (dt && $scope.fromDate && compare(dt, $scope.fromDate) === 0) {

-            return true;

-        }

-        return false;

-    }

-

-    function isOld(date, currentMonthDate) {

-        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() < new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {

-            return true;

-        } else {

-            return false;

-        }

-    }

-

-    function isNew(date, currentMonthDate) {

-        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() > new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {

-            return true;

-        } else {

-            return false;

-        }

-    }

-

-    function isPastDue(dt) {

-        if ($scope.dueDate) {

-            return (dt > $scope.dueDate);

-        }

-        return false;

-    }

-

-    function isDueDate(dt) {

-        if ($scope.dueDate) {

-            return (dt.getTime() === $scope.dueDate.getTime());

-        }

-        return false;

-    }

-

-    var isDisabled = function (date, currentMonthDate) {

-        if ($attrs.from && !angular.isDate($scope.fromDate)) {

-            return true;

-        }

-        if (format.disableWeekend === true && (dateFilter(date, format.dayHeader) === "Saturday" || dateFilter(date, format.dayHeader) === "Sunday")) {

-            return true;

-        }

-        if (format.disableSunday === true && (dateFilter(date, format.dayHeader) === "Sunday")) {

-            return true;

-        }

-        if (isOld(date, currentMonthDate) || isNew(date, currentMonthDate)) {

-            return true;

-        }

-        return (($scope.minDate && compare(date, $scope.minDate) < 0) || ($scope.maxDate && compare(date, $scope.maxDate) > 0) || (format.disableDates && format.disableDates({

-            date: date

-        })));

-    };

-

-    var compare = function (date1, date2) {

-        return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));

-    };

-

-    function isMinDateAvailable(startDate, endDate) {

-        if (($scope.minDate && $scope.minDate.getTime() >= startDate.getTime()) && ($scope.minDate.getTime() <= endDate.getTime())) {

-            $scope.disablePrev = true;

-            $scope.visibilityPrev = "hidden";

-        } else {

-            $scope.disablePrev = false;

-            $scope.visibilityPrev = "visible";

-        }

-    }

-

-    function isMaxDateAvailable(startDate, endDate) {

-        if (($scope.maxDate && $scope.maxDate.getTime() >= startDate.getTime()) && ($scope.maxDate.getTime() <= endDate.getTime())) {

-            $scope.disableNext = true;

-            $scope.visibilityNext = "hidden";

-        } else {

-            $scope.disableNext = false;

-            $scope.visibilityNext = "visible";

-        }

-    }

-

-    function getLabel(label) {

-        if (label) {

-            var labelObj = {

-                pre: label.substr(0, 1).toUpperCase(),

-                post: label

-            };

-            return labelObj;

-        }

-        return;

-    }

-

-    function makeDate(date, dayFormat, dayHeaderFormat, isSelected, isFromDate, isDateRange, isOld, isNew, isDisabled, dueDate, pastDue) {

-        return {

-            date: date,

-            label: dateFilter(date, dayFormat),

-            header: dateFilter(date, dayHeaderFormat),

-            selected: !!isSelected,

-            fromDate: !!isFromDate,

-            dateRange: !!isDateRange,

-            oldMonth: !!isOld,

-            nextMonth: !!isNew,

-            disabled: !!isDisabled,

-            dueDate: !!dueDate,

-            pastDue: !!pastDue,

-            focusable: !((isDisabled && !(isSelected || isDateRange)) || (isOld || isNew))

-        };

-    }

-

-    this.modes = [

-        {

-            name: 'day',

-            getVisibleDates: function (date) {

-                var year = date.getFullYear(),

-                    month = date.getMonth(),

-                    firstDayOfMonth = new Date(year, month, 1),

-                    lastDayOfMonth = new Date(year, month + 1, 0);

-                var difference = startingDay - firstDayOfMonth.getDay(),

-                    numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference,

-                    firstDate = new Date(firstDayOfMonth),

-                    numDates = 0;

-

-                if (numDisplayedFromPreviousMonth > 0) {

-                    firstDate.setDate(-numDisplayedFromPreviousMonth + 1);

-                    numDates += numDisplayedFromPreviousMonth; // Previous

-                }

-                numDates += getDaysInMonth(year, month + 1); // Current

-                numDates += (7 - numDates % 7) % 7; // Next

-

-                var days = getDates(firstDate, numDates),

-                    labels = new Array(7);

-                for (var i = 0; i < numDates; i++) {

-                    var dt = new Date(days[i]);

-                    days[i] = makeDate(dt,

-                        format.day,

-                        format.dayHeader,

-                        isSelected(dt),

-                        isFromDate(dt),

-                        isDateRange(dt),

-                        isOld(dt, date),

-                        isNew(dt, date),

-                        isDisabled(dt, date),

-                        isDueDate(dt),

-                        isPastDue(dt));

-                }

-                for (var j = 0; j < 7; j++) {

-                    labels[j] = getLabel(dateFilter(days[j].date, format.dayHeader));

-                }

-                isMinDateAvailable(firstDayOfMonth, lastDayOfMonth);

-                isMaxDateAvailable(firstDayOfMonth, lastDayOfMonth);

-                return {

-                    objects: days,

-                    title: dateFilter(date, format.dayTitle),

-                    labels: labels

-                };

-            },

-            split: 7,

-            step: {

-                months: 1

-            }

-        }

-    ];

-}])

-

-.directive('b2bDatepickerPopup', ['$parse', '$log', '$timeout', '$document', '$documentBind', '$isElement', '$templateCache', '$compile', 'trapFocusInElement', '$position', '$window', function ($parse, $log, $timeout, $document, $documentBind, $isElement, $templateCache, $compile, trapFocusInElement, $position, $window) {

-    return {

-        restrict: 'EA',

-        replace: true,

-        transclude: true,

-        templateUrl: function (elem, attr) {

-            if (attr.inline === 'true') {

-                return 'b2bTemplate/calendar/datepicker-popup.html';

-            } else {

-                return 'b2bTemplate/calendar/datepicker.html';

-            }

-        },

-        scope: {},

-        require: ['b2bDatepickerPopup', 'ngModel', '?^b2bDatepickerGroup'],

-        controller: 'b2bDatepickerController',

-        link: function (scope, element, attrs, ctrls) {

-            var datepickerCtrl = ctrls[0],

-                ngModel = ctrls[1],

-                b2bDatepickerGroupCtrl = ctrls[2];

-            var b2bDatepickerPopupTemplate;

-

-            if (!ngModel) {

-                $log.error("ng-model is required.");

-                return; // do nothing if no ng-model

-            }

-

-            // Configuration parameters

-            var mode = 0,

-                selected;

-            scope.isOpen = false;

-

-            scope.headers = [];

-            scope.footers = [];

-

-            if (b2bDatepickerGroupCtrl) {

-                b2bDatepickerGroupCtrl.registerDatepickerScope(scope);

-            }

-

-            element.find('button').bind('click', function () {

-                element.find('input')[0].click();

-            });

-

-            element.find('input').bind('click', function () {

-                if (!scope.ngDisabled) {

-                    scope.isOpen = !scope.isOpen;

-                    toggleCalendar(scope.isOpen);

-                    scope.$apply();

-                    datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);

-                    $timeout(function () { 

-                        angular.element(element[0].querySelector('.datepicker-input')).scrollTop=0;

-                    },10);

-                }

-            });

-            var toggleCalendar = function (flag) {

-                if (!scope.inline) {

-                    if (flag) {

-                        b2bDatepickerPopupTemplate = angular.element($templateCache.get('b2bTemplate/calendar/datepicker-popup.html'));

-                        b2bDatepickerPopupTemplate = $compile(b2bDatepickerPopupTemplate)(scope);

-                        $document.find('body').append(b2bDatepickerPopupTemplate);

-                        b2bDatepickerPopupTemplate.bind('keydown', keyPress);

-                        $timeout(function () {

-                            scope.getFocus = true;

-                            trapFocusInElement(flag, b2bDatepickerPopupTemplate);

-                            scope.$apply();

-                            $timeout(function () {

-                                scope.getFocus = false; 

-                                scope.$apply();

-                            }, 100);

-                        });

-                    } else {

-                        b2bDatepickerPopupTemplate.unbind('keydown', keyPress);

-                        b2bDatepickerPopupTemplate.remove();

-                        element.find('button')[0].focus();

-                        scope.getFocus = false;

-                        trapFocusInElement(flag, b2bDatepickerPopupTemplate);

-                    }

-                }

-            };

-

-            var outsideClick = function (e) {

-                var isElement = $isElement(angular.element(e.target), element, $document);

-                var isb2bDatepickerPopupTemplate = $isElement(angular.element(e.target), b2bDatepickerPopupTemplate, $document);

-                if (!(isElement || isb2bDatepickerPopupTemplate)) {

-                    scope.isOpen = false;

-                    toggleCalendar(scope.isOpen);

-                    scope.$apply();

-                }

-            };

-

-            var keyPress = function (ev) {

-                if (!ev.keyCode) {

-                    if (ev.which) {

-                        ev.keyCode = ev.which;

-                    } else if (ev.charCode) {

-                        ev.keyCode = ev.charCode;

-                    }

-                }

-                if (ev.keyCode) {

-                    if (ev.keyCode === 27) {

-                        scope.isOpen = false;

-                        toggleCalendar(scope.isOpen);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode === 33) {

-                        !scope.disablePrev && scope.move(-1);

-                        $timeout(function () {

-                            scope.getFocus = true;

-                            scope.$apply();

-                            $timeout(function () {

-                                scope.getFocus = false;

-                                scope.$apply();

-                            }, 100);

-                        });

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode === 34) {

-                        !scope.disableNext && scope.move(1);

-                        $timeout(function () {

-                            scope.getFocus = true;

-                            scope.$apply();

-                            $timeout(function () {

-                                scope.getFocus = false;

-                                scope.$apply();

-                            }, 100);

-                        });

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    }

-                    scope.$apply();

-                }

-            };

-

-            $documentBind.click('isOpen', outsideClick, scope);

-

-            var modalContainer = angular.element(document.querySelector('.modalwrapper'));

-            var modalBodyContainer = angular.element(document.querySelector('.modal-body'));

-            if (modalContainer) {

-                modalContainer.bind('scroll', function () {

-                    if (b2bDatepickerPopupTemplate) {

-                        datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);

-                        scope.$apply();

-                    }

-                });

-            }

-            if (modalBodyContainer) {

-                modalBodyContainer.bind('scroll', function () {

-                    if (b2bDatepickerPopupTemplate) {

-                        datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);

-                        var datepickerTextfield = $position.offset(element.find('input'));

-                        var modalBodyPosition = $position.offset(modalBodyContainer);

-

-                        if (((datepickerTextfield.top + datepickerTextfield.height) < modalBodyPosition.top || datepickerTextfield.top > (modalBodyPosition.top + modalBodyPosition.height)) && scope.isOpen) {

-                            scope.isOpen = false;

-                            toggleCalendar(scope.isOpen);

-                        }

-                        scope.$apply();

-                    }

-                });

-            }

-            var window = angular.element($window);

-            window.bind('resize', function () {

-                if (b2bDatepickerPopupTemplate) {

-                    datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);

-                    scope.$apply();

-                }

-            });

-

-            scope.$on('$destroy', function () {

-                if (scope.isOpen) {

-                    scope.isOpen = false;

-                    toggleCalendar(scope.isOpen);

-                }

-            });

-

-            scope.resetTime = function (date) {

-                if (typeof date === 'string') {

-                    date = date + 'T12:00:00';

-                }

-                var dt;

-                if (!isNaN(new Date(date))) {

-                    dt = new Date(date);

-                } else {

-                    return null;

-                }

-                return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());

-            };

-

-            if (attrs.min) {

-                scope.$parent.$watch($parse(attrs.min), function (value) {

-                    scope.minDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-            if (attrs.max) {

-                scope.$parent.$watch($parse(attrs.max), function (value) {

-                    scope.maxDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-            if (attrs.due) {

-                scope.$parent.$watch($parse(attrs.due), function (value) {

-                    scope.dueDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-            if (attrs.from) {

-                scope.$parent.$watch($parse(attrs.from), function (value) {

-                    scope.fromDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-

-            if (attrs.legendIcon) {

-                scope.$parent.$watch(attrs.legendIcon, function (value) {

-                    scope.legendIcon = value ? value : null;

-                    refill();

-                });

-            }

-            if (attrs.legendMessage) {

-                scope.$parent.$watch(attrs.legendMessage, function (value) {

-                    scope.legendMessage = value ? value : null;

-                    refill();

-                });

-            }

-            if (attrs.ngDisabled) {

-                scope.$parent.$watch(attrs.ngDisabled, function (value) {

-                    scope.ngDisabled = value ? value : null;

-                });

-            }

-

-            // Split array into smaller arrays

-            function split(arr, size) {

-                var arrays = [];

-                while (arr.length > 0) {

-                    arrays.push(arr.splice(0, size));

-                }

-                return arrays;

-            }

-

-            function refill(date) {

-                if (angular.isDate(date) && !isNaN(date)) {

-                    selected = new Date(date);

-                } else {

-                    if (!selected) {

-                        selected = new Date();

-                    }

-                }

-

-                if (selected) {

-                    var currentMode = datepickerCtrl.modes[mode],

-                        data = currentMode.getVisibleDates(selected);

-                    scope.rows = split(data.objects, currentMode.split);

-                    var flag = false;

-                    var startFlag = false;

-                    var firstSelected = false;

-                    for (var i = 0; i < scope.rows.length; i++) {

-                        for (var j = 0; j < scope.rows[i].length; j++) {

-

-                            if (scope.rows[i][j].label === "1" && !firstSelected) {

-                                firstSelected = true;

-                                var firstDay = scope.rows[i][j];

-                            }

-

-                            if (scope.rows[i][j].selected === true) {

-                                flag = true;

-                                break;

-                            }

-                        }

-                        if (flag) {

-                            break;

-                        }

-                    }

-                    if (!flag) {

-                        firstDay.firstFocus = true;

-                    }

-

-                    scope.labels = data.labels || [];

-                    scope.title = data.title;

-

-                    datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);

-                }

-            }

-

-            scope.select = function (date) {

-                var dt = new Date(date.getFullYear(), date.getMonth(), date.getDate());

-                if (!scope.onSelectClose || (scope.onSelectClose && scope.onSelectClose({

-                        date: dt

-                    }) !== false)) {

-                    scope.currentDate = dt;

-                    if (angular.isNumber(scope.collapseWait)) {

-                        $timeout(function () {

-                            scope.isOpen = false;

-                            toggleCalendar(scope.isOpen);

-                        }, scope.collapseWait);

-                    } else {

-                        scope.isOpen = false;

-                        toggleCalendar(scope.isOpen);

-                    }

-                }

-            };

-

-            scope.move = function (direction,$event) {

-                var step = datepickerCtrl.modes[mode].step;

-                selected.setDate(1);

-                selected.setMonth(selected.getMonth() + direction * (step.months || 0));

-                selected.setFullYear(selected.getFullYear() + direction * (step.years || 0));

-                refill();

-

-                $timeout(function () {

-                    trapFocusInElement();

-                }, 100);

-

-                $event.preventDefault();

-                $event.stopPropagation();

-            };

-

-            scope.trapFocus = function () {

-                $timeout(function () {

-                    trapFocusInElement();

-                }, 100);

-            };

-

-            scope.$watch('currentDate', function (value) {

-                if (angular.isDefined(value) && value !== null) {

-                    refill(value);

-                } else {

-                    refill();

-                }

-                ngModel.$setViewValue(value);

-            });

-

-            ngModel.$render = function () {

-                scope.currentDate = ngModel.$viewValue;

-            };

-

-            var stringToDate = function (value) {

-                if (!isNaN(new Date(value))) {

-                    value = new Date(value);

-                }

-                return value;

-            };

-            ngModel.$formatters.unshift(stringToDate);

-        }

-    };

-}])

-

-.directive('b2bDatepicker', ['$compile', '$log', 'b2bDatepickerConfig', 'b2bDatepickerService', function ($compile, $log, b2bDatepickerConfig, b2bDatepickerService) {

-    return {

-        restrict: 'A',

-        scope: {

-            disableDates: '&',

-            onSelectClose: '&'

-        },

-        require: 'ngModel',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            var dateFormatString = angular.isDefined(attr.dateFormat) ? scope.$parent.$eval(attr.dateFormat) : b2bDatepickerConfig.dateFormat;

-            var helperText = angular.isDefined(attr.helperText) ? scope.$parent.$eval(attr.helperText) : b2bDatepickerConfig.helperText;

-            helperText = helperText.replace('$date', '{{dt | date : \'' + dateFormatString + '\'}}');

-

-            var inline = false;

-            if (elem.prop('nodeName') !== 'INPUT') {

-                inline = true;

-            }

-

-            var calendarIcon = '<i class="icon-primary-calendar" aria-hidden="true"></i>'

-            var selectedDateMessage = '<button id="' + attr.btnId + '" type="button" class="span12 faux-input" ng-disabled="ngDisabled"><span class="hidden-spoken">' + helperText + '</span></button>';

-

-            elem.removeAttr('b2b-datepicker');

-            elem.removeAttr('ng-model');

-            elem.removeAttr('ng-disabled');

-            elem.addClass('datepicker-input');

-            elem.attr('ng-model', 'dt');

-            elem.attr('aria-describedby', 'datepicker');

-            elem.attr('aria-hidden', 'true');

-            elem.attr('tabindex', '-1');

-            elem.attr('readonly', 'true');

-            elem.attr('ng-disabled', 'ngDisabled');

-            elem.attr('b2b-format-date', dateFormatString);

-

-            var wrapperElement = angular.element('<div></div>');

-            wrapperElement.attr('b2b-datepicker-popup', '');

-            wrapperElement.attr('ng-model', 'dt');

-            if (inline) {

-                wrapperElement.attr('inline', inline);

-            }

-

-            b2bDatepickerService.setAttributes(attr, wrapperElement);

-            b2bDatepickerService.bindScope(attr, scope);

-

-            wrapperElement.html('');

-            wrapperElement.append(calendarIcon);

-            wrapperElement.append(selectedDateMessage);

-            wrapperElement.append(elem.prop('outerHTML'));

-

-            var elm = wrapperElement.prop('outerHTML');

-            elm = $compile(elm)(scope);

-            elem.replaceWith(elm);

-        }],

-        link: function (scope, elem, attr, ctrl) {

-            if (!ctrl) {

-                $log.error("ng-model is required.");

-                return; // do nothing if no ng-model

-            }

-

-            scope.$watch('dt', function (value) {

-                ctrl.$setViewValue(value);

-            });

-            ctrl.$render = function () {

-                scope.dt = ctrl.$viewValue;

-            };

-        }

-    };

-}])

-

-.directive('b2bDatepickerGroup', [function () {

-    return {

-        restrict: 'EA',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            this.$$headers = [];

-            this.$$footers = [];

-            this.registerDatepickerScope = function (datepickerScope) {

-                datepickerScope.headers = this.$$headers;

-                datepickerScope.footers = this.$$footers;

-            };

-        }],

-        link: function (scope, elem, attr, ctrl) {}

-    };

-}])

-

-.directive('b2bFormatDate', ['dateFilter', function (dateFilter) {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elem, attr, ctrl) {

-            var b2bFormatDate = "";

-            attr.$observe('b2bFormatDate', function (value) {

-                b2bFormatDate = value;

-            });

-            var dateToString = function (value) {

-                if (!isNaN(new Date(value))) {

-                    return dateFilter(new Date(value), b2bFormatDate);

-                }

-                return value;

-            };

-            ctrl.$formatters.unshift(dateToString);

-        }

-    };

-}])

-

-.directive('b2bDatepickerHeader', [function () {

-    return {

-        restrict: 'EA',

-        require: '^b2bDatepickerGroup',

-        transclude: true,

-        replace: true,

-        template: '',

-        compile: function (elem, attr, transclude) {

-            return function link(scope, elem, attr, ctrl) {

-                if (ctrl) {

-                    ctrl.$$headers.push(transclude(scope, function () {}));

-                }

-                elem.remove();

-            };

-        }

-    };

-}])

-

-.directive('b2bDatepickerFooter', [function () {

-    return {

-        restrict: 'EA',

-        require: '^b2bDatepickerGroup',

-        transclude: true,

-        replace: true,

-        template: '',

-        compile: function (elem, attr, transclude) {

-            return function link(scope, elem, attr, ctrl) {

-                if (ctrl) {

-                    ctrl.$$footers.push(transclude(scope, function () {}));

-                }

-                elem.remove();

-            };

-        }

-    };

-}]);

-/**

- * @ngdoc directive

- * @name Forms.att:checkboxes

- *

- * @description

- *  <file src="src/checkboxes/docs/readme.md" />

- * @usage

- * See demo section

- * @example

- <example module="b2b.att">

- <file src="src/checkboxes/docs/demo.html" />

- <file src="src/checkboxes/docs/demo.js" />

- </example>

- */

-angular.module('b2b.att.checkboxes', ['b2b.att.utilities'])

-.directive('b2bSelectGroup', [function (){

-        return {

-            restrict: 'A',

-            require: 'ngModel',

-            scope: {

-                checkboxes: "="

-            },

-            link: function (scope, elem, attr, ctrl) {

-                elem.bind('change', function () {

-                    var isChecked = elem.prop('checked');

-                    angular.forEach(scope.checkboxes, function (item) {

-                        item.isSelected = isChecked;

-                    });

-                    scope.$apply();

-                });

-                scope.$watch('checkboxes', function () {

-                    var setBoxes = 0;

-                    if(scope.checkboxes === undefined) {

-                        return;

-                    }

-                    angular.forEach(scope.checkboxes, function (item) {

-                        if (item.isSelected) {

-                            setBoxes++; 

-                        } 

-                    });

-                    elem.prop('indeterminate', false);

-                    if ( scope.checkboxes !==undefined && setBoxes === scope.checkboxes.length && scope.checkboxes.length > 0) { 

-                        ctrl.$setViewValue(true); 

-                        elem.removeClass('indeterminate');

-                    } else if (setBoxes === 0) { 

-                       ctrl.$setViewValue(false); 

-                       elem.removeClass('indeterminate');

-                    } else { 

-                        ctrl.$setViewValue(false); 

-                        elem.addClass('indeterminate');

-                        elem.prop('indeterminate', true); 

-                    }

-                    ctrl.$render();

-                }, true);

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Misc.att:coachmark

- *

- * @description

- * <file src="src/coachmark/docs/readme.md" />

- *

- * @usage

- *

-<button b2b-coachmark start-coachmark-callback="startCoachmark()" end-coachmark-callback="endCoachmark()" action-coachmark-callback="actionCoachmark(action)" coachmark-index="coachmarkIndex" coachmarks="coachmarkElements" id="coachmark0" class="btn btn-alt">Initiate tour</button>

-

- * @example

-    <section id="code">   

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/coachmark/docs/demo.html" />

-            <file src="src/coachmark/docs/demo.js" />

-        </example>

-    </section>

- */

-

-angular.module('b2b.att.coachmark', ['b2b.att.utilities','b2b.att.position'])

-        

-    .directive('b2bCoachmark', ['$document', '$compile', '$position', '$timeout', function($document, $compile, $position, $timeout) {

-        return {

-            restrict: 'A',

-             scope: {

-                coachmarks: '=',

-                coachmarkIndex: '=',

-                startCoachmarkCallback: '&',

-                endCoachmarkCallback: '&',

-                actionCoachmarkCallback: '&'

-            },

-            link: function (scope, element, attrs, ctrl) {

-                var coachmarkItems = scope.coachmarks;

-                var body = $document.find('body').eq(0);

-                var coackmarkJqContainer;

-                var coackmarkContainer;

-                var coachMarkElement;

-                var backdropjqLiteEl;

-                var coachmarkHighlight;

-                var initaitedCoachmark = false;

-                scope.coackmarkElPos ={

-                    'top':'',

-                    'left':''

-                };

-                

-                scope.currentCoachmark = {};

-                

-                

-                var coachmarkBackdrop = function(){

-                    backdropjqLiteEl = angular.element('<div class="b2b-modal-backdrop fade in hidden-by-modal"></div>');

-                    body.append(backdropjqLiteEl);

-

-                    backdropjqLiteEl.bind('click', function() {

-                        scope.closeCoachmark();

-                        scope.$apply();

-                    });

-                };

-                

-                

-                scope.closeButtonFocus = function(){

-                    if(document.getElementsByClassName('b2b-coachmark-header').length >0){

-                        document.getElementsByClassName('b2b-coachmark-header')[0].scrollLeft = 0;

-                        document.getElementsByClassName('b2b-coachmark-header')[0].scrollTop = 0;

-                    }

-                }

-

-                scope.actionCoachmark = function(action){

-                    scope.actionCoachmarkCallback({

-                        'action':action

-                    })

-                };

-                

-                scope.closeCoachmark = function(){

-                    initaitedCoachmark = false;

-                    backdropjqLiteEl.remove();  

-                    coackmarkContainer.remove();

-                    coachmarkHighlight.remove();

-                    if(coachMarkElement !== undefined && coachMarkElement !==""){

-                        coachMarkElement.removeClass('b2b-coachmark-label')

-                    }

-                    if (angular.isFunction(scope.endCoachmarkCallback)){

-                        scope.endCoachmarkCallback();   

-                    }

-                    element[0].focus();

-                }

-                

-                function showCoachmark(targetElement) {

-                    scope.currentCoachmark = targetElement;

-                    if(coachMarkElement !== undefined && coachMarkElement !==""){

-                        coachMarkElement.removeClass('b2b-coachmark-label')

-                        coackmarkContainer.remove();

-                        coachmarkHighlight.remove();

-                    }

-                    coachMarkElement = angular.element(document.querySelector(targetElement.elementId));

-                    coachMarkElement.addClass('b2b-coachmark-label');

-                    var elementPosition = $position.offset(coachMarkElement);

-                    

-                    coachmarkHighlight = angular.element('<div class="b2b-coachmark-highlight"></div><div class="b2b-coachmark-highlight b2b-coachmark-highlight-mask"></div>');

-                    coachmarkHighlight.css({

-                        'width': (elementPosition.width + 20) +'px',

-                        'top': (elementPosition.top -10) + 'px',

-                        'left': (elementPosition.left - 10) + 'px',

-                        'height': (elementPosition.height + 20) +'px'

-                    }); 

-                    body.append(coachmarkHighlight);

-                    

-                    scope.coackmarkElPos.top = (elementPosition.top + elementPosition.height + 32) + 'px';

-                    scope.coackmarkElPos.left = (elementPosition.left - 158 + elementPosition.width / 2 ) + 'px';

-                    coackmarkJqContainer = angular.element('<div b2b-coachmark-container b2b-trap-focus-inside-element="true"></div>');

-                    coackmarkContainer = $compile(coackmarkJqContainer)(scope);

-                    body.append(coackmarkContainer);

-                    

-                    $timeout(function () {

-                        var currentCoachmarkContainer = document.getElementsByClassName('b2b-coachmark-container')[0];

-                        currentCoachmarkContainer.focus();

-                        var coachmarkHeight = window.getComputedStyle(currentCoachmarkContainer).height.split('px')[0];

-                        var newOffsetHeight = (Math.round(elementPosition.top) - Math.round(coachmarkHeight));

-                        

-                        // We need a slight offset to show the lightboxed item

-                        TweenLite.to(window, 2, {scrollTo:{x: (scope.coackmarkElPos.left.split('px')[0]-100), y: newOffsetHeight}});

-                    }, 200);

-                }

-                

-                element.bind('click', function (e) {

-                    initaitedCoachmark = true;

-                    if(scope.coachmarkIndex === -1 || scope.coachmarkIndex >= coachmarkItems.length ){

-                        scope.coachmarkIndex = 0;

-                    }

-                    scope.$watch('coachmarkIndex', function () {

-                        if(initaitedCoachmark === true){

-                            if(scope.coachmarkIndex === -1 || scope.coachmarkIndex >= coachmarkItems.length ){

-                                scope.closeCoachmark();

-                            }else{

-                                showCoachmark(coachmarkItems[scope.coachmarkIndex]);

-                            }

-                        }

-                    });

-                    coachmarkBackdrop();

-                    showCoachmark(coachmarkItems[scope.coachmarkIndex]);

-                    if (angular.isFunction(scope.startCoachmarkCallback)){

-                        scope.startCoachmarkCallback(); 

-                    }

-                    $document.bind('keydown', function (evt) {

-                        if (evt.which === 27 && initaitedCoachmark) {

-                            scope.closeCoachmark();

-                            scope.$apply(); 

-                        }

-                    });

-                });

-

-            }

-        };

-    }])

-    .directive('b2bCoachmarkContainer', ['$document', '$position', function($document, $position) {

-        return {

-            restrict: 'A',

-            transclude: true,

-            replace: true,

-            templateUrl: 'b2bTemplate/coachmark/coachmark.html',

-            link: function (scope, element, attrs, ctrl) {

-                            

-            }

-        };  

-    }]);

-    

-/** 

- * @ngdoc directive 

- * @name Template.att:Configuration Section 

- * 

- * @description 

- *  <file src="src/configurationSection/docs/readme.md" /> 

- * 

- * @example 

- *  <section id="code"> 

-        <b>HTML + AngularJS</b> 

-        <example module="b2b.att"> 

-            <file src="src/configurationSection/docs/demo.html" /> 

-            <file src="src/configurationSection/docs/demo.js" /> 

-       </example> 

-    </section>    

- * 

- */

-angular.module('b2b.att.configurationSection', [])

-  

-/** 

- * @ngdoc directive 

- * @name Template.att:Directory Listing 

- * 

- * @description 

- *  <file src="src/directoryListingTemplate/docs/readme.md" /> 

- * 

- * @example 

- *  <section id="code"> 

-        <b>HTML + AngularJS</b> 

-        <example module="b2b.att"> 

-            <file src="src/directoryListingTemplate/docs/demo.html" /> 

-            <file src="src/directoryListingTemplate/docs/demo.js" /> 

-       </example> 

-    </section>    

- * 

- */

-angular.module('b2b.att.directoryListingTemplate', [])

-  

-/**

- * @ngdoc directive

- * @name Forms.att:dropdowns

- *

- * @description

- *  <file src="src/dropdowns/docs/readme.md" />

- * @usage

- *

- * @example

-   <section id="code">

-    <example module="b2b.att">

-     <file src="src/dropdowns/docs/demo.html" />

-     <file src="src/dropdowns/docs/demo.js" />

-    </example>

-   </section>

- */

-angular.module('b2b.att.dropdowns', ['b2b.att.utilities', 'b2b.att.position', 'ngSanitize'])

-

-.constant('b2bDropdownConfig', {

-    prev: '37,38',

-    next: '39,40',

-    menuKeyword: 'menu',

-    linkMenuKeyword: 'link-menu',

-    largeKeyword: 'large',

-    smallKeyword: 'small'

-})  

-

-.directive("b2bDropdown", ['$timeout', '$compile', '$templateCache', 'b2bUserAgent', 'b2bDropdownConfig', '$position', function ($timeout, $compile, $templateCache, b2bUserAgent, b2bDropdownConfig, $position) {

-    return {

-        restrict: 'A',

-        scope: true,

-        require: 'ngModel',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            scope.isInputDropdown = true;

-            scope.placeHoldertext = attr.placeholderText;

-            if (attr.type) {

-                if (attr.type.indexOf(b2bDropdownConfig.menuKeyword) > -1 || attr.type.indexOf(b2bDropdownConfig.linkMenuKeyword) > -1) {

-                    scope.isInputDropdown = false;

-                    if (attr.type.indexOf(b2bDropdownConfig.linkMenuKeyword) > -1) {

-                        scope.dropdownType = b2bDropdownConfig.linkMenuKeyword;

-                    } else if (attr.type.indexOf(b2bDropdownConfig.menuKeyword) > -1) {

-                        scope.dropdownType = b2bDropdownConfig.menuKeyword;

-                    }

-                }

-                if (attr.type.indexOf(b2bDropdownConfig.largeKeyword) > -1) {

-                    scope.dropdownSize = b2bDropdownConfig.largeKeyword;

-                } else if (attr.type.indexOf(b2bDropdownConfig.smallKeyword) > -1) {

-                    scope.dropdownSize = b2bDropdownConfig.smallKeyword;

-                }

-            }

-

-            scope.labelText = attr.labelText;

-

-            scope.setBlur = function () {

-                scope.setTouched();

-            };

-

-            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {

-                var formCtrl = elem.controller('form');

-                scope.setNgModelController = function (name, ngModelCtrl) {

-                    if (name && formCtrl && ngModelCtrl) {

-                        formCtrl[name] = ngModelCtrl;

-                    }

-                };

-                scope.setOptionalCta = function (optionalCta) {

-                    scope.optionalCta = optionalCta;

-                };

-                var innerHtml = angular.element('<div></div>').append(elem.html());

-                innerHtml = ($compile(innerHtml)(scope)).html();

-                var template = angular.element($templateCache.get('b2bTemplate/dropdowns/b2bDropdownDesktop.html'));

-                template.find('ul').eq(0).append(innerHtml);

-                template = $compile(template)(scope);

-                elem.replaceWith(template);

-            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {

-                elem.css({

-                    'opacity': '0',

-                    'filter': 'alpha(opacity=0)'

-                });

-                elem.addClass('awd-select isWrapped');

-                elem.wrap('<span class="selectWrap"></span>');

-                var cover = angular.element('<span aria-hidden="true"><i class="icon-primary-down" aria-hidden="true"></i></span>');

-                elem.parent().append(cover);

-                elem.parent().append('<i class="icon-primary-down" aria-hidden="true"></i>');

-                var set = function () {

-                    var sel = elem[0] ? elem[0] : elem;

-                    var selectedText = "";

-                    var selIndex = sel.selectedIndex;

-                    if (typeof selIndex !== 'undefined') {

-                        selectedText = sel.options[selIndex].text;

-                    }

-                    cover.text(selectedText).append('<i class="icon-primary-down" aria-hidden="true"></i>');

-                };

-                var update = function (value) {

-                    $timeout(set, 100);

-                };

-

-                if (attr.ngModel) {

-                    scope.$watch(attr.ngModel, function (newVal, oldVal) {

-                        update();

-                    });

-                }

-                elem.bind('keyup', function (ev) {

-                    if (ev.keyCode === keymap.KEY.TAB || ev.keyCode === keymap.KEY.ESC) {

-                        return;

-                    }

-                    set();

-                });

-            }

-        }],  

-        link: function (scope, elem, attr, ctrl) {

-            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {

-                scope.updateModel = function () {

-                    if (ctrl.$dirty) {

-                        debugger;

-                    }

-                    ctrl.$setViewValue(scope.currentSelected.value);

-                    if (scope.dropdownRequired && scope.currentSelected.value === '') {

-                        scope.setRequired(false);

-                    } else {

-                        scope.setRequired(true);

-                    }

-

-                    if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {

-                        $timeout(function () {

-                            scope.appendCaretPositionStyle();

-                        }, 100);

-                    }

-                };

-                ctrl.$render = function () {

-//                    if(ctrl.$dirty || ctrl.$pristine) {

-                        $timeout(function () {

-

-                            if ((angular.isUndefined(ctrl.$viewValue) || ctrl.$viewValue == '') && (angular.isUndefined(scope.placeHoldertext) || scope.placeHoldertext == '')) {

-                                scope.dropdownLists[ctrl.$viewValue] && scope.dropdownLists[ctrl.$viewValue][0].updateDropdownValue();

-                            } else if ((angular.isUndefined(scope.placeHoldertext) || scope.placeHoldertext == '') && ctrl.$viewValue !== '' ) {

-                                scope.dropdownLists[ctrl.$viewValue] && scope.dropdownLists[ctrl.$viewValue][0].updateDropdownValue();

-                            } else if ((angular.isUndefined(ctrl.$viewValue) || ctrl.$viewValue == '') && scope.placeHoldertext !== '' )  {

-                                scope.currentSelected.text = scope.placeHoldertext; 

-                            } else {

-                                scope.dropdownLists[ctrl.$viewValue] && scope.dropdownLists[ctrl.$viewValue][0].updateDropdownValue();

-                            }

-

-                        }, 100);

-                    };

-//                }

-                scope.disabled = false;

-                scope.dropdownName = attr.name;

-                scope.dropdownId = attr.id;

-                scope.labelId = attr.ariaLabelledby;

-                scope.dropdownDescribedBy = attr.ariaDescribedby;

-                if (attr.required) {

-                    scope.dropdownRequired = true;

-                } else {

-                    scope.dropdownRequired = false;

-                }

-                elem.removeAttr('name');

-                elem.removeAttr('id');

-                scope.$parent.$watch(attr.ngDisabled, function (val) {

-                    scope.disabled = val;

-                });

-            }

-        }

-    };

-}])

-

-.directive("b2bDropdownToggle", ['$document', '$documentBind', '$isElement', 'b2bDropdownConfig', 'keymap', 'b2bUtilitiesConfig', '$timeout', '$position', function ($document, $documentBind, $isElement, b2bDropdownConfig, keymap, b2bUtilitiesConfig, $timeout, $position) {

-    return {

-        restrict: 'A',

-        require: '?^b2bKey',

-        link: function (scope, elem, attr, ctrl) {

-            scope.appendCaretPositionStyle = function () {

-                while (document.querySelector('style.b2bDropdownCaret')) {

-                    document.querySelector('style.b2bDropdownCaret').remove();

-                };

-                var caretPosition = $position.position(elem).width - 26;

-                if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {

-                    var template = angular.element('<style class="b2bDropdownCaret" type="text/css">.linkSelectorModule .active+.moduleWrapper:before {left: ' + caretPosition + 'px;}</style>');

-                    $document.find('head').append(template);

-                }

-            };

-

-            if (scope.isInputDropdown && (scope.labelText !== undefined)) {

-                elem.attr('aria-label', scope.labelText);

-            }

-

-            scope.toggleFlag = false;

-            scope.dropdownLists = {};

-            scope.dropdownListValues = [];

-            scope.dropdown = {

-                totalIndex: -1

-            };

-            scope.currentSelected = {

-                value: '',

-                text: '',

-                label: '',

-                index: -1

-            };

-            var searchString = '';

-            var searchElement = function (searchExp) {

-                var regex = new RegExp("\\b" + searchExp, "gi");

-                var position = scope.dropdownListValues.regexIndexOf(regex, scope.currentSelected.index + 1, true);

-                if (position > -1) {

-                    return position;

-                }

-                return undefined;

-            };

-            var startTimer = function (time) {

-                if (searchString === '') {

-                    $timeout(function () {

-                        searchString = '';

-                    }, time);

-                }

-            };

-            scope.toggleDropdown = function (toggleFlag) {

-                if (!scope.disabled) {

-                    if (angular.isDefined(toggleFlag)) {

-                        scope.toggleFlag = toggleFlag;

-                    } else {

-                        scope.toggleFlag = !scope.toggleFlag;

-                    }

-                    if (!scope.toggleFlag) {

-                        if (scope.isInputDropdown) {

-                            elem.parent().find('input')[0].focus();

-                        } else {

-                            elem.parent().find('button')[0].focus();

-                        }

-                    } else {

-                        scope.dropdown.highlightedValue = scope.currentSelected.value;

-                        if (ctrl && ctrl.enableSearch) {

-                            if (angular.isDefined(scope.dropdownLists[scope.currentSelected.value])) {

-                                ctrl.resetCounter(scope.dropdownLists[scope.currentSelected.value][2]);

-                            }

-                        }

-                        if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {

-                            scope.appendCaretPositionStyle();

-                        }

-                    }

-                }

-            };

-

-            elem.bind('keydown', function (ev) {

-                if (!ev.keyCode) {

-                    if (ev.which) {

-                        ev.keyCode = ev.which;

-                    } else if (ev.charCode) {

-                        ev.keyCode = ev.charCode;

-                    }

-                }

-                if (!scope.toggleFlag) {

-                    if (ev.keyCode) {

-                        var currentIndex = scope.currentSelected.index;

-                        if (ev.altKey === true && ev.keyCode === keymap.KEY.DOWN) {

-                            scope.toggleDropdown(true);

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        } else if (b2bDropdownConfig.prev.split(',').indexOf(ev.keyCode.toString()) > -1) {

-                            angular.isDefined(scope.dropdownListValues[currentIndex - 1]) ? scope.dropdownLists[scope.dropdownListValues[currentIndex - 1]][0].updateDropdownValue() : angular.noop();

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        } else if (b2bDropdownConfig.next.split(',').indexOf(ev.keyCode.toString()) > -1) {

-                            angular.isDefined(scope.dropdownListValues[currentIndex + 1]) ? scope.dropdownLists[scope.dropdownListValues[currentIndex + 1]][0].updateDropdownValue() : angular.noop();

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        } else if (ev.keyCode >= 48 && ev.keyCode <= 105) {

-                            startTimer(b2bUtilitiesConfig.searchTimer);

-                            searchString = searchString + (keymap.MAP[ev.keyCode] || '');

-                            var position = searchElement(searchString);

-                            angular.isDefined(scope.dropdownListValues[position]) ? scope.dropdownLists[scope.dropdownListValues[position]][0].updateDropdownValue() : angular.noop();

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        }

-                    }

-                } else {

-                    if (ev.altKey === true && ev.keyCode === keymap.KEY.UP) {

-                        scope.toggleDropdown(false);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode === keymap.KEY.TAB || ev.keyCode === keymap.KEY.ESC) {

-                        scope.toggleDropdown(false);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    }

-                }

-                scope.$apply(); // TODO: Move this into each block to avoid expensive digest cycles

-            });

-            var outsideClick = function (e) {

-                var isElement = $isElement(angular.element(e.target), elem.parent(), $document);

-                if (!isElement) {

-                    scope.toggleDropdown(false);

-                    scope.$apply();

-                }

-            };

-            $documentBind.click('toggleFlag', outsideClick, scope);

-        }

-    };

-}])

-

-.directive("b2bDropdownGroup", ['$compile', '$templateCache', 'b2bUserAgent', function ($compile, $templateCache, b2bUserAgent) {

-    return {

-        restrict: 'A',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {

-                var innerHtml = angular.element('<div></div>').append(elem.html());

-                innerHtml = ($compile(innerHtml)(scope)).html();

-                var template = angular.element($templateCache.get('b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html'));

-                template.attr('ng-repeat', attr.optGroupRepeat);

-                template.attr('label', elem.attr('label'));

-                template.find('ul').append(innerHtml);

-                elem.replaceWith(template);

-            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {

-                var template = angular.element(elem.prop('outerHTML'));

-                template.attr('ng-repeat', attr.optGroupRepeat);

-                template.removeAttr('b2b-dropdown-group');

-                template.removeAttr('opt-group-repeat');

-                template = $compile(template)(scope);

-                elem.replaceWith(template);

-            }

-        }]

-    };

-}])

-

-.directive("b2bDropdownGroupDesktop", [function () {

-    return {

-        restrict: 'A',

-        scope: true,

-        link: function (scope, elem, attr, ctrl) {

-            scope.groupHeader = attr.label;

-        }

-    };

-}])

-

-.directive("b2bDropdownList", ['$compile', '$templateCache', 'b2bUserAgent', function ($compile, $templateCache, b2bUserAgent) {

-    return {

-        restrict: 'A',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {

-                var innerHtml = angular.element('<div></div>').append(elem.html());

-                innerHtml = ($compile(innerHtml)(scope)).html();

-                var template = angular.element($templateCache.get('b2bTemplate/dropdowns/b2bDropdownListDesktop.html'));

-                template.attr('ng-repeat', attr.optionRepeat);

-                template.attr('value', elem.attr('value'));

-                template.attr('search-key', elem.attr('value'));

-                if (elem.attr('aria-describedby')){

-                    template.attr('aria-describedby', attr.ariaDescribedby);

-                }

-                if (elem.attr('imgsrc')) {

-                    if (elem.attr('imgalt')) {

-                        template.append('<img role="presentation" ng-src="' + elem.attr('imgsrc') + '" alt="' + elem.attr('imgalt') + '"/>');

-                    } else {

-                        template.append('<img role="presentation" ng-src="' + elem.attr('imgsrc') + '" alt=""/>');

-                    }

-                }

-                template.append(innerHtml);

-                elem.replaceWith(template);

-            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {

-                var template = angular.element(elem.prop('outerHTML'));

-                template.attr('ng-repeat', attr.optionRepeat);

-                if (elem.attr('aria-describedby')){

-                    template.attr('aria-describedby', attr.ariaDescribedby);

-                }

-                template.removeAttr('b2b-dropdown-list');

-                template.removeAttr('option-repeat');

-                template = $compile(template)(scope);

-                elem.replaceWith(template);

-            }

-        }]

-    };

-}])

-

-.directive("b2bDropdownListDesktop", ['$sce', 'keymap', 'b2bDropdownConfig', function ($sce, keymap, b2bDropdownConfig) {

-    return {

-        restrict: 'A',

-        scope: true,

-        link: function (scope, elem, attr, ctrl) {

-            var dropdownListValue = scope.dropdownListValue = attr.value;

-            scope.dropdown.totalIndex++;

-            var dropdownListIndex = scope.dropdown.totalIndex;

-            scope.dropdownListValues.push(dropdownListValue);

-            scope.dropdownLists[dropdownListValue] = [];

-            scope.dropdownLists[dropdownListValue][0] = scope;

-            scope.dropdownLists[dropdownListValue][1] = elem;

-            scope.dropdownLists[dropdownListValue][2] = dropdownListIndex;

-            scope.updateDropdownValue = function () {

-                scope.currentSelected.value = dropdownListValue;

-                if (scope.isInputDropdown) {

-                    scope.currentSelected.text = elem.text();

-                } else if ((scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) || (scope.dropdownType === b2bDropdownConfig.menuKeyword && scope.dropdownSize === b2bDropdownConfig.smallKeyword)) {

-                    scope.currentSelected.text = dropdownListValue;

-                } else if (scope.dropdownType === b2bDropdownConfig.menuKeyword) {

-                    scope.currentSelected.text = $sce.trustAsHtml(elem.html());

-                }

-                if (scope.isInputDropdown) {

-                    scope.currentSelected.label = elem.text();

-                } else if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {

-                    scope.currentSelected.label = dropdownListValue;

-                } else if (scope.dropdownType === b2bDropdownConfig.menuKeyword) {

-                    scope.currentSelected.label = elem.text();

-                }

-                scope.currentSelected.index = dropdownListIndex;

-                scope.updateModel();

-            };

-            scope.selectDropdownItem = function () {

-                scope.setDirty();

-                scope.updateDropdownValue();

-                scope.toggleDropdown(false);

-            };

-            scope.highlightDropdown = function () {

-                scope.dropdown.highlightedValue = dropdownListValue;

-            };

-            elem.bind('mouseover', function (ev) {

-                elem[0].focus();

-            });

-            elem.bind('keydown', function (ev) {

-                if (!ev.keyCode) {

-                    if (ev.which) {

-                        ev.keyCode = ev.which;

-                    } else if (ev.charCode) {

-                        ev.keyCode = ev.charCode;

-                    }

-                }

-                if (ev.altKey === true && ev.keyCode === keymap.KEY.UP) {

-                    scope.toggleDropdown(false);

-                    ev.preventDefault();

-                    ev.stopPropagation();

-                } else if (ev.keyCode === keymap.KEY.TAB || ev.keyCode === keymap.KEY.ESC) {

-                    scope.toggleDropdown(false);

-                    ev.preventDefault();

-                    ev.stopPropagation();

-                }

-                scope.$apply();

-            });

-        }

-    };

-}])

-

-.directive("b2bDropdownRepeat", ['$compile', 'b2bUserAgent', function ($compile, b2bUserAgent) {

-    return {

-        restrict: 'A',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {

-                var innerHtml = angular.element('<div></div>').append(elem.html());

-                innerHtml = ($compile(innerHtml)(scope)).html();

-                var template = angular.element('<div></div>');

-                template.attr('ng-repeat', attr.b2bDropdownRepeat);

-                template.append(innerHtml);

-                elem.replaceWith(template);

-            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {

-                angular.noop();

-            }

-        }]

-    };

-}])

-

-.directive("b2bDropdownValidation", ['$timeout', function ($timeout) {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elem, attr, ctrl) {

-            $timeout(function () {

-                scope.setNgModelController(attr.name, ctrl);

-            }, 100);

-            scope.setDirty = function () {

-                if (ctrl.$dirty === false) {

-                    ctrl.$dirty = true;

-                    ctrl.$pristine = false;

-                }

-            };

-            scope.setTouched = function () {

-                if (ctrl.$touched === false) {

-                    ctrl.$touched = true;

-                    ctrl.$pristine = false;

-                }

-            };

-            scope.setRequired = function (flag) {

-                ctrl.$setValidity('required', flag);

-            };

-        }

-    };

-}])

-

-.directive('b2bDropdownOptionalCta', [function () {

-    return {

-        restrict: 'EA',

-        transclude: true,

-        replace: true,

-        template: '',

-        compile: function (elem, attr, transclude) {

-            return function link(scope, elem, attr, ctrl) {

-                if (scope.setOptionalCta) {

-                    scope.setOptionalCta(transclude(scope, function () {}));

-                }

-                elem.remove();

-            };

-        }

-    };

-}]);

-/**

- * @ngdoc directive

- * @name Forms.att:File Upload

- *

- * @description

- *  <file src="src/fileUpload/docs/readme.md" />

- *

- * @usage

- * 

-<form id="dragDropFile">        

-    <div b2b-file-drop file-model="fileModel" on-drop="triggerFileUpload()"  align="center">

-        <p>

-            <br>To upload a file, drag & drop it here or 

-            <span b2b-file-link file-model="fileModel" on-file-select="triggerFileUpload()" >

-                click here to select from your computer.

-            </span><br>

-        </p>

-    </div>

-</form>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/fileUpload/docs/demo.html" />

-            <file src="src/fileUpload/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.fileUpload', ['b2b.att.utilities'])

-    .directive('b2bFileDrop', [function() {

-            return {

-                restrict: 'EA',

-                scope: {

-                    fileModel: '=',

-                    onDrop: '&'

-                },

-                controller: ['$scope', '$attrs', function($scope, $attrs) {

-                    this.onDrop = $scope.onDrop;

-                }],

-                link: function(scope, element) {

-                    element.addClass('b2b-dragdrop');

-                    element.bind(

-                        'dragover',

-                        function(e) {

-                            if (e.originalEvent) {

-                                e.dataTransfer = e.originalEvent.dataTransfer;

-                            }

-                            e.dataTransfer.dropEffect = 'move';

-                            // allows us to drop

-                            if (e.preventDefault) {

-                                e.preventDefault();

-                            }

-                            element.addClass('b2b-dragdrop-over');

-                            return false;

-                        }

-                    );

-                    element.bind(

-                        'dragenter',

-                        function(e) {

-                            // allows us to drop

-                            if (e.preventDefault) {

-                                e.preventDefault();

-                            }

-                            element.addClass('b2b-dragdrop-over');

-                            return false;

-                        }

-                    );

-                    element.bind(

-                        'dragleave',

-                        function() {

-                            element.removeClass('b2b-dragdrop-over');

-                            return false;

-                        }

-                    );

-                    element.bind(

-                        'drop',

-                        function(e) {

-                            // Stops some browsers from redirecting.

-                            if (e.preventDefault) {

-                                e.preventDefault();

-                            }

-                            if (e.stopPropagation) {

-                                e.stopPropagation();

-                            }

-                            if (e.originalEvent) {

-                                e.dataTransfer = e.originalEvent.dataTransfer;

-                            }

-                            element.removeClass('b2b-dragdrop-over');

-                            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {

-                                scope.fileModel = e.dataTransfer.files[0];

-                                scope.$apply();

-                                if (angular.isFunction(scope.onDrop)) {

-                                    scope.onDrop();

-                                }

-                            }

-                            return false;

-                        }

-                    );

-                }

-            };

-        }])

-        .directive('b2bFileLink', [function() {

-            return {

-                restrict: 'EA',

-                require: '^?b2bFileDrop',

-                replace: true,

-                transclude: true,

-                templateUrl: 'b2bTemplate/fileUpload/fileUpload.html',

-                scope: {

-                    fileModel: '=?',

-                    onFileSelect: '&'

-                },

-                controller: ['$scope', function($scope) {

-                    this.setFileModel = function(fileModel) {

-                        if ($scope.takeFileModelFromParent) {

-                            $scope.$parent.fileModel = fileModel;

-                            $scope.$parent.$apply();

-                        } else {

-                            $scope.fileModel = fileModel;

-                            $scope.$apply();

-                        }

-                    };

-                    this.callbackFunction = function() {

-                        if (angular.isFunction($scope.onFileSelect)) {

-                            $scope.onFileSelect();

-                        }

-                    };

-        

-                }],

-                link: function(scope, element, attr, b2bFileDropCtrl) {

-                    scope.takeFileModelFromParent = false;

-                    if (!(attr.fileModel) && b2bFileDropCtrl) {

-                        scope.takeFileModelFromParent = true;

-                    }

-                    if (!(attr.onFileSelect) && b2bFileDropCtrl) {

-                        scope.onFileSelect = b2bFileDropCtrl.onDrop;

-                    }

-                }

-            };

-        }])

-        .directive('b2bFileChange', ['$log', '$rootScope', function($log, $rootScope) {

-            return {

-                restrict: 'A',

-                require: '^b2bFileLink',

-                link: function(scope, element, attr, b2bFileLinkCtrl) {

-                    element.bind('change', changeFileModel);

-

-                    function changeFileModel(e) {

-                        if (e.target.files && e.target.files.length > 0) {

-                            b2bFileLinkCtrl.setFileModel(e.target.files[0]);

-                            b2bFileLinkCtrl.callbackFunction();

-                        } else {

-                            var strFileName = e.target.value;

-                            try {

-                                var objFSO = new ActiveXObject("Scripting.FileSystemObject");

-                                b2bFileLinkCtrl.setFileModel(objFSO.getFile(strFileName));

-                                b2bFileLinkCtrl.callbackFunction();

-                            } catch (e) {

-                                var errMsg = "There was an issue uploading " + strFileName + ". Please try again.";

-                                $log.error(errMsg);

-                                $rootScope.$broadcast('b2b-file-link-failure', errMsg);

-                            }

-                        }

-                    }

-                }

-            };

-        }]);

-/**

- * @ngdoc directive

- * @name Navigation.att:filters

- *

- * @description

- *  <file src="src/filters/docs/readme.md" />

- *

- * @usage

- *  <div b2b-filters></div>

- *

- * @example

- *  <section id="code">

-       <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/filters/docs/demo.html" />

-            <file src="src/filters/docs/demo.js" />

-       </example>

-    </section>

- * 

- */

-angular.module('b2b.att.filters', ['b2b.att.utilities', 'b2b.att.multipurposeExpander'])

-    .filter('filtersSelectedItemsFilter', [function () {

-        return function (listOfItemsArray) {

-

-            if (!listOfItemsArray) {

-                listOfItemsArray = [];

-            }

-

-            var returnArray = [];

-

-            for (var i = 0; i < listOfItemsArray.length; i++) {

-                for (var j = 0; j < listOfItemsArray[i].filterTypeItems.length; j++) {

-                    if (listOfItemsArray[i].filterTypeItems[j].selected && !listOfItemsArray[i].filterTypeItems[j].inProgress) {

-                        returnArray.push(listOfItemsArray[i].filterTypeItems[j]);

-                    }

-                }

-            }

-

-            return returnArray;

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Messages, modals & alerts.att:flyout

- *

- * @description

- *  <file src="src/flyout/docs/readme.md" />

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/flyout/docs/demo.html" />

-            <file src="src/flyout/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.flyout', ['b2b.att.utilities', 'b2b.att.position'])

-    .directive('b2bFlyout', ['$timeout', 'b2bDOMHelper', 'keymap', 'events', function ($timeout, b2bDOMHelper, keymap, events) {

-        return {

-            restrict: 'EA',

-            transclude: true,

-            templateUrl: 'b2bTemplate/flyout/flyout.html',

-            controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-                scope.flyoutOpened = false;

-                var contentScope = '';

-                var togglerScope = '';

-                this.registerContentScope = function (scp) {

-                    contentScope = scp;

-                };

-                this.registerTogglerScope = function (scp) {

-                    togglerScope = scp;

-                };

-

-                this.toggleFlyoutState = function () {

-                    if (contentScope) {

-                        contentScope.toggleFlyout();

-                    }

-                };

-                this.getTogglerDimensions = function () {

-                    return togglerScope.getTogglerDimensions();

-                }

-                this.setTogglerFocus = function () {

-                    return togglerScope.setTogglerFocus();

-                }

-

-                this.closeFlyout = function (e) {

-                    contentScope.closeFromChild(e);

-                };

-                this.gotFocus = function () {

-                    contentScope.gotFocus();

-                };

-

-                this.updateAriaModel = function (val) {

-                    scope.flyoutOpened = val;

-                };

-

-                var firstTabableElement = undefined,

-                    lastTabableElement = undefined;

-

-                var firstTabableElementKeyhandler = function (e) {

-                    if (!e.keyCode) {

-                        e.keyCode = e.which;

-                    }

-                    if (e.keyCode === keymap.KEY.TAB && e.shiftKey && scope.flyoutOpened) { 

-                        contentScope.gotFocus();

-                        events.preventDefault(e);

-                        events.stopPropagation(e);

-                    }

-                };

-

-                var lastTabableElementKeyhandler = function (e) {

-                    if (!e.keyCode) {

-                        e.keyCode = e.which;

-                    }

-                    if (e.keyCode === keymap.KEY.TAB && !e.shiftKey) {

-                        contentScope.gotFocus();    

-                        events.preventDefault(e);

-                        events.stopPropagation(e);

-                    }

-                };

-                this.associateTabEvent = function(){

-                    $timeout(function () {

-                        var element = elem[0].getElementsByClassName('b2b-flyout-container')[0];

-                        firstTabableElement = b2bDOMHelper.firstTabableElement(element);

-                        lastTabableElement = b2bDOMHelper.lastTabableElement(element);

-                        if(angular.isUndefined(firstTabableElement)){

-                            angular.element(element).css('display','block');

-                            firstTabableElement = b2bDOMHelper.firstTabableElement(element);

-                            lastTabableElement = b2bDOMHelper.lastTabableElement(element);

-                            angular.element(element).css('display','none');

-                        }

-                        angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);

-                        angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);

-                    });

-                }

-                this.updateTabbableElements = function(){

-                    $timeout(function () {

-                        var element = elem[0].getElementsByClassName('b2b-flyout-container')[0];

-                        angular.element(element).css('display','block');

-                        firstTabableElement = b2bDOMHelper.firstTabableElement(element);

-                        lastTabableElement = b2bDOMHelper.lastTabableElement(element);

-                        angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);

-                        angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);

-                        angular.element(element).css('display','none');

-                    });

-                }

-                this.unbindTabbaleEvents = function(){

-                    if(angular.isDefined(firstTabableElement)){

-                        angular.element(firstTabableElement).unbind('keydown', firstTabableElementKeyhandler);

-                    }

-

-                    if(angular.isDefined(lastTabableElement)){

-                        angular.element(lastTabableElement).unbind('keydown', lastTabableElementKeyhandler);

-                    }

-                }

-            }],

-            link: function (scope, element, attrs, ctrl) {

-

-            }

-        };

-    }])

-    .directive('b2bFlyoutToggler', [function () {

-        return {

-            restrict: 'A',

-            require: '^b2bFlyout',

-            link: function (scope, element, attrs, ctrl) {

-                element.bind('click', function (e) {

-                    ctrl.toggleFlyoutState();

-                });

-

-                scope.getTogglerDimensions = function () {

-                    return element[0].getBoundingClientRect();

-                }

-

-                scope.setTogglerFocus = function () {

-                    element[0].focus();

-                }

-

-                ctrl.registerTogglerScope(scope);

-            }

-        };

-    }])

-    .directive('b2bFlyoutContent', ['$position', '$timeout', '$documentBind', '$isElement', '$document', function ($position, $timeout, $documentBind, $isElement, $document) {

-        return {

-            restrict: 'EA',

-            transclude: true,

-            replace: true,

-            require: '^b2bFlyout',

-            scope: {

-                horizontalPlacement: '@',

-                verticalPlacement: '@',

-                flyoutStyle: '@',

-                flyoutTitle: '@',

-                contentUpdated: "=?"

-            },

-            templateUrl: 'b2bTemplate/flyout/flyoutContent.html',

-            link: function (scope, element, attrs, ctrl) {

-                var flyoutStyleArray, eachCssProperty, cssPropertyKey, cssPropertyVal, temp;

-                scope.openFlyout = false;

-                if (!scope.horizontalPlacement) {

-                    scope.horizontalPlacement = 'center';

-                }

-                if (!scope.verticalPlacement) {

-                    scope.verticalPlacement = 'below';

-                }

-

-                scope.toggleFlyout = function () {

-

-                    scope.openFlyout = !scope.openFlyout;

-

-                    if (scope.openFlyout) {

-

-                        if (angular.isDefined(scope.flyoutStyle) && scope.flyoutStyle != "") {

-                            flyoutStyleArray = scope.flyoutStyle.split(";");

-                            for (i = 0; i < flyoutStyleArray.length; i++) {

-                                eachCssProperty = flyoutStyleArray[i].split(":");

-                                if (eachCssProperty.length == 2) {

-                                    cssPropertyKey = eachCssProperty[0].trim();

-                                    cssPropertyVal = eachCssProperty[1].trim();

-                                    angular.element(element[0])[0].style[cssPropertyKey] = cssPropertyVal;

-                                }

-                            }

-                        }

-

-                        angular.element(element[0]).css({

-                            'opacity': 0,

-                            'display': 'block'

-                        });

-

-                        var flyoutIcons = angular.element(document.querySelectorAll(".b2b-flyout-icon"));

-                        angular.forEach(flyoutIcons, function (elm) {

-                            angular.element(elm)[0].blur();

-                        });

-

-                        $timeout(function () {

-                            ctrl.setTogglerFocus();

-

-                            var togglerDimensions = ctrl.getTogglerDimensions();

-                            var flyoutDimensions = element[0].getBoundingClientRect();

-

-                            switch (scope.horizontalPlacement) {

-                            case "left":

-                                angular.element(element[0]).css({

-                                    'left': ((togglerDimensions.width / 2) - 26) + 'px'

-                                });

-                                break;

-                            case "right":

-                                angular.element(element[0]).css({

-                                    'right': ((togglerDimensions.width / 2) - 23) + 'px'

-                                });

-                                break;  

-

-                            case "centerLeft":

-                                var marginLeft =  10-(flyoutDimensions.width)-20;

-                                angular.element(element[0]).css({

-                                    'margin-left': marginLeft + 'px'

-                                });

-                                break;

-                            case "centerRight":

-                                angular.element(element[0]).css({

-                                    'left': ((togglerDimensions.width + 9 )) + 'px'

-                                });

-                                break;    

-

-                            default:

-                                var marginLeft = (togglerDimensions.width / 2) - (flyoutDimensions.width / 2) - 8;

-                                angular.element(element[0]).css({

-                                    'margin-left': marginLeft + 'px'

-                                });

-                            }

-

-                            switch (scope.verticalPlacement) {

-                            case "above":

-                                angular.element(element[0]).css({

-                                    'top': -(flyoutDimensions.height + 13) + 'px'

-                                });

-                                break;

-                            case "centerLeft":

-                                angular.element(element[0]).css({

-                                    'top': -((togglerDimensions.height-13))+ 'px'

-                                });

-                                break;

-                            case "centerRight":

-                                angular.element(element[0]).css({

-                                    'top': -(flyoutDimensions.height - 23)+ 'px'

-                                });

-                                break;                                    

-                            default:

-                                angular.element(element[0]).css({

-                                    'top': (togglerDimensions.height + 13) + 'px'

-                                });

-                            }

-

-                            angular.element(element[0]).css({

-                                'opacity': 1

-                            });

-                        }, 100);

-                    } else {

-                        scope.hideFlyout();

-                    }

-                };

-

-                scope.gotFocus = function () {

-                    scope.openFlyout = false;

-                    scope.hideFlyout();

-                    ctrl.setTogglerFocus();

-                    scope.$apply();

-                };

-

-                scope.closeFromChild = function (e) {

-                    scope.openFlyout = false;

-                    scope.hideFlyout();

-                    ctrl.setTogglerFocus();

-                    scope.$apply();

-                };

-

-                scope.hideFlyout = function () {

-                    angular.element(element[0]).css({

-                        'opacity': 0,

-                        'display': 'none'

-                    });

-                };

-

-                scope.closeFlyout = function (e) {

-                    var isElement = $isElement(angular.element(e.target), element, $document);

-                    if ((e.type === "keydown" && e.which === 27) || ((e.type === "click" || e.type==="touchend") && !isElement)) {

-                        scope.openFlyout = false;

-                        scope.hideFlyout();

-                        ctrl.setTogglerFocus();

-                        scope.$apply();

-                    }

-                };

-

-                scope.$watch('openFlyout', function () {

-                    ctrl.updateAriaModel(scope.openFlyout);

-                });

-

-                $documentBind.click('openFlyout', scope.closeFlyout, scope);

-                $documentBind.event('keydown', 'openFlyout', scope.closeFlyout, scope);

-                $documentBind.event('touchend', 'openFlyout', scope.closeFlyout, scope);

-                ctrl.registerContentScope(scope);

-

-                if (angular.isDefined(scope.contentUpdated) && scope.contentUpdated !== null) {

-                    scope.$watch('contentUpdated', function (newVal, oldVal) {

-                        if(newVal){

-                            if (newVal !== oldVal) {

-                                ctrl.unbindTabbaleEvents();

-                                ctrl.associateTabEvent();

-                            }

-                            scope.contentUpdated = false;

-                        } 

-                    });

-                }  

-

-            }

-        };

-    }])

-    .directive('b2bCloseFlyout', [function () {

-        return {

-            restrict: 'A',

-            require: '^b2bFlyout',

-            scope: {

-                closeFlyout: '&'

-            },

-            link: function (scope, element, attrs, ctrl) {

-                element.bind('click', function (e) {

-                    scope.closeFlyout(e);

-                    ctrl.closeFlyout(e);

-                });

-            }

-        };

-    }])

-    .directive('b2bFlyoutTrapFocusInside', [function () {

-        return {

-            restrict: 'A',

-            transclude: false,

-            require: '^b2bFlyout',

-            link: function (scope, elem, attr, ctrl) {

-                /* Before opening modal, find the focused element */

-                ctrl.updateTabbableElements();

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Layouts.att:footer

- *

- * @description

- *  <file src="src/footer/docs/readme.md" />

- *

- * @usage

- * 

- <footer class="b2b-footer-wrapper" role="contentinfo" aria-label="footer">

-        <div class="b2b-footer-container" b2b-column-switch-footer footer-link-items='footerItems'>

-            <hr>

-            <div class="divider-bottom-footer">

-                <div class="span2 dispalyInline">&nbsp;</div>

-                <div class="span6 dispalyInline">

-                    <ul class="footer-nav-content">

-                        <li><a href="Terms_of_use.html" title="Terms of use" id="foot0">Terms of use</a>|</li>

-                        <li><a href="Privacy_policy.html" title="Privacy policy" id="foot1" class="active">Privacy policy</a>|</li>

-                        <li><a href="Tollfree_directory_assistance.html" title="Tollfree directory assistance" id="foot2">Tollfree directory assistance</a>|</li>

-                        <li><a href="compliance.html" title="Accessibility" id="foot3">Accessibility</a></li>

-

-                    </ul>

-                    <p><a href="//www.att.com/gen/privacy-policy?pid=2587" target="_blank">© <span class="copyright">2016</span> AT&amp;T Intellectual Property</a>. All rights reserved. AT&amp;T,the AT&amp;T Globe logo and all other AT&amp;T marks contained herein are tardemarks of AT&amp;T intellectual property and/or AT&amp;T affiliated companines.

-

-                    </p>

-                </div>

-                <div class="span3 footerLogo dispalyInline">

-                    <a href="index.html" class="footer-logo">

-                        <i class="icon-primary-att-globe"><span class="hidden-spoken">A T &amp; T</span></i>

-                        <h2 class="logo-title">AT&amp;T</h2>

-                    </a>

-                </div>

-            </div>

-

-        </div>  

-    </footer>

-

- * @example

- *  <section id="code">   

- <example module="b2b.att">

- <file src="src/footer/docs/demo.html" />

- <file src="src/footer/docs/demo.js" />

- </example>

- </section>

- *

- */

-angular.module('b2b.att.footer', ['b2b.att.utilities']).

-        directive('b2bColumnSwitchFooter', [function() {

-                return {

-                    restrict: 'A',

-                    transclude: true,

-                    scope: {

-                        footerLinkItems: "="

-                    },

-                    templateUrl: 'b2bTemplate/footer/footer_column_switch_tpl.html',

-                    link: function(scope) {

-                        var tempFooterColumns = scope.footerLinkItems.length;

-                        scope.footerColumns = 3;

-                        if ( (tempFooterColumns === 5) || (tempFooterColumns === 4) ) {

-                            scope.footerColumns = tempFooterColumns;

-                        }

-                    }

-

-                };

-

-            }]);

-     

-

-/**

- * @ngdoc directive

- * @name Layouts.att:header

- *

- * @description

- *  <file src="src/header/docs/readme.md" />

- *

- * @usage

- *  <li b2b-header-menu class="header__item b2b-headermenu" ng-repeat="item in tabItems" role="presentation">

-        <a href="#" class="menu__item" role="menuitem">{{item.title}}</a>

-        <div class="header-secondary-wrapper">

-            <ul class="header-secondary" role="menu">

-                <li class="header-subitem" b2b-header-submenu ng-repeat="i in item.subitems" role="presentation">

-                    <a href="#" class="menu__item" aria-haspopup="true" role="menuitem">{{i.value}}</a>

-                    <div class="header-tertiary-wrapper" ng-if="i.links">

-                        <ul class="header-tertiary" role="menu">

-                            <li b2b-header-tertiarymenu ng-repeat="link in i.links" role="presentation">

-                                <label>{{link.title}}</label>

-                                <div b2b-tertiary-link ng-repeat="title in link.value">

-                                    <a href="{{link.href}}" class="header-tertiaryitem" ng-if="!title.subitems" aria-haspopup="false" role="menuitem"><span class="b2b-label-hide">{{link.title}}</span>{{title.title}}</a>

-                                    <a href="{{link.href}}" class="header-tertiaryitem" b2b-header-togglemenu ng-if="title.subitems" aria-haspopup="true" role="menuitem"><span class="b2b-label-hide">{{link.title}}</span>{{title.title}}</a>

-                                    <ul class="header-quarternary" role="menu"  ng-if="title.subitems">

-                                        <li b2b-header-quarternarymenu role="presentation">

-                                            <a href="{{nav.href}}" ng-repeat="nav in title.subitems" role="menuitem" aria-haspopup="true">{{nav.title}}</a>

-                                        </li>

-                                    </ul>

-                                </div>

-                            </li>

-                        </ul>

-                    </div>

-                </li>

-            </ul>

-        </div>

-    </li> 

- *

- * @example

- *  <section id="code">

- <example module="b2b.att.header">

- <file src="src/header/docs/demo.html" />

- <file src="src/header/docs/demo.js" />

- </example>

- </section>

- *

- */

-angular.module('b2b.att.header', ['b2b.att.dropdowns','b2b.att.utilities'])

-    .directive('b2bHeaderMenu', ['keymap', '$documentBind', '$timeout', '$isElement', '$document', function (keymap, $documentBind, $timeout, $isElement, $document) {

-        return {

-            restrict: 'A',

-            controller:['$scope',function($scope){

-                this.nextSiblingFocus = function (elObj,flag) {

-                        if (elObj.nextElementSibling) {

-                            if(flag){

-                                var nextmenuItem = this.getFirstElement(elObj.nextElementSibling,'a');

-                                nextmenuItem.focus();

-                            }else{

-                                elObj.nextElementSibling.focus();

-                            }

-                        }

-                };

-                

-                this.previousSiblingFocus = function (elObj,flag) {

-                        if (elObj.previousElementSibling) {

-                            if(flag){

-                                var prevmenuItem = this.getFirstElement(elObj.previousElementSibling,'a');

-                                prevmenuItem.focus();

-                            }else{

-                                elObj.previousElementSibling.focus();

-                            }

-                        }

-                };

-                    

-                this.getFirstElement = function(elmObj,selector){

-                        return elmObj.querySelector(selector);                        

-                    };

-            }],

-            link: function (scope, elem,attr,ctrl) {

-                scope.showMenu = false;

-                var activeElm, subMenu, tertiaryMenu, el= angular.element(elem)[0], 

-                        menuItem = angular.element(elem[0].children[0]);

-                menuItem.bind('click', function () {

-                    elem.parent().children().removeClass('active');

-                    elem.addClass('active');

-                    var elems= this.parentElement.parentElement.querySelectorAll('li[b2b-header-menu]>a');

-                    for (var i=0; i<elems.length; i++) {

-                        elems[i].setAttribute("aria-expanded",false);

-                    }

-                    scope.showMenu = true;

-                    var elmTofocus = ctrl.getFirstElement(this.parentElement,'li[b2b-header-submenu]');

-                    elmTofocus.firstElementChild.focus();

-                    this.setAttribute('aria-expanded',true);

-                    scope.$apply();

-                });

-               

-                elem.bind('keydown', function (evt) {

-                    activeElm = document.activeElement;

-                    subMenu = ctrl.getFirstElement(activeElm.parentElement,'li[b2b-header-submenu]');

-                    tertiaryMenu = ctrl.getFirstElement(activeElm.parentElement,'li[b2b-header-tertiarymenu]');

-                    switch (evt.keyCode) {

-                        case keymap.KEY.ENTER:

-                        case keymap.KEY.SPACE:

-                            elem[0].click();

-                            break;

-                        case keymap.KEY.UP:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            if (activeElm.parentElement.hasAttribute('b2b-header-submenu')) {

-                                menuItem[0].focus();

-                            }

-                            break;

-                        case keymap.KEY.DOWN:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            if (subMenu) {

-                                subMenu.firstElementChild.focus();

-                            } else if (tertiaryMenu) {

-                                var firstSubitem = ctrl.getFirstElement(tertiaryMenu,'a.header-tertiaryitem');

-                                firstSubitem.focus();

-                            }

-                            break;

-                        case keymap.KEY.RIGHT:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            if (activeElm.parentElement.hasAttribute('b2b-header-submenu')) {

-                                var elm = angular.element(activeElm.parentElement)[0];

-                                ctrl.nextSiblingFocus(elm,true);

-                            } else if (activeElm.parentElement.parentElement.hasAttribute('b2b-header-tertiarymenu')) {

-                                var tertiaryLI = angular.element(activeElm.parentElement.parentElement)[0];

-                                if (tertiaryLI.nextElementSibling) {

-                                    var nextElm = ctrl.getFirstElement(tertiaryLI.nextElementSibling,"a.header-tertiaryitem");

-                                    nextElm.focus();

-                                }

-                            }

-                            else if(activeElm.parentElement.hasAttribute('b2b-header-menu')){

-                                ctrl.nextSiblingFocus(el,true);

-                            }

-                            break;

-                        case keymap.KEY.LEFT:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            if (activeElm.parentElement.hasAttribute('b2b-header-submenu')) {

-                                var previousElm = angular.element(activeElm.parentElement)[0];

-                                ctrl.previousSiblingFocus(previousElm,true);

-                            } else if (activeElm.parentElement.parentElement.hasAttribute('b2b-header-tertiarymenu')) {

-                                var tertiaryLI = angular.element(activeElm.parentElement.parentElement)[0];

-                                if (tertiaryLI.previousElementSibling) {

-                                    var prevElm = ctrl.getFirstElement(tertiaryLI.previousElementSibling,"a.header-tertiaryitem");

-                                    prevElm.focus();

-                                }

-                            }

-                            else if(activeElm.parentElement.hasAttribute('b2b-header-menu')) {

-                                ctrl.previousSiblingFocus(el,true);

-                            }

-                            break;

-                        case keymap.KEY.ESC:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            scope.showMenu = false;

-                            elem.removeClass('active');

-                            menuItem.attr('aria-expanded',false);

-                            $timeout(function(){

-                                menuItem[0].focus();

-                            },100);

-                            scope.$apply();

-                            break;

-                        default:

-                            break;

-                    }

-                });

-                var outsideClick = function (e) {

-                    var isElement = $isElement(angular.element(e.target), elem, $document);

-                    if (!isElement) {

-                        scope.showMenu = false;

-                        elem.removeClass('active');

-                        scope.$apply();

-                    }

-                };

-                $documentBind.click('showMenu', outsideClick, scope);

-                /*Change for ECOMP - hide header menu when click on iframe in a new tab*/

-                $(window).blur(function() {

-                	if(scope.showMenu){

-               	 	 scope.showMenu = false;

-                     elem.removeClass('active');

-                     scope.$apply();

-               	 	}

-                });

-            }

-        };

-    }]).directive('b2bHeaderSubmenu', ['$timeout',function ($timeout) {

-        return{

-            restrict: 'A',

-            link: function (scope, elem) {

-                var caretSign = angular.element("<i class='menuCaret'></i>");

-                $timeout(function(){

-                    var menuItem = angular.element(elem[0].children[0]);

-                    menuItem.bind('focus mouseenter', function () {

-                        elem.parent().children().removeClass('active');

-                        elem.addClass('active');

-                        if(elem[0].childElementCount > 1){ // > 1 has third level menu

-                            menuItem.attr('aria-expanded',true);

-                            menuItem.attr('aria-haspopup',true);

-                        }

-                        var caretLeft = (elem[0].offsetLeft +  elem[0].offsetWidth/2) - 10;

-                        caretSign.css({left: caretLeft + 'px'});

-                        angular.element(caretSign);

-                        var tertiaryItems = elem[0].querySelectorAll('[b2b-header-tertiarymenu]');

-                        if(tertiaryItems.length >=1){

-                            elem.append(caretSign);

-                        }

-                    });

-                    menuItem.bind('blur', function () {

-                        $timeout(function () {

-                            var parentElm = document.activeElement.parentElement.parentElement;

-                            if(parentElm){

-                                if (!(parentElm.hasAttribute('b2b-header-tertiarymenu'))) {

-                                    elem.removeClass('active');

-                                    if(elem[0].childElementCount > 1){ // > 1 has third level menu

-                                        menuItem.attr('aria-expanded',false);

-                                    }

-                                    var caret = elem[0].querySelector('.menuCaret');

-                                    if(caret){

-                                        caret.remove();

-                                    }   

-                                }

-                            }

-                        });

-                    });

-                });

-            }

-        };

-    }]).directive('b2bHeaderTertiarymenu', ['$timeout','keymap', function ($timeout,keymap){

-        return{

-            restrict: 'A',

-            require:'^b2bHeaderMenu',

-            link: function (scope, elem,attr,ctrl) {

-                

-                elem.bind('keydown', function (evt) {

-                    var activeElm = document.activeElement;

-                    var activeParentElm = activeElm.parentElement;

-                    var activeParentObj  = angular.element(activeParentElm)[0];

-                    

-                    if(activeParentElm.hasAttribute('b2b-tertiary-link')){

-                        var quarterNav = angular.element(activeParentElm)[0].querySelector('li[b2b-header-quarternarymenu]');

-                        if(quarterNav){

-                            var links = ctrl.getFirstElement(angular.element(quarterNav)[0],'a');

-                        }

-                    }

-                    var tertiaryMenu = activeElm.parentElement.parentElement.parentElement;

-                    var tertiaryMenuFlag = tertiaryMenu.hasAttribute('b2b-tertiary-link');

-                    

-                    switch (evt.keyCode) {

-                        case keymap.KEY.DOWN:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            if (activeParentElm.hasAttribute('b2b-tertiary-link')) {

-                                if(angular.element(quarterNav).hasClass('active')){

-                                    links.focus();

-                                }else if(activeParentObj.nextElementSibling){

-                                    ctrl.nextSiblingFocus(activeParentObj,true);

-                                }

-                            }

-                            else if(angular.element(activeParentElm).hasClass('active')){

-                                ctrl.nextSiblingFocus(activeElm);

-                            }

-                            break;                        

-                        case keymap.KEY.UP:

-                            evt.stopPropagation();

-                            evt.preventDefault();

-                            if(activeParentElm.hasAttribute('b2b-tertiary-link')){

-                                if(activeParentObj.previousElementSibling.hasAttribute('b2b-tertiary-link')){

-                                    ctrl.previousSiblingFocus(activeParentObj,true);

-                                }else{

-                                    var elm = angular.element(activeElm.parentElement.parentElement.parentElement.parentElement.parentElement)[0];

-                                    ctrl.getFirstElement(elm,"a").focus();

-                                }

-                            }else if(angular.element(activeParentElm).hasClass('active')){

-                                    if (activeElm.previousElementSibling) {

-                                        ctrl.previousSiblingFocus(activeElm);

-                                    }else if (tertiaryMenuFlag) {

-                                        var elm = angular.element(tertiaryMenu)[0];

-                                        ctrl.getFirstElement(elm,"a.header-tertiaryitem").focus();

-                                    }

-                                }

-                            break;

-                        default:

-                            break;

-                    }

-                });

-            }            

-        };          

-    }]).directive('b2bHeaderTogglemenu', ['$timeout', 'keymap', function ($timeout, keymap) {

-        return{

-            restrict: 'A',

-            require: '^b2bHeaderMenu',

-            link: function (scope, elem, attrs, ctrl) {

-                var quarterNav;

-                $timeout(function () {

-                    quarterNav = angular.element(elem.parent())[0].querySelector('li[b2b-header-quarternarymenu]');

-                    elem.bind('click', function () {

-                        angular.element(quarterNav).toggleClass('active');

-                    });

-                });

-            }

-        };

-    }]).directive('b2bHeaderResponsive', ['$timeout',function ($timeout) {

-        return{

-            restrict: 'A',

-            controller: function($scope){

-                this.applyMediaQueries = function(value){

-                    document.querySelector('style').textContent += 

-                        "@media screen and (max-width:950px) { \

-                            .header__item.profile { right: " + value + "px; } \

-                        }";

-                };

-                this.arrangeResponsiveHeader = function(children){

-                    /* 

-                     * clientWidth of 1090 === max-width of 1100px

-                     * clientWidth of 920 === max-width of 950px

-                     * see b2b-angular.css for rest of responsive header CSS

-                     */

-                  if (document.documentElement.clientWidth <= 920) { 

-                        switch(children){

-                            case 1:

-                                this.applyMediaQueries(200);                    

-                                break;

-                            case 2:

-                                this.applyMediaQueries(200);                            

-                                break;

-                            default: // anthing above 3, however, should not have more than 3 to date

-                                this.applyMediaQueries(200);                                                                            

-                        }

-                    }

-                }

-            },

-            link: function (scope, elem, attrs, ctrl) {

-                var children;

-                var profile;

-                

-                // onload of page

-                $timeout(function(){ 

-                    profile = document.querySelector('li.header__item.profile');

-                    children = angular.element(profile).children().length;

-                    

-                    ctrl.arrangeResponsiveHeader(children); // shift right-side icon flyovers

-                });

-

-                // on screen resize

-                window.addEventListener('resize', function(event){ // caret adjustmet

-                    var activeSubmenu = elem[0].querySelector('[b2b-header-menu] [b2b-header-submenu].active');

-                    var activeSubmenuEl = angular.element(activeSubmenu);

-                    if(activeSubmenu){

-                        var caretSign = activeSubmenu.querySelector('i.menuCaret');

-                        if(caretSign){

-                            var caretSignEl = angular.element(caretSign);

-                            var caretLeft = (activeSubmenu.offsetLeft +  activeSubmenu.offsetWidth/2) - 10;

-                            caretSignEl.css({left: caretLeft + 'px'});

-                        }

-                    }

-

-                    ctrl.arrangeResponsiveHeader(children); // shift right-side icon flyovers

-                });

-            }

-        };

-    }]);

-

-/**

- * @ngdoc directive

- * @name Layouts.att:headings

- *

- * @description

- *  <file src="src/headings/docs/readme.md" />

- *

- * @usage

-    <h1 class="heading-page">38px page heading</h1>

-    <h2 class="heading-major-section">30px major section heading</h2>

-    <h3 class="heading-sub-section">24px sub-section heading</h3>

-    <h2 class="heading-medium">20px medium heading</h2>

-    <h2 class="heading-medium-emphasis">20px medium emphasis heading</h2>

-    <h3 class="heading-small">18px small heading</h3>

-    <h3 class="heading-small-emphasis">18px small emphasis heading</h3>

-    <h3 class="heading-micro">13px micro heading</h3>

-

-    <h2 class="heading-group">Lead</h2>

-    <h1 class="heading-page">This is 38px heading</h1>

-    <h2 class="lead">This is lead text...The next big thing since the last big thing we announced.</h2>

-    <h2 class="heading-group">Eyebrow</h2>

-    <h3 class="eyebrow">EYEBROW TEXT</h3>

-    <h2 class="heading-major-section">This is a 30px heading</h2>

-    <h3 class="eyebrow">EYEBROW TEXT</h3>

-    <h3 class="heading-sub-section">24px sub-section heading</h3>

-    <h2 class="heading-group">Subheading</h2>

-    <h2 class="heading-major-section">This is a 30px heading</h2>

-    <h3 class="subheading">A subheading here to support what was said above</h3>

- * @example

- <section id="code">

-    <b>HTML + AngularJS</b>

-    <example module="b2b.att">

-    <file src="src/headings/docs/demo.html" />

-</example>

-</section>

- */

-

-var b2bLegalCopy = angular.module('b2b.att.headings', []);

-/**

- * @ngdoc directive

- * @name Tabs, tables & accordions.att:horizontalTable

- *

- * @description

- *  <file src="src/horizontalTable/docs/readme.md" />

- *

- * @usage

- * @param {int} sticky - Number of sticky columns to have. Maximum of 3.

- * @param {boolean} refresh - A boolean that when set to true will force a re-render of table. Only use when using 'bulk mode'

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/horizontalTable/docs/demo.html" />

-            <file src="src/horizontalTable/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.horizontalTable', [])

-    .constant('b2bHorizontalTableConfig', {

-        'maxStickyColumns': 3

-    })

-    .directive('b2bHorizontalTable', ['$timeout', 'b2bHorizontalTableConfig', 'b2bDOMHelper', function ($timeout, b2bHorizontalTableConfig, b2bDOMHelper) {

-        return {

-            restrict: 'EA',

-            scope: true,

-            transclude: true,

-            scope: {

-                numOfStickyCols: '=?sticky',

-                refresh: '=?'

-

-            },

-            templateUrl: 'b2bTemplate/horizontalTable/horizontalTable.html',

-            link: function (scope, element, attrs, ctrl) {

-                scope.numOfStickyCols = scope.numOfStickyCols || 1;

-                scope.viewportIndex = scope.numOfStickyCols;

-

-                // JM520E: This is a temporary hack until I solve the ngRepeat issue

-                function hack() {

-                    if (element.find('th').length < scope.numOfStickyCols) {

-                        // DOM ngRepeat is not ready, let's check back in 10 ms

-                        console.info('THs are not ready, trying again in 10ms');

-                        $timeout(hack, 10, false);

-                    } else {

-                        init();

-                    }

-                }

-                hack();

-

-                if (attrs.refresh !== undefined && attrs.refresh !== '') {

-                    scope.$watch('refresh', function(oldVal, newVal) {

-                        if (scope.refresh) {

-                            // From testing it takes about 30 ms before ngRepeat executes, so let's set initial timeout

-                            // NOTE: May need to expose timeout to developers. Application is known to have digest cycle of 3-5k watches.

-                            $timeout(init, 100, false);

-                            scope.refresh = false;

-                        }

-                    });

-                }

-

-                var tableElement = element.find('table');

-                var thElements = element.find('th');

-                var innerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table-inner-container'));

-                var outerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table'));

-

-                var tableColumns = [];

-                var tableRows = element.find('tr');

-

-                var maxWidth = 0,

-                    maxHeight = 0;

-                var totalWidth = element.children()[0].offsetWidth;

-                var lastVisibleColumn = 0;

-                var collectiveColumnWidth = [];

-                var collectiveRowHeight = [];

-                var columnSets = [];

-                var setIndex = 0; 

-                var stickyPixels = 0;

-

-                var displayNoneCSS = {'display': 'none'};

-                var displayBlockCSS = {'display': 'table-cell'};

-

-                function calculateVisibleColumns(startingPoint) {

-                    var usedWidth = 0, 

-                        visibleColumns = startingPoint || scope.numOfStickyCols;

-

-                    while(usedWidth < stickyPixels && visibleColumns < collectiveColumnWidth.length) {

-                        if (usedWidth+collectiveColumnWidth[visibleColumns] > stickyPixels) {

-                            if (startingPoint === visibleColumns) {

-                                return visibleColumns; // The next cell is too large to fit, it should be only thing to fit

-                            }

-                            visibleColumns--;

-                            return visibleColumns;

-                        }

-                        usedWidth += collectiveColumnWidth[visibleColumns];

-                        visibleColumns++;

-                    }

-

-                    if (usedWidth > stickyPixels) {

-                        return --visibleColumns;

-                    }

-                    return visibleColumns;

-                }

-

-                function updateCellDisplay(set) {

-                    for (var i = scope.numOfStickyCols; i < tableColumns.length; i++) {

-                        angular.element(tableColumns[i]).css(displayNoneCSS);

-                    }

-

-                    for (var i = set[0]; i <= set[1]; i++) {

-                        angular.element(tableColumns[i]).css(displayBlockCSS);

-                    }

-                }

-

-                function forceDigest() {

-                    if (!scope.$$phase) {

-                        scope.$digest();

-                    }

-                }

-

-                function findMax(arr, prop) {

-                    var max = 0;

-                    var localVal = 0;

-                    var prevDisplay;

-                    var item;

-                    for (var i = 0; i < arr.length; i++) {

-                        item = arr[i];

-                        prevDisplay = angular.element(item).css('display');

-                        if (scope.$$phase) {

-                            scope.$digest();

-                        }

-                        if (prop === 'width') {

-                            localVal = Math.ceil(parseInt(window.getComputedStyle(item).width.split('px')[0], 10)) + 30; // 30 px is padding

-                        } else if (prop === 'offsetWidth') {

-                            localVal = item.offsetWidth;

-                        } else if (prop === 'height') {

-                            localVal = item.offsetHeight;

-                        }

-

-                        if (localVal >= max) {

-                            max = localVal;

-                        }

-                    }

-                    

-                    return max;

-                }

-

-                function init() {

-                    // Reset this from a previous execution

-                    tableColumns = [];

-                    collectiveColumnWidth = [];

-                    collectiveRowHeight = [];

-                    maxWidth = 0;

-                    maxHeight = 0;

-                    lastVisibleColumn = 0;

-                    columnSets = [];

-                    setIndex = 0; 

-                    visibleColumns = [];

-                    stickyPixels = 0;

-

-                    tableElement = element.find('table');

-                    thElements = element.find('th');

-                    innerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table-inner-container'));

-                    outerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table'));

-                    totalWidth = element.children()[0].offsetWidth;

-

-

-                    tableRows = element.find('tr');

-                    totalWidth = element.children()[0].offsetWidth;

-

-                    scope.disableLeft = true;

-                    scope.disableRight = false;

-

-                    if (scope.numOfStickyCols > b2bHorizontalTableConfig.maxStickyColumns) {

-                        throw new Error("Table can only support 3 sticky columns.");

-                    }                  

-

-                    angular.forEach(tableRows, function(row, rowIndex) {

-                        collectiveRowHeight.push(findMax(row.children, 'height'));

-                        for(var j = 0; j < row.children.length; j++) {

-                            if (tableColumns[j] === undefined) {

-                                tableColumns[j] = [];

-                            }

-                            tableColumns[j].push(row.children[j]);

-                        }

-                    });

-

-                    // We need to reset all the displayNones from previous runs, if applicable

-                    if (attrs.refresh !== undefined && attrs.refresh !== '')  {

-                        for (var i = scope.numOfStickyCols+1; i < tableColumns.length; i++) {

-                            angular.element(tableColumns[i]).css(displayBlockCSS);

-                        }

-                    }

-

-                    for (var i = 0; i < tableColumns.length; i++) {

-                        collectiveColumnWidth.push(findMax(tableColumns[i], 'width')); //offsetWidth doesn't take into account custom css inside

-                    }

-                    for(var i = 0; i < scope.numOfStickyCols; i++) {

-                        maxWidth += collectiveColumnWidth[i];

-                    }

-      

-                    stickyPixels = totalWidth-maxWidth;

-

-

-                    // At this point, for each tr, I need to set the properties (height) and each numOfStickyCols children

-                    // should be set with sticky properties (margin-left and width)

-                    var width = maxWidth;

-                    for(var i = 0; i < scope.numOfStickyCols; i++) {

-                        for (var j = 0; j < tableRows.length; j++) {

-                            trObject = angular.element(tableRows[j].children[i]);

-                            

-                            angular.element(trObject).css({

-                                'margin-left': -(width + 2) + 'px', 

-                                'width': (collectiveColumnWidth[i] + 3) + 'px', // instead of taking the max width, grab max width for that column

-                                'height': collectiveRowHeight[j] + 'px',

-                                'position': 'absolute',

-                                'background-color': 'lightgrey'

-                            });

-                        }

-                        

-

-                        width -= collectiveColumnWidth[i];

-                    }

-

-                    innerContainer.css({

-                        'padding-left': (maxWidth + 2) + 'px'

-                    });

-

-

-                    // Let's precompute all the (set) combinations beforehand

-                    columnSets = []; 

-                    for (var i = scope.numOfStickyCols; i < tableColumns.length;) {

-                        visibleColumns = calculateVisibleColumns(i);

-                        columnSets.push([i, visibleColumns]);

-                        i = visibleColumns + 1;

-                    }

-                    

-                    updateCellDisplay(columnSets[setIndex]);

-                    checkScrollArrows();

-

-                    scope.numOfCols = tableColumns.length;

-

-                    console.log('Bulk Mode is ' + (attrs.bulkMode ? 'enabled': 'disabled'));

-                    console.log('tableColumns', tableColumns);

-                    console.log('collectiveColumnWidth: ', collectiveColumnWidth);

-                    console.log('maxWidth: ', maxWidth);

-                }

-

-                function checkScrollArrows() {

-                    scope.disableLeft = (setIndex === 0);

-                    scope.disableRight = !(setIndex < columnSets.length-1);

-                }

-

-

-                scope.moveViewportLeft = function () {

-                    setIndex--;

-                    updateCellDisplay(columnSets[setIndex]);

-                    checkScrollArrows();

-

-                    if (scope.disableLeft) {

-                        element.find('span')[0].focus();

-                    }

-                };

-                

-                scope.moveViewportRight = function () {

-                    setIndex++;

-                    updateCellDisplay(columnSets[setIndex]);

-                    checkScrollArrows();

-                    

-                    if (scope.disableRight) {

-                        element.find('span')[0].focus();

-                    }

-                };

-

-                scope.getColumnSet = function () {

-                    return columnSets[setIndex];

-                };

-

-                innerContainer.bind('scroll', function () {

-                    $timeout(function () {

-                        checkScrollArrows();

-                    }, 1);

-                });

-

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Forms.att:hourPicker

- *

- * @description

- *  <file src="src/hourPicker/docs/readme.md" />

- *

- * @usage

- * <div b2b-hourpicker ng-model="hourpickerValue.value"></div>

-    

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/hourPicker/docs/demo.html" />

-            <file src="src/hourPicker/docs/demo.js" />

-        </example>

-    </section>

- *

- */

-angular.module('b2b.att.hourPicker', ['b2b.att.utilities'])

-

-.constant('b2bHourpickerConfig', {

-    dayOptions: [{

-        title: 'sunday',

-        caption: 'Sun',

-        label: 'S',

-        disabled: false

-    }, {

-        title: 'monday',

-        caption: 'Mon',

-        label: 'M',

-        disabled: false

-    }, {

-        title: 'tuesday',

-        caption: 'Tues',

-        label: 'T',

-        disabled: false

-    }, {

-        title: 'wednesday',

-        caption: 'Wed',

-        label: 'W',

-        disabled: false

-    }, {

-        title: 'thursday',

-        caption: 'Thu',

-        label: 'T',

-        disabled: false

-    }, {

-        title: 'friday',

-        caption: 'Fri',

-        label: 'F',

-        disabled: false

-    }, {

-        title: 'saturday',

-        caption: 'Sat',

-        label: 'S',

-        disabled: false

-    }],

-    startTimeOptions: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],

-    startTimeDefaultOptionIndex: -1,

-    startTimeDefaultMeridiem: "am",

-    endTimeOptions: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],

-    endTimeDefaultOptionIndex: -1,

-    endTimeDefaultMeridiem: "pm",

-    sameDayOption: true

-})

-

-.factory('b2bNormalizeHourpickerValues', [function () {

-    var _normalize = function (hourpickerValues) {

-        if (angular.isDefined(hourpickerValues) && hourpickerValues != null) {

-            var finalHourpickerValues = [];

-            var hourpickerValue = {};

-            var days = {};

-            for (var i = 0; i < hourpickerValues.length; i++) {

-                days = hourpickerValues[i].days ? hourpickerValues[i].days : {};

-                hourpickerValue.startTime = hourpickerValues[i].startTime ? hourpickerValues[i].startTime : '';

-                hourpickerValue.startMeridiem = hourpickerValues[i].startMeridiem ? hourpickerValues[i].startMeridiem : '';

-                hourpickerValue.endTime = hourpickerValues[i].endTime ? hourpickerValues[i].endTime : '';

-                hourpickerValue.endMeridiem = hourpickerValues[i].endMeridiem ? hourpickerValues[i].endMeridiem : '';

-                hourpickerValue.days = [];

-

-                var retrieveDaysText = function (daysDetails) {

-                    var daysTexts = [];

-                    var first = -1;

-                    var last = -1;

-                    var index = -1;

-                    for (var i in days) {

-                        if (days[i].value) {

-                            daysTexts.push(i);

-                        }

-                    }

-

-                    first = daysTexts[0];

-                    last = daysTexts[0];

-                    index = 0;

-                    hourpickerValue.days[index] = days[first].caption;

-                    if (daysTexts.length > 1) {

-                        for (var i = 1; i < daysTexts.length; i++) {

-                            if (daysTexts[i] - last === 1) {

-                                last = daysTexts[i];

-                                hourpickerValue.days[index] = days[first].caption + ' - ' + days[last].caption;

-                            } else {

-                                index++;

-                                first = last = daysTexts[i];

-                                hourpickerValue.days[index] = days[first].caption;

-                            }

-                        }

-                    }

-                };

-                retrieveDaysText();

-

-                finalHourpickerValues.push(angular.copy(hourpickerValue));

-            }

-

-            return angular.copy(finalHourpickerValues);

-        }

-    };

-

-    return {

-        normalize: _normalize

-    };

-}])

-

-.directive('b2bHourpicker', ['b2bHourpickerConfig', 'b2bNormalizeHourpickerValues', function (b2bHourpickerConfig, b2bNormalizeHourpickerValues) {

-    return {

-        restrict: 'EA',

-        replace: false,

-        scope: true,

-        require: 'ngModel',

-        templateUrl: 'b2bTemplate/hourPicker/b2bHourpicker.html',

-        controller: ['$scope', function (scope) {

-

-        }],

-        link: function (scope, elem, attr, ctrl) {

-            scope.hourpicker = {};

-            scope.hourpicker.dayOptions = attr.dayOptions ? scope.$parent.$eval(attr.dayOptions) : b2bHourpickerConfig.dayOptions;

-            scope.hourpicker.startTimeOptions = attr.startTimeOptions ? scope.$parent.$eval(attr.startTimeOptions) : b2bHourpickerConfig.startTimeOptions;

-            scope.hourpicker.endTimeOptions = attr.endTimeOptions ? scope.$parent.$eval(attr.endTimeOptions) : b2bHourpickerConfig.endTimeOptions;

-            scope.hourpicker.startTimeDefaultOptionIndex = attr.startTimeDefaultOptionIndex ? scope.$parent.$eval(attr.startTimeDefaultOptionIndex) : b2bHourpickerConfig.startTimeDefaultOptionIndex;

-            scope.hourpicker.endTimeDefaultOptionIndex = attr.endTimeDefaultOptionIndex ? scope.$parent.$eval(attr.endTimeDefaultOptionIndex) : b2bHourpickerConfig.endTimeDefaultOptionIndex;

-            scope.hourpicker.startTimeDefaultMeridiem = attr.startTimeDefaultMeridiem ? scope.$parent.$eval(attr.startTimeDefaultMeridiem) : b2bHourpickerConfig.startTimeDefaultMeridiem;

-            scope.hourpicker.endTimeDefaultMeridiem = attr.endTimeDefaultMeridiem ? scope.$parent.$eval(attr.endTimeDefaultMeridiem) : b2bHourpickerConfig.endTimeDefaultMeridiem;

-            scope.hourpicker.sameDayOption = attr.sameDayOption ? scope.$parent.$eval(attr.sameDayOption) : b2bHourpickerConfig.sameDayOption;

-            scope.hourpicker.editMode = -1;

-

-            scope.hourpickerValues = [];

-            scope.finalHourpickerValues = [];

-            scope.addHourpickerValue = function (hourpickerPanelValue) {

-                if (hourpickerPanelValue) {

-                    if (scope.hourpicker.editMode > -1) {

-                        scope.hourpickerValues[scope.hourpicker.editMode] = hourpickerPanelValue;

-                        scope.hourpicker.editMode = -1;

-                    } else {

-                        scope.hourpickerValues.push(hourpickerPanelValue);

-                    }

-                }

-                scope.finalHourpickerValues = b2bNormalizeHourpickerValues.normalize(angular.copy(scope.hourpickerValues));

-                ctrl.$setViewValue(angular.copy(scope.hourpickerValues));

-            };

-            ctrl.$render = function () {

-                if (angular.isDefined(ctrl.$modelValue)) {

-                    scope.hourpickerValues = angular.copy(ctrl.$modelValue);

-                    scope.finalHourpickerValues = b2bNormalizeHourpickerValues.normalize(angular.copy(scope.hourpickerValues));

-                }

-            };

-            scope.editHourpickerValue = function (index) {

-                scope.hourpickerPanelValue = angular.copy(scope.hourpickerValues[index]);

-                scope.hourpicker.editMode = index;

-            };

-            scope.deleteHourpickerValue = function (index) {

-                scope.hourpickerValues.splice(index, 1);

-                scope.resetHourpickerPanelValue();

-                scope.addHourpickerValue();

-            };

-

-            scope.setValidity = function (errorType, errorValue) {

-                ctrl.$setValidity(errorType, errorValue);

-            }

-        }

-    }

-}])

-

-.directive('b2bHourpickerPanel', [function () {

-    return {

-        restrict: 'EA',

-        replace: false,

-        templateUrl: 'b2bTemplate/hourPicker/b2bHourpickerPanel.html',

-        controller: ['$scope', function (scope) {

-

-        }],

-        link: function (scope, elem, attr, ctrl) {

-            var hourpickerPanelValueTemplate = {

-                days: {},

-                startTime: '',

-                startMeridiem: 'am',

-                endTime: '',

-                endMeridiem: 'pm'

-            };

-            for (var i = 0; i < scope.hourpicker.dayOptions.length; i++) {

-                hourpickerPanelValueTemplate.days[i] = {

-                    value: false,

-                    title: scope.hourpicker.dayOptions[i].title,

-                    caption: scope.hourpicker.dayOptions[i].caption

-                };

-            }

-            scope.hourpickerPanelValue = {};

-            scope.disableAddBtn = true;

-

-            scope.$watch('hourpickerPanelValue.days', function(){

-                for(var i in scope.hourpickerPanelValue.days)

-                {

-                    if(scope.hourpickerPanelValue.days[i].value)

-                    {

-                        scope.disableAddBtn = false;

-                        break;

-                    }

-                    scope.disableAddBtn = true;

-                }

-            }, true);

-

-            scope.resetHourpickerPanelValue = function () {

-                scope.hourpickerPanelValue = angular.copy(hourpickerPanelValueTemplate);

-                if (scope.hourpicker.startTimeDefaultOptionIndex > -1) {

-                    scope.hourpickerPanelValue.startTime = scope.hourpicker.startTimeOptions[scope.hourpicker.startTimeDefaultOptionIndex];

-                }

-                if (scope.hourpicker.endTimeDefaultOptionIndex > -1) {

-                    scope.hourpickerPanelValue.endTime = scope.hourpicker.endTimeOptions[scope.hourpicker.endTimeDefaultOptionIndex];

-                }

-                scope.hourpickerPanelValue.startMeridiem = scope.hourpicker.startTimeDefaultMeridiem;

-                scope.hourpickerPanelValue.endMeridiem = scope.hourpicker.endTimeDefaultMeridiem;

-                scope.hourpicker.editMode = -1;

-                scope.setValidity('invalidHourpickerData', true);

-                scope.setValidity('invalidHourpickerTimeRange', true);

-            };

-            scope.resetHourpickerPanelValue();

-            scope.updateHourpickerValue = function () {

-                if (scope.isFormValid() && !scope.isTimeOverlap()) {

-                    scope.addHourpickerValue(angular.copy(scope.hourpickerPanelValue));

-                    scope.resetHourpickerPanelValue();

-                }

-            };

-

-            scope.isFormValid = function () {

-                var isStartTimeAvailable = scope.hourpickerPanelValue.startTime ? true : false;

-                var isStartMeridiemAvailable = scope.hourpickerPanelValue.startMeridiem ? true : false;

-                var isEndTimeAvailable = scope.hourpickerPanelValue.endTime ? true : false;

-                var isEndMeridiemAvailable = scope.hourpickerPanelValue.endMeridiem ? true : false;

-                var currentStartTime = getTime(scope.hourpickerPanelValue.startTime, scope.hourpickerPanelValue.startMeridiem);

-                var currentEndTime = getTime(scope.hourpickerPanelValue.endTime, scope.hourpickerPanelValue.endMeridiem);

-                var isTimeInProperSequence = currentEndTime > currentStartTime;

-                var isDayChecked = false;

-                for (var i in scope.hourpickerPanelValue.days) {

-                    if (scope.hourpickerPanelValue.days[i].value) {

-                        isDayChecked = true;

-                        break;

-                    }

-                }

-

-                if (isStartTimeAvailable && isStartMeridiemAvailable && isEndTimeAvailable && isEndMeridiemAvailable && isTimeInProperSequence && isDayChecked) {

-                    scope.setValidity('invalidHourpickerData', true);

-                    return true;

-                } else {

-                    scope.setValidity('invalidHourpickerData', false);

-                    return false;

-                }

-            };

-            scope.isTimeOverlap = function () {

-                var selectedDays = [];

-                for (var i in scope.hourpickerPanelValue.days) {

-                    if (scope.hourpickerPanelValue.days[i].value) {

-                        selectedDays.push(i);

-                    }

-                }

-

-                var currentStartTime, currentEndTime, existingStartTime, existingEndTime;

-                currentStartTime = getTime(scope.hourpickerPanelValue.startTime, scope.hourpickerPanelValue.startMeridiem);

-                currentEndTime = getTime(scope.hourpickerPanelValue.endTime, scope.hourpickerPanelValue.endMeridiem);

-                for (var i = 0; i < scope.hourpickerValues.length; i++) {

-                    

-                    if (i === scope.hourpicker.editMode) {

-                        continue;

-                    }

-

-                    for (var j = 0; j < selectedDays.length; j++) {

-                        existingStartTime = getTime(scope.hourpickerValues[i].startTime, scope.hourpickerValues[i].startMeridiem);

-                        existingEndTime = getTime(scope.hourpickerValues[i].endTime, scope.hourpickerValues[i].endMeridiem);

-                        if (scope.hourpickerValues[i].days[selectedDays[j]].value) {

-                            if(!scope.hourpicker.sameDayOption){

-                                scope.setValidity('dayAlreadySelected', false);

-                                return true;

-                            } else if ((currentStartTime > existingStartTime && currentStartTime < existingEndTime) || (currentEndTime > existingStartTime && currentEndTime < existingEndTime)) {

-                                scope.setValidity('invalidHourpickerTimeRange', false);

-                                return true;

-                            } else if ((existingStartTime > currentStartTime && existingStartTime < currentEndTime) || (existingEndTime > currentStartTime && existingEndTime < currentEndTime)) {

-                                scope.setValidity('invalidHourpickerTimeRange', false);

-                                return true;

-                            } else if ((currentStartTime === existingStartTime) && (currentEndTime === existingEndTime)) {

-                                scope.setValidity('invalidHourpickerTimeRange', false);

-                                return true;

-                            }

-                        }

-                    }

-                }

-

-                scope.setValidity('dayAlreadySelected', true);

-                scope.setValidity('invalidHourpickerTimeRange', true);

-                return false;

-            };

-            var getTime = function (timeString, meridiem) {

-                var tempDate = new Date();

-                if (timeString && meridiem) {

-                    var timeSplit = timeString.split(':');

-                    var hour = ((meridiem === 'PM' || meridiem === 'pm') && timeSplit[0] !== '12') ? parseInt(timeSplit[0], 10) + 12 : parseInt(timeSplit[0], 10);

-                    tempDate.setHours(hour, parseInt(timeSplit[1], 10), 0, 0);

-                }

-

-                return tempDate.getTime();

-            };

-        }

-    }

-}])

-

-.directive('b2bHourpickerValue', [function () {

-    return {

-        restrict: 'EA',

-        replace: false,

-        templateUrl: 'b2bTemplate/hourPicker/b2bHourpickerValue.html',

-        controller: ['$scope', function (scope) {

-

-        }],

-        link: function (scope, elem, attr, ctrl) {

-            scope.hourpickerValue = {};

-            scope.hourpickerValue.startTime = attr.startTime ? scope.$eval(attr.startTime) : '';

-            scope.hourpickerValue.startMeridiem = attr.startMeridiem ? scope.$eval(attr.startMeridiem) : '';

-            scope.hourpickerValue.endTime = attr.endTime ? scope.$eval(attr.endTime) : '';

-            scope.hourpickerValue.endMeridiem = attr.endMeridiem ? scope.$eval(attr.endMeridiem) : '';

-            scope.hourpickerValue.days = attr.days ? scope.$eval(attr.days).join(', ') : '';

-            scope.hourpickerValue.index = attr.b2bHourpickerValue ? scope.$eval(attr.b2bHourpickerValue) : -1;

-        }

-    }

-}]);

-/**

- * @ngdoc directive

- * @name Template.att:inputTemplate

- *

- * @description

- *  <file src="src/inputTemplate/docs/readme.md" />

- *

- * @usage

- *  <input type="text" id="fieldId" placeholder="placholder text here" class="span12 input-enhanced" name="fieldName">

- *

- * @example

- <section id="code">

-    <b>HTML + AngularJS</b>

-    <example module="b2b.att">

-        <file src="src/inputTemplate/docs/demo.html" />

-        <file src="src/inputTemplate/docs/demo.js" />

-    </example>

- </section>

- */

-angular.module('b2b.att.inputTemplate', []);

-

-/**

- * @ngdoc directive

- * @name Navigation.att:leftNavigation

- *

- * @description

- *  <file src="src/leftNavigation/docs/readme.md" />

- *

- * @usage

- *   <b2b-left-navigation data-menu="menuData"></b2b-left-navigation> 

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/leftNavigation/docs/demo.html" />

-            <file src="src/leftNavigation/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.leftNavigation', [])

-    .directive('b2bLeftNavigation', [function () {

-        return {

-            restrict: 'EA',

-            templateUrl: 'b2bTemplate/leftNavigation/leftNavigation.html',

-            scope: {

-                menuData: '='

-            },

-            link: function (scope, element, attrs, ctrl) {

-                scope.idx = -1;

-                scope.itemIdx = -1;

-                scope.navIdx = -1;

-                scope.toggleNav = function (val,link) {

-                    if (val === scope.idx) {

-                        scope.idx = -1;

-                        return;

-                    }

-                    scope.idx = val;

-                };

-                /*New function for ECOMP sdk*/

-                scope.toggleDrawer = function(showmenu){

-                	scope.idx=-1; /*hide the sunmenus*/

-                	if(showmenu){

-            			document.getElementById('page-content').style.paddingLeft = "50px";

-            		}

-            		else

-            			document.getElementById('page-content').style.paddingLeft = "230px";           	

-                };

-                scope.liveLink = function (evt, val1, val2) {

-                    scope.itemIdx = val1;

-                    scope.navIdx = val2;

-                    evt.stopPropagation();

-                };

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:links

- *

- * @description

- *  <file src="src/links/docs/readme.md" />

- * @usage

- *      <!-- See below examples for link implementation -->

- *      

- * @example

-       <section id="code">              

-           <b>HTML + AngularJS</b>

-           <example module="b2b.att">

-           <file src="src/links/docs/demo.html" />

-            <file src="src/links/docs/demo.js" />            

-          </example>          

-        </section>

- */

-angular.module('b2b.att.links', []);

-/**

- * @ngdoc directive

- * @name Misc.att:listbox

- *

- * @description

- *  <file src="src/listbox/docs/readme.md" />

- *

- * @param {int} currentIndex - Current index of selected listbox item. Is not supported on multiselect listbox

- * @param {Array} listboxData - Data of listbox items. Should include full data regardless if HTML will be filtered.

-

- * @example

- *  <section id="code">   

-     <example module="b2b.att">

-     <file src="src/listbox/docs/demo.html" />

-     <file src="src/listbox/docs/demo.js" />

-     </example>

-    </section>

- *

- */

-angular.module('b2b.att.listbox', ['b2b.att.utilities'])

-.directive('b2bListBox', ['keymap', 'b2bDOMHelper', '$rootScope', function(keymap, b2bDOMHelper, $rootScope) {

-                return {

-                    restrict: 'AE',

-                    transclude: true,

-                    replace: true,

-                    scope: {

-                        currentIndex: '=', 

-                        listboxData: '='

-                    },

-                    templateUrl: 'b2bTemplate/listbox/listbox.html',

-                    link: function(scope, elem, attr) {

-

-                        if (attr.ariaMultiselectable !== undefined || attr.ariaMultiselectable === 'true') {

-                            scope.multiselectable = true;

-                        } else {

-                            scope.multiselectable = false;

-                        }

-

-                        var shiftKey = false;

-                        var elements = [];

-                        var prevDirection = undefined; // previous direction is used for an edge case when shifting

-                        var shiftKeyPressed = false; // Used to handle shift clicking

-                        var ctrlKeyPressed = false;

-

-                        var currentIndexSet = {

-                            'elementIndex': 0,

-                            'listboxDataIndex': 0

-                        };

-

-                        /*scope.$watch('currentIndex', function(oldVal, newVal) {

-                            if (angular.equals(oldVal, newVal)) return;

-                            if (!scope.multiselectable) {

-                                // This doesn't garuntee anything. index will update on focus based on rules

-                                currentIndexSet.listboxDataIndex = scope.currentIndex;

-                                // Should this occur? 

-                                //scope.listboxData[currentIndexSet.listboxDataIndex].selected = true;

-

-                                // Update elementIndex

-                                elements = elem.children();

-                                var indecies = Array.prototype.map.call(elements, function(item) {

-                                    return parseInt(angular.element(item).attr('data-index'), 10);

-                                }).filter(function(item) {

-                                    return item === scope.currentIndex;

-                                });

-                                currentIndex.elementIndex = indecies[0];

-                                //focusOnElement(currentIndexSet.elementIndex); // This isn't shifting focus

-                                if (!scope.$$phase) {

-                                    scope.$apply();

-                                }

-                            }

-                        });*/

-

-                        function isTrue(item) {

-                            if (item.selected === true) {

-                                return true;

-                            }

-                        }

-

-                        function incrementIndex(elem) {

-                            $rootScope.$apply();

-

-                            var nextElem = elem.next();

-                            if (!angular.isDefined(nextElem) || nextElem.length === 0) {

-                                return;

-                            }

-

-                            currentIndexSet.elementIndex += 1;

-                            currentIndexSet.listboxDataIndex = parseInt(nextElem.attr('data-index'), 10);

-                            scope.currentIndex = currentIndexSet.listboxDataIndex;

-

-                            if (currentIndexSet.elementIndex >= elements.length - 1) {

-                                currentIndexSet.elementIndex = elements.length-1;

-                            }

-                        }

-

-                        function decrementIndex(elem) {

-                            $rootScope.$apply();

-                            var prevElem = angular.element(b2bDOMHelper.previousElement(elem));

-                            if (!angular.isDefined(prevElem) || prevElem.length === 0) {

-                                return;

-                            }

-

-                            currentIndexSet.elementIndex -= 1;

-                            currentIndexSet.listboxDataIndex = parseInt(prevElem.attr('data-index'), 10);

-                            scope.currentIndex = currentIndexSet.listboxDataIndex;

-

-                            if (currentIndexSet.elementIndex <= 0) {

-                                currentIndexSet.elementIndex = 0;

-                            }

-                        }

-

-                        var focusOnElement = function(index) {

-                            try {

-                                elements[index].focus();

-                            } catch (e) {};

-                        }

-

-                        function selectItems(startIndex, endIndex, forceValue) {

-                            for (var i = startIndex; i < endIndex; i++) {

-                                if (forceValue === undefined) {

-                                    // We will flip the value

-                                    scope.listboxData[i].selected = !scope.listboxData[i].selected;

-                                } else {

-                                    scope.listboxData[i].selected = forceValue;

-                                }

-                            }

-

-                            if (!scope.$$phase) {

-                                scope.$apply();

-                            }

-                        }

-

-                        elem.bind('focus', function(evt) { 

-                            // If multiselectable or not and nothing is selected, put focus on first element 

-                            // If multiselectable and a range is set, put focus on first element of range 

-                            // If not multiselectable and something selected, put focus on element 

-                            elements = elem.children(); 

-                             var selectedItems = scope.listboxData.filter(isTrue); 

-                             var elementsIndies = Array.prototype.map.call(elements, function(item) {

-                                return parseInt(angular.element(item).attr('data-index'), 10);

-                            });

- 

-                            if (selectedItems.length == 0) { 

-                                focusOnElement(0); 

-                                currentIndexSet.listboxDataIndex = 0;

-                            } else if (attr.ariaMultiselectable) { 

-                                var index = scope.listboxData.indexOf(selectedItems[0]); 

-                                var indies = elementsIndies.filter(function(item) {

-                                    return (item === index);

-                                });

-

-                                if (indies.length === 0 || indies[0] != index) {

-                                    // Set focused on 0

-                                    currentIndexSet.elementIndex = elementsIndies[0]; 

-                                    currentIndexSet.listboxDataIndex = 0;

-                                    focusOnElement(currentIndexSet.elementIndex);

-                                } else {

-                                    focusOnElement(indies[0]); 

-                                    currentIndexSet.elementIndex = indies[0];

-                                    currentIndexSet.listboxDataIndex = index;

-                                }

-                            } else { 

-                                focusOnElement(currentIndexSet.elementIndex);  

-                            }

-                            scope.currentIndex = currentIndexSet.listboxDataIndex;

-

-                            if (!scope.$$phase) {

-                                scope.$apply();

-                            }

-                        });

-                        elem.bind('keyup', function(evt) {

-                            if (evt.keyCode === keymap.KEY.SHIFT) {

-                                shiftKeyPressed = false;

-                            } else if (evt.keyCode === keymap.KEY.CTRL) {

-                                ctrlKeyPressed = false;

-                            }

-                        });

-        

-                        elem.bind('keydown', function(evt) {

-                            var keyCode = evt.keyCode;

-                            elements = elem.children();

-                            if (keyCode === keymap.KEY.SHIFT) {

-                                shiftKeyPressed = true;

-                            } else if (evt.keyCode === keymap.KEY.CTRL) {

-                                ctrlKeyPressed = true;

-                            }

-

-                            switch(keyCode) {

-                                case 65: // A key

-                                {

-                                    if (scope.multiselectable && evt.ctrlKey) {

-                                        var arr = scope.listboxData.filter(isTrue);

-                                        var elementsIndies = Array.prototype.map.call(elements, function(item) {

-                                            return parseInt(angular.element(item).attr('data-index'), 10);

-                                        });

-                                        var val = !(arr.length === scope.listboxData.length);

-                                        for (var i = 0; i < elementsIndies.length; i++) {

-                                            scope.listboxData[elementsIndies[i]].selected = val;

-                                        }

-

-                                        if (!scope.$$phase) {

-                                            scope.$apply();

-                                        }

-                                        

-                                        evt.preventDefault();

-                                        evt.stopPropagation();

-                                    }

-                                    break;

-                                }

-                                case keymap.KEY.END:

-                                {

-                                    if (scope.multiselectable && evt.ctrlKey && evt.shiftKey) {

-                                        var elementsIndies = Array.prototype.map.call(elements, function(item) {

-                                            return parseInt(angular.element(item).attr('data-index'), 10);

-                                        }).filter(function(item) {

-                                            return (item >= currentIndexSet.listboxDataIndex);

-                                        });

-                                        for (var i = 0; i < elementsIndies.length; i++) {

-                                            scope.listboxData[elementsIndies[i]].selected = true;

-                                        }

-                                        evt.preventDefault();

-                                        evt.stopPropagation();

-

-                                        if (!scope.$$phase) {

-                                            scope.$apply();

-                                        }

-                                    }

-                                    break;

-                                }

-                                case keymap.KEY.HOME: 

-                                {

-                                    if (scope.multiselectable && evt.ctrlKey && evt.shiftKey) {

-                                        selectItems(0, currentIndexSet.listboxDataIndex+1, true); // currentIndex+1 is what is being focused on

-                                        evt.preventDefault();

-                                        evt.stopPropagation();

-                                    }

-                                    break;

-                                }

-                                case keymap.KEY.LEFT:

-                                case keymap.KEY.UP:

-                                {

-                                    if (currentIndexSet.listboxDataIndex === 0) {

-                                        evt.preventDefault();

-                                        evt.stopPropagation();

-                                        return;

-                                    }

-

-                                    decrementIndex(elements.eq(currentIndexSet.elementIndex));

-                                    if (scope.multiselectable && (evt.shiftKey || evt.ctrlKey)) {

-                                        if (evt.shiftKey) {

-                                            if (prevDirection === 'DOWN') {

-                                                scope.listboxData[currentIndexSet.listboxDataIndex+1].selected = !scope.listboxData[currentIndexSet.listboxDataIndex+1].selected;

-                                            }

-                                            scope.listboxData[currentIndexSet.listboxDataIndex].selected = !scope.listboxData[currentIndexSet.listboxDataIndex].selected;

-                                        }

-                                        prevDirection = 'UP';

-                                    } else {

-                                        // If no modifier keys are selected, all other items need to be unselected.

-                                        prevDirection = undefined;

-                                        selectItems(0, scope.listboxData.length, false);

-                                        scope.listboxData[currentIndexSet.listboxDataIndex].selected = true;

-                                    }

-                                    focusOnElement(currentIndexSet.elementIndex);

-                                    if(!scope.$$phase) {

-                                        scope.$apply();

-                                    }

-                                    evt.preventDefault();

-                                    evt.stopPropagation();

-                                    break;

-                                }

-                                case keymap.KEY.RIGHT:

-                                case keymap.KEY.DOWN:

-                                {

-                                    if (currentIndexSet.listboxDataIndex === scope.listboxData.length-1) {

-                                        evt.preventDefault();

-                                        evt.stopPropagation();

-                                        return;

-                                    }

-

-                                    incrementIndex(elements.eq(currentIndexSet.elementIndex));

-                                    

-                                    if (scope.multiselectable && (evt.shiftKey || evt.ctrlKey)) {

-                                        if (evt.shiftKey) {

-                                            if (prevDirection === 'UP') {

-                                                scope.listboxData[currentIndexSet.listboxDataIndex-1].selected = !scope.listboxData[currentIndexSet.listboxDataIndex-1].selected;

-                                            }

-                                            

-                                            scope.listboxData[currentIndexSet.listboxDataIndex].selected = !scope.listboxData[currentIndexSet.listboxDataIndex].selected;    

-                                        }

-                                        prevDirection = 'DOWN';

-                                    } else {

-                                        // If no modifier keys are selected, all other items need to be unselected.

-                                        prevDirection = undefined;

-                                        selectItems(0, scope.listboxData.length, false);

-                                        scope.listboxData[currentIndexSet.listboxDataIndex].selected = true;

-                                    }

-

-                                    focusOnElement(currentIndexSet.elementIndex);

-                                    if(!scope.$$phase) {

-                                        scope.$apply();

-                                    }

-                                    evt.preventDefault();

-                                    evt.stopPropagation();

-                                    break;

-                                }

-                                case keymap.KEY.TAB:

-                                    if(evt.shiftKey) {

-                                        var previousElement = b2bDOMHelper.previousElement(elem.parent().parent(), true);

-                                        evt.preventDefault();

-                                        previousElement.focus();

-                                    }

-                                    break;

-                                default:

-                                    break;

-                            }

-                        });

-

-                        elem.bind('click', function(evt) {

-                            var index = parseInt(evt.target.dataset.index, 10);

-                            if (index === undefined || isNaN(index)) {

-                                return;

-                            }

-                            if (scope.multiselectable && currentIndexSet.listboxDataIndex !== undefined) {

-                                if (shiftKeyPressed) {

-                                    var min = Math.min(index, currentIndexSet.listboxDataIndex);

-                                    var max = Math.max(index, currentIndexSet.listboxDataIndex);

-

-                                    if (index === min) { // clicking up

-                                        var firstIndex = scope.listboxData.findIndex(function(item) { return item.selected === true;});

-                                        // Given the firstIndex, let's find the matching element to get proper element match

-                                        elements = elem.children();

-                                        elements.eq(firstIndex)

-                                        var elementsThatMatch = Array.prototype.filter.call(elements, function(item) {

-                                            if (parseInt(angular.element(item).attr('data-index'), 10) === firstIndex) {

-                                                return true;

-                                            }

-                                        });

-                                        firstIndex = parseInt(angular.element(elementsThatMatch).attr('data-index'), 10);

-                                        

-                                        if (index <= firstIndex && scope.listboxData.filter(isTrue).length > 1) {

-                                            // Break the selection into 2

-                                            selectItems(firstIndex + 1, max + 1, undefined); // + 1 needed because selectItems only selects up to MAX

-                                            selectItems(min, firstIndex, undefined); 

-                                        } else if (scope.listboxData.filter(isTrue).length == 1){

-                                            selectItems(min, max, undefined); 

-                                        } else {

-                                            selectItems(min + 1, max + 1, undefined);

-                                        }

-                                    } else { // clicking down

-                                        selectItems(min + 1, max + 1, scope.listboxData[min].selected);

-                                    }

-                                } else if (ctrlKeyPressed) {

-                                    scope.listboxData[index].selected = !scope.listboxData[index].selected;

-                                } else {

-                                    selectItems(0, scope.listboxData.length, false);

-                                    scope.listboxData[index].selected = !scope.listboxData[index].selected;

-                                }

-                            } else {

-                                selectItems(0, scope.listboxData.length, false);

-                                scope.listboxData[index].selected = !scope.listboxData[index].selected;

-                            }

-                            currentIndexSet.elementIndex = index;

-                            currentIndexSet.listboxDataIndex = index;

-                            scope.currentIndex = currentIndexSet.listboxDataIndex;

-                            if (!scope.$$phase) {

-                                scope.$apply();

-                            }

-                            focusOnElement(index);

-                        });

-                    }

-                };

-            }]);

-/**

- * @ngdoc directive

- * @name Videos, audio & animation.att:loaderAnimation

- *

- * @description

- *  <file src="src/loaderAnimation/docs/readme.md" />

- *

- * @usage

- *   <!-- Below demo js shows-->

- *   Angular library uses Global.css's icon-primary-spinner.

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/loaderAnimation/docs/demo.html" />

-            <file src="src/loaderAnimation/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.loaderAnimation', [])

-    .constant('b2bSpinnerConfig', {

-        loadingText: 'Loading...',

-        startEvent: 'startButtonSpinner',

-        stopEvent: 'stopButtonSpinner'

-    })

-    .constant("progressTrackerConfig", {

-        loadingText: 'Loading...',

-        minDuration: "",

-        activationDelay: "",

-        minDurationPromise: "",

-        activationDelayPromise: ""

-    })

-

-.provider('progressTracker', function () {

-    this.$get = ['$q', '$timeout', function ($q, $timeout) {

-        function cancelTimeout(promise) {

-            if (promise) {

-                $timeout.cancel(promise);

-            }

-        }

-        return function ProgressTracker(options) {

-            //do new if user doesn't

-            if (!(this instanceof ProgressTracker)) {

-                return new ProgressTracker(options);

-            }

-

-            options = options || {};

-            //Array of promises being tracked

-            var tracked = [];

-            var self = this;

-            //Allow an optional "minimum duration" that the tracker has to stay active for.

-            var minDuration = options.minDuration;

-            //Allow a delay that will stop the tracker from activating until that time is reached

-            var activationDelay = options.activationDelay;

-            var minDurationPromise;

-            var activationDelayPromise;

-            self.active = function () {

-                //Even if we have a promise in our tracker, we aren't active until delay is elapsed

-                if (activationDelayPromise) {

-                    return false;

-                }

-                return tracked.length > 0;

-            };

-            self.tracking = function () {

-                //Even if we aren't active, we could still have a promise in our tracker

-                return tracked.length > 0;

-            };

-            self.destroy = self.cancel = function () {

-                minDurationPromise = cancelTimeout(minDurationPromise);

-                activationDelayPromise = cancelTimeout(activationDelayPromise);

-                for (var i = tracked.length - 1; i >= 0; i--) {

-                    tracked[i].resolve();

-                }

-                tracked.length = 0;

-            };

-            //Create a promise that will make our tracker active until it is resolved.

-            // @return deferred - our deferred object that is being tracked

-            self.createPromise = function () {

-                var deferred = $q.defer();

-                tracked.push(deferred);

-                //If the tracker was just inactive and this the first in the list of promises, we reset our delay and minDuration again.

-                if (tracked.length === 1) {

-                    if (activationDelay) {

-                        activationDelayPromise = $timeout(function () {

-                            activationDelayPromise = cancelTimeout(activationDelayPromise);

-                            startMinDuration();

-                        }, activationDelay);

-                    } else {

-                        startMinDuration();

-                    }

-                }

-                deferred.promise.then(onDone(false), onDone(true));

-                return deferred;

-

-                function startMinDuration() {

-                    if (minDuration) {

-                        minDurationPromise = $timeout(angular.noop, minDuration);

-                    }

-                }

-                //Create a callback for when this promise is done. It will remove our tracked promise from the array if once minDuration is complete

-                function onDone() {

-                    return function () {

-                        (minDurationPromise || $q.when()).then(function () {

-                            var index = tracked.indexOf(deferred);

-                            tracked.splice(index, 1);

-                            //If this is the last promise, cleanup the timeouts for activationDelay

-                            if (tracked.length === 0) {

-                                activationDelayPromise = cancelTimeout(activationDelayPromise);

-                            }

-                        });

-                    };

-                }

-            };

-            self.addPromise = function (promise) {

-                

-//                we cannot assign then function in other var and then add the resolve and reject 

-                var thenFxn = promise && (promise.then || promise.$then || (promise.$promise && promise.$promise.then));                

-                if (!thenFxn) {

-                    throw new Error("progressTracker expects a promise object :: Not found");

-                }

-                var deferred = self.createPromise();

-                //When given promise is done, resolve our created promise

-                //Allow $then for angular-resource objects

-

-                promise.then(function (value) {

-                        deferred.resolve(value);

-                        return value;

-                    }, function (value) {

-                        deferred.reject(value);

-                        return $q.reject(value);

-                    }

-                );

-                return deferred;

-            };

-        };

-    }];

-})

-

-.config(['$httpProvider', function ($httpProvider) {

-    $httpProvider.interceptors.push(['$q', 'progressTracker', function ($q) {

-        return {

-            request: function (config) {

-                if (config.tracker) {

-                    if (!angular.isArray(config.tracker)) {

-                        config.tracker = [config.tracker];

-                    }

-                    config.$promiseTrackerDeferred = config.$promiseTrackerDeferred || [];

-

-                    angular.forEach(config.tracker, function (tracker) {

-                        var deferred = tracker.createPromise();

-                        config.$promiseTrackerDeferred.push(deferred);

-                    });

-                }

-                return $q.when(config);

-            },

-            response: function (response) {

-                if (response.config && response.config.$promiseTrackerDeferred) {

-                    angular.forEach(response.config.$promiseTrackerDeferred, function (deferred) {

-                        deferred.resolve(response);

-                    });

-                }

-                return $q.when(response);

-            },

-            responseError: function (response) {

-                if (response.config && response.config.$promiseTrackerDeferred) {

-                    angular.forEach(response.config.$promiseTrackerDeferred, function (deferred) {

-                        deferred.reject(response);

-                    });

-                }

-                return $q.reject(response);

-            }

-        };

-    }]);

-}])

-

-.directive('b2bClickSpin', ['$timeout', '$parse', '$rootScope', 'progressTracker', function ($timeout, $parse, $rootScope, progressTracker) {

-    return {

-        restrict: 'A',

-        link: function (scope, elm, attrs) {

-            var fn = $parse(attrs.b2bClickSpin);

-            elm.on('click', function (event) {

-                var promise = $timeout(function () {console.log("inside Promise")}, 5000);

-                scope.$apply(function () {

-                    fn(scope, {

-                        $event: event

-                    });

-                });

-                //comment this line if not running unit test

-                $rootScope.loadingTracker = progressTracker({

-                    minDuration: 750

-                });

-                $rootScope.loadingTracker.addPromise(promise);

-                angular.forEach("$routeChangeSuccess $viewContentLoaded $locationChangeSuccess".split(" "), function (event) {

-                    $rootScope.$on(event, function () {

-

-                        $timeout.cancel(promise);

-                    });

-                });

-            });

-        }

-    };

-}])

-

-.directive('b2bProgressTracker', ['progressTrackerConfig', function (ptc) {

-    return {

-        restrict: 'EA',

-        replace: true,

-        template: '<div><div ng-show="loadingTracker.active()" style="width:100%; text-align:center"><i class=\"icon-primary-spinner\"></i></div><div ng-show="loadingTracker.active()" style="width:100%;margin-top:10px; text-align:center">'+ ptc.loadingText+'</div></div>'

-    };

-}])

-

-.directive('b2bLoadButton', ['b2bSpinnerConfig', '$timeout', function (spinnerConfig, $timeout) {

-    var spinButton = function (state, element, data) {

-        

-        var attr = element.html() ? 'html' : 'val';

-        state = state + 'Text';

-        if (state === 'loadingText') {

-            element[attr](data[state]);

-            element.attr("disabled",'disabled');

-            element.addClass('disabled');

-        } else if (state === 'resetText') {

-            element[attr](data[state]);

-            element.removeAttr("disabled");

-            element.removeClass('disabled');

-        }

-    };

-

-    return {

-        restrict: 'A',

-        replace: false,

-        scope: {

-            promise: '=promise',

-            startEvent: '@startEvent',

-            stopEvent: '@stopEvent'

-        },

-        link: function (scope, element, attr) {

-            var validAttr = element.html() ? 'html' : 'val';

-            var data = {

-                loadingText: '',

-                resetText: ''

-            };

-

-            var updateLoadingText = function (val) {

-                var loadingText = val;

-                if (!angular.isDefined(loadingText) || loadingText === "") {

-                    loadingText = spinnerConfig.loadingText;

-                }

-                data.loadingText = validAttr === 'html' ? "<i class=\"icon-primary-spinner small\"></i>" + loadingText : loadingText;

-            };

-            var updateResetText = function (val) {

-                data.resetText = val;

-            };

-

-            attr.$observe('b2bLoadButton', function (val) {

-                updateLoadingText(val);

-            });

-            $timeout(function () {

-                updateResetText(element[validAttr]());

-            }, 500);

-

-            if (!angular.isDefined(scope.startEvent) || scope.startEvent === "") {

-                scope.startEvent = spinnerConfig.startEvent;

-            }

-

-            if (!angular.isDefined(scope.stopEvent) || scope.stopEvent === "") {

-                scope.stopEvent = spinnerConfig.stopEvent;

-            }

-

-            scope.$watch('promise', function () {

-                if (angular.isDefined(scope.promise) && angular.isFunction(scope.promise.then)) {

-                    spinButton('loading', element, data);

-                    scope.promise.then(function () {

-                        spinButton('reset', element, data);

-                    }, function () {

-                        spinButton('reset', element, data);

-                    });

-                }

-            });

-

-            scope.$on(scope.startEvent, function () {

-                spinButton('loading', element, data);

-                scope.$on(scope.stopEvent, function () {

-                    spinButton('reset', element, data);

-                });

-            });

-        }

-    };

-}])

-

-

-;

- /**

- * @ngdoc directive

- * @name Misc.att:messageWrapper

- * @scope

- * @param {boolean} trigger - A boolean that triggers directive to switch focus

- * @param {integer} delay  - Extra delay added to trigger code to allow for DOM to be ready. Default is 10ms.

- * @param {string} noFocus - Attribute-based API to trigger whether first focusable element receives focus on trigger or whole message (assumes tabindex="-1" set on first child)

- * @param {string} trapFocus - Attribute-based API to trap focus within the message. This should be enabled by default on all toast messages.

- * @description

- *  <file src="src/messageWrapper/docs/readme.md" />

- * @usage

- * <b2b-message-wrapper>Code that contains at least one focusable element and will be shown/hidden on some logic. This must have tabindex="-1".</b2b-message-wrapper>

- *

- * @example

- *  <section id="code">   

- <b>HTML + AngularJS</b>

- <example module="b2b.att">

- <file src="src/messageWrapper/docs/demo.html" />

- <file src="src/messageWrapper/docs/demo.js" />

- </example>

- </section>

- *

- */

-angular.module('b2b.att.messageWrapper', ['b2b.att.utilities'])

-.directive('b2bMessageWrapper', ['b2bDOMHelper', '$compile', '$timeout', '$log', function(b2bDOMHelper, $compile, $timeout, $log) {

-  return {

-    restrict: 'AE',

-    scope: {

-      trigger: '=',

-      delay: '=?'

-    },

-    transclude: true,

-    replace: true,

-    template: '<div ng-transclude></div>',

-    link: function(scope, elem, attrs) {

-      scope.delay = scope.delay || 10;

-

-      if (attrs.trapFocus != undefined && !elem.children().eq(0).attr('b2b-trap-focus-inside-element')) {

-        // Append b2bTrapFocusInsideElement onto first child and recompile

-        elem.children().eq(0).attr('b2b-trap-focus-inside-element', 'false');

-        elem.children().eq(0).attr('trigger', scope.trigger);

-        $compile(elem.contents())(scope);

-      }

-

-      var firstElement = undefined,

-          launchingElement = undefined;

-      

-      scope.$watch('trigger', function(oldVal, newVal) {

-        if (oldVal === newVal) return;

-        if (!angular.isDefined(launchingElement)) {

-          launchingElement = document.activeElement;

-        }

-        $timeout(function() {

-          if (scope.trigger) {

-

-            if (attrs.noFocus === true || attrs.noFocus === "") {

-              elem.children()[0].focus();

-            } else {

-              firstElement = b2bDOMHelper.firstTabableElement(elem);

-

-              if (angular.isDefined(firstElement)) {

-                firstElement.focus();

-              }

-            }

-            

-          } else {

-            if (angular.isDefined(launchingElement) && launchingElement.nodeName !== 'BODY') {

-              if (launchingElement === document.activeElement) {

-                return;

-              }

-

-              if (b2bDOMHelper.isInDOM(launchingElement) && b2bDOMHelper.isTabable(launchingElement)) {

-                  // At this point, launchingElement is still a valid element, but focus will fail and 

-                  // activeElement will become body, hence we want to apply custom logic and find previousElement

-                  var prevLaunchingElement = launchingElement;

-                  launchingElement.focus();

-

-                  if (document.activeElement !== launchingElement || document.activeElement.nodeName === 'BODY') {

-                    launchingElement = b2bDOMHelper.previousElement(angular.element(prevLaunchingElement), true);

-                    launchingElement.focus();

-                  }

-              } else {

-                launchingElement = b2bDOMHelper.previousElement(launchingElement, true);

-                launchingElement.focus();

-              }

-            }

-          }

-        }, scope.delay); 

-      });

-    }

-  };

-}]);

-/**

- * @ngdoc directive

- * @name Messages, modals & alerts.att:modalsAndAlerts

- *

- * @description

- *  <file src="src/modalsAndAlerts/docs/readme.md" />

- *

- * @usage

- *  <button class="btn" b2b-modal="b2bTemplate/modalsAndAlerts/demo_modal.html" modal-ok="ok()" modal-cancel="cancel()">Launch demo modal</button>

- *

- * @example

- *  <section id="code">

-     <example module="b2b.att">

-      <file src="src/modalsAndAlerts/docs/demo.html" />

-      <file src="src/modalsAndAlerts/docs/demo.js" />

-     </example>

-    </section>

- *

- */

-angular.module('b2b.att.modalsAndAlerts', ['b2b.att.position', 'b2b.att.transition', 'b2b.att.utilities'])

-

-/**

- * A helper, internal data structure that acts as a map but also allows getting / removing

- * elements in the LIFO order

- */

-.factory('$$stackedMap', function () {

-    return {

-        createNew: function () {

-            var stack = [];

-

-            return {

-                add: function (key, value) {

-                    stack.push({

-                        key: key,

-                        value: value

-                    });

-                },

-                get: function (key) {

-                    for (var i = 0; i < stack.length; i++) {

-                        if (key === stack[i].key) {

-                            return stack[i];

-                        }

-                    }

-                },

-                keys: function () {

-                    var keys = [];

-                    for (var i = 0; i < stack.length; i++) {

-                        keys.push(stack[i].key);

-                    }

-                    return keys;

-                },

-                top: function () {

-                    return stack[stack.length - 1];

-                },

-                remove: function (key) {

-                    var idx = -1;

-                    for (var i = 0; i < stack.length; i++) {

-                        if (key === stack[i].key) {

-                            idx = i;

-                            break;

-                        }

-                    }

-                    return stack.splice(idx, 1)[0];

-                },

-                removeTop: function () {

-                    return stack.splice(stack.length - 1, 1)[0];

-                },

-                length: function () {

-                    return stack.length;

-                }

-            };

-        }

-    };

-}).factory('trapFocusInElement', ['$document', '$isElement', 'DOMHelper', 'keymap', function ($document, $isElement, DOMHelper, keymap) {

-    var elementStack = [];

-    var stackHead = undefined;

-    var firstTabableElement, lastTabableElement;

-

-    var trapKeyboardFocusInFirstElement = function (e) {

-        if (!e.keyCode) {

-            e.keyCode = e.which;

-        }

-

-        if (e.shiftKey === true && e.keyCode === keymap.KEY.TAB) {

-            lastTabableElement[0].focus();

-            e.preventDefault(e);

-            e.stopPropagation(e);

-        }

-

-    };

-

-    var trapKeyboardFocusInLastElement = function (e) {

-        if (!e.keyCode) {

-            e.keyCode = e.which;

-        }

-

-        if (e.shiftKey === false && e.keyCode === keymap.KEY.TAB) {

-            firstTabableElement[0].focus();

-            e.preventDefault(e);

-            e.stopPropagation(e);

-        }

-    };

-    

-    var trapFocusInElement = function (flag, firstTabableElementParam, lastTabableElementParam) {

-        var bodyElements = $document.find('body').children();

-

-        firstTabableElement = firstTabableElementParam ? firstTabableElementParam : angular.element(DOMHelper.firstTabableElement(stackHead));

-        lastTabableElement = lastTabableElementParam ? lastTabableElementParam : angular.element(DOMHelper.lastTabableElement(stackHead));

-

-        if (flag) {

-            for (var i = 0; i < bodyElements.length; i++) {

-                if (bodyElements[i] !== stackHead[0]) {

-                    bodyElements.eq(i).attr('aria-hidden', true);

-                }

-            }

-            firstTabableElement.bind('keydown', trapKeyboardFocusInFirstElement);

-            lastTabableElement.bind('keydown', trapKeyboardFocusInLastElement);

-        } else {

-            for (var j = 0; j < bodyElements.length; j++) {

-                if (bodyElements[j] !== stackHead[0]) {

-                    bodyElements.eq(j).removeAttr('aria-hidden');

-                }

-            }

-            firstTabableElement.unbind('keydown', trapKeyboardFocusInFirstElement);

-            lastTabableElement.unbind('keydown', trapKeyboardFocusInLastElement);

-        }

-    };

-    var toggleTrapFocusInElement = function (flag, element) {

-        if (angular.isDefined(flag) && angular.isDefined(element)) {

-            if (angular.isUndefined(stackHead)) {

-                stackHead = element;

-                trapFocusInElement(flag);

-            } else {

-                if (flag) {

-                    trapFocusInElement(false);

-                    elementStack.push(stackHead);

-                    stackHead = element;

-                    trapFocusInElement(true);

-                } else {

-                    if (stackHead.prop('$$hashKey') === element.prop('$$hashKey')) {

-                        trapFocusInElement(false);

-                        stackHead = elementStack.pop();

-                        if (angular.isDefined(stackHead)) {

-                            trapFocusInElement(true);

-                        }

-                    }

-                }

-            }

-        }else {

-            if (angular.isDefined(stackHead)) {

-                trapFocusInElement(false, firstTabableElement, lastTabableElement);

-                trapFocusInElement(true);

-            }

-        }

-    };

-

-    return toggleTrapFocusInElement;

-}])

-

-/**

- * A helper directive for the $modal service. It creates a backdrop element.

- */

-.directive('b2bModalBackdrop', ['$modalStack', '$timeout', function ($modalStack, $timeout) {

-    return {

-        restrict: 'EA',

-        replace: true,

-        templateUrl: 'b2bTemplate/modalsAndAlerts/b2b-backdrop.html',

-        link: function (scope, element, attrs) {

-            scope.close = function (evt) {

-                var modal = $modalStack.getTop();

-                if (modal && modal.value.backdrop && modal.value.backdrop !== 'static') {

-                    evt.preventDefault();

-                    evt.stopPropagation();

-                    $modalStack.dismiss(modal.key, 'backdrop click');

-                }

-            };

-        }

-    };

-}])

-

-.directive('b2bModalWindow', ['$timeout', 'windowOrientation', '$window', function ($timeout, windowOrientation, $window) {

-    return {

-        restrict: 'EA',

-        scope: {

-            index: '@'

-        },

-        replace: true,

-        transclude: true,

-        templateUrl: 'b2bTemplate/modalsAndAlerts/b2b-window.html',

-        controller: ['$scope', '$element', '$attrs', function (scope, element, attrs) {

-            scope.windowClass = attrs.windowClass || '';

-            scope.sizeClass = attrs.sizeClass || '';

-            scope.isNotifDialog = false;

-

-            this.setTitle = function (title) {

-                scope.title = title;

-            };

-            this.setContent = function (content) {

-                scope.content = content;

-                scope.isNotifDialog = true;

-            };

-            this.isDockedModal = scope.windowClass.indexOf('modal-docked') > -1;

-        }],

-        link: function (scope, element, attrs, ctrl) {

-            if (ctrl.isDockedModal) {

-                scope.isModalLandscape = false;

-

-                var window = angular.element($window);

-                scope.updateCss = function () {

-                    if (windowOrientation.isPotrait()) { // Potrait Mode

-                        scope.isModalLandscape = false;

-                    } else if (windowOrientation.isLandscape()) { // Landscape Mode

-                        scope.isModalLandscape = true;

-                    }

-                };

-

-                $timeout(function () {

-                    scope.updateCss();

-                    scope.$apply();

-                }, 100);

-                window.bind('orientationchange', function () {

-                    scope.updateCss();

-                    scope.$apply();

-                });

-                window.bind('resize', function () {

-                    scope.updateCss();

-                    scope.$apply();

-                });

-            }else {

-                angular.element(element[0].querySelectorAll(".awd-select-list")).css({

-                    "max-height": "200px"

-                });

-            }

-

-            var isIE = /msie|trident/i.test(navigator.userAgent);

-            if (isIE) {

-                if(angular.element(element[0].querySelector('.corner-button button.close')).length > 0){

-                    angular.element(element[0].querySelector('.corner-button button.close')).bind('focus', function () {

-                       angular.element(element[0].querySelector('.b2b-modal-header'))[0].scrollLeft = 0;

-                       angular.element(element[0].querySelector('.b2b-modal-header'))[0].scrollTop = 0;

-                    });

-                }

-            }

-            

-        }

-    };

-}])

-

-.directive('b2bModalTitle', [function () {

-    return {

-        restrict: 'A',

-        require: '^b2bModalWindow',

-        link: function (scope, elem, attr, ctrl) {

-            ctrl.setTitle(attr.id);

-        }

-    };

-}])

-

-.directive('b2bModalContent', [function () {

-    return {

-        restrict: 'A',

-        require: '^b2bModalWindow',

-        link: function (scope, elem, attr, ctrl) {

-            ctrl.setContent(attr.id);

-        }

-    };

-}])

-

-

-.directive('b2bModalBody', ['$timeout', '$position', '$document', '$window', 'windowOrientation', 'b2bAwdBreakpoints', function ($timeout, $position, $document, $window, windowOrientation, b2bAwdBreakpoints) {

-    return {

-        restrict: 'AC',

-        scope: {

-            index: '@'

-        },

-        require: '^b2bModalWindow',

-        link: function (scope, element, attrs, ctrl) {

-            var window = angular.element($window);

-            var body = $document.find('body').eq(0);

-            scope.setModalHeight = function () {

-                var modalHeaderHeight, modalFooterHeight, modalBodyHeight, windowHeight, windowWidth, modalHeight;

-                modalHeaderHeight = 0;

-                modalFooterHeight = 0;

-                windowHeight = $window.innerHeight;

-                windowWidth = $window.innerWidth;

-                body.css({

-                    'height': windowHeight + 'px'

-                });

-

-                if (ctrl.isDockedModal) {

-                    var modalElements = element.parent().children();

-                    for (var i = 0; i < modalElements.length; i++) {

-                        if (modalElements.eq(i).hasClass('b2b-modal-header')) {

-                            modalHeaderHeight = $position.position(modalElements.eq(i)).height;

-                        } else if (modalElements.eq(i).hasClass('b2b-modal-footer')) {

-                            modalFooterHeight = $position.position(modalElements.eq(i)).height;

-                        }

-                    }

-

-                    modalHeight = $position.position(element.parent()).height;

-

-                    modalBodyHeight = modalHeight - (modalHeaderHeight + modalFooterHeight) + 'px';

-

-                    if (windowOrientation.isPotrait()) { // Potrait Mode

-                        element.removeAttr('style').css({

-                            height: modalBodyHeight

-                        });

-                    } else if (windowOrientation.isLandscape() && windowWidth < b2bAwdBreakpoints.breakpoints.mobile.max) { // Landscape Mode Mobile

-                        element.removeAttr('style');

-                    } else if (windowOrientation.isLandscape() && windowWidth >= b2bAwdBreakpoints.breakpoints.mobile.max) { // Landscape Mode Non-Mobile

-                        element.removeAttr('style').css({

-                            height: modalBodyHeight

-                        });

-                    }

-                }

-            };

-

-            $timeout(function () {

-                scope.setModalHeight();

-                scope.$apply();

-            }, 100);

-            window.bind('orientationchange', function () {

-                scope.setModalHeight();

-                scope.$apply();

-            });

-            window.bind('resize', function () {

-                scope.setModalHeight();

-                scope.$apply();

-            });

-        }

-    };

-}])

-

-.directive('b2bModalFooter', ['windowOrientation', '$window', function (windowOrientation, $window) {

-    return {

-        restrict: 'AC',

-        scope: {

-            index: '@'

-        },

-        link: function (scope, element, attrs) {

-

-        }

-    };

-}])

-

-.factory('$modalStack', ['$document', '$compile', '$rootScope', '$$stackedMap', '$log', '$timeout', 'trapFocusInElement', function ($document, $compile, $rootScope, $$stackedMap, $log, $timeout, trapFocusInElement) {

-    var backdropjqLiteEl, backdropDomEl;

-    var backdropScope = $rootScope.$new(true);

-    var body = $document.find('body').eq(0);

-    var html = $document.find('html').eq(0);

-    var openedWindows = $$stackedMap.createNew();

-    var $modalStack = {};

-

-    function backdropIndex() {

-        var topBackdropIndex = -1;

-        var opened = openedWindows.keys();

-        for (var i = 0; i < opened.length; i++) {

-            if (openedWindows.get(opened[i]).value.backdrop) {

-                topBackdropIndex = i;

-            }

-        }

-        return topBackdropIndex;

-    }

-

-    $rootScope.$watch(backdropIndex, function (newBackdropIndex) {

-        backdropScope.index = newBackdropIndex;

-    });

-

-    function removeModalWindow(modalInstance) {

-        //background scroll fix

-        html.removeAttr('style');

-        body.removeAttr('style');

-        body.removeClass('styled-by-modal');

-

-        var modalWindow = openedWindows.get(modalInstance).value;

-        trapFocusInElement(false, modalWindow.modalDomEl);

-

-        //clean up the stack

-        openedWindows.remove(modalInstance);

-

-        //remove window DOM element

-        modalWindow.modalDomEl.remove();

-

-        //remove backdrop if no longer needed

-        if (backdropDomEl && backdropIndex() === -1) {

-            backdropDomEl.remove();

-            backdropDomEl = undefined;

-        }

-

-        //destroy scope

-        modalWindow.modalScope.$destroy();

-    }

-

-    $document.bind('keydown', function (evt) {

-        var modal;

-

-        if (evt.which === 27) {

-            modal = openedWindows.top();

-            if (modal && modal.value.keyboard) {

-                $rootScope.$apply(function () {

-                    $modalStack.dismiss(modal.key);

-                });

-            }

-        }

-    });

-

-    $modalStack.open = function (modalInstance, modal) {

-

-        openedWindows.add(modalInstance, {

-            deferred: modal.deferred,

-            modalScope: modal.scope,

-            backdrop: modal.backdrop,

-            keyboard: modal.keyboard

-        });

-

-        var angularDomEl = angular.element('<div b2b-modal-window></div>');

-        angularDomEl.attr('window-class', modal.windowClass);

-        angularDomEl.attr('size-class', modal.sizeClass);

-        angularDomEl.attr('index', openedWindows.length() - 1);

-        angularDomEl.html(modal.content);

-

-        var modalDomEl = $compile(angularDomEl)(modal.scope);

-        openedWindows.top().value.modalDomEl = modalDomEl;

-        //background page scroll fix

-        html.css({

-            'overflow-y': 'hidden'

-        });

-        body.css({

-            'overflow-y': 'hidden',

-            'width': '100%',

-            'height': window.innerHeight + 'px'

-        });

-        body.addClass('styled-by-modal');

-        body.append(modalDomEl);

-

-        if (backdropIndex() >= 0 && !backdropDomEl) {

-            backdropjqLiteEl = angular.element('<div b2b-modal-backdrop></div>');

-            backdropDomEl = $compile(backdropjqLiteEl)(backdropScope);

-            body.append(backdropDomEl);

-        }

-

-        $timeout(function () {

-

-            if (modal.scope.$$childHead.isNotifDialog) {

-                angular.element(modalDomEl).find('button')[0].focus();

-            } else {

-                angular.element(modalDomEl)[0].focus();

-            }

-            trapFocusInElement(true, angular.element(modalDomEl).eq(0));

-        }, 200);

-    };

-

-    $modalStack.close = function (modalInstance, result) {

-        var modal = openedWindows.get(modalInstance);

-        if (modal) {

-            modal.value.deferred.resolve(result);

-            removeModalWindow(modalInstance);

-        }

-    };

-

-    $modalStack.dismiss = function (modalInstance, reason) {

-        var modalWindow = openedWindows.get(modalInstance).value;

-        if (modalWindow) {

-            modalWindow.deferred.reject(reason);

-            removeModalWindow(modalInstance);

-        }

-    };

-

-    $modalStack.getTop = function () {

-        return openedWindows.top();

-    };

-

-    return $modalStack;

-}])

-

-.provider('$modal', function () {

-    var $modalProvider = {

-        options: {

-            backdrop: true, //can be also false or 'static'

-            keyboard: true

-        },

-        $get: ['$injector', '$rootScope', '$q', '$http', '$templateCache', '$controller', '$modalStack', function ($injector, $rootScope, $q, $http, $templateCache, $controller, $modalStack) {

-            var $modal = {};

-

-            function getTemplatePromise(options) {

-                return options.template ? $q.when(options.template) :

-                    $http.get(options.templateUrl, {

-                        cache: $templateCache

-                    }).then(function (result) {

-                        return result.data;

-                    });

-            }

-

-            function getResolvePromises(resolves) {

-                var promisesArr = [];

-                angular.forEach(resolves, function (value, key) {

-                    if (angular.isFunction(value) || angular.isArray(value)) {

-                        promisesArr.push($q.when($injector.invoke(value)));

-                    }

-                });

-                return promisesArr;

-            }

-

-            $modal.open = function (modalOptions) {

-

-                var modalResultDeferred = $q.defer();

-                var modalOpenedDeferred = $q.defer();

-                //prepare an instance of a modal to be injected into controllers and returned to a caller

-                var modalInstance = {

-                    result: modalResultDeferred.promise,

-                    opened: modalOpenedDeferred.promise,

-                    close: function (result) {

-                        $modalStack.close(modalInstance, result);

-                    },

-                    dismiss: function (reason) {

-                        $modalStack.dismiss(modalInstance, reason);

-                    }

-                };

-

-                //merge and clean up options

-                modalOptions = angular.extend({}, $modalProvider.options, modalOptions);

-                modalOptions.resolve = modalOptions.resolve || {};

-

-                //verify options

-                if (!modalOptions.template && !modalOptions.templateUrl) {

-                    throw new Error('One of template or templateUrl options is required.');

-                }

-

-                var templateAndResolvePromise =

-                    $q.all([getTemplatePromise(modalOptions)].concat(getResolvePromises(modalOptions.resolve)));

-

-

-                templateAndResolvePromise.then(function resolveSuccess(tplAndVars) {

-

-                    var modalScope = (modalOptions.scope || $rootScope).$new();

-                    modalScope.$close = modalInstance.close;

-                    modalScope.$dismiss = modalInstance.dismiss;

-

-                    var ctrlInstance, ctrlLocals = {};

-                    var resolveIter = 1;

-

-                    //controllers

-                    if (modalOptions.controller) {

-                        ctrlLocals.$scope = modalScope;

-                        ctrlLocals.$modalInstance = modalInstance;

-                        angular.forEach(modalOptions.resolve, function (value, key) {

-                            ctrlLocals[key] = tplAndVars[resolveIter++];

-                        });

-

-                        ctrlInstance = $controller(modalOptions.controller, ctrlLocals);

-                    }

-

-                    $modalStack.open(modalInstance, {

-                        scope: modalScope,

-                        deferred: modalResultDeferred,

-                        content: tplAndVars[0],

-                        backdrop: modalOptions.backdrop,

-                        keyboard: modalOptions.keyboard,

-                        windowClass: modalOptions.windowClass,

-                        sizeClass: modalOptions.sizeClass

-                    });

-

-                }, function resolveError(reason) {

-                    modalResultDeferred.reject(reason);

-                });

-

-                templateAndResolvePromise.then(function () {

-                    modalOpenedDeferred.resolve(true);

-                }, function () {

-                    modalOpenedDeferred.reject(false);

-                });

-

-                return modalInstance;

-            };

-

-            return $modal;

-        }]

-    };

-

-    return $modalProvider;

-})

-

-.directive("b2bModal", ["$modal", "$log", '$scrollTo', function ($modal, $log, $scrollTo) {

-    return {

-        restrict: 'A',

-        scope: {

-            b2bModal: '@',

-            modalController: '@',

-            modalOk: '&',

-            modalCancel: '&',

-            windowClass: '@',

-            sizeClass: '@'

-        },

-        link: function (scope, elm, attr) {

-            elm.bind('click', function (ev) {

-                var currentPosition = ev.pageY - ev.clientY;

-                ev.preventDefault();

-                if (angular.isDefined(elm.attr("href")) && elm.attr("href") !== "") {

-                    scope.b2bModal = elm.attr("href");

-                }

-                $modal.open({

-                    templateUrl: scope.b2bModal,

-                    controller: scope.modalController,

-                    windowClass: scope.windowClass,

-                    sizeClass: scope.sizeClass

-                }).result.then(function (value) {

-                    scope.modalOk({

-                        value: value

-                    });

-                    elm[0].focus();

-                }, function (value) {

-                    scope.modalCancel({

-                        value: value

-                    });

-                    elm[0].focus();

-                });

-            });

-        }

-    };

-}])

-

-.directive("utilityFilter", ["$modal", "$log", '$scrollTo', function ($modal, $log, $scrollTo) {

-    return {

-        restrict: 'EA',

-        scope: {

-            utilityFilter: '@'

-        },

-        require: 'ngModel',

-        templateUrl: 'b2bTemplate/modal/u-filter.html',

-        link: function (scope, element, attribute, ctrl) {

-            //controller to be passed to $modal service

-            scope.options = angular.copy(scope.$parent.$eval(attribute.ngModel));

-            scope.$parent.$watch(attribute.ngModel, function (newVal, oldVal) {

-                if (newVal !== oldVal) {

-                    scope.options = newVal;

-                }

-            });

-            var modalCtrl = function ($scope, options) {

-                $scope.options = angular.copy(options);

-            };

-

-            if (angular.isDefined(scope.utilityFilter)) {

-                scope.templateUrl = scope.utilityFilter;

-            } else {

-                scope.templateUrl = 'b2bTemplate/modal/u-filter-window.html';

-            }

-            element.bind('click', function (ev) {

-                var currentPosition = ev.pageY - ev.clientY;

-                $modal.open({

-                    templateUrl: scope.templateUrl,

-                    controller: modalCtrl,

-                    resolve: {

-                        options: function () {

-                            return scope.options;

-                        }

-                    }

-                }).result.then(function (value) {

-                    ctrl.$setViewValue(value);

-                    element[0].focus();

-                    $scrollTo(0, currentPosition, 0);

-                }, function () {

-                    element[0].focus();

-                    $scrollTo(0, currentPosition, 0);

-                });

-            });

-        }

-    };

-}]);

-/**

- * @ngdoc directive

- * @name Forms.att:monthSelector

- *

- * @description

- *  <file src="src/monthSelector/docs/readme.md" />

- *

- * @usage

- * <div b2b-monthpicker ng-model="dt" min="minDate" max="maxDate" mode="monthpicker"></div>

-    

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/monthSelector/docs/demo.html" />

-            <file src="src/monthSelector/docs/demo.js" />

-        </example>

-    </section>

- *

- */

-angular.module('b2b.att.monthSelector', ['b2b.att.position', 'b2b.att.utilities'])

-

-.constant('b2bMonthpickerConfig', {

-    dateFormat: 'MM/dd/yyyy',

-    dayFormat: 'd',

-    monthFormat: 'MMMM',

-    yearFormat: 'yyyy',

-    dayHeaderFormat: 'EEEE',

-    dayTitleFormat: 'MMMM yyyy',

-    disableWeekend: false,

-    disableSunday: false,

-    disableDates: null,

-    onSelectClose: null,

-    startingDay: 0,

-    minDate: null,

-    maxDate: null,

-    dueDate: null,

-    fromDate: null,

-    legendIcon: null,

-    legendMessage: null,

-    calendarDisabled: false,

-    collapseWait: 0,

-    orientation: 'left',

-    inline: false,

-    mode:0,

-    helperText: 'The date you selected is $date. Double tap to open calendar. Select a date to close the calendar.',

-    descriptionText: 'Use tab to navigate between previous button, next button and month. Use arrow keys to navigate between months. Use space or enter to select a month.',

-    MonthpickerEvalAttributes: ['dateFormat', 'dayFormat', 'monthFormat', 'yearFormat', 'dayHeaderFormat', 'dayTitleFormat', 'disableWeekend', 'disableSunday', 'startingDay', 'collapseWait', 'orientation','mode','id'],

-    MonthpickerWatchAttributes: ['min', 'max', 'due', 'from', 'legendIcon', 'legendMessage', 'ngDisabled'],

-    MonthpickerFunctionAttributes: ['disableDates', 'onSelectClose']

-})

-

-.factory('b2bMonthpickerService', ['b2bMonthpickerConfig', 'dateFilter', function (b2bMonthpickerConfig, dateFilter) {

-    var setAttributes = function (attr, elem) {

-        if (angular.isDefined(attr) && attr !== null && angular.isDefined(elem) && elem !== null) {

-            var attributes = b2bMonthpickerConfig.MonthpickerEvalAttributes.concat(b2bMonthpickerConfig.MonthpickerWatchAttributes, b2bMonthpickerConfig.MonthpickerFunctionAttributes);

-            for (var key in attr) {

-                var val = attr[key];

-                if (attributes.indexOf(key) !== -1 && angular.isDefined(val)) {

-                    elem.attr(key.toSnakeCase(), key);

-                }

-            }

-        }

-    };

-

-    var bindScope = function (attr, scope) {

-        if (angular.isDefined(attr) && attr !== null && angular.isDefined(scope) && scope !== null) {

-            var evalFunction = function (key, val) {

-                scope[key] = scope.$parent.$eval(val);

-            };

-

-            var watchFunction = function (key, val) {

-                scope.$parent.$watch(val, function (value) {

-                    scope[key] = value;

-                });

-                scope.$watch(key, function (value) {

-                    scope.$parent[val] = value;

-                });

-            };

-

-            var evalAttributes = b2bMonthpickerConfig.MonthpickerEvalAttributes;

-            var watchAttributes = b2bMonthpickerConfig.MonthpickerWatchAttributes;

-            for (var key in attr) {

-                var val = attr[key];

-                if (evalAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {

-                    evalFunction(key, val);

-                } else if (watchAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {

-                    watchFunction(key, val);

-                }

-            }

-        }

-    };

-

-    return {

-        setAttributes: setAttributes,

-        bindScope: bindScope

-    };

-}])

-

-.controller('b2bMonthpickerController', ['$scope', '$attrs', 'dateFilter', '$element', '$position', 'b2bMonthpickerConfig', function ($scope, $attrs, dateFilter, $element, $position, dtConfig) {

-    var format = {

-            date: getValue($attrs.dateFormat, dtConfig.dateFormat),

-            day: getValue($attrs.dayFormat, dtConfig.dayFormat),

-            month: getValue($attrs.monthFormat, dtConfig.monthFormat),

-            year: getValue($attrs.yearFormat, dtConfig.yearFormat),

-            dayHeader: getValue($attrs.dayHeaderFormat, dtConfig.dayHeaderFormat),

-            dayTitle: getValue($attrs.dayTitleFormat, dtConfig.dayTitleFormat),

-            disableWeekend: getValue($attrs.disableWeekend, dtConfig.disableWeekend),

-            disableSunday: getValue($attrs.disableSunday, dtConfig.disableSunday),

-            disableDates: getValue($attrs.disableDates, dtConfig.disableDates)

-        },

-        startingDay = getValue($attrs.startingDay, dtConfig.startingDay);

-

-    $scope.minDate = dtConfig.minDate ? $scope.resetTime(dtConfig.minDate) : null;

-    $scope.maxDate = dtConfig.maxDate ? $scope.resetTime(dtConfig.maxDate) : null;

-    $scope.dueDate = dtConfig.dueDate ? $scope.resetTime(dtConfig.dueDate) : null;

-    $scope.fromDate = dtConfig.fromDate ? $scope.resetTime(dtConfig.fromDate) : null;

-    $scope.legendIcon = dtConfig.legendIcon ? dtConfig.legendIcon : null;

-    $scope.legendMessage = dtConfig.legendMessage ? dtConfig.legendMessage : null;

-    $scope.ngDisabled = dtConfig.calendarDisabled ? dtConfig.calendarDisabled : null;

-    $scope.collapseWait = getValue($attrs.collapseWait, dtConfig.collapseWait);

-    $scope.orientation = getValue($attrs.orientation, dtConfig.orientation);

-    $scope.onSelectClose = getValue($attrs.onSelectClose, dtConfig.onSelectClose);

-    $scope.mode = getValue($attrs.mode, dtConfig.mode);

-    

-    $scope.inline = $attrs.inline === 'true' ? true : dtConfig.inline;

-

-    function getValue(value, defaultValue) {

-        return angular.isDefined(value) ? $scope.$parent.$eval(value) : defaultValue;

-    }

-

-    function getDaysInMonth(year, month) {

-        return new Date(year, month, 0).getDate();

-    }

-

-    function getDates(startDate, n) {

-        var dates = new Array(n);

-        var current = startDate,

-            i = 0;

-        while (i < n) {

-            dates[i++] = new Date(current);

-            current.setDate(current.getDate() + 1);

-        }

-        return dates;

-    }

-

-    this.updatePosition = function (b2bMonthpickerPopupTemplate) {

-        $scope.position = $position.offset($element);

-        if($element.find('input').length > 0 ){

-            $scope.position.top += $element.find('input').prop('offsetHeight');

-        }else{

-            $scope.position.top += $element.find('a').prop('offsetHeight');

-        }

-        

-        if ($scope.orientation === 'right') {

-            $scope.position.left -= (((b2bMonthpickerPopupTemplate && b2bMonthpickerPopupTemplate.prop('offsetWidth')) || 290) - $element.find('input').prop('offsetWidth'));

-        }

-    };

-

-    function isSelected(dt) { 

-        if (dt && angular.isDate($scope.currentDate) && compare(dt, $scope.currentDate) === 0) {

-            return true;

-        }

-        return false;

-    }

-

-    function isFromDate(dt) {

-        if (dt && angular.isDate($scope.fromDate) && compare(dt, $scope.fromDate) === 0) {

-            return true;

-        }

-        return false;

-    }

-

-    function isDateRange(dt) {

-        if (dt && $scope.fromDate && angular.isDate($scope.currentDate) && (compare(dt, $scope.fromDate) >= 0) && (compare(dt, $scope.currentDate) <= 0)) {

-            return true;

-        } else if (dt && $scope.fromDate && compare(dt, $scope.fromDate) === 0) {

-            return true;

-        }

-        return false;

-    }

-

-    function isOld(date, currentMonthDate) {

-        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() < new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {

-            return true;

-        } else {

-            return false;

-        }

-    }

-

-    function isNew(date, currentMonthDate) {

-        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() > new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {

-            return true;

-        } else {

-            return false;

-        }

-    }

-

-    function isPastDue(dt) {

-        if ($scope.dueDate) {

-            return (dt > $scope.dueDate);

-        }

-        return false;

-    }

-

-    function isDueDate(dt) {

-        if ($scope.dueDate) {

-            return (dt.getTime() === $scope.dueDate.getTime());

-        }

-        return false;

-    }

-

-    var isDisabled = function (date, currentMonthDate) {

-        if ($attrs.from && !angular.isDate($scope.fromDate)) {

-            return true;

-        }

-        if (format.disableWeekend === true && (dateFilter(date, format.dayHeader) === "Saturday" || dateFilter(date, format.dayHeader) === "Sunday")) {

-            return true;

-        }

-        if (format.disableSunday === true && (dateFilter(date, format.dayHeader) === "Sunday")) {

-            return true;

-        }

-        if (isOld(date, currentMonthDate) || isNew(date, currentMonthDate)) {

-            return true;

-        }

-        return (($scope.minDate && compare(date, $scope.minDate) < 0) || ($scope.maxDate && compare(date, $scope.maxDate) > 0) || (format.disableDates && format.disableDates({

-            date: date

-        })));

-    };

-    

-    var isDisabledMonth = function (date, currentMonthDate) {

-        if ($attrs.from && !angular.isDate($scope.fromDate)) {

-            return true;

-        }

-        if (format.disableWeekend === true && (dateFilter(date, format.dayHeader) === "Saturday" || dateFilter(date, format.dayHeader) === "Sunday")) {

-            return true;

-        }

-        if (format.disableSunday === true && (dateFilter(date, format.dayHeader) === "Sunday")) {

-            return true;

-        }

-        return (($scope.minDate && compare(date, $scope.minDate) < 0) || ($scope.maxDate && compare(date, $scope.maxDate) > 0) || (format.disableDates && format.disableDates({

-            date: date

-        })));

-    };    

-         

-    var compare = function (date1, date2) {

-        return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));

-    };

-

-    function isMinDateAvailable(startDate, endDate) {

-        if (($scope.minDate && $scope.minDate.getTime() >= startDate.getTime()) && ($scope.minDate.getTime() <= endDate.getTime())) {

-            $scope.disablePrev = true;

-            $scope.visibilityPrev = "hidden";

-        } else {

-            $scope.disablePrev = false;

-            $scope.visibilityPrev = "visible";

-        }

-    }

-    

-    function isMaxDateAvailable(startDate, endDate) {

-        if (($scope.maxDate && $scope.maxDate.getTime() >= startDate.getTime()) && ($scope.maxDate.getTime() <= endDate.getTime())) {

-            $scope.disableNext = true;

-            $scope.visibilityNext = "hidden";

-        } else {

-            $scope.disableNext = false;

-            $scope.visibilityNext = "visible";

-        }

-    }    

-    

-    function isYearInRange(currentYear) {

-            

-        if ($scope.minDate && currentYear === $scope.minDate.getFullYear()) {

-            $scope.disablePrev = true;

-            $scope.visibilityPrev = "hidden";

-        } else {

-            $scope.disablePrev = false;

-            $scope.visibilityPrev = "visible";

-        }

-        

-        if ($scope.maxDate && currentYear === $scope.maxDate.getFullYear()) {

-            $scope.disableNext = true;

-            $scope.visibilityNext = "hidden";

-        } else {

-            $scope.disableNext = false;

-            $scope.visibilityNext = "visible";

-        }

-        

-    }    

-

-    this.focusNextPrev = function(b2bMonthpickerPopupTemplate,init){

-        if(init){

-            if (!$scope.disablePrev){

-                b2bMonthpickerPopupTemplate[0].querySelector('th.prev').focus();

-            }else if (!$scope.disableNext){

-                b2bMonthpickerPopupTemplate[0].querySelector('th.next').focus();

-            }else{

-                b2bMonthpickerPopupTemplate[0].querySelector('th.b2b-monthSelector-label').focus();

-            }

-        }else{

-            if ($scope.disableNext || $scope.disablePrev){

-                b2bMonthpickerPopupTemplate[0].querySelector('th.b2b-monthSelector-label').focus();

-            }       

-        }    

-    };

-

-    function getLabel(label) {

-        if (label) {

-            var labelObj = {

-                pre: label.substr(0, 1).toUpperCase(),

-                post: label

-            };

-            return labelObj;

-        }

-        return;

-    }

-

-    function makeDate(date, dayFormat, dayHeaderFormat, isSelected, isFromDate, isDateRange, isOld, isNew, isDisabled, dueDate, pastDue) {

-        return {

-            date: date,

-            label: dateFilter(date, dayFormat),

-            header: dateFilter(date, dayHeaderFormat),

-            selected: !!isSelected,

-            fromDate: !!isFromDate,

-            dateRange: !!isDateRange,

-            oldMonth: !!isOld,

-            nextMonth: !!isNew,

-            disabled: !!isDisabled,

-            dueDate: !!dueDate,

-            pastDue: !!pastDue,

-            focusable: !((isDisabled && !(isSelected || isDateRange)) || (isOld || isNew))

-        };

-    }

-    

-    this.modes = [

-        {

-            name: 'day',

-            getVisibleDates: function (date) {

-                var year = date.getFullYear(),

-                    month = date.getMonth(),

-                    firstDayOfMonth = new Date(year, month, 1),

-                    lastDayOfMonth = new Date(year, month + 1, 0);

-                var difference = startingDay - firstDayOfMonth.getDay(),

-                    numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference,

-                    firstDate = new Date(firstDayOfMonth),

-                    numDates = 0;

-

-                if (numDisplayedFromPreviousMonth > 0) {

-                    firstDate.setDate(-numDisplayedFromPreviousMonth + 1);

-                    numDates += numDisplayedFromPreviousMonth; // Previous

-                }

-                numDates += getDaysInMonth(year, month + 1); // Current

-                numDates += (7 - numDates % 7) % 7; // Next

-

-                var days = getDates(firstDate, numDates),

-                    labels = new Array(7);

-                for (var i = 0; i < numDates; i++) {

-                    var dt = new Date(days[i]);

-                    days[i] = makeDate(dt,

-                        format.day,

-                        format.dayHeader,

-                        isSelected(dt),

-                        isFromDate(dt),

-                        isDateRange(dt),

-                        isOld(dt, date),

-                        isNew(dt, date),

-                        isDisabled(dt, date),

-                        isDueDate(dt),

-                        isPastDue(dt));

-                }

-                for (var j = 0; j < 7; j++) {

-                    labels[j] = getLabel(dateFilter(days[j].date, format.dayHeader));

-                }

-                isMinDateAvailable(firstDayOfMonth, lastDayOfMonth);

-                isMaxDateAvailable(firstDayOfMonth, lastDayOfMonth);

-                return {

-                    objects: days,

-                    title: dateFilter(date, format.dayTitle),

-                    labels: labels

-                };

-            },

-            split: 7,

-            step: {

-                months: 1

-            }

-        },

-        {

-            name: 'month',

-            getVisibleDates: function(date) {

-                var months = [], 

-                    labels = [], 

-                    year = date.getFullYear();

-                    for (var i = 0; i < 12; i++) {

-                        var dt = new Date(year,i,1);                

-                        months[i] = makeDate(dt,

-                                    format.month,

-                                    format.dayHeader,

-                                    isSelected(dt), 

-                                    isFromDate(dt),

-                                    isDateRange(dt),

-                                    false,

-                                    false,

-                                    isDisabledMonth(dt, date),

-                                    isDueDate(dt),                                       

-                                    isPastDue(dt));                                                                                                                                                         

-                    }

-                isYearInRange(year);  

-                return {objects: months, title: dateFilter(date, format.year), labels: labels};

-            },

-            split:4,

-            step: {years: 1}

-        }

-    ];

-}])

-

-.directive('b2bMonthpickerPopup', ['$parse', '$log', '$timeout', '$document', '$documentBind', '$isElement', '$templateCache', '$compile','$interval', 'trapFocusInElement', 'keymap', function ($parse, $log, $timeout, $document, $documentBind, $isElement, $templateCache, $compile, $interval,trapFocusInElement, keymap) {

-    return {

-        restrict: 'EA',

-        scope: {

-          trigger: '='

-        },

-        replace: true,

-        transclude: true,

-        templateUrl: function (elem, attr) {

-            if (attr.inline === 'true') {

-                return 'b2bTemplate/monthSelector/monthSelector-popup.html';

-            }else if (attr.link === 'true') {

-                return 'b2bTemplate/monthSelector/monthSelectorLink.html';

-            }else {

-                return 'b2bTemplate/monthSelector/monthSelector.html';

-            }

-        },

-        scope: {},

-        require: ['b2bMonthpickerPopup', 'ngModel', '?^b2bMonthpickerGroup'],

-        controller: 'b2bMonthpickerController',

-        link: function (scope, element, attrs, ctrls) {

-            var MonthpickerCtrl = ctrls[0],

-                ngModel = ctrls[1],

-                b2bMonthpickerGroupCtrl = ctrls[2];

-            var b2bMonthpickerPopupTemplate;

-

-            if (!ngModel) {

-                $log.error("ng-model is required.");

-                return; // do nothing if no ng-model

-            }

-

-            // Configuration parameters

-            var mode = scope.mode,

-                selected;

-            scope.isOpen = false;

-

-            scope.headers = [];

-            scope.footers = [];

-            scope.triggerInterval=undefined;

-

-

-            if (b2bMonthpickerGroupCtrl) {

-                b2bMonthpickerGroupCtrl.registerMonthpickerScope(scope);

-            }

-

-            element.bind('keydown', function (ev) {                   

-                if (!ev.keyCode) {

-                    if (ev.which) {

-                        ev.keyCode = ev.which;

-                    } else if (ev.charCode) {

-                        ev.keyCode = ev.charCode;

-                    }

-                }                                

-                if(ev.keyCode === keymap.KEY.ESC)

-                {

-                    scope.isOpen = false;

-                    toggleCalendar(scope.isOpen);

-                    scope.$apply();

-                }

-            });

-            

-            element.find('button').bind('click', function () {

-                onClicked();                

-            });

-

-            element.find('a').bind('click', function () {

-                onClicked();                

-            });

-

-            

-            element.find('input').bind('click', function () {

-                onClicked();

-            });

-

-            var onClicked = function() {        

-                if (!scope.ngDisabled) {

-                    scope.isOpen = !scope.isOpen;

-                    toggleCalendar(scope.isOpen);                    

-                    MonthpickerCtrl.updatePosition(b2bMonthpickerPopupTemplate);

-                    scope.$apply();

-                }

-            };

-        

-            var toggleCalendar = function (flag) {

-                if (!scope.inline) {

-                    if (flag) {

-                        b2bMonthpickerPopupTemplate = angular.element($templateCache.get('b2bTemplate/monthSelector/monthSelector-popup.html'));

-                        b2bMonthpickerPopupTemplate.attr('b2b-trap-focus-inside-element', 'false');

-                        b2bMonthpickerPopupTemplate.attr('trigger', 'true');

-                        b2bMonthpickerPopupTemplate = $compile(b2bMonthpickerPopupTemplate)(scope);

-                        $document.find('body').append(b2bMonthpickerPopupTemplate);

-                        b2bMonthpickerPopupTemplate.bind('keydown', escPress);

-                        $timeout(function () {

-                            scope.getFocus = true;

-                            scope.trigger=0;

-                            scope.$apply();

-                            $timeout(function () {

-                                scope.getFocus = false;

-                                scope.$apply();

-                                MonthpickerCtrl.focusNextPrev(b2bMonthpickerPopupTemplate,true);

-                            }, 100);

-                        });

-                        scope.triggerInterval = $interval(function () {

-                            //This value is updated to trigger init() function of directive on year change.

-                            scope.trigger=(scope.trigger === 0 ? 1 : 0);

-                        }, 200);

-

-                    } else {

-                        b2bMonthpickerPopupTemplate.unbind('keydown', escPress);

-                        if(scope.triggerInterval)

-                        {

-                            $interval.cancel(scope.triggerInterval);

-                            scope.triggerInterval=undefined;

-                        }

-                        b2bMonthpickerPopupTemplate.remove();

-                        if(element.find('button').length > 0){

-                            element.find('button')[0].focus();

-                        }else{

-                            element.find('a')[0].focus();

-                        }

-                        

-                        scope.getFocus = false;

-                    }

-                }

-            };

-

-            var outsideClick = function (e) {

-                var isElement = $isElement(angular.element(e.target), element, $document);

-                var isb2bMonthpickerPopupTemplate = $isElement(angular.element(e.target), b2bMonthpickerPopupTemplate, $document);

-                if (!(isElement || isb2bMonthpickerPopupTemplate)) {

-                    scope.isOpen = false;

-                    toggleCalendar(scope.isOpen);

-                    scope.$apply();

-                }

-            };

-

-            var escPress = function (ev) {

-                if (!ev.keyCode) {

-                    if (ev.which) {

-                        ev.keyCode = ev.which;

-                    } else if (ev.charCode) {

-                        ev.keyCode = ev.charCode;

-                    }

-                }

-                if (ev.keyCode) {

-                    if (ev.keyCode === keymap.KEY.ESC) {

-                        scope.isOpen = false;

-                        toggleCalendar(scope.isOpen);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode === 33) {

-                        !scope.disablePrev && scope.move(-1);

-                        $timeout(function () {

-                            scope.getFocus = true;

-                            scope.$apply();

-                            $timeout(function () {

-                                scope.getFocus = false;

-                                scope.$apply();

-                            }, 100);

-                        });

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode === 34) {

-                        !scope.disableNext && scope.move(1);

-                        $timeout(function () {

-                            scope.getFocus = true;

-                            scope.$apply();

-                            $timeout(function () {

-                                scope.getFocus = false;

-                                scope.$apply();

-                            }, 100);

-                        });

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    }

-                    scope.$apply();

-                }

-            };              

-                    

-            $documentBind.click('isOpen', outsideClick, scope);

-

-            scope.$on('$destroy', function () {

-                if (scope.isOpen) {

-                    scope.isOpen = false;

-                    toggleCalendar(scope.isOpen);

-                }

-            });

-

-            scope.resetTime = function (date) {

-                if (typeof date === 'string') {

-                    date = date + 'T12:00:00';

-                }

-                var dt;

-                if (!isNaN(new Date(date))) {

-                    dt = new Date(date);

-                    if(scope.mode === 1){

-                        dt = new Date(dt.getFullYear(), dt.getMonth());

-                    }else{

-                        dt = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());

-                    }                                                            

-                } else {

-                    return null;

-                }

-                return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());

-            };

-            

-            if (attrs.min) {

-                scope.$parent.$watch($parse(attrs.min), function (value) {

-                    scope.minDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-            if (attrs.max) {

-                scope.$parent.$watch($parse(attrs.max), function (value) {

-                    scope.maxDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-            if (attrs.due) {

-                scope.$parent.$watch($parse(attrs.due), function (value) {

-                    scope.dueDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-            if (attrs.from) {

-                scope.$parent.$watch($parse(attrs.from), function (value) {

-                    scope.fromDate = value ? scope.resetTime(value) : null;

-                    refill();

-                });

-            }

-

-            if (attrs.legendIcon) {

-                scope.$parent.$watch(attrs.legendIcon, function (value) {

-                    scope.legendIcon = value ? value : null;

-                    refill();

-                });

-            }

-            if (attrs.legendMessage) {

-                scope.$parent.$watch(attrs.legendMessage, function (value) {

-                    scope.legendMessage = value ? value : null;

-                    refill();

-                });

-            }

-            if (attrs.ngDisabled) {

-                scope.$parent.$watch(attrs.ngDisabled, function (value) {

-                    scope.ngDisabled = value ? value : null;

-                });

-            }      

-            

-

-            // Split array into smaller arrays

-            function split(arr, size) {

-                var arrays = [];

-                while (arr.length > 0) {

-                    arrays.push(arr.splice(0, size));

-                }

-                return arrays;

-            }

-            

-            var moveMonth = function(selectedDate, direction) {

-                var step = MonthpickerCtrl.modes[scope.mode].step;

-                selectedDate.setDate(1);

-                selectedDate.setMonth(selectedDate.getMonth() + direction * (step.months || 0));

-                selectedDate.setFullYear(selectedDate.getFullYear() + direction * (step.years || 0));

-

-                return selectedDate;

-            };            

-

-            function refill(date) {

-                if (angular.isDate(date) && !isNaN(date)) {

-                    selected = new Date(date);

-                } else {

-                    if (!selected) {

-                        selected = new Date();

-                    }

-                }

-

-                if (selected) {                    

-                    var selectedCalendar;

-                    if(scope.mode === 1){

-                        if(!angular.isDate(selected))

-                           {                           

-                                selected = new Date();

-                           }

-                        selectedCalendar = moveMonth(angular.copy(selected), -1);

-                    } else {

-                        selectedCalendar = angular.copy(selected);

-                    }

-                    

-                    var currentMode = MonthpickerCtrl.modes[mode],

-                        data = currentMode.getVisibleDates(selected);

-

-                    scope.rows = split(data.objects, currentMode.split);

-            

-                    var flag=false;

-                    var startFlag=false;

-                    var firstSelected = false;

-                    for(var i=0; i<scope.rows.length; i++)

-                    {

-                        for(var j=0; j<scope.rows[i].length; j++)

-                        {

-                            if(!scope.rows[i][j].disabled && !firstSelected)

-                            {

-                                firstSelected=true;

-                                var firstDay = scope.rows[i][j];

-                            }

-

-                            if(scope.rows[i][j].selected)

-                            {

-                                flag=true;

-                                break;

-                            }                  

-                        }

-                        if(flag)

-                        {

-                            break;

-                        }

-                    }

-                    if(!flag && firstSelected)

-                    {

-                       firstDay.firstFocus=true;

-                    }

-

-                    scope.labels = data.labels || [];

-                    scope.title = data.title;                    

-                }

-            }

-

-            scope.select = function (date,$event) {

-                var dt = new Date(date.getFullYear(), date.getMonth(), date.getDate());

-                scope.currentDate = dt;

-                if (!scope.onSelectClose || (scope.onSelectClose && scope.onSelectClose({

-                        date: dt

-                    }) !== false)) {

-                    if (angular.isNumber(scope.collapseWait)) {

-                        $timeout(function () {

-                            scope.isOpen = false;

-                            toggleCalendar(scope.isOpen);

-                        }, scope.collapseWait);

-                    } else {

-                        scope.isOpen = false;

-                        toggleCalendar(scope.isOpen);

-                    }

-                }

-            };

-

-            scope.move = function (direction,$event) {

-                var step = MonthpickerCtrl.modes[mode].step;

-                selected.setDate(1);

-                selected.setMonth(selected.getMonth() + direction * (step.months || 0));

-                selected.setFullYear(selected.getFullYear() + direction * (step.years || 0));

-                refill();

-                scope.getFocus = true;

-                $timeout(function () {

-                    if (attrs.inline === 'true') {

-                        MonthpickerCtrl.focusNextPrev(element,false); 

-                    }else{

-                        MonthpickerCtrl.focusNextPrev(b2bMonthpickerPopupTemplate,false);

-                    }

-                },100);

-                $event.preventDefault();

-                $event.stopPropagation();

-            };

-

-            scope.$watch('currentDate', function (value) {

-                if (angular.isDefined(value) && value !== null) {

-                    refill(value);

-                } else {

-                    refill();

-                }

-                ngModel.$setViewValue(value);

-            });

-

-            ngModel.$render = function () {

-                scope.currentDate = ngModel.$viewValue;

-            };

-

-            var stringToDate = function (value) {

-                if (!isNaN(new Date(value))) {

-                    value = new Date(value);

-                }

-                return value;

-            };

-            ngModel.$formatters.unshift(stringToDate);

-        }

-    };

-}])

-

-.directive('b2bMonthpicker', ['$compile', '$log', 'b2bMonthpickerConfig', 'b2bMonthpickerService', function ($compile, $log, b2bMonthpickerConfig, b2bMonthpickerService) {

-    return {

-        restrict: 'A',

-        scope: {

-            disableDates: '&',

-            onSelectClose: '&'

-        },

-        require: 'ngModel',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            var dateFormatString = angular.isDefined(attr.dateFormat) ? scope.$parent.$eval(attr.dateFormat) : b2bMonthpickerConfig.dateFormat;

-            var helperText = angular.isDefined(attr.helperText) ? scope.$parent.$eval(attr.helperText) : b2bMonthpickerConfig.helperText; 

-            helperText = helperText.replace('$date', '{{dt | date : \'' + dateFormatString + '\'}}');

-

-            var descriptionText = angular.isDefined(attr.descriptionText) ? scope.$parent.$eval(attr.descriptionText) : b2bMonthpickerConfig.descriptionText;  

-

-

-            var inline = false;

-            if (elem.prop('nodeName') !== 'INPUT' && elem.prop('nodeName') !== 'A') {

-                inline = true;

-            }

-

-            var selectedDateMessage = "";

-            

-            if (elem.prop('nodeName') !== 'A'){

-                selectedDateMessage = '<button type="button" class="span12 faux-input" ng-disabled="ngDisabled" aria-describedby="monthpicker-description'+scope.$id+'"><span class="hidden-spoken" aria-live="assertive" aria-atomic="false">' + helperText + '</span></button>';    

-                elem.attr('tabindex', '-1'); 

-                elem.attr('aria-hidden', 'true');  

-                elem.attr('readonly', 'true'); 

-            }else{

-                selectedDateMessage = ''

-                elem.attr('aria-label', helperText);

-            }

-            

-            var descriptionTextSpan = '<span class="offscreen-text" id="monthpicker-description'+scope.$id+'">'+descriptionText+'</span>';

-            elem.removeAttr('b2b-Monthpicker');

-            elem.removeAttr('ng-model');

-            elem.removeAttr('ng-disabled');

-            elem.addClass('Monthpicker-input');

-            elem.attr('ng-model', 'dt');

-            elem.attr('aria-describedby', 'monthpicker-description'+scope.$id);

-            

-            

-            

-            elem.attr('ng-disabled', 'ngDisabled');

-            elem.attr('b2b-format-date', dateFormatString);

-

-            var wrapperElement = angular.element('<div></div>');

-            wrapperElement.attr('b2b-Monthpicker-popup', '');

-            wrapperElement.attr('ng-model', 'dt');

-            if (inline) {

-                wrapperElement.attr('inline', inline);

-            }

-            if (elem.prop('nodeName') === 'A'){

-                wrapperElement.attr('link', true);

-            }

-            b2bMonthpickerService.setAttributes(attr, wrapperElement);

-            b2bMonthpickerService.bindScope(attr, scope);

-

-            wrapperElement.html('');

-            wrapperElement.append(selectedDateMessage);

-            wrapperElement.append('');

-            wrapperElement.append(descriptionTextSpan);

-            wrapperElement.append('');

-            wrapperElement.append(elem.prop('outerHTML'));

-

-            var elm = wrapperElement.prop('outerHTML');

-            elm = $compile(elm)(scope);

-            elem.replaceWith(elm);

-        }],

-        link: function (scope, elem, attr, ctrl) {

-            if (!ctrl) {

-                $log.error("ng-model is required.");

-                return; // do nothing if no ng-model

-            }

-            

-            scope.$watch('dt', function (value) {

-                ctrl.$setViewValue(value);

-            });

-            ctrl.$render = function () {

-                scope.dt = ctrl.$viewValue;

-            };

-        }

-    };

-}])

-

-.directive('b2bMonthpickerGroup', [function () {

-    return {

-        restrict: 'EA',

-        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {

-            this.$$headers = [];

-            this.$$footers = [];

-            this.registerMonthpickerScope = function (MonthpickerScope) {

-                MonthpickerScope.headers = this.$$headers;

-                MonthpickerScope.footers = this.$$footers;

-            };

-        }],

-        link: function (scope, elem, attr, ctrl) {}

-    };

-}])

-

-.directive('b2bFormatDate', ['dateFilter', function (dateFilter) {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elem, attr, ctrl) {

-            var b2bFormatDate = "";

-            attr.$observe('b2bFormatDate', function (value) {

-                b2bFormatDate = value;

-            });

-            var dateToString = function (value) {

-                if (!isNaN(new Date(value))) {

-                    return dateFilter(new Date(value), b2bFormatDate);

-                }

-                return value;

-            };

-            ctrl.$formatters.unshift(dateToString);

-        }

-    };

-}])

-

-.directive('b2bMonthpickerHeader', [function () {

-    return {

-        restrict: 'EA',

-        require: '^b2bMonthpickerGroup',

-        transclude: true,

-        replace: true,

-        template: '',

-        compile: function (elem, attr, transclude) {

-            return function link(scope, elem, attr, ctrl) {

-                if (ctrl) {

-                    ctrl.$$headers.push(transclude(scope, function () {}));

-                }

-                elem.remove();

-            };

-        }

-    };

-}])

-

-.directive('b2bMonthpickerFooter', [function () {

-    return {

-        restrict: 'EA',

-        require: '^b2bMonthpickerGroup',

-        transclude: true,

-        replace: true,

-        template: '',

-        compile: function (elem, attr, transclude) {

-            return function link(scope, elem, attr, ctrl) {

-                if (ctrl) {

-                    ctrl.$$footers.push(transclude(scope, function () {}));

-                }

-                elem.remove();

-            };

-        }

-    };

-}]);

-/**

- * @ngdoc directive

- * @name Navigation.att:multiLevelNavigation

- *

- * @description

- *  <file src="src/multiLevelNavigation/docs/readme.md" />

- *

- * @usage

- *       <div class="b2b-ml-nav">

- *          <ul role="tree">

- *             <li aria-label="{{child.name}}" tabindex="-1" b2b-ml-nav="{{child.type}}" role="treeitem" ng-repeat="child in treeStructure">

- *                  <a tabindex="-1" href="javascript:void(0);" title="{{child.name}}">{{child.name}}<span><i class="{{child.type=='endNode'?'icon-primary-circle':'icon-primary-collapsed'}}"></i></span></a>

- *                      <!-- Below UL tag is RECURSIVE to generate n-childs -->

- *                      <ul role="group" ng-if="child.child">

- *                          <li aria-label="{{child.name}}" b2b-ml-nav="{{child.type}}" tabindex="-1" role="treeitem" ng-repeat="child in child.child">

- *                          <a tabindex="-1" href="javascript:void(0);" title="{{child.name}}">{{child.name}}<span><i class="{{child.type=='endNode'?'icon-primary-circle':'icon-primary-collapsed'}}"></i></span></a>

- *                               <!-- RECURSIVE UL tag goes here -->

- *                          </li>

- *                      </ul>

- *             </li>

- *           </ul>

- *        </div>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/multiLevelNavigation/docs/demo.html" />

-            <file src="src/multiLevelNavigation/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.multiLevelNavigation', ['b2b.att.utilities'])

-    //directive b2bMlNav Test coverage 100% on 5/13

-    .directive('b2bMlNav', ['keymap', function (keymap) {

-        return {

-            restrict: 'EA',

-            link: function (scope, element) {

-                var rootE, parentE, upE, downE, lastE, homeE, endE;

-                //default root tree element tabindex set zero

-                if (element.parent().parent().hasClass('b2b-ml-nav') && (element[0].previousElementSibling === null)) {

-                    element.attr('tabindex', 0);

-                }

-                //check root via class

-                var isRoot = function (elem) {

-                        if (elem.parent().parent().eq(0).hasClass('b2b-ml-nav')) {

-                            return true;

-                        } else {

-                            return false;

-                        }

-

-                    }

-                    //for any expandable tree item on click

-                var toggleState = function (e) {

-                    if (angular.element(e.target).attr("b2b-ml-nav") !== "endNode") {

-                        var eLink = element.find('a').eq(0);

-                        if (eLink.hasClass('active')) {

-                            eLink.removeClass('active');

-                            eLink.parent().attr("aria-expanded", "false");

-                            eLink.find('i').eq(0).removeClass('icon-primary-expanded');

-                            eLink.find('i').eq(0).addClass('icon-primary-collapsed');

-                        } else {

-                            eLink.addClass('active');

-                            eLink.parent().attr("aria-expanded", "true");

-                            eLink.find('i').eq(0).removeClass('icon-primary-collapsed');

-                            eLink.find('i').eq(0).addClass('icon-primary-expanded');

-                        }

-                    }

-                };

-                //function finds the main root-item from particular tree-group

-                var findRoot = function (elem) {

-                    if (isRoot(elem)) {

-                        rootE = elem;

-                        return;

-                    }

-                    if (elem.attr("b2b-ml-nav") === "middleNode" || elem.attr("b2b-ml-nav") === "endNode") {

-                        parentE = elem.parent().parent();

-                    } else {

-                        parentE = elem;

-                    }

-                    if (parentE.attr("b2b-ml-nav") === "rootNode") {

-                        rootE = parentE;

-                    } else {

-                        findRoot(parentE);

-                    }

-                };

-                //finds the last visible node of the previous tree-group

-                var findPreActive = function (elem) {

-                    if (!(elem.hasClass("active"))) {

-                        return;

-                    } else {

-                        var childElems = angular.element(elem[0].nextElementSibling.children);

-                        lastE = angular.element(childElems[childElems.length - 1]);

-                        if (lastE.attr("b2b-ml-nav") === "middleNode" && lastE.find('a').eq(0).hasClass('active')) {

-                            findPreActive(lastE.find('a').eq(0));

-                        }

-                        upE = lastE;

-                    }

-                };

-                //find above visible link

-                var findUp = function (elem) {

-                    if (elem[0].previousElementSibling !== null) {

-                        upE = angular.element(elem[0].previousElementSibling);

-                    } else {

-                        upE = elem.parent().parent();

-                    }

-                    if (isRoot(elem) || (upE.attr('b2b-ml-nav') === "middleNode" && upE[0] !== elem.parent().parent()[0])) {

-                        findPreActive(upE.find('a').eq(0)); 

-                    }

-                };

-                //find below visible link

-                var findDown = function (elem) {

-                    if (elem.hasClass('active')) {

-                        downE = elem.next().find('li').eq(0);

-                    } else {

-                        if (elem.parent().next().length !== 0) {

-                            downE = elem.parent().next().eq(0);

-                        } else {

-                            if (elem.parent().parent().parent().next().length !== 0) {

-                                downE = elem.parent().parent().parent().next().eq(0);

-                                return;

-                            }

-                            downE = elem.parent().eq(0);

-                        }

-                    }

-                };

-                //finds last root-group element of the tree

-                var findEnd = function (elem) {

-                    findRoot(elem);

-                    endE = angular.element(rootE.parent()[0].children[rootE.parent()[0].children.length - 1]);

-                };

-                //finds first root element of tree

-                var findHome = function (elem) {

-                    findRoot(elem);

-                    homeE = angular.element(rootE.parent()[0].children[0]);

-                };

-                element.bind('click', function (e) {

-                    if(element.attr("b2b-ml-nav") !== "endNode") { 

-                        toggleState(e); 

-                    }

-                    e.stopPropagation();

-                });

-                element.bind('focus', function (e) {

-                    if(element.attr("b2b-ml-nav") !== "endNode") {

-                        if(element.find('a').eq(0).hasClass('active')) {

-                            element.attr("aria-expanded", true);

-                        }

-                        else {

-                            element.attr("aria-expanded", false);

-                        }

-                        

-                    }

-                })

-                //Keyboard functionality approach:

-                //find keycode

-                //set set tabindex -1 on the current focus element

-                //find the next element to be focussed, set tabindex 0 and throw focus

-                element.bind('keydown', function (evt) {

-                    switch (evt.keyCode) {

-                    case keymap.KEY.ENTER:

-                    case keymap.KEY.SPACE:

-                        element.triggerHandler('click');

-                        evt.stopPropagation();

-                        evt.preventDefault();

-                        break;

-                    case keymap.KEY.END:

-                        evt.preventDefault();

-                        element.attr('tabindex', -1);

-                        findEnd(element);

-                        endE.eq(0).attr('tabindex', 0);

-                        endE[0].focus();

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.HOME:

-                        evt.preventDefault();

-                        element.attr('tabindex', -1);

-                        findHome(element);

-                        homeE.eq(0).attr('tabindex', 0);

-                        homeE[0].focus();

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.LEFT:

-                        evt.preventDefault();

-                        if (!isRoot(element)) {

-                            element.attr('tabindex', -1);

-                            parentE = element.parent().parent();

-                            parentE.eq(0).attr('tabindex', 0);

-                            parentE[0].focus();

-                            parentE.eq(0).triggerHandler('click');

-                        } else {

-                            if (element.find('a').eq(0).hasClass('active')) {

-                                element.triggerHandler('click');

-                            }

-                        }

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.UP:

-                        evt.preventDefault();

-                        if (!(isRoot(element) && element[0].previousElementSibling === null)) {

-                            element.attr('tabindex', -1);

-                            findUp(element);

-                            upE.eq(0).attr('tabindex', 0);

-                            upE[0].focus();

-                        }

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.RIGHT:

-                        evt.preventDefault();

-                        if (element.attr("b2b-ml-nav") !== "endNode") {

-                            if (!element.find('a').eq(0).hasClass('active')) {

-                                element.triggerHandler('click');

-                            }

-                            element.attr('tabindex', -1);

-                            findDown(element.find('a').eq(0));

-                            downE.eq(0).attr('tabindex', 0);

-                            downE[0].focus();

-                        }

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.DOWN:

-                        evt.preventDefault();

-                        element.attr('tabindex', -1);

-                        if (!(element.attr("b2b-ml-nav") === "middleNode" && element.find('a').eq(0).hasClass('active')) && (element.next().length === 0)) {

-                            if(element.parent().parent().attr("b2b-ml-nav") !== "rootNode" && element.parent().parent()[0].nextElementSibling !== null)

-                            {

-                                findDown(element.find('a').eq(0));

-                                downE.eq(0).attr('tabindex', 0);

-                                downE[0].focus();

-                                evt.stopPropagation();

-                                break;

-                            }

-                            findRoot(element);

-                            if (!(rootE.next().length === 0)) {

-                                rootE.next().eq(0).attr('tabindex', 0);

-                                rootE.next()[0].focus();

-                            } else {

-                                rootE.eq(0).attr('tabindex', 0);

-                                rootE[0].focus();

-                            }

-                            evt.stopPropagation();

-                            break;

-                        }

-                        findDown(element.find('a').eq(0));

-                        downE.eq(0).attr('tabindex', 0);

-                        downE[0].focus();

-                        evt.stopPropagation();

-                        break;

-                    default:

-                        break;

-                    }

-                });

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Tabs, tables & accordions.att:multipurposeExpander

- *

- * @description

- *  <file src="src/multipurposeExpander/docs/readme.md" />

- *

- * @usage

- * <!--With Close Other -->

- * <b2b-expander-group close-others="true">

- *  <b2b-expanders class="mpc-expanders" is-open="testmpc">            

- *      <b2b-expander-heading ng-class=" { 'b2b-toggle-header-active': !testmpc, 'b2b-toggle-header-inactive': testmpc } ">Heading content goes here</b2b-expander-heading>               

- *      <b2b-expander-body>

-            <p>body content goes here</p>

-        </b2b-expander-body>

- *  </b2b-expanders>

- *  </b2b-expander-group>

- *  

- * <!-- Without Close Other -->

- *  <b2b-expanders class="mpc-expanders" is-open="testmpc2">            

- *      <b2b-expander-heading ng-class=" { 'b2b-toggle-header-active': !testmpc2, 'b2b-toggle-header-inactive': testmpc2 } ">Heading content goes here</b2b-expander-heading>               

- *      <b2b-expander-body>

-            <p>body content goes here</p>

-        </b2b-expander-body>

- *  </b2b-expanders>

- *  

- * @example

- *  <section id="code">

-        <example module="b2b.att.multipurposeExpander">

-            <file src="src/multipurposeExpander/docs/demo.html" />

-            <file src="src/multipurposeExpander/docs/demo.js" />

-        </example>

-    </section>

- *

- */

-

-angular.module('b2b.att.multipurposeExpander', ['b2b.att', 'b2b.att.collapse'])

-.directive('b2bExpanderGroup', function () {

-    return {

-        restrict: 'EA',

-        transclude: true,

-        template: "<ng-transclude></ng-transclude>",

-        controller:['$scope','$attrs', function($scope,$attrs){

-            this.groups = [];

-            this.index = -1;            

-            this.scope = $scope;

-            

-            this.addGroup = function (groupScope) {

-                var that = this;

-                groupScope.index = this.groups.length;

-                this.groups.push(groupScope);

-                if(this.groups.length > 0){

-                    this.index = 0;

-                }

-                groupScope.$on('$destroy', function () {

-                that.removeGroup(groupScope);

-            });

-            };

-

-            this.closeOthers = function (openGroup) {

-                var closeOthers = angular.isDefined($attrs.closeOthers);

-                if (closeOthers && !$scope.forceExpand) {

-                    angular.forEach(this.groups, function (group) {

-                        if (group !== openGroup) {

-                            group.isOpen = false;

-                        }

-                    });

-                }

-                if (this.groups.indexOf(openGroup) === (this.groups.length - 1) && $scope.forceExpand) {

-                    $scope.forceExpand = false;

-                }

-            };

-            this.removeGroup = function (group) {

-            var index = this.groups.indexOf(group);

-            if (index !== -1) {

-                this.groups.splice(this.groups.indexOf(group), 1);

-            }

-        };

-        }]

-       

-    };

-    

-})

-.directive('b2bExpanders', function () {

-    return{

-        restrict: 'EA',

-        replace: true,

-        require:['b2bExpanders','?^b2bExpanderGroup'],

-        transclude: true,

-        scope:{isOpen:'=?'},

-        template: "<div ng-transclude></div>",

-        controller: ['$scope', function ($scope){

-                var bodyScope = null;

-                var expanderScope = null;

-                this.isOpened = function(){                

-                    if($scope.isOpen)

-                    {

-                        return  true;

-                    }else

-                    {

-                        return false;

-                    }

-                };                

-                this.setScope = function (scope) {

-                    bodyScope = scope; 

-                    bodyScope.isOpen = $scope.isOpen;                   

-                };                

-                this.setExpanderScope = function (scope) {

-                    expanderScope = scope;                                   

-                };

-                this.toggle = function () {

-                    $scope.isOpen = bodyScope.isOpen = !bodyScope.isOpen;                    

-                    return bodyScope.isOpen;

-                    

-                };

-                this.watchToggle = function(io){ 

-                    bodyScope.isOpen = io;

-                    expanderScope.updateIcons(io);

-                };  

-            }],

-        link: function (scope, elem, attr, myCtrl)

-        {

-            //scope.isOpen = false; 

-            if(myCtrl[1]){

-                myCtrl[1].addGroup(scope);

-            }

-            scope.$watch('isOpen', function(val){                               

-                myCtrl[0].watchToggle(scope.isOpen);

-                if(val && myCtrl[1]){

-                    myCtrl[1].closeOthers(scope);

-                }

-            });            

-        }

-    };

-})

-

-.directive('b2bExpanderHeading', function () {

-    return{

-        require: "^b2bExpanders",

-        restrict: 'EA',

-        replace: true,

-        transclude: true,

-        scope: true,

-        template: "<div style='padding:10px 10px 10px 0 !important' ng-transclude></div>"

-    };

-})

-

-.directive('b2bExpanderBody', function () {

-    return{

-        restrict: 'EA',

-        require: "^b2bExpanders",

-        replace: true,

-        transclude: true,

-        scope: {},

-        template: "<div b2b-collapse='!isOpen' ><div ng-transclude></div></div>",

-        link: function (scope, elem, attr, myCtrl) {

-            scope.isOpen = false;

-            myCtrl.setScope(scope);

-        }

-    };

-})

-

-.directive('b2bExpanderToggle', function () {

-    return{

-        restrict: 'EA',

-        require: "^b2bExpanders",

-        scope: {

-            expandIcon: '@',

-            collapseIcon: '@'

-        },

-        

-        link: function (scope, element, attr, myCtrl)

-        {

-            myCtrl.setExpanderScope(scope);

-            var isOpen = myCtrl.isOpened();   

-

-            scope.setIcon = function () {

-                element.attr("role", "tab");

-

-                if (scope.expandIcon && scope.collapseIcon)

-                {

-                    if (isOpen) {

-                        element.removeClass(scope.expandIcon);

-                        element.addClass(scope.collapseIcon);

-

-                        element.attr("aria-expanded", "true");

-                    }

-                    else {

-                        element.removeClass(scope.collapseIcon);

-                        element.addClass(scope.expandIcon);

-

-                        element.attr("aria-expanded", "false");

-                    }

-                }                               

-            };

-            

-            element.bind('click', function (){

-                scope.toggleit();

-            });

-            scope.updateIcons = function(nStat){

-                isOpen = nStat;

-                scope.setIcon();                

-            };

-            scope.toggleit = function (){

-                isOpen = myCtrl.toggle();

-                scope.setIcon();

-                scope.$apply();

-            };                    

-            scope.setIcon();

-        }

-    };

-});

-/**

- * @ngdoc directive

- * @name Messages, modals & alerts.att:notesMessagesAndErrors

- *

- * @description

- *  <file src="src/notesMessagesAndErrors/docs/readme.md" />

- *

- * @usage

- *  See Demo

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/notesMessagesAndErrors/docs/demo.html" />

-            <file src="src/notesMessagesAndErrors/docs/demo.js" />

-       </example>

-        </section>

- *

- */

-angular.module('b2b.att.notesMessagesAndErrors', []);

-/** 

- * @ngdoc directive 

- * @name Template.att:Notification Card

- * 

- * @description 

- *  <file src="src/notificationCardTemplate/docs/readme.md" /> 

- * 

- * @example 

- *  <section id="code"> 

-        <b>HTML + AngularJS</b> 

-        <example module="b2b.att"> 

-            <file src="src/notificationCardTemplate/docs/demo.html" /> 

-            <file src="src/notificationCardTemplate/docs/demo.js" /> 

-       </example> 

-    </section>    

- * 

- */

-angular.module('b2b.att.notificationCardTemplate', [])

-  

-/** 

- * @ngdoc directive 

- * @name Template.att:Order Confirmation Template

- * 

- * @description 

- *  <file src="src/orderConfirmationTemplate/docs/readme.md" /> 

- * 

- * @example 

- *  <section id="code"> 

-        <b>HTML + AngularJS</b> 

-        <example module="b2b.att"> 

-            <file src="src/orderConfirmationTemplate/docs/demo.html" /> 

-            <file src="src/orderConfirmationTemplate/docs/demo.js" /> 

-       </example> 

-    </section>    

- * 

- */

-angular.module('b2b.att.orderConfirmationTemplate', []);

-  

-/**

- * @ngdoc directive

- * @name Navigation.att:pagination

- *

- * @description

- *  <file src="src/pagination/docs/readme.md" />

- *

- * @usage

- *   <div b2b-pagination="" input-id="goto-page-2" total-pages="totalPages1" current-page="currentPage1" click-handler="customHandler" show-input="showInput"></div> 

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/pagination/docs/demo.html" />

-            <file src="src/pagination/docs/demo.js" />

-       </example>

-        </section>

- *

- */

-angular.module('b2b.att.pagination', ['b2b.att.utilities', 'ngTouch'])

-    .directive('b2bPagination', ['b2bUserAgent', 'keymap', '$window', '$timeout', function (b2bUserAgent, keymap, $window, $timeout) {

-        return {

-            restrict: 'A',

-            scope: {

-                totalPages: '=',

-                currentPage: '=',

-                showInput: '=',

-                clickHandler: '=?',

-                inputId: '='

-            },

-            replace: true,

-            templateUrl: 'b2bTemplate/pagination/b2b-pagination.html',

-            link: function (scope, elem) {

-                scope.isMobile = b2bUserAgent.isMobile();

-                scope.notMobile = b2bUserAgent.notMobile();

-                scope.focusedPage;

-                scope.meanVal = 3;

-                scope.$watch('totalPages', function (value) {

-                    if (angular.isDefined(value) && value !== null) {

-                        scope.pages = [];

-                        if (value < 1) {

-                            scope.totalPages = 1;

-                            return;

-                        }

-                        if (value <= 10) {

-                            for (var i = 1; i <= value; i++) {

-                                scope.pages.push(i);

-                            }

-                        } else if (value > 10) {

-                            var midVal = Math.ceil(value / 2);

-                            scope.pages = [midVal - 2, midVal - 1, midVal, midVal + 1, midVal + 2];

-                        }

-                        if(scope.currentPage === undefined || scope.currentPage === 1)

-                        {

-                            currentPageChanged(1);

-                        }

-                    }

-                });

-                scope.$watch('currentPage', function (value) {

-                    currentPageChanged(value);

-                    callbackHandler(value);

-                });

-                var callbackHandler = function (num) {

-                    if (angular.isFunction(scope.clickHandler)) {

-                        scope.clickHandler(num);

-                    }

-                };

-

-                function currentPageChanged(value) {

-                    if (angular.isDefined(value) && value !== null) {

-                        if (!value || value < 1) {

-                            value = 1;

-                        }

-                        if (value > scope.totalPages) {

-                            value = scope.totalPages;

-                        }

-                        if (scope.currentPage !== value) {

-                            scope.currentPage = value;

-                            callbackHandler(scope.currentPage);

-                        }

-                        if (scope.totalPages > 10) {

-                            var val = parseInt(value);

-                            if (val <= 6) {

-                                scope.pages = [1, 2, 3, 4, 5, 6, 7, 8];

-                            } else if (val > 6 && val <= scope.totalPages - 5) {

-                                scope.pages = [val - 1, val, val + 1];

-                            } else if (val >= scope.totalPages - 5) {

-                                scope.pages = [scope.totalPages - 7, scope.totalPages - 6, scope.totalPages - 5, scope.totalPages - 4, scope.totalPages - 3, scope.totalPages - 2, scope.totalPages - 1, scope.totalPages];

-                            }

-                        }

-                        if (scope.isMobile) {

-                            var inWidth = $window.innerWidth;

-                            var viewLimit = 7;

-                            if (inWidth <= 400) {

-                                viewLimit = 7;

-                            } else if (inWidth > 400 && inWidth < 500) {

-                                viewLimit = 9;

-                            } else if (inWidth >= 500 && inWidth < 600) {

-                                viewLimit = 11;

-                            } else if (inWidth >= 600 && inWidth < 700) {

-                                viewLimit = 13;

-                            } else if (inWidth >= 700 && inWidth < 800) {

-                                viewLimit = 15;

-                            }

-

-                            var val = parseInt(value);

-

-                            scope.meanVal = Math.floor(viewLimit / 2);

-                            var lowerLimit = (val - scope.meanVal) < 1 ? 1 : val - scope.meanVal;

-                            var upperLimit = (lowerLimit + viewLimit - 1) > scope.totalPages ? scope.totalPages : lowerLimit + viewLimit - 1;

-                            scope.pages = [];

-                            for (var i = lowerLimit; i <= upperLimit; i++) {

-                                scope.pages.push(i);

-                            }

-                        }

-                    }

-                }

-                scope.gotoKeyClick = function (keyEvent) {

-                  if (keyEvent.which === keymap.KEY.ENTER) {

-                    scope.gotoBtnClick()

-                  }

-                }

-                scope.gotoBtnClick = function () {

-                    currentPageChanged(parseInt(scope.gotoPage)); 

-                    callbackHandler(scope.currentPage);

-                    var qResult = elem[0].querySelector('button');

-                    angular.element(qResult).attr('disabled','true');

-                    $timeout(function(){

-                        elem[0].querySelector('.b2b-pager__item--active').focus();

-                    }, 50); 

-                    scope.gotoPage = null;               

-                }

-                scope.onfocusIn = function(evt)

-                {

-                    var qResult = elem[0].querySelector('button');

-                    angular.element(qResult).removeAttr('disabled');

-                }

-                scope.onfocusOut = function(evt)

-                {

-                    if(evt.target.value === "")

-                    {

-                        var qResult = elem[0].querySelector('button');

-                        angular.element(qResult).attr('disabled','true');

-                    }                    

-                }

-                scope.next = function (event) {

-                    if (event != undefined) {

-                        event.preventDefault();

-                    }

-                    if (scope.currentPage < scope.totalPages) {

-                        scope.currentPage += 1;

-                        callbackHandler(scope.currentPage);

-                    }

-                };

-                scope.prev = function (event) {

-                    if (event != undefined) {

-                        event.preventDefault();

-                    }

-                    if (scope.currentPage > 1) {

-                        scope.currentPage -= 1;

-                        callbackHandler(scope.currentPage);

-                    }

-                };

-                scope.selectPage = function (value, event) {

-                    event.preventDefault();

-                    scope.currentPage = value;

-                    scope.focusedPage = value;

-                    callbackHandler(scope.currentPage);

-                };

-                scope.checkSelectedPage = function (value) {

-                    if (scope.currentPage === value) {

-                        return true;

-                    }

-                    return false;

-                };

-                scope.isFocused = function (page) {

-                    return scope.focusedPage === page;

-                };

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Navigation.att:paneSelector

- *

- * @description

- *  <file src="src/paneSelector/docs/readme.md" />

- *

- * @usage

- *  Please refer demo.html tab in Example section below.

- *

- * @example

-    <section id="code">

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/paneSelector/docs/demo.html" />

-            <file src="src/paneSelector/docs/demo.js" />

-        </example>

-    </section>

- */

-

-angular.module('b2b.att.paneSelector', ['b2b.att.tabs', 'b2b.att.utilities'])

-

-.filter('paneSelectorSelectedItemsFilter', [function () {

-    return function (listOfItemsArray) {

-

-        if (!listOfItemsArray) {

-            listOfItemsArray = [];

-        }

-

-        var returnArray = [];

-

-        for (var i = 0; i < listOfItemsArray.length; i++) {

-            if (listOfItemsArray[i].isSelected) {

-                returnArray.push(listOfItemsArray[i]);

-            }

-        }

-

-        return returnArray;

-    };

-}])

-

-.filter('paneSelectorFetchChildItemsFilter', [function () {

-    return function (listOfItemsArray) {

-

-        if (!listOfItemsArray) {

-            listOfItemsArray = [];

-        }

-

-        var returnArray = [];

-

-        for (var i = 0; i < listOfItemsArray.length; i++) {

-            for (var j = 0; j < listOfItemsArray[i].childItems.length; j++) {

-                returnArray.push(listOfItemsArray[i].childItems[j]);

-            }

-        }

-

-        return returnArray;

-    };

-}])

-

-.directive('b2bPaneSelector', [function () {

-    return {

-        restrict: 'AE',

-        replace: true,

-        templateUrl: 'b2bTemplate/paneSelector/paneSelector.html',

-        transclude: true,

-        scope: {}

-    };

-}])

-

-.directive('b2bPaneSelectorPane', [ function () {

-    return {

-        restrict: 'AE',

-        replace: true,

-        templateUrl: 'b2bTemplate/paneSelector/paneSelectorPane.html',

-        transclude: true,

-        scope: {}

-    };

-}])

-

-.directive('b2bTabVertical', ['$timeout', 'keymap', function ($timeout, keymap) {

-    return {

-        restrict: 'A',

-        require: '^b2bTab',

-        link: function (scope, element, attr, b2bTabCtrl) {

-

-            if (!b2bTabCtrl) {

-                return;

-            }

-

-            // retreive the isolateScope

-            var iScope = angular.element(element).isolateScope();

-

-            $timeout(function () {

-                angular.element(element[0].querySelector('a')).unbind('keydown');

-                angular.element(element[0].querySelector('a')).bind('keydown', function (evt) {

-

-                    if (!(evt.keyCode)) {

-                        evt.keyCode = evt.which;

-                    }

-

-                    switch (evt.keyCode) {

-                        case keymap.KEY.DOWN:

-                            evt.preventDefault();

-                            iScope.nextKey();

-                            break;

-

-                        case keymap.KEY.UP:

-                            evt.preventDefault();

-                            iScope.previousKey();

-                            break;

-

-                        default:;

-                    }

-                });

-            });

-        }

-    };

-}]);

-/**

- * @ngdoc directive

- * @name Forms.att:phoneNumberInput

- *

- * @description

- *  <file src="src/phoneNumberInput/docs/readme.md" />

- *

- * @usage

-<form name="userForm1">

-    <div class="form-row" ng-class="{'error':!userForm1.text.$valid && userForm1.text.$dirty}">

-        <label>Phone Mask<span style="color:red">*</span>: (npa) nxx-line &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Model Value: {{mask.text}}</label>

-        <div>

-            <input b2b-phone-mask="phoneMask" name="text" ng-model="mask.text" type="text" placeholder="e.g. (123) 456-7890" title="Phone Number" class="b2b-phone-mask-input" required />

-            <div ng-messages="userForm1.text.$error" class="error-msg" aria-live="polite" aria-atomic="true">

-                <span ng-message="required" role="alert">This field is mandatory!</span>

-                <span ng-message="invalidPhoneNumber" role="alert">Please enter valid phone number!</span>

-                <span ng-message="mask" role="alert">Please enter valid phone number!</span>

-            </div>

-        </div>

-    </div>

-</form>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/phoneNumberInput/docs/demo.html" />

-            <file src="src/phoneNumberInput/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.phoneNumberInput', ['ngMessages', 'b2b.att.utilities'])

-    .constant("CoreFormsUiConfig", {

-        phoneMask: '(___) ___-____',

-        phoneMaskDot: '___.___.____',

-        phoneMaskHyphen: '___-___-____'

-    })

-    .directive('b2bPhoneMask', ['$parse', 'CoreFormsUiConfig', 'keymap', function ($parse, CoreFormsUiConfig, keymap) {

-        return {

-            require: 'ngModel',

-            scope: {

-                ngModel: '='

-            },

-            link: function (scope, iElement, iAttrs, ctrl) {

-                var navigatorAgent = navigator.userAgent.toLowerCase(),

-                    isAndroid = navigatorAgent.indexOf("android") > -1,

-                    oldIE = navigatorAgent.indexOf('msie 8.0') !== -1;

-                var mask = '';

-                var validPhoneNumber = false;

-                var currentKey = '';

-                if (isAndroid) {

-                    mask = "__________";

-                } else {

-                    switch (iAttrs.b2bPhoneMask) {

-                    case "phoneMask":

-                        mask = CoreFormsUiConfig.phoneMask;

-                        break;

-                    case "phoneMaskDot":

-                        mask = CoreFormsUiConfig.phoneMaskDot;

-                        break;

-                    case "phoneMaskHyphen":

-                        mask = CoreFormsUiConfig.phoneMaskHyphen;

-                        break;

-                    default:

-                        mask = CoreFormsUiConfig.phoneMask;

-                    }

-                }

-                iElement.attr("maxlength", mask.length);

-                var checkValidity = function (unmaskedValue, rawValue) {

-                    var valid = false;

-                    if (angular.isUndefined(rawValue) || rawValue === '') {

-                        valid = true;

-                    } else if (unmaskedValue) {

-                        valid = (unmaskedValue.length === 10);

-                    }

-                    ctrl.$setValidity('invalidPhoneNumber', validPhoneNumber);

-                    ctrl.$setValidity('mask', valid);

-                    return valid;

-                };

-                var handleKeyup = function (evt) {

-

-                    if (evt && evt.keyCode === keymap.KEY.SHIFT) {

-                        return;

-                    }

-

-                    var index, formattedNumber;

-                    if (ctrl.$modelValue) {

-                        formattedNumber = ctrl.$modelValue;

-                    } else {

-                        formattedNumber = iElement.val();

-                    }

-                    if (!formattedNumber.length && currentKey === '') {

-                        return;

-                    }

-                    var maskLength, inputNumbers, maskArray, tempArray, maskArrayLength;

-                    tempArray = [];

-                    maskArray = mask.split("");

-                    maskArrayLength = maskArray.length;

-                    maskLength = formattedNumber.substring(0, mask.length);

-                    inputNumbers = formattedNumber.replace(/[^0-9]/g, "").split("");

-                    for (index = 0; index < maskArrayLength; index++) {

-                        tempArray.push(maskArray[index] === "_" ? inputNumbers.shift() : maskArray[index]);

-                        if (inputNumbers.length === 0) {

-                            break;

-                        }

-                    }

-                    formattedNumber = tempArray.join("");

-                    if (formattedNumber === '(') {

-                        formattedNumber = '';

-                    }

-

-                    if ( (angular.isDefined(evt) && evt.which) && currentKey !== '') {

-                        if (maskArray[0] === currentKey && formattedNumber === '') {

-                            formattedNumber = '(';

-                        } else if (evt.which === keymap.KEY.SPACE && currentKey === ' ') {

-                            formattedNumber = formattedNumber + ') ';

-                        } else if (maskArray[0] === currentKey && formattedNumber === '') {

-                            formattedNumber = formattedNumber + currentKey;

-                        } else if (maskArray[formattedNumber.length] === currentKey) {

-                            formattedNumber = formattedNumber + currentKey;

-                        }

-                        currentKey = '';

-                    }

-

-                    ctrl.$setViewValue(formattedNumber);

-                    ctrl.$render();

-                    return formattedNumber;

-                };

-

-

-                // since we are only allowing 0-9, why even let the keypress go forward?

-                // also added in delete... in case they want to delete :)

-                var handlePress = function (e) {

-                    if (e.which) {

-                        if ((e.which < 48 || e.which > 57) && (e.which < 96 || e.which > 105)) {

-                            if (e.which !== keymap.KEY.BACKSPACE && e.which !== keymap.KEY.TAB && e.which !== keymap.KEY.DELETE && e.which !== keymap.KEY.ENTER && e.which !== keymap.KEY.LEFT && e.which !== keymap.KEY.RIGHT &&

-                                // Allow: Ctrl+V/v

-                                (!(e.ctrlKey) && (e.which !== '118' || e.which !== '86')) &&

-                                // Allow: Ctrl+C/c

-                                (!(e.ctrlKey) && (e.which !== '99' || e.which !== '67')) &&

-                                // Allow: Ctrl+X/x

-                                (!(e.ctrlKey) && (e.which !== '120' || e.which !== '88'))) {

-                                e.preventDefault ? e.preventDefault() : e.returnValue = false;

-                                iElement.attr("aria-label", "Only numbers are allowed");

-                                validPhoneNumber = false;

-                            }

-                        } else {

-                            iElement.removeAttr("aria-label");

-                            validPhoneNumber = true;

-                        }

-

-                        setCurrentKey(e);

-                    }

-                    scope.$apply();

-                };

-                // i moved this out because i thought i might need focus as well..

-                // to handle setting the model as the view changes

-                var parser = function (fromViewValue) {

-                    var letters = /^[A-Za-z]+$/;

-                    var numbers = /^[0-9]+$/;

-                    if (angular.isUndefined(fromViewValue) || fromViewValue === '') {

-                        validPhoneNumber = true;

-                    } else {

-                        if (fromViewValue.match(letters)) {

-                            validPhoneNumber = false;

-                        }

-                        if (fromViewValue.match(numbers)) {

-                            validPhoneNumber = true;

-                        }

-                    }

-                    var clean = "";

-                    if (fromViewValue && fromViewValue.length > 0) {

-                        clean = fromViewValue.replace(/[^0-9]/g, '');

-                    }

-                    checkValidity(clean, fromViewValue);

-                    return clean;

-                };

-

-                //to handle reading the model and formatting it

-                var formatter = function (fromModelView) {

-                    var input = '';

-                    checkValidity(fromModelView);

-                    if (fromModelView) {

-                        input = handleKeyup();

-                    }

-                    return input;

-                };

-

-                var setCurrentKey = function (e) {

-                    switch (e.which) {

-                    case 189:

-                    case 109:

-                        currentKey = '-';

-                        break;

-                    case 190:

-                    case 110:

-                        currentKey = '.';

-                        break;

-                    case 57:

-                        if (e.shiftKey === true) {

-                            currentKey = '(';

-                        }

-                        break;

-                    case 48:

-                        if (e.shiftKey === true) {

-                            currentKey = ')';

-                        }

-                        break;

-                    case 32:

-                        currentKey = ' ';

-                        break;

-                    }

-                };

-

-                if (angular.isDefined(scope.ngModel)) {

-                    parser(scope.ngModel);

-                }

-

-                ctrl.$parsers.push(parser);

-                ctrl.$formatters.push(formatter);

-                iElement.bind('keyup', handleKeyup);

-                iElement.bind('keydown', handlePress);

-            }

-        };

-}]);

-/** 

- * @ngdoc directive 

- * @name Template.att:Profile Blocks 

- * 

- * @description 

- *  <file src="src/profileBlockTemplate/docs/readme.md" /> 

- * @example 

- *  <section id="code">  

-        <example module="b2b.att"> 

-            <file src="src/profileBlockTemplate/docs/demo.html" /> 

-            <file src="src/profileBlockTemplate/docs/demo.js" /> 

-       </example>  

-    </section>  

- *  

- */   

-

-angular.module('b2b.att.profileBlockTemplate', [])

-    

-     

-  

-/**

- * @ngdoc directive

- * @name Layouts.att:profileCard

- *

- * @description

- *  <file src="src/profileCard/docs/readme.md" />

- *

- * @usage

- *  <b2b-profile-card></b2b-profile-card>

- *

- * @example

-    <section id="code">   

-        <example module="b2b.att">

-            <file src="src/profileCard/docs/demo.html" />

-            <file src="src/profileCard/docs/demo.js" />

-        </example>

-    </section>

- */

-

-angular.module('b2b.att.profileCard', ['b2b.att'])

-.constant('profileStatus',{

-    status: {

-        ACTIVE: {

-            status: "Active",

-            color: "green"

-        },

-        DEACTIVATED: {

-            status: "Deactivated",

-            color: "red"

-        },

-        LOCKED: {

-            status: "Locked",

-            color: "red"

-        },

-        IDLE: {

-            status: "Idle",

-            color: "yellow"

-        },

-        PENDING: {

-            status: "Pending",

-            color: "blue"

-        }

-    },

-    role: "COMPANY ADMINISTRATOR"

-

-})

-.directive('b2bProfileCard',['$http','$q','profileStatus', function($http,$q,profileStatus) {

-   return {

-        restrict: 'EA',

-        replace: 'true',

-        templateUrl: function(element, attrs){

-            if(!attrs.addUser){

-                return 'b2bTemplate/profileCard/profileCard.html';

-            }

-            else{

-                return 'b2bTemplate/profileCard/profileCard-addUser.html';

-            }

-        },

-        scope: {

-            profile:'=',

-            characterLimit: '@'

-        },

-        link: function(scope, elem, attr){

-            scope.characterLimit = parseInt(attr.characterLimit, 10) || 25;

-            scope.shouldClip = function(str) {

-                return str.length > scope.characterLimit;

-            };

-

-            scope.showEmailTooltip = false;

-

-            scope.image=true;

-            function isImage(src) {

-                var deferred = $q.defer();

-                var image = new Image();

-                image.onerror = function() {

-                    deferred.reject(false);

-                };

-                image.onload = function() {

-                    deferred.resolve(true);

-                };

-                if(src !== undefined && src.length>0 ){

-                    image.src = src;

-                } else {

-                     deferred.reject(false);

-                }

-                return deferred.promise;

-            }

-            if(!attr.addUser){

-            scope.image=false;

-            isImage(scope.profile.img).then(function(img) {

-                scope.image=img;

-            });

-            var splitName=(scope.profile.name).split(' ');

-            scope.initials='';

-            for(var i=0;i<splitName.length;i++){

-                scope.initials += splitName[i][0];

-            }

-            if(scope.profile.role.toUpperCase() === profileStatus.role){

-                scope.badge=true;

-            }

-            var profileState=profileStatus.status[scope.profile.state.toUpperCase()];

-            if(profileState) {

-                scope.profile.state=profileStatus.status[scope.profile.state.toUpperCase()].status;

-                scope.colorIcon=profileStatus.status[scope.profile.state.toUpperCase()].color;

-                if(scope.profile.state.toUpperCase()===profileStatus.status.PENDING.status.toUpperCase()||scope.profile.state.toUpperCase()===profileStatus.status.LOCKED.status.toUpperCase()){

-                        scope.profile.lastLogin=scope.profile.state;

-                }

-            }

-            var today=new Date().getTime();

-            var lastlogin=new Date(scope.profile.lastLogin).getTime();

-            var diff=(today-lastlogin)/(1000*60*60*24);

-            if(diff<=1){

-                scope.profile.lastLogin="Today";

-            }

-            else if(diff<=2){

-                scope.profile.lastLogin="Yesterday";

-            }

-        }

-    }

-};

-}]);

-/**

- * @ngdoc directive

- * @name Forms.att:radios

- *

- * @description

- *  <file src="src/radios/docs/readme.md" />

- *

- * @usage

- *  See demo section

- *

- * @param {boolean} refreshRadioGroup - A trigger that recalculates and updates the accessibility roles on radios in a group.

- * 

- * @example

-    <section id="code">

-               <b>HTML + AngularJS</b>

-               <example module="b2b.att">

-                <file src="src/radios/docs/demo.html" />

-                <file src="src/radios/docs/demo.js" />

-               </example>

-            </section>

- */

-angular.module('b2b.att.radios', ['b2b.att.utilities'])

-.directive('b2bRadioGroupAccessibility', ['$timeout', 'b2bUserAgent', function($timeout, b2bUserAgent) {

-    return {

-        restrict: "A",

-        scope: {

-            refreshRadioGroup: "=",

-        },

-        link: function(scope, ele, attr) {

-

-            var roleRadioElement, radioProductSelectElement, radioInputTypeElement;

-

-            $timeout(calculateNumberOfRadio);

-

-            scope.$watch('refreshRadioGroup', function(value) {

-                if (value === true) {

-                    addingRoleAttribute();

-                    $timeout(calculateNumberOfRadio);

-                    scope.refreshRadioGroup = false;

-                } else {

-                    return;

-                }

-            })

-

-

-            function calculateNumberOfRadio() {

-                roleRadioElement = ele[0].querySelectorAll('[role="radio"]');

-

-                radioProductSelectElement = ele[0].querySelectorAll('[role="radiogroup"] li.radio-box');

-

-                radioInputTypeElement = ele[0].querySelectorAll('input[type="radio"]');

-

-                for (var i = 0; i < radioInputTypeElement.length; i++) {

-                    var isChecked = radioInputTypeElement[i].checked ? 'true' : 'false';

-                    var isDisabled = radioInputTypeElement[i].disabled ? 'true' : 'false';

-                    var numOfx = i + 1 + ' of ' + radioInputTypeElement.length;

-                    angular.element(roleRadioElement[i]).attr({

-                        'aria-checked': isChecked,

-                        'aria-disabled': isDisabled,

-                        'data-opNum': numOfx

-                    });

-                    if (b2bUserAgent.notMobile()) {

-                        angular.element(roleRadioElement[i]).removeAttr("role");

-                    }

-

-                    if (radioProductSelectElement.length) {

-                        isChecked === 'true' ? angular.element(radioProductSelectElement[i]).addClass('active') : angular.element(radioProductSelectElement[i]).removeClass('active');

-                    }

-

-                    if (/Android/i.test(navigator.userAgent)) {

-                        angular.element(roleRadioElement[i]).append('<span class="hidden-spoken">. ' + numOfx + '.</span>');

-                    }

-

-

-                    angular.element(radioInputTypeElement[i]).bind('click', radioStateChangeonClick);

-

-                }

-            }

-

-            function addingRoleAttribute() {

-                for (var i = 0; i < radioInputTypeElement.length; i++) {

-                    if (b2bUserAgent.notMobile()) {

-                        angular.element(roleRadioElement[i]).attr("role", "radio");

-                    }

-                }

-            }

-

-            function radioStateChangeonClick() {

-                for (var i = 0; i < radioInputTypeElement.length; i++) {

-                    var isChecked = radioInputTypeElement[i].checked ? 'true' : 'false';

-                    var isDisabled = radioInputTypeElement[i].disabled ? 'true' : 'false';

-                    if (radioProductSelectElement.length) {

-                        isChecked === 'true' ? angular.element(radioProductSelectElement[i]).addClass('active') : angular.element(radioProductSelectElement[i]).removeClass('active');

-                    }

-                    angular.element(roleRadioElement[i]).attr({

-                        'aria-checked': isChecked,

-                        'aria-disabled': isDisabled

-                    });

-                }

-

-            }

-        }

-    }

-

-}]);

-

-/**

- * @ngdoc directive

- * @name Forms.att:searchField

- *

- * @description

- *  <file src="src/searchField/docs/readme.md" />

- *

- * @usage

- *  <div b2b-search-field dropdown-list="listdata" on-click-callback="clickFn(value)" class="span12" input-model='typedString' config-obj='keyConfigObj'></div>

- *

- * @example

- <section id="code">

-    <example module="b2b.att">

-    <file src="src/searchField/docs/demo.html" />

-    <file src="src/searchField/docs/demo.js" />

-    </example>

-</section>

- */

-

-angular.module('b2b.att.searchField', ['b2b.att.utilities', 'b2b.att.position'])

-    .filter('b2bFilterInput', [function() {

-        return function(list, str, keyArray, displayListKey, isContainsSearch, searchSeperator) {

-            var res = [];

-            var searchLabel;

-            var searchCondition;

-            var conditionCheck = function(searchSeperator, listItem, displayListKey, splitString) {

-                var displayTitle = null;

-                if (splitString) {

-                    for (var i = 0; i < displayListKey.length; i++) {

-                        if (i <= 0) {

-                            displayTitle = listItem[displayListKey[i]].toLowerCase().indexOf(splitString[i].toLowerCase()) > -1;

-                        } else {

-                            displayTitle = (splitString[i]) ? displayTitle && listItem[displayListKey[i]].toLowerCase().indexOf(splitString[i].toLowerCase().trim()) > -1 : displayTitle;

-                        }

-                    }

-                } else {

-                    angular.forEach(displayListKey, function(value) {

-                        if (!displayTitle) {

-                            displayTitle = listItem[value];

-                        } else {

-                            displayTitle = displayTitle + (listItem[value] ? searchSeperator + ' ' + listItem[value] : '');

-                        }

-                    });

-                }

-                return displayTitle;

-            }

-            angular.forEach(list, function(listItem) {

-                var splitString = str.indexOf(searchSeperator) > -1 ? str.split(searchSeperator) : false;

-                var displayList = conditionCheck(searchSeperator, listItem, displayListKey, splitString)

-                for (var i = 0; i < keyArray.length; i++) {

-                    searchLabel = keyArray[i];

-                    if (listItem[searchLabel]) {

-                        if (isContainsSearch) {

-                            var displaySearchList = listItem[searchLabel].toLowerCase().indexOf(str.toLowerCase()) > -1;

-                            if (splitString.length > 1) {

-                                displaySearchList = (splitString.length <= keyArray.length) ? displayList : false;

-                            }

-                            searchCondition = displaySearchList;

-                        } else {

-                            searchCondition = listItem[searchLabel].match(new RegExp('^' + str, 'gi'));

-                        }

-                        if (searchCondition) {

-                            res.push({

-                                'title': conditionCheck(searchSeperator, listItem, displayListKey),

-                                'valueObj': listItem

-                            });

-                            break;

-                        }

-                    }

-                }

-            });

-            return res;

-        };

-    }]).directive('b2bSearchField', ['$filter', 'b2bFilterInputFilter', 'keymap', '$documentBind', '$isElement', '$document', 'events', '$timeout', function($filter, b2bFilterInput, keymap, $documentBind, $isElement, $document, events, $timeout) {

-        return {

-            restrict: 'A',

-            scope: {

-                dataList: '=dropdownList',

-                onClickCallback: '&',

-                inputModel: '=',

-                configObj: '=',

-                objModel: '=',

-                inputDeny: '=?',

-                disabled: '=?'

-            },

-            replace: true,

-            templateUrl: 'b2bTemplate/searchField/searchField.html',

-            controller: ['$scope', function($scope) {

-                this.searchKeyArray = [];

-                if ($scope.configObj.searchKeys) {

-                    this.searchKeyArray = $scope.configObj.searchKeys;

-                }

-                if (angular.isUndefined($scope.disabled)) {

-                    $scope.disabled = false;

-                }

-                this.triggerInput = function(searchString) {

-                    $scope.originalInputModel = searchString;

-                    if (searchString === '') {

-                        $scope.currentIndex = -1;

-                        $scope.filterList = [];

-                        $scope.showListFlag = false;

-                    } else if (searchString !== '' && !$scope.isFilterEnabled) {

-                        $scope.filterList = $filter('b2bFilterInput')($scope.dataList, searchString, this.searchKeyArray, $scope.configObj.displayListDataKey, $scope.configObj.isContainsSearch, $scope.configObj.searchSeperator);

-                        $scope.showListFlag = true;

-                    }

-                };

-                this.denyRegex = function() {

-                    return $scope.inputDeny;

-                };

-            }],

-            link: function(scope, elem) {

-                scope.isFilterEnabled = false;

-                scope.showListFlag = false;

-                scope.currentIndex = -1;

-                scope.setCurrentIdx = function(idx) {

-                    scope.currentIndex = idx;

-                    if (idx > -1) {

-                        scope.inputModel = scope.filterList[idx].title;

-                        scope.objModel = scope.filterList[idx];

-                    }

-                };

-                scope.isActive = function(index, dropdownLength) {

-                    scope.dropdownLength = dropdownLength;

-                    return scope.currentIndex === index;

-                };

-                scope.selectItem = function(idx) {

-                    scope.setCurrentIdx(idx);

-                    scope.onClickCallback({

-                        value: scope.inputModel,

-                        objValue: scope.objModel

-                    });

-                    scope.showListFlag = false;

-                    $timeout(function() {

-                        elem.find('div').find('input')[0].focus();

-                    }, 150);

-                };

-                scope.startSearch = function() {

-                    scope.onClickCallback({

-                        value: scope.inputModel,

-                        objValue: scope.objModel

-                    });

-                };

-                scope.selectPrev = function() {

-                    if (scope.currentIndex > 0 && scope.filterList.length > 0) {

-                        scope.currentIndex = scope.currentIndex - 1;

-                        scope.setCurrentIdx(scope.currentIndex);

-                    } else if (scope.currentIndex === 0) {

-                        scope.currentIndex = scope.currentIndex - 1;

-                        scope.inputModel = scope.originalInputModel;

-                        scope.isFilterEnabled = true;

-                    }

-                };

-                scope.selectNext = function() {

-                    if (scope.currentIndex < scope.configObj.noOfItemsDisplay - 1) {

-                        if (scope.currentIndex < scope.filterList.length - 1) {

-                            scope.currentIndex = scope.currentIndex + 1;

-                            scope.setCurrentIdx(scope.currentIndex);

-                        }

-                    }

-                };

-                scope.selectCurrent = function() {

-                    scope.selectItem(scope.currentIndex);

-                };

-                scope.selectionIndex = function(e) {

-                    switch (e.keyCode) {

-                        case keymap.KEY.DOWN:

-                            events.preventDefault(e);

-                            scope.isFilterEnabled = true;

-                            scope.selectNext();

-                            break;

-                        case keymap.KEY.UP:

-                            events.preventDefault(e);

-                            scope.isFilterEnabled = true;

-                            scope.selectPrev();

-                            break;

-                        case keymap.KEY.ENTER:

-                            events.preventDefault(e);

-                            scope.isFilterEnabled = true;

-                            scope.selectCurrent();

-                            break;

-                        case keymap.KEY.ESC:

-                            events.preventDefault(e);

-                            scope.isFilterEnabled = false;

-                            scope.showListFlag = false;

-                            scope.inputModel = '';

-                            break;

-                        default:

-                            scope.isFilterEnabled = false;

-                            break;

-                    }

-                    if (elem[0].querySelector('.filtercontainer')) {

-                        elem[0].querySelector('.filtercontainer').scrollTop = (scope.currentIndex - 1) * 35;

-                    }

-                };

-                scope.$watch('filterList', function(newVal, oldVal) {

-                    if (newVal !== oldVal) {

-                        scope.currentIndex = -1;

-                    }

-                });

-                scope.blurInput = function() {

-                    $timeout(function() {

-                        scope.showListFlag = false;

-                    }, 150);

-                };

-                var outsideClick = function(e) {

-                    var isElement = $isElement(angular.element(e.target), elem.find('ul').eq(0), $document);

-                    if (!isElement && document.activeElement.tagName.toLowerCase() !== 'input') {

-                        scope.showListFlag = false;

-                        scope.$apply();

-                    }

-                };

-                $documentBind.click('showListFlag', outsideClick, scope);

-            }

-        };

-    }])

-    .directive('b2bSearchInput', [function() {

-        return {

-            restrict: 'A',

-            require: ['ngModel', '^b2bSearchField'],

-            link: function(scope, elem, attr, ctrl) {

-                var ngModelCtrl = ctrl[0];

-                var attSearchBarCtrl = ctrl[1];

-                var REGEX = ctrl[1].denyRegex();

-                var parser = function(viewValue) {

-                    attSearchBarCtrl.triggerInput(viewValue);

-                    return viewValue;

-                };

-                ngModelCtrl.$parsers.push(parser);

-

-                if (REGEX !== undefined || REGEX !== '') {

-                    elem.bind('input', function() {

-                        var inputString = ngModelCtrl.$viewValue && ngModelCtrl.$viewValue.replace(REGEX, '');

-                        if (inputString !== ngModelCtrl.$viewValue) {

-                            ngModelCtrl.$setViewValue(inputString);

-                            ngModelCtrl.$render();

-                            scope.$apply();

-                        }

-                    });

-                }

-            }

-        };

-    }]);

-

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:Seek bar

- *

- * @description

- *  <file src="src/seekBar/docs/readme.md" />

- *

- * @usage

- *  Horizontal Seek Bar

- *  <b2b-seek-bar min="0" max="400" step="1" skip-interval="1" data-ng-model="horizontalSeekBarVal" style="width:180px; margin: auto;" on-drag-end="onDragEnd()" on-drag-init="onDragStart()"></b2b-seek-bar>

-

- *  Vertical Seek Bar

- *  <b2b-seek-bar min="0" max="1" step="0.01" skip-interval="0.1" vertical data-ng-model="verticalSeekBarVal" style=" width: 6px; height: 180px; margin: auto;"></b2b-seek-bar>

- *

- * @example

-    <section id="code">   

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/seekBar/docs/demo.html" />

-            <file src="src/seekBar/docs/demo.js" />

-        </example>

-    </section>

- */

-

-angular.module('b2b.att.seekBar', ['b2b.att.utilities','b2b.att.position'])

-        .constant('b2bSeekBarConfig', {

-            'min': 0,

-            'max': 100,

-            'step': 1,

-            'skipInterval': 1

-        })

-        .directive('b2bSeekBar', ['$documentBind', 'events', 'b2bSeekBarConfig', 'keymap', '$compile', function($documentBind, events, b2bSeekBarConfig, keymap, $compile) {

-                return {

-                    restrict: 'AE',

-                    replace: true,

-                    require: 'ngModel',

-                    templateUrl: 'b2bTemplate/seekBar/seekBar.html',

-                    scope: {

-                        onDragEnd: '&?',

-                        onDragInit: '&?'

-                    },

-                    link: function(scope, elm, attr, ngModelCtrl) {

-                        scope.isDragging = false;

-                        scope.verticalSeekBar = false;

-                        var min;

-                        var max;

-                        var step = b2bSeekBarConfig.step;

-                        var skipInterval = b2bSeekBarConfig.skipInterval;

-                        var knob = angular.element(elm[0].querySelector('.b2b-seek-bar-knob-container'));

-                        var seekBarKnob = angular.element(knob[0].querySelector('.b2b-seek-bar-knob'));

-                        var trackContainer = angular.element(elm[0].querySelector('.b2b-seek-bar-track-container'));

-                        var trackFill = angular.element(elm[0].querySelector('.b2b-seek-bar-track-fill'));

-                        var trackContainerRect = {};

-                        var axisPosition;

-                        var trackFillOrderPositioning;

-

-                        if (angular.isDefined(attr.vertical)) {

-                            scope.verticalSeekBar = true;

-                            axisPosition = "clientY";

-                        }

-                        else {

-                            scope.verticalSeekBar = false;

-                            axisPosition = "clientX";

-                        }

-                        var getValidStep = function(val) {

-                            val = parseFloat(val);

-                            // in case $modelValue came in string number

-                            if (angular.isNumber(val)) {

-                                val = Math.round((val - min) / step) * step + min;

-                                return Math.round(val * 1000) / 1000;

-                            }

-                        };

-

-                        var getPositionToPercent = function(x) {

-                            if (scope.verticalSeekBar) {

-                                return Math.max(0, Math.min(1, (trackContainerRect.bottom - x) / (trackFillOrderPositioning)));

-                            }

-                            else {

-                                return Math.max(0, Math.min(1, (x - trackContainerRect.left) / (trackFillOrderPositioning)));

-                            }

-                        };

-

-                        var getPercentToValue = function(percent) {

-                            return (min + percent * (max - min));

-                        };

-

-                        var getValueToPercent = function(val) {

-                            return (val - min) / (max - min);

-                        };

-

-                        var getValidMinMax = function(val) {

-                            return Math.max(min, Math.min(max, val));

-                        };

-

-                        var updateTrackContainerRect = function() {

-                            trackContainerRect = trackContainer[0].getBoundingClientRect();

-                            if (scope.verticalSeekBar) {

-                                if (!trackContainerRect.height) {

-                                    trackFillOrderPositioning = trackContainer[0].scrollHeight;

-                                } else {

-                                    trackFillOrderPositioning = trackContainerRect.height;

-                                }

-                            }

-                            else {

-                                if (!trackContainerRect.width) {

-                                    trackFillOrderPositioning = trackContainer[0].scrollWidth;

-                                } else {

-                                    trackFillOrderPositioning = trackContainerRect.width;

-                                }

-

-                            }

-

-                        };

-

-                        var updateKnobPosition = function(percent) {

-                            var percentStr = (percent * 100) + '%';

-                            if (scope.verticalSeekBar) {

-                                knob.css('bottom', percentStr);

-                                trackFill.css('height', percentStr);

-                            }

-                            else {

-                                knob.css('left', percentStr);

-                                trackFill.css('width', percentStr);

-                            }

-                        };

-

-                        var modelRenderer = function() {

-                            if (isNaN(ngModelCtrl.$viewValue)) {

-                                ngModelCtrl.$viewValue = ngModelCtrl.$modelValue || min;

-                            }

-

-                            var viewVal = ngModelCtrl.$viewValue;

-                            scope.currentModelValue = viewVal;

-

-                            //wait for min, max and step to be set then only update UI to avoid NaN on percent calculation

-                            if ((min || min === 0) && max && step) {

-                                updateKnobPosition(getValueToPercent(viewVal));

-                            }

-                        };

-

-                        var setModelValue = function(val) {

-                            scope.currentModelValue = getValidMinMax(getValidStep(val));

-                            ngModelCtrl.$setViewValue(scope.currentModelValue);

-                        };

-

-                        var updateMin = function(val) {

-                            min = parseFloat(val);

-                            if(isNaN(min)){

-                               min = b2bSeekBarConfig.min; 

-                            }

-                            modelRenderer();

-                        };

-

-                        var updateMax = function(val) {

-                            max = parseFloat(val);

-                            if(isNaN(max)){

-                               max = b2bSeekBarConfig.max; 

-                            }

-                            modelRenderer();

-                        };

-

-                        var updateStep = function(val) {

-                            step = parseFloat(val);

-                            if (!attr['skipInterval']) {

-                                skipInterval = step;

-                            }

-                        };

-

-                        var updateSkipInterval = function(val) {

-                            skipInterval = step * Math.ceil(val / (step!==0?step:1));

-                        };

-

-                        angular.isDefined(attr.min) ? attr.$observe('min', updateMin) : updateMin(b2bSeekBarConfig.min);

-                        angular.isDefined(attr.max) ? attr.$observe('max', updateMax) : updateMax(b2bSeekBarConfig.max);

-                        if (angular.isDefined(attr.step)) {

-                            attr.$observe('step', updateStep);

-                        }

-                        if (angular.isDefined(attr.skipInterval)) {

-                            attr.$observe('skipInterval', updateSkipInterval);

-                        }

-                        scope.currentModelValue = getValidMinMax(getValidStep(min));

-                        var onMouseDown = function(e) {

-                            switch (e.which) {

-                                case 1:

-                                    // left mouse button

-                                    break;

-                                case 2:

-                                case 3:

-                                    // right or middle mouse button

-                                    return;

-                            }

-                            ;

-

-                            scope.isDragging = true;

-                            seekBarKnob[0].focus();

-                            updateTrackContainerRect();

-                            if (attr['onDragInit']) {

-                                scope.onDragInit();

-                            }

-                            events.stopPropagation(e);

-                            events.preventDefault(e);

-                             scope.$apply(function() {

-                                setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));

-                            });

-                        };

-

-                        var onMouseUp = function() {

-

-                            if (attr['onDragEnd']) {

-                                scope.onDragEnd();

-                            }

-                            scope.isDragging = false;

-                            scope.$digest();

-                        };

-

-                        var onMouseMove = function(e) {

-                            if (scope.isDragging) {

-                                events.stopPropagation(e);

-                                events.preventDefault(e);

-

-                                scope.$apply(function() {

-                                    setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));

-                                });

-                            }

-                        };

-

-                        function onKeyDown(e) {

-                            if (!(e.keyCode)) {

-                                e.keyCode = e.which;

-                            }

-                            var updateStep;

-                            switch (e.keyCode) {

-                                case keymap.KEY.LEFT:

-                                    if (!scope.verticalSeekBar) {

-                                        updateStep = -skipInterval;

-                                    }

-                                    break;

-                                case keymap.KEY.RIGHT:

-                                    if (!scope.verticalSeekBar) {

-                                        updateStep = skipInterval;

-                                    }

-                                    break;

-                                case keymap.KEY.UP:

-                                    if (scope.verticalSeekBar) {

-                                        updateStep = skipInterval;

-                                    }

-                                    break;

-                                case keymap.KEY.DOWN:

-                                    if (scope.verticalSeekBar) {

-                                        updateStep = -skipInterval;

-                                    }

-                                    break;

-                                default:

-                                    return;

-                            }

-

-                            if (updateStep) {

-                                events.stopPropagation(e);

-                                events.preventDefault(e);

-                                scope.$apply(function() {

-                                    setModelValue(ngModelCtrl.$viewValue + updateStep);

-                                });

-                                if (attr['onDragEnd']) {

-                                scope.onDragEnd();

-                            }

-                            }

-                        }

-

-                        elm.on('keydown', onKeyDown);

-                        elm.on('mousedown', onMouseDown);

-

-                        $documentBind.event('mousemove', 'isDragging', onMouseMove, scope, true, 0);

-                        $documentBind.event('mouseup', 'isDragging', onMouseUp, scope, true, 0);

-

-                        ngModelCtrl.$render = function() {

-                            if (!scope.isDragging) {

-                                modelRenderer();

-                            }

-                        };

-                        ngModelCtrl.$viewChangeListeners.push(modelRenderer);

-                        ngModelCtrl.$formatters.push(getValidMinMax);

-                        ngModelCtrl.$formatters.push(getValidStep);

-                    }

-                };

-            }]);

-/**

- * @ngdoc directive

- * @name Forms.att:selectorModule

- *

- * @description

- *  <file src="src/selectorModule/docs/readme.md" />

- *

- * @usage

- * <select name="myNameBig" type="large" b2b-dropdown ng-model="Controller Variable here">

- *   <option b2b-dropdown-list option-repeat="option data here" imgsrc="image path" value="value">List Text</option>

- * </select>

- *

- * <select name="myNameBig" type="large" b2b-dropdown ng-model="Controller Variable here">

- * <option b2b-dropdown-list option-repeat="option data here" imgsrc="image path" value="value">List Text</option>

- * </select>

- *

- * <select name="myNameBig" b2b-dropdown ng-model="Controller Variable here">

- *   <optgroup b2b-dropdown-group label="Group Label here">

- *     <option b2b-dropdown-list option-repeat="option data here" imgsrc="image path" value="value">List Text</option>

- *   </optgroup>

- * </select>

- *

- *  @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/selectorModule/docs/demo.html" />

-            <file src="src/selectorModule/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.selectorModule', ['b2b.att.dropdowns']);

-/**

- * @ngdoc directive

- * @name Layouts.att:separators

- *

- * @description

- *  <file src="src/separators/docs/readme.md" />

- *

- * @usage

-

- *

- * @example

- *  <section id="code">   

- <b>HTML + AngularJS</b>

- <example module="b2b.att">

- <file src="src/separators/docs/demo.html" />

- <file src="src/separators/docs/demo.js" />

- </example>

- </section>

- *

- */

-

-angular.module('b2b.att.separators', []);

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:slider

- *

- * @description

- *  <file src="src/slider/docs/readme.md" />

- *

- * @usage

- *  <b2b-slider min="0" max="400" step="1" no-aria-label skip-interval="1" ng-model="horizontalSliderVal" style="width:180px; margin: auto;" on-drag-end="onDragEnd()" on-drag-init="onDragStart()" label-id="slider-label" post-aria-label="postAriaLabel"></b2b-slider>

- *

- * @example

-    <section id="code">   

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/slider/docs/demo.html" />

-            <file src="src/slider/docs/demo.js" />

-        </example>

-    </section>

- */

-

-angular.module('b2b.att.slider', ['b2b.att.utilities'])

-        .constant('SliderConfig', {

-            'min': 0,

-            'max': 100,

-            'step': 1,

-            'skipInterval': 1

-        })

-        .directive('b2bSlider', ['$documentBind', 'SliderConfig', 'keymap', '$compile', '$log', function($documentBind, SliderConfig, keymap, $compile, $log) {

-                return {

-                    restrict: 'AE',

-                    replace: true,

-                    require: 'ngModel',

-                    templateUrl: 'b2bTemplate/slider/slider.html',

-                    scope: {

-                        onDragEnd: '&?',

-                        onDragInit: '&?',

-                        trackFillColor: '=?',

-                        preAriaLabel: '=?',

-                        postAriaLabel: '=?',

-                        onRenderEnd: '&?',

-                        sliderSnapPoints: '=?',

-                        customAriaLabel: '=?',

-                        labelId: '@?'

-                    },

-                    link: function(scope, elm, attr, ngModelCtrl) {

-                        scope.isDragging = false;

-                        scope.verticalSlider = false;

-                        var min;

-                        var max;

-                        var step = SliderConfig.step;

-                        var skipInterval = SliderConfig.skipInterval;

-                        var knob = angular.element(elm[0].querySelector('.slider-knob-container'));

-                        var sliderKnob = angular.element(knob[0].querySelector('.slider-knob'));

-                        var trackContainer = angular.element(elm[0].querySelector('.slider-track-container'));

-                        var trackFill = angular.element(elm[0].querySelector('.slider-track-fill'));

-                        var trackContainerRect = {};

-                        var axisPosition = "clientX";

-                        var trackFillOrderPositioning;

-

-                        //Forcefully disabling the vertical Slider code.

-                        if (angular.isDefined(attr.vertical)) {

-                            scope.verticalSlider = true;

-                            axisPosition = "clientY";

-                        }

-

-                        if (angular.isDefined(scope.noAriaLabel) && scope.noAriaLabel !== '') {

-                            $log.warn('no-aria-label has been deprecated. This will be removed in v0.6.0.');

-                        }

-                        if (angular.isDefined(scope.preAriaLabel) && scope.preAriaLabel !== '') {

-                            $log.warn('pre-aria-label has been deprecated. Please use label-id instead. This will be removed in v0.6.0.');

-                        }

-                        if (angular.isDefined(scope.customAriaLabel) && scope.customAriaLabel !== '') {

-                            $log.warn('custom-aria-label has been deprecated. Please use label-id and post-aria-label instead. This will be removed in v0.6.0.');

-                        }

-

-                        var binarySearchNearest = function (num, arr) {

-                            var mid;

-                            var lo = 0;

-                            var hi = arr.length - 1;

-                            

-                            while (hi - lo > 1) {

-                                mid = Math.floor((lo + hi) / 2);

-                                if (arr[mid] < num) {

-                                    lo = mid;

-                                } else {

-                                    hi = mid;

-                                }

-                            }

-                            if (num - arr[lo] < arr[hi] - num) {

-                                return arr[lo];

-                            }

-                            return arr[hi];

-                        };

-                        

-                        var getValidStep = function(val) {

-                            val = parseFloat(val);

-                            // in case $modelValue came in string number

-                            if (!isNaN(val)) {

-                                

-                                if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {

-                                    val = binarySearchNearest(val, scope.sliderSnapPoints);

-                                }

-                                else {

-                                    val = Math.round((val - min) / step) * step + min;

-                                }

-                                

-                                return Math.round(val * 1000) / 1000;

-                            }

-                        };

-

-                        var getPositionToPercent = function(x) {

-                            if (scope.verticalSlider) {

-                                return Math.max(0, Math.min(1, (trackContainerRect.bottom - x) / (trackFillOrderPositioning)));

-                            }

-                            else {

-                                return Math.max(0, Math.min(1, (x - trackContainerRect.left) / (trackFillOrderPositioning)));

-                            }

-                        };

-

-                        var getPercentToValue = function(percent) {

-                            return (min + percent * (max - min));

-                        };

-

-                        var getValueToPercent = function(val) {

-                            return (val - min) / (max - min);

-                        };

-

-                        var getValidMinMax = function(val) {

-                            return Math.max(min, Math.min(max, val));

-                        };

-

-                        var updateTrackContainerRect = function() {

-                            trackContainerRect = trackContainer[0].getBoundingClientRect();

-                            if (scope.verticalSlider) {

-                                if (!trackContainerRect.height) {

-                                    trackFillOrderPositioning = trackContainer[0].scrollHeight;

-                                } else {

-                                    trackFillOrderPositioning = trackContainerRect.height;

-                                }

-                            }

-                            else {

-                                if (!trackContainerRect.width) {

-                                    trackFillOrderPositioning = trackContainer[0].scrollWidth;

-                                } else {

-                                    trackFillOrderPositioning = trackContainerRect.width;

-                                }

-

-                            }

-

-                        };

-

-                        var updateKnobPosition = function(percent) {

-                            var percentStr = (percent * 100) + '%';

-                            if (scope.verticalSlider) {

-                                knob.css('bottom', percentStr);

-                                trackFill.css('height', percentStr);

-                            }

-                            else {

-                                knob.css('left', percentStr);

-                                trackFill.css('width', percentStr);

-                            }

-                        };

-

-                        var modelRenderer = function() {

-

-                            if(attr['disabled']){

-                                return;

-                            }

-

-                            if (isNaN(ngModelCtrl.$viewValue)) {

-                                ngModelCtrl.$viewValue = ngModelCtrl.$modelValue || min;

-                            }

-

-                            var viewVal = ngModelCtrl.$viewValue;

-                            scope.currentModelValue = viewVal;

-

-                            //wait for min, max and step to be set then only update UI to avoid NaN on percent calculation

-                            if ((min || min === 0) && max && step) {

-                                updateKnobPosition(getValueToPercent(viewVal));

-                            }

-                        };

-

-                        var setModelValue = function(val) {

-                            scope.currentModelValue = getValidMinMax(getValidStep(val));

-                            ngModelCtrl.$setViewValue(scope.currentModelValue);

-                        };

-

-                        var updateMin = function(val) {

-                            min = parseFloat(val);

-                            if(isNaN(min)){

-                               min = SliderConfig.min; 

-                            }

-                            scope.min = min;

-                            modelRenderer();

-                        };

-

-                        var updateMax = function(val) {

-                            max = parseFloat(val);

-                            if(isNaN(max)){

-                               max = SliderConfig.max; 

-                            }

-                            scope.max = max;

-                            modelRenderer();

-                        };

-

-                        var updateStep = function(val) {

-                            step = parseFloat(val);

-                            if (!attr['skipInterval']) {

-                                skipInterval = step;

-                            }

-                        };

-

-                        var updateSkipInterval = function(val) {

-                            skipInterval = step * Math.ceil(val / (step!==0?step:1));

-                        };

-

-                        angular.isDefined(attr.min) ? attr.$observe('min', updateMin) : updateMin(SliderConfig.min);

-                        angular.isDefined(attr.max) ? attr.$observe('max', updateMax) : updateMax(SliderConfig.max);

-                        if (angular.isDefined(attr.step)) {

-                            attr.$observe('step', updateStep);

-                        }

-                        if (angular.isDefined(attr.skipInterval)) {

-                            attr.$observe('skipInterval', updateSkipInterval);

-                        }

-                        scope.currentModelValue = getValidMinMax(getValidStep(min));

-                        var onMouseDown = function(e) {

-

-                            if(attr['disabled']){

-                                return;

-                            }

-

-                            switch (e.which) {

-                                case 1:

-                                    // left mouse button

-                                    break;

-                                case 2:

-                                case 3:

-                                    // right or middle mouse button

-                                    return;

-                            }

-

-                            scope.isDragging = true;

-                            sliderKnob[0].focus();

-                            updateTrackContainerRect();

-                            if (attr['onDragInit']) {

-                                scope.onDragInit();

-                            }

-                            e.stopPropagation();

-                            e.preventDefault();

-                             scope.$apply(function() {

-                                setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));

-                            });

-                        };

-

-                        var onMouseUp = function() {

-

-                            if (attr['onDragEnd']) {

-                                scope.onDragEnd();

-                            }

-                            scope.isDragging = false;

-                            scope.$digest();

-                        };

-

-                        var onMouseMove = function(e) {

-                            if (scope.isDragging) {

-                                e.stopPropagation();

-                                e.preventDefault();

-

-                                scope.$apply(function() {

-                                    setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));

-                                });

-                            }

-                        };

-

-                        function onKeyDown(e) {

-                            if (!(e.keyCode)) {

-                                e.keyCode = e.which;

-                            }

-                            var updateStep;

-                            switch (e.keyCode) {

-                                case keymap.KEY.DOWN:

-                                case keymap.KEY.LEFT:

-                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {

-                                        var currentIndex = scope.sliderSnapPoints.indexOf(ngModelCtrl.$viewValue);

-                                        if (currentIndex > 0) {

-                                            currentIndex--;

-                                        }

-                                        updateStep = scope.sliderSnapPoints[currentIndex];

-                                    }

-                                    else {

-                                        updateStep = ngModelCtrl.$viewValue - skipInterval;

-                                    }

-                                    break;

-                                case keymap.KEY.UP:

-                                case keymap.KEY.RIGHT:

-                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {

-                                        var currentIndex = scope.sliderSnapPoints.indexOf(ngModelCtrl.$viewValue);

-                                        if (currentIndex < scope.sliderSnapPoints.length-1) {

-                                            currentIndex++;

-                                        }

-                                        updateStep = scope.sliderSnapPoints[currentIndex];

-                                    }

-                                    else {

-                                        updateStep = ngModelCtrl.$viewValue + skipInterval;

-                                    }

-                                    break;

-                                case keymap.KEY.END:

-                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {

-                                        currentIndex = scope.sliderSnapPoints.length-1;

-                                        updateStep = scope.sliderSnapPoints[currentIndex];

-                                    } else {

-                                        setModelValue(scope.max);

-                                    }

-                                    e.preventDefault();

-                                    e.stopPropagation();

-                                    break;

-                                case keymap.KEY.HOME:

-                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {

-                                        currentIndex = 0;

-                                        updateStep = scope.sliderSnapPoints[currentIndex];

-                                    } else {

-                                        setModelValue(scope.min);

-                                    }

-                                    e.preventDefault();

-                                    e.stopPropagation();

-                                    break;

-                                default:

-                                    return;

-                            }

-

-                            if (angular.isNumber(updateStep) && !attr['disabled']) {

-                                e.stopPropagation();

-                                e.preventDefault();

-                                scope.$apply(function() {

-                                    setModelValue(updateStep);

-                                });

-                                if (attr['onDragEnd']) {

-                                    scope.onDragEnd();

-                                }

-                            }

-                        }

-

-                        elm.on('keydown', onKeyDown);

-                        elm.on('mousedown', onMouseDown);

-

-                        $documentBind.event('mousemove', 'isDragging', onMouseMove, scope, true, 0);

-                        $documentBind.event('mouseup', 'isDragging', onMouseUp, scope, true, 0);

-

-                        attr.$observe('disabled', function (disabled) {

-                            if (disabled) {

-                                sliderKnob.removeAttr('tabindex');

-                            } else {

-                                sliderKnob.attr('tabindex', '0');

-                                disabled = false;

-                            }

-

-                            elm.toggleClass("slider-disabled", disabled);

-

-                            if (angular.isDefined(attr.hideDisabledKnob)) {

-                                scope.hideKnob = disabled;

-                            }

-                        });

-

-                        ngModelCtrl.$render = function() {

-                            if (!scope.isDragging) {

-                                modelRenderer();

-                                if (attr['onRenderEnd'] && !attr['disabled']) {

-                                    scope.onRenderEnd({currentModelValue: scope.currentModelValue});

-                                }

-                            }

-                        };

-                        ngModelCtrl.$viewChangeListeners.push(modelRenderer);

-                        ngModelCtrl.$formatters.push(getValidMinMax);

-                        ngModelCtrl.$formatters.push(getValidStep);

-                    }

-                };

-            }]);

-/**

- * @ngdoc directive

- * @name Forms.att:spinButton

- *

- * @param {String} spin-button-id - An ID for the input field

- * @param {Integer} min - Minimum value for the input

- * @param {Integer} max - Maximum value for the input

- * @param {Integer} step - Value by which input field increments or decrements on up/down arrow keys

- * @param {Integer} page-step - Value by which input field increments or decrements on page up/down keys

- * @param {boolean} input-model-key - Default value for input field

- * @param {boolean} disabled-flag - A boolean that triggers directive once the min or max value has reached

- *

- * @description

- *  <file src="src/spinButton/docs/readme.md" />

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/spinButton/docs/demo.html" />

-            <file src="src/spinButton/docs/demo.js" />

-       </example>

-    </section>

- * 

- */

-angular.module('b2b.att.spinButton', ['b2b.att.utilities'])

-    .constant('b2bSpinButtonConfig', {

-        min: 1,

-        max: 10,

-        step: 1,

-        pageStep: 10,

-        inputModelKey: 'value',

-        disabledFlag: false

-    })

-    .directive('b2bSpinButton', ['keymap', 'b2bSpinButtonConfig', 'b2bUserAgent', function (keymap, b2bSpinButtonConfig, userAgent) {

-        return {

-            restrict: 'EA',

-            require: '?ngModel',

-            transclude: false,

-            replace: true,

-            scope: {

-                min: '=min',

-                max: '=max',

-                step: '=step',

-                pageStep: '=pageStep',

-                spinButtonId: '@',

-                inputValue: '=ngModel',

-                inputModelKey: '@',

-                disabledFlag: "=?"

-            },

-            templateUrl: 'b2bTemplate/spinButton/spinButton.html',

-            controller: ['$scope', '$element', '$attrs', function (scope, element, attrs) {

-

-                scope.isMobile = userAgent.isMobile();

-                scope.notMobile = userAgent.notMobile();

-

-                scope.min = attrs.min ? scope.min : b2bSpinButtonConfig.min;

-                scope.max = attrs.max ? scope.max : b2bSpinButtonConfig.max;

-                scope.step = attrs.step ? scope.step : b2bSpinButtonConfig.step;

-                scope.pageStep = attrs.pageStep ? scope.pageStep : b2bSpinButtonConfig.pageStep;

-                scope.inputModelKey = attrs.inputModelKey ? scope.inputModelKey : b2bSpinButtonConfig.inputModelKey;

-                scope.disabledFlag = attrs.disabledFlag ? scope.disabledFlag : b2bSpinButtonConfig.disabledFlag;

-                

-                if (scope.min < 0) {

-                    scope.min = 0;

-                }

-                if (scope.max > 999) {

-                    scope.max = 999;

-                }

-

-                scope.isPlusDisabled = function () {

-                    return (scope.disabledFlag || scope.inputValue[scope.inputModelKey] >= scope.max);

-                };

-                scope.isMinusDisabled = function () {

-                    return (scope.disabledFlag || scope.inputValue[scope.inputModelKey] <= scope.min);

-                };

-

-                scope.getValidateInputValue = function (value) {

-                    if (value <= scope.min) {

-                        return scope.min;

-                    } else if (value >= scope.max) {

-                        return scope.max;

-                    } else {

-                        return value;

-                    }

-                };

-

-                scope.plus = function () {

-                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) + scope.step);

-                };

-                scope.minus = function () {

-                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) - scope.step);

-                };

-                scope.pagePlus = function () {

-                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) + scope.pageStep);

-                };

-                scope.pageMinus = function () {

-                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) - scope.pageStep);

-                };

-

-            }],

-            link: function (scope, elem) {

-

-                if (scope.notMobile) {

-                    angular.element(elem).find('input').attr('aria-live', 'off');

-                    angular.element(elem).find('input').attr('role', 'spinbutton');

-                }

-

-                elem.find('input').bind('keydown', function (e) {

-                    if (e.keyCode === keymap.KEY.UP) {

-                        scope.plus();

-                    } else if (e.keyCode === keymap.KEY.DOWN){

-                        scope.minus();

-                    } else if (e.keyCode === keymap.KEY.HOME) {

-                        scope.inputValue[scope.inputModelKey] = parseInt(scope.min);

-                    } else if (e.keyCode === keymap.KEY.END) {

-                        scope.inputValue[scope.inputModelKey] = parseInt(scope.max);

-                    } else if (e.keyCode === keymap.KEY.PAGE_UP) {

-                        scope.pagePlus();

-                    } else if (e.keyCode === keymap.KEY.PAGE_DOWN) {

-                        scope.pageMinus();

-                    }

-                    scope.$apply();

-                });

-

-                elem.find('input').bind('keyup', function () {

-                    if (scope.inputValue[scope.inputModelKey] === null ||

-                        scope.inputValue[scope.inputModelKey] === '' ||

-                        scope.inputValue[scope.inputModelKey] < scope.min) {

-                        scope.inputValue[scope.inputModelKey] = scope.min;

-                        scope.$apply();

-                    } else if (angular.isUndefined(scope.inputValue[scope.inputModelKey]) || 

-                               scope.inputValue[scope.inputModelKey] > scope.max) {

-                        scope.inputValue[scope.inputModelKey] = scope.max;

-                        scope.$apply();

-                    }

-                });

-

-                scope.focusInputSpinButton = function (evt) {

-                    evt.preventDefault();

-                    if (scope.notMobile) {

-                        elem[0].querySelector('input').focus();

-                    }

-                };

-

-            }

-        };  

-    }]);

-/** 

- * @ngdoc directive 

- * @name Template.att:Static Route

- * 

- * @description 

- *  <file src="src/staticRouteTemplate/docs/readme.md" /> 

- * 

- * @example 

- *  <section id="code"> 

-        <example module="b2b.att"> 

-            <file src="src/staticRouteTemplate/docs/demo.html" /> 

-            <file src="src/staticRouteTemplate/docs/demo.js" /> 

-       </example> 

-    </section>    

- * 

- */

-angular.module('b2b.att.staticRouteTemplate', ['b2b.att.utilities'])

-  

-/**

- * @ngdoc directive

- * @name Progress & usage indicators.att:statusTracker

- *

- * @scope

- * @param {array} statuses - An array of status objects

- * @description

- * <file src="src/statusTracker/docs/readme.md" />

- *

- * @usage

- *

-<div ng-controller="statusTrackerController">

-    <b2b-status-tracker statuses="statusObject"></b2b-status-tracker>

-</div>

-

- * @example

-    <section id="code">   

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/statusTracker/docs/demo.html" />

-            <file src="src/statusTracker/docs/demo.js" />

-        </example>

-    </section>

- */

-

-angular.module('b2b.att.statusTracker', ['b2b.att.utilities'])

-.constant('b2bStatusTrackerConfig', {

-    'maxViewItems': 3

-})

-.directive('b2bStatusTracker', ['b2bStatusTrackerConfig', function(b2bStatusTrackerConfig) {

-        return {

-            restrict: 'EA',

-            transclude: false,

-            replace: true,

-            scope:{

-                statuses: '='

-            },

-            templateUrl: function(scope) {

-                return 'b2bTemplate/statusTracker/statusTracker.html';

-            },

-            link: function(scope, element, attr) {

-                scope.currentViewIndex = 0;

-                scope.b2bStatusTrackerConfig = b2bStatusTrackerConfig;

-

-                scope.nextStatus = function() {

-                    if (scope.currentViewIndex+1 <= scope.statuses.length) {

-                        scope.currentViewIndex++;

-                    }

-                };

-                scope.previousStatus = function() {

-                    if (scope.currentViewIndex-1 >= 0) {

-                        scope.currentViewIndex--;

-                    }

-                };

-                scope.isInViewport = function(index) {

-                    return (index < scope.currentViewIndex+3 && index >= scope.currentViewIndex);  // && index > scope.currentViewIndex-2

-                };

-                scope.currentStatus = function(index) {

-                    if(index != undefined){

-                        if(!scope.statuses[index].complete) {

-                            if(index > 0 && scope.statuses[index-1].complete) {

-                                return true;

-                            } else if(index == 0 && !scope.statuses[index].complete){

-                                return true;

-                            } else {

-                                return false;

-                            }

-                        }

-                    }

-                };

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Progress & usage indicators.att:stepTracker

- *

- * @scope

- * @param {array} stepsItemsObject - An array of step objects

- * @param {Integer} currenIindex - This indicates the current running step

- * @param {Integer} viewportIndex - This is optional. This can used to start the view port rather than 1 item.

- * @description

- * <file src="src/stepTracker/docs/readme.md" />

- *

- * @usage

- *

- *  <b2b-step-tracker steps-items-object="stepsObject" current-index="currentStepIndex" step-indicator-heading="stepHeading"></b2b-step-tracker>

- *

-

- * @example

-    <section id="code">   

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/stepTracker/docs/demo.html" />

-            <file src="src/stepTracker/docs/demo.js" />

-        </example>

-    </section>

- */

-angular.module('b2b.att.stepTracker', ['b2b.att.utilities'])

-    .constant('b2bStepTrackerConfig', {

-        'maxViewItems': 5

-    })

-    .directive('b2bStepTracker', ['b2bStepTrackerConfig', function(b2bStepTrackerConfig) {

-        return {

-            restrict: 'EA',

-            transclude: true,

-            scope:{

-                stepsItemsObject:"=",

-                currentIndex:"=",

-                viewportIndex:"=?"

-            },

-            templateUrl: 'b2bTemplate/stepTracker/stepTracker.html',

-            link: function(scope, ele, attr) {

-                if (angular.isDefined(scope.viewportIndex)) {

-                    scope.currentViewIndex = scope.viewportIndex - 1;   

-                }else{

-                    scope.currentViewIndex = 0;

-                }

-               

-               scope.b2bStepTrackerConfig = b2bStepTrackerConfig;

-               scope.nextStatus = function() {

-                    if (scope.currentViewIndex+1 <= scope.stepsItemsObject.length) {

-                        scope.currentViewIndex++;

-                    }

-                };

-                scope.previousStatus = function() {

-                    if (scope.currentViewIndex-1 >= 0) {

-                        scope.currentViewIndex--;

-                    }

-                };

-                scope.isInViewport = function(index) {

-                    return (index < scope.currentViewIndex+b2bStepTrackerConfig.maxViewItems && index >= scope.currentViewIndex);

-                };

-            }

-        };

-    }]);

-     

-/**

- * @ngdoc directive

- * @name Buttons, links & UI controls.att:switches

- *

- * @description

- *  <file src="src/switches/docs/readme.md" />

- *

- * @usage

- *  

- *  <!-- On / Off Toggle switch -->

- *  <label for="switch1" class="controlled-text-wrap"> This is ON

- *      <input type="checkbox" role="checkbox" b2b-switches id="switch1" ng-model="switch1.value">

- *  </label>

- *

- *  <!-- On / Off Toggle switch and DISABLED -->

- *  <label for="switch2" class="controlled-text-wrap"> This is ON (disabled)

- *      <input type="checkbox" role="checkbox" b2b-switches id="switch2" ng-model="switch1.value" ng-disabled="true" >

- *  </label> 

- *

- *

- * @example

- *  <section id="code">

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/switches/docs/demo.js" />

-            <file src="src/switches/docs/demo.html" />

-        </example>

-    </section>

- */

-angular.module('b2b.att.switches', ['b2b.att.utilities'])

-    .directive('b2bSwitches', ['$compile', '$templateCache', 'keymap', 'events', function ($compile, $templateCache, keymap, events) {

-        return {

-            restrict: 'EA',

-            require: ['ngModel'],

-            link: function (scope, element, attrs, ctrl) {

-                var ngModelController = ctrl[0];

-        

-                element.parent().bind("keydown", function (e) {

-                    if (!attrs.disabled && (e.keyCode === keymap.KEY.ENTER || e.keyCode === keymap.KEY.SPACE)) {

-                        events.preventDefault(e);

-                        ngModelController.$setViewValue(!ngModelController.$viewValue);

-                        element.prop("checked", ngModelController.$viewValue);

-                    }

-                });

-

-                element.wrap('<div class="btn-switch">');

-                //element.attr("tabindex", -1);

-                if (navigator.userAgent.match(/iphone/i)){

-                    element.attr("aria-live", "polite");

-                }

-                else {

-                    element.removeAttr('aria-live');

-                }

-

-                var templateSwitch = angular.element($templateCache.get("b2bTemplate/switches/switches.html"));

-                if (angular.isDefined(attrs.typeSpanish)) {

-                    templateSwitch = angular.element($templateCache.get("b2bTemplate/switches/switches-spanish.html"));

-                }

-

-                templateSwitch = $compile(templateSwitch)(scope);

-                element.parent().append(templateSwitch);

-

-                element.bind("focus", function (e) {

-                    element.parent().addClass('focused');

-                });

-

-                element.bind("blur", function (e) {

-                    element.parent().removeClass('focused');

-                });

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Messages, modals & alerts.att:tableMessages

- *

- * @description

- *  <file src="src/tableMessages/docs/readme.md" />

- *

- * @usage

-    <!-- no matching results -->

-    <b2b-table-message msg-type="'noMatchingResults'">

-       <p>No Matching Results</p>

-    </b2b-table-message>

-  

-    <!-- info could not load -->

-    <b2b-table-message msg-type="'infoCouldNotLoad'" on-refresh-click="refreshClicked()">

-    </b2b-table-message>

-   

-    <!-- magnify search -->

-    <b2b-table-message msg-type="'magnifySearch'">

-    </b2b-table-message>

-   

-    <!-- loading data -->

-    <b2b-table-message msg-type="'loadingTable'">

-          <!-- custom html -->

-          <p>The data is currently loading...</p>

-    </b2b-table-message>

-

- * @example

-    <section id="code">   

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/tableMessages/docs/demo.html" />

-            <file src="src/tableMessages/docs/demo.js" />

-        </example>

-    </section>

- */

-angular.module('b2b.att.tableMessages', [])

-    .directive('b2bTableMessage', [function() {

-        return {

-            restrict: 'AE',

-            replace: true,

-            transclude: true,

-            scope: {

-                msgType: '=',

-                onRefreshClick: '&'

-            },

-            templateUrl: 'b2bTemplate/tableMessages/tableMessage.html',

-            link: function(scope) {

-                scope.refreshAction = function(evt) {

-                    scope.onRefreshClick(evt);

-                };

-            }

-        };

-    }]);

-

-/**

- * @ngdoc directive

- * @name Tabs, tables & accordions.att:tableScrollbar

- *

- * @description

- *  <file src="src/tableScrollbar/docs/readme.md" />

- *

- * @usage

- * 

-<b2b-table-scrollbar>

-    <table>

-        <thead type="header">

-            <tr>

-                <th role="columnheader" scope="col" key="Id" id="col1">Id</th>

-                .....

-            </tr>

-        </thead>

-        <tbody type="body">

-            <tr>

-                <td id="rowheader0" headers="col1">1002</td>

-                .....

-            </tr>

-        </tbody>

-    </table>

-</b2b-table-scrollbar>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/tableScrollbar/docs/demo.html" />

-            <file src="src/tableScrollbar/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.tableScrollbar', [])

-    .directive('b2bTableScrollbar', ['$timeout', function ($timeout) {

-        return {

-            restrict: 'E',

-            scope: true,

-            transclude: true,

-            templateUrl: 'b2bTemplate/tableScrollbar/tableScrollbar.html',

-            link: function (scope, element, attrs, ctrl) {

-                var firstThWidth, firstTdWidth, firstColumnWidth, firstColumnHeight, trHeight = 0;

-                var pxToScroll = '';

-                var tableElement = element.find('table');

-                var thElements = element.find('th');

-                var tdElements = element.find('td');

-                var innerContainer = angular.element(element[0].querySelector('.b2b-table-inner-container'));

-                var outerContainer = angular.element(element[0].querySelector('.b2b-table-scrollbar'));

-

-                scope.disableLeft = true;

-                scope.disableRight = false;

-

-                if (angular.isDefined(thElements[0])) {

-                    firstThWidth = thElements[0].offsetWidth;

-                }

-                if (angular.isDefined(tdElements[0])) {

-                    firstTdWidth = tdElements[0].offsetWidth;

-                }

-                firstColumnWidth = (firstThWidth > firstTdWidth) ? firstThWidth : firstTdWidth;

-

-                innerContainer.css({

-                    'padding-left': (firstColumnWidth + 2) + 'px'

-                });

-

-                angular.forEach(element.find('tr'), function (eachTr, index) {

-                    trObject = angular.element(eachTr);

-                    firstColumn = angular.element(trObject.children()[0]);

-

-                    angular.element(firstColumn).css({

-                        'margin-left': -(firstColumnWidth + 2) + 'px',

-                        'width': (firstColumnWidth + 2) + 'px',

-                        'position': 'absolute'

-                    });

-

-                    trHeight = trObject[0].offsetHeight;

-                    firstColumnHeight = firstColumn[0].offsetHeight;

-                    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {

-                        firstColumnHeight += 1;

-                    }

-

-                    if (trHeight !== firstColumnHeight - 1) {

-                        if (trHeight > firstColumnHeight) {

-                            if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {

-                                trHeight -= 1;

-                            }

-                            angular.element(firstColumn).css({

-                                'height': (trHeight + 1) + 'px'

-                            });

-                        } else {

-                            angular.element(trObject).css({

-                                'height': (firstColumnHeight - 1) + 'px'

-                            });

-                        }

-                    }

-

-                });

-

-                pxToScroll = outerContainer[0].offsetWidth - firstColumnWidth;

-

-                scope.scrollLeft = function () {

-                    innerContainer[0].scrollLeft = innerContainer[0].scrollLeft + 20 - pxToScroll;

-                };

-

-                scope.scrollRight = function () {

-                    innerContainer[0].scrollLeft = innerContainer[0].scrollLeft + pxToScroll - 20;

-                };

-

-                scope.checkScrollArrows = function () {

-                    if (innerContainer[0].scrollLeft == 0) {

-                        scope.disableLeft = true;

-                    } else {

-                        scope.disableLeft = false;

-                    }

-

-                    if (((innerContainer[0].offsetWidth - firstColumnWidth) + innerContainer[0].scrollLeft) >= tableElement[0].offsetWidth) {

-                        scope.disableRight = true;

-                    } else {

-                        scope.disableRight = false;

-                    }

-                };

-

-                innerContainer.bind('scroll', function () {

-                    $timeout(function () {

-                        scope.checkScrollArrows();

-                    }, 1);

-                });

-

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Tabs, tables & accordions.att:tables

- *

- * @description

- *  <file src="src/tables/docs/readme.md" />

- *

- * @usage

- *   

- Table

- <table b2b-table table-data="tableData" search-string="searchString">

-    <thead b2b-table-row type="header">

-        <tr>

-            <th b2b-table-header key="requestId" default-sort="a" id="col1">Header 1</th>

-            <th b2b-table-header key="requestType" sortable="false" id="col2">Header 2</th>

-        </tr>

-    </thead>

-    <tbody b2b-table-row type="body" row-repeat="rowData in tableData">

-        <tr>

-            <td b2b-table-body id="rowheader{{$index}}" headers="col1" ng-bind="rowData['requestId']"> </td>

-            <td b2b-table-body ng-bind="rowData['requestType']"></td>

-        </tr>

-    </tbody>

- </table>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/tables/docs/demo.html" />

-            <file src="src/tables/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.tables', ['b2b.att.utilities'])

-    .constant('b2bTableConfig', {

-        defaultSortPattern: false, // true for descending & false for ascending

-        highlightSearchStringClass: 'tablesorter-search-highlight',

-        zebraStripCutOff: 6, // > zebraStripCutOff

-        tableBreakpoints: [ // breakpoints are >= min and < max

-            {

-                min: 0,

-                max: 480,

-                columns: 2

-            },

-            {

-                min: 480,

-                max: 768,

-                columns: 3

-            },

-            {

-                min: 768,

-                max: 1025,

-                columns: 5

-            },

-            {

-                min: 1025,

-                max: 1920,

-                columns: 7

-            }

-        ]

-    })

-    .directive('b2bTable', ['$filter', '$window', 'b2bTableConfig', '$timeout', function ($filter, $window, b2bTableConfig, $timeout) {

-        return {

-            restrict: 'EA',

-            replace: true,

-            transclude: true,

-            scope: {

-                tableData: "=",

-                viewPerPage: "=",

-                currentPage: "=",

-                totalPage: "=",

-                searchCategory: "=",

-                searchString: "=",

-                nextSort: '='

-            },

-            require: 'b2bTable',

-            templateUrl: 'b2bTemplate/tables/b2bTable.html',

-            controller: ['$scope', '$attrs', function ($scope, $attrs) {

-                this.headers = [];

-                this.currentSortIndex = null;

-                this.responsive = $scope.responsive = $attrs.responsive;

-                this.maxTableColumns = -1;

-                this.totalTableColums = 0;

-                this.active = $scope.active = false;

-                this.responsiveRowScopes = [];

-                this.hideColumnPriority = [];

-                this.hiddenColumn = [];

-                this.setIndex = function (headerScope, priority) {

-                    this.headers.push(headerScope);

-                    if (this.responsive) {

-                        this.totalTableColums++;

-                        if (!isNaN(priority)) {

-                            this.hideColumnPriority[priority] = this.totalTableColums - 1;

-                        } else {

-                            this.hideColumnPriority[this.totalTableColums - 1] = this.totalTableColums - 1;

-                        }

-                    }

-                    return this.totalTableColums - 1;

-                };

-                this.getIndex = function (headerName) {

-                    for (var i = 0; i < this.headers.length; i++) {

-                        if (this.headers[i].headerName === headerName) {

-                            return this.headers[i].index;

-                        }

-                    }

-                    return null;

-                };

-                this.setResponsiveRow = function (responsiveRowScope) {

-                    this.responsiveRowScopes.push(responsiveRowScope);

-                }

-                $scope.nextSort = '';

-                this.sortData = function (columnIndex, reverse, externalSort) {

-                    if ($scope.$parent && $scope.$parent !== undefined) {

-                        $scope.$parent.columnIndex = columnIndex;

-                        $scope.$parent.reverse = reverse;

-                    }

-                    this.currentSortIndex = columnIndex;

-                    if (externalSort === true) {

-                        if (!reverse) {

-                            $scope.nextSort = 'd'

-                        } else {

-                            $scope.nextSort = 'a'

-                        }

-                    }

-                    $scope.currentPage = 1;

-                    this.resetSortPattern();

-                };

-                this.getSearchString = function () {

-                    return $scope.searchString;

-                };

-                this.resetSortPattern = function () {

-                    for (var i = 0; i < this.headers.length; i++) {

-                        var currentScope = this.headers[i];

-                        if (currentScope.index !== this.currentSortIndex) {

-                            currentScope.resetSortPattern();

-                        }

-                    }

-                };

-

-                $scope.$watch('nextSort', function (val) {

-                    if ($scope.$parent && $scope.$parent !== undefined) {

-                        $scope.$parent.nextSort = val;

-                    }

-

-                });

-            }],

-            link: function (scope, elem, attr, ctrl) {

-                scope.searchCriteria = {};

-                scope.tableBreakpoints = attr.tableConfig ? scope.$parent.$eval(attr.tableConfig) : angular.copy(b2bTableConfig.tableBreakpoints);

-                scope.$watchCollection('tableData', function (value) {

-                    if (value && !isNaN(value.length)) {

-                        scope.totalRows = value.length;

-                    }

-                });

-                scope.$watch('currentPage', function (val) {

-                    if (scope.$parent && scope.$parent !== undefined) {

-                        scope.$parent.currentPage = val;

-                    }

-

-                });

-                scope.$watch('viewPerPage', function (val) {

-                    if (scope.$parent && scope.$parent !== undefined) {

-                        scope.$parent.viewPerPage = val;

-                    }

-                });

-                scope.$watch('totalRows', function (val) {

-                    if (scope.$parent && scope.$parent !== undefined) {

-                        if (val > b2bTableConfig.zebraStripCutOff) {

-                            scope.$parent.zebraStripFlag = true;

-                        } else {

-                            scope.$parent.zebraStripFlag = false;

-                        }

-                    }

-                });

-                scope.$watch(function () {

-                    return scope.totalRows / scope.viewPerPage;

-                }, function (value) {

-                    if (!isNaN(value)) {

-                        scope.totalPage = Math.ceil(value);

-                        scope.currentPage = 1;

-                    }

-                });

-                var searchValCheck = function (val) {

-                    if (angular.isDefined(val) && val !== null && val !== "") {

-                        return true;

-                    }

-                };

-                var setSearchCriteria = function (v1, v2) {

-                    if (searchValCheck(v1) && searchValCheck(v2)) {

-                        var index = ctrl.getIndex(v2);

-                        scope.searchCriteria = {};

-                        if (index !== null) {

-                            scope.searchCriteria[index] = v1;

-                        }

-                    } else if (searchValCheck(v1) && (!angular.isDefined(v2) || v2 === null || v2 === "")) {

-                        scope.searchCriteria = {

-                            $: v1

-                        };

-                    } else {

-                        scope.searchCriteria = {};

-                    }

-                };

-                scope.$watch('searchCategory', function (newVal, oldVal) {

-                    if (newVal !== oldVal) {

-                        setSearchCriteria(scope.searchString, newVal);

-                    }

-                });

-                scope.$watch('searchString', function (newVal, oldVal) {

-                    if (newVal !== oldVal) {

-                        setSearchCriteria(newVal, scope.searchCategory);

-                    }

-                });

-                scope.$watchCollection('searchCriteria', function (val) {

-                    if (scope.$parent && scope.$parent !== undefined) {

-                        scope.$parent.searchCriteria = val;

-                    }

-                    scope.totalRows = scope.tableData && ($filter('filter')(scope.tableData, val, false)).length || 0;

-                    scope.currentPage = 1;

-                });

-                var window = angular.element($window);

-                var findMaxTableColumns = function () {

-                    var windowWidth;

-                    windowWidth = $window.innerWidth;

-                    ctrl.maxTableColumns = -1;

-                    for (var i in scope.tableBreakpoints) {

-                        if (windowWidth >= scope.tableBreakpoints[i].min && windowWidth < scope.tableBreakpoints[i].max) {

-                            ctrl.maxTableColumns = scope.tableBreakpoints[i].columns;

-                            break;

-                        }

-                    }

-                    if (ctrl.maxTableColumns > -1 && ctrl.totalTableColums > ctrl.maxTableColumns) {

-                        ctrl.active = true;

-                    } else {

-                        ctrl.active = false;

-                    }

-                    for (var i in ctrl.responsiveRowScopes) {

-                        ctrl.responsiveRowScopes[i].setActive(ctrl.active);

-                    }

-                };

-                var findHiddenColumn = function () {

-                    var columnDiffenence = ctrl.maxTableColumns > -1 ? ctrl.totalTableColums - ctrl.maxTableColumns : 0;

-                    ctrl.hiddenColumn = [];

-                    if (columnDiffenence > 0) {

-                        var tempHideColumnPriority = angular.copy(ctrl.hideColumnPriority);

-                        for (var i = 0; i < columnDiffenence; i++) {

-                            ctrl.hiddenColumn.push(tempHideColumnPriority.pop());

-                        }

-                    }

-                };

-                var resizeListener = function () {

-                    findMaxTableColumns();

-                    findHiddenColumn();

-                };

-                if (ctrl.responsive) {

-                    window.bind('resize', function () {

-                        resizeListener();

-                        scope.$apply();

-                    });

-                    $timeout(function () {

-                        resizeListener();

-                    }, 100);

-                }

-            }

-        };

-    }])

-    .directive('b2bTableRow', [function () {

-        return {

-            restrict: 'EA',

-            compile: function (elem, attr) {

-                if (attr.type === 'header') {

-                    angular.noop();

-                } else if (attr.type === 'body') {

-                    var html = elem.children();

-                    if (attr.rowRepeat) {

-                        html.attr('ng-repeat', attr.rowRepeat.concat(" | orderBy : columnIndex : reverse | filter : searchCriteria : false "));

-                    }

-                    html.attr('ng-class', "{'odd': $odd && zebraStripFlag}");

-                    html.attr('class', 'data-row');

-                    html.attr('b2b-responsive-row', '{{$index}}');

-                    elem.append(html);

-                }

-            }

-        };

-    }])

-    .directive('b2bTableHeader', ['b2bTableConfig', function (b2bTableConfig) {

-        return {

-            restrict: 'EA',

-            replace: true,

-            transclude: true,

-            scope: {

-                sortable: '@',

-                defaultSort: '@',

-                index: '@key'

-            },

-            require: '^b2bTable',

-            templateUrl: function (elem, attr) {

-                if (attr.sortable === 'false') {

-                    return 'b2bTemplate/tables/b2bTableHeaderUnsortable.html';

-                } else {

-                    return 'b2bTemplate/tables/b2bTableHeaderSortable.html';

-                }

-            },

-            link: function (scope, elem, attr, ctrl) {

-                var reverse = b2bTableConfig.defaultSortPattern;

-                scope.headerName = elem.text();

-                scope.headerId = elem.attr('id');

-                scope.sortPattern = null;

-                var priority = parseInt(attr.priority, 10);

-                scope.columnIndex = ctrl.setIndex(scope, priority);

-

-                scope.isHidden = function () {

-                    return (ctrl.hiddenColumn.indexOf(scope.columnIndex) > -1);

-                };

-

-                scope.$watch(function () {

-                    return elem.text();

-                }, function (value) {

-                    scope.headerName = value;

-                });

-                scope.sort = function (sortType) {

-                    if (typeof sortType === 'boolean') {

-                        reverse = sortType;

-                    }

-                    ctrl.sortData(scope.index, reverse, false);

-                    scope.sortPattern = reverse ? 'descending' : 'ascending';

-                    reverse = !reverse;

-                };

-                scope.$watch(function () {

-                    return ctrl.currentSortIndex;

-                }, function (value) {

-                    if (value !== scope.index) {

-                        scope.sortPattern = null;

-                    }

-                });

-

-                if (scope.sortable === undefined || scope.sortable === 'true' || scope.sortable === true) {

-                    scope.sortable = 'true';

-                } else if (scope.sortable === false || scope.sortable === 'false') {

-                    scope.sortable = 'false';

-                }

-

-                if (scope.sortable !== 'false') {

-                    if (scope.defaultSort === 'A' || scope.defaultSort === 'a') {

-                        scope.sort(false);

-                    } else if (scope.defaultSort === 'D' || scope.defaultSort === 'd') {

-                        scope.sort(true);

-                    }

-                }

-                scope.resetSortPattern = function () {

-                    reverse = b2bTableConfig.defaultSortPattern;

-                };

-            }

-        };

-    }])

-    .directive('b2bResponsiveRow', ['$templateCache', '$timeout', '$compile', function ($templateCache, $timeout, $compile) {

-        return {

-            restrict: 'EA',

-            require: '^b2bTable',

-            controller: ['$scope', function ($scope) {

-                this.rowValues = $scope.rowValues = [];

-                this.setRowValues = function (rowValue) {

-                    this.rowValues.push(rowValue);

-                };

-                var columnIndexCounter = -1;

-                this.getIndex = function () {

-                    columnIndexCounter++;

-                    return columnIndexCounter;

-                };

-            }],

-            link: function (scope, elem, attr, ctrl) {

-                if (ctrl.responsive) {

-                    scope.rowIndex = attr.b2bResponsiveRow;

-                    scope.active = false;

-                    scope.expandFlag = false;

-                    scope.headerValues = ctrl.headers;

-                    ctrl.setResponsiveRow(scope);

-                    var firstTd = elem.find('td').eq(0);

-                    scope.setActive = function (activeFlag) {

-                        scope.active = activeFlag;

-                        if (scope.active) {

-                            elem.addClass('has-button');

-                            firstTd.attr('role', 'rowheader');

-                            firstTd.parent().attr('role', 'row');

-                        } else {

-                            elem.removeClass('has-button');

-                            firstTd.removeAttr('role');

-                            firstTd.parent().removeAttr('role');

-                        }

-                    };

-                    scope.toggleExpandFlag = function (expandFlag) {

-                        if (angular.isDefined(expandFlag)) {

-                            scope.expandFlag = expandFlag;

-                        } else {

-                            scope.expandFlag = !scope.expandFlag;

-                        }

-                        if (scope.expandFlag) {

-                            elem.addClass('opened');

-                        } else {

-                            elem.removeClass('opened');

-                        }

-                    };

-

-                    firstTd.attr('scope', 'row');

-                    firstTd.addClass('col-1');

-                    scope.$on('$destroy', function () {

-                        elem.next().remove();

-                    });

-                    $timeout(function () {

-                        scope.firstTdId = firstTd.attr('id');

-                        var firstTdContent = firstTd.html();

-                        var toggleButtonTemplate = '<span ng-show="!active">' + firstTdContent + '</span><button type="button" aria-describedby="sup-actNum{{$id}}" aria-expanded="{{expandFlag}}" ng-show="active" ng-click="toggleExpandFlag()"><i ng-class="{\'icon-primary-accordion-plus\': !expandFlag, \'icon-primary-accordion-minus\': expandFlag}" aria-hidden="true"></i>' + firstTdContent + '</button><span id="sup-actNum{{$id}}" style="display:none">{{expandFlag && "Hide row below." || "Show row below."}}</span>';

-                        toggleButtonTemplate = $compile(toggleButtonTemplate)(scope);

-                        firstTd.html('');

-                        firstTd.prepend(toggleButtonTemplate);

-

-                        var template = $templateCache.get('b2bTemplate/tables/b2bResponsiveRow.html');

-                        template = $compile(template)(scope);

-                        elem.after(template);

-                    }, 100);

-                }

-            }

-        };

-    }])

-    .directive('b2bResponsiveList', ['$templateCache', '$timeout', '$compile', function ($templateCache, $timeout, $compile) {

-        return {

-            restrict: 'EA',

-            require: '^b2bTable',

-            link: function (scope, elem, attr, ctrl) {

-                scope.columnIndex = parseInt(attr.b2bResponsiveList, 10);

-                scope.isVisible = function () {

-                    return (ctrl.hiddenColumn.indexOf(scope.columnIndex) > -1);

-                };

-            }

-        };

-    }])

-    .directive('b2bTableBody', ['$filter', '$timeout', 'b2bTableConfig', function ($filter, $timeout, b2bTableConfig) {

-        return {

-            restrict: 'EA',

-            require: ['^b2bTable', '?^b2bResponsiveRow'],

-            scope: true,

-            replace: true,

-            transclude: true,

-            templateUrl: 'b2bTemplate/tables/b2bTableBody.html',

-            link: function (scope, elem, attr, ctrl) {

-                var b2bTableCtrl = ctrl[0];

-                var b2bResponsiveRowCtrl = ctrl[1];

-                var highlightSearchStringClass = b2bTableConfig.highlightSearchStringClass;

-                var searchString = "";

-                var wrapElement = function (elem) {

-                    var text = elem.text();

-                    elem.html($filter('b2bHighlight')(text, searchString, highlightSearchStringClass));

-                };

-                var traverse = function (elem) {

-                    var innerHtml = elem.children();

-                    if (innerHtml.length > 0) {

-                        for (var i = 0; i < innerHtml.length; i++) {

-                            traverse(innerHtml.eq(i));

-                        }

-                    } else {

-                        wrapElement(elem);

-                        return;

-                    }

-                };

-                var clearWrap = function (elem) {

-                    var elems = elem.find('*');

-                    for (var i = 0; i < elems.length; i++) {

-                        if (elems.eq(i).attr('class') && elems.eq(i).attr('class').indexOf(highlightSearchStringClass) !== -1) {

-                            var text = elems.eq(i).text();

-                            elems.eq(i).replaceWith(text);

-                        }

-                    }

-                };

-                if (b2bResponsiveRowCtrl) {

-                    scope.columnIndex = b2bResponsiveRowCtrl.getIndex();

-                    scope.isHidden = function () {

-                        return (b2bTableCtrl.hiddenColumn.indexOf(scope.columnIndex) > -1);

-                    };

-                }

-                $timeout(function () {

-                    var actualHtml = elem.children();

-                    scope.$watch(function () {

-                        return b2bTableCtrl.getSearchString();

-                    }, function (val) {

-                        searchString = val;

-                        clearWrap(elem);

-                        if (actualHtml.length > 0) {

-                            traverse(elem);

-                        } else {

-                            wrapElement(elem);

-                        }

-                    });

-                    if (b2bResponsiveRowCtrl) {

-                        b2bResponsiveRowCtrl.setRowValues(elem.html());

-                    }

-                }, 50);

-            }

-        };

-    }])

-    .directive('b2bTableSort', ['b2bTableConfig','$timeout', function (b2bTableConfig,$timeout) {

-        return {

-            restrict: 'EA',

-            replace: true,

-            require: '^b2bTable',

-            link: function (scope, elem, attr, ctrl) {

-                var initialSort = '',

-                    nextSort = '',

-                    tempsort = '';

-                initialSort = attr.initialSort;

-

-                scope.sortTable = function (msg) {

-                    $timeout(function(){

-                        if (nextSort.length > 0) {

-

-                        if (nextSort === 'd' || nextSort === 'D') {

-                            tempsort = nextSort

-                            ctrl.sortData(msg, true, true);

-                            nextSort = 'a';

-                             $timeout(function(){

-                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){

-                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();

-                                }   

-                            },100);

-                            

-                        } else {

-                            tempsort = nextSort

-                            ctrl.sortData(msg, false, true);

-                            nextSort = 'd';

-                             $timeout(function(){

-                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){

-                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();

-                                }   

-                            },100);

-                        }

-                    } else if (initialSort.length > 0) {

-

-                        if (initialSort === 'd' || initialSort === 'D') {

-                            tempsort = nextSort

-                            ctrl.sortData(msg, true, true);

-                            nextSort = 'a';

-                            $timeout(function(){

-                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){

-                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();

-                                }   

-                            },100);

-                             

-                        } else {

-                            tempsort = nextSort

-                            ctrl.sortData(msg, false, true);

-                            nextSort = 'd';

-                             $timeout(function(){

-                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){

-                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();

-                                }   

-                            },100);

-

-                             

-                        }

-                    }

-                    },10)

-

-                };

-

-                scope.sortDropdown = function(msg) {

-

-                    if(tempsort==='') {

-

-                        tempsort='a'

-                    }

-                    if(tempsort === 'd' || tempsort === 'D' ) {

-                        ctrl.sortData(msg, true, false);       

-                    } else {

-                       ctrl.sortData(msg, false, false);

-                    }

-

-                };

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Tabs, tables & accordions.att:tabs

- *

- * @description

- *  <file src="src/tabs/docs/readme.md" />

- *

- * @usage

- *  <b2b-tabset tab-id-selected="activeTabsId">

-        <b2b-tab ng-repeat="tab in gTabs" tab-item="tab" 

-                 id="{{tab.uniqueId}}" aria-controls="{{tab.tabPanelId}}"

-                 ng-disabled="tab.disabled">

-            {{tab.title}}

-        </b2b-tab>

-    </b2b-tabset>

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/tabs/docs/demo.html" />

-            <file src="src/tabs/docs/demo.js" />

-        </example>

-    </section>

- *

- */

-

-angular.module('b2b.att.tabs', ['b2b.att.utilities'])

-    .directive('b2bTabset', function () {

-        return {

-            restrict: 'EA',

-            transclude: true,

-            replace: true,

-            scope: {

-                tabIdSelected: '='

-            },

-            templateUrl: 'b2bTemplate/tabs/b2bTabset.html',

-            controller: ['$scope', function ($scope) {

-

-                this.setTabIdSelected = function (tab) {

-                    $scope.tabIdSelected = tab.id;

-                };

-

-                this.getTabIdSelected = function () {

-                    return $scope.tabIdSelected;

-                };

-            }]

-        };

-    })

-    .directive('b2bTab', ['keymap', function (keymap) {

-        return {

-            restrict: 'EA',

-            transclude: true,

-            replace: true,

-            require: '^b2bTabset',

-            scope: {

-                tabItem: "="

-            },

-            templateUrl: 'b2bTemplate/tabs/b2bTab.html',

-            controller: [function(){}],

-            link: function (scope, element, attr, b2bTabsetCtrl) {

-

-                if (scope.tabItem && !scope.tabItem.disabled) {

-                    scope.tabItem.disabled = false;

-                }

-

-                scope.isTabActive = function () {

-                    return (scope.tabItem.id === b2bTabsetCtrl.getTabIdSelected());

-                };

-

-                scope.clickTab = function () {

-                    if (attr.disabled) {

-                        return;

-                    }

-                    b2bTabsetCtrl.setTabIdSelected(scope.tabItem);

-                };

-

-                scope.nextKey = function () {

-                    var el = angular.element(element[0])[0];

-                    var elementToFocus = null;

-                    while (el && el.nextElementSibling) {

-                        el = el.nextElementSibling;

-                        if (!el.querySelector('a').disabled) {

-                            elementToFocus = el.querySelector('a');

-                            break;

-                        }

-                    }

-

-                    if (!elementToFocus) {

-                        var childTabs = element.parent().children();

-                        for (var i = 0; i < childTabs.length; i++) {

-                            if (!childTabs[i].querySelector('a').disabled) {

-                                elementToFocus = childTabs[i].querySelector('a');

-                                break;

-                            }

-                        }

-                    }

-

-                    if (elementToFocus) {

-                        elementToFocus.focus();

-                    }

-                };

-

-                scope.previousKey = function () {

-                    var el = angular.element(element[0])[0];

-                    var elementToFocus = null;

-

-                    while (el && el.previousElementSibling) {

-                        el = el.previousElementSibling;

-                        if (!el.querySelector('a').disabled) {

-                            elementToFocus = el.querySelector('a');

-                            break;

-                        }

-                    }

-

-                    if (!elementToFocus) {

-                        var childTabs = element.parent().children();

-                        for (var i = childTabs.length - 1; i > 0; i--) {

-                            if (!childTabs[i].querySelector('a').disabled) {

-                                elementToFocus = childTabs[i].querySelector('a');

-                                break;

-                            }

-                        }

-                    }

-

-                    if (elementToFocus) {

-                        elementToFocus.focus();

-                    }

-                };

-

-                angular.element(element[0].querySelector('a')).bind('keydown', function (evt) {

-

-                    if (!(evt.keyCode)) {

-                        evt.keyCode = evt.which;

-                    }

-

-                    switch (evt.keyCode) {

-                        case keymap.KEY.RIGHT:

-                            evt.preventDefault();

-                            scope.nextKey();

-                            break;

-

-                        case keymap.KEY.LEFT:

-                            evt.preventDefault();

-                            scope.previousKey();

-                            break;

-

-                        default:;

-                    }

-                });

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Messages, modals & alerts.att:tagBadges

- *

- * @description

- *  <file src="src/tagBadges/docs/readme.md" />

- *

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/tagBadges/docs/demo.html" />

-            <file src="src/tagBadges/docs/demo.js" />

-        </example>

-    </section>

- *

- */

-angular.module('b2b.att.tagBadges', ['b2b.att.utilities'])

-        .directive('b2bTagBadge',['$timeout',function($timeout){

-            return{

-                restrict: 'EA',

-                link: function(scope,elem,attr,ctrl){

-                    elem.addClass('b2b-tags');

-                    if(angular.element(elem[0].querySelector('.icon-primary-close')).length>0) {

-                        var item = angular.element(elem[0].querySelector('.icon-primary-close'));

-                        item.bind('click',function(){

-                        elem.css({'height':'0','width':'0','padding':'0','border':'0'});

-                        elem.attr('tabindex','0');

-                        elem[0].focus();

-                        item.parent().remove();

-                        elem[0].bind('blur',function(){

-                            elem[0].remove();

-                        });

-                    });  

-                    }

-                  

-

-

-

-                }

-            };   

-}]);

-/**

- * @ngdoc directive

- * @name Forms.att:textArea

- *

- * @description

- *  <file src="src/textArea/docs/readme.md" />

- *

- * @usage

- *  <textarea b2b-reset b2b-reset-textarea ng-model="textAreaModel" ng-disabled="disabled" ng-trim="false" placeholder="{{placeholderText}}" rows="{{textAreaRows}}" maxlength="{{textAreaMaxlength}}" role="textarea"></textarea>

- *

- * @example

-    <section id="code">

-        <b>HTML + AngularJS</b>

-        <example module="b2b.att">

-            <file src="src/textArea/docs/demo.html" />

-            <file src="src/textArea/docs/demo.js" />

-        </example>

-    </section>

- */

-angular.module('b2b.att.textArea', ['b2b.att.utilities'])

-

-.directive('b2bResetTextarea', [ function () {

-    return {

-        restrict: 'A',

-        require: 'b2bReset',

-        link: function (scope, element, attrs, ctrl) {

-

-            var resetButton = ctrl.getResetButton();

-            

-            var computeScrollbarAndAddClass = function () {

-                if (element.prop('scrollHeight') > element[0].clientHeight) {

-                    element.addClass('hasScrollbar');

-                } else {

-                    element.removeClass('hasScrollbar');

-                }

-            };

-            

-            computeScrollbarAndAddClass();

-

-            element.on('focus keyup', function(){

-                computeScrollbarAndAddClass();

-            });

-        }

-    };

-}]);

-

-/**

- * @ngdoc directive

- * @name Forms.att:tooltipsForForms

- *

- * @description

- *  <file src="src/tooltipsForForms/docs/readme.md" />

- *

- * @example

- <example module="b2b.att">

- <file src="src/tooltipsForForms/docs/demo.html" />

- <file src="src/tooltipsForForms/docs/demo.js" />

- </example>

- */

-angular.module('b2b.att.tooltipsForForms', ['b2b.att.utilities'])

-        .directive('b2bTooltip', ['$document', '$window', '$isElement', function ($document, $window, $isElement) {

-                return  {

-                    restrict: 'A',

-                    link: function (scope, elem, attr, ctrl) {

-                        var icon = elem[0].querySelector('a.tooltip-element');

-                        var btnIcon = elem[0].querySelector('.btn.tooltip-element');

-                        var tooltipText = elem[0].querySelector('.helpertext');

-                        var tooltipWrapper = elem[0].querySelector('.tooltip-size-control');

-                        if (elem.hasClass('tooltip-onfocus')) {

-                            var inputElm = angular.element(elem[0].querySelector("input"));

-                            var textAreaElm = angular.element(elem[0].querySelector("textarea"));

-                        }

-                        angular.element(icon).attr({'aria-expanded': false});

-                        angular.element(btnIcon).attr({'aria-expanded': false});

-                        var calcTooltip = function () {

-                            if (!elem.hasClass('tooltip active')) {

-                                if (elem.hasClass('tooltip-onfocus')) {

-                                    angular.element(elem[0].querySelector("input")).triggerHandler('focusout');

-                                }

-                                if (elem.hasClass('tooltip-onclick')) {

-                                    return false;

-                                }

-                                angular.element(icon).removeClass('active');

-                                angular.element(icon).attr({'aria-expanded': true});

-                                angular.element(icon).attr({'aria-describedby': angular.element(tooltipText).attr('id')});

-                                angular.element(tooltipText).attr({'aria-hidden': false});

-                                elem.addClass('active');

-

-                                var tooltipIconPos = angular.element(icon).prop('offsetLeft'),

-                                        tooltipPosition = angular.element(tooltipText).prop('offsetWidth') / 2,

-                                        tipOffset = (tooltipIconPos - 30) - tooltipPosition,

-                                        maxRightPos = (($window.innerWidth - 72) - (tooltipPosition * 2)) - 14.5;

-

-                                if ($window.innerWidth >= '768') {

-                                    if (tipOffset < 0) {// if icon on far left side of page

-                                        tipOffset = 15;

-                                    }

-                                    else if (tooltipIconPos > maxRightPos) {// if icon is far right side of page

-                                        tipOffset = maxRightPos;

-                                    }

-                                    else {// if tooltip in the middle somewhere

-                                        tipOffset = tipOffset;

-                                    }

-                                    angular.element(tooltipWrapper).css({left: tipOffset + 'px'});

-                                }

-                            }

-                        };

-                        

-                        // TOOLTIP LINK ONCLICK AND FOCUS

-                        angular.element(icon).on('click mouseover mouseout focus blur', function (e) {

-                            if (e.type == 'mouseover') {

-                                calcTooltip();

-                            }

-                            else if (e.type == 'mouseout' && elem.hasClass('active')) {

-                                if (!elem.hasClass('activeClick')) {

-                                    angular.element(tooltipText).attr({

-                                        'aria-hidden': true,

-                                        'tabindex': '-1'

-                                    });

-                                    elem.removeClass('active');

-                                } else if (elem.hasClass('activeClick') && navigator.userAgent.match(/iphone/i)) {

-                                    elem.removeClass('active activeClick');

-                                }

-                            }

-

-                            else {

-                                if (elem.hasClass('activeClick')) {

-                                    angular.element(icon).attr({'aria-expanded': false});

-                                    angular.element(tooltipText).attr({'aria-hidden': true});

-                                    angular.element(icon).removeAttr('aria-describedby');

-                                    elem.removeClass('activeClick active');

-                                    e.preventDefault();

-                                }

-                                else if (e.type == 'click') {

-                                    elem.addClass('activeClick');

-                                    calcTooltip();

-                                    e.preventDefault();

-                                }

-                                else {

-                                    angular.element(icon).on('keydown', function (e) {

-                                        if (e.keyCode == '32') {

-                                            (elem.hasClass('active')) ? elem.removeClass('active') : elem.addClass('value');

-                                            angular.element(icon).triggerHandler('click');

-                                            e.preventDefault();

-                                        } else if (e.keyCode == '27') {

-                                            (elem.hasClass('active')) ? elem.removeClass('active activeClick') : elem.addClass('value');

-                                        }

-                                    });

-                                    e.preventDefault();

-                                }

-                            }

-                            e.preventDefault();

-                        });

-

-                        // TOOLTIP BUTTON INSIDE A TEXT FIELD

-                        angular.element(btnIcon).on('click', function (e) {

-                            var $this = angular.element(this);

-                            if ($this.hasClass('active') && elem.hasClass('tooltip-onclick')) {

-                                elem.removeClass('active');

-                                $this.removeClass('active');

-                                angular.element(tooltipText).removeAttr('aria-live');

-                                $this.attr({'aria-expanded': 'false'});

-                                $this.removeAttr('aria-describedby');

-                            } else {

-                                elem.addClass('active');

-                                $this.addClass('active');

-                                $this.attr({'aria-expanded': 'true', 'aria-describedby': angular.element(tooltipText).attr('id')});

-                                angular.element(tooltipText).attr({'aria-live': 'polite'});

-                            }

-                        });

-

-                        angular.element(btnIcon).on('blur', function (e) {

-                            var $this = angular.element(this);

-                            if ($this.hasClass('active') && elem.hasClass('tooltip-onclick')) {

-                                elem.removeClass('active');

-                                $this.removeClass('active');

-                                angular.element(tooltipText).removeAttr('aria-live');

-                                $this.attr({'aria-expanded': 'false'});

-                                $this.removeAttr('aria-describedby');

-                            }

-                        });  

-

-                        angular.element(btnIcon).on('keydown', function (e) {

-                            var $this = angular.element(this);

-                            if (e.keyCode == '27') {

-                                var $this = angular.element(this);

-                                if ($this.hasClass('active') && elem.hasClass('tooltip-onclick')) {

-                                    elem.removeClass('active');

-                                    $this.removeClass('active');

-                                    angular.element(tooltipText).removeAttr('aria-live');

-                                    $this.attr({'aria-expanded': 'false'});

-                                    $this.removeAttr('aria-describedby');

-                                }

-                            }

-                        });

-

-                        // close all tooltips if clicking something else

-                        $document.bind('click', function (e) {

-                            var isElement = $isElement(angular.element(e.target), elem, $document);

-                            if (!isElement) {

-                                elem.removeClass('active');

-                                angular.element(elem[0].querySelector('.tooltip-element')).removeClass('active');

-                                angular.element(tooltipText).removeAttr('aria-live');

-                                angular.element(elem[0].querySelector('.tooltip-element')).attr({'aria-expanded': 'false'});

-                                angular.element(elem[0].querySelector('.tooltip-element')).removeAttr('aria-describedby');

-                            };

-                        });

-

-                        angular.element(inputElm).on('keydown', function (e) {

-                            if (e.keyCode == '27'){

-                                elem.removeClass('active');

-                                angular.element(tooltipText).css('display', 'none');

-                                angular.element(tooltipText).removeAttr('aria-live');

-

-                                if (angular.element(this).attr('aria-describedby') === undefined){

-

-                                }

-

-                                else if ((spaceIndex = angular.element(this).attr('aria-describedby').lastIndexOf(' ')) >= 0){

-

-                                    var describedByValue = angular.element(this).attr('aria-describedby').slice(0, spaceIndex);

-

-                                    angular.element(this).attr('aria-describedby', describedByValue);

-

-                                }

-                                else {

-                                    angular.element(this).removeAttr('aria-describedby');

-                                }

-                            }

-                        });

-

-                        angular.element(textAreaElm).on('keydown', function (e) {

-                            if (e.keyCode == '27'){

-                                elem.removeClass('active');

-                                angular.element(tooltipText).css('display', 'none');

-                                angular.element(tooltipText).removeAttr('aria-live');

-                                if (angular.element(this).attr('aria-describedby') === undefined){

-

-                                }

-

-                                else if ((spaceIndex = angular.element(this).attr('aria-describedby').lastIndexOf(' ')) >= 0){

-

-                                    var describedByValue = angular.element(this).attr('aria-describedby').slice(0, spaceIndex);

-

-                                    angular.element(this).attr('aria-describedby', describedByValue);

-

-                                }

-                                else {

-                                    angular.element(this).removeAttr('aria-describedby');

-                                }

-                            }

-                        });

-

-                        // TOOLTIP TRIGGERED AUTOMATICALLY INSIDE A TEXT FIELD

-                        angular.element(inputElm).on('focus', function (e) {

-                            var allTooltip = $document[0].querySelectorAll('[class*="tooltip"]');

-                            for (var i = 0; i < allTooltip.length; i++) {

-                                if (angular.element(allTooltip[i]).hasClass('active')) {

-                                    angular.element(allTooltip[i]).triggerHandler('click');

-                                }

-                            };

-                            angular.element(this).attr({'aria-describedby': angular.element(tooltipText).attr('id')});

-                            angular.element(tooltipText).css('display', 'block');

-                            angular.element(tooltipText).attr({'aria-live': 'polite'});

-                            elem.addClass('active');

-                        });

-                        angular.element(inputElm).on('blur', function (e) {

-                            elem.removeClass('active');

-                            angular.element(tooltipText).css('display', 'none');

-                            angular.element(tooltipText).removeAttr('aria-live');

-                            angular.element(this).removeAttr('aria-describedby');

-                        });

-

-                        // TOOLTIP TRIGGERED AUTOMATICALLY INSIDE A TEXTAREA

-                        angular.element(textAreaElm).on('focus', function (e) {

-                            var allTooltip = $document[0].querySelectorAll('[class*="tooltip"]');

-                            for (var i = 0; i < allTooltip.length; i++) {

-                                if (angular.element(allTooltip[i]).hasClass('active')) {

-                                    angular.element(allTooltip[i]).triggerHandler('click');

-                                }

-                            };

-                            elem.addClass('active');

-                            angular.element(tooltipText).css('display', 'block');

-                            angular.element(tooltipText).attr({'aria-live': 'polite'});

-                            angular.element(this).attr({'aria-describedby': angular.element(tooltipText).attr('id')});

-                        });

-                        angular.element(textAreaElm).on('blur', function (e) {

-                            elem.removeClass('active');

-                            angular.element(tooltipText).css('display', 'none');

-                            angular.element(tooltipText).removeAttr('aria-live');

-                            angular.element(this).removeAttr('aria-describedby');

-                        });

-                    }

-                };

-            }]); 

-/**

- * @ngdoc directive

- * @name Navigation.att:TreeNavigation

- *

- *

- * @scope

- * @param {String} setRole - This value needs to be "tree". This is required to incorporate CATO requirements.

- * @param {Boolean} groupIt - This value needs to be "false" for top-level tree rendered.

- *

- * @description

- *  <file src="src/treeNav/docs/readme.md" />

- *

- * @usage

- *      <div class="b2b-tree">

- *                <b2b-tree-nav collection="treeStructure" set-role="tree" group-it="false"></b2b-tree-nav>

- *            </div>

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/treeNav/docs/demo.html" />

-            <file src="src/treeNav/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.treeNav', ['b2b.att.utilities'])

-    .directive('b2bTreeNav', function () {

-        return {

-            restrict: "E",

-            replace: true,

-            scope: {

-                collection: '=',

-                groupIt: '=',

-                setRole: '@'

-            },

-            templateUrl: function (element, attrs) {

-                if (attrs.groupIt === 'true') {

-                    return "b2bTemplate/treeNav/groupedTree.html";

-                } else {

-                    return "b2bTemplate/treeNav/ungroupedTree.html";

-                }

-            },

-            link: function (scope) {               

-                if (!(scope.setRole === 'tree')) {

-                    scope.setRole = 'group';

-                }             

-            }

-        }

-    })

-    .directive('b2bMember', ['$compile', '$timeout', 'keymap', function ($compile, $timeout, keymap) {

-        return {

-            restrict: "E",

-            replace: true,

-            scope: {

-                member: '=',

-                groupIt: '='

-            },

-            templateUrl: 'b2bTemplate/treeNav/treeMember.html',

-            link: function (scope, element, attrs) {

-                scope.elemArr = [];

-                var removeRootTabIndex = function (elem) {

-                    if (elem.parent().parent().eq(0).hasClass('b2b-tree')) {

-                        elem.attr('tabindex', -1);                        

-                        return;

-                    }

-                    removeRootTabIndex(elem.parent());

-                };

-                scope.$watch('member.child', function(newVal, oldVal){                  

-                    if(newVal !== oldVal){

-                        scope.showChild();

-                    };

-                });

-                scope.showChild = function () {

-                        if (!element.hasClass('grouped')) {

-                            if (angular.isArray(scope.member.child) && scope.member.child.length > 0 && (scope.member.divide === undefined || scope.member.child.length < scope.member.divide)) {

-                                scope.groupIt = false;

-                                element.addClass('grouped');

-                                element.append("<b2b-tree-nav collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-nav>");

-                                $compile(element.contents())(scope);

-                                if(scope.member.active && scope.member.active === true){

-                                    element.find('i').eq(0).removeClass('icon-primary-collapsed');

-                                };

-                                if(scope.member.selected && scope.member.selected === true){

-                                    element.attr('aria-selected', true);

-                                    element.attr('tabindex', 0);

-                                    removeRootTabIndex(element);

-                                };

-                                if(scope.member.active && scope.member.active == undefined){

-                                    element.find('i').eq(0).addClass('icon-primary-collapsed');

-                                };

-                            } else if (scope.member.child && scope.member.divide && scope.member.child.length > scope.member.divide) {

-                                element.addClass('grouped');

-                                scope.groupIt = true;

-                                // FILTER - GROUPBY - APPROACH 

-                                var j = 0;

-                                var grpName = '';

-                                if(scope.member.child[0].groupName !== undefined){

-                                    grpName = scope.member.child[0].groupName;

-                                }

-                                else{

-                                    var toSlice = scope.member.child[0].name.search(' ');

-                                    grpName = scope.member.child[0].name.slice(0, toSlice);

-                                }

-

-                                for (i = 0; i < scope.member.child.length; i += scope.member.divide) {

-                                    j = 0;

-                                    for (j = j + i; j < (i + scope.member.divide); j++) {                                        

-                                        if (j === scope.member.child.length) {

-                                            scope.member.child[j - 1].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);

-                                            break;

-                                            

-                                            if(scope.member.child[j-1].active && scope.member.child[j-1].active===true){

-                                                scope.member.child[j-1].activeGrp = true;

-                                            };

-                                            

-                                        }

-                                        if (i + scope.member.divide > scope.member.child.length) {

-                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);

-                                            if(scope.member.child[j].active && scope.member.child[j].active===true){

-                                                scope.member.child[j].activeGrp = true;

-                                            };

-

-                                        } else {

-                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (i + scope.member.divide);

-                                            if(scope.member.child[j].active && scope.member.child[j].active===true){

-                                                scope.member.child[j].activeGrp = true;

-                                            };

-                                        }

-                                    }

-                                }

-                                if(scope.member.divide){

-                                    element.append("<b2b-tree-nav collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-nav>");

-                                } else {

-                                    element.append("<b2b-tree-nav collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-nav>");

-                                }

-                                $compile(element.contents())(scope);

-                                if(scope.member.active && scope.member.active === true){

-                                    element.find('i').eq(0).removeClass('icon-primary-collapsed');

-                                };

-                                if(scope.member.selected && scope.member.selected === true){

-                                    element.attr('aria-selected', true);

-                                };

-                                if( scope.member.active && scope.member.active == undefined){

-                                    element.find('i').eq(0).addClass('icon-primary-collapsed');

-                                };

-                            }

-                        }

-                };

-                //Below condition opens node for opening on json load.

-                if(scope.member.active && scope.member.active == true){

-                    scope.showChild();

-                };

-                if(scope.member.active == undefined && !element.find('a').eq(0).hasClass('active') && scope.member.child !== undefined){

-                    element.find('i').eq(0).addClass('icon-primary-collapsed');

-                }

-                else if(scope.member.child == undefined){

-                    element.find('i').eq(0).addClass('icon-primary-circle');

-                };

-                element.bind('keydown', function (evt) {

-                    switch (evt.keyCode) {

-                        case keymap.KEY.ENTER:

-                            if (element.hasClass('bg') && scope.member.onSelect !== undefined) {

-                                scope.member.onSelect(scope.member);

-                            }

-                            evt.stopPropagation();

-                            break;

-                        default: 

-                            break;                            

-                    }

-                    

-                });

-                //else getting true in every case .. so better use switch case .. that makes more sense you dumb.

-                element.bind('click', function (evt) {

-                    scope.showChild();

-                    var expandFunc = scope.member.onExpand;

-                    

-                    //onSelect

-                        if (element.hasClass('bg') && scope.member.onSelect !== undefined) {

-                                    scope.member.onSelect(scope.member);

-                                }

-                        if (element.find('a').eq(0).hasClass('active') && scope.member.onExpand !== undefined) {

-                           var eValue = scope.member.onExpand(scope.member);

-                        }

-                        if (!element.find('a').eq(0).hasClass('active') && scope.member.onCollapse !== undefined) {

-                            scope.member.onCollapse(scope.member);

-                        }

-                });

-            }

-        }

-}])

-    .directive('b2bTreeLink', ['keymap', '$timeout', function (keymap, $timeout) {

-        return {

-            restrict: 'A',

-            link: function (scope, element, attr, ctrl) {

-                var rootE, parentE, upE, downE;

-                var closeOthersUp = function (elem,isKeyPress,passiveClose) {

-                    //For accordion functionality on sibling nodes

-                    if (elem.find('a').eq(0).hasClass('active')) {

-                        activeToggle(elem,isKeyPress,passiveClose);

-                        return;

-                    }

-                    if (elem.hasClass('bg') && !isKeyPress) {

-                        elem.removeClass('bg');

-                        if (elem.attr('aria-selected')) {

-                            elem.attr('aria-selected', 'false');

-                        }                        

-                    }

-                    if (elem[0].previousElementSibling !== null) {

-                        closeOthersUp(angular.element(elem[0].previousElementSibling),isKeyPress);

-                    }

-                };

-                var closeOthersDown = function (elem,isKeyPress,passiveClose) {

-                    //For accordion functionality on sibling nodes

-                    if (elem.find('a').eq(0).hasClass('active')) {

-                        activeToggle(elem,isKeyPress,passiveClose);

-                        return;

-                    }

-                    if (elem.hasClass('bg') && !isKeyPress) {

-                        elem.removeClass('bg');

-                        if (elem.attr('aria-selected')) {

-                            elem.attr('aria-selected', 'false');

-                        }                        

-                    }

-                    if (elem[0].nextElementSibling !== null) {

-                        closeOthersDown(angular.element(elem[0].nextElementSibling),isKeyPress);

-                    }

-                };

-

-               

-                var removeBackground = function(elem){

-

-                    if(elem.hasClass('b2b-tree')){

-                        angular.element(elem[0].getElementsByClassName('bg')).removeClass('bg');

-                        return;

-                    }else{

-                        removeBackground(elem.parent().parent());

-                    }

-

-                };

-

-/**

-* These two functions used for setting heights on parent nodes as the child node closes

-* Retaining this code for future reference

-

-                var addParentHeight = function(e, h) {

-                    var parentLi = e.parent().parent();

-                    var parentUl = e.parent();

-                    if(!parentLi.hasClass('b2b-tree')) {

-                        var addHeight = parentUl[0].offsetHeight + h;

-                        parentLi.find('ul').eq(0).css({

-                            height: addHeight+'px'

-                        })

-                        addParentHeight(parentLi, h);

-                    }                    

-                };

-

-                var removeParentHeight = function(e, h) {

-                    var parentLi = e.parent().parent();

-                    var parentUl = e.parent();

-                    if(!parentLi.hasClass('b2b-tree')) {

-                        var addHeight = parentUl[0].offsetHeight - h;

-                        parentLi.find('ul').eq(0).css({

-                            height: addHeight+'px'

-                        })

-                        removeParentHeight(parentLi, h);

-                    }

-                };

-*/          

-

-            // isKeyPress - to notify that the function is called by Right Key press

-            // passiveClose -  prevents firing of oncollapse events during the action

-            // of expand function(check the function definition)

-

-                var activeToggle = function (elem,isKeyPress,passiveClose) {

-                    var element = elem.find('a').eq(0);

-                    if (element.hasClass('active')) {

-                        if(!isKeyPress){

-                            elem.removeClass('bg');

-                        }

-                        

-                        if (elem.attr('aria-selected') && !isKeyPress) {

-                            elem.attr('aria-selected', 'false');

-                        }

-                        if (!element.find('i').eq(0).hasClass('icon-primary-circle')) {

-                            if(isKeyPress && scope.member){

-                                if (scope.member.onCollapse !== undefined && !passiveClose) {

-                                    scope.member.onCollapse(scope.member);

-                                }

-                            }

-                            element.removeClass('active');

-                            elem.attr('aria-expanded', 'false');

-                            element.find('i').eq(0).removeClass('icon-primary-expanded');

-                            element.find('i').eq(0).addClass('icon-primary-collapsed');

-                            //For Animation: below commented code is used to manually set height of UL to zero 

-                            //retaining code for future reference

-                            /*

-                            var totalHeight = elem.find('ul')[0].scrollHeight;

-                            removeParentHeight(elem, totalHeight);

-                            elem.find('ul').eq(0).css({

-                                height: null

-                            });*/

-                        }

-                    } else {

-                        if(!isKeyPress){

-                            elem.addClass('bg');

-                            elem.attr('aria-selected', 'true');

-                        }

-                        

-                        if (!element.find('i').eq(0).hasClass('icon-primary-circle')) {

-                            if(isKeyPress){

-                                if(typeof scope.showChild === 'function' ){

-                                scope.showChild();

-                                }

-                                if(scope.member){

-                                    if (scope.member.onExpand !== undefined) {

-                                        scope.member.onExpand(scope.member);

-                                    }

-                                }

-                            }

-                            element.addClass('active');

-                            elem.attr('aria-expanded', 'true');

-                            element.find('i').eq(0).removeClass('icon-primary-collapsed');

-                            element.find('i').eq(0).addClass('icon-primary-expanded');

-                            //For Animation: below commented code is used to manually set height of the ul generatedon the click of parent LI.

-                            //retaining code for future reference

-                            /*                            

-                            var totalHeight = elem.find('ul')[0].scrollHeight;

-                            addParentHeight(elem, totalHeight);

-                            elem.find('ul').eq(0).css({

-                                height: totalHeight+'px'

-                            });*/

-                            

-                        }

-                    }

-                };

-                element.bind('click', function (evt) {

-                    //first we close others and then we open the clicked element

-                    if (element[0].previousElementSibling) {

-                        closeOthersUp(angular.element(element[0].previousElementSibling));

-                    }

-                    if (element[0].nextElementSibling) {

-                        closeOthersDown(angular.element(element[0].nextElementSibling));

-                    }

-                    removeBackground(element);

-                    activeToggle(element);                    

-                    

-                    evt.stopPropagation();                    

-                });

-                //default root tree element tabindex set zero

-                if (element.parent().parent().hasClass('b2b-tree') && (element.parent()[0].previousElementSibling === null)) {

-                    element.attr('tabindex', 0);

-                }

-                //check root via class

-                var isRoot = function (elem) {

-                    if (elem.parent().parent().eq(0).hasClass('b2b-tree')) {

-                        return true;

-                    } else {

-                        return false;

-                    }

-                };

-                var findRoot = function (elem) {

-                    if (isRoot(elem)) {

-                        rootE = elem;

-                        return;

-                    }

-                    findRoot(elem.parent());

-                };

-

-                var findPreActive = function (elem) {

-

-                    if (!(elem.hasClass("active"))) {

-                        return;

-                    } else {

-                        var childElems = angular.element(elem[0].nextElementSibling.children);

-                        lastE = angular.element(childElems[childElems.length - 1]);

-                        if (lastE.find('a').eq(0).hasClass('active')) {

-                            findPreActive(lastE.find('a').eq(0));

-                        }

-                        upE = lastE;

-                    }

-                };

-

-                var findUp = function (elem) {

-                    if (isRoot(elem)) {

-                        upE = elem;

-                        return;

-                    }

-                    if (elem[0].previousElementSibling !== null && !angular.element(elem[0].previousElementSibling).hasClass('tree-hide')) {

-                        upE = angular.element(elem[0].previousElementSibling);

-                        if (upE.find('a').eq(0).hasClass('active')) {

-                            findPreActive(upE.find('a').eq(0));

-                        }

-                    } else {

-                        upE = elem.parent().parent();

-                    }

-                };

-

-                var downElement = function (elem) {

-                    if (elem.next().hasClass('tree-hide')) {

-                        downElement(elem.next());

-                    } else {

-                        downE = elem.next();

-                    }

-                }

-                var isBottomElem = false;

-                var downParent = function(liElem){

-                    if(liElem.eq(0).parent().parent().eq(0).hasClass('b2b-tree')){

-                        isBottomElem = true;

-                        return;

-                    }

-                    if(liElem.next().length !== 0){

-                        downE = liElem.next().eq(0);

-                        return;

-                    }

-                    else {

-                        downParent(liElem.parent().parent());

-                    }

-                }

-                

-                var findDown = function (elem) {

-                    if (isRoot(elem.parent()) && !elem.hasClass('active')) {

-                        downE = elem.parent();

-                        return;

-                    }

-                    if (elem.hasClass('active')) {

-                        downE = elem.next().find('li').eq(0);

-                        if (downE.hasClass('tree-hide')) {

-                            downElement(downE);

-                        }

-

-                    } else {

-                        downParent(elem.parent());

-                        if(isBottomElem === true){

-                            downE = elem.parent();

-                            isBottomElem = false;

-                        }

-                    }

-                };

-

-

-                var resetTabPosition = function(element){

-                    findRoot(element);

-                    angular.element(rootE.parent().parent()[0].querySelector("li[tabindex='0']")).attr('tabindex','-1');

-                    var elemToFocus =  rootE.parent().parent()[0].querySelector(".bg")|| rootE;

-

-                    angular.element(elemToFocus).attr('tabindex','0');

-                };

-                // Function to control the expansion of nodes when the user tabs into the tree and

-                // the slected node is not visible

-                var expand = function(elemArr){

-                    var elem= elemArr.pop();

-                    var element = elem.find('a').eq(0);                    

-                    var selectedNode = elem.parent().parent()[0].querySelector(".bg");

-                    if(selectedNode != null){

-                        while(elem){

-                             element = elem.find('a').eq(0);

-                    if(!element.hasClass('active') ){

-

-

-                    if (elem[0].previousElementSibling) {

-                        closeOthersUp(angular.element(elem[0].previousElementSibling),true,true);

-                        }

-                        if (elem[0].nextElementSibling) {

-                            closeOthersDown(angular.element(elem[0].nextElementSibling),true,true);

-                        }

-

-                         if (!element.find('i').eq(0).hasClass('icon-primary-circle')) {

-                            if(typeof scope.showChild === 'function' ){

-                                scope.showChild();

-                            }

-                            element.addClass('active');

-                            elem.attr('aria-expanded', 'true');

-                            element.find('i').eq(0).removeClass('icon-primary-collapsed');

-                            element.find('i').eq(0).addClass('icon-primary-expanded');

-                            }

-                          

-                          }   

-                          elem = elemArr.pop();

-                        }                      

-                        

-                    }else{

-                        return;

-                    }                   

-                };

-

-                element.find('a').eq(0).bind('mouseenter', function (evt) {

-                    angular.forEach(document.querySelectorAll('.activeTooltip'), function(value, key) {

-                        angular.element(value).removeClass('activeTooltip') 

-                    });

-                    element.addClass('activeTooltip');

-                });

-                element.find('a').eq(0).bind('mouseleave', function (evt) {

-                    element.removeClass('activeTooltip');

-                });

-                element.bind('focus', function (evt) {

-                    angular.forEach(document.querySelectorAll('.activeTooltip'), function(value, key) {

-                        angular.element(value).removeClass('activeTooltip') 

-                    });

-                    element.addClass('activeTooltip');

-                });

-                element.bind('blur', function (evt) {

-                    element.removeClass('activeTooltip');

-                });

-                element.bind('keydown', function (evt) {

-                    switch (evt.keyCode) {

-                    case keymap.KEY.HOME:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        element.attr('tabindex', -1);

-                        findRoot(element);

-                        rootE.eq(0).attr('tabindex', 0);

-                        rootE[0].focus();

-                        break;

-                    case keymap.KEY.LEFT:

-                        evt.preventDefault();

-                        evt.stopPropagation(); 

-                      

-                        if(element.find('a').eq(0).hasClass('active')){

-                            if (element[0].previousElementSibling) {

-                                closeOthersUp(angular.element(element[0].previousElementSibling),true);

-                            }

-                            if (element[0].nextElementSibling) {

-                                closeOthersDown(angular.element(element[0].nextElementSibling),true);

-                             }

-                             activeToggle(element,true);

-                                return;

-                        }

-                            element.attr('tabindex', -1);

-                            parentE = element.parent().parent();

-                            parentE.attr('tabindex', 0);

-                            parentE[0].focus();

-                        break;

-                    case keymap.KEY.UP:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        element.attr('tabindex', -1);

-                        findUp(element);

-                        upE.eq(0).attr('tabindex', 0);

-                        upE[0].focus();

-                        break;

-                    case keymap.KEY.RIGHT:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        if(element.find('i').eq(0).hasClass('icon-primary-circle')){

-                            break;

-                        }    

-                        if (!element.find('a').eq(0).hasClass('active')) {

-                            if (element[0].previousElementSibling) {

-                        closeOthersUp(angular.element(element[0].previousElementSibling),true);

-                        }

-                        if (element[0].nextElementSibling) {

-                            closeOthersDown(angular.element(element[0].nextElementSibling),true);

-                        }

-                        activeToggle(element,true);

-                    

-                        }

-                        else {

-                            element.attr('tabindex', -1);

-                            findDown(element.find('a').eq(0));

-                            downE.eq(0).attr('tabindex', 0);

-                            downE[0].focus();                            

-                        }                        

-                        break;

-                    case keymap.KEY.DOWN:

-                        evt.preventDefault();

-                        element.attr('tabindex', -1);

-                        findDown(element.find('a').eq(0));

-                        downE.eq(0).attr('tabindex', 0);

-                        downE[0].focus();

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.ENTER:

-                        var isSelectedElem = element.hasClass('bg');

-                        var enterFunc = function(element){

-                            if (isSelectedElem) {

-                                element.removeClass('bg');

-                                if (element.attr('aria-selected')) {

-                                    element.attr('aria-selected', 'false');

-                                }                        

-                            }

-                            else {

-                                element.addClass('bg');

-                                element.attr('aria-selected', 'true');                                   

-                            }  

-                        };                            

-                        if (element[0].previousElementSibling) {

-                            closeOthersUp(angular.element(element[0].previousElementSibling));

-                        }

-                        if (element[0].nextElementSibling) {

-                            closeOthersDown(angular.element(element[0].nextElementSibling));

-                        }                   

-                        

-                        removeBackground(element);

-                        enterFunc(element);

-                        evt.stopPropagation();                                                      

-                        break;

-                    case keymap.KEY.TAB:

-                        $timeout(function(){

-                            resetTabPosition(element);

-                        },0);

-                         evt.stopPropagation(); 

-                        

-                        break;

-                    default:

-                        break;

-                    }

-                });

-            element.bind('keyup',function(evt){

-                if(evt.keyCode === keymap.KEY.TAB){

-                  

-                        var tempElem = element;

-                        var elemArr = [];

-                        while(!tempElem.hasClass('b2b-tree')){

-                            elemArr.push(tempElem);

-                            tempElem = tempElem.parent().parent();

-                        }

-                        elemArr.push(tempElem);

-                      

-                        expand(elemArr);                    

-                }

-                 evt.stopPropagation(); 

-            });

-            }

-        };

-    }]);

-/**

- * @ngdoc directive

- * @name Navigation.att:Tree nodes with checkboxes

- *

- * @param {String} setRole - The value needs to be "tree". This is required to incorporate CATO requirements.

- * @param {boolean} groupIt - The value needs to be "false" for top-level tree rendered. 

- * @param {Object} collection -  The JSON object of tree to be rendered.

- * @description

- *  <file src="src/treeNodeCheckbox/docs/readme.md" />

- *

- * @usage

- *      <div class="b2b-tree-checkbox">

- *                <b2b-tree-node-checkbox collection="treeStructure" set-role="tree" group-it="false"></b2b-tree-node-checkbox>

- *            </div>

- * @example

- *  <section id="code">

-        <example module="b2b.att">

-            <file src="src/treeNodeCheckbox/docs/demo.html" />

-            <file src="src/treeNodeCheckbox/docs/demo.js" />

-       </example>

-    </section>

- *

- */

-angular.module('b2b.att.treeNodeCheckbox', ['b2b.att.utilities'])

-    .directive('b2bTreeNodeCheckbox', function () {

-        return {

-            restrict: "E",

-            replace: true,

-            scope: {

-                collection: '=',

-                groupIt: '=',

-                setRole: '@'

-            },

-            templateUrl: function (element, attrs) {

-                if (attrs.groupIt === 'true') {

-                    return "b2bTemplate/treeNodeCheckbox/groupedTree.html";

-                } else {

-                    return "b2bTemplate/treeNodeCheckbox/ungroupedTree.html";

-                }

-            },

-            link: function (scope) {

-                if (!(scope.setRole === 'tree')) {

-                    scope.setRole = 'group';

-                }

-            }

-        }

-    })

-    .directive('b2bTreeMember', ['$compile', '$timeout', 'keymap', function ($compile, $timeout, keymap) {

-        return {

-            restrict: "E",

-            replace: true,

-            scope: {

-                member: '=',

-                groupIt: '='

-            },

-            templateUrl: 'b2bTemplate/treeNodeCheckbox/treeMember.html',

-            link: function (scope, element, attrs) {

-                scope.elemArr = [];

-                var removeRootTabIndex = function (elem) {

-                    if (elem.parent().parent().eq(0).hasClass('b2b-tree-checkbox')) {

-                        elem.attr('tabindex', -1);                        

-                        return;

-                    }

-                    removeRootTabIndex(elem.parent());

-                };

-                scope.$watch('member.child', function(newVal, oldVal){                  

-                    if(newVal !== oldVal){

-                        scope.showChild();

-                    };

-                });

-

-                var checkedCount = 0;

-                var nonCheckedCount = 0;

-                var checkBoxesCount = 0;

-

-                if(element.find('a').eq(0).find('input')){

-                    if(scope.member.indeterminate){

-                        element.find('a').eq(0).find('input').prop('indeterminate', true);

-                        element.attr('aria-checked',"mixed");

-                    }

-                    element.attr('aria-checked',scope.member.isSelected);

-                }

-

-                element.find('a').eq(0).find('input').bind('change',function(){

-                    scope.member.indeterminate = false;

-                    downwardModalUpdate(scope.member);

-                    downwardSelection(element);

-                    upwardSelection(element);

-                    element.attr('aria-checked',scope.member.isSelected);

-                     if (scope.member.onSelect !== undefined) {

-                        scope.member.onSelect(scope.member);

-                    }

-                });

-

-                element.find('a').eq(0).find('input').bind('click',function(){

-                    var elem = angular.element(this);

-                    if(scope.member.indeterminate){

-                        scope.member.indeterminate = false;

-                        scope.member.isSelected = true;

-                        elem.prop('indeterminate', false);

-                        elem.prop('checked', true);

-                        elem.triggerHandler('change');

-                    }

-                });

-

-                var groupNode = false;

-                var checkedTreeNode = false;

-

-                var isCheckboxSelected = function(elem){

-                    checkedTreeNode = false;

-                    checkedTreeNode = angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.treeCheckBox').checked;

-                }

-

-                var findCheckbox = function(elem){

-                    return angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.treeCheckBox');

-                }

-

-                var updateGrpNodeCheckboxes = function(elem, checked){

-                    angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.treeCheckBox').checked = checked;

-                }

-

-                

-                var isGroupNode = function(elem){

-                    groupNode = false;

-                    if(angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.grpTreeCheckbox')){

-                        groupNode = true;

-                    }

-                }

-

-                var downwardModalUpdate = function(curMember){

-                    angular.forEach(curMember.child, function(childMember, key) {

-                        childMember.isSelected = curMember.isSelected;

-                        childMember.indeterminate = false;

-                        if(angular.isArray(childMember.child) && scope.member.child.length > 0){

-                            downwardModalUpdate(childMember);

-                        }

-                    });

-                }

-

-                var downwardSelection = function(elem){

-                    if(findCheckbox(elem)){

-                        isCheckboxSelected(elem)

-                    } 

-                    if(angular.element(elem).find('ul').length > 0){

-                        var childNodes = angular.element(elem).find('ul').eq(0).children('li');

-                        for(var i=0; i<childNodes.length; i++){

-                            if(findCheckbox(childNodes[i])){

-                                isGroupNode(childNodes[i]);

-                                angular.element(findCheckbox(childNodes[i])).prop('indeterminate', false);

-                                angular.element(childNodes[i]).attr('aria-checked',checkedTreeNode);

-                                if(groupNode){

-                                    updateGrpNodeCheckboxes(childNodes[i],checkedTreeNode);

-                                }else{

-                                    angular.element(childNodes[i]).scope().member.isSelected = checkedTreeNode;

-                                    angular.element(childNodes[i]).scope().member.indeterminate = false

-                                    angular.element(childNodes[i]).scope().$apply();

-                                }

-                                downwardSelection(childNodes[i]);

-                            }

-                        }

-

-                    }

-                }

-                var upwardSelection = function(elem){

-                    var childNodes = elem.parent().parent().find('ul').eq(0).children('li');

-                    checkedCount = 0;

-                    nonCheckedCount = 0;

-                    checkBoxesCount = 0;    

-                    for(i=0; i<childNodes.length; i++){

-                        if(findCheckbox(childNodes[i])){

-                            isGroupNode(childNodes[i]);

-                            isCheckboxSelected(childNodes[i]);

-                            checkBoxesCount++;

-                            if(checkedTreeNode){

-                                checkedCount++;

-                            }else if(!angular.element(angular.element(angular.element(childNodes[i]).find('a').eq(0))[0].querySelector('input.treeCheckBox')).prop('indeterminate')){

-                                nonCheckedCount++;

-                            }

-                        }

-                    }

-                    var parentNodeScope;

-                    parentNodeScope = angular.element(elem.parent().parent()).scope();

-                    if(findCheckbox(elem.parent().parent())){

-                        if(nonCheckedCount == checkBoxesCount){

-                            angular.element(findCheckbox(elem.parent().parent())).prop('indeterminate', false);

-                            if(parentNodeScope &&  parentNodeScope.member){

-                                parentNodeScope.member.isSelected = false;

-                                parentNodeScope.member.indeterminate = false;

-                            }else{

-                                updateGrpNodeCheckboxes(elem.parent().parent(),false);

-                            }

-                            angular.element(elem.parent().parent()).attr('aria-checked',false);

-                        }else if(checkedCount == checkBoxesCount){

-                            angular.element(findCheckbox(elem.parent().parent())).prop('indeterminate', false);

-                            if(parentNodeScope &&  parentNodeScope.member){

-                                parentNodeScope.member.isSelected = true;

-                                parentNodeScope.member.indeterminate = false;

-                            }else{

-                                updateGrpNodeCheckboxes(elem.parent().parent(),true);

-                            }

-                            angular.element(elem.parent().parent()).attr('aria-checked',true);

-                        }else{

-                            angular.element(findCheckbox(elem.parent().parent())).prop('indeterminate', true);

-                            if(parentNodeScope &&  parentNodeScope.member){

-                                parentNodeScope.member.isSelected = false;

-                                parentNodeScope.member.indeterminate = true;

-                            }else{

-                                updateGrpNodeCheckboxes(elem.parent().parent(),false);

-                            }

-                            angular.element(elem.parent().parent()).attr('aria-checked',"mixed");

-                        }

-                        if(parentNodeScope &&  parentNodeScope.member){

-                            parentNodeScope.$apply();

-                        }        

-                    }

-                    

-                    

-                    

-                    if(elem.parent().parent().attr('role') == "treeitem"){

-                        upwardSelection(elem.parent().parent());

-                    }

-                }

-

-                scope.showChild = function () {

-                        if (!element.hasClass('grouped')) {

-                            if (angular.isArray(scope.member.child) && scope.member.child.length > 0 && (scope.member.divide === undefined || scope.member.child.length < scope.member.divide)) {

-                                scope.groupIt = false;

-                                element.addClass('grouped');

-                                element.append("<b2b-tree-node-checkbox collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-node-checkbox>");

-                                $compile(element.contents())(scope);

-                                if(scope.member.active && scope.member.active === true){

-                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-collapsed');

-                                };

-                                if(scope.member.selected && scope.member.selected === true){

-                                    element.attr('tabindex', 0);

-                                    removeRootTabIndex(element);

-                                };

-                                if(scope.member.active && scope.member.active == undefined){

-                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');

-                                };

-                            } else if (scope.member.child && scope.member.divide && scope.member.child.length > scope.member.divide) {

-                                element.addClass('grouped');

-                                scope.groupIt = true;

-                                var j = 0;

-                                var grpName = '';

-                                if(scope.member.child[0].groupName !== undefined){

-                                    grpName = scope.member.child[0].groupName;

-                                }

-                                else{

-                                    var toSlice = scope.member.child[0].name.search(' ');

-                                    grpName = scope.member.child[0].name.slice(0, toSlice);

-                                }

-

-                                for (i = 0; i < scope.member.child.length; i += scope.member.divide) {

-                                    j = 0;

-                                    for (j = j + i; j < (i + scope.member.divide); j++) {                                        

-                                        if (j === scope.member.child.length) {

-                                            scope.member.child[j - 1].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);

-                                            break;

-                                            

-                                            if(scope.member.child[j-1].active && scope.member.child[j-1].active===true){

-                                                scope.member.child[j-1].activeGrp = true;

-                                            };

-                                            

-                                        }

-                                        if (i + scope.member.divide > scope.member.child.length) {

-                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);

-                                            if(scope.member.child[j].active && scope.member.child[j].active===true){

-                                                scope.member.child[j].activeGrp = true;

-                                            };

-

-                                        } else {

-                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (i + scope.member.divide);

-                                            if(scope.member.child[j].active && scope.member.child[j].active===true){

-                                                scope.member.child[j].activeGrp = true;

-                                            };

-                                        }

-                                    }

-                                }

-                                if(scope.member.divide){

-                                    element.append("<b2b-tree-node-checkbox collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-node-checkbox>");

-                                } else {

-                                    element.append("<b2b-tree-node-checkbox collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-node-checkbox>");

-                                }

-                                $compile(element.contents())(scope);

-                                if(scope.member.active && scope.member.active === true){

-                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-collapsed');

-                                };

-                                

-                                if( scope.member.active && scope.member.active == undefined){

-                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');

-                                };

-                            }

-                        }

-                        $timeout(function () {

-                            if(!scope.member.indeterminate){

-                                downwardSelection(element);

-                            }    

-                        });  

-

-                };

-                

-                if(scope.member.active && scope.member.active == true){

-                    scope.showChild();

-                };

-                if(scope.member.active == undefined && !element.find('a').eq(0).hasClass('active') && scope.member.child !== undefined){

-                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');

-                }

-                else if(scope.member.child == undefined){

-                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-circle');

-                    if(scope.$parent.$index === 0) {

-                        element.find('a').eq(0).append('<span class="first-link"></span>');

-                    };

-                };

-                

-                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).bind('click', function (evt) {

-                    scope.showChild();

-                    var expandFunc = scope.member.onExpand;

-                    if (element.find('a').eq(0).hasClass('active') && scope.member.onExpand !== undefined) {

-                       var eValue = scope.member.onExpand(scope.member);

-                    }

-                    if (!element.find('a').eq(0).hasClass('active') && scope.member.onCollapse !== undefined) {

-                        scope.member.onCollapse(scope.member);

-                    }

-                });

-

-                angular.element(element[0].querySelectorAll('.treeNodeName')).eq(0).bind('click', function (evt) {

-

-                });

-                

-            }

-        }

-}])

-    .directive('b2bTreeNodeLink', ['keymap', '$timeout', function (keymap, $timeout) {

-        return {

-            restrict: 'A',

-            link: function (scope, element, attr, ctrl) {

-                var rootE, parentE, upE, downE;

-                var closeOthersUp = function (elem) {

-                    

-                    if (elem.find('a').eq(0).hasClass('active')) {

-                        activeToggle(elem);

-                        return;

-                    }

-                    if (elem.hasClass('bg')) {

-                        elem.removeClass('bg');

-                    }

-                    if (elem[0].previousElementSibling !== null) {

-                        closeOthersUp(angular.element(elem[0].previousElementSibling));

-                    }

-                };

-                var closeOthersDown = function (elem) {

-                    

-                    if (elem.find('a').eq(0).hasClass('active')) {

-                        activeToggle(elem);

-                        return;

-                    }

-                    if (elem.hasClass('bg')) {

-                        elem.removeClass('bg');

-                    }

-                    if (elem[0].nextElementSibling !== null) {

-                        closeOthersDown(angular.element(elem[0].nextElementSibling));

-                    }

-                };

-

-                var removeBackgroundUp = function (elem) {

-                    

-                    if (elem.hasClass('b2b-tree-checkbox')) {

-                        return;

-                    } else {

-                        elem.parent().parent().removeClass('bg');

-                        removeBackgroundUp(elem.parent().parent());

-                    }

-                };

-

-                var removeBackgroundDown = function (elem) {

-                    

-                    angular.element(elem[0].querySelector('.bg')).removeClass('bg');

-                };

-

-

-

-                var activeToggle = function (elem) {

-                    var element = elem.find('a').eq(0);

-                    if (element.hasClass('active')) {

-                        elem.removeClass('bg');

-                        if (!angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).hasClass('icon-primary-circle')) {

-                            element.removeClass('active');

-                            elem.attr('aria-expanded', 'false');

-                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-expanded');

-                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');

-                        }

-                    } else {

-                        elem.addClass('bg');

-                        if (!angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).hasClass('icon-primary-circle')) {

-                            element.addClass('active');

-                            elem.attr('aria-expanded', 'true');

-                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-collapsed');

-                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-expanded');

-                        }

-                    }

-                };

-                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).bind('click', function (evt) {

-                    

-                        if (element[0].previousElementSibling) {

-                            closeOthersUp(angular.element(element[0].previousElementSibling));

-                        }

-                        if (element[0].nextElementSibling) {

-                            closeOthersDown(angular.element(element[0].nextElementSibling));

-                        }

-

-                        activeToggle(element);

-

-                    removeBackgroundDown(element);

-                    removeBackgroundUp(element);

-                    evt.stopPropagation();                    

-                });

-                

-                if (element.parent().parent().hasClass('b2b-tree-checkbox') && (element.parent()[0].previousElementSibling === null)) {

-                    element.attr('tabindex', 0);

-                }

-                

-                var isRoot = function (elem) {

-                    if (elem.parent().parent().eq(0).hasClass('b2b-tree-checkbox')) {

-                        return true;

-                    } else {

-                        return false;

-                    }

-                };

-                var findRoot = function (elem) {

-                    if (isRoot(elem)) {

-                        rootE = elem;

-                        return;

-                    }

-                    findRoot(elem.parent());

-                };

-

-                var findPreActive = function (elem) {

-

-                    if (!(elem.hasClass("active"))) {

-                        return;

-                    } else {

-                        var childElems = angular.element(elem[0].nextElementSibling.children);

-                        lastE = angular.element(childElems[childElems.length - 1]);

-                        if (lastE.find('a').eq(0).hasClass('active')) {

-                            findPreActive(lastE.find('a').eq(0));

-                        }

-                        upE = lastE;

-                    }

-                };

-

-                var findUp = function (elem) {

-                    if (isRoot(elem)) {

-                        upE = elem;

-                        return;

-                    }

-                    if (elem[0].previousElementSibling !== null && !angular.element(elem[0].previousElementSibling).hasClass('tree-hide')) {

-                        upE = angular.element(elem[0].previousElementSibling);

-                        if (upE.find('a').eq(0).hasClass('active')) {

-                            findPreActive(upE.find('a').eq(0));

-                        }

-                    } else {

-                        upE = elem.parent().parent();

-                    }

-                };

-

-                var downElement = function (elem) {

-                    if (elem.next().hasClass('tree-hide')) {

-                        downElement(elem.next());

-                    } else {

-                        downE = elem.next();

-                    }

-                }

-                var isBottomElem = false;

-                var downParent = function(liElem){

-                    if(liElem.eq(0).parent().parent().eq(0).hasClass('b2b-tree-checkbox')){

-                        isBottomElem = true;

-                        return;

-                    }

-                    if(liElem.next().length !== 0){

-                        downE = liElem.next().eq(0);

-                        return;

-                    }

-                    else {

-                        downParent(liElem.parent().parent());

-                    }

-                }

-                

-                var findDown = function (elem) {

-                    if (isRoot(elem.parent()) && !elem.hasClass('active')) {

-                        downE = elem.parent();

-                        return;

-                    }

-                    if (elem.hasClass('active')) {

-                        downE = elem.next().find('li').eq(0);

-                        if (downE.hasClass('tree-hide')) {

-                            downElement(downE);

-                        }

-

-                    } else {

-                        downParent(elem.parent());

-                        if(isBottomElem === true){

-                            downE = elem.parent();

-                            isBottomElem = false;

-                        }

-                    }

-                };

-                element.bind('keydown', function (evt) {

-                    switch (evt.keyCode) {

-                    case keymap.KEY.HOME:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        element.attr('tabindex', -1);

-                        findRoot(element);

-                        rootE.eq(0).attr('tabindex', 0);

-                        rootE[0].focus();

-                        break;

-                    case keymap.KEY.LEFT:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        if (!isRoot(element)) {

-                            if(element.find('a').eq(0).hasClass('active')){

-                                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).triggerHandler('click');

-                                return;

-                            }

-                            element.attr('tabindex', -1);

-                            parentE = element.parent().parent();

-                            parentE.attr('tabindex', 0);

-                            parentE[0].focus();

-                        } else {

-                            if (element.find('a').eq(0).hasClass('active')) {

-                                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).triggerHandler('click');

-                            }

-                        };

-                        break;

-                    case keymap.KEY.UP:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        element.attr('tabindex', -1);

-                        findUp(element);

-                        upE.eq(0).attr('tabindex', 0);

-                        upE[0].focus();

-                        break;

-                    case keymap.KEY.RIGHT:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        if(angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).hasClass('icon-primary-circle')){

-                            break;

-                        }    

-                        if (!element.find('a').eq(0).hasClass('active')) {

-                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).triggerHandler('click');

-                        }

-                        else {

-                            element.attr('tabindex', -1);

-                            findDown(element.find('a').eq(0));

-                            downE.eq(0).attr('tabindex', 0);

-                            downE[0].focus();                            

-                        }                        

-                        break;

-                    case keymap.KEY.DOWN:

-                        evt.preventDefault();

-                        element.attr('tabindex', -1);

-                        findDown(element.find('a').eq(0));

-                        downE.eq(0).attr('tabindex', 0);

-                        downE[0].focus();

-                        evt.stopPropagation();

-                        break;

-                    case keymap.KEY.SPACE:

-                    case keymap.KEY.ENTER:

-                        evt.preventDefault();

-                        evt.stopPropagation();

-                        if(angular.isDefined(element.scope().member.isSelected)){

-                            element.scope().member.isSelected = !element.scope().member.isSelected;

-                            element.scope().member.indeterminate = false;

-                            element.scope().$apply();

-                            element.find('a').eq(0).find('input').prop('indeterminate', false);

-                            element.find('a').eq(0).find('input').triggerHandler('change');

-                        }

-                        break;    

-                    default:

-                        break;

-                    }

-                });

-            }

-        };

-    }]);

-/*!

- * VERSION: 1.7.3

- * DATE: 2014-01-14

- * UPDATES AND DOCS AT: http://www.greensock.com

- *

- * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.

- * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for

- * Club GreenSock members, the software agreement that was issued with your membership.

- * 

- * @author: Jack Doyle, jack@greensock.com

- **/

-(window._gsQueue || (window._gsQueue = [])).push( function() {

-

-    "use strict";

-

-    var _doc = document.documentElement,

-        _window = window,

-        _max = function(element, axis) {

-            var dim = (axis === "x") ? "Width" : "Height",

-                scroll = "scroll" + dim,

-                client = "client" + dim,

-                body = document.body;

-            return (element === _window || element === _doc || element === body) ? Math.max(_doc[scroll], body[scroll]) - (_window["inner" + dim] || Math.max(_doc[client], body[client])) : element[scroll] - element["offset" + dim];

-        },

-

-        ScrollToPlugin = window._gsDefine.plugin({

-            propName: "scrollTo",

-            API: 2,

-            version:"1.7.3",

-

-            //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.

-            init: function(target, value, tween) {

-                this._wdw = (target === _window);

-                this._target = target;

-                this._tween = tween;

-                if (typeof(value) !== "object") {

-                    value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y".

-                }

-                this._autoKill = (value.autoKill !== false);

-                this.x = this.xPrev = this.getX();

-                this.y = this.yPrev = this.getY();

-                if (value.x != null) {

-                    this._addTween(this, "x", this.x, (value.x === "max") ? _max(target, "x") : value.x, "scrollTo_x", true);

-                    this._overwriteProps.push("scrollTo_x");

-                } else {

-                    this.skipX = true;

-                }

-                if (value.y != null) {

-                    this._addTween(this, "y", this.y, (value.y === "max") ? _max(target, "y") : value.y, "scrollTo_y", true);

-                    this._overwriteProps.push("scrollTo_y");

-                } else {

-                    this.skipY = true;

-                }

-                return true;

-            },

-

-            //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)

-            set: function(v) {

-                this._super.setRatio.call(this, v);

-

-                var x = (this._wdw || !this.skipX) ? this.getX() : this.xPrev,

-                    y = (this._wdw || !this.skipY) ? this.getY() : this.yPrev,

-                    yDif = y - this.yPrev,

-                    xDif = x - this.xPrev;

-

-                if (this._autoKill) {

-                    //note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match.

-                    if (!this.skipX && (xDif > 7 || xDif < -7) && x < _max(this._target, "x")) {

-                        this.skipX = true; //if the user scrolls separately, we should stop tweening!

-                    }

-                    if (!this.skipY && (yDif > 7 || yDif < -7) && y < _max(this._target, "y")) {

-                        this.skipY = true; //if the user scrolls separately, we should stop tweening!

-                    }

-                    if (this.skipX && this.skipY) {

-                        this._tween.kill();

-                    }

-                }

-                if (this._wdw) {

-                    _window.scrollTo((!this.skipX) ? this.x : x, (!this.skipY) ? this.y : y);

-                } else {

-                    if (!this.skipY) {

-                        this._target.scrollTop = this.y;

-                    }

-                    if (!this.skipX) {

-                        this._target.scrollLeft = this.x;

-                    }

-                }

-                this.xPrev = this.x;

-                this.yPrev = this.y;

-            }

-

-        }),

-        p = ScrollToPlugin.prototype;

-

-    ScrollToPlugin.max = _max;

-

-    p.getX = function() {

-        return (!this._wdw) ? this._target.scrollLeft : (_window.pageXOffset != null) ? _window.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : document.body.scrollLeft;

-    };

-

-    p.getY = function() {

-        return (!this._wdw) ? this._target.scrollTop : (_window.pageYOffset != null) ? _window.pageYOffset : (_doc.scrollTop != null) ? _doc.scrollTop : document.body.scrollTop;

-    };

-

-    p._kill = function(lookup) {

-        if (lookup.scrollTo_x) {

-            this.skipX = true;

-        }

-        if (lookup.scrollTo_y) {

-            this.skipY = true;

-        }

-        return this._super._kill.call(this, lookup);

-    };

-

-}); if (window._gsDefine) { window._gsQueue.pop()(); }

-/*!

- * VERSION: 1.12.1

- * DATE: 2014-06-26

- * UPDATES AND DOCS AT: http://www.greensock.com

- * 

- * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin

- *

- * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.

- * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for

- * Club GreenSock members, the software agreement that was issued with your membership.

- * 

- * @author: Jack Doyle, jack@greensock.com

- **/

-

-(window._gsQueue || (window._gsQueue = [])).push( function() {

-

-    "use strict";

-

-    window._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) {

-

-        var _slice = [].slice,

-            TweenMax = function(target, duration, vars) {

-                TweenLite.call(this, target, duration, vars);

-                this._cycle = 0;

-                this._yoyo = (this.vars.yoyo === true);

-                this._repeat = this.vars.repeat || 0;

-                this._repeatDelay = this.vars.repeatDelay || 0;

-                this._dirty = true; //ensures that if there is any repeat, the totalDuration will get recalculated to accurately report it.

-                this.render = TweenMax.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)

-            },

-            _tinyNum = 0.0000000001,

-            TweenLiteInternals = TweenLite._internals,

-            _isSelector = TweenLiteInternals.isSelector,

-            _isArray = TweenLiteInternals.isArray,

-            p = TweenMax.prototype = TweenLite.to({}, 0.1, {}),

-            _blankArray = [];

-

-        TweenMax.version = "1.12.1";

-        p.constructor = TweenMax;

-        p.kill()._gc = false;

-        TweenMax.killTweensOf = TweenMax.killDelayedCallsTo = TweenLite.killTweensOf;

-        TweenMax.getTweensOf = TweenLite.getTweensOf;

-        TweenMax.lagSmoothing = TweenLite.lagSmoothing;

-        TweenMax.ticker = TweenLite.ticker;

-        TweenMax.render = TweenLite.render;

-

-        p.invalidate = function() {

-            this._yoyo = (this.vars.yoyo === true);

-            this._repeat = this.vars.repeat || 0;

-            this._repeatDelay = this.vars.repeatDelay || 0;

-            this._uncache(true);

-            return TweenLite.prototype.invalidate.call(this);

-        };

-        

-        p.updateTo = function(vars, resetDuration) {

-            var curRatio = this.ratio, p;

-            if (resetDuration && this._startTime < this._timeline._time) {

-                this._startTime = this._timeline._time;

-                this._uncache(false);

-                if (this._gc) {

-                    this._enabled(true, false);

-                } else {

-                    this._timeline.insert(this, this._startTime - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct.

-                }

-            }

-            for (p in vars) {

-                this.vars[p] = vars[p];

-            }

-            if (this._initted) {

-                if (resetDuration) {

-                    this._initted = false;

-                } else {

-                    if (this._gc) {

-                        this._enabled(true, false);

-                    }

-                    if (this._notifyPluginsOfEnabled && this._firstPT) {

-                        TweenLite._onPluginEvent("_onDisable", this); //in case a plugin like MotionBlur must perform some cleanup tasks

-                    }

-                    if (this._time / this._duration > 0.998) { //if the tween has finished (or come extremely close to finishing), we just need to rewind it to 0 and then render it again at the end which forces it to re-initialize (parsing the new vars). We allow tweens that are close to finishing (but haven't quite finished) to work this way too because otherwise, the values are so small when determining where to project the starting values that binary math issues creep in and can make the tween appear to render incorrectly when run backwards. 

-                        var prevTime = this._time;

-                        this.render(0, true, false);

-                        this._initted = false;

-                        this.render(prevTime, true, false);

-                    } else if (this._time > 0) {

-                        this._initted = false;

-                        this._init();

-                        var inv = 1 / (1 - curRatio),

-                            pt = this._firstPT, endValue;

-                        while (pt) {

-                            endValue = pt.s + pt.c; 

-                            pt.c *= inv;

-                            pt.s = endValue - pt.c;

-                            pt = pt._next;

-                        }

-                    }

-                }

-            }

-            return this;

-        };

-                

-        p.render = function(time, suppressEvents, force) {

-            if (!this._initted) if (this._duration === 0 && this.vars.repeat) { //zero duration tweens that render immediately have render() called from TweenLite's constructor, before TweenMax's constructor has finished setting _repeat, _repeatDelay, and _yoyo which are critical in determining totalDuration() so we need to call invalidate() which is a low-kb way to get those set properly.

-                this.invalidate();

-            }

-            var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(),

-                prevTime = this._time,

-                prevTotalTime = this._totalTime, 

-                prevCycle = this._cycle,

-                duration = this._duration,

-                prevRawPrevTime = this._rawPrevTime,

-                isComplete, callback, pt, cycleDuration, r, type, pow, rawPrevTime, i;

-            if (time >= totalDur) {

-                this._totalTime = totalDur;

-                this._cycle = this._repeat;

-                if (this._yoyo && (this._cycle & 1) !== 0) {

-                    this._time = 0;

-                    this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;

-                } else {

-                    this._time = duration;

-                    this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1;

-                }

-                if (!this._reversed) {

-                    isComplete = true;

-                    callback = "onComplete";

-                }

-                if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.

-                    if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate.

-                        time = 0;

-                    }

-                    if (time === 0 || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time) {

-                        force = true;

-                        if (prevRawPrevTime > _tinyNum) {

-                            callback = "onReverseComplete";

-                        }

-                    }

-                    this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                }

-                

-            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.

-                this._totalTime = this._time = this._cycle = 0;

-                this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;

-                if (prevTotalTime !== 0 || (duration === 0 && prevRawPrevTime > 0 && prevRawPrevTime !== _tinyNum)) {

-                    callback = "onReverseComplete";

-                    isComplete = this._reversed;

-                }

-                if (time < 0) {

-                    this._active = false;

-                    if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.

-                        if (prevRawPrevTime >= 0) {

-                            force = true;

-                        }

-                        this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                    }

-                } else if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.

-                    force = true;

-                }

-            } else {

-                this._totalTime = this._time = time;

-                

-                if (this._repeat !== 0) {

-                    cycleDuration = duration + this._repeatDelay;

-                    this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but Flash reports it as 0.79999999!)

-                    if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration) {

-                        this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning)

-                    }

-                    this._time = this._totalTime - (this._cycle * cycleDuration);

-                    if (this._yoyo) if ((this._cycle & 1) !== 0) {

-                        this._time = duration - this._time;

-                    }

-                    if (this._time > duration) {

-                        this._time = duration;

-                    } else if (this._time < 0) {

-                        this._time = 0;

-                    }

-                }

-

-                if (this._easeType) {

-                    r = this._time / duration;

-                    type = this._easeType;

-                    pow = this._easePower;

-                    if (type === 1 || (type === 3 && r >= 0.5)) {

-                        r = 1 - r;

-                    }

-                    if (type === 3) {

-                        r *= 2;

-                    }

-                    if (pow === 1) {

-                        r *= r;

-                    } else if (pow === 2) {

-                        r *= r * r;

-                    } else if (pow === 3) {

-                        r *= r * r * r;

-                    } else if (pow === 4) {

-                        r *= r * r * r * r;

-                    }

-

-                    if (type === 1) {

-                        this.ratio = 1 - r;

-                    } else if (type === 2) {

-                        this.ratio = r;

-                    } else if (this._time / duration < 0.5) {

-                        this.ratio = r / 2;

-                    } else {

-                        this.ratio = 1 - (r / 2);

-                    }

-

-                } else {

-                    this.ratio = this._ease.getRatio(this._time / duration);

-                }

-                

-            }

-                

-            if (prevTime === this._time && !force && prevCycle === this._cycle) {

-                if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate.

-                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);

-                }

-                return;

-            } else if (!this._initted) {

-                this._init();

-                if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example.

-                    return;

-                } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) { //we stick it in the queue for rendering at the very end of the tick - this is a performance optimization because browsers invalidate styles and force a recalculation if you read, write, and then read style data (so it's better to read/read/read/write/write/write than read/write/read/write/read/write). The down side, of course, is that usually you WANT things to render immediately because you may have code running right after that which depends on the change. Like imagine running TweenLite.set(...) and then immediately after that, creating a nother tween that animates the same property to another value; the starting values of that 2nd tween wouldn't be accurate if lazy is true.

-                    this._time = prevTime;

-                    this._totalTime = prevTotalTime;

-                    this._rawPrevTime = prevRawPrevTime;

-                    this._cycle = prevCycle;

-                    TweenLiteInternals.lazyTweens.push(this);

-                    this._lazy = time;

-                    return;

-                }

-                //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently.

-                if (this._time && !isComplete) {

-                    this.ratio = this._ease.getRatio(this._time / duration);

-                } else if (isComplete && this._ease._calcEnd) {

-                    this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1);

-                }

-            }

-            if (this._lazy !== false) {

-                this._lazy = false;

-            }

-

-            if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) {

-                this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done.

-            }

-            if (prevTotalTime === 0) {

-                if (this._initted === 2 && time > 0) {

-                    //this.invalidate();

-                    this._init(); //will just apply overwriting since _initted of (2) means it was a from() tween that had immediateRender:true

-                }

-                if (this._startAt) {

-                    if (time >= 0) {

-                        this._startAt.render(time, suppressEvents, force);

-                    } else if (!callback) {

-                        callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area.

-                    }

-                }

-                if (this.vars.onStart) if (this._totalTime !== 0 || duration === 0) if (!suppressEvents) {

-                    this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);

-                }

-            }

-            

-            pt = this._firstPT;

-            while (pt) {

-                if (pt.f) {

-                    pt.t[pt.p](pt.c * this.ratio + pt.s);

-                } else {

-                    pt.t[pt.p] = pt.c * this.ratio + pt.s;

-                }

-                pt = pt._next;

-            }

-            

-            if (this._onUpdate) {

-                if (time < 0) if (this._startAt && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.

-                    this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.

-                }

-                if (!suppressEvents) if (this._totalTime !== prevTotalTime || isComplete) {

-                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);

-                }

-            }

-            if (this._cycle !== prevCycle) if (!suppressEvents) if (!this._gc) if (this.vars.onRepeat) {

-                this.vars.onRepeat.apply(this.vars.onRepeatScope || this, this.vars.onRepeatParams || _blankArray);

-            }

-            if (callback) if (!this._gc) { //check gc because there's a chance that kill() could be called in an onUpdate

-                if (time < 0 && this._startAt && !this._onUpdate && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.

-                    this._startAt.render(time, suppressEvents, force);

-                }

-                if (isComplete) {

-                    if (this._timeline.autoRemoveChildren) {

-                        this._enabled(false, false);

-                    }

-                    this._active = false;

-                }

-                if (!suppressEvents && this.vars[callback]) {

-                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);

-                }

-                if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless.

-                    this._rawPrevTime = 0;

-                }

-            }

-        };

-        

-//---- STATIC FUNCTIONS -----------------------------------------------------------------------------------------------------------

-        

-        TweenMax.to = function(target, duration, vars) {

-            return new TweenMax(target, duration, vars);

-        };

-        

-        TweenMax.from = function(target, duration, vars) {

-            vars.runBackwards = true;

-            vars.immediateRender = (vars.immediateRender != false);

-            return new TweenMax(target, duration, vars);

-        };

-        

-        TweenMax.fromTo = function(target, duration, fromVars, toVars) {

-            toVars.startAt = fromVars;

-            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);

-            return new TweenMax(target, duration, toVars);

-        };

-        

-        TweenMax.staggerTo = TweenMax.allTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {

-            stagger = stagger || 0;

-            var delay = vars.delay || 0,

-                a = [],

-                finalComplete = function() {

-                    if (vars.onComplete) {

-                        vars.onComplete.apply(vars.onCompleteScope || this, arguments);

-                    }

-                    onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || _blankArray);

-                },

-                l, copy, i, p;

-            if (!_isArray(targets)) {

-                if (typeof(targets) === "string") {

-                    targets = TweenLite.selector(targets) || targets;

-                }

-                if (_isSelector(targets)) {

-                    targets = _slice.call(targets, 0);

-                }

-            }

-            l = targets.length;

-            for (i = 0; i < l; i++) {

-                copy = {};

-                for (p in vars) {

-                    copy[p] = vars[p];

-                }

-                copy.delay = delay;

-                if (i === l - 1 && onCompleteAll) {

-                    copy.onComplete = finalComplete;

-                }

-                a[i] = new TweenMax(targets[i], duration, copy);

-                delay += stagger;

-            }

-            return a;

-        };

-        

-        TweenMax.staggerFrom = TweenMax.allFrom = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {

-            vars.runBackwards = true;

-            vars.immediateRender = (vars.immediateRender != false);

-            return TweenMax.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope);

-        };

-        

-        TweenMax.staggerFromTo = TweenMax.allFromTo = function(targets, duration, fromVars, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {

-            toVars.startAt = fromVars;

-            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);

-            return TweenMax.staggerTo(targets, duration, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope);

-        };

-                

-        TweenMax.delayedCall = function(delay, callback, params, scope, useFrames) {

-            return new TweenMax(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, onCompleteScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, onReverseCompleteScope:scope, immediateRender:false, useFrames:useFrames, overwrite:0});

-        };

-        

-        TweenMax.set = function(target, vars) {

-            return new TweenMax(target, 0, vars);

-        };

-        

-        TweenMax.isTweening = function(target) {

-            return (TweenLite.getTweensOf(target, true).length > 0);

-        };

-        

-        var _getChildrenOf = function(timeline, includeTimelines) {

-                var a = [],

-                    cnt = 0,

-                    tween = timeline._first;

-                while (tween) {

-                    if (tween instanceof TweenLite) {

-                        a[cnt++] = tween;

-                    } else {

-                        if (includeTimelines) {

-                            a[cnt++] = tween;

-                        }

-                        a = a.concat(_getChildrenOf(tween, includeTimelines));

-                        cnt = a.length;

-                    }

-                    tween = tween._next;

-                }

-                return a;

-            }, 

-            getAllTweens = TweenMax.getAllTweens = function(includeTimelines) {

-                return _getChildrenOf(Animation._rootTimeline, includeTimelines).concat( _getChildrenOf(Animation._rootFramesTimeline, includeTimelines) );

-            };

-        

-        TweenMax.killAll = function(complete, tweens, delayedCalls, timelines) {

-            if (tweens == null) {

-                tweens = true;

-            }

-            if (delayedCalls == null) {

-                delayedCalls = true;

-            }

-            var a = getAllTweens((timelines != false)),

-                l = a.length,

-                allTrue = (tweens && delayedCalls && timelines),

-                isDC, tween, i;

-            for (i = 0; i < l; i++) {

-                tween = a[i];

-                if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) {

-                    if (complete) {

-                        tween.totalTime(tween._reversed ? 0 : tween.totalDuration());

-                    } else {

-                        tween._enabled(false, false);

-                    }

-                }

-            }

-        };

-        

-        TweenMax.killChildTweensOf = function(parent, complete) {

-            if (parent == null) {

-                return;

-            }

-            var tl = TweenLiteInternals.tweenLookup,

-                a, curParent, p, i, l;

-            if (typeof(parent) === "string") {

-                parent = TweenLite.selector(parent) || parent;

-            }

-            if (_isSelector(parent)) {

-                parent = _slice.call(parent, 0);

-            }

-            if (_isArray(parent)) {

-                i = parent.length;

-                while (--i > -1) {

-                    TweenMax.killChildTweensOf(parent[i], complete);

-                }

-                return;

-            }

-            a = [];

-            for (p in tl) {

-                curParent = tl[p].target.parentNode;

-                while (curParent) {

-                    if (curParent === parent) {

-                        a = a.concat(tl[p].tweens);

-                    }

-                    curParent = curParent.parentNode;

-                }

-            }

-            l = a.length;

-            for (i = 0; i < l; i++) {

-                if (complete) {

-                    a[i].totalTime(a[i].totalDuration());

-                }

-                a[i]._enabled(false, false);

-            }

-        };

-

-        var _changePause = function(pause, tweens, delayedCalls, timelines) {

-            tweens = (tweens !== false);

-            delayedCalls = (delayedCalls !== false);

-            timelines = (timelines !== false);

-            var a = getAllTweens(timelines),

-                allTrue = (tweens && delayedCalls && timelines),

-                i = a.length,

-                isDC, tween;

-            while (--i > -1) {

-                tween = a[i];

-                if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) {

-                    tween.paused(pause);

-                }

-            }

-        };

-        

-        TweenMax.pauseAll = function(tweens, delayedCalls, timelines) {

-            _changePause(true, tweens, delayedCalls, timelines);

-        };

-        

-        TweenMax.resumeAll = function(tweens, delayedCalls, timelines) {

-            _changePause(false, tweens, delayedCalls, timelines);

-        };

-

-        TweenMax.globalTimeScale = function(value) {

-            var tl = Animation._rootTimeline,

-                t = TweenLite.ticker.time;

-            if (!arguments.length) {

-                return tl._timeScale;

-            }

-            value = value || _tinyNum; //can't allow zero because it'll throw the math off

-            tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value);

-            tl = Animation._rootFramesTimeline;

-            t = TweenLite.ticker.frame;

-            tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value);

-            tl._timeScale = Animation._rootTimeline._timeScale = value;

-            return value;

-        };

-        

-    

-//---- GETTERS / SETTERS ----------------------------------------------------------------------------------------------------------

-        

-        p.progress = function(value) {

-            return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), false);

-        };

-        

-        p.totalProgress = function(value) {

-            return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, false);

-        };

-        

-        p.time = function(value, suppressEvents) {

-            if (!arguments.length) {

-                return this._time;

-            }

-            if (this._dirty) {

-                this.totalDuration();

-            }

-            if (value > this._duration) {

-                value = this._duration;

-            }

-            if (this._yoyo && (this._cycle & 1) !== 0) {

-                value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay));

-            } else if (this._repeat !== 0) {

-                value += this._cycle * (this._duration + this._repeatDelay);

-            }

-            return this.totalTime(value, suppressEvents);

-        };

-

-        p.duration = function(value) {

-            if (!arguments.length) {

-                return this._duration; //don't set _dirty = false because there could be repeats that haven't been factored into the _totalDuration yet. Otherwise, if you create a repeated TweenMax and then immediately check its duration(), it would cache the value and the totalDuration would not be correct, thus repeats wouldn't take effect.

-            }

-            return Animation.prototype.duration.call(this, value);

-        };

-

-        p.totalDuration = function(value) {

-            if (!arguments.length) {

-                if (this._dirty) {

-                    //instead of Infinity, we use 999999999999 so that we can accommodate reverses

-                    this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat);

-                    this._dirty = false;

-                }

-                return this._totalDuration;

-            }

-            return (this._repeat === -1) ? this : this.duration( (value - (this._repeat * this._repeatDelay)) / (this._repeat + 1) );

-        };

-        

-        p.repeat = function(value) {

-            if (!arguments.length) {

-                return this._repeat;

-            }

-            this._repeat = value;

-            return this._uncache(true);

-        };

-        

-        p.repeatDelay = function(value) {

-            if (!arguments.length) {

-                return this._repeatDelay;

-            }

-            this._repeatDelay = value;

-            return this._uncache(true);

-        };

-        

-        p.yoyo = function(value) {

-            if (!arguments.length) {

-                return this._yoyo;

-            }

-            this._yoyo = value;

-            return this;

-        };

-        

-        

-        return TweenMax;

-        

-    }, true);

-

-

-

-

-

-

-

-

-/*

- * ----------------------------------------------------------------

- * TimelineLite

- * ----------------------------------------------------------------

- */

-    window._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) {

-

-        var TimelineLite = function(vars) {

-                SimpleTimeline.call(this, vars);

-                this._labels = {};

-                this.autoRemoveChildren = (this.vars.autoRemoveChildren === true);

-                this.smoothChildTiming = (this.vars.smoothChildTiming === true);

-                this._sortChildren = true;

-                this._onUpdate = this.vars.onUpdate;

-                var v = this.vars,

-                    val, p;

-                for (p in v) {

-                    val = v[p];

-                    if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) {

-                        v[p] = this._swapSelfInParams(val);

-                    }

-                }

-                if (_isArray(v.tweens)) {

-                    this.add(v.tweens, 0, v.align, v.stagger);

-                }

-            },

-            _tinyNum = 0.0000000001,

-            _isSelector = TweenLite._internals.isSelector,

-            _isArray = TweenLite._internals.isArray,

-            _blankArray = [],

-            _globals = window._gsDefine.globals,

-            _copy = function(vars) {

-                var copy = {}, p;

-                for (p in vars) {

-                    copy[p] = vars[p];

-                }

-                return copy;

-            },

-            _pauseCallback = function(tween, callback, params, scope) {

-                tween._timeline.pause(tween._startTime);

-                if (callback) {

-                    callback.apply(scope || tween._timeline, params || _blankArray);

-                }

-            },

-            _slice = _blankArray.slice,

-            p = TimelineLite.prototype = new SimpleTimeline();

-

-        TimelineLite.version = "1.12.1";

-        p.constructor = TimelineLite;

-        p.kill()._gc = false;

-

-        p.to = function(target, duration, vars, position) {

-            var Engine = (vars.repeat && _globals.TweenMax) || TweenLite;

-            return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position);

-        };

-

-        p.from = function(target, duration, vars, position) {

-            return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, vars), position);

-        };

-

-        p.fromTo = function(target, duration, fromVars, toVars, position) {

-            var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite;

-            return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position);

-        };

-

-        p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {

-            var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, onCompleteScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}),

-                i;

-            if (typeof(targets) === "string") {

-                targets = TweenLite.selector(targets) || targets;

-            }

-            if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array.

-                targets = _slice.call(targets, 0);

-            }

-            stagger = stagger || 0;

-            for (i = 0; i < targets.length; i++) {

-                if (vars.startAt) {

-                    vars.startAt = _copy(vars.startAt);

-                }

-                tl.to(targets[i], duration, _copy(vars), i * stagger);

-            }

-            return this.add(tl, position);

-        };

-

-        p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {

-            vars.immediateRender = (vars.immediateRender != false);

-            vars.runBackwards = true;

-            return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope);

-        };

-

-        p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {

-            toVars.startAt = fromVars;

-            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);

-            return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope);

-        };

-

-        p.call = function(callback, params, scope, position) {

-            return this.add( TweenLite.delayedCall(0, callback, params, scope), position);

-        };

-

-        p.set = function(target, vars, position) {

-            position = this._parseTimeOrLabel(position, 0, true);

-            if (vars.immediateRender == null) {

-                vars.immediateRender = (position === this._time && !this._paused);

-            }

-            return this.add( new TweenLite(target, 0, vars), position);

-        };

-

-        TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) {

-            vars = vars || {};

-            if (vars.smoothChildTiming == null) {

-                vars.smoothChildTiming = true;

-            }

-            var tl = new TimelineLite(vars),

-                root = tl._timeline,

-                tween, next;

-            if (ignoreDelayedCalls == null) {

-                ignoreDelayedCalls = true;

-            }

-            root._remove(tl, true);

-            tl._startTime = 0;

-            tl._rawPrevTime = tl._time = tl._totalTime = root._time;

-            tween = root._first;

-            while (tween) {

-                next = tween._next;

-                if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) {

-                    tl.add(tween, tween._startTime - tween._delay);

-                }

-                tween = next;

-            }

-            root.add(tl, 0);

-            return tl;

-        };

-

-        p.add = function(value, position, align, stagger) {

-            var curTime, l, i, child, tl, beforeRawTime;

-            if (typeof(position) !== "number") {

-                position = this._parseTimeOrLabel(position, 0, true, value);

-            }

-            if (!(value instanceof Animation)) {

-                if ((value instanceof Array) || (value && value.push && _isArray(value))) {

-                    align = align || "normal";

-                    stagger = stagger || 0;

-                    curTime = position;

-                    l = value.length;

-                    for (i = 0; i < l; i++) {

-                        if (_isArray(child = value[i])) {

-                            child = new TimelineLite({tweens:child});

-                        }

-                        this.add(child, curTime);

-                        if (typeof(child) !== "string" && typeof(child) !== "function") {

-                            if (align === "sequence") {

-                                curTime = child._startTime + (child.totalDuration() / child._timeScale);

-                            } else if (align === "start") {

-                                child._startTime -= child.delay();

-                            }

-                        }

-                        curTime += stagger;

-                    }

-                    return this._uncache(true);

-                } else if (typeof(value) === "string") {

-                    return this.addLabel(value, position);

-                } else if (typeof(value) === "function") {

-                    value = TweenLite.delayedCall(0, value);

-                } else {

-                    throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string.");

-                }

-            }

-

-            SimpleTimeline.prototype.add.call(this, value, position);

-

-            //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.

-            if (this._gc || this._time === this._duration) if (!this._paused) if (this._duration < this.duration()) {

-                //in case any of the ancestors had completed but should now be enabled...

-                tl = this;

-                beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect.

-                while (tl._timeline) {

-                    if (beforeRawTime && tl._timeline.smoothChildTiming) {

-                        tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it.

-                    } else if (tl._gc) {

-                        tl._enabled(true, false);

-                    }

-                    tl = tl._timeline;

-                }

-            }

-

-            return this;

-        };

-

-        p.remove = function(value) {

-            if (value instanceof Animation) {

-                return this._remove(value, false);

-            } else if (value instanceof Array || (value && value.push && _isArray(value))) {

-                var i = value.length;

-                while (--i > -1) {

-                    this.remove(value[i]);

-                }

-                return this;

-            } else if (typeof(value) === "string") {

-                return this.removeLabel(value);

-            }

-            return this.kill(null, value);

-        };

-

-        p._remove = function(tween, skipDisable) {

-            SimpleTimeline.prototype._remove.call(this, tween, skipDisable);

-            var last = this._last;

-            if (!last) {

-                this._time = this._totalTime = this._duration = this._totalDuration = 0;

-            } else if (this._time > last._startTime + last._totalDuration / last._timeScale) {

-                this._time = this.duration();

-                this._totalTime = this._totalDuration;

-            }

-            return this;

-        };

-

-        p.append = function(value, offsetOrLabel) {

-            return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value));

-        };

-

-        p.insert = p.insertMultiple = function(value, position, align, stagger) {

-            return this.add(value, position || 0, align, stagger);

-        };

-

-        p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) {

-            return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger);

-        };

-

-        p.addLabel = function(label, position) {

-            this._labels[label] = this._parseTimeOrLabel(position);

-            return this;

-        };

-

-        p.addPause = function(position, callback, params, scope) {

-            return this.call(_pauseCallback, ["{self}", callback, params, scope], this, position);

-        };

-

-        p.removeLabel = function(label) {

-            delete this._labels[label];

-            return this;

-        };

-

-        p.getLabelTime = function(label) {

-            return (this._labels[label] != null) ? this._labels[label] : -1;

-        };

-

-        p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) {

-            var i;

-            //if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration().

-            if (ignore instanceof Animation && ignore.timeline === this) {

-                this.remove(ignore);

-            } else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) {

-                i = ignore.length;

-                while (--i > -1) {

-                    if (ignore[i] instanceof Animation && ignore[i].timeline === this) {

-                        this.remove(ignore[i]);

-                    }

-                }

-            }

-            if (typeof(offsetOrLabel) === "string") {

-                return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - this.duration() : 0, appendIfAbsent);

-            }

-            offsetOrLabel = offsetOrLabel || 0;

-            if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).

-                i = timeOrLabel.indexOf("=");

-                if (i === -1) {

-                    if (this._labels[timeOrLabel] == null) {

-                        return appendIfAbsent ? (this._labels[timeOrLabel] = this.duration() + offsetOrLabel) : offsetOrLabel;

-                    }

-                    return this._labels[timeOrLabel] + offsetOrLabel;

-                }

-                offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1));

-                timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : this.duration();

-            } else if (timeOrLabel == null) {

-                timeOrLabel = this.duration();

-            }

-            return Number(timeOrLabel) + offsetOrLabel;

-        };

-

-        p.seek = function(position, suppressEvents) {

-            return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false));

-        };

-

-        p.stop = function() {

-            return this.paused(true);

-        };

-

-        p.gotoAndPlay = function(position, suppressEvents) {

-            return this.play(position, suppressEvents);

-        };

-

-        p.gotoAndStop = function(position, suppressEvents) {

-            return this.pause(position, suppressEvents);

-        };

-

-        p.render = function(time, suppressEvents, force) {

-            if (this._gc) {

-                this._enabled(true, false);

-            }

-            var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(),

-                prevTime = this._time,

-                prevStart = this._startTime,

-                prevTimeScale = this._timeScale,

-                prevPaused = this._paused,

-                tween, isComplete, next, callback, internalForce;

-            if (time >= totalDur) {

-                this._totalTime = this._time = totalDur;

-                if (!this._reversed) if (!this._hasPausedChild()) {

-                    isComplete = true;

-                    callback = "onComplete";

-                    if (this._duration === 0) if (time === 0 || this._rawPrevTime < 0 || this._rawPrevTime === _tinyNum) if (this._rawPrevTime !== time && this._first) {

-                        internalForce = true;

-                        if (this._rawPrevTime > _tinyNum) {

-                            callback = "onReverseComplete";

-                        }

-                    }

-                }

-                this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7.

-

-            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.

-                this._totalTime = this._time = 0;

-                if (prevTime !== 0 || (this._duration === 0 && this._rawPrevTime !== _tinyNum && (this._rawPrevTime > 0 || (time < 0 && this._rawPrevTime >= 0)))) {

-                    callback = "onReverseComplete";

-                    isComplete = this._reversed;

-                }

-                if (time < 0) {

-                    this._active = false;

-                    if (this._duration === 0) if (this._rawPrevTime >= 0 && this._first) { //zero-duration timelines are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.

-                        internalForce = true;

-                    }

-                    this._rawPrevTime = time;

-                } else {

-                    this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-

-                    time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline)

-                    if (!this._initted) {

-                        internalForce = true;

-                    }

-                }

-

-            } else {

-                this._totalTime = this._time = this._rawPrevTime = time;

-            }

-            if ((this._time === prevTime || !this._first) && !force && !internalForce) {

-                return;

-            } else if (!this._initted) {

-                this._initted = true;

-            }

-

-            if (!this._active) if (!this._paused && this._time !== prevTime && time > 0) {

-                this._active = true;  //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example.

-            }

-

-            if (prevTime === 0) if (this.vars.onStart) if (this._time !== 0) if (!suppressEvents) {

-                this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);

-            }

-

-            if (this._time >= prevTime) {

-                tween = this._first;

-                while (tween) {

-                    next = tween._next; //record it here because the value could change after rendering...

-                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering

-                        break;

-                    } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) {

-                        if (!tween._reversed) {

-                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);

-                        } else {

-                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);

-                        }

-                    }

-                    tween = next;

-                }

-            } else {

-                tween = this._last;

-                while (tween) {

-                    next = tween._prev; //record it here because the value could change after rendering...

-                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering

-                        break;

-                    } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) {

-                        if (!tween._reversed) {

-                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);

-                        } else {

-                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);

-                        }

-                    }

-                    tween = next;

-                }

-            }

-

-            if (this._onUpdate) if (!suppressEvents) {

-                this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);

-            }

-

-            if (callback) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate

-                if (isComplete) {

-                    if (this._timeline.autoRemoveChildren) {

-                        this._enabled(false, false);

-                    }

-                    this._active = false;

-                }

-                if (!suppressEvents && this.vars[callback]) {

-                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);

-                }

-            }

-        };

-

-        p._hasPausedChild = function() {

-            var tween = this._first;

-            while (tween) {

-                if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) {

-                    return true;

-                }

-                tween = tween._next;

-            }

-            return false;

-        };

-

-        p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) {

-            ignoreBeforeTime = ignoreBeforeTime || -9999999999;

-            var a = [],

-                tween = this._first,

-                cnt = 0;

-            while (tween) {

-                if (tween._startTime < ignoreBeforeTime) {

-                    //do nothing

-                } else if (tween instanceof TweenLite) {

-                    if (tweens !== false) {

-                        a[cnt++] = tween;

-                    }

-                } else {

-                    if (timelines !== false) {

-                        a[cnt++] = tween;

-                    }

-                    if (nested !== false) {

-                        a = a.concat(tween.getChildren(true, tweens, timelines));

-                        cnt = a.length;

-                    }

-                }

-                tween = tween._next;

-            }

-            return a;

-        };

-

-        p.getTweensOf = function(target, nested) {

-            var disabled = this._gc,

-                a = [],

-                cnt = 0,

-                tweens, i;

-            if (disabled) {

-                this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here.

-            }

-            tweens = TweenLite.getTweensOf(target);

-            i = tweens.length;

-            while (--i > -1) {

-                if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) {

-                    a[cnt++] = tweens[i];

-                }

-            }

-            if (disabled) {

-                this._enabled(false, true);

-            }

-            return a;

-        };

-

-        p._contains = function(tween) {

-            var tl = tween.timeline;

-            while (tl) {

-                if (tl === this) {

-                    return true;

-                }

-                tl = tl.timeline;

-            }

-            return false;

-        };

-

-        p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) {

-            ignoreBeforeTime = ignoreBeforeTime || 0;

-            var tween = this._first,

-                labels = this._labels,

-                p;

-            while (tween) {

-                if (tween._startTime >= ignoreBeforeTime) {

-                    tween._startTime += amount;

-                }

-                tween = tween._next;

-            }

-            if (adjustLabels) {

-                for (p in labels) {

-                    if (labels[p] >= ignoreBeforeTime) {

-                        labels[p] += amount;

-                    }

-                }

-            }

-            return this._uncache(true);

-        };

-

-        p._kill = function(vars, target) {

-            if (!vars && !target) {

-                return this._enabled(false, false);

-            }

-            var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target),

-                i = tweens.length,

-                changed = false;

-            while (--i > -1) {

-                if (tweens[i]._kill(vars, target)) {

-                    changed = true;

-                }

-            }

-            return changed;

-        };

-

-        p.clear = function(labels) {

-            var tweens = this.getChildren(false, true, true),

-                i = tweens.length;

-            this._time = this._totalTime = 0;

-            while (--i > -1) {

-                tweens[i]._enabled(false, false);

-            }

-            if (labels !== false) {

-                this._labels = {};

-            }

-            return this._uncache(true);

-        };

-

-        p.invalidate = function() {

-            var tween = this._first;

-            while (tween) {

-                tween.invalidate();

-                tween = tween._next;

-            }

-            return this;

-        };

-

-        p._enabled = function(enabled, ignoreTimeline) {

-            if (enabled === this._gc) {

-                var tween = this._first;

-                while (tween) {

-                    tween._enabled(enabled, true);

-                    tween = tween._next;

-                }

-            }

-            return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline);

-        };

-

-        p.duration = function(value) {

-            if (!arguments.length) {

-                if (this._dirty) {

-                    this.totalDuration(); //just triggers recalculation

-                }

-                return this._duration;

-            }

-            if (this.duration() !== 0 && value !== 0) {

-                this.timeScale(this._duration / value);

-            }

-            return this;

-        };

-

-        p.totalDuration = function(value) {

-            if (!arguments.length) {

-                if (this._dirty) {

-                    var max = 0,

-                        tween = this._last,

-                        prevStart = 999999999999,

-                        prev, end;

-                    while (tween) {

-                        prev = tween._prev; //record it here in case the tween changes position in the sequence...

-                        if (tween._dirty) {

-                            tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it.

-                        }

-                        if (tween._startTime > prevStart && this._sortChildren && !tween._paused) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence

-                            this.add(tween, tween._startTime - tween._delay);

-                        } else {

-                            prevStart = tween._startTime;

-                        }

-                        if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.

-                            max -= tween._startTime;

-                            if (this._timeline.smoothChildTiming) {

-                                this._startTime += tween._startTime / this._timeScale;

-                            }

-                            this.shiftChildren(-tween._startTime, false, -9999999999);

-                            prevStart = 0;

-                        }

-                        end = tween._startTime + (tween._totalDuration / tween._timeScale);

-                        if (end > max) {

-                            max = end;

-                        }

-                        tween = prev;

-                    }

-                    this._duration = this._totalDuration = max;

-                    this._dirty = false;

-                }

-                return this._totalDuration;

-            }

-            if (this.totalDuration() !== 0) if (value !== 0) {

-                this.timeScale(this._totalDuration / value);

-            }

-            return this;

-        };

-

-        p.usesFrames = function() {

-            var tl = this._timeline;

-            while (tl._timeline) {

-                tl = tl._timeline;

-            }

-            return (tl === Animation._rootFramesTimeline);

-        };

-

-        p.rawTime = function() {

-            return this._paused ? this._totalTime : (this._timeline.rawTime() - this._startTime) * this._timeScale;

-        };

-

-        return TimelineLite;

-

-    }, true);

-    

-

-

-

-

-

-

-

-    

-    

-    

-    

-    

-/*

- * ----------------------------------------------------------------

- * TimelineMax

- * ----------------------------------------------------------------

- */

-    window._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], function(TimelineLite, TweenLite, Ease) {

-

-        var TimelineMax = function(vars) {

-                TimelineLite.call(this, vars);

-                this._repeat = this.vars.repeat || 0;

-                this._repeatDelay = this.vars.repeatDelay || 0;

-                this._cycle = 0;

-                this._yoyo = (this.vars.yoyo === true);

-                this._dirty = true;

-            },

-            _tinyNum = 0.0000000001,

-            _blankArray = [],

-            _easeNone = new Ease(null, null, 1, 0),

-            p = TimelineMax.prototype = new TimelineLite();

-

-        p.constructor = TimelineMax;

-        p.kill()._gc = false;

-        TimelineMax.version = "1.12.1";

-

-        p.invalidate = function() {

-            this._yoyo = (this.vars.yoyo === true);

-            this._repeat = this.vars.repeat || 0;

-            this._repeatDelay = this.vars.repeatDelay || 0;

-            this._uncache(true);

-            return TimelineLite.prototype.invalidate.call(this);

-        };

-

-        p.addCallback = function(callback, position, params, scope) {

-            return this.add( TweenLite.delayedCall(0, callback, params, scope), position);

-        };

-

-        p.removeCallback = function(callback, position) {

-            if (callback) {

-                if (position == null) {

-                    this._kill(null, callback);

-                } else {

-                    var a = this.getTweensOf(callback, false),

-                        i = a.length,

-                        time = this._parseTimeOrLabel(position);

-                    while (--i > -1) {

-                        if (a[i]._startTime === time) {

-                            a[i]._enabled(false, false);

-                        }

-                    }

-                }

-            }

-            return this;

-        };

-

-        p.tweenTo = function(position, vars) {

-            vars = vars || {};

-            var copy = {ease:_easeNone, overwrite:(vars.delay ? 2 : 1), useFrames:this.usesFrames(), immediateRender:false},//note: set overwrite to 1 (true/all) by default unless there's a delay so that we avoid a racing situation that could happen if, for example, an onmousemove creates the same tweenTo() over and over again.

-                duration, p, t;

-            for (p in vars) {

-                copy[p] = vars[p];

-            }

-            copy.time = this._parseTimeOrLabel(position);

-            duration = (Math.abs(Number(copy.time) - this._time) / this._timeScale) || 0.001;

-            t = new TweenLite(this, duration, copy);

-            copy.onStart = function() {

-                t.target.paused(true);

-                if (t.vars.time !== t.target.time() && duration === t.duration()) { //don't make the duration zero - if it's supposed to be zero, don't worry because it's already initting the tween and will complete immediately, effectively making the duration zero anyway. If we make duration zero, the tween won't run at all.

-                    t.duration( Math.abs( t.vars.time - t.target.time()) / t.target._timeScale );

-                }

-                if (vars.onStart) { //in case the user had an onStart in the vars - we don't want to overwrite it.

-                    vars.onStart.apply(vars.onStartScope || t, vars.onStartParams || _blankArray);

-                }

-            };

-            return t;

-        };

-

-        p.tweenFromTo = function(fromPosition, toPosition, vars) {

-            vars = vars || {};

-            fromPosition = this._parseTimeOrLabel(fromPosition);

-            vars.startAt = {onComplete:this.seek, onCompleteParams:[fromPosition], onCompleteScope:this};

-            vars.immediateRender = (vars.immediateRender !== false);

-            var t = this.tweenTo(toPosition, vars);

-            return t.duration((Math.abs( t.vars.time - fromPosition) / this._timeScale) || 0.001);

-        };

-

-        p.render = function(time, suppressEvents, force) {

-            if (this._gc) {

-                this._enabled(true, false);

-            }

-            var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(),

-                dur = this._duration,

-                prevTime = this._time,

-                prevTotalTime = this._totalTime,

-                prevStart = this._startTime,

-                prevTimeScale = this._timeScale,

-                prevRawPrevTime = this._rawPrevTime,

-                prevPaused = this._paused,

-                prevCycle = this._cycle,

-                tween, isComplete, next, callback, internalForce, cycleDuration;

-            if (time >= totalDur) {

-                if (!this._locked) {

-                    this._totalTime = totalDur;

-                    this._cycle = this._repeat;

-                }

-                if (!this._reversed) if (!this._hasPausedChild()) {

-                    isComplete = true;

-                    callback = "onComplete";

-                    if (this._duration === 0) if (time === 0 || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time && this._first) {

-                        internalForce = true;

-                        if (prevRawPrevTime > _tinyNum) {

-                            callback = "onReverseComplete";

-                        }

-                    }

-                }

-                this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                if (this._yoyo && (this._cycle & 1) !== 0) {

-                    this._time = time = 0;

-                } else {

-                    this._time = dur;

-                    time = dur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. We cannot do less then 0.0001 because the same issue can occur when the duration is extremely large like 999999999999 in which case adding 0.00000001, for example, causes it to act like nothing was added.

-                }

-

-            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.

-                if (!this._locked) {

-                    this._totalTime = this._cycle = 0;

-                }

-                this._time = 0;

-                if (prevTime !== 0 || (dur === 0 && prevRawPrevTime !== _tinyNum && (prevRawPrevTime > 0 || (time < 0 && prevRawPrevTime >= 0)) && !this._locked)) { //edge case for checking time < 0 && prevRawPrevTime >= 0: a zero-duration fromTo() tween inside a zero-duration timeline (yeah, very rare)

-                    callback = "onReverseComplete";

-                    isComplete = this._reversed;

-                }

-                if (time < 0) {

-                    this._active = false;

-                    if (dur === 0) if (prevRawPrevTime >= 0 && this._first) { //zero-duration timelines are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.

-                        internalForce = true;

-                    }

-                    this._rawPrevTime = time;

-                } else {

-                    this._rawPrevTime = (dur || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                    time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline)

-                    if (!this._initted) {

-                        internalForce = true;

-                    }

-                }

-

-            } else {

-                if (dur === 0 && prevRawPrevTime < 0) { //without this, zero-duration repeating timelines (like with a simple callback nested at the very beginning and a repeatDelay) wouldn't render the first time through.

-                    internalForce = true;

-                }

-                this._time = this._rawPrevTime = time;

-                if (!this._locked) {

-                    this._totalTime = time;

-                    if (this._repeat !== 0) {

-                        cycleDuration = dur + this._repeatDelay;

-                        this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but it gets reported as 0.79999999!)

-                        if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration) {

-                            this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning)

-                        }

-                        this._time = this._totalTime - (this._cycle * cycleDuration);

-                        if (this._yoyo) if ((this._cycle & 1) !== 0) {

-                            this._time = dur - this._time;

-                        }

-                        if (this._time > dur) {

-                            this._time = dur;

-                            time = dur + 0.0001; //to avoid occasional floating point rounding error

-                        } else if (this._time < 0) {

-                            this._time = time = 0;

-                        } else {

-                            time = this._time;

-                        }

-                    }

-                }

-            }

-

-            if (this._cycle !== prevCycle) if (!this._locked) {

-                /*

-                make sure children at the end/beginning of the timeline are rendered properly. If, for example,

-                a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which

-                would get transated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there

-                could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So

-                we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must

-                ensure that zero-duration tweens at the very beginning or end of the TimelineMax work.

-                */

-                var backwards = (this._yoyo && (prevCycle & 1) !== 0),

-                    wrap = (backwards === (this._yoyo && (this._cycle & 1) !== 0)),

-                    recTotalTime = this._totalTime,

-                    recCycle = this._cycle,

-                    recRawPrevTime = this._rawPrevTime,

-                    recTime = this._time;

-

-                this._totalTime = prevCycle * dur;

-                if (this._cycle < prevCycle) {

-                    backwards = !backwards;

-                } else {

-                    this._totalTime += dur;

-                }

-                this._time = prevTime; //temporarily revert _time so that render() renders the children in the correct order. Without this, tweens won't rewind correctly. We could arhictect things in a "cleaner" way by splitting out the rendering queue into a separate method but for performance reasons, we kept it all inside this method.

-

-                this._rawPrevTime = (dur === 0) ? prevRawPrevTime - 0.0001 : prevRawPrevTime;

-                this._cycle = prevCycle;

-                this._locked = true; //prevents changes to totalTime and skips repeat/yoyo behavior when we recursively call render()

-                prevTime = (backwards) ? 0 : dur;

-                this.render(prevTime, suppressEvents, (dur === 0));

-                if (!suppressEvents) if (!this._gc) {

-                    if (this.vars.onRepeat) {

-                        this.vars.onRepeat.apply(this.vars.onRepeatScope || this, this.vars.onRepeatParams || _blankArray);

-                    }

-                }

-                if (wrap) {

-                    prevTime = (backwards) ? dur + 0.0001 : -0.0001;

-                    this.render(prevTime, true, false);

-                }

-                this._locked = false;

-                if (this._paused && !prevPaused) { //if the render() triggered callback that paused this timeline, we should abort (very rare, but possible)

-                    return;

-                }

-                this._time = recTime;

-                this._totalTime = recTotalTime;

-                this._cycle = recCycle;

-                this._rawPrevTime = recRawPrevTime;

-            }

-

-            if ((this._time === prevTime || !this._first) && !force && !internalForce) {

-                if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate.

-                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);

-                }

-                return;

-            } else if (!this._initted) {

-                this._initted = true;

-            }

-

-            if (!this._active) if (!this._paused && this._totalTime !== prevTotalTime && time > 0) {

-                this._active = true;  //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example.

-            }

-

-            if (prevTotalTime === 0) if (this.vars.onStart) if (this._totalTime !== 0) if (!suppressEvents) {

-                this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);

-            }

-

-            if (this._time >= prevTime) {

-                tween = this._first;

-                while (tween) {

-                    next = tween._next; //record it here because the value could change after rendering...

-                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering

-                        break;

-                    } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) {

-                        if (!tween._reversed) {

-                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);

-                        } else {

-                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);

-                        }

-

-                    }

-                    tween = next;

-                }

-            } else {

-                tween = this._last;

-                while (tween) {

-                    next = tween._prev; //record it here because the value could change after rendering...

-                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering

-                        break;

-                    } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) {

-                        if (!tween._reversed) {

-                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);

-                        } else {

-                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);

-                        }

-                    }

-                    tween = next;

-                }

-            }

-

-            if (this._onUpdate) if (!suppressEvents) {

-                this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);

-            }

-            if (callback) if (!this._locked) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate

-                if (isComplete) {

-                    if (this._timeline.autoRemoveChildren) {

-                        this._enabled(false, false);

-                    }

-                    this._active = false;

-                }

-                if (!suppressEvents && this.vars[callback]) {

-                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);

-                }

-            }

-        };

-

-        p.getActive = function(nested, tweens, timelines) {

-            if (nested == null) {

-                nested = true;

-            }

-            if (tweens == null) {

-                tweens = true;

-            }

-            if (timelines == null) {

-                timelines = false;

-            }

-            var a = [],

-                all = this.getChildren(nested, tweens, timelines),

-                cnt = 0,

-                l = all.length,

-                i, tween;

-            for (i = 0; i < l; i++) {

-                tween = all[i];

-                if (tween.isActive()) {

-                    a[cnt++] = tween;

-                }

-            }

-            return a;

-        };

-

-

-        p.getLabelAfter = function(time) {

-            if (!time) if (time !== 0) { //faster than isNan()

-                time = this._time;

-            }

-            var labels = this.getLabelsArray(),

-                l = labels.length,

-                i;

-            for (i = 0; i < l; i++) {

-                if (labels[i].time > time) {

-                    return labels[i].name;

-                }

-            }

-            return null;

-        };

-

-        p.getLabelBefore = function(time) {

-            if (time == null) {

-                time = this._time;

-            }

-            var labels = this.getLabelsArray(),

-                i = labels.length;

-            while (--i > -1) {

-                if (labels[i].time < time) {

-                    return labels[i].name;

-                }

-            }

-            return null;

-        };

-

-        p.getLabelsArray = function() {

-            var a = [],

-                cnt = 0,

-                p;

-            for (p in this._labels) {

-                a[cnt++] = {time:this._labels[p], name:p};

-            }

-            a.sort(function(a,b) {

-                return a.time - b.time;

-            });

-            return a;

-        };

-

-

-//---- GETTERS / SETTERS -------------------------------------------------------------------------------------------------------

-

-        p.progress = function(value) {

-            return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), false);

-        };

-

-        p.totalProgress = function(value) {

-            return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, false);

-        };

-

-        p.totalDuration = function(value) {

-            if (!arguments.length) {

-                if (this._dirty) {

-                    TimelineLite.prototype.totalDuration.call(this); //just forces refresh

-                    //Instead of Infinity, we use 999999999999 so that we can accommodate reverses.

-                    this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat);

-                }

-                return this._totalDuration;

-            }

-            return (this._repeat === -1) ? this : this.duration( (value - (this._repeat * this._repeatDelay)) / (this._repeat + 1) );

-        };

-

-        p.time = function(value, suppressEvents) {

-            if (!arguments.length) {

-                return this._time;

-            }

-            if (this._dirty) {

-                this.totalDuration();

-            }

-            if (value > this._duration) {

-                value = this._duration;

-            }

-            if (this._yoyo && (this._cycle & 1) !== 0) {

-                value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay));

-            } else if (this._repeat !== 0) {

-                value += this._cycle * (this._duration + this._repeatDelay);

-            }

-            return this.totalTime(value, suppressEvents);

-        };

-

-        p.repeat = function(value) {

-            if (!arguments.length) {

-                return this._repeat;

-            }

-            this._repeat = value;

-            return this._uncache(true);

-        };

-

-        p.repeatDelay = function(value) {

-            if (!arguments.length) {

-                return this._repeatDelay;

-            }

-            this._repeatDelay = value;

-            return this._uncache(true);

-        };

-

-        p.yoyo = function(value) {

-            if (!arguments.length) {

-                return this._yoyo;

-            }

-            this._yoyo = value;

-            return this;

-        };

-

-        p.currentLabel = function(value) {

-            if (!arguments.length) {

-                return this.getLabelBefore(this._time + 0.00000001);

-            }

-            return this.seek(value, true);

-        };

-

-        return TimelineMax;

-

-    }, true);

-    

-

-

-

-

-    

-    

-    

-    

-    

-    

-    

-/*

- * ----------------------------------------------------------------

- * BezierPlugin

- * ----------------------------------------------------------------

- */

-    (function() {

-

-        var _RAD2DEG = 180 / Math.PI,

-            _r1 = [],

-            _r2 = [],

-            _r3 = [],

-            _corProps = {},

-            Segment = function(a, b, c, d) {

-                this.a = a;

-                this.b = b;

-                this.c = c;

-                this.d = d;

-                this.da = d - a;

-                this.ca = c - a;

-                this.ba = b - a;

-            },

-            _correlate = ",x,y,z,left,top,right,bottom,marginTop,marginLeft,marginRight,marginBottom,paddingLeft,paddingTop,paddingRight,paddingBottom,backgroundPosition,backgroundPosition_y,",

-            cubicToQuadratic = function(a, b, c, d) {

-                var q1 = {a:a},

-                    q2 = {},

-                    q3 = {},

-                    q4 = {c:d},

-                    mab = (a + b) / 2,

-                    mbc = (b + c) / 2,

-                    mcd = (c + d) / 2,

-                    mabc = (mab + mbc) / 2,

-                    mbcd = (mbc + mcd) / 2,

-                    m8 = (mbcd - mabc) / 8;

-                q1.b = mab + (a - mab) / 4;

-                q2.b = mabc + m8;

-                q1.c = q2.a = (q1.b + q2.b) / 2;

-                q2.c = q3.a = (mabc + mbcd) / 2;

-                q3.b = mbcd - m8;

-                q4.b = mcd + (d - mcd) / 4;

-                q3.c = q4.a = (q3.b + q4.b) / 2;

-                return [q1, q2, q3, q4];

-            },

-            _calculateControlPoints = function(a, curviness, quad, basic, correlate) {

-                var l = a.length - 1,

-                    ii = 0,

-                    cp1 = a[0].a,

-                    i, p1, p2, p3, seg, m1, m2, mm, cp2, qb, r1, r2, tl;

-                for (i = 0; i < l; i++) {

-                    seg = a[ii];

-                    p1 = seg.a;

-                    p2 = seg.d;

-                    p3 = a[ii+1].d;

-

-                    if (correlate) {

-                        r1 = _r1[i];

-                        r2 = _r2[i];

-                        tl = ((r2 + r1) * curviness * 0.25) / (basic ? 0.5 : _r3[i] || 0.5);

-                        m1 = p2 - (p2 - p1) * (basic ? curviness * 0.5 : (r1 !== 0 ? tl / r1 : 0));

-                        m2 = p2 + (p3 - p2) * (basic ? curviness * 0.5 : (r2 !== 0 ? tl / r2 : 0));

-                        mm = p2 - (m1 + (((m2 - m1) * ((r1 * 3 / (r1 + r2)) + 0.5) / 4) || 0));

-                    } else {

-                        m1 = p2 - (p2 - p1) * curviness * 0.5;

-                        m2 = p2 + (p3 - p2) * curviness * 0.5;

-                        mm = p2 - (m1 + m2) / 2;

-                    }

-                    m1 += mm;

-                    m2 += mm;

-

-                    seg.c = cp2 = m1;

-                    if (i !== 0) {

-                        seg.b = cp1;

-                    } else {

-                        seg.b = cp1 = seg.a + (seg.c - seg.a) * 0.6; //instead of placing b on a exactly, we move it inline with c so that if the user specifies an ease like Back.easeIn or Elastic.easeIn which goes BEYOND the beginning, it will do so smoothly.

-                    }

-

-                    seg.da = p2 - p1;

-                    seg.ca = cp2 - p1;

-                    seg.ba = cp1 - p1;

-

-                    if (quad) {

-                        qb = cubicToQuadratic(p1, cp1, cp2, p2);

-                        a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]);

-                        ii += 4;

-                    } else {

-                        ii++;

-                    }

-

-                    cp1 = m2;

-                }

-                seg = a[ii];

-                seg.b = cp1;

-                seg.c = cp1 + (seg.d - cp1) * 0.4; //instead of placing c on d exactly, we move it inline with b so that if the user specifies an ease like Back.easeOut or Elastic.easeOut which goes BEYOND the end, it will do so smoothly.

-                seg.da = seg.d - seg.a;

-                seg.ca = seg.c - seg.a;

-                seg.ba = cp1 - seg.a;

-                if (quad) {

-                    qb = cubicToQuadratic(seg.a, cp1, seg.c, seg.d);

-                    a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]);

-                }

-            },

-            _parseAnchors = function(values, p, correlate, prepend) {

-                var a = [],

-                    l, i, p1, p2, p3, tmp;

-                if (prepend) {

-                    values = [prepend].concat(values);

-                    i = values.length;

-                    while (--i > -1) {

-                        if (typeof( (tmp = values[i][p]) ) === "string") if (tmp.charAt(1) === "=") {

-                            values[i][p] = prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)); //accommodate relative values. Do it inline instead of breaking it out into a function for speed reasons

-                        }

-                    }

-                }

-                l = values.length - 2;

-                if (l < 0) {

-                    a[0] = new Segment(values[0][p], 0, 0, values[(l < -1) ? 0 : 1][p]);

-                    return a;

-                }

-                for (i = 0; i < l; i++) {

-                    p1 = values[i][p];

-                    p2 = values[i+1][p];

-                    a[i] = new Segment(p1, 0, 0, p2);

-                    if (correlate) {

-                        p3 = values[i+2][p];

-                        _r1[i] = (_r1[i] || 0) + (p2 - p1) * (p2 - p1);

-                        _r2[i] = (_r2[i] || 0) + (p3 - p2) * (p3 - p2);

-                    }

-                }

-                a[i] = new Segment(values[i][p], 0, 0, values[i+1][p]);

-                return a;

-            },

-            bezierThrough = function(values, curviness, quadratic, basic, correlate, prepend) {

-                var obj = {},

-                    props = [],

-                    first = prepend || values[0],

-                    i, p, a, j, r, l, seamless, last;

-                correlate = (typeof(correlate) === "string") ? ","+correlate+"," : _correlate;

-                if (curviness == null) {

-                    curviness = 1;

-                }

-                for (p in values[0]) {

-                    props.push(p);

-                }

-                //check to see if the last and first values are identical (well, within 0.05). If so, make seamless by appending the second element to the very end of the values array and the 2nd-to-last element to the very beginning (we'll remove those segments later)

-                if (values.length > 1) {

-                    last = values[values.length - 1];

-                    seamless = true;

-                    i = props.length;

-                    while (--i > -1) {

-                        p = props[i];

-                        if (Math.abs(first[p] - last[p]) > 0.05) { //build in a tolerance of +/-0.05 to accommodate rounding errors. For example, if you set an object's position to 4.945, Flash will make it 4.9

-                            seamless = false;

-                            break;

-                        }

-                    }

-                    if (seamless) {

-                        values = values.concat(); //duplicate the array to avoid contaminating the original which the user may be reusing for other tweens

-                        if (prepend) {

-                            values.unshift(prepend);

-                        }

-                        values.push(values[1]);

-                        prepend = values[values.length - 3];

-                    }

-                }

-                _r1.length = _r2.length = _r3.length = 0;

-                i = props.length;

-                while (--i > -1) {

-                    p = props[i];

-                    _corProps[p] = (correlate.indexOf(","+p+",") !== -1);

-                    obj[p] = _parseAnchors(values, p, _corProps[p], prepend);

-                }

-                i = _r1.length;

-                while (--i > -1) {

-                    _r1[i] = Math.sqrt(_r1[i]);

-                    _r2[i] = Math.sqrt(_r2[i]);

-                }

-                if (!basic) {

-                    i = props.length;

-                    while (--i > -1) {

-                        if (_corProps[p]) {

-                            a = obj[props[i]];

-                            l = a.length - 1;

-                            for (j = 0; j < l; j++) {

-                                r = a[j+1].da / _r2[j] + a[j].da / _r1[j];

-                                _r3[j] = (_r3[j] || 0) + r * r;

-                            }

-                        }

-                    }

-                    i = _r3.length;

-                    while (--i > -1) {

-                        _r3[i] = Math.sqrt(_r3[i]);

-                    }

-                }

-                i = props.length;

-                j = quadratic ? 4 : 1;

-                while (--i > -1) {

-                    p = props[i];

-                    a = obj[p];

-                    _calculateControlPoints(a, curviness, quadratic, basic, _corProps[p]); //this method requires that _parseAnchors() and _setSegmentRatios() ran first so that _r1, _r2, and _r3 values are populated for all properties

-                    if (seamless) {

-                        a.splice(0, j);

-                        a.splice(a.length - j, j);

-                    }

-                }

-                return obj;

-            },

-            _parseBezierData = function(values, type, prepend) {

-                type = type || "soft";

-                var obj = {},

-                    inc = (type === "cubic") ? 3 : 2,

-                    soft = (type === "soft"),

-                    props = [],

-                    a, b, c, d, cur, i, j, l, p, cnt, tmp;

-                if (soft && prepend) {

-                    values = [prepend].concat(values);

-                }

-                if (values == null || values.length < inc + 1) { throw "invalid Bezier data"; }

-                for (p in values[0]) {

-                    props.push(p);

-                }

-                i = props.length;

-                while (--i > -1) {

-                    p = props[i];

-                    obj[p] = cur = [];

-                    cnt = 0;

-                    l = values.length;

-                    for (j = 0; j < l; j++) {

-                        a = (prepend == null) ? values[j][p] : (typeof( (tmp = values[j][p]) ) === "string" && tmp.charAt(1) === "=") ? prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)) : Number(tmp);

-                        if (soft) if (j > 1) if (j < l - 1) {

-                            cur[cnt++] = (a + cur[cnt-2]) / 2;

-                        }

-                        cur[cnt++] = a;

-                    }

-                    l = cnt - inc + 1;

-                    cnt = 0;

-                    for (j = 0; j < l; j += inc) {

-                        a = cur[j];

-                        b = cur[j+1];

-                        c = cur[j+2];

-                        d = (inc === 2) ? 0 : cur[j+3];

-                        cur[cnt++] = tmp = (inc === 3) ? new Segment(a, b, c, d) : new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c);

-                    }

-                    cur.length = cnt;

-                }

-                return obj;

-            },

-            _addCubicLengths = function(a, steps, resolution) {

-                var inc = 1 / resolution,

-                    j = a.length,

-                    d, d1, s, da, ca, ba, p, i, inv, bez, index;

-                while (--j > -1) {

-                    bez = a[j];

-                    s = bez.a;

-                    da = bez.d - s;

-                    ca = bez.c - s;

-                    ba = bez.b - s;

-                    d = d1 = 0;

-                    for (i = 1; i <= resolution; i++) {

-                        p = inc * i;

-                        inv = 1 - p;

-                        d = d1 - (d1 = (p * p * da + 3 * inv * (p * ca + inv * ba)) * p);

-                        index = j * resolution + i - 1;

-                        steps[index] = (steps[index] || 0) + d * d;

-                    }

-                }

-            },

-            _parseLengthData = function(obj, resolution) {

-                resolution = resolution >> 0 || 6;

-                var a = [],

-                    lengths = [],

-                    d = 0,

-                    total = 0,

-                    threshold = resolution - 1,

-                    segments = [],

-                    curLS = [], //current length segments array

-                    p, i, l, index;

-                for (p in obj) {

-                    _addCubicLengths(obj[p], a, resolution);

-                }

-                l = a.length;

-                for (i = 0; i < l; i++) {

-                    d += Math.sqrt(a[i]);

-                    index = i % resolution;

-                    curLS[index] = d;

-                    if (index === threshold) {

-                        total += d;

-                        index = (i / resolution) >> 0;

-                        segments[index] = curLS;

-                        lengths[index] = total;

-                        d = 0;

-                        curLS = [];

-                    }

-                }

-                return {length:total, lengths:lengths, segments:segments};

-            },

-

-

-

-            BezierPlugin = window._gsDefine.plugin({

-                    propName: "bezier",

-                    priority: -1,

-                    version: "1.3.2",

-                    API: 2,

-                    global:true,

-

-                    //gets called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.

-                    init: function(target, vars, tween) {

-                        this._target = target;

-                        if (vars instanceof Array) {

-                            vars = {values:vars};

-                        }

-                        this._func = {};

-                        this._round = {};

-                        this._props = [];

-                        this._timeRes = (vars.timeResolution == null) ? 6 : parseInt(vars.timeResolution, 10);

-                        var values = vars.values || [],

-                            first = {},

-                            second = values[0],

-                            autoRotate = vars.autoRotate || tween.vars.orientToBezier,

-                            p, isFunc, i, j, prepend;

-

-                        this._autoRotate = autoRotate ? (autoRotate instanceof Array) ? autoRotate : [["x","y","rotation",((autoRotate === true) ? 0 : Number(autoRotate) || 0)]] : null;

-                        for (p in second) {

-                            this._props.push(p);

-                        }

-

-                        i = this._props.length;

-                        while (--i > -1) {

-                            p = this._props[i];

-

-                            this._overwriteProps.push(p);

-                            isFunc = this._func[p] = (typeof(target[p]) === "function");

-                            first[p] = (!isFunc) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]();

-                            if (!prepend) if (first[p] !== values[0][p]) {

-                                prepend = first;

-                            }

-                        }

-                        this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate, prepend) : _parseBezierData(values, vars.type, first);

-                        this._segCount = this._beziers[p].length;

-

-                        if (this._timeRes) {

-                            var ld = _parseLengthData(this._beziers, this._timeRes);

-                            this._length = ld.length;

-                            this._lengths = ld.lengths;

-                            this._segments = ld.segments;

-                            this._l1 = this._li = this._s1 = this._si = 0;

-                            this._l2 = this._lengths[0];

-                            this._curSeg = this._segments[0];

-                            this._s2 = this._curSeg[0];

-                            this._prec = 1 / this._curSeg.length;

-                        }

-

-                        if ((autoRotate = this._autoRotate)) {

-                            this._initialRotations = [];

-                            if (!(autoRotate[0] instanceof Array)) {

-                                this._autoRotate = autoRotate = [autoRotate];

-                            }

-                            i = autoRotate.length;

-                            while (--i > -1) {

-                                for (j = 0; j < 3; j++) {

-                                    p = autoRotate[i][j];

-                                    this._func[p] = (typeof(target[p]) === "function") ? target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ] : false;

-                                }

-                                p = autoRotate[i][2];

-                                this._initialRotations[i] = this._func[p] ? this._func[p].call(this._target) : this._target[p];

-                            }

-                        }

-                        this._startRatio = tween.vars.runBackwards ? 1 : 0; //we determine the starting ratio when the tween inits which is always 0 unless the tween has runBackwards:true (indicating it's a from() tween) in which case it's 1.

-                        return true;

-                    },

-

-                    //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)

-                    set: function(v) {

-                        var segments = this._segCount,

-                            func = this._func,

-                            target = this._target,

-                            notStart = (v !== this._startRatio),

-                            curIndex, inv, i, p, b, t, val, l, lengths, curSeg;

-                        if (!this._timeRes) {

-                            curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0;

-                            t = (v - (curIndex * (1 / segments))) * segments;

-                        } else {

-                            lengths = this._lengths;

-                            curSeg = this._curSeg;

-                            v *= this._length;

-                            i = this._li;

-                            //find the appropriate segment (if the currently cached one isn't correct)

-                            if (v > this._l2 && i < segments - 1) {

-                                l = segments - 1;

-                                while (i < l && (this._l2 = lengths[++i]) <= v) {   }

-                                this._l1 = lengths[i-1];

-                                this._li = i;

-                                this._curSeg = curSeg = this._segments[i];

-                                this._s2 = curSeg[(this._s1 = this._si = 0)];

-                            } else if (v < this._l1 && i > 0) {

-                                while (i > 0 && (this._l1 = lengths[--i]) >= v) { }

-                                if (i === 0 && v < this._l1) {

-                                    this._l1 = 0;

-                                } else {

-                                    i++;

-                                }

-                                this._l2 = lengths[i];

-                                this._li = i;

-                                this._curSeg = curSeg = this._segments[i];

-                                this._s1 = curSeg[(this._si = curSeg.length - 1) - 1] || 0;

-                                this._s2 = curSeg[this._si];

-                            }

-                            curIndex = i;

-                            //now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one)

-                            v -= this._l1;

-                            i = this._si;

-                            if (v > this._s2 && i < curSeg.length - 1) {

-                                l = curSeg.length - 1;

-                                while (i < l && (this._s2 = curSeg[++i]) <= v) {    }

-                                this._s1 = curSeg[i-1];

-                                this._si = i;

-                            } else if (v < this._s1 && i > 0) {

-                                while (i > 0 && (this._s1 = curSeg[--i]) >= v) {    }

-                                if (i === 0 && v < this._s1) {

-                                    this._s1 = 0;

-                                } else {

-                                    i++;

-                                }

-                                this._s2 = curSeg[i];

-                                this._si = i;

-                            }

-                            t = (i + (v - this._s1) / (this._s2 - this._s1)) * this._prec;

-                        }

-                        inv = 1 - t;

-

-                        i = this._props.length;

-                        while (--i > -1) {

-                            p = this._props[i];

-                            b = this._beziers[p][curIndex];

-                            val = (t * t * b.da + 3 * inv * (t * b.ca + inv * b.ba)) * t + b.a;

-                            if (this._round[p]) {

-                                val = Math.round(val);

-                            }

-                            if (func[p]) {

-                                target[p](val);

-                            } else {

-                                target[p] = val;

-                            }

-                        }

-

-                        if (this._autoRotate) {

-                            var ar = this._autoRotate,

-                                b2, x1, y1, x2, y2, add, conv;

-                            i = ar.length;

-                            while (--i > -1) {

-                                p = ar[i][2];

-                                add = ar[i][3] || 0;

-                                conv = (ar[i][4] === true) ? 1 : _RAD2DEG;

-                                b = this._beziers[ar[i][0]];

-                                b2 = this._beziers[ar[i][1]];

-

-                                if (b && b2) { //in case one of the properties got overwritten.

-                                    b = b[curIndex];

-                                    b2 = b2[curIndex];

-

-                                    x1 = b.a + (b.b - b.a) * t;

-                                    x2 = b.b + (b.c - b.b) * t;

-                                    x1 += (x2 - x1) * t;

-                                    x2 += ((b.c + (b.d - b.c) * t) - x2) * t;

-

-                                    y1 = b2.a + (b2.b - b2.a) * t;

-                                    y2 = b2.b + (b2.c - b2.b) * t;

-                                    y1 += (y2 - y1) * t;

-                                    y2 += ((b2.c + (b2.d - b2.c) * t) - y2) * t;

-

-                                    val = notStart ? Math.atan2(y2 - y1, x2 - x1) * conv + add : this._initialRotations[i];

-

-                                    if (func[p]) {

-                                        target[p](val);

-                                    } else {

-                                        target[p] = val;

-                                    }

-                                }

-                            }

-                        }

-                    }

-            }),

-            p = BezierPlugin.prototype;

-

-

-        BezierPlugin.bezierThrough = bezierThrough;

-        BezierPlugin.cubicToQuadratic = cubicToQuadratic;

-        BezierPlugin._autoCSS = true; //indicates that this plugin can be inserted into the "css" object using the autoCSS feature of TweenLite

-        BezierPlugin.quadraticToCubic = function(a, b, c) {

-            return new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c);

-        };

-

-        BezierPlugin._cssRegister = function() {

-            var CSSPlugin = window._gsDefine.globals.CSSPlugin;

-            if (!CSSPlugin) {

-                return;

-            }

-            var _internals = CSSPlugin._internals,

-                _parseToProxy = _internals._parseToProxy,

-                _setPluginRatio = _internals._setPluginRatio,

-                CSSPropTween = _internals.CSSPropTween;

-            _internals._registerComplexSpecialProp("bezier", {parser:function(t, e, prop, cssp, pt, plugin) {

-                if (e instanceof Array) {

-                    e = {values:e};

-                }

-                plugin = new BezierPlugin();

-                var values = e.values,

-                    l = values.length - 1,

-                    pluginValues = [],

-                    v = {},

-                    i, p, data;

-                if (l < 0) {

-                    return pt;

-                }

-                for (i = 0; i <= l; i++) {

-                    data = _parseToProxy(t, values[i], cssp, pt, plugin, (l !== i));

-                    pluginValues[i] = data.end;

-                }

-                for (p in e) {

-                    v[p] = e[p]; //duplicate the vars object because we need to alter some things which would cause problems if the user plans to reuse the same vars object for another tween.

-                }

-                v.values = pluginValues;

-                pt = new CSSPropTween(t, "bezier", 0, 0, data.pt, 2);

-                pt.data = data;

-                pt.plugin = plugin;

-                pt.setRatio = _setPluginRatio;

-                if (v.autoRotate === 0) {

-                    v.autoRotate = true;

-                }

-                if (v.autoRotate && !(v.autoRotate instanceof Array)) {

-                    i = (v.autoRotate === true) ? 0 : Number(v.autoRotate);

-                    v.autoRotate = (data.end.left != null) ? [["left","top","rotation",i,false]] : (data.end.x != null) ? [["x","y","rotation",i,false]] : false;

-                }

-                if (v.autoRotate) {

-                    if (!cssp._transform) {

-                        cssp._enableTransforms(false);

-                    }

-                    data.autoRotate = cssp._target._gsTransform;

-                }

-                plugin._onInitTween(data.proxy, v, cssp._tween);

-                return pt;

-            }});

-        };

-

-        p._roundProps = function(lookup, value) {

-            var op = this._overwriteProps,

-                i = op.length;

-            while (--i > -1) {

-                if (lookup[op[i]] || lookup.bezier || lookup.bezierThrough) {

-                    this._round[op[i]] = value;

-                }

-            }

-        };

-

-        p._kill = function(lookup) {

-            var a = this._props,

-                p, i;

-            for (p in this._beziers) {

-                if (p in lookup) {

-                    delete this._beziers[p];

-                    delete this._func[p];

-                    i = a.length;

-                    while (--i > -1) {

-                        if (a[i] === p) {

-                            a.splice(i, 1);

-                        }

-                    }

-                }

-            }

-            return this._super._kill.call(this, lookup);

-        };

-

-    }());

-

-

-

-

-

-

-    

-    

-    

-    

-    

-    

-    

-    

-/*

- * ----------------------------------------------------------------

- * CSSPlugin

- * ----------------------------------------------------------------

- */

-    window._gsDefine("plugins.CSSPlugin", ["plugins.TweenPlugin","TweenLite"], function(TweenPlugin, TweenLite) {

-

-        /** @constructor **/

-        var CSSPlugin = function() {

-                TweenPlugin.call(this, "css");

-                this._overwriteProps.length = 0;

-                this.setRatio = CSSPlugin.prototype.setRatio; //speed optimization (avoid prototype lookup on this "hot" method)

-            },

-            _hasPriority, //turns true whenever a CSSPropTween instance is created that has a priority other than 0. This helps us discern whether or not we should spend the time organizing the linked list or not after a CSSPlugin's _onInitTween() method is called.

-            _suffixMap, //we set this in _onInitTween() each time as a way to have a persistent variable we can use in other methods like _parse() without having to pass it around as a parameter and we keep _parse() decoupled from a particular CSSPlugin instance

-            _cs, //computed style (we store this in a shared variable to conserve memory and make minification tighter

-            _overwriteProps, //alias to the currently instantiating CSSPlugin's _overwriteProps array. We use this closure in order to avoid having to pass a reference around from method to method and aid in minification.

-            _specialProps = {},

-            p = CSSPlugin.prototype = new TweenPlugin("css");

-

-        p.constructor = CSSPlugin;

-        CSSPlugin.version = "1.12.1";

-        CSSPlugin.API = 2;

-        CSSPlugin.defaultTransformPerspective = 0;

-        CSSPlugin.defaultSkewType = "compensated";

-        p = "px"; //we'll reuse the "p" variable to keep file size down

-        CSSPlugin.suffixMap = {top:p, right:p, bottom:p, left:p, width:p, height:p, fontSize:p, padding:p, margin:p, perspective:p, lineHeight:""};

-

-

-        var _numExp = /(?:\d|\-\d|\.\d|\-\.\d)+/g,

-            _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,

-            _valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"

-            _NaNExp = /[^\d\-\.]/g,

-            _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g,

-            _opacityExp = /opacity *= *([^)]*)/i,

-            _opacityValExp = /opacity:([^;]*)/i,

-            _alphaFilterExp = /alpha\(opacity *=.+?\)/i,

-            _rgbhslExp = /^(rgb|hsl)/,

-            _capsExp = /([A-Z])/g,

-            _camelExp = /-([a-z])/gi,

-            _urlExp = /(^(?:url\(\"|url\())|(?:(\"\))$|\)$)/gi, //for pulling out urls from url(...) or url("...") strings (some browsers wrap urls in quotes, some don't when reporting things like backgroundImage)

-            _camelFunc = function(s, g) { return g.toUpperCase(); },

-            _horizExp = /(?:Left|Right|Width)/i,

-            _ieGetMatrixExp = /(M11|M12|M21|M22)=[\d\-\.e]+/gi,

-            _ieSetMatrixExp = /progid\:DXImageTransform\.Microsoft\.Matrix\(.+?\)/i,

-            _commasOutsideParenExp = /,(?=[^\)]*(?:\(|$))/gi, //finds any commas that are not within parenthesis

-            _DEG2RAD = Math.PI / 180,

-            _RAD2DEG = 180 / Math.PI,

-            _forcePT = {},

-            _doc = document,

-            _tempDiv = _doc.createElement("div"),

-            _tempImg = _doc.createElement("img"),

-            _internals = CSSPlugin._internals = {_specialProps:_specialProps}, //provides a hook to a few internal methods that we need to access from inside other plugins

-            _agent = navigator.userAgent,

-            _autoRound,

-            _reqSafariFix, //we won't apply the Safari transform fix until we actually come across a tween that affects a transform property (to maintain best performance).

-

-            _isSafari,

-            _isFirefox, //Firefox has a bug that causes 3D transformed elements to randomly disappear unless a repaint is forced after each update on each element.

-            _isSafariLT6, //Safari (and Android 4 which uses a flavor of Safari) has a bug that prevents changes to "top" and "left" properties from rendering properly if changed on the same frame as a transform UNLESS we set the element's WebkitBackfaceVisibility to hidden (weird, I know). Doing this for Android 3 and earlier seems to actually cause other problems, though (fun!)

-            _ieVers,

-            _supportsOpacity = (function() { //we set _isSafari, _ieVers, _isFirefox, and _supportsOpacity all in one function here to reduce file size slightly, especially in the minified version.

-                var i = _agent.indexOf("Android"),

-                    d = _doc.createElement("div"), a;

-

-                _isSafari = (_agent.indexOf("Safari") !== -1 && _agent.indexOf("Chrome") === -1 && (i === -1 || Number(_agent.substr(i+8, 1)) > 3));

-                _isSafariLT6 = (_isSafari && (Number(_agent.substr(_agent.indexOf("Version/")+8, 1)) < 6));

-                _isFirefox = (_agent.indexOf("Firefox") !== -1);

-

-                if ((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(_agent)) {

-                    _ieVers = parseFloat( RegExp.$1 );

-                }

-

-                d.innerHTML = "<a title='' style='top:1px;opacity:.55;'>a</a>";

-                a = d.getElementsByTagName("a")[0];

-                return a ? /^0.55/.test(a.style.opacity) : false;

-            }()),

-            _getIEOpacity = function(v) {

-                return (_opacityExp.test( ((typeof(v) === "string") ? v : (v.currentStyle ? v.currentStyle.filter : v.style.filter) || "") ) ? ( parseFloat( RegExp.$1 ) / 100 ) : 1);

-            },

-            _log = function(s) {//for logging messages, but in a way that won't throw errors in old versions of IE.

-                if (window.console) {

-                    //console.log(s);

-                }

-            },

-            _prefixCSS = "", //the non-camelCase vendor prefix like "-o-", "-moz-", "-ms-", or "-webkit-"

-            _prefix = "", //camelCase vendor prefix like "O", "ms", "Webkit", or "Moz".

-

-            // @private feed in a camelCase property name like "transform" and it will check to see if it is valid as-is or if it needs a vendor prefix. It returns the corrected camelCase property name (i.e. "WebkitTransform" or "MozTransform" or "transform" or null if no such property is found, like if the browser is IE8 or before, "transform" won't be found at all)

-            _checkPropPrefix = function(p, e) {

-                e = e || _tempDiv;

-                var s = e.style,

-                    a, i;

-                if (s[p] !== undefined) {

-                    return p;

-                }

-                p = p.charAt(0).toUpperCase() + p.substr(1);

-                a = ["O","Moz","ms","Ms","Webkit"];

-                i = 5;

-                while (--i > -1 && s[a[i]+p] === undefined) { }

-                if (i >= 0) {

-                    _prefix = (i === 3) ? "ms" : a[i];

-                    _prefixCSS = "-" + _prefix.toLowerCase() + "-";

-                    return _prefix + p;

-                }

-                return null;

-            },

-

-            _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : function() {},

-

-            /**

-             * @private Returns the css style for a particular property of an element. For example, to get whatever the current "left" css value for an element with an ID of "myElement", you could do:

-             * var currentLeft = CSSPlugin.getStyle( document.getElementById("myElement"), "left");

-             *

-             * @param {!Object} t Target element whose style property you want to query

-             * @param {!string} p Property name (like "left" or "top" or "marginTop", etc.)

-             * @param {Object=} cs Computed style object. This just provides a way to speed processing if you're going to get several properties on the same element in quick succession - you can reuse the result of the getComputedStyle() call.

-             * @param {boolean=} calc If true, the value will not be read directly from the element's "style" property (if it exists there), but instead the getComputedStyle() result will be used. This can be useful when you want to ensure that the browser itself is interpreting the value.

-             * @param {string=} dflt Default value that should be returned in the place of null, "none", "auto" or "auto auto".

-             * @return {?string} The current property value

-             */

-            _getStyle = CSSPlugin.getStyle = function(t, p, cs, calc, dflt) {

-                var rv;

-                if (!_supportsOpacity) if (p === "opacity") { //several versions of IE don't use the standard "opacity" property - they use things like filter:alpha(opacity=50), so we parse that here.

-                    return _getIEOpacity(t);

-                }

-                if (!calc && t.style[p]) {

-                    rv = t.style[p];

-                } else if ((cs = cs || _getComputedStyle(t))) {

-                    rv = cs[p] || cs.getPropertyValue(p) || cs.getPropertyValue(p.replace(_capsExp, "-$1").toLowerCase());

-                } else if (t.currentStyle) {

-                    rv = t.currentStyle[p];

-                }

-                return (dflt != null && (!rv || rv === "none" || rv === "auto" || rv === "auto auto")) ? dflt : rv;

-            },

-

-            /**

-             * @private Pass the target element, the property name, the numeric value, and the suffix (like "%", "em", "px", etc.) and it will spit back the equivalent pixel number.

-             * @param {!Object} t Target element

-             * @param {!string} p Property name (like "left", "top", "marginLeft", etc.)

-             * @param {!number} v Value

-             * @param {string=} sfx Suffix (like "px" or "%" or "em")

-             * @param {boolean=} recurse If true, the call is a recursive one. In some browsers (like IE7/8), occasionally the value isn't accurately reported initially, but if we run the function again it will take effect.

-             * @return {number} value in pixels

-             */

-            _convertToPixels = _internals.convertToPixels = function(t, p, v, sfx, recurse) {

-                if (sfx === "px" || !sfx) { return v; }

-                if (sfx === "auto" || !v) { return 0; }

-                var horiz = _horizExp.test(p),

-                    node = t,

-                    style = _tempDiv.style,

-                    neg = (v < 0),

-                    pix, cache, time;

-                if (neg) {

-                    v = -v;

-                }

-                if (sfx === "%" && p.indexOf("border") !== -1) {

-                    pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight);

-                } else {

-                    style.cssText = "border:0 solid red;position:" + _getStyle(t, "position") + ";line-height:0;";

-                    if (sfx === "%" || !node.appendChild) {

-                        node = t.parentNode || _doc.body;

-                        cache = node._gsCache;

-                        time = TweenLite.ticker.frame;

-                        if (cache && horiz && cache.time === time) { //performance optimization: we record the width of elements along with the ticker frame so that we can quickly get it again on the same tick (seems relatively safe to assume it wouldn't change on the same tick)

-                            return cache.width * v / 100;

-                        }

-                        style[(horiz ? "width" : "height")] = v + sfx;

-                    } else {

-                        style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx;

-                    }

-                    node.appendChild(_tempDiv);

-                    pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]);

-                    node.removeChild(_tempDiv);

-                    if (horiz && sfx === "%" && CSSPlugin.cacheWidths !== false) {

-                        cache = node._gsCache = node._gsCache || {};

-                        cache.time = time;

-                        cache.width = pix / v * 100;

-                    }

-                    if (pix === 0 && !recurse) {

-                        pix = _convertToPixels(t, p, v, sfx, true);

-                    }

-                }

-                return neg ? -pix : pix;

-            },

-            _calculateOffset = _internals.calculateOffset = function(t, p, cs) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop

-                if (_getStyle(t, "position", cs) !== "absolute") { return 0; }

-                var dim = ((p === "left") ? "Left" : "Top"),

-                    v = _getStyle(t, "margin" + dim, cs);

-                return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), v.replace(_suffixExp, "")) || 0);

-            },

-

-            // @private returns at object containing ALL of the style properties in camelCase and their associated values.

-            _getAllStyles = function(t, cs) {

-                var s = {},

-                    i, tr;

-                if ((cs = cs || _getComputedStyle(t, null))) {

-                    if ((i = cs.length)) {

-                        while (--i > -1) {

-                            s[cs[i].replace(_camelExp, _camelFunc)] = cs.getPropertyValue(cs[i]);

-                        }

-                    } else { //Opera behaves differently - cs.length is always 0, so we must do a for...in loop.

-                        for (i in cs) {

-                            s[i] = cs[i];

-                        }

-                    }

-                } else if ((cs = t.currentStyle || t.style)) {

-                    for (i in cs) {

-                        if (typeof(i) === "string" && s[i] === undefined) {

-                            s[i.replace(_camelExp, _camelFunc)] = cs[i];

-                        }

-                    }

-                }

-                if (!_supportsOpacity) {

-                    s.opacity = _getIEOpacity(t);

-                }

-                tr = _getTransform(t, cs, false);

-                s.rotation = tr.rotation;

-                s.skewX = tr.skewX;

-                s.scaleX = tr.scaleX;

-                s.scaleY = tr.scaleY;

-                s.x = tr.x;

-                s.y = tr.y;

-                if (_supports3D) {

-                    s.z = tr.z;

-                    s.rotationX = tr.rotationX;

-                    s.rotationY = tr.rotationY;

-                    s.scaleZ = tr.scaleZ;

-                }

-                if (s.filters) {

-                    delete s.filters;

-                }

-                return s;

-            },

-

-            // @private analyzes two style objects (as returned by _getAllStyles()) and only looks for differences between them that contain tweenable values (like a number or color). It returns an object with a "difs" property which refers to an object containing only those isolated properties and values for tweening, and a "firstMPT" property which refers to the first MiniPropTween instance in a linked list that recorded all the starting values of the different properties so that we can revert to them at the end or beginning of the tween - we don't want the cascading to get messed up. The forceLookup parameter is an optional generic object with properties that should be forced into the results - this is necessary for className tweens that are overwriting others because imagine a scenario where a rollover/rollout adds/removes a class and the user swipes the mouse over the target SUPER fast, thus nothing actually changed yet and the subsequent comparison of the properties would indicate they match (especially when px rounding is taken into consideration), thus no tweening is necessary even though it SHOULD tween and remove those properties after the tween (otherwise the inline styles will contaminate things). See the className SpecialProp code for details.

-            _cssDif = function(t, s1, s2, vars, forceLookup) {

-                var difs = {},

-                    style = t.style,

-                    val, p, mpt;

-                for (p in s2) {

-                    if (p !== "cssText") if (p !== "length") if (isNaN(p)) if (s1[p] !== (val = s2[p]) || (forceLookup && forceLookup[p])) if (p.indexOf("Origin") === -1) if (typeof(val) === "number" || typeof(val) === "string") {

-                        difs[p] = (val === "auto" && (p === "left" || p === "top")) ? _calculateOffset(t, p) : ((val === "" || val === "auto" || val === "none") && typeof(s1[p]) === "string" && s1[p].replace(_NaNExp, "") !== "") ? 0 : val; //if the ending value is defaulting ("" or "auto"), we check the starting value and if it can be parsed into a number (a string which could have a suffix too, like 700px), then we swap in 0 for "" or "auto" so that things actually tween.

-                        if (style[p] !== undefined) { //for className tweens, we must remember which properties already existed inline - the ones that didn't should be removed when the tween isn't in progress because they were only introduced to facilitate the transition between classes.

-                            mpt = new MiniPropTween(style, p, style[p], mpt);

-                        }

-                    }

-                }

-                if (vars) {

-                    for (p in vars) { //copy properties (except className)

-                        if (p !== "className") {

-                            difs[p] = vars[p];

-                        }

-                    }

-                }

-                return {difs:difs, firstMPT:mpt};

-            },

-            _dimensions = {width:["Left","Right"], height:["Top","Bottom"]},

-            _margins = ["marginLeft","marginRight","marginTop","marginBottom"],

-

-            /**

-             * @private Gets the width or height of an element

-             * @param {!Object} t Target element

-             * @param {!string} p Property name ("width" or "height")

-             * @param {Object=} cs Computed style object (if one exists). Just a speed optimization.

-             * @return {number} Dimension (in pixels)

-             */

-            _getDimension = function(t, p, cs) {

-                var v = parseFloat((p === "width") ? t.offsetWidth : t.offsetHeight),

-                    a = _dimensions[p],

-                    i = a.length;

-                cs = cs || _getComputedStyle(t, null);

-                while (--i > -1) {

-                    v -= parseFloat( _getStyle(t, "padding" + a[i], cs, true) ) || 0;

-                    v -= parseFloat( _getStyle(t, "border" + a[i] + "Width", cs, true) ) || 0;

-                }

-                return v;

-            },

-

-            // @private Parses position-related complex strings like "top left" or "50px 10px" or "70% 20%", etc. which are used for things like transformOrigin or backgroundPosition. Optionally decorates a supplied object (recObj) with the following properties: "ox" (offsetX), "oy" (offsetY), "oxp" (if true, "ox" is a percentage not a pixel value), and "oxy" (if true, "oy" is a percentage not a pixel value)

-            _parsePosition = function(v, recObj) {

-                if (v == null || v === "" || v === "auto" || v === "auto auto") { //note: Firefox uses "auto auto" as default whereas Chrome uses "auto".

-                    v = "0 0";

-                }

-                var a = v.split(" "),

-                    x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0],

-                    y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1];

-                if (y == null) {

-                    y = "0";

-                } else if (y === "center") {

-                    y = "50%";

-                }

-                if (x === "center" || (isNaN(parseFloat(x)) && (x + "").indexOf("=") === -1)) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative.

-                    x = "50%";

-                }

-                if (recObj) {

-                    recObj.oxp = (x.indexOf("%") !== -1);

-                    recObj.oyp = (y.indexOf("%") !== -1);

-                    recObj.oxr = (x.charAt(1) === "=");

-                    recObj.oyr = (y.charAt(1) === "=");

-                    recObj.ox = parseFloat(x.replace(_NaNExp, ""));

-                    recObj.oy = parseFloat(y.replace(_NaNExp, ""));

-                }

-                return x + " " + y + ((a.length > 2) ? " " + a[2] : "");

-            },

-

-            /**

-             * @private Takes an ending value (typically a string, but can be a number) and a starting value and returns the change between the two, looking for relative value indicators like += and -= and it also ignores suffixes (but make sure the ending value starts with a number or +=/-= and that the starting value is a NUMBER!)

-             * @param {(number|string)} e End value which is typically a string, but could be a number

-             * @param {(number|string)} b Beginning value which is typically a string but could be a number

-             * @return {number} Amount of change between the beginning and ending values (relative values that have a "+=" or "-=" are recognized)

-             */

-            _parseChange = function(e, b) {

-                return (typeof(e) === "string" && e.charAt(1) === "=") ? parseInt(e.charAt(0) + "1", 10) * parseFloat(e.substr(2)) : parseFloat(e) - parseFloat(b);

-            },

-

-            /**

-             * @private Takes a value and a default number, checks if the value is relative, null, or numeric and spits back a normalized number accordingly. Primarily used in the _parseTransform() function.

-             * @param {Object} v Value to be parsed

-             * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter)

-             * @return {number} Parsed value

-             */

-            _parseVal = function(v, d) {

-                return (v == null) ? d : (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) + d : parseFloat(v);

-            },

-

-            /**

-             * @private Translates strings like "40deg" or "40" or 40rad" or "+=40deg" or "270_short" or "-90_cw" or "+=45_ccw" to a numeric radian angle. Of course a starting/default value must be fed in too so that relative values can be calculated properly.

-             * @param {Object} v Value to be parsed

-             * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter)

-             * @param {string=} p property name for directionalEnd (optional - only used when the parsed value is directional ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation). Property name would be "rotation", "rotationX", or "rotationY"

-             * @param {Object=} directionalEnd An object that will store the raw end values for directional angles ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation.

-             * @return {number} parsed angle in radians

-             */

-            _parseAngle = function(v, d, p, directionalEnd) {

-                var min = 0.000001,

-                    cap, split, dif, result;

-                if (v == null) {

-                    result = d;

-                } else if (typeof(v) === "number") {

-                    result = v;

-                } else {

-                    cap = 360;

-                    split = v.split("_");

-                    dif = Number(split[0].replace(_NaNExp, "")) * ((v.indexOf("rad") === -1) ? 1 : _RAD2DEG) - ((v.charAt(1) === "=") ? 0 : d);

-                    if (split.length) {

-                        if (directionalEnd) {

-                            directionalEnd[p] = d + dif;

-                        }

-                        if (v.indexOf("short") !== -1) {

-                            dif = dif % cap;

-                            if (dif !== dif % (cap / 2)) {

-                                dif = (dif < 0) ? dif + cap : dif - cap;

-                            }

-                        }

-                        if (v.indexOf("_cw") !== -1 && dif < 0) {

-                            dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;

-                        } else if (v.indexOf("ccw") !== -1 && dif > 0) {

-                            dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;

-                        }

-                    }

-                    result = d + dif;

-                }

-                if (result < min && result > -min) {

-                    result = 0;

-                }

-                return result;

-            },

-

-            _colorLookup = {aqua:[0,255,255],

-                lime:[0,255,0],

-                silver:[192,192,192],

-                black:[0,0,0],

-                maroon:[128,0,0],

-                teal:[0,128,128],

-                blue:[0,0,255],

-                navy:[0,0,128],

-                white:[255,255,255],

-                fuchsia:[255,0,255],

-                olive:[128,128,0],

-                yellow:[255,255,0],

-                orange:[255,165,0],

-                gray:[128,128,128],

-                purple:[128,0,128],

-                green:[0,128,0],

-                red:[255,0,0],

-                pink:[255,192,203],

-                cyan:[0,255,255],

-                transparent:[255,255,255,0]},

-

-            _hue = function(h, m1, m2) {

-                h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h;

-                return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0;

-            },

-

-            /**

-             * @private Parses a color (like #9F0, #FF9900, or rgb(255,51,153)) into an array with 3 elements for red, green, and blue. Also handles rgba() values (splits into array of 4 elements of course)

-             * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc.

-             * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order.

-             */

-            _parseColor = function(v) {

-                var c1, c2, c3, h, s, l;

-                if (!v || v === "") {

-                    return _colorLookup.black;

-                }

-                if (typeof(v) === "number") {

-                    return [v >> 16, (v >> 8) & 255, v & 255];

-                }

-                if (v.charAt(v.length - 1) === ",") { //sometimes a trailing commma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.

-                    v = v.substr(0, v.length - 1);

-                }

-                if (_colorLookup[v]) {

-                    return _colorLookup[v];

-                }

-                if (v.charAt(0) === "#") {

-                    if (v.length === 4) { //for shorthand like #9F0

-                        c1 = v.charAt(1),

-                        c2 = v.charAt(2),

-                        c3 = v.charAt(3);

-                        v = "#" + c1 + c1 + c2 + c2 + c3 + c3;

-                    }

-                    v = parseInt(v.substr(1), 16);

-                    return [v >> 16, (v >> 8) & 255, v & 255];

-                }

-                if (v.substr(0, 3) === "hsl") {

-                    v = v.match(_numExp);

-                    h = (Number(v[0]) % 360) / 360;

-                    s = Number(v[1]) / 100;

-                    l = Number(v[2]) / 100;

-                    c2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s;

-                    c1 = l * 2 - c2;

-                    if (v.length > 3) {

-                        v[3] = Number(v[3]);

-                    }

-                    v[0] = _hue(h + 1 / 3, c1, c2);

-                    v[1] = _hue(h, c1, c2);

-                    v[2] = _hue(h - 1 / 3, c1, c2);

-                    return v;

-                }

-                v = v.match(_numExp) || _colorLookup.transparent;

-                v[0] = Number(v[0]);

-                v[1] = Number(v[1]);

-                v[2] = Number(v[2]);

-                if (v.length > 3) {

-                    v[3] = Number(v[3]);

-                }

-                return v;

-            },

-            _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#.+?\\b"; //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.

-

-        for (p in _colorLookup) {

-            _colorExp += "|" + p + "\\b";

-        }

-        _colorExp = new RegExp(_colorExp+")", "gi");

-

-        /**

-         * @private Returns a formatter function that handles taking a string (or number in some cases) and returning a consistently formatted one in terms of delimiters, quantity of values, etc. For example, we may get boxShadow values defined as "0px red" or "0px 0px 10px rgb(255,0,0)" or "0px 0px 20px 20px #F00" and we need to ensure that what we get back is described with 4 numbers and a color. This allows us to feed it into the _parseComplex() method and split the values up appropriately. The neat thing about this _getFormatter() function is that the dflt defines a pattern as well as a default, so for example, _getFormatter("0px 0px 0px 0px #777", true) not only sets the default as 0px for all distances and #777 for the color, but also sets the pattern such that 4 numbers and a color will always get returned.

-         * @param {!string} dflt The default value and pattern to follow. So "0px 0px 0px 0px #777" will ensure that 4 numbers and a color will always get returned.

-         * @param {boolean=} clr If true, the values should be searched for color-related data. For example, boxShadow values typically contain a color whereas borderRadius don't.

-         * @param {boolean=} collapsible If true, the value is a top/left/right/bottom style one that acts like margin or padding, where if only one value is received, it's used for all 4; if 2 are received, the first is duplicated for 3rd (bottom) and the 2nd is duplicated for the 4th spot (left), etc.

-         * @return {Function} formatter function

-         */

-        var _getFormatter = function(dflt, clr, collapsible, multi) {

-                if (dflt == null) {

-                    return function(v) {return v;};

-                }

-                var dColor = clr ? (dflt.match(_colorExp) || [""])[0] : "",

-                    dVals = dflt.split(dColor).join("").match(_valuesExp) || [],

-                    pfx = dflt.substr(0, dflt.indexOf(dVals[0])),

-                    sfx = (dflt.charAt(dflt.length - 1) === ")") ? ")" : "",

-                    delim = (dflt.indexOf(" ") !== -1) ? " " : ",",

-                    numVals = dVals.length,

-                    dSfx = (numVals > 0) ? dVals[0].replace(_numExp, "") : "",

-                    formatter;

-                if (!numVals) {

-                    return function(v) {return v;};

-                }

-                if (clr) {

-                    formatter = function(v) {

-                        var color, vals, i, a;

-                        if (typeof(v) === "number") {

-                            v += dSfx;

-                        } else if (multi && _commasOutsideParenExp.test(v)) {

-                            a = v.replace(_commasOutsideParenExp, "|").split("|");

-                            for (i = 0; i < a.length; i++) {

-                                a[i] = formatter(a[i]);

-                            }

-                            return a.join(",");

-                        }

-                        color = (v.match(_colorExp) || [dColor])[0];

-                        vals = v.split(color).join("").match(_valuesExp) || [];

-                        i = vals.length;

-                        if (numVals > i--) {

-                            while (++i < numVals) {

-                                vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];

-                            }

-                        }

-                        return pfx + vals.join(delim) + delim + color + sfx + (v.indexOf("inset") !== -1 ? " inset" : "");

-                    };

-                    return formatter;

-

-                }

-                formatter = function(v) {

-                    var vals, a, i;

-                    if (typeof(v) === "number") {

-                        v += dSfx;

-                    } else if (multi && _commasOutsideParenExp.test(v)) {

-                        a = v.replace(_commasOutsideParenExp, "|").split("|");

-                        for (i = 0; i < a.length; i++) {

-                            a[i] = formatter(a[i]);

-                        }

-                        return a.join(",");

-                    }

-                    vals = v.match(_valuesExp) || [];

-                    i = vals.length;

-                    if (numVals > i--) {

-                        while (++i < numVals) {

-                            vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];

-                        }

-                    }

-                    return pfx + vals.join(delim) + sfx;

-                };

-                return formatter;

-            },

-

-            /**

-             * @private returns a formatter function that's used for edge-related values like marginTop, marginLeft, paddingBottom, paddingRight, etc. Just pass a comma-delimited list of property names related to the edges.

-             * @param {!string} props a comma-delimited list of property names in order from top to left, like "marginTop,marginRight,marginBottom,marginLeft"

-             * @return {Function} a formatter function

-             */

-            _getEdgeParser = function(props) {

-                props = props.split(",");

-                return function(t, e, p, cssp, pt, plugin, vars) {

-                    var a = (e + "").split(" "),

-                        i;

-                    vars = {};

-                    for (i = 0; i < 4; i++) {

-                        vars[props[i]] = a[i] = a[i] || a[(((i - 1) / 2) >> 0)];

-                    }

-                    return cssp.parse(t, vars, pt, plugin);

-                };

-            },

-

-            // @private used when other plugins must tween values first, like BezierPlugin or ThrowPropsPlugin, etc. That plugin's setRatio() gets called first so that the values are updated, and then we loop through the MiniPropTweens  which handle copying the values into their appropriate slots so that they can then be applied correctly in the main CSSPlugin setRatio() method. Remember, we typically create a proxy object that has a bunch of uniquely-named properties that we feed to the sub-plugin and it does its magic normally, and then we must interpret those values and apply them to the css because often numbers must get combined/concatenated, suffixes added, etc. to work with css, like boxShadow could have 4 values plus a color.

-            _setPluginRatio = _internals._setPluginRatio = function(v) {

-                this.plugin.setRatio(v);

-                var d = this.data,

-                    proxy = d.proxy,

-                    mpt = d.firstMPT,

-                    min = 0.000001,

-                    val, pt, i, str;

-                while (mpt) {

-                    val = proxy[mpt.v];

-                    if (mpt.r) {

-                        val = Math.round(val);

-                    } else if (val < min && val > -min) {

-                        val = 0;

-                    }

-                    mpt.t[mpt.p] = val;

-                    mpt = mpt._next;

-                }

-                if (d.autoRotate) {

-                    d.autoRotate.rotation = proxy.rotation;

-                }

-                //at the end, we must set the CSSPropTween's "e" (end) value dynamically here because that's what is used in the final setRatio() method.

-                if (v === 1) {

-                    mpt = d.firstMPT;

-                    while (mpt) {

-                        pt = mpt.t;

-                        if (!pt.type) {

-                            pt.e = pt.s + pt.xs0;

-                        } else if (pt.type === 1) {

-                            str = pt.xs0 + pt.s + pt.xs1;

-                            for (i = 1; i < pt.l; i++) {

-                                str += pt["xn"+i] + pt["xs"+(i+1)];

-                            }

-                            pt.e = str;

-                        }

-                        mpt = mpt._next;

-                    }

-                }

-            },

-

-            /**

-             * @private @constructor Used by a few SpecialProps to hold important values for proxies. For example, _parseToProxy() creates a MiniPropTween instance for each property that must get tweened on the proxy, and we record the original property name as well as the unique one we create for the proxy, plus whether or not the value needs to be rounded plus the original value.

-             * @param {!Object} t target object whose property we're tweening (often a CSSPropTween)

-             * @param {!string} p property name

-             * @param {(number|string|object)} v value

-             * @param {MiniPropTween=} next next MiniPropTween in the linked list

-             * @param {boolean=} r if true, the tweened value should be rounded to the nearest integer

-             */

-            MiniPropTween = function(t, p, v, next, r) {

-                this.t = t;

-                this.p = p;

-                this.v = v;

-                this.r = r;

-                if (next) {

-                    next._prev = this;

-                    this._next = next;

-                }

-            },

-

-            /**

-             * @private Most other plugins (like BezierPlugin and ThrowPropsPlugin and others) can only tween numeric values, but CSSPlugin must accommodate special values that have a bunch of extra data (like a suffix or strings between numeric values, etc.). For example, boxShadow has values like "10px 10px 20px 30px rgb(255,0,0)" which would utterly confuse other plugins. This method allows us to split that data apart and grab only the numeric data and attach it to uniquely-named properties of a generic proxy object ({}) so that we can feed that to virtually any plugin to have the numbers tweened. However, we must also keep track of which properties from the proxy go with which CSSPropTween values and instances. So we create a linked list of MiniPropTweens. Each one records a target (the original CSSPropTween), property (like "s" or "xn1" or "xn2") that we're tweening and the unique property name that was used for the proxy (like "boxShadow_xn1" and "boxShadow_xn2") and whether or not they need to be rounded. That way, in the _setPluginRatio() method we can simply copy the values over from the proxy to the CSSPropTween instance(s). Then, when the main CSSPlugin setRatio() method runs and applies the CSSPropTween values accordingly, they're updated nicely. So the external plugin tweens the numbers, _setPluginRatio() copies them over, and setRatio() acts normally, applying css-specific values to the element.

-             * This method returns an object that has the following properties:

-             *  - proxy: a generic object containing the starting values for all the properties that will be tweened by the external plugin.  This is what we feed to the external _onInitTween() as the target

-             *  - end: a generic object containing the ending values for all the properties that will be tweened by the external plugin. This is what we feed to the external plugin's _onInitTween() as the destination values

-             *  - firstMPT: the first MiniPropTween in the linked list

-             *  - pt: the first CSSPropTween in the linked list that was created when parsing. If shallow is true, this linked list will NOT attach to the one passed into the _parseToProxy() as the "pt" (4th) parameter.

-             * @param {!Object} t target object to be tweened

-             * @param {!(Object|string)} vars the object containing the information about the tweening values (typically the end/destination values) that should be parsed

-             * @param {!CSSPlugin} cssp The CSSPlugin instance

-             * @param {CSSPropTween=} pt the next CSSPropTween in the linked list

-             * @param {TweenPlugin=} plugin the external TweenPlugin instance that will be handling tweening the numeric values

-             * @param {boolean=} shallow if true, the resulting linked list from the parse will NOT be attached to the CSSPropTween that was passed in as the "pt" (4th) parameter.

-             * @return An object containing the following properties: proxy, end, firstMPT, and pt (see above for descriptions)

-             */

-            _parseToProxy = _internals._parseToProxy = function(t, vars, cssp, pt, plugin, shallow) {

-                var bpt = pt,

-                    start = {},

-                    end = {},

-                    transform = cssp._transform,

-                    oldForce = _forcePT,

-                    i, p, xp, mpt, firstPT;

-                cssp._transform = null;

-                _forcePT = vars;

-                pt = firstPT = cssp.parse(t, vars, pt, plugin);

-                _forcePT = oldForce;

-                //break off from the linked list so the new ones are isolated.

-                if (shallow) {

-                    cssp._transform = transform;

-                    if (bpt) {

-                        bpt._prev = null;

-                        if (bpt._prev) {

-                            bpt._prev._next = null;

-                        }

-                    }

-                }

-                while (pt && pt !== bpt) {

-                    if (pt.type <= 1) {

-                        p = pt.p;

-                        end[p] = pt.s + pt.c;

-                        start[p] = pt.s;

-                        if (!shallow) {

-                            mpt = new MiniPropTween(pt, "s", p, mpt, pt.r);

-                            pt.c = 0;

-                        }

-                        if (pt.type === 1) {

-                            i = pt.l;

-                            while (--i > 0) {

-                                xp = "xn" + i;

-                                p = pt.p + "_" + xp;

-                                end[p] = pt.data[xp];

-                                start[p] = pt[xp];

-                                if (!shallow) {

-                                    mpt = new MiniPropTween(pt, xp, p, mpt, pt.rxp[xp]);

-                                }

-                            }

-                        }

-                    }

-                    pt = pt._next;

-                }

-                return {proxy:start, end:end, firstMPT:mpt, pt:firstPT};

-            },

-

-

-

-            /**

-             * @constructor Each property that is tweened has at least one CSSPropTween associated with it. These instances store important information like the target, property, starting value, amount of change, etc. They can also optionally have a number of "extra" strings and numeric values named xs1, xn1, xs2, xn2, xs3, xn3, etc. where "s" indicates string and "n" indicates number. These can be pieced together in a complex-value tween (type:1) that has alternating types of data like a string, number, string, number, etc. For example, boxShadow could be "5px 5px 8px rgb(102, 102, 51)". In that value, there are 6 numbers that may need to tween and then pieced back together into a string again with spaces, suffixes, etc. xs0 is special in that it stores the suffix for standard (type:0) tweens, -OR- the first string (prefix) in a complex-value (type:1) CSSPropTween -OR- it can be the non-tweening value in a type:-1 CSSPropTween. We do this to conserve memory.

-             * CSSPropTweens have the following optional properties as well (not defined through the constructor):

-             *  - l: Length in terms of the number of extra properties that the CSSPropTween has (default: 0). For example, for a boxShadow we may need to tween 5 numbers in which case l would be 5; Keep in mind that the start/end values for the first number that's tweened are always stored in the s and c properties to conserve memory. All additional values thereafter are stored in xn1, xn2, etc.

-             *  - xfirst: The first instance of any sub-CSSPropTweens that are tweening properties of this instance. For example, we may split up a boxShadow tween so that there's a main CSSPropTween of type:1 that has various xs* and xn* values associated with the h-shadow, v-shadow, blur, color, etc. Then we spawn a CSSPropTween for each of those that has a higher priority and runs BEFORE the main CSSPropTween so that the values are all set by the time it needs to re-assemble them. The xfirst gives us an easy way to identify the first one in that chain which typically ends at the main one (because they're all prepende to the linked list)

-             *  - plugin: The TweenPlugin instance that will handle the tweening of any complex values. For example, sometimes we don't want to use normal subtweens (like xfirst refers to) to tween the values - we might want ThrowPropsPlugin or BezierPlugin some other plugin to do the actual tweening, so we create a plugin instance and store a reference here. We need this reference so that if we get a request to round values or disable a tween, we can pass along that request.

-             *  - data: Arbitrary data that needs to be stored with the CSSPropTween. Typically if we're going to have a plugin handle the tweening of a complex-value tween, we create a generic object that stores the END values that we're tweening to and the CSSPropTween's xs1, xs2, etc. have the starting values. We store that object as data. That way, we can simply pass that object to the plugin and use the CSSPropTween as the target.

-             *  - setRatio: Only used for type:2 tweens that require custom functionality. In this case, we call the CSSPropTween's setRatio() method and pass the ratio each time the tween updates. This isn't quite as efficient as doing things directly in the CSSPlugin's setRatio() method, but it's very convenient and flexible.

-             * @param {!Object} t Target object whose property will be tweened. Often a DOM element, but not always. It could be anything.

-             * @param {string} p Property to tween (name). For example, to tween element.width, p would be "width".

-             * @param {number} s Starting numeric value

-             * @param {number} c Change in numeric value over the course of the entire tween. For example, if element.width starts at 5 and should end at 100, c would be 95.

-             * @param {CSSPropTween=} next The next CSSPropTween in the linked list. If one is defined, we will define its _prev as the new instance, and the new instance's _next will be pointed at it.

-             * @param {number=} type The type of CSSPropTween where -1 = a non-tweening value, 0 = a standard simple tween, 1 = a complex value (like one that has multiple numbers in a comma- or space-delimited string like border:"1px solid red"), and 2 = one that uses a custom setRatio function that does all of the work of applying the values on each update.

-             * @param {string=} n Name of the property that should be used for overwriting purposes which is typically the same as p but not always. For example, we may need to create a subtween for the 2nd part of a "clip:rect(...)" tween in which case "p" might be xs1 but "n" is still "clip"

-             * @param {boolean=} r If true, the value(s) should be rounded

-             * @param {number=} pr Priority in the linked list order. Higher priority CSSPropTweens will be updated before lower priority ones. The default priority is 0.

-             * @param {string=} b Beginning value. We store this to ensure that it is EXACTLY what it was when the tween began without any risk of interpretation issues.

-             * @param {string=} e Ending value. We store this to ensure that it is EXACTLY what the user defined at the end of the tween without any risk of interpretation issues.

-             */

-            CSSPropTween = _internals.CSSPropTween = function(t, p, s, c, next, type, n, r, pr, b, e) {

-                this.t = t; //target

-                this.p = p; //property

-                this.s = s; //starting value

-                this.c = c; //change value

-                this.n = n || p; //name that this CSSPropTween should be associated to (usually the same as p, but not always - n is what overwriting looks at)

-                if (!(t instanceof CSSPropTween)) {

-                    _overwriteProps.push(this.n);

-                }

-                this.r = r; //round (boolean)

-                this.type = type || 0; //0 = normal tween, -1 = non-tweening (in which case xs0 will be applied to the target's property, like tp.t[tp.p] = tp.xs0), 1 = complex-value SpecialProp, 2 = custom setRatio() that does all the work

-                if (pr) {

-                    this.pr = pr;

-                    _hasPriority = true;

-                }

-                this.b = (b === undefined) ? s : b;

-                this.e = (e === undefined) ? s + c : e;

-                if (next) {

-                    this._next = next;

-                    next._prev = this;

-                }

-            },

-

-            /**

-             * Takes a target, the beginning value and ending value (as strings) and parses them into a CSSPropTween (possibly with child CSSPropTweens) that accommodates multiple numbers, colors, comma-delimited values, etc. For example:

-             * sp.parseComplex(element, "boxShadow", "5px 10px 20px rgb(255,102,51)", "0px 0px 0px red", true, "0px 0px 0px rgb(0,0,0,0)", pt);

-             * It will walk through the beginning and ending values (which should be in the same format with the same number and type of values) and figure out which parts are numbers, what strings separate the numeric/tweenable values, and then create the CSSPropTweens accordingly. If a plugin is defined, no child CSSPropTweens will be created. Instead, the ending values will be stored in the "data" property of the returned CSSPropTween like: {s:-5, xn1:-10, xn2:-20, xn3:255, xn4:0, xn5:0} so that it can be fed to any other plugin and it'll be plain numeric tweens but the recomposition of the complex value will be handled inside CSSPlugin's setRatio().

-             * If a setRatio is defined, the type of the CSSPropTween will be set to 2 and recomposition of the values will be the responsibility of that method.

-             *

-             * @param {!Object} t Target whose property will be tweened

-             * @param {!string} p Property that will be tweened (its name, like "left" or "backgroundColor" or "boxShadow")

-             * @param {string} b Beginning value

-             * @param {string} e Ending value

-             * @param {boolean} clrs If true, the value could contain a color value like "rgb(255,0,0)" or "#F00" or "red". The default is false, so no colors will be recognized (a performance optimization)

-             * @param {(string|number|Object)} dflt The default beginning value that should be used if no valid beginning value is defined or if the number of values inside the complex beginning and ending values don't match

-             * @param {?CSSPropTween} pt CSSPropTween instance that is the current head of the linked list (we'll prepend to this).

-             * @param {number=} pr Priority in the linked list order. Higher priority properties will be updated before lower priority ones. The default priority is 0.

-             * @param {TweenPlugin=} plugin If a plugin should handle the tweening of extra properties, pass the plugin instance here. If one is defined, then NO subtweens will be created for any extra properties (the properties will be created - just not additional CSSPropTween instances to tween them) because the plugin is expected to do so. However, the end values WILL be populated in the "data" property, like {s:100, xn1:50, xn2:300}

-             * @param {function(number)=} setRatio If values should be set in a custom function instead of being pieced together in a type:1 (complex-value) CSSPropTween, define that custom function here.

-             * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parseComplex() call.

-             */

-            _parseComplex = CSSPlugin.parseComplex = function(t, p, b, e, clrs, dflt, pt, pr, plugin, setRatio) {

-                //DEBUG: _log("parseComplex: "+p+", b: "+b+", e: "+e);

-                b = b || dflt || "";

-                pt = new CSSPropTween(t, p, 0, 0, pt, (setRatio ? 2 : 1), null, false, pr, b, e);

-                e += ""; //ensures it's a string

-                var ba = b.split(", ").join(",").split(" "), //beginning array

-                    ea = e.split(", ").join(",").split(" "), //ending array

-                    l = ba.length,

-                    autoRound = (_autoRound !== false),

-                    i, xi, ni, bv, ev, bnums, enums, bn, rgba, temp, cv, str;

-                if (e.indexOf(",") !== -1 || b.indexOf(",") !== -1) {

-                    ba = ba.join(" ").replace(_commasOutsideParenExp, ", ").split(" ");

-                    ea = ea.join(" ").replace(_commasOutsideParenExp, ", ").split(" ");

-                    l = ba.length;

-                }

-                if (l !== ea.length) {

-                    //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")");

-                    ba = (dflt || "").split(" ");

-                    l = ba.length;

-                }

-                pt.plugin = plugin;

-                pt.setRatio = setRatio;

-                for (i = 0; i < l; i++) {

-                    bv = ba[i];

-                    ev = ea[i];

-                    bn = parseFloat(bv);

-

-                    //if the value begins with a number (most common). It's fine if it has a suffix like px

-                    if (bn || bn === 0) {

-                        pt.appendXtra("", bn, _parseChange(ev, bn), ev.replace(_relNumExp, ""), (autoRound && ev.indexOf("px") !== -1), true);

-

-                    //if the value is a color

-                    } else if (clrs && (bv.charAt(0) === "#" || _colorLookup[bv] || _rgbhslExp.test(bv))) {

-                        str = ev.charAt(ev.length - 1) === "," ? ")," : ")"; //if there's a comma at the end, retain it.

-                        bv = _parseColor(bv);

-                        ev = _parseColor(ev);

-                        rgba = (bv.length + ev.length > 6);

-                        if (rgba && !_supportsOpacity && ev[3] === 0) { //older versions of IE don't support rgba(), so if the destination alpha is 0, just use "transparent" for the end color

-                            pt["xs" + pt.l] += pt.l ? " transparent" : "transparent";

-                            pt.e = pt.e.split(ea[i]).join("transparent");

-                        } else {

-                            if (!_supportsOpacity) { //old versions of IE don't support rgba().

-                                rgba = false;

-                            }

-                            pt.appendXtra((rgba ? "rgba(" : "rgb("), bv[0], ev[0] - bv[0], ",", true, true)

-                                .appendXtra("", bv[1], ev[1] - bv[1], ",", true)

-                                .appendXtra("", bv[2], ev[2] - bv[2], (rgba ? "," : str), true);

-                            if (rgba) {

-                                bv = (bv.length < 4) ? 1 : bv[3];

-                                pt.appendXtra("", bv, ((ev.length < 4) ? 1 : ev[3]) - bv, str, false);

-                            }

-                        }

-

-                    } else {

-                        bnums = bv.match(_numExp); //gets each group of numbers in the beginning value string and drops them into an array

-

-                        //if no number is found, treat it as a non-tweening value and just append the string to the current xs.

-                        if (!bnums) {

-                            pt["xs" + pt.l] += pt.l ? " " + bv : bv;

-

-                        //loop through all the numbers that are found and construct the extra values on the pt.

-                        } else {

-                            enums = ev.match(_relNumExp); //get each group of numbers in the end value string and drop them into an array. We allow relative values too, like +=50 or -=.5

-                            if (!enums || enums.length !== bnums.length) {

-                                //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")");

-                                return pt;

-                            }

-                            ni = 0;

-                            for (xi = 0; xi < bnums.length; xi++) {

-                                cv = bnums[xi];

-                                temp = bv.indexOf(cv, ni);

-                                pt.appendXtra(bv.substr(ni, temp - ni), Number(cv), _parseChange(enums[xi], cv), "", (autoRound && bv.substr(temp + cv.length, 2) === "px"), (xi === 0));

-                                ni = temp + cv.length;

-                            }

-                            pt["xs" + pt.l] += bv.substr(ni);

-                        }

-                    }

-                }

-                //if there are relative values ("+=" or "-=" prefix), we need to adjust the ending value to eliminate the prefixes and combine the values properly.

-                if (e.indexOf("=") !== -1) if (pt.data) {

-                    str = pt.xs0 + pt.data.s;

-                    for (i = 1; i < pt.l; i++) {

-                        str += pt["xs" + i] + pt.data["xn" + i];

-                    }

-                    pt.e = str + pt["xs" + i];

-                }

-                if (!pt.l) {

-                    pt.type = -1;

-                    pt.xs0 = pt.e;

-                }

-                return pt.xfirst || pt;

-            },

-            i = 9;

-

-

-        p = CSSPropTween.prototype;

-        p.l = p.pr = 0; //length (number of extra properties like xn1, xn2, xn3, etc.

-        while (--i > 0) {

-            p["xn" + i] = 0;

-            p["xs" + i] = "";

-        }

-        p.xs0 = "";

-        p._next = p._prev = p.xfirst = p.data = p.plugin = p.setRatio = p.rxp = null;

-

-

-        /**

-         * Appends and extra tweening value to a CSSPropTween and automatically manages any prefix and suffix strings. The first extra value is stored in the s and c of the main CSSPropTween instance, but thereafter any extras are stored in the xn1, xn2, xn3, etc. The prefixes and suffixes are stored in the xs0, xs1, xs2, etc. properties. For example, if I walk through a clip value like "rect(10px, 5px, 0px, 20px)", the values would be stored like this:

-         * xs0:"rect(", s:10, xs1:"px, ", xn1:5, xs2:"px, ", xn2:0, xs3:"px, ", xn3:20, xn4:"px)"

-         * And they'd all get joined together when the CSSPlugin renders (in the setRatio() method).

-         * @param {string=} pfx Prefix (if any)

-         * @param {!number} s Starting value

-         * @param {!number} c Change in numeric value over the course of the entire tween. For example, if the start is 5 and the end is 100, the change would be 95.

-         * @param {string=} sfx Suffix (if any)

-         * @param {boolean=} r Round (if true).

-         * @param {boolean=} pad If true, this extra value should be separated by the previous one by a space. If there is no previous extra and pad is true, it will automatically drop the space.

-         * @return {CSSPropTween} returns itself so that multiple methods can be chained together.

-         */

-        p.appendXtra = function(pfx, s, c, sfx, r, pad) {

-            var pt = this,

-                l = pt.l;

-            pt["xs" + l] += (pad && l) ? " " + pfx : pfx || "";

-            if (!c) if (l !== 0 && !pt.plugin) { //typically we'll combine non-changing values right into the xs to optimize performance, but we don't combine them when there's a plugin that will be tweening the values because it may depend on the values being split apart, like for a bezier, if a value doesn't change between the first and second iteration but then it does on the 3rd, we'll run into trouble because there's no xn slot for that value!

-                pt["xs" + l] += s + (sfx || "");

-                return pt;

-            }

-            pt.l++;

-            pt.type = pt.setRatio ? 2 : 1;

-            pt["xs" + pt.l] = sfx || "";

-            if (l > 0) {

-                pt.data["xn" + l] = s + c;

-                pt.rxp["xn" + l] = r; //round extra property (we need to tap into this in the _parseToProxy() method)

-                pt["xn" + l] = s;

-                if (!pt.plugin) {

-                    pt.xfirst = new CSSPropTween(pt, "xn" + l, s, c, pt.xfirst || pt, 0, pt.n, r, pt.pr);

-                    pt.xfirst.xs0 = 0; //just to ensure that the property stays numeric which helps modern browsers speed up processing. Remember, in the setRatio() method, we do pt.t[pt.p] = val + pt.xs0 so if pt.xs0 is "" (the default), it'll cast the end value as a string. When a property is a number sometimes and a string sometimes, it prevents the compiler from locking in the data type, slowing things down slightly.

-                }

-                return pt;

-            }

-            pt.data = {s:s + c};

-            pt.rxp = {};

-            pt.s = s;

-            pt.c = c;

-            pt.r = r;

-            return pt;

-        };

-

-        /**

-         * @constructor A SpecialProp is basically a css property that needs to be treated in a non-standard way, like if it may contain a complex value like boxShadow:"5px 10px 15px rgb(255, 102, 51)" or if it is associated with another plugin like ThrowPropsPlugin or BezierPlugin. Every SpecialProp is associated with a particular property name like "boxShadow" or "throwProps" or "bezier" and it will intercept those values in the vars object that's passed to the CSSPlugin and handle them accordingly.

-         * @param {!string} p Property name (like "boxShadow" or "throwProps")

-         * @param {Object=} options An object containing any of the following configuration options:

-         *                      - defaultValue: the default value

-         *                      - parser: A function that should be called when the associated property name is found in the vars. This function should return a CSSPropTween instance and it should ensure that it is properly inserted into the linked list. It will receive 4 paramters: 1) The target, 2) The value defined in the vars, 3) The CSSPlugin instance (whose _firstPT should be used for the linked list), and 4) A computed style object if one was calculated (this is a speed optimization that allows retrieval of starting values quicker)

-         *                      - formatter: a function that formats any value received for this special property (for example, boxShadow could take "5px 5px red" and format it to "5px 5px 0px 0px red" so that both the beginning and ending values have a common order and quantity of values.)

-         *                      - prefix: if true, we'll determine whether or not this property requires a vendor prefix (like Webkit or Moz or ms or O)

-         *                      - color: set this to true if the value for this SpecialProp may contain color-related values like rgb(), rgba(), etc.

-         *                      - priority: priority in the linked list order. Higher priority SpecialProps will be updated before lower priority ones. The default priority is 0.

-         *                      - multi: if true, the formatter should accommodate a comma-delimited list of values, like boxShadow could have multiple boxShadows listed out.

-         *                      - collapsible: if true, the formatter should treat the value like it's a top/right/bottom/left value that could be collapsed, like "5px" would apply to all, "5px, 10px" would use 5px for top/bottom and 10px for right/left, etc.

-         *                      - keyword: a special keyword that can [optionally] be found inside the value (like "inset" for boxShadow). This allows us to validate beginning/ending values to make sure they match (if the keyword is found in one, it'll be added to the other for consistency by default).

-         */

-        var SpecialProp = function(p, options) {

-                options = options || {};

-                this.p = options.prefix ? _checkPropPrefix(p) || p : p;

-                _specialProps[p] = _specialProps[this.p] = this;

-                this.format = options.formatter || _getFormatter(options.defaultValue, options.color, options.collapsible, options.multi);

-                if (options.parser) {

-                    this.parse = options.parser;

-                }

-                this.clrs = options.color;

-                this.multi = options.multi;

-                this.keyword = options.keyword;

-                this.dflt = options.defaultValue;

-                this.pr = options.priority || 0;

-            },

-

-            //shortcut for creating a new SpecialProp that can accept multiple properties as a comma-delimited list (helps minification). dflt can be an array for multiple values (we don't do a comma-delimited list because the default value may contain commas, like rect(0px,0px,0px,0px)). We attach this method to the SpecialProp class/object instead of using a private _createSpecialProp() method so that we can tap into it externally if necessary, like from another plugin.

-            _registerComplexSpecialProp = _internals._registerComplexSpecialProp = function(p, options, defaults) {

-                if (typeof(options) !== "object") {

-                    options = {parser:defaults}; //to make backwards compatible with older versions of BezierPlugin and ThrowPropsPlugin

-                }

-                var a = p.split(","),

-                    d = options.defaultValue,

-                    i, temp;

-                defaults = defaults || [d];

-                for (i = 0; i < a.length; i++) {

-                    options.prefix = (i === 0 && options.prefix);

-                    options.defaultValue = defaults[i] || d;

-                    temp = new SpecialProp(a[i], options);

-                }

-            },

-

-            //creates a placeholder special prop for a plugin so that the property gets caught the first time a tween of it is attempted, and at that time it makes the plugin register itself, thus taking over for all future tweens of that property. This allows us to not mandate that things load in a particular order and it also allows us to log() an error that informs the user when they attempt to tween an external plugin-related property without loading its .js file.

-            _registerPluginProp = function(p) {

-                if (!_specialProps[p]) {

-                    var pluginName = p.charAt(0).toUpperCase() + p.substr(1) + "Plugin";

-                    _registerComplexSpecialProp(p, {parser:function(t, e, p, cssp, pt, plugin, vars) {

-                        var pluginClass = (window.GreenSockGlobals || window).com.greensock.plugins[pluginName];

-                        if (!pluginClass) {

-                            _log("Error: " + pluginName + " js file not loaded.");

-                            return pt;

-                        }

-                        pluginClass._cssRegister();

-                        return _specialProps[p].parse(t, e, p, cssp, pt, plugin, vars);

-                    }});

-                }

-            };

-

-

-        p = SpecialProp.prototype;

-

-        /**

-         * Alias for _parseComplex() that automatically plugs in certain values for this SpecialProp, like its property name, whether or not colors should be sensed, the default value, and priority. It also looks for any keyword that the SpecialProp defines (like "inset" for boxShadow) and ensures that the beginning and ending values have the same number of values for SpecialProps where multi is true (like boxShadow and textShadow can have a comma-delimited list)

-         * @param {!Object} t target element

-         * @param {(string|number|object)} b beginning value

-         * @param {(string|number|object)} e ending (destination) value

-         * @param {CSSPropTween=} pt next CSSPropTween in the linked list

-         * @param {TweenPlugin=} plugin If another plugin will be tweening the complex value, that TweenPlugin instance goes here.

-         * @param {function=} setRatio If a custom setRatio() method should be used to handle this complex value, that goes here.

-         * @return {CSSPropTween=} First CSSPropTween in the linked list

-         */

-        p.parseComplex = function(t, b, e, pt, plugin, setRatio) {

-            var kwd = this.keyword,

-                i, ba, ea, l, bi, ei;

-            //if this SpecialProp's value can contain a comma-delimited list of values (like boxShadow or textShadow), we must parse them in a special way, and look for a keyword (like "inset" for boxShadow) and ensure that the beginning and ending BOTH have it if the end defines it as such. We also must ensure that there are an equal number of values specified (we can't tween 1 boxShadow to 3 for example)

-            if (this.multi) if (_commasOutsideParenExp.test(e) || _commasOutsideParenExp.test(b)) {

-                ba = b.replace(_commasOutsideParenExp, "|").split("|");

-                ea = e.replace(_commasOutsideParenExp, "|").split("|");

-            } else if (kwd) {

-                ba = [b];

-                ea = [e];

-            }

-            if (ea) {

-                l = (ea.length > ba.length) ? ea.length : ba.length;

-                for (i = 0; i < l; i++) {

-                    b = ba[i] = ba[i] || this.dflt;

-                    e = ea[i] = ea[i] || this.dflt;

-                    if (kwd) {

-                        bi = b.indexOf(kwd);

-                        ei = e.indexOf(kwd);

-                        if (bi !== ei) {

-                            e = (ei === -1) ? ea : ba;

-                            e[i] += " " + kwd;

-                        }

-                    }

-                }

-                b = ba.join(", ");

-                e = ea.join(", ");

-            }

-            return _parseComplex(t, this.p, b, e, this.clrs, this.dflt, pt, this.pr, plugin, setRatio);

-        };

-

-        /**

-         * Accepts a target and end value and spits back a CSSPropTween that has been inserted into the CSSPlugin's linked list and conforms with all the conventions we use internally, like type:-1, 0, 1, or 2, setting up any extra property tweens, priority, etc. For example, if we have a boxShadow SpecialProp and call:

-         * this._firstPT = sp.parse(element, "5px 10px 20px rgb(2550,102,51)", "boxShadow", this);

-         * It should figure out the starting value of the element's boxShadow, compare it to the provided end value and create all the necessary CSSPropTweens of the appropriate types to tween the boxShadow. The CSSPropTween that gets spit back should already be inserted into the linked list (the 4th parameter is the current head, so prepend to that).

-         * @param {!Object} t Target object whose property is being tweened

-         * @param {Object} e End value as provided in the vars object (typically a string, but not always - like a throwProps would be an object).

-         * @param {!string} p Property name

-         * @param {!CSSPlugin} cssp The CSSPlugin instance that should be associated with this tween.

-         * @param {?CSSPropTween} pt The CSSPropTween that is the current head of the linked list (we'll prepend to it)

-         * @param {TweenPlugin=} plugin If a plugin will be used to tween the parsed value, this is the plugin instance.

-         * @param {Object=} vars Original vars object that contains the data for parsing.

-         * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parse() call.

-         */

-        p.parse = function(t, e, p, cssp, pt, plugin, vars) {

-            return this.parseComplex(t.style, this.format(_getStyle(t, this.p, _cs, false, this.dflt)), this.format(e), pt, plugin);

-        };

-

-        /**

-         * Registers a special property that should be intercepted from any "css" objects defined in tweens. This allows you to handle them however you want without CSSPlugin doing it for you. The 2nd parameter should be a function that accepts 3 parameters:

-         *  1) Target object whose property should be tweened (typically a DOM element)

-         *  2) The end/destination value (could be a string, number, object, or whatever you want)

-         *  3) The tween instance (you probably don't need to worry about this, but it can be useful for looking up information like the duration)

-         *

-         * Then, your function should return a function which will be called each time the tween gets rendered, passing a numeric "ratio" parameter to your function that indicates the change factor (usually between 0 and 1). For example:

-         *

-         * CSSPlugin.registerSpecialProp("myCustomProp", function(target, value, tween) {

-         *      var start = target.style.width;

-         *      return function(ratio) {

-         *              target.style.width = (start + value * ratio) + "px";

-         *              console.log("set width to " + target.style.width);

-         *          }

-         * }, 0);

-         *

-         * Then, when I do this tween, it will trigger my special property:

-         *

-         * TweenLite.to(element, 1, {css:{myCustomProp:100}});

-         *

-         * In the example, of course, we're just changing the width, but you can do anything you want.

-         *

-         * @param {!string} name Property name (or comma-delimited list of property names) that should be intercepted and handled by your function. For example, if I define "myCustomProp", then it would handle that portion of the following tween: TweenLite.to(element, 1, {css:{myCustomProp:100}})

-         * @param {!function(Object, Object, Object, string):function(number)} onInitTween The function that will be called when a tween of this special property is performed. The function will receive 4 parameters: 1) Target object that should be tweened, 2) Value that was passed to the tween, 3) The tween instance itself (rarely used), and 4) The property name that's being tweened. Your function should return a function that should be called on every update of the tween. That function will receive a single parameter that is a "change factor" value (typically between 0 and 1) indicating the amount of change as a ratio. You can use this to determine how to set the values appropriately in your function.

-         * @param {number=} priority Priority that helps the engine determine the order in which to set the properties (default: 0). Higher priority properties will be updated before lower priority ones.

-         */

-        CSSPlugin.registerSpecialProp = function(name, onInitTween, priority) {

-            _registerComplexSpecialProp(name, {parser:function(t, e, p, cssp, pt, plugin, vars) {

-                var rv = new CSSPropTween(t, p, 0, 0, pt, 2, p, false, priority);

-                rv.plugin = plugin;

-                rv.setRatio = onInitTween(t, e, cssp._tween, p);

-                return rv;

-            }, priority:priority});

-        };

-

-

-

-

-

-

-

-

-        //transform-related methods and properties

-        var _transformProps = ("scaleX,scaleY,scaleZ,x,y,z,skewX,skewY,rotation,rotationX,rotationY,perspective").split(","),

-            _transformProp = _checkPropPrefix("transform"), //the Javascript (camelCase) transform property, like msTransform, WebkitTransform, MozTransform, or OTransform.

-            _transformPropCSS = _prefixCSS + "transform",

-            _transformOriginProp = _checkPropPrefix("transformOrigin"),

-            _supports3D = (_checkPropPrefix("perspective") !== null),

-            Transform = _internals.Transform = function() {

-                this.skewY = 0;

-            },

-

-            /**

-             * Parses the transform values for an element, returning an object with x, y, z, scaleX, scaleY, scaleZ, rotation, rotationX, rotationY, skewX, and skewY properties. Note: by default (for performance reasons), all skewing is combined into skewX and rotation but skewY still has a place in the transform object so that we can record how much of the skew is attributed to skewX vs skewY. Remember, a skewY of 10 looks the same as a rotation of 10 and skewX of -10.

-             * @param {!Object} t target element

-             * @param {Object=} cs computed style object (optional)

-             * @param {boolean=} rec if true, the transform values will be recorded to the target element's _gsTransform object, like target._gsTransform = {x:0, y:0, z:0, scaleX:1...}

-             * @param {boolean=} parse if true, we'll ignore any _gsTransform values that already exist on the element, and force a reparsing of the css (calculated style)

-             * @return {object} object containing all of the transform properties/values like {x:0, y:0, z:0, scaleX:1...}

-             */

-            _getTransform = _internals.getTransform = function(t, cs, rec, parse) {

-                if (t._gsTransform && rec && !parse) {

-                    return t._gsTransform; //if the element already has a _gsTransform, use that. Note: some browsers don't accurately return the calculated style for the transform (particularly for SVG), so it's almost always safest to just use the values we've already applied rather than re-parsing things.

-                }

-                var tm = rec ? t._gsTransform || new Transform() : new Transform(),

-                    invX = (tm.scaleX < 0), //in order to interpret things properly, we need to know if the user applied a negative scaleX previously so that we can adjust the rotation and skewX accordingly. Otherwise, if we always interpret a flipped matrix as affecting scaleY and the user only wants to tween the scaleX on multiple sequential tweens, it would keep the negative scaleY without that being the user's intent.

-                    min = 0.00002,

-                    rnd = 100000,

-                    minAngle = 179.99,

-                    minPI = minAngle * _DEG2RAD,

-                    zOrigin = _supports3D ? parseFloat(_getStyle(t, _transformOriginProp, cs, false, "0 0 0").split(" ")[2]) || tm.zOrigin  || 0 : 0,

-                    s, m, i, n, dec, scaleX, scaleY, rotation, skewX, difX, difY, difR, difS;

-                if (_transformProp) {

-                    s = _getStyle(t, _transformPropCSS, cs, true);

-                } else if (t.currentStyle) {

-                    //for older versions of IE, we need to interpret the filter portion that is in the format: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand') Notice that we need to swap b and c compared to a normal matrix.

-                    s = t.currentStyle.filter.match(_ieGetMatrixExp);

-                    s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : "";

-                }

-                //split the matrix values out into an array (m for matrix)

-                m = (s || "").match(/(?:\-|\b)[\d\-\.e]+\b/gi) || [];

-                i = m.length;

-                while (--i > -1) {

-                    n = Number(m[i]);

-                    m[i] = (dec = n - (n |= 0)) ? ((dec * rnd + (dec < 0 ? -0.5 : 0.5)) | 0) / rnd + n : n; //convert strings to Numbers and round to 5 decimal places to avoid issues with tiny numbers. Roughly 20x faster than Number.toFixed(). We also must make sure to round before dividing so that values like 0.9999999999 become 1 to avoid glitches in browser rendering and interpretation of flipped/rotated 3D matrices. And don't just multiply the number by rnd, floor it, and then divide by rnd because the bitwise operations max out at a 32-bit signed integer, thus it could get clipped at a relatively low value (like 22,000.00000 for example).

-                }

-                if (m.length === 16) {

-

-                    //we'll only look at these position-related 6 variables first because if x/y/z all match, it's relatively safe to assume we don't need to re-parse everything which risks losing important rotational information (like rotationX:180 plus rotationY:180 would look the same as rotation:180 - there's no way to know for sure which direction was taken based solely on the matrix3d() values)

-                    var a13 = m[8], a23 = m[9], a33 = m[10],

-                        a14 = m[12], a24 = m[13], a34 = m[14];

-

-                    //we manually compensate for non-zero z component of transformOrigin to work around bugs in Safari

-                    if (tm.zOrigin) {

-                        a34 = -tm.zOrigin;

-                        a14 = a13*a34-m[12];

-                        a24 = a23*a34-m[13];

-                        a34 = a33*a34+tm.zOrigin-m[14];

-                    }

-

-                    //only parse from the matrix if we MUST because not only is it usually unnecessary due to the fact that we store the values in the _gsTransform object, but also because it's impossible to accurately interpret rotationX, rotationY, rotationZ, scaleX, and scaleY if all are applied, so it's much better to rely on what we store. However, we must parse the first time that an object is tweened. We also assume that if the position has changed, the user must have done some styling changes outside of CSSPlugin, thus we force a parse in that scenario.

-                    if (!rec || parse || tm.rotationX == null) {

-                        var a11 = m[0], a21 = m[1], a31 = m[2], a41 = m[3],

-                            a12 = m[4], a22 = m[5], a32 = m[6], a42 = m[7],

-                            a43 = m[11],

-                            angle = Math.atan2(a32, a33),

-                            xFlip = (angle < -minPI || angle > minPI),

-                            t1, t2, t3, cos, sin, yFlip, zFlip;

-                        tm.rotationX = angle * _RAD2DEG;

-                        //rotationX

-                        if (angle) {

-                            cos = Math.cos(-angle);

-                            sin = Math.sin(-angle);

-                            t1 = a12*cos+a13*sin;

-                            t2 = a22*cos+a23*sin;

-                            t3 = a32*cos+a33*sin;

-                            a13 = a12*-sin+a13*cos;

-                            a23 = a22*-sin+a23*cos;

-                            a33 = a32*-sin+a33*cos;

-                            a43 = a42*-sin+a43*cos;

-                            a12 = t1;

-                            a22 = t2;

-                            a32 = t3;

-                        }

-                        //rotationY

-                        angle = Math.atan2(a13, a11);

-                        tm.rotationY = angle * _RAD2DEG;

-                        if (angle) {

-                            yFlip = (angle < -minPI || angle > minPI);

-                            cos = Math.cos(-angle);

-                            sin = Math.sin(-angle);

-                            t1 = a11*cos-a13*sin;

-                            t2 = a21*cos-a23*sin;

-                            t3 = a31*cos-a33*sin;

-                            a23 = a21*sin+a23*cos;

-                            a33 = a31*sin+a33*cos;

-                            a43 = a41*sin+a43*cos;

-                            a11 = t1;

-                            a21 = t2;

-                            a31 = t3;

-                        }

-                        //rotationZ

-                        angle = Math.atan2(a21, a22);

-                        tm.rotation = angle * _RAD2DEG;

-                        if (angle) {

-                            zFlip = (angle < -minPI || angle > minPI);

-                            cos = Math.cos(-angle);

-                            sin = Math.sin(-angle);

-                            a11 = a11*cos+a12*sin;

-                            t2 = a21*cos+a22*sin;

-                            a22 = a21*-sin+a22*cos;

-                            a32 = a31*-sin+a32*cos;

-                            a21 = t2;

-                        }

-

-                        if (zFlip && xFlip) {

-                            tm.rotation = tm.rotationX = 0;

-                        } else if (zFlip && yFlip) {

-                            tm.rotation = tm.rotationY = 0;

-                        } else if (yFlip && xFlip) {

-                            tm.rotationY = tm.rotationX = 0;

-                        }

-

-                        tm.scaleX = ((Math.sqrt(a11 * a11 + a21 * a21) * rnd + 0.5) | 0) / rnd;

-                        tm.scaleY = ((Math.sqrt(a22 * a22 + a23 * a23) * rnd + 0.5) | 0) / rnd;

-                        tm.scaleZ = ((Math.sqrt(a32 * a32 + a33 * a33) * rnd + 0.5) | 0) / rnd;

-                        tm.skewX = 0;

-                        tm.perspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0;

-                        tm.x = a14;

-                        tm.y = a24;

-                        tm.z = a34;

-                    }

-

-                } else if ((!_supports3D || parse || !m.length || tm.x !== m[4] || tm.y !== m[5] || (!tm.rotationX && !tm.rotationY)) && !(tm.x !== undefined && _getStyle(t, "display", cs) === "none")) { //sometimes a 6-element matrix is returned even when we performed 3D transforms, like if rotationX and rotationY are 180. In cases like this, we still need to honor the 3D transforms. If we just rely on the 2D info, it could affect how the data is interpreted, like scaleY might get set to -1 or rotation could get offset by 180 degrees. For example, do a TweenLite.to(element, 1, {css:{rotationX:180, rotationY:180}}) and then later, TweenLite.to(element, 1, {css:{rotationX:0}}) and without this conditional logic in place, it'd jump to a state of being unrotated when the 2nd tween starts. Then again, we need to honor the fact that the user COULD alter the transforms outside of CSSPlugin, like by manually applying new css, so we try to sense that by looking at x and y because if those changed, we know the changes were made outside CSSPlugin and we force a reinterpretation of the matrix values. Also, in Webkit browsers, if the element's "display" is "none", its calculated style value will always return empty, so if we've already recorded the values in the _gsTransform object, we'll just rely on those.

-                    var k = (m.length >= 6),

-                        a = k ? m[0] : 1,

-                        b = m[1] || 0,

-                        c = m[2] || 0,

-                        d = k ? m[3] : 1;

-                    tm.x = m[4] || 0;

-                    tm.y = m[5] || 0;

-                    scaleX = Math.sqrt(a * a + b * b);

-                    scaleY = Math.sqrt(d * d + c * c);

-                    rotation = (a || b) ? Math.atan2(b, a) * _RAD2DEG : tm.rotation || 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).

-                    skewX = (c || d) ? Math.atan2(c, d) * _RAD2DEG + rotation : tm.skewX || 0;

-                    difX = scaleX - Math.abs(tm.scaleX || 0);

-                    difY = scaleY - Math.abs(tm.scaleY || 0);

-                    if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {

-                        if (invX) {

-                            scaleX *= -1;

-                            skewX += (rotation <= 0) ? 180 : -180;

-                            rotation += (rotation <= 0) ? 180 : -180;

-                        } else {

-                            scaleY *= -1;

-                            skewX += (skewX <= 0) ? 180 : -180;

-                        }

-                    }

-                    difR = (rotation - tm.rotation) % 180; //note: matching ranges would be very small (+/-0.0001) or very close to 180.

-                    difS = (skewX - tm.skewX) % 180;

-                    //if there's already a recorded _gsTransform in place for the target, we should leave those values in place unless we know things changed for sure (beyond a super small amount). This gets around ambiguous interpretations, like if scaleX and scaleY are both -1, the matrix would be the same as if the rotation was 180 with normal scaleX/scaleY. If the user tweened to particular values, those must be prioritized to ensure animation is consistent.

-                    if (tm.skewX === undefined || difX > min || difX < -min || difY > min || difY < -min || (difR > -minAngle && difR < minAngle && (difR * rnd) | 0 !== 0) || (difS > -minAngle && difS < minAngle && (difS * rnd) | 0 !== 0)) {

-                        tm.scaleX = scaleX;

-                        tm.scaleY = scaleY;

-                        tm.rotation = rotation;

-                        tm.skewX = skewX;

-                    }

-                    if (_supports3D) {

-                        tm.rotationX = tm.rotationY = tm.z = 0;

-                        tm.perspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0;

-                        tm.scaleZ = 1;

-                    }

-                }

-                tm.zOrigin = zOrigin;

-

-                //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases. The conditional logic here is faster than calling Math.abs(). Also, browsers tend to render a SLIGHTLY rotated object in a fuzzy way, so we need to snap to exactly 0 when appropriate.

-                for (i in tm) {

-                    if (tm[i] < min) if (tm[i] > -min) {

-                        tm[i] = 0;

-                    }

-                }

-                //DEBUG: _log("parsed rotation: "+(tm.rotationX)+", "+(tm.rotationY)+", "+(tm.rotation)+", scale: "+tm.scaleX+", "+tm.scaleY+", "+tm.scaleZ+", position: "+tm.x+", "+tm.y+", "+tm.z+", perspective: "+tm.perspective);

-                if (rec) {

-                    t._gsTransform = tm; //record to the object's _gsTransform which we use so that tweens can control individual properties independently (we need all the properties to accurately recompose the matrix in the setRatio() method)

-                }

-                return tm;

-            },

-

-            //for setting 2D transforms in IE6, IE7, and IE8 (must use a "filter" to emulate the behavior of modern day browser transforms)

-            _setIETransformRatio = function(v) {

-                var t = this.data, //refers to the element's _gsTransform object

-                    ang = -t.rotation * _DEG2RAD,

-                    skew = ang + t.skewX * _DEG2RAD,

-                    rnd = 100000,

-                    a = ((Math.cos(ang) * t.scaleX * rnd) | 0) / rnd,

-                    b = ((Math.sin(ang) * t.scaleX * rnd) | 0) / rnd,

-                    c = ((Math.sin(skew) * -t.scaleY * rnd) | 0) / rnd,

-                    d = ((Math.cos(skew) * t.scaleY * rnd) | 0) / rnd,

-                    style = this.t.style,

-                    cs = this.t.currentStyle,

-                    filters, val;

-                if (!cs) {

-                    return;

-                }

-                val = b; //just for swapping the variables an inverting them (reused "val" to avoid creating another variable in memory). IE's filter matrix uses a non-standard matrix configuration (angle goes the opposite way, and b and c are reversed and inverted)

-                b = -c;

-                c = -val;

-                filters = cs.filter;

-                style.filter = ""; //remove filters so that we can accurately measure offsetWidth/offsetHeight

-                var w = this.t.offsetWidth,

-                    h = this.t.offsetHeight,

-                    clip = (cs.position !== "absolute"),

-                    m = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + d,

-                    ox = t.x,

-                    oy = t.y,

-                    dx, dy;

-

-                //if transformOrigin is being used, adjust the offset x and y

-                if (t.ox != null) {

-                    dx = ((t.oxp) ? w * t.ox * 0.01 : t.ox) - w / 2;

-                    dy = ((t.oyp) ? h * t.oy * 0.01 : t.oy) - h / 2;

-                    ox += dx - (dx * a + dy * b);

-                    oy += dy - (dx * c + dy * d);

-                }

-

-                if (!clip) {

-                    m += ", sizingMethod='auto expand')";

-                } else {

-                    dx = (w / 2);

-                    dy = (h / 2);

-                    //translate to ensure that transformations occur around the correct origin (default is center).

-                    m += ", Dx=" + (dx - (dx * a + dy * b) + ox) + ", Dy=" + (dy - (dx * c + dy * d) + oy) + ")";

-                }

-                if (filters.indexOf("DXImageTransform.Microsoft.Matrix(") !== -1) {

-                    style.filter = filters.replace(_ieSetMatrixExp, m);

-                } else {

-                    style.filter = m + " " + filters; //we must always put the transform/matrix FIRST (before alpha(opacity=xx)) to avoid an IE bug that slices part of the object when rotation is applied with alpha.

-                }

-

-                //at the end or beginning of the tween, if the matrix is normal (1, 0, 0, 1) and opacity is 100 (or doesn't exist), remove the filter to improve browser performance.

-                if (v === 0 || v === 1) if (a === 1) if (b === 0) if (c === 0) if (d === 1) if (!clip || m.indexOf("Dx=0, Dy=0") !== -1) if (!_opacityExp.test(filters) || parseFloat(RegExp.$1) === 100) if (filters.indexOf("gradient(" && filters.indexOf("Alpha")) === -1) {

-                    style.removeAttribute("filter");

-                }

-

-                //we must set the margins AFTER applying the filter in order to avoid some bugs in IE8 that could (in rare scenarios) cause them to be ignored intermittently (vibration).

-                if (!clip) {

-                    var mult = (_ieVers < 8) ? 1 : -1, //in Internet Explorer 7 and before, the box model is broken, causing the browser to treat the width/height of the actual rotated filtered image as the width/height of the box itself, but Microsoft corrected that in IE8. We must use a negative offset in IE8 on the right/bottom

-                        marg, prop, dif;

-                    dx = t.ieOffsetX || 0;

-                    dy = t.ieOffsetY || 0;

-                    t.ieOffsetX = Math.round((w - ((a < 0 ? -a : a) * w + (b < 0 ? -b : b) * h)) / 2 + ox);

-                    t.ieOffsetY = Math.round((h - ((d < 0 ? -d : d) * h + (c < 0 ? -c : c) * w)) / 2 + oy);

-                    for (i = 0; i < 4; i++) {

-                        prop = _margins[i];

-                        marg = cs[prop];

-                        //we need to get the current margin in case it is being tweened separately (we want to respect that tween's changes)

-                        val = (marg.indexOf("px") !== -1) ? parseFloat(marg) : _convertToPixels(this.t, prop, parseFloat(marg), marg.replace(_suffixExp, "")) || 0;

-                        if (val !== t[prop]) {

-                            dif = (i < 2) ? -t.ieOffsetX : -t.ieOffsetY; //if another tween is controlling a margin, we cannot only apply the difference in the ieOffsets, so we essentially zero-out the dx and dy here in that case. We record the margin(s) later so that we can keep comparing them, making this code very flexible.

-                        } else {

-                            dif = (i < 2) ? dx - t.ieOffsetX : dy - t.ieOffsetY;

-                        }

-                        style[prop] = (t[prop] = Math.round( val - dif * ((i === 0 || i === 2) ? 1 : mult) )) + "px";

-                    }

-                }

-            },

-

-            _set3DTransformRatio = _internals.set3DTransformRatio = function(v) {

-                var t = this.data, //refers to the element's _gsTransform object

-                    style = this.t.style,

-                    angle = t.rotation * _DEG2RAD,

-                    sx = t.scaleX,

-                    sy = t.scaleY,

-                    sz = t.scaleZ,

-                    perspective = t.perspective,

-                    a11, a12, a13, a14, a21, a22, a23, a24, a31, a32, a33, a34, a41, a42, a43,

-                    zOrigin, rnd, cos, sin, t1, t2, t3, t4;

-                if (v === 1 || v === 0) if (t.force3D === "auto") if (!t.rotationY && !t.rotationX && sz === 1 && !perspective && !t.z) { //on the final render (which could be 0 for a from tween), if there are no 3D aspects, render in 2D to free up memory and improve performance especially on mobile devices

-                    _set2DTransformRatio.call(this, v);

-                    return;

-                }

-                if (_isFirefox) {

-                    var n = 0.0001;

-                    if (sx < n && sx > -n) { //Firefox has a bug (at least in v25) that causes it to render the transparent part of 32-bit PNG images as black when displayed inside an iframe and the 3D scale is very small and doesn't change sufficiently enough between renders (like if you use a Power4.easeInOut to scale from 0 to 1 where the beginning values only change a tiny amount to begin the tween before accelerating). In this case, we force the scale to be 0.00002 instead which is visually the same but works around the Firefox issue.

-                        sx = sz = 0.00002;

-                    }

-                    if (sy < n && sy > -n) {

-                        sy = sz = 0.00002;

-                    }

-                    if (perspective && !t.z && !t.rotationX && !t.rotationY) { //Firefox has a bug that causes elements to have an odd super-thin, broken/dotted black border on elements that have a perspective set but aren't utilizing 3D space (no rotationX, rotationY, or z).

-                        perspective = 0;

-                    }

-                }

-                if (angle || t.skewX) {

-                    cos = Math.cos(angle);

-                    sin = Math.sin(angle);

-                    a11 = cos;

-                    a21 = sin;

-                    if (t.skewX) {

-                        angle -= t.skewX * _DEG2RAD;

-                        cos = Math.cos(angle);

-                        sin = Math.sin(angle);

-                        if (t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does

-                            t1 = Math.tan(t.skewX * _DEG2RAD);

-                            t1 = Math.sqrt(1 + t1 * t1);

-                            cos *= t1;

-                            sin *= t1;

-                        }

-                    }

-                    a12 = -sin;

-                    a22 = cos;

-

-                } else if (!t.rotationY && !t.rotationX && sz === 1 && !perspective) { //if we're only translating and/or 2D scaling, this is faster...

-                    style[_transformProp] = "translate3d(" + t.x + "px," + t.y + "px," + t.z +"px)" + ((sx !== 1 || sy !== 1) ? " scale(" + sx + "," + sy + ")" : "");

-                    return;

-                } else {

-                    a11 = a22 = 1;

-                    a12 = a21 = 0;

-                }

-                a33 = 1;

-                a13 = a14 = a23 = a24 = a31 = a32 = a34 = a41 = a42 = 0;

-                a43 = (perspective) ? -1 / perspective : 0;

-                zOrigin = t.zOrigin;

-                rnd = 100000;

-                angle = t.rotationY * _DEG2RAD;

-                if (angle) {

-                    cos = Math.cos(angle);

-                    sin = Math.sin(angle);

-                    a31 = a33*-sin;

-                    a41 = a43*-sin;

-                    a13 = a11*sin;

-                    a23 = a21*sin;

-                    a33 *= cos;

-                    a43 *= cos;

-                    a11 *= cos;

-                    a21 *= cos;

-                }

-                angle = t.rotationX * _DEG2RAD;

-                if (angle) {

-                    cos = Math.cos(angle);

-                    sin = Math.sin(angle);

-                    t1 = a12*cos+a13*sin;

-                    t2 = a22*cos+a23*sin;

-                    t3 = a32*cos+a33*sin;

-                    t4 = a42*cos+a43*sin;

-                    a13 = a12*-sin+a13*cos;

-                    a23 = a22*-sin+a23*cos;

-                    a33 = a32*-sin+a33*cos;

-                    a43 = a42*-sin+a43*cos;

-                    a12 = t1;

-                    a22 = t2;

-                    a32 = t3;

-                    a42 = t4;

-                }

-                if (sz !== 1) {

-                    a13*=sz;

-                    a23*=sz;

-                    a33*=sz;

-                    a43*=sz;

-                }

-                if (sy !== 1) {

-                    a12*=sy;

-                    a22*=sy;

-                    a32*=sy;

-                    a42*=sy;

-                }

-                if (sx !== 1) {

-                    a11*=sx;

-                    a21*=sx;

-                    a31*=sx;

-                    a41*=sx;

-                }

-                if (zOrigin) {

-                    a34 -= zOrigin;

-                    a14 = a13*a34;

-                    a24 = a23*a34;

-                    a34 = a33*a34+zOrigin;

-                }

-                //we round the x, y, and z slightly differently to allow even larger values.

-                a14 = (t1 = (a14 += t.x) - (a14 |= 0)) ? ((t1 * rnd + (t1 < 0 ? -0.5 : 0.5)) | 0) / rnd + a14 : a14;

-                a24 = (t1 = (a24 += t.y) - (a24 |= 0)) ? ((t1 * rnd + (t1 < 0 ? -0.5 : 0.5)) | 0) / rnd + a24 : a24;

-                a34 = (t1 = (a34 += t.z) - (a34 |= 0)) ? ((t1 * rnd + (t1 < 0 ? -0.5 : 0.5)) | 0) / rnd + a34 : a34;

-                style[_transformProp] = "matrix3d(" + [ (((a11 * rnd) | 0) / rnd), (((a21 * rnd) | 0) / rnd), (((a31 * rnd) | 0) / rnd), (((a41 * rnd) | 0) / rnd), (((a12 * rnd) | 0) / rnd), (((a22 * rnd) | 0) / rnd), (((a32 * rnd) | 0) / rnd), (((a42 * rnd) | 0) / rnd), (((a13 * rnd) | 0) / rnd), (((a23 * rnd) | 0) / rnd), (((a33 * rnd) | 0) / rnd), (((a43 * rnd) | 0) / rnd), a14, a24, a34, (perspective ? (1 + (-a34 / perspective)) : 1) ].join(",") + ")";

-            },

-

-            _set2DTransformRatio = _internals.set2DTransformRatio = function(v) {

-                var t = this.data, //refers to the element's _gsTransform object

-                    targ = this.t,

-                    style = targ.style,

-                    ang, skew, rnd, sx, sy;

-                if (t.rotationX || t.rotationY || t.z || t.force3D === true || (t.force3D === "auto" && v !== 1 && v !== 0)) { //if a 3D tween begins while a 2D one is running, we need to kick the rendering over to the 3D method. For example, imagine a yoyo-ing, infinitely repeating scale tween running, and then the object gets rotated in 3D space with a different tween.

-                    this.setRatio = _set3DTransformRatio;

-                    _set3DTransformRatio.call(this, v);

-                    return;

-                }

-                if (!t.rotation && !t.skewX) {

-                    style[_transformProp] = "matrix(" + t.scaleX + ",0,0," + t.scaleY + "," + t.x + "," + t.y + ")";

-                } else {

-                    ang = t.rotation * _DEG2RAD;

-                    skew = ang - t.skewX * _DEG2RAD;

-                    rnd = 100000;

-                    sx = t.scaleX * rnd;

-                    sy = t.scaleY * rnd;

-                    //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 5 decimal places.

-                    style[_transformProp] = "matrix(" + (((Math.cos(ang) * sx) | 0) / rnd) + "," + (((Math.sin(ang) * sx) | 0) / rnd) + "," + (((Math.sin(skew) * -sy) | 0) / rnd) + "," + (((Math.cos(skew) * sy) | 0) / rnd) + "," + t.x + "," + t.y + ")";

-                }

-            };

-

-        _registerComplexSpecialProp("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType", {parser:function(t, e, p, cssp, pt, plugin, vars) {

-            if (cssp._transform) { return pt; } //only need to parse the transform once, and only if the browser supports it.

-            var m1 = cssp._transform = _getTransform(t, _cs, true, vars.parseTransform),

-                style = t.style,

-                min = 0.000001,

-                i = _transformProps.length,

-                v = vars,

-                endRotations = {},

-                m2, skewY, copy, orig, has3D, hasChange, dr;

-            if (typeof(v.transform) === "string" && _transformProp) { //for values like transform:"rotate(60deg) scale(0.5, 0.8)"

-                copy = _tempDiv.style; //don't use the original target because it might be SVG in which case some browsers don't report computed style correctly.

-                copy[_transformProp] = v.transform;

-                copy.display = "block"; //if display is "none", the browser often refuses to report the transform properties correctly.

-                copy.position = "absolute";

-                _doc.body.appendChild(_tempDiv);

-                m2 = _getTransform(_tempDiv, null, false);

-                _doc.body.removeChild(_tempDiv);

-            } else if (typeof(v) === "object") { //for values like scaleX, scaleY, rotation, x, y, skewX, and skewY or transform:{...} (object)

-                m2 = {scaleX:_parseVal((v.scaleX != null) ? v.scaleX : v.scale, m1.scaleX),

-                    scaleY:_parseVal((v.scaleY != null) ? v.scaleY : v.scale, m1.scaleY),

-                    scaleZ:_parseVal(v.scaleZ, m1.scaleZ),

-                    x:_parseVal(v.x, m1.x),

-                    y:_parseVal(v.y, m1.y),

-                    z:_parseVal(v.z, m1.z),

-                    perspective:_parseVal(v.transformPerspective, m1.perspective)};

-                dr = v.directionalRotation;

-                if (dr != null) {

-                    if (typeof(dr) === "object") {

-                        for (copy in dr) {

-                            v[copy] = dr[copy];

-                        }

-                    } else {

-                        v.rotation = dr;

-                    }

-                }

-                m2.rotation = _parseAngle(("rotation" in v) ? v.rotation : ("shortRotation" in v) ? v.shortRotation + "_short" : ("rotationZ" in v) ? v.rotationZ : m1.rotation, m1.rotation, "rotation", endRotations);

-                if (_supports3D) {

-                    m2.rotationX = _parseAngle(("rotationX" in v) ? v.rotationX : ("shortRotationX" in v) ? v.shortRotationX + "_short" : m1.rotationX || 0, m1.rotationX, "rotationX", endRotations);

-                    m2.rotationY = _parseAngle(("rotationY" in v) ? v.rotationY : ("shortRotationY" in v) ? v.shortRotationY + "_short" : m1.rotationY || 0, m1.rotationY, "rotationY", endRotations);

-                }

-                m2.skewX = (v.skewX == null) ? m1.skewX : _parseAngle(v.skewX, m1.skewX);

-

-                //note: for performance reasons, we combine all skewing into the skewX and rotation values, ignoring skewY but we must still record it so that we can discern how much of the overall skew is attributed to skewX vs. skewY. Otherwise, if the skewY would always act relative (tween skewY to 10deg, for example, multiple times and if we always combine things into skewX, we can't remember that skewY was 10 from last time). Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of -10 degrees.

-                m2.skewY = (v.skewY == null) ? m1.skewY : _parseAngle(v.skewY, m1.skewY);

-                if ((skewY = m2.skewY - m1.skewY)) {

-                    m2.skewX += skewY;

-                    m2.rotation += skewY;

-                }

-            }

-

-            if (_supports3D && v.force3D != null) {

-                m1.force3D = v.force3D;

-                hasChange = true;

-            }

-

-            m1.skewType = v.skewType || m1.skewType || CSSPlugin.defaultSkewType;

-

-            has3D = (m1.force3D || m1.z || m1.rotationX || m1.rotationY || m2.z || m2.rotationX || m2.rotationY || m2.perspective);

-            if (!has3D && v.scale != null) {

-                m2.scaleZ = 1; //no need to tween scaleZ.

-            }

-

-            while (--i > -1) {

-                p = _transformProps[i];

-                orig = m2[p] - m1[p];

-                if (orig > min || orig < -min || _forcePT[p] != null) {

-                    hasChange = true;

-                    pt = new CSSPropTween(m1, p, m1[p], orig, pt);

-                    if (p in endRotations) {

-                        pt.e = endRotations[p]; //directional rotations typically have compensated values during the tween, but we need to make sure they end at exactly what the user requested

-                    }

-                    pt.xs0 = 0; //ensures the value stays numeric in setRatio()

-                    pt.plugin = plugin;

-                    cssp._overwriteProps.push(pt.n);

-                }

-            }

-

-            orig = v.transformOrigin;

-            if (orig || (_supports3D && has3D && m1.zOrigin)) { //if anything 3D is happening and there's a transformOrigin with a z component that's non-zero, we must ensure that the transformOrigin's z-component is set to 0 so that we can manually do those calculations to get around Safari bugs. Even if the user didn't specifically define a "transformOrigin" in this particular tween (maybe they did it via css directly).

-                if (_transformProp) {

-                    hasChange = true;

-                    p = _transformOriginProp;

-                    orig = (orig || _getStyle(t, p, _cs, false, "50% 50%")) + ""; //cast as string to avoid errors

-                    pt = new CSSPropTween(style, p, 0, 0, pt, -1, "transformOrigin");

-                    pt.b = style[p];

-                    pt.plugin = plugin;

-                    if (_supports3D) {

-                        copy = m1.zOrigin;

-                        orig = orig.split(" ");

-                        m1.zOrigin = ((orig.length > 2 && !(copy !== 0 && orig[2] === "0px")) ? parseFloat(orig[2]) : copy) || 0; //Safari doesn't handle the z part of transformOrigin correctly, so we'll manually handle it in the _set3DTransformRatio() method.

-                        pt.xs0 = pt.e = orig[0] + " " + (orig[1] || "50%") + " 0px"; //we must define a z value of 0px specifically otherwise iOS 5 Safari will stick with the old one (if one was defined)!

-                        pt = new CSSPropTween(m1, "zOrigin", 0, 0, pt, -1, pt.n); //we must create a CSSPropTween for the _gsTransform.zOrigin so that it gets reset properly at the beginning if the tween runs backward (as opposed to just setting m1.zOrigin here)

-                        pt.b = copy;

-                        pt.xs0 = pt.e = m1.zOrigin;

-                    } else {

-                        pt.xs0 = pt.e = orig;

-                    }

-

-                //for older versions of IE (6-8), we need to manually calculate things inside the setRatio() function. We record origin x and y (ox and oy) and whether or not the values are percentages (oxp and oyp).

-                } else {

-                    _parsePosition(orig + "", m1);

-                }

-            }

-

-            if (hasChange) {

-                cssp._transformType = (has3D || this._transformType === 3) ? 3 : 2; //quicker than calling cssp._enableTransforms();

-            }

-            return pt;

-        }, prefix:true});

-

-        _registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"});

-

-        _registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) {

-            e = this.format(e);

-            var props = ["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"],

-                style = t.style,

-                ea1, i, es2, bs2, bs, es, bn, en, w, h, esfx, bsfx, rel, hn, vn, em;

-            w = parseFloat(t.offsetWidth);

-            h = parseFloat(t.offsetHeight);

-            ea1 = e.split(" ");

-            for (i = 0; i < props.length; i++) { //if we're dealing with percentages, we must convert things separately for the horizontal and vertical axis!

-                if (this.p.indexOf("border")) { //older browsers used a prefix

-                    props[i] = _checkPropPrefix(props[i]);

-                }

-                bs = bs2 = _getStyle(t, props[i], _cs, false, "0px");

-                if (bs.indexOf(" ") !== -1) {

-                    bs2 = bs.split(" ");

-                    bs = bs2[0];

-                    bs2 = bs2[1];

-                }

-                es = es2 = ea1[i];

-                bn = parseFloat(bs);

-                bsfx = bs.substr((bn + "").length);

-                rel = (es.charAt(1) === "=");

-                if (rel) {

-                    en = parseInt(es.charAt(0)+"1", 10);

-                    es = es.substr(2);

-                    en *= parseFloat(es);

-                    esfx = es.substr((en + "").length - (en < 0 ? 1 : 0)) || "";

-                } else {

-                    en = parseFloat(es);

-                    esfx = es.substr((en + "").length);

-                }

-                if (esfx === "") {

-                    esfx = _suffixMap[p] || bsfx;

-                }

-                if (esfx !== bsfx) {

-                    hn = _convertToPixels(t, "borderLeft", bn, bsfx); //horizontal number (we use a bogus "borderLeft" property just because the _convertToPixels() method searches for the keywords "Left", "Right", "Top", and "Bottom" to determine of it's a horizontal or vertical property, and we need "border" in the name so that it knows it should measure relative to the element itself, not its parent.

-                    vn = _convertToPixels(t, "borderTop", bn, bsfx); //vertical number

-                    if (esfx === "%") {

-                        bs = (hn / w * 100) + "%";

-                        bs2 = (vn / h * 100) + "%";

-                    } else if (esfx === "em") {

-                        em = _convertToPixels(t, "borderLeft", 1, "em");

-                        bs = (hn / em) + "em";

-                        bs2 = (vn / em) + "em";

-                    } else {

-                        bs = hn + "px";

-                        bs2 = vn + "px";

-                    }

-                    if (rel) {

-                        es = (parseFloat(bs) + en) + esfx;

-                        es2 = (parseFloat(bs2) + en) + esfx;

-                    }

-                }

-                pt = _parseComplex(style, props[i], bs + " " + bs2, es + " " + es2, false, "0px", pt);

-            }

-            return pt;

-        }, prefix:true, formatter:_getFormatter("0px 0px 0px 0px", false, true)});

-        _registerComplexSpecialProp("backgroundPosition", {defaultValue:"0 0", parser:function(t, e, p, cssp, pt, plugin) {

-            var bp = "background-position",

-                cs = (_cs || _getComputedStyle(t, null)),

-                bs = this.format( ((cs) ? _ieVers ? cs.getPropertyValue(bp + "-x") + " " + cs.getPropertyValue(bp + "-y") : cs.getPropertyValue(bp) : t.currentStyle.backgroundPositionX + " " + t.currentStyle.backgroundPositionY) || "0 0"), //Internet Explorer doesn't report background-position correctly - we must query background-position-x and background-position-y and combine them (even in IE10). Before IE9, we must do the same with the currentStyle object and use camelCase

-                es = this.format(e),

-                ba, ea, i, pct, overlap, src;

-            if ((bs.indexOf("%") !== -1) !== (es.indexOf("%") !== -1)) {

-                src = _getStyle(t, "backgroundImage").replace(_urlExp, "");

-                if (src && src !== "none") {

-                    ba = bs.split(" ");

-                    ea = es.split(" ");

-                    _tempImg.setAttribute("src", src); //set the temp <img>'s src to the background-image so that we can measure its width/height

-                    i = 2;

-                    while (--i > -1) {

-                        bs = ba[i];

-                        pct = (bs.indexOf("%") !== -1);

-                        if (pct !== (ea[i].indexOf("%") !== -1)) {

-                            overlap = (i === 0) ? t.offsetWidth - _tempImg.width : t.offsetHeight - _tempImg.height;

-                            ba[i] = pct ? (parseFloat(bs) / 100 * overlap) + "px" : (parseFloat(bs) / overlap * 100) + "%";

-                        }

-                    }

-                    bs = ba.join(" ");

-                }

-            }

-            return this.parseComplex(t.style, bs, es, pt, plugin);

-        }, formatter:_parsePosition});

-        _registerComplexSpecialProp("backgroundSize", {defaultValue:"0 0", formatter:_parsePosition});

-        _registerComplexSpecialProp("perspective", {defaultValue:"0px", prefix:true});

-        _registerComplexSpecialProp("perspectiveOrigin", {defaultValue:"50% 50%", prefix:true});

-        _registerComplexSpecialProp("transformStyle", {prefix:true});

-        _registerComplexSpecialProp("backfaceVisibility", {prefix:true});

-        _registerComplexSpecialProp("userSelect", {prefix:true});

-        _registerComplexSpecialProp("margin", {parser:_getEdgeParser("marginTop,marginRight,marginBottom,marginLeft")});

-        _registerComplexSpecialProp("padding", {parser:_getEdgeParser("paddingTop,paddingRight,paddingBottom,paddingLeft")});

-        _registerComplexSpecialProp("clip", {defaultValue:"rect(0px,0px,0px,0px)", parser:function(t, e, p, cssp, pt, plugin){

-            var b, cs, delim;

-            if (_ieVers < 9) { //IE8 and earlier don't report a "clip" value in the currentStyle - instead, the values are split apart into clipTop, clipRight, clipBottom, and clipLeft. Also, in IE7 and earlier, the values inside rect() are space-delimited, not comma-delimited.

-                cs = t.currentStyle;

-                delim = _ieVers < 8 ? " " : ",";

-                b = "rect(" + cs.clipTop + delim + cs.clipRight + delim + cs.clipBottom + delim + cs.clipLeft + ")";

-                e = this.format(e).split(",").join(delim);

-            } else {

-                b = this.format(_getStyle(t, this.p, _cs, false, this.dflt));

-                e = this.format(e);

-            }

-            return this.parseComplex(t.style, b, e, pt, plugin);

-        }});

-        _registerComplexSpecialProp("textShadow", {defaultValue:"0px 0px 0px #999", color:true, multi:true});

-        _registerComplexSpecialProp("autoRound,strictUnits", {parser:function(t, e, p, cssp, pt) {return pt;}}); //just so that we can ignore these properties (not tween them)

-        _registerComplexSpecialProp("border", {defaultValue:"0px solid #000", parser:function(t, e, p, cssp, pt, plugin) {

-                return this.parseComplex(t.style, this.format(_getStyle(t, "borderTopWidth", _cs, false, "0px") + " " + _getStyle(t, "borderTopStyle", _cs, false, "solid") + " " + _getStyle(t, "borderTopColor", _cs, false, "#000")), this.format(e), pt, plugin);

-            }, color:true, formatter:function(v) {

-                var a = v.split(" ");

-                return a[0] + " " + (a[1] || "solid") + " " + (v.match(_colorExp) || ["#000"])[0];

-            }});

-        _registerComplexSpecialProp("borderWidth", {parser:_getEdgeParser("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")}); //Firefox doesn't pick up on borderWidth set in style sheets (only inline).

-        _registerComplexSpecialProp("float,cssFloat,styleFloat", {parser:function(t, e, p, cssp, pt, plugin) {

-            var s = t.style,

-                prop = ("cssFloat" in s) ? "cssFloat" : "styleFloat";

-            return new CSSPropTween(s, prop, 0, 0, pt, -1, p, false, 0, s[prop], e);

-        }});

-

-        //opacity-related

-        var _setIEOpacityRatio = function(v) {

-                var t = this.t, //refers to the element's style property

-                    filters = t.filter || _getStyle(this.data, "filter"),

-                    val = (this.s + this.c * v) | 0,

-                    skip;

-                if (val === 100) { //for older versions of IE that need to use a filter to apply opacity, we should remove the filter if opacity hits 1 in order to improve performance, but make sure there isn't a transform (matrix) or gradient in the filters.

-                    if (filters.indexOf("atrix(") === -1 && filters.indexOf("radient(") === -1 && filters.indexOf("oader(") === -1) {

-                        t.removeAttribute("filter");

-                        skip = (!_getStyle(this.data, "filter")); //if a class is applied that has an alpha filter, it will take effect (we don't want that), so re-apply our alpha filter in that case. We must first remove it and then check.

-                    } else {

-                        t.filter = filters.replace(_alphaFilterExp, "");

-                        skip = true;

-                    }

-                }

-                if (!skip) {

-                    if (this.xn1) {

-                        t.filter = filters = filters || ("alpha(opacity=" + val + ")"); //works around bug in IE7/8 that prevents changes to "visibility" from being applied properly if the filter is changed to a different alpha on the same frame.

-                    }

-                    if (filters.indexOf("pacity") === -1) { //only used if browser doesn't support the standard opacity style property (IE 7 and 8). We omit the "O" to avoid case-sensitivity issues

-                        if (val !== 0 || !this.xn1) { //bugs in IE7/8 won't render the filter properly if opacity is ADDED on the same frame/render as "visibility" changes (this.xn1 is 1 if this tween is an "autoAlpha" tween)

-                            t.filter = filters + " alpha(opacity=" + val + ")"; //we round the value because otherwise, bugs in IE7/8 can prevent "visibility" changes from being applied properly.

-                        }

-                    } else {

-                        t.filter = filters.replace(_opacityExp, "opacity=" + val);

-                    }

-                }

-            };

-        _registerComplexSpecialProp("opacity,alpha,autoAlpha", {defaultValue:"1", parser:function(t, e, p, cssp, pt, plugin) {

-            var b = parseFloat(_getStyle(t, "opacity", _cs, false, "1")),

-                style = t.style,

-                isAutoAlpha = (p === "autoAlpha");

-            if (typeof(e) === "string" && e.charAt(1) === "=") {

-                e = ((e.charAt(0) === "-") ? -1 : 1) * parseFloat(e.substr(2)) + b;

-            }

-            if (isAutoAlpha && b === 1 && _getStyle(t, "visibility", _cs) === "hidden" && e !== 0) { //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience)

-                b = 0;

-            }

-            if (_supportsOpacity) {

-                pt = new CSSPropTween(style, "opacity", b, e - b, pt);

-            } else {

-                pt = new CSSPropTween(style, "opacity", b * 100, (e - b) * 100, pt);

-                pt.xn1 = isAutoAlpha ? 1 : 0; //we need to record whether or not this is an autoAlpha so that in the setRatio(), we know to duplicate the setting of the alpha in order to work around a bug in IE7 and IE8 that prevents changes to "visibility" from taking effect if the filter is changed to a different alpha(opacity) at the same time. Setting it to the SAME value first, then the new value works around the IE7/8 bug.

-                style.zoom = 1; //helps correct an IE issue.

-                pt.type = 2;

-                pt.b = "alpha(opacity=" + pt.s + ")";

-                pt.e = "alpha(opacity=" + (pt.s + pt.c) + ")";

-                pt.data = t;

-                pt.plugin = plugin;

-                pt.setRatio = _setIEOpacityRatio;

-            }

-            if (isAutoAlpha) { //we have to create the "visibility" PropTween after the opacity one in the linked list so that they run in the order that works properly in IE8 and earlier

-                pt = new CSSPropTween(style, "visibility", 0, 0, pt, -1, null, false, 0, ((b !== 0) ? "inherit" : "hidden"), ((e === 0) ? "hidden" : "inherit"));

-                pt.xs0 = "inherit";

-                cssp._overwriteProps.push(pt.n);

-                cssp._overwriteProps.push(p);

-            }

-            return pt;

-        }});

-

-

-        var _removeProp = function(s, p) {

-                if (p) {

-                    if (s.removeProperty) {

-                        if (p.substr(0,2) === "ms") { //Microsoft browsers don't conform to the standard of capping the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example)

-                            p = "M" + p.substr(1);

-                        }

-                        s.removeProperty(p.replace(_capsExp, "-$1").toLowerCase());

-                    } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()"

-                        s.removeAttribute(p);

-                    }

-                }

-            },

-            _setClassNameRatio = function(v) {

-                this.t._gsClassPT = this;

-                if (v === 1 || v === 0) {

-                    this.t.setAttribute("class", (v === 0) ? this.b : this.e);

-                    var mpt = this.data, //first MiniPropTween

-                        s = this.t.style;

-                    while (mpt) {

-                        if (!mpt.v) {

-                            _removeProp(s, mpt.p);

-                        } else {

-                            s[mpt.p] = mpt.v;

-                        }

-                        mpt = mpt._next;

-                    }

-                    if (v === 1 && this.t._gsClassPT === this) {

-                        this.t._gsClassPT = null;

-                    }

-                } else if (this.t.getAttribute("class") !== this.e) {

-                    this.t.setAttribute("class", this.e);

-                }

-            };

-        _registerComplexSpecialProp("className", {parser:function(t, e, p, cssp, pt, plugin, vars) {

-            var b = t.getAttribute("class") || "", //don't use t.className because it doesn't work consistently on SVG elements; getAttribute("class") and setAttribute("class", value") is more reliable.

-                cssText = t.style.cssText,

-                difData, bs, cnpt, cnptLookup, mpt;

-            pt = cssp._classNamePT = new CSSPropTween(t, p, 0, 0, pt, 2);

-            pt.setRatio = _setClassNameRatio;

-            pt.pr = -11;

-            _hasPriority = true;

-            pt.b = b;

-            bs = _getAllStyles(t, _cs);

-            //if there's a className tween already operating on the target, force it to its end so that the necessary inline styles are removed and the class name is applied before we determine the end state (we don't want inline styles interfering that were there just for class-specific values)

-            cnpt = t._gsClassPT;

-            if (cnpt) {

-                cnptLookup = {};

-                mpt = cnpt.data; //first MiniPropTween which stores the inline styles - we need to force these so that the inline styles don't contaminate things. Otherwise, there's a small chance that a tween could start and the inline values match the destination values and they never get cleaned.

-                while (mpt) {

-                    cnptLookup[mpt.p] = 1;

-                    mpt = mpt._next;

-                }

-                cnpt.setRatio(1);

-            }

-            t._gsClassPT = pt;

-            pt.e = (e.charAt(1) !== "=") ? e : b.replace(new RegExp("\\s*\\b" + e.substr(2) + "\\b"), "") + ((e.charAt(0) === "+") ? " " + e.substr(2) : "");

-            if (cssp._tween._duration) { //if it's a zero-duration tween, there's no need to tween anything or parse the data. In fact, if we switch classes temporarily (which we must do for proper parsing) and the class has a transition applied, it could cause a quick flash to the end state and back again initially in some browsers.

-                t.setAttribute("class", pt.e);

-                difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup);

-                t.setAttribute("class", b);

-                pt.data = difData.firstMPT;

-                t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).

-                pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself)

-            }

-            return pt;

-        }});

-

-

-        var _setClearPropsRatio = function(v) {

-            if (v === 1 || v === 0) if (this.data._totalTime === this.data._totalDuration && this.data.data !== "isFromStart") { //this.data refers to the tween. Only clear at the END of the tween (remember, from() tweens make the ratio go from 1 to 0, so we can't just check that and if the tween is the zero-duration one that's created internally to render the starting values in a from() tween, ignore that because otherwise, for example, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in).

-                var s = this.t.style,

-                    transformParse = _specialProps.transform.parse,

-                    a, p, i, clearTransform;

-                if (this.e === "all") {

-                    s.cssText = "";

-                    clearTransform = true;

-                } else {

-                    a = this.e.split(",");

-                    i = a.length;

-                    while (--i > -1) {

-                        p = a[i];

-                        if (_specialProps[p]) {

-                            if (_specialProps[p].parse === transformParse) {

-                                clearTransform = true;

-                            } else {

-                                p = (p === "transformOrigin") ? _transformOriginProp : _specialProps[p].p; //ensures that special properties use the proper browser-specific property name, like "scaleX" might be "-webkit-transform" or "boxShadow" might be "-moz-box-shadow"

-                            }

-                        }

-                        _removeProp(s, p);

-                    }

-                }

-                if (clearTransform) {

-                    _removeProp(s, _transformProp);

-                    if (this.t._gsTransform) {

-                        delete this.t._gsTransform;

-                    }

-                }

-

-            }

-        };

-        _registerComplexSpecialProp("clearProps", {parser:function(t, e, p, cssp, pt) {

-            pt = new CSSPropTween(t, p, 0, 0, pt, 2);

-            pt.setRatio = _setClearPropsRatio;

-            pt.e = e;

-            pt.pr = -10;

-            pt.data = cssp._tween;

-            _hasPriority = true;

-            return pt;

-        }});

-

-        p = "bezier,throwProps,physicsProps,physics2D".split(",");

-        i = p.length;

-        while (i--) {

-            _registerPluginProp(p[i]);

-        }

-

-

-

-

-

-

-

-

-        p = CSSPlugin.prototype;

-        p._firstPT = null;

-

-        //gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc.

-        p._onInitTween = function(target, vars, tween) {

-            if (!target.nodeType) { //css is only for dom elements

-                return false;

-            }

-            this._target = target;

-            this._tween = tween;

-            this._vars = vars;

-            _autoRound = vars.autoRound;

-            _hasPriority = false;

-            _suffixMap = vars.suffixMap || CSSPlugin.suffixMap;

-            _cs = _getComputedStyle(target, "");

-            _overwriteProps = this._overwriteProps;

-            var style = target.style,

-                v, pt, pt2, first, last, next, zIndex, tpt, threeD;

-            if (_reqSafariFix) if (style.zIndex === "") {

-                v = _getStyle(target, "zIndex", _cs);

-                if (v === "auto" || v === "") {

-                    //corrects a bug in [non-Android] Safari that prevents it from repainting elements in their new positions if they don't have a zIndex set. We also can't just apply this inside _parseTransform() because anything that's moved in any way (like using "left" or "top" instead of transforms like "x" and "y") can be affected, so it is best to ensure that anything that's tweening has a z-index. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. Plus zIndex is less memory-intensive.

-                    this._addLazySet(style, "zIndex", 0);

-                }

-            }

-

-            if (typeof(vars) === "string") {

-                first = style.cssText;

-                v = _getAllStyles(target, _cs);

-                style.cssText = first + ";" + vars;

-                v = _cssDif(target, v, _getAllStyles(target)).difs;

-                if (!_supportsOpacity && _opacityValExp.test(vars)) {

-                    v.opacity = parseFloat( RegExp.$1 );

-                }

-                vars = v;

-                style.cssText = first;

-            }

-            this._firstPT = pt = this.parse(target, vars, null);

-

-            if (this._transformType) {

-                threeD = (this._transformType === 3);

-                if (!_transformProp) {

-                    style.zoom = 1; //helps correct an IE issue.

-                } else if (_isSafari) {

-                    _reqSafariFix = true;

-                    //if zIndex isn't set, iOS Safari doesn't repaint things correctly sometimes (seemingly at random).

-                    if (style.zIndex === "") {

-                        zIndex = _getStyle(target, "zIndex", _cs);

-                        if (zIndex === "auto" || zIndex === "") {

-                            this._addLazySet(style, "zIndex", 0);

-                        }

-                    }

-                    //Setting WebkitBackfaceVisibility corrects 3 bugs:

-                    // 1) [non-Android] Safari skips rendering changes to "top" and "left" that are made on the same frame/render as a transform update.

-                    // 2) iOS Safari sometimes neglects to repaint elements in their new positions. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly.

-                    // 3) Safari sometimes displayed odd artifacts when tweening the transform (or WebkitTransform) property, like ghosts of the edges of the element remained. Definitely a browser bug.

-                    //Note: we allow the user to override the auto-setting by defining WebkitBackfaceVisibility in the vars of the tween.

-                    if (_isSafariLT6) {

-                        this._addLazySet(style, "WebkitBackfaceVisibility", this._vars.WebkitBackfaceVisibility || (threeD ? "visible" : "hidden"));

-                    }

-                }

-                pt2 = pt;

-                while (pt2 && pt2._next) {

-                    pt2 = pt2._next;

-                }

-                tpt = new CSSPropTween(target, "transform", 0, 0, null, 2);

-                this._linkCSSP(tpt, null, pt2);

-                tpt.setRatio = (threeD && _supports3D) ? _set3DTransformRatio : _transformProp ? _set2DTransformRatio : _setIETransformRatio;

-                tpt.data = this._transform || _getTransform(target, _cs, true);

-                _overwriteProps.pop(); //we don't want to force the overwrite of all "transform" tweens of the target - we only care about individual transform properties like scaleX, rotation, etc. The CSSPropTween constructor automatically adds the property to _overwriteProps which is why we need to pop() here.

-            }

-

-            if (_hasPriority) {

-                //reorders the linked list in order of pr (priority)

-                while (pt) {

-                    next = pt._next;

-                    pt2 = first;

-                    while (pt2 && pt2.pr > pt.pr) {

-                        pt2 = pt2._next;

-                    }

-                    if ((pt._prev = pt2 ? pt2._prev : last)) {

-                        pt._prev._next = pt;

-                    } else {

-                        first = pt;

-                    }

-                    if ((pt._next = pt2)) {

-                        pt2._prev = pt;

-                    } else {

-                        last = pt;

-                    }

-                    pt = next;

-                }

-                this._firstPT = first;

-            }

-            return true;

-        };

-

-

-        p.parse = function(target, vars, pt, plugin) {

-            var style = target.style,

-                p, sp, bn, en, bs, es, bsfx, esfx, isStr, rel;

-            for (p in vars) {

-                es = vars[p]; //ending value string

-                sp = _specialProps[p]; //SpecialProp lookup.

-                if (sp) {

-                    pt = sp.parse(target, es, p, this, pt, plugin, vars);

-

-                } else {

-                    bs = _getStyle(target, p, _cs) + "";

-                    isStr = (typeof(es) === "string");

-                    if (p === "color" || p === "fill" || p === "stroke" || p.indexOf("Color") !== -1 || (isStr && _rgbhslExp.test(es))) { //Opera uses background: to define color sometimes in addition to backgroundColor:

-                        if (!isStr) {

-                            es = _parseColor(es);

-                            es = ((es.length > 3) ? "rgba(" : "rgb(") + es.join(",") + ")";

-                        }

-                        pt = _parseComplex(style, p, bs, es, true, "transparent", pt, 0, plugin);

-

-                    } else if (isStr && (es.indexOf(" ") !== -1 || es.indexOf(",") !== -1)) {

-                        pt = _parseComplex(style, p, bs, es, true, null, pt, 0, plugin);

-

-                    } else {

-                        bn = parseFloat(bs);

-                        bsfx = (bn || bn === 0) ? bs.substr((bn + "").length) : ""; //remember, bs could be non-numeric like "normal" for fontWeight, so we should default to a blank suffix in that case.

-

-                        if (bs === "" || bs === "auto") {

-                            if (p === "width" || p === "height") {

-                                bn = _getDimension(target, p, _cs);

-                                bsfx = "px";

-                            } else if (p === "left" || p === "top") {

-                                bn = _calculateOffset(target, p, _cs);

-                                bsfx = "px";

-                            } else {

-                                bn = (p !== "opacity") ? 0 : 1;

-                                bsfx = "";

-                            }

-                        }

-

-                        rel = (isStr && es.charAt(1) === "=");

-                        if (rel) {

-                            en = parseInt(es.charAt(0) + "1", 10);

-                            es = es.substr(2);

-                            en *= parseFloat(es);

-                            esfx = es.replace(_suffixExp, "");

-                        } else {

-                            en = parseFloat(es);

-                            esfx = isStr ? es.substr((en + "").length) || "" : "";

-                        }

-

-                        if (esfx === "") {

-                            esfx = (p in _suffixMap) ? _suffixMap[p] : bsfx; //populate the end suffix, prioritizing the map, then if none is found, use the beginning suffix.

-                        }

-

-                        es = (en || en === 0) ? (rel ? en + bn : en) + esfx : vars[p]; //ensures that any += or -= prefixes are taken care of. Record the end value before normalizing the suffix because we always want to end the tween on exactly what they intended even if it doesn't match the beginning value's suffix.

-

-                        //if the beginning/ending suffixes don't match, normalize them...

-                        if (bsfx !== esfx) if (esfx !== "") if (en || en === 0) if (bn) { //note: if the beginning value (bn) is 0, we don't need to convert units!

-                            bn = _convertToPixels(target, p, bn, bsfx);

-                            if (esfx === "%") {

-                                bn /= _convertToPixels(target, p, 100, "%") / 100;

-                                if (vars.strictUnits !== true) { //some browsers report only "px" values instead of allowing "%" with getComputedStyle(), so we assume that if we're tweening to a %, we should start there too unless strictUnits:true is defined. This approach is particularly useful for responsive designs that use from() tweens.

-                                    bs = bn + "%";

-                                }

-

-                            } else if (esfx === "em") {

-                                bn /= _convertToPixels(target, p, 1, "em");

-

-                            //otherwise convert to pixels.

-                            } else if (esfx !== "px") {

-                                en = _convertToPixels(target, p, en, esfx);

-                                esfx = "px"; //we don't use bsfx after this, so we don't need to set it to px too.

-                            }

-                            if (rel) if (en || en === 0) {

-                                es = (en + bn) + esfx; //the changes we made affect relative calculations, so adjust the end value here.

-                            }

-                        }

-

-                        if (rel) {

-                            en += bn;

-                        }

-

-                        if ((bn || bn === 0) && (en || en === 0)) { //faster than isNaN(). Also, previously we required en !== bn but that doesn't really gain much performance and it prevents _parseToProxy() from working properly if beginning and ending values match but need to get tweened by an external plugin anyway. For example, a bezier tween where the target starts at left:0 and has these points: [{left:50},{left:0}] wouldn't work properly because when parsing the last point, it'd match the first (current) one and a non-tweening CSSPropTween would be recorded when we actually need a normal tween (type:0) so that things get updated during the tween properly.

-                            pt = new CSSPropTween(style, p, bn, en - bn, pt, 0, p, (_autoRound !== false && (esfx === "px" || p === "zIndex")), 0, bs, es);

-                            pt.xs0 = esfx;

-                            //DEBUG: _log("tween "+p+" from "+pt.b+" ("+bn+esfx+") to "+pt.e+" with suffix: "+pt.xs0);

-                        } else if (style[p] === undefined || !es && (es + "" === "NaN" || es == null)) {

-                            _log("invalid " + p + " tween value: " + vars[p]);

-                        } else {

-                            pt = new CSSPropTween(style, p, en || bn || 0, 0, pt, -1, p, false, 0, bs, es);

-                            pt.xs0 = (es === "none" && (p === "display" || p.indexOf("Style") !== -1)) ? bs : es; //intermediate value should typically be set immediately (end value) except for "display" or things like borderTopStyle, borderBottomStyle, etc. which should use the beginning value during the tween.

-                            //DEBUG: _log("non-tweening value "+p+": "+pt.xs0);

-                        }

-                    }

-                }

-                if (plugin) if (pt && !pt.plugin) {

-                    pt.plugin = plugin;

-                }

-            }

-            return pt;

-        };

-

-

-        //gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1.

-        p.setRatio = function(v) {

-            var pt = this._firstPT,

-                min = 0.000001,

-                val, str, i;

-

-            //at the end of the tween, we set the values to exactly what we received in order to make sure non-tweening values (like "position" or "float" or whatever) are set and so that if the beginning/ending suffixes (units) didn't match and we normalized to px, the value that the user passed in is used here. We check to see if the tween is at its beginning in case it's a from() tween in which case the ratio will actually go from 1 to 0 over the course of the tween (backwards).

-            if (v === 1 && (this._tween._time === this._tween._duration || this._tween._time === 0)) {

-                while (pt) {

-                    if (pt.type !== 2) {

-                        pt.t[pt.p] = pt.e;

-                    } else {

-                        pt.setRatio(v);

-                    }

-                    pt = pt._next;

-                }

-

-            } else if (v || !(this._tween._time === this._tween._duration || this._tween._time === 0) || this._tween._rawPrevTime === -0.000001) {

-                while (pt) {

-                    val = pt.c * v + pt.s;

-                    if (pt.r) {

-                        val = Math.round(val);

-                    } else if (val < min) if (val > -min) {

-                        val = 0;

-                    }

-                    if (!pt.type) {

-                        pt.t[pt.p] = val + pt.xs0;

-                    } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)"

-                        i = pt.l;

-                        if (i === 2) {

-                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2;

-                        } else if (i === 3) {

-                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3;

-                        } else if (i === 4) {

-                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4;

-                        } else if (i === 5) {

-                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4 + pt.xn4 + pt.xs5;

-                        } else {

-                            str = pt.xs0 + val + pt.xs1;

-                            for (i = 1; i < pt.l; i++) {

-                                str += pt["xn"+i] + pt["xs"+(i+1)];

-                            }

-                            pt.t[pt.p] = str;

-                        }

-

-                    } else if (pt.type === -1) { //non-tweening value

-                        pt.t[pt.p] = pt.xs0;

-

-                    } else if (pt.setRatio) { //custom setRatio() for things like SpecialProps, external plugins, etc.

-                        pt.setRatio(v);

-                    }

-                    pt = pt._next;

-                }

-

-            //if the tween is reversed all the way back to the beginning, we need to restore the original values which may have different units (like % instead of px or em or whatever).

-            } else {

-                while (pt) {

-                    if (pt.type !== 2) {

-                        pt.t[pt.p] = pt.b;

-                    } else {

-                        pt.setRatio(v);

-                    }

-                    pt = pt._next;

-                }

-            }

-        };

-

-        /**

-         * @private

-         * Forces rendering of the target's transforms (rotation, scale, etc.) whenever the CSSPlugin's setRatio() is called.

-         * Basically, this tells the CSSPlugin to create a CSSPropTween (type 2) after instantiation that runs last in the linked

-         * list and calls the appropriate (3D or 2D) rendering function. We separate this into its own method so that we can call

-         * it from other plugins like BezierPlugin if, for example, it needs to apply an autoRotation and this CSSPlugin

-         * doesn't have any transform-related properties of its own. You can call this method as many times as you

-         * want and it won't create duplicate CSSPropTweens.

-         *

-         * @param {boolean} threeD if true, it should apply 3D tweens (otherwise, just 2D ones are fine and typically faster)

-         */

-        p._enableTransforms = function(threeD) {

-            this._transformType = (threeD || this._transformType === 3) ? 3 : 2;

-            this._transform = this._transform || _getTransform(this._target, _cs, true); //ensures that the element has a _gsTransform property with the appropriate values.

-        };

-

-        var lazySet = function(v) {

-            this.t[this.p] = this.e;

-            this.data._linkCSSP(this, this._next, null, true); //we purposefully keep this._next even though it'd make sense to null it, but this is a performance optimization, as this happens during the while (pt) {} loop in setRatio() at the bottom of which it sets pt = pt._next, so if we null it, the linked list will be broken in that loop.

-        };

-        /** @private Gives us a way to set a value on the first render (and only the first render). **/

-        p._addLazySet = function(t, p, v) {

-            var pt = this._firstPT = new CSSPropTween(t, p, 0, 0, this._firstPT, 2);

-            pt.e = v;

-            pt.setRatio = lazySet;

-            pt.data = this;

-        };

-

-        /** @private **/

-        p._linkCSSP = function(pt, next, prev, remove) {

-            if (pt) {

-                if (next) {

-                    next._prev = pt;

-                }

-                if (pt._next) {

-                    pt._next._prev = pt._prev;

-                }

-                if (pt._prev) {

-                    pt._prev._next = pt._next;

-                } else if (this._firstPT === pt) {

-                    this._firstPT = pt._next;

-                    remove = true; //just to prevent resetting this._firstPT 5 lines down in case pt._next is null. (optimized for speed)

-                }

-                if (prev) {

-                    prev._next = pt;

-                } else if (!remove && this._firstPT === null) {

-                    this._firstPT = pt;

-                }

-                pt._next = next;

-                pt._prev = prev;

-            }

-            return pt;

-        };

-

-        //we need to make sure that if alpha or autoAlpha is killed, opacity is too. And autoAlpha affects the "visibility" property.

-        p._kill = function(lookup) {

-            var copy = lookup,

-                pt, p, xfirst;

-            if (lookup.autoAlpha || lookup.alpha) {

-                copy = {};

-                for (p in lookup) { //copy the lookup so that we're not changing the original which may be passed elsewhere.

-                    copy[p] = lookup[p];

-                }

-                copy.opacity = 1;

-                if (copy.autoAlpha) {

-                    copy.visibility = 1;

-                }

-            }

-            if (lookup.className && (pt = this._classNamePT)) { //for className tweens, we need to kill any associated CSSPropTweens too; a linked list starts at the className's "xfirst".

-                xfirst = pt.xfirst;

-                if (xfirst && xfirst._prev) {

-                    this._linkCSSP(xfirst._prev, pt._next, xfirst._prev._prev); //break off the prev

-                } else if (xfirst === this._firstPT) {

-                    this._firstPT = pt._next;

-                }

-                if (pt._next) {

-                    this._linkCSSP(pt._next, pt._next._next, xfirst._prev);

-                }

-                this._classNamePT = null;

-            }

-            return TweenPlugin.prototype._kill.call(this, copy);

-        };

-

-

-

-        //used by cascadeTo() for gathering all the style properties of each child element into an array for comparison.

-        var _getChildStyles = function(e, props, targets) {

-                var children, i, child, type;

-                if (e.slice) {

-                    i = e.length;

-                    while (--i > -1) {

-                        _getChildStyles(e[i], props, targets);

-                    }

-                    return;

-                }

-                children = e.childNodes;

-                i = children.length;

-                while (--i > -1) {

-                    child = children[i];

-                    type = child.type;

-                    if (child.style) {

-                        props.push(_getAllStyles(child));

-                        if (targets) {

-                            targets.push(child);

-                        }

-                    }

-                    if ((type === 1 || type === 9 || type === 11) && child.childNodes.length) {

-                        _getChildStyles(child, props, targets);

-                    }

-                }

-            };

-

-        /**

-         * Typically only useful for className tweens that may affect child elements, this method creates a TweenLite

-         * and then compares the style properties of all the target's child elements at the tween's start and end, and

-         * if any are different, it also creates tweens for those and returns an array containing ALL of the resulting

-         * tweens (so that you can easily add() them to a TimelineLite, for example). The reason this functionality is

-         * wrapped into a separate static method of CSSPlugin instead of being integrated into all regular className tweens

-         * is because it creates entirely new tweens that may have completely different targets than the original tween,

-         * so if they were all lumped into the original tween instance, it would be inconsistent with the rest of the API

-         * and it would create other problems. For example:

-         *  - If I create a tween of elementA, that tween instance may suddenly change its target to include 50 other elements (unintuitive if I specifically defined the target I wanted)

-         *  - We can't just create new independent tweens because otherwise, what happens if the original/parent tween is reversed or pause or dropped into a TimelineLite for tight control? You'd expect that tween's behavior to affect all the others.

-         *  - Analyzing every style property of every child before and after the tween is an expensive operation when there are many children, so this behavior shouldn't be imposed on all className tweens by default, especially since it's probably rare that this extra functionality is needed.

-         *

-         * @param {Object} target object to be tweened

-         * @param {number} Duration in seconds (or frames for frames-based tweens)

-         * @param {Object} Object containing the end values, like {className:"newClass", ease:Linear.easeNone}

-         * @return {Array} An array of TweenLite instances

-         */

-        CSSPlugin.cascadeTo = function(target, duration, vars) {

-            var tween = TweenLite.to(target, duration, vars),

-                results = [tween],

-                b = [],

-                e = [],

-                targets = [],

-                _reservedProps = TweenLite._internals.reservedProps,

-                i, difs, p;

-            target = tween._targets || tween.target;

-            _getChildStyles(target, b, targets);

-            tween.render(duration, true);

-            _getChildStyles(target, e);

-            tween.render(0, true);

-            tween._enabled(true);

-            i = targets.length;

-            while (--i > -1) {

-                difs = _cssDif(targets[i], b[i], e[i]);

-                if (difs.firstMPT) {

-                    difs = difs.difs;

-                    for (p in vars) {

-                        if (_reservedProps[p]) {

-                            difs[p] = vars[p];

-                        }

-                    }

-                    results.push( TweenLite.to(targets[i], duration, difs) );

-                }

-            }

-            return results;

-        };

-

-        TweenPlugin.activate([CSSPlugin]);

-        return CSSPlugin;

-

-    }, true);

-

-    

-    

-    

-    

-    

-    

-    

-    

-    

-    

-/*

- * ----------------------------------------------------------------

- * RoundPropsPlugin

- * ----------------------------------------------------------------

- */

-    (function() {

-

-        var RoundPropsPlugin = window._gsDefine.plugin({

-                propName: "roundProps",

-                priority: -1,

-                API: 2,

-

-                //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.

-                init: function(target, value, tween) {

-                    this._tween = tween;

-                    return true;

-                }

-

-            }),

-            p = RoundPropsPlugin.prototype;

-

-        p._onInitAllProps = function() {

-            var tween = this._tween,

-                rp = (tween.vars.roundProps instanceof Array) ? tween.vars.roundProps : tween.vars.roundProps.split(","),

-                i = rp.length,

-                lookup = {},

-                rpt = tween._propLookup.roundProps,

-                prop, pt, next;

-            while (--i > -1) {

-                lookup[rp[i]] = 1;

-            }

-            i = rp.length;

-            while (--i > -1) {

-                prop = rp[i];

-                pt = tween._firstPT;

-                while (pt) {

-                    next = pt._next; //record here, because it may get removed

-                    if (pt.pg) {

-                        pt.t._roundProps(lookup, true);

-                    } else if (pt.n === prop) {

-                        this._add(pt.t, prop, pt.s, pt.c);

-                        //remove from linked list

-                        if (next) {

-                            next._prev = pt._prev;

-                        }

-                        if (pt._prev) {

-                            pt._prev._next = next;

-                        } else if (tween._firstPT === pt) {

-                            tween._firstPT = next;

-                        }

-                        pt._next = pt._prev = null;

-                        tween._propLookup[prop] = rpt;

-                    }

-                    pt = next;

-                }

-            }

-            return false;

-        };

-

-        p._add = function(target, p, s, c) {

-            this._addTween(target, p, s, s + c, p, true);

-            this._overwriteProps.push(p);

-        };

-

-    }());

-

-

-

-

-

-

-

-

-

-

-/*

- * ----------------------------------------------------------------

- * AttrPlugin

- * ----------------------------------------------------------------

- */

-    window._gsDefine.plugin({

-        propName: "attr",

-        API: 2,

-        version: "0.3.2",

-

-        //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.

-        init: function(target, value, tween) {

-            var p, start, end;

-            if (typeof(target.setAttribute) !== "function") {

-                return false;

-            }

-            this._target = target;

-            this._proxy = {};

-            this._start = {}; // we record start and end values exactly as they are in case they're strings (not numbers) - we need to be able to revert to them cleanly.

-            this._end = {};

-            for (p in value) {

-                this._start[p] = this._proxy[p] = start = target.getAttribute(p);

-                end = this._addTween(this._proxy, p, parseFloat(start), value[p], p);

-                this._end[p] = end ? end.s + end.c : value[p];

-                this._overwriteProps.push(p);

-            }

-            return true;

-        },

-

-        //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)

-        set: function(ratio) {

-            this._super.setRatio.call(this, ratio);

-            var props = this._overwriteProps,

-                i = props.length,

-                lookup = (ratio === 1) ? this._end : ratio ? this._proxy : this._start,

-                p;

-            while (--i > -1) {

-                p = props[i];

-                this._target.setAttribute(p, lookup[p] + "");

-            }

-        }

-

-    });

-

-

-

-

-

-

-

-

-

-

-/*

- * ----------------------------------------------------------------

- * DirectionalRotationPlugin

- * ----------------------------------------------------------------

- */

-    window._gsDefine.plugin({

-        propName: "directionalRotation",

-        API: 2,

-        version: "0.2.0",

-

-        //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.

-        init: function(target, value, tween) {

-            if (typeof(value) !== "object") {

-                value = {rotation:value};

-            }

-            this.finals = {};

-            var cap = (value.useRadians === true) ? Math.PI * 2 : 360,

-                min = 0.000001,

-                p, v, start, end, dif, split;

-            for (p in value) {

-                if (p !== "useRadians") {

-                    split = (value[p] + "").split("_");

-                    v = split[0];

-                    start = parseFloat( (typeof(target[p]) !== "function") ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]() );

-                    end = this.finals[p] = (typeof(v) === "string" && v.charAt(1) === "=") ? start + parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : Number(v) || 0;

-                    dif = end - start;

-                    if (split.length) {

-                        v = split.join("_");

-                        if (v.indexOf("short") !== -1) {

-                            dif = dif % cap;

-                            if (dif !== dif % (cap / 2)) {

-                                dif = (dif < 0) ? dif + cap : dif - cap;

-                            }

-                        }

-                        if (v.indexOf("_cw") !== -1 && dif < 0) {

-                            dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;

-                        } else if (v.indexOf("ccw") !== -1 && dif > 0) {

-                            dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;

-                        }

-                    }

-                    if (dif > min || dif < -min) {

-                        this._addTween(target, p, start, start + dif, p);

-                        this._overwriteProps.push(p);

-                    }

-                }

-            }

-            return true;

-        },

-

-        //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)

-        set: function(ratio) {

-            var pt;

-            if (ratio !== 1) {

-                this._super.setRatio.call(this, ratio);

-            } else {

-                pt = this._firstPT;

-                while (pt) {

-                    if (pt.f) {

-                        pt.t[pt.p](this.finals[pt.p]);

-                    } else {

-                        pt.t[pt.p] = this.finals[pt.p];

-                    }

-                    pt = pt._next;

-                }

-            }

-        }

-

-    })._autoCSS = true;

-

-

-

-

-

-

-

-    

-    

-    

-    

-/*

- * ----------------------------------------------------------------

- * EasePack

- * ----------------------------------------------------------------

- */

-    window._gsDefine("easing.Back", ["easing.Ease"], function(Ease) {

-        

-        var w = (window.GreenSockGlobals || window),

-            gs = w.com.greensock,

-            _2PI = Math.PI * 2,

-            _HALF_PI = Math.PI / 2,

-            _class = gs._class,

-            _create = function(n, f) {

-                var C = _class("easing." + n, function(){}, true),

-                    p = C.prototype = new Ease();

-                p.constructor = C;

-                p.getRatio = f;

-                return C;

-            },

-            _easeReg = Ease.register || function(){}, //put an empty function in place just as a safety measure in case someone loads an OLD version of TweenLite.js where Ease.register doesn't exist.

-            _wrap = function(name, EaseOut, EaseIn, EaseInOut, aliases) {

-                var C = _class("easing."+name, {

-                    easeOut:new EaseOut(),

-                    easeIn:new EaseIn(),

-                    easeInOut:new EaseInOut()

-                }, true);

-                _easeReg(C, name);

-                return C;

-            },

-            EasePoint = function(time, value, next) {

-                this.t = time;

-                this.v = value;

-                if (next) {

-                    this.next = next;

-                    next.prev = this;

-                    this.c = next.v - value;

-                    this.gap = next.t - time;

-                }

-            },

-

-            //Back

-            _createBack = function(n, f) {

-                var C = _class("easing." + n, function(overshoot) {

-                        this._p1 = (overshoot || overshoot === 0) ? overshoot : 1.70158;

-                        this._p2 = this._p1 * 1.525;

-                    }, true),

-                    p = C.prototype = new Ease();

-                p.constructor = C;

-                p.getRatio = f;

-                p.config = function(overshoot) {

-                    return new C(overshoot);

-                };

-                return C;

-            },

-

-            Back = _wrap("Back",

-                _createBack("BackOut", function(p) {

-                    return ((p = p - 1) * p * ((this._p1 + 1) * p + this._p1) + 1);

-                }),

-                _createBack("BackIn", function(p) {

-                    return p * p * ((this._p1 + 1) * p - this._p1);

-                }),

-                _createBack("BackInOut", function(p) {

-                    return ((p *= 2) < 1) ? 0.5 * p * p * ((this._p2 + 1) * p - this._p2) : 0.5 * ((p -= 2) * p * ((this._p2 + 1) * p + this._p2) + 2);

-                })

-            ),

-

-

-            //SlowMo

-            SlowMo = _class("easing.SlowMo", function(linearRatio, power, yoyoMode) {

-                power = (power || power === 0) ? power : 0.7;

-                if (linearRatio == null) {

-                    linearRatio = 0.7;

-                } else if (linearRatio > 1) {

-                    linearRatio = 1;

-                }

-                this._p = (linearRatio !== 1) ? power : 0;

-                this._p1 = (1 - linearRatio) / 2;

-                this._p2 = linearRatio;

-                this._p3 = this._p1 + this._p2;

-                this._calcEnd = (yoyoMode === true);

-            }, true),

-            p = SlowMo.prototype = new Ease(),

-            SteppedEase, RoughEase, _createElastic;

-

-        p.constructor = SlowMo;

-        p.getRatio = function(p) {

-            var r = p + (0.5 - p) * this._p;

-            if (p < this._p1) {

-                return this._calcEnd ? 1 - ((p = 1 - (p / this._p1)) * p) : r - ((p = 1 - (p / this._p1)) * p * p * p * r);

-            } else if (p > this._p3) {

-                return this._calcEnd ? 1 - (p = (p - this._p3) / this._p1) * p : r + ((p - r) * (p = (p - this._p3) / this._p1) * p * p * p);

-            }

-            return this._calcEnd ? 1 : r;

-        };

-        SlowMo.ease = new SlowMo(0.7, 0.7);

-

-        p.config = SlowMo.config = function(linearRatio, power, yoyoMode) {

-            return new SlowMo(linearRatio, power, yoyoMode);

-        };

-

-

-        //SteppedEase

-        SteppedEase = _class("easing.SteppedEase", function(steps) {

-                steps = steps || 1;

-                this._p1 = 1 / steps;

-                this._p2 = steps + 1;

-            }, true);

-        p = SteppedEase.prototype = new Ease();

-        p.constructor = SteppedEase;

-        p.getRatio = function(p) {

-            if (p < 0) {

-                p = 0;

-            } else if (p >= 1) {

-                p = 0.999999999;

-            }

-            return ((this._p2 * p) >> 0) * this._p1;

-        };

-        p.config = SteppedEase.config = function(steps) {

-            return new SteppedEase(steps);

-        };

-

-

-        //RoughEase

-        RoughEase = _class("easing.RoughEase", function(vars) {

-            vars = vars || {};

-            var taper = vars.taper || "none",

-                a = [],

-                cnt = 0,

-                points = (vars.points || 20) | 0,

-                i = points,

-                randomize = (vars.randomize !== false),

-                clamp = (vars.clamp === true),

-                template = (vars.template instanceof Ease) ? vars.template : null,

-                strength = (typeof(vars.strength) === "number") ? vars.strength * 0.4 : 0.4,

-                x, y, bump, invX, obj, pnt;

-            while (--i > -1) {

-                x = randomize ? Math.random() : (1 / points) * i;

-                y = template ? template.getRatio(x) : x;

-                if (taper === "none") {

-                    bump = strength;

-                } else if (taper === "out") {

-                    invX = 1 - x;

-                    bump = invX * invX * strength;

-                } else if (taper === "in") {

-                    bump = x * x * strength;

-                } else if (x < 0.5) {  //"both" (start)

-                    invX = x * 2;

-                    bump = invX * invX * 0.5 * strength;

-                } else {                //"both" (end)

-                    invX = (1 - x) * 2;

-                    bump = invX * invX * 0.5 * strength;

-                }

-                if (randomize) {

-                    y += (Math.random() * bump) - (bump * 0.5);

-                } else if (i % 2) {

-                    y += bump * 0.5;

-                } else {

-                    y -= bump * 0.5;

-                }

-                if (clamp) {

-                    if (y > 1) {

-                        y = 1;

-                    } else if (y < 0) {

-                        y = 0;

-                    }

-                }

-                a[cnt++] = {x:x, y:y};

-            }

-            a.sort(function(a, b) {

-                return a.x - b.x;

-            });

-

-            pnt = new EasePoint(1, 1, null);

-            i = points;

-            while (--i > -1) {

-                obj = a[i];

-                pnt = new EasePoint(obj.x, obj.y, pnt);

-            }

-

-            this._prev = new EasePoint(0, 0, (pnt.t !== 0) ? pnt : pnt.next);

-        }, true);

-        p = RoughEase.prototype = new Ease();

-        p.constructor = RoughEase;

-        p.getRatio = function(p) {

-            var pnt = this._prev;

-            if (p > pnt.t) {

-                while (pnt.next && p >= pnt.t) {

-                    pnt = pnt.next;

-                }

-                pnt = pnt.prev;

-            } else {

-                while (pnt.prev && p <= pnt.t) {

-                    pnt = pnt.prev;

-                }

-            }

-            this._prev = pnt;

-            return (pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c);

-        };

-        p.config = function(vars) {

-            return new RoughEase(vars);

-        };

-        RoughEase.ease = new RoughEase();

-

-

-        //Bounce

-        _wrap("Bounce",

-            _create("BounceOut", function(p) {

-                if (p < 1 / 2.75) {

-                    return 7.5625 * p * p;

-                } else if (p < 2 / 2.75) {

-                    return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;

-                } else if (p < 2.5 / 2.75) {

-                    return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;

-                }

-                return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;

-            }),

-            _create("BounceIn", function(p) {

-                if ((p = 1 - p) < 1 / 2.75) {

-                    return 1 - (7.5625 * p * p);

-                } else if (p < 2 / 2.75) {

-                    return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75);

-                } else if (p < 2.5 / 2.75) {

-                    return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375);

-                }

-                return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375);

-            }),

-            _create("BounceInOut", function(p) {

-                var invert = (p < 0.5);

-                if (invert) {

-                    p = 1 - (p * 2);

-                } else {

-                    p = (p * 2) - 1;

-                }

-                if (p < 1 / 2.75) {

-                    p = 7.5625 * p * p;

-                } else if (p < 2 / 2.75) {

-                    p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;

-                } else if (p < 2.5 / 2.75) {

-                    p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;

-                } else {

-                    p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;

-                }

-                return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5;

-            })

-        );

-

-

-        //CIRC

-        _wrap("Circ",

-            _create("CircOut", function(p) {

-                return Math.sqrt(1 - (p = p - 1) * p);

-            }),

-            _create("CircIn", function(p) {

-                return -(Math.sqrt(1 - (p * p)) - 1);

-            }),

-            _create("CircInOut", function(p) {

-                return ((p*=2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1);

-            })

-        );

-

-

-        //Elastic

-        _createElastic = function(n, f, def) {

-            var C = _class("easing." + n, function(amplitude, period) {

-                    this._p1 = amplitude || 1;

-                    this._p2 = period || def;

-                    this._p3 = this._p2 / _2PI * (Math.asin(1 / this._p1) || 0);

-                }, true),

-                p = C.prototype = new Ease();

-            p.constructor = C;

-            p.getRatio = f;

-            p.config = function(amplitude, period) {

-                return new C(amplitude, period);

-            };

-            return C;

-        };

-        _wrap("Elastic",

-            _createElastic("ElasticOut", function(p) {

-                return this._p1 * Math.pow(2, -10 * p) * Math.sin( (p - this._p3) * _2PI / this._p2 ) + 1;

-            }, 0.3),

-            _createElastic("ElasticIn", function(p) {

-                return -(this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * _2PI / this._p2 ));

-            }, 0.3),

-            _createElastic("ElasticInOut", function(p) {

-                return ((p *= 2) < 1) ? -0.5 * (this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * _2PI / this._p2)) : this._p1 * Math.pow(2, -10 *(p -= 1)) * Math.sin( (p - this._p3) * _2PI / this._p2 ) *0.5 + 1;

-            }, 0.45)

-        );

-

-

-        //Expo

-        _wrap("Expo",

-            _create("ExpoOut", function(p) {

-                return 1 - Math.pow(2, -10 * p);

-            }),

-            _create("ExpoIn", function(p) {

-                return Math.pow(2, 10 * (p - 1)) - 0.001;

-            }),

-            _create("ExpoInOut", function(p) {

-                return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));

-            })

-        );

-

-

-        //Sine

-        _wrap("Sine",

-            _create("SineOut", function(p) {

-                return Math.sin(p * _HALF_PI);

-            }),

-            _create("SineIn", function(p) {

-                return -Math.cos(p * _HALF_PI) + 1;

-            }),

-            _create("SineInOut", function(p) {

-                return -0.5 * (Math.cos(Math.PI * p) - 1);

-            })

-        );

-

-        _class("easing.EaseLookup", {

-                find:function(s) {

-                    return Ease.map[s];

-                }

-            }, true);

-

-        //register the non-standard eases

-        _easeReg(w.SlowMo, "SlowMo", "ease,");

-        _easeReg(RoughEase, "RoughEase", "ease,");

-        _easeReg(SteppedEase, "SteppedEase", "ease,");

-

-        return Back;

-        

-    }, true);

-

-

-}); 

-

-

-

-

-

-

-

-

-

-

-

-/*

- * ----------------------------------------------------------------

- * Base classes like TweenLite, SimpleTimeline, Ease, Ticker, etc.

- * ----------------------------------------------------------------

- */

-(function(window) {

-

-        "use strict";

-        var _globals = window.GreenSockGlobals || window;

-        if (_globals.TweenLite) {

-            return; //in case the core set of classes is already loaded, don't instantiate twice.

-        }

-        var _namespace = function(ns) {

-                var a = ns.split("."),

-                    p = _globals, i;

-                for (i = 0; i < a.length; i++) {

-                    p[a[i]] = p = p[a[i]] || {};

-                }

-                return p;

-            },

-            gs = _namespace("com.greensock"),

-            _tinyNum = 0.0000000001,

-            _slice = [].slice,

-            _emptyFunc = function() {},

-            _isArray = (function() { //works around issues in iframe environments where the Array global isn't shared, thus if the object originates in a different window/iframe, "(obj instanceof Array)" will evaluate false. We added some speed optimizations to avoid Object.prototype.toString.call() unless it's absolutely necessary because it's VERY slow (like 20x slower)

-                var toString = Object.prototype.toString,

-                    array = toString.call([]);

-                return function(obj) {

-                    return obj != null && (obj instanceof Array || (typeof(obj) === "object" && !!obj.push && toString.call(obj) === array));

-                };

-            }()),

-            a, i, p, _ticker, _tickerActive,

-            _defLookup = {},

-

-            /**

-             * @constructor

-             * Defines a GreenSock class, optionally with an array of dependencies that must be instantiated first and passed into the definition.

-             * This allows users to load GreenSock JS files in any order even if they have interdependencies (like CSSPlugin extends TweenPlugin which is

-             * inside TweenLite.js, but if CSSPlugin is loaded first, it should wait to run its code until TweenLite.js loads and instantiates TweenPlugin

-             * and then pass TweenPlugin to CSSPlugin's definition). This is all done automatically and internally.

-             *

-             * Every definition will be added to a "com.greensock" global object (typically window, but if a window.GreenSockGlobals object is found,

-             * it will go there as of v1.7). For example, TweenLite will be found at window.com.greensock.TweenLite and since it's a global class that should be available anywhere,

-             * it is ALSO referenced at window.TweenLite. However some classes aren't considered global, like the base com.greensock.core.Animation class, so

-             * those will only be at the package like window.com.greensock.core.Animation. Again, if you define a GreenSockGlobals object on the window, everything

-             * gets tucked neatly inside there instead of on the window directly. This allows you to do advanced things like load multiple versions of GreenSock

-             * files and put them into distinct objects (imagine a banner ad uses a newer version but the main site uses an older one). In that case, you could

-             * sandbox the banner one like:

-             *

-             * <script>

-             *     var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.

-             * </script>

-             * <script src="js/greensock/v1.7/TweenMax.js"></script>

-             * <script>

-             *     window.GreenSockGlobals = null; //reset it back to null so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)

-             * </script>

-             * <script src="js/greensock/v1.6/TweenMax.js"></script>

-             * <script>

-             *     gs.TweenLite.to(...); //would use v1.7

-             *     TweenLite.to(...); //would use v1.6

-             * </script>

-             *

-             * @param {!string} ns The namespace of the class definition, leaving off "com.greensock." as that's assumed. For example, "TweenLite" or "plugins.CSSPlugin" or "easing.Back".

-             * @param {!Array.<string>} dependencies An array of dependencies (described as their namespaces minus "com.greensock." prefix). For example ["TweenLite","plugins.TweenPlugin","core.Animation"]

-             * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.

-             * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)

-             */

-            Definition = function(ns, dependencies, func, global) {

-                this.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses

-                _defLookup[ns] = this;

-                this.gsClass = null;

-                this.func = func;

-                var _classes = [];

-                this.check = function(init) {

-                    var i = dependencies.length,

-                        missing = i,

-                        cur, a, n, cl;

-                    while (--i > -1) {

-                        if ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {

-                            _classes[i] = cur.gsClass;

-                            missing--;

-                        } else if (init) {

-                            cur.sc.push(this);

-                        }

-                    }

-                    if (missing === 0 && func) {

-                        a = ("com.greensock." + ns).split(".");

-                        n = a.pop();

-                        cl = _namespace(a.join("."))[n] = this.gsClass = func.apply(func, _classes);

-

-                        //exports to multiple environments

-                        if (global) {

-                            _globals[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)

-                            if (typeof(define) === "function" && define.amd){ //AMD

-                                define((window.GreenSockAMDPath ? window.GreenSockAMDPath + "/" : "") + ns.split(".").join("/"), [], function() { return cl; });

-                            } else if (typeof(module) !== "undefined" && module.exports){ //node

-                                module.exports = cl;

-                            }

-                        }

-                        for (i = 0; i < this.sc.length; i++) {

-                            this.sc[i].check();

-                        }

-                    }

-                };

-                this.check(true);

-            },

-

-            //used to create Definition instances (which basically registers a class that has dependencies).

-            _gsDefine = window._gsDefine = function(ns, dependencies, func, global) {

-                return new Definition(ns, dependencies, func, global);

-            },

-

-            //a quick way to create a class that doesn't have any dependencies. Returns the class, but first registers it in the GreenSock namespace so that other classes can grab it (other classes might be dependent on the class).

-            _class = gs._class = function(ns, func, global) {

-                func = func || function() {};

-                _gsDefine(ns, [], function(){ return func; }, global);

-                return func;

-            };

-

-        _gsDefine.globals = _globals;

-

-

-

-/*

- * ----------------------------------------------------------------

- * Ease

- * ----------------------------------------------------------------

- */

-        var _baseParams = [0, 0, 1, 1],

-            _blankArray = [],

-            Ease = _class("easing.Ease", function(func, extraParams, type, power) {

-                this._func = func;

-                this._type = type || 0;

-                this._power = power || 0;

-                this._params = extraParams ? _baseParams.concat(extraParams) : _baseParams;

-            }, true),

-            _easeMap = Ease.map = {},

-            _easeReg = Ease.register = function(ease, names, types, create) {

-                var na = names.split(","),

-                    i = na.length,

-                    ta = (types || "easeIn,easeOut,easeInOut").split(","),

-                    e, name, j, type;

-                while (--i > -1) {

-                    name = na[i];

-                    e = create ? _class("easing."+name, null, true) : gs.easing[name] || {};

-                    j = ta.length;

-                    while (--j > -1) {

-                        type = ta[j];

-                        _easeMap[name + "." + type] = _easeMap[type + name] = e[type] = ease.getRatio ? ease : ease[type] || new ease();

-                    }

-                }

-            };

-

-        p = Ease.prototype;

-        p._calcEnd = false;

-        p.getRatio = function(p) {

-            if (this._func) {

-                this._params[0] = p;

-                return this._func.apply(null, this._params);

-            }

-            var t = this._type,

-                pw = this._power,

-                r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2;

-            if (pw === 1) {

-                r *= r;

-            } else if (pw === 2) {

-                r *= r * r;

-            } else if (pw === 3) {

-                r *= r * r * r;

-            } else if (pw === 4) {

-                r *= r * r * r * r;

-            }

-            return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2);

-        };

-

-        //create all the standard eases like Linear, Quad, Cubic, Quart, Quint, Strong, Power0, Power1, Power2, Power3, and Power4 (each with easeIn, easeOut, and easeInOut)

-        a = ["Linear","Quad","Cubic","Quart","Quint,Strong"];

-        i = a.length;

-        while (--i > -1) {

-            p = a[i]+",Power"+i;

-            _easeReg(new Ease(null,null,1,i), p, "easeOut", true);

-            _easeReg(new Ease(null,null,2,i), p, "easeIn" + ((i === 0) ? ",easeNone" : ""));

-            _easeReg(new Ease(null,null,3,i), p, "easeInOut");

-        }

-        _easeMap.linear = gs.easing.Linear.easeIn;

-        _easeMap.swing = gs.easing.Quad.easeInOut; //for jQuery folks

-

-

-/*

- * ----------------------------------------------------------------

- * EventDispatcher

- * ----------------------------------------------------------------

- */

-        var EventDispatcher = _class("events.EventDispatcher", function(target) {

-            this._listeners = {};

-            this._eventTarget = target || this;

-        });

-        p = EventDispatcher.prototype;

-

-        p.addEventListener = function(type, callback, scope, useParam, priority) {

-            priority = priority || 0;

-            var list = this._listeners[type],

-                index = 0,

-                listener, i;

-            if (list == null) {

-                this._listeners[type] = list = [];

-            }

-            i = list.length;

-            while (--i > -1) {

-                listener = list[i];

-                if (listener.c === callback && listener.s === scope) {

-                    list.splice(i, 1);

-                } else if (index === 0 && listener.pr < priority) {

-                    index = i + 1;

-                }

-            }

-            list.splice(index, 0, {c:callback, s:scope, up:useParam, pr:priority});

-            if (this === _ticker && !_tickerActive) {

-                _ticker.wake();

-            }

-        };

-

-        p.removeEventListener = function(type, callback) {

-            var list = this._listeners[type], i;

-            if (list) {

-                i = list.length;

-                while (--i > -1) {

-                    if (list[i].c === callback) {

-                        list.splice(i, 1);

-                        return;

-                    }

-                }

-            }

-        };

-

-        p.dispatchEvent = function(type) {

-            var list = this._listeners[type],

-                i, t, listener;

-            if (list) {

-                i = list.length;

-                t = this._eventTarget;

-                while (--i > -1) {

-                    listener = list[i];

-                    if (listener.up) {

-                        listener.c.call(listener.s || t, {type:type, target:t});

-                    } else {

-                        listener.c.call(listener.s || t);

-                    }

-                }

-            }

-        };

-

-

-/*

- * ----------------------------------------------------------------

- * Ticker

- * ----------------------------------------------------------------

- */

-        var _reqAnimFrame = window.requestAnimationFrame,

-            _cancelAnimFrame = window.cancelAnimationFrame,

-            _getTime = Date.now || function() {return new Date().getTime();},

-            _lastUpdate = _getTime();

-

-        //now try to determine the requestAnimationFrame and cancelAnimationFrame functions and if none are found, we'll use a setTimeout()/clearTimeout() polyfill.

-        a = ["ms","moz","webkit","o"];

-        i = a.length;

-        while (--i > -1 && !_reqAnimFrame) {

-            _reqAnimFrame = window[a[i] + "RequestAnimationFrame"];

-            _cancelAnimFrame = window[a[i] + "CancelAnimationFrame"] || window[a[i] + "CancelRequestAnimationFrame"];

-        }

-

-        _class("Ticker", function(fps, useRAF) {

-            var _self = this,

-                _startTime = _getTime(),

-                _useRAF = (useRAF !== false && _reqAnimFrame),

-                _lagThreshold = 500,

-                _adjustedLag = 33,

-                _fps, _req, _id, _gap, _nextTime,

-                _tick = function(manual) {

-                    var elapsed = _getTime() - _lastUpdate,

-                        overlap, dispatch;

-                    if (elapsed > _lagThreshold) {

-                        _startTime += elapsed - _adjustedLag;

-                    }

-                    _lastUpdate += elapsed;

-                    _self.time = (_lastUpdate - _startTime) / 1000;

-                    overlap = _self.time - _nextTime;

-                    if (!_fps || overlap > 0 || manual === true) {

-                        _self.frame++;

-                        _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);

-                        dispatch = true;

-                    }

-                    if (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.

-                        _id = _req(_tick);

-                    }

-                    if (dispatch) {

-                        _self.dispatchEvent("tick");

-                    }

-                };

-

-            EventDispatcher.call(_self);

-            _self.time = _self.frame = 0;

-            _self.tick = function() {

-                _tick(true);

-            };

-

-            _self.lagSmoothing = function(threshold, adjustedLag) {

-                _lagThreshold = threshold || (1 / _tinyNum); //zero should be interpreted as basically unlimited

-                _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);

-            };

-

-            _self.sleep = function() {

-                if (_id == null) {

-                    return;

-                }

-                if (!_useRAF || !_cancelAnimFrame) {

-                    clearTimeout(_id);

-                } else {

-                    _cancelAnimFrame(_id);

-                }

-                _req = _emptyFunc;

-                _id = null;

-                if (_self === _ticker) {

-                    _tickerActive = false;

-                }

-            };

-

-            _self.wake = function() {

-                if (_id !== null) {

-                    _self.sleep();

-                } else if (_self.frame > 10) { //don't trigger lagSmoothing if we're just waking up, and make sure that at least 10 frames have elapsed because of the iOS bug that we work around below with the 1.5-second setTimout().

-                    _lastUpdate = _getTime() - _lagThreshold + 5;

-                }

-                _req = (_fps === 0) ? _emptyFunc : (!_useRAF || !_reqAnimFrame) ? function(f) { return setTimeout(f, ((_nextTime - _self.time) * 1000 + 1) | 0); } : _reqAnimFrame;

-                if (_self === _ticker) {

-                    _tickerActive = true;

-                }

-                _tick(2);

-            };

-

-            _self.fps = function(value) {

-                if (!arguments.length) {

-                    return _fps;

-                }

-                _fps = value;

-                _gap = 1 / (_fps || 60);

-                _nextTime = this.time + _gap;

-                _self.wake();

-            };

-

-            _self.useRAF = function(value) {

-                if (!arguments.length) {

-                    return _useRAF;

-                }

-                _self.sleep();

-                _useRAF = value;

-                _self.fps(_fps);

-            };

-            _self.fps(fps);

-

-            //a bug in iOS 6 Safari occasionally prevents the requestAnimationFrame from working initially, so we use a 1.5-second timeout that automatically falls back to setTimeout() if it senses this condition.

-            setTimeout(function() {

-                if (_useRAF && (!_id || _self.frame < 5)) {

-                    _self.useRAF(false);

-                }

-            }, 1500);

-        });

-

-        p = gs.Ticker.prototype = new gs.events.EventDispatcher();

-        p.constructor = gs.Ticker;

-

-

-/*

- * ----------------------------------------------------------------

- * Animation

- * ----------------------------------------------------------------

- */

-        var Animation = _class("core.Animation", function(duration, vars) {

-                this.vars = vars = vars || {};

-                this._duration = this._totalDuration = duration || 0;

-                this._delay = Number(vars.delay) || 0;

-                this._timeScale = 1;

-                this._active = (vars.immediateRender === true);

-                this.data = vars.data;

-                this._reversed = (vars.reversed === true);

-

-                if (!_rootTimeline) {

-                    return;

-                }

-                if (!_tickerActive) { //some browsers (like iOS 6 Safari) shut down JavaScript execution when the tab is disabled and they [occasionally] neglect to start up requestAnimationFrame again when returning - this code ensures that the engine starts up again properly.

-                    _ticker.wake();

-                }

-

-                var tl = this.vars.useFrames ? _rootFramesTimeline : _rootTimeline;

-                tl.add(this, tl._time);

-

-                if (this.vars.paused) {

-                    this.paused(true);

-                }

-            });

-

-        _ticker = Animation.ticker = new gs.Ticker();

-        p = Animation.prototype;

-        p._dirty = p._gc = p._initted = p._paused = false;

-        p._totalTime = p._time = 0;

-        p._rawPrevTime = -1;

-        p._next = p._last = p._onUpdate = p._timeline = p.timeline = null;

-        p._paused = false;

-

-

-        //some browsers (like iOS) occasionally drop the requestAnimationFrame event when the user switches to a different tab and then comes back again, so we use a 2-second setTimeout() to sense if/when that condition occurs and then wake() the ticker.

-        var _checkTimeout = function() {

-                if (_tickerActive && _getTime() - _lastUpdate > 2000) {

-                    _ticker.wake();

-                }

-                setTimeout(_checkTimeout, 2000);

-            };

-        _checkTimeout();

-

-

-        p.play = function(from, suppressEvents) {

-            if (from != null) {

-                this.seek(from, suppressEvents);

-            }

-            return this.reversed(false).paused(false);

-        };

-

-        p.pause = function(atTime, suppressEvents) {

-            if (atTime != null) {

-                this.seek(atTime, suppressEvents);

-            }

-            return this.paused(true);

-        };

-

-        p.resume = function(from, suppressEvents) {

-            if (from != null) {

-                this.seek(from, suppressEvents);

-            }

-            return this.paused(false);

-        };

-

-        p.seek = function(time, suppressEvents) {

-            return this.totalTime(Number(time), suppressEvents !== false);

-        };

-

-        p.restart = function(includeDelay, suppressEvents) {

-            return this.reversed(false).paused(false).totalTime(includeDelay ? -this._delay : 0, (suppressEvents !== false), true);

-        };

-

-        p.reverse = function(from, suppressEvents) {

-            if (from != null) {

-                this.seek((from || this.totalDuration()), suppressEvents);

-            }

-            return this.reversed(true).paused(false);

-        };

-

-        p.render = function(time, suppressEvents, force) {

-            //stub - we override this method in subclasses.

-        };

-

-        p.invalidate = function() {

-            return this;

-        };

-

-        p.isActive = function() {

-            var tl = this._timeline, //the 2 root timelines won't have a _timeline; they're always active.

-                startTime = this._startTime,

-                rawTime;

-            return (!tl || (!this._gc && !this._paused && tl.isActive() && (rawTime = tl.rawTime()) >= startTime && rawTime < startTime + this.totalDuration() / this._timeScale));

-        };

-

-        p._enabled = function (enabled, ignoreTimeline) {

-            if (!_tickerActive) {

-                _ticker.wake();

-            }

-            this._gc = !enabled;

-            this._active = this.isActive();

-            if (ignoreTimeline !== true) {

-                if (enabled && !this.timeline) {

-                    this._timeline.add(this, this._startTime - this._delay);

-                } else if (!enabled && this.timeline) {

-                    this._timeline._remove(this, true);

-                }

-            }

-            return false;

-        };

-

-

-        p._kill = function(vars, target) {

-            return this._enabled(false, false);

-        };

-

-        p.kill = function(vars, target) {

-            this._kill(vars, target);

-            return this;

-        };

-

-        p._uncache = function(includeSelf) {

-            var tween = includeSelf ? this : this.timeline;

-            while (tween) {

-                tween._dirty = true;

-                tween = tween.timeline;

-            }

-            return this;

-        };

-

-        p._swapSelfInParams = function(params) {

-            var i = params.length,

-                copy = params.concat();

-            while (--i > -1) {

-                if (params[i] === "{self}") {

-                    copy[i] = this;

-                }

-            }

-            return copy;

-        };

-

-//----Animation getters/setters --------------------------------------------------------

-

-        p.eventCallback = function(type, callback, params, scope) {

-            if ((type || "").substr(0,2) === "on") {

-                var v = this.vars;

-                if (arguments.length === 1) {

-                    return v[type];

-                }

-                if (callback == null) {

-                    delete v[type];

-                } else {

-                    v[type] = callback;

-                    v[type + "Params"] = (_isArray(params) && params.join("").indexOf("{self}") !== -1) ? this._swapSelfInParams(params) : params;

-                    v[type + "Scope"] = scope;

-                }

-                if (type === "onUpdate") {

-                    this._onUpdate = callback;

-                }

-            }

-            return this;

-        };

-

-        p.delay = function(value) {

-            if (!arguments.length) {

-                return this._delay;

-            }

-            if (this._timeline.smoothChildTiming) {

-                this.startTime( this._startTime + value - this._delay );

-            }

-            this._delay = value;

-            return this;

-        };

-

-        p.duration = function(value) {

-            if (!arguments.length) {

-                this._dirty = false;

-                return this._duration;

-            }

-            this._duration = this._totalDuration = value;

-            this._uncache(true); //true in case it's a TweenMax or TimelineMax that has a repeat - we'll need to refresh the totalDuration.

-            if (this._timeline.smoothChildTiming) if (this._time > 0) if (this._time < this._duration) if (value !== 0) {

-                this.totalTime(this._totalTime * (value / this._duration), true);

-            }

-            return this;

-        };

-

-        p.totalDuration = function(value) {

-            this._dirty = false;

-            return (!arguments.length) ? this._totalDuration : this.duration(value);

-        };

-

-        p.time = function(value, suppressEvents) {

-            if (!arguments.length) {

-                return this._time;

-            }

-            if (this._dirty) {

-                this.totalDuration();

-            }

-            return this.totalTime((value > this._duration) ? this._duration : value, suppressEvents);

-        };

-

-        p.totalTime = function(time, suppressEvents, uncapped) {

-            if (!_tickerActive) {

-                _ticker.wake();

-            }

-            if (!arguments.length) {

-                return this._totalTime;

-            }

-            if (this._timeline) {

-                if (time < 0 && !uncapped) {

-                    time += this.totalDuration();

-                }

-                if (this._timeline.smoothChildTiming) {

-                    if (this._dirty) {

-                        this.totalDuration();

-                    }

-                    var totalDuration = this._totalDuration,

-                        tl = this._timeline;

-                    if (time > totalDuration && !uncapped) {

-                        time = totalDuration;

-                    }

-                    this._startTime = (this._paused ? this._pauseTime : tl._time) - ((!this._reversed ? time : totalDuration - time) / this._timeScale);

-                    if (!tl._dirty) { //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.

-                        this._uncache(false);

-                    }

-                    //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The startTime of that child would get pushed out, but one of the ancestors may have completed.

-                    if (tl._timeline) {

-                        while (tl._timeline) {

-                            if (tl._timeline._time !== (tl._startTime + tl._totalTime) / tl._timeScale) {

-                                tl.totalTime(tl._totalTime, true);

-                            }

-                            tl = tl._timeline;

-                        }

-                    }

-                }

-                if (this._gc) {

-                    this._enabled(true, false);

-                }

-                if (this._totalTime !== time || this._duration === 0) {

-                    this.render(time, suppressEvents, false);

-                    if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.

-                        _lazyRender();

-                    }

-                }

-            }

-            return this;

-        };

-

-        p.progress = p.totalProgress = function(value, suppressEvents) {

-            return (!arguments.length) ? this._time / this.duration() : this.totalTime(this.duration() * value, suppressEvents);

-        };

-

-        p.startTime = function(value) {

-            if (!arguments.length) {

-                return this._startTime;

-            }

-            if (value !== this._startTime) {

-                this._startTime = value;

-                if (this.timeline) if (this.timeline._sortChildren) {

-                    this.timeline.add(this, value - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct.

-                }

-            }

-            return this;

-        };

-

-        p.timeScale = function(value) {

-            if (!arguments.length) {

-                return this._timeScale;

-            }

-            value = value || _tinyNum; //can't allow zero because it'll throw the math off

-            if (this._timeline && this._timeline.smoothChildTiming) {

-                var pauseTime = this._pauseTime,

-                    t = (pauseTime || pauseTime === 0) ? pauseTime : this._timeline.totalTime();

-                this._startTime = t - ((t - this._startTime) * this._timeScale / value);

-            }

-            this._timeScale = value;

-            return this._uncache(false);

-        };

-

-        p.reversed = function(value) {

-            if (!arguments.length) {

-                return this._reversed;

-            }

-            if (value != this._reversed) {

-                this._reversed = value;

-                this.totalTime(((this._timeline && !this._timeline.smoothChildTiming) ? this.totalDuration() - this._totalTime : this._totalTime), true);

-            }

-            return this;

-        };

-

-        p.paused = function(value) {

-            if (!arguments.length) {

-                return this._paused;

-            }

-            if (value != this._paused) if (this._timeline) {

-                if (!_tickerActive && !value) {

-                    _ticker.wake();

-                }

-                var tl = this._timeline,

-                    raw = tl.rawTime(),

-                    elapsed = raw - this._pauseTime;

-                if (!value && tl.smoothChildTiming) {

-                    this._startTime += elapsed;

-                    this._uncache(false);

-                }

-                this._pauseTime = value ? raw : null;

-                this._paused = value;

-                this._active = this.isActive();

-                if (!value && elapsed !== 0 && this._initted && this.duration()) {

-                    this.render((tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale), true, true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render.

-                }

-            }

-            if (this._gc && !value) {

-                this._enabled(true, false);

-            }

-            return this;

-        };

-

-

-/*

- * ----------------------------------------------------------------

- * SimpleTimeline

- * ----------------------------------------------------------------

- */

-        var SimpleTimeline = _class("core.SimpleTimeline", function(vars) {

-            Animation.call(this, 0, vars);

-            this.autoRemoveChildren = this.smoothChildTiming = true;

-        });

-

-        p = SimpleTimeline.prototype = new Animation();

-        p.constructor = SimpleTimeline;

-        p.kill()._gc = false;

-        p._first = p._last = null;

-        p._sortChildren = false;

-

-        p.add = p.insert = function(child, position, align, stagger) {

-            var prevTween, st;

-            child._startTime = Number(position || 0) + child._delay;

-            if (child._paused) if (this !== child._timeline) { //we only adjust the _pauseTime if it wasn't in this timeline already. Remember, sometimes a tween will be inserted again into the same timeline when its startTime is changed so that the tweens in the TimelineLite/Max are re-ordered properly in the linked list (so everything renders in the proper order).

-                child._pauseTime = child._startTime + ((this.rawTime() - child._startTime) / child._timeScale);

-            }

-            if (child.timeline) {

-                child.timeline._remove(child, true); //removes from existing timeline so that it can be properly added to this one.

-            }

-            child.timeline = child._timeline = this;

-            if (child._gc) {

-                child._enabled(true, true);

-            }

-            prevTween = this._last;

-            if (this._sortChildren) {

-                st = child._startTime;

-                while (prevTween && prevTween._startTime > st) {

-                    prevTween = prevTween._prev;

-                }

-            }

-            if (prevTween) {

-                child._next = prevTween._next;

-                prevTween._next = child;

-            } else {

-                child._next = this._first;

-                this._first = child;

-            }

-            if (child._next) {

-                child._next._prev = child;

-            } else {

-                this._last = child;

-            }

-            child._prev = prevTween;

-            if (this._timeline) {

-                this._uncache(true);

-            }

-            return this;

-        };

-

-        p._remove = function(tween, skipDisable) {

-            if (tween.timeline === this) {

-                if (!skipDisable) {

-                    tween._enabled(false, true);

-                }

-                tween.timeline = null;

-

-                if (tween._prev) {

-                    tween._prev._next = tween._next;

-                } else if (this._first === tween) {

-                    this._first = tween._next;

-                }

-                if (tween._next) {

-                    tween._next._prev = tween._prev;

-                } else if (this._last === tween) {

-                    this._last = tween._prev;

-                }

-

-                if (this._timeline) {

-                    this._uncache(true);

-                }

-            }

-            return this;

-        };

-

-        p.render = function(time, suppressEvents, force) {

-            var tween = this._first,

-                next;

-            this._totalTime = this._time = this._rawPrevTime = time;

-            while (tween) {

-                next = tween._next; //record it here because the value could change after rendering...

-                if (tween._active || (time >= tween._startTime && !tween._paused)) {

-                    if (!tween._reversed) {

-                        tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);

-                    } else {

-                        tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);

-                    }

-                }

-                tween = next;

-            }

-        };

-

-        p.rawTime = function() {

-            if (!_tickerActive) {

-                _ticker.wake();

-            }

-            return this._totalTime;

-        };

-

-/*

- * ----------------------------------------------------------------

- * TweenLite

- * ----------------------------------------------------------------

- */

-        var TweenLite = _class("TweenLite", function(target, duration, vars) {

-                Animation.call(this, duration, vars);

-                this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)

-

-                if (target == null) {

-                    throw "Cannot tween a null target.";

-                }

-

-                this.target = target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;

-

-                var isSelector = (target.jquery || (target.length && target !== window && target[0] && (target[0] === window || (target[0].nodeType && target[0].style && !target.nodeType)))),

-                    overwrite = this.vars.overwrite,

-                    i, targ, targets;

-

-                this._overwrite = overwrite = (overwrite == null) ? _overwriteLookup[TweenLite.defaultOverwrite] : (typeof(overwrite) === "number") ? overwrite >> 0 : _overwriteLookup[overwrite];

-

-                if ((isSelector || target instanceof Array || (target.push && _isArray(target))) && typeof(target[0]) !== "number") {

-                    this._targets = targets = _slice.call(target, 0);

-                    this._propLookup = [];

-                    this._siblings = [];

-                    for (i = 0; i < targets.length; i++) {

-                        targ = targets[i];

-                        if (!targ) {

-                            targets.splice(i--, 1);

-                            continue;

-                        } else if (typeof(targ) === "string") {

-                            targ = targets[i--] = TweenLite.selector(targ); //in case it's an array of strings

-                            if (typeof(targ) === "string") {

-                                targets.splice(i+1, 1); //to avoid an endless loop (can't imagine why the selector would return a string, but just in case)

-                            }

-                            continue;

-                        } else if (targ.length && targ !== window && targ[0] && (targ[0] === window || (targ[0].nodeType && targ[0].style && !targ.nodeType))) { //in case the user is passing in an array of selector objects (like jQuery objects), we need to check one more level and pull things out if necessary. Also note that <select> elements pass all the criteria regarding length and the first child having style, so we must also check to ensure the target isn't an HTML node itself.

-                            targets.splice(i--, 1);

-                            this._targets = targets = targets.concat(_slice.call(targ, 0));

-                            continue;

-                        }

-                        this._siblings[i] = _register(targ, this, false);

-                        if (overwrite === 1) if (this._siblings[i].length > 1) {

-                            _applyOverwrite(targ, this, null, 1, this._siblings[i]);

-                        }

-                    }

-

-                } else {

-                    this._propLookup = {};

-                    this._siblings = _register(target, this, false);

-                    if (overwrite === 1) if (this._siblings.length > 1) {

-                        _applyOverwrite(target, this, null, 1, this._siblings);

-                    }

-                }

-                if (this.vars.immediateRender || (duration === 0 && this._delay === 0 && this.vars.immediateRender !== false)) {

-                    this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)

-                    this.render(-this._delay);

-                }

-            }, true),

-            _isSelector = function(v) {

-                return (v.length && v !== window && v[0] && (v[0] === window || (v[0].nodeType && v[0].style && !v.nodeType))); //we cannot check "nodeType" if the target is window from within an iframe, otherwise it will trigger a security error in some browsers like Firefox.

-            },

-            _autoCSS = function(vars, target) {

-                var css = {},

-                    p;

-                for (p in vars) {

-                    if (!_reservedProps[p] && (!(p in target) || p === "transform" || p === "x" || p === "y" || p === "width" || p === "height" || p === "className" || p === "border") && (!_plugins[p] || (_plugins[p] && _plugins[p]._autoCSS))) { //note: <img> elements contain read-only "x" and "y" properties. We should also prioritize editing css width/height rather than the element's properties.

-                        css[p] = vars[p];

-                        delete vars[p];

-                    }

-                }

-                vars.css = css;

-            };

-

-        p = TweenLite.prototype = new Animation();

-        p.constructor = TweenLite;

-        p.kill()._gc = false;

-

-//----TweenLite defaults, overwrite management, and root updates ----------------------------------------------------

-

-        p.ratio = 0;

-        p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;

-        p._notifyPluginsOfEnabled = p._lazy = false;

-

-        TweenLite.version = "1.12.1";

-        TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);

-        TweenLite.defaultOverwrite = "auto";

-        TweenLite.ticker = _ticker;

-        TweenLite.autoSleep = true;

-        TweenLite.lagSmoothing = function(threshold, adjustedLag) {

-            _ticker.lagSmoothing(threshold, adjustedLag);

-        };

-        TweenLite.selector = window.$ || window.jQuery || function(e) { if (window.$) { TweenLite.selector = window.$; return window.$(e); } return window.document ? window.document.getElementById((e.charAt(0) === "#") ? e.substr(1) : e) : e; };

-

-        var _lazyTweens = [],

-            _lazyLookup = {},

-            _internals = TweenLite._internals = {isArray:_isArray, isSelector:_isSelector, lazyTweens:_lazyTweens}, //gives us a way to expose certain private values to other GreenSock classes without contaminating tha main TweenLite object.

-            _plugins = TweenLite._plugins = {},

-            _tweenLookup = _internals.tweenLookup = {},

-            _tweenLookupNum = 0,

-            _reservedProps = _internals.reservedProps = {ease:1, delay:1, overwrite:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, runBackwards:1, startAt:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, autoCSS:1, lazy:1},

-            _overwriteLookup = {none:0, all:1, auto:2, concurrent:3, allOnStart:4, preexisting:5, "true":1, "false":0},

-            _rootFramesTimeline = Animation._rootFramesTimeline = new SimpleTimeline(),

-            _rootTimeline = Animation._rootTimeline = new SimpleTimeline(),

-            _lazyRender = function() {

-                var i = _lazyTweens.length;

-                _lazyLookup = {};

-                while (--i > -1) {

-                    a = _lazyTweens[i];

-                    if (a && a._lazy !== false) {

-                        a.render(a._lazy, false, true);

-                        a._lazy = false;

-                    }

-                }

-                _lazyTweens.length = 0;

-            };

-

-        _rootTimeline._startTime = _ticker.time;

-        _rootFramesTimeline._startTime = _ticker.frame;

-        _rootTimeline._active = _rootFramesTimeline._active = true;

-        setTimeout(_lazyRender, 1); //on some mobile devices, there isn't a "tick" before code runs which means any lazy renders wouldn't run before the next official "tick".

-

-        Animation._updateRoot = TweenLite.render = function() {

-                var i, a, p;

-                if (_lazyTweens.length) { //if code is run outside of the requestAnimationFrame loop, there may be tweens queued AFTER the engine refreshed, so we need to ensure any pending renders occur before we refresh again.

-                    _lazyRender();

-                }

-                _rootTimeline.render((_ticker.time - _rootTimeline._startTime) * _rootTimeline._timeScale, false, false);

-                _rootFramesTimeline.render((_ticker.frame - _rootFramesTimeline._startTime) * _rootFramesTimeline._timeScale, false, false);

-                if (_lazyTweens.length) {

-                    _lazyRender();

-                }

-                if (!(_ticker.frame % 120)) { //dump garbage every 120 frames...

-                    for (p in _tweenLookup) {

-                        a = _tweenLookup[p].tweens;

-                        i = a.length;

-                        while (--i > -1) {

-                            if (a[i]._gc) {

-                                a.splice(i, 1);

-                            }

-                        }

-                        if (a.length === 0) {

-                            delete _tweenLookup[p];

-                        }

-                    }

-                    //if there are no more tweens in the root timelines, or if they're all paused, make the _timer sleep to reduce load on the CPU slightly

-                    p = _rootTimeline._first;

-                    if (!p || p._paused) if (TweenLite.autoSleep && !_rootFramesTimeline._first && _ticker._listeners.tick.length === 1) {

-                        while (p && p._paused) {

-                            p = p._next;

-                        }

-                        if (!p) {

-                            _ticker.sleep();

-                        }

-                    }

-                }

-            };

-

-        _ticker.addEventListener("tick", Animation._updateRoot);

-

-        var _register = function(target, tween, scrub) {

-                var id = target._gsTweenID, a, i;

-                if (!_tweenLookup[id || (target._gsTweenID = id = "t" + (_tweenLookupNum++))]) {

-                    _tweenLookup[id] = {target:target, tweens:[]};

-                }

-                if (tween) {

-                    a = _tweenLookup[id].tweens;

-                    a[(i = a.length)] = tween;

-                    if (scrub) {

-                        while (--i > -1) {

-                            if (a[i] === tween) {

-                                a.splice(i, 1);

-                            }

-                        }

-                    }

-                }

-                return _tweenLookup[id].tweens;

-            },

-

-            _applyOverwrite = function(target, tween, props, mode, siblings) {

-                var i, changed, curTween, l;

-                if (mode === 1 || mode >= 4) {

-                    l = siblings.length;

-                    for (i = 0; i < l; i++) {

-                        if ((curTween = siblings[i]) !== tween) {

-                            if (!curTween._gc) if (curTween._enabled(false, false)) {

-                                changed = true;

-                            }

-                        } else if (mode === 5) {

-                            break;

-                        }

-                    }

-                    return changed;

-                }

-                //NOTE: Add 0.0000000001 to overcome floating point errors that can cause the startTime to be VERY slightly off (when a tween's time() is set for example)

-                var startTime = tween._startTime + _tinyNum,

-                    overlaps = [],

-                    oCount = 0,

-                    zeroDur = (tween._duration === 0),

-                    globalStart;

-                i = siblings.length;

-                while (--i > -1) {

-                    if ((curTween = siblings[i]) === tween || curTween._gc || curTween._paused) {

-                        //ignore

-                    } else if (curTween._timeline !== tween._timeline) {

-                        globalStart = globalStart || _checkOverlap(tween, 0, zeroDur);

-                        if (_checkOverlap(curTween, globalStart, zeroDur) === 0) {

-                            overlaps[oCount++] = curTween;

-                        }

-                    } else if (curTween._startTime <= startTime) if (curTween._startTime + curTween.totalDuration() / curTween._timeScale > startTime) if (!((zeroDur || !curTween._initted) && startTime - curTween._startTime <= 0.0000000002)) {

-                        overlaps[oCount++] = curTween;

-                    }

-                }

-

-                i = oCount;

-                while (--i > -1) {

-                    curTween = overlaps[i];

-                    if (mode === 2) if (curTween._kill(props, target)) {

-                        changed = true;

-                    }

-                    if (mode !== 2 || (!curTween._firstPT && curTween._initted)) {

-                        if (curTween._enabled(false, false)) { //if all property tweens have been overwritten, kill the tween.

-                            changed = true;

-                        }

-                    }

-                }

-                return changed;

-            },

-

-            _checkOverlap = function(tween, reference, zeroDur) {

-                var tl = tween._timeline,

-                    ts = tl._timeScale,

-                    t = tween._startTime;

-                while (tl._timeline) {

-                    t += tl._startTime;

-                    ts *= tl._timeScale;

-                    if (tl._paused) {

-                        return -100;

-                    }

-                    tl = tl._timeline;

-                }

-                t /= ts;

-                return (t > reference) ? t - reference : ((zeroDur && t === reference) || (!tween._initted && t - reference < 2 * _tinyNum)) ? _tinyNum : ((t += tween.totalDuration() / tween._timeScale / ts) > reference + _tinyNum) ? 0 : t - reference - _tinyNum;

-            };

-

-

-//---- TweenLite instance methods -----------------------------------------------------------------------------

-

-        p._init = function() {

-            var v = this.vars,

-                op = this._overwrittenProps,

-                dur = this._duration,

-                immediate = !!v.immediateRender,

-                ease = v.ease,

-                i, initPlugins, pt, p, startVars;

-            if (v.startAt) {

-                if (this._startAt) {

-                    this._startAt.render(-1, true); //if we've run a startAt previously (when the tween instantiated), we should revert it so that the values re-instantiate correctly particularly for relative tweens. Without this, a TweenLite.fromTo(obj, 1, {x:"+=100"}, {x:"-=100"}), for example, would actually jump to +=200 because the startAt would run twice, doubling the relative change.

-                    this._startAt.kill();

-                }

-                startVars = {};

-                for (p in v.startAt) { //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, 1, from, to).fromTo(e, 1, to, from);

-                    startVars[p] = v.startAt[p];

-                }

-                startVars.overwrite = false;

-                startVars.immediateRender = true;

-                startVars.lazy = (immediate && v.lazy !== false);

-                startVars.startAt = startVars.delay = null; //no nesting of startAt objects allowed (otherwise it could cause an infinite loop).

-                this._startAt = TweenLite.to(this.target, 0, startVars);

-                if (immediate) {

-                    if (this._time > 0) {

-                        this._startAt = null; //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in TimelineLite/Max instances where immediateRender was false (which is the default in the convenience methods like from()).

-                    } else if (dur !== 0) {

-                        return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a TimelineLite or TimelineMax, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.

-                    }

-                }

-            } else if (v.runBackwards && dur !== 0) {

-                //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)

-                if (this._startAt) {

-                    this._startAt.render(-1, true);

-                    this._startAt.kill();

-                    this._startAt = null;

-                } else {

-                    pt = {};

-                    for (p in v) { //copy props into a new object and skip any reserved props, otherwise onComplete or onUpdate or onStart could fire. We should, however, permit autoCSS to go through.

-                        if (!_reservedProps[p] || p === "autoCSS") {

-                            pt[p] = v[p];

-                        }

-                    }

-                    pt.overwrite = 0;

-                    pt.data = "isFromStart"; //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.

-                    pt.lazy = (immediate && v.lazy !== false);

-                    pt.immediateRender = immediate; //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)

-                    this._startAt = TweenLite.to(this.target, 0, pt);

-                    if (!immediate) {

-                        this._startAt._init(); //ensures that the initial values are recorded

-                        this._startAt._enabled(false); //no need to have the tween render on the next cycle. Disable it because we'll always manually control the renders of the _startAt tween.

-                    } else if (this._time === 0) {

-                        return;

-                    }

-                }

-            }

-            if (!ease) {

-                this._ease = TweenLite.defaultEase;

-            } else if (ease instanceof Ease) {

-                this._ease = (v.easeParams instanceof Array) ? ease.config.apply(ease, v.easeParams) : ease;

-            } else {

-                this._ease = (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase;

-            }

-            this._easeType = this._ease._type;

-            this._easePower = this._ease._power;

-            this._firstPT = null;

-

-            if (this._targets) {

-                i = this._targets.length;

-                while (--i > -1) {

-                    if ( this._initProps( this._targets[i], (this._propLookup[i] = {}), this._siblings[i], (op ? op[i] : null)) ) {

-                        initPlugins = true;

-                    }

-                }

-            } else {

-                initPlugins = this._initProps(this.target, this._propLookup, this._siblings, op);

-            }

-

-            if (initPlugins) {

-                TweenLite._onPluginEvent("_onInitAllProps", this); //reorders the array in order of priority. Uses a static TweenPlugin method in order to minimize file size in TweenLite

-            }

-            if (op) if (!this._firstPT) if (typeof(this.target) !== "function") { //if all tweening properties have been overwritten, kill the tween. If the target is a function, it's probably a delayedCall so let it live.

-                this._enabled(false, false);

-            }

-            if (v.runBackwards) {

-                pt = this._firstPT;

-                while (pt) {

-                    pt.s += pt.c;

-                    pt.c = -pt.c;

-                    pt = pt._next;

-                }

-            }

-            this._onUpdate = v.onUpdate;

-            this._initted = true;

-        };

-

-        p._initProps = function(target, propLookup, siblings, overwrittenProps) {

-            var p, i, initPlugins, plugin, pt, v;

-            if (target == null) {

-                return false;

-            }

-

-            if (_lazyLookup[target._gsTweenID]) {

-                _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)

-            }

-

-            if (!this.vars.css) if (target.style) if (target !== window && target.nodeType) if (_plugins.css) if (this.vars.autoCSS !== false) { //it's so common to use TweenLite/Max to animate the css of DOM elements, we assume that if the target is a DOM element, that's what is intended (a convenience so that users don't have to wrap things in css:{}, although we still recommend it for a slight performance boost and better specificity). Note: we cannot check "nodeType" on the window inside an iframe.

-                _autoCSS(this.vars, target);

-            }

-            for (p in this.vars) {

-                v = this.vars[p];

-                if (_reservedProps[p]) {

-                    if (v) if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) {

-                        this.vars[p] = v = this._swapSelfInParams(v, this);

-                    }

-

-                } else if (_plugins[p] && (plugin = new _plugins[p]())._onInitTween(target, this.vars[p], this)) {

-

-                    //t - target        [object]

-                    //p - property      [string]

-                    //s - start         [number]

-                    //c - change        [number]

-                    //f - isFunction    [boolean]

-                    //n - name          [string]

-                    //pg - isPlugin     [boolean]

-                    //pr - priority     [number]

-                    this._firstPT = pt = {_next:this._firstPT, t:plugin, p:"setRatio", s:0, c:1, f:true, n:p, pg:true, pr:plugin._priority};

-                    i = plugin._overwriteProps.length;

-                    while (--i > -1) {

-                        propLookup[plugin._overwriteProps[i]] = this._firstPT;

-                    }

-                    if (plugin._priority || plugin._onInitAllProps) {

-                        initPlugins = true;

-                    }

-                    if (plugin._onDisable || plugin._onEnable) {

-                        this._notifyPluginsOfEnabled = true;

-                    }

-

-                } else {

-                    this._firstPT = propLookup[p] = pt = {_next:this._firstPT, t:target, p:p, f:(typeof(target[p]) === "function"), n:p, pg:false, pr:0};

-                    pt.s = (!pt.f) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]();

-                    pt.c = (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : (Number(v) - pt.s) || 0;

-                }

-                if (pt) if (pt._next) {

-                    pt._next._prev = pt;

-                }

-            }

-

-            if (overwrittenProps) if (this._kill(overwrittenProps, target)) { //another tween may have tried to overwrite properties of this tween before init() was called (like if two tweens start at the same time, the one created second will run first)

-                return this._initProps(target, propLookup, siblings, overwrittenProps);

-            }

-            if (this._overwrite > 1) if (this._firstPT) if (siblings.length > 1) if (_applyOverwrite(target, this, propLookup, this._overwrite, siblings)) {

-                this._kill(propLookup, target);

-                return this._initProps(target, propLookup, siblings, overwrittenProps);

-            }

-            if (this._firstPT) if ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration)) { //zero duration tweens don't lazy render by default; everything else does.

-                _lazyLookup[target._gsTweenID] = true;

-            }

-            return initPlugins;

-        };

-

-        p.render = function(time, suppressEvents, force) {

-            var prevTime = this._time,

-                duration = this._duration,

-                prevRawPrevTime = this._rawPrevTime,

-                isComplete, callback, pt, rawPrevTime;

-            if (time >= duration) {

-                this._totalTime = this._time = duration;

-                this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1;

-                if (!this._reversed ) {

-                    isComplete = true;

-                    callback = "onComplete";

-                }

-                if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.

-                    if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate.

-                        time = 0;

-                    }

-                    if (time === 0 || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time) {

-                        force = true;

-                        if (prevRawPrevTime > _tinyNum) {

-                            callback = "onReverseComplete";

-                        }

-                    }

-                    this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                }

-

-            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.

-                this._totalTime = this._time = 0;

-                this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;

-                if (prevTime !== 0 || (duration === 0 && prevRawPrevTime > 0 && prevRawPrevTime !== _tinyNum)) {

-                    callback = "onReverseComplete";

-                    isComplete = this._reversed;

-                }

-                if (time < 0) {

-                    this._active = false;

-                    if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.

-                        if (prevRawPrevTime >= 0) {

-                            force = true;

-                        }

-                        this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.

-                    }

-                } else if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.

-                    force = true;

-                }

-            } else {

-                this._totalTime = this._time = time;

-

-                if (this._easeType) {

-                    var r = time / duration, type = this._easeType, pow = this._easePower;

-                    if (type === 1 || (type === 3 && r >= 0.5)) {

-                        r = 1 - r;

-                    }

-                    if (type === 3) {

-                        r *= 2;

-                    }

-                    if (pow === 1) {

-                        r *= r;

-                    } else if (pow === 2) {

-                        r *= r * r;

-                    } else if (pow === 3) {

-                        r *= r * r * r;

-                    } else if (pow === 4) {

-                        r *= r * r * r * r;

-                    }

-

-                    if (type === 1) {

-                        this.ratio = 1 - r;

-                    } else if (type === 2) {

-                        this.ratio = r;

-                    } else if (time / duration < 0.5) {

-                        this.ratio = r / 2;

-                    } else {

-                        this.ratio = 1 - (r / 2);

-                    }

-

-                } else {

-                    this.ratio = this._ease.getRatio(time / duration);

-                }

-            }

-

-            if (this._time === prevTime && !force) {

-                return;

-            } else if (!this._initted) {

-                this._init();

-                if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example.

-                    return;

-                } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) {

-                    this._time = this._totalTime = prevTime;

-                    this._rawPrevTime = prevRawPrevTime;

-                    _lazyTweens.push(this);

-                    this._lazy = time;

-                    return;

-                }

-                //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently.

-                if (this._time && !isComplete) {

-                    this.ratio = this._ease.getRatio(this._time / duration);

-                } else if (isComplete && this._ease._calcEnd) {

-                    this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1);

-                }

-            }

-            if (this._lazy !== false) { //in case a lazy render is pending, we should flush it because the new render is occuring now (imagine a lazy tween instantiating and then immediately the user calls tween.seek(tween.duration()), skipping to the end - the end render would be forced, and then if we didn't flush the lazy render, it'd fire AFTER the seek(), rendering it at the wrong time.

-                this._lazy = false;

-            }

-            if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) {

-                this._active = true;  //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done.

-            }

-            if (prevTime === 0) {

-                if (this._startAt) {

-                    if (time >= 0) {

-                        this._startAt.render(time, suppressEvents, force);

-                    } else if (!callback) {

-                        callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area.

-                    }

-                }

-                if (this.vars.onStart) if (this._time !== 0 || duration === 0) if (!suppressEvents) {

-                    this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);

-                }

-            }

-

-            pt = this._firstPT;

-            while (pt) {

-                if (pt.f) {

-                    pt.t[pt.p](pt.c * this.ratio + pt.s);

-                } else {

-                    pt.t[pt.p] = pt.c * this.ratio + pt.s;

-                }

-                pt = pt._next;

-            }

-

-            if (this._onUpdate) {

-                if (time < 0) if (this._startAt && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.

-                    this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.

-                }

-                if (!suppressEvents) if (this._time !== prevTime || isComplete) {

-                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);

-                }

-            }

-

-            if (callback) if (!this._gc) { //check _gc because there's a chance that kill() could be called in an onUpdate

-                if (time < 0 && this._startAt && !this._onUpdate && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.

-                    this._startAt.render(time, suppressEvents, force);

-                }

-                if (isComplete) {

-                    if (this._timeline.autoRemoveChildren) {

-                        this._enabled(false, false);

-                    }

-                    this._active = false;

-                }

-                if (!suppressEvents && this.vars[callback]) {

-                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);

-                }

-                if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless.

-                    this._rawPrevTime = 0;

-                }

-            }

-

-        };

-

-        p._kill = function(vars, target) {

-            if (vars === "all") {

-                vars = null;

-            }

-            if (vars == null) if (target == null || target === this.target) {

-                this._lazy = false;

-                return this._enabled(false, false);

-            }

-            target = (typeof(target) !== "string") ? (target || this._targets || this.target) : TweenLite.selector(target) || target;

-            var i, overwrittenProps, p, pt, propLookup, changed, killProps, record;

-            if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {

-                i = target.length;

-                while (--i > -1) {

-                    if (this._kill(vars, target[i])) {

-                        changed = true;

-                    }

-                }

-            } else {

-                if (this._targets) {

-                    i = this._targets.length;

-                    while (--i > -1) {

-                        if (target === this._targets[i]) {

-                            propLookup = this._propLookup[i] || {};

-                            this._overwrittenProps = this._overwrittenProps || [];

-                            overwrittenProps = this._overwrittenProps[i] = vars ? this._overwrittenProps[i] || {} : "all";

-                            break;

-                        }

-                    }

-                } else if (target !== this.target) {

-                    return false;

-                } else {

-                    propLookup = this._propLookup;

-                    overwrittenProps = this._overwrittenProps = vars ? this._overwrittenProps || {} : "all";

-                }

-

-                if (propLookup) {

-                    killProps = vars || propLookup;

-                    record = (vars !== overwrittenProps && overwrittenProps !== "all" && vars !== propLookup && (typeof(vars) !== "object" || !vars._tempKill)); //_tempKill is a super-secret way to delete a particular tweening property but NOT have it remembered as an official overwritten property (like in BezierPlugin)

-                    for (p in killProps) {

-                        if ((pt = propLookup[p])) {

-                            if (pt.pg && pt.t._kill(killProps)) {

-                                changed = true; //some plugins need to be notified so they can perform cleanup tasks first

-                            }

-                            if (!pt.pg || pt.t._overwriteProps.length === 0) {

-                                if (pt._prev) {

-                                    pt._prev._next = pt._next;

-                                } else if (pt === this._firstPT) {

-                                    this._firstPT = pt._next;

-                                }

-                                if (pt._next) {

-                                    pt._next._prev = pt._prev;

-                                }

-                                pt._next = pt._prev = null;

-                            }

-                            delete propLookup[p];

-                        }

-                        if (record) {

-                            overwrittenProps[p] = 1;

-                        }

-                    }

-                    if (!this._firstPT && this._initted) { //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.

-                        this._enabled(false, false);

-                    }

-                }

-            }

-            return changed;

-        };

-

-        p.invalidate = function() {

-            if (this._notifyPluginsOfEnabled) {

-                TweenLite._onPluginEvent("_onDisable", this);

-            }

-            this._firstPT = null;

-            this._overwrittenProps = null;

-            this._onUpdate = null;

-            this._startAt = null;

-            this._initted = this._active = this._notifyPluginsOfEnabled = this._lazy = false;

-            this._propLookup = (this._targets) ? {} : [];

-            return this;

-        };

-

-        p._enabled = function(enabled, ignoreTimeline) {

-            if (!_tickerActive) {

-                _ticker.wake();

-            }

-            if (enabled && this._gc) {

-                var targets = this._targets,

-                    i;

-                if (targets) {

-                    i = targets.length;

-                    while (--i > -1) {

-                        this._siblings[i] = _register(targets[i], this, true);

-                    }

-                } else {

-                    this._siblings = _register(this.target, this, true);

-                }

-            }

-            Animation.prototype._enabled.call(this, enabled, ignoreTimeline);

-            if (this._notifyPluginsOfEnabled) if (this._firstPT) {

-                return TweenLite._onPluginEvent((enabled ? "_onEnable" : "_onDisable"), this);

-            }

-            return false;

-        };

-

-

-//----TweenLite static methods -----------------------------------------------------

-

-        TweenLite.to = function(target, duration, vars) {

-            return new TweenLite(target, duration, vars);

-        };

-

-        TweenLite.from = function(target, duration, vars) {

-            vars.runBackwards = true;

-            vars.immediateRender = (vars.immediateRender != false);

-            return new TweenLite(target, duration, vars);

-        };

-

-        TweenLite.fromTo = function(target, duration, fromVars, toVars) {

-            toVars.startAt = fromVars;

-            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);

-            return new TweenLite(target, duration, toVars);

-        };

-

-        TweenLite.delayedCall = function(delay, callback, params, scope, useFrames) {

-            return new TweenLite(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, onCompleteScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, onReverseCompleteScope:scope, immediateRender:false, useFrames:useFrames, overwrite:0});

-        };

-

-        TweenLite.set = function(target, vars) {

-            return new TweenLite(target, 0, vars);

-        };

-

-        TweenLite.getTweensOf = function(target, onlyActive) {

-            if (target == null) { return []; }

-            target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;

-            var i, a, j, t;

-            if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {

-                i = target.length;

-                a = [];

-                while (--i > -1) {

-                    a = a.concat(TweenLite.getTweensOf(target[i], onlyActive));

-                }

-                i = a.length;

-                //now get rid of any duplicates (tweens of arrays of objects could cause duplicates)

-                while (--i > -1) {

-                    t = a[i];

-                    j = i;

-                    while (--j > -1) {

-                        if (t === a[j]) {

-                            a.splice(i, 1);

-                        }

-                    }

-                }

-            } else {

-                a = _register(target).concat();

-                i = a.length;

-                while (--i > -1) {

-                    if (a[i]._gc || (onlyActive && !a[i].isActive())) {

-                        a.splice(i, 1);

-                    }

-                }

-            }

-            return a;

-        };

-

-        TweenLite.killTweensOf = TweenLite.killDelayedCallsTo = function(target, onlyActive, vars) {

-            if (typeof(onlyActive) === "object") {

-                vars = onlyActive; //for backwards compatibility (before "onlyActive" parameter was inserted)

-                onlyActive = false;

-            }

-            var a = TweenLite.getTweensOf(target, onlyActive),

-                i = a.length;

-            while (--i > -1) {

-                a[i]._kill(vars, target);

-            }

-        };

-

-

-

-/*

- * ----------------------------------------------------------------

- * TweenPlugin   (could easily be split out as a separate file/class, but included for ease of use (so that people don't need to include another <script> call before loading plugins which is easy to forget)

- * ----------------------------------------------------------------

- */

-        var TweenPlugin = _class("plugins.TweenPlugin", function(props, priority) {

-                    this._overwriteProps = (props || "").split(",");

-                    this._propName = this._overwriteProps[0];

-                    this._priority = priority || 0;

-                    this._super = TweenPlugin.prototype;

-                }, true);

-

-        p = TweenPlugin.prototype;

-        TweenPlugin.version = "1.10.1";

-        TweenPlugin.API = 2;

-        p._firstPT = null;

-

-        p._addTween = function(target, prop, start, end, overwriteProp, round) {

-            var c, pt;

-            if (end != null && (c = (typeof(end) === "number" || end.charAt(1) !== "=") ? Number(end) - start : parseInt(end.charAt(0) + "1", 10) * Number(end.substr(2)))) {

-                this._firstPT = pt = {_next:this._firstPT, t:target, p:prop, s:start, c:c, f:(typeof(target[prop]) === "function"), n:overwriteProp || prop, r:round};

-                if (pt._next) {

-                    pt._next._prev = pt;

-                }

-                return pt;

-            }

-        };

-

-        p.setRatio = function(v) {

-            var pt = this._firstPT,

-                min = 0.000001,

-                val;

-            while (pt) {

-                val = pt.c * v + pt.s;

-                if (pt.r) {

-                    val = Math.round(val);

-                } else if (val < min) if (val > -min) { //prevents issues with converting very small numbers to strings in the browser

-                    val = 0;

-                }

-                if (pt.f) {

-                    pt.t[pt.p](val);

-                } else {

-                    pt.t[pt.p] = val;

-                }

-                pt = pt._next;

-            }

-        };

-

-        p._kill = function(lookup) {

-            var a = this._overwriteProps,

-                pt = this._firstPT,

-                i;

-            if (lookup[this._propName] != null) {

-                this._overwriteProps = [];

-            } else {

-                i = a.length;

-                while (--i > -1) {

-                    if (lookup[a[i]] != null) {

-                        a.splice(i, 1);

-                    }

-                }

-            }

-            while (pt) {

-                if (lookup[pt.n] != null) {

-                    if (pt._next) {

-                        pt._next._prev = pt._prev;

-                    }

-                    if (pt._prev) {

-                        pt._prev._next = pt._next;

-                        pt._prev = null;

-                    } else if (this._firstPT === pt) {

-                        this._firstPT = pt._next;

-                    }

-                }

-                pt = pt._next;

-            }

-            return false;

-        };

-

-        p._roundProps = function(lookup, value) {

-            var pt = this._firstPT;

-            while (pt) {

-                if (lookup[this._propName] || (pt.n != null && lookup[ pt.n.split(this._propName + "_").join("") ])) { //some properties that are very plugin-specific add a prefix named after the _propName plus an underscore, so we need to ignore that extra stuff here.

-                    pt.r = value;

-                }

-                pt = pt._next;

-            }

-        };

-

-        TweenLite._onPluginEvent = function(type, tween) {

-            var pt = tween._firstPT,

-                changed, pt2, first, last, next;

-            if (type === "_onInitAllProps") {

-                //sorts the PropTween linked list in order of priority because some plugins need to render earlier/later than others, like MotionBlurPlugin applies its effects after all x/y/alpha tweens have rendered on each frame.

-                while (pt) {

-                    next = pt._next;

-                    pt2 = first;

-                    while (pt2 && pt2.pr > pt.pr) {

-                        pt2 = pt2._next;

-                    }

-                    if ((pt._prev = pt2 ? pt2._prev : last)) {

-                        pt._prev._next = pt;

-                    } else {

-                        first = pt;

-                    }

-                    if ((pt._next = pt2)) {

-                        pt2._prev = pt;

-                    } else {

-                        last = pt;

-                    }

-                    pt = next;

-                }

-                pt = tween._firstPT = first;

-            }

-            while (pt) {

-                if (pt.pg) if (typeof(pt.t[type]) === "function") if (pt.t[type]()) {

-                    changed = true;

-                }

-                pt = pt._next;

-            }

-            return changed;

-        };

-

-        TweenPlugin.activate = function(plugins) {

-            var i = plugins.length;

-            while (--i > -1) {

-                if (plugins[i].API === TweenPlugin.API) {

-                    _plugins[(new plugins[i]())._propName] = plugins[i];

-                }

-            }

-            return true;

-        };

-

-        //provides a more concise way to define plugins that have no dependencies besides TweenPlugin and TweenLite, wrapping common boilerplate stuff into one function (added in 1.9.0). You don't NEED to use this to define a plugin - the old way still works and can be useful in certain (rare) situations.

-        _gsDefine.plugin = function(config) {

-            if (!config || !config.propName || !config.init || !config.API) { throw "illegal plugin definition."; }

-            var propName = config.propName,

-                priority = config.priority || 0,

-                overwriteProps = config.overwriteProps,

-                map = {init:"_onInitTween", set:"setRatio", kill:"_kill", round:"_roundProps", initAll:"_onInitAllProps"},

-                Plugin = _class("plugins." + propName.charAt(0).toUpperCase() + propName.substr(1) + "Plugin",

-                    function() {

-                        TweenPlugin.call(this, propName, priority);

-                        this._overwriteProps = overwriteProps || [];

-                    }, (config.global === true)),

-                p = Plugin.prototype = new TweenPlugin(propName),

-                prop;

-            p.constructor = Plugin;

-            Plugin.API = config.API;

-            for (prop in map) {

-                if (typeof(config[prop]) === "function") {

-                    p[map[prop]] = config[prop];

-                }

-            }

-            Plugin.version = config.version;

-            TweenPlugin.activate([Plugin]);

-            return Plugin;

-        };

-

-

-        //now run through all the dependencies discovered and if any are missing, log that to the console as a warning. This is why it's best to have TweenLite load last - it can check all the dependencies for you.

-        a = window._gsQueue;

-        if (a) {

-            for (i = 0; i < a.length; i++) {

-                a[i]();

-            }

-            for (p in _defLookup) {

-                if (!_defLookup[p].func) {

-                    //window.console.log("GSAP encountered missing dependency: com.greensock." + p);

-                }

-            }

-        }

-

-        _tickerActive = false; //ensures that the first official animation forces a ticker.tick() to update the time when it is instantiated

-

-})(window);

-

-angular.module('b2b.att.collapse', ['b2b.att.transition'])

-

-// The collapsible directive indicates a block of html that will expand and collapse

-.directive('b2bCollapse', ['$transition', function($transition) {

-    // CSS transitions don't work with height: auto, so we have to manually change the height to a

-    // specific value and then once the animation completes, we can reset the height to auto.

-    // Unfortunately if you do this while the CSS transitions are specified (i.e. in the CSS class

-    // "collapse") then you trigger a change to height 0 in between.

-    // The fix is to remove the "collapse" CSS class while changing the height back to auto - phew!

-

-    var props = {

-        open: {

-            marginTop: null,

-            marginBottom: null,

-            paddingTop: null,

-            paddingBottom: null,

-            display: 'block'

-        },

-        closed: {

-            marginTop: 0,

-            marginBottom: 0,

-            paddingTop: 0,

-            paddingBottom: 0,

-            display: 'none'

-        }

-    };

-

-    var fixUpHeight = function(scope, element, height) {

-        // We remove the collapse CSS class to prevent a transition when we change to height: auto

-        element.removeClass('b2bCollapse');

-        element.css({height: height});

-        //adjusting for any margin or padding

-        if (height === 0) {

-            element.css(props.closed);

-        } else {

-            element.css(props.open);

-        }

-        // It appears that  reading offsetWidth makes the browser realise that we have changed the

-        // height already :-/

-        var x = element[0].offsetWidth;

-        element.addClass('b2bCollapse');

-    };

-

-    return {

-        link: function(scope, element, attrs) {

-            var isCollapsed;

-            var initialAnimSkip = true;

-            scope.$watch(function() {

-                return element[0].scrollHeight;

-            }, function(value) {

-                //The listener is called when scrollHeight changes

-                //It actually does on 2 scenarios: 

-                // 1. Parent is set to display none

-                // 2. angular bindings inside are resolved

-                //When we have a change of scrollHeight we are setting again the correct height if the group is opened

-                if (element[0].scrollHeight !== 0) {

-                    if (!isCollapsed) {

-                        if (initialAnimSkip) {

-                            fixUpHeight(scope, element, element[0].scrollHeight + 'px');

-                        } else {

-                            fixUpHeight(scope, element, 'auto');

-                            element.css({overflow: 'visible'});

-                        }

-                    }

-                }

-            });

-

-            scope.$watch(attrs.b2bCollapse, function(value) {

-                if (value) {

-                    collapse();

-                } else {

-                    expand();

-                }

-            });

-

-

-            var currentTransition;

-            var doTransition = function(change) {

-                if (currentTransition) {

-                    currentTransition.cancel();

-                }

-                currentTransition = $transition(element, change);

-                currentTransition.then(

-                        function() {

-                            currentTransition = undefined;

-                        },

-                        function() {

-                            currentTransition = undefined;

-                        }

-                );

-                return currentTransition;

-            };

-

-            var expand = function() {

-                scope.postTransition = true; 

-                if (initialAnimSkip) {

-                    initialAnimSkip = false;

-                    if (!isCollapsed) {

-                        fixUpHeight(scope, element, 'auto');

-                    }

-                } else {

-                    //doTransition({ height : element[0].scrollHeight + 'px' })

-                    doTransition(angular.extend({height: element[0].scrollHeight + 'px'}, props.open))

-                            .then(function() {

-                                // This check ensures that we don't accidentally update the height if the user has closed

-                                // the group while the animation was still running

-                                if (!isCollapsed) {

-                                    fixUpHeight(scope, element, 'auto');

-                                }

-                            });

-                }

-                isCollapsed = false;

-            };

-

-            var collapse = function() {

-                isCollapsed = true;

-                if (initialAnimSkip) {

-                    initialAnimSkip = false;

-                    fixUpHeight(scope, element, 0);

-                } else {

-                    fixUpHeight(scope, element, element[0].scrollHeight + 'px');

-                    doTransition(angular.extend({height: 0}, props.closed)).then(function() {

-                        scope.postTransition = false;

-                    });

-                    element.css({overflow: 'hidden'});

-                }

-            };

-        }

-    };

-}]);

-angular.module('b2b.att.position', [])

-

-.factory('$position', ['$document', '$window', function ($document, $window) {

-    function getStyle(el, cssprop) {

-        if (el.currentStyle) { //IE

-            return el.currentStyle[cssprop];

-        } else if ($window.getComputedStyle) {

-            return $window.getComputedStyle(el)[cssprop];

-        }

-        // finally try and get inline style

-        return el.style[cssprop];

-    }

-

-    /**

-     * Checks if a given element is statically positioned

-     * @param element - raw DOM element

-     */

-    function isStaticPositioned(element) {

-        return (getStyle(element, "position") || 'static') === 'static';

-    }

-

-    /**

-     * returns the closest, non-statically positioned parentOffset of a given element

-     * @param element

-     */

-    var parentOffsetEl = function (element) {

-        var docDomEl = $document[0];

-        var offsetParent = element.offsetParent || docDomEl;

-        while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent)) {

-            offsetParent = offsetParent.offsetParent;

-        }

-        return offsetParent || docDomEl;

-    };

-

-    return {

-        /**

-         * Provides read-only equivalent of jQuery's position function:

-         * http://api.jquery.com/position/

-         */

-        position: function (element) {

-            var elBCR = this.offset(element);

-            var offsetParentBCR = {

-                top: 0,

-                left: 0

-            };

-            var offsetParentEl = parentOffsetEl(element[0]);

-            if (offsetParentEl !== $document[0]) {

-                offsetParentBCR = this.offset(angular.element(offsetParentEl));

-                offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;

-                offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;

-            }

-

-            return {

-                width: element.prop('offsetWidth'),

-                height: element.prop('offsetHeight'),

-                top: elBCR.top - offsetParentBCR.top,

-                left: elBCR.left - offsetParentBCR.left

-            };

-        },

-

-        /**

-         * Provides read-only equivalent of jQuery's offset function:

-         * http://api.jquery.com/offset/

-         */

-        offset: function (element) {

-            var boundingClientRect = element[0].getBoundingClientRect();

-            return {

-                width: element.prop('offsetWidth'),

-                height: element.prop('offsetHeight'),

-                top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop),

-                left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft || $document[0].documentElement.scrollLeft)

-            };

-        },

-        

-         /**

-         * Provides functionality to check whether an element is in view port.

-         */

-        isElementInViewport: function (element) {

-            if (element) {

-                var rect = element[0].getBoundingClientRect();

-                return (

-                    rect.top >= 0 &&

-                    rect.left >= 0 &&

-                    rect.bottom <= ($window.innerHeight || $document[0].documentElement.clientHeight) &&

-                    rect.right <= ($window.innerWidth || $document[0].documentElement.clientWidth)

-                );

-            } else {

-                return false;

-            }

-        }

-    };

-}])

-

-.factory('$isElement', [function () {

-    var isElement = function (currentElem, targetElem, alternateElem) {

-        if (currentElem[0] === targetElem[0]) {

-            return true;

-        } else if (currentElem[0] === alternateElem[0]) {

-            return false;

-        } else {

-            return isElement((currentElem.parent()[0] && currentElem.parent()) || targetElem, targetElem, alternateElem);

-        }

-    };

-

-    return isElement;

-}])

-

-.directive('attPosition', ['$position', function ($position) {

-    return {

-        restrict: 'A',

-        link: function (scope, elem, attr) {

-            scope.$watchCollection(function () {

-                return $position.position(elem);

-            }, function (value) {

-                scope[attr.attPosition] = value;

-            });

-        }

-    };

-}]);

-

-angular.module('b2b.att.transition', [])

-

-.factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) {

-

-  var $transition = function(element, trigger, options) {

-    options = options || {};

-    var deferred = $q.defer();

-    var endEventName = $transition[options.animation ? "animationEndEventName" : "transitionEndEventName"];

-

-    var transitionEndHandler = function() {

-      $rootScope.$apply(function() {

-        element.unbind(endEventName, transitionEndHandler);

-        deferred.resolve(element);

-      });

-    };

-

-    if (endEventName) {

-      element.bind(endEventName, transitionEndHandler);

-    }

-

-    // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur

-    $timeout(function() {

-      if ( angular.isString(trigger) ) {

-        element.addClass(trigger);

-      } else if ( angular.isFunction(trigger) ) {

-        trigger(element);

-      } else if ( angular.isObject(trigger) ) {

-        element.css(trigger);

-      }

-      //If browser does not support transitions, instantly resolve

-      if ( !endEventName ) {

-        deferred.resolve(element);

-      }

-    }, 100);

-

-    // Add our custom cancel function to the promise that is returned

-    // We can call this if we are about to run a new transition, which we know will prevent this transition from ending,

-    // i.e. it will therefore never raise a transitionEnd event for that transition

-    deferred.promise.cancel = function() {

-      if ( endEventName ) {

-        element.unbind(endEventName, transitionEndHandler);

-      }

-      deferred.reject('Transition cancelled');

-    };

-

-    return deferred.promise;

-  };

-

-  // Work out the name of the transitionEnd event

-  var transElement = document.createElement('trans');

-  var transitionEndEventNames = {

-    'WebkitTransition': 'webkitTransitionEnd',

-    'MozTransition': 'transitionend',

-    'OTransition': 'oTransitionEnd',

-    'transition': 'transitionend'

-  };

-  var animationEndEventNames = {

-    'WebkitTransition': 'webkitAnimationEnd',

-    'MozTransition': 'animationend',

-    'OTransition': 'oAnimationEnd',

-    'transition': 'animationend'

-  };

-  function findEndEventName(endEventNames) {

-    for (var name in endEventNames){

-      if (transElement.style[name] !== undefined) {

-        return endEventNames[name];

-      }

-    }

-  }

-  $transition.transitionEndEventName = findEndEventName(transitionEndEventNames);

-  $transition.animationEndEventName = findEndEventName(animationEndEventNames);

-  return $transition;

-}])

-

-.factory('$scrollTo', ['$window', function($window) {

-    var $scrollTo = function(offsetLeft, offsetTop, duration) {

-        TweenMax.to($window, duration || 1, {scrollTo: {y: offsetTop, x: offsetLeft}, ease: Power4.easeOut});

-    };

-    return $scrollTo;

-}])

-.factory('animation', function(){

-    return TweenMax;

-})

-.factory('$progressBar', function(){

-

-   //Provides a function to pass in code for closure purposes

-   var loadingAnimationCreator = function(onUpdateCallback){

-

-      //Use closure to setup some resuable code

-      var loadingAnimation = function(callback, duration){

-          TweenMax.to({}, duration, {

-              onUpdateParams: ["{self}"],

-              onUpdate: onUpdateCallback,

-              onComplete: callback

-          });

-      };

-      //Returns a function that takes a callback function and a duration for the animation

-      return (function(){

-        return loadingAnimation;

-      })();

-    };

-

-  return loadingAnimationCreator;

-})

-.factory('$height', function(){

-  var heightAnimation = function(element,duration,height,alpha){

-    TweenMax.to(element,

-      duration,

-      {height:height, autoAlpha:alpha},

-      0);

-  };

-  return heightAnimation;

-});

-angular.module('b2b.att.utilities', ['ngSanitize'])

-.constant('b2bUtilitiesConfig', {

-    prev: '37',

-    up: '38',

-    next: '39',

-    down: '40',

-    type: 'list',

-    columns: 1,

-    enableSearch: false,

-    searchTimer: 200,

-    circularTraversal: false

-})

-.constant('b2bWhenScrollEndsConstants', {

-    'threshold': 100,

-    'width': 0,

-    'height': 0

-})

-// All breakpoints ranges from >= min and < max

-.constant('b2bAwdBreakpoints', {

-    breakpoints: {

-        mobile: {

-            min: 1,

-            max: 768

-        },

-        tablet: {

-            min: 768,

-            max: 1025

-        },

-        desktop: {

-            min: 1025,

-            max: 1920

-        }

-    }

-})

-.filter('groupBy', function ($timeout) {

-    //Custom GroupBy Filter for treeNav, returns key string and value.childarray as set of grouped elements

-    return function (data, key) {

-        if (!key) return data;

-        var outputPropertyName = '__groupBy__' + key;

-        if (!data[outputPropertyName]) {

-            var result = {};

-            for (var i = 0; i < data.length; i++) {

-                if (!result[data[i][key]])

-                    result[data[i][key]] = {};

-                if (!result[data[i][key]].childArray) {

-                    result[data[i][key]].childArray = [];

-                }

-                result[data[i][key]].childArray.push(data[i]);

-                if (data[i].activeGrp && data[i].activeGrp == true) {

-                    console.log('make ' + data[i].grpChild + ' active');

-                    result[data[i][key]].showGroup = true;

-                }

-            }

-            Object.defineProperty(result, 'length', {enumerable: false,value: Object.keys(result).length});

-            Object.defineProperty(data, outputPropertyName, {enumerable: false,configurable: true,writable:false,value:result});

-            $timeout(function(){delete data[outputPropertyName];},0,false);

-        }

-        return data[outputPropertyName];

-    };

-})

-.filter('searchObjectPropertiesFilter', [function() {

-    return function(items, searchText, attrs) {

-        if(!searchText){

-            return items;

-        }

-        var filtered = [];

-        searchText = searchText.toLowerCase();

-        angular.forEach(items, function(item) {

-            angular.forEach(attrs, function(attr) {

-                if (item.hasOwnProperty(attr) && item[attr].toLowerCase().includes(searchText)) {

-                    filtered.push(item);

-                    return;

-                }

-            });

-        });

-        return filtered;

-    };

-}])

-.filter('unsafe',[ '$sce', function ($sce) { 

-    return function(val){ 

-       return $sce.trustAsHtml(val); 

-    }; 

-}])

-.filter('b2bHighlight', function () {

-    function escapeRegexp(queryToEscape) {

-        return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');

-    }

-    return function (matchItem, query, className) {

-        return query && matchItem ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class=\"' + className + '\">$&</span>') : matchItem;

-    }

-})

-/*License (MIT)

-Copyright © 2013 Matt Diamond

-https://github.com/cwilso/AudioRecorder/blob/master/js/recorderjs/recorder.js

-*/

-.factory('b2bRecorder', function() {

-

-    var Recorder = function(source, cfg) {

-        var WORKER_PATH = 'recorderWorker.js';

-        var config = cfg || {};

-        var bufferLen = config.bufferLen || 4096;

-        this.context = source.context;

-        if(!this.context.createScriptProcessor) {

-            this.node = this.context.createJavacriptProcessor(bufferLen, 2, 2);

-        } else {

-            this.node = this.context.createScriptProcessor(bufferLen, 2, 2);

-        }

-        var workerCode = 'function init(a){sampleRate=a.sampleRate}function record(a){recBuffersL.push(a[0]),recBuffersR.push(a[1]),recLength+=a[0].length}function exportWAV(a){var b=mergeBuffers(recBuffersL,recLength),c=mergeBuffers(recBuffersR,recLength),d=interleave(b,c),e=encodeWAV(d),f=new Blob([e],{type:a});this.postMessage(f)}function exportMonoWAV(a){var b=mergeBuffers(recBuffersL,recLength),c=encodeWAV(b,!0),d=new Blob([c],{type:a});this.postMessage(d)}function getBuffers(){var a=[];a.push(mergeBuffers(recBuffersL,recLength)),a.push(mergeBuffers(recBuffersR,recLength)),this.postMessage(a)}function clear(){recLength=0,recBuffersL=[],recBuffersR=[]}function mergeBuffers(a,b){for(var c=new Float32Array(b),d=0,e=0;e<a.length;e++)c.set(a[e],d),d+=a[e].length;return c}function interleave(a,b){for(var c=a.length+b.length,d=new Float32Array(c),e=0,f=0;e<c;)d[e++]=a[f],d[e++]=b[f],f++;return d}function floatTo16BitPCM(a,b,c){for(var d=0;d<c.length;d++,b+=2){var e=Math.max(-1,Math.min(1,c[d]));a.setInt16(b,e<0?32768*e:32767*e,!0)}}function writeString(a,b,c){for(var d=0;d<c.length;d++)a.setUint8(b+d,c.charCodeAt(d))}function encodeWAV(a,b){var c=new ArrayBuffer(44+2*a.length),d=new DataView(c);return writeString(d,0,"RIFF"),d.setUint32(4,32+2*a.length,!0),writeString(d,8,"WAVE"),writeString(d,12,"fmt "),d.setUint32(16,16,!0),d.setUint16(20,1,!0),d.setUint16(22,b?1:2,!0),d.setUint32(24,sampleRate,!0),d.setUint32(28,4*sampleRate,!0),d.setUint16(32,4,!0),d.setUint16(34,16,!0),writeString(d,36,"data"),d.setUint32(40,2*a.length,!0),floatTo16BitPCM(d,44,a),d}var recLength=0,recBuffersL=[],recBuffersR=[],sampleRate;this.onmessage=function(a){switch(a.data.command){case"init":init(a.data.config);break;case"record":record(a.data.buffer);break;case"exportWAV":exportWAV(a.data.type);break;case"exportMonoWAV":exportMonoWAV(a.data.type);break;case"getBuffers":getBuffers();break;case"clear":clear()}};';

-        var blob = new Blob([workerCode]);

-

-        var worker = new Worker(window.URL.createObjectURL(blob)); //TODO: Use a blob instead

-        worker.postMessage({

-            command: 'init',

-            config: {

-                sampleRate: this.context.sampleRate

-            }

-        });

-        var recording = false,

-            currCallback;

-

-        this.node.onaudioprocess = function(e) {

-            if (!recording) return;

-            worker.postMessage({

-                command: 'record',

-                buffer: [

-                    e.inputBuffer.getChannelData(0),

-                    e.inputBuffer.getChannelData(1)

-                ]

-            });

-        };

-

-        this.configure = function(cfg) {

-            for (var prop in cfg) {//TODO: look into using angular.extend() here

-                if (cfg.hasOwnProperty(prop)) {

-                    config[prop] = cfg[prop];

-                }

-            }

-        };

-

-        this.record = function() {

-            recording = true;

-        };

-

-        this.stop = function() {

-            recording = false;

-        };

-

-        this.clear = function() {

-            worker.postMessage({ command: 'clear' });

-            window.URL.revokeObjectURL(blob);

-        };

-

-        this.getBuffers = function(cb) {

-            currCallback = cb || config.callback;

-            worker.postMessage({ command: 'getBuffers' });

-        };

-

-        this.exportWAV = function(cb, type) {

-            currCallback = cb || config.callback;

-            type = type || config.type || 'audio/wav';

-            if (!currCallback) throw new Error('[b2bRecorder]: Callback not set!');

-            worker.postMessage({

-                command: 'exportWAV',

-                type: type

-            });

-        };

-

-        this.exportMonoWAV = function(cb, type) {

-            currCallback = cb || config.callback;

-            type = type || config.type || 'audio/wav';

-            if (!currCallback) throw new Error('[b2bRecorder]: Callback not set!');

-            worker.postMessage({

-                command: 'exportMonoWAV',

-                type: type

-            });

-        };

-

-        worker.onmessage = function(e) {

-            var blob = e.data;

-            currCallback(blob);

-        };

-

-        source.connect(this.node);

-        this.node.connect(this.context.destination); // if the script node is not connected to an output the "onaudioprocess" event is not triggerd in Chrome

-

-    };

-

-    return Recorder;

-

-})

-.factory('b2bViewport', function() {

-  /* Source: https://gist.github.com/bjankord/2399828 */

-  var _viewportWidth = function() {

-    var vpw;

-    var webkit = (!(window.webkitConvertPointFromNodeToPage == null));

-    

-    // Webkit:

-    if ( webkit ) {

-      var vpwtest = document.createElement( "div" );

-      // Sets test div to width 100%, !important overrides any other misc. box model styles that may be set in the CSS

-      vpwtest.style.cssText = "width:100% !important; margin:0 !important; padding:0 !important; border:none !important;";

-      document.documentElement.insertBefore( vpwtest, document.documentElement.firstChild );

-      vpw = vpwtest.offsetWidth;

-      document.documentElement.removeChild( vpwtest );

-    }

-    // IE 6-8:

-    else if ( window.innerWidth === undefined ) { 

-      vpw = document.documentElement.clientWidth; 

-    }

-    // Other:

-    else{

-      vpw =  window.innerWidth;

-    }

-

-    return (vpw);

-  }

-  return {

-    viewportWidth: _viewportWidth

-  };

-})

-.directive('b2bWhenScrollEnds', function(b2bWhenScrollEndsConstants, $log) {

-    return {

-        restrict: 'A',

-        link: function (scope, element, attrs) {

-            /**

-            * Exposed Attributes:

-            *       threshold - integer - number of pixels before scrollbar hits end that callback is called

-            *       width - integer - override for element's width (px)

-            *       height - integer - override for element's height (px)

-            *       axis - string - x/y for scroll bar axis

-            */

-            var threshold = parseInt(attrs.threshold, 10) || b2bWhenScrollEndsConstants.threshold;

-

-            if (!attrs.axis || attrs.axis === '') {

-                $log.warn('axis attribute must be defined for b2bWhenScrollEnds.');

-                return;

-            }

-

-            if (attrs.axis === 'x') {

-                visibleWidth = parseInt(attrs.width, 10) || b2bWhenScrollEndsConstants.width;

-                if (element.css('width')) {

-                    visibleWidth = element.css('width').split('px')[0];  

-                }

-

-                element[0].addEventListener('scroll', function() {

-                    var scrollableWidth = element.prop('scrollWidth');

-                    if (scrollableWidth === undefined) {

-                        scrollableWidth = 1;

-                    }

-                    var hiddenContentWidth = scrollableWidth - visibleWidth;

-

-                    if (hiddenContentWidth - element[0].scrollLeft <= threshold) {

-                        /* Scroll almost at bottom, load more rows */

-                        scope.$apply(attrs.b2bWhenScrollEnds);

-                    }

-                });

-            } else if (attrs.axis === 'y') {

-                visibleHeight = parseInt(attrs.height, 10) || b2bWhenScrollEndsConstants.height;

-                if (element.css('width')) {

-                    visibleHeight = element.css('height').split('px')[0]; 

-                }

-

-                element[0].addEventListener('scroll', function() {

-                    var scrollableHeight = element.prop('scrollHeight');

-                    if (scrollableHeight === undefined) {

-                        scrollableHeight = 1;

-                    }

-                    var hiddenContentHeight = scrollableHeight - visibleHeight;

-

-                    if (hiddenContentHeight - element[0].scrollTop <= threshold) {

-                        /* Scroll almost at bottom, load more rows */

-                        scope.$apply(attrs.b2bWhenScrollEnds);

-                    }

-                });

-            }

-        }

-    };

-})

-

-.factory('$windowBind', ['$window', '$timeout', function($window, $timeout) {

-    var win = angular.element($window);

-    var _scroll = function (flag, callbackFunc, scope) {

-        scope.$watch(flag, function (val) {

-            $timeout(function () {

-                if (val) {

-                    win.bind('scroll', callbackFunc);

-                } else {

-                    win.unbind('scroll', callbackFunc);

-                }

-            });

-        });

-    };

-

-    var throttle = function(type, name, obj) {

-        obj = obj || window;

-        var running = false;

-        var func = function() {

-            if (running) { return; }

-            running = true;

-             requestAnimationFrame(function() {

-                obj.dispatchEvent(new CustomEvent(name));

-                running = false;

-            });

-        };

-        obj.addEventListener(type, func);

-    };

-

-    var _resize = function(callbackFunc, scope) {

-        throttle("resize", "optimizedResize");

-        window.addEventListener("optimizedResize", function(event) {

-            callbackFunc();

-            //win.bind(event, callbackFunc);

-            if (!scope.$$phase) {

-                scope.$digest();

-            }

-        });

-    };

-

-    var _click = function (flag, callbackFunc, scope) {

-        scope.$watch(flag, function (val) {

-            $timeout(function () {

-                if (val) {

-                    win.bind('click', callbackFunc);

-                } else {

-                    win.unbind('click', callbackFunc);

-                }

-            });

-        });

-    };

-

-    var _event = function (event, flag, callbackFunc, scope, timeoutFlag, timeoutValue) {

-        if (timeoutFlag) {

-            if (!(timeoutValue)) {

-                timeoutValue = 0;

-            }

-            scope.$watch(flag, function (newVal, oldVal) {

-                if (newVal !== oldVal) {

-                    $timeout(function () {

-                        if (newVal) {

-                            win.bind(event, callbackFunc);

-                        } else {

-                            win.unbind(event, callbackFunc);

-                        }

-                    }, timeoutValue);

-                }

-            });

-        } else {

-            scope.$watch(flag, function (newVal, oldVal) {

-                if (newVal !== oldVal) {

-                    if (newVal) {

-                        win.bind(event, callbackFunc);

-                    } else {

-                        win.unbind(event, callbackFunc);

-                    }

-                }

-            });

-        }

-    };

-

-    return {

-        click: _click,

-        scroll: _scroll,

-        event: _event, 

-        resize: _resize

-    };

-}])

-

-.factory('keymap', function () {

-    return {

-        KEY: {

-            TAB: 9,

-            ENTER: 13,

-            ESC: 27,

-            SPACE: 32,

-            LEFT: 37,

-            UP: 38,

-            RIGHT: 39,

-            DOWN: 40,

-            SHIFT: 16,

-            CTRL: 17,

-            ALT: 18,

-            PAGE_UP: 33,

-            PAGE_DOWN: 34,

-            HOME: 36,

-            END: 35,

-            BACKSPACE: 8,

-            DELETE: 46,

-            COMMAND: 91

-        },

-        MAP: { 91 : "COMMAND", 8 : "BACKSPACE" , 9 : "TAB" , 13 : "ENTER" , 16 : "SHIFT" , 17 : "CTRL" , 18 : "ALT" , 19 : "PAUSEBREAK" , 20 : "CAPSLOCK" , 27 : "ESC" , 32 : "SPACE" , 33 : "PAGE_UP", 34 : "PAGE_DOWN" , 35 : "END" , 36 : "HOME" , 37 : "LEFT" , 38 : "UP" , 39 : "RIGHT" , 40 : "DOWN" , 43 : "+" , 44 : "PRINTSCREEN" , 45 : "INSERT" , 46 : "DELETE", 48 : "0" , 49 : "1" , 50 : "2" , 51 : "3" , 52 : "4" , 53 : "5" , 54 : "6" , 55 : "7" , 56 : "8" , 57 : "9" , 59 : ";", 61 : "=" , 65 : "A" , 66 : "B" , 67 : "C" , 68 : "D" , 69 : "E" , 70 : "F" , 71 : "G" , 72 : "H" , 73 : "I" , 74 : "J" , 75 : "K" , 76 : "L", 77 : "M" , 78 : "N" , 79 : "O" , 80 : "P" , 81 : "Q" , 82 : "R" , 83 : "S" , 84 : "T" , 85 : "U" , 86 : "V" , 87 : "W" , 88 : "X" , 89 : "Y" , 90 : "Z", 96 : "0" , 97 : "1" , 98 : "2" , 99 : "3" , 100 : "4" , 101 : "5" , 102 : "6" , 103 : "7" , 104 : "8" , 105 : "9", 106 : "*" , 107 : "+" , 109 : "-" , 110 : "." , 111 : "/", 112 : "F1" , 113 : "F2" , 114 : "F3" , 115 : "F4" , 116 : "F5" , 117 : "F6" , 118 : "F7" , 119 : "F8" , 120 : "F9" , 121 : "F10" , 122 : "F11" , 123 : "F12", 144 : "NUMLOCK" , 145 : "SCROLLLOCK" , 186 : ";" , 187 : "=" , 188 : "," , 189 : "-" , 190 : "." , 191 : "/" , 192 : "`" , 219 : "[" , 220 : "\\" , 221 : "]" , 222 : "'"

-        },

-        isControl: function (e) {

-            var k = e.keyCode;

-            switch (k) {

-            case this.KEY.COMMAND:

-            case this.KEY.SHIFT:

-            case this.KEY.CTRL:

-            case this.KEY.ALT:

-                return true;

-            default:;

-            }

-

-            if (e.metaKey) {

-                return true;

-            }

-

-            return false;

-        },

-        isFunctionKey: function (k) {

-            k = k.keyCode ? k.keyCode : k;

-            return k >= 112 && k <= 123;

-        },

-        isVerticalMovement: function (k) {

-            return ~[this.KEY.UP, this.KEY.DOWN].indexOf(k);

-        },

-        isHorizontalMovement: function (k) {

-            return ~[this.KEY.LEFT, this.KEY.RIGHT, this.KEY.BACKSPACE, this.KEY.DELETE].indexOf(k);

-        },

-        isAllowedKey: function (k) {

-            return (~[this.KEY.SPACE, this.KEY.ESC, this.KEY.ENTER].indexOf(k)) || this.isHorizontalMovement(k) || this.isVerticalMovement(k);

-        },

-        isNumericKey: function (e) {

-            var k = e.keyCode;

-            if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105)) {

-                return true;

-            } else {

-                return false;

-            }

-        },

-        isAlphaNumericKey: function (e) {

-            var k = e.keyCode;

-            if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 65 && k <= 90)) {

-                return true;

-            } else {

-                return false;

-            }

-        }

-    };

-})

-

-.factory('$isElement', [function () {

-    var isElement = function (currentElem, targetElem, alternateElem) {

-        if (currentElem[0] === targetElem[0]) {

-            return true;

-        } else if (currentElem[0] === alternateElem[0]) {

-            return false;

-        } else {

-            return isElement((currentElem.parent()[0] && currentElem.parent()) || targetElem, targetElem, alternateElem);

-        }

-    };

-

-    return isElement;

-}])

-

-.factory('events', function () {

-    var _stopPropagation = function (evt) {

-        if (evt.stopPropagation) {

-            evt.stopPropagation();

-        } else {

-            evt.returnValue = false;

-        }

-    };

-    var _preventDefault = function (evt) {

-        if (evt.preventDefault) {

-            evt.preventDefault();

-        } else {

-            evt.returnValue = false;

-        }

-    }

-    return {

-        stopPropagation: _stopPropagation,

-        preventDefault: _preventDefault

-    };

-})

-

-

-.factory('$documentBind', ['$document', '$timeout', function ($document, $timeout) {

-    var _click = function (flag, callbackFunc, scope) {

-        scope.$watch(flag, function (val) {

-            $timeout(function () {

-                if (val) {

-                    $document.bind('click', callbackFunc);

-                } else {

-                    $document.unbind('click', callbackFunc);

-                }

-            });

-        });

-    };

-

-    var _scroll = function (flag, callbackFunc, scope) {

-        scope.$watch(flag, function (val) {

-            $timeout(function () {

-                if (val) {

-                    $document.bind('scroll', callbackFunc);

-                } else {

-                    $document.unbind('scroll', callbackFunc);

-                }

-            });

-        });

-    };

-

-    var _event = function (event, flag, callbackFunc, scope, timeoutFlag, timeoutValue) {

-        if (timeoutFlag) {

-            if (!(timeoutValue)) {

-                timeoutValue = 0;

-            }

-            scope.$watch(flag, function (newVal, oldVal) {

-                if (newVal !== oldVal) {

-                    $timeout(function () {

-                        if (newVal) {

-                            $document.bind(event, callbackFunc);

-                        } else {

-                            $document.unbind(event, callbackFunc);

-                        }

-                    }, timeoutValue);

-                }

-            });

-        } else {

-            scope.$watch(flag, function (newVal, oldVal) {

-                if (newVal !== oldVal) {

-                    if (newVal) {

-                        $document.bind(event, callbackFunc);

-                    } else {

-                        $document.unbind(event, callbackFunc);

-                    }

-                }

-            });

-        }

-    };

-

-    return {

-        click: _click,

-        scroll: _scroll,

-        event: _event

-    };

-}])

-

-.directive('b2bOnlyNums', function (keymap) {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elm, attrs, ctrl) {

-            var maxChars = attrs.b2bOnlyNums ? attrs.b2bOnlyNums : 4;

-            elm.on('keydown', function (event) {

-                if ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which <= 105)) {

-                    // check for maximum characters allowed

-                    if (elm.val().length < maxChars){

-                        return true;

-                    } else {

-                        event.preventDefault();

-                        return false;

-                    }

-                } else if ([8, 9, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {

-                    // to allow backspace, tab, enter, escape, arrows

-                    return true;

-                } else if (event.altKey || event.ctrlKey) {

-                    // to allow alter, control, and shift keys

-                    return true;

-                } else {

-                    // to stop others

-                    event.preventDefault();

-                    return false;

-                }

-            });

-

-            var validateString = function (value) {

-                if (angular.isUndefined(value) || value === null || value === '') {

-                    return ctrl.$modelValue;

-                }

-                return value;

-            };

-            ctrl.$parsers.unshift(validateString);

-        }

-    }

-})

-

-.directive('b2bKeyupClick', [ function () {

-    return {

-        restrict: 'A',

-        link: function (scope, elem, attr) {

-            var keyCode = [];

-            attr.$observe('b2bKeyupClick', function (value) {

-                if (value) {

-                    keyCode = value.split(',');

-                }

-            });

-            elem.bind('keydown keyup', function (ev) {

-                var keyCodeCondition = function () {

-                    var flag = false;

-                    if (!(ev.keyCode)) {

-                        if (ev.which) {

-                            ev.keyCode = ev.which;

-                        } else if (ev.charCode) {

-                            ev.keyCode = ev.charCode;

-                        }

-                    }

-                    if ((ev.keyCode && keyCode.indexOf(ev.keyCode.toString()) > -1)) {

-                        flag = true;

-                    }

-                    return flag;

-                };

-                if (ev.type === 'keydown' && keyCodeCondition()) {

-                    ev.preventDefault();

-                }

-                else if (ev.type === 'keyup' && keyCodeCondition()) {

-                    elem[0].click();

-                }

-            });

-        }

-    };

-}])

-

-.factory('b2bDOMHelper', function() {

-

-    var _isTabable = function(node) {

-        var element = angular.element(node);

-        var tagName = element[0].tagName.toUpperCase();

-

-        if (isHidden(element)) {

-            return false;

-        }

-        if (element.attr('tabindex') !== undefined) {

-            return (parseInt(element.attr('tabindex'), 10) >= 0);

-        }

-        if (tagName === 'A' || tagName === 'AREA' || tagName === 'BUTTON' || tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {

-            if (tagName === 'A' || tagName === 'AREA') {

-                // anchors/areas without href are not focusable

-                return (element[0].href !== '');

-            }

-            return !(element[0].disabled || element[0].readOnly);

-        }

-        return false;

-    };

-

-    function isValidChild(child) {

-        return child.nodeType == 1 && child.nodeName != 'SCRIPT' && child.nodeName != 'STYLE';

-    }

-    

-    function isHidden(obj) {

-        var elem = angular.element(obj);

-        var elemStyle = undefined;

-        if(obj instanceof HTMLElement){

-            elemStyle = window.getComputedStyle(obj);

-        }

-        else {

-            elemStyle = window.getComputedStyle(obj[0]);

-        }

-        return elem.hasClass('ng-hide') || elem.css('display') === 'none' || elemStyle.display === 'none' || elemStyle.visibility === 'hidden' || elem.css('visibility') === 'hidden';

-    }

-

-    function hasValidParent(obj) {

-        return (isValidChild(obj) && obj.parentElement.nodeName !== 'BODY');

-    }

-

-    function traverse(obj, fromTop) {

-        var obj = obj || document.getElementsByTagName('body')[0];

-        if (isValidChild(obj) && _isTabable(obj)) {

-            return obj;

-        }

-        // If object is hidden, skip it's children

-        if (isValidChild(obj) && isHidden(obj)) {

-            return undefined;

-        } 

-        // If object is hidden, skip it's children

-        if (angular.element(obj).hasClass('ng-hide')) {

-            return undefined;

-        }  

-        if (obj.hasChildNodes()) {

-            var child;

-            if (fromTop) {

-                child = obj.firstChild;

-            } else {

-                child = obj.lastChild;

-            }

-            while(child) {

-                var res =  traverse(child, fromTop);

-                if(res){

-                    return res;

-                }

-                else{

-                    if (fromTop) {

-                        child = child.nextSibling;

-                    } else {

-                        child = child.previousSibling;

-                    }

-                }

-            }

-        }

-        else{

-            return undefined;

-        }

-    }

-

-    var _previousElement = function(el, isFocusable){

-

-        var elem = el;

-        if (el.hasOwnProperty('length')) {

-            elem = el[0];

-        }

-

-        var parent = elem.parentElement;

-        var previousElem = undefined;

-

-        if(isFocusable) {

-            if (hasValidParent(elem)) {

-                var siblings = angular.element(parent).children();

-                if (siblings.length > 0) {

-                    // Good practice to splice out the elem from siblings if there, saving some time.

-                    // We allow for a quick check for jumping to parent first before removing. 

-                    if (siblings[0] === elem) {

-                        // If we are looking at immidiate parent and elem is first child, we need to go higher

-                        var e = _previousElement(angular.element(elem).parent(), isFocusable);

-                        if (_isTabable(e)) {

-                            return e;

-                        }

-                    } else {

-                        // I need to filter myself and any nodes next to me from the siblings

-                        var indexOfElem = Array.prototype.indexOf.call(siblings, elem);

-                        siblings = Array.prototype.filter.call(siblings, function(item, itemIndex) {

-                            if (!angular.equals(elem, item) && itemIndex < indexOfElem) {

-                                return true;

-                            }

-                        });

-                    }

-                    // We need to search backwards

-                    for (var i = 0; i <= siblings.length-1; i++) {//for (var i = siblings.length-1; i >= 0; i--) {

-                        var ret = traverse(siblings[i], false);

-                        if (ret !== undefined) {

-                            return ret;

-                        }

-                    }

-

-                    var e = _previousElement(angular.element(elem).parent(), isFocusable);

-                    if (_isTabable(e)) {

-                        return e;

-                    }

-                }

-            }

-        } else {

-            var siblings = angular.element(parent).children();

-            if (siblings.length > 1) {

-                // Since indexOf is on Array.prototype and parent.children is a NodeList, we have to use call()

-                var index = Array.prototype.indexOf.call(siblings, elem);

-                previousElem = siblings[index-1];

-            }

-        }

-        return previousElem;

-    };

-

-    var _lastTabableElement = function(el) {

-        /* This will return the first tabable element from the parent el */

-        var elem = el;

-        if (el.hasOwnProperty('length')) {

-            elem = el[0];

-        }

-

-        return traverse(elem, false);

-    };

-

-    var _firstTabableElement = function(el) {

-        /* This will return the first tabable element from the parent el */

-        var elem = el;

-        if (el.hasOwnProperty('length')) {

-            elem = el[0];

-        }

-

-        return traverse(elem, true);

-    };

-

-    var _isInDOM = function(obj) {

-      return document.documentElement.contains(obj);

-    }

-

-    return {

-        firstTabableElement: _firstTabableElement,

-        lastTabableElement: _lastTabableElement,

-        previousElement: _previousElement,

-        isInDOM: _isInDOM,

-        isTabable: _isTabable,

-        isHidden: isHidden

-    };

-})

-

-.factory('trapFocusInElement', ['$document', '$isElement', 'DOMHelper', 'keymap', function ($document, $isElement, DOMHelper, keymap) {

-    var elementStack = [];

-    var stackHead = undefined;

-    var trapFocusInElement = function (flag) {

-        var bodyElements = $document.find('body').children();

-

-        var firstTabableElement = angular.element(DOMHelper.firstTabableElement(stackHead));

-        var lastTabableElement = angular.element(DOMHelper.lastTabableElement(stackHead));

-

-        var trapKeyboardFocusInFirstElement = function (e) {

-            if (!e.keyCode) {

-                e.keyCode = e.which;

-            }

-

-            if (e.shiftKey === true && e.keyCode === keymap.KEY.TAB) {

-                lastTabableElement[0].focus();

-                e.preventDefault(e);

-                e.stopPropagation(e);

-            }

-

-        };

-

-        var trapKeyboardFocusInLastElement = function (e) {

-            if (!e.keyCode) {

-                e.keyCode = e.which;

-            }

-

-            if (e.shiftKey === false && e.keyCode === keymap.KEY.TAB) {

-                firstTabableElement[0].focus();

-                e.preventDefault(e);

-                e.stopPropagation(e);

-            }

-        };

-

-        if (flag) {

-            for (var i = 0; i < bodyElements.length; i++) {

-                if (bodyElements[i] !== stackHead[0]) {

-                    bodyElements.eq(i).attr('aria-hidden', true);

-                }

-            }

-            firstTabableElement.bind('keydown', trapKeyboardFocusInFirstElement);

-            lastTabableElement.bind('keydown', trapKeyboardFocusInLastElement);

-        } else {

-            for (var j = 0; j < bodyElements.length; j++) {

-                if (bodyElements[j] !== stackHead[0]) {

-                    bodyElements.eq(j).removeAttr('aria-hidden');

-                }

-            }

-            firstTabableElement.unbind('keydown', trapKeyboardFocusInFirstElement);

-            lastTabableElement.unbind('keydown', trapKeyboardFocusInLastElement);

-        }

-    };

-    var toggleTrapFocusInElement = function (flag, element) {

-        if (angular.isDefined(flag) && angular.isDefined(element)) {

-            if (angular.isUndefined(stackHead)) {

-                stackHead = element;

-                trapFocusInElement(flag);

-            } else {

-                if (flag) {

-                    trapFocusInElement(false);

-                    elementStack.push(stackHead);

-                    stackHead = element;

-                    trapFocusInElement(true);

-                } else {

-                    if (stackHead.prop('$$hashKey') === element.prop('$$hashKey')) {

-                        trapFocusInElement(false);

-                        stackHead = elementStack.pop();

-                        if (angular.isDefined(stackHead)) {

-                            trapFocusInElement(true);

-                        }

-                    }

-                }

-            }

-        }

-    };

-

-    return toggleTrapFocusInElement;

-}])

-

-.factory('DOMHelper', function () {

-

-    var _isTabable = function (node) {

-        var element = angular.element(node);

-        var tagName = element[0].tagName.toUpperCase();

-

-        if (isHidden(element)) {

-            return false;

-        }

-        if (element.attr('tabindex') !== undefined) {

-            return (parseInt(element.attr('tabindex'), 10) >= 0);

-        }

-        if (tagName === 'A' || tagName === 'AREA' || tagName === 'BUTTON' || tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {

-            if (tagName === 'A' || tagName === 'AREA') {

-                // anchors/areas without href are not focusable

-                return (element[0].href !== '');

-            }

-            return !(element[0].disabled || element[0].readOnly);

-        }

-        return false;

-    };

-

-    function isValidChild(child) {

-        return child.nodeType == 1 && child.nodeName != 'SCRIPT' && child.nodeName != 'STYLE';

-    }

-

-    function isHidden(obj) {

-        var elem = angular.element(obj);

-        var style;

-        try {

-            style = window.getComputedStyle(obj);

-        }

-        catch(err) {

-            style = window.getComputedStyle(obj[0]);

-        }

-

-        // getComputedStyle() for Zepto object returns null

-        if (style === null){

-            return elem.hasClass('ng-hide') || elem.css('display') === 'none';

-        }

-

-        return elem.hasClass('ng-hide') || elem.css('display') === 'none' || style.display === 'none' || style.display === 'hidden';

-    }

-

-    function traverse(obj, fromTop) {

-        var obj = obj || document.getElementsByTagName('body')[0];

-

-        if (isValidChild(obj) && _isTabable(obj)) {

-            return obj;

-        }

-

-        // If object is hidden, skip it's children

-        if (isValidChild(obj) && isHidden(obj)) {

-            return undefined;

-        }

-        // If object is hidden, skip it's children

-        if (angular.element(obj).hasClass('ng-hide')) {

-            return undefined;

-        }

-

-        if (obj.hasChildNodes()) {

-            var child;

-            if (fromTop) {

-                child = obj.firstChild;

-            } else {

-                child = obj.lastChild;

-            }

-            while (child) {

-                var res = traverse(child, fromTop);

-                if (res) {

-                    return res;

-                } else {

-                    if (fromTop) {

-                        child = child.nextSibling;

-                    } else {

-                        child = child.previousSibling;

-                    }

-                }

-            }

-        } else {

-            return undefined;

-        }

-    }

-

-    var _lastTabableElement = function (el) {

-        /* This will return the last tabable element from the parent el */

-        var elem = el;

-        if (el.hasOwnProperty('length')) {

-            elem = el[0];

-        }

-

-        return traverse(elem, false);

-    };

-

-    var _firstTabableElement = function (el) {

-        /* This will return the first tabable element from the parent el */

-        var elem = el;

-        if (el.hasOwnProperty('length')) {

-            elem = el[0];

-        }

-

-        return traverse(elem, true);

-    };

-

-    return {

-        firstTabableElement: _firstTabableElement,

-        lastTabableElement: _lastTabableElement,

-        isTabable: _isTabable

-    };

-})

-

-.factory('windowOrientation', ['$window', function ($window) {

-    var _isPotrait = function () {

-        if ($window.innerHeight > $window.innerWidth) {

-            return true;

-        } else {

-            return false;

-        }

-    };

-    var _isLandscape = function () {

-        if ($window.innerHeight < $window.innerWidth) {

-            return true;

-        } else {

-            return false;

-        }

-    };

-

-    return {

-        isPotrait: _isPotrait,

-        isLandscape: _isLandscape

-    };

-}])

-

-.directive('b2bNextElement', function() {

-  return {

-    restrict: 'A',

-    transclude: false,

-    link: function (scope, elem, attr, ctrls) {

-

-        var keys = attr.b2bNextElement.split(',');

-

-        elem.bind('keydown', function (e) {

-            var nextElement = elem.next();

-            if(e.keyCode == 39 || e.keyCode == 40){ // if e.keyCode in keys

-                if(nextElement.length) {

-                    e.preventDefault();

-                    nextElement[0].focus();

-                }

-            }

-        });

-    }

-  }

-})

-

-.directive('b2bAccessibilityClick', [function () {

-    return {

-        restrict: 'A',

-        link: function (scope, elem, attr, ctrl) {

-            var keyCode = [];

-            attr.$observe('b2bAccessibilityClick', function (value) {

-                if (value) {

-                    keyCode = value.split(',');

-                }

-            });

-            elem.bind('keydown keypress', function (ev) {

-                var keyCodeCondition = function () {

-                    var flag = false;

-                    if (!(ev.keyCode)) {

-                        if (ev.which) {

-                            ev.keyCode = ev.which; 

-                        } else if (ev.charCode) {

-                            ev.keyCode = ev.charCode;

-                        }

-                    }

-                    if ((ev.keyCode && keyCode.indexOf(ev.keyCode.toString()) > -1)) {

-                        flag = true;

-                    }

-                    return flag;

-                };

-                if (keyCode.length > 0 && keyCodeCondition()) {

-                    elem[0].click();

-                    ev.preventDefault();

-                }

-            });

-        }

-    };

-}])

-

-.directive('b2bReset', ['$compile', function ($compile) {

-        return {

-            restrict: 'A',

-            require: ['?ngModel', 'b2bReset'],

-            controller: ['$scope', function ($scope) {

-                var resetButton = angular.element('<button type="button" class="reset-field" tabindex="-1" aria-label="Click to reset" aria-hidden="true" role="button"></button>');

-

-                this.getResetButton = function () {

-                    return resetButton;

-                };

-            }],

-            link: function (scope, element, attrs, ctrls) {

-

-                var ngModelCtrl = ctrls[0];

-                var ctrl = ctrls[1];

-

-                var resetButton = ctrl.getResetButton();

-

-

-                resetButton.on('click', function () {

-                    element[0].value = '';

-

-                    if (ngModelCtrl) {

-                        if (attrs.b2bReset) {

-                            ngModelCtrl.$setViewValue(attrs.b2bReset);

-                        } else {

-                            ngModelCtrl.$setViewValue('');

-                        }

-                        element[0].value = ngModelCtrl.$viewValue;

-                        ngModelCtrl.$render();

-                        scope.$digest();

-                    }

-                    element[0].focus();

-                    element[0].select();

-                });

-

-                var addResetButton = function () {

-                    element.after(resetButton);

-                    element.unbind('focus input', addResetButton);

-                };

-

-                element.bind('focus input', addResetButton);

-            }

-        };

-    }])

-

-.directive('b2bPrevElement', ['b2bDOMHelper', 'keymap', function (b2bDOMHelper, keymap) {

-  return {

-    restrict: 'A',

-    transclude: false,

-    link: function (scope, elem, attr) {

-

-        elem.bind('keydown', function (e) {

-            if(e.keyCode == 37 || e.keyCode == 38){

-                var prev = b2bDOMHelper.previousElement(elem, false);

-                if(prev !== undefined) {

-                    e.preventDefault();

-                    prev.focus();

-                }

-            }

-        });

-    }

-  }

-}])

-/**

- * @param {integer} delay - Timeout before first and last focusable elements are found

- * @param {boolean} trigger - A variable on scope that will trigger refinding first/last focusable elements 

- */

-.directive('b2bTrapFocusInsideElement', ['$timeout', 'b2bDOMHelper', 'keymap', 'events', function ($timeout, b2bDOMHelper, keymap, events) {

-    return {

-        restrict: 'A',

-        transclude: false,

-        link: function (scope, elem, attr) {

-

-            var delay = parseInt(attr.delay, 10) || 10;

-

-            /* Before opening modal, find the focused element */

-            var firstTabableElement = undefined,

-                lastTabableElement = undefined;

-                

-            function init() {

-                $timeout(function () {

-                    firstTabableElement = b2bDOMHelper.firstTabableElement(elem);

-                    lastTabableElement = b2bDOMHelper.lastTabableElement(elem);

-                    angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);

-                    angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);

-                }, delay, false);

-            }

-

-            if (attr.trigger !== undefined) {

-                scope.$watch('trigger', function() {

-                    if (scope.trigger) {

-                        init();

-                    }

-                });

-            }

-

-            var firstTabableElementKeyhandler = function(e) {

-                if (!e.keyCode) {

-                    e.keyCode = e.which;

-                }

-                if (e.keyCode === keymap.KEY.TAB && e.shiftKey) {

-                    if (attr.trapFocusInsideElement === 'true') {

-                        var temp = b2bDOMHelper.lastTabableElement(elem);

-                        if (lastTabableElement !== temp) {

-                            // Unbind keydown handler on lastTabableElement

-                            angular.element(lastTabableElement).unbind('keydown', lastTabableElementKeyhandler);

-                            lastTabableElement = temp;

-                            angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);

-                        }

-                    }

-                    lastTabableElement.focus();

-                    events.preventDefault(e);

-                    events.stopPropagation(e);

-                }

-            };

-

-            var lastTabableElementKeyhandler = function(e) {

-                if (!e.keyCode) {

-                    e.keyCode = e.which;

-                }

-                if (e.keyCode === keymap.KEY.TAB && !e.shiftKey) {

-                    if (attr.trapFocusInsideElement === 'true') {

-                        var temp = b2bDOMHelper.firstTabableElement(elem);

-                        if (firstTabableElement !== temp) {

-                            // Unbind keydown handler on firstTabableElement

-                            angular.element(firstTabableElement).unbind('keydown', firstTabableElementKeyhandler);

-                            firstTabableElement = temp;

-                            angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);

-                        }

-                    }

-                    firstTabableElement.focus();

-                    events.preventDefault(e);

-                    events.stopPropagation(e);

-                }

-            };

-

-            init();

-        }

-    };

-}])

-

-.factory('trapFocusInElement', ['$document', '$isElement', 'DOMHelper', 'keymap', '$interval', function ($document, $isElement, DOMHelper, keymap, $interval) {

-    var elementStack = [];

-    var stackHead = undefined;

-    var stopInterval = undefined;

-    var intervalRequired = false;

-    var interval = 1000;

-    var firstTabableElement, lastTabableElement;

-

-    var trapKeyboardFocusInFirstElement = function (e) {

-        if (!e.keyCode) {

-            e.keyCode = e.which;

-        }

-

-        if (e.shiftKey === true && e.keyCode === keymap.KEY.TAB) {

-            lastTabableElement[0].focus();

-            e.preventDefault(e);

-            e.stopPropagation(e);

-        }

-

-    };

-

-    var trapKeyboardFocusInLastElement = function (e) {

-        if (!e.keyCode) {

-            e.keyCode = e.which;

-        }

-

-        if (e.shiftKey === false && e.keyCode === keymap.KEY.TAB) {

-            firstTabableElement[0].focus();

-            e.preventDefault(e);

-            e.stopPropagation(e);

-        }

-    };

-

-    var trapFocusInElement = function (flag, firstTabableElementParam, lastTabableElementParam) {

-        var bodyElements = $document.find('body').children();

-

-        firstTabableElement = firstTabableElementParam ? firstTabableElementParam : angular.element(DOMHelper.firstTabableElement(stackHead));

-        lastTabableElement = lastTabableElementParam ? lastTabableElementParam : angular.element(DOMHelper.lastTabableElement(stackHead));

-

-        if (flag) {

-            for (var i = 0; i < bodyElements.length; i++) {

-                if (bodyElements[i] !== stackHead[0]) {

-                    bodyElements.eq(i).attr('aria-hidden', true);

-                }

-            }

-            firstTabableElement.bind('keydown', trapKeyboardFocusInFirstElement);

-            lastTabableElement.bind('keydown', trapKeyboardFocusInLastElement);

-        } else {

-            for (var j = 0; j < bodyElements.length; j++) {

-                if (bodyElements[j] !== stackHead[0]) {

-                    bodyElements.eq(j).removeAttr('aria-hidden');

-                }

-            }

-            firstTabableElement.unbind('keydown', trapKeyboardFocusInFirstElement);

-            lastTabableElement.unbind('keydown', trapKeyboardFocusInLastElement);

-        }

-

-        if (intervalRequired && flag) {

-            stopInterval = $interval(function () {

-                var firstTabableElementTemp = angular.element(DOMHelper.firstTabableElement(stackHead));

-                var lastTabableElementTemp = angular.element(DOMHelper.lastTabableElement(stackHead));

-                if (firstTabableElementTemp[0] !== firstTabableElement[0] || lastTabableElementTemp[0] !== lastTabableElement[0]) {

-                    $interval.cancel(stopInterval);

-                    stopInterval = undefined;

-                    trapFocusInElement(false, firstTabableElement, lastTabableElement);

-                    trapFocusInElement(true, firstTabableElementTemp, lastTabableElementTemp);

-                }

-            }, interval);

-        } else {

-            if (stopInterval) {

-                $interval.cancel(stopInterval);

-                stopInterval = undefined;

-            }

-        }

-    };

-    var toggleTrapFocusInElement = function (flag, element, intervalRequiredParam, intervalParam) {

-        intervalRequired = intervalRequiredParam ? intervalRequiredParam : intervalRequired;

-        interval = intervalParam ? intervalParam : interval;

-        if (angular.isDefined(flag) && angular.isDefined(element)) {

-            if (flag && angular.isUndefined(stackHead)) {

-                stackHead = element;

-                trapFocusInElement(flag);

-            } else {

-                if (flag) {

-                    trapFocusInElement(false);

-                    elementStack.push(stackHead);

-                    stackHead = element;

-                    trapFocusInElement(true);

-                } else {

-                    if (angular.isDefined(stackHead) && (stackHead[0] === element[0])) {

-                        trapFocusInElement(false);

-                        stackHead = elementStack.pop();

-                        if (angular.isDefined(stackHead)) {

-                            trapFocusInElement(true);

-                        }

-                    }

-                }

-            }

-        } else {

-            if (angular.isDefined(stackHead)) {

-                trapFocusInElement(false, firstTabableElement, lastTabableElement);

-                trapFocusInElement(true);

-            }

-        }

-    };

-

-    return toggleTrapFocusInElement;

-}])

-

-.directive('b2bSetNextFocusOn', ['b2bDOMHelper', '$timeout', function(b2bDOMHelper, $timeout) {

-    return {

-        restrict: 'A',

-        scope: true,

-        link: function (scope, elem, attr) {

-            elem.bind('click', function(){

-                var firstFocusableElement = undefined; 

-                var containerElem = undefined; 

-                var containerArray = [];

-                var timeout = parseInt(attr.setNextFocusTimeout, 0) | 100;

-                var index = parseInt(attr.b2bSetNextFocusIndex, 0) | 0;

-

-                 /*

-                  *Fix for IE7 and lower 

-                  *polyfill src: https://github.com/HubSpot/pace/issues/102

-                  */

-                if (!document.querySelectorAll) {

-                    document.querySelectorAll = function (selectors) {

-                        var style = document.createElement('style'), elements = [], element;

-                        document.documentElement.firstChild.appendChild(style);

-                        document._qsa = [];

-

-                        style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';

-                        window.scrollBy(0, 0);

-                        style.parentNode.removeChild(style);

-

-                        while (document._qsa.length) {

-                            element = document._qsa.shift();

-                            element.style.removeAttribute('x-qsa');

-                            elements.push(element);

-                        }

-                        document._qsa = null;

-                        return elements;

-                    };

-                }

-

-                if (attr.b2bSetNextFocusOn === '') {

-                    return;

-                } else {

-                    containerArray = attr.b2bSetNextFocusOn.split(' ');

-                }

-                $timeout(function(){

-                    var i = 0;

-                    do { // cycles thru containerArray until finds a match in DOM to set focus to

-                        containerElem = document.querySelectorAll(containerArray[i])[index]; 

-                        i++;

-                    } while ( (!containerElem) && (i < containerArray.length) );

-                    if(containerElem){

-                        if (!angular.isDefined(firstFocusableElement)) { 

-                            firstFocusableElement = b2bDOMHelper.firstTabableElement(containerElem); 

-                        }

-                        firstFocusableElement.focus(); 

-                    }

-                }, timeout, false)

-            });

-        }

-

-    };

-}])

-

-.directive('b2bInputAllow', [function() {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elem, attr, ctrl) {

-            var regexExpression = null;

-            attr.$observe('b2bInputAllow', function (value) {

-                if (value) {

-                    regexExpression = new RegExp(value);

-                }

-            });

-            var isValid = function(str) {

-                if (regexExpression !== null) {

-                    return regexExpression.test(str);

-                }

-                return false;

-            };

-            elem.bind('keypress', function($event) {

-                var charcode = String.fromCharCode($event.which || $event.keyCode);

-                if (!isValid(charcode)) {

-                    $event.preventDefault();

-                    $event.stopPropagation();

-                }

-            });

-            elem.bind('input', function (evt) {

-                var inputString = ctrl.$viewValue;

-                if (isValid(inputString)) {

-                    ctrl.$setViewValue(inputString);

-                    ctrl.$render();

-                    scope.$apply();

-                }

-            });

-        }

-    };

-}])

-

-.directive('b2bInputDeny', [function() {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elem, attr, ctrl) {

-            var regexExpression = null;

-            attr.$observe('b2bInputDeny', function (value) {

-                if (value) {

-                    regexExpression = new RegExp(value, 'g');

-                }

-            });

-            elem.bind('input', function () {

-                var inputString = ctrl.$viewValue && ctrl.$viewValue.replace(regexExpression, '');

-                if (inputString !== ctrl.$viewValue) {

-                    ctrl.$setViewValue(inputString);

-                    ctrl.$render();

-                    scope.$apply();

-                }

-            });

-        }

-    };

-}])

-

-.directive('b2bDragonInput', [function() {

-    return {

-        restrict: 'A',

-        require: 'ngModel',

-        link: function (scope, elem, attr, ctrl) {

-            elem.on('focus keyup', function(){

-                elem.triggerHandler('change');

-            });

-        }

-    };

-}])

-

-.directive('b2bKey', ['b2bUtilitiesConfig', '$timeout', 'keymap', function (b2bUtilitiesConfig, $timeout, keymap) {

-    return {

-        restrict: 'EA',

-        controller: ['$scope', '$element', '$attrs', function ($scope, $element,attr) {

-            this.childElements = [];

-            this.disableNodes = {};

-            this.enableSearch = attr.enableSearch !== undefined ? true : b2bUtilitiesConfig.enableSearch;

-            this.circularTraversal = attr.circularTraversal !== undefined ? true : b2bUtilitiesConfig.circularTraversal;

-            this.counter = -1;

-            if (this.enableSearch) {

-                this.searchKeys = [];

-            }

-            var searchString = '';

-

-            var selfCtrl = this;

-

-            this.childElementsList = [];

-

-            this.b2bKeyID = "";

-

-            if (angular.isDefined(attr.b2bKey)) {

-                this.b2bKeyID = attr.b2bKey;

-            }

-

-            this.calculateChildElementsList = function () {

-                return $element[0].querySelectorAll("[b2b-key-item='" + this.b2bKeyID + "']:not([disabled])");

-            };

-

-            this.resetChildElementsList = function () {

-                return $timeout(function () {

-                    selfCtrl.childElementsList = selfCtrl.calculateChildElementsList();

-                });

-            };

-

-            this.resetChildElementsList();

-

-            $scope.$on('b2b-key-reset-child-elements-list', function () {

-                selfCtrl.resetChildElementsList();

-            });

-

-

-            this.registerElement = function (childElement, searchKey) {

-                this.childElements.push(childElement);

-                if (this.enableSearch) {

-                    this.searchKeys.push(searchKey);

-                }

-                var count = this.childElements.length - 1;

-                this.maxLength = count + 1;

-                return count;

-            };

-            this.toggleDisable = function (count, state) {

-                this.disableNodes[count] = state;

-            };

-            this.searchElement = function (searchExp) {

-                var regex = new RegExp("\\b" + searchExp, "gi");

-                var position = this.searchKeys.regexIndexOf(regex, this.counter + 1, true);

-                if (position > -1) {

-                    this.counter = position;

-                    this.moveFocus(this.counter);

-                }

-            };

-            this.startTimer = function (time) {

-                if (searchString === '') {

-                    $timeout(function () {

-                        searchString = '';

-                    }, time);

-                }

-            };

-            this.resetCounter = function (count) {

-                this.counter = count;

-            };

-            this.moveNext = function (count) {

-                this.counter = (this.counter + count) < this.maxLength ? this.counter + count : (this.circularTraversal ? 0 : this.counter);

-                if (this.disableNodes[this.counter]) {

-                    if ((this.counter + count) < this.maxLength) {

-                        this.moveNext(count);

-                    }

-                } else {

-                    this.moveFocus(this.counter);

-                }

-            };

-            this.movePrev = function (count) {

-                this.counter = (this.counter - count) > -1 ? this.counter - count : (this.circularTraversal ? this.maxLength-1 : this.counter);

-                if (this.disableNodes[this.counter]) {

-                    if ((this.counter - count) > -1) {

-                        this.movePrev(count);

-                    }

-                } else {

-                    this.moveFocus(this.counter);

-                }

-            };

-            this.moveFocus = function (index) {

-                this.childElements[index][0].focus();

-            };

-

-            this.keyDownHandler = function (ev, count) {

-                if (angular.isDefined(count) && !isNaN(count) && count !== this.counter) {

-                    this.resetCounter(count);

-                }

-                if (!ev.keyCode) {

-                    if (ev.which) {

-                        ev.keyCode = ev.which;

-                    } else if (ev.charCode) {

-                        ev.keyCode = ev.charCode;

-                    }

-                }

-                if (ev.keyCode) {

-                    if (this.prev && this.prev.indexOf(ev.keyCode.toString()) > -1) {

-                        this.movePrev(1);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (this.next && this.next.indexOf(ev.keyCode.toString()) > -1) {

-                        this.moveNext(1);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (this.up && this.up.indexOf(ev.keyCode.toString()) > -1) {

-                        if (this.type === 'table') {

-                            this.movePrev(this.columns);

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        }

-                    } else if (this.down && this.down.indexOf(ev.keyCode.toString()) > -1) {

-                        if (this.type === 'table') {

-                            this.moveNext(this.columns);

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        }

-                    } else if (ev.keyCode === keymap.KEY.HOME) {

-                        var firstIndex = 0;

-                        while (this.disableNodes[firstIndex] !== false) {

-                            firstIndex++;

-                        };

-                        var count = this.counter - firstIndex;

-                        this.movePrev(count);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode === keymap.KEY.END) {

-                        var lastIndex = this.childElements.length - 1;

-                        while (this.disableNodes[lastIndex] !== false) {

-                            lastIndex--;

-                        };

-                        var count = lastIndex - this.counter;

-                        this.moveNext(count);

-                        ev.preventDefault();

-                        ev.stopPropagation();

-                    } else if (ev.keyCode >= 48 && ev.keyCode <= 105) {

-                        if (this.enableSearch) {

-                            this.startTimer(b2bUtilitiesConfig.searchTimer);

-                            searchString = searchString + (keymap.MAP[ev.keyCode] || '');

-                            this.searchElement(searchString);

-                            ev.preventDefault();

-                            ev.stopPropagation();

-                        }

-                    }

-                }

-            };

-        }],

-        link: function (scope, elem, attr, ctrl) {

-            ctrl.prev = attr.prev ? attr.prev.split(',') : b2bUtilitiesConfig.prev.split(',');

-            ctrl.next = attr.next ? attr.next.split(',') : b2bUtilitiesConfig.next.split(',');

-            ctrl.type = attr.type ? attr.type : b2bUtilitiesConfig.type;

-            if (ctrl.type === 'table') {

-                ctrl.up = attr.up ? attr.up.split(',') : b2bUtilitiesConfig.up.split(',');

-                ctrl.down = attr.down ? attr.down.split(',') : b2bUtilitiesConfig.down.split(',');

-                ctrl.columns = attr.columns ? parseInt(attr.columns, 10) : b2bUtilitiesConfig.columns;

-            }

-

-            elem.bind('keydown', function (ev) {

-                ctrl.keyDownHandler(ev);

-            });

-        }

-    };

-}])

-

-.directive('b2bKeyItem', [function () {

-    return {

-        restrict: 'EA',

-        link: function (scope, elem, attr, ctrl) {

-            var parentCtrl = (elem.parent() && elem.parent().controller('b2bKey')) || undefined;

-            if (angular.isDefined(parentCtrl)) {

-                var count = parentCtrl.registerElement(elem, attr.searchKey);

-                elem.bind('keydown', function (ev) {

-                    parentCtrl.keyDownHandler(ev, count);

-                });

-                scope.$watch(attr.b2bKeyItem, function (value) {

-                    value = value === undefined ? true : value;

-                    parentCtrl.toggleDisable(count, !value); 

-                });

-                scope.$on('$destroy', function () {

-                    parentCtrl.toggleDisable(count, true);

-                });

-            }

-        }

-    };

-}])

-

-.directive('b2bElementFocus', [function () {

-    return {

-        restrict: 'A',

-        link: function (scope, elem, attr, ctrl) {

-            scope.$watch(attr.b2bElementFocus, function (value) {

-                if (value === true) {

-                    elem[0].focus();

-                }

-            });

-        }

-    };

-}])

-

-

-.directive('b2bAppendElement', ['$compile', function ($compile) {

-    return {

-        restrict: 'A',

-        link: function (scope, elem, attr, ctrl) {

-            var parameters = attr.b2bAppendElement.split(':');

-            if (parameters.length === 1) {

-                elem.append(scope.$eval(parameters[0]));

-            } else if (parameters.length === 2) {

-                if (parameters[1] === 'compile') {

-                    var element = angular.element('<span>' + scope.$eval(parameters[0]) + '</span>');

-                    elem.append($compile(element)(scope));

-                }

-            }

-

-        }

-    };

-}])

-

-.directive('b2bKeyItemRefreshInNgRepeat', [function () {

-    return {

-        restrict: 'EA',

-        require: '^^b2bKey',

-        link: function (scope, elem, attr, parentCtrl) {

-            if (angular.isDefined(parentCtrl)) {

-

-                var attrToObserve = 'attrToObserve';

-

-                if (attr.b2bKeyItemRefreshInNgRepeat) {

-                    attrToObserve = 'b2bKeyItemRefreshInNgRepeat';

-                }

-

-                attr.$observe(attrToObserve, function (newVal, oldVal) {

-                    if (newVal && newVal !== oldVal) {

-                        parentCtrl.resetChildElementsList();

-                    }

-                });

-            }

-        }

-    };

-}])

-

-.filter('b2bMultiSepartorHighlight', function($sce) {

-        return function(text, searchText, searchSeperator) {

-            var splitText = function(string) {

-                if(angular.isDefined(searchSeperator)){

-                    if (string.indexOf(searchSeperator) > -1) {

-                        return string.split(searchSeperator);

-                    } else {

-                        return string

-                    }

-                }else{

-                    return string;

-                }

-            }

-            if (text) {

-                var newText = splitText(text);

-                var newPhrase = splitText(searchText);

-                if (angular.isArray(newPhrase)) {

-                    for (var i = 0; i < newText.length; i++) {

-                        if (i <= 0) {

-                            text = newText[i].replace(new RegExp('(' + newPhrase[i] + ')', 'gi'),

-                                '<span class="b2b-search-hightlight">$1</span>');

-                        } else {

-                            text = text + searchSeperator + ' ' + (newPhrase[i] ? newText[i].replace(new RegExp('(' + newPhrase[i] + ')', 'gi'),

-                                '<span class="b2b-search-hightlight">$1</span>') : newText[i]);

-                        }

-                    }

-                } else {

-                    text = text.replace(new RegExp('(' + searchText + ')', 'gi'),

-                        '<span class="b2b-search-hightlight">$1</span>');

-                }

-            }

-            return $sce.trustAsHtml(text)

-        }

-    })

-    

-    .factory('b2bUserAgent', [function() {

-        var _isMobile = function() {

-            return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

-        };

-        var _notMobile = function() {

-            return !/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

-        };

-        var _isIE = function() {

-            return /msie|trident/i.test(navigator.userAgent);

-        };

-        var _isFF = function() {

-            return /Firefox/.test(navigator.userAgent);

-        };

-        var _isChrome = function() {

-            return /Google Inc/.test(navigator.vendor);

-        };

-        var _isSafari = function() {

-            return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);

-        };

-

-        return {

-            isMobile: _isMobile,

-            notMobile: _notMobile,

-            isIE: _isIE,

-            isFF: _isFF,

-            isChrome: _isChrome,

-            isSafari: _isSafari

-        };

-    }])

-    .run(['$document', 'b2bUserAgent', function($document, b2bUserAgent) {

-        var html = $document.find('html').eq(0);

-        if (b2bUserAgent.isIE()) {

-            html.addClass('isIE');

-        } else {

-            html.removeClass('isIE');

-        }

-    }]);

-    

-

-(function () {

-    String.prototype.toSnakeCase = function () {

-        return this.replace(/([A-Z])/g, function ($1) {

-            return "-" + $1.toLowerCase();

-        });

-    };

-    var concat = function (character, times) {

-        character = character || '';

-        times = (!isNaN(times) && times) || 0;

-        var finalChar = '';

-        for (var i = 0; i < times; i++) {

-            finalChar += character;

-        }

-        return finalChar;

-    };

-

-    // direction: true for left and false for right

-    var pad = function (actualString, width, character, direction) {

-        actualString = actualString || '';

-        width = (!isNaN(width) && width) || 0;

-        character = character || '';

-        if (width > actualString.length) {

-            if (direction) {

-                return concat(character, (width - actualString.length)) + actualString;

-            } else {

-                return actualString + concat(character, (width - actualString.length));

-            }

-        }

-        return actualString;

-    };

-

-    String.prototype.lPad = function (width, character) {

-        return pad(this, width, character, true);

-    };

-

-    String.prototype.rPad = function (width, character) {

-        return pad(this, width, character, false);

-    };

-

-    if (!Array.prototype.indexOf) {

-        Array.prototype.indexOf = function (val) {

-            for (var index = 0; index < this.length; index++) {

-                if (this[index] === val) {

-                    return index;

-                }

-            }

-            return -1;

-        };

-    }

-

-    if (!Array.prototype.regexIndexOf) {

-        Object.defineProperty(Array.prototype, 'regexIndexOf', {

-            enumerable: false,

-            value: function (regex, startIndex, loop) {

-                startIndex = startIndex && startIndex > -1 ? startIndex : 0;

-                for (var index = startIndex; index < this.length; index++) {

-                    if (this[index].toString().match(regex)) {

-                        return index;

-                    }

-                }

-                if (loop) {

-                    for (var index = 0; index < startIndex; index++) {

-                        if (this[index].toString().match(regex)) {

-                            return index;

-                        }

-                    }

-                }

-                return -1;

-            }

-        })

-    }

-})();

-angular.module("b2bTemplate/audioPlayer/audioPlayer.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/audioPlayer/audioPlayer.html",

-    "<div class=\"b2b-audio\">\n" +

-    "   <audio preload=\"auto\">\n" +

-    "       <source ng-src=\"{{audio.mp3 | trustedAudioUrl}}\" type=\"audio/mp3\"></source>\n" +

-    "       <i>Your browser does not support the audio element.</i>\n" +

-    "    </audio>\n" +

-    "\n" +

-    "    <div audio-play-pause-icon class=\"controls-wrapper\" ng-click=\"toggleAudio()\" tabindex=\"0\" b2b-accessibility-click=\"13,32\" role=\"button\" aria-label=\"{{isPlayInProgress?'pause':'play'}}\">\n" +

-    "       <i class=\"icoControls-pointer\" ng-show='!isPlayInProgress'></i>\n" +

-    "       <i class=\"icoControls-pause\" ng-show='isPlayInProgress'></i>\n" +

-    "    </div>\n" +

-    "\n" +

-    "    <div class=\"seek-bar-container-wrapper\">\n" +

-    "       <b2b-seek-bar min=\"0\" max=\"{{audio.duration}}\" step=\"1\" skip-interval=\"{{audio.timeShiftInSeconds}}\" no-aria-label ng-model=\"audio.currentTime\" on-drag-init=\"isAudioDragging=true\" on-drag-end=\"setAudioPosition(audio.currentTime)\"></b2b-seek-bar>\n" +

-    "       <div class=\"timing-container\">\n" +

-    "           <span class=\"timing-container-left\">{{timeFormatter(audio.currentTime)}}</span>\n" +

-    "           <span class=\"timing-container-right\">{{timeFormatter(audio.duration)}}</span>\n" +

-    "           <div class=\"timing-container-spacer\"></div>\n" +

-    "       </div>\n" +

-    "    </div>\n" +

-    "       \n" +

-    "    <b2b-flyout>\n" +

-    "       <div tabindex=\"0\" b2b-accessibility-click=\"13,32\" role=\"button\" aria-label=\"Volume pop-over. Volume set at {{audio.currentVolume}}%\" class=\"controls-wrapper audio-volume-control\" b2b-flyout-toggler>\n" +

-    "           <i class=\"icoControls-mutespeakers\" ng-show=\"audio.currentVolume === 0\"></i>\n" +

-    "           <i class=\"icoControls-volumedown\" ng-show=\"audio.currentVolume > 0 && audio.currentVolume <= 50\"></i>\n" +

-    "           <i class=\"icoControls-volumeup\" ng-show=\"audio.currentVolume > 50\"></i>\n" +

-    "       </div> \n" +

-    "       \n" +

-    "       <b2b-flyout-content horizontal-placement=\"center\" flyout-style=\"width:70px; height:190px;\" vertical-placement=\"above\">\n" +

-    "           <div class=\"b2b-audio-popover text-center\">\n" +

-    "               <span>Max</span>\n" +

-    "               <b2b-seek-bar min=\"0\" max=\"100\" step=\"1\" skip-interval=\"10\" vertical data-ng-model=\"audio.currentVolume\" class='volume-popover'></b2b-seek-bar>\n" +

-    "               <div class=\"min-label\">Min</div>\n" +

-    "           </div>\n" +

-    "       </b2b-flyout-content>\n" +

-    "   </b2b-flyout>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/audioRecorder/audioRecorder.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/audioRecorder/audioRecorder.html",

-    "<div class=\"b2b-audio-recorder row\">\n" +

-    "   <div class=\"b2b-elapsed-time span11\">\n" +

-    "       <div ng-if=\"isRecording\">\n" +

-    "           <span style=\"padding-right: 25px;\">{{config.whileRecordingMessage}}</span>\n" +

-    "           <span>{{timeFormatter(elapsedTime)}}</span>\n" +

-    "       </div>\n" +

-    "       <span ng-if=\"!isRecording\">{{config.startRecordingMessage}}</span>\n" +

-    "   </div>      \n" +

-    "   <div class=\"b2b-controls\" title=\"{{isRecording ? 'Stop' : 'REC'}}\" b2b-accessibility-click=\"13,32\" ng-click=\"toggleRecording()\" role=\"button\">\n" +

-    "           <i ng-if=\"isRecording\" class=\"icoControls-stop\" ></i>\n" +

-    "           <i ng-if=\"!isRecording\" class=\"icoControls-record\"></i>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/backToTop/backToTop.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/backToTop/backToTop.html",

-    "<button class=\"btn-arrow b2b-backtotop-button\" type=\"button\" aria-label=\"Back to top\">\n" +

-    "    <div class=\"btn-secondary b2b-top-btn\">\n" +

-    "        <i class=\"icoControls-upPRIMARY\" role=\"img\"></i>\n" +

-    "    </div>\n" +

-    "</button>\n" +

-    "");

-}]);

-

-angular.module("b2bTemplate/boardstrip/b2bAddBoard.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/boardstrip/b2bAddBoard.html",

-    "<div tabindex=\"0\" role=\"menuitem\" b2b-accessibility-click=\"13,32\" ng-click=\"addBoard()\" aria-label=\"Add Board\" class=\"boardstrip-item--add\">\n" +

-    "    <div class=\"centered\"><i aria-hidden=\"true\" class=\"icoControls-add-maximize\"></i> Add board</div>\n" +

-    "</div> ");

-}]);

-

-angular.module("b2bTemplate/boardstrip/b2bBoard.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/boardstrip/b2bBoard.html",

-    "<li b2b-board-navigation tabindex=\"-1\" role=\"menuitem\" aria-label=\"{{boardLabel}} {{getCurrentIndex()===boardIndex?'selected':''}}\" b2b-accessibility-click=\"13,32\" ng-click=\"selectBoard(boardIndex)\" class=\"board-item\" ng-class=\"{'selected': getCurrentIndex()===boardIndex}\">\n" +

-    "    <div ng-transclude></div>\n" +

-    "    <div class=\"board-caret\" ng-if=\"getCurrentIndex()===boardIndex\">\n" +

-    "        <div class=\"board-caret-indicator\"></div>\n" +

-    "        <div class=\"board-caret-arrow-up\"></div>\n" +

-    "    </div>\n" +

-    "</li>");

-}]);

-

-angular.module("b2bTemplate/boardstrip/b2bBoardstrip.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/boardstrip/b2bBoardstrip.html",

-    "<div class=\"b2b-boardstrip\">\n" +

-    "   <div class=\"boardstrip-reel\" role=\"menu\">\n" +

-    "       <div class=\"prev-items\">\n" +

-    "           <!-- <i tabindex=\"{{isPrevBoard() ? 0 : -1}}\" ng-class=\"{'disabled': !isPrevBoard()}\" role=\"menuitem\" aria-label=\"See previous boards\" b2b-accessibility-click=\"13,32\" ng-click=\"prevBoard()\" class=\"arrow icoControls-left\"></i> -->\n" +

-    "           <button class=\"btn-arrow arrow\" b2b-accessibility-click=\"13,32\" ng-click=\"prevBoard()\" ng-disabled=\"!isPrevBoard()\">\n" +

-    "               <div class=\"btn btn-small btn-alt\"><i class=\"icon-primary-left\"></i>\n" +

-    "               </div>\n" +

-    "               <span class=\"offscreen-text\">Previous boards</span>\n" +

-    "           </button>\n" +

-    "       </div>\n" +

-    "       <div b2b-add-board on-add-board=\"onAddBoard()\"></div>\n" +

-    "       <div class=\"board-viewport\"><ul role=\"menu\" class=\"boardstrip-container\" ng-transclude></ul></div>\n" +

-    "       <div class=\"next-items\">\n" +

-    "           <!-- <i tabindex=\"{{isNextBoard() ? 0 : -1}}\" ng-class=\"{'disabled': !isNextBoard()}\" role=\"menuitem\" aria-label=\"See next boards\" b2b-accessibility-click=\"13,32\" ng-click=\"nextBoard()\" class=\"arrow icoControls-right\"></i> -->\n" +

-    "           <button class=\"btn-arrow arrow\" b2b-accessibility-click=\"13,32\" ng-click=\"nextBoard()\" ng-disabled=\"!isNextBoard()\">\n" +

-    "               <div class=\"btn btn-small btn-alt\"><i class=\"icon-primary-right\"></i>\n" +

-    "               </div>\n" +

-    "               <span class=\"offscreen-text\">Next boards</span>\n" +

-    "           </button>\n" +

-    "       </div>\n" +

-    "   </div>\n" +

-    "</div>\n" +

-    "");

-}]);

-

-angular.module("b2bTemplate/calendar/datepicker-popup.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/calendar/datepicker-popup.html",

-    "<div id=\"datepicker\" class=\"datepicker dropdown-menu\" ng-class=\"{'datepicker-dropdown datepicker-orient-top': !inline, 'datepicker-orient-left': !inline && orientation === 'left', 'datepicker-orient-right': !inline && orientation === 'right'}\" ng-style=\"{position: inline && 'relative', 'z-index': inline && '0', top: !inline && position.top + 'px' || 0, left: !inline && position.left + 'px'}\" style=\"display: block;\" aria-hidden=\"false\" role=\"dialog\" tabindex=\"-1\" b2b-key type=\"table\" columns=\"7\">\n" +

-    "    <div class=\"datepicker-days\" style=\"display: block;\">\n" +

-    "        <div ng-repeat=\"header in headers\" class=\"text-left\" style=\"width: 100%;\" b2b-append-element=\"header\"></div>\n" +

-    "        <table class=\"table-condensed\">\n" +

-    "            <thead>\n" +

-    "                <tr>\n" +

-    "                    <th id=\"prev\" class=\"prev\" tabindex=\"0\" b2b-accessibility-click=\"13\" aria-label=\"Previous Month\" role=\"button\" b2b-element-focus=\"!disablePrev && getFocus\" ng-style=\"{visibility: visibilityPrev}\" ng-click=\"!disablePrev && move(-1,$event)\"><i class=\"icon-primary-left\" aria-hidden=\"true\"></i></th>\n" +

-    "                    <th id=\"month\" tabindex=\"-1\" aria-label=\"{{title}}\" class=\"datepicker-switch\" colspan=\"{{rows[0].length - 2}}\">{{title}}</th>\n" +

-    "                    <th id=\"next\" class=\"next\" tabindex=\"0\" b2b-accessibility-click=\"13\" b2b-element-focus=\"disablePrev && getFocus\" aria-label=\"Next Month\" role=\"button\" ng-style=\"{visibility: visibilityNext}\" ng-click=\"!disableNext && move(1,$event)\"><i class=\"icon-primary-right\" aria-hidden=\"true\"></i></th>\n" +

-    "                </tr>\n" +

-    "                <tr ng-show=\"labels.length > 0\">\n" +

-    "                    <th id=\"{{label.post}}\" class=\"dow\" ng-repeat=\"label in labels\" aria-hidden=\"true\"><span aria-hidden=\"true\">{{label.pre}}</span></th>\n" +

-    "                </tr>\n" +

-    "            </thead>\n" +

-    "            <tbody>\n" +

-    "                <tr ng-repeat=\"row in rows\">\n" +

-    "                    <td headers=\"{{dt.header}}\" b2b-key-item=\"dt.focusable\" b2b-accessibility-click=\"13\" b2b-element-focus=\"disablePrev && disableNext && getFocus && (dt.selected || dt.firstFocus || dt.fromDate || dt.dateRange)\" tabindex=\"{{(!(dt.focusable && (dt.selected || dt.firstFocus || dt.fromDate || currFocus)) && -1) || 0}}\" aria-hidden=\"{{(!dt.focusable && true) || false}}\" role=\"{{(dt.focusable && 'gridcell') || ''}}\" aria-label=\"{{(dt.focusable && dt.date | date : 'EEEE, MMMM d') || ''}}\" aria-selected=\"{{(dt.focusable && (dt.selected || dt.dateRange) && true) || false}}\" ng-repeat=\"dt in row\" class=\"day magic\" ng-class=\"{'active': dt.focusable && dt.selected && !dt.dateRange, 'start-date': dt.focusable && dt.fromDate && dt.dateRange, 'between-date': dt.focusable && !dt.fromDate && !dt.selected && dt.dateRange, 'end-date': dt.focusable && dt.selected && dt.dateRange, 'old': dt.oldMonth, 'new': dt.nextMonth, 'disabled': dt.disabled, 'due-date': dt.dueDate, 'late-fee': dt.pastDue}\" ng-focus=\"currFocus=true; trapFocus();\" ng-blur=\"currFocus=false; trapFocus();\" title=\"{{(dt.focusable && dt.pastDue && legendMessage) || ''}}\" ng-click=\"!ngDisabled && !dt.disabled && select(dt.date)\">\n" +

-    "                        <div aria-hidden=\"true\" tabindex=\"-1\" class=\"show-date\" ng-if=\"!(dt.oldMonth || dt.nextMonth)\">{{dt.label}}</div>{{(dt.focusable && dt.date | date : 'EEEE, MMMM d yyyy') || ''}}{{(dt.focusable && dt.dueDate && '. Bill-due-date.. ') || ''}}{{(dt.focusable && dt.pastDue && legendMessage) || ''}}</td>\n" +

-    "                </tr>\n" +

-    "            </tbody>\n" +

-    "            <tfoot>\n" +

-    "                <tr ng-repeat=\"footer in footers\">\n" +

-    "                    <th colspan=\"7\" class=\"text-left\" style=\"width: 278px;\" b2b-append-element=\"footer\"></th>\n" +

-    "                </tr>\n" +

-    "            </tfoot>\n" +

-    "        </table>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/calendar/datepicker.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/calendar/datepicker.html",

-    "<div>\n" +

-    "    <span class=\"icon-primary-calendar span12\" ng-class=\"{'disabled': ngDisabled}\" ng-transclude></span>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/coachmark/coachmark.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/coachmark/coachmark.html",

-    "<div class=\"b2b-coachmark-container\" tabindex=\"-1\" role=\"dialog\" aria-label=\"{{currentCoachmark.contentHeader}} {{currentCoachmark.content}} {{currentCoachmark.offscreenText}}\" ng-style=\"{'top':coackmarkElPos.top,'left':coackmarkElPos.left}\" aria-describeby=\"{{currentCoachmark}}\">\n" +

-    "   <i class=\"b2b-coachmark-caret\"></i>\n" +

-    "   <div class=\"b2b-coachmark-header\">\n" +

-    "       <div class=\"b2b-coachmark-countlabel\"><span ng-if=\"coachmarkIndex !== 0\">{{coachmarkIndex}} of {{(coachmarks.length-1)}}<span></div>\n" +

-    "       <div class=\"corner-button\">\n" +

-    "           <button type=\"button\" ng-focus=\"closeButtonFocus()\" class=\"close\" title=\"close\" aria-label=\"Close\" ng-click=\"closeCoachmark()\"></button>\n" +

-    "       </div>\n" +

-    "   </div>\n" +

-    "   <div class=\"b2b-coachmark-content\">   \n" +

-    "       <i class=\"icon-misc-dimmer\"></i>\n" +

-    "       <div class=\"b2b-coachmark-content-header\"><span class=\"offscreen-text\">{{currentCoachmark.offscreenText}}</span>{{currentCoachmark.contentHeader}}</div>\n" +

-    "       <div class=\"b2b-coachmark-description\">{{currentCoachmark.content}}</div>\n" +

-    "       <div class=\"b2b-coachmark-btn-group\">\n" +

-    "           <a class=\"b2b-coachmark-link\" href=\"javascript:void(0)\" ng-if=\"currentCoachmark.linkLabel !== '' && currentCoachmark.linkLabel !== undefined\" ng-click=\"actionCoachmark(currentCoachmark.linkLabel)\">{{currentCoachmark.linkLabel}}</a>\n" +

-    "           <button class=\"btn btn-alt\" ng-if=\"currentCoachmark.buttonLabel !== '' && currentCoachmark.buttonLabel !== undefined\" ng-click=\"actionCoachmark(currentCoachmark.buttonLabel)\">{{currentCoachmark.buttonLabel}}</button>\n" +

-    "       </div>  \n" +

-    "   </div>  \n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/dropdowns/b2bDropdownDesktop.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/dropdowns/b2bDropdownDesktop.html",

-    "<span b2b-key prev=\"38\" next=\"40\" enable-search ng-class=\"{'large': (dropdownSize === 'large'), 'disabled': (disabled), 'selectWrap': (isInputDropdown), 'selectorModule': (dropdownType === 'menu'), 'linkSelectorModule': (dropdownType === 'link-menu')}\">\n" +

-    "    <input b2b-dropdown-toggle b2b-dropdown-validation ng-disabled=\"disabled\" type=\"text\" id=\"{{dropdownId}}\" name=\"{{dropdownName}}\" class=\"awd-select isWrapped\" ng-required=\"dropdownRequired\" ng-model=\"currentSelected.text\" role=\"combobox\" aria-owns=\"listbox{{$id}}\" aria-expanded=\"{{toggleFlag}}\" ng-click=\"toggleDropdown()\" ng-focus=\"focused=true\" ng-blur=\"setBlur(); focused=false\" ng-class=\"{'active': toggleFlag, 'closed': !toggleFlag, 'large': (dropdownSize === 'large'), 'focused':focused}\" style=\"width:100%;\" value=\"{{currentSelected.text}}\" ng-show=\"isInputDropdown\" aria-describedby=\"{{dropdownDescribedBy}}\" readonly=\"readonly\">\n" +

-    "    <button type=\"button\" b2b-dropdown-toggle ng-disabled=\"disabled\" class=\"selectModule\" aria-label=\"{{labelText}} {{currentSelected.label}}\" aria-expanded=\"{{toggleFlag}}\" aria-haspopup=\"true\" ng-click=\"toggleDropdown()\" ng-blur=\"setBlur()\" ng-class=\"{'active opened': toggleFlag, 'closed': !toggleFlag, 'large': (dropdownSize === 'large')}\" ng-bind-html=\"currentSelected.text\" ng-show=\"!isInputDropdown\"></button>\n" +

-    "    <div ng-class=\"{'selectWrapper': (isInputDropdown), 'moduleWrapper': (!isInputDropdown)}\">\n" +

-    "        <ul id=\"listbox{{$id}}\" role=\"{{isInputDropdown?'listbox':'menu'}}\" ng-class=\"{'awd-select-list': (isInputDropdown), 'awd-module-list': (!isInputDropdown)}\" tabindex=\"-1\" ng-show=\"toggleFlag\" aria-label=\"Choose options\"></ul>\n" +

-    "        <ul class=\"module-optinalcta\" ng-if=\"toggleFlag && optionalCta\" tabindex=\"-1\" aria-hidden=\"false\">\n" +

-    "            <li class=\"module-list-item\" tabindex=\"-1\" role=\"menuitem\" value=\"\" aria-label=\"Optinal CTA\" aria-selected=\"true\">\n" +

-    "                <span class=\"module-data\" b2b-append-element=\"optionalCta\"></span>\n" +

-    "            </li>\n" +

-    "        </ul>\n" +

-    "</div>\n" +

-    "<i class=\"icon-primary-down\" aria-hidden=\"true\"></i>\n" +

-    "</span>    ");

-}]);

-

-angular.module("b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html",

-    "<li b2b-dropdown-group-desktop class=\"optgroup-wrapper\">{{groupHeader}}\n" +

-    "    <ul class=\"optgroup\" role=\"group\" aria-label=\"{{groupHeader}}\"></ul>\n" +

-    "</li>");

-}]);

-

-angular.module("b2bTemplate/dropdowns/b2bDropdownListDesktop.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/dropdowns/b2bDropdownListDesktop.html",

-    "<li b2b-dropdown-list-desktop b2b-key-item b2b-accessibility-click=\"13\" aria-selected=\"{{currentSelected.value === dropdownListValue}}\" ng-class=\"{'awd-select-list-item': (isInputDropdown), 'module-list-item': (!isInputDropdown)}\" tabindex=\"0\" role=\"{{isInputDropdown?'option':'menuitem'}}\" ng-click=\"selectDropdownItem()\"></li>");

-}]);

-

-angular.module("b2bTemplate/fileUpload/fileUpload.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/fileUpload/fileUpload.html",

-    "<label class=\"b2b-file-container\">\n" +

-    "   <span class=\"b2b-upload-link\" ng-transclude></span>\n" +

-    "   <input type=\"file\" b2b-file-change>\n" +

-    "</label>");

-}]);

-

-angular.module("b2bTemplate/flyout/flyout.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/flyout/flyout.html",

-    "<span class=\"b2b-flyout\"  b2b-flyout-trap-focus-inside>\n" +

-    "    <span ng-transclude></span>\n" +

-    "</span>");

-}]);

-

-angular.module("b2bTemplate/flyout/flyoutContent.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/flyout/flyoutContent.html",

-    "<div class=\"b2b-flyout-container\" aria-live=\"polite\" aria-atomic=\"false\" ng-class=\"{'b2b-flyout-left':horizontalPlacement==='left',\n" +

-    "                'b2b-flyout-center':horizontalPlacement==='center', \n" +

-    "                'b2b-flyout-right':horizontalPlacement==='right',\n" +

-    "                'b2b-flyout-centerLeft':horizontalPlacement==='centerLeft',\n" +

-    "                'b2b-flyout-centerRight':horizontalPlacement==='centerRight',  \n" +

-    "                'b2b-flyout-above':verticalPlacement==='above', \n" +

-    "                'b2b-flyout-below':verticalPlacement==='below',\n" +

-    "                'open-flyout': openFlyout,\n" +

-    "                'b2b-close-flyout': !openFlyout}\">\n" +

-    "    <i class=\"b2b-flyout-caret\" ng-class=\"{'open-flyout': openFlyout, \n" +

-    "                                   'b2b-flyout-caret-above':verticalPlacement==='above',\n" +

-    "                                   'b2b-flyout-caret-below':verticalPlacement==='below'}\"></i>\n" +

-    "    <span ng-transclude></span>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/footer/footer_column_switch_tpl.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/footer/footer_column_switch_tpl.html",

-    "<div class=\"footer-columns \" ng-class=\"{'five-column':footerColumns===5, 'four-column':footerColumns===4, 'three-column':footerColumns===3}\" ng-repeat=\"item in footerLinkItems\">\n" +

-    "    <h3 class=\"b2b-footer-header\">{{item.categoryName}}</h3>\n" +

-    "    <ul>\n" +

-    "        <li ng-repeat=\"i in item.values\">\n" +

-    "            <a href=\"{{i.href}}\" title=\"{{item.categoryName}} - {{i.displayLink}}\">{{i.displayLink}}</a>  \n" +

-    "        </li>\n" +

-    "    </ul>\n" +

-    "\n" +

-    "</div>\n" +

-    "\n" +

-    "<div ng-transclude></div>\n" +

-    "");

-}]);

-

-angular.module("b2bTemplate/horizontalTable/horizontalTable.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/horizontalTable/horizontalTable.html",

-    "<div class=\"b2b-horizontal-table\">\n" +

-    "    <div class=\"b2b-horizontal-table-arrows row span12\">\n" +

-    "       <div class=\"span4\">\n" +

-    "           <button class=\"btn-arrow left\" type=\"button\" ng-click=\"moveViewportLeft()\" ddh-accessibility-click=\"13,32\" ng-disabled=\"disableLeft\"><div class=\"btn btn-alt\"><i class=\"icon-primary-left\"></i></div>Previous Set</button>\n" +

-    "        </div>\n" +

-    "        \n" +

-    "        <span class=\"span5 b2b-horizontal-table-column-info\" aria-live=\"polite\" tabindex=\"-1\">\n" +

-    "           Displaying {{getColumnSet()[0]}} - {{getColumnSet()[1]}} of {{numOfCols}} (total) columns\n" +

-    "        </span>\n" +

-    "        \n" +

-    "        <div class=\"span3\">\n" +

-    "           <button class=\"btn-arrow right\" ng-click=\"moveViewportRight()\" ddh-accessibility-click=\"13,32\" ng-disabled=\"disableRight\" type=\"button\">Next Set<div class=\"btn btn-alt\"><i class=\"icon-primary-right\"></i></div></button>\n" +

-    "       </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"b2b-horizontal-table-inner-container\">\n" +

-    "        <span ng-transclude></span>\n" +

-    "    </div>\n" +

-    "</div>\n" +

-    "\n" +

-    "");

-}]);

-

-angular.module("b2bTemplate/hourPicker/b2bHourpicker.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/hourPicker/b2bHourpicker.html",

-    "<div class=\"hp-container\">\n" +

-    "    <div class=\"hp-selected\">\n" +

-    "        <div b2b-hourpicker-value=\"$index\" days=\"value.days\" start-time=\"value.startTime\" start-meridiem=\"value.startMeridiem\" end-time=\"value.endTime\" end-meridiem=\"value.endMeridiem\" ng-repeat=\"value in finalHourpickerValues\"></div>\n" +

-    "    </div>\n" +

-    "    <div b2b-hourpicker-panel></div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/hourPicker/b2bHourpickerPanel.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/hourPicker/b2bHourpickerPanel.html",

-    "<form name=\"{{'hourpickerForm' + $id}}\">\n" +

-    "    <div class=\"hp-checkbox\" role=\"group\">\n" +

-    "        <label class=\"checkbox\" for=\"checkbox_{{dayOption.title}}_{{$id}}\" aria-label=\"{{dayOption.title}}\" ng-repeat=\"dayOption in hourpicker.dayOptions\">\n" +

-    "            <input type=\"checkbox\" id=\"checkbox_{{dayOption.title}}_{{$id}}\" name=\"{{'hourpickerDays' + $id}}\" ng-model=\"hourpickerPanelValue.days[$index].value\" ng-disabled=\"dayOption.disabled\" /><i class=\"skin\"></i><span>{{dayOption.label}}</span>\n" +

-    "        </label>\n" +

-    "    </div>\n" +

-    "    <div class=\"row hp-dropdowns\">\n" +

-    "        <div class=\"span4\">\n" +

-    "            <label for=\"{{'hourpickerStartTime' + $id}}\">From</label>\n" +

-    "            <select id=\"{{'hourpickerStartTime' + $parent.$id}}\" b2b-dropdown type=\"\" ng-model=\"hourpickerPanelValue.startTime\">\n" +

-    "                <option b2b-dropdown-list value=\"\">From</option>\n" +

-    "                <option b2b-dropdown-list option-repeat=\"startTimeOption in hourpicker.startTimeOptions\" value=\"{{startTimeOption}}\">{{startTimeOption}}</option>\n" +

-    "            </select>\n" +

-    "        </div>\n" +

-    "        <div class=\"span8 radio-buttons\" role=\"radiogroup\" aria-label=\"Select AM or PM\">\n" +

-    "            <label class=\"radio\" for=\"hourpickerStartMeridiem_AM_{{$id}}\">\n" +

-    "                <input type=\"radio\" id=\"hourpickerStartMeridiem_AM_{{$id}}\" name=\"{{'hourpickerStartMeridiem' + $id}}\" value=\"am\" ng-model=\"hourpickerPanelValue.startMeridiem\" /><i class=\"skin\"></i><span>AM</span>\n" +

-    "            </label>\n" +

-    "            <label class=\"radio\" for=\"hourpickerStartMeridiem_PM_{{$id}}\">\n" +

-    "                <input type=\"radio\" id=\"hourpickerStartMeridiem_PM_{{$id}}\" name=\"{{'hourpickerStartMeridiem' + $id}}\" value=\"pm\" ng-model=\"hourpickerPanelValue.startMeridiem\" /><i class=\"skin\"></i><span>PM</span>\n" +

-    "            </label>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"row hp-dropdowns\">\n" +

-    "        <div class=\"span4\">\n" +

-    "            <label for=\"{{'hourpickerEndTime' + $id}}\">To</label>\n" +

-    "            <select id=\"{{'hourpickerEndTime' + $parent.$id}}\" b2b-dropdown ng-model=\"hourpickerPanelValue.endTime\">\n" +

-    "                <option b2b-dropdown-list value=\"\">To</option>\n" +

-    "                <option b2b-dropdown-list option-repeat=\"endTimeOption in hourpicker.endTimeOptions\" value=\"{{endTimeOption}}\">{{endTimeOption}}</option>\n" +

-    "            </select>\n" +

-    "        </div>\n" +

-    "        <div class=\"span8 radio-buttons\" role=\"radiogroup\" aria-label=\"Select AM or PM\">\n" +

-    "            <label class=\"radio\" for=\"hourpickerEndMeridiem_AM_{{$id}}\">\n" +

-    "                <input type=\"radio\" id=\"hourpickerEndMeridiem_AM_{{$id}}\" name=\"{{'hourpickerEndMeridiem' + $id}}\" value=\"am\" ng-model=\"hourpickerPanelValue.endMeridiem\" /><i class=\"skin\"></i><span>AM</span>\n" +

-    "            </label>\n" +

-    "            <label class=\"radio\" for=\"hourpickerEndMeridiem_PM_{{$id}}\">\n" +

-    "                <input type=\"radio\" id=\"hourpickerEndMeridiem_PM_{{$id}}\" name=\"{{'hourpickerEndMeridiem' + $id}}\" value=\"pm\" ng-model=\"hourpickerPanelValue.endMeridiem\" /><i class=\"skin\"></i><span>PM</span>\n" +

-    "            </label>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"row hp-buttons\">\n" +

-    "        <div class=\"span12\">\n" +

-    "            <div style=\"float:right\">\n" +

-    "                <button class=\"btn btn-secondary btn-small\" ng-click=\"resetHourpickerPanelValue()\">Clear</button>\n" +

-    "                <button class=\"btn btn-alt btn-small\" ng-disabled = \"disableAddBtn\" ng-click=\"updateHourpickerValue()\">{{hourpicker.editMode > -1 ? 'Update' : 'Add'}}</button>\n" +

-    "            </div>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "</form>");

-}]);

-

-angular.module("b2bTemplate/hourPicker/b2bHourpickerValue.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/hourPicker/b2bHourpickerValue.html",

-    "<div class=\"selected-days\">\n" +

-    "    <span class=\"day\">{{hourpickerValue.days}} &nbsp; {{hourpickerValue.startTime}} {{hourpickerValue.startMeridiem}} - {{hourpickerValue.endTime}} {{hourpickerValue.endMeridiem}}</span>\n" +

-    "    <span style=\"float:right\">\n" +

-    "        <i class=\"icon-misc-pen\" role=\"button\" title=\"Edit {{hourpickerValue.days}} &nbsp; {{hourpickerValue.startTime}} {{hourpickerValue.startMeridiem}} - {{hourpickerValue.endTime}} {{hourpickerValue.endMeridiem}}\" tabindex=\"0\" b2b-accessibility-click=\"13,32\" ng-click=\"editHourpickerValue(hourpickerValue.index)\"></i>\n" +

-    "        <i class=\"icon-misc-trash\" role=\"button\" title=\"Delete {{hourpickerValue.days}} &nbsp; {{hourpickerValue.startTime}} {{hourpickerValue.startMeridiem}} - {{hourpickerValue.endTime}} {{hourpickerValue.endMeridiem}}\" tabindex=\"0\" b2b-accessibility-click=\"13,32\" ng-click=\"deleteHourpickerValue(hourpickerValue.index)\"></i>\n" +

-    "    </span>\n" +

-    "    <div style=\"clear:both\"></div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/leftNavigation/leftNavigation.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/leftNavigation/leftNavigation.html",

-  "<div class=\"b2b-nav-menu\" ng-init=\"(showmenu = true)\" ng-class=\"{false: 'left-menu-collapsed'}[showmenu]\">\n" +

-    "    <div class=\"b2b-subnav-container\">\n" +

-    "        <ul class=\"b2b-subnav-content\">\n" +

-    "			 <li>" +

-    "				<div ng-class=\"{true: 'leftmenu-arrow-expand', false: 'leftmenu-arrow-collapse'}[showmenu]\">"+	

-    "					<a ng-click=\"toggleDrawer(showmenu);(showmenu = !showmenu) \" class=\"text-right\">" +

-    "					<i ng-class=\"{true: 'icon-controls-left', false: 'icon-controls-right'}[showmenu]\">&nbsp;</i></a>" +

-    "				</div>"+			

-    "			</li>" +

-    "            <li ng-repeat=\"menu in menuData\" ui-sref=\"{{menu.state}}\">" +

-    "    			<span ng-class=\"{true: 'menu-icon', false: 'menu-icon-collapse'}[showmenu]\"><span class=\"{{menu.imageSrc}}\"></span>&nbsp;&nbsp;</span>" +

-    "				<a ng-class=\"{expand: isOpen($index)}\" ng-if=\"showmenu\"  aria-label=\"{{menu.name}}\" title=\" \" aria-expanded=\"{{(idx==$index)?true:false;}}\" href=\"javascript:void(0);\">" +

-    "					{{menu.name}}" +

-    " 					<i aria-hidden=\"true\" ng-if=\"(menu.menuItems.length > 0)\" class=\"b2b-icon-primary-plus-minus\"ng-class=\"idx==$index ? 'icon-primary-expanded' : 'icon-primary-collapsed'\"></i>" +

-    "				</a>\n" +

-    "				<div role=\"region\" aria-hidden=\"{{(isOpen($index))?false:true;}}\">\n" +

-    "               	<ul ng-class=\"{expand: idx==$index}\">\n" +

-    "                  	  <li ng-repeat=\"menuItem in menu.menuItems\" ng-click=\"liveLink($event, $index, $parent.$index)\"><a aria-hidden=\"{{!(idx==$parent.$index)}}\" aria-label=\"{{menuItem.name}}\" title=\" \" href=\"{{menuItem.href}}\" tabindex=\"{{(idx==$parent.$index)?0:-1;}}\" ng-class=\"{active: itemIdx==$index && navIdx==$parent.$index}\">{{menuItem.name}}</a></li>\n" +

-    "              		</ul>\n" +

-    "				</div>\n" +

-    "            </li>\n" +

-    "        </ul>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/listbox/listbox.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/listbox/listbox.html",

-    "<div class=\"b2b-list-box\" tabindex=\"0\" role=\"listbox\" ng-transclude>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/modalsAndAlerts/b2b-backdrop.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/modalsAndAlerts/b2b-backdrop.html",

-    "<div class=\"b2b-modal-backdrop fade in hidden-by-modal\" aria-hidden=\"true\" tabindex=\"-1\"></div>");

-}]);

-

-angular.module("b2bTemplate/modalsAndAlerts/b2b-window.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/modalsAndAlerts/b2b-window.html",

-    "<div class=\"modalwrapper active {{windowClass}}\" ng-class=\"{'modal-landscape': isModalLandscape}\" role=\"{{isNotifDialog?'alertdialog':'dialog'}}\" tabindex=\"-1\" aria-labelledby=\"{{title}}\" aria-describedby=\"{{content}}\">\n" +

-    "    <div class=\"modal fade in {{sizeClass}}\" ng-transclude></div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/monthSelector/monthSelector-popup.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/monthSelector/monthSelector-popup.html",

-    "<div id=\"monthselector{{$id}}\" class=\"datepicker dropdown-menu monthselector\" \n" +

-    "     ng-class=\"{'datepicker-dropdown datepicker-orient-top': !inline, 'datepicker-orient-left': !inline && orientation === 'left', 'datepicker-orient-right': !inline && orientation === 'right'}\" \n" +

-    "     ng-style=\"{position: inline && 'relative', 'z-index': inline && '0', top: !inline && position.top + 'px' || 0, left: !inline && position.left + 'px'}\" \n" +

-    "     style=\"display: block;\" aria-hidden=\"false\" role=\"dialog presentation\" tabindex=\"-1\">\n" +

-    "    <div class=\"datepicker-days\" style=\"display: block;\">\n" +

-    "        <span class=\"offscreen-text\" aria-live=\"polite\" aria-atomic=\"true\">{{title}} displaying</span>\n" +

-    "        <table class=\"table-condensed\" role=\"grid\">\n" +

-    "            <thead>\n" +

-    "                <tr ng-repeat=\"header in headers\">\n" +

-    "                    <th colspan=\"7\" class=\"text-left\" style=\"width: 278px;\" b2b-append-element=\"header\"></th>\n" +

-    "                </tr>\n" +

-    "                <tr>\n" +

-    "                    <th id=\"prev{{$id}}\" role=\"button\" tabindex=\"0\" b2b-accessibility-click=\"13\" aria-label=\"Previous Year\" ng-class=\"{'prev': !disablePrev}\" ng-style=\"{visibility: visibilityPrev}\" ng-click=\"!disablePrev && move(-1,$event)\"><i class=\"icon-primary-left\"></i></th>\n" +

-    "                    <th id=\"year{{$id}}\" role=\"heading\" tabindex=\"-1\" aria-label=\"{{title}}\" class=\"datepicker-switch b2b-monthSelector-label\" colspan=\"{{rows[0].length - 2}}\">{{title}}</th>\n" +

-    "                    <th id=\"next{{$id}}\" role=\"button\" tabindex=\"0\" b2b-accessibility-click=\"13\" aria-label=\"Next Year\" ng-class=\"{'next': !disableNext}\" ng-style=\"{visibility: visibilityNext}\" ng-click=\"!disableNext && move(1,$event)\"><i class=\"icon-primary-right\"></i></th>\n" +

-    "                </tr>\n" +

-    "                <tr ng-show=\"labels.length > 0\">\n" +

-    "                    <th id=\"{{label.post}}\" class=\"dow\" ng-repeat=\"label in labels\" aria-hidden=\"true\"><span aria-hidden=\"true\">{{label.pre}}</span></th>\n" +

-    "                </tr>\n" +

-    "            </thead>\n" +

-    "            <tbody b2b-key type=\"table\" columns=\"4\" >\n" +

-    "                <tr ng-repeat=\"row in rows\">\n" +

-    "                    <td headers=\"{{dt.header}}\" b2b-key-item=\"dt.focusable\" b2b-accessibility-click=\"13,32\" tabindex=\"{{(!(dt.focusable && (dt.selected || dt.firstFocus || currFocus)) && -1) || 0}}\" aria-hidden=\"{{(!dt.focusable && true) || false}}\" role=\"{{(dt.focusable && 'gridcell') || ''}}\" aria-label=\"{{(dt.focusable && dt.date | date : 'MMMM, y') || ''}}\" aria-selected=\"{{(dt.focusable && (dt.selected || dt.dateRange) && true) || false}}\" ng-repeat=\"dt in row\" class=\"day magic\" ng-class=\"{'active': dt.focusable && dt.selected && !dt.dateRange, 'start-date': dt.focusable && dt.fromDate && dt.dateRange, 'between-date': dt.focusable && !dt.fromDate && !dt.selected && dt.dateRange, 'end-date': dt.focusable && dt.selected && dt.dateRange, 'old': dt.oldMonth, 'new': dt.nextMonth, 'disabled': dt.disabled, 'due-date': dt.dueDate, 'late-fee': dt.pastDue}\" ng-focus=\"currFocus=true\" ng-blur=\"currFocus=false\" title=\"{{(dt.focusable && dt.pastDue && legendMessage) || ''}}\" b2b-element-focus=\"inline && dt.focusable && dt.selected && !dt.dateRange\" ng-click=\"!ngDisabled && !dt.disabled && select(dt.date)\">\n" +

-    "                        <div aria-hidden=\"true\"  tabindex=\"-1\" class=\"show-date\" ng-if=\"!(dt.oldMonth || dt.nextMonth)\">{{dt.label | limitTo: 3}}</div>\n" +

-    "                    </td>\n" +

-    "                </tr>\n" +

-    "            </tbody>\n" +

-    "            <tfoot>\n" +

-    "                <tr ng-repeat=\"footer in footers\">\n" +

-    "                    <th colspan=\"7\" class=\"text-left\" b2b-append-element=\"footer\"></th>\n" +

-    "                </tr>\n" +

-    "            </tfoot>\n" +

-    "        </table>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/monthSelector/monthSelector.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/monthSelector/monthSelector.html",

-    "<div>\n" +

-    "    <span class=\"icon-primary-calendar span12\" ng-class=\"{'disabled': ngDisabled}\" ng-transclude></span>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/monthSelector/monthSelectorLink.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/monthSelector/monthSelectorLink.html",

-    "<div>\n" +

-    "    <span class=\"span12\" ng-transclude></span>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/pagination/b2b-pagination.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/pagination/b2b-pagination.html",

-    "<div class=\"b2b-pager\">\n" +

-    "    <div ng-if=\"notMobile && totalPages > 1\">\n" +

-    "        <a tabindex=\"{{currentPage <= 1 ? -1 : 0 }}\" class=\"b2b-pager__item--prev\" b2b-accessibility-click=\"13,32\" title=\"Previous Page\" ng-click=\"prev($event)\" ng-if=\"totalPages > 10\" ng-class=\"currentPage <= 1 ? 'b2b-pager__item--prev-disabled': '' \">\n" +

-    "            <i class=\"icon-primary-left\"></i>\n" +

-    "        </a>\n" +

-    "        <a tabindex=\"{{currentPage === 1 ? -1 : 0}}\" ng-class=\"{'b2b-pager__item--noclick': currentPage === 1}\" aria-selected=\"{{checkSelectedPage(page)}}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page 1{{checkSelectedPage(page) ? ' selected' : '' }}\" ng-if=\"totalPages > 10 && currentPage > 6\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(1, $event)\">\n" +

-    "            1<span class=\"offscreen-text\" ng-if=\"currentPage === 1\"> is selected</span>\n" +

-    "        </a>\n" +

-    "        <a tabindex=\"{{currentPage === 2 ? -1 : 0}}\" aria-selected=\"{{checkSelectedPage(page)}}\" ng-class=\"{'b2b-pager__item--noclick': currentPage === 2}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page 2{{checkSelectedPage(page) ? ' selected' : '' }}\" ng-if=\"totalPages > 10 && currentPage > 6\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(2, $event)\">2<span class=\"offscreen-text\" ng-if=\"currentPage === 2\"> is selected</span></a>\n" +

-    "\n" +

-    "        <span class=\"b2b-pager__item\" ng-if=\"totalPages > 10 && currentPage > 6\">...</span>\n" +

-    "\n" +

-    "        <a tabindex=\"{{checkSelectedPage(page) ? -1 : 0}}\" href=\"javascript:void(0)\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{page}}\" b2b-element-focus=\"isFocused(page)\" ng-repeat=\"page in pages\" ng-class=\"{'b2b-pager__item--active': checkSelectedPage(page), 'b2b-pager__item--noclick': checkSelectedPage(page)}\" b2b-accessibility-click=\"13,32\" ng-click=\"!checkSelectedPage(page) && selectPage(page, $event)\">{{page}}<span class=\"offscreen-text\" ng-if=\"currentPage === page\"> is selected</span></a>\n" +

-    "\n" +

-    "        <span class=\"b2b-pager__item\" ng-if=\"totalPages > 10 && currentPage <= totalPages - 5\">...</span>\n" +

-    "\n" +

-    "        <a tabindex=\"{{checkSelectedPage(page) ? -1 : 0}}\" href=\"javascript:void(0)\" ng-class=\"{'b2b-pager__item--noclick': checkSelectedPage(page)}\" aria-selected=\"{{checkSelectedPage(page)}}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{totalPages-1}}\" ng-if=\"totalPages > 10 && currentPage <= totalPages - 5\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(totalPages-1, $event)\">{{totalPages-1}}<span class=\"offscreen-text\" ng-if=\"currentPage === totalPages-1\"> is selected</span></a>\n" +

-    "\n" +

-    "        <a tabindex=\"{{currentPage === totalPages ? -1 : 0}}\" href=\"javascript:void(0)\" ng-class=\"{'b2b-pager__item--noclick': currentPage === totalPages}\" aria-selected=\"{{checkSelectedPage(page)}}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{totalPages}}\" ng-if=\"totalPages > 10 && currentPage <= totalPages - 5\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(totalPages, $event)\">{{totalPages}}<span class=\"offscreen-text\" ng-if=\"currentPage === totalPages\"> is selected</span></a>\n" +

-    "\n" +

-    "        <a tabindex=\"{{currentPage >= totalPages ? -1 : 0 }}\" href=\"javascript:void(0)\" class=\"b2b-pager__item--next\" b2b-accessibility-click=\"13,32\" title=\"Next Page\" ng-click=\"next($event)\" ng-if=\"totalPages > 10\" ng-class=\"currentPage >= totalPages ? 'b2b-pager__item--next-disabled' :'' \">\n" +

-    "            <i class=\"icon-primary-right\"></i>\n" +

-    "        </a>\n" +

-    "        \n" +

-    "        <span class=\"fieldLabel\" ng-show=\"totalPages > 10 && showInput === true\">    \n" +

-    "            <label for=\"{{inputId}}\">Go to Page:</label>\n" +

-    "            <input id=\"{{inputId}}\" class=\"b2b-pager__item--input\" type=\"number\" ng-blur=\"onfocusOut($event)\" ng-focus=\"onfocusIn($event)\" ng-keypress=\"gotoKeyClick($event)\" b2b-only-nums=\"4\" ng-model=\"$parent.gotoPage\" />\n" +

-    "            <button class=\"btn-arrow\" ng-click=\"gotoBtnClick()\" ng-disabled=\"$parent.gotoPage !== 0 || $parent.gotoPage !== undefined\" aria-label=\"Go to\">\n" +

-    "                <div class=\"btn btn-small btn-secondary\">\n" +

-    "                    <i class=\"icon-primary-right\"></i>\n" +

-    "                </div>\n" +

-    "            </button>\n" +

-    "        </span>\n" +

-    "    </div>\n" +

-    "    <div ng-if=\"isMobile && totalPages > 1\" ng-swipe-right=\"prev()\" ng-swipe-left=\"next()\" ng-class=\"isMobile ? 'b2b-mobile-view': '' \">\n" +

-    "        <a tabindex=\"{{checkSelectedPage(page) ? -1 : 0}}\" href=\"javascript:void(0)\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{page}}\" b2b-element-focus=\"isFocused(page)\" ng-repeat=\"page in pages\" ng-class=\"{'b2b-pager__item--active': checkSelectedPage(page), fade1: ($index == 0 && currentPage > meanVal+1),  fade2: ($index == 1 && currentPage > meanVal+1), fadesl: ($index == pages.length-2 && currentPage < totalPages - meanVal),  fadel: ($last && currentPage < totalPages - meanVal), 'b2b-pager__item--noclick': checkSelectedPage(page)}\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(page, $event)\">{{page}}</a>\n" +

-    "    </div>\n" +

-    "</div>\n" +

-    "");

-}]);

-

-angular.module("b2bTemplate/paneSelector/paneSelector.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/paneSelector/paneSelector.html",

-    "<div class=\"panes\" ng-transclude></div>");

-}]);

-

-angular.module("b2bTemplate/paneSelector/paneSelectorPane.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/paneSelector/paneSelectorPane.html",

-    "<div class=\"pane-block\" ng-transclude></div>");

-}]);

-

-angular.module("b2bTemplate/profileCard/profileCard-addUser.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/profileCard/profileCard-addUser.html",

-    "<div  class=\"span3 b2b-profile-card b2b-add-user\">\n" +

-    "    <div class=\"atcenter\">\n" +

-    "        <div class=\"circle\"><i class=\"icon-primary-add-maximize\"></i></div>\n" +

-    "        <div>Create new user</div>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/profileCard/profileCard.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/profileCard/profileCard.html",

-    "<div class=\"span3 b2b-profile-card\">\n" +

-    "    <div class=\"top-block\">\n" +

-    "       <div class=\"profile-image\">\n" +

-    "            <img ng-if=\"image\" profile-name=\"{{profile.name}}\" ng-src=\"{{profile.img}}\" alt=\"{{profile.name}}\">\n" +

-    "            <span ng-if=\"!image\" class=\"default-img\">{{initials}}</span>\n" +

-    "\n" +

-    "            <h4 class=\"name\">{{profile.name}}</h4>\n" +

-    "\n" +

-    "            <p class=\"status\">\n" +

-    "                <span class=\"status-icon\" ng-class=\"{'status-green':colorIcon==='green','status-red':colorIcon==='red','status-blue':colorIcon==='blue','status-yellow':colorIcon==='yellow'}\">   \n" +

-    "                </span>\n" +

-    "                <span>{{profile.state}}<span ng-if=\"badge\" class=\"status-badge\">Admin</span></span>\n" +

-    "            </p>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"bottom-block\">\n" +

-    "         <div class=\"profile-details\">\n" +

-    "            <label>Username</label>\n" +

-    "            <div ng-if=\"shouldClip(profile.userName)\" ng-mouseover=\"showUserNameTooltip = true;\" ng-mouseleave=\"showUserNameTooltip = false;\">\n" +

-    "                <div ng-if=\"shouldClip(profile.userName)\" class=\"tooltip\" b2b-tooltip show-tooltip=\"showUserNameTooltip\">\n" +

-    "                    {{profile.userName.slice(0, 25)+'...'}}\n" +

-    "                    <div class=\"arrow\"></div>\n" +

-    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +

-    "                        <div class=\"tooltip-size-control\">\n" +

-    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +

-    "                                {{profile.userName}}\n" +

-    "                            </div>\n" +

-    "                        </div>\n" +

-    "                    </div>\n" +

-    "                </div>\n" +

-    "            </div>\n" +

-    "            <div ng-if=\"!shouldClip(profile.userName)\">\n" +

-    "                {{profile.userName}}\n" +

-    "            </div>\n" +

-    "            <label>Email</label>\n" +

-    "            <div ng-if=\"shouldClip(profile.email)\" ng-mouseover=\"showEmailTooltip = true;\" ng-mouseleave=\"showEmailTooltip = false;\">\n" +

-    "                <div ng-if=\"shouldClip(profile.email)\" class=\"tooltip\" data-placement=\"bottom\" b2b-tooltip show-tooltip=\"showEmailTooltip\">\n" +

-    "                    {{profile.email.slice(0, 25)+'...'}}\n" +

-    "                    <div class=\"arrow\"></div>\n" +

-    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +

-    "                        <div class=\"tooltip-size-control\">\n" +

-    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +

-    "                                {{profile.email}}\n" +

-    "                            </div>\n" +

-    "                        </div>\n" +

-    "                    </div>\n" +

-    "                </div>\n" +

-    "            </div>\n" +

-    "            <div ng-if=\"!shouldClip(profile.email)\">\n" +

-    "                {{profile.email}}\n" +

-    "            </div>\n" +

-    "            <label>Role</label>\n" +

-    "            <div ng-if=\"shouldClip(profile.role)\" ng-mouseover=\"showRoleTooltip = true;\" ng-mouseleave=\"showRoleTooltip = false;\">\n" +

-    "                <div ng-if=\"shouldClip(profile.role)\" class=\"tooltip\" b2b-tooltip show-tooltip=\"showRoleTooltip\">\n" +

-    "                    {{profile.role.slice(0, 25)+'...'}}\n" +

-    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +

-    "                        <div class=\"tooltip-size-control\">\n" +

-    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +

-    "                                {{profile.role}}\n" +

-    "                            </div>\n" +

-    "                        </div>\n" +

-    "                    </div>\n" +

-    "                </div>\n" +

-    "            </div>\n" +

-    "            <div ng-if=\"!shouldClip(profile.role)\">\n" +

-    "                {{profile.role}}\n" +

-    "            </div>\n" +

-    "            <label>Last login</label>\n" +

-    "            <div ng-if=\"shouldClip(profile.lastLogin)\" ng-mouseover=\"showLastLoginTooltip = true;\" ng-mouseleave=\"showLastLoginTooltip = false;\">\n" +

-    "                <div ng-if=\"shouldClip(profile.lastLogin)\" class=\"tooltip\" b2b-tooltip show-tooltip=\"showLastLoginTooltip\">\n" +

-    "                    {{profile.lastLogin.slice(0, 25)+'...'}}\n" +

-    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +

-    "                        <div class=\"tooltip-size-control\">\n" +

-    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +

-    "                                {{profile.lastLogin}}\n" +

-    "                            </div>\n" +

-    "                        </div>\n" +

-    "                    </div>\n" +

-    "                </div>\n" +

-    "            </div>\n" +

-    "            <div ng-if=\"!shouldClip(profile.lastLogin)\">\n" +

-    "                {{profile.lastLogin}}\n" +

-    "            </div>\n" +

-    "         </div>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/searchField/searchField.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/searchField/searchField.html",

-    "<div class=\"search-bar\">\n" +

-    "    <div class='input-container' ng-blur=\"blurInput()\">\n" +

-    "        <input type=\"text\" class=\"innershadow b2b-search-input-field\" id=\"{{configObj.labelId}}\" b2b-search-input ng-model=\"inputModel\" ng-disabled=\"disabled\" b2b-reset ng-keydown=\"selectionIndex($event)\" placeholder=\"{{configObj.ghostText}}\" style=\"width:100%\" maxlength=\"{{configObj.maxLength}}\" title=\"{{inputModel}}\" aria-label=\"{{inputModel.length>0?inputModel:configObj.ghostText}}\"  aria-live=\"assertive\"/>\n" +

-    "            <button class=\"btn-search\" ng-disabled=\"disabled\" ng-click=\"startSearch()\" b2b-accessibility-click=\"13,32\" aria-label=\"Search\" ng-focus=\"showListFlag = false\" type=\"button\"><i class=\"icoControls-magnifyingglass\"></i></button>\n" +

-    "    </div>\n" +

-    "    <div class=\"search-suggestion-wrapper\" ng-if=\"filterList.length >=0\" ng-show=\"showListFlag\">\n" +

-    "        <ul class=\"search-suggestion-list\" role=\"listbox\">      \n" +

-    "            <li class=\"no-result\" ng-if=\"filterList.length == 0 && configObj.display\">{{configObj.resultText}}</li>\n" +

-    "            <li class=\"search-suggestion-item\" ng-if=\"filterList.length\" ng-repeat=\"item in filterList | limitTo:configObj.noOfItemsDisplay track by $index\" ng-bind-html=\"item.title | b2bMultiSepartorHighlight:inputModel:configObj.searchSeperator\" ng-class=\"{active:isActive($index,filterList.length)}\" ng-click=\"selectItem($index,item.title)\">\n" +

-    "                {{item.title}}     \n" +

-    "            </li>\n" +

-    "        </ul>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/seekBar/seekBar.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/seekBar/seekBar.html",

-    "<div class=\"b2b-seek-bar-container\" ng-class=\"{vertical:verticalSeekBar}\">\n" +

-    "    <div class=\"b2b-seek-bar-track-container\">\n" +

-    "        <div class=\"b2b-seek-bar-track\"></div>\n" +

-    "        <div class=\"b2b-seek-bar-track-fill\"></div>\n" +

-    "    </div>\n" +

-    "    <div class=\"b2b-seek-bar-knob-container\" role=\"menu\"  >\n" +

-    "        <div class=\"b2b-seek-bar-knob\" tabindex=\"0\" role=\"menuitem\"></div>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/slider/slider.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/slider/slider.html",

-    "<div class=\"b2b-slider-container\" ng-class=\"{'vertical':verticalSlider}\">\n" +

-    "    <div class=\"slider-track-container\">\n" +

-    "        <div class=\"slider-track\"></div>\n" +

-    "        <div class=\"slider-track-fill\" ng-style=\"{backgroundColor:trackFillColor}\"></div>\n" +

-    "    </div>\n" +

-    "    <div class=\"slider-knob-container\" ng-class=\"{'slider-knob-hidden':hideKnob}\">\n" +

-    "        <div class=\"slider-knob\" role=\"slider\" aria-valuemin=\"{{min}}\" aria-valuemax=\"{{max}}\" aria-labelledby=\"{{labelId}}\" aria-valuenow=\"{{currentModelValue}}\" aria-valuetext=\"{{currentModelValue}}{{postAriaLabel}}\" aria-orientation=\"{{verticalSlider ? 'vertical' : 'horizontal'}}\"></div>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/spinButton/spinButton.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/spinButton/spinButton.html",

-    "<div class=\"btn-group btn-spinbutton-toggle\" ng-class=\"{'disabled': disabledFlag}\">\n" +

-    "    <button type=\"button\" tabindex=\"{{isMobile?'0':'-1'}}\" aria-hidden=\"{{notMobile}}\" class=\"btn btn-secondary btn-prev icon-primary-subtractminimize\" ng-click=\"minus();focusInputSpinButton($event)\" aria-label=\"Remove {{step}}\" aria-controls=\"{{spinButtonId}}\" ng-class=\"{'disabled': isMinusDisabled()}\" ng-disabled=\"isMinusDisabled()\" aria-disabled=\"{{isMinusDisabled()}}\" role=\"spinbutton\"></button>\n" +

-    "    <input class=\"btn pull-left\" id=\"{{spinButtonId}}\" type=\"tel\" b2b-only-nums=\"3\" maxlength=\"3\" min={{min}} max={{max}} data-max-value=\"{{max}}\" ng-model=\"inputValue[inputModelKey]\" value=\"{{inputValue[inputModelKey]}}\" aria-live=\"polite\" aria-valuenow=\"{{inputValue[inputModelKey]}}\" aria-valuemin=\"{{min}}\" aria-valuemax=\"{{max}}\" ng-disabled=\"disabledFlag\">\n" +

-    "    <button type=\"button\" tabindex=\"{{isMobile?'0':'-1'}}\" aria-hidden=\"{{notMobile}}\" class=\"btn btn-secondary btn-next icon-primary-add-maximize\" ng-click=\"plus();focusInputSpinButton($event)\" aria-label=\"Add {{step}}\" aria-controls=\"{{spinButtonId}}\" ng-class=\"{'disabled': isPlusDisabled()}\" ng-disabled=\"isPlusDisabled()\" aria-disabled=\"{{isPlusDisabled()}}\" role=\"spinbutton\"></button>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/statusTracker/statusTracker.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/statusTracker/statusTracker.html",

-    "<div class=\"b2b-status-tracker row\">\n" +

-    "   <button tabindex=\"0\" ng-disabled=\"currentViewIndex === 0\" ng-if=\"statuses.length > b2bStatusTrackerConfig.maxViewItems\" class=\"btn-arrow\" type=\"button\" aria-label=\"Previous status\" ng-click=\"previousStatus()\">\n" +

-    "       <div class=\"btn btn-small btn-secondary\">\n" +

-    "           <i class=\"icon-primary-left\"></i>\n" +

-    "       </div>\n" +

-    "   </button>\n" +

-    "   <div ng-repeat=\"status in statuses\" class=\"b2b-status-tracker-step\" ng-class=\"{ 'complete' : status.complete, 'current' : currentStatus($index)}\" ng-show=\"isInViewport($index)\">\n" +

-    "       <p class=\"b2b-status-tracker-heading\">{{status.heading}}</p>\n" +

-    "       <div class=\"progress\">\n" +

-    "           <div class=\"progress-bar\">\n" +

-    "               <span class=\"hidden-spoken\">\n" +

-    "                   {{status.complete ? 'Complete' : 'Incomplete'}}\n" +

-    "               </span>\n" +

-    "           </div>\n" +

-    "       </div>\n" +

-    "       <div class=\"b2b-status-tracker-estimate\">\n" +

-    "           <i ng-show=\"status.estimate !== '' && status.estimate !== undefined\" ng-class=\"status.complete ? 'icoControls-approval' : 'icon-misc-time'\"></i> {{status.complete ? 'Complete' : status.estimate}}\n" +

-    "           &nbsp;\n" +

-    "       </div>\n" +

-    "       \n" +

-    "       <div class=\"b2b-status-tracker-description\">\n" +

-    "           {{status.description}}\n" +

-    "       </div>\n" +

-    "   </div>\n" +

-    "   <button tabindex=\"0\" ng-disabled=\"currentViewIndex + b2bStatusTrackerConfig.maxViewItems === statuses.length\" ng-if=\"statuses.length > b2bStatusTrackerConfig.maxViewItems\" class=\"btn-arrow\" type=\"button\" aria-label=\"Next status\" ng-click=\"nextStatus()\">\n" +

-    "       <div class=\"btn btn-small btn-secondary\">\n" +

-    "           <i class=\"icon-primary-right\"></i>\n" +

-    "       </div>\n" +

-    "   </button>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/stepTracker/stepTracker.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/stepTracker/stepTracker.html",

-    "<div class=\"b2b-step-tracker\">\n" +

-    "    <button class=\"btn-arrow b2b-left-arrow\" ng-click=\"previousStatus()\" ng-disabled=\"currentViewIndex === 0\" ng-if=\"stepsItemsObject.length > b2bStepTrackerConfig.maxViewItems\" aria-label=\"Previous step\">\n" +

-    "       <div class=\"btn btn-left btn-small btn-secondary\"><i class=\"icon-primary-left\"></i></div>\n" +

-    "   </button>\n" +

-    "    <button class=\"btn-arrow b2b-right-arrow\" ng-click=\"nextStatus()\" ng-disabled=\"currentViewIndex + b2bStepTrackerConfig.maxViewItems === stepsItemsObject.length\" ng-if=\"stepsItemsObject.length > b2bStepTrackerConfig.maxViewItems\" aria-label=\"Next step\">\n" +

-    "       <div class=\"btn btn-small btn-right btn-secondary\"><i class=\"icon-primary-right\"></i></div>\n" +

-    "   </button>\n" +

-    "    <ul class=\"b2b-steps\">\n" +

-    "        <li ng-class=\"{'b2b-step-done':$index < currentIndex - 1 ,'b2b-step-on':$index == currentIndex - 1}\" \n" +

-    "            ng-repeat=\"stepsItem in stepsItemsObject\" ng-show=\"isInViewport($index)\">\n" +

-    "           <p class=\"b2b-step-text\" data-sm-text=\"{{stepsItem.dataMobile}}\" data-large-text=\"{{stepsItem.dataDesktop}}\">{{stepsItem.text}}</p>\n" +

-    "            <span class=\"hidden-spoken\">\n" +

-    "                {{($index < currentIndex - 1)? 'Complete. '+stepsItem.text+' '+stepsItem.dataMobile:''}} \n" +

-    "                {{($index == currentIndex - 1)? 'In Progress. '+stepsItem.text+' '+stepsItem.dataMobile:''}} \n" +

-    "                {{($index > currentIndex - 1)? 'Incomplete. '+stepsItem.text+' '+stepsItem.dataMobile:''}}\n" +

-    "            </span>\n" +

-    "        </li>\n" +

-    "    </ul>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/switches/switches-spanish.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/switches/switches-spanish.html",

-    "<div class=\"switch-overlay\" aria-hidden=\"true\">\n" +

-    "    <span class=\"btn-slider-on\"><span class=\"hidden-spoken\">seleccione para hacer </span><i class=\"activo\">activo</i></span>\n" +

-    "    <span class=\"switch-handle\"></span>\n" +

-    "    <span class=\"btn-slider-off\"><span class=\"hidden-spoken\">seleccione para hacer </span><i class=\"inactivo\">inactivo</i></span>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/switches/switches.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/switches/switches.html",

-    "<div class=\"switch-overlay\" aria-hidden=\"true\">\n" +

-    "    <span class=\"btn-slider-on\">On</span>\n" +

-    "    <span class=\"switch-handle\"></span>\n" +

-    "    <span class=\"btn-slider-off\">Off</span>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/tableMessages/tableMessage.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tableMessages/tableMessage.html",

-    "<div class=\"b2b-table-message\">\n" +

-    "    <div class=\"b2b-message\" ng-if=\"msgType === 'noMatchingResults'\">\n" +

-    "        <div class=\"b2b-magnify-glass\"></div>\n" +

-    "        <div>\n" +

-    "            <div ng-transclude></div>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"b2b-message\" ng-if=\"msgType == 'infoCouldNotLoad'\">\n" +

-    "        <div class=\"icon-primary-alert b2b-alert\" aria-label=\"Oops! The information could not load at this time. Please click link to refresh the page.\"></div>\n" +

-    "        <div>Oops!</div>\n" +

-    "        <div>The information could not load at this time.</div>\n" +

-    "        <div>Please <a href=\"javascript:void(0)\" title=\"Refresh the page\" ng-click=\"refreshAction($event)\">refresh the page</a>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"b2b-message\" ng-if=\"msgType == 'magnifySearch'\">\n" +

-    "        <div class=\"b2b-magnify-glass\"></div>\n" +

-    "        <div>\n" +

-    "            <p class=\"b2b-message-title\">Please input values to\n" +

-    "                <br/> begin your search.</p>\n" +

-    "        </div>\n" +

-    "    </div>\n" +

-    "    <div class=\"b2b-message\" ng-if=\"msgType === 'loadingTable'\">\n" +

-    "        <div class=\"icon-primary-spinner-ddh b2b-loading-dots\"></div>\n" +

-    "        <div ng-transclude></div>\n" +

-    "    </div>\n" +

-    "</div>\n" +

-    "");

-}]);

-

-angular.module("b2bTemplate/tableScrollbar/tableScrollbar.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tableScrollbar/tableScrollbar.html",

-    "<div class=\"b2b-table-scrollbar\">\n" +

-    "    <div class=\"b2b-scrollbar-arrows\">\n" +

-    "        <button class=\"btn-arrow  b2b-scrollbar-arrow-left\" type=\"button\" ng-attr-aria-label=\"{{disableLeft ? 'Scroll Left Disabled' : 'Scroll Left'}}\" ng-click=\"scrollLeft()\" ng-disabled=\"disableLeft\"><div class=\"btn btn-alt\"><i class=\"icon-primary-left\"></i></div></button>\n" +

-    "        <button class=\"btn-arrow b2b-scrollbar-arrow-right\" ng-attr-aria-label=\"{{disableRight ? 'Scroll Right Disabled' : 'Scroll Right'}}\" ng-click=\"scrollRight()\" ng-disabled=\"disableRight\" type=\"button\"><div class=\"btn btn-alt\"><i class=\"icon-primary-right\"></i></div></button>\n" +

-    "    </div>\n" +

-    "    <div class=\"b2b-table-inner-container\">\n" +

-    "        <span ng-transclude></span>\n" +

-    "    </div>\n" +

-    "</div>");

-}]);

-

-angular.module("b2bTemplate/tables/b2bTable.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tables/b2bTable.html",

-    "<table ng-class=\"{'striped': responsive, 'complex-table': responsive && active}\" ng-transclude></table>");

-}]);

-

-angular.module("b2bTemplate/tables/b2bTableBody.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tables/b2bTableBody.html",

-    "<td ng-hide=\"isHidden()\" ng-transclude></td>");

-}]);

-

-angular.module("b2bTemplate/tables/b2bTableHeaderSortable.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tables/b2bTableHeaderSortable.html",

-    "<th scope=\"col\" role=\"columnheader\" aria-sort=\"{{sortPattern !== 'null' && 'none' || sortPattern}}\" aria-label=\"{{headerName}} {{sortable !== 'false' && ': activate to sort' || ' '}} {{sortPattern !== 'null' && '' || sortPattern}}\" tabindex=\"{{sortable !== 'false' && '0' || '-1'}}\" b2b-accessibility-click=\"13,32\" ng-click=\"(sortable !== 'false') && sort();\" ng-hide=\"isHidden()\">\n" +

-    "    <span ng-transclude></span>\n" +

-    "    <i ng-class=\"{'icon-primary-arrows-sort-arrow active': sortPattern === 'ascending', 'icon-primary-arrows-sort-arrow active down': sortPattern === 'descending'}\"></i>\n" +

-    "</th>");

-}]);

-

-angular.module("b2bTemplate/tables/b2bTableHeaderUnsortable.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tables/b2bTableHeaderUnsortable.html",

-    "<th scope=\"col\" ng-hide=\"isHidden()\" ng-transclude></th>");

-}]);

-

-angular.module("b2bTemplate/tabs/b2bTab.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tabs/b2bTab.html",

-    "<li role=\"tab\" aria-selected=\"{{isTabActive()}}\" aria-controls=\"{{tabPanelId}}\" class=\"tab\" \n" +

-    "    ng-class=\"{'active': isTabActive()}\" ng-click=\"clickTab()\" ng-hide=\"tabItem.disabled\">\n" +

-    "    <a href=\"javascript:void(0)\"  tabindex=\"{{(isTabActive() && tabItem.disabled)?-1:0}}\"\n" +

-    "       ng-disabled=\"tabItem.disabled\" aria-expanded=\"{{(isTabActive() && !tabItem.disabled)}}\" \n" +

-    "       b2b-accessibility-click=\"13,32\" ng-transclude></a>\n" +

-    "    <span class=\"hidden-spoken\" ng-if=\"isTabActive()\">Active tab</span>\n" +

-    "</li>");

-}]);

-

-angular.module("b2bTemplate/tabs/b2bTabset.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/tabs/b2bTabset.html",

-    "<ul class=\"tabs promo-tabs\" role=\"tablist\" ng-transclude></ul>");

-}]);

-

-angular.module("b2bTemplate/treeNav/groupedTree.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/treeNav/groupedTree.html",

-    "<ul role=\"group\">\n" +

-    "    <li aria-expanded=\"{{(member.active?true:false)}}\" role=\"treeitem\" aria-label=\"{{key}}\" ng-repeat='(key,value) in collection | groupBy : \"grpChild\"' b2b-tree-link><a class=\"grp\" ng-class=\"{'active': value.showGroup == true}\" tabindex=\"-1\" href='javascript:void(0);'>{{(key)?key:''}}<span class=\"b2b-tree-node-icon\"><i ng-class=\"{'icon-primary-expanded': value.showGroup == true, 'icon-primary-collapsed': value.showGroup == undefined || value.showGroup == false }\"></i></span></a>\n" +

-    "        <ul role=\"group\">\n" +

-    "            <b2b-member ng-repeat='member in value.childArray' member='member' time-delay='{{timeDelay}}' group-it='groupIt'></b2b-member>\n" +

-    "        </ul>\n" +

-    "    </li>\n" +

-    "</ul>");

-}]);

-

-angular.module("b2bTemplate/treeNav/treeMember.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/treeNav/treeMember.html",

-    "<li role=\"treeitem\" aria-expanded=\"{{(member.active?true:false)}}\" aria-label=\"{{member.tooltipContent ? member.tooltipContent : member.name}}\" aria-describedby=\"description_{{$id}}\" ng-class=\"{'bg':member.selected}\"  b2b-tree-link>\n" +

-    "    <a tabindex=\"-1\" title=\"{{member.tooltipContent ? member.tooltipContent : member.name}}\" href=\"javascript:void(0)\" ng-class=\"{'active':member.active,'b2b-locked-node':member.locked}\">       <span class=\"b2b-tree-node-name\">{{member.name}}</span>\n" +

-    "        <span class=\"{{!member.child?'end':''}} b2b-tree-node-icon\">\n" +

-    "            <i class=\"b2b-tree-expandCollapse-icon\" ng-class=\"{'icon-primary-expanded':member.active}\"></i>\n" +

-    "        </span>\n" +

-    "         <div id=\"description_{{$id}}\" class=\"offscreen-text\">\n" +

-    "           {{member.descriptionText}}\n" +

-    "        </div>\n" +

-    "        <div class=\"b2b-tree-tooltip\" ng-if=\"member.showTooltip\">\n" +

-    "           <span class=\"b2b-tree-arrow-left\"></span>\n" +

-    "           <div class=\"b2b-tree-tooltip-content\">\n" +

-    "               {{member.tooltipContent}}\n" +

-    "           </div>  \n" +

-    "        </div>\n" +

-    "    </a>\n" +

-    "</li>");

-}]);

-

-angular.module("b2bTemplate/treeNav/ungroupedTree.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/treeNav/ungroupedTree.html",

-    "<ul role=\"{{setRole}}\"><b2b-member ng-repeat='member in collection' member='member' group-it='groupIt'></b2b-member></ul>");

-}]);

-

-angular.module("b2bTemplate/treeNodeCheckbox/groupedTree.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/treeNodeCheckbox/groupedTree.html",

-    "<ul role=\"group\">\n" +

-    "    <li aria-expanded=\"{{(member.active?true:false)}}\" role=\"treeitem\" aria-label=\"{{key}}\" ng-repeat='(key,value) in collection | groupBy : \"grpChild\"' b2b-tree-node-link><a class=\"grp\" ng-class=\"{'active': value.showGroup == true}\" tabindex=\"-1\" href='javascript:void(0);'>\n" +

-    "        <span class=\"ng-hide\">\n" +

-    "            <label class=\"checkbox\">\n" +

-    "                <input type=\"checkbox\" tabindex=\"-1\" class=\"treeCheckBox grpTreeCheckbox\" style=\"margin-top:2px;\"/><i class=\"skin\"></i><span> {{(key)?key:''}}</span>\n" +

-    "            </label>\n" +

-    "        </span>\n" +

-    "        <span>\n" +

-    "            {{(key)?key:''}}    \n" +

-    "        </span>\n" +

-    "        <span class=\"nodeIcon\"><i class=\"expandCollapseIcon\" ng-class=\"{'icon-primary-expanded': value.showGroup == true, 'icon-primary-collapsed': value.showGroup == undefined || value.showGroup == false }\"></i></span></a>\n" +

-    "        <ul role=\"group\">\n" +

-    "            <b2b-tree-member ng-repeat='member in value.childArray' member='member' group-it='groupIt'></b2b-tree-member>\n" +

-    "        </ul>\n" +

-    "    </li>\n" +

-    "</ul>");

-}]);

-

-angular.module("b2bTemplate/treeNodeCheckbox/treeMember.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/treeNodeCheckbox/treeMember.html",

-    "<li role=\"treeitem\" aria-expanded=\"{{(member.active?true:false)}}\" aria-label=\"{{member.name}}\" ng-class=\"{'bg':member.selected}\"  b2b-tree-node-link>\n" +

-    "    <a tabindex=\"-1\" title=\"{{member.name}}\" href=\"javascript:void(0)\" ng-class=\"{'active':member.active}\">\n" +

-    "       <span ng-show=\"member.displayCheckbox\">\n" +

-    "               <label class=\"checkbox\">\n" +

-    "                <input type=\"checkbox\" tabindex=\"-1\" ng-model=\"member.isSelected\" ng-class=\"{'treeCheckBox': (member.displayCheckbox !== undefined)}\" style=\"margin-top:2px;\"/><i class=\"skin\"></i><span> {{member.name}}</span>\n" +

-    "            </label>\n" +

-    "        </span>\n" +

-    "       <span ng-show=\"!member.displayCheckbox\">\n" +

-    "           {{member.name}} \n" +

-    "       </span>\n" +

-    "        <span class=\"nodeIcon {{!member.child?'end':''}}\">\n" +

-    "            <i class=\"expandCollapseIcon\" ng-class=\"{'icon-primary-expanded':member.active}\"></i>\n" +

-    "        </span>\n" +

-    "    </a>\n" +

-    "</li>");

-}]);

-

-angular.module("b2bTemplate/treeNodeCheckbox/ungroupedTree.html", []).run(["$templateCache", function($templateCache) {

-  $templateCache.put("b2bTemplate/treeNodeCheckbox/ungroupedTree.html",

-    "<ul role=\"{{setRole}}\"><b2b-tree-member ng-repeat='member in collection' member='member' group-it='groupIt'></b2b-tree-member></ul>");

-}]);

+/*! b2b-angular-library - v1.0.1 - Last updated: 2017-03-02. Copyright (c) 2016 AT&T Services, Inc. */ 
+angular.module("b2b.att.tpls", ['b2bTemplate/audioPlayer/audioPlayer.html', 'b2bTemplate/audioRecorder/audioRecorder.html', 'b2bTemplate/backToTop/backToTop.html', 'b2bTemplate/boardstrip/b2bAddBoard.html', 'b2bTemplate/boardstrip/b2bBoard.html', 'b2bTemplate/boardstrip/b2bBoardstrip.html', 'b2bTemplate/calendar/datepicker-popup.html', 'b2bTemplate/calendar/datepicker.html', 'b2bTemplate/coachmark/coachmark.html', 'b2bTemplate/dropdowns/b2bDropdownDesktop.html', 'b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html', 'b2bTemplate/dropdowns/b2bDropdownListDesktop.html', 'b2bTemplate/fileUpload/fileUpload.html', 'b2bTemplate/flyout/flyout.html', 'b2bTemplate/flyout/flyoutContent.html', 'b2bTemplate/footer/footer_column_switch_tpl.html', 'b2bTemplate/horizontalTable/horizontalTable.html', 'b2bTemplate/hourPicker/b2bHourpicker.html', 'b2bTemplate/hourPicker/b2bHourpickerPanel.html', 'b2bTemplate/hourPicker/b2bHourpickerValue.html', 'b2bTemplate/leftNavigation/leftNavigation.html', 'b2bTemplate/listbox/listbox.html', 'b2bTemplate/modalsAndAlerts/b2b-backdrop.html', 'b2bTemplate/modalsAndAlerts/b2b-window.html', 'b2bTemplate/monthSelector/monthSelector-popup.html', 'b2bTemplate/monthSelector/monthSelector.html', 'b2bTemplate/monthSelector/monthSelectorLink.html', 'b2bTemplate/pagination/b2b-pagination.html', 'b2bTemplate/paneSelector/paneSelector.html', 'b2bTemplate/paneSelector/paneSelectorPane.html', 'b2bTemplate/profileCard/profileCard-addUser.html', 'b2bTemplate/profileCard/profileCard.html', 'b2bTemplate/searchField/searchField.html', 'b2bTemplate/seekBar/seekBar.html', 'b2bTemplate/slider/slider.html', 'b2bTemplate/spinButton/spinButton.html', 'b2bTemplate/statusTracker/statusTracker.html', 'b2bTemplate/stepTracker/stepTracker.html', 'b2bTemplate/switches/switches-spanish.html', 'b2bTemplate/switches/switches.html', 'b2bTemplate/tableMessages/tableMessage.html', 'b2bTemplate/tables/b2bTable.html', 'b2bTemplate/tables/b2bTableBody.html', 'b2bTemplate/tables/b2bTableHeaderSortable.html', 'b2bTemplate/tables/b2bTableHeaderUnsortable.html', 'b2bTemplate/tableScrollbar/tableScrollbar.html', 'b2bTemplate/tabs/b2bTab.html', 'b2bTemplate/tabs/b2bTabset.html', 'b2bTemplate/treeNav/groupedTree.html', 'b2bTemplate/treeNav/treeMember.html', 'b2bTemplate/treeNav/ungroupedTree.html', 'b2bTemplate/treeNodeCheckbox/groupedTree.html', 'b2bTemplate/treeNodeCheckbox/treeMember.html', 'b2bTemplate/treeNodeCheckbox/ungroupedTree.html']);angular.module("b2b.att", ["b2b.att.tpls", 'b2b.att.addressInputTemplate','b2b.att.arrows','b2b.att.audioPlayer','b2b.att.audioRecorder','b2b.att.backToTop','b2b.att.badgesForAlerts','b2b.att.boardstrip','b2b.att.breadcrumbs','b2b.att.buttonGroups','b2b.att.buttons','b2b.att.calendar','b2b.att.checkboxes','b2b.att.coachmark','b2b.att.configurationSection','b2b.att.directoryListingTemplate','b2b.att.dropdowns','b2b.att.fileUpload','b2b.att.filters','b2b.att.flyout','b2b.att.footer','b2b.att.header','b2b.att.headings','b2b.att.horizontalTable','b2b.att.hourPicker','b2b.att.inputTemplate','b2b.att.leftNavigation','b2b.att.links','b2b.att.listbox','b2b.att.loaderAnimation','b2b.att.messageWrapper','b2b.att.modalsAndAlerts','b2b.att.monthSelector','b2b.att.multiLevelNavigation','b2b.att.multipurposeExpander','b2b.att.notesMessagesAndErrors','b2b.att.notificationCardTemplate','b2b.att.orderConfirmationTemplate','b2b.att.pagination','b2b.att.paneSelector','b2b.att.phoneNumberInput','b2b.att.profileBlockTemplate','b2b.att.profileCard','b2b.att.radios','b2b.att.searchField','b2b.att.seekBar','b2b.att.selectorModule','b2b.att.separators','b2b.att.slider','b2b.att.spinButton','b2b.att.staticRouteTemplate','b2b.att.statusTracker','b2b.att.stepTracker','b2b.att.switches','b2b.att.tableMessages','b2b.att.tables','b2b.att.tableScrollbar','b2b.att.tabs','b2b.att.tagBadges','b2b.att.textArea','b2b.att.tooltipsForForms','b2b.att.treeNav','b2b.att.treeNodeCheckbox','b2b.att.utilities']);/**
+ * @ngdoc directive
+ * @name Template.att:Address Input
+ *
+ * @description
+ *  <file src="src/addressInputTemplate/docs/readme.md" />
+ *
+ * @usage
+
+ *
+ * @example
+ *  <section id="code">   
+ <example module="b2b.att">
+ <file src="src/addressInputTemplate/docs/demo.html" />
+ <file src="src/addressInputTemplate/docs/demo.js" />
+ </example>
+ </section>
+ *
+ */
+angular.module('b2b.att.addressInputTemplate', ['ngMessages']);
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:arrows
+ *
+ * @description
+ *  <file src="src/arrows/docs/readme.md" />
+ *
+ * @usage
+ *   Please refer demo.html tab in Example section below.
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/arrows/docs/demo.html" />
+            <file src="src/arrows/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.arrows', []);
+/**
+ * @ngdoc directive
+ * @name Videos, audio & animation.att:Audio Player
+ * @scope
+ * @param {string} audioSrcUrl - MP3 audio source URL or Blob URL
+ * @description
+ *  <file src="src/audioPlayer/docs/readme.md" />
+ *
+ * @usage
+ * 
+ <div b2b-audio audio-src-url='audioSrcUrl'></div>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/audioPlayer/docs/demo.html" />
+            <file src="src/audioPlayer/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+ 
+angular.module('b2b.att.audioPlayer', ['b2b.att.utilities', 'b2b.att.seekBar'])
+    .constant('AudioPlayerConfig', {
+        'defaultVolume': 50,
+        'timeShiftInSeconds': 5
+    })
+    .filter('trustedAudioUrl', ['$sce', function ($sce) {
+        return function (audioFileFullPath) {
+            return audioFileFullPath ? $sce.trustAsResourceUrl(audioFileFullPath) : 'undefined';
+        };
+    }])
+    .directive('b2bAudio', ['$log', '$timeout', 'AudioPlayerConfig', '$compile', 'events', function ($log, $timeout, AudioPlayerConfig, $compile, events) {
+        return {
+            restrict: 'EA',
+            replace: true,
+            scope: {
+                audioSrcUrl: '='
+            },
+            templateUrl: 'b2bTemplate/audioPlayer/audioPlayer.html',
+            controller: function ($scope) {
+
+                $scope.audio = {};
+
+                if (!angular.isDefined($scope.audioSrcUrl)) {
+                    $log.warn('b2b-audio : audio-src-url undefined');
+                    $scope.audioSrcUrl = undefined;
+                    $scope.audio.mp3 = undefined;
+                }
+
+            },
+            link: function (scope, element) {
+                var audioElement = angular.element(element[0].querySelector('audio'))[0];
+                scope.audio.audioElement = audioElement;
+                
+                function setAttributes(element, attributes) {
+                    Object.keys(attributes).forEach(function (name) {
+                        element.setAttribute(name, attributes[name]);
+                    });
+                }
+
+                $timeout(function () {
+                    // TODO: Replace with DDA Tooltip
+                    var seekBarKnob = element[0].querySelector('.b2b-seek-bar-knob');
+                    var tooltipObject = {
+                        'tooltip': '{{timeFormatter(audio.currentTime)}}',
+                        'tooltip-placement': 'above',
+                        'tooltip-style': 'blue',
+                        'tooltip-trigger': 'mousedown',
+                        'tooltip-append-to-body': 'false',
+                        'tooltip-offset': '-10',
+                        'refer-by': 'seek-bar-tooltip'
+                    };
+                    setAttributes(seekBarKnob, tooltipObject);
+                    $compile(seekBarKnob)(scope);
+                });
+
+                if (angular.isDefined(scope.audioSrcUrl)) {
+                    scope.audio.mp3 = scope.audioSrcUrl;
+                }
+
+                scope.audio.currentTime = 0;
+                scope.audio.currentVolume = AudioPlayerConfig.defaultVolume;
+                scope.audio.timeShiftInSeconds = AudioPlayerConfig.timeShiftInSeconds;
+                scope.isPlayInProgress = false;
+                scope.isReady = false;
+                scope.isAudioDragging = false;
+
+                $timeout(function () {
+                    audioElement.load();
+                    audioElement.volume = scope.audio.currentVolume / 100;
+                });
+
+                scope.$watch('audioSrcUrl', function (newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        if (!newVal) {
+                            $log.warn('b2b-audio : audio-src-url undefined. Please provide a valid URL');
+                        }
+                        
+                        scope.audio.mp3 = newVal;
+                        $timeout(function () {
+                            audioElement.load();
+                        });
+                    }
+                });
+
+                scope.playAudio = function () {
+                    if (scope.isReady) {
+                        audioElement.play();
+                    }
+                };
+
+                audioElement.onplay = function () {
+                    scope.isPlayInProgress = true;
+                    scope.$digest();
+                };
+
+                scope.pauseAudio = function () {
+                    audioElement.pause();
+                };
+
+                audioElement.onpause = function () {
+                    scope.isPlayInProgress = false;
+                    scope.$digest();
+                };
+
+                scope.toggleAudio = function () {
+                    if (audioElement.paused) {
+                        scope.playAudio();
+                    } else {
+                        scope.pauseAudio();
+                    }
+                };
+
+                scope.volumeUp = function (delta) {
+                    if (!delta) {
+                        delta = 0.1;
+                    } else {
+                        delta = delta / 100;
+                    }
+                    audioElement.muted = false;
+                    if (audioElement.volume < 1) {
+                        audioElement.volume = Math.min((Math.round((audioElement.volume + delta) * 100) / 100), 1);
+                    }
+                    scope.audio.currentVolume = audioElement.volume * 100;
+                    return audioElement.volume;
+                };
+
+                scope.volumeDown = function (delta) {
+                    if (!delta) {
+                        delta = 0.1;
+                    } else {
+                        delta = delta / 100;
+                    }
+                    audioElement.muted = false;
+                    if (audioElement.volume > 0) {
+                        audioElement.volume = Math.max((Math.round((audioElement.volume - delta) * 100) / 100), 0);
+                    }
+                    scope.audio.currentVolume = audioElement.volume * 100;
+                    return audioElement.volume;
+                };
+
+                var volumeHandler = function (e) {
+                    events.preventDefault(e);
+                    if ((e.wheelDelta && e.wheelDelta > 0) || (e.detail && e.detail < 0)) {
+                        scope.volumeUp();
+                    } else {
+                        scope.volumeDown();
+                    }
+                    scope.$digest();
+                };
+
+                
+
+                scope.$watch('audio.currentVolume', function (newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        audioElement.volume = newVal / 100;
+                    }
+                });
+
+                scope.setCurrentTime = function (timeInSec) {
+                    audioElement.currentTime = timeInSec;
+                };
+
+                scope.setAudioPosition = function (val) {
+                    if (scope.isReady) {
+                        scope.setCurrentTime(val);
+                        scope.isAudioDragging = false;
+                    }
+                };
+
+                function getTimestampArray(timestamp) {
+                    var d = Math.abs(timestamp) / 1000; // delta
+                    var r = {}; // result
+                    var s = { // structure
+                        day: 86400,
+                        hour: 3600,
+                        minute: 60,
+                        second: 1
+                    };
+
+                    Object.keys(s).forEach(function (key) {
+                        r[key] = Math.floor(d / s[key]);
+                        d -= r[key] * s[key];
+                    });
+
+                    return r;
+                };
+
+                scope.timeFormatter = function (timeInSec) {
+                    var formattedTime = '00:00';
+
+                    if (!timeInSec || timeInSec < 1) {
+                        return formattedTime;
+                    }
+
+                    if (typeof timeInSec === 'string') {
+                        return timeInSec;
+                    }
+
+                    var dateArray = getTimestampArray(timeInSec * 1000);
+                    Object.keys(dateArray).forEach(function (key) {
+                        if (dateArray[key] === 0) {
+                            dateArray[key] = '00';
+                        } else if (dateArray[key] < 10) {
+                            dateArray[key] = '0' + dateArray[key];
+                        }
+                    });
+
+                    formattedTime = dateArray['minute'] + ':' + dateArray['second'];
+
+                    if (dateArray['hour'] !== '00') {
+                        formattedTime = dateArray['hour'] + ':' + formattedTime;
+                    }
+
+                    if (dateArray['day'] !== '00') {
+                        formattedTime = dateArray['day'] + ':' + formattedTime;
+                    }
+
+                    return formattedTime;
+                };
+
+                audioElement.onloadedmetadata = function () {
+                    scope.audio.duration = audioElement.duration;
+                    scope.$digest();
+                };
+
+                audioElement.ontimeupdate = function () {
+                    if (!scope.isAudioDragging) {
+                        scope.audio.currentTime = audioElement.currentTime;
+                        scope.$digest();
+                    }
+                };
+
+                audioElement.onended = function () {
+                    scope.setCurrentTime(0);
+                    scope.audio.currentTime = 0;
+                    if (!audioElement.paused) {
+                        scope.pauseAudio();
+                    }
+                    scope.$digest();
+                };
+
+                audioElement.oncanplay = function () {
+                    scope.isReady = true;
+                    scope.isPlayInProgress = !audioElement.paused;
+                    scope.$digest();
+                };
+
+                var onloadstart = function () {
+                    scope.isReady = false;
+                    scope.isPlayInProgress = !audioElement.paused;
+                    scope.audio.currentTime = 0;
+                    scope.audio.duration = 0;
+                    scope.$digest();
+                };
+                audioElement.addEventListener("loadstart", onloadstart);
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Videos, audio & animation.att:Audio Recorder
+ * @scope
+ * @param {function} callback - A callback to handle the WAV blob
+ * @param {object} config - A config object with properties startRecordingMessage & whileRecordingMessage
+ * @description
+ *  <file src="src/audioRecorder/docs/readme.md" />
+ *
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/audioRecorder/docs/demo.html" />
+            <file src="src/audioRecorder/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.audioRecorder', ['b2b.att.utilities'])
+    .constant('AudioRecorderConfig', {
+        'startRecordingMessage': 'Click on REC icon to being recording',
+        'whileRecordingMessage': 'Recording...'
+    })
+    .directive('b2bAudioRecorder', ['$interval', 'AudioRecorderConfig', 'b2bUserAgent', 'b2bRecorder', function($interval, AudioRecorderConfig, b2bUserAgent, b2bRecorder) {
+        return {
+            restrict: 'EA',
+            replace: true,
+            scope: {
+                callback: '&'
+            },
+            templateUrl: 'b2bTemplate/audioRecorder/audioRecorder.html',
+            controller: function($scope) {
+
+                function hasGetUserMedia() {
+                    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
+                        navigator.mozGetUserMedia || navigator.msGetUserMedia);
+                }
+
+                if (!hasGetUserMedia()) {
+                    throw new Error('Your broswer does not support MediaRecorder API');
+                }
+
+                if (!(b2bUserAgent.isFF() || b2bUserAgent.isChrome())) {
+                    throw new Error('b2bAudioRecorder does not support this browser!');
+                }
+
+            },
+            link: function(scope, element) {
+                scope.elapsedTime = 0;
+                scope.isRecording = false;
+                scope.config = {};
+                scope.config.startRecordingMessage = AudioRecorderConfig.startRecordingMessage;
+                scope.config.whileRecordingMessage = AudioRecorderConfig.whileRecordingMessage;
+                
+
+                var timer = undefined; // Interval promise
+                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+                var stream;
+                var audio = angular.element(element[0].querySelector('audio'))[0];
+                var recorder = undefined;
+
+                function startRecording() {
+                    scope.isRecording = true;
+                    navigator.mediaDevices.getUserMedia({
+                        audio: true
+                    }).then(function(stream) {
+                        //create the MediaStreamAudioSourceNode
+                        context = new AudioContext();
+                        source = context.createMediaStreamSource(stream);
+                        recorder = new b2bRecorder(source);
+                        recorder.record();
+
+                        timer = $interval(function() {
+                            scope.elapsedTime += 1;
+                        }, 1000, 0);
+                    }).catch(function(err) {
+                        angular.noop();
+                    });
+
+                };
+
+                function stopRecording() {
+                    scope.isRecording = false;
+                    recorder.stop();
+                    var audio = {};
+                    recorder.exportWAV(function(s) {
+                        audio.src = window.URL.createObjectURL(s);
+                        context.close().then(function() {
+                            if (timer) {
+                                $interval.cancel(timer);
+                            }
+                            scope.elapsedTime = 0;
+                            
+                            recorder.clear();
+                            recorder = undefined;
+                        });
+                        if (angular.isFunction(scope.callback)){
+                            scope.callback({'data': audio});    
+                        }
+                    });
+                    
+                    
+                }
+
+                scope.toggleRecording = function() {
+                    if (scope.isRecording) {
+                        stopRecording();
+                    } else {
+                        startRecording();
+                    }
+                };
+
+
+
+                //TODO: Move this into utilities
+                function getTimestampArray(timestamp) {
+                    var d = Math.abs(timestamp) / 1000; // delta
+                    var r = {}; // result
+                    var s = { // structure
+                        day: 86400,
+                        hour: 3600,
+                        minute: 60,
+                        second: 1
+                    };
+
+                    Object.keys(s).forEach(function(key) {
+                        r[key] = Math.floor(d / s[key]);
+                        d -= r[key] * s[key];
+                    });
+
+                    return r;
+                };
+                scope.timeFormatter = function(timeInSec) {
+                    var formattedTime = '00:00';
+
+                    if (!timeInSec || timeInSec < 1) {
+                        return formattedTime;
+                    }
+
+                    if (typeof timeInSec === 'string') {
+                        return timeInSec;
+                    }
+
+                    var dateArray = getTimestampArray(timeInSec * 1000);
+                    Object.keys(dateArray).forEach(function(key) {
+                        if (dateArray[key] === 0) {
+                            dateArray[key] = '00';
+                        } else if (dateArray[key] < 10) {
+                            dateArray[key] = '0' + dateArray[key];
+                        }
+                    });
+
+                    formattedTime = dateArray['minute'] + ':' + dateArray['second'];
+
+                    if (dateArray['hour'] !== '00') {
+                        formattedTime = dateArray['hour'] + ':' + formattedTime;
+                    }
+
+                    if (dateArray['day'] !== '00') {
+                        formattedTime = dateArray['day'] + ':' + formattedTime;
+                    }
+
+                    return formattedTime;
+                };
+
+                scope.$on('$destroy', function() {
+                    if (timer) {
+                        $interval.cancel(timer);
+                    }
+                });
+            }
+        };
+    }]);
+
+/**
+ * @ngdoc directive
+ * @name Navigation.att:Back To Top
+ * @scope
+ * @description
+ *  <file src="src/backToTop/docs/readme.md" />
+ * @param {integer} scrollSpeed - Scroll speed in seconds, default is 1
+*
+ * @usage
+ * 
+    <div ng-controller="backToTopController">
+        <div b2b-backtotop></div>
+    </div>
+ * 
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/backToTop/docs/demo.html" />
+            <file src="src/backToTop/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+ 
+angular.module('b2b.att.backToTop', ['b2b.att.utilities','b2b.att.position'])
+    .directive('b2bBacktotopButton', [function () {
+        return {
+            restrict: 'EA',
+            replace: true,
+            templateUrl: 'b2bTemplate/backToTop/backToTop.html',
+            link: function (scope, elem, attr) {
+                elem.bind('click', function(evt) {
+                    var scrollSpeed = parseInt(attr.scrollSpeed) || 1;
+                    TweenLite.to(window, scrollSpeed, {scrollTo:{x: 0, y: 0}});
+                });
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Messages, modals & alerts.att:badgesForAlerts
+ *
+ * @description
+ *  <file src="src/badgesForAlerts/docs/readme.md" />
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/badgesForAlerts/docs/demo.html" />
+            <file src="src/badgesForAlerts/docs/demo.js" />
+       </example>
+        </section>
+ *
+ */
+angular.module('b2b.att.badgesForAlerts', []);
+/**
+ * @ngdoc directive
+ * @name Misc.att:boardstrip
+ *
+ * @description
+ *  <file src="src/boardstrip/docs/readme.md" />
+ *
+ * @usage
+ * See demo section
+ * @example
+    <section id="code">
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/boardstrip/docs/demo.html" />
+            <file src="src/boardstrip/docs/demo.js" />
+        </example>
+    </section>
+ */
+angular.module('b2b.att.boardstrip', ['b2b.att.utilities'])
+    .constant('BoardStripConfig', {
+        'maxVisibleBoards': 4,
+        'boardsToScroll': 1,
+        /* These parameters are non-configurable and remain unaltered, until there is a change in corresponding CSS */
+        'boardLength': 140,
+        'boardMargin': 15
+    })
+    .directive('b2bBoard', [function () {
+        return {
+            restrict: 'AE',
+            replace: true,
+            transclude: true,
+            require: '^b2bBoardStrip',
+            scope: {
+                boardIndex: '=',
+                boardLabel: '='
+            },
+            templateUrl: 'b2bTemplate/boardstrip/b2bBoard.html',
+            link: function (scope, element, attrs, ctrls) {
+
+                var parentCtrl = ctrls;
+
+                scope.getCurrentIndex = function () {
+                    return parentCtrl.getCurrentIndex();
+                };
+                scope.selectBoard = function (boardIndex) {
+                    if (!isNaN(boardIndex)) {
+                        parentCtrl.setCurrentIndex(boardIndex);
+                    }
+                };
+            }
+        };
+    }])
+    .directive('b2bBoardStrip', ['BoardStripConfig', '$timeout', function (BoardStripConfig, $timeout) {
+        return {
+            restrict: 'AE',
+            replace: true,
+            transclude: true,
+            require: ['?ngModel', 'b2bBoardStrip'],
+            scope: {
+                boardsMasterArray: '=',
+                onAddBoard: '&?'
+            },
+            templateUrl: 'b2bTemplate/boardstrip/b2bBoardstrip.html',
+            controller: function ($scope) {
+                if (!angular.isDefined($scope.boardsMasterArray)) {
+                    $scope.boardsMasterArray = [];
+                }
+
+                this.rectifyMaxVisibleBoards = function () {
+                    if (this.maxVisibleIndex >= $scope.boardsMasterArray.length) {
+                        this.maxVisibleIndex = $scope.boardsMasterArray.length - 1;
+                    }
+
+                    if (this.maxVisibleIndex < 0) {
+                        this.maxVisibleIndex = 0;
+                    }
+                };
+
+                this.resetBoardStrip = function () {
+                    $scope.currentIndex = 0;
+
+                    this.maxVisibleIndex = BoardStripConfig.maxVisibleBoards - 1;
+                    this.minVisibleIndex = 0;
+
+                    this.rectifyMaxVisibleBoards();
+                };
+
+                this.getCurrentIndex = function () {
+                    return $scope.currentIndex;
+                };
+                this.setCurrentIndex = function (indx) {
+                    $scope.currentIndex = indx;
+                };
+
+                this.getBoardsMasterArrayLength = function () {
+                    return $scope.boardsMasterArray.length;
+                };
+
+                $scope.addBoardPressedFlag = false;
+                this.getAddBoardPressedFlag = function () {
+                    return $scope.addBoardPressedFlag;
+                };
+                this.setAddBoardPressedFlag = function (booleanValue) {
+                    $scope.addBoardPressedFlag = booleanValue;
+                };
+
+            },
+            link: function (scope, element, attrs, ctrls) {
+
+                var ngModelCtrl = ctrls[0];
+                var ctrl = ctrls[1];
+
+                var oldTimeout;
+                var animationTimeout = 1000;
+
+                var getBoardViewportWidth = function (numberOfVisibleBoards) {
+                    return numberOfVisibleBoards * (BoardStripConfig.boardLength + BoardStripConfig.boardMargin);
+                };
+                if (element[0].querySelector(".board-viewport")) {
+                    angular.element(element[0].querySelector(".board-viewport")).css({
+                        "width": getBoardViewportWidth(BoardStripConfig.maxVisibleBoards) + "px"
+                    });
+                }
+
+                var getBoardstripContainerWidth = function (totalNumberOfBoards) {
+                    return totalNumberOfBoards * (BoardStripConfig.boardLength + BoardStripConfig.boardMargin);
+                };
+                if (element[0].querySelector(".boardstrip-container")) {
+                    angular.element(element[0].querySelector(".boardstrip-container")).css({
+                        "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"
+                    });
+                    angular.element(element[0].querySelector(".boardstrip-container")).css({
+                        "left": "0px"
+                    });
+                }
+
+                var calculateAndGetBoardstripContainerAdjustment = function () {
+
+                    var calculatedAdjustmentValue;
+
+                    if (ctrl.getBoardsMasterArrayLength() <= BoardStripConfig.maxVisibleBoards) {
+                        calculatedAdjustmentValue = 0;
+                    } else {
+                        calculatedAdjustmentValue = (ctrl.minVisibleIndex * (BoardStripConfig.boardLength + BoardStripConfig.boardMargin)) * -1;
+                    }
+
+                    return calculatedAdjustmentValue;
+                };
+
+                var animateBoardstripContainerAdjustment = function (elementToFocusAfterAnimation) {
+                    var oldContainerAdjustment = angular.element(element[0].querySelector(".boardstrip-container"))[0].style.left;
+                    var containerAdjustment = calculateAndGetBoardstripContainerAdjustment();
+                    if (oldContainerAdjustment !== containerAdjustment + 'px') {
+                        angular.element(element[0].querySelector(".boardstrip-container")).css({
+                            "left": containerAdjustment + "px"
+                        });
+
+                        $timeout.cancel(oldTimeout);
+                        oldTimeout = $timeout(function () {
+                            elementToFocusAfterAnimation.focus();
+                        }, animationTimeout);
+                    } else {
+                        elementToFocusAfterAnimation.focus();
+                    }
+                };
+
+                var updateBoardsTabIndex = function (boardArray, minViewIndex, maxViewIndex) {
+                    for (var i = 0; i < boardArray.length; i++) {
+                        angular.element(boardArray[i]).attr('tabindex', '-1');
+                    }
+                    for (var j = minViewIndex; j <= maxViewIndex; j++) {
+                        angular.element(boardArray[j]).attr('tabindex', '0');
+                    }
+                };
+
+                $timeout(function () {
+                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                });
+
+                scope.$watchCollection('boardsMasterArray', function (newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        /* When a board is removed */
+                        if (newVal.length < oldVal.length) {
+                            ctrl.resetBoardStrip();
+                            $timeout(function () {
+
+                                var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                                if (currentBoardArray.length !== 0) {
+                                    animateBoardstripContainerAdjustment(currentBoardArray[0]);
+                                } else {
+                                    element[0].querySelector('div.boardstrip-item--add').focus();
+                                }
+
+                                angular.element(element[0].querySelector(".boardstrip-container")).css({
+                                    "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"
+                                });
+                                /* Update tabindecies to ensure keyboard navigation behaves correctly */
+                                updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                            });
+                        }
+                        /* When a board is added */
+                        else {
+                            if (ctrl.getAddBoardPressedFlag()) {
+                                ctrl.maxVisibleIndex = ctrl.getBoardsMasterArrayLength() - 1;
+                                ctrl.minVisibleIndex = Math.max(ctrl.maxVisibleIndex - BoardStripConfig.maxVisibleBoards + 1, 0);
+
+                                ctrl.setCurrentIndex(ctrl.maxVisibleIndex);
+
+                                $timeout(function () {
+                                    angular.element(element[0].querySelector(".boardstrip-container")).css({
+                                        "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"
+                                    });
+
+                                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                                    animateBoardstripContainerAdjustment(currentBoardArray[currentBoardArray.length - 1]);
+                                    /* Update tabindecies to ensure keyboard navigation behaves correctly */
+                                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                                });
+                            } else {
+                                if (ctrl.minVisibleIndex === 0 && ctrl.getBoardsMasterArrayLength() < BoardStripConfig.maxVisibleBoards + 1) {
+                                    ctrl.maxVisibleIndex = ctrl.getBoardsMasterArrayLength() - 1;
+                                    ctrl.rectifyMaxVisibleBoards();
+                                }
+
+                                $timeout(function () {
+                                    angular.element(element[0].querySelector(".boardstrip-container")).css({
+                                        "width": getBoardstripContainerWidth(ctrl.getBoardsMasterArrayLength()) + "px"
+                                    });
+
+                                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                                    /* Update tabindecies to ensure keyboard navigation behaves correctly */
+                                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                                });
+                            }
+
+                            ctrl.setAddBoardPressedFlag(false);
+                        }
+                    }
+                });
+
+                scope.nextBoard = function () {
+                    ctrl.maxVisibleIndex += BoardStripConfig.boardsToScroll;
+                    ctrl.rectifyMaxVisibleBoards();
+                    ctrl.minVisibleIndex = ctrl.maxVisibleIndex - (BoardStripConfig.maxVisibleBoards - 1);
+
+                    $timeout.cancel(oldTimeout);
+                    angular.element(element[0].querySelector(".boardstrip-container")).css({
+                        "left": calculateAndGetBoardstripContainerAdjustment() + "px"
+                    });
+
+                    $timeout(function () {
+                        var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+
+                        /* Remove tabindex from non-visible boards */
+                        updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+
+                        if (!(scope.isNextBoard())) {
+                            try {
+                                currentBoardArray[currentBoardArray.length - 1].focus();
+                            } catch (e) { /* IE8 may throw exception */ }
+                        }
+                    }, animationTimeout);
+                };
+                scope.prevBoard = function () {
+
+                    ctrl.minVisibleIndex -= BoardStripConfig.boardsToScroll;
+                    if (ctrl.minVisibleIndex < 0) {
+                        ctrl.minVisibleIndex = 0;
+                    }
+
+                    ctrl.maxVisibleIndex = ctrl.minVisibleIndex + BoardStripConfig.maxVisibleBoards - 1;
+                    ctrl.rectifyMaxVisibleBoards();
+
+                    $timeout.cancel(oldTimeout);
+                    angular.element(element[0].querySelector(".boardstrip-container")).css({
+                        "left": calculateAndGetBoardstripContainerAdjustment() + "px"
+                    });
+
+                    $timeout(function () {
+                        var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+
+                        /* Remove tabindex from non-visible boards */
+                        updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+
+                        if (ctrl.minVisibleIndex === 0) {
+                            try {
+                                element[0].querySelector('div.boardstrip-item--add').focus();
+                            } catch (e) { /* IE8 may throw exception */ }
+                        }
+                    });
+                };
+
+                scope.isPrevBoard = function () {
+                    return (ctrl.minVisibleIndex > 0);
+                };
+                scope.isNextBoard = function () {
+                    return (ctrl.getBoardsMasterArrayLength() - 1 > ctrl.maxVisibleIndex);
+                };
+
+                ngModelCtrl.$render = function () {
+                    if (ngModelCtrl.$viewValue || ngModelCtrl.$viewValue === 0) {
+                        var newCurrentIndex = ngModelCtrl.$viewValue;
+
+                        if (!(newCurrentIndex = parseInt(newCurrentIndex, 10))) {
+                            newCurrentIndex = 0;
+                        }
+
+                        if (newCurrentIndex <= 0) {
+                            ctrl.resetBoardStrip();
+                            newCurrentIndex = 0;
+
+                            var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                            if (currentBoardArray.length !== 0) {
+                                animateBoardstripContainerAdjustment(currentBoardArray[0]);
+                            } else {
+                                element[0].querySelector('div.boardstrip-item--add').focus();
+                            }
+                            /* Update tabindecies to ensure keyboard navigation behaves correctly */
+                            updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                        } else if (newCurrentIndex >= ctrl.getBoardsMasterArrayLength()) {
+                            ctrl.maxVisibleIndex = ctrl.getBoardsMasterArrayLength() - 1;
+                            ctrl.rectifyMaxVisibleBoards();
+                            ctrl.minVisibleIndex = Math.max(ctrl.maxVisibleIndex - BoardStripConfig.maxVisibleBoards + 1, 0);
+
+                            newCurrentIndex = ctrl.maxVisibleIndex;
+
+                            $timeout(function () {
+                                var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                                animateBoardstripContainerAdjustment(currentBoardArray[newCurrentIndex]);
+                                /* Update tabindecies to ensure keyboard navigation behaves correctly */
+                                updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                            });
+                        } else {
+
+                            if (!(newCurrentIndex >= ctrl.minVisibleIndex && newCurrentIndex <= ctrl.maxVisibleIndex)) {
+                                ctrl.minVisibleIndex = newCurrentIndex;
+                                ctrl.maxVisibleIndex = ctrl.minVisibleIndex + BoardStripConfig.maxVisibleBoards - 1;
+                                ctrl.rectifyMaxVisibleBoards();
+
+                                if (ctrl.getBoardsMasterArrayLength() < BoardStripConfig.maxVisibleBoards) {
+                                    ctrl.minVisibleIndex = 0;
+                                } else {
+                                    ctrl.minVisibleIndex = Math.max(ctrl.maxVisibleIndex - BoardStripConfig.maxVisibleBoards + 1, 0);
+                                }
+
+                                $timeout(function () {
+                                    var currentBoardArray = element[0].querySelectorAll('[b2b-board]');
+                                    animateBoardstripContainerAdjustment(currentBoardArray[newCurrentIndex]);
+                                    /* Update tabindecies to ensure keyboard navigation behaves correctly */
+                                    updateBoardsTabIndex(currentBoardArray, ctrl.minVisibleIndex, ctrl.maxVisibleIndex);
+                                });
+                            }
+                        }
+                        scope.currentIndex = newCurrentIndex;
+                        ngModelCtrl.$setViewValue(newCurrentIndex);
+                    } else {
+                        ctrl.resetBoardStrip();
+                        ngModelCtrl.$setViewValue(0);
+                    }
+                };
+
+                scope.$watch('currentIndex', function (newVal, oldVal) {
+                    if (newVal !== oldVal && ngModelCtrl && ngModelCtrl.$viewValue !== newVal) {
+                        ngModelCtrl.$setViewValue(newVal);
+                    }
+                });
+            }
+        };
+    }])
+    .directive('b2bAddBoard', ['BoardStripConfig', '$parse', function (BoardStripConfig, $parse) {
+        return {
+            restrict: 'AE',
+            replace: true,
+            require: '^b2bBoardStrip',
+            scope: {
+                onAddBoard: '&?'
+            },
+            templateUrl: 'b2bTemplate/boardstrip/b2bAddBoard.html',
+            link: function (scope, element, attrs, ctrl) {
+                scope.addBoard = function () {
+                    if (attrs['onAddBoard']) {
+                        scope.onAddBoard = $parse(scope.onAddBoard);
+                        scope.onAddBoard();
+                        ctrl.setAddBoardPressedFlag(true);
+                    }
+                };
+            }
+        };
+    }])
+    .directive('b2bBoardNavigation', ['keymap', 'events', function (keymap, events) {
+        return {
+            restrict: 'AE',
+            link: function (scope, elem) {
+
+                var prevElem = keymap.KEY.LEFT;
+                var nextElem = keymap.KEY.RIGHT;
+
+                elem.bind('keydown', function (ev) {
+
+                    if (!(ev.keyCode)) {
+                        ev.keyCode = ev.which;
+                    }
+
+                    switch (ev.keyCode) {
+                    case nextElem:
+                        events.preventDefault(ev);
+                        events.stopPropagation(ev);
+
+                        if (elem[0].nextElementSibling && parseInt(angular.element(elem[0].nextElementSibling).attr('tabindex')) >= 0) {
+                            angular.element(elem[0])[0].nextElementSibling.focus();
+                        } else {
+                            /* IE8 fix */
+                            var el = angular.element(elem[0])[0];
+                            do {
+                                if (el.nextSibling) {
+                                    el = el.nextSibling;
+                                } else {
+                                    break;
+                                }
+                            } while (el && el.tagName !== 'LI');
+
+                            if (el.tagName && el.tagName === 'LI' && parseInt(angular.element(el).attr('tabindex')) >= 0) {
+                                el.focus();
+                            }
+                        }
+
+                        break;
+                    case prevElem:
+                        events.preventDefault(ev);
+                        events.stopPropagation(ev);
+
+                        if (elem[0].previousElementSibling && parseInt(angular.element(elem[0].previousElementSibling).attr('tabindex')) >= 0) {
+                            angular.element(elem[0])[0].previousElementSibling.focus();
+                        } else {
+                            /* IE8 fix */
+                            var el1 = angular.element(elem[0])[0];
+                            do {
+                                if (el1.previousSibling) {
+                                    el1 = el1.previousSibling;
+                                } else {
+                                    break;
+                                }
+                            } while (el1 && el1.tagName !== 'LI');
+
+                            if (el1.tagName && el1.tagName === 'LI' && parseInt(angular.element(el1).attr('tabindex')) >= 0) {
+                                el1.focus();
+                            }
+                        }
+                        break;
+                    default:
+                        break;
+                    }
+                });
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Navigation.att:breadcrumbs
+ *
+ * @description
+ *  <file src="src/breadcrumbs/docs/readme.md" />
+ * @usage
+    <ul class="breadcrumb">
+        <li ng-repeat="link in breadCrumbsLink"><a tabindex="{{(idx==$index)?-1:0}}" href='javascript:void(0)' ng-click="clickActive($index)" ng-class="{'active':idx==$index, '': idx!=$index}">{{link.title}}</a></li>
+    </ul>
+ * @example
+ <example module="b2b.att">
+ <file src="src/breadcrumbs/docs/demo.html" />
+ <file src="src/breadcrumbs/docs/demo.js" />
+ </example>
+ */
+angular.module('b2b.att.breadcrumbs',[])
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:buttonGroups
+ *
+ * @description
+ *  <file src="src/buttonGroups/docs/readme.md" />
+ *
+ * @usage
+<h2>Radio Aproach</h2>
+<div class="btn-group" b2b-key prev="37,38" next="39,40" circular-traversal role="radiogroup">
+    <button type="button" class="btn btn-secondary" b2b-key-item ng-focus="radioModel='Button 1'" ng-model="radioModel" b2b-btn-radio="'Button 1'" tabindex="{{(!radioModel || 'Button 1'===radioModel)?0:-1}}">Button 1</button>
+    <button type="button" class="btn btn-secondary" b2b-key-item ng-focus="radioModel='Button 2'" ng-model="radioModel" b2b-btn-radio="'Button 2'" tabindex="{{(!radioModel || 'Button 2'===radioModel)?0:-1}}">Button 2</button>
+    <button type="button" class="btn btn-secondary" b2b-key-item ng-focus="radioModel='Button 3'" ng-model="radioModel" b2b-btn-radio="'Button 3'" tabindex="{{(!radioModel || 'Button 3'===radioModel)?0:-1}}">Button 3</button>
+</div>
+
+<h2>Checkbox Aproach</h2>
+<span b2b-button-group class="btn-group btn-fullwidth" role="group" max-select="3" ng-model="checkModel1">
+    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button1" b2b-btn-checkbox>Button1</button>
+    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button2" b2b-btn-checkbox>Button2</button>
+    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button3" b2b-btn-checkbox>Button3</button>
+    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button4" b2b-btn-checkbox>Button4</button>
+    <button type="button" class="btn btn-secondary" ng-model="checkModel1.Button5" b2b-btn-checkbox>Button5</button>
+</span>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/buttonGroups/docs/demo.html" />
+            <file src="src/buttonGroups/docs/demo.js" />
+       </example>
+        </section>
+ *
+ */
+angular.module('b2b.att.buttonGroups', ['b2b.att.utilities'])
+    .constant('buttonConfig', {
+        activeClass: 'active',
+        toggleEvent: 'click'
+    })
+    .directive('b2bBtnRadio', ['buttonConfig', function (buttonConfig) {
+        var activeClass = buttonConfig.activeClass || 'active';
+        var toggleEvent = buttonConfig.toggleEvent || 'click';
+
+        return {
+            require: 'ngModel',
+            link: function (scope, element, attrs, ngModelCtrl) {
+                var notMobile = !/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+                if (notMobile) {
+                    element.bind('focus', function () {
+                        scope.$apply(function () {
+                            ngModelCtrl.$setViewValue(scope.$eval(attrs.b2bBtnRadio));
+                            ngModelCtrl.$render();
+                        });
+                    });
+                }
+
+                element.attr('role', 'radio');
+
+                //model -> UI
+                ngModelCtrl.$render = function () {
+                    element.toggleClass(activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.b2bBtnRadio)));
+                    if (angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.b2bBtnRadio))) {
+                        element.attr("aria-checked", true);
+                    } else {
+                        element.attr("aria-checked", false);
+                    }
+                };
+
+                //ui->model
+                element.bind(toggleEvent, function () {
+                    if (!element.hasClass(activeClass)) {
+                        scope.$apply(function () {
+                            ngModelCtrl.$setViewValue(scope.$eval(attrs.b2bBtnRadio));
+                            ngModelCtrl.$render();
+                        });
+                    }
+                });
+            }
+        };
+    }])
+    .directive('b2bBtnCheckbox', ['buttonConfig', function (buttonConfig) {
+        var activeClass = buttonConfig.activeClass || 'active';
+        var toggleEvent = buttonConfig.toggleEvent || 'click';
+
+        return {
+            require: ['ngModel', '^^b2bButtonGroup'],
+            link: function (scope, element, attrs, ctrls) {
+
+                var ngModelCtrl = ctrls[0];
+                var parentCtrl = ctrls[1];
+
+                element.attr('role', 'checkbox');
+                element.attr('aria-describedby', parentCtrl.getStateDescriptionElemId());
+
+                function getTrueValue() {
+                    var trueValue = scope.$eval(attrs.b2bBtnCheckboxTrue);
+                    return angular.isDefined(trueValue) ? trueValue : true;
+                }
+
+                function getFalseValue() {
+                    var falseValue = scope.$eval(attrs.b2bBtnCheckboxFalse);
+                    return angular.isDefined(falseValue) ? falseValue : false;
+                }
+
+                //model -> UI
+                ngModelCtrl.$render = function () {
+                    element.toggleClass(activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue()));
+                    if ((angular.equals(ngModelCtrl.$modelValue, getTrueValue()))) {
+                        element.attr("aria-checked", true);
+                    } else {
+                        element.attr("aria-checked", false);
+                    }
+                };
+
+                //ui->model
+                element.bind(toggleEvent, function () {
+                    scope.$apply(function () {
+                        ngModelCtrl.$setViewValue(element.hasClass(activeClass) ? getFalseValue() : getTrueValue());
+                        ngModelCtrl.$render();
+                    });
+                });
+            }
+        };
+    }])
+    .directive('b2bButtonGroup', ['$timeout', '$compile', function ($timeout, $compile) {
+        return {
+            restrict: 'A',
+            scope: {
+                maxSelect: "=",
+                ngModelButtonState: '=ngModel'
+            },
+            controller: ['$scope', '$element', function ($scope, $element) {
+                $scope.nSel = 0;
+
+                var stateDescriptionElem = angular.element('<span id="b2b_button_group_' + $scope.$id + '" class="hide" aria-hidden="true">{{nSel}} of {{maxSelect}} options selected.</span>');
+                $compile(stateDescriptionElem)($scope);
+                $element.after(stateDescriptionElem);
+
+                this.getStateDescriptionElemId = function () {
+                    return stateDescriptionElem.attr('id');
+                };
+            }],
+            link: function (scope, element) {
+
+
+                var executeFxn = function () {
+                    scope.nSel = 0;
+                    angular.forEach(scope.ngModelButtonState, function (value, key) {
+                        if (value === true) {
+                            scope.nSel += 1;
+                        }
+                    });
+
+                    if (scope.nSel >= scope.maxSelect) {
+                        angular.forEach(element.children(), function (chd) {
+                            if (chd.className.indexOf('active') < 0) {
+                                chd.disabled = true;
+                                chd.setAttribute('aria-disabled', true);
+                            }
+                        });
+                    } else {
+                        angular.forEach(element.children(), function (chd) {
+                            chd.disabled = false;
+                            chd.setAttribute('aria-disabled', false);
+                        });
+                    }
+                    scope.$digest();
+                };
+
+                $timeout(function () {
+                    executeFxn();
+                });
+                element.bind('click', executeFxn);
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:buttons
+ * @element input
+ * @function
+ *
+ * @description
+ *  <file src="src/buttons/docs/readme.md" />
+ * @usage
+ *
+Button shape
+<button class="btn" type="button">Button</button> button.btn (button shape only)
+<button aria-label="Custom aria label" class="btn" type="button">Button</button> button.btn (button shape only) with custom aria label
+<button aria-label="Click on button/Press enter" class="btn" type="button" onclick="javascript:alert('It works!');">Click on button/Press enter</button> button.btn with click functionality
+<a b2b-keyup-click="32" href="javascript:void(0)" class="btn" role="button">Button</a> a.btn (button shape only)
+<button class="btn btn-primary">Button</button> .btn-primary
+<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-primary" role="button">Button</a> a.btn-primary
+
+5 Button colors
+<button class="btn btn-secondary">Button</button> .btn-secondary
+<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-secondary" role="button">Button</a> a.btn-secondary
+<button class="btn btn-alt">Button</button> .btn-alt
+<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-alt" role="button">Button</a> a.btn-alt
+<button class="btn btn-specialty">Button</button> .btn-specialty
+<a b2b-keyup-click="32" href="javascript:void(0)" class="btn btn-specialty" role="button">Button</a> a.btn-specialty
+<button class="btn btn-specialty" disabled="">Button</button> disabled="disabled"
+<a b2b-keyup-click="32" aria-disabled="true" href="javascript:void(0)" class="btn btn-primary disabled" role="button">Button</a> a.disabled
+
+3 button heights
+<button class="btn btn-secondary">Button</button> .btn is default and 46px height
+<button class="btn btn-secondary btn-medium">Button</button> .btn-medium is 42px
+<button class="btn btn-secondary btn-small">Button</button> .btn-small is 36px
+
+.row-nowrap 2 up buttons
+<div class="row-nowrap">
+    <button class="btn btn-secondary btn-fullwidth" type="button">Cancel</button>
+    <button class="btn btn-primary btn-fullwidth" type="button">Continue</button>
+</div>
+
+.row 2 up buttons (desktop) stacked (mobile) (different order)
+<div class="row cta-button-group">
+    <button class="span btn btn-secondary btn-fullwidth hidden-phone" type="button">Cancel</button>
+    <button class="span btn btn-primary btn-fullwidth" type="button">Continue</button>
+    <button class="span btn btn-secondary btn-fullwidth visible-phone" type="button">Cancel</button>
+</div>
+
+ * @example
+ *  <section id="code">
+               <b>HTML + AngularJS</b>
+ *              <example module="b2b.att">
+ *              <file src="src/buttons/docs/demo.html" />
+                 <file src="src/buttons/docs/demo.js" />
+ *              </example>
+            </section>
+ *
+ */
+angular.module('b2b.att.buttons', ['b2b.att.utilities']);
+/**
+ * @ngdoc directive
+ * @name Forms.att:calendar
+ *
+ * @description
+ *  <file src="src/calendar/docs/readme.md" />
+ * @usage
+ *  <input type="text" ng-model="dt" b2b-datepicker>
+ *
+ * @example
+   <section id="code">
+    <b>HTML + AngularJS</b>
+    <example module="b2b.att">
+     <file src="src/calendar/docs/demo.html" />
+     <file src="src/calendar/docs/demo.js" />
+    </example>
+   </section>
+ */
+angular.module('b2b.att.calendar', ['b2b.att.position', 'b2b.att.utilities'])
+
+.constant('b2bDatepickerConfig', {
+    dateFormat: 'MM/dd/yyyy',
+    dayFormat: 'd',
+    monthFormat: 'MMMM',
+    yearFormat: 'yyyy',
+    dayHeaderFormat: 'EEEE',
+    dayTitleFormat: 'MMMM yyyy',
+    disableWeekend: false,
+    disableSunday: false,
+    disableDates: null,
+    onSelectClose: null,
+    startingDay: 0,
+    minDate: null,
+    maxDate: null,
+    dueDate: null,
+    fromDate: null,
+    legendIcon: null,
+    legendMessage: null,
+    calendarDisabled: false,
+    collapseWait: 0,
+    orientation: 'left',
+    inline: false,
+    helperText: 'The date you selected is $date. In case of mobile double tap to open calendar. Select a date to close the calendar.',
+    datepickerEvalAttributes: ['dateFormat', 'dayFormat', 'monthFormat', 'yearFormat', 'dayHeaderFormat', 'dayTitleFormat', 'disableWeekend', 'disableSunday', 'startingDay', 'collapseWait', 'orientation'],
+    datepickerWatchAttributes: ['min', 'max', 'due', 'from', 'legendIcon', 'legendMessage', 'ngDisabled'],
+    datepickerFunctionAttributes: ['disableDates', 'onSelectClose']
+})
+
+.factory('b2bDatepickerService', ['b2bDatepickerConfig', 'dateFilter', function (b2bDatepickerConfig, dateFilter) {
+    var setAttributes = function (attr, elem) {
+        if (angular.isDefined(attr) && attr !== null && angular.isDefined(elem) && elem !== null) {
+            var attributes = b2bDatepickerConfig.datepickerEvalAttributes.concat(b2bDatepickerConfig.datepickerWatchAttributes, b2bDatepickerConfig.datepickerFunctionAttributes);
+            for (var key in attr) {
+                var val = attr[key];
+                if (attributes.indexOf(key) !== -1 && angular.isDefined(val)) {
+                    elem.attr(key.toSnakeCase(), key);
+                }
+            }
+        }
+    };
+
+    var bindScope = function (attr, scope) {
+        if (angular.isDefined(attr) && attr !== null && angular.isDefined(scope) && scope !== null) {
+            var evalFunction = function (key, val) {
+                scope[key] = scope.$parent.$eval(val);
+            };
+
+            var watchFunction = function (key, val) {
+                scope.$parent.$watch(val, function (value) {
+                    scope[key] = value;
+                });
+                scope.$watch(key, function (value) {
+                    scope.$parent[val] = value;
+                });
+            };
+
+            var evalAttributes = b2bDatepickerConfig.datepickerEvalAttributes;
+            var watchAttributes = b2bDatepickerConfig.datepickerWatchAttributes;
+            for (var key in attr) {
+                var val = attr[key];
+                if (evalAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {
+                    evalFunction(key, val);
+                } else if (watchAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {
+                    watchFunction(key, val);
+                }
+            }
+        }
+    };
+
+    return {
+        setAttributes: setAttributes,
+        bindScope: bindScope
+    };
+}])
+
+.controller('b2bDatepickerController', ['$scope', '$attrs', 'dateFilter', '$element', '$position', 'b2bDatepickerConfig', function ($scope, $attrs, dateFilter, $element, $position, dtConfig) {
+    var format = {
+            date: getValue($attrs.dateFormat, dtConfig.dateFormat),
+            day: getValue($attrs.dayFormat, dtConfig.dayFormat),
+            month: getValue($attrs.monthFormat, dtConfig.monthFormat),
+            year: getValue($attrs.yearFormat, dtConfig.yearFormat),
+            dayHeader: getValue($attrs.dayHeaderFormat, dtConfig.dayHeaderFormat),
+            dayTitle: getValue($attrs.dayTitleFormat, dtConfig.dayTitleFormat),
+            disableWeekend: getValue($attrs.disableWeekend, dtConfig.disableWeekend),
+            disableSunday: getValue($attrs.disableSunday, dtConfig.disableSunday),
+            disableDates: getValue($attrs.disableDates, dtConfig.disableDates)
+        },
+        startingDay = getValue($attrs.startingDay, dtConfig.startingDay);
+
+    $scope.minDate = dtConfig.minDate ? $scope.resetTime(dtConfig.minDate) : null;
+    $scope.maxDate = dtConfig.maxDate ? $scope.resetTime(dtConfig.maxDate) : null;
+    $scope.dueDate = dtConfig.dueDate ? $scope.resetTime(dtConfig.dueDate) : null;
+    $scope.fromDate = dtConfig.fromDate ? $scope.resetTime(dtConfig.fromDate) : null;
+    $scope.legendIcon = dtConfig.legendIcon ? dtConfig.legendIcon : null;
+    $scope.legendMessage = dtConfig.legendMessage ? dtConfig.legendMessage : null;
+    $scope.ngDisabled = dtConfig.calendarDisabled ? dtConfig.calendarDisabled : null;
+    $scope.collapseWait = getValue($attrs.collapseWait, dtConfig.collapseWait);
+    $scope.orientation = getValue($attrs.orientation, dtConfig.orientation);
+    $scope.onSelectClose = getValue($attrs.onSelectClose, dtConfig.onSelectClose);
+
+    $scope.inline = $attrs.inline === 'true' ? true : dtConfig.inline;
+
+    function getValue(value, defaultValue) {
+        return angular.isDefined(value) ? $scope.$parent.$eval(value) : defaultValue;
+    }
+
+    function getDaysInMonth(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+
+    function getDates(startDate, n) {
+        var dates = new Array(n);
+        var current = startDate,
+            i = 0;
+        while (i < n) {
+            dates[i++] = new Date(current);
+            current.setDate(current.getDate() + 1);
+        }
+        return dates;
+    }
+
+    this.updatePosition = function (b2bDatepickerPopupTemplate) {
+        $scope.position = $position.offset($element);
+        $scope.position.top = $scope.position.top + $element.find('input').prop('offsetHeight');
+        if ($scope.orientation === 'right') {
+            $scope.position.left = $scope.position.left - (((b2bDatepickerPopupTemplate && b2bDatepickerPopupTemplate.prop('offsetWidth')) || 290) - $element.find('input').prop('offsetWidth'));
+        }
+    };
+
+    function isSelected(dt) {
+        if (dt && angular.isDate($scope.currentDate) && compare(dt, $scope.currentDate) === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    function isFromDate(dt) {
+        if (dt && angular.isDate($scope.fromDate) && compare(dt, $scope.fromDate) === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    function isDateRange(dt) {
+        if (dt && $scope.fromDate && angular.isDate($scope.currentDate) && (compare(dt, $scope.fromDate) >= 0) && (compare(dt, $scope.currentDate) <= 0)) {
+            return true;
+        } else if (dt && $scope.fromDate && compare(dt, $scope.fromDate) === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    function isOld(date, currentMonthDate) {
+        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() < new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function isNew(date, currentMonthDate) {
+        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() > new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function isPastDue(dt) {
+        if ($scope.dueDate) {
+            return (dt > $scope.dueDate);
+        }
+        return false;
+    }
+
+    function isDueDate(dt) {
+        if ($scope.dueDate) {
+            return (dt.getTime() === $scope.dueDate.getTime());
+        }
+        return false;
+    }
+
+    var isDisabled = function (date, currentMonthDate) {
+        if ($attrs.from && !angular.isDate($scope.fromDate)) {
+            return true;
+        }
+        if (format.disableWeekend === true && (dateFilter(date, format.dayHeader) === "Saturday" || dateFilter(date, format.dayHeader) === "Sunday")) {
+            return true;
+        }
+        if (format.disableSunday === true && (dateFilter(date, format.dayHeader) === "Sunday")) {
+            return true;
+        }
+        if (isOld(date, currentMonthDate) || isNew(date, currentMonthDate)) {
+            return true;
+        }
+        return (($scope.minDate && compare(date, $scope.minDate) < 0) || ($scope.maxDate && compare(date, $scope.maxDate) > 0) || (format.disableDates && format.disableDates({
+            date: date
+        })));
+    };
+
+    var compare = function (date1, date2) {
+        return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+    };
+
+    function isMinDateAvailable(startDate, endDate) {
+        if (($scope.minDate && $scope.minDate.getTime() >= startDate.getTime()) && ($scope.minDate.getTime() <= endDate.getTime())) {
+            $scope.disablePrev = true;
+            $scope.visibilityPrev = "hidden";
+        } else {
+            $scope.disablePrev = false;
+            $scope.visibilityPrev = "visible";
+        }
+    }
+
+    function isMaxDateAvailable(startDate, endDate) {
+        if (($scope.maxDate && $scope.maxDate.getTime() >= startDate.getTime()) && ($scope.maxDate.getTime() <= endDate.getTime())) {
+            $scope.disableNext = true;
+            $scope.visibilityNext = "hidden";
+        } else {
+            $scope.disableNext = false;
+            $scope.visibilityNext = "visible";
+        }
+    }
+
+    function getLabel(label) {
+        if (label) {
+            var labelObj = {
+                pre: label.substr(0, 1).toUpperCase(),
+                post: label
+            };
+            return labelObj;
+        }
+        return;
+    }
+
+    function makeDate(date, dayFormat, dayHeaderFormat, isSelected, isFromDate, isDateRange, isOld, isNew, isDisabled, dueDate, pastDue) {
+        return {
+            date: date,
+            label: dateFilter(date, dayFormat),
+            header: dateFilter(date, dayHeaderFormat),
+            selected: !!isSelected,
+            fromDate: !!isFromDate,
+            dateRange: !!isDateRange,
+            oldMonth: !!isOld,
+            nextMonth: !!isNew,
+            disabled: !!isDisabled,
+            dueDate: !!dueDate,
+            pastDue: !!pastDue,
+            focusable: !((isDisabled && !(isSelected || isDateRange)) || (isOld || isNew))
+        };
+    }
+
+    this.modes = [
+        {
+            name: 'day',
+            getVisibleDates: function (date) {
+                var year = date.getFullYear(),
+                    month = date.getMonth(),
+                    firstDayOfMonth = new Date(year, month, 1),
+                    lastDayOfMonth = new Date(year, month + 1, 0);
+                var difference = startingDay - firstDayOfMonth.getDay(),
+                    numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference,
+                    firstDate = new Date(firstDayOfMonth),
+                    numDates = 0;
+
+                if (numDisplayedFromPreviousMonth > 0) {
+                    firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+                    numDates += numDisplayedFromPreviousMonth; // Previous
+                }
+                numDates += getDaysInMonth(year, month + 1); // Current
+                numDates += (7 - numDates % 7) % 7; // Next
+
+                var days = getDates(firstDate, numDates),
+                    labels = new Array(7);
+                for (var i = 0; i < numDates; i++) {
+                    var dt = new Date(days[i]);
+                    days[i] = makeDate(dt,
+                        format.day,
+                        format.dayHeader,
+                        isSelected(dt),
+                        isFromDate(dt),
+                        isDateRange(dt),
+                        isOld(dt, date),
+                        isNew(dt, date),
+                        isDisabled(dt, date),
+                        isDueDate(dt),
+                        isPastDue(dt));
+                }
+                for (var j = 0; j < 7; j++) {
+                    labels[j] = getLabel(dateFilter(days[j].date, format.dayHeader));
+                }
+                isMinDateAvailable(firstDayOfMonth, lastDayOfMonth);
+                isMaxDateAvailable(firstDayOfMonth, lastDayOfMonth);
+                return {
+                    objects: days,
+                    title: dateFilter(date, format.dayTitle),
+                    labels: labels
+                };
+            },
+            split: 7,
+            step: {
+                months: 1
+            }
+        }
+    ];
+}])
+
+.directive('b2bDatepickerPopup', ['$parse', '$log', '$timeout', '$document', '$documentBind', '$isElement', '$templateCache', '$compile', 'trapFocusInElement', '$position', '$window', function ($parse, $log, $timeout, $document, $documentBind, $isElement, $templateCache, $compile, trapFocusInElement, $position, $window) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        transclude: true,
+        templateUrl: function (elem, attr) {
+            if (attr.inline === 'true') {
+                return 'b2bTemplate/calendar/datepicker-popup.html';
+            } else {
+                return 'b2bTemplate/calendar/datepicker.html';
+            }
+        },
+        scope: {},
+        require: ['b2bDatepickerPopup', 'ngModel', '?^b2bDatepickerGroup'],
+        controller: 'b2bDatepickerController',
+        link: function (scope, element, attrs, ctrls) {
+            var datepickerCtrl = ctrls[0],
+                ngModel = ctrls[1],
+                b2bDatepickerGroupCtrl = ctrls[2];
+            var b2bDatepickerPopupTemplate;
+
+            if (!ngModel) {
+                $log.error("ng-model is required.");
+                return; // do nothing if no ng-model
+            }
+
+            // Configuration parameters
+            var mode = 0,
+                selected;
+            scope.isOpen = false;
+
+            scope.headers = [];
+            scope.footers = [];
+
+            if (b2bDatepickerGroupCtrl) {
+                b2bDatepickerGroupCtrl.registerDatepickerScope(scope);
+            }
+
+            element.find('button').bind('click', function () {
+                element.find('input')[0].click();
+            });
+
+            element.find('input').bind('click', function () {
+                if (!scope.ngDisabled) {
+                    scope.isOpen = !scope.isOpen;
+                    toggleCalendar(scope.isOpen);
+                    scope.$apply();
+                    datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);
+                    $timeout(function () { 
+                        angular.element(element[0].querySelector('.datepicker-input')).scrollTop=0;
+                    },10);
+                }
+            });
+            var toggleCalendar = function (flag) {
+                if (!scope.inline) {
+                    if (flag) {
+                        b2bDatepickerPopupTemplate = angular.element($templateCache.get('b2bTemplate/calendar/datepicker-popup.html'));
+                        b2bDatepickerPopupTemplate = $compile(b2bDatepickerPopupTemplate)(scope);
+                        $document.find('body').append(b2bDatepickerPopupTemplate);
+                        b2bDatepickerPopupTemplate.bind('keydown', keyPress);
+                        $timeout(function () {
+                            scope.getFocus = true;
+                            trapFocusInElement(flag, b2bDatepickerPopupTemplate);
+                            scope.$apply();
+                            $timeout(function () {
+                                scope.getFocus = false; 
+                                scope.$apply();
+                            }, 100);
+                        });
+                    } else {
+                        b2bDatepickerPopupTemplate.unbind('keydown', keyPress);
+                        b2bDatepickerPopupTemplate.remove();
+                        element.find('button')[0].focus();
+                        scope.getFocus = false;
+                        trapFocusInElement(flag, b2bDatepickerPopupTemplate);
+                    }
+                }
+            };
+
+            var outsideClick = function (e) {
+                var isElement = $isElement(angular.element(e.target), element, $document);
+                var isb2bDatepickerPopupTemplate = $isElement(angular.element(e.target), b2bDatepickerPopupTemplate, $document);
+                if (!(isElement || isb2bDatepickerPopupTemplate)) {
+                    scope.isOpen = false;
+                    toggleCalendar(scope.isOpen);
+                    scope.$apply();
+                }
+            };
+
+            var keyPress = function (ev) {
+                if (!ev.keyCode) {
+                    if (ev.which) {
+                        ev.keyCode = ev.which;
+                    } else if (ev.charCode) {
+                        ev.keyCode = ev.charCode;
+                    }
+                }
+                if (ev.keyCode) {
+                    if (ev.keyCode === 27) {
+                        scope.isOpen = false;
+                        toggleCalendar(scope.isOpen);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode === 33) {
+                        !scope.disablePrev && scope.move(-1);
+                        $timeout(function () {
+                            scope.getFocus = true;
+                            scope.$apply();
+                            $timeout(function () {
+                                scope.getFocus = false;
+                                scope.$apply();
+                            }, 100);
+                        });
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode === 34) {
+                        !scope.disableNext && scope.move(1);
+                        $timeout(function () {
+                            scope.getFocus = true;
+                            scope.$apply();
+                            $timeout(function () {
+                                scope.getFocus = false;
+                                scope.$apply();
+                            }, 100);
+                        });
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    }
+                    scope.$apply();
+                }
+            };
+
+            $documentBind.click('isOpen', outsideClick, scope);
+
+            var modalContainer = angular.element(document.querySelector('.modalwrapper'));
+            var modalBodyContainer = angular.element(document.querySelector('.modal-body'));
+            if (modalContainer) {
+                modalContainer.bind('scroll', function () {
+                    if (b2bDatepickerPopupTemplate) {
+                        datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);
+                        scope.$apply();
+                    }
+                });
+            }
+            if (modalBodyContainer) {
+                modalBodyContainer.bind('scroll', function () {
+                    if (b2bDatepickerPopupTemplate) {
+                        datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);
+                        var datepickerTextfield = $position.offset(element.find('input'));
+                        var modalBodyPosition = $position.offset(modalBodyContainer);
+
+                        if (((datepickerTextfield.top + datepickerTextfield.height) < modalBodyPosition.top || datepickerTextfield.top > (modalBodyPosition.top + modalBodyPosition.height)) && scope.isOpen) {
+                            scope.isOpen = false;
+                            toggleCalendar(scope.isOpen);
+                        }
+                        scope.$apply();
+                    }
+                });
+            }
+            var window = angular.element($window);
+            window.bind('resize', function () {
+                if (b2bDatepickerPopupTemplate) {
+                    datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);
+                    scope.$apply();
+                }
+            });
+
+            scope.$on('$destroy', function () {
+                if (scope.isOpen) {
+                    scope.isOpen = false;
+                    toggleCalendar(scope.isOpen);
+                }
+            });
+
+            scope.resetTime = function (date) {
+                if (typeof date === 'string') {
+                    date = date + 'T12:00:00';
+                }
+                var dt;
+                if (!isNaN(new Date(date))) {
+                    dt = new Date(date);
+                } else {
+                    return null;
+                }
+                return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());
+            };
+
+            if (attrs.min) {
+                scope.$parent.$watch($parse(attrs.min), function (value) {
+                    scope.minDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+            if (attrs.max) {
+                scope.$parent.$watch($parse(attrs.max), function (value) {
+                    scope.maxDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+            if (attrs.due) {
+                scope.$parent.$watch($parse(attrs.due), function (value) {
+                    scope.dueDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+            if (attrs.from) {
+                scope.$parent.$watch($parse(attrs.from), function (value) {
+                    scope.fromDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+
+            if (attrs.legendIcon) {
+                scope.$parent.$watch(attrs.legendIcon, function (value) {
+                    scope.legendIcon = value ? value : null;
+                    refill();
+                });
+            }
+            if (attrs.legendMessage) {
+                scope.$parent.$watch(attrs.legendMessage, function (value) {
+                    scope.legendMessage = value ? value : null;
+                    refill();
+                });
+            }
+            if (attrs.ngDisabled) {
+                scope.$parent.$watch(attrs.ngDisabled, function (value) {
+                    scope.ngDisabled = value ? value : null;
+                });
+            }
+
+            // Split array into smaller arrays
+            function split(arr, size) {
+                var arrays = [];
+                while (arr.length > 0) {
+                    arrays.push(arr.splice(0, size));
+                }
+                return arrays;
+            }
+
+            function refill(date) {
+                if (angular.isDate(date) && !isNaN(date)) {
+                    selected = new Date(date);
+                } else {
+                    if (!selected) {
+                        selected = new Date();
+                    }
+                }
+
+                if (selected) {
+                    var currentMode = datepickerCtrl.modes[mode],
+                        data = currentMode.getVisibleDates(selected);
+                    scope.rows = split(data.objects, currentMode.split);
+                    var flag = false;
+                    var startFlag = false;
+                    var firstSelected = false;
+                    for (var i = 0; i < scope.rows.length; i++) {
+                        for (var j = 0; j < scope.rows[i].length; j++) {
+
+                            if (scope.rows[i][j].label === "1" && !firstSelected) {
+                                firstSelected = true;
+                                var firstDay = scope.rows[i][j];
+                            }
+
+                            if (scope.rows[i][j].selected === true) {
+                                flag = true;
+                                break;
+                            }
+                        }
+                        if (flag) {
+                            break;
+                        }
+                    }
+                    if (!flag) {
+                        firstDay.firstFocus = true;
+                    }
+
+                    scope.labels = data.labels || [];
+                    scope.title = data.title;
+
+                    datepickerCtrl.updatePosition(b2bDatepickerPopupTemplate);
+                }
+            }
+
+            scope.select = function (date) {
+                var dt = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+                if (!scope.onSelectClose || (scope.onSelectClose && scope.onSelectClose({
+                        date: dt
+                    }) !== false)) {
+                    scope.currentDate = dt;
+                    if (angular.isNumber(scope.collapseWait)) {
+                        $timeout(function () {
+                            scope.isOpen = false;
+                            toggleCalendar(scope.isOpen);
+                        }, scope.collapseWait);
+                    } else {
+                        scope.isOpen = false;
+                        toggleCalendar(scope.isOpen);
+                    }
+                }
+            };
+
+            scope.move = function (direction,$event) {
+                var step = datepickerCtrl.modes[mode].step;
+                selected.setDate(1);
+                selected.setMonth(selected.getMonth() + direction * (step.months || 0));
+                selected.setFullYear(selected.getFullYear() + direction * (step.years || 0));
+                refill();
+
+                $timeout(function () {
+                    trapFocusInElement();
+                }, 100);
+
+                $event.preventDefault();
+                $event.stopPropagation();
+            };
+
+            scope.trapFocus = function () {
+                $timeout(function () {
+                    trapFocusInElement();
+                }, 100);
+            };
+
+            scope.$watch('currentDate', function (value) {
+                if (angular.isDefined(value) && value !== null) {
+                    refill(value);
+                } else {
+                    refill();
+                }
+                ngModel.$setViewValue(value);
+            });
+
+            ngModel.$render = function () {
+                scope.currentDate = ngModel.$viewValue;
+            };
+
+            var stringToDate = function (value) {
+                if (!isNaN(new Date(value))) {
+                    value = new Date(value);
+                }
+                return value;
+            };
+            ngModel.$formatters.unshift(stringToDate);
+        }
+    };
+}])
+
+.directive('b2bDatepicker', ['$compile', '$log', 'b2bDatepickerConfig', 'b2bDatepickerService', function ($compile, $log, b2bDatepickerConfig, b2bDatepickerService) {
+    return {
+        restrict: 'A',
+        scope: {
+            disableDates: '&',
+            onSelectClose: '&'
+        },
+        require: 'ngModel',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            var dateFormatString = angular.isDefined(attr.dateFormat) ? scope.$parent.$eval(attr.dateFormat) : b2bDatepickerConfig.dateFormat;
+            var helperText = angular.isDefined(attr.helperText) ? scope.$parent.$eval(attr.helperText) : b2bDatepickerConfig.helperText;
+            helperText = helperText.replace('$date', '{{dt | date : \'' + dateFormatString + '\'}}');
+
+            var inline = false;
+            if (elem.prop('nodeName') !== 'INPUT') {
+                inline = true;
+            }
+
+            var calendarIcon = '<i class="icon-primary-calendar" aria-hidden="true"></i>'
+            var selectedDateMessage = '<button id="' + attr.btnId + '" type="button" class="span12 faux-input" ng-disabled="ngDisabled"><span class="hidden-spoken">' + helperText + '</span></button>';
+
+            elem.removeAttr('b2b-datepicker');
+            elem.removeAttr('ng-model');
+            elem.removeAttr('ng-disabled');
+            elem.addClass('datepicker-input');
+            elem.attr('ng-model', 'dt');
+            elem.attr('aria-describedby', 'datepicker');
+            elem.attr('aria-hidden', 'true');
+            elem.attr('tabindex', '-1');
+            elem.attr('readonly', 'true');
+            elem.attr('ng-disabled', 'ngDisabled');
+            elem.attr('b2b-format-date', dateFormatString);
+
+            var wrapperElement = angular.element('<div></div>');
+            wrapperElement.attr('b2b-datepicker-popup', '');
+            wrapperElement.attr('ng-model', 'dt');
+            if (inline) {
+                wrapperElement.attr('inline', inline);
+            }
+
+            b2bDatepickerService.setAttributes(attr, wrapperElement);
+            b2bDatepickerService.bindScope(attr, scope);
+
+            wrapperElement.html('');
+            wrapperElement.append(calendarIcon);
+            wrapperElement.append(selectedDateMessage);
+            wrapperElement.append(elem.prop('outerHTML'));
+
+            var elm = wrapperElement.prop('outerHTML');
+            elm = $compile(elm)(scope);
+            elem.replaceWith(elm);
+        }],
+        link: function (scope, elem, attr, ctrl) {
+            if (!ctrl) {
+                $log.error("ng-model is required.");
+                return; // do nothing if no ng-model
+            }
+
+            scope.$watch('dt', function (value) {
+                ctrl.$setViewValue(value);
+            });
+            ctrl.$render = function () {
+                scope.dt = ctrl.$viewValue;
+            };
+        }
+    };
+}])
+
+.directive('b2bDatepickerGroup', [function () {
+    return {
+        restrict: 'EA',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            this.$$headers = [];
+            this.$$footers = [];
+            this.registerDatepickerScope = function (datepickerScope) {
+                datepickerScope.headers = this.$$headers;
+                datepickerScope.footers = this.$$footers;
+            };
+        }],
+        link: function (scope, elem, attr, ctrl) {}
+    };
+}])
+
+.directive('b2bFormatDate', ['dateFilter', function (dateFilter) {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elem, attr, ctrl) {
+            var b2bFormatDate = "";
+            attr.$observe('b2bFormatDate', function (value) {
+                b2bFormatDate = value;
+            });
+            var dateToString = function (value) {
+                if (!isNaN(new Date(value))) {
+                    return dateFilter(new Date(value), b2bFormatDate);
+                }
+                return value;
+            };
+            ctrl.$formatters.unshift(dateToString);
+        }
+    };
+}])
+
+.directive('b2bDatepickerHeader', [function () {
+    return {
+        restrict: 'EA',
+        require: '^b2bDatepickerGroup',
+        transclude: true,
+        replace: true,
+        template: '',
+        compile: function (elem, attr, transclude) {
+            return function link(scope, elem, attr, ctrl) {
+                if (ctrl) {
+                    ctrl.$$headers.push(transclude(scope, function () {}));
+                }
+                elem.remove();
+            };
+        }
+    };
+}])
+
+.directive('b2bDatepickerFooter', [function () {
+    return {
+        restrict: 'EA',
+        require: '^b2bDatepickerGroup',
+        transclude: true,
+        replace: true,
+        template: '',
+        compile: function (elem, attr, transclude) {
+            return function link(scope, elem, attr, ctrl) {
+                if (ctrl) {
+                    ctrl.$$footers.push(transclude(scope, function () {}));
+                }
+                elem.remove();
+            };
+        }
+    };
+}]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:checkboxes
+ *
+ * @description
+ *  <file src="src/checkboxes/docs/readme.md" />
+ * @usage
+ * See demo section
+ * @example
+ <example module="b2b.att">
+ <file src="src/checkboxes/docs/demo.html" />
+ <file src="src/checkboxes/docs/demo.js" />
+ </example>
+ */
+angular.module('b2b.att.checkboxes', ['b2b.att.utilities'])
+.directive('b2bSelectGroup', [function (){
+        return {
+            restrict: 'A',
+            require: 'ngModel',
+            scope: {
+                checkboxes: "="
+            },
+            link: function (scope, elem, attr, ctrl) {
+                elem.bind('change', function () {
+                    var isChecked = elem.prop('checked');
+                    angular.forEach(scope.checkboxes, function (item) {
+                        item.isSelected = isChecked;
+                    });
+                    scope.$apply();
+                });
+                scope.$watch('checkboxes', function () {
+                    var setBoxes = 0;
+                    if(scope.checkboxes === undefined) {
+                        return;
+                    }
+                    angular.forEach(scope.checkboxes, function (item) {
+                        if (item.isSelected) {
+                            setBoxes++; 
+                        } 
+                    });
+                    elem.prop('indeterminate', false);
+                    if ( scope.checkboxes !==undefined && setBoxes === scope.checkboxes.length && scope.checkboxes.length > 0) { 
+                        ctrl.$setViewValue(true); 
+                        elem.removeClass('indeterminate');
+                    } else if (setBoxes === 0) { 
+                       ctrl.$setViewValue(false); 
+                       elem.removeClass('indeterminate');
+                    } else { 
+                        ctrl.$setViewValue(false); 
+                        elem.addClass('indeterminate');
+                        elem.prop('indeterminate', true); 
+                    }
+                    ctrl.$render();
+                }, true);
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Misc.att:coachmark
+ *
+ * @description
+ * <file src="src/coachmark/docs/readme.md" />
+ *
+ * @usage
+ *
+<button b2b-coachmark start-coachmark-callback="startCoachmark()" end-coachmark-callback="endCoachmark()" action-coachmark-callback="actionCoachmark(action)" coachmark-index="coachmarkIndex" coachmarks="coachmarkElements" id="coachmark0" class="btn btn-alt">Initiate tour</button>
+
+ * @example
+    <section id="code">   
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/coachmark/docs/demo.html" />
+            <file src="src/coachmark/docs/demo.js" />
+        </example>
+    </section>
+ */
+
+angular.module('b2b.att.coachmark', ['b2b.att.utilities','b2b.att.position'])
+        
+    .directive('b2bCoachmark', ['$document', '$compile', '$position', '$timeout', function($document, $compile, $position, $timeout) {
+        return {
+            restrict: 'A',
+             scope: {
+                coachmarks: '=',
+                coachmarkIndex: '=',
+                startCoachmarkCallback: '&',
+                endCoachmarkCallback: '&',
+                actionCoachmarkCallback: '&'
+            },
+            link: function (scope, element, attrs, ctrl) {
+                var coachmarkItems = scope.coachmarks;
+                var body = $document.find('body').eq(0);
+                var coackmarkJqContainer;
+                var coackmarkContainer;
+                var coachMarkElement;
+                var backdropjqLiteEl;
+                var coachmarkHighlight;
+                var initaitedCoachmark = false;
+                scope.coackmarkElPos ={
+                    'top':'',
+                    'left':''
+                };
+                
+                scope.currentCoachmark = {};
+                
+                
+                var coachmarkBackdrop = function(){
+                    backdropjqLiteEl = angular.element('<div class="b2b-modal-backdrop fade in hidden-by-modal"></div>');
+                    body.append(backdropjqLiteEl);
+
+                    backdropjqLiteEl.bind('click', function() {
+                        scope.closeCoachmark();
+                        scope.$apply();
+                    });
+                };
+                
+                
+                scope.closeButtonFocus = function(){
+                    if(document.getElementsByClassName('b2b-coachmark-header').length >0){
+                        document.getElementsByClassName('b2b-coachmark-header')[0].scrollLeft = 0;
+                        document.getElementsByClassName('b2b-coachmark-header')[0].scrollTop = 0;
+                    }
+                }
+
+                scope.actionCoachmark = function(action){
+                    scope.actionCoachmarkCallback({
+                        'action':action
+                    })
+                };
+                
+                scope.closeCoachmark = function(){
+                    initaitedCoachmark = false;
+                    backdropjqLiteEl.remove();  
+                    coackmarkContainer.remove();
+                    coachmarkHighlight.remove();
+                    if(coachMarkElement !== undefined && coachMarkElement !==""){
+                        coachMarkElement.removeClass('b2b-coachmark-label')
+                    }
+                    if (angular.isFunction(scope.endCoachmarkCallback)){
+                        scope.endCoachmarkCallback();   
+                    }
+                    element[0].focus();
+                }
+                
+                function showCoachmark(targetElement) {
+                    scope.currentCoachmark = targetElement;
+                    if(coachMarkElement !== undefined && coachMarkElement !==""){
+                        coachMarkElement.removeClass('b2b-coachmark-label')
+                        coackmarkContainer.remove();
+                        coachmarkHighlight.remove();
+                    }
+                    coachMarkElement = angular.element(document.querySelector(targetElement.elementId));
+                    coachMarkElement.addClass('b2b-coachmark-label');
+                    var elementPosition = $position.offset(coachMarkElement);
+                    
+                    coachmarkHighlight = angular.element('<div class="b2b-coachmark-highlight"></div><div class="b2b-coachmark-highlight b2b-coachmark-highlight-mask"></div>');
+                    coachmarkHighlight.css({
+                        'width': (elementPosition.width + 20) +'px',
+                        'top': (elementPosition.top -10) + 'px',
+                        'left': (elementPosition.left - 10) + 'px',
+                        'height': (elementPosition.height + 20) +'px'
+                    }); 
+                    body.append(coachmarkHighlight);
+                    
+                    scope.coackmarkElPos.top = (elementPosition.top + elementPosition.height + 32) + 'px';
+                    scope.coackmarkElPos.left = (elementPosition.left - 158 + elementPosition.width / 2 ) + 'px';
+                    coackmarkJqContainer = angular.element('<div b2b-coachmark-container b2b-trap-focus-inside-element="true"></div>');
+                    coackmarkContainer = $compile(coackmarkJqContainer)(scope);
+                    body.append(coackmarkContainer);
+                    
+                    $timeout(function () {
+                        var currentCoachmarkContainer = document.getElementsByClassName('b2b-coachmark-container')[0];
+                        currentCoachmarkContainer.focus();
+                        var coachmarkHeight = window.getComputedStyle(currentCoachmarkContainer).height.split('px')[0];
+                        var newOffsetHeight = (Math.round(elementPosition.top) - Math.round(coachmarkHeight));
+                        
+                        // We need a slight offset to show the lightboxed item
+                        TweenLite.to(window, 2, {scrollTo:{x: (scope.coackmarkElPos.left.split('px')[0]-100), y: newOffsetHeight}});
+                    }, 200);
+                }
+                
+                element.bind('click', function (e) {
+                    initaitedCoachmark = true;
+                    if(scope.coachmarkIndex === -1 || scope.coachmarkIndex >= coachmarkItems.length ){
+                        scope.coachmarkIndex = 0;
+                    }
+                    scope.$watch('coachmarkIndex', function () {
+                        if(initaitedCoachmark === true){
+                            if(scope.coachmarkIndex === -1 || scope.coachmarkIndex >= coachmarkItems.length ){
+                                scope.closeCoachmark();
+                            }else{
+                                showCoachmark(coachmarkItems[scope.coachmarkIndex]);
+                            }
+                        }
+                    });
+                    coachmarkBackdrop();
+                    showCoachmark(coachmarkItems[scope.coachmarkIndex]);
+                    if (angular.isFunction(scope.startCoachmarkCallback)){
+                        scope.startCoachmarkCallback(); 
+                    }
+                    $document.bind('keydown', function (evt) {
+                        if (evt.which === 27 && initaitedCoachmark) {
+                            scope.closeCoachmark();
+                            scope.$apply(); 
+                        }
+                    });
+                });
+
+            }
+        };
+    }])
+    .directive('b2bCoachmarkContainer', ['$document', '$position', function($document, $position) {
+        return {
+            restrict: 'A',
+            transclude: true,
+            replace: true,
+            templateUrl: 'b2bTemplate/coachmark/coachmark.html',
+            link: function (scope, element, attrs, ctrl) {
+                            
+            }
+        };  
+    }]);
+    
+/** 
+ * @ngdoc directive 
+ * @name Template.att:Configuration Section 
+ * 
+ * @description 
+ *  <file src="src/configurationSection/docs/readme.md" /> 
+ * 
+ * @example 
+ *  <section id="code"> 
+        <b>HTML + AngularJS</b> 
+        <example module="b2b.att"> 
+            <file src="src/configurationSection/docs/demo.html" /> 
+            <file src="src/configurationSection/docs/demo.js" /> 
+       </example> 
+    </section>    
+ * 
+ */
+angular.module('b2b.att.configurationSection', [])
+  
+/** 
+ * @ngdoc directive 
+ * @name Template.att:Directory Listing 
+ * 
+ * @description 
+ *  <file src="src/directoryListingTemplate/docs/readme.md" /> 
+ * 
+ * @example 
+ *  <section id="code"> 
+        <b>HTML + AngularJS</b> 
+        <example module="b2b.att"> 
+            <file src="src/directoryListingTemplate/docs/demo.html" /> 
+            <file src="src/directoryListingTemplate/docs/demo.js" /> 
+       </example> 
+    </section>    
+ * 
+ */
+angular.module('b2b.att.directoryListingTemplate', [])
+  
+/**
+ * @ngdoc directive
+ * @name Forms.att:dropdowns
+ *
+ * @description
+ *  <file src="src/dropdowns/docs/readme.md" />
+ * @usage
+ *
+ * @example
+   <section id="code">
+    <example module="b2b.att">
+     <file src="src/dropdowns/docs/demo.html" />
+     <file src="src/dropdowns/docs/demo.js" />
+    </example>
+   </section>
+ */
+angular.module('b2b.att.dropdowns', ['b2b.att.utilities', 'b2b.att.position', 'ngSanitize'])
+
+.constant('b2bDropdownConfig', {
+    prev: '37,38',
+    next: '39,40',
+    menuKeyword: 'menu',
+    linkMenuKeyword: 'link-menu',
+    largeKeyword: 'large',
+    smallKeyword: 'small'
+})  
+
+.directive("b2bDropdown", ['$timeout', '$compile', '$templateCache', 'b2bUserAgent', 'b2bDropdownConfig', '$position', function ($timeout, $compile, $templateCache, b2bUserAgent, b2bDropdownConfig, $position) {
+    return {
+        restrict: 'A',
+        scope: true,
+        require: 'ngModel',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            scope.isInputDropdown = true;
+            scope.placeHoldertext = attr.placeholderText;
+            if (attr.type) {
+                if (attr.type.indexOf(b2bDropdownConfig.menuKeyword) > -1 || attr.type.indexOf(b2bDropdownConfig.linkMenuKeyword) > -1) {
+                    scope.isInputDropdown = false;
+                    if (attr.type.indexOf(b2bDropdownConfig.linkMenuKeyword) > -1) {
+                        scope.dropdownType = b2bDropdownConfig.linkMenuKeyword;
+                    } else if (attr.type.indexOf(b2bDropdownConfig.menuKeyword) > -1) {
+                        scope.dropdownType = b2bDropdownConfig.menuKeyword;
+                    }
+                }
+                if (attr.type.indexOf(b2bDropdownConfig.largeKeyword) > -1) {
+                    scope.dropdownSize = b2bDropdownConfig.largeKeyword;
+                } else if (attr.type.indexOf(b2bDropdownConfig.smallKeyword) > -1) {
+                    scope.dropdownSize = b2bDropdownConfig.smallKeyword;
+                }
+            }
+
+            scope.labelText = attr.labelText;
+
+            scope.setBlur = function () {
+                scope.setTouched();
+            };
+
+            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {
+                var formCtrl = elem.controller('form');
+                scope.setNgModelController = function (name, ngModelCtrl) {
+                    if (name && formCtrl && ngModelCtrl) {
+                        formCtrl[name] = ngModelCtrl;
+                    }
+                };
+                scope.setOptionalCta = function (optionalCta) {
+                    scope.optionalCta = optionalCta;
+                };
+                var innerHtml = angular.element('<div></div>').append(elem.html());
+                innerHtml = ($compile(innerHtml)(scope)).html();
+                var template = angular.element($templateCache.get('b2bTemplate/dropdowns/b2bDropdownDesktop.html'));
+                template.find('ul').eq(0).append(innerHtml);
+                template = $compile(template)(scope);
+                elem.replaceWith(template);
+            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {
+                elem.css({
+                    'opacity': '0',
+                    'filter': 'alpha(opacity=0)'
+                });
+                elem.addClass('awd-select isWrapped');
+                elem.wrap('<span class="selectWrap"></span>');
+                var cover = angular.element('<span aria-hidden="true"><i class="icon-primary-down" aria-hidden="true"></i></span>');
+                elem.parent().append(cover);
+                elem.parent().append('<i class="icon-primary-down" aria-hidden="true"></i>');
+                var set = function () {
+                    var sel = elem[0] ? elem[0] : elem;
+                    var selectedText = "";
+                    var selIndex = sel.selectedIndex;
+                    if (typeof selIndex !== 'undefined') {
+                        selectedText = sel.options[selIndex].text;
+                    }
+                    cover.text(selectedText).append('<i class="icon-primary-down" aria-hidden="true"></i>');
+                };
+                var update = function (value) {
+                    $timeout(set, 100);
+                };
+
+                if (attr.ngModel) {
+                    scope.$watch(attr.ngModel, function (newVal, oldVal) {
+                        update();
+                    });
+                }
+                elem.bind('keyup', function (ev) {
+                    if (ev.keyCode === keymap.KEY.TAB || ev.keyCode === keymap.KEY.ESC) {
+                        return;
+                    }
+                    set();
+                });
+            }
+        }],  
+        link: function (scope, elem, attr, ctrl) {
+            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {
+                scope.updateModel = function () {
+                    if (ctrl.$dirty) {
+                        debugger;
+                    }
+                    ctrl.$setViewValue(scope.currentSelected.value);
+                    if (scope.dropdownRequired && scope.currentSelected.value === '') {
+                        scope.setRequired(false);
+                    } else {
+                        scope.setRequired(true);
+                    }
+
+                    if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {
+                        $timeout(function () {
+                            scope.appendCaretPositionStyle();
+                        }, 100);
+                    }
+                };
+                ctrl.$render = function () {
+//                    if(ctrl.$dirty || ctrl.$pristine) {
+                        $timeout(function () {
+
+                            if ((angular.isUndefined(ctrl.$viewValue) || ctrl.$viewValue == '') && (angular.isUndefined(scope.placeHoldertext) || scope.placeHoldertext == '')) {
+                                scope.dropdownLists[ctrl.$viewValue] && scope.dropdownLists[ctrl.$viewValue][0].updateDropdownValue();
+                            } else if ((angular.isUndefined(scope.placeHoldertext) || scope.placeHoldertext == '') && ctrl.$viewValue !== '' ) {
+                                scope.dropdownLists[ctrl.$viewValue] && scope.dropdownLists[ctrl.$viewValue][0].updateDropdownValue();
+                            } else if ((angular.isUndefined(ctrl.$viewValue) || ctrl.$viewValue == '') && scope.placeHoldertext !== '' )  {
+                                scope.currentSelected.text = scope.placeHoldertext; 
+                            } else {
+                                scope.dropdownLists[ctrl.$viewValue] && scope.dropdownLists[ctrl.$viewValue][0].updateDropdownValue();
+                            }
+
+                        }, 100);
+                    };
+//                }
+                scope.disabled = false;
+                scope.dropdownName = attr.name;
+                scope.dropdownId = attr.id;
+                scope.labelId = attr.ariaLabelledby;
+                scope.dropdownDescribedBy = attr.ariaDescribedby;
+                if (attr.required) {
+                    scope.dropdownRequired = true;
+                } else {
+                    scope.dropdownRequired = false;
+                }
+                elem.removeAttr('name');
+                elem.removeAttr('id');
+                scope.$parent.$watch(attr.ngDisabled, function (val) {
+                    scope.disabled = val;
+                });
+            }
+        }
+    };
+}])
+
+.directive("b2bDropdownToggle", ['$document', '$documentBind', '$isElement', 'b2bDropdownConfig', 'keymap', 'b2bUtilitiesConfig', '$timeout', '$position', function ($document, $documentBind, $isElement, b2bDropdownConfig, keymap, b2bUtilitiesConfig, $timeout, $position) {
+    return {
+        restrict: 'A',
+        require: '?^b2bKey',
+        link: function (scope, elem, attr, ctrl) {
+            scope.appendCaretPositionStyle = function () {
+                while (document.querySelector('style.b2bDropdownCaret')) {
+                    document.querySelector('style.b2bDropdownCaret').remove();
+                };
+                var caretPosition = $position.position(elem).width - 26;
+                if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {
+                    var template = angular.element('<style class="b2bDropdownCaret" type="text/css">.linkSelectorModule .active+.moduleWrapper:before {left: ' + caretPosition + 'px;}</style>');
+                    $document.find('head').append(template);
+                }
+            };
+
+            if (scope.isInputDropdown && (scope.labelText !== undefined)) {
+                elem.attr('aria-label', scope.labelText);
+            }
+
+            scope.toggleFlag = false;
+            scope.dropdownLists = {};
+            scope.dropdownListValues = [];
+            scope.dropdown = {
+                totalIndex: -1
+            };
+            scope.currentSelected = {
+                value: '',
+                text: '',
+                label: '',
+                index: -1
+            };
+            var searchString = '';
+            var searchElement = function (searchExp) {
+                var regex = new RegExp("\\b" + searchExp, "gi");
+                var position = scope.dropdownListValues.regexIndexOf(regex, scope.currentSelected.index + 1, true);
+                if (position > -1) {
+                    return position;
+                }
+                return undefined;
+            };
+            var startTimer = function (time) {
+                if (searchString === '') {
+                    $timeout(function () {
+                        searchString = '';
+                    }, time);
+                }
+            };
+            scope.toggleDropdown = function (toggleFlag) {
+                if (!scope.disabled) {
+                    if (angular.isDefined(toggleFlag)) {
+                        scope.toggleFlag = toggleFlag;
+                    } else {
+                        scope.toggleFlag = !scope.toggleFlag;
+                    }
+                    if (!scope.toggleFlag) {
+                        if (scope.isInputDropdown) {
+                            elem.parent().find('input')[0].focus();
+                        } else {
+                            elem.parent().find('button')[0].focus();
+                        }
+                    } else {
+                        scope.dropdown.highlightedValue = scope.currentSelected.value;
+                        if (ctrl && ctrl.enableSearch) {
+                            if (angular.isDefined(scope.dropdownLists[scope.currentSelected.value])) {
+                                ctrl.resetCounter(scope.dropdownLists[scope.currentSelected.value][2]);
+                            }
+                        }
+                        if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {
+                            scope.appendCaretPositionStyle();
+                        }
+                    }
+                }
+            };
+
+            elem.bind('keydown', function (ev) {
+                if (!ev.keyCode) {
+                    if (ev.which) {
+                        ev.keyCode = ev.which;
+                    } else if (ev.charCode) {
+                        ev.keyCode = ev.charCode;
+                    }
+                }
+                if (!scope.toggleFlag) {
+                    if (ev.keyCode) {
+                        var currentIndex = scope.currentSelected.index;
+                        if (ev.altKey === true && ev.keyCode === keymap.KEY.DOWN) {
+                            scope.toggleDropdown(true);
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        } else if (b2bDropdownConfig.prev.split(',').indexOf(ev.keyCode.toString()) > -1) {
+                            angular.isDefined(scope.dropdownListValues[currentIndex - 1]) ? scope.dropdownLists[scope.dropdownListValues[currentIndex - 1]][0].updateDropdownValue() : angular.noop();
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        } else if (b2bDropdownConfig.next.split(',').indexOf(ev.keyCode.toString()) > -1) {
+                            angular.isDefined(scope.dropdownListValues[currentIndex + 1]) ? scope.dropdownLists[scope.dropdownListValues[currentIndex + 1]][0].updateDropdownValue() : angular.noop();
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        } else if (ev.keyCode >= 48 && ev.keyCode <= 105) {
+                            startTimer(b2bUtilitiesConfig.searchTimer);
+                            searchString = searchString + (keymap.MAP[ev.keyCode] || '');
+                            var position = searchElement(searchString);
+                            angular.isDefined(scope.dropdownListValues[position]) ? scope.dropdownLists[scope.dropdownListValues[position]][0].updateDropdownValue() : angular.noop();
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        }
+                    }
+                } else {
+                    if (ev.altKey === true && ev.keyCode === keymap.KEY.UP) {
+                        scope.toggleDropdown(false);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode === keymap.KEY.TAB || ev.keyCode === keymap.KEY.ESC) {
+                        scope.toggleDropdown(false);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    }
+                }
+                scope.$apply(); // TODO: Move this into each block to avoid expensive digest cycles
+            });
+            var outsideClick = function (e) {
+                var isElement = $isElement(angular.element(e.target), elem.parent(), $document);
+                if (!isElement) {
+                    scope.toggleDropdown(false);
+                    scope.$apply();
+                }
+            };
+            $documentBind.click('toggleFlag', outsideClick, scope);
+        }
+    };
+}])
+
+.directive("b2bDropdownGroup", ['$compile', '$templateCache', 'b2bUserAgent', function ($compile, $templateCache, b2bUserAgent) {
+    return {
+        restrict: 'A',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {
+                var innerHtml = angular.element('<div></div>').append(elem.html());
+                innerHtml = ($compile(innerHtml)(scope)).html();
+                var template = angular.element($templateCache.get('b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html'));
+                template.attr('ng-repeat', attr.optGroupRepeat);
+                template.attr('label', elem.attr('label'));
+                template.find('ul').append(innerHtml);
+                elem.replaceWith(template);
+            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {
+                var template = angular.element(elem.prop('outerHTML'));
+                template.attr('ng-repeat', attr.optGroupRepeat);
+                template.removeAttr('b2b-dropdown-group');
+                template.removeAttr('opt-group-repeat');
+                template = $compile(template)(scope);
+                elem.replaceWith(template);
+            }
+        }]
+    };
+}])
+
+.directive("b2bDropdownGroupDesktop", [function () {
+    return {
+        restrict: 'A',
+        scope: true,
+        link: function (scope, elem, attr, ctrl) {
+            scope.groupHeader = attr.label;
+        }
+    };
+}])
+
+.directive("b2bDropdownList", ['$compile', '$templateCache', 'b2bUserAgent', function ($compile, $templateCache, b2bUserAgent) {
+    return {
+        restrict: 'A',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {
+                var innerHtml = angular.element('<div></div>').append(elem.html());
+                innerHtml = ($compile(innerHtml)(scope)).html();
+                var template = angular.element($templateCache.get('b2bTemplate/dropdowns/b2bDropdownListDesktop.html'));
+                template.attr('ng-repeat', attr.optionRepeat);
+                template.attr('value', elem.attr('value'));
+                template.attr('search-key', elem.attr('value'));
+                if (elem.attr('aria-describedby')){
+                    template.attr('aria-describedby', attr.ariaDescribedby);
+                }
+                if (elem.attr('imgsrc')) {
+                    if (elem.attr('imgalt')) {
+                        template.append('<img role="presentation" ng-src="' + elem.attr('imgsrc') + '" alt="' + elem.attr('imgalt') + '"/>');
+                    } else {
+                        template.append('<img role="presentation" ng-src="' + elem.attr('imgsrc') + '" alt=""/>');
+                    }
+                }
+                template.append(innerHtml);
+                elem.replaceWith(template);
+            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {
+                var template = angular.element(elem.prop('outerHTML'));
+                template.attr('ng-repeat', attr.optionRepeat);
+                if (elem.attr('aria-describedby')){
+                    template.attr('aria-describedby', attr.ariaDescribedby);
+                }
+                template.removeAttr('b2b-dropdown-list');
+                template.removeAttr('option-repeat');
+                template = $compile(template)(scope);
+                elem.replaceWith(template);
+            }
+        }]
+    };
+}])
+
+.directive("b2bDropdownListDesktop", ['$sce', 'keymap', 'b2bDropdownConfig', function ($sce, keymap, b2bDropdownConfig) {
+    return {
+        restrict: 'A',
+        scope: true,
+        link: function (scope, elem, attr, ctrl) {
+            var dropdownListValue = scope.dropdownListValue = attr.value;
+            scope.dropdown.totalIndex++;
+            var dropdownListIndex = scope.dropdown.totalIndex;
+            scope.dropdownListValues.push(dropdownListValue);
+            scope.dropdownLists[dropdownListValue] = [];
+            scope.dropdownLists[dropdownListValue][0] = scope;
+            scope.dropdownLists[dropdownListValue][1] = elem;
+            scope.dropdownLists[dropdownListValue][2] = dropdownListIndex;
+            scope.updateDropdownValue = function () {
+                scope.currentSelected.value = dropdownListValue;
+                if (scope.isInputDropdown) {
+                    scope.currentSelected.text = elem.text();
+                } else if ((scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) || (scope.dropdownType === b2bDropdownConfig.menuKeyword && scope.dropdownSize === b2bDropdownConfig.smallKeyword)) {
+                    scope.currentSelected.text = dropdownListValue;
+                } else if (scope.dropdownType === b2bDropdownConfig.menuKeyword) {
+                    scope.currentSelected.text = $sce.trustAsHtml(elem.html());
+                }
+                if (scope.isInputDropdown) {
+                    scope.currentSelected.label = elem.text();
+                } else if (scope.dropdownType === b2bDropdownConfig.linkMenuKeyword) {
+                    scope.currentSelected.label = dropdownListValue;
+                } else if (scope.dropdownType === b2bDropdownConfig.menuKeyword) {
+                    scope.currentSelected.label = elem.text();
+                }
+                scope.currentSelected.index = dropdownListIndex;
+                scope.updateModel();
+            };
+            scope.selectDropdownItem = function () {
+                scope.setDirty();
+                scope.updateDropdownValue();
+                scope.toggleDropdown(false);
+            };
+            scope.highlightDropdown = function () {
+                scope.dropdown.highlightedValue = dropdownListValue;
+            };
+            elem.bind('mouseover', function (ev) {
+                elem[0].focus();
+            });
+            elem.bind('keydown', function (ev) {
+                if (!ev.keyCode) {
+                    if (ev.which) {
+                        ev.keyCode = ev.which;
+                    } else if (ev.charCode) {
+                        ev.keyCode = ev.charCode;
+                    }
+                }
+                if (ev.altKey === true && ev.keyCode === keymap.KEY.UP) {
+                    scope.toggleDropdown(false);
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                } else if (ev.keyCode === keymap.KEY.TAB || ev.keyCode === keymap.KEY.ESC) {
+                    scope.toggleDropdown(false);
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+                scope.$apply();
+            });
+        }
+    };
+}])
+
+.directive("b2bDropdownRepeat", ['$compile', 'b2bUserAgent', function ($compile, b2bUserAgent) {
+    return {
+        restrict: 'A',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            if ((scope.isInputDropdown && b2bUserAgent.notMobile()) || (!scope.isInputDropdown)) {
+                var innerHtml = angular.element('<div></div>').append(elem.html());
+                innerHtml = ($compile(innerHtml)(scope)).html();
+                var template = angular.element('<div></div>');
+                template.attr('ng-repeat', attr.b2bDropdownRepeat);
+                template.append(innerHtml);
+                elem.replaceWith(template);
+            } else if (scope.isInputDropdown && b2bUserAgent.isMobile()) {
+                angular.noop();
+            }
+        }]
+    };
+}])
+
+.directive("b2bDropdownValidation", ['$timeout', function ($timeout) {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elem, attr, ctrl) {
+            $timeout(function () {
+                scope.setNgModelController(attr.name, ctrl);
+            }, 100);
+            scope.setDirty = function () {
+                if (ctrl.$dirty === false) {
+                    ctrl.$dirty = true;
+                    ctrl.$pristine = false;
+                }
+            };
+            scope.setTouched = function () {
+                if (ctrl.$touched === false) {
+                    ctrl.$touched = true;
+                    ctrl.$pristine = false;
+                }
+            };
+            scope.setRequired = function (flag) {
+                ctrl.$setValidity('required', flag);
+            };
+        }
+    };
+}])
+
+.directive('b2bDropdownOptionalCta', [function () {
+    return {
+        restrict: 'EA',
+        transclude: true,
+        replace: true,
+        template: '',
+        compile: function (elem, attr, transclude) {
+            return function link(scope, elem, attr, ctrl) {
+                if (scope.setOptionalCta) {
+                    scope.setOptionalCta(transclude(scope, function () {}));
+                }
+                elem.remove();
+            };
+        }
+    };
+}]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:File Upload
+ *
+ * @description
+ *  <file src="src/fileUpload/docs/readme.md" />
+ *
+ * @usage
+ * 
+<form id="dragDropFile">        
+    <div b2b-file-drop file-model="fileModel" on-drop="triggerFileUpload()"  align="center">
+        <p>
+            <br>To upload a file, drag & drop it here or 
+            <span b2b-file-link file-model="fileModel" on-file-select="triggerFileUpload()" >
+                click here to select from your computer.
+            </span><br>
+        </p>
+    </div>
+</form>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/fileUpload/docs/demo.html" />
+            <file src="src/fileUpload/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.fileUpload', ['b2b.att.utilities'])
+    .directive('b2bFileDrop', [function() {
+            return {
+                restrict: 'EA',
+                scope: {
+                    fileModel: '=',
+                    onDrop: '&'
+                },
+                controller: ['$scope', '$attrs', function($scope, $attrs) {
+                    this.onDrop = $scope.onDrop;
+                }],
+                link: function(scope, element) {
+                    element.addClass('b2b-dragdrop');
+                    element.bind(
+                        'dragover',
+                        function(e) {
+                            if (e.originalEvent) {
+                                e.dataTransfer = e.originalEvent.dataTransfer;
+                            }
+                            e.dataTransfer.dropEffect = 'move';
+                            // allows us to drop
+                            if (e.preventDefault) {
+                                e.preventDefault();
+                            }
+                            element.addClass('b2b-dragdrop-over');
+                            return false;
+                        }
+                    );
+                    element.bind(
+                        'dragenter',
+                        function(e) {
+                            // allows us to drop
+                            if (e.preventDefault) {
+                                e.preventDefault();
+                            }
+                            element.addClass('b2b-dragdrop-over');
+                            return false;
+                        }
+                    );
+                    element.bind(
+                        'dragleave',
+                        function() {
+                            element.removeClass('b2b-dragdrop-over');
+                            return false;
+                        }
+                    );
+                    element.bind(
+                        'drop',
+                        function(e) {
+                            // Stops some browsers from redirecting.
+                            if (e.preventDefault) {
+                                e.preventDefault();
+                            }
+                            if (e.stopPropagation) {
+                                e.stopPropagation();
+                            }
+                            if (e.originalEvent) {
+                                e.dataTransfer = e.originalEvent.dataTransfer;
+                            }
+                            element.removeClass('b2b-dragdrop-over');
+                            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                                scope.fileModel = e.dataTransfer.files[0];
+                                scope.$apply();
+                                if (angular.isFunction(scope.onDrop)) {
+                                    scope.onDrop();
+                                }
+                            }
+                            return false;
+                        }
+                    );
+                }
+            };
+        }])
+        .directive('b2bFileLink', [function() {
+            return {
+                restrict: 'EA',
+                require: '^?b2bFileDrop',
+                replace: true,
+                transclude: true,
+                templateUrl: 'b2bTemplate/fileUpload/fileUpload.html',
+                scope: {
+                    fileModel: '=?',
+                    onFileSelect: '&'
+                },
+                controller: ['$scope', function($scope) {
+                    this.setFileModel = function(fileModel) {
+                        if ($scope.takeFileModelFromParent) {
+                            $scope.$parent.fileModel = fileModel;
+                            $scope.$parent.$apply();
+                        } else {
+                            $scope.fileModel = fileModel;
+                            $scope.$apply();
+                        }
+                    };
+                    this.callbackFunction = function() {
+                        if (angular.isFunction($scope.onFileSelect)) {
+                            $scope.onFileSelect();
+                        }
+                    };
+        
+                }],
+                link: function(scope, element, attr, b2bFileDropCtrl) {
+                    scope.takeFileModelFromParent = false;
+                    if (!(attr.fileModel) && b2bFileDropCtrl) {
+                        scope.takeFileModelFromParent = true;
+                    }
+                    if (!(attr.onFileSelect) && b2bFileDropCtrl) {
+                        scope.onFileSelect = b2bFileDropCtrl.onDrop;
+                    }
+                }
+            };
+        }])
+        .directive('b2bFileChange', ['$log', '$rootScope', function($log, $rootScope) {
+            return {
+                restrict: 'A',
+                require: '^b2bFileLink',
+                link: function(scope, element, attr, b2bFileLinkCtrl) {
+                    element.bind('change', changeFileModel);
+
+                    function changeFileModel(e) {
+                        if (e.target.files && e.target.files.length > 0) {
+                            b2bFileLinkCtrl.setFileModel(e.target.files[0]);
+                            b2bFileLinkCtrl.callbackFunction();
+                        } else {
+                            var strFileName = e.target.value;
+                            try {
+                                var objFSO = new ActiveXObject("Scripting.FileSystemObject");
+                                b2bFileLinkCtrl.setFileModel(objFSO.getFile(strFileName));
+                                b2bFileLinkCtrl.callbackFunction();
+                            } catch (e) {
+                                var errMsg = "There was an issue uploading " + strFileName + ". Please try again.";
+                                $log.error(errMsg);
+                                $rootScope.$broadcast('b2b-file-link-failure', errMsg);
+                            }
+                        }
+                    }
+                }
+            };
+        }]);
+/**
+ * @ngdoc directive
+ * @name Navigation.att:filters
+ *
+ * @description
+ *  <file src="src/filters/docs/readme.md" />
+ *
+ * @usage
+ *  <div b2b-filters></div>
+ *
+ * @example
+ *  <section id="code">
+       <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/filters/docs/demo.html" />
+            <file src="src/filters/docs/demo.js" />
+       </example>
+    </section>
+ * 
+ */
+angular.module('b2b.att.filters', ['b2b.att.utilities', 'b2b.att.multipurposeExpander'])
+    .filter('filtersSelectedItemsFilter', [function () {
+        return function (listOfItemsArray) {
+
+            if (!listOfItemsArray) {
+                listOfItemsArray = [];
+            }
+
+            var returnArray = [];
+
+            for (var i = 0; i < listOfItemsArray.length; i++) {
+                for (var j = 0; j < listOfItemsArray[i].filterTypeItems.length; j++) {
+                    if (listOfItemsArray[i].filterTypeItems[j].selected && !listOfItemsArray[i].filterTypeItems[j].inProgress) {
+                        returnArray.push(listOfItemsArray[i].filterTypeItems[j]);
+                    }
+                }
+            }
+
+            return returnArray;
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Messages, modals & alerts.att:flyout
+ *
+ * @description
+ *  <file src="src/flyout/docs/readme.md" />
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/flyout/docs/demo.html" />
+            <file src="src/flyout/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.flyout', ['b2b.att.utilities', 'b2b.att.position'])
+    .directive('b2bFlyout', ['$timeout', 'b2bDOMHelper', 'keymap', 'events', function ($timeout, b2bDOMHelper, keymap, events) {
+        return {
+            restrict: 'EA',
+            transclude: true,
+            templateUrl: 'b2bTemplate/flyout/flyout.html',
+            controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+                scope.flyoutOpened = false;
+                var contentScope = '';
+                var togglerScope = '';
+                this.registerContentScope = function (scp) {
+                    contentScope = scp;
+                };
+                this.registerTogglerScope = function (scp) {
+                    togglerScope = scp;
+                };
+
+                this.toggleFlyoutState = function () {
+                    if (contentScope) {
+                        contentScope.toggleFlyout();
+                    }
+                };
+                this.getTogglerDimensions = function () {
+                    return togglerScope.getTogglerDimensions();
+                }
+                this.setTogglerFocus = function () {
+                    return togglerScope.setTogglerFocus();
+                }
+
+                this.closeFlyout = function (e) {
+                    contentScope.closeFromChild(e);
+                };
+                this.gotFocus = function () {
+                    contentScope.gotFocus();
+                };
+
+                this.updateAriaModel = function (val) {
+                    scope.flyoutOpened = val;
+                };
+
+                var firstTabableElement = undefined,
+                    lastTabableElement = undefined;
+
+                var firstTabableElementKeyhandler = function (e) {
+                    if (!e.keyCode) {
+                        e.keyCode = e.which;
+                    }
+                    if (e.keyCode === keymap.KEY.TAB && e.shiftKey && scope.flyoutOpened) { 
+                        contentScope.gotFocus();
+                        events.preventDefault(e);
+                        events.stopPropagation(e);
+                    }
+                };
+
+                var lastTabableElementKeyhandler = function (e) {
+                    if (!e.keyCode) {
+                        e.keyCode = e.which;
+                    }
+                    if (e.keyCode === keymap.KEY.TAB && !e.shiftKey) {
+                        contentScope.gotFocus();    
+                        events.preventDefault(e);
+                        events.stopPropagation(e);
+                    }
+                };
+                this.associateTabEvent = function(){
+                    $timeout(function () {
+                        var element = elem[0].getElementsByClassName('b2b-flyout-container')[0];
+                        firstTabableElement = b2bDOMHelper.firstTabableElement(element);
+                        lastTabableElement = b2bDOMHelper.lastTabableElement(element);
+                        if(angular.isUndefined(firstTabableElement)){
+                            angular.element(element).css('display','block');
+                            firstTabableElement = b2bDOMHelper.firstTabableElement(element);
+                            lastTabableElement = b2bDOMHelper.lastTabableElement(element);
+                            angular.element(element).css('display','none');
+                        }
+                        angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);
+                        angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);
+                    });
+                }
+                this.updateTabbableElements = function(){
+                    $timeout(function () {
+                        var element = elem[0].getElementsByClassName('b2b-flyout-container')[0];
+                        angular.element(element).css('display','block');
+                        firstTabableElement = b2bDOMHelper.firstTabableElement(element);
+                        lastTabableElement = b2bDOMHelper.lastTabableElement(element);
+                        angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);
+                        angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);
+                        angular.element(element).css('display','none');
+                    });
+                }
+                this.unbindTabbaleEvents = function(){
+                    if(angular.isDefined(firstTabableElement)){
+                        angular.element(firstTabableElement).unbind('keydown', firstTabableElementKeyhandler);
+                    }
+
+                    if(angular.isDefined(lastTabableElement)){
+                        angular.element(lastTabableElement).unbind('keydown', lastTabableElementKeyhandler);
+                    }
+                }
+            }],
+            link: function (scope, element, attrs, ctrl) {
+
+            }
+        };
+    }])
+    .directive('b2bFlyoutToggler', [function () {
+        return {
+            restrict: 'A',
+            require: '^b2bFlyout',
+            link: function (scope, element, attrs, ctrl) {
+                element.bind('click', function (e) {
+                    ctrl.toggleFlyoutState();
+                });
+
+                scope.getTogglerDimensions = function () {
+                    return element[0].getBoundingClientRect();
+                }
+
+                scope.setTogglerFocus = function () {
+                    element[0].focus();
+                }
+
+                ctrl.registerTogglerScope(scope);
+            }
+        };
+    }])
+    .directive('b2bFlyoutContent', ['$position', '$timeout', '$documentBind', '$isElement', '$document', function ($position, $timeout, $documentBind, $isElement, $document) {
+        return {
+            restrict: 'EA',
+            transclude: true,
+            replace: true,
+            require: '^b2bFlyout',
+            scope: {
+                horizontalPlacement: '@',
+                verticalPlacement: '@',
+                flyoutStyle: '@',
+                flyoutTitle: '@',
+                contentUpdated: "=?"
+            },
+            templateUrl: 'b2bTemplate/flyout/flyoutContent.html',
+            link: function (scope, element, attrs, ctrl) {
+                var flyoutStyleArray, eachCssProperty, cssPropertyKey, cssPropertyVal, temp;
+                scope.openFlyout = false;
+                if (!scope.horizontalPlacement) {
+                    scope.horizontalPlacement = 'center';
+                }
+                if (!scope.verticalPlacement) {
+                    scope.verticalPlacement = 'below';
+                }
+
+                scope.toggleFlyout = function () {
+
+                    scope.openFlyout = !scope.openFlyout;
+
+                    if (scope.openFlyout) {
+
+                        if (angular.isDefined(scope.flyoutStyle) && scope.flyoutStyle != "") {
+                            flyoutStyleArray = scope.flyoutStyle.split(";");
+                            for (i = 0; i < flyoutStyleArray.length; i++) {
+                                eachCssProperty = flyoutStyleArray[i].split(":");
+                                if (eachCssProperty.length == 2) {
+                                    cssPropertyKey = eachCssProperty[0].trim();
+                                    cssPropertyVal = eachCssProperty[1].trim();
+                                    angular.element(element[0])[0].style[cssPropertyKey] = cssPropertyVal;
+                                }
+                            }
+                        }
+
+                        angular.element(element[0]).css({
+                            'opacity': 0,
+                            'display': 'block'
+                        });
+
+                        var flyoutIcons = angular.element(document.querySelectorAll(".b2b-flyout-icon"));
+                        angular.forEach(flyoutIcons, function (elm) {
+                            angular.element(elm)[0].blur();
+                        });
+
+                        $timeout(function () {
+                            ctrl.setTogglerFocus();
+
+                            var togglerDimensions = ctrl.getTogglerDimensions();
+                            var flyoutDimensions = element[0].getBoundingClientRect();
+
+                            switch (scope.horizontalPlacement) {
+                            case "left":
+                                angular.element(element[0]).css({
+                                    'left': ((togglerDimensions.width / 2) - 26) + 'px'
+                                });
+                                break;
+                            case "right":
+                                angular.element(element[0]).css({
+                                    'right': ((togglerDimensions.width / 2) - 23) + 'px'
+                                });
+                                break;  
+
+                            case "centerLeft":
+                                var marginLeft =  10-(flyoutDimensions.width)-20;
+                                angular.element(element[0]).css({
+                                    'margin-left': marginLeft + 'px'
+                                });
+                                break;
+                            case "centerRight":
+                                angular.element(element[0]).css({
+                                    'left': ((togglerDimensions.width + 9 )) + 'px'
+                                });
+                                break;    
+
+                            default:
+                                var marginLeft = (togglerDimensions.width / 2) - (flyoutDimensions.width / 2) - 8;
+                                angular.element(element[0]).css({
+                                    'margin-left': marginLeft + 'px'
+                                });
+                            }
+
+                            switch (scope.verticalPlacement) {
+                            case "above":
+                                angular.element(element[0]).css({
+                                    'top': -(flyoutDimensions.height + 13) + 'px'
+                                });
+                                break;
+                            case "centerLeft":
+                                angular.element(element[0]).css({
+                                    'top': -((togglerDimensions.height-13))+ 'px'
+                                });
+                                break;
+                            case "centerRight":
+                                angular.element(element[0]).css({
+                                    'top': -(flyoutDimensions.height - 23)+ 'px'
+                                });
+                                break;                                    
+                            default:
+                                angular.element(element[0]).css({
+                                    'top': (togglerDimensions.height + 13) + 'px'
+                                });
+                            }
+
+                            angular.element(element[0]).css({
+                                'opacity': 1
+                            });
+                        }, 100);
+                    } else {
+                        scope.hideFlyout();
+                    }
+                };
+
+                scope.gotFocus = function () {
+                    scope.openFlyout = false;
+                    scope.hideFlyout();
+                    ctrl.setTogglerFocus();
+                    scope.$apply();
+                };
+
+                scope.closeFromChild = function (e) {
+                    scope.openFlyout = false;
+                    scope.hideFlyout();
+                    ctrl.setTogglerFocus();
+                    scope.$apply();
+                };
+
+                scope.hideFlyout = function () {
+                    angular.element(element[0]).css({
+                        'opacity': 0,
+                        'display': 'none'
+                    });
+                };
+
+                scope.closeFlyout = function (e) {
+                    var isElement = $isElement(angular.element(e.target), element, $document);
+                    if ((e.type === "keydown" && e.which === 27) || ((e.type === "click" || e.type==="touchend") && !isElement)) {
+                        scope.openFlyout = false;
+                        scope.hideFlyout();
+                        ctrl.setTogglerFocus();
+                        scope.$apply();
+                    }
+                };
+
+                scope.$watch('openFlyout', function () {
+                    ctrl.updateAriaModel(scope.openFlyout);
+                });
+
+                $documentBind.click('openFlyout', scope.closeFlyout, scope);
+                $documentBind.event('keydown', 'openFlyout', scope.closeFlyout, scope);
+                $documentBind.event('touchend', 'openFlyout', scope.closeFlyout, scope);
+                ctrl.registerContentScope(scope);
+
+                if (angular.isDefined(scope.contentUpdated) && scope.contentUpdated !== null) {
+                    scope.$watch('contentUpdated', function (newVal, oldVal) {
+                        if(newVal){
+                            if (newVal !== oldVal) {
+                                ctrl.unbindTabbaleEvents();
+                                ctrl.associateTabEvent();
+                            }
+                            scope.contentUpdated = false;
+                        } 
+                    });
+                }  
+
+            }
+        };
+    }])
+    .directive('b2bCloseFlyout', [function () {
+        return {
+            restrict: 'A',
+            require: '^b2bFlyout',
+            scope: {
+                closeFlyout: '&'
+            },
+            link: function (scope, element, attrs, ctrl) {
+                element.bind('click', function (e) {
+                    scope.closeFlyout(e);
+                    ctrl.closeFlyout(e);
+                });
+            }
+        };
+    }])
+    .directive('b2bFlyoutTrapFocusInside', [function () {
+        return {
+            restrict: 'A',
+            transclude: false,
+            require: '^b2bFlyout',
+            link: function (scope, elem, attr, ctrl) {
+                /* Before opening modal, find the focused element */
+                ctrl.updateTabbableElements();
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Layouts.att:footer
+ *
+ * @description
+ *  <file src="src/footer/docs/readme.md" />
+ *
+ * @usage
+ * 
+ <footer class="b2b-footer-wrapper" role="contentinfo" aria-label="footer">
+        <div class="b2b-footer-container" b2b-column-switch-footer footer-link-items='footerItems'>
+            <hr>
+            <div class="divider-bottom-footer">
+                <div class="span2 dispalyInline">&nbsp;</div>
+                <div class="span6 dispalyInline">
+                    <ul class="footer-nav-content">
+                        <li><a href="Terms_of_use.html" title="Terms of use" id="foot0">Terms of use</a>|</li>
+                        <li><a href="Privacy_policy.html" title="Privacy policy" id="foot1" class="active">Privacy policy</a>|</li>
+                        <li><a href="Tollfree_directory_assistance.html" title="Tollfree directory assistance" id="foot2">Tollfree directory assistance</a>|</li>
+                        <li><a href="compliance.html" title="Accessibility" id="foot3">Accessibility</a></li>
+
+                    </ul>
+                    <p><a href="//www.att.com/gen/privacy-policy?pid=2587" target="_blank">© <span class="copyright">2016</span> AT&amp;T Intellectual Property</a>. All rights reserved. AT&amp;T,the AT&amp;T Globe logo and all other AT&amp;T marks contained herein are tardemarks of AT&amp;T intellectual property and/or AT&amp;T affiliated companines.
+
+                    </p>
+                </div>
+                <div class="span3 footerLogo dispalyInline">
+                    <a href="index.html" class="footer-logo">
+                        <i class="icon-primary-att-globe"><span class="hidden-spoken">A T &amp; T</span></i>
+                        <h2 class="logo-title">AT&amp;T</h2>
+                    </a>
+                </div>
+            </div>
+
+        </div>  
+    </footer>
+
+ * @example
+ *  <section id="code">   
+ <example module="b2b.att">
+ <file src="src/footer/docs/demo.html" />
+ <file src="src/footer/docs/demo.js" />
+ </example>
+ </section>
+ *
+ */
+angular.module('b2b.att.footer', ['b2b.att.utilities']).
+        directive('b2bColumnSwitchFooter', [function() {
+                return {
+                    restrict: 'A',
+                    transclude: true,
+                    scope: {
+                        footerLinkItems: "="
+                    },
+                    templateUrl: 'b2bTemplate/footer/footer_column_switch_tpl.html',
+                    link: function(scope) {
+                        var tempFooterColumns = scope.footerLinkItems.length;
+                        scope.footerColumns = 3;
+                        if ( (tempFooterColumns === 5) || (tempFooterColumns === 4) ) {
+                            scope.footerColumns = tempFooterColumns;
+                        }
+                    }
+
+                };
+
+            }]);
+     
+
+/**
+ * @ngdoc directive
+ * @name Layouts.att:header
+ *
+ * @description
+ *  <file src="src/header/docs/readme.md" />
+ *
+ * @usage
+ *  <li b2b-header-menu class="header__item b2b-headermenu" ng-repeat="item in tabItems" role="presentation">
+        <a href="#" class="menu__item" role="menuitem">{{item.title}}</a>
+        <div class="header-secondary-wrapper">
+            <ul class="header-secondary" role="menu">
+                <li class="header-subitem" b2b-header-submenu ng-repeat="i in item.subitems" role="presentation">
+                    <a href="#" class="menu__item" aria-haspopup="true" role="menuitem">{{i.value}}</a>
+                    <div class="header-tertiary-wrapper" ng-if="i.links">
+                        <ul class="header-tertiary" role="menu">
+                            <li b2b-header-tertiarymenu ng-repeat="link in i.links" role="presentation">
+                                <label>{{link.title}}</label>
+                                <div b2b-tertiary-link ng-repeat="title in link.value">
+                                    <a href="{{link.href}}" class="header-tertiaryitem" ng-if="!title.subitems" aria-haspopup="false" role="menuitem"><span class="b2b-label-hide">{{link.title}}</span>{{title.title}}</a>
+                                    <a href="{{link.href}}" class="header-tertiaryitem" b2b-header-togglemenu ng-if="title.subitems" aria-haspopup="true" role="menuitem"><span class="b2b-label-hide">{{link.title}}</span>{{title.title}}</a>
+                                    <ul class="header-quarternary" role="menu"  ng-if="title.subitems">
+                                        <li b2b-header-quarternarymenu role="presentation">
+                                            <a href="{{nav.href}}" ng-repeat="nav in title.subitems" role="menuitem" aria-haspopup="true">{{nav.title}}</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </li> 
+ *
+ * @example
+ *  <section id="code">
+ <example module="b2b.att.header">
+ <file src="src/header/docs/demo.html" />
+ <file src="src/header/docs/demo.js" />
+ </example>
+ </section>
+ *
+ */
+angular.module('b2b.att.header', ['b2b.att.dropdowns','b2b.att.utilities'])
+    .directive('b2bHeaderMenu', ['keymap', '$documentBind', '$timeout', '$isElement', '$document', function (keymap, $documentBind, $timeout, $isElement, $document) {
+        return {
+            restrict: 'A',
+            controller:['$scope',function($scope){
+                this.nextSiblingFocus = function (elObj,flag) {
+                        if (elObj.nextElementSibling) {
+                            if(flag){
+                                var nextmenuItem = this.getFirstElement(elObj.nextElementSibling,'a');
+                                nextmenuItem.focus();
+                            }else{
+                                elObj.nextElementSibling.focus();
+                            }
+                        }
+                };
+                
+                this.previousSiblingFocus = function (elObj,flag) {
+                        if (elObj.previousElementSibling) {
+                            if(flag){
+                                var prevmenuItem = this.getFirstElement(elObj.previousElementSibling,'a');
+                                prevmenuItem.focus();
+                            }else{
+                                elObj.previousElementSibling.focus();
+                            }
+                        }
+                };
+                    
+                this.getFirstElement = function(elmObj,selector){
+                        return elmObj.querySelector(selector);                        
+                    };
+            }],
+            link: function (scope, elem,attr,ctrl) {
+                scope.showMenu = false;
+                var activeElm, subMenu, tertiaryMenu, el= angular.element(elem)[0], 
+                        menuItem = angular.element(elem[0].children[0]);
+                menuItem.bind('click', function () {
+                    elem.parent().children().removeClass('active');
+                    elem.addClass('active');
+                    var elems= this.parentElement.parentElement.querySelectorAll('li[b2b-header-menu]>a');
+                    for (var i=0; i<elems.length; i++) {
+                        elems[i].setAttribute("aria-expanded",false);
+                    }
+                    scope.showMenu = true;
+                    var elmTofocus = ctrl.getFirstElement(this.parentElement,'li[b2b-header-submenu]');
+                    elmTofocus.firstElementChild.focus();
+                    this.setAttribute('aria-expanded',true);
+                    scope.$apply();
+                });
+               
+                elem.bind('keydown', function (evt) {
+                    activeElm = document.activeElement;
+                    subMenu = ctrl.getFirstElement(activeElm.parentElement,'li[b2b-header-submenu]');
+                    tertiaryMenu = ctrl.getFirstElement(activeElm.parentElement,'li[b2b-header-tertiarymenu]');
+                    switch (evt.keyCode) {
+                        case keymap.KEY.ENTER:
+                        case keymap.KEY.SPACE:
+                            elem[0].click();
+                            break;
+                        case keymap.KEY.UP:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if (activeElm.parentElement.hasAttribute('b2b-header-submenu')) {
+                                menuItem[0].focus();
+                            }
+                            break;
+                        case keymap.KEY.DOWN:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if (subMenu) {
+                                subMenu.firstElementChild.focus();
+                            } else if (tertiaryMenu) {
+                                var firstSubitem = ctrl.getFirstElement(tertiaryMenu,'a.header-tertiaryitem');
+                                firstSubitem.focus();
+                            }
+                            break;
+                        case keymap.KEY.RIGHT:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if (activeElm.parentElement.hasAttribute('b2b-header-submenu')) {
+                                var elm = angular.element(activeElm.parentElement)[0];
+                                ctrl.nextSiblingFocus(elm,true);
+                            } else if (activeElm.parentElement.parentElement.hasAttribute('b2b-header-tertiarymenu')) {
+                                var tertiaryLI = angular.element(activeElm.parentElement.parentElement)[0];
+                                if (tertiaryLI.nextElementSibling) {
+                                    var nextElm = ctrl.getFirstElement(tertiaryLI.nextElementSibling,"a.header-tertiaryitem");
+                                    nextElm.focus();
+                                }
+                            }
+                            else if(activeElm.parentElement.hasAttribute('b2b-header-menu')){
+                                ctrl.nextSiblingFocus(el,true);
+                            }
+                            break;
+                        case keymap.KEY.LEFT:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if (activeElm.parentElement.hasAttribute('b2b-header-submenu')) {
+                                var previousElm = angular.element(activeElm.parentElement)[0];
+                                ctrl.previousSiblingFocus(previousElm,true);
+                            } else if (activeElm.parentElement.parentElement.hasAttribute('b2b-header-tertiarymenu')) {
+                                var tertiaryLI = angular.element(activeElm.parentElement.parentElement)[0];
+                                if (tertiaryLI.previousElementSibling) {
+                                    var prevElm = ctrl.getFirstElement(tertiaryLI.previousElementSibling,"a.header-tertiaryitem");
+                                    prevElm.focus();
+                                }
+                            }
+                            else if(activeElm.parentElement.hasAttribute('b2b-header-menu')) {
+                                ctrl.previousSiblingFocus(el,true);
+                            }
+                            break;
+                        case keymap.KEY.ESC:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            scope.showMenu = false;
+                            elem.removeClass('active');
+                            menuItem.attr('aria-expanded',false);
+                            $timeout(function(){
+                                menuItem[0].focus();
+                            },100);
+                            scope.$apply();
+                            break;
+                        default:
+                            break;
+                    }
+                });
+                var outsideClick = function (e) {
+                    var isElement = $isElement(angular.element(e.target), elem, $document);
+                    if (!isElement) {
+                        scope.showMenu = false;
+                        elem.removeClass('active');
+                        scope.$apply();
+                    }
+                };
+                $documentBind.click('showMenu', outsideClick, scope);
+                /*Change for ECOMP - hide header menu when click on iframe in a new tab*/
+                $(window).blur(function() {
+                	if(scope.showMenu){
+               	 	 scope.showMenu = false;
+                     elem.removeClass('active');
+                     scope.$apply();
+               	 	}
+                });
+            }
+        };
+    }]).directive('b2bHeaderSubmenu', ['$timeout',function ($timeout) {
+        return{
+            restrict: 'A',
+            link: function (scope, elem) {
+                var caretSign = angular.element("<i class='menuCaret'></i>");
+                $timeout(function(){
+                    var menuItem = angular.element(elem[0].children[0]);
+                    menuItem.bind('focus mouseenter', function () {
+                        elem.parent().children().removeClass('active');
+                        elem.addClass('active');
+                        if(elem[0].childElementCount > 1){ // > 1 has third level menu
+                            menuItem.attr('aria-expanded',true);
+                            menuItem.attr('aria-haspopup',true);
+                        }
+                        var caretLeft = (elem[0].offsetLeft +  elem[0].offsetWidth/2) - 10;
+                        caretSign.css({left: caretLeft + 'px'});
+                        angular.element(caretSign);
+                        var tertiaryItems = elem[0].querySelectorAll('[b2b-header-tertiarymenu]');
+                        if(tertiaryItems.length >=1){
+                            elem.append(caretSign);
+                        }
+                    });
+                    menuItem.bind('blur', function () {
+                        $timeout(function () {
+                            var parentElm = document.activeElement.parentElement.parentElement;
+                            if(parentElm){
+                                if (!(parentElm.hasAttribute('b2b-header-tertiarymenu'))) {
+                                    elem.removeClass('active');
+                                    if(elem[0].childElementCount > 1){ // > 1 has third level menu
+                                        menuItem.attr('aria-expanded',false);
+                                    }
+                                    var caret = elem[0].querySelector('.menuCaret');
+                                    if(caret){
+                                        caret.remove();
+                                    }   
+                                }
+                            }
+                        });
+                    });
+                });
+            }
+        };
+    }]).directive('b2bHeaderTertiarymenu', ['$timeout','keymap', function ($timeout,keymap){
+        return{
+            restrict: 'A',
+            require:'^b2bHeaderMenu',
+            link: function (scope, elem,attr,ctrl) {
+                
+                elem.bind('keydown', function (evt) {
+                    var activeElm = document.activeElement;
+                    var activeParentElm = activeElm.parentElement;
+                    var activeParentObj  = angular.element(activeParentElm)[0];
+                    
+                    if(activeParentElm.hasAttribute('b2b-tertiary-link')){
+                        var quarterNav = angular.element(activeParentElm)[0].querySelector('li[b2b-header-quarternarymenu]');
+                        if(quarterNav){
+                            var links = ctrl.getFirstElement(angular.element(quarterNav)[0],'a');
+                        }
+                    }
+                    var tertiaryMenu = activeElm.parentElement.parentElement.parentElement;
+                    var tertiaryMenuFlag = tertiaryMenu.hasAttribute('b2b-tertiary-link');
+                    
+                    switch (evt.keyCode) {
+                        case keymap.KEY.DOWN:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if (activeParentElm.hasAttribute('b2b-tertiary-link')) {
+                                if(angular.element(quarterNav).hasClass('active')){
+                                    links.focus();
+                                }else if(activeParentObj.nextElementSibling){
+                                    ctrl.nextSiblingFocus(activeParentObj,true);
+                                }
+                            }
+                            else if(angular.element(activeParentElm).hasClass('active')){
+                                ctrl.nextSiblingFocus(activeElm);
+                            }
+                            break;                        
+                        case keymap.KEY.UP:
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if(activeParentElm.hasAttribute('b2b-tertiary-link')){
+                                if(activeParentObj.previousElementSibling.hasAttribute('b2b-tertiary-link')){
+                                    ctrl.previousSiblingFocus(activeParentObj,true);
+                                }else{
+                                    var elm = angular.element(activeElm.parentElement.parentElement.parentElement.parentElement.parentElement)[0];
+                                    ctrl.getFirstElement(elm,"a").focus();
+                                }
+                            }else if(angular.element(activeParentElm).hasClass('active')){
+                                    if (activeElm.previousElementSibling) {
+                                        ctrl.previousSiblingFocus(activeElm);
+                                    }else if (tertiaryMenuFlag) {
+                                        var elm = angular.element(tertiaryMenu)[0];
+                                        ctrl.getFirstElement(elm,"a.header-tertiaryitem").focus();
+                                    }
+                                }
+                            break;
+                        default:
+                            break;
+                    }
+                });
+            }            
+        };          
+    }]).directive('b2bHeaderTogglemenu', ['$timeout', 'keymap', function ($timeout, keymap) {
+        return{
+            restrict: 'A',
+            require: '^b2bHeaderMenu',
+            link: function (scope, elem, attrs, ctrl) {
+                var quarterNav;
+                $timeout(function () {
+                    quarterNav = angular.element(elem.parent())[0].querySelector('li[b2b-header-quarternarymenu]');
+                    elem.bind('click', function () {
+                        angular.element(quarterNav).toggleClass('active');
+                    });
+                });
+            }
+        };
+    }]).directive('b2bHeaderResponsive', ['$timeout',function ($timeout) {
+        return{
+            restrict: 'A',
+            controller: function($scope){
+                this.applyMediaQueries = function(value){
+                    document.querySelector('style').textContent += 
+                        "@media screen and (max-width:950px) { \
+                            .header__item.profile { right: " + value + "px; } \
+                        }";
+                };
+                this.arrangeResponsiveHeader = function(children){
+                    /* 
+                     * clientWidth of 1090 === max-width of 1100px
+                     * clientWidth of 920 === max-width of 950px
+                     * see b2b-angular.css for rest of responsive header CSS
+                     */
+                  if (document.documentElement.clientWidth <= 920) { 
+                        switch(children){
+                            case 1:
+                                this.applyMediaQueries(200);                    
+                                break;
+                            case 2:
+                                this.applyMediaQueries(200);                            
+                                break;
+                            default: // anthing above 3, however, should not have more than 3 to date
+                                this.applyMediaQueries(200);                                                                            
+                        }
+                    }
+                }
+            },
+            link: function (scope, elem, attrs, ctrl) {
+                var children;
+                var profile;
+                
+                // onload of page
+                $timeout(function(){ 
+                    profile = document.querySelector('li.header__item.profile');
+                    children = angular.element(profile).children().length;
+                    
+                    ctrl.arrangeResponsiveHeader(children); // shift right-side icon flyovers
+                });
+
+                // on screen resize
+                window.addEventListener('resize', function(event){ // caret adjustmet
+                    var activeSubmenu = elem[0].querySelector('[b2b-header-menu] [b2b-header-submenu].active');
+                    var activeSubmenuEl = angular.element(activeSubmenu);
+                    if(activeSubmenu){
+                        var caretSign = activeSubmenu.querySelector('i.menuCaret');
+                        if(caretSign){
+                            var caretSignEl = angular.element(caretSign);
+                            var caretLeft = (activeSubmenu.offsetLeft +  activeSubmenu.offsetWidth/2) - 10;
+                            caretSignEl.css({left: caretLeft + 'px'});
+                        }
+                    }
+
+                    ctrl.arrangeResponsiveHeader(children); // shift right-side icon flyovers
+                });
+            }
+        };
+    }]);
+
+/**
+ * @ngdoc directive
+ * @name Layouts.att:headings
+ *
+ * @description
+ *  <file src="src/headings/docs/readme.md" />
+ *
+ * @usage
+    <h1 class="heading-page">38px page heading</h1>
+    <h2 class="heading-major-section">30px major section heading</h2>
+    <h3 class="heading-sub-section">24px sub-section heading</h3>
+    <h2 class="heading-medium">20px medium heading</h2>
+    <h2 class="heading-medium-emphasis">20px medium emphasis heading</h2>
+    <h3 class="heading-small">18px small heading</h3>
+    <h3 class="heading-small-emphasis">18px small emphasis heading</h3>
+    <h3 class="heading-micro">13px micro heading</h3>
+
+    <h2 class="heading-group">Lead</h2>
+    <h1 class="heading-page">This is 38px heading</h1>
+    <h2 class="lead">This is lead text...The next big thing since the last big thing we announced.</h2>
+    <h2 class="heading-group">Eyebrow</h2>
+    <h3 class="eyebrow">EYEBROW TEXT</h3>
+    <h2 class="heading-major-section">This is a 30px heading</h2>
+    <h3 class="eyebrow">EYEBROW TEXT</h3>
+    <h3 class="heading-sub-section">24px sub-section heading</h3>
+    <h2 class="heading-group">Subheading</h2>
+    <h2 class="heading-major-section">This is a 30px heading</h2>
+    <h3 class="subheading">A subheading here to support what was said above</h3>
+ * @example
+ <section id="code">
+    <b>HTML + AngularJS</b>
+    <example module="b2b.att">
+    <file src="src/headings/docs/demo.html" />
+</example>
+</section>
+ */
+
+var b2bLegalCopy = angular.module('b2b.att.headings', []);
+/**
+ * @ngdoc directive
+ * @name Tabs, tables & accordions.att:horizontalTable
+ *
+ * @description
+ *  <file src="src/horizontalTable/docs/readme.md" />
+ *
+ * @usage
+ * @param {int} sticky - Number of sticky columns to have. Maximum of 3.
+ * @param {boolean} refresh - A boolean that when set to true will force a re-render of table. Only use when using 'bulk mode'
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/horizontalTable/docs/demo.html" />
+            <file src="src/horizontalTable/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.horizontalTable', [])
+    .constant('b2bHorizontalTableConfig', {
+        'maxStickyColumns': 3
+    })
+    .directive('b2bHorizontalTable', ['$timeout', 'b2bHorizontalTableConfig', 'b2bDOMHelper', function ($timeout, b2bHorizontalTableConfig, b2bDOMHelper) {
+        return {
+            restrict: 'EA',
+            scope: true,
+            transclude: true,
+            scope: {
+                numOfStickyCols: '=?sticky',
+                refresh: '=?'
+
+            },
+            templateUrl: 'b2bTemplate/horizontalTable/horizontalTable.html',
+            link: function (scope, element, attrs, ctrl) {
+                scope.numOfStickyCols = scope.numOfStickyCols || 1;
+                scope.viewportIndex = scope.numOfStickyCols;
+
+                // JM520E: This is a temporary hack until I solve the ngRepeat issue
+                function hack() {
+                    if (element.find('th').length < scope.numOfStickyCols) {
+                        // DOM ngRepeat is not ready, let's check back in 10 ms
+                        console.info('THs are not ready, trying again in 10ms');
+                        $timeout(hack, 10, false);
+                    } else {
+                        init();
+                    }
+                }
+                hack();
+
+                if (attrs.refresh !== undefined && attrs.refresh !== '') {
+                    scope.$watch('refresh', function(oldVal, newVal) {
+                        if (scope.refresh) {
+                            // From testing it takes about 30 ms before ngRepeat executes, so let's set initial timeout
+                            // NOTE: May need to expose timeout to developers. Application is known to have digest cycle of 3-5k watches.
+                            $timeout(init, 100, false);
+                            scope.refresh = false;
+                        }
+                    });
+                }
+
+                var tableElement = element.find('table');
+                var thElements = element.find('th');
+                var innerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table-inner-container'));
+                var outerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table'));
+
+                var tableColumns = [];
+                var tableRows = element.find('tr');
+
+                var maxWidth = 0,
+                    maxHeight = 0;
+                var totalWidth = element.children()[0].offsetWidth;
+                var lastVisibleColumn = 0;
+                var collectiveColumnWidth = [];
+                var collectiveRowHeight = [];
+                var columnSets = [];
+                var setIndex = 0; 
+                var stickyPixels = 0;
+
+                var displayNoneCSS = {'display': 'none'};
+                var displayBlockCSS = {'display': 'table-cell'};
+
+                function calculateVisibleColumns(startingPoint) {
+                    var usedWidth = 0, 
+                        visibleColumns = startingPoint || scope.numOfStickyCols;
+
+                    while(usedWidth < stickyPixels && visibleColumns < collectiveColumnWidth.length) {
+                        if (usedWidth+collectiveColumnWidth[visibleColumns] > stickyPixels) {
+                            if (startingPoint === visibleColumns) {
+                                return visibleColumns; // The next cell is too large to fit, it should be only thing to fit
+                            }
+                            visibleColumns--;
+                            return visibleColumns;
+                        }
+                        usedWidth += collectiveColumnWidth[visibleColumns];
+                        visibleColumns++;
+                    }
+
+                    if (usedWidth > stickyPixels) {
+                        return --visibleColumns;
+                    }
+                    return visibleColumns;
+                }
+
+                function updateCellDisplay(set) {
+                    for (var i = scope.numOfStickyCols; i < tableColumns.length; i++) {
+                        angular.element(tableColumns[i]).css(displayNoneCSS);
+                    }
+
+                    for (var i = set[0]; i <= set[1]; i++) {
+                        angular.element(tableColumns[i]).css(displayBlockCSS);
+                    }
+                }
+
+                function forceDigest() {
+                    if (!scope.$$phase) {
+                        scope.$digest();
+                    }
+                }
+
+                function findMax(arr, prop) {
+                    var max = 0;
+                    var localVal = 0;
+                    var prevDisplay;
+                    var item;
+                    for (var i = 0; i < arr.length; i++) {
+                        item = arr[i];
+                        prevDisplay = angular.element(item).css('display');
+                        if (scope.$$phase) {
+                            scope.$digest();
+                        }
+                        if (prop === 'width') {
+                            localVal = Math.ceil(parseInt(window.getComputedStyle(item).width.split('px')[0], 10)) + 30; // 30 px is padding
+                        } else if (prop === 'offsetWidth') {
+                            localVal = item.offsetWidth;
+                        } else if (prop === 'height') {
+                            localVal = item.offsetHeight;
+                        }
+
+                        if (localVal >= max) {
+                            max = localVal;
+                        }
+                    }
+                    
+                    return max;
+                }
+
+                function init() {
+                    // Reset this from a previous execution
+                    tableColumns = [];
+                    collectiveColumnWidth = [];
+                    collectiveRowHeight = [];
+                    maxWidth = 0;
+                    maxHeight = 0;
+                    lastVisibleColumn = 0;
+                    columnSets = [];
+                    setIndex = 0; 
+                    visibleColumns = [];
+                    stickyPixels = 0;
+
+                    tableElement = element.find('table');
+                    thElements = element.find('th');
+                    innerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table-inner-container'));
+                    outerContainer = angular.element(element[0].querySelector('.b2b-horizontal-table'));
+                    totalWidth = element.children()[0].offsetWidth;
+
+
+                    tableRows = element.find('tr');
+                    totalWidth = element.children()[0].offsetWidth;
+
+                    scope.disableLeft = true;
+                    scope.disableRight = false;
+
+                    if (scope.numOfStickyCols > b2bHorizontalTableConfig.maxStickyColumns) {
+                        throw new Error("Table can only support 3 sticky columns.");
+                    }                  
+
+                    angular.forEach(tableRows, function(row, rowIndex) {
+                        collectiveRowHeight.push(findMax(row.children, 'height'));
+                        for(var j = 0; j < row.children.length; j++) {
+                            if (tableColumns[j] === undefined) {
+                                tableColumns[j] = [];
+                            }
+                            tableColumns[j].push(row.children[j]);
+                        }
+                    });
+
+                    // We need to reset all the displayNones from previous runs, if applicable
+                    if (attrs.refresh !== undefined && attrs.refresh !== '')  {
+                        for (var i = scope.numOfStickyCols+1; i < tableColumns.length; i++) {
+                            angular.element(tableColumns[i]).css(displayBlockCSS);
+                        }
+                    }
+
+                    for (var i = 0; i < tableColumns.length; i++) {
+                        collectiveColumnWidth.push(findMax(tableColumns[i], 'width')); //offsetWidth doesn't take into account custom css inside
+                    }
+                    for(var i = 0; i < scope.numOfStickyCols; i++) {
+                        maxWidth += collectiveColumnWidth[i];
+                    }
+      
+                    stickyPixels = totalWidth-maxWidth;
+
+
+                    // At this point, for each tr, I need to set the properties (height) and each numOfStickyCols children
+                    // should be set with sticky properties (margin-left and width)
+                    var width = maxWidth;
+                    for(var i = 0; i < scope.numOfStickyCols; i++) {
+                        for (var j = 0; j < tableRows.length; j++) {
+                            trObject = angular.element(tableRows[j].children[i]);
+                            
+                            angular.element(trObject).css({
+                                'margin-left': -(width + 2) + 'px', 
+                                'width': (collectiveColumnWidth[i] + 3) + 'px', // instead of taking the max width, grab max width for that column
+                                'height': collectiveRowHeight[j] + 'px',
+                                'position': 'absolute',
+                                'background-color': 'lightgrey'
+                            });
+                        }
+                        
+
+                        width -= collectiveColumnWidth[i];
+                    }
+
+                    innerContainer.css({
+                        'padding-left': (maxWidth + 2) + 'px'
+                    });
+
+
+                    // Let's precompute all the (set) combinations beforehand
+                    columnSets = []; 
+                    for (var i = scope.numOfStickyCols; i < tableColumns.length;) {
+                        visibleColumns = calculateVisibleColumns(i);
+                        columnSets.push([i, visibleColumns]);
+                        i = visibleColumns + 1;
+                    }
+                    
+                    updateCellDisplay(columnSets[setIndex]);
+                    checkScrollArrows();
+
+                    scope.numOfCols = tableColumns.length;
+
+                    console.log('Bulk Mode is ' + (attrs.bulkMode ? 'enabled': 'disabled'));
+                    console.log('tableColumns', tableColumns);
+                    console.log('collectiveColumnWidth: ', collectiveColumnWidth);
+                    console.log('maxWidth: ', maxWidth);
+                }
+
+                function checkScrollArrows() {
+                    scope.disableLeft = (setIndex === 0);
+                    scope.disableRight = !(setIndex < columnSets.length-1);
+                }
+
+
+                scope.moveViewportLeft = function () {
+                    setIndex--;
+                    updateCellDisplay(columnSets[setIndex]);
+                    checkScrollArrows();
+
+                    if (scope.disableLeft) {
+                        element.find('span')[0].focus();
+                    }
+                };
+                
+                scope.moveViewportRight = function () {
+                    setIndex++;
+                    updateCellDisplay(columnSets[setIndex]);
+                    checkScrollArrows();
+                    
+                    if (scope.disableRight) {
+                        element.find('span')[0].focus();
+                    }
+                };
+
+                scope.getColumnSet = function () {
+                    return columnSets[setIndex];
+                };
+
+                innerContainer.bind('scroll', function () {
+                    $timeout(function () {
+                        checkScrollArrows();
+                    }, 1);
+                });
+
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:hourPicker
+ *
+ * @description
+ *  <file src="src/hourPicker/docs/readme.md" />
+ *
+ * @usage
+ * <div b2b-hourpicker ng-model="hourpickerValue.value"></div>
+    
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/hourPicker/docs/demo.html" />
+            <file src="src/hourPicker/docs/demo.js" />
+        </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.hourPicker', ['b2b.att.utilities'])
+
+.constant('b2bHourpickerConfig', {
+    dayOptions: [{
+        title: 'sunday',
+        caption: 'Sun',
+        label: 'S',
+        disabled: false
+    }, {
+        title: 'monday',
+        caption: 'Mon',
+        label: 'M',
+        disabled: false
+    }, {
+        title: 'tuesday',
+        caption: 'Tues',
+        label: 'T',
+        disabled: false
+    }, {
+        title: 'wednesday',
+        caption: 'Wed',
+        label: 'W',
+        disabled: false
+    }, {
+        title: 'thursday',
+        caption: 'Thu',
+        label: 'T',
+        disabled: false
+    }, {
+        title: 'friday',
+        caption: 'Fri',
+        label: 'F',
+        disabled: false
+    }, {
+        title: 'saturday',
+        caption: 'Sat',
+        label: 'S',
+        disabled: false
+    }],
+    startTimeOptions: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
+    startTimeDefaultOptionIndex: -1,
+    startTimeDefaultMeridiem: "am",
+    endTimeOptions: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
+    endTimeDefaultOptionIndex: -1,
+    endTimeDefaultMeridiem: "pm",
+    sameDayOption: true
+})
+
+.factory('b2bNormalizeHourpickerValues', [function () {
+    var _normalize = function (hourpickerValues) {
+        if (angular.isDefined(hourpickerValues) && hourpickerValues != null) {
+            var finalHourpickerValues = [];
+            var hourpickerValue = {};
+            var days = {};
+            for (var i = 0; i < hourpickerValues.length; i++) {
+                days = hourpickerValues[i].days ? hourpickerValues[i].days : {};
+                hourpickerValue.startTime = hourpickerValues[i].startTime ? hourpickerValues[i].startTime : '';
+                hourpickerValue.startMeridiem = hourpickerValues[i].startMeridiem ? hourpickerValues[i].startMeridiem : '';
+                hourpickerValue.endTime = hourpickerValues[i].endTime ? hourpickerValues[i].endTime : '';
+                hourpickerValue.endMeridiem = hourpickerValues[i].endMeridiem ? hourpickerValues[i].endMeridiem : '';
+                hourpickerValue.days = [];
+
+                var retrieveDaysText = function (daysDetails) {
+                    var daysTexts = [];
+                    var first = -1;
+                    var last = -1;
+                    var index = -1;
+                    for (var i in days) {
+                        if (days[i].value) {
+                            daysTexts.push(i);
+                        }
+                    }
+
+                    first = daysTexts[0];
+                    last = daysTexts[0];
+                    index = 0;
+                    hourpickerValue.days[index] = days[first].caption;
+                    if (daysTexts.length > 1) {
+                        for (var i = 1; i < daysTexts.length; i++) {
+                            if (daysTexts[i] - last === 1) {
+                                last = daysTexts[i];
+                                hourpickerValue.days[index] = days[first].caption + ' - ' + days[last].caption;
+                            } else {
+                                index++;
+                                first = last = daysTexts[i];
+                                hourpickerValue.days[index] = days[first].caption;
+                            }
+                        }
+                    }
+                };
+                retrieveDaysText();
+
+                finalHourpickerValues.push(angular.copy(hourpickerValue));
+            }
+
+            return angular.copy(finalHourpickerValues);
+        }
+    };
+
+    return {
+        normalize: _normalize
+    };
+}])
+
+.directive('b2bHourpicker', ['b2bHourpickerConfig', 'b2bNormalizeHourpickerValues', function (b2bHourpickerConfig, b2bNormalizeHourpickerValues) {
+    return {
+        restrict: 'EA',
+        replace: false,
+        scope: true,
+        require: 'ngModel',
+        templateUrl: 'b2bTemplate/hourPicker/b2bHourpicker.html',
+        controller: ['$scope', function (scope) {
+
+        }],
+        link: function (scope, elem, attr, ctrl) {
+            scope.hourpicker = {};
+            scope.hourpicker.dayOptions = attr.dayOptions ? scope.$parent.$eval(attr.dayOptions) : b2bHourpickerConfig.dayOptions;
+            scope.hourpicker.startTimeOptions = attr.startTimeOptions ? scope.$parent.$eval(attr.startTimeOptions) : b2bHourpickerConfig.startTimeOptions;
+            scope.hourpicker.endTimeOptions = attr.endTimeOptions ? scope.$parent.$eval(attr.endTimeOptions) : b2bHourpickerConfig.endTimeOptions;
+            scope.hourpicker.startTimeDefaultOptionIndex = attr.startTimeDefaultOptionIndex ? scope.$parent.$eval(attr.startTimeDefaultOptionIndex) : b2bHourpickerConfig.startTimeDefaultOptionIndex;
+            scope.hourpicker.endTimeDefaultOptionIndex = attr.endTimeDefaultOptionIndex ? scope.$parent.$eval(attr.endTimeDefaultOptionIndex) : b2bHourpickerConfig.endTimeDefaultOptionIndex;
+            scope.hourpicker.startTimeDefaultMeridiem = attr.startTimeDefaultMeridiem ? scope.$parent.$eval(attr.startTimeDefaultMeridiem) : b2bHourpickerConfig.startTimeDefaultMeridiem;
+            scope.hourpicker.endTimeDefaultMeridiem = attr.endTimeDefaultMeridiem ? scope.$parent.$eval(attr.endTimeDefaultMeridiem) : b2bHourpickerConfig.endTimeDefaultMeridiem;
+            scope.hourpicker.sameDayOption = attr.sameDayOption ? scope.$parent.$eval(attr.sameDayOption) : b2bHourpickerConfig.sameDayOption;
+            scope.hourpicker.editMode = -1;
+
+            scope.hourpickerValues = [];
+            scope.finalHourpickerValues = [];
+            scope.addHourpickerValue = function (hourpickerPanelValue) {
+                if (hourpickerPanelValue) {
+                    if (scope.hourpicker.editMode > -1) {
+                        scope.hourpickerValues[scope.hourpicker.editMode] = hourpickerPanelValue;
+                        scope.hourpicker.editMode = -1;
+                    } else {
+                        scope.hourpickerValues.push(hourpickerPanelValue);
+                    }
+                }
+                scope.finalHourpickerValues = b2bNormalizeHourpickerValues.normalize(angular.copy(scope.hourpickerValues));
+                ctrl.$setViewValue(angular.copy(scope.hourpickerValues));
+            };
+            ctrl.$render = function () {
+                if (angular.isDefined(ctrl.$modelValue)) {
+                    scope.hourpickerValues = angular.copy(ctrl.$modelValue);
+                    scope.finalHourpickerValues = b2bNormalizeHourpickerValues.normalize(angular.copy(scope.hourpickerValues));
+                }
+            };
+            scope.editHourpickerValue = function (index) {
+                scope.hourpickerPanelValue = angular.copy(scope.hourpickerValues[index]);
+                scope.hourpicker.editMode = index;
+            };
+            scope.deleteHourpickerValue = function (index) {
+                scope.hourpickerValues.splice(index, 1);
+                scope.resetHourpickerPanelValue();
+                scope.addHourpickerValue();
+            };
+
+            scope.setValidity = function (errorType, errorValue) {
+                ctrl.$setValidity(errorType, errorValue);
+            }
+        }
+    }
+}])
+
+.directive('b2bHourpickerPanel', [function () {
+    return {
+        restrict: 'EA',
+        replace: false,
+        templateUrl: 'b2bTemplate/hourPicker/b2bHourpickerPanel.html',
+        controller: ['$scope', function (scope) {
+
+        }],
+        link: function (scope, elem, attr, ctrl) {
+            var hourpickerPanelValueTemplate = {
+                days: {},
+                startTime: '',
+                startMeridiem: 'am',
+                endTime: '',
+                endMeridiem: 'pm'
+            };
+            for (var i = 0; i < scope.hourpicker.dayOptions.length; i++) {
+                hourpickerPanelValueTemplate.days[i] = {
+                    value: false,
+                    title: scope.hourpicker.dayOptions[i].title,
+                    caption: scope.hourpicker.dayOptions[i].caption
+                };
+            }
+            scope.hourpickerPanelValue = {};
+            scope.disableAddBtn = true;
+
+            scope.$watch('hourpickerPanelValue.days', function(){
+                for(var i in scope.hourpickerPanelValue.days)
+                {
+                    if(scope.hourpickerPanelValue.days[i].value)
+                    {
+                        scope.disableAddBtn = false;
+                        break;
+                    }
+                    scope.disableAddBtn = true;
+                }
+            }, true);
+
+            scope.resetHourpickerPanelValue = function () {
+                scope.hourpickerPanelValue = angular.copy(hourpickerPanelValueTemplate);
+                if (scope.hourpicker.startTimeDefaultOptionIndex > -1) {
+                    scope.hourpickerPanelValue.startTime = scope.hourpicker.startTimeOptions[scope.hourpicker.startTimeDefaultOptionIndex];
+                }
+                if (scope.hourpicker.endTimeDefaultOptionIndex > -1) {
+                    scope.hourpickerPanelValue.endTime = scope.hourpicker.endTimeOptions[scope.hourpicker.endTimeDefaultOptionIndex];
+                }
+                scope.hourpickerPanelValue.startMeridiem = scope.hourpicker.startTimeDefaultMeridiem;
+                scope.hourpickerPanelValue.endMeridiem = scope.hourpicker.endTimeDefaultMeridiem;
+                scope.hourpicker.editMode = -1;
+                scope.setValidity('invalidHourpickerData', true);
+                scope.setValidity('invalidHourpickerTimeRange', true);
+            };
+            scope.resetHourpickerPanelValue();
+            scope.updateHourpickerValue = function () {
+                if (scope.isFormValid() && !scope.isTimeOverlap()) {
+                    scope.addHourpickerValue(angular.copy(scope.hourpickerPanelValue));
+                    scope.resetHourpickerPanelValue();
+                }
+            };
+
+            scope.isFormValid = function () {
+                var isStartTimeAvailable = scope.hourpickerPanelValue.startTime ? true : false;
+                var isStartMeridiemAvailable = scope.hourpickerPanelValue.startMeridiem ? true : false;
+                var isEndTimeAvailable = scope.hourpickerPanelValue.endTime ? true : false;
+                var isEndMeridiemAvailable = scope.hourpickerPanelValue.endMeridiem ? true : false;
+                var currentStartTime = getTime(scope.hourpickerPanelValue.startTime, scope.hourpickerPanelValue.startMeridiem);
+                var currentEndTime = getTime(scope.hourpickerPanelValue.endTime, scope.hourpickerPanelValue.endMeridiem);
+                var isTimeInProperSequence = currentEndTime > currentStartTime;
+                var isDayChecked = false;
+                for (var i in scope.hourpickerPanelValue.days) {
+                    if (scope.hourpickerPanelValue.days[i].value) {
+                        isDayChecked = true;
+                        break;
+                    }
+                }
+
+                if (isStartTimeAvailable && isStartMeridiemAvailable && isEndTimeAvailable && isEndMeridiemAvailable && isTimeInProperSequence && isDayChecked) {
+                    scope.setValidity('invalidHourpickerData', true);
+                    return true;
+                } else {
+                    scope.setValidity('invalidHourpickerData', false);
+                    return false;
+                }
+            };
+            scope.isTimeOverlap = function () {
+                var selectedDays = [];
+                for (var i in scope.hourpickerPanelValue.days) {
+                    if (scope.hourpickerPanelValue.days[i].value) {
+                        selectedDays.push(i);
+                    }
+                }
+
+                var currentStartTime, currentEndTime, existingStartTime, existingEndTime;
+                currentStartTime = getTime(scope.hourpickerPanelValue.startTime, scope.hourpickerPanelValue.startMeridiem);
+                currentEndTime = getTime(scope.hourpickerPanelValue.endTime, scope.hourpickerPanelValue.endMeridiem);
+                for (var i = 0; i < scope.hourpickerValues.length; i++) {
+                    
+                    if (i === scope.hourpicker.editMode) {
+                        continue;
+                    }
+
+                    for (var j = 0; j < selectedDays.length; j++) {
+                        existingStartTime = getTime(scope.hourpickerValues[i].startTime, scope.hourpickerValues[i].startMeridiem);
+                        existingEndTime = getTime(scope.hourpickerValues[i].endTime, scope.hourpickerValues[i].endMeridiem);
+                        if (scope.hourpickerValues[i].days[selectedDays[j]].value) {
+                            if(!scope.hourpicker.sameDayOption){
+                                scope.setValidity('dayAlreadySelected', false);
+                                return true;
+                            } else if ((currentStartTime > existingStartTime && currentStartTime < existingEndTime) || (currentEndTime > existingStartTime && currentEndTime < existingEndTime)) {
+                                scope.setValidity('invalidHourpickerTimeRange', false);
+                                return true;
+                            } else if ((existingStartTime > currentStartTime && existingStartTime < currentEndTime) || (existingEndTime > currentStartTime && existingEndTime < currentEndTime)) {
+                                scope.setValidity('invalidHourpickerTimeRange', false);
+                                return true;
+                            } else if ((currentStartTime === existingStartTime) && (currentEndTime === existingEndTime)) {
+                                scope.setValidity('invalidHourpickerTimeRange', false);
+                                return true;
+                            }
+                        }
+                    }
+                }
+
+                scope.setValidity('dayAlreadySelected', true);
+                scope.setValidity('invalidHourpickerTimeRange', true);
+                return false;
+            };
+            var getTime = function (timeString, meridiem) {
+                var tempDate = new Date();
+                if (timeString && meridiem) {
+                    var timeSplit = timeString.split(':');
+                    var hour = ((meridiem === 'PM' || meridiem === 'pm') && timeSplit[0] !== '12') ? parseInt(timeSplit[0], 10) + 12 : parseInt(timeSplit[0], 10);
+                    tempDate.setHours(hour, parseInt(timeSplit[1], 10), 0, 0);
+                }
+
+                return tempDate.getTime();
+            };
+        }
+    }
+}])
+
+.directive('b2bHourpickerValue', [function () {
+    return {
+        restrict: 'EA',
+        replace: false,
+        templateUrl: 'b2bTemplate/hourPicker/b2bHourpickerValue.html',
+        controller: ['$scope', function (scope) {
+
+        }],
+        link: function (scope, elem, attr, ctrl) {
+            scope.hourpickerValue = {};
+            scope.hourpickerValue.startTime = attr.startTime ? scope.$eval(attr.startTime) : '';
+            scope.hourpickerValue.startMeridiem = attr.startMeridiem ? scope.$eval(attr.startMeridiem) : '';
+            scope.hourpickerValue.endTime = attr.endTime ? scope.$eval(attr.endTime) : '';
+            scope.hourpickerValue.endMeridiem = attr.endMeridiem ? scope.$eval(attr.endMeridiem) : '';
+            scope.hourpickerValue.days = attr.days ? scope.$eval(attr.days).join(', ') : '';
+            scope.hourpickerValue.index = attr.b2bHourpickerValue ? scope.$eval(attr.b2bHourpickerValue) : -1;
+        }
+    }
+}]);
+/**
+ * @ngdoc directive
+ * @name Template.att:inputTemplate
+ *
+ * @description
+ *  <file src="src/inputTemplate/docs/readme.md" />
+ *
+ * @usage
+ *  <input type="text" id="fieldId" placeholder="placholder text here" class="span12 input-enhanced" name="fieldName">
+ *
+ * @example
+ <section id="code">
+    <b>HTML + AngularJS</b>
+    <example module="b2b.att">
+        <file src="src/inputTemplate/docs/demo.html" />
+        <file src="src/inputTemplate/docs/demo.js" />
+    </example>
+ </section>
+ */
+angular.module('b2b.att.inputTemplate', []);
+
+/**
+ * @ngdoc directive
+ * @name Navigation.att:leftNavigation
+ *
+ * @description
+ *  <file src="src/leftNavigation/docs/readme.md" />
+ *
+ * @usage
+ *   <b2b-left-navigation data-menu="menuData"></b2b-left-navigation> 
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/leftNavigation/docs/demo.html" />
+            <file src="src/leftNavigation/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.leftNavigation', [])
+    .directive('b2bLeftNavigation', [function () {
+        return {
+            restrict: 'EA',
+            templateUrl: 'b2bTemplate/leftNavigation/leftNavigation.html',
+            scope: {
+                menuData: '='
+            },
+            link: function (scope, element, attrs, ctrl) {
+                scope.idx = -1;
+                scope.itemIdx = -1;
+                scope.navIdx = -1;
+                scope.toggleNav = function (val,link) {
+                    if (val === scope.idx) {
+                        scope.idx = -1;
+                        return;
+                    }
+                    scope.idx = val;
+                };
+                /*New function for ECOMP sdk*/
+                scope.toggleDrawer = function(showmenu){
+                	scope.idx=-1; /*hide the sunmenus*/
+                	if(showmenu){
+            			document.getElementById('page-content').style.paddingLeft = "50px";
+            		}
+            		else
+            			document.getElementById('page-content').style.paddingLeft = "230px";           	
+                };
+                scope.liveLink = function (evt, val1, val2) {
+                    scope.itemIdx = val1;
+                    scope.navIdx = val2;
+                    evt.stopPropagation();
+                };
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:links
+ *
+ * @description
+ *  <file src="src/links/docs/readme.md" />
+ * @usage
+ *      <!-- See below examples for link implementation -->
+ *      
+ * @example
+       <section id="code">              
+           <b>HTML + AngularJS</b>
+           <example module="b2b.att">
+           <file src="src/links/docs/demo.html" />
+            <file src="src/links/docs/demo.js" />            
+          </example>          
+        </section>
+ */
+angular.module('b2b.att.links', []);
+/**
+ * @ngdoc directive
+ * @name Misc.att:listbox
+ *
+ * @description
+ *  <file src="src/listbox/docs/readme.md" />
+ *
+ * @param {int} currentIndex - Current index of selected listbox item. Is not supported on multiselect listbox
+ * @param {Array} listboxData - Data of listbox items. Should include full data regardless if HTML will be filtered.
+
+ * @example
+ *  <section id="code">   
+     <example module="b2b.att">
+     <file src="src/listbox/docs/demo.html" />
+     <file src="src/listbox/docs/demo.js" />
+     </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.listbox', ['b2b.att.utilities'])
+.directive('b2bListBox', ['keymap', 'b2bDOMHelper', '$rootScope', function(keymap, b2bDOMHelper, $rootScope) {
+                return {
+                    restrict: 'AE',
+                    transclude: true,
+                    replace: true,
+                    scope: {
+                        currentIndex: '=', 
+                        listboxData: '='
+                    },
+                    templateUrl: 'b2bTemplate/listbox/listbox.html',
+                    link: function(scope, elem, attr) {
+
+                        if (attr.ariaMultiselectable !== undefined || attr.ariaMultiselectable === 'true') {
+                            scope.multiselectable = true;
+                        } else {
+                            scope.multiselectable = false;
+                        }
+
+                        var shiftKey = false;
+                        var elements = [];
+                        var prevDirection = undefined; // previous direction is used for an edge case when shifting
+                        var shiftKeyPressed = false; // Used to handle shift clicking
+                        var ctrlKeyPressed = false;
+
+                        var currentIndexSet = {
+                            'elementIndex': 0,
+                            'listboxDataIndex': 0
+                        };
+
+                        /*scope.$watch('currentIndex', function(oldVal, newVal) {
+                            if (angular.equals(oldVal, newVal)) return;
+                            if (!scope.multiselectable) {
+                                // This doesn't garuntee anything. index will update on focus based on rules
+                                currentIndexSet.listboxDataIndex = scope.currentIndex;
+                                // Should this occur? 
+                                //scope.listboxData[currentIndexSet.listboxDataIndex].selected = true;
+
+                                // Update elementIndex
+                                elements = elem.children();
+                                var indecies = Array.prototype.map.call(elements, function(item) {
+                                    return parseInt(angular.element(item).attr('data-index'), 10);
+                                }).filter(function(item) {
+                                    return item === scope.currentIndex;
+                                });
+                                currentIndex.elementIndex = indecies[0];
+                                //focusOnElement(currentIndexSet.elementIndex); // This isn't shifting focus
+                                if (!scope.$$phase) {
+                                    scope.$apply();
+                                }
+                            }
+                        });*/
+
+                        function isTrue(item) {
+                            if (item.selected === true) {
+                                return true;
+                            }
+                        }
+
+                        function incrementIndex(elem) {
+                            $rootScope.$apply();
+
+                            var nextElem = elem.next();
+                            if (!angular.isDefined(nextElem) || nextElem.length === 0) {
+                                return;
+                            }
+
+                            currentIndexSet.elementIndex += 1;
+                            currentIndexSet.listboxDataIndex = parseInt(nextElem.attr('data-index'), 10);
+                            scope.currentIndex = currentIndexSet.listboxDataIndex;
+
+                            if (currentIndexSet.elementIndex >= elements.length - 1) {
+                                currentIndexSet.elementIndex = elements.length-1;
+                            }
+                        }
+
+                        function decrementIndex(elem) {
+                            $rootScope.$apply();
+                            var prevElem = angular.element(b2bDOMHelper.previousElement(elem));
+                            if (!angular.isDefined(prevElem) || prevElem.length === 0) {
+                                return;
+                            }
+
+                            currentIndexSet.elementIndex -= 1;
+                            currentIndexSet.listboxDataIndex = parseInt(prevElem.attr('data-index'), 10);
+                            scope.currentIndex = currentIndexSet.listboxDataIndex;
+
+                            if (currentIndexSet.elementIndex <= 0) {
+                                currentIndexSet.elementIndex = 0;
+                            }
+                        }
+
+                        var focusOnElement = function(index) {
+                            try {
+                                elements[index].focus();
+                            } catch (e) {};
+                        }
+
+                        function selectItems(startIndex, endIndex, forceValue) {
+                            for (var i = startIndex; i < endIndex; i++) {
+                                if (forceValue === undefined) {
+                                    // We will flip the value
+                                    scope.listboxData[i].selected = !scope.listboxData[i].selected;
+                                } else {
+                                    scope.listboxData[i].selected = forceValue;
+                                }
+                            }
+
+                            if (!scope.$$phase) {
+                                scope.$apply();
+                            }
+                        }
+
+                        elem.bind('focus', function(evt) { 
+                            // If multiselectable or not and nothing is selected, put focus on first element 
+                            // If multiselectable and a range is set, put focus on first element of range 
+                            // If not multiselectable and something selected, put focus on element 
+                            elements = elem.children(); 
+                             var selectedItems = scope.listboxData.filter(isTrue); 
+                             var elementsIndies = Array.prototype.map.call(elements, function(item) {
+                                return parseInt(angular.element(item).attr('data-index'), 10);
+                            });
+ 
+                            if (selectedItems.length == 0) { 
+                                focusOnElement(0); 
+                                currentIndexSet.listboxDataIndex = 0;
+                            } else if (attr.ariaMultiselectable) { 
+                                var index = scope.listboxData.indexOf(selectedItems[0]); 
+                                var indies = elementsIndies.filter(function(item) {
+                                    return (item === index);
+                                });
+
+                                if (indies.length === 0 || indies[0] != index) {
+                                    // Set focused on 0
+                                    currentIndexSet.elementIndex = elementsIndies[0]; 
+                                    currentIndexSet.listboxDataIndex = 0;
+                                    focusOnElement(currentIndexSet.elementIndex);
+                                } else {
+                                    focusOnElement(indies[0]); 
+                                    currentIndexSet.elementIndex = indies[0];
+                                    currentIndexSet.listboxDataIndex = index;
+                                }
+                            } else { 
+                                focusOnElement(currentIndexSet.elementIndex);  
+                            }
+                            scope.currentIndex = currentIndexSet.listboxDataIndex;
+
+                            if (!scope.$$phase) {
+                                scope.$apply();
+                            }
+                        });
+                        elem.bind('keyup', function(evt) {
+                            if (evt.keyCode === keymap.KEY.SHIFT) {
+                                shiftKeyPressed = false;
+                            } else if (evt.keyCode === keymap.KEY.CTRL) {
+                                ctrlKeyPressed = false;
+                            }
+                        });
+        
+                        elem.bind('keydown', function(evt) {
+                            var keyCode = evt.keyCode;
+                            elements = elem.children();
+                            if (keyCode === keymap.KEY.SHIFT) {
+                                shiftKeyPressed = true;
+                            } else if (evt.keyCode === keymap.KEY.CTRL) {
+                                ctrlKeyPressed = true;
+                            }
+
+                            switch(keyCode) {
+                                case 65: // A key
+                                {
+                                    if (scope.multiselectable && evt.ctrlKey) {
+                                        var arr = scope.listboxData.filter(isTrue);
+                                        var elementsIndies = Array.prototype.map.call(elements, function(item) {
+                                            return parseInt(angular.element(item).attr('data-index'), 10);
+                                        });
+                                        var val = !(arr.length === scope.listboxData.length);
+                                        for (var i = 0; i < elementsIndies.length; i++) {
+                                            scope.listboxData[elementsIndies[i]].selected = val;
+                                        }
+
+                                        if (!scope.$$phase) {
+                                            scope.$apply();
+                                        }
+                                        
+                                        evt.preventDefault();
+                                        evt.stopPropagation();
+                                    }
+                                    break;
+                                }
+                                case keymap.KEY.END:
+                                {
+                                    if (scope.multiselectable && evt.ctrlKey && evt.shiftKey) {
+                                        var elementsIndies = Array.prototype.map.call(elements, function(item) {
+                                            return parseInt(angular.element(item).attr('data-index'), 10);
+                                        }).filter(function(item) {
+                                            return (item >= currentIndexSet.listboxDataIndex);
+                                        });
+                                        for (var i = 0; i < elementsIndies.length; i++) {
+                                            scope.listboxData[elementsIndies[i]].selected = true;
+                                        }
+                                        evt.preventDefault();
+                                        evt.stopPropagation();
+
+                                        if (!scope.$$phase) {
+                                            scope.$apply();
+                                        }
+                                    }
+                                    break;
+                                }
+                                case keymap.KEY.HOME: 
+                                {
+                                    if (scope.multiselectable && evt.ctrlKey && evt.shiftKey) {
+                                        selectItems(0, currentIndexSet.listboxDataIndex+1, true); // currentIndex+1 is what is being focused on
+                                        evt.preventDefault();
+                                        evt.stopPropagation();
+                                    }
+                                    break;
+                                }
+                                case keymap.KEY.LEFT:
+                                case keymap.KEY.UP:
+                                {
+                                    if (currentIndexSet.listboxDataIndex === 0) {
+                                        evt.preventDefault();
+                                        evt.stopPropagation();
+                                        return;
+                                    }
+
+                                    decrementIndex(elements.eq(currentIndexSet.elementIndex));
+                                    if (scope.multiselectable && (evt.shiftKey || evt.ctrlKey)) {
+                                        if (evt.shiftKey) {
+                                            if (prevDirection === 'DOWN') {
+                                                scope.listboxData[currentIndexSet.listboxDataIndex+1].selected = !scope.listboxData[currentIndexSet.listboxDataIndex+1].selected;
+                                            }
+                                            scope.listboxData[currentIndexSet.listboxDataIndex].selected = !scope.listboxData[currentIndexSet.listboxDataIndex].selected;
+                                        }
+                                        prevDirection = 'UP';
+                                    } else {
+                                        // If no modifier keys are selected, all other items need to be unselected.
+                                        prevDirection = undefined;
+                                        selectItems(0, scope.listboxData.length, false);
+                                        scope.listboxData[currentIndexSet.listboxDataIndex].selected = true;
+                                    }
+                                    focusOnElement(currentIndexSet.elementIndex);
+                                    if(!scope.$$phase) {
+                                        scope.$apply();
+                                    }
+                                    evt.preventDefault();
+                                    evt.stopPropagation();
+                                    break;
+                                }
+                                case keymap.KEY.RIGHT:
+                                case keymap.KEY.DOWN:
+                                {
+                                    if (currentIndexSet.listboxDataIndex === scope.listboxData.length-1) {
+                                        evt.preventDefault();
+                                        evt.stopPropagation();
+                                        return;
+                                    }
+
+                                    incrementIndex(elements.eq(currentIndexSet.elementIndex));
+                                    
+                                    if (scope.multiselectable && (evt.shiftKey || evt.ctrlKey)) {
+                                        if (evt.shiftKey) {
+                                            if (prevDirection === 'UP') {
+                                                scope.listboxData[currentIndexSet.listboxDataIndex-1].selected = !scope.listboxData[currentIndexSet.listboxDataIndex-1].selected;
+                                            }
+                                            
+                                            scope.listboxData[currentIndexSet.listboxDataIndex].selected = !scope.listboxData[currentIndexSet.listboxDataIndex].selected;    
+                                        }
+                                        prevDirection = 'DOWN';
+                                    } else {
+                                        // If no modifier keys are selected, all other items need to be unselected.
+                                        prevDirection = undefined;
+                                        selectItems(0, scope.listboxData.length, false);
+                                        scope.listboxData[currentIndexSet.listboxDataIndex].selected = true;
+                                    }
+
+                                    focusOnElement(currentIndexSet.elementIndex);
+                                    if(!scope.$$phase) {
+                                        scope.$apply();
+                                    }
+                                    evt.preventDefault();
+                                    evt.stopPropagation();
+                                    break;
+                                }
+                                case keymap.KEY.TAB:
+                                    if(evt.shiftKey) {
+                                        var previousElement = b2bDOMHelper.previousElement(elem.parent().parent(), true);
+                                        evt.preventDefault();
+                                        previousElement.focus();
+                                    }
+                                    break;
+                                default:
+                                    break;
+                            }
+                        });
+
+                        elem.bind('click', function(evt) {
+                            var index = parseInt(evt.target.dataset.index, 10);
+                            if (index === undefined || isNaN(index)) {
+                                return;
+                            }
+                            if (scope.multiselectable && currentIndexSet.listboxDataIndex !== undefined) {
+                                if (shiftKeyPressed) {
+                                    var min = Math.min(index, currentIndexSet.listboxDataIndex);
+                                    var max = Math.max(index, currentIndexSet.listboxDataIndex);
+
+                                    if (index === min) { // clicking up
+                                        var firstIndex = scope.listboxData.findIndex(function(item) { return item.selected === true;});
+                                        // Given the firstIndex, let's find the matching element to get proper element match
+                                        elements = elem.children();
+                                        elements.eq(firstIndex)
+                                        var elementsThatMatch = Array.prototype.filter.call(elements, function(item) {
+                                            if (parseInt(angular.element(item).attr('data-index'), 10) === firstIndex) {
+                                                return true;
+                                            }
+                                        });
+                                        firstIndex = parseInt(angular.element(elementsThatMatch).attr('data-index'), 10);
+                                        
+                                        if (index <= firstIndex && scope.listboxData.filter(isTrue).length > 1) {
+                                            // Break the selection into 2
+                                            selectItems(firstIndex + 1, max + 1, undefined); // + 1 needed because selectItems only selects up to MAX
+                                            selectItems(min, firstIndex, undefined); 
+                                        } else if (scope.listboxData.filter(isTrue).length == 1){
+                                            selectItems(min, max, undefined); 
+                                        } else {
+                                            selectItems(min + 1, max + 1, undefined);
+                                        }
+                                    } else { // clicking down
+                                        selectItems(min + 1, max + 1, scope.listboxData[min].selected);
+                                    }
+                                } else if (ctrlKeyPressed) {
+                                    scope.listboxData[index].selected = !scope.listboxData[index].selected;
+                                } else {
+                                    selectItems(0, scope.listboxData.length, false);
+                                    scope.listboxData[index].selected = !scope.listboxData[index].selected;
+                                }
+                            } else {
+                                selectItems(0, scope.listboxData.length, false);
+                                scope.listboxData[index].selected = !scope.listboxData[index].selected;
+                            }
+                            currentIndexSet.elementIndex = index;
+                            currentIndexSet.listboxDataIndex = index;
+                            scope.currentIndex = currentIndexSet.listboxDataIndex;
+                            if (!scope.$$phase) {
+                                scope.$apply();
+                            }
+                            focusOnElement(index);
+                        });
+                    }
+                };
+            }]);
+/**
+ * @ngdoc directive
+ * @name Videos, audio & animation.att:loaderAnimation
+ *
+ * @description
+ *  <file src="src/loaderAnimation/docs/readme.md" />
+ *
+ * @usage
+ *   <!-- Below demo js shows-->
+ *   Angular library uses Global.css's icon-primary-spinner.
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/loaderAnimation/docs/demo.html" />
+            <file src="src/loaderAnimation/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.loaderAnimation', [])
+    .constant('b2bSpinnerConfig', {
+        loadingText: 'Loading...',
+        startEvent: 'startButtonSpinner',
+        stopEvent: 'stopButtonSpinner'
+    })
+    .constant("progressTrackerConfig", {
+        loadingText: 'Loading...',
+        minDuration: "",
+        activationDelay: "",
+        minDurationPromise: "",
+        activationDelayPromise: ""
+    })
+
+.provider('progressTracker', function () {
+    this.$get = ['$q', '$timeout', function ($q, $timeout) {
+        function cancelTimeout(promise) {
+            if (promise) {
+                $timeout.cancel(promise);
+            }
+        }
+        return function ProgressTracker(options) {
+            //do new if user doesn't
+            if (!(this instanceof ProgressTracker)) {
+                return new ProgressTracker(options);
+            }
+
+            options = options || {};
+            //Array of promises being tracked
+            var tracked = [];
+            var self = this;
+            //Allow an optional "minimum duration" that the tracker has to stay active for.
+            var minDuration = options.minDuration;
+            //Allow a delay that will stop the tracker from activating until that time is reached
+            var activationDelay = options.activationDelay;
+            var minDurationPromise;
+            var activationDelayPromise;
+            self.active = function () {
+                //Even if we have a promise in our tracker, we aren't active until delay is elapsed
+                if (activationDelayPromise) {
+                    return false;
+                }
+                return tracked.length > 0;
+            };
+            self.tracking = function () {
+                //Even if we aren't active, we could still have a promise in our tracker
+                return tracked.length > 0;
+            };
+            self.destroy = self.cancel = function () {
+                minDurationPromise = cancelTimeout(minDurationPromise);
+                activationDelayPromise = cancelTimeout(activationDelayPromise);
+                for (var i = tracked.length - 1; i >= 0; i--) {
+                    tracked[i].resolve();
+                }
+                tracked.length = 0;
+            };
+            //Create a promise that will make our tracker active until it is resolved.
+            // @return deferred - our deferred object that is being tracked
+            self.createPromise = function () {
+                var deferred = $q.defer();
+                tracked.push(deferred);
+                //If the tracker was just inactive and this the first in the list of promises, we reset our delay and minDuration again.
+                if (tracked.length === 1) {
+                    if (activationDelay) {
+                        activationDelayPromise = $timeout(function () {
+                            activationDelayPromise = cancelTimeout(activationDelayPromise);
+                            startMinDuration();
+                        }, activationDelay);
+                    } else {
+                        startMinDuration();
+                    }
+                }
+                deferred.promise.then(onDone(false), onDone(true));
+                return deferred;
+
+                function startMinDuration() {
+                    if (minDuration) {
+                        minDurationPromise = $timeout(angular.noop, minDuration);
+                    }
+                }
+                //Create a callback for when this promise is done. It will remove our tracked promise from the array if once minDuration is complete
+                function onDone() {
+                    return function () {
+                        (minDurationPromise || $q.when()).then(function () {
+                            var index = tracked.indexOf(deferred);
+                            tracked.splice(index, 1);
+                            //If this is the last promise, cleanup the timeouts for activationDelay
+                            if (tracked.length === 0) {
+                                activationDelayPromise = cancelTimeout(activationDelayPromise);
+                            }
+                        });
+                    };
+                }
+            };
+            self.addPromise = function (promise) {
+                
+//                we cannot assign then function in other var and then add the resolve and reject 
+                var thenFxn = promise && (promise.then || promise.$then || (promise.$promise && promise.$promise.then));                
+                if (!thenFxn) {
+                    throw new Error("progressTracker expects a promise object :: Not found");
+                }
+                var deferred = self.createPromise();
+                //When given promise is done, resolve our created promise
+                //Allow $then for angular-resource objects
+
+                promise.then(function (value) {
+                        deferred.resolve(value);
+                        return value;
+                    }, function (value) {
+                        deferred.reject(value);
+                        return $q.reject(value);
+                    }
+                );
+                return deferred;
+            };
+        };
+    }];
+})
+
+.config(['$httpProvider', function ($httpProvider) {
+    $httpProvider.interceptors.push(['$q', 'progressTracker', function ($q) {
+        return {
+            request: function (config) {
+                if (config.tracker) {
+                    if (!angular.isArray(config.tracker)) {
+                        config.tracker = [config.tracker];
+                    }
+                    config.$promiseTrackerDeferred = config.$promiseTrackerDeferred || [];
+
+                    angular.forEach(config.tracker, function (tracker) {
+                        var deferred = tracker.createPromise();
+                        config.$promiseTrackerDeferred.push(deferred);
+                    });
+                }
+                return $q.when(config);
+            },
+            response: function (response) {
+                if (response.config && response.config.$promiseTrackerDeferred) {
+                    angular.forEach(response.config.$promiseTrackerDeferred, function (deferred) {
+                        deferred.resolve(response);
+                    });
+                }
+                return $q.when(response);
+            },
+            responseError: function (response) {
+                if (response.config && response.config.$promiseTrackerDeferred) {
+                    angular.forEach(response.config.$promiseTrackerDeferred, function (deferred) {
+                        deferred.reject(response);
+                    });
+                }
+                return $q.reject(response);
+            }
+        };
+    }]);
+}])
+
+.directive('b2bClickSpin', ['$timeout', '$parse', '$rootScope', 'progressTracker', function ($timeout, $parse, $rootScope, progressTracker) {
+    return {
+        restrict: 'A',
+        link: function (scope, elm, attrs) {
+            var fn = $parse(attrs.b2bClickSpin);
+            elm.on('click', function (event) {
+                var promise = $timeout(function () {console.log("inside Promise")}, 5000);
+                scope.$apply(function () {
+                    fn(scope, {
+                        $event: event
+                    });
+                });
+                //comment this line if not running unit test
+                $rootScope.loadingTracker = progressTracker({
+                    minDuration: 750
+                });
+                $rootScope.loadingTracker.addPromise(promise);
+                angular.forEach("$routeChangeSuccess $viewContentLoaded $locationChangeSuccess".split(" "), function (event) {
+                    $rootScope.$on(event, function () {
+
+                        $timeout.cancel(promise);
+                    });
+                });
+            });
+        }
+    };
+}])
+
+.directive('b2bProgressTracker', ['progressTrackerConfig', function (ptc) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        template: '<div><div ng-show="loadingTracker.active()" style="width:100%; text-align:center"><i class=\"icon-primary-spinner\"></i></div><div ng-show="loadingTracker.active()" style="width:100%;margin-top:10px; text-align:center">'+ ptc.loadingText+'</div></div>'
+    };
+}])
+
+.directive('b2bLoadButton', ['b2bSpinnerConfig', '$timeout', function (spinnerConfig, $timeout) {
+    var spinButton = function (state, element, data) {
+        
+        var attr = element.html() ? 'html' : 'val';
+        state = state + 'Text';
+        if (state === 'loadingText') {
+            element[attr](data[state]);
+            element.attr("disabled",'disabled');
+            element.addClass('disabled');
+        } else if (state === 'resetText') {
+            element[attr](data[state]);
+            element.removeAttr("disabled");
+            element.removeClass('disabled');
+        }
+    };
+
+    return {
+        restrict: 'A',
+        replace: false,
+        scope: {
+            promise: '=promise',
+            startEvent: '@startEvent',
+            stopEvent: '@stopEvent'
+        },
+        link: function (scope, element, attr) {
+            var validAttr = element.html() ? 'html' : 'val';
+            var data = {
+                loadingText: '',
+                resetText: ''
+            };
+
+            var updateLoadingText = function (val) {
+                var loadingText = val;
+                if (!angular.isDefined(loadingText) || loadingText === "") {
+                    loadingText = spinnerConfig.loadingText;
+                }
+                data.loadingText = validAttr === 'html' ? "<i class=\"icon-primary-spinner small\"></i>" + loadingText : loadingText;
+            };
+            var updateResetText = function (val) {
+                data.resetText = val;
+            };
+
+            attr.$observe('b2bLoadButton', function (val) {
+                updateLoadingText(val);
+            });
+            $timeout(function () {
+                updateResetText(element[validAttr]());
+            }, 500);
+
+            if (!angular.isDefined(scope.startEvent) || scope.startEvent === "") {
+                scope.startEvent = spinnerConfig.startEvent;
+            }
+
+            if (!angular.isDefined(scope.stopEvent) || scope.stopEvent === "") {
+                scope.stopEvent = spinnerConfig.stopEvent;
+            }
+
+            scope.$watch('promise', function () {
+                if (angular.isDefined(scope.promise) && angular.isFunction(scope.promise.then)) {
+                    spinButton('loading', element, data);
+                    scope.promise.then(function () {
+                        spinButton('reset', element, data);
+                    }, function () {
+                        spinButton('reset', element, data);
+                    });
+                }
+            });
+
+            scope.$on(scope.startEvent, function () {
+                spinButton('loading', element, data);
+                scope.$on(scope.stopEvent, function () {
+                    spinButton('reset', element, data);
+                });
+            });
+        }
+    };
+}])
+
+
+;
+ /**
+ * @ngdoc directive
+ * @name Misc.att:messageWrapper
+ * @scope
+ * @param {boolean} trigger - A boolean that triggers directive to switch focus
+ * @param {integer} delay  - Extra delay added to trigger code to allow for DOM to be ready. Default is 10ms.
+ * @param {string} noFocus - Attribute-based API to trigger whether first focusable element receives focus on trigger or whole message (assumes tabindex="-1" set on first child)
+ * @param {string} trapFocus - Attribute-based API to trap focus within the message. This should be enabled by default on all toast messages.
+ * @description
+ *  <file src="src/messageWrapper/docs/readme.md" />
+ * @usage
+ * <b2b-message-wrapper>Code that contains at least one focusable element and will be shown/hidden on some logic. This must have tabindex="-1".</b2b-message-wrapper>
+ *
+ * @example
+ *  <section id="code">   
+ <b>HTML + AngularJS</b>
+ <example module="b2b.att">
+ <file src="src/messageWrapper/docs/demo.html" />
+ <file src="src/messageWrapper/docs/demo.js" />
+ </example>
+ </section>
+ *
+ */
+angular.module('b2b.att.messageWrapper', ['b2b.att.utilities'])
+.directive('b2bMessageWrapper', ['b2bDOMHelper', '$compile', '$timeout', '$log', function(b2bDOMHelper, $compile, $timeout, $log) {
+  return {
+    restrict: 'AE',
+    scope: {
+      trigger: '=',
+      delay: '=?'
+    },
+    transclude: true,
+    replace: true,
+    template: '<div ng-transclude></div>',
+    link: function(scope, elem, attrs) {
+      scope.delay = scope.delay || 10;
+
+      if (attrs.trapFocus != undefined && !elem.children().eq(0).attr('b2b-trap-focus-inside-element')) {
+        // Append b2bTrapFocusInsideElement onto first child and recompile
+        elem.children().eq(0).attr('b2b-trap-focus-inside-element', 'false');
+        elem.children().eq(0).attr('trigger', scope.trigger);
+        $compile(elem.contents())(scope);
+      }
+
+      var firstElement = undefined,
+          launchingElement = undefined;
+      
+      scope.$watch('trigger', function(oldVal, newVal) {
+        if (oldVal === newVal) return;
+        if (!angular.isDefined(launchingElement)) {
+          launchingElement = document.activeElement;
+        }
+        $timeout(function() {
+          if (scope.trigger) {
+
+            if (attrs.noFocus === true || attrs.noFocus === "") {
+              elem.children()[0].focus();
+            } else {
+              firstElement = b2bDOMHelper.firstTabableElement(elem);
+
+              if (angular.isDefined(firstElement)) {
+                firstElement.focus();
+              }
+            }
+            
+          } else {
+            if (angular.isDefined(launchingElement) && launchingElement.nodeName !== 'BODY') {
+              if (launchingElement === document.activeElement) {
+                return;
+              }
+
+              if (b2bDOMHelper.isInDOM(launchingElement) && b2bDOMHelper.isTabable(launchingElement)) {
+                  // At this point, launchingElement is still a valid element, but focus will fail and 
+                  // activeElement will become body, hence we want to apply custom logic and find previousElement
+                  var prevLaunchingElement = launchingElement;
+                  launchingElement.focus();
+
+                  if (document.activeElement !== launchingElement || document.activeElement.nodeName === 'BODY') {
+                    launchingElement = b2bDOMHelper.previousElement(angular.element(prevLaunchingElement), true);
+                    launchingElement.focus();
+                  }
+              } else {
+                launchingElement = b2bDOMHelper.previousElement(launchingElement, true);
+                launchingElement.focus();
+              }
+            }
+          }
+        }, scope.delay); 
+      });
+    }
+  };
+}]);
+/**
+ * @ngdoc directive
+ * @name Messages, modals & alerts.att:modalsAndAlerts
+ *
+ * @description
+ *  <file src="src/modalsAndAlerts/docs/readme.md" />
+ *
+ * @usage
+ *  <button class="btn" b2b-modal="b2bTemplate/modalsAndAlerts/demo_modal.html" modal-ok="ok()" modal-cancel="cancel()">Launch demo modal</button>
+ *
+ * @example
+ *  <section id="code">
+     <example module="b2b.att">
+      <file src="src/modalsAndAlerts/docs/demo.html" />
+      <file src="src/modalsAndAlerts/docs/demo.js" />
+     </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.modalsAndAlerts', ['b2b.att.position', 'b2b.att.transition', 'b2b.att.utilities'])
+
+/**
+ * A helper, internal data structure that acts as a map but also allows getting / removing
+ * elements in the LIFO order
+ */
+.factory('$$stackedMap', function () {
+    return {
+        createNew: function () {
+            var stack = [];
+
+            return {
+                add: function (key, value) {
+                    stack.push({
+                        key: key,
+                        value: value
+                    });
+                },
+                get: function (key) {
+                    for (var i = 0; i < stack.length; i++) {
+                        if (key === stack[i].key) {
+                            return stack[i];
+                        }
+                    }
+                },
+                keys: function () {
+                    var keys = [];
+                    for (var i = 0; i < stack.length; i++) {
+                        keys.push(stack[i].key);
+                    }
+                    return keys;
+                },
+                top: function () {
+                    return stack[stack.length - 1];
+                },
+                remove: function (key) {
+                    var idx = -1;
+                    for (var i = 0; i < stack.length; i++) {
+                        if (key === stack[i].key) {
+                            idx = i;
+                            break;
+                        }
+                    }
+                    return stack.splice(idx, 1)[0];
+                },
+                removeTop: function () {
+                    return stack.splice(stack.length - 1, 1)[0];
+                },
+                length: function () {
+                    return stack.length;
+                }
+            };
+        }
+    };
+}).factory('trapFocusInElement', ['$document', '$isElement', 'DOMHelper', 'keymap', function ($document, $isElement, DOMHelper, keymap) {
+    var elementStack = [];
+    var stackHead = undefined;
+    var firstTabableElement, lastTabableElement;
+
+    var trapKeyboardFocusInFirstElement = function (e) {
+        if (!e.keyCode) {
+            e.keyCode = e.which;
+        }
+
+        if (e.shiftKey === true && e.keyCode === keymap.KEY.TAB) {
+            lastTabableElement[0].focus();
+            e.preventDefault(e);
+            e.stopPropagation(e);
+        }
+
+    };
+
+    var trapKeyboardFocusInLastElement = function (e) {
+        if (!e.keyCode) {
+            e.keyCode = e.which;
+        }
+
+        if (e.shiftKey === false && e.keyCode === keymap.KEY.TAB) {
+            firstTabableElement[0].focus();
+            e.preventDefault(e);
+            e.stopPropagation(e);
+        }
+    };
+    
+    var trapFocusInElement = function (flag, firstTabableElementParam, lastTabableElementParam) {
+        var bodyElements = $document.find('body').children();
+
+        firstTabableElement = firstTabableElementParam ? firstTabableElementParam : angular.element(DOMHelper.firstTabableElement(stackHead));
+        lastTabableElement = lastTabableElementParam ? lastTabableElementParam : angular.element(DOMHelper.lastTabableElement(stackHead));
+
+        if (flag) {
+            for (var i = 0; i < bodyElements.length; i++) {
+                if (bodyElements[i] !== stackHead[0]) {
+                    bodyElements.eq(i).attr('aria-hidden', true);
+                }
+            }
+            firstTabableElement.bind('keydown', trapKeyboardFocusInFirstElement);
+            lastTabableElement.bind('keydown', trapKeyboardFocusInLastElement);
+        } else {
+            for (var j = 0; j < bodyElements.length; j++) {
+                if (bodyElements[j] !== stackHead[0]) {
+                    bodyElements.eq(j).removeAttr('aria-hidden');
+                }
+            }
+            firstTabableElement.unbind('keydown', trapKeyboardFocusInFirstElement);
+            lastTabableElement.unbind('keydown', trapKeyboardFocusInLastElement);
+        }
+    };
+    var toggleTrapFocusInElement = function (flag, element) {
+        if (angular.isDefined(flag) && angular.isDefined(element)) {
+            if (angular.isUndefined(stackHead)) {
+                stackHead = element;
+                trapFocusInElement(flag);
+            } else {
+                if (flag) {
+                    trapFocusInElement(false);
+                    elementStack.push(stackHead);
+                    stackHead = element;
+                    trapFocusInElement(true);
+                } else {
+                    if (stackHead.prop('$$hashKey') === element.prop('$$hashKey')) {
+                        trapFocusInElement(false);
+                        stackHead = elementStack.pop();
+                        if (angular.isDefined(stackHead)) {
+                            trapFocusInElement(true);
+                        }
+                    }
+                }
+            }
+        }else {
+            if (angular.isDefined(stackHead)) {
+                trapFocusInElement(false, firstTabableElement, lastTabableElement);
+                trapFocusInElement(true);
+            }
+        }
+    };
+
+    return toggleTrapFocusInElement;
+}])
+
+/**
+ * A helper directive for the $modal service. It creates a backdrop element.
+ */
+.directive('b2bModalBackdrop', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        templateUrl: 'b2bTemplate/modalsAndAlerts/b2b-backdrop.html',
+        link: function (scope, element, attrs) {
+            scope.close = function (evt) {
+                var modal = $modalStack.getTop();
+                if (modal && modal.value.backdrop && modal.value.backdrop !== 'static') {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    $modalStack.dismiss(modal.key, 'backdrop click');
+                }
+            };
+        }
+    };
+}])
+
+.directive('b2bModalWindow', ['$timeout', 'windowOrientation', '$window', function ($timeout, windowOrientation, $window) {
+    return {
+        restrict: 'EA',
+        scope: {
+            index: '@'
+        },
+        replace: true,
+        transclude: true,
+        templateUrl: 'b2bTemplate/modalsAndAlerts/b2b-window.html',
+        controller: ['$scope', '$element', '$attrs', function (scope, element, attrs) {
+            scope.windowClass = attrs.windowClass || '';
+            scope.sizeClass = attrs.sizeClass || '';
+            scope.isNotifDialog = false;
+
+            this.setTitle = function (title) {
+                scope.title = title;
+            };
+            this.setContent = function (content) {
+                scope.content = content;
+                scope.isNotifDialog = true;
+            };
+            this.isDockedModal = scope.windowClass.indexOf('modal-docked') > -1;
+        }],
+        link: function (scope, element, attrs, ctrl) {
+            if (ctrl.isDockedModal) {
+                scope.isModalLandscape = false;
+
+                var window = angular.element($window);
+                scope.updateCss = function () {
+                    if (windowOrientation.isPotrait()) { // Potrait Mode
+                        scope.isModalLandscape = false;
+                    } else if (windowOrientation.isLandscape()) { // Landscape Mode
+                        scope.isModalLandscape = true;
+                    }
+                };
+
+                $timeout(function () {
+                    scope.updateCss();
+                    scope.$apply();
+                }, 100);
+                window.bind('orientationchange', function () {
+                    scope.updateCss();
+                    scope.$apply();
+                });
+                window.bind('resize', function () {
+                    scope.updateCss();
+                    scope.$apply();
+                });
+            }else {
+                angular.element(element[0].querySelectorAll(".awd-select-list")).css({
+                    "max-height": "200px"
+                });
+            }
+
+            var isIE = /msie|trident/i.test(navigator.userAgent);
+            if (isIE) {
+                if(angular.element(element[0].querySelector('.corner-button button.close')).length > 0){
+                    angular.element(element[0].querySelector('.corner-button button.close')).bind('focus', function () {
+                       angular.element(element[0].querySelector('.b2b-modal-header'))[0].scrollLeft = 0;
+                       angular.element(element[0].querySelector('.b2b-modal-header'))[0].scrollTop = 0;
+                    });
+                }
+            }
+            
+        }
+    };
+}])
+
+.directive('b2bModalTitle', [function () {
+    return {
+        restrict: 'A',
+        require: '^b2bModalWindow',
+        link: function (scope, elem, attr, ctrl) {
+            ctrl.setTitle(attr.id);
+        }
+    };
+}])
+
+.directive('b2bModalContent', [function () {
+    return {
+        restrict: 'A',
+        require: '^b2bModalWindow',
+        link: function (scope, elem, attr, ctrl) {
+            ctrl.setContent(attr.id);
+        }
+    };
+}])
+
+
+.directive('b2bModalBody', ['$timeout', '$position', '$document', '$window', 'windowOrientation', 'b2bAwdBreakpoints', function ($timeout, $position, $document, $window, windowOrientation, b2bAwdBreakpoints) {
+    return {
+        restrict: 'AC',
+        scope: {
+            index: '@'
+        },
+        require: '^b2bModalWindow',
+        link: function (scope, element, attrs, ctrl) {
+            var window = angular.element($window);
+            var body = $document.find('body').eq(0);
+            scope.setModalHeight = function () {
+                var modalHeaderHeight, modalFooterHeight, modalBodyHeight, windowHeight, windowWidth, modalHeight;
+                modalHeaderHeight = 0;
+                modalFooterHeight = 0;
+                windowHeight = $window.innerHeight;
+                windowWidth = $window.innerWidth;
+                body.css({
+                    'height': windowHeight + 'px'
+                });
+
+                if (ctrl.isDockedModal) {
+                    var modalElements = element.parent().children();
+                    for (var i = 0; i < modalElements.length; i++) {
+                        if (modalElements.eq(i).hasClass('b2b-modal-header')) {
+                            modalHeaderHeight = $position.position(modalElements.eq(i)).height;
+                        } else if (modalElements.eq(i).hasClass('b2b-modal-footer')) {
+                            modalFooterHeight = $position.position(modalElements.eq(i)).height;
+                        }
+                    }
+
+                    modalHeight = $position.position(element.parent()).height;
+
+                    modalBodyHeight = modalHeight - (modalHeaderHeight + modalFooterHeight) + 'px';
+
+                    if (windowOrientation.isPotrait()) { // Potrait Mode
+                        element.removeAttr('style').css({
+                            height: modalBodyHeight
+                        });
+                    } else if (windowOrientation.isLandscape() && windowWidth < b2bAwdBreakpoints.breakpoints.mobile.max) { // Landscape Mode Mobile
+                        element.removeAttr('style');
+                    } else if (windowOrientation.isLandscape() && windowWidth >= b2bAwdBreakpoints.breakpoints.mobile.max) { // Landscape Mode Non-Mobile
+                        element.removeAttr('style').css({
+                            height: modalBodyHeight
+                        });
+                    }
+                }
+            };
+
+            $timeout(function () {
+                scope.setModalHeight();
+                scope.$apply();
+            }, 100);
+            window.bind('orientationchange', function () {
+                scope.setModalHeight();
+                scope.$apply();
+            });
+            window.bind('resize', function () {
+                scope.setModalHeight();
+                scope.$apply();
+            });
+        }
+    };
+}])
+
+.directive('b2bModalFooter', ['windowOrientation', '$window', function (windowOrientation, $window) {
+    return {
+        restrict: 'AC',
+        scope: {
+            index: '@'
+        },
+        link: function (scope, element, attrs) {
+
+        }
+    };
+}])
+
+.factory('$modalStack', ['$document', '$compile', '$rootScope', '$$stackedMap', '$log', '$timeout', 'trapFocusInElement', function ($document, $compile, $rootScope, $$stackedMap, $log, $timeout, trapFocusInElement) {
+    var backdropjqLiteEl, backdropDomEl;
+    var backdropScope = $rootScope.$new(true);
+    var body = $document.find('body').eq(0);
+    var html = $document.find('html').eq(0);
+    var openedWindows = $$stackedMap.createNew();
+    var $modalStack = {};
+
+    function backdropIndex() {
+        var topBackdropIndex = -1;
+        var opened = openedWindows.keys();
+        for (var i = 0; i < opened.length; i++) {
+            if (openedWindows.get(opened[i]).value.backdrop) {
+                topBackdropIndex = i;
+            }
+        }
+        return topBackdropIndex;
+    }
+
+    $rootScope.$watch(backdropIndex, function (newBackdropIndex) {
+        backdropScope.index = newBackdropIndex;
+    });
+
+    function removeModalWindow(modalInstance) {
+        //background scroll fix
+        html.removeAttr('style');
+        body.removeAttr('style');
+        body.removeClass('styled-by-modal');
+
+        var modalWindow = openedWindows.get(modalInstance).value;
+        trapFocusInElement(false, modalWindow.modalDomEl);
+
+        //clean up the stack
+        openedWindows.remove(modalInstance);
+
+        //remove window DOM element
+        modalWindow.modalDomEl.remove();
+
+        //remove backdrop if no longer needed
+        if (backdropDomEl && backdropIndex() === -1) {
+            backdropDomEl.remove();
+            backdropDomEl = undefined;
+        }
+
+        //destroy scope
+        modalWindow.modalScope.$destroy();
+    }
+
+    $document.bind('keydown', function (evt) {
+        var modal;
+
+        if (evt.which === 27) {
+            modal = openedWindows.top();
+            if (modal && modal.value.keyboard) {
+                $rootScope.$apply(function () {
+                    $modalStack.dismiss(modal.key);
+                });
+            }
+        }
+    });
+
+    $modalStack.open = function (modalInstance, modal) {
+
+        openedWindows.add(modalInstance, {
+            deferred: modal.deferred,
+            modalScope: modal.scope,
+            backdrop: modal.backdrop,
+            keyboard: modal.keyboard
+        });
+
+        var angularDomEl = angular.element('<div b2b-modal-window></div>');
+        angularDomEl.attr('window-class', modal.windowClass);
+        angularDomEl.attr('size-class', modal.sizeClass);
+        angularDomEl.attr('index', openedWindows.length() - 1);
+        angularDomEl.html(modal.content);
+
+        var modalDomEl = $compile(angularDomEl)(modal.scope);
+        openedWindows.top().value.modalDomEl = modalDomEl;
+        //background page scroll fix
+        html.css({
+            'overflow-y': 'hidden'
+        });
+        body.css({
+            'overflow-y': 'hidden',
+            'width': '100%',
+            'height': window.innerHeight + 'px'
+        });
+        body.addClass('styled-by-modal');
+        body.append(modalDomEl);
+
+        if (backdropIndex() >= 0 && !backdropDomEl) {
+            backdropjqLiteEl = angular.element('<div b2b-modal-backdrop></div>');
+            backdropDomEl = $compile(backdropjqLiteEl)(backdropScope);
+            body.append(backdropDomEl);
+        }
+
+        $timeout(function () {
+
+            if (modal.scope.$$childHead.isNotifDialog) {
+                angular.element(modalDomEl).find('button')[0].focus();
+            } else {
+                angular.element(modalDomEl)[0].focus();
+            }
+            trapFocusInElement(true, angular.element(modalDomEl).eq(0));
+        }, 200);
+    };
+
+    $modalStack.close = function (modalInstance, result) {
+        var modal = openedWindows.get(modalInstance);
+        if (modal) {
+            modal.value.deferred.resolve(result);
+            removeModalWindow(modalInstance);
+        }
+    };
+
+    $modalStack.dismiss = function (modalInstance, reason) {
+        var modalWindow = openedWindows.get(modalInstance).value;
+        if (modalWindow) {
+            modalWindow.deferred.reject(reason);
+            removeModalWindow(modalInstance);
+        }
+    };
+
+    $modalStack.getTop = function () {
+        return openedWindows.top();
+    };
+
+    return $modalStack;
+}])
+
+.provider('$modal', function () {
+    var $modalProvider = {
+        options: {
+            backdrop: true, //can be also false or 'static'
+            keyboard: true
+        },
+        $get: ['$injector', '$rootScope', '$q', '$http', '$templateCache', '$controller', '$modalStack', function ($injector, $rootScope, $q, $http, $templateCache, $controller, $modalStack) {
+            var $modal = {};
+
+            function getTemplatePromise(options) {
+                return options.template ? $q.when(options.template) :
+                    $http.get(options.templateUrl, {
+                        cache: $templateCache
+                    }).then(function (result) {
+                        return result.data;
+                    });
+            }
+
+            function getResolvePromises(resolves) {
+                var promisesArr = [];
+                angular.forEach(resolves, function (value, key) {
+                    if (angular.isFunction(value) || angular.isArray(value)) {
+                        promisesArr.push($q.when($injector.invoke(value)));
+                    }
+                });
+                return promisesArr;
+            }
+
+            $modal.open = function (modalOptions) {
+
+                var modalResultDeferred = $q.defer();
+                var modalOpenedDeferred = $q.defer();
+                //prepare an instance of a modal to be injected into controllers and returned to a caller
+                var modalInstance = {
+                    result: modalResultDeferred.promise,
+                    opened: modalOpenedDeferred.promise,
+                    close: function (result) {
+                        $modalStack.close(modalInstance, result);
+                    },
+                    dismiss: function (reason) {
+                        $modalStack.dismiss(modalInstance, reason);
+                    }
+                };
+
+                //merge and clean up options
+                modalOptions = angular.extend({}, $modalProvider.options, modalOptions);
+                modalOptions.resolve = modalOptions.resolve || {};
+
+                //verify options
+                if (!modalOptions.template && !modalOptions.templateUrl) {
+                    throw new Error('One of template or templateUrl options is required.');
+                }
+
+                var templateAndResolvePromise =
+                    $q.all([getTemplatePromise(modalOptions)].concat(getResolvePromises(modalOptions.resolve)));
+
+
+                templateAndResolvePromise.then(function resolveSuccess(tplAndVars) {
+
+                    var modalScope = (modalOptions.scope || $rootScope).$new();
+                    modalScope.$close = modalInstance.close;
+                    modalScope.$dismiss = modalInstance.dismiss;
+
+                    var ctrlInstance, ctrlLocals = {};
+                    var resolveIter = 1;
+
+                    //controllers
+                    if (modalOptions.controller) {
+                        ctrlLocals.$scope = modalScope;
+                        ctrlLocals.$modalInstance = modalInstance;
+                        angular.forEach(modalOptions.resolve, function (value, key) {
+                            ctrlLocals[key] = tplAndVars[resolveIter++];
+                        });
+
+                        ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
+                    }
+
+                    $modalStack.open(modalInstance, {
+                        scope: modalScope,
+                        deferred: modalResultDeferred,
+                        content: tplAndVars[0],
+                        backdrop: modalOptions.backdrop,
+                        keyboard: modalOptions.keyboard,
+                        windowClass: modalOptions.windowClass,
+                        sizeClass: modalOptions.sizeClass
+                    });
+
+                }, function resolveError(reason) {
+                    modalResultDeferred.reject(reason);
+                });
+
+                templateAndResolvePromise.then(function () {
+                    modalOpenedDeferred.resolve(true);
+                }, function () {
+                    modalOpenedDeferred.reject(false);
+                });
+
+                return modalInstance;
+            };
+
+            return $modal;
+        }]
+    };
+
+    return $modalProvider;
+})
+
+.directive("b2bModal", ["$modal", "$log", '$scrollTo', function ($modal, $log, $scrollTo) {
+    return {
+        restrict: 'A',
+        scope: {
+            b2bModal: '@',
+            modalController: '@',
+            modalOk: '&',
+            modalCancel: '&',
+            windowClass: '@',
+            sizeClass: '@'
+        },
+        link: function (scope, elm, attr) {
+            elm.bind('click', function (ev) {
+                var currentPosition = ev.pageY - ev.clientY;
+                ev.preventDefault();
+                if (angular.isDefined(elm.attr("href")) && elm.attr("href") !== "") {
+                    scope.b2bModal = elm.attr("href");
+                }
+                $modal.open({
+                    templateUrl: scope.b2bModal,
+                    controller: scope.modalController,
+                    windowClass: scope.windowClass,
+                    sizeClass: scope.sizeClass
+                }).result.then(function (value) {
+                    scope.modalOk({
+                        value: value
+                    });
+                    elm[0].focus();
+                }, function (value) {
+                    scope.modalCancel({
+                        value: value
+                    });
+                    elm[0].focus();
+                });
+            });
+        }
+    };
+}])
+
+.directive("utilityFilter", ["$modal", "$log", '$scrollTo', function ($modal, $log, $scrollTo) {
+    return {
+        restrict: 'EA',
+        scope: {
+            utilityFilter: '@'
+        },
+        require: 'ngModel',
+        templateUrl: 'b2bTemplate/modal/u-filter.html',
+        link: function (scope, element, attribute, ctrl) {
+            //controller to be passed to $modal service
+            scope.options = angular.copy(scope.$parent.$eval(attribute.ngModel));
+            scope.$parent.$watch(attribute.ngModel, function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    scope.options = newVal;
+                }
+            });
+            var modalCtrl = function ($scope, options) {
+                $scope.options = angular.copy(options);
+            };
+
+            if (angular.isDefined(scope.utilityFilter)) {
+                scope.templateUrl = scope.utilityFilter;
+            } else {
+                scope.templateUrl = 'b2bTemplate/modal/u-filter-window.html';
+            }
+            element.bind('click', function (ev) {
+                var currentPosition = ev.pageY - ev.clientY;
+                $modal.open({
+                    templateUrl: scope.templateUrl,
+                    controller: modalCtrl,
+                    resolve: {
+                        options: function () {
+                            return scope.options;
+                        }
+                    }
+                }).result.then(function (value) {
+                    ctrl.$setViewValue(value);
+                    element[0].focus();
+                    $scrollTo(0, currentPosition, 0);
+                }, function () {
+                    element[0].focus();
+                    $scrollTo(0, currentPosition, 0);
+                });
+            });
+        }
+    };
+}]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:monthSelector
+ *
+ * @description
+ *  <file src="src/monthSelector/docs/readme.md" />
+ *
+ * @usage
+ * <div b2b-monthpicker ng-model="dt" min="minDate" max="maxDate" mode="monthpicker"></div>
+    
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/monthSelector/docs/demo.html" />
+            <file src="src/monthSelector/docs/demo.js" />
+        </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.monthSelector', ['b2b.att.position', 'b2b.att.utilities'])
+
+.constant('b2bMonthpickerConfig', {
+    dateFormat: 'MM/dd/yyyy',
+    dayFormat: 'd',
+    monthFormat: 'MMMM',
+    yearFormat: 'yyyy',
+    dayHeaderFormat: 'EEEE',
+    dayTitleFormat: 'MMMM yyyy',
+    disableWeekend: false,
+    disableSunday: false,
+    disableDates: null,
+    onSelectClose: null,
+    startingDay: 0,
+    minDate: null,
+    maxDate: null,
+    dueDate: null,
+    fromDate: null,
+    legendIcon: null,
+    legendMessage: null,
+    calendarDisabled: false,
+    collapseWait: 0,
+    orientation: 'left',
+    inline: false,
+    mode:0,
+    helperText: 'The date you selected is $date. Double tap to open calendar. Select a date to close the calendar.',
+    descriptionText: 'Use tab to navigate between previous button, next button and month. Use arrow keys to navigate between months. Use space or enter to select a month.',
+    MonthpickerEvalAttributes: ['dateFormat', 'dayFormat', 'monthFormat', 'yearFormat', 'dayHeaderFormat', 'dayTitleFormat', 'disableWeekend', 'disableSunday', 'startingDay', 'collapseWait', 'orientation','mode','id'],
+    MonthpickerWatchAttributes: ['min', 'max', 'due', 'from', 'legendIcon', 'legendMessage', 'ngDisabled'],
+    MonthpickerFunctionAttributes: ['disableDates', 'onSelectClose']
+})
+
+.factory('b2bMonthpickerService', ['b2bMonthpickerConfig', 'dateFilter', function (b2bMonthpickerConfig, dateFilter) {
+    var setAttributes = function (attr, elem) {
+        if (angular.isDefined(attr) && attr !== null && angular.isDefined(elem) && elem !== null) {
+            var attributes = b2bMonthpickerConfig.MonthpickerEvalAttributes.concat(b2bMonthpickerConfig.MonthpickerWatchAttributes, b2bMonthpickerConfig.MonthpickerFunctionAttributes);
+            for (var key in attr) {
+                var val = attr[key];
+                if (attributes.indexOf(key) !== -1 && angular.isDefined(val)) {
+                    elem.attr(key.toSnakeCase(), key);
+                }
+            }
+        }
+    };
+
+    var bindScope = function (attr, scope) {
+        if (angular.isDefined(attr) && attr !== null && angular.isDefined(scope) && scope !== null) {
+            var evalFunction = function (key, val) {
+                scope[key] = scope.$parent.$eval(val);
+            };
+
+            var watchFunction = function (key, val) {
+                scope.$parent.$watch(val, function (value) {
+                    scope[key] = value;
+                });
+                scope.$watch(key, function (value) {
+                    scope.$parent[val] = value;
+                });
+            };
+
+            var evalAttributes = b2bMonthpickerConfig.MonthpickerEvalAttributes;
+            var watchAttributes = b2bMonthpickerConfig.MonthpickerWatchAttributes;
+            for (var key in attr) {
+                var val = attr[key];
+                if (evalAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {
+                    evalFunction(key, val);
+                } else if (watchAttributes.indexOf(key) !== -1 && angular.isDefined(val)) {
+                    watchFunction(key, val);
+                }
+            }
+        }
+    };
+
+    return {
+        setAttributes: setAttributes,
+        bindScope: bindScope
+    };
+}])
+
+.controller('b2bMonthpickerController', ['$scope', '$attrs', 'dateFilter', '$element', '$position', 'b2bMonthpickerConfig', function ($scope, $attrs, dateFilter, $element, $position, dtConfig) {
+    var format = {
+            date: getValue($attrs.dateFormat, dtConfig.dateFormat),
+            day: getValue($attrs.dayFormat, dtConfig.dayFormat),
+            month: getValue($attrs.monthFormat, dtConfig.monthFormat),
+            year: getValue($attrs.yearFormat, dtConfig.yearFormat),
+            dayHeader: getValue($attrs.dayHeaderFormat, dtConfig.dayHeaderFormat),
+            dayTitle: getValue($attrs.dayTitleFormat, dtConfig.dayTitleFormat),
+            disableWeekend: getValue($attrs.disableWeekend, dtConfig.disableWeekend),
+            disableSunday: getValue($attrs.disableSunday, dtConfig.disableSunday),
+            disableDates: getValue($attrs.disableDates, dtConfig.disableDates)
+        },
+        startingDay = getValue($attrs.startingDay, dtConfig.startingDay);
+
+    $scope.minDate = dtConfig.minDate ? $scope.resetTime(dtConfig.minDate) : null;
+    $scope.maxDate = dtConfig.maxDate ? $scope.resetTime(dtConfig.maxDate) : null;
+    $scope.dueDate = dtConfig.dueDate ? $scope.resetTime(dtConfig.dueDate) : null;
+    $scope.fromDate = dtConfig.fromDate ? $scope.resetTime(dtConfig.fromDate) : null;
+    $scope.legendIcon = dtConfig.legendIcon ? dtConfig.legendIcon : null;
+    $scope.legendMessage = dtConfig.legendMessage ? dtConfig.legendMessage : null;
+    $scope.ngDisabled = dtConfig.calendarDisabled ? dtConfig.calendarDisabled : null;
+    $scope.collapseWait = getValue($attrs.collapseWait, dtConfig.collapseWait);
+    $scope.orientation = getValue($attrs.orientation, dtConfig.orientation);
+    $scope.onSelectClose = getValue($attrs.onSelectClose, dtConfig.onSelectClose);
+    $scope.mode = getValue($attrs.mode, dtConfig.mode);
+    
+    $scope.inline = $attrs.inline === 'true' ? true : dtConfig.inline;
+
+    function getValue(value, defaultValue) {
+        return angular.isDefined(value) ? $scope.$parent.$eval(value) : defaultValue;
+    }
+
+    function getDaysInMonth(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+
+    function getDates(startDate, n) {
+        var dates = new Array(n);
+        var current = startDate,
+            i = 0;
+        while (i < n) {
+            dates[i++] = new Date(current);
+            current.setDate(current.getDate() + 1);
+        }
+        return dates;
+    }
+
+    this.updatePosition = function (b2bMonthpickerPopupTemplate) {
+        $scope.position = $position.offset($element);
+        if($element.find('input').length > 0 ){
+            $scope.position.top += $element.find('input').prop('offsetHeight');
+        }else{
+            $scope.position.top += $element.find('a').prop('offsetHeight');
+        }
+        
+        if ($scope.orientation === 'right') {
+            $scope.position.left -= (((b2bMonthpickerPopupTemplate && b2bMonthpickerPopupTemplate.prop('offsetWidth')) || 290) - $element.find('input').prop('offsetWidth'));
+        }
+    };
+
+    function isSelected(dt) { 
+        if (dt && angular.isDate($scope.currentDate) && compare(dt, $scope.currentDate) === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    function isFromDate(dt) {
+        if (dt && angular.isDate($scope.fromDate) && compare(dt, $scope.fromDate) === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    function isDateRange(dt) {
+        if (dt && $scope.fromDate && angular.isDate($scope.currentDate) && (compare(dt, $scope.fromDate) >= 0) && (compare(dt, $scope.currentDate) <= 0)) {
+            return true;
+        } else if (dt && $scope.fromDate && compare(dt, $scope.fromDate) === 0) {
+            return true;
+        }
+        return false;
+    }
+
+    function isOld(date, currentMonthDate) {
+        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() < new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function isNew(date, currentMonthDate) {
+        if (date && currentMonthDate && (new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0).getTime() > new Date(currentMonthDate.getFullYear(), currentMonthDate.getMonth(), 1, 0, 0, 0).getTime())) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function isPastDue(dt) {
+        if ($scope.dueDate) {
+            return (dt > $scope.dueDate);
+        }
+        return false;
+    }
+
+    function isDueDate(dt) {
+        if ($scope.dueDate) {
+            return (dt.getTime() === $scope.dueDate.getTime());
+        }
+        return false;
+    }
+
+    var isDisabled = function (date, currentMonthDate) {
+        if ($attrs.from && !angular.isDate($scope.fromDate)) {
+            return true;
+        }
+        if (format.disableWeekend === true && (dateFilter(date, format.dayHeader) === "Saturday" || dateFilter(date, format.dayHeader) === "Sunday")) {
+            return true;
+        }
+        if (format.disableSunday === true && (dateFilter(date, format.dayHeader) === "Sunday")) {
+            return true;
+        }
+        if (isOld(date, currentMonthDate) || isNew(date, currentMonthDate)) {
+            return true;
+        }
+        return (($scope.minDate && compare(date, $scope.minDate) < 0) || ($scope.maxDate && compare(date, $scope.maxDate) > 0) || (format.disableDates && format.disableDates({
+            date: date
+        })));
+    };
+    
+    var isDisabledMonth = function (date, currentMonthDate) {
+        if ($attrs.from && !angular.isDate($scope.fromDate)) {
+            return true;
+        }
+        if (format.disableWeekend === true && (dateFilter(date, format.dayHeader) === "Saturday" || dateFilter(date, format.dayHeader) === "Sunday")) {
+            return true;
+        }
+        if (format.disableSunday === true && (dateFilter(date, format.dayHeader) === "Sunday")) {
+            return true;
+        }
+        return (($scope.minDate && compare(date, $scope.minDate) < 0) || ($scope.maxDate && compare(date, $scope.maxDate) > 0) || (format.disableDates && format.disableDates({
+            date: date
+        })));
+    };    
+         
+    var compare = function (date1, date2) {
+        return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+    };
+
+    function isMinDateAvailable(startDate, endDate) {
+        if (($scope.minDate && $scope.minDate.getTime() >= startDate.getTime()) && ($scope.minDate.getTime() <= endDate.getTime())) {
+            $scope.disablePrev = true;
+            $scope.visibilityPrev = "hidden";
+        } else {
+            $scope.disablePrev = false;
+            $scope.visibilityPrev = "visible";
+        }
+    }
+    
+    function isMaxDateAvailable(startDate, endDate) {
+        if (($scope.maxDate && $scope.maxDate.getTime() >= startDate.getTime()) && ($scope.maxDate.getTime() <= endDate.getTime())) {
+            $scope.disableNext = true;
+            $scope.visibilityNext = "hidden";
+        } else {
+            $scope.disableNext = false;
+            $scope.visibilityNext = "visible";
+        }
+    }    
+    
+    function isYearInRange(currentYear) {
+            
+        if ($scope.minDate && currentYear === $scope.minDate.getFullYear()) {
+            $scope.disablePrev = true;
+            $scope.visibilityPrev = "hidden";
+        } else {
+            $scope.disablePrev = false;
+            $scope.visibilityPrev = "visible";
+        }
+        
+        if ($scope.maxDate && currentYear === $scope.maxDate.getFullYear()) {
+            $scope.disableNext = true;
+            $scope.visibilityNext = "hidden";
+        } else {
+            $scope.disableNext = false;
+            $scope.visibilityNext = "visible";
+        }
+        
+    }    
+
+    this.focusNextPrev = function(b2bMonthpickerPopupTemplate,init){
+        if(init){
+            if (!$scope.disablePrev){
+                b2bMonthpickerPopupTemplate[0].querySelector('th.prev').focus();
+            }else if (!$scope.disableNext){
+                b2bMonthpickerPopupTemplate[0].querySelector('th.next').focus();
+            }else{
+                b2bMonthpickerPopupTemplate[0].querySelector('th.b2b-monthSelector-label').focus();
+            }
+        }else{
+            if ($scope.disableNext || $scope.disablePrev){
+                b2bMonthpickerPopupTemplate[0].querySelector('th.b2b-monthSelector-label').focus();
+            }       
+        }    
+    };
+
+    function getLabel(label) {
+        if (label) {
+            var labelObj = {
+                pre: label.substr(0, 1).toUpperCase(),
+                post: label
+            };
+            return labelObj;
+        }
+        return;
+    }
+
+    function makeDate(date, dayFormat, dayHeaderFormat, isSelected, isFromDate, isDateRange, isOld, isNew, isDisabled, dueDate, pastDue) {
+        return {
+            date: date,
+            label: dateFilter(date, dayFormat),
+            header: dateFilter(date, dayHeaderFormat),
+            selected: !!isSelected,
+            fromDate: !!isFromDate,
+            dateRange: !!isDateRange,
+            oldMonth: !!isOld,
+            nextMonth: !!isNew,
+            disabled: !!isDisabled,
+            dueDate: !!dueDate,
+            pastDue: !!pastDue,
+            focusable: !((isDisabled && !(isSelected || isDateRange)) || (isOld || isNew))
+        };
+    }
+    
+    this.modes = [
+        {
+            name: 'day',
+            getVisibleDates: function (date) {
+                var year = date.getFullYear(),
+                    month = date.getMonth(),
+                    firstDayOfMonth = new Date(year, month, 1),
+                    lastDayOfMonth = new Date(year, month + 1, 0);
+                var difference = startingDay - firstDayOfMonth.getDay(),
+                    numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference,
+                    firstDate = new Date(firstDayOfMonth),
+                    numDates = 0;
+
+                if (numDisplayedFromPreviousMonth > 0) {
+                    firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+                    numDates += numDisplayedFromPreviousMonth; // Previous
+                }
+                numDates += getDaysInMonth(year, month + 1); // Current
+                numDates += (7 - numDates % 7) % 7; // Next
+
+                var days = getDates(firstDate, numDates),
+                    labels = new Array(7);
+                for (var i = 0; i < numDates; i++) {
+                    var dt = new Date(days[i]);
+                    days[i] = makeDate(dt,
+                        format.day,
+                        format.dayHeader,
+                        isSelected(dt),
+                        isFromDate(dt),
+                        isDateRange(dt),
+                        isOld(dt, date),
+                        isNew(dt, date),
+                        isDisabled(dt, date),
+                        isDueDate(dt),
+                        isPastDue(dt));
+                }
+                for (var j = 0; j < 7; j++) {
+                    labels[j] = getLabel(dateFilter(days[j].date, format.dayHeader));
+                }
+                isMinDateAvailable(firstDayOfMonth, lastDayOfMonth);
+                isMaxDateAvailable(firstDayOfMonth, lastDayOfMonth);
+                return {
+                    objects: days,
+                    title: dateFilter(date, format.dayTitle),
+                    labels: labels
+                };
+            },
+            split: 7,
+            step: {
+                months: 1
+            }
+        },
+        {
+            name: 'month',
+            getVisibleDates: function(date) {
+                var months = [], 
+                    labels = [], 
+                    year = date.getFullYear();
+                    for (var i = 0; i < 12; i++) {
+                        var dt = new Date(year,i,1);                
+                        months[i] = makeDate(dt,
+                                    format.month,
+                                    format.dayHeader,
+                                    isSelected(dt), 
+                                    isFromDate(dt),
+                                    isDateRange(dt),
+                                    false,
+                                    false,
+                                    isDisabledMonth(dt, date),
+                                    isDueDate(dt),                                       
+                                    isPastDue(dt));                                                                                                                                                         
+                    }
+                isYearInRange(year);  
+                return {objects: months, title: dateFilter(date, format.year), labels: labels};
+            },
+            split:4,
+            step: {years: 1}
+        }
+    ];
+}])
+
+.directive('b2bMonthpickerPopup', ['$parse', '$log', '$timeout', '$document', '$documentBind', '$isElement', '$templateCache', '$compile','$interval', 'trapFocusInElement', 'keymap', function ($parse, $log, $timeout, $document, $documentBind, $isElement, $templateCache, $compile, $interval,trapFocusInElement, keymap) {
+    return {
+        restrict: 'EA',
+        scope: {
+          trigger: '='
+        },
+        replace: true,
+        transclude: true,
+        templateUrl: function (elem, attr) {
+            if (attr.inline === 'true') {
+                return 'b2bTemplate/monthSelector/monthSelector-popup.html';
+            }else if (attr.link === 'true') {
+                return 'b2bTemplate/monthSelector/monthSelectorLink.html';
+            }else {
+                return 'b2bTemplate/monthSelector/monthSelector.html';
+            }
+        },
+        scope: {},
+        require: ['b2bMonthpickerPopup', 'ngModel', '?^b2bMonthpickerGroup'],
+        controller: 'b2bMonthpickerController',
+        link: function (scope, element, attrs, ctrls) {
+            var MonthpickerCtrl = ctrls[0],
+                ngModel = ctrls[1],
+                b2bMonthpickerGroupCtrl = ctrls[2];
+            var b2bMonthpickerPopupTemplate;
+
+            if (!ngModel) {
+                $log.error("ng-model is required.");
+                return; // do nothing if no ng-model
+            }
+
+            // Configuration parameters
+            var mode = scope.mode,
+                selected;
+            scope.isOpen = false;
+
+            scope.headers = [];
+            scope.footers = [];
+            scope.triggerInterval=undefined;
+
+
+            if (b2bMonthpickerGroupCtrl) {
+                b2bMonthpickerGroupCtrl.registerMonthpickerScope(scope);
+            }
+
+            element.bind('keydown', function (ev) {                   
+                if (!ev.keyCode) {
+                    if (ev.which) {
+                        ev.keyCode = ev.which;
+                    } else if (ev.charCode) {
+                        ev.keyCode = ev.charCode;
+                    }
+                }                                
+                if(ev.keyCode === keymap.KEY.ESC)
+                {
+                    scope.isOpen = false;
+                    toggleCalendar(scope.isOpen);
+                    scope.$apply();
+                }
+            });
+            
+            element.find('button').bind('click', function () {
+                onClicked();                
+            });
+
+            element.find('a').bind('click', function () {
+                onClicked();                
+            });
+
+            
+            element.find('input').bind('click', function () {
+                onClicked();
+            });
+
+            var onClicked = function() {        
+                if (!scope.ngDisabled) {
+                    scope.isOpen = !scope.isOpen;
+                    toggleCalendar(scope.isOpen);                    
+                    MonthpickerCtrl.updatePosition(b2bMonthpickerPopupTemplate);
+                    scope.$apply();
+                }
+            };
+        
+            var toggleCalendar = function (flag) {
+                if (!scope.inline) {
+                    if (flag) {
+                        b2bMonthpickerPopupTemplate = angular.element($templateCache.get('b2bTemplate/monthSelector/monthSelector-popup.html'));
+                        b2bMonthpickerPopupTemplate.attr('b2b-trap-focus-inside-element', 'false');
+                        b2bMonthpickerPopupTemplate.attr('trigger', 'true');
+                        b2bMonthpickerPopupTemplate = $compile(b2bMonthpickerPopupTemplate)(scope);
+                        $document.find('body').append(b2bMonthpickerPopupTemplate);
+                        b2bMonthpickerPopupTemplate.bind('keydown', escPress);
+                        $timeout(function () {
+                            scope.getFocus = true;
+                            scope.trigger=0;
+                            scope.$apply();
+                            $timeout(function () {
+                                scope.getFocus = false;
+                                scope.$apply();
+                                MonthpickerCtrl.focusNextPrev(b2bMonthpickerPopupTemplate,true);
+                            }, 100);
+                        });
+                        scope.triggerInterval = $interval(function () {
+                            //This value is updated to trigger init() function of directive on year change.
+                            scope.trigger=(scope.trigger === 0 ? 1 : 0);
+                        }, 200);
+
+                    } else {
+                        b2bMonthpickerPopupTemplate.unbind('keydown', escPress);
+                        if(scope.triggerInterval)
+                        {
+                            $interval.cancel(scope.triggerInterval);
+                            scope.triggerInterval=undefined;
+                        }
+                        b2bMonthpickerPopupTemplate.remove();
+                        if(element.find('button').length > 0){
+                            element.find('button')[0].focus();
+                        }else{
+                            element.find('a')[0].focus();
+                        }
+                        
+                        scope.getFocus = false;
+                    }
+                }
+            };
+
+            var outsideClick = function (e) {
+                var isElement = $isElement(angular.element(e.target), element, $document);
+                var isb2bMonthpickerPopupTemplate = $isElement(angular.element(e.target), b2bMonthpickerPopupTemplate, $document);
+                if (!(isElement || isb2bMonthpickerPopupTemplate)) {
+                    scope.isOpen = false;
+                    toggleCalendar(scope.isOpen);
+                    scope.$apply();
+                }
+            };
+
+            var escPress = function (ev) {
+                if (!ev.keyCode) {
+                    if (ev.which) {
+                        ev.keyCode = ev.which;
+                    } else if (ev.charCode) {
+                        ev.keyCode = ev.charCode;
+                    }
+                }
+                if (ev.keyCode) {
+                    if (ev.keyCode === keymap.KEY.ESC) {
+                        scope.isOpen = false;
+                        toggleCalendar(scope.isOpen);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode === 33) {
+                        !scope.disablePrev && scope.move(-1);
+                        $timeout(function () {
+                            scope.getFocus = true;
+                            scope.$apply();
+                            $timeout(function () {
+                                scope.getFocus = false;
+                                scope.$apply();
+                            }, 100);
+                        });
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode === 34) {
+                        !scope.disableNext && scope.move(1);
+                        $timeout(function () {
+                            scope.getFocus = true;
+                            scope.$apply();
+                            $timeout(function () {
+                                scope.getFocus = false;
+                                scope.$apply();
+                            }, 100);
+                        });
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    }
+                    scope.$apply();
+                }
+            };              
+                    
+            $documentBind.click('isOpen', outsideClick, scope);
+
+            scope.$on('$destroy', function () {
+                if (scope.isOpen) {
+                    scope.isOpen = false;
+                    toggleCalendar(scope.isOpen);
+                }
+            });
+
+            scope.resetTime = function (date) {
+                if (typeof date === 'string') {
+                    date = date + 'T12:00:00';
+                }
+                var dt;
+                if (!isNaN(new Date(date))) {
+                    dt = new Date(date);
+                    if(scope.mode === 1){
+                        dt = new Date(dt.getFullYear(), dt.getMonth());
+                    }else{
+                        dt = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());
+                    }                                                            
+                } else {
+                    return null;
+                }
+                return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());
+            };
+            
+            if (attrs.min) {
+                scope.$parent.$watch($parse(attrs.min), function (value) {
+                    scope.minDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+            if (attrs.max) {
+                scope.$parent.$watch($parse(attrs.max), function (value) {
+                    scope.maxDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+            if (attrs.due) {
+                scope.$parent.$watch($parse(attrs.due), function (value) {
+                    scope.dueDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+            if (attrs.from) {
+                scope.$parent.$watch($parse(attrs.from), function (value) {
+                    scope.fromDate = value ? scope.resetTime(value) : null;
+                    refill();
+                });
+            }
+
+            if (attrs.legendIcon) {
+                scope.$parent.$watch(attrs.legendIcon, function (value) {
+                    scope.legendIcon = value ? value : null;
+                    refill();
+                });
+            }
+            if (attrs.legendMessage) {
+                scope.$parent.$watch(attrs.legendMessage, function (value) {
+                    scope.legendMessage = value ? value : null;
+                    refill();
+                });
+            }
+            if (attrs.ngDisabled) {
+                scope.$parent.$watch(attrs.ngDisabled, function (value) {
+                    scope.ngDisabled = value ? value : null;
+                });
+            }      
+            
+
+            // Split array into smaller arrays
+            function split(arr, size) {
+                var arrays = [];
+                while (arr.length > 0) {
+                    arrays.push(arr.splice(0, size));
+                }
+                return arrays;
+            }
+            
+            var moveMonth = function(selectedDate, direction) {
+                var step = MonthpickerCtrl.modes[scope.mode].step;
+                selectedDate.setDate(1);
+                selectedDate.setMonth(selectedDate.getMonth() + direction * (step.months || 0));
+                selectedDate.setFullYear(selectedDate.getFullYear() + direction * (step.years || 0));
+
+                return selectedDate;
+            };            
+
+            function refill(date) {
+                if (angular.isDate(date) && !isNaN(date)) {
+                    selected = new Date(date);
+                } else {
+                    if (!selected) {
+                        selected = new Date();
+                    }
+                }
+
+                if (selected) {                    
+                    var selectedCalendar;
+                    if(scope.mode === 1){
+                        if(!angular.isDate(selected))
+                           {                           
+                                selected = new Date();
+                           }
+                        selectedCalendar = moveMonth(angular.copy(selected), -1);
+                    } else {
+                        selectedCalendar = angular.copy(selected);
+                    }
+                    
+                    var currentMode = MonthpickerCtrl.modes[mode],
+                        data = currentMode.getVisibleDates(selected);
+
+                    scope.rows = split(data.objects, currentMode.split);
+            
+                    var flag=false;
+                    var startFlag=false;
+                    var firstSelected = false;
+                    for(var i=0; i<scope.rows.length; i++)
+                    {
+                        for(var j=0; j<scope.rows[i].length; j++)
+                        {
+                            if(!scope.rows[i][j].disabled && !firstSelected)
+                            {
+                                firstSelected=true;
+                                var firstDay = scope.rows[i][j];
+                            }
+
+                            if(scope.rows[i][j].selected)
+                            {
+                                flag=true;
+                                break;
+                            }                  
+                        }
+                        if(flag)
+                        {
+                            break;
+                        }
+                    }
+                    if(!flag && firstSelected)
+                    {
+                       firstDay.firstFocus=true;
+                    }
+
+                    scope.labels = data.labels || [];
+                    scope.title = data.title;                    
+                }
+            }
+
+            scope.select = function (date,$event) {
+                var dt = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+                scope.currentDate = dt;
+                if (!scope.onSelectClose || (scope.onSelectClose && scope.onSelectClose({
+                        date: dt
+                    }) !== false)) {
+                    if (angular.isNumber(scope.collapseWait)) {
+                        $timeout(function () {
+                            scope.isOpen = false;
+                            toggleCalendar(scope.isOpen);
+                        }, scope.collapseWait);
+                    } else {
+                        scope.isOpen = false;
+                        toggleCalendar(scope.isOpen);
+                    }
+                }
+            };
+
+            scope.move = function (direction,$event) {
+                var step = MonthpickerCtrl.modes[mode].step;
+                selected.setDate(1);
+                selected.setMonth(selected.getMonth() + direction * (step.months || 0));
+                selected.setFullYear(selected.getFullYear() + direction * (step.years || 0));
+                refill();
+                scope.getFocus = true;
+                $timeout(function () {
+                    if (attrs.inline === 'true') {
+                        MonthpickerCtrl.focusNextPrev(element,false); 
+                    }else{
+                        MonthpickerCtrl.focusNextPrev(b2bMonthpickerPopupTemplate,false);
+                    }
+                },100);
+                $event.preventDefault();
+                $event.stopPropagation();
+            };
+
+            scope.$watch('currentDate', function (value) {
+                if (angular.isDefined(value) && value !== null) {
+                    refill(value);
+                } else {
+                    refill();
+                }
+                ngModel.$setViewValue(value);
+            });
+
+            ngModel.$render = function () {
+                scope.currentDate = ngModel.$viewValue;
+            };
+
+            var stringToDate = function (value) {
+                if (!isNaN(new Date(value))) {
+                    value = new Date(value);
+                }
+                return value;
+            };
+            ngModel.$formatters.unshift(stringToDate);
+        }
+    };
+}])
+
+.directive('b2bMonthpicker', ['$compile', '$log', 'b2bMonthpickerConfig', 'b2bMonthpickerService', function ($compile, $log, b2bMonthpickerConfig, b2bMonthpickerService) {
+    return {
+        restrict: 'A',
+        scope: {
+            disableDates: '&',
+            onSelectClose: '&'
+        },
+        require: 'ngModel',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            var dateFormatString = angular.isDefined(attr.dateFormat) ? scope.$parent.$eval(attr.dateFormat) : b2bMonthpickerConfig.dateFormat;
+            var helperText = angular.isDefined(attr.helperText) ? scope.$parent.$eval(attr.helperText) : b2bMonthpickerConfig.helperText; 
+            helperText = helperText.replace('$date', '{{dt | date : \'' + dateFormatString + '\'}}');
+
+            var descriptionText = angular.isDefined(attr.descriptionText) ? scope.$parent.$eval(attr.descriptionText) : b2bMonthpickerConfig.descriptionText;  
+
+
+            var inline = false;
+            if (elem.prop('nodeName') !== 'INPUT' && elem.prop('nodeName') !== 'A') {
+                inline = true;
+            }
+
+            var selectedDateMessage = "";
+            
+            if (elem.prop('nodeName') !== 'A'){
+                selectedDateMessage = '<button type="button" class="span12 faux-input" ng-disabled="ngDisabled" aria-describedby="monthpicker-description'+scope.$id+'"><span class="hidden-spoken" aria-live="assertive" aria-atomic="false">' + helperText + '</span></button>';    
+                elem.attr('tabindex', '-1'); 
+                elem.attr('aria-hidden', 'true');  
+                elem.attr('readonly', 'true'); 
+            }else{
+                selectedDateMessage = ''
+                elem.attr('aria-label', helperText);
+            }
+            
+            var descriptionTextSpan = '<span class="offscreen-text" id="monthpicker-description'+scope.$id+'">'+descriptionText+'</span>';
+            elem.removeAttr('b2b-Monthpicker');
+            elem.removeAttr('ng-model');
+            elem.removeAttr('ng-disabled');
+            elem.addClass('Monthpicker-input');
+            elem.attr('ng-model', 'dt');
+            elem.attr('aria-describedby', 'monthpicker-description'+scope.$id);
+            
+            
+            
+            elem.attr('ng-disabled', 'ngDisabled');
+            elem.attr('b2b-format-date', dateFormatString);
+
+            var wrapperElement = angular.element('<div></div>');
+            wrapperElement.attr('b2b-Monthpicker-popup', '');
+            wrapperElement.attr('ng-model', 'dt');
+            if (inline) {
+                wrapperElement.attr('inline', inline);
+            }
+            if (elem.prop('nodeName') === 'A'){
+                wrapperElement.attr('link', true);
+            }
+            b2bMonthpickerService.setAttributes(attr, wrapperElement);
+            b2bMonthpickerService.bindScope(attr, scope);
+
+            wrapperElement.html('');
+            wrapperElement.append(selectedDateMessage);
+            wrapperElement.append('');
+            wrapperElement.append(descriptionTextSpan);
+            wrapperElement.append('');
+            wrapperElement.append(elem.prop('outerHTML'));
+
+            var elm = wrapperElement.prop('outerHTML');
+            elm = $compile(elm)(scope);
+            elem.replaceWith(elm);
+        }],
+        link: function (scope, elem, attr, ctrl) {
+            if (!ctrl) {
+                $log.error("ng-model is required.");
+                return; // do nothing if no ng-model
+            }
+            
+            scope.$watch('dt', function (value) {
+                ctrl.$setViewValue(value);
+            });
+            ctrl.$render = function () {
+                scope.dt = ctrl.$viewValue;
+            };
+        }
+    };
+}])
+
+.directive('b2bMonthpickerGroup', [function () {
+    return {
+        restrict: 'EA',
+        controller: ['$scope', '$element', '$attrs', function (scope, elem, attr) {
+            this.$$headers = [];
+            this.$$footers = [];
+            this.registerMonthpickerScope = function (MonthpickerScope) {
+                MonthpickerScope.headers = this.$$headers;
+                MonthpickerScope.footers = this.$$footers;
+            };
+        }],
+        link: function (scope, elem, attr, ctrl) {}
+    };
+}])
+
+.directive('b2bFormatDate', ['dateFilter', function (dateFilter) {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elem, attr, ctrl) {
+            var b2bFormatDate = "";
+            attr.$observe('b2bFormatDate', function (value) {
+                b2bFormatDate = value;
+            });
+            var dateToString = function (value) {
+                if (!isNaN(new Date(value))) {
+                    return dateFilter(new Date(value), b2bFormatDate);
+                }
+                return value;
+            };
+            ctrl.$formatters.unshift(dateToString);
+        }
+    };
+}])
+
+.directive('b2bMonthpickerHeader', [function () {
+    return {
+        restrict: 'EA',
+        require: '^b2bMonthpickerGroup',
+        transclude: true,
+        replace: true,
+        template: '',
+        compile: function (elem, attr, transclude) {
+            return function link(scope, elem, attr, ctrl) {
+                if (ctrl) {
+                    ctrl.$$headers.push(transclude(scope, function () {}));
+                }
+                elem.remove();
+            };
+        }
+    };
+}])
+
+.directive('b2bMonthpickerFooter', [function () {
+    return {
+        restrict: 'EA',
+        require: '^b2bMonthpickerGroup',
+        transclude: true,
+        replace: true,
+        template: '',
+        compile: function (elem, attr, transclude) {
+            return function link(scope, elem, attr, ctrl) {
+                if (ctrl) {
+                    ctrl.$$footers.push(transclude(scope, function () {}));
+                }
+                elem.remove();
+            };
+        }
+    };
+}]);
+/**
+ * @ngdoc directive
+ * @name Navigation.att:multiLevelNavigation
+ *
+ * @description
+ *  <file src="src/multiLevelNavigation/docs/readme.md" />
+ *
+ * @usage
+ *       <div class="b2b-ml-nav">
+ *          <ul role="tree">
+ *             <li aria-label="{{child.name}}" tabindex="-1" b2b-ml-nav="{{child.type}}" role="treeitem" ng-repeat="child in treeStructure">
+ *                  <a tabindex="-1" href="javascript:void(0);" title="{{child.name}}">{{child.name}}<span><i class="{{child.type=='endNode'?'icon-primary-circle':'icon-primary-collapsed'}}"></i></span></a>
+ *                      <!-- Below UL tag is RECURSIVE to generate n-childs -->
+ *                      <ul role="group" ng-if="child.child">
+ *                          <li aria-label="{{child.name}}" b2b-ml-nav="{{child.type}}" tabindex="-1" role="treeitem" ng-repeat="child in child.child">
+ *                          <a tabindex="-1" href="javascript:void(0);" title="{{child.name}}">{{child.name}}<span><i class="{{child.type=='endNode'?'icon-primary-circle':'icon-primary-collapsed'}}"></i></span></a>
+ *                               <!-- RECURSIVE UL tag goes here -->
+ *                          </li>
+ *                      </ul>
+ *             </li>
+ *           </ul>
+ *        </div>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/multiLevelNavigation/docs/demo.html" />
+            <file src="src/multiLevelNavigation/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.multiLevelNavigation', ['b2b.att.utilities'])
+    //directive b2bMlNav Test coverage 100% on 5/13
+    .directive('b2bMlNav', ['keymap', function (keymap) {
+        return {
+            restrict: 'EA',
+            link: function (scope, element) {
+                var rootE, parentE, upE, downE, lastE, homeE, endE;
+                //default root tree element tabindex set zero
+                if (element.parent().parent().hasClass('b2b-ml-nav') && (element[0].previousElementSibling === null)) {
+                    element.attr('tabindex', 0);
+                }
+                //check root via class
+                var isRoot = function (elem) {
+                        if (elem.parent().parent().eq(0).hasClass('b2b-ml-nav')) {
+                            return true;
+                        } else {
+                            return false;
+                        }
+
+                    }
+                    //for any expandable tree item on click
+                var toggleState = function (e) {
+                    if (angular.element(e.target).attr("b2b-ml-nav") !== "endNode") {
+                        var eLink = element.find('a').eq(0);
+                        if (eLink.hasClass('active')) {
+                            eLink.removeClass('active');
+                            eLink.parent().attr("aria-expanded", "false");
+                            eLink.find('i').eq(0).removeClass('icon-primary-expanded');
+                            eLink.find('i').eq(0).addClass('icon-primary-collapsed');
+                        } else {
+                            eLink.addClass('active');
+                            eLink.parent().attr("aria-expanded", "true");
+                            eLink.find('i').eq(0).removeClass('icon-primary-collapsed');
+                            eLink.find('i').eq(0).addClass('icon-primary-expanded');
+                        }
+                    }
+                };
+                //function finds the main root-item from particular tree-group
+                var findRoot = function (elem) {
+                    if (isRoot(elem)) {
+                        rootE = elem;
+                        return;
+                    }
+                    if (elem.attr("b2b-ml-nav") === "middleNode" || elem.attr("b2b-ml-nav") === "endNode") {
+                        parentE = elem.parent().parent();
+                    } else {
+                        parentE = elem;
+                    }
+                    if (parentE.attr("b2b-ml-nav") === "rootNode") {
+                        rootE = parentE;
+                    } else {
+                        findRoot(parentE);
+                    }
+                };
+                //finds the last visible node of the previous tree-group
+                var findPreActive = function (elem) {
+                    if (!(elem.hasClass("active"))) {
+                        return;
+                    } else {
+                        var childElems = angular.element(elem[0].nextElementSibling.children);
+                        lastE = angular.element(childElems[childElems.length - 1]);
+                        if (lastE.attr("b2b-ml-nav") === "middleNode" && lastE.find('a').eq(0).hasClass('active')) {
+                            findPreActive(lastE.find('a').eq(0));
+                        }
+                        upE = lastE;
+                    }
+                };
+                //find above visible link
+                var findUp = function (elem) {
+                    if (elem[0].previousElementSibling !== null) {
+                        upE = angular.element(elem[0].previousElementSibling);
+                    } else {
+                        upE = elem.parent().parent();
+                    }
+                    if (isRoot(elem) || (upE.attr('b2b-ml-nav') === "middleNode" && upE[0] !== elem.parent().parent()[0])) {
+                        findPreActive(upE.find('a').eq(0)); 
+                    }
+                };
+                //find below visible link
+                var findDown = function (elem) {
+                    if (elem.hasClass('active')) {
+                        downE = elem.next().find('li').eq(0);
+                    } else {
+                        if (elem.parent().next().length !== 0) {
+                            downE = elem.parent().next().eq(0);
+                        } else {
+                            if (elem.parent().parent().parent().next().length !== 0) {
+                                downE = elem.parent().parent().parent().next().eq(0);
+                                return;
+                            }
+                            downE = elem.parent().eq(0);
+                        }
+                    }
+                };
+                //finds last root-group element of the tree
+                var findEnd = function (elem) {
+                    findRoot(elem);
+                    endE = angular.element(rootE.parent()[0].children[rootE.parent()[0].children.length - 1]);
+                };
+                //finds first root element of tree
+                var findHome = function (elem) {
+                    findRoot(elem);
+                    homeE = angular.element(rootE.parent()[0].children[0]);
+                };
+                element.bind('click', function (e) {
+                    if(element.attr("b2b-ml-nav") !== "endNode") { 
+                        toggleState(e); 
+                    }
+                    e.stopPropagation();
+                });
+                element.bind('focus', function (e) {
+                    if(element.attr("b2b-ml-nav") !== "endNode") {
+                        if(element.find('a').eq(0).hasClass('active')) {
+                            element.attr("aria-expanded", true);
+                        }
+                        else {
+                            element.attr("aria-expanded", false);
+                        }
+                        
+                    }
+                })
+                //Keyboard functionality approach:
+                //find keycode
+                //set set tabindex -1 on the current focus element
+                //find the next element to be focussed, set tabindex 0 and throw focus
+                element.bind('keydown', function (evt) {
+                    switch (evt.keyCode) {
+                    case keymap.KEY.ENTER:
+                    case keymap.KEY.SPACE:
+                        element.triggerHandler('click');
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        break;
+                    case keymap.KEY.END:
+                        evt.preventDefault();
+                        element.attr('tabindex', -1);
+                        findEnd(element);
+                        endE.eq(0).attr('tabindex', 0);
+                        endE[0].focus();
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.HOME:
+                        evt.preventDefault();
+                        element.attr('tabindex', -1);
+                        findHome(element);
+                        homeE.eq(0).attr('tabindex', 0);
+                        homeE[0].focus();
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.LEFT:
+                        evt.preventDefault();
+                        if (!isRoot(element)) {
+                            element.attr('tabindex', -1);
+                            parentE = element.parent().parent();
+                            parentE.eq(0).attr('tabindex', 0);
+                            parentE[0].focus();
+                            parentE.eq(0).triggerHandler('click');
+                        } else {
+                            if (element.find('a').eq(0).hasClass('active')) {
+                                element.triggerHandler('click');
+                            }
+                        }
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.UP:
+                        evt.preventDefault();
+                        if (!(isRoot(element) && element[0].previousElementSibling === null)) {
+                            element.attr('tabindex', -1);
+                            findUp(element);
+                            upE.eq(0).attr('tabindex', 0);
+                            upE[0].focus();
+                        }
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.RIGHT:
+                        evt.preventDefault();
+                        if (element.attr("b2b-ml-nav") !== "endNode") {
+                            if (!element.find('a').eq(0).hasClass('active')) {
+                                element.triggerHandler('click');
+                            }
+                            element.attr('tabindex', -1);
+                            findDown(element.find('a').eq(0));
+                            downE.eq(0).attr('tabindex', 0);
+                            downE[0].focus();
+                        }
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.DOWN:
+                        evt.preventDefault();
+                        element.attr('tabindex', -1);
+                        if (!(element.attr("b2b-ml-nav") === "middleNode" && element.find('a').eq(0).hasClass('active')) && (element.next().length === 0)) {
+                            if(element.parent().parent().attr("b2b-ml-nav") !== "rootNode" && element.parent().parent()[0].nextElementSibling !== null)
+                            {
+                                findDown(element.find('a').eq(0));
+                                downE.eq(0).attr('tabindex', 0);
+                                downE[0].focus();
+                                evt.stopPropagation();
+                                break;
+                            }
+                            findRoot(element);
+                            if (!(rootE.next().length === 0)) {
+                                rootE.next().eq(0).attr('tabindex', 0);
+                                rootE.next()[0].focus();
+                            } else {
+                                rootE.eq(0).attr('tabindex', 0);
+                                rootE[0].focus();
+                            }
+                            evt.stopPropagation();
+                            break;
+                        }
+                        findDown(element.find('a').eq(0));
+                        downE.eq(0).attr('tabindex', 0);
+                        downE[0].focus();
+                        evt.stopPropagation();
+                        break;
+                    default:
+                        break;
+                    }
+                });
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Tabs, tables & accordions.att:multipurposeExpander
+ *
+ * @description
+ *  <file src="src/multipurposeExpander/docs/readme.md" />
+ *
+ * @usage
+ * <!--With Close Other -->
+ * <b2b-expander-group close-others="true">
+ *  <b2b-expanders class="mpc-expanders" is-open="testmpc">            
+ *      <b2b-expander-heading ng-class=" { 'b2b-toggle-header-active': !testmpc, 'b2b-toggle-header-inactive': testmpc } ">Heading content goes here</b2b-expander-heading>               
+ *      <b2b-expander-body>
+            <p>body content goes here</p>
+        </b2b-expander-body>
+ *  </b2b-expanders>
+ *  </b2b-expander-group>
+ *  
+ * <!-- Without Close Other -->
+ *  <b2b-expanders class="mpc-expanders" is-open="testmpc2">            
+ *      <b2b-expander-heading ng-class=" { 'b2b-toggle-header-active': !testmpc2, 'b2b-toggle-header-inactive': testmpc2 } ">Heading content goes here</b2b-expander-heading>               
+ *      <b2b-expander-body>
+            <p>body content goes here</p>
+        </b2b-expander-body>
+ *  </b2b-expanders>
+ *  
+ * @example
+ *  <section id="code">
+        <example module="b2b.att.multipurposeExpander">
+            <file src="src/multipurposeExpander/docs/demo.html" />
+            <file src="src/multipurposeExpander/docs/demo.js" />
+        </example>
+    </section>
+ *
+ */
+
+angular.module('b2b.att.multipurposeExpander', ['b2b.att', 'b2b.att.collapse'])
+.directive('b2bExpanderGroup', function () {
+    return {
+        restrict: 'EA',
+        transclude: true,
+        template: "<ng-transclude></ng-transclude>",
+        controller:['$scope','$attrs', function($scope,$attrs){
+            this.groups = [];
+            this.index = -1;            
+            this.scope = $scope;
+            
+            this.addGroup = function (groupScope) {
+                var that = this;
+                groupScope.index = this.groups.length;
+                this.groups.push(groupScope);
+                if(this.groups.length > 0){
+                    this.index = 0;
+                }
+                groupScope.$on('$destroy', function () {
+                that.removeGroup(groupScope);
+            });
+            };
+
+            this.closeOthers = function (openGroup) {
+                var closeOthers = angular.isDefined($attrs.closeOthers);
+                if (closeOthers && !$scope.forceExpand) {
+                    angular.forEach(this.groups, function (group) {
+                        if (group !== openGroup) {
+                            group.isOpen = false;
+                        }
+                    });
+                }
+                if (this.groups.indexOf(openGroup) === (this.groups.length - 1) && $scope.forceExpand) {
+                    $scope.forceExpand = false;
+                }
+            };
+            this.removeGroup = function (group) {
+            var index = this.groups.indexOf(group);
+            if (index !== -1) {
+                this.groups.splice(this.groups.indexOf(group), 1);
+            }
+        };
+        }]
+       
+    };
+    
+})
+.directive('b2bExpanders', function () {
+    return{
+        restrict: 'EA',
+        replace: true,
+        require:['b2bExpanders','?^b2bExpanderGroup'],
+        transclude: true,
+        scope:{isOpen:'=?'},
+        template: "<div ng-transclude></div>",
+        controller: ['$scope', function ($scope){
+                var bodyScope = null;
+                var expanderScope = null;
+                this.isOpened = function(){                
+                    if($scope.isOpen)
+                    {
+                        return  true;
+                    }else
+                    {
+                        return false;
+                    }
+                };                
+                this.setScope = function (scope) {
+                    bodyScope = scope; 
+                    bodyScope.isOpen = $scope.isOpen;                   
+                };                
+                this.setExpanderScope = function (scope) {
+                    expanderScope = scope;                                   
+                };
+                this.toggle = function () {
+                    $scope.isOpen = bodyScope.isOpen = !bodyScope.isOpen;                    
+                    return bodyScope.isOpen;
+                    
+                };
+                this.watchToggle = function(io){ 
+                    bodyScope.isOpen = io;
+                    expanderScope.updateIcons(io);
+                };  
+            }],
+        link: function (scope, elem, attr, myCtrl)
+        {
+            //scope.isOpen = false; 
+            if(myCtrl[1]){
+                myCtrl[1].addGroup(scope);
+            }
+            scope.$watch('isOpen', function(val){                               
+                myCtrl[0].watchToggle(scope.isOpen);
+                if(val && myCtrl[1]){
+                    myCtrl[1].closeOthers(scope);
+                }
+            });            
+        }
+    };
+})
+
+.directive('b2bExpanderHeading', function () {
+    return{
+        require: "^b2bExpanders",
+        restrict: 'EA',
+        replace: true,
+        transclude: true,
+        scope: true,
+        template: "<div style='padding:10px 10px 10px 0 !important' ng-transclude></div>"
+    };
+})
+
+.directive('b2bExpanderBody', function () {
+    return{
+        restrict: 'EA',
+        require: "^b2bExpanders",
+        replace: true,
+        transclude: true,
+        scope: {},
+        template: "<div b2b-collapse='!isOpen' ><div ng-transclude></div></div>",
+        link: function (scope, elem, attr, myCtrl) {
+            scope.isOpen = false;
+            myCtrl.setScope(scope);
+        }
+    };
+})
+
+.directive('b2bExpanderToggle', function () {
+    return{
+        restrict: 'EA',
+        require: "^b2bExpanders",
+        scope: {
+            expandIcon: '@',
+            collapseIcon: '@'
+        },
+        
+        link: function (scope, element, attr, myCtrl)
+        {
+            myCtrl.setExpanderScope(scope);
+            var isOpen = myCtrl.isOpened();   
+
+            scope.setIcon = function () {
+                element.attr("role", "tab");
+
+                if (scope.expandIcon && scope.collapseIcon)
+                {
+                    if (isOpen) {
+                        element.removeClass(scope.expandIcon);
+                        element.addClass(scope.collapseIcon);
+
+                        element.attr("aria-expanded", "true");
+                    }
+                    else {
+                        element.removeClass(scope.collapseIcon);
+                        element.addClass(scope.expandIcon);
+
+                        element.attr("aria-expanded", "false");
+                    }
+                }                               
+            };
+            
+            element.bind('click', function (){
+                scope.toggleit();
+            });
+            scope.updateIcons = function(nStat){
+                isOpen = nStat;
+                scope.setIcon();                
+            };
+            scope.toggleit = function (){
+                isOpen = myCtrl.toggle();
+                scope.setIcon();
+                scope.$apply();
+            };                    
+            scope.setIcon();
+        }
+    };
+});
+/**
+ * @ngdoc directive
+ * @name Messages, modals & alerts.att:notesMessagesAndErrors
+ *
+ * @description
+ *  <file src="src/notesMessagesAndErrors/docs/readme.md" />
+ *
+ * @usage
+ *  See Demo
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/notesMessagesAndErrors/docs/demo.html" />
+            <file src="src/notesMessagesAndErrors/docs/demo.js" />
+       </example>
+        </section>
+ *
+ */
+angular.module('b2b.att.notesMessagesAndErrors', []);
+/** 
+ * @ngdoc directive 
+ * @name Template.att:Notification Card
+ * 
+ * @description 
+ *  <file src="src/notificationCardTemplate/docs/readme.md" /> 
+ * 
+ * @example 
+ *  <section id="code"> 
+        <b>HTML + AngularJS</b> 
+        <example module="b2b.att"> 
+            <file src="src/notificationCardTemplate/docs/demo.html" /> 
+            <file src="src/notificationCardTemplate/docs/demo.js" /> 
+       </example> 
+    </section>    
+ * 
+ */
+angular.module('b2b.att.notificationCardTemplate', [])
+  
+/** 
+ * @ngdoc directive 
+ * @name Template.att:Order Confirmation Template
+ * 
+ * @description 
+ *  <file src="src/orderConfirmationTemplate/docs/readme.md" /> 
+ * 
+ * @example 
+ *  <section id="code"> 
+        <b>HTML + AngularJS</b> 
+        <example module="b2b.att"> 
+            <file src="src/orderConfirmationTemplate/docs/demo.html" /> 
+            <file src="src/orderConfirmationTemplate/docs/demo.js" /> 
+       </example> 
+    </section>    
+ * 
+ */
+angular.module('b2b.att.orderConfirmationTemplate', []);
+  
+/**
+ * @ngdoc directive
+ * @name Navigation.att:pagination
+ *
+ * @description
+ *  <file src="src/pagination/docs/readme.md" />
+ *
+ * @usage
+ *   <div b2b-pagination="" input-id="goto-page-2" total-pages="totalPages1" current-page="currentPage1" click-handler="customHandler" show-input="showInput"></div> 
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/pagination/docs/demo.html" />
+            <file src="src/pagination/docs/demo.js" />
+       </example>
+        </section>
+ *
+ */
+angular.module('b2b.att.pagination', ['b2b.att.utilities', 'ngTouch'])
+    .directive('b2bPagination', ['b2bUserAgent', 'keymap', '$window', '$timeout', function (b2bUserAgent, keymap, $window, $timeout) {
+        return {
+            restrict: 'A',
+            scope: {
+                totalPages: '=',
+                currentPage: '=',
+                showInput: '=',
+                clickHandler: '=?',
+                inputId: '='
+            },
+            replace: true,
+            templateUrl: 'b2bTemplate/pagination/b2b-pagination.html',
+            link: function (scope, elem) {
+                scope.isMobile = b2bUserAgent.isMobile();
+                scope.notMobile = b2bUserAgent.notMobile();
+                scope.focusedPage;
+                scope.meanVal = 3;
+                scope.$watch('totalPages', function (value) {
+                    if (angular.isDefined(value) && value !== null) {
+                        scope.pages = [];
+                        if (value < 1) {
+                            scope.totalPages = 1;
+                            return;
+                        }
+                        if (value <= 10) {
+                            for (var i = 1; i <= value; i++) {
+                                scope.pages.push(i);
+                            }
+                        } else if (value > 10) {
+                            var midVal = Math.ceil(value / 2);
+                            scope.pages = [midVal - 2, midVal - 1, midVal, midVal + 1, midVal + 2];
+                        }
+                        if(scope.currentPage === undefined || scope.currentPage === 1)
+                        {
+                            currentPageChanged(1);
+                        }
+                    }
+                });
+                scope.$watch('currentPage', function (value) {
+                    currentPageChanged(value);
+                    callbackHandler(value);
+                });
+                var callbackHandler = function (num) {
+                    if (angular.isFunction(scope.clickHandler)) {
+                        scope.clickHandler(num);
+                    }
+                };
+
+                function currentPageChanged(value) {
+                    if (angular.isDefined(value) && value !== null) {
+                        if (!value || value < 1) {
+                            value = 1;
+                        }
+                        if (value > scope.totalPages) {
+                            value = scope.totalPages;
+                        }
+                        if (scope.currentPage !== value) {
+                            scope.currentPage = value;
+                            callbackHandler(scope.currentPage);
+                        }
+                        if (scope.totalPages > 10) {
+                            var val = parseInt(value);
+                            if (val <= 6) {
+                                scope.pages = [1, 2, 3, 4, 5, 6, 7, 8];
+                            } else if (val > 6 && val <= scope.totalPages - 5) {
+                                scope.pages = [val - 1, val, val + 1];
+                            } else if (val >= scope.totalPages - 5) {
+                                scope.pages = [scope.totalPages - 7, scope.totalPages - 6, scope.totalPages - 5, scope.totalPages - 4, scope.totalPages - 3, scope.totalPages - 2, scope.totalPages - 1, scope.totalPages];
+                            }
+                        }
+                        if (scope.isMobile) {
+                            var inWidth = $window.innerWidth;
+                            var viewLimit = 7;
+                            if (inWidth <= 400) {
+                                viewLimit = 7;
+                            } else if (inWidth > 400 && inWidth < 500) {
+                                viewLimit = 9;
+                            } else if (inWidth >= 500 && inWidth < 600) {
+                                viewLimit = 11;
+                            } else if (inWidth >= 600 && inWidth < 700) {
+                                viewLimit = 13;
+                            } else if (inWidth >= 700 && inWidth < 800) {
+                                viewLimit = 15;
+                            }
+
+                            var val = parseInt(value);
+
+                            scope.meanVal = Math.floor(viewLimit / 2);
+                            var lowerLimit = (val - scope.meanVal) < 1 ? 1 : val - scope.meanVal;
+                            var upperLimit = (lowerLimit + viewLimit - 1) > scope.totalPages ? scope.totalPages : lowerLimit + viewLimit - 1;
+                            scope.pages = [];
+                            for (var i = lowerLimit; i <= upperLimit; i++) {
+                                scope.pages.push(i);
+                            }
+                        }
+                    }
+                }
+                scope.gotoKeyClick = function (keyEvent) {
+                  if (keyEvent.which === keymap.KEY.ENTER) {
+                    scope.gotoBtnClick()
+                  }
+                }
+                scope.gotoBtnClick = function () {
+                    currentPageChanged(parseInt(scope.gotoPage)); 
+                    callbackHandler(scope.currentPage);
+                    var qResult = elem[0].querySelector('button');
+                    angular.element(qResult).attr('disabled','true');
+                    $timeout(function(){
+                        elem[0].querySelector('.b2b-pager__item--active').focus();
+                    }, 50); 
+                    scope.gotoPage = null;               
+                }
+                scope.onfocusIn = function(evt)
+                {
+                    var qResult = elem[0].querySelector('button');
+                    angular.element(qResult).removeAttr('disabled');
+                }
+                scope.onfocusOut = function(evt)
+                {
+                    if(evt.target.value === "")
+                    {
+                        var qResult = elem[0].querySelector('button');
+                        angular.element(qResult).attr('disabled','true');
+                    }                    
+                }
+                scope.next = function (event) {
+                    if (event != undefined) {
+                        event.preventDefault();
+                    }
+                    if (scope.currentPage < scope.totalPages) {
+                        scope.currentPage += 1;
+                        callbackHandler(scope.currentPage);
+                    }
+                };
+                scope.prev = function (event) {
+                    if (event != undefined) {
+                        event.preventDefault();
+                    }
+                    if (scope.currentPage > 1) {
+                        scope.currentPage -= 1;
+                        callbackHandler(scope.currentPage);
+                    }
+                };
+                scope.selectPage = function (value, event) {
+                    event.preventDefault();
+                    scope.currentPage = value;
+                    scope.focusedPage = value;
+                    callbackHandler(scope.currentPage);
+                };
+                scope.checkSelectedPage = function (value) {
+                    if (scope.currentPage === value) {
+                        return true;
+                    }
+                    return false;
+                };
+                scope.isFocused = function (page) {
+                    return scope.focusedPage === page;
+                };
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Navigation.att:paneSelector
+ *
+ * @description
+ *  <file src="src/paneSelector/docs/readme.md" />
+ *
+ * @usage
+ *  Please refer demo.html tab in Example section below.
+ *
+ * @example
+    <section id="code">
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/paneSelector/docs/demo.html" />
+            <file src="src/paneSelector/docs/demo.js" />
+        </example>
+    </section>
+ */
+
+angular.module('b2b.att.paneSelector', ['b2b.att.tabs', 'b2b.att.utilities'])
+
+.filter('paneSelectorSelectedItemsFilter', [function () {
+    return function (listOfItemsArray) {
+
+        if (!listOfItemsArray) {
+            listOfItemsArray = [];
+        }
+
+        var returnArray = [];
+
+        for (var i = 0; i < listOfItemsArray.length; i++) {
+            if (listOfItemsArray[i].isSelected) {
+                returnArray.push(listOfItemsArray[i]);
+            }
+        }
+
+        return returnArray;
+    };
+}])
+
+.filter('paneSelectorFetchChildItemsFilter', [function () {
+    return function (listOfItemsArray) {
+
+        if (!listOfItemsArray) {
+            listOfItemsArray = [];
+        }
+
+        var returnArray = [];
+
+        for (var i = 0; i < listOfItemsArray.length; i++) {
+            for (var j = 0; j < listOfItemsArray[i].childItems.length; j++) {
+                returnArray.push(listOfItemsArray[i].childItems[j]);
+            }
+        }
+
+        return returnArray;
+    };
+}])
+
+.directive('b2bPaneSelector', [function () {
+    return {
+        restrict: 'AE',
+        replace: true,
+        templateUrl: 'b2bTemplate/paneSelector/paneSelector.html',
+        transclude: true,
+        scope: {}
+    };
+}])
+
+.directive('b2bPaneSelectorPane', [ function () {
+    return {
+        restrict: 'AE',
+        replace: true,
+        templateUrl: 'b2bTemplate/paneSelector/paneSelectorPane.html',
+        transclude: true,
+        scope: {}
+    };
+}])
+
+.directive('b2bTabVertical', ['$timeout', 'keymap', function ($timeout, keymap) {
+    return {
+        restrict: 'A',
+        require: '^b2bTab',
+        link: function (scope, element, attr, b2bTabCtrl) {
+
+            if (!b2bTabCtrl) {
+                return;
+            }
+
+            // retreive the isolateScope
+            var iScope = angular.element(element).isolateScope();
+
+            $timeout(function () {
+                angular.element(element[0].querySelector('a')).unbind('keydown');
+                angular.element(element[0].querySelector('a')).bind('keydown', function (evt) {
+
+                    if (!(evt.keyCode)) {
+                        evt.keyCode = evt.which;
+                    }
+
+                    switch (evt.keyCode) {
+                        case keymap.KEY.DOWN:
+                            evt.preventDefault();
+                            iScope.nextKey();
+                            break;
+
+                        case keymap.KEY.UP:
+                            evt.preventDefault();
+                            iScope.previousKey();
+                            break;
+
+                        default:;
+                    }
+                });
+            });
+        }
+    };
+}]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:phoneNumberInput
+ *
+ * @description
+ *  <file src="src/phoneNumberInput/docs/readme.md" />
+ *
+ * @usage
+<form name="userForm1">
+    <div class="form-row" ng-class="{'error':!userForm1.text.$valid && userForm1.text.$dirty}">
+        <label>Phone Mask<span style="color:red">*</span>: (npa) nxx-line &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Model Value: {{mask.text}}</label>
+        <div>
+            <input b2b-phone-mask="phoneMask" name="text" ng-model="mask.text" type="text" placeholder="e.g. (123) 456-7890" title="Phone Number" class="b2b-phone-mask-input" required />
+            <div ng-messages="userForm1.text.$error" class="error-msg" aria-live="polite" aria-atomic="true">
+                <span ng-message="required" role="alert">This field is mandatory!</span>
+                <span ng-message="invalidPhoneNumber" role="alert">Please enter valid phone number!</span>
+                <span ng-message="mask" role="alert">Please enter valid phone number!</span>
+            </div>
+        </div>
+    </div>
+</form>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/phoneNumberInput/docs/demo.html" />
+            <file src="src/phoneNumberInput/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.phoneNumberInput', ['ngMessages', 'b2b.att.utilities'])
+    .constant("CoreFormsUiConfig", {
+        phoneMask: '(___) ___-____',
+        phoneMaskDot: '___.___.____',
+        phoneMaskHyphen: '___-___-____'
+    })
+    .directive('b2bPhoneMask', ['$parse', 'CoreFormsUiConfig', 'keymap', function ($parse, CoreFormsUiConfig, keymap) {
+        return {
+            require: 'ngModel',
+            scope: {
+                ngModel: '='
+            },
+            link: function (scope, iElement, iAttrs, ctrl) {
+                var navigatorAgent = navigator.userAgent.toLowerCase(),
+                    isAndroid = navigatorAgent.indexOf("android") > -1,
+                    oldIE = navigatorAgent.indexOf('msie 8.0') !== -1;
+                var mask = '';
+                var validPhoneNumber = false;
+                var currentKey = '';
+                if (isAndroid) {
+                    mask = "__________";
+                } else {
+                    switch (iAttrs.b2bPhoneMask) {
+                    case "phoneMask":
+                        mask = CoreFormsUiConfig.phoneMask;
+                        break;
+                    case "phoneMaskDot":
+                        mask = CoreFormsUiConfig.phoneMaskDot;
+                        break;
+                    case "phoneMaskHyphen":
+                        mask = CoreFormsUiConfig.phoneMaskHyphen;
+                        break;
+                    default:
+                        mask = CoreFormsUiConfig.phoneMask;
+                    }
+                }
+                iElement.attr("maxlength", mask.length);
+                var checkValidity = function (unmaskedValue, rawValue) {
+                    var valid = false;
+                    if (angular.isUndefined(rawValue) || rawValue === '') {
+                        valid = true;
+                    } else if (unmaskedValue) {
+                        valid = (unmaskedValue.length === 10);
+                    }
+                    ctrl.$setValidity('invalidPhoneNumber', validPhoneNumber);
+                    ctrl.$setValidity('mask', valid);
+                    return valid;
+                };
+                var handleKeyup = function (evt) {
+
+                    if (evt && evt.keyCode === keymap.KEY.SHIFT) {
+                        return;
+                    }
+
+                    var index, formattedNumber;
+                    if (ctrl.$modelValue) {
+                        formattedNumber = ctrl.$modelValue;
+                    } else {
+                        formattedNumber = iElement.val();
+                    }
+                    if (!formattedNumber.length && currentKey === '') {
+                        return;
+                    }
+                    var maskLength, inputNumbers, maskArray, tempArray, maskArrayLength;
+                    tempArray = [];
+                    maskArray = mask.split("");
+                    maskArrayLength = maskArray.length;
+                    maskLength = formattedNumber.substring(0, mask.length);
+                    inputNumbers = formattedNumber.replace(/[^0-9]/g, "").split("");
+                    for (index = 0; index < maskArrayLength; index++) {
+                        tempArray.push(maskArray[index] === "_" ? inputNumbers.shift() : maskArray[index]);
+                        if (inputNumbers.length === 0) {
+                            break;
+                        }
+                    }
+                    formattedNumber = tempArray.join("");
+                    if (formattedNumber === '(') {
+                        formattedNumber = '';
+                    }
+
+                    if ( (angular.isDefined(evt) && evt.which) && currentKey !== '') {
+                        if (maskArray[0] === currentKey && formattedNumber === '') {
+                            formattedNumber = '(';
+                        } else if (evt.which === keymap.KEY.SPACE && currentKey === ' ') {
+                            formattedNumber = formattedNumber + ') ';
+                        } else if (maskArray[0] === currentKey && formattedNumber === '') {
+                            formattedNumber = formattedNumber + currentKey;
+                        } else if (maskArray[formattedNumber.length] === currentKey) {
+                            formattedNumber = formattedNumber + currentKey;
+                        }
+                        currentKey = '';
+                    }
+
+                    ctrl.$setViewValue(formattedNumber);
+                    ctrl.$render();
+                    return formattedNumber;
+                };
+
+
+                // since we are only allowing 0-9, why even let the keypress go forward?
+                // also added in delete... in case they want to delete :)
+                var handlePress = function (e) {
+                    if (e.which) {
+                        if ((e.which < 48 || e.which > 57) && (e.which < 96 || e.which > 105)) {
+                            if (e.which !== keymap.KEY.BACKSPACE && e.which !== keymap.KEY.TAB && e.which !== keymap.KEY.DELETE && e.which !== keymap.KEY.ENTER && e.which !== keymap.KEY.LEFT && e.which !== keymap.KEY.RIGHT &&
+                                // Allow: Ctrl+V/v
+                                (!(e.ctrlKey) && (e.which !== '118' || e.which !== '86')) &&
+                                // Allow: Ctrl+C/c
+                                (!(e.ctrlKey) && (e.which !== '99' || e.which !== '67')) &&
+                                // Allow: Ctrl+X/x
+                                (!(e.ctrlKey) && (e.which !== '120' || e.which !== '88'))) {
+                                e.preventDefault ? e.preventDefault() : e.returnValue = false;
+                                iElement.attr("aria-label", "Only numbers are allowed");
+                                validPhoneNumber = false;
+                            }
+                        } else {
+                            iElement.removeAttr("aria-label");
+                            validPhoneNumber = true;
+                        }
+
+                        setCurrentKey(e);
+                    }
+                    scope.$apply();
+                };
+                // i moved this out because i thought i might need focus as well..
+                // to handle setting the model as the view changes
+                var parser = function (fromViewValue) {
+                    var letters = /^[A-Za-z]+$/;
+                    var numbers = /^[0-9]+$/;
+                    if (angular.isUndefined(fromViewValue) || fromViewValue === '') {
+                        validPhoneNumber = true;
+                    } else {
+                        if (fromViewValue.match(letters)) {
+                            validPhoneNumber = false;
+                        }
+                        if (fromViewValue.match(numbers)) {
+                            validPhoneNumber = true;
+                        }
+                    }
+                    var clean = "";
+                    if (fromViewValue && fromViewValue.length > 0) {
+                        clean = fromViewValue.replace(/[^0-9]/g, '');
+                    }
+                    checkValidity(clean, fromViewValue);
+                    return clean;
+                };
+
+                //to handle reading the model and formatting it
+                var formatter = function (fromModelView) {
+                    var input = '';
+                    checkValidity(fromModelView);
+                    if (fromModelView) {
+                        input = handleKeyup();
+                    }
+                    return input;
+                };
+
+                var setCurrentKey = function (e) {
+                    switch (e.which) {
+                    case 189:
+                    case 109:
+                        currentKey = '-';
+                        break;
+                    case 190:
+                    case 110:
+                        currentKey = '.';
+                        break;
+                    case 57:
+                        if (e.shiftKey === true) {
+                            currentKey = '(';
+                        }
+                        break;
+                    case 48:
+                        if (e.shiftKey === true) {
+                            currentKey = ')';
+                        }
+                        break;
+                    case 32:
+                        currentKey = ' ';
+                        break;
+                    }
+                };
+
+                if (angular.isDefined(scope.ngModel)) {
+                    parser(scope.ngModel);
+                }
+
+                ctrl.$parsers.push(parser);
+                ctrl.$formatters.push(formatter);
+                iElement.bind('keyup', handleKeyup);
+                iElement.bind('keydown', handlePress);
+            }
+        };
+}]);
+/** 
+ * @ngdoc directive 
+ * @name Template.att:Profile Blocks 
+ * 
+ * @description 
+ *  <file src="src/profileBlockTemplate/docs/readme.md" /> 
+ * @example 
+ *  <section id="code">  
+        <example module="b2b.att"> 
+            <file src="src/profileBlockTemplate/docs/demo.html" /> 
+            <file src="src/profileBlockTemplate/docs/demo.js" /> 
+       </example>  
+    </section>  
+ *  
+ */   
+
+angular.module('b2b.att.profileBlockTemplate', [])
+    
+     
+  
+/**
+ * @ngdoc directive
+ * @name Layouts.att:profileCard
+ *
+ * @description
+ *  <file src="src/profileCard/docs/readme.md" />
+ *
+ * @usage
+ *  <b2b-profile-card></b2b-profile-card>
+ *
+ * @example
+    <section id="code">   
+        <example module="b2b.att">
+            <file src="src/profileCard/docs/demo.html" />
+            <file src="src/profileCard/docs/demo.js" />
+        </example>
+    </section>
+ */
+
+angular.module('b2b.att.profileCard', ['b2b.att'])
+.constant('profileStatus',{
+    status: {
+        ACTIVE: {
+            status: "Active",
+            color: "green"
+        },
+        DEACTIVATED: {
+            status: "Deactivated",
+            color: "red"
+        },
+        LOCKED: {
+            status: "Locked",
+            color: "red"
+        },
+        IDLE: {
+            status: "Idle",
+            color: "yellow"
+        },
+        PENDING: {
+            status: "Pending",
+            color: "blue"
+        }
+    },
+    role: "COMPANY ADMINISTRATOR"
+
+})
+.directive('b2bProfileCard',['$http','$q','profileStatus', function($http,$q,profileStatus) {
+   return {
+        restrict: 'EA',
+        replace: 'true',
+        templateUrl: function(element, attrs){
+            if(!attrs.addUser){
+                return 'b2bTemplate/profileCard/profileCard.html';
+            }
+            else{
+                return 'b2bTemplate/profileCard/profileCard-addUser.html';
+            }
+        },
+        scope: {
+            profile:'=',
+            characterLimit: '@'
+        },
+        link: function(scope, elem, attr){
+            scope.characterLimit = parseInt(attr.characterLimit, 10) || 25;
+            scope.shouldClip = function(str) {
+                return str.length > scope.characterLimit;
+            };
+
+            scope.showEmailTooltip = false;
+
+            scope.image=true;
+            function isImage(src) {
+                var deferred = $q.defer();
+                var image = new Image();
+                image.onerror = function() {
+                    deferred.reject(false);
+                };
+                image.onload = function() {
+                    deferred.resolve(true);
+                };
+                if(src !== undefined && src.length>0 ){
+                    image.src = src;
+                } else {
+                     deferred.reject(false);
+                }
+                return deferred.promise;
+            }
+            if(!attr.addUser){
+            scope.image=false;
+            isImage(scope.profile.img).then(function(img) {
+                scope.image=img;
+            });
+            var splitName=(scope.profile.name).split(' ');
+            scope.initials='';
+            for(var i=0;i<splitName.length;i++){
+                scope.initials += splitName[i][0];
+            }
+            if(scope.profile.role.toUpperCase() === profileStatus.role){
+                scope.badge=true;
+            }
+            var profileState=profileStatus.status[scope.profile.state.toUpperCase()];
+            if(profileState) {
+                scope.profile.state=profileStatus.status[scope.profile.state.toUpperCase()].status;
+                scope.colorIcon=profileStatus.status[scope.profile.state.toUpperCase()].color;
+                if(scope.profile.state.toUpperCase()===profileStatus.status.PENDING.status.toUpperCase()||scope.profile.state.toUpperCase()===profileStatus.status.LOCKED.status.toUpperCase()){
+                        scope.profile.lastLogin=scope.profile.state;
+                }
+            }
+            var today=new Date().getTime();
+            var lastlogin=new Date(scope.profile.lastLogin).getTime();
+            var diff=(today-lastlogin)/(1000*60*60*24);
+            if(diff<=1){
+                scope.profile.lastLogin="Today";
+            }
+            else if(diff<=2){
+                scope.profile.lastLogin="Yesterday";
+            }
+        }
+    }
+};
+}]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:radios
+ *
+ * @description
+ *  <file src="src/radios/docs/readme.md" />
+ *
+ * @usage
+ *  See demo section
+ *
+ * @param {boolean} refreshRadioGroup - A trigger that recalculates and updates the accessibility roles on radios in a group.
+ * 
+ * @example
+    <section id="code">
+               <b>HTML + AngularJS</b>
+               <example module="b2b.att">
+                <file src="src/radios/docs/demo.html" />
+                <file src="src/radios/docs/demo.js" />
+               </example>
+            </section>
+ */
+angular.module('b2b.att.radios', ['b2b.att.utilities'])
+.directive('b2bRadioGroupAccessibility', ['$timeout', 'b2bUserAgent', function($timeout, b2bUserAgent) {
+    return {
+        restrict: "A",
+        scope: {
+            refreshRadioGroup: "=",
+        },
+        link: function(scope, ele, attr) {
+
+            var roleRadioElement, radioProductSelectElement, radioInputTypeElement;
+
+            $timeout(calculateNumberOfRadio);
+
+            scope.$watch('refreshRadioGroup', function(value) {
+                if (value === true) {
+                    addingRoleAttribute();
+                    $timeout(calculateNumberOfRadio);
+                    scope.refreshRadioGroup = false;
+                } else {
+                    return;
+                }
+            })
+
+
+            function calculateNumberOfRadio() {
+                roleRadioElement = ele[0].querySelectorAll('[role="radio"]');
+
+                radioProductSelectElement = ele[0].querySelectorAll('[role="radiogroup"] li.radio-box');
+
+                radioInputTypeElement = ele[0].querySelectorAll('input[type="radio"]');
+
+                for (var i = 0; i < radioInputTypeElement.length; i++) {
+                    var isChecked = radioInputTypeElement[i].checked ? 'true' : 'false';
+                    var isDisabled = radioInputTypeElement[i].disabled ? 'true' : 'false';
+                    var numOfx = i + 1 + ' of ' + radioInputTypeElement.length;
+                    angular.element(roleRadioElement[i]).attr({
+                        'aria-checked': isChecked,
+                        'aria-disabled': isDisabled,
+                        'data-opNum': numOfx
+                    });
+                    if (b2bUserAgent.notMobile()) {
+                        angular.element(roleRadioElement[i]).removeAttr("role");
+                    }
+
+                    if (radioProductSelectElement.length) {
+                        isChecked === 'true' ? angular.element(radioProductSelectElement[i]).addClass('active') : angular.element(radioProductSelectElement[i]).removeClass('active');
+                    }
+
+                    if (/Android/i.test(navigator.userAgent)) {
+                        angular.element(roleRadioElement[i]).append('<span class="hidden-spoken">. ' + numOfx + '.</span>');
+                    }
+
+
+                    angular.element(radioInputTypeElement[i]).bind('click', radioStateChangeonClick);
+
+                }
+            }
+
+            function addingRoleAttribute() {
+                for (var i = 0; i < radioInputTypeElement.length; i++) {
+                    if (b2bUserAgent.notMobile()) {
+                        angular.element(roleRadioElement[i]).attr("role", "radio");
+                    }
+                }
+            }
+
+            function radioStateChangeonClick() {
+                for (var i = 0; i < radioInputTypeElement.length; i++) {
+                    var isChecked = radioInputTypeElement[i].checked ? 'true' : 'false';
+                    var isDisabled = radioInputTypeElement[i].disabled ? 'true' : 'false';
+                    if (radioProductSelectElement.length) {
+                        isChecked === 'true' ? angular.element(radioProductSelectElement[i]).addClass('active') : angular.element(radioProductSelectElement[i]).removeClass('active');
+                    }
+                    angular.element(roleRadioElement[i]).attr({
+                        'aria-checked': isChecked,
+                        'aria-disabled': isDisabled
+                    });
+                }
+
+            }
+        }
+    }
+
+}]);
+
+/**
+ * @ngdoc directive
+ * @name Forms.att:searchField
+ *
+ * @description
+ *  <file src="src/searchField/docs/readme.md" />
+ *
+ * @usage
+ *  <div b2b-search-field dropdown-list="listdata" on-click-callback="clickFn(value)" class="span12" input-model='typedString' config-obj='keyConfigObj'></div>
+ *
+ * @example
+ <section id="code">
+    <example module="b2b.att">
+    <file src="src/searchField/docs/demo.html" />
+    <file src="src/searchField/docs/demo.js" />
+    </example>
+</section>
+ */
+
+angular.module('b2b.att.searchField', ['b2b.att.utilities', 'b2b.att.position'])
+    .filter('b2bFilterInput', [function() {
+        return function(list, str, keyArray, displayListKey, isContainsSearch, searchSeperator) {
+            var res = [];
+            var searchLabel;
+            var searchCondition;
+            var conditionCheck = function(searchSeperator, listItem, displayListKey, splitString) {
+                var displayTitle = null;
+                if (splitString) {
+                    for (var i = 0; i < displayListKey.length; i++) {
+                        if (i <= 0) {
+                            displayTitle = listItem[displayListKey[i]].toLowerCase().indexOf(splitString[i].toLowerCase()) > -1;
+                        } else {
+                            displayTitle = (splitString[i]) ? displayTitle && listItem[displayListKey[i]].toLowerCase().indexOf(splitString[i].toLowerCase().trim()) > -1 : displayTitle;
+                        }
+                    }
+                } else {
+                    angular.forEach(displayListKey, function(value) {
+                        if (!displayTitle) {
+                            displayTitle = listItem[value];
+                        } else {
+                            displayTitle = displayTitle + (listItem[value] ? searchSeperator + ' ' + listItem[value] : '');
+                        }
+                    });
+                }
+                return displayTitle;
+            }
+            angular.forEach(list, function(listItem) {
+                var splitString = str.indexOf(searchSeperator) > -1 ? str.split(searchSeperator) : false;
+                var displayList = conditionCheck(searchSeperator, listItem, displayListKey, splitString)
+                for (var i = 0; i < keyArray.length; i++) {
+                    searchLabel = keyArray[i];
+                    if (listItem[searchLabel]) {
+                        if (isContainsSearch) {
+                            var displaySearchList = listItem[searchLabel].toLowerCase().indexOf(str.toLowerCase()) > -1;
+                            if (splitString.length > 1) {
+                                displaySearchList = (splitString.length <= keyArray.length) ? displayList : false;
+                            }
+                            searchCondition = displaySearchList;
+                        } else {
+                            searchCondition = listItem[searchLabel].match(new RegExp('^' + str, 'gi'));
+                        }
+                        if (searchCondition) {
+                            res.push({
+                                'title': conditionCheck(searchSeperator, listItem, displayListKey),
+                                'valueObj': listItem
+                            });
+                            break;
+                        }
+                    }
+                }
+            });
+            return res;
+        };
+    }]).directive('b2bSearchField', ['$filter', 'b2bFilterInputFilter', 'keymap', '$documentBind', '$isElement', '$document', 'events', '$timeout', function($filter, b2bFilterInput, keymap, $documentBind, $isElement, $document, events, $timeout) {
+        return {
+            restrict: 'A',
+            scope: {
+                dataList: '=dropdownList',
+                onClickCallback: '&',
+                inputModel: '=',
+                configObj: '=',
+                objModel: '=',
+                inputDeny: '=?',
+                disabled: '=?'
+            },
+            replace: true,
+            templateUrl: 'b2bTemplate/searchField/searchField.html',
+            controller: ['$scope', function($scope) {
+                this.searchKeyArray = [];
+                if ($scope.configObj.searchKeys) {
+                    this.searchKeyArray = $scope.configObj.searchKeys;
+                }
+                if (angular.isUndefined($scope.disabled)) {
+                    $scope.disabled = false;
+                }
+                this.triggerInput = function(searchString) {
+                    $scope.originalInputModel = searchString;
+                    if (searchString === '') {
+                        $scope.currentIndex = -1;
+                        $scope.filterList = [];
+                        $scope.showListFlag = false;
+                    } else if (searchString !== '' && !$scope.isFilterEnabled) {
+                        $scope.filterList = $filter('b2bFilterInput')($scope.dataList, searchString, this.searchKeyArray, $scope.configObj.displayListDataKey, $scope.configObj.isContainsSearch, $scope.configObj.searchSeperator);
+                        $scope.showListFlag = true;
+                    }
+                };
+                this.denyRegex = function() {
+                    return $scope.inputDeny;
+                };
+            }],
+            link: function(scope, elem) {
+                scope.isFilterEnabled = false;
+                scope.showListFlag = false;
+                scope.currentIndex = -1;
+                scope.setCurrentIdx = function(idx) {
+                    scope.currentIndex = idx;
+                    if (idx > -1) {
+                        scope.inputModel = scope.filterList[idx].title;
+                        scope.objModel = scope.filterList[idx];
+                    }
+                };
+                scope.isActive = function(index, dropdownLength) {
+                    scope.dropdownLength = dropdownLength;
+                    return scope.currentIndex === index;
+                };
+                scope.selectItem = function(idx) {
+                    scope.setCurrentIdx(idx);
+                    scope.onClickCallback({
+                        value: scope.inputModel,
+                        objValue: scope.objModel
+                    });
+                    scope.showListFlag = false;
+                    $timeout(function() {
+                        elem.find('div').find('input')[0].focus();
+                    }, 150);
+                };
+                scope.startSearch = function() {
+                    scope.onClickCallback({
+                        value: scope.inputModel,
+                        objValue: scope.objModel
+                    });
+                };
+                scope.selectPrev = function() {
+                    if (scope.currentIndex > 0 && scope.filterList.length > 0) {
+                        scope.currentIndex = scope.currentIndex - 1;
+                        scope.setCurrentIdx(scope.currentIndex);
+                    } else if (scope.currentIndex === 0) {
+                        scope.currentIndex = scope.currentIndex - 1;
+                        scope.inputModel = scope.originalInputModel;
+                        scope.isFilterEnabled = true;
+                    }
+                };
+                scope.selectNext = function() {
+                    if (scope.currentIndex < scope.configObj.noOfItemsDisplay - 1) {
+                        if (scope.currentIndex < scope.filterList.length - 1) {
+                            scope.currentIndex = scope.currentIndex + 1;
+                            scope.setCurrentIdx(scope.currentIndex);
+                        }
+                    }
+                };
+                scope.selectCurrent = function() {
+                    scope.selectItem(scope.currentIndex);
+                };
+                scope.selectionIndex = function(e) {
+                    switch (e.keyCode) {
+                        case keymap.KEY.DOWN:
+                            events.preventDefault(e);
+                            scope.isFilterEnabled = true;
+                            scope.selectNext();
+                            break;
+                        case keymap.KEY.UP:
+                            events.preventDefault(e);
+                            scope.isFilterEnabled = true;
+                            scope.selectPrev();
+                            break;
+                        case keymap.KEY.ENTER:
+                            events.preventDefault(e);
+                            scope.isFilterEnabled = true;
+                            scope.selectCurrent();
+                            break;
+                        case keymap.KEY.ESC:
+                            events.preventDefault(e);
+                            scope.isFilterEnabled = false;
+                            scope.showListFlag = false;
+                            scope.inputModel = '';
+                            break;
+                        default:
+                            scope.isFilterEnabled = false;
+                            break;
+                    }
+                    if (elem[0].querySelector('.filtercontainer')) {
+                        elem[0].querySelector('.filtercontainer').scrollTop = (scope.currentIndex - 1) * 35;
+                    }
+                };
+                scope.$watch('filterList', function(newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        scope.currentIndex = -1;
+                    }
+                });
+                scope.blurInput = function() {
+                    $timeout(function() {
+                        scope.showListFlag = false;
+                    }, 150);
+                };
+                var outsideClick = function(e) {
+                    var isElement = $isElement(angular.element(e.target), elem.find('ul').eq(0), $document);
+                    if (!isElement && document.activeElement.tagName.toLowerCase() !== 'input') {
+                        scope.showListFlag = false;
+                        scope.$apply();
+                    }
+                };
+                $documentBind.click('showListFlag', outsideClick, scope);
+            }
+        };
+    }])
+    .directive('b2bSearchInput', [function() {
+        return {
+            restrict: 'A',
+            require: ['ngModel', '^b2bSearchField'],
+            link: function(scope, elem, attr, ctrl) {
+                var ngModelCtrl = ctrl[0];
+                var attSearchBarCtrl = ctrl[1];
+                var REGEX = ctrl[1].denyRegex();
+                var parser = function(viewValue) {
+                    attSearchBarCtrl.triggerInput(viewValue);
+                    return viewValue;
+                };
+                ngModelCtrl.$parsers.push(parser);
+
+                if (REGEX !== undefined || REGEX !== '') {
+                    elem.bind('input', function() {
+                        var inputString = ngModelCtrl.$viewValue && ngModelCtrl.$viewValue.replace(REGEX, '');
+                        if (inputString !== ngModelCtrl.$viewValue) {
+                            ngModelCtrl.$setViewValue(inputString);
+                            ngModelCtrl.$render();
+                            scope.$apply();
+                        }
+                    });
+                }
+            }
+        };
+    }]);
+
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:Seek bar
+ *
+ * @description
+ *  <file src="src/seekBar/docs/readme.md" />
+ *
+ * @usage
+ *  Horizontal Seek Bar
+ *  <b2b-seek-bar min="0" max="400" step="1" skip-interval="1" data-ng-model="horizontalSeekBarVal" style="width:180px; margin: auto;" on-drag-end="onDragEnd()" on-drag-init="onDragStart()"></b2b-seek-bar>
+
+ *  Vertical Seek Bar
+ *  <b2b-seek-bar min="0" max="1" step="0.01" skip-interval="0.1" vertical data-ng-model="verticalSeekBarVal" style=" width: 6px; height: 180px; margin: auto;"></b2b-seek-bar>
+ *
+ * @example
+    <section id="code">   
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/seekBar/docs/demo.html" />
+            <file src="src/seekBar/docs/demo.js" />
+        </example>
+    </section>
+ */
+
+angular.module('b2b.att.seekBar', ['b2b.att.utilities','b2b.att.position'])
+        .constant('b2bSeekBarConfig', {
+            'min': 0,
+            'max': 100,
+            'step': 1,
+            'skipInterval': 1
+        })
+        .directive('b2bSeekBar', ['$documentBind', 'events', 'b2bSeekBarConfig', 'keymap', '$compile', function($documentBind, events, b2bSeekBarConfig, keymap, $compile) {
+                return {
+                    restrict: 'AE',
+                    replace: true,
+                    require: 'ngModel',
+                    templateUrl: 'b2bTemplate/seekBar/seekBar.html',
+                    scope: {
+                        onDragEnd: '&?',
+                        onDragInit: '&?'
+                    },
+                    link: function(scope, elm, attr, ngModelCtrl) {
+                        scope.isDragging = false;
+                        scope.verticalSeekBar = false;
+                        var min;
+                        var max;
+                        var step = b2bSeekBarConfig.step;
+                        var skipInterval = b2bSeekBarConfig.skipInterval;
+                        var knob = angular.element(elm[0].querySelector('.b2b-seek-bar-knob-container'));
+                        var seekBarKnob = angular.element(knob[0].querySelector('.b2b-seek-bar-knob'));
+                        var trackContainer = angular.element(elm[0].querySelector('.b2b-seek-bar-track-container'));
+                        var trackFill = angular.element(elm[0].querySelector('.b2b-seek-bar-track-fill'));
+                        var trackContainerRect = {};
+                        var axisPosition;
+                        var trackFillOrderPositioning;
+
+                        if (angular.isDefined(attr.vertical)) {
+                            scope.verticalSeekBar = true;
+                            axisPosition = "clientY";
+                        }
+                        else {
+                            scope.verticalSeekBar = false;
+                            axisPosition = "clientX";
+                        }
+                        var getValidStep = function(val) {
+                            val = parseFloat(val);
+                            // in case $modelValue came in string number
+                            if (angular.isNumber(val)) {
+                                val = Math.round((val - min) / step) * step + min;
+                                return Math.round(val * 1000) / 1000;
+                            }
+                        };
+
+                        var getPositionToPercent = function(x) {
+                            if (scope.verticalSeekBar) {
+                                return Math.max(0, Math.min(1, (trackContainerRect.bottom - x) / (trackFillOrderPositioning)));
+                            }
+                            else {
+                                return Math.max(0, Math.min(1, (x - trackContainerRect.left) / (trackFillOrderPositioning)));
+                            }
+                        };
+
+                        var getPercentToValue = function(percent) {
+                            return (min + percent * (max - min));
+                        };
+
+                        var getValueToPercent = function(val) {
+                            return (val - min) / (max - min);
+                        };
+
+                        var getValidMinMax = function(val) {
+                            return Math.max(min, Math.min(max, val));
+                        };
+
+                        var updateTrackContainerRect = function() {
+                            trackContainerRect = trackContainer[0].getBoundingClientRect();
+                            if (scope.verticalSeekBar) {
+                                if (!trackContainerRect.height) {
+                                    trackFillOrderPositioning = trackContainer[0].scrollHeight;
+                                } else {
+                                    trackFillOrderPositioning = trackContainerRect.height;
+                                }
+                            }
+                            else {
+                                if (!trackContainerRect.width) {
+                                    trackFillOrderPositioning = trackContainer[0].scrollWidth;
+                                } else {
+                                    trackFillOrderPositioning = trackContainerRect.width;
+                                }
+
+                            }
+
+                        };
+
+                        var updateKnobPosition = function(percent) {
+                            var percentStr = (percent * 100) + '%';
+                            if (scope.verticalSeekBar) {
+                                knob.css('bottom', percentStr);
+                                trackFill.css('height', percentStr);
+                            }
+                            else {
+                                knob.css('left', percentStr);
+                                trackFill.css('width', percentStr);
+                            }
+                        };
+
+                        var modelRenderer = function() {
+                            if (isNaN(ngModelCtrl.$viewValue)) {
+                                ngModelCtrl.$viewValue = ngModelCtrl.$modelValue || min;
+                            }
+
+                            var viewVal = ngModelCtrl.$viewValue;
+                            scope.currentModelValue = viewVal;
+
+                            //wait for min, max and step to be set then only update UI to avoid NaN on percent calculation
+                            if ((min || min === 0) && max && step) {
+                                updateKnobPosition(getValueToPercent(viewVal));
+                            }
+                        };
+
+                        var setModelValue = function(val) {
+                            scope.currentModelValue = getValidMinMax(getValidStep(val));
+                            ngModelCtrl.$setViewValue(scope.currentModelValue);
+                        };
+
+                        var updateMin = function(val) {
+                            min = parseFloat(val);
+                            if(isNaN(min)){
+                               min = b2bSeekBarConfig.min; 
+                            }
+                            modelRenderer();
+                        };
+
+                        var updateMax = function(val) {
+                            max = parseFloat(val);
+                            if(isNaN(max)){
+                               max = b2bSeekBarConfig.max; 
+                            }
+                            modelRenderer();
+                        };
+
+                        var updateStep = function(val) {
+                            step = parseFloat(val);
+                            if (!attr['skipInterval']) {
+                                skipInterval = step;
+                            }
+                        };
+
+                        var updateSkipInterval = function(val) {
+                            skipInterval = step * Math.ceil(val / (step!==0?step:1));
+                        };
+
+                        angular.isDefined(attr.min) ? attr.$observe('min', updateMin) : updateMin(b2bSeekBarConfig.min);
+                        angular.isDefined(attr.max) ? attr.$observe('max', updateMax) : updateMax(b2bSeekBarConfig.max);
+                        if (angular.isDefined(attr.step)) {
+                            attr.$observe('step', updateStep);
+                        }
+                        if (angular.isDefined(attr.skipInterval)) {
+                            attr.$observe('skipInterval', updateSkipInterval);
+                        }
+                        scope.currentModelValue = getValidMinMax(getValidStep(min));
+                        var onMouseDown = function(e) {
+                            switch (e.which) {
+                                case 1:
+                                    // left mouse button
+                                    break;
+                                case 2:
+                                case 3:
+                                    // right or middle mouse button
+                                    return;
+                            }
+                            ;
+
+                            scope.isDragging = true;
+                            seekBarKnob[0].focus();
+                            updateTrackContainerRect();
+                            if (attr['onDragInit']) {
+                                scope.onDragInit();
+                            }
+                            events.stopPropagation(e);
+                            events.preventDefault(e);
+                             scope.$apply(function() {
+                                setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));
+                            });
+                        };
+
+                        var onMouseUp = function() {
+
+                            if (attr['onDragEnd']) {
+                                scope.onDragEnd();
+                            }
+                            scope.isDragging = false;
+                            scope.$digest();
+                        };
+
+                        var onMouseMove = function(e) {
+                            if (scope.isDragging) {
+                                events.stopPropagation(e);
+                                events.preventDefault(e);
+
+                                scope.$apply(function() {
+                                    setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));
+                                });
+                            }
+                        };
+
+                        function onKeyDown(e) {
+                            if (!(e.keyCode)) {
+                                e.keyCode = e.which;
+                            }
+                            var updateStep;
+                            switch (e.keyCode) {
+                                case keymap.KEY.LEFT:
+                                    if (!scope.verticalSeekBar) {
+                                        updateStep = -skipInterval;
+                                    }
+                                    break;
+                                case keymap.KEY.RIGHT:
+                                    if (!scope.verticalSeekBar) {
+                                        updateStep = skipInterval;
+                                    }
+                                    break;
+                                case keymap.KEY.UP:
+                                    if (scope.verticalSeekBar) {
+                                        updateStep = skipInterval;
+                                    }
+                                    break;
+                                case keymap.KEY.DOWN:
+                                    if (scope.verticalSeekBar) {
+                                        updateStep = -skipInterval;
+                                    }
+                                    break;
+                                default:
+                                    return;
+                            }
+
+                            if (updateStep) {
+                                events.stopPropagation(e);
+                                events.preventDefault(e);
+                                scope.$apply(function() {
+                                    setModelValue(ngModelCtrl.$viewValue + updateStep);
+                                });
+                                if (attr['onDragEnd']) {
+                                scope.onDragEnd();
+                            }
+                            }
+                        }
+
+                        elm.on('keydown', onKeyDown);
+                        elm.on('mousedown', onMouseDown);
+
+                        $documentBind.event('mousemove', 'isDragging', onMouseMove, scope, true, 0);
+                        $documentBind.event('mouseup', 'isDragging', onMouseUp, scope, true, 0);
+
+                        ngModelCtrl.$render = function() {
+                            if (!scope.isDragging) {
+                                modelRenderer();
+                            }
+                        };
+                        ngModelCtrl.$viewChangeListeners.push(modelRenderer);
+                        ngModelCtrl.$formatters.push(getValidMinMax);
+                        ngModelCtrl.$formatters.push(getValidStep);
+                    }
+                };
+            }]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:selectorModule
+ *
+ * @description
+ *  <file src="src/selectorModule/docs/readme.md" />
+ *
+ * @usage
+ * <select name="myNameBig" type="large" b2b-dropdown ng-model="Controller Variable here">
+ *   <option b2b-dropdown-list option-repeat="option data here" imgsrc="image path" value="value">List Text</option>
+ * </select>
+ *
+ * <select name="myNameBig" type="large" b2b-dropdown ng-model="Controller Variable here">
+ * <option b2b-dropdown-list option-repeat="option data here" imgsrc="image path" value="value">List Text</option>
+ * </select>
+ *
+ * <select name="myNameBig" b2b-dropdown ng-model="Controller Variable here">
+ *   <optgroup b2b-dropdown-group label="Group Label here">
+ *     <option b2b-dropdown-list option-repeat="option data here" imgsrc="image path" value="value">List Text</option>
+ *   </optgroup>
+ * </select>
+ *
+ *  @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/selectorModule/docs/demo.html" />
+            <file src="src/selectorModule/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.selectorModule', ['b2b.att.dropdowns']);
+/**
+ * @ngdoc directive
+ * @name Layouts.att:separators
+ *
+ * @description
+ *  <file src="src/separators/docs/readme.md" />
+ *
+ * @usage
+
+ *
+ * @example
+ *  <section id="code">   
+ <b>HTML + AngularJS</b>
+ <example module="b2b.att">
+ <file src="src/separators/docs/demo.html" />
+ <file src="src/separators/docs/demo.js" />
+ </example>
+ </section>
+ *
+ */
+
+angular.module('b2b.att.separators', []);
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:slider
+ *
+ * @description
+ *  <file src="src/slider/docs/readme.md" />
+ *
+ * @usage
+ *  <b2b-slider min="0" max="400" step="1" no-aria-label skip-interval="1" ng-model="horizontalSliderVal" style="width:180px; margin: auto;" on-drag-end="onDragEnd()" on-drag-init="onDragStart()" label-id="slider-label" post-aria-label="postAriaLabel"></b2b-slider>
+ *
+ * @example
+    <section id="code">   
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/slider/docs/demo.html" />
+            <file src="src/slider/docs/demo.js" />
+        </example>
+    </section>
+ */
+
+angular.module('b2b.att.slider', ['b2b.att.utilities'])
+        .constant('SliderConfig', {
+            'min': 0,
+            'max': 100,
+            'step': 1,
+            'skipInterval': 1
+        })
+        .directive('b2bSlider', ['$documentBind', 'SliderConfig', 'keymap', '$compile', '$log', function($documentBind, SliderConfig, keymap, $compile, $log) {
+                return {
+                    restrict: 'AE',
+                    replace: true,
+                    require: 'ngModel',
+                    templateUrl: 'b2bTemplate/slider/slider.html',
+                    scope: {
+                        onDragEnd: '&?',
+                        onDragInit: '&?',
+                        trackFillColor: '=?',
+                        preAriaLabel: '=?',
+                        postAriaLabel: '=?',
+                        onRenderEnd: '&?',
+                        sliderSnapPoints: '=?',
+                        customAriaLabel: '=?',
+                        labelId: '@?'
+                    },
+                    link: function(scope, elm, attr, ngModelCtrl) {
+                        scope.isDragging = false;
+                        scope.verticalSlider = false;
+                        var min;
+                        var max;
+                        var step = SliderConfig.step;
+                        var skipInterval = SliderConfig.skipInterval;
+                        var knob = angular.element(elm[0].querySelector('.slider-knob-container'));
+                        var sliderKnob = angular.element(knob[0].querySelector('.slider-knob'));
+                        var trackContainer = angular.element(elm[0].querySelector('.slider-track-container'));
+                        var trackFill = angular.element(elm[0].querySelector('.slider-track-fill'));
+                        var trackContainerRect = {};
+                        var axisPosition = "clientX";
+                        var trackFillOrderPositioning;
+
+                        //Forcefully disabling the vertical Slider code.
+                        if (angular.isDefined(attr.vertical)) {
+                            scope.verticalSlider = true;
+                            axisPosition = "clientY";
+                        }
+
+                        if (angular.isDefined(scope.noAriaLabel) && scope.noAriaLabel !== '') {
+                            $log.warn('no-aria-label has been deprecated. This will be removed in v0.6.0.');
+                        }
+                        if (angular.isDefined(scope.preAriaLabel) && scope.preAriaLabel !== '') {
+                            $log.warn('pre-aria-label has been deprecated. Please use label-id instead. This will be removed in v0.6.0.');
+                        }
+                        if (angular.isDefined(scope.customAriaLabel) && scope.customAriaLabel !== '') {
+                            $log.warn('custom-aria-label has been deprecated. Please use label-id and post-aria-label instead. This will be removed in v0.6.0.');
+                        }
+
+                        var binarySearchNearest = function (num, arr) {
+                            var mid;
+                            var lo = 0;
+                            var hi = arr.length - 1;
+                            
+                            while (hi - lo > 1) {
+                                mid = Math.floor((lo + hi) / 2);
+                                if (arr[mid] < num) {
+                                    lo = mid;
+                                } else {
+                                    hi = mid;
+                                }
+                            }
+                            if (num - arr[lo] < arr[hi] - num) {
+                                return arr[lo];
+                            }
+                            return arr[hi];
+                        };
+                        
+                        var getValidStep = function(val) {
+                            val = parseFloat(val);
+                            // in case $modelValue came in string number
+                            if (!isNaN(val)) {
+                                
+                                if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {
+                                    val = binarySearchNearest(val, scope.sliderSnapPoints);
+                                }
+                                else {
+                                    val = Math.round((val - min) / step) * step + min;
+                                }
+                                
+                                return Math.round(val * 1000) / 1000;
+                            }
+                        };
+
+                        var getPositionToPercent = function(x) {
+                            if (scope.verticalSlider) {
+                                return Math.max(0, Math.min(1, (trackContainerRect.bottom - x) / (trackFillOrderPositioning)));
+                            }
+                            else {
+                                return Math.max(0, Math.min(1, (x - trackContainerRect.left) / (trackFillOrderPositioning)));
+                            }
+                        };
+
+                        var getPercentToValue = function(percent) {
+                            return (min + percent * (max - min));
+                        };
+
+                        var getValueToPercent = function(val) {
+                            return (val - min) / (max - min);
+                        };
+
+                        var getValidMinMax = function(val) {
+                            return Math.max(min, Math.min(max, val));
+                        };
+
+                        var updateTrackContainerRect = function() {
+                            trackContainerRect = trackContainer[0].getBoundingClientRect();
+                            if (scope.verticalSlider) {
+                                if (!trackContainerRect.height) {
+                                    trackFillOrderPositioning = trackContainer[0].scrollHeight;
+                                } else {
+                                    trackFillOrderPositioning = trackContainerRect.height;
+                                }
+                            }
+                            else {
+                                if (!trackContainerRect.width) {
+                                    trackFillOrderPositioning = trackContainer[0].scrollWidth;
+                                } else {
+                                    trackFillOrderPositioning = trackContainerRect.width;
+                                }
+
+                            }
+
+                        };
+
+                        var updateKnobPosition = function(percent) {
+                            var percentStr = (percent * 100) + '%';
+                            if (scope.verticalSlider) {
+                                knob.css('bottom', percentStr);
+                                trackFill.css('height', percentStr);
+                            }
+                            else {
+                                knob.css('left', percentStr);
+                                trackFill.css('width', percentStr);
+                            }
+                        };
+
+                        var modelRenderer = function() {
+
+                            if(attr['disabled']){
+                                return;
+                            }
+
+                            if (isNaN(ngModelCtrl.$viewValue)) {
+                                ngModelCtrl.$viewValue = ngModelCtrl.$modelValue || min;
+                            }
+
+                            var viewVal = ngModelCtrl.$viewValue;
+                            scope.currentModelValue = viewVal;
+
+                            //wait for min, max and step to be set then only update UI to avoid NaN on percent calculation
+                            if ((min || min === 0) && max && step) {
+                                updateKnobPosition(getValueToPercent(viewVal));
+                            }
+                        };
+
+                        var setModelValue = function(val) {
+                            scope.currentModelValue = getValidMinMax(getValidStep(val));
+                            ngModelCtrl.$setViewValue(scope.currentModelValue);
+                        };
+
+                        var updateMin = function(val) {
+                            min = parseFloat(val);
+                            if(isNaN(min)){
+                               min = SliderConfig.min; 
+                            }
+                            scope.min = min;
+                            modelRenderer();
+                        };
+
+                        var updateMax = function(val) {
+                            max = parseFloat(val);
+                            if(isNaN(max)){
+                               max = SliderConfig.max; 
+                            }
+                            scope.max = max;
+                            modelRenderer();
+                        };
+
+                        var updateStep = function(val) {
+                            step = parseFloat(val);
+                            if (!attr['skipInterval']) {
+                                skipInterval = step;
+                            }
+                        };
+
+                        var updateSkipInterval = function(val) {
+                            skipInterval = step * Math.ceil(val / (step!==0?step:1));
+                        };
+
+                        angular.isDefined(attr.min) ? attr.$observe('min', updateMin) : updateMin(SliderConfig.min);
+                        angular.isDefined(attr.max) ? attr.$observe('max', updateMax) : updateMax(SliderConfig.max);
+                        if (angular.isDefined(attr.step)) {
+                            attr.$observe('step', updateStep);
+                        }
+                        if (angular.isDefined(attr.skipInterval)) {
+                            attr.$observe('skipInterval', updateSkipInterval);
+                        }
+                        scope.currentModelValue = getValidMinMax(getValidStep(min));
+                        var onMouseDown = function(e) {
+
+                            if(attr['disabled']){
+                                return;
+                            }
+
+                            switch (e.which) {
+                                case 1:
+                                    // left mouse button
+                                    break;
+                                case 2:
+                                case 3:
+                                    // right or middle mouse button
+                                    return;
+                            }
+
+                            scope.isDragging = true;
+                            sliderKnob[0].focus();
+                            updateTrackContainerRect();
+                            if (attr['onDragInit']) {
+                                scope.onDragInit();
+                            }
+                            e.stopPropagation();
+                            e.preventDefault();
+                             scope.$apply(function() {
+                                setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));
+                            });
+                        };
+
+                        var onMouseUp = function() {
+
+                            if (attr['onDragEnd']) {
+                                scope.onDragEnd();
+                            }
+                            scope.isDragging = false;
+                            scope.$digest();
+                        };
+
+                        var onMouseMove = function(e) {
+                            if (scope.isDragging) {
+                                e.stopPropagation();
+                                e.preventDefault();
+
+                                scope.$apply(function() {
+                                    setModelValue(getPercentToValue(getPositionToPercent(e[axisPosition])));
+                                });
+                            }
+                        };
+
+                        function onKeyDown(e) {
+                            if (!(e.keyCode)) {
+                                e.keyCode = e.which;
+                            }
+                            var updateStep;
+                            switch (e.keyCode) {
+                                case keymap.KEY.DOWN:
+                                case keymap.KEY.LEFT:
+                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {
+                                        var currentIndex = scope.sliderSnapPoints.indexOf(ngModelCtrl.$viewValue);
+                                        if (currentIndex > 0) {
+                                            currentIndex--;
+                                        }
+                                        updateStep = scope.sliderSnapPoints[currentIndex];
+                                    }
+                                    else {
+                                        updateStep = ngModelCtrl.$viewValue - skipInterval;
+                                    }
+                                    break;
+                                case keymap.KEY.UP:
+                                case keymap.KEY.RIGHT:
+                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {
+                                        var currentIndex = scope.sliderSnapPoints.indexOf(ngModelCtrl.$viewValue);
+                                        if (currentIndex < scope.sliderSnapPoints.length-1) {
+                                            currentIndex++;
+                                        }
+                                        updateStep = scope.sliderSnapPoints[currentIndex];
+                                    }
+                                    else {
+                                        updateStep = ngModelCtrl.$viewValue + skipInterval;
+                                    }
+                                    break;
+                                case keymap.KEY.END:
+                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {
+                                        currentIndex = scope.sliderSnapPoints.length-1;
+                                        updateStep = scope.sliderSnapPoints[currentIndex];
+                                    } else {
+                                        setModelValue(scope.max);
+                                    }
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    break;
+                                case keymap.KEY.HOME:
+                                    if(attr['sliderSnapPoints'] && scope.sliderSnapPoints.length > 0) {
+                                        currentIndex = 0;
+                                        updateStep = scope.sliderSnapPoints[currentIndex];
+                                    } else {
+                                        setModelValue(scope.min);
+                                    }
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    break;
+                                default:
+                                    return;
+                            }
+
+                            if (angular.isNumber(updateStep) && !attr['disabled']) {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                scope.$apply(function() {
+                                    setModelValue(updateStep);
+                                });
+                                if (attr['onDragEnd']) {
+                                    scope.onDragEnd();
+                                }
+                            }
+                        }
+
+                        elm.on('keydown', onKeyDown);
+                        elm.on('mousedown', onMouseDown);
+
+                        $documentBind.event('mousemove', 'isDragging', onMouseMove, scope, true, 0);
+                        $documentBind.event('mouseup', 'isDragging', onMouseUp, scope, true, 0);
+
+                        attr.$observe('disabled', function (disabled) {
+                            if (disabled) {
+                                sliderKnob.removeAttr('tabindex');
+                            } else {
+                                sliderKnob.attr('tabindex', '0');
+                                disabled = false;
+                            }
+
+                            elm.toggleClass("slider-disabled", disabled);
+
+                            if (angular.isDefined(attr.hideDisabledKnob)) {
+                                scope.hideKnob = disabled;
+                            }
+                        });
+
+                        ngModelCtrl.$render = function() {
+                            if (!scope.isDragging) {
+                                modelRenderer();
+                                if (attr['onRenderEnd'] && !attr['disabled']) {
+                                    scope.onRenderEnd({currentModelValue: scope.currentModelValue});
+                                }
+                            }
+                        };
+                        ngModelCtrl.$viewChangeListeners.push(modelRenderer);
+                        ngModelCtrl.$formatters.push(getValidMinMax);
+                        ngModelCtrl.$formatters.push(getValidStep);
+                    }
+                };
+            }]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:spinButton
+ *
+ * @param {String} spin-button-id - An ID for the input field
+ * @param {Integer} min - Minimum value for the input
+ * @param {Integer} max - Maximum value for the input
+ * @param {Integer} step - Value by which input field increments or decrements on up/down arrow keys
+ * @param {Integer} page-step - Value by which input field increments or decrements on page up/down keys
+ * @param {boolean} input-model-key - Default value for input field
+ * @param {boolean} disabled-flag - A boolean that triggers directive once the min or max value has reached
+ *
+ * @description
+ *  <file src="src/spinButton/docs/readme.md" />
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/spinButton/docs/demo.html" />
+            <file src="src/spinButton/docs/demo.js" />
+       </example>
+    </section>
+ * 
+ */
+angular.module('b2b.att.spinButton', ['b2b.att.utilities'])
+    .constant('b2bSpinButtonConfig', {
+        min: 1,
+        max: 10,
+        step: 1,
+        pageStep: 10,
+        inputModelKey: 'value',
+        disabledFlag: false
+    })
+    .directive('b2bSpinButton', ['keymap', 'b2bSpinButtonConfig', 'b2bUserAgent', function (keymap, b2bSpinButtonConfig, userAgent) {
+        return {
+            restrict: 'EA',
+            require: '?ngModel',
+            transclude: false,
+            replace: true,
+            scope: {
+                min: '=min',
+                max: '=max',
+                step: '=step',
+                pageStep: '=pageStep',
+                spinButtonId: '@',
+                inputValue: '=ngModel',
+                inputModelKey: '@',
+                disabledFlag: "=?"
+            },
+            templateUrl: 'b2bTemplate/spinButton/spinButton.html',
+            controller: ['$scope', '$element', '$attrs', function (scope, element, attrs) {
+
+                scope.isMobile = userAgent.isMobile();
+                scope.notMobile = userAgent.notMobile();
+
+                scope.min = attrs.min ? scope.min : b2bSpinButtonConfig.min;
+                scope.max = attrs.max ? scope.max : b2bSpinButtonConfig.max;
+                scope.step = attrs.step ? scope.step : b2bSpinButtonConfig.step;
+                scope.pageStep = attrs.pageStep ? scope.pageStep : b2bSpinButtonConfig.pageStep;
+                scope.inputModelKey = attrs.inputModelKey ? scope.inputModelKey : b2bSpinButtonConfig.inputModelKey;
+                scope.disabledFlag = attrs.disabledFlag ? scope.disabledFlag : b2bSpinButtonConfig.disabledFlag;
+                
+                if (scope.min < 0) {
+                    scope.min = 0;
+                }
+                if (scope.max > 999) {
+                    scope.max = 999;
+                }
+
+                scope.isPlusDisabled = function () {
+                    return (scope.disabledFlag || scope.inputValue[scope.inputModelKey] >= scope.max);
+                };
+                scope.isMinusDisabled = function () {
+                    return (scope.disabledFlag || scope.inputValue[scope.inputModelKey] <= scope.min);
+                };
+
+                scope.getValidateInputValue = function (value) {
+                    if (value <= scope.min) {
+                        return scope.min;
+                    } else if (value >= scope.max) {
+                        return scope.max;
+                    } else {
+                        return value;
+                    }
+                };
+
+                scope.plus = function () {
+                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) + scope.step);
+                };
+                scope.minus = function () {
+                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) - scope.step);
+                };
+                scope.pagePlus = function () {
+                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) + scope.pageStep);
+                };
+                scope.pageMinus = function () {
+                    scope.inputValue[scope.inputModelKey] = scope.getValidateInputValue(parseInt(scope.inputValue[scope.inputModelKey], 10) - scope.pageStep);
+                };
+
+            }],
+            link: function (scope, elem) {
+
+                if (scope.notMobile) {
+                    angular.element(elem).find('input').attr('aria-live', 'off');
+                    angular.element(elem).find('input').attr('role', 'spinbutton');
+                }
+
+                elem.find('input').bind('keydown', function (e) {
+                    if (e.keyCode === keymap.KEY.UP) {
+                        scope.plus();
+                    } else if (e.keyCode === keymap.KEY.DOWN){
+                        scope.minus();
+                    } else if (e.keyCode === keymap.KEY.HOME) {
+                        scope.inputValue[scope.inputModelKey] = parseInt(scope.min);
+                    } else if (e.keyCode === keymap.KEY.END) {
+                        scope.inputValue[scope.inputModelKey] = parseInt(scope.max);
+                    } else if (e.keyCode === keymap.KEY.PAGE_UP) {
+                        scope.pagePlus();
+                    } else if (e.keyCode === keymap.KEY.PAGE_DOWN) {
+                        scope.pageMinus();
+                    }
+                    scope.$apply();
+                });
+
+                elem.find('input').bind('keyup', function () {
+                    if (scope.inputValue[scope.inputModelKey] === null ||
+                        scope.inputValue[scope.inputModelKey] === '' ||
+                        scope.inputValue[scope.inputModelKey] < scope.min) {
+                        scope.inputValue[scope.inputModelKey] = scope.min;
+                        scope.$apply();
+                    } else if (angular.isUndefined(scope.inputValue[scope.inputModelKey]) || 
+                               scope.inputValue[scope.inputModelKey] > scope.max) {
+                        scope.inputValue[scope.inputModelKey] = scope.max;
+                        scope.$apply();
+                    }
+                });
+
+                scope.focusInputSpinButton = function (evt) {
+                    evt.preventDefault();
+                    if (scope.notMobile) {
+                        elem[0].querySelector('input').focus();
+                    }
+                };
+
+            }
+        };  
+    }]);
+/** 
+ * @ngdoc directive 
+ * @name Template.att:Static Route
+ * 
+ * @description 
+ *  <file src="src/staticRouteTemplate/docs/readme.md" /> 
+ * 
+ * @example 
+ *  <section id="code"> 
+        <example module="b2b.att"> 
+            <file src="src/staticRouteTemplate/docs/demo.html" /> 
+            <file src="src/staticRouteTemplate/docs/demo.js" /> 
+       </example> 
+    </section>    
+ * 
+ */
+angular.module('b2b.att.staticRouteTemplate', ['b2b.att.utilities'])
+  
+/**
+ * @ngdoc directive
+ * @name Progress & usage indicators.att:statusTracker
+ *
+ * @scope
+ * @param {array} statuses - An array of status objects
+ * @description
+ * <file src="src/statusTracker/docs/readme.md" />
+ *
+ * @usage
+ *
+<div ng-controller="statusTrackerController">
+    <b2b-status-tracker statuses="statusObject"></b2b-status-tracker>
+</div>
+
+ * @example
+    <section id="code">   
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/statusTracker/docs/demo.html" />
+            <file src="src/statusTracker/docs/demo.js" />
+        </example>
+    </section>
+ */
+
+angular.module('b2b.att.statusTracker', ['b2b.att.utilities'])
+.constant('b2bStatusTrackerConfig', {
+    'maxViewItems': 3
+})
+.directive('b2bStatusTracker', ['b2bStatusTrackerConfig', function(b2bStatusTrackerConfig) {
+        return {
+            restrict: 'EA',
+            transclude: false,
+            replace: true,
+            scope:{
+                statuses: '='
+            },
+            templateUrl: function(scope) {
+                return 'b2bTemplate/statusTracker/statusTracker.html';
+            },
+            link: function(scope, element, attr) {
+                scope.currentViewIndex = 0;
+                scope.b2bStatusTrackerConfig = b2bStatusTrackerConfig;
+
+                scope.nextStatus = function() {
+                    if (scope.currentViewIndex+1 <= scope.statuses.length) {
+                        scope.currentViewIndex++;
+                    }
+                };
+                scope.previousStatus = function() {
+                    if (scope.currentViewIndex-1 >= 0) {
+                        scope.currentViewIndex--;
+                    }
+                };
+                scope.isInViewport = function(index) {
+                    return (index < scope.currentViewIndex+3 && index >= scope.currentViewIndex);  // && index > scope.currentViewIndex-2
+                };
+                scope.currentStatus = function(index) {
+                    if(index != undefined){
+                        if(!scope.statuses[index].complete) {
+                            if(index > 0 && scope.statuses[index-1].complete) {
+                                return true;
+                            } else if(index == 0 && !scope.statuses[index].complete){
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        }
+                    }
+                };
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Progress & usage indicators.att:stepTracker
+ *
+ * @scope
+ * @param {array} stepsItemsObject - An array of step objects
+ * @param {Integer} currenIindex - This indicates the current running step
+ * @param {Integer} viewportIndex - This is optional. This can used to start the view port rather than 1 item.
+ * @description
+ * <file src="src/stepTracker/docs/readme.md" />
+ *
+ * @usage
+ *
+ *  <b2b-step-tracker steps-items-object="stepsObject" current-index="currentStepIndex" step-indicator-heading="stepHeading"></b2b-step-tracker>
+ *
+
+ * @example
+    <section id="code">   
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/stepTracker/docs/demo.html" />
+            <file src="src/stepTracker/docs/demo.js" />
+        </example>
+    </section>
+ */
+angular.module('b2b.att.stepTracker', ['b2b.att.utilities'])
+    .constant('b2bStepTrackerConfig', {
+        'maxViewItems': 5
+    })
+    .directive('b2bStepTracker', ['b2bStepTrackerConfig', function(b2bStepTrackerConfig) {
+        return {
+            restrict: 'EA',
+            transclude: true,
+            scope:{
+                stepsItemsObject:"=",
+                currentIndex:"=",
+                viewportIndex:"=?"
+            },
+            templateUrl: 'b2bTemplate/stepTracker/stepTracker.html',
+            link: function(scope, ele, attr) {
+                if (angular.isDefined(scope.viewportIndex)) {
+                    scope.currentViewIndex = scope.viewportIndex - 1;   
+                }else{
+                    scope.currentViewIndex = 0;
+                }
+               
+               scope.b2bStepTrackerConfig = b2bStepTrackerConfig;
+               scope.nextStatus = function() {
+                    if (scope.currentViewIndex+1 <= scope.stepsItemsObject.length) {
+                        scope.currentViewIndex++;
+                    }
+                };
+                scope.previousStatus = function() {
+                    if (scope.currentViewIndex-1 >= 0) {
+                        scope.currentViewIndex--;
+                    }
+                };
+                scope.isInViewport = function(index) {
+                    return (index < scope.currentViewIndex+b2bStepTrackerConfig.maxViewItems && index >= scope.currentViewIndex);
+                };
+            }
+        };
+    }]);
+     
+/**
+ * @ngdoc directive
+ * @name Buttons, links & UI controls.att:switches
+ *
+ * @description
+ *  <file src="src/switches/docs/readme.md" />
+ *
+ * @usage
+ *  
+ *  <!-- On / Off Toggle switch -->
+ *  <label for="switch1" class="controlled-text-wrap"> This is ON
+ *      <input type="checkbox" role="checkbox" b2b-switches id="switch1" ng-model="switch1.value">
+ *  </label>
+ *
+ *  <!-- On / Off Toggle switch and DISABLED -->
+ *  <label for="switch2" class="controlled-text-wrap"> This is ON (disabled)
+ *      <input type="checkbox" role="checkbox" b2b-switches id="switch2" ng-model="switch1.value" ng-disabled="true" >
+ *  </label> 
+ *
+ *
+ * @example
+ *  <section id="code">
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/switches/docs/demo.js" />
+            <file src="src/switches/docs/demo.html" />
+        </example>
+    </section>
+ */
+angular.module('b2b.att.switches', ['b2b.att.utilities'])
+    .directive('b2bSwitches', ['$compile', '$templateCache', 'keymap', 'events', function ($compile, $templateCache, keymap, events) {
+        return {
+            restrict: 'EA',
+            require: ['ngModel'],
+            link: function (scope, element, attrs, ctrl) {
+                var ngModelController = ctrl[0];
+        
+                element.parent().bind("keydown", function (e) {
+                    if (!attrs.disabled && (e.keyCode === keymap.KEY.ENTER || e.keyCode === keymap.KEY.SPACE)) {
+                        events.preventDefault(e);
+                        ngModelController.$setViewValue(!ngModelController.$viewValue);
+                        element.prop("checked", ngModelController.$viewValue);
+                    }
+                });
+
+                element.wrap('<div class="btn-switch">');
+                //element.attr("tabindex", -1);
+                if (navigator.userAgent.match(/iphone/i)){
+                    element.attr("aria-live", "polite");
+                }
+                else {
+                    element.removeAttr('aria-live');
+                }
+
+                var templateSwitch = angular.element($templateCache.get("b2bTemplate/switches/switches.html"));
+                if (angular.isDefined(attrs.typeSpanish)) {
+                    templateSwitch = angular.element($templateCache.get("b2bTemplate/switches/switches-spanish.html"));
+                }
+
+                templateSwitch = $compile(templateSwitch)(scope);
+                element.parent().append(templateSwitch);
+
+                element.bind("focus", function (e) {
+                    element.parent().addClass('focused');
+                });
+
+                element.bind("blur", function (e) {
+                    element.parent().removeClass('focused');
+                });
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Messages, modals & alerts.att:tableMessages
+ *
+ * @description
+ *  <file src="src/tableMessages/docs/readme.md" />
+ *
+ * @usage
+    <!-- no matching results -->
+    <b2b-table-message msg-type="'noMatchingResults'">
+       <p>No Matching Results</p>
+    </b2b-table-message>
+  
+    <!-- info could not load -->
+    <b2b-table-message msg-type="'infoCouldNotLoad'" on-refresh-click="refreshClicked()">
+    </b2b-table-message>
+   
+    <!-- magnify search -->
+    <b2b-table-message msg-type="'magnifySearch'">
+    </b2b-table-message>
+   
+    <!-- loading data -->
+    <b2b-table-message msg-type="'loadingTable'">
+          <!-- custom html -->
+          <p>The data is currently loading...</p>
+    </b2b-table-message>
+
+ * @example
+    <section id="code">   
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/tableMessages/docs/demo.html" />
+            <file src="src/tableMessages/docs/demo.js" />
+        </example>
+    </section>
+ */
+angular.module('b2b.att.tableMessages', [])
+    .directive('b2bTableMessage', [function() {
+        return {
+            restrict: 'AE',
+            replace: true,
+            transclude: true,
+            scope: {
+                msgType: '=',
+                onRefreshClick: '&'
+            },
+            templateUrl: 'b2bTemplate/tableMessages/tableMessage.html',
+            link: function(scope) {
+                scope.refreshAction = function(evt) {
+                    scope.onRefreshClick(evt);
+                };
+            }
+        };
+    }]);
+
+/**
+ * @ngdoc directive
+ * @name Tabs, tables & accordions.att:tableScrollbar
+ *
+ * @description
+ *  <file src="src/tableScrollbar/docs/readme.md" />
+ *
+ * @usage
+ * 
+<b2b-table-scrollbar>
+    <table>
+        <thead type="header">
+            <tr>
+                <th role="columnheader" scope="col" key="Id" id="col1">Id</th>
+                .....
+            </tr>
+        </thead>
+        <tbody type="body">
+            <tr>
+                <td id="rowheader0" headers="col1">1002</td>
+                .....
+            </tr>
+        </tbody>
+    </table>
+</b2b-table-scrollbar>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/tableScrollbar/docs/demo.html" />
+            <file src="src/tableScrollbar/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.tableScrollbar', [])
+    .directive('b2bTableScrollbar', ['$timeout', function ($timeout) {
+        return {
+            restrict: 'E',
+            scope: true,
+            transclude: true,
+            templateUrl: 'b2bTemplate/tableScrollbar/tableScrollbar.html',
+            link: function (scope, element, attrs, ctrl) {
+                var firstThWidth, firstTdWidth, firstColumnWidth, firstColumnHeight, trHeight = 0;
+                var pxToScroll = '';
+                var tableElement = element.find('table');
+                var thElements = element.find('th');
+                var tdElements = element.find('td');
+                var innerContainer = angular.element(element[0].querySelector('.b2b-table-inner-container'));
+                var outerContainer = angular.element(element[0].querySelector('.b2b-table-scrollbar'));
+
+                scope.disableLeft = true;
+                scope.disableRight = false;
+
+                if (angular.isDefined(thElements[0])) {
+                    firstThWidth = thElements[0].offsetWidth;
+                }
+                if (angular.isDefined(tdElements[0])) {
+                    firstTdWidth = tdElements[0].offsetWidth;
+                }
+                firstColumnWidth = (firstThWidth > firstTdWidth) ? firstThWidth : firstTdWidth;
+
+                innerContainer.css({
+                    'padding-left': (firstColumnWidth + 2) + 'px'
+                });
+
+                angular.forEach(element.find('tr'), function (eachTr, index) {
+                    trObject = angular.element(eachTr);
+                    firstColumn = angular.element(trObject.children()[0]);
+
+                    angular.element(firstColumn).css({
+                        'margin-left': -(firstColumnWidth + 2) + 'px',
+                        'width': (firstColumnWidth + 2) + 'px',
+                        'position': 'absolute'
+                    });
+
+                    trHeight = trObject[0].offsetHeight;
+                    firstColumnHeight = firstColumn[0].offsetHeight;
+                    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+                        firstColumnHeight += 1;
+                    }
+
+                    if (trHeight !== firstColumnHeight - 1) {
+                        if (trHeight > firstColumnHeight) {
+                            if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+                                trHeight -= 1;
+                            }
+                            angular.element(firstColumn).css({
+                                'height': (trHeight + 1) + 'px'
+                            });
+                        } else {
+                            angular.element(trObject).css({
+                                'height': (firstColumnHeight - 1) + 'px'
+                            });
+                        }
+                    }
+
+                });
+
+                pxToScroll = outerContainer[0].offsetWidth - firstColumnWidth;
+
+                scope.scrollLeft = function () {
+                    innerContainer[0].scrollLeft = innerContainer[0].scrollLeft + 20 - pxToScroll;
+                };
+
+                scope.scrollRight = function () {
+                    innerContainer[0].scrollLeft = innerContainer[0].scrollLeft + pxToScroll - 20;
+                };
+
+                scope.checkScrollArrows = function () {
+                    if (innerContainer[0].scrollLeft == 0) {
+                        scope.disableLeft = true;
+                    } else {
+                        scope.disableLeft = false;
+                    }
+
+                    if (((innerContainer[0].offsetWidth - firstColumnWidth) + innerContainer[0].scrollLeft) >= tableElement[0].offsetWidth) {
+                        scope.disableRight = true;
+                    } else {
+                        scope.disableRight = false;
+                    }
+                };
+
+                innerContainer.bind('scroll', function () {
+                    $timeout(function () {
+                        scope.checkScrollArrows();
+                    }, 1);
+                });
+
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Tabs, tables & accordions.att:tables
+ *
+ * @description
+ *  <file src="src/tables/docs/readme.md" />
+ *
+ * @usage
+ *   
+ Table
+ <table b2b-table table-data="tableData" search-string="searchString">
+    <thead b2b-table-row type="header">
+        <tr>
+            <th b2b-table-header key="requestId" default-sort="a" id="col1">Header 1</th>
+            <th b2b-table-header key="requestType" sortable="false" id="col2">Header 2</th>
+        </tr>
+    </thead>
+    <tbody b2b-table-row type="body" row-repeat="rowData in tableData">
+        <tr>
+            <td b2b-table-body id="rowheader{{$index}}" headers="col1" ng-bind="rowData['requestId']"> </td>
+            <td b2b-table-body ng-bind="rowData['requestType']"></td>
+        </tr>
+    </tbody>
+ </table>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/tables/docs/demo.html" />
+            <file src="src/tables/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.tables', ['b2b.att.utilities'])
+    .constant('b2bTableConfig', {
+        defaultSortPattern: false, // true for descending & false for ascending
+        highlightSearchStringClass: 'tablesorter-search-highlight',
+        zebraStripCutOff: 6, // > zebraStripCutOff
+        tableBreakpoints: [ // breakpoints are >= min and < max
+            {
+                min: 0,
+                max: 480,
+                columns: 2
+            },
+            {
+                min: 480,
+                max: 768,
+                columns: 3
+            },
+            {
+                min: 768,
+                max: 1025,
+                columns: 5
+            },
+            {
+                min: 1025,
+                max: 1920,
+                columns: 7
+            }
+        ]
+    })
+    .directive('b2bTable', ['$filter', '$window', 'b2bTableConfig', '$timeout', function ($filter, $window, b2bTableConfig, $timeout) {
+        return {
+            restrict: 'EA',
+            replace: true,
+            transclude: true,
+            scope: {
+                tableData: "=",
+                viewPerPage: "=",
+                currentPage: "=",
+                totalPage: "=",
+                searchCategory: "=",
+                searchString: "=",
+                nextSort: '='
+            },
+            require: 'b2bTable',
+            templateUrl: 'b2bTemplate/tables/b2bTable.html',
+            controller: ['$scope', '$attrs', function ($scope, $attrs) {
+                this.headers = [];
+                this.currentSortIndex = null;
+                this.responsive = $scope.responsive = $attrs.responsive;
+                this.maxTableColumns = -1;
+                this.totalTableColums = 0;
+                this.active = $scope.active = false;
+                this.responsiveRowScopes = [];
+                this.hideColumnPriority = [];
+                this.hiddenColumn = [];
+                this.setIndex = function (headerScope, priority) {
+                    this.headers.push(headerScope);
+                    if (this.responsive) {
+                        this.totalTableColums++;
+                        if (!isNaN(priority)) {
+                            this.hideColumnPriority[priority] = this.totalTableColums - 1;
+                        } else {
+                            this.hideColumnPriority[this.totalTableColums - 1] = this.totalTableColums - 1;
+                        }
+                    }
+                    return this.totalTableColums - 1;
+                };
+                this.getIndex = function (headerName) {
+                    for (var i = 0; i < this.headers.length; i++) {
+                        if (this.headers[i].headerName === headerName) {
+                            return this.headers[i].index;
+                        }
+                    }
+                    return null;
+                };
+                this.setResponsiveRow = function (responsiveRowScope) {
+                    this.responsiveRowScopes.push(responsiveRowScope);
+                }
+                $scope.nextSort = '';
+                this.sortData = function (columnIndex, reverse, externalSort) {
+                    if ($scope.$parent && $scope.$parent !== undefined) {
+                        $scope.$parent.columnIndex = columnIndex;
+                        $scope.$parent.reverse = reverse;
+                    }
+                    this.currentSortIndex = columnIndex;
+                    if (externalSort === true) {
+                        if (!reverse) {
+                            $scope.nextSort = 'd'
+                        } else {
+                            $scope.nextSort = 'a'
+                        }
+                    }
+                    $scope.currentPage = 1;
+                    this.resetSortPattern();
+                };
+                this.getSearchString = function () {
+                    return $scope.searchString;
+                };
+                this.resetSortPattern = function () {
+                    for (var i = 0; i < this.headers.length; i++) {
+                        var currentScope = this.headers[i];
+                        if (currentScope.index !== this.currentSortIndex) {
+                            currentScope.resetSortPattern();
+                        }
+                    }
+                };
+
+                $scope.$watch('nextSort', function (val) {
+                    if ($scope.$parent && $scope.$parent !== undefined) {
+                        $scope.$parent.nextSort = val;
+                    }
+
+                });
+            }],
+            link: function (scope, elem, attr, ctrl) {
+                scope.searchCriteria = {};
+                scope.tableBreakpoints = attr.tableConfig ? scope.$parent.$eval(attr.tableConfig) : angular.copy(b2bTableConfig.tableBreakpoints);
+                scope.$watchCollection('tableData', function (value) {
+                    if (value && !isNaN(value.length)) {
+                        scope.totalRows = value.length;
+                    }
+                });
+                scope.$watch('currentPage', function (val) {
+                    if (scope.$parent && scope.$parent !== undefined) {
+                        scope.$parent.currentPage = val;
+                    }
+
+                });
+                scope.$watch('viewPerPage', function (val) {
+                    if (scope.$parent && scope.$parent !== undefined) {
+                        scope.$parent.viewPerPage = val;
+                    }
+                });
+                scope.$watch('totalRows', function (val) {
+                    if (scope.$parent && scope.$parent !== undefined) {
+                        if (val > b2bTableConfig.zebraStripCutOff) {
+                            scope.$parent.zebraStripFlag = true;
+                        } else {
+                            scope.$parent.zebraStripFlag = false;
+                        }
+                    }
+                });
+                scope.$watch(function () {
+                    return scope.totalRows / scope.viewPerPage;
+                }, function (value) {
+                    if (!isNaN(value)) {
+                        scope.totalPage = Math.ceil(value);
+                        scope.currentPage = 1;
+                    }
+                });
+                var searchValCheck = function (val) {
+                    if (angular.isDefined(val) && val !== null && val !== "") {
+                        return true;
+                    }
+                };
+                var setSearchCriteria = function (v1, v2) {
+                    if (searchValCheck(v1) && searchValCheck(v2)) {
+                        var index = ctrl.getIndex(v2);
+                        scope.searchCriteria = {};
+                        if (index !== null) {
+                            scope.searchCriteria[index] = v1;
+                        }
+                    } else if (searchValCheck(v1) && (!angular.isDefined(v2) || v2 === null || v2 === "")) {
+                        scope.searchCriteria = {
+                            $: v1
+                        };
+                    } else {
+                        scope.searchCriteria = {};
+                    }
+                };
+                scope.$watch('searchCategory', function (newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        setSearchCriteria(scope.searchString, newVal);
+                    }
+                });
+                scope.$watch('searchString', function (newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        setSearchCriteria(newVal, scope.searchCategory);
+                    }
+                });
+                scope.$watchCollection('searchCriteria', function (val) {
+                    if (scope.$parent && scope.$parent !== undefined) {
+                        scope.$parent.searchCriteria = val;
+                    }
+                    scope.totalRows = scope.tableData && ($filter('filter')(scope.tableData, val, false)).length || 0;
+                    scope.currentPage = 1;
+                });
+                var window = angular.element($window);
+                var findMaxTableColumns = function () {
+                    var windowWidth;
+                    windowWidth = $window.innerWidth;
+                    ctrl.maxTableColumns = -1;
+                    for (var i in scope.tableBreakpoints) {
+                        if (windowWidth >= scope.tableBreakpoints[i].min && windowWidth < scope.tableBreakpoints[i].max) {
+                            ctrl.maxTableColumns = scope.tableBreakpoints[i].columns;
+                            break;
+                        }
+                    }
+                    if (ctrl.maxTableColumns > -1 && ctrl.totalTableColums > ctrl.maxTableColumns) {
+                        ctrl.active = true;
+                    } else {
+                        ctrl.active = false;
+                    }
+                    for (var i in ctrl.responsiveRowScopes) {
+                        ctrl.responsiveRowScopes[i].setActive(ctrl.active);
+                    }
+                };
+                var findHiddenColumn = function () {
+                    var columnDiffenence = ctrl.maxTableColumns > -1 ? ctrl.totalTableColums - ctrl.maxTableColumns : 0;
+                    ctrl.hiddenColumn = [];
+                    if (columnDiffenence > 0) {
+                        var tempHideColumnPriority = angular.copy(ctrl.hideColumnPriority);
+                        for (var i = 0; i < columnDiffenence; i++) {
+                            ctrl.hiddenColumn.push(tempHideColumnPriority.pop());
+                        }
+                    }
+                };
+                var resizeListener = function () {
+                    findMaxTableColumns();
+                    findHiddenColumn();
+                };
+                if (ctrl.responsive) {
+                    window.bind('resize', function () {
+                        resizeListener();
+                        scope.$apply();
+                    });
+                    $timeout(function () {
+                        resizeListener();
+                    }, 100);
+                }
+            }
+        };
+    }])
+    .directive('b2bTableRow', [function () {
+        return {
+            restrict: 'EA',
+            compile: function (elem, attr) {
+                if (attr.type === 'header') {
+                    angular.noop();
+                } else if (attr.type === 'body') {
+                    var html = elem.children();
+                    if (attr.rowRepeat) {
+                        html.attr('ng-repeat', attr.rowRepeat.concat(" | orderBy : columnIndex : reverse | filter : searchCriteria : false "));
+                    }
+                    html.attr('ng-class', "{'odd': $odd && zebraStripFlag}");
+                    html.attr('class', 'data-row');
+                    html.attr('b2b-responsive-row', '{{$index}}');
+                    elem.append(html);
+                }
+            }
+        };
+    }])
+    .directive('b2bTableHeader', ['b2bTableConfig', function (b2bTableConfig) {
+        return {
+            restrict: 'EA',
+            replace: true,
+            transclude: true,
+            scope: {
+                sortable: '@',
+                defaultSort: '@',
+                index: '@key'
+            },
+            require: '^b2bTable',
+            templateUrl: function (elem, attr) {
+                if (attr.sortable === 'false') {
+                    return 'b2bTemplate/tables/b2bTableHeaderUnsortable.html';
+                } else {
+                    return 'b2bTemplate/tables/b2bTableHeaderSortable.html';
+                }
+            },
+            link: function (scope, elem, attr, ctrl) {
+                var reverse = b2bTableConfig.defaultSortPattern;
+                scope.headerName = elem.text();
+                scope.headerId = elem.attr('id');
+                scope.sortPattern = null;
+                var priority = parseInt(attr.priority, 10);
+                scope.columnIndex = ctrl.setIndex(scope, priority);
+
+                scope.isHidden = function () {
+                    return (ctrl.hiddenColumn.indexOf(scope.columnIndex) > -1);
+                };
+
+                scope.$watch(function () {
+                    return elem.text();
+                }, function (value) {
+                    scope.headerName = value;
+                });
+                scope.sort = function (sortType) {
+                    if (typeof sortType === 'boolean') {
+                        reverse = sortType;
+                    }
+                    ctrl.sortData(scope.index, reverse, false);
+                    scope.sortPattern = reverse ? 'descending' : 'ascending';
+                    reverse = !reverse;
+                };
+                scope.$watch(function () {
+                    return ctrl.currentSortIndex;
+                }, function (value) {
+                    if (value !== scope.index) {
+                        scope.sortPattern = null;
+                    }
+                });
+
+                if (scope.sortable === undefined || scope.sortable === 'true' || scope.sortable === true) {
+                    scope.sortable = 'true';
+                } else if (scope.sortable === false || scope.sortable === 'false') {
+                    scope.sortable = 'false';
+                }
+
+                if (scope.sortable !== 'false') {
+                    if (scope.defaultSort === 'A' || scope.defaultSort === 'a') {
+                        scope.sort(false);
+                    } else if (scope.defaultSort === 'D' || scope.defaultSort === 'd') {
+                        scope.sort(true);
+                    }
+                }
+                scope.resetSortPattern = function () {
+                    reverse = b2bTableConfig.defaultSortPattern;
+                };
+            }
+        };
+    }])
+    .directive('b2bResponsiveRow', ['$templateCache', '$timeout', '$compile', function ($templateCache, $timeout, $compile) {
+        return {
+            restrict: 'EA',
+            require: '^b2bTable',
+            controller: ['$scope', function ($scope) {
+                this.rowValues = $scope.rowValues = [];
+                this.setRowValues = function (rowValue) {
+                    this.rowValues.push(rowValue);
+                };
+                var columnIndexCounter = -1;
+                this.getIndex = function () {
+                    columnIndexCounter++;
+                    return columnIndexCounter;
+                };
+            }],
+            link: function (scope, elem, attr, ctrl) {
+                if (ctrl.responsive) {
+                    scope.rowIndex = attr.b2bResponsiveRow;
+                    scope.active = false;
+                    scope.expandFlag = false;
+                    scope.headerValues = ctrl.headers;
+                    ctrl.setResponsiveRow(scope);
+                    var firstTd = elem.find('td').eq(0);
+                    scope.setActive = function (activeFlag) {
+                        scope.active = activeFlag;
+                        if (scope.active) {
+                            elem.addClass('has-button');
+                            firstTd.attr('role', 'rowheader');
+                            firstTd.parent().attr('role', 'row');
+                        } else {
+                            elem.removeClass('has-button');
+                            firstTd.removeAttr('role');
+                            firstTd.parent().removeAttr('role');
+                        }
+                    };
+                    scope.toggleExpandFlag = function (expandFlag) {
+                        if (angular.isDefined(expandFlag)) {
+                            scope.expandFlag = expandFlag;
+                        } else {
+                            scope.expandFlag = !scope.expandFlag;
+                        }
+                        if (scope.expandFlag) {
+                            elem.addClass('opened');
+                        } else {
+                            elem.removeClass('opened');
+                        }
+                    };
+
+                    firstTd.attr('scope', 'row');
+                    firstTd.addClass('col-1');
+                    scope.$on('$destroy', function () {
+                        elem.next().remove();
+                    });
+                    $timeout(function () {
+                        scope.firstTdId = firstTd.attr('id');
+                        var firstTdContent = firstTd.html();
+                        var toggleButtonTemplate = '<span ng-show="!active">' + firstTdContent + '</span><button type="button" aria-describedby="sup-actNum{{$id}}" aria-expanded="{{expandFlag}}" ng-show="active" ng-click="toggleExpandFlag()"><i ng-class="{\'icon-primary-accordion-plus\': !expandFlag, \'icon-primary-accordion-minus\': expandFlag}" aria-hidden="true"></i>' + firstTdContent + '</button><span id="sup-actNum{{$id}}" style="display:none">{{expandFlag && "Hide row below." || "Show row below."}}</span>';
+                        toggleButtonTemplate = $compile(toggleButtonTemplate)(scope);
+                        firstTd.html('');
+                        firstTd.prepend(toggleButtonTemplate);
+
+                        var template = $templateCache.get('b2bTemplate/tables/b2bResponsiveRow.html');
+                        template = $compile(template)(scope);
+                        elem.after(template);
+                    }, 100);
+                }
+            }
+        };
+    }])
+    .directive('b2bResponsiveList', ['$templateCache', '$timeout', '$compile', function ($templateCache, $timeout, $compile) {
+        return {
+            restrict: 'EA',
+            require: '^b2bTable',
+            link: function (scope, elem, attr, ctrl) {
+                scope.columnIndex = parseInt(attr.b2bResponsiveList, 10);
+                scope.isVisible = function () {
+                    return (ctrl.hiddenColumn.indexOf(scope.columnIndex) > -1);
+                };
+            }
+        };
+    }])
+    .directive('b2bTableBody', ['$filter', '$timeout', 'b2bTableConfig', function ($filter, $timeout, b2bTableConfig) {
+        return {
+            restrict: 'EA',
+            require: ['^b2bTable', '?^b2bResponsiveRow'],
+            scope: true,
+            replace: true,
+            transclude: true,
+            templateUrl: 'b2bTemplate/tables/b2bTableBody.html',
+            link: function (scope, elem, attr, ctrl) {
+                var b2bTableCtrl = ctrl[0];
+                var b2bResponsiveRowCtrl = ctrl[1];
+                var highlightSearchStringClass = b2bTableConfig.highlightSearchStringClass;
+                var searchString = "";
+                var wrapElement = function (elem) {
+                    var text = elem.text();
+                    elem.html($filter('b2bHighlight')(text, searchString, highlightSearchStringClass));
+                };
+                var traverse = function (elem) {
+                    var innerHtml = elem.children();
+                    if (innerHtml.length > 0) {
+                        for (var i = 0; i < innerHtml.length; i++) {
+                            traverse(innerHtml.eq(i));
+                        }
+                    } else {
+                        wrapElement(elem);
+                        return;
+                    }
+                };
+                var clearWrap = function (elem) {
+                    var elems = elem.find('*');
+                    for (var i = 0; i < elems.length; i++) {
+                        if (elems.eq(i).attr('class') && elems.eq(i).attr('class').indexOf(highlightSearchStringClass) !== -1) {
+                            var text = elems.eq(i).text();
+                            elems.eq(i).replaceWith(text);
+                        }
+                    }
+                };
+                if (b2bResponsiveRowCtrl) {
+                    scope.columnIndex = b2bResponsiveRowCtrl.getIndex();
+                    scope.isHidden = function () {
+                        return (b2bTableCtrl.hiddenColumn.indexOf(scope.columnIndex) > -1);
+                    };
+                }
+                $timeout(function () {
+                    var actualHtml = elem.children();
+                    scope.$watch(function () {
+                        return b2bTableCtrl.getSearchString();
+                    }, function (val) {
+                        searchString = val;
+                        clearWrap(elem);
+                        if (actualHtml.length > 0) {
+                            traverse(elem);
+                        } else {
+                            wrapElement(elem);
+                        }
+                    });
+                    if (b2bResponsiveRowCtrl) {
+                        b2bResponsiveRowCtrl.setRowValues(elem.html());
+                    }
+                }, 50);
+            }
+        };
+    }])
+    .directive('b2bTableSort', ['b2bTableConfig','$timeout', function (b2bTableConfig,$timeout) {
+        return {
+            restrict: 'EA',
+            replace: true,
+            require: '^b2bTable',
+            link: function (scope, elem, attr, ctrl) {
+                var initialSort = '',
+                    nextSort = '',
+                    tempsort = '';
+                initialSort = attr.initialSort;
+
+                scope.sortTable = function (msg) {
+                    $timeout(function(){
+                        if (nextSort.length > 0) {
+
+                        if (nextSort === 'd' || nextSort === 'D') {
+                            tempsort = nextSort
+                            ctrl.sortData(msg, true, true);
+                            nextSort = 'a';
+                             $timeout(function(){
+                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){
+                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();
+                                }   
+                            },100);
+                            
+                        } else {
+                            tempsort = nextSort
+                            ctrl.sortData(msg, false, true);
+                            nextSort = 'd';
+                             $timeout(function(){
+                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){
+                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();
+                                }   
+                            },100);
+                        }
+                    } else if (initialSort.length > 0) {
+
+                        if (initialSort === 'd' || initialSort === 'D') {
+                            tempsort = nextSort
+                            ctrl.sortData(msg, true, true);
+                            nextSort = 'a';
+                            $timeout(function(){
+                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){
+                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();
+                                }   
+                            },100);
+                             
+                        } else {
+                            tempsort = nextSort
+                            ctrl.sortData(msg, false, true);
+                            nextSort = 'd';
+                             $timeout(function(){
+                                if(!angular.isUndefined(elem[0].querySelector('.sortButton')) || elem[0].querySelector('.sortButton') !== null ){
+                                    angular.element(elem[0].querySelector('.sortButton'))[0].focus();
+                                }   
+                            },100);
+
+                             
+                        }
+                    }
+                    },10)
+
+                };
+
+                scope.sortDropdown = function(msg) {
+
+                    if(tempsort==='') {
+
+                        tempsort='a'
+                    }
+                    if(tempsort === 'd' || tempsort === 'D' ) {
+                        ctrl.sortData(msg, true, false);       
+                    } else {
+                       ctrl.sortData(msg, false, false);
+                    }
+
+                };
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Tabs, tables & accordions.att:tabs
+ *
+ * @description
+ *  <file src="src/tabs/docs/readme.md" />
+ *
+ * @usage
+ *  <b2b-tabset tab-id-selected="activeTabsId">
+        <b2b-tab ng-repeat="tab in gTabs" tab-item="tab" 
+                 id="{{tab.uniqueId}}" aria-controls="{{tab.tabPanelId}}"
+                 ng-disabled="tab.disabled">
+            {{tab.title}}
+        </b2b-tab>
+    </b2b-tabset>
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/tabs/docs/demo.html" />
+            <file src="src/tabs/docs/demo.js" />
+        </example>
+    </section>
+ *
+ */
+
+angular.module('b2b.att.tabs', ['b2b.att.utilities'])
+    .directive('b2bTabset', function () {
+        return {
+            restrict: 'EA',
+            transclude: true,
+            replace: true,
+            scope: {
+                tabIdSelected: '='
+            },
+            templateUrl: 'b2bTemplate/tabs/b2bTabset.html',
+            controller: ['$scope', function ($scope) {
+
+                this.setTabIdSelected = function (tab) {
+                    $scope.tabIdSelected = tab.id;
+                };
+
+                this.getTabIdSelected = function () {
+                    return $scope.tabIdSelected;
+                };
+            }]
+        };
+    })
+    .directive('b2bTab', ['keymap', function (keymap) {
+        return {
+            restrict: 'EA',
+            transclude: true,
+            replace: true,
+            require: '^b2bTabset',
+            scope: {
+                tabItem: "="
+            },
+            templateUrl: 'b2bTemplate/tabs/b2bTab.html',
+            controller: [function(){}],
+            link: function (scope, element, attr, b2bTabsetCtrl) {
+
+                if (scope.tabItem && !scope.tabItem.disabled) {
+                    scope.tabItem.disabled = false;
+                }
+
+                scope.isTabActive = function () {
+                    return (scope.tabItem.id === b2bTabsetCtrl.getTabIdSelected());
+                };
+
+                scope.clickTab = function () {
+                    if (attr.disabled) {
+                        return;
+                    }
+                    b2bTabsetCtrl.setTabIdSelected(scope.tabItem);
+                };
+
+                scope.nextKey = function () {
+                    var el = angular.element(element[0])[0];
+                    var elementToFocus = null;
+                    while (el && el.nextElementSibling) {
+                        el = el.nextElementSibling;
+                        if (!el.querySelector('a').disabled) {
+                            elementToFocus = el.querySelector('a');
+                            break;
+                        }
+                    }
+
+                    if (!elementToFocus) {
+                        var childTabs = element.parent().children();
+                        for (var i = 0; i < childTabs.length; i++) {
+                            if (!childTabs[i].querySelector('a').disabled) {
+                                elementToFocus = childTabs[i].querySelector('a');
+                                break;
+                            }
+                        }
+                    }
+
+                    if (elementToFocus) {
+                        elementToFocus.focus();
+                    }
+                };
+
+                scope.previousKey = function () {
+                    var el = angular.element(element[0])[0];
+                    var elementToFocus = null;
+
+                    while (el && el.previousElementSibling) {
+                        el = el.previousElementSibling;
+                        if (!el.querySelector('a').disabled) {
+                            elementToFocus = el.querySelector('a');
+                            break;
+                        }
+                    }
+
+                    if (!elementToFocus) {
+                        var childTabs = element.parent().children();
+                        for (var i = childTabs.length - 1; i > 0; i--) {
+                            if (!childTabs[i].querySelector('a').disabled) {
+                                elementToFocus = childTabs[i].querySelector('a');
+                                break;
+                            }
+                        }
+                    }
+
+                    if (elementToFocus) {
+                        elementToFocus.focus();
+                    }
+                };
+
+                angular.element(element[0].querySelector('a')).bind('keydown', function (evt) {
+
+                    if (!(evt.keyCode)) {
+                        evt.keyCode = evt.which;
+                    }
+
+                    switch (evt.keyCode) {
+                        case keymap.KEY.RIGHT:
+                            evt.preventDefault();
+                            scope.nextKey();
+                            break;
+
+                        case keymap.KEY.LEFT:
+                            evt.preventDefault();
+                            scope.previousKey();
+                            break;
+
+                        default:;
+                    }
+                });
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Messages, modals & alerts.att:tagBadges
+ *
+ * @description
+ *  <file src="src/tagBadges/docs/readme.md" />
+ *
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/tagBadges/docs/demo.html" />
+            <file src="src/tagBadges/docs/demo.js" />
+        </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.tagBadges', ['b2b.att.utilities'])
+        .directive('b2bTagBadge',['$timeout',function($timeout){
+            return{
+                restrict: 'EA',
+                link: function(scope,elem,attr,ctrl){
+                    elem.addClass('b2b-tags');
+                    if(angular.element(elem[0].querySelector('.icon-primary-close')).length>0) {
+                        var item = angular.element(elem[0].querySelector('.icon-primary-close'));
+                        item.bind('click',function(){
+                        elem.css({'height':'0','width':'0','padding':'0','border':'0'});
+                        elem.attr('tabindex','0');
+                        elem[0].focus();
+                        item.parent().remove();
+                        elem[0].bind('blur',function(){
+                            elem[0].remove();
+                        });
+                    });  
+                    }
+                  
+
+
+
+                }
+            };   
+}]);
+/**
+ * @ngdoc directive
+ * @name Forms.att:textArea
+ *
+ * @description
+ *  <file src="src/textArea/docs/readme.md" />
+ *
+ * @usage
+ *  <textarea b2b-reset b2b-reset-textarea ng-model="textAreaModel" ng-disabled="disabled" ng-trim="false" placeholder="{{placeholderText}}" rows="{{textAreaRows}}" maxlength="{{textAreaMaxlength}}" role="textarea"></textarea>
+ *
+ * @example
+    <section id="code">
+        <b>HTML + AngularJS</b>
+        <example module="b2b.att">
+            <file src="src/textArea/docs/demo.html" />
+            <file src="src/textArea/docs/demo.js" />
+        </example>
+    </section>
+ */
+angular.module('b2b.att.textArea', ['b2b.att.utilities'])
+
+.directive('b2bResetTextarea', [ function () {
+    return {
+        restrict: 'A',
+        require: 'b2bReset',
+        link: function (scope, element, attrs, ctrl) {
+
+            var resetButton = ctrl.getResetButton();
+            
+            var computeScrollbarAndAddClass = function () {
+                if (element.prop('scrollHeight') > element[0].clientHeight) {
+                    element.addClass('hasScrollbar');
+                } else {
+                    element.removeClass('hasScrollbar');
+                }
+            };
+            
+            computeScrollbarAndAddClass();
+
+            element.on('focus keyup', function(){
+                computeScrollbarAndAddClass();
+            });
+        }
+    };
+}]);
+
+/**
+ * @ngdoc directive
+ * @name Forms.att:tooltipsForForms
+ *
+ * @description
+ *  <file src="src/tooltipsForForms/docs/readme.md" />
+ *
+ * @example
+ <example module="b2b.att">
+ <file src="src/tooltipsForForms/docs/demo.html" />
+ <file src="src/tooltipsForForms/docs/demo.js" />
+ </example>
+ */
+angular.module('b2b.att.tooltipsForForms', ['b2b.att.utilities'])
+        .directive('b2bTooltip', ['$document', '$window', '$isElement', function ($document, $window, $isElement) {
+                return  {
+                    restrict: 'A',
+                    link: function (scope, elem, attr, ctrl) {
+                        var icon = elem[0].querySelector('a.tooltip-element');
+                        var btnIcon = elem[0].querySelector('.btn.tooltip-element');
+                        var tooltipText = elem[0].querySelector('.helpertext');
+                        var tooltipWrapper = elem[0].querySelector('.tooltip-size-control');
+                        if (elem.hasClass('tooltip-onfocus')) {
+                            var inputElm = angular.element(elem[0].querySelector("input"));
+                            var textAreaElm = angular.element(elem[0].querySelector("textarea"));
+                        }
+                        angular.element(icon).attr({'aria-expanded': false});
+                        angular.element(btnIcon).attr({'aria-expanded': false});
+                        var calcTooltip = function () {
+                            if (!elem.hasClass('tooltip active')) {
+                                if (elem.hasClass('tooltip-onfocus')) {
+                                    angular.element(elem[0].querySelector("input")).triggerHandler('focusout');
+                                }
+                                if (elem.hasClass('tooltip-onclick')) {
+                                    return false;
+                                }
+                                angular.element(icon).removeClass('active');
+                                angular.element(icon).attr({'aria-expanded': true});
+                                angular.element(icon).attr({'aria-describedby': angular.element(tooltipText).attr('id')});
+                                angular.element(tooltipText).attr({'aria-hidden': false});
+                                elem.addClass('active');
+
+                                var tooltipIconPos = angular.element(icon).prop('offsetLeft'),
+                                        tooltipPosition = angular.element(tooltipText).prop('offsetWidth') / 2,
+                                        tipOffset = (tooltipIconPos - 30) - tooltipPosition,
+                                        maxRightPos = (($window.innerWidth - 72) - (tooltipPosition * 2)) - 14.5;
+
+                                if ($window.innerWidth >= '768') {
+                                    if (tipOffset < 0) {// if icon on far left side of page
+                                        tipOffset = 15;
+                                    }
+                                    else if (tooltipIconPos > maxRightPos) {// if icon is far right side of page
+                                        tipOffset = maxRightPos;
+                                    }
+                                    else {// if tooltip in the middle somewhere
+                                        tipOffset = tipOffset;
+                                    }
+                                    angular.element(tooltipWrapper).css({left: tipOffset + 'px'});
+                                }
+                            }
+                        };
+                        
+                        // TOOLTIP LINK ONCLICK AND FOCUS
+                        angular.element(icon).on('click mouseover mouseout focus blur', function (e) {
+                            if (e.type == 'mouseover') {
+                                calcTooltip();
+                            }
+                            else if (e.type == 'mouseout' && elem.hasClass('active')) {
+                                if (!elem.hasClass('activeClick')) {
+                                    angular.element(tooltipText).attr({
+                                        'aria-hidden': true,
+                                        'tabindex': '-1'
+                                    });
+                                    elem.removeClass('active');
+                                } else if (elem.hasClass('activeClick') && navigator.userAgent.match(/iphone/i)) {
+                                    elem.removeClass('active activeClick');
+                                }
+                            }
+
+                            else {
+                                if (elem.hasClass('activeClick')) {
+                                    angular.element(icon).attr({'aria-expanded': false});
+                                    angular.element(tooltipText).attr({'aria-hidden': true});
+                                    angular.element(icon).removeAttr('aria-describedby');
+                                    elem.removeClass('activeClick active');
+                                    e.preventDefault();
+                                }
+                                else if (e.type == 'click') {
+                                    elem.addClass('activeClick');
+                                    calcTooltip();
+                                    e.preventDefault();
+                                }
+                                else {
+                                    angular.element(icon).on('keydown', function (e) {
+                                        if (e.keyCode == '32') {
+                                            (elem.hasClass('active')) ? elem.removeClass('active') : elem.addClass('value');
+                                            angular.element(icon).triggerHandler('click');
+                                            e.preventDefault();
+                                        } else if (e.keyCode == '27') {
+                                            (elem.hasClass('active')) ? elem.removeClass('active activeClick') : elem.addClass('value');
+                                        }
+                                    });
+                                    e.preventDefault();
+                                }
+                            }
+                            e.preventDefault();
+                        });
+
+                        // TOOLTIP BUTTON INSIDE A TEXT FIELD
+                        angular.element(btnIcon).on('click', function (e) {
+                            var $this = angular.element(this);
+                            if ($this.hasClass('active') && elem.hasClass('tooltip-onclick')) {
+                                elem.removeClass('active');
+                                $this.removeClass('active');
+                                angular.element(tooltipText).removeAttr('aria-live');
+                                $this.attr({'aria-expanded': 'false'});
+                                $this.removeAttr('aria-describedby');
+                            } else {
+                                elem.addClass('active');
+                                $this.addClass('active');
+                                $this.attr({'aria-expanded': 'true', 'aria-describedby': angular.element(tooltipText).attr('id')});
+                                angular.element(tooltipText).attr({'aria-live': 'polite'});
+                            }
+                        });
+
+                        angular.element(btnIcon).on('blur', function (e) {
+                            var $this = angular.element(this);
+                            if ($this.hasClass('active') && elem.hasClass('tooltip-onclick')) {
+                                elem.removeClass('active');
+                                $this.removeClass('active');
+                                angular.element(tooltipText).removeAttr('aria-live');
+                                $this.attr({'aria-expanded': 'false'});
+                                $this.removeAttr('aria-describedby');
+                            }
+                        });  
+
+                        angular.element(btnIcon).on('keydown', function (e) {
+                            var $this = angular.element(this);
+                            if (e.keyCode == '27') {
+                                var $this = angular.element(this);
+                                if ($this.hasClass('active') && elem.hasClass('tooltip-onclick')) {
+                                    elem.removeClass('active');
+                                    $this.removeClass('active');
+                                    angular.element(tooltipText).removeAttr('aria-live');
+                                    $this.attr({'aria-expanded': 'false'});
+                                    $this.removeAttr('aria-describedby');
+                                }
+                            }
+                        });
+
+                        // close all tooltips if clicking something else
+                        $document.bind('click', function (e) {
+                            var isElement = $isElement(angular.element(e.target), elem, $document);
+                            if (!isElement) {
+                                elem.removeClass('active');
+                                angular.element(elem[0].querySelector('.tooltip-element')).removeClass('active');
+                                angular.element(tooltipText).removeAttr('aria-live');
+                                angular.element(elem[0].querySelector('.tooltip-element')).attr({'aria-expanded': 'false'});
+                                angular.element(elem[0].querySelector('.tooltip-element')).removeAttr('aria-describedby');
+                            };
+                        });
+
+                        angular.element(inputElm).on('keydown', function (e) {
+                            if (e.keyCode == '27'){
+                                elem.removeClass('active');
+                                angular.element(tooltipText).css('display', 'none');
+                                angular.element(tooltipText).removeAttr('aria-live');
+
+                                if (angular.element(this).attr('aria-describedby') === undefined){
+
+                                }
+
+                                else if ((spaceIndex = angular.element(this).attr('aria-describedby').lastIndexOf(' ')) >= 0){
+
+                                    var describedByValue = angular.element(this).attr('aria-describedby').slice(0, spaceIndex);
+
+                                    angular.element(this).attr('aria-describedby', describedByValue);
+
+                                }
+                                else {
+                                    angular.element(this).removeAttr('aria-describedby');
+                                }
+                            }
+                        });
+
+                        angular.element(textAreaElm).on('keydown', function (e) {
+                            if (e.keyCode == '27'){
+                                elem.removeClass('active');
+                                angular.element(tooltipText).css('display', 'none');
+                                angular.element(tooltipText).removeAttr('aria-live');
+                                if (angular.element(this).attr('aria-describedby') === undefined){
+
+                                }
+
+                                else if ((spaceIndex = angular.element(this).attr('aria-describedby').lastIndexOf(' ')) >= 0){
+
+                                    var describedByValue = angular.element(this).attr('aria-describedby').slice(0, spaceIndex);
+
+                                    angular.element(this).attr('aria-describedby', describedByValue);
+
+                                }
+                                else {
+                                    angular.element(this).removeAttr('aria-describedby');
+                                }
+                            }
+                        });
+
+                        // TOOLTIP TRIGGERED AUTOMATICALLY INSIDE A TEXT FIELD
+                        angular.element(inputElm).on('focus', function (e) {
+                            var allTooltip = $document[0].querySelectorAll('[class*="tooltip"]');
+                            for (var i = 0; i < allTooltip.length; i++) {
+                                if (angular.element(allTooltip[i]).hasClass('active')) {
+                                    angular.element(allTooltip[i]).triggerHandler('click');
+                                }
+                            };
+                            angular.element(this).attr({'aria-describedby': angular.element(tooltipText).attr('id')});
+                            angular.element(tooltipText).css('display', 'block');
+                            angular.element(tooltipText).attr({'aria-live': 'polite'});
+                            elem.addClass('active');
+                        });
+                        angular.element(inputElm).on('blur', function (e) {
+                            elem.removeClass('active');
+                            angular.element(tooltipText).css('display', 'none');
+                            angular.element(tooltipText).removeAttr('aria-live');
+                            angular.element(this).removeAttr('aria-describedby');
+                        });
+
+                        // TOOLTIP TRIGGERED AUTOMATICALLY INSIDE A TEXTAREA
+                        angular.element(textAreaElm).on('focus', function (e) {
+                            var allTooltip = $document[0].querySelectorAll('[class*="tooltip"]');
+                            for (var i = 0; i < allTooltip.length; i++) {
+                                if (angular.element(allTooltip[i]).hasClass('active')) {
+                                    angular.element(allTooltip[i]).triggerHandler('click');
+                                }
+                            };
+                            elem.addClass('active');
+                            angular.element(tooltipText).css('display', 'block');
+                            angular.element(tooltipText).attr({'aria-live': 'polite'});
+                            angular.element(this).attr({'aria-describedby': angular.element(tooltipText).attr('id')});
+                        });
+                        angular.element(textAreaElm).on('blur', function (e) {
+                            elem.removeClass('active');
+                            angular.element(tooltipText).css('display', 'none');
+                            angular.element(tooltipText).removeAttr('aria-live');
+                            angular.element(this).removeAttr('aria-describedby');
+                        });
+                    }
+                };
+            }]); 
+/**
+ * @ngdoc directive
+ * @name Navigation.att:TreeNavigation
+ *
+ *
+ * @scope
+ * @param {String} setRole - This value needs to be "tree". This is required to incorporate CATO requirements.
+ * @param {Boolean} groupIt - This value needs to be "false" for top-level tree rendered.
+ *
+ * @description
+ *  <file src="src/treeNav/docs/readme.md" />
+ *
+ * @usage
+ *      <div class="b2b-tree">
+ *                <b2b-tree-nav collection="treeStructure" set-role="tree" group-it="false"></b2b-tree-nav>
+ *            </div>
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/treeNav/docs/demo.html" />
+            <file src="src/treeNav/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.treeNav', ['b2b.att.utilities'])
+    .directive('b2bTreeNav', function () {
+        return {
+            restrict: "E",
+            replace: true,
+            scope: {
+                collection: '=',
+                groupIt: '=',
+                setRole: '@'
+            },
+            templateUrl: function (element, attrs) {
+                if (attrs.groupIt === 'true') {
+                    return "b2bTemplate/treeNav/groupedTree.html";
+                } else {
+                    return "b2bTemplate/treeNav/ungroupedTree.html";
+                }
+            },
+            link: function (scope) {               
+                if (!(scope.setRole === 'tree')) {
+                    scope.setRole = 'group';
+                }             
+            }
+        }
+    })
+    .directive('b2bMember', ['$compile', '$timeout', 'keymap', function ($compile, $timeout, keymap) {
+        return {
+            restrict: "E",
+            replace: true,
+            scope: {
+                member: '=',
+                groupIt: '='
+            },
+            templateUrl: 'b2bTemplate/treeNav/treeMember.html',
+            link: function (scope, element, attrs) {
+                scope.elemArr = [];
+                var removeRootTabIndex = function (elem) {
+                    if (elem.parent().parent().eq(0).hasClass('b2b-tree')) {
+                        elem.attr('tabindex', -1);                        
+                        return;
+                    }
+                    removeRootTabIndex(elem.parent());
+                };
+                scope.$watch('member.child', function(newVal, oldVal){                  
+                    if(newVal !== oldVal){
+                        scope.showChild();
+                    };
+                });
+                scope.showChild = function () {
+                        if (!element.hasClass('grouped')) {
+                            if (angular.isArray(scope.member.child) && scope.member.child.length > 0 && (scope.member.divide === undefined || scope.member.child.length < scope.member.divide)) {
+                                scope.groupIt = false;
+                                element.addClass('grouped');
+                                element.append("<b2b-tree-nav collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-nav>");
+                                $compile(element.contents())(scope);
+                                if(scope.member.active && scope.member.active === true){
+                                    element.find('i').eq(0).removeClass('icon-primary-collapsed');
+                                };
+                                if(scope.member.selected && scope.member.selected === true){
+                                    element.attr('aria-selected', true);
+                                    element.attr('tabindex', 0);
+                                    removeRootTabIndex(element);
+                                };
+                                if(scope.member.active && scope.member.active == undefined){
+                                    element.find('i').eq(0).addClass('icon-primary-collapsed');
+                                };
+                            } else if (scope.member.child && scope.member.divide && scope.member.child.length > scope.member.divide) {
+                                element.addClass('grouped');
+                                scope.groupIt = true;
+                                // FILTER - GROUPBY - APPROACH 
+                                var j = 0;
+                                var grpName = '';
+                                if(scope.member.child[0].groupName !== undefined){
+                                    grpName = scope.member.child[0].groupName;
+                                }
+                                else{
+                                    var toSlice = scope.member.child[0].name.search(' ');
+                                    grpName = scope.member.child[0].name.slice(0, toSlice);
+                                }
+
+                                for (i = 0; i < scope.member.child.length; i += scope.member.divide) {
+                                    j = 0;
+                                    for (j = j + i; j < (i + scope.member.divide); j++) {                                        
+                                        if (j === scope.member.child.length) {
+                                            scope.member.child[j - 1].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);
+                                            break;
+                                            
+                                            if(scope.member.child[j-1].active && scope.member.child[j-1].active===true){
+                                                scope.member.child[j-1].activeGrp = true;
+                                            };
+                                            
+                                        }
+                                        if (i + scope.member.divide > scope.member.child.length) {
+                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);
+                                            if(scope.member.child[j].active && scope.member.child[j].active===true){
+                                                scope.member.child[j].activeGrp = true;
+                                            };
+
+                                        } else {
+                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (i + scope.member.divide);
+                                            if(scope.member.child[j].active && scope.member.child[j].active===true){
+                                                scope.member.child[j].activeGrp = true;
+                                            };
+                                        }
+                                    }
+                                }
+                                if(scope.member.divide){
+                                    element.append("<b2b-tree-nav collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-nav>");
+                                } else {
+                                    element.append("<b2b-tree-nav collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-nav>");
+                                }
+                                $compile(element.contents())(scope);
+                                if(scope.member.active && scope.member.active === true){
+                                    element.find('i').eq(0).removeClass('icon-primary-collapsed');
+                                };
+                                if(scope.member.selected && scope.member.selected === true){
+                                    element.attr('aria-selected', true);
+                                };
+                                if( scope.member.active && scope.member.active == undefined){
+                                    element.find('i').eq(0).addClass('icon-primary-collapsed');
+                                };
+                            }
+                        }
+                };
+                //Below condition opens node for opening on json load.
+                if(scope.member.active && scope.member.active == true){
+                    scope.showChild();
+                };
+                if(scope.member.active == undefined && !element.find('a').eq(0).hasClass('active') && scope.member.child !== undefined){
+                    element.find('i').eq(0).addClass('icon-primary-collapsed');
+                }
+                else if(scope.member.child == undefined){
+                    element.find('i').eq(0).addClass('icon-primary-circle');
+                };
+                element.bind('keydown', function (evt) {
+                    switch (evt.keyCode) {
+                        case keymap.KEY.ENTER:
+                            if (element.hasClass('bg') && scope.member.onSelect !== undefined) {
+                                scope.member.onSelect(scope.member);
+                            }
+                            evt.stopPropagation();
+                            break;
+                        default: 
+                            break;                            
+                    }
+                    
+                });
+                //else getting true in every case .. so better use switch case .. that makes more sense you dumb.
+                element.bind('click', function (evt) {
+                    scope.showChild();
+                    var expandFunc = scope.member.onExpand;
+                    
+                    //onSelect
+                        if (element.hasClass('bg') && scope.member.onSelect !== undefined) {
+                                    scope.member.onSelect(scope.member);
+                                }
+                        if (element.find('a').eq(0).hasClass('active') && scope.member.onExpand !== undefined) {
+                           var eValue = scope.member.onExpand(scope.member);
+                        }
+                        if (!element.find('a').eq(0).hasClass('active') && scope.member.onCollapse !== undefined) {
+                            scope.member.onCollapse(scope.member);
+                        }
+                });
+            }
+        }
+}])
+    .directive('b2bTreeLink', ['keymap', '$timeout', function (keymap, $timeout) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attr, ctrl) {
+                var rootE, parentE, upE, downE;
+                var closeOthersUp = function (elem,isKeyPress,passiveClose) {
+                    //For accordion functionality on sibling nodes
+                    if (elem.find('a').eq(0).hasClass('active')) {
+                        activeToggle(elem,isKeyPress,passiveClose);
+                        return;
+                    }
+                    if (elem.hasClass('bg') && !isKeyPress) {
+                        elem.removeClass('bg');
+                        if (elem.attr('aria-selected')) {
+                            elem.attr('aria-selected', 'false');
+                        }                        
+                    }
+                    if (elem[0].previousElementSibling !== null) {
+                        closeOthersUp(angular.element(elem[0].previousElementSibling),isKeyPress);
+                    }
+                };
+                var closeOthersDown = function (elem,isKeyPress,passiveClose) {
+                    //For accordion functionality on sibling nodes
+                    if (elem.find('a').eq(0).hasClass('active')) {
+                        activeToggle(elem,isKeyPress,passiveClose);
+                        return;
+                    }
+                    if (elem.hasClass('bg') && !isKeyPress) {
+                        elem.removeClass('bg');
+                        if (elem.attr('aria-selected')) {
+                            elem.attr('aria-selected', 'false');
+                        }                        
+                    }
+                    if (elem[0].nextElementSibling !== null) {
+                        closeOthersDown(angular.element(elem[0].nextElementSibling),isKeyPress);
+                    }
+                };
+
+               
+                var removeBackground = function(elem){
+
+                    if(elem.hasClass('b2b-tree')){
+                        angular.element(elem[0].getElementsByClassName('bg')).removeClass('bg');
+                        return;
+                    }else{
+                        removeBackground(elem.parent().parent());
+                    }
+
+                };
+
+/**
+* These two functions used for setting heights on parent nodes as the child node closes
+* Retaining this code for future reference
+
+                var addParentHeight = function(e, h) {
+                    var parentLi = e.parent().parent();
+                    var parentUl = e.parent();
+                    if(!parentLi.hasClass('b2b-tree')) {
+                        var addHeight = parentUl[0].offsetHeight + h;
+                        parentLi.find('ul').eq(0).css({
+                            height: addHeight+'px'
+                        })
+                        addParentHeight(parentLi, h);
+                    }                    
+                };
+
+                var removeParentHeight = function(e, h) {
+                    var parentLi = e.parent().parent();
+                    var parentUl = e.parent();
+                    if(!parentLi.hasClass('b2b-tree')) {
+                        var addHeight = parentUl[0].offsetHeight - h;
+                        parentLi.find('ul').eq(0).css({
+                            height: addHeight+'px'
+                        })
+                        removeParentHeight(parentLi, h);
+                    }
+                };
+*/          
+
+            // isKeyPress - to notify that the function is called by Right Key press
+            // passiveClose -  prevents firing of oncollapse events during the action
+            // of expand function(check the function definition)
+
+                var activeToggle = function (elem,isKeyPress,passiveClose) {
+                    var element = elem.find('a').eq(0);
+                    if (element.hasClass('active')) {
+                        if(!isKeyPress){
+                            elem.removeClass('bg');
+                        }
+                        
+                        if (elem.attr('aria-selected') && !isKeyPress) {
+                            elem.attr('aria-selected', 'false');
+                        }
+                        if (!element.find('i').eq(0).hasClass('icon-primary-circle')) {
+                            if(isKeyPress && scope.member){
+                                if (scope.member.onCollapse !== undefined && !passiveClose) {
+                                    scope.member.onCollapse(scope.member);
+                                }
+                            }
+                            element.removeClass('active');
+                            elem.attr('aria-expanded', 'false');
+                            element.find('i').eq(0).removeClass('icon-primary-expanded');
+                            element.find('i').eq(0).addClass('icon-primary-collapsed');
+                            //For Animation: below commented code is used to manually set height of UL to zero 
+                            //retaining code for future reference
+                            /*
+                            var totalHeight = elem.find('ul')[0].scrollHeight;
+                            removeParentHeight(elem, totalHeight);
+                            elem.find('ul').eq(0).css({
+                                height: null
+                            });*/
+                        }
+                    } else {
+                        if(!isKeyPress){
+                            elem.addClass('bg');
+                            elem.attr('aria-selected', 'true');
+                        }
+                        
+                        if (!element.find('i').eq(0).hasClass('icon-primary-circle')) {
+                            if(isKeyPress){
+                                if(typeof scope.showChild === 'function' ){
+                                scope.showChild();
+                                }
+                                if(scope.member){
+                                    if (scope.member.onExpand !== undefined) {
+                                        scope.member.onExpand(scope.member);
+                                    }
+                                }
+                            }
+                            element.addClass('active');
+                            elem.attr('aria-expanded', 'true');
+                            element.find('i').eq(0).removeClass('icon-primary-collapsed');
+                            element.find('i').eq(0).addClass('icon-primary-expanded');
+                            //For Animation: below commented code is used to manually set height of the ul generatedon the click of parent LI.
+                            //retaining code for future reference
+                            /*                            
+                            var totalHeight = elem.find('ul')[0].scrollHeight;
+                            addParentHeight(elem, totalHeight);
+                            elem.find('ul').eq(0).css({
+                                height: totalHeight+'px'
+                            });*/
+                            
+                        }
+                    }
+                };
+                element.bind('click', function (evt) {
+                    //first we close others and then we open the clicked element
+                    if (element[0].previousElementSibling) {
+                        closeOthersUp(angular.element(element[0].previousElementSibling));
+                    }
+                    if (element[0].nextElementSibling) {
+                        closeOthersDown(angular.element(element[0].nextElementSibling));
+                    }
+                    removeBackground(element);
+                    activeToggle(element);                    
+                    
+                    evt.stopPropagation();                    
+                });
+                //default root tree element tabindex set zero
+                if (element.parent().parent().hasClass('b2b-tree') && (element.parent()[0].previousElementSibling === null)) {
+                    element.attr('tabindex', 0);
+                }
+                //check root via class
+                var isRoot = function (elem) {
+                    if (elem.parent().parent().eq(0).hasClass('b2b-tree')) {
+                        return true;
+                    } else {
+                        return false;
+                    }
+                };
+                var findRoot = function (elem) {
+                    if (isRoot(elem)) {
+                        rootE = elem;
+                        return;
+                    }
+                    findRoot(elem.parent());
+                };
+
+                var findPreActive = function (elem) {
+
+                    if (!(elem.hasClass("active"))) {
+                        return;
+                    } else {
+                        var childElems = angular.element(elem[0].nextElementSibling.children);
+                        lastE = angular.element(childElems[childElems.length - 1]);
+                        if (lastE.find('a').eq(0).hasClass('active')) {
+                            findPreActive(lastE.find('a').eq(0));
+                        }
+                        upE = lastE;
+                    }
+                };
+
+                var findUp = function (elem) {
+                    if (isRoot(elem)) {
+                        upE = elem;
+                        return;
+                    }
+                    if (elem[0].previousElementSibling !== null && !angular.element(elem[0].previousElementSibling).hasClass('tree-hide')) {
+                        upE = angular.element(elem[0].previousElementSibling);
+                        if (upE.find('a').eq(0).hasClass('active')) {
+                            findPreActive(upE.find('a').eq(0));
+                        }
+                    } else {
+                        upE = elem.parent().parent();
+                    }
+                };
+
+                var downElement = function (elem) {
+                    if (elem.next().hasClass('tree-hide')) {
+                        downElement(elem.next());
+                    } else {
+                        downE = elem.next();
+                    }
+                }
+                var isBottomElem = false;
+                var downParent = function(liElem){
+                    if(liElem.eq(0).parent().parent().eq(0).hasClass('b2b-tree')){
+                        isBottomElem = true;
+                        return;
+                    }
+                    if(liElem.next().length !== 0){
+                        downE = liElem.next().eq(0);
+                        return;
+                    }
+                    else {
+                        downParent(liElem.parent().parent());
+                    }
+                }
+                
+                var findDown = function (elem) {
+                    if (isRoot(elem.parent()) && !elem.hasClass('active')) {
+                        downE = elem.parent();
+                        return;
+                    }
+                    if (elem.hasClass('active')) {
+                        downE = elem.next().find('li').eq(0);
+                        if (downE.hasClass('tree-hide')) {
+                            downElement(downE);
+                        }
+
+                    } else {
+                        downParent(elem.parent());
+                        if(isBottomElem === true){
+                            downE = elem.parent();
+                            isBottomElem = false;
+                        }
+                    }
+                };
+
+
+                var resetTabPosition = function(element){
+                    findRoot(element);
+                    angular.element(rootE.parent().parent()[0].querySelector("li[tabindex='0']")).attr('tabindex','-1');
+                    var elemToFocus =  rootE.parent().parent()[0].querySelector(".bg")|| rootE;
+
+                    angular.element(elemToFocus).attr('tabindex','0');
+                };
+                // Function to control the expansion of nodes when the user tabs into the tree and
+                // the slected node is not visible
+                var expand = function(elemArr){
+                    var elem= elemArr.pop();
+                    var element = elem.find('a').eq(0);                    
+                    var selectedNode = elem.parent().parent()[0].querySelector(".bg");
+                    if(selectedNode != null){
+                        while(elem){
+                             element = elem.find('a').eq(0);
+                    if(!element.hasClass('active') ){
+
+
+                    if (elem[0].previousElementSibling) {
+                        closeOthersUp(angular.element(elem[0].previousElementSibling),true,true);
+                        }
+                        if (elem[0].nextElementSibling) {
+                            closeOthersDown(angular.element(elem[0].nextElementSibling),true,true);
+                        }
+
+                         if (!element.find('i').eq(0).hasClass('icon-primary-circle')) {
+                            if(typeof scope.showChild === 'function' ){
+                                scope.showChild();
+                            }
+                            element.addClass('active');
+                            elem.attr('aria-expanded', 'true');
+                            element.find('i').eq(0).removeClass('icon-primary-collapsed');
+                            element.find('i').eq(0).addClass('icon-primary-expanded');
+                            }
+                          
+                          }   
+                          elem = elemArr.pop();
+                        }                      
+                        
+                    }else{
+                        return;
+                    }                   
+                };
+
+                element.find('a').eq(0).bind('mouseenter', function (evt) {
+                    angular.forEach(document.querySelectorAll('.activeTooltip'), function(value, key) {
+                        angular.element(value).removeClass('activeTooltip') 
+                    });
+                    element.addClass('activeTooltip');
+                });
+                element.find('a').eq(0).bind('mouseleave', function (evt) {
+                    element.removeClass('activeTooltip');
+                });
+                element.bind('focus', function (evt) {
+                    angular.forEach(document.querySelectorAll('.activeTooltip'), function(value, key) {
+                        angular.element(value).removeClass('activeTooltip') 
+                    });
+                    element.addClass('activeTooltip');
+                });
+                element.bind('blur', function (evt) {
+                    element.removeClass('activeTooltip');
+                });
+                element.bind('keydown', function (evt) {
+                    switch (evt.keyCode) {
+                    case keymap.KEY.HOME:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        element.attr('tabindex', -1);
+                        findRoot(element);
+                        rootE.eq(0).attr('tabindex', 0);
+                        rootE[0].focus();
+                        break;
+                    case keymap.KEY.LEFT:
+                        evt.preventDefault();
+                        evt.stopPropagation(); 
+                      
+                        if(element.find('a').eq(0).hasClass('active')){
+                            if (element[0].previousElementSibling) {
+                                closeOthersUp(angular.element(element[0].previousElementSibling),true);
+                            }
+                            if (element[0].nextElementSibling) {
+                                closeOthersDown(angular.element(element[0].nextElementSibling),true);
+                             }
+                             activeToggle(element,true);
+                                return;
+                        }
+                            element.attr('tabindex', -1);
+                            parentE = element.parent().parent();
+                            parentE.attr('tabindex', 0);
+                            parentE[0].focus();
+                        break;
+                    case keymap.KEY.UP:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        element.attr('tabindex', -1);
+                        findUp(element);
+                        upE.eq(0).attr('tabindex', 0);
+                        upE[0].focus();
+                        break;
+                    case keymap.KEY.RIGHT:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        if(element.find('i').eq(0).hasClass('icon-primary-circle')){
+                            break;
+                        }    
+                        if (!element.find('a').eq(0).hasClass('active')) {
+                            if (element[0].previousElementSibling) {
+                        closeOthersUp(angular.element(element[0].previousElementSibling),true);
+                        }
+                        if (element[0].nextElementSibling) {
+                            closeOthersDown(angular.element(element[0].nextElementSibling),true);
+                        }
+                        activeToggle(element,true);
+                    
+                        }
+                        else {
+                            element.attr('tabindex', -1);
+                            findDown(element.find('a').eq(0));
+                            downE.eq(0).attr('tabindex', 0);
+                            downE[0].focus();                            
+                        }                        
+                        break;
+                    case keymap.KEY.DOWN:
+                        evt.preventDefault();
+                        element.attr('tabindex', -1);
+                        findDown(element.find('a').eq(0));
+                        downE.eq(0).attr('tabindex', 0);
+                        downE[0].focus();
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.ENTER:
+                        var isSelectedElem = element.hasClass('bg');
+                        var enterFunc = function(element){
+                            if (isSelectedElem) {
+                                element.removeClass('bg');
+                                if (element.attr('aria-selected')) {
+                                    element.attr('aria-selected', 'false');
+                                }                        
+                            }
+                            else {
+                                element.addClass('bg');
+                                element.attr('aria-selected', 'true');                                   
+                            }  
+                        };                            
+                        if (element[0].previousElementSibling) {
+                            closeOthersUp(angular.element(element[0].previousElementSibling));
+                        }
+                        if (element[0].nextElementSibling) {
+                            closeOthersDown(angular.element(element[0].nextElementSibling));
+                        }                   
+                        
+                        removeBackground(element);
+                        enterFunc(element);
+                        evt.stopPropagation();                                                      
+                        break;
+                    case keymap.KEY.TAB:
+                        $timeout(function(){
+                            resetTabPosition(element);
+                        },0);
+                         evt.stopPropagation(); 
+                        
+                        break;
+                    default:
+                        break;
+                    }
+                });
+            element.bind('keyup',function(evt){
+                if(evt.keyCode === keymap.KEY.TAB){
+                  
+                        var tempElem = element;
+                        var elemArr = [];
+                        while(!tempElem.hasClass('b2b-tree')){
+                            elemArr.push(tempElem);
+                            tempElem = tempElem.parent().parent();
+                        }
+                        elemArr.push(tempElem);
+                      
+                        expand(elemArr);                    
+                }
+                 evt.stopPropagation(); 
+            });
+            }
+        };
+    }]);
+/**
+ * @ngdoc directive
+ * @name Navigation.att:Tree nodes with checkboxes
+ *
+ * @param {String} setRole - The value needs to be "tree". This is required to incorporate CATO requirements.
+ * @param {boolean} groupIt - The value needs to be "false" for top-level tree rendered. 
+ * @param {Object} collection -  The JSON object of tree to be rendered.
+ * @description
+ *  <file src="src/treeNodeCheckbox/docs/readme.md" />
+ *
+ * @usage
+ *      <div class="b2b-tree-checkbox">
+ *                <b2b-tree-node-checkbox collection="treeStructure" set-role="tree" group-it="false"></b2b-tree-node-checkbox>
+ *            </div>
+ * @example
+ *  <section id="code">
+        <example module="b2b.att">
+            <file src="src/treeNodeCheckbox/docs/demo.html" />
+            <file src="src/treeNodeCheckbox/docs/demo.js" />
+       </example>
+    </section>
+ *
+ */
+angular.module('b2b.att.treeNodeCheckbox', ['b2b.att.utilities'])
+    .directive('b2bTreeNodeCheckbox', function () {
+        return {
+            restrict: "E",
+            replace: true,
+            scope: {
+                collection: '=',
+                groupIt: '=',
+                setRole: '@'
+            },
+            templateUrl: function (element, attrs) {
+                if (attrs.groupIt === 'true') {
+                    return "b2bTemplate/treeNodeCheckbox/groupedTree.html";
+                } else {
+                    return "b2bTemplate/treeNodeCheckbox/ungroupedTree.html";
+                }
+            },
+            link: function (scope) {
+                if (!(scope.setRole === 'tree')) {
+                    scope.setRole = 'group';
+                }
+            }
+        }
+    })
+    .directive('b2bTreeMember', ['$compile', '$timeout', 'keymap', function ($compile, $timeout, keymap) {
+        return {
+            restrict: "E",
+            replace: true,
+            scope: {
+                member: '=',
+                groupIt: '='
+            },
+            templateUrl: 'b2bTemplate/treeNodeCheckbox/treeMember.html',
+            link: function (scope, element, attrs) {
+                scope.elemArr = [];
+                var removeRootTabIndex = function (elem) {
+                    if (elem.parent().parent().eq(0).hasClass('b2b-tree-checkbox')) {
+                        elem.attr('tabindex', -1);                        
+                        return;
+                    }
+                    removeRootTabIndex(elem.parent());
+                };
+                scope.$watch('member.child', function(newVal, oldVal){                  
+                    if(newVal !== oldVal){
+                        scope.showChild();
+                    };
+                });
+
+                var checkedCount = 0;
+                var nonCheckedCount = 0;
+                var checkBoxesCount = 0;
+
+                if(element.find('a').eq(0).find('input')){
+                    if(scope.member.indeterminate){
+                        element.find('a').eq(0).find('input').prop('indeterminate', true);
+                        element.attr('aria-checked',"mixed");
+                    }
+                    element.attr('aria-checked',scope.member.isSelected);
+                }
+
+                element.find('a').eq(0).find('input').bind('change',function(){
+                    scope.member.indeterminate = false;
+                    downwardModalUpdate(scope.member);
+                    downwardSelection(element);
+                    upwardSelection(element);
+                    element.attr('aria-checked',scope.member.isSelected);
+                     if (scope.member.onSelect !== undefined) {
+                        scope.member.onSelect(scope.member);
+                    }
+                });
+
+                element.find('a').eq(0).find('input').bind('click',function(){
+                    var elem = angular.element(this);
+                    if(scope.member.indeterminate){
+                        scope.member.indeterminate = false;
+                        scope.member.isSelected = true;
+                        elem.prop('indeterminate', false);
+                        elem.prop('checked', true);
+                        elem.triggerHandler('change');
+                    }
+                });
+
+                var groupNode = false;
+                var checkedTreeNode = false;
+
+                var isCheckboxSelected = function(elem){
+                    checkedTreeNode = false;
+                    checkedTreeNode = angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.treeCheckBox').checked;
+                }
+
+                var findCheckbox = function(elem){
+                    return angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.treeCheckBox');
+                }
+
+                var updateGrpNodeCheckboxes = function(elem, checked){
+                    angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.treeCheckBox').checked = checked;
+                }
+
+                
+                var isGroupNode = function(elem){
+                    groupNode = false;
+                    if(angular.element(angular.element(elem).find('a').eq(0))[0].querySelector('input.grpTreeCheckbox')){
+                        groupNode = true;
+                    }
+                }
+
+                var downwardModalUpdate = function(curMember){
+                    angular.forEach(curMember.child, function(childMember, key) {
+                        childMember.isSelected = curMember.isSelected;
+                        childMember.indeterminate = false;
+                        if(angular.isArray(childMember.child) && scope.member.child.length > 0){
+                            downwardModalUpdate(childMember);
+                        }
+                    });
+                }
+
+                var downwardSelection = function(elem){
+                    if(findCheckbox(elem)){
+                        isCheckboxSelected(elem)
+                    } 
+                    if(angular.element(elem).find('ul').length > 0){
+                        var childNodes = angular.element(elem).find('ul').eq(0).children('li');
+                        for(var i=0; i<childNodes.length; i++){
+                            if(findCheckbox(childNodes[i])){
+                                isGroupNode(childNodes[i]);
+                                angular.element(findCheckbox(childNodes[i])).prop('indeterminate', false);
+                                angular.element(childNodes[i]).attr('aria-checked',checkedTreeNode);
+                                if(groupNode){
+                                    updateGrpNodeCheckboxes(childNodes[i],checkedTreeNode);
+                                }else{
+                                    angular.element(childNodes[i]).scope().member.isSelected = checkedTreeNode;
+                                    angular.element(childNodes[i]).scope().member.indeterminate = false
+                                    angular.element(childNodes[i]).scope().$apply();
+                                }
+                                downwardSelection(childNodes[i]);
+                            }
+                        }
+
+                    }
+                }
+                var upwardSelection = function(elem){
+                    var childNodes = elem.parent().parent().find('ul').eq(0).children('li');
+                    checkedCount = 0;
+                    nonCheckedCount = 0;
+                    checkBoxesCount = 0;    
+                    for(i=0; i<childNodes.length; i++){
+                        if(findCheckbox(childNodes[i])){
+                            isGroupNode(childNodes[i]);
+                            isCheckboxSelected(childNodes[i]);
+                            checkBoxesCount++;
+                            if(checkedTreeNode){
+                                checkedCount++;
+                            }else if(!angular.element(angular.element(angular.element(childNodes[i]).find('a').eq(0))[0].querySelector('input.treeCheckBox')).prop('indeterminate')){
+                                nonCheckedCount++;
+                            }
+                        }
+                    }
+                    var parentNodeScope;
+                    parentNodeScope = angular.element(elem.parent().parent()).scope();
+                    if(findCheckbox(elem.parent().parent())){
+                        if(nonCheckedCount == checkBoxesCount){
+                            angular.element(findCheckbox(elem.parent().parent())).prop('indeterminate', false);
+                            if(parentNodeScope &&  parentNodeScope.member){
+                                parentNodeScope.member.isSelected = false;
+                                parentNodeScope.member.indeterminate = false;
+                            }else{
+                                updateGrpNodeCheckboxes(elem.parent().parent(),false);
+                            }
+                            angular.element(elem.parent().parent()).attr('aria-checked',false);
+                        }else if(checkedCount == checkBoxesCount){
+                            angular.element(findCheckbox(elem.parent().parent())).prop('indeterminate', false);
+                            if(parentNodeScope &&  parentNodeScope.member){
+                                parentNodeScope.member.isSelected = true;
+                                parentNodeScope.member.indeterminate = false;
+                            }else{
+                                updateGrpNodeCheckboxes(elem.parent().parent(),true);
+                            }
+                            angular.element(elem.parent().parent()).attr('aria-checked',true);
+                        }else{
+                            angular.element(findCheckbox(elem.parent().parent())).prop('indeterminate', true);
+                            if(parentNodeScope &&  parentNodeScope.member){
+                                parentNodeScope.member.isSelected = false;
+                                parentNodeScope.member.indeterminate = true;
+                            }else{
+                                updateGrpNodeCheckboxes(elem.parent().parent(),false);
+                            }
+                            angular.element(elem.parent().parent()).attr('aria-checked',"mixed");
+                        }
+                        if(parentNodeScope &&  parentNodeScope.member){
+                            parentNodeScope.$apply();
+                        }        
+                    }
+                    
+                    
+                    
+                    if(elem.parent().parent().attr('role') == "treeitem"){
+                        upwardSelection(elem.parent().parent());
+                    }
+                }
+
+                scope.showChild = function () {
+                        if (!element.hasClass('grouped')) {
+                            if (angular.isArray(scope.member.child) && scope.member.child.length > 0 && (scope.member.divide === undefined || scope.member.child.length < scope.member.divide)) {
+                                scope.groupIt = false;
+                                element.addClass('grouped');
+                                element.append("<b2b-tree-node-checkbox collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-node-checkbox>");
+                                $compile(element.contents())(scope);
+                                if(scope.member.active && scope.member.active === true){
+                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-collapsed');
+                                };
+                                if(scope.member.selected && scope.member.selected === true){
+                                    element.attr('tabindex', 0);
+                                    removeRootTabIndex(element);
+                                };
+                                if(scope.member.active && scope.member.active == undefined){
+                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');
+                                };
+                            } else if (scope.member.child && scope.member.divide && scope.member.child.length > scope.member.divide) {
+                                element.addClass('grouped');
+                                scope.groupIt = true;
+                                var j = 0;
+                                var grpName = '';
+                                if(scope.member.child[0].groupName !== undefined){
+                                    grpName = scope.member.child[0].groupName;
+                                }
+                                else{
+                                    var toSlice = scope.member.child[0].name.search(' ');
+                                    grpName = scope.member.child[0].name.slice(0, toSlice);
+                                }
+
+                                for (i = 0; i < scope.member.child.length; i += scope.member.divide) {
+                                    j = 0;
+                                    for (j = j + i; j < (i + scope.member.divide); j++) {                                        
+                                        if (j === scope.member.child.length) {
+                                            scope.member.child[j - 1].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);
+                                            break;
+                                            
+                                            if(scope.member.child[j-1].active && scope.member.child[j-1].active===true){
+                                                scope.member.child[j-1].activeGrp = true;
+                                            };
+                                            
+                                        }
+                                        if (i + scope.member.divide > scope.member.child.length) {
+                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (scope.member.child.length);
+                                            if(scope.member.child[j].active && scope.member.child[j].active===true){
+                                                scope.member.child[j].activeGrp = true;
+                                            };
+
+                                        } else {
+                                            scope.member.child[j].grpChild = grpName + ' ' + (i + 1) + ' - ' + (i + scope.member.divide);
+                                            if(scope.member.child[j].active && scope.member.child[j].active===true){
+                                                scope.member.child[j].activeGrp = true;
+                                            };
+                                        }
+                                    }
+                                }
+                                if(scope.member.divide){
+                                    element.append("<b2b-tree-node-checkbox collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-node-checkbox>");
+                                } else {
+                                    element.append("<b2b-tree-node-checkbox collection='member.child' group-it='" + scope.groupIt + "'></b2b-tree-node-checkbox>");
+                                }
+                                $compile(element.contents())(scope);
+                                if(scope.member.active && scope.member.active === true){
+                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-collapsed');
+                                };
+                                
+                                if( scope.member.active && scope.member.active == undefined){
+                                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');
+                                };
+                            }
+                        }
+                        $timeout(function () {
+                            if(!scope.member.indeterminate){
+                                downwardSelection(element);
+                            }    
+                        });  
+
+                };
+                
+                if(scope.member.active && scope.member.active == true){
+                    scope.showChild();
+                };
+                if(scope.member.active == undefined && !element.find('a').eq(0).hasClass('active') && scope.member.child !== undefined){
+                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');
+                }
+                else if(scope.member.child == undefined){
+                    angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-circle');
+                    if(scope.$parent.$index === 0) {
+                        element.find('a').eq(0).append('<span class="first-link"></span>');
+                    };
+                };
+                
+                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).bind('click', function (evt) {
+                    scope.showChild();
+                    var expandFunc = scope.member.onExpand;
+                    if (element.find('a').eq(0).hasClass('active') && scope.member.onExpand !== undefined) {
+                       var eValue = scope.member.onExpand(scope.member);
+                    }
+                    if (!element.find('a').eq(0).hasClass('active') && scope.member.onCollapse !== undefined) {
+                        scope.member.onCollapse(scope.member);
+                    }
+                });
+
+                angular.element(element[0].querySelectorAll('.treeNodeName')).eq(0).bind('click', function (evt) {
+
+                });
+                
+            }
+        }
+}])
+    .directive('b2bTreeNodeLink', ['keymap', '$timeout', function (keymap, $timeout) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attr, ctrl) {
+                var rootE, parentE, upE, downE;
+                var closeOthersUp = function (elem) {
+                    
+                    if (elem.find('a').eq(0).hasClass('active')) {
+                        activeToggle(elem);
+                        return;
+                    }
+                    if (elem.hasClass('bg')) {
+                        elem.removeClass('bg');
+                    }
+                    if (elem[0].previousElementSibling !== null) {
+                        closeOthersUp(angular.element(elem[0].previousElementSibling));
+                    }
+                };
+                var closeOthersDown = function (elem) {
+                    
+                    if (elem.find('a').eq(0).hasClass('active')) {
+                        activeToggle(elem);
+                        return;
+                    }
+                    if (elem.hasClass('bg')) {
+                        elem.removeClass('bg');
+                    }
+                    if (elem[0].nextElementSibling !== null) {
+                        closeOthersDown(angular.element(elem[0].nextElementSibling));
+                    }
+                };
+
+                var removeBackgroundUp = function (elem) {
+                    
+                    if (elem.hasClass('b2b-tree-checkbox')) {
+                        return;
+                    } else {
+                        elem.parent().parent().removeClass('bg');
+                        removeBackgroundUp(elem.parent().parent());
+                    }
+                };
+
+                var removeBackgroundDown = function (elem) {
+                    
+                    angular.element(elem[0].querySelector('.bg')).removeClass('bg');
+                };
+
+
+
+                var activeToggle = function (elem) {
+                    var element = elem.find('a').eq(0);
+                    if (element.hasClass('active')) {
+                        elem.removeClass('bg');
+                        if (!angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).hasClass('icon-primary-circle')) {
+                            element.removeClass('active');
+                            elem.attr('aria-expanded', 'false');
+                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-expanded');
+                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-collapsed');
+                        }
+                    } else {
+                        elem.addClass('bg');
+                        if (!angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).hasClass('icon-primary-circle')) {
+                            element.addClass('active');
+                            elem.attr('aria-expanded', 'true');
+                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).removeClass('icon-primary-collapsed');
+                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).addClass('icon-primary-expanded');
+                        }
+                    }
+                };
+                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).bind('click', function (evt) {
+                    
+                        if (element[0].previousElementSibling) {
+                            closeOthersUp(angular.element(element[0].previousElementSibling));
+                        }
+                        if (element[0].nextElementSibling) {
+                            closeOthersDown(angular.element(element[0].nextElementSibling));
+                        }
+
+                        activeToggle(element);
+
+                    removeBackgroundDown(element);
+                    removeBackgroundUp(element);
+                    evt.stopPropagation();                    
+                });
+                
+                if (element.parent().parent().hasClass('b2b-tree-checkbox') && (element.parent()[0].previousElementSibling === null)) {
+                    element.attr('tabindex', 0);
+                }
+                
+                var isRoot = function (elem) {
+                    if (elem.parent().parent().eq(0).hasClass('b2b-tree-checkbox')) {
+                        return true;
+                    } else {
+                        return false;
+                    }
+                };
+                var findRoot = function (elem) {
+                    if (isRoot(elem)) {
+                        rootE = elem;
+                        return;
+                    }
+                    findRoot(elem.parent());
+                };
+
+                var findPreActive = function (elem) {
+
+                    if (!(elem.hasClass("active"))) {
+                        return;
+                    } else {
+                        var childElems = angular.element(elem[0].nextElementSibling.children);
+                        lastE = angular.element(childElems[childElems.length - 1]);
+                        if (lastE.find('a').eq(0).hasClass('active')) {
+                            findPreActive(lastE.find('a').eq(0));
+                        }
+                        upE = lastE;
+                    }
+                };
+
+                var findUp = function (elem) {
+                    if (isRoot(elem)) {
+                        upE = elem;
+                        return;
+                    }
+                    if (elem[0].previousElementSibling !== null && !angular.element(elem[0].previousElementSibling).hasClass('tree-hide')) {
+                        upE = angular.element(elem[0].previousElementSibling);
+                        if (upE.find('a').eq(0).hasClass('active')) {
+                            findPreActive(upE.find('a').eq(0));
+                        }
+                    } else {
+                        upE = elem.parent().parent();
+                    }
+                };
+
+                var downElement = function (elem) {
+                    if (elem.next().hasClass('tree-hide')) {
+                        downElement(elem.next());
+                    } else {
+                        downE = elem.next();
+                    }
+                }
+                var isBottomElem = false;
+                var downParent = function(liElem){
+                    if(liElem.eq(0).parent().parent().eq(0).hasClass('b2b-tree-checkbox')){
+                        isBottomElem = true;
+                        return;
+                    }
+                    if(liElem.next().length !== 0){
+                        downE = liElem.next().eq(0);
+                        return;
+                    }
+                    else {
+                        downParent(liElem.parent().parent());
+                    }
+                }
+                
+                var findDown = function (elem) {
+                    if (isRoot(elem.parent()) && !elem.hasClass('active')) {
+                        downE = elem.parent();
+                        return;
+                    }
+                    if (elem.hasClass('active')) {
+                        downE = elem.next().find('li').eq(0);
+                        if (downE.hasClass('tree-hide')) {
+                            downElement(downE);
+                        }
+
+                    } else {
+                        downParent(elem.parent());
+                        if(isBottomElem === true){
+                            downE = elem.parent();
+                            isBottomElem = false;
+                        }
+                    }
+                };
+                element.bind('keydown', function (evt) {
+                    switch (evt.keyCode) {
+                    case keymap.KEY.HOME:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        element.attr('tabindex', -1);
+                        findRoot(element);
+                        rootE.eq(0).attr('tabindex', 0);
+                        rootE[0].focus();
+                        break;
+                    case keymap.KEY.LEFT:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        if (!isRoot(element)) {
+                            if(element.find('a').eq(0).hasClass('active')){
+                                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).triggerHandler('click');
+                                return;
+                            }
+                            element.attr('tabindex', -1);
+                            parentE = element.parent().parent();
+                            parentE.attr('tabindex', 0);
+                            parentE[0].focus();
+                        } else {
+                            if (element.find('a').eq(0).hasClass('active')) {
+                                angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).triggerHandler('click');
+                            }
+                        };
+                        break;
+                    case keymap.KEY.UP:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        element.attr('tabindex', -1);
+                        findUp(element);
+                        upE.eq(0).attr('tabindex', 0);
+                        upE[0].focus();
+                        break;
+                    case keymap.KEY.RIGHT:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        if(angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).hasClass('icon-primary-circle')){
+                            break;
+                        }    
+                        if (!element.find('a').eq(0).hasClass('active')) {
+                            angular.element(element[0].querySelectorAll('i.expandCollapseIcon')).eq(0).triggerHandler('click');
+                        }
+                        else {
+                            element.attr('tabindex', -1);
+                            findDown(element.find('a').eq(0));
+                            downE.eq(0).attr('tabindex', 0);
+                            downE[0].focus();                            
+                        }                        
+                        break;
+                    case keymap.KEY.DOWN:
+                        evt.preventDefault();
+                        element.attr('tabindex', -1);
+                        findDown(element.find('a').eq(0));
+                        downE.eq(0).attr('tabindex', 0);
+                        downE[0].focus();
+                        evt.stopPropagation();
+                        break;
+                    case keymap.KEY.SPACE:
+                    case keymap.KEY.ENTER:
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        if(angular.isDefined(element.scope().member.isSelected)){
+                            element.scope().member.isSelected = !element.scope().member.isSelected;
+                            element.scope().member.indeterminate = false;
+                            element.scope().$apply();
+                            element.find('a').eq(0).find('input').prop('indeterminate', false);
+                            element.find('a').eq(0).find('input').triggerHandler('change');
+                        }
+                        break;    
+                    default:
+                        break;
+                    }
+                });
+            }
+        };
+    }]);
+/*!
+ * VERSION: 1.7.3
+ * DATE: 2014-01-14
+ * UPDATES AND DOCS AT: http://www.greensock.com
+ *
+ * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
+ * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
+ * Club GreenSock members, the software agreement that was issued with your membership.
+ * 
+ * @author: Jack Doyle, jack@greensock.com
+ **/
+(window._gsQueue || (window._gsQueue = [])).push( function() {
+
+    "use strict";
+
+    var _doc = document.documentElement,
+        _window = window,
+        _max = function(element, axis) {
+            var dim = (axis === "x") ? "Width" : "Height",
+                scroll = "scroll" + dim,
+                client = "client" + dim,
+                body = document.body;
+            return (element === _window || element === _doc || element === body) ? Math.max(_doc[scroll], body[scroll]) - (_window["inner" + dim] || Math.max(_doc[client], body[client])) : element[scroll] - element["offset" + dim];
+        },
+
+        ScrollToPlugin = window._gsDefine.plugin({
+            propName: "scrollTo",
+            API: 2,
+            version:"1.7.3",
+
+            //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
+            init: function(target, value, tween) {
+                this._wdw = (target === _window);
+                this._target = target;
+                this._tween = tween;
+                if (typeof(value) !== "object") {
+                    value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y".
+                }
+                this._autoKill = (value.autoKill !== false);
+                this.x = this.xPrev = this.getX();
+                this.y = this.yPrev = this.getY();
+                if (value.x != null) {
+                    this._addTween(this, "x", this.x, (value.x === "max") ? _max(target, "x") : value.x, "scrollTo_x", true);
+                    this._overwriteProps.push("scrollTo_x");
+                } else {
+                    this.skipX = true;
+                }
+                if (value.y != null) {
+                    this._addTween(this, "y", this.y, (value.y === "max") ? _max(target, "y") : value.y, "scrollTo_y", true);
+                    this._overwriteProps.push("scrollTo_y");
+                } else {
+                    this.skipY = true;
+                }
+                return true;
+            },
+
+            //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)
+            set: function(v) {
+                this._super.setRatio.call(this, v);
+
+                var x = (this._wdw || !this.skipX) ? this.getX() : this.xPrev,
+                    y = (this._wdw || !this.skipY) ? this.getY() : this.yPrev,
+                    yDif = y - this.yPrev,
+                    xDif = x - this.xPrev;
+
+                if (this._autoKill) {
+                    //note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match.
+                    if (!this.skipX && (xDif > 7 || xDif < -7) && x < _max(this._target, "x")) {
+                        this.skipX = true; //if the user scrolls separately, we should stop tweening!
+                    }
+                    if (!this.skipY && (yDif > 7 || yDif < -7) && y < _max(this._target, "y")) {
+                        this.skipY = true; //if the user scrolls separately, we should stop tweening!
+                    }
+                    if (this.skipX && this.skipY) {
+                        this._tween.kill();
+                    }
+                }
+                if (this._wdw) {
+                    _window.scrollTo((!this.skipX) ? this.x : x, (!this.skipY) ? this.y : y);
+                } else {
+                    if (!this.skipY) {
+                        this._target.scrollTop = this.y;
+                    }
+                    if (!this.skipX) {
+                        this._target.scrollLeft = this.x;
+                    }
+                }
+                this.xPrev = this.x;
+                this.yPrev = this.y;
+            }
+
+        }),
+        p = ScrollToPlugin.prototype;
+
+    ScrollToPlugin.max = _max;
+
+    p.getX = function() {
+        return (!this._wdw) ? this._target.scrollLeft : (_window.pageXOffset != null) ? _window.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : document.body.scrollLeft;
+    };
+
+    p.getY = function() {
+        return (!this._wdw) ? this._target.scrollTop : (_window.pageYOffset != null) ? _window.pageYOffset : (_doc.scrollTop != null) ? _doc.scrollTop : document.body.scrollTop;
+    };
+
+    p._kill = function(lookup) {
+        if (lookup.scrollTo_x) {
+            this.skipX = true;
+        }
+        if (lookup.scrollTo_y) {
+            this.skipY = true;
+        }
+        return this._super._kill.call(this, lookup);
+    };
+
+}); if (window._gsDefine) { window._gsQueue.pop()(); }
+/*!
+ * VERSION: 1.12.1
+ * DATE: 2014-06-26
+ * UPDATES AND DOCS AT: http://www.greensock.com
+ * 
+ * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
+ *
+ * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
+ * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
+ * Club GreenSock members, the software agreement that was issued with your membership.
+ * 
+ * @author: Jack Doyle, jack@greensock.com
+ **/
+
+(window._gsQueue || (window._gsQueue = [])).push( function() {
+
+    "use strict";
+
+    window._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) {
+
+        var _slice = [].slice,
+            TweenMax = function(target, duration, vars) {
+                TweenLite.call(this, target, duration, vars);
+                this._cycle = 0;
+                this._yoyo = (this.vars.yoyo === true);
+                this._repeat = this.vars.repeat || 0;
+                this._repeatDelay = this.vars.repeatDelay || 0;
+                this._dirty = true; //ensures that if there is any repeat, the totalDuration will get recalculated to accurately report it.
+                this.render = TweenMax.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)
+            },
+            _tinyNum = 0.0000000001,
+            TweenLiteInternals = TweenLite._internals,
+            _isSelector = TweenLiteInternals.isSelector,
+            _isArray = TweenLiteInternals.isArray,
+            p = TweenMax.prototype = TweenLite.to({}, 0.1, {}),
+            _blankArray = [];
+
+        TweenMax.version = "1.12.1";
+        p.constructor = TweenMax;
+        p.kill()._gc = false;
+        TweenMax.killTweensOf = TweenMax.killDelayedCallsTo = TweenLite.killTweensOf;
+        TweenMax.getTweensOf = TweenLite.getTweensOf;
+        TweenMax.lagSmoothing = TweenLite.lagSmoothing;
+        TweenMax.ticker = TweenLite.ticker;
+        TweenMax.render = TweenLite.render;
+
+        p.invalidate = function() {
+            this._yoyo = (this.vars.yoyo === true);
+            this._repeat = this.vars.repeat || 0;
+            this._repeatDelay = this.vars.repeatDelay || 0;
+            this._uncache(true);
+            return TweenLite.prototype.invalidate.call(this);
+        };
+        
+        p.updateTo = function(vars, resetDuration) {
+            var curRatio = this.ratio, p;
+            if (resetDuration && this._startTime < this._timeline._time) {
+                this._startTime = this._timeline._time;
+                this._uncache(false);
+                if (this._gc) {
+                    this._enabled(true, false);
+                } else {
+                    this._timeline.insert(this, this._startTime - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct.
+                }
+            }
+            for (p in vars) {
+                this.vars[p] = vars[p];
+            }
+            if (this._initted) {
+                if (resetDuration) {
+                    this._initted = false;
+                } else {
+                    if (this._gc) {
+                        this._enabled(true, false);
+                    }
+                    if (this._notifyPluginsOfEnabled && this._firstPT) {
+                        TweenLite._onPluginEvent("_onDisable", this); //in case a plugin like MotionBlur must perform some cleanup tasks
+                    }
+                    if (this._time / this._duration > 0.998) { //if the tween has finished (or come extremely close to finishing), we just need to rewind it to 0 and then render it again at the end which forces it to re-initialize (parsing the new vars). We allow tweens that are close to finishing (but haven't quite finished) to work this way too because otherwise, the values are so small when determining where to project the starting values that binary math issues creep in and can make the tween appear to render incorrectly when run backwards. 
+                        var prevTime = this._time;
+                        this.render(0, true, false);
+                        this._initted = false;
+                        this.render(prevTime, true, false);
+                    } else if (this._time > 0) {
+                        this._initted = false;
+                        this._init();
+                        var inv = 1 / (1 - curRatio),
+                            pt = this._firstPT, endValue;
+                        while (pt) {
+                            endValue = pt.s + pt.c; 
+                            pt.c *= inv;
+                            pt.s = endValue - pt.c;
+                            pt = pt._next;
+                        }
+                    }
+                }
+            }
+            return this;
+        };
+                
+        p.render = function(time, suppressEvents, force) {
+            if (!this._initted) if (this._duration === 0 && this.vars.repeat) { //zero duration tweens that render immediately have render() called from TweenLite's constructor, before TweenMax's constructor has finished setting _repeat, _repeatDelay, and _yoyo which are critical in determining totalDuration() so we need to call invalidate() which is a low-kb way to get those set properly.
+                this.invalidate();
+            }
+            var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(),
+                prevTime = this._time,
+                prevTotalTime = this._totalTime, 
+                prevCycle = this._cycle,
+                duration = this._duration,
+                prevRawPrevTime = this._rawPrevTime,
+                isComplete, callback, pt, cycleDuration, r, type, pow, rawPrevTime, i;
+            if (time >= totalDur) {
+                this._totalTime = totalDur;
+                this._cycle = this._repeat;
+                if (this._yoyo && (this._cycle & 1) !== 0) {
+                    this._time = 0;
+                    this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;
+                } else {
+                    this._time = duration;
+                    this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1;
+                }
+                if (!this._reversed) {
+                    isComplete = true;
+                    callback = "onComplete";
+                }
+                if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
+                    if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate.
+                        time = 0;
+                    }
+                    if (time === 0 || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time) {
+                        force = true;
+                        if (prevRawPrevTime > _tinyNum) {
+                            callback = "onReverseComplete";
+                        }
+                    }
+                    this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                }
+                
+            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.
+                this._totalTime = this._time = this._cycle = 0;
+                this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;
+                if (prevTotalTime !== 0 || (duration === 0 && prevRawPrevTime > 0 && prevRawPrevTime !== _tinyNum)) {
+                    callback = "onReverseComplete";
+                    isComplete = this._reversed;
+                }
+                if (time < 0) {
+                    this._active = false;
+                    if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
+                        if (prevRawPrevTime >= 0) {
+                            force = true;
+                        }
+                        this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                    }
+                } else if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
+                    force = true;
+                }
+            } else {
+                this._totalTime = this._time = time;
+                
+                if (this._repeat !== 0) {
+                    cycleDuration = duration + this._repeatDelay;
+                    this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but Flash reports it as 0.79999999!)
+                    if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration) {
+                        this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning)
+                    }
+                    this._time = this._totalTime - (this._cycle * cycleDuration);
+                    if (this._yoyo) if ((this._cycle & 1) !== 0) {
+                        this._time = duration - this._time;
+                    }
+                    if (this._time > duration) {
+                        this._time = duration;
+                    } else if (this._time < 0) {
+                        this._time = 0;
+                    }
+                }
+
+                if (this._easeType) {
+                    r = this._time / duration;
+                    type = this._easeType;
+                    pow = this._easePower;
+                    if (type === 1 || (type === 3 && r >= 0.5)) {
+                        r = 1 - r;
+                    }
+                    if (type === 3) {
+                        r *= 2;
+                    }
+                    if (pow === 1) {
+                        r *= r;
+                    } else if (pow === 2) {
+                        r *= r * r;
+                    } else if (pow === 3) {
+                        r *= r * r * r;
+                    } else if (pow === 4) {
+                        r *= r * r * r * r;
+                    }
+
+                    if (type === 1) {
+                        this.ratio = 1 - r;
+                    } else if (type === 2) {
+                        this.ratio = r;
+                    } else if (this._time / duration < 0.5) {
+                        this.ratio = r / 2;
+                    } else {
+                        this.ratio = 1 - (r / 2);
+                    }
+
+                } else {
+                    this.ratio = this._ease.getRatio(this._time / duration);
+                }
+                
+            }
+                
+            if (prevTime === this._time && !force && prevCycle === this._cycle) {
+                if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate.
+                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);
+                }
+                return;
+            } else if (!this._initted) {
+                this._init();
+                if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example.
+                    return;
+                } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) { //we stick it in the queue for rendering at the very end of the tick - this is a performance optimization because browsers invalidate styles and force a recalculation if you read, write, and then read style data (so it's better to read/read/read/write/write/write than read/write/read/write/read/write). The down side, of course, is that usually you WANT things to render immediately because you may have code running right after that which depends on the change. Like imagine running TweenLite.set(...) and then immediately after that, creating a nother tween that animates the same property to another value; the starting values of that 2nd tween wouldn't be accurate if lazy is true.
+                    this._time = prevTime;
+                    this._totalTime = prevTotalTime;
+                    this._rawPrevTime = prevRawPrevTime;
+                    this._cycle = prevCycle;
+                    TweenLiteInternals.lazyTweens.push(this);
+                    this._lazy = time;
+                    return;
+                }
+                //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently.
+                if (this._time && !isComplete) {
+                    this.ratio = this._ease.getRatio(this._time / duration);
+                } else if (isComplete && this._ease._calcEnd) {
+                    this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1);
+                }
+            }
+            if (this._lazy !== false) {
+                this._lazy = false;
+            }
+
+            if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) {
+                this._active = true; //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done.
+            }
+            if (prevTotalTime === 0) {
+                if (this._initted === 2 && time > 0) {
+                    //this.invalidate();
+                    this._init(); //will just apply overwriting since _initted of (2) means it was a from() tween that had immediateRender:true
+                }
+                if (this._startAt) {
+                    if (time >= 0) {
+                        this._startAt.render(time, suppressEvents, force);
+                    } else if (!callback) {
+                        callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area.
+                    }
+                }
+                if (this.vars.onStart) if (this._totalTime !== 0 || duration === 0) if (!suppressEvents) {
+                    this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);
+                }
+            }
+            
+            pt = this._firstPT;
+            while (pt) {
+                if (pt.f) {
+                    pt.t[pt.p](pt.c * this.ratio + pt.s);
+                } else {
+                    pt.t[pt.p] = pt.c * this.ratio + pt.s;
+                }
+                pt = pt._next;
+            }
+            
+            if (this._onUpdate) {
+                if (time < 0) if (this._startAt && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
+                    this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
+                }
+                if (!suppressEvents) if (this._totalTime !== prevTotalTime || isComplete) {
+                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);
+                }
+            }
+            if (this._cycle !== prevCycle) if (!suppressEvents) if (!this._gc) if (this.vars.onRepeat) {
+                this.vars.onRepeat.apply(this.vars.onRepeatScope || this, this.vars.onRepeatParams || _blankArray);
+            }
+            if (callback) if (!this._gc) { //check gc because there's a chance that kill() could be called in an onUpdate
+                if (time < 0 && this._startAt && !this._onUpdate && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
+                    this._startAt.render(time, suppressEvents, force);
+                }
+                if (isComplete) {
+                    if (this._timeline.autoRemoveChildren) {
+                        this._enabled(false, false);
+                    }
+                    this._active = false;
+                }
+                if (!suppressEvents && this.vars[callback]) {
+                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);
+                }
+                if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless.
+                    this._rawPrevTime = 0;
+                }
+            }
+        };
+        
+//---- STATIC FUNCTIONS -----------------------------------------------------------------------------------------------------------
+        
+        TweenMax.to = function(target, duration, vars) {
+            return new TweenMax(target, duration, vars);
+        };
+        
+        TweenMax.from = function(target, duration, vars) {
+            vars.runBackwards = true;
+            vars.immediateRender = (vars.immediateRender != false);
+            return new TweenMax(target, duration, vars);
+        };
+        
+        TweenMax.fromTo = function(target, duration, fromVars, toVars) {
+            toVars.startAt = fromVars;
+            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);
+            return new TweenMax(target, duration, toVars);
+        };
+        
+        TweenMax.staggerTo = TweenMax.allTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
+            stagger = stagger || 0;
+            var delay = vars.delay || 0,
+                a = [],
+                finalComplete = function() {
+                    if (vars.onComplete) {
+                        vars.onComplete.apply(vars.onCompleteScope || this, arguments);
+                    }
+                    onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || _blankArray);
+                },
+                l, copy, i, p;
+            if (!_isArray(targets)) {
+                if (typeof(targets) === "string") {
+                    targets = TweenLite.selector(targets) || targets;
+                }
+                if (_isSelector(targets)) {
+                    targets = _slice.call(targets, 0);
+                }
+            }
+            l = targets.length;
+            for (i = 0; i < l; i++) {
+                copy = {};
+                for (p in vars) {
+                    copy[p] = vars[p];
+                }
+                copy.delay = delay;
+                if (i === l - 1 && onCompleteAll) {
+                    copy.onComplete = finalComplete;
+                }
+                a[i] = new TweenMax(targets[i], duration, copy);
+                delay += stagger;
+            }
+            return a;
+        };
+        
+        TweenMax.staggerFrom = TweenMax.allFrom = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
+            vars.runBackwards = true;
+            vars.immediateRender = (vars.immediateRender != false);
+            return TweenMax.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope);
+        };
+        
+        TweenMax.staggerFromTo = TweenMax.allFromTo = function(targets, duration, fromVars, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
+            toVars.startAt = fromVars;
+            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);
+            return TweenMax.staggerTo(targets, duration, toVars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope);
+        };
+                
+        TweenMax.delayedCall = function(delay, callback, params, scope, useFrames) {
+            return new TweenMax(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, onCompleteScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, onReverseCompleteScope:scope, immediateRender:false, useFrames:useFrames, overwrite:0});
+        };
+        
+        TweenMax.set = function(target, vars) {
+            return new TweenMax(target, 0, vars);
+        };
+        
+        TweenMax.isTweening = function(target) {
+            return (TweenLite.getTweensOf(target, true).length > 0);
+        };
+        
+        var _getChildrenOf = function(timeline, includeTimelines) {
+                var a = [],
+                    cnt = 0,
+                    tween = timeline._first;
+                while (tween) {
+                    if (tween instanceof TweenLite) {
+                        a[cnt++] = tween;
+                    } else {
+                        if (includeTimelines) {
+                            a[cnt++] = tween;
+                        }
+                        a = a.concat(_getChildrenOf(tween, includeTimelines));
+                        cnt = a.length;
+                    }
+                    tween = tween._next;
+                }
+                return a;
+            }, 
+            getAllTweens = TweenMax.getAllTweens = function(includeTimelines) {
+                return _getChildrenOf(Animation._rootTimeline, includeTimelines).concat( _getChildrenOf(Animation._rootFramesTimeline, includeTimelines) );
+            };
+        
+        TweenMax.killAll = function(complete, tweens, delayedCalls, timelines) {
+            if (tweens == null) {
+                tweens = true;
+            }
+            if (delayedCalls == null) {
+                delayedCalls = true;
+            }
+            var a = getAllTweens((timelines != false)),
+                l = a.length,
+                allTrue = (tweens && delayedCalls && timelines),
+                isDC, tween, i;
+            for (i = 0; i < l; i++) {
+                tween = a[i];
+                if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) {
+                    if (complete) {
+                        tween.totalTime(tween._reversed ? 0 : tween.totalDuration());
+                    } else {
+                        tween._enabled(false, false);
+                    }
+                }
+            }
+        };
+        
+        TweenMax.killChildTweensOf = function(parent, complete) {
+            if (parent == null) {
+                return;
+            }
+            var tl = TweenLiteInternals.tweenLookup,
+                a, curParent, p, i, l;
+            if (typeof(parent) === "string") {
+                parent = TweenLite.selector(parent) || parent;
+            }
+            if (_isSelector(parent)) {
+                parent = _slice.call(parent, 0);
+            }
+            if (_isArray(parent)) {
+                i = parent.length;
+                while (--i > -1) {
+                    TweenMax.killChildTweensOf(parent[i], complete);
+                }
+                return;
+            }
+            a = [];
+            for (p in tl) {
+                curParent = tl[p].target.parentNode;
+                while (curParent) {
+                    if (curParent === parent) {
+                        a = a.concat(tl[p].tweens);
+                    }
+                    curParent = curParent.parentNode;
+                }
+            }
+            l = a.length;
+            for (i = 0; i < l; i++) {
+                if (complete) {
+                    a[i].totalTime(a[i].totalDuration());
+                }
+                a[i]._enabled(false, false);
+            }
+        };
+
+        var _changePause = function(pause, tweens, delayedCalls, timelines) {
+            tweens = (tweens !== false);
+            delayedCalls = (delayedCalls !== false);
+            timelines = (timelines !== false);
+            var a = getAllTweens(timelines),
+                allTrue = (tweens && delayedCalls && timelines),
+                i = a.length,
+                isDC, tween;
+            while (--i > -1) {
+                tween = a[i];
+                if (allTrue || (tween instanceof SimpleTimeline) || ((isDC = (tween.target === tween.vars.onComplete)) && delayedCalls) || (tweens && !isDC)) {
+                    tween.paused(pause);
+                }
+            }
+        };
+        
+        TweenMax.pauseAll = function(tweens, delayedCalls, timelines) {
+            _changePause(true, tweens, delayedCalls, timelines);
+        };
+        
+        TweenMax.resumeAll = function(tweens, delayedCalls, timelines) {
+            _changePause(false, tweens, delayedCalls, timelines);
+        };
+
+        TweenMax.globalTimeScale = function(value) {
+            var tl = Animation._rootTimeline,
+                t = TweenLite.ticker.time;
+            if (!arguments.length) {
+                return tl._timeScale;
+            }
+            value = value || _tinyNum; //can't allow zero because it'll throw the math off
+            tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value);
+            tl = Animation._rootFramesTimeline;
+            t = TweenLite.ticker.frame;
+            tl._startTime = t - ((t - tl._startTime) * tl._timeScale / value);
+            tl._timeScale = Animation._rootTimeline._timeScale = value;
+            return value;
+        };
+        
+    
+//---- GETTERS / SETTERS ----------------------------------------------------------------------------------------------------------
+        
+        p.progress = function(value) {
+            return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), false);
+        };
+        
+        p.totalProgress = function(value) {
+            return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, false);
+        };
+        
+        p.time = function(value, suppressEvents) {
+            if (!arguments.length) {
+                return this._time;
+            }
+            if (this._dirty) {
+                this.totalDuration();
+            }
+            if (value > this._duration) {
+                value = this._duration;
+            }
+            if (this._yoyo && (this._cycle & 1) !== 0) {
+                value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay));
+            } else if (this._repeat !== 0) {
+                value += this._cycle * (this._duration + this._repeatDelay);
+            }
+            return this.totalTime(value, suppressEvents);
+        };
+
+        p.duration = function(value) {
+            if (!arguments.length) {
+                return this._duration; //don't set _dirty = false because there could be repeats that haven't been factored into the _totalDuration yet. Otherwise, if you create a repeated TweenMax and then immediately check its duration(), it would cache the value and the totalDuration would not be correct, thus repeats wouldn't take effect.
+            }
+            return Animation.prototype.duration.call(this, value);
+        };
+
+        p.totalDuration = function(value) {
+            if (!arguments.length) {
+                if (this._dirty) {
+                    //instead of Infinity, we use 999999999999 so that we can accommodate reverses
+                    this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat);
+                    this._dirty = false;
+                }
+                return this._totalDuration;
+            }
+            return (this._repeat === -1) ? this : this.duration( (value - (this._repeat * this._repeatDelay)) / (this._repeat + 1) );
+        };
+        
+        p.repeat = function(value) {
+            if (!arguments.length) {
+                return this._repeat;
+            }
+            this._repeat = value;
+            return this._uncache(true);
+        };
+        
+        p.repeatDelay = function(value) {
+            if (!arguments.length) {
+                return this._repeatDelay;
+            }
+            this._repeatDelay = value;
+            return this._uncache(true);
+        };
+        
+        p.yoyo = function(value) {
+            if (!arguments.length) {
+                return this._yoyo;
+            }
+            this._yoyo = value;
+            return this;
+        };
+        
+        
+        return TweenMax;
+        
+    }, true);
+
+
+
+
+
+
+
+
+/*
+ * ----------------------------------------------------------------
+ * TimelineLite
+ * ----------------------------------------------------------------
+ */
+    window._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","TweenLite"], function(Animation, SimpleTimeline, TweenLite) {
+
+        var TimelineLite = function(vars) {
+                SimpleTimeline.call(this, vars);
+                this._labels = {};
+                this.autoRemoveChildren = (this.vars.autoRemoveChildren === true);
+                this.smoothChildTiming = (this.vars.smoothChildTiming === true);
+                this._sortChildren = true;
+                this._onUpdate = this.vars.onUpdate;
+                var v = this.vars,
+                    val, p;
+                for (p in v) {
+                    val = v[p];
+                    if (_isArray(val)) if (val.join("").indexOf("{self}") !== -1) {
+                        v[p] = this._swapSelfInParams(val);
+                    }
+                }
+                if (_isArray(v.tweens)) {
+                    this.add(v.tweens, 0, v.align, v.stagger);
+                }
+            },
+            _tinyNum = 0.0000000001,
+            _isSelector = TweenLite._internals.isSelector,
+            _isArray = TweenLite._internals.isArray,
+            _blankArray = [],
+            _globals = window._gsDefine.globals,
+            _copy = function(vars) {
+                var copy = {}, p;
+                for (p in vars) {
+                    copy[p] = vars[p];
+                }
+                return copy;
+            },
+            _pauseCallback = function(tween, callback, params, scope) {
+                tween._timeline.pause(tween._startTime);
+                if (callback) {
+                    callback.apply(scope || tween._timeline, params || _blankArray);
+                }
+            },
+            _slice = _blankArray.slice,
+            p = TimelineLite.prototype = new SimpleTimeline();
+
+        TimelineLite.version = "1.12.1";
+        p.constructor = TimelineLite;
+        p.kill()._gc = false;
+
+        p.to = function(target, duration, vars, position) {
+            var Engine = (vars.repeat && _globals.TweenMax) || TweenLite;
+            return duration ? this.add( new Engine(target, duration, vars), position) : this.set(target, vars, position);
+        };
+
+        p.from = function(target, duration, vars, position) {
+            return this.add( ((vars.repeat && _globals.TweenMax) || TweenLite).from(target, duration, vars), position);
+        };
+
+        p.fromTo = function(target, duration, fromVars, toVars, position) {
+            var Engine = (toVars.repeat && _globals.TweenMax) || TweenLite;
+            return duration ? this.add( Engine.fromTo(target, duration, fromVars, toVars), position) : this.set(target, toVars, position);
+        };
+
+        p.staggerTo = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
+            var tl = new TimelineLite({onComplete:onCompleteAll, onCompleteParams:onCompleteAllParams, onCompleteScope:onCompleteAllScope, smoothChildTiming:this.smoothChildTiming}),
+                i;
+            if (typeof(targets) === "string") {
+                targets = TweenLite.selector(targets) || targets;
+            }
+            if (_isSelector(targets)) { //senses if the targets object is a selector. If it is, we should translate it into an array.
+                targets = _slice.call(targets, 0);
+            }
+            stagger = stagger || 0;
+            for (i = 0; i < targets.length; i++) {
+                if (vars.startAt) {
+                    vars.startAt = _copy(vars.startAt);
+                }
+                tl.to(targets[i], duration, _copy(vars), i * stagger);
+            }
+            return this.add(tl, position);
+        };
+
+        p.staggerFrom = function(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
+            vars.immediateRender = (vars.immediateRender != false);
+            vars.runBackwards = true;
+            return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope);
+        };
+
+        p.staggerFromTo = function(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
+            toVars.startAt = fromVars;
+            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);
+            return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams, onCompleteAllScope);
+        };
+
+        p.call = function(callback, params, scope, position) {
+            return this.add( TweenLite.delayedCall(0, callback, params, scope), position);
+        };
+
+        p.set = function(target, vars, position) {
+            position = this._parseTimeOrLabel(position, 0, true);
+            if (vars.immediateRender == null) {
+                vars.immediateRender = (position === this._time && !this._paused);
+            }
+            return this.add( new TweenLite(target, 0, vars), position);
+        };
+
+        TimelineLite.exportRoot = function(vars, ignoreDelayedCalls) {
+            vars = vars || {};
+            if (vars.smoothChildTiming == null) {
+                vars.smoothChildTiming = true;
+            }
+            var tl = new TimelineLite(vars),
+                root = tl._timeline,
+                tween, next;
+            if (ignoreDelayedCalls == null) {
+                ignoreDelayedCalls = true;
+            }
+            root._remove(tl, true);
+            tl._startTime = 0;
+            tl._rawPrevTime = tl._time = tl._totalTime = root._time;
+            tween = root._first;
+            while (tween) {
+                next = tween._next;
+                if (!ignoreDelayedCalls || !(tween instanceof TweenLite && tween.target === tween.vars.onComplete)) {
+                    tl.add(tween, tween._startTime - tween._delay);
+                }
+                tween = next;
+            }
+            root.add(tl, 0);
+            return tl;
+        };
+
+        p.add = function(value, position, align, stagger) {
+            var curTime, l, i, child, tl, beforeRawTime;
+            if (typeof(position) !== "number") {
+                position = this._parseTimeOrLabel(position, 0, true, value);
+            }
+            if (!(value instanceof Animation)) {
+                if ((value instanceof Array) || (value && value.push && _isArray(value))) {
+                    align = align || "normal";
+                    stagger = stagger || 0;
+                    curTime = position;
+                    l = value.length;
+                    for (i = 0; i < l; i++) {
+                        if (_isArray(child = value[i])) {
+                            child = new TimelineLite({tweens:child});
+                        }
+                        this.add(child, curTime);
+                        if (typeof(child) !== "string" && typeof(child) !== "function") {
+                            if (align === "sequence") {
+                                curTime = child._startTime + (child.totalDuration() / child._timeScale);
+                            } else if (align === "start") {
+                                child._startTime -= child.delay();
+                            }
+                        }
+                        curTime += stagger;
+                    }
+                    return this._uncache(true);
+                } else if (typeof(value) === "string") {
+                    return this.addLabel(value, position);
+                } else if (typeof(value) === "function") {
+                    value = TweenLite.delayedCall(0, value);
+                } else {
+                    throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string.");
+                }
+            }
+
+            SimpleTimeline.prototype.add.call(this, value, position);
+
+            //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.
+            if (this._gc || this._time === this._duration) if (!this._paused) if (this._duration < this.duration()) {
+                //in case any of the ancestors had completed but should now be enabled...
+                tl = this;
+                beforeRawTime = (tl.rawTime() > value._startTime); //if the tween is placed on the timeline so that it starts BEFORE the current rawTime, we should align the playhead (move the timeline). This is because sometimes users will create a timeline, let it finish, and much later append a tween and expect it to run instead of jumping to its end state. While technically one could argue that it should jump to its end state, that's not what users intuitively expect.
+                while (tl._timeline) {
+                    if (beforeRawTime && tl._timeline.smoothChildTiming) {
+                        tl.totalTime(tl._totalTime, true); //moves the timeline (shifts its startTime) if necessary, and also enables it.
+                    } else if (tl._gc) {
+                        tl._enabled(true, false);
+                    }
+                    tl = tl._timeline;
+                }
+            }
+
+            return this;
+        };
+
+        p.remove = function(value) {
+            if (value instanceof Animation) {
+                return this._remove(value, false);
+            } else if (value instanceof Array || (value && value.push && _isArray(value))) {
+                var i = value.length;
+                while (--i > -1) {
+                    this.remove(value[i]);
+                }
+                return this;
+            } else if (typeof(value) === "string") {
+                return this.removeLabel(value);
+            }
+            return this.kill(null, value);
+        };
+
+        p._remove = function(tween, skipDisable) {
+            SimpleTimeline.prototype._remove.call(this, tween, skipDisable);
+            var last = this._last;
+            if (!last) {
+                this._time = this._totalTime = this._duration = this._totalDuration = 0;
+            } else if (this._time > last._startTime + last._totalDuration / last._timeScale) {
+                this._time = this.duration();
+                this._totalTime = this._totalDuration;
+            }
+            return this;
+        };
+
+        p.append = function(value, offsetOrLabel) {
+            return this.add(value, this._parseTimeOrLabel(null, offsetOrLabel, true, value));
+        };
+
+        p.insert = p.insertMultiple = function(value, position, align, stagger) {
+            return this.add(value, position || 0, align, stagger);
+        };
+
+        p.appendMultiple = function(tweens, offsetOrLabel, align, stagger) {
+            return this.add(tweens, this._parseTimeOrLabel(null, offsetOrLabel, true, tweens), align, stagger);
+        };
+
+        p.addLabel = function(label, position) {
+            this._labels[label] = this._parseTimeOrLabel(position);
+            return this;
+        };
+
+        p.addPause = function(position, callback, params, scope) {
+            return this.call(_pauseCallback, ["{self}", callback, params, scope], this, position);
+        };
+
+        p.removeLabel = function(label) {
+            delete this._labels[label];
+            return this;
+        };
+
+        p.getLabelTime = function(label) {
+            return (this._labels[label] != null) ? this._labels[label] : -1;
+        };
+
+        p._parseTimeOrLabel = function(timeOrLabel, offsetOrLabel, appendIfAbsent, ignore) {
+            var i;
+            //if we're about to add a tween/timeline (or an array of them) that's already a child of this timeline, we should remove it first so that it doesn't contaminate the duration().
+            if (ignore instanceof Animation && ignore.timeline === this) {
+                this.remove(ignore);
+            } else if (ignore && ((ignore instanceof Array) || (ignore.push && _isArray(ignore)))) {
+                i = ignore.length;
+                while (--i > -1) {
+                    if (ignore[i] instanceof Animation && ignore[i].timeline === this) {
+                        this.remove(ignore[i]);
+                    }
+                }
+            }
+            if (typeof(offsetOrLabel) === "string") {
+                return this._parseTimeOrLabel(offsetOrLabel, (appendIfAbsent && typeof(timeOrLabel) === "number" && this._labels[offsetOrLabel] == null) ? timeOrLabel - this.duration() : 0, appendIfAbsent);
+            }
+            offsetOrLabel = offsetOrLabel || 0;
+            if (typeof(timeOrLabel) === "string" && (isNaN(timeOrLabel) || this._labels[timeOrLabel] != null)) { //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).
+                i = timeOrLabel.indexOf("=");
+                if (i === -1) {
+                    if (this._labels[timeOrLabel] == null) {
+                        return appendIfAbsent ? (this._labels[timeOrLabel] = this.duration() + offsetOrLabel) : offsetOrLabel;
+                    }
+                    return this._labels[timeOrLabel] + offsetOrLabel;
+                }
+                offsetOrLabel = parseInt(timeOrLabel.charAt(i-1) + "1", 10) * Number(timeOrLabel.substr(i+1));
+                timeOrLabel = (i > 1) ? this._parseTimeOrLabel(timeOrLabel.substr(0, i-1), 0, appendIfAbsent) : this.duration();
+            } else if (timeOrLabel == null) {
+                timeOrLabel = this.duration();
+            }
+            return Number(timeOrLabel) + offsetOrLabel;
+        };
+
+        p.seek = function(position, suppressEvents) {
+            return this.totalTime((typeof(position) === "number") ? position : this._parseTimeOrLabel(position), (suppressEvents !== false));
+        };
+
+        p.stop = function() {
+            return this.paused(true);
+        };
+
+        p.gotoAndPlay = function(position, suppressEvents) {
+            return this.play(position, suppressEvents);
+        };
+
+        p.gotoAndStop = function(position, suppressEvents) {
+            return this.pause(position, suppressEvents);
+        };
+
+        p.render = function(time, suppressEvents, force) {
+            if (this._gc) {
+                this._enabled(true, false);
+            }
+            var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(),
+                prevTime = this._time,
+                prevStart = this._startTime,
+                prevTimeScale = this._timeScale,
+                prevPaused = this._paused,
+                tween, isComplete, next, callback, internalForce;
+            if (time >= totalDur) {
+                this._totalTime = this._time = totalDur;
+                if (!this._reversed) if (!this._hasPausedChild()) {
+                    isComplete = true;
+                    callback = "onComplete";
+                    if (this._duration === 0) if (time === 0 || this._rawPrevTime < 0 || this._rawPrevTime === _tinyNum) if (this._rawPrevTime !== time && this._first) {
+                        internalForce = true;
+                        if (this._rawPrevTime > _tinyNum) {
+                            callback = "onReverseComplete";
+                        }
+                    }
+                }
+                this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                time = totalDur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7.
+
+            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.
+                this._totalTime = this._time = 0;
+                if (prevTime !== 0 || (this._duration === 0 && this._rawPrevTime !== _tinyNum && (this._rawPrevTime > 0 || (time < 0 && this._rawPrevTime >= 0)))) {
+                    callback = "onReverseComplete";
+                    isComplete = this._reversed;
+                }
+                if (time < 0) {
+                    this._active = false;
+                    if (this._duration === 0) if (this._rawPrevTime >= 0 && this._first) { //zero-duration timelines are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
+                        internalForce = true;
+                    }
+                    this._rawPrevTime = time;
+                } else {
+                    this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+
+                    time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline)
+                    if (!this._initted) {
+                        internalForce = true;
+                    }
+                }
+
+            } else {
+                this._totalTime = this._time = this._rawPrevTime = time;
+            }
+            if ((this._time === prevTime || !this._first) && !force && !internalForce) {
+                return;
+            } else if (!this._initted) {
+                this._initted = true;
+            }
+
+            if (!this._active) if (!this._paused && this._time !== prevTime && time > 0) {
+                this._active = true;  //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example.
+            }
+
+            if (prevTime === 0) if (this.vars.onStart) if (this._time !== 0) if (!suppressEvents) {
+                this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);
+            }
+
+            if (this._time >= prevTime) {
+                tween = this._first;
+                while (tween) {
+                    next = tween._next; //record it here because the value could change after rendering...
+                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering
+                        break;
+                    } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) {
+                        if (!tween._reversed) {
+                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
+                        } else {
+                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
+                        }
+                    }
+                    tween = next;
+                }
+            } else {
+                tween = this._last;
+                while (tween) {
+                    next = tween._prev; //record it here because the value could change after rendering...
+                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering
+                        break;
+                    } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) {
+                        if (!tween._reversed) {
+                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
+                        } else {
+                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
+                        }
+                    }
+                    tween = next;
+                }
+            }
+
+            if (this._onUpdate) if (!suppressEvents) {
+                this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);
+            }
+
+            if (callback) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate
+                if (isComplete) {
+                    if (this._timeline.autoRemoveChildren) {
+                        this._enabled(false, false);
+                    }
+                    this._active = false;
+                }
+                if (!suppressEvents && this.vars[callback]) {
+                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);
+                }
+            }
+        };
+
+        p._hasPausedChild = function() {
+            var tween = this._first;
+            while (tween) {
+                if (tween._paused || ((tween instanceof TimelineLite) && tween._hasPausedChild())) {
+                    return true;
+                }
+                tween = tween._next;
+            }
+            return false;
+        };
+
+        p.getChildren = function(nested, tweens, timelines, ignoreBeforeTime) {
+            ignoreBeforeTime = ignoreBeforeTime || -9999999999;
+            var a = [],
+                tween = this._first,
+                cnt = 0;
+            while (tween) {
+                if (tween._startTime < ignoreBeforeTime) {
+                    //do nothing
+                } else if (tween instanceof TweenLite) {
+                    if (tweens !== false) {
+                        a[cnt++] = tween;
+                    }
+                } else {
+                    if (timelines !== false) {
+                        a[cnt++] = tween;
+                    }
+                    if (nested !== false) {
+                        a = a.concat(tween.getChildren(true, tweens, timelines));
+                        cnt = a.length;
+                    }
+                }
+                tween = tween._next;
+            }
+            return a;
+        };
+
+        p.getTweensOf = function(target, nested) {
+            var disabled = this._gc,
+                a = [],
+                cnt = 0,
+                tweens, i;
+            if (disabled) {
+                this._enabled(true, true); //getTweensOf() filters out disabled tweens, and we have to mark them as _gc = true when the timeline completes in order to allow clean garbage collection, so temporarily re-enable the timeline here.
+            }
+            tweens = TweenLite.getTweensOf(target);
+            i = tweens.length;
+            while (--i > -1) {
+                if (tweens[i].timeline === this || (nested && this._contains(tweens[i]))) {
+                    a[cnt++] = tweens[i];
+                }
+            }
+            if (disabled) {
+                this._enabled(false, true);
+            }
+            return a;
+        };
+
+        p._contains = function(tween) {
+            var tl = tween.timeline;
+            while (tl) {
+                if (tl === this) {
+                    return true;
+                }
+                tl = tl.timeline;
+            }
+            return false;
+        };
+
+        p.shiftChildren = function(amount, adjustLabels, ignoreBeforeTime) {
+            ignoreBeforeTime = ignoreBeforeTime || 0;
+            var tween = this._first,
+                labels = this._labels,
+                p;
+            while (tween) {
+                if (tween._startTime >= ignoreBeforeTime) {
+                    tween._startTime += amount;
+                }
+                tween = tween._next;
+            }
+            if (adjustLabels) {
+                for (p in labels) {
+                    if (labels[p] >= ignoreBeforeTime) {
+                        labels[p] += amount;
+                    }
+                }
+            }
+            return this._uncache(true);
+        };
+
+        p._kill = function(vars, target) {
+            if (!vars && !target) {
+                return this._enabled(false, false);
+            }
+            var tweens = (!target) ? this.getChildren(true, true, false) : this.getTweensOf(target),
+                i = tweens.length,
+                changed = false;
+            while (--i > -1) {
+                if (tweens[i]._kill(vars, target)) {
+                    changed = true;
+                }
+            }
+            return changed;
+        };
+
+        p.clear = function(labels) {
+            var tweens = this.getChildren(false, true, true),
+                i = tweens.length;
+            this._time = this._totalTime = 0;
+            while (--i > -1) {
+                tweens[i]._enabled(false, false);
+            }
+            if (labels !== false) {
+                this._labels = {};
+            }
+            return this._uncache(true);
+        };
+
+        p.invalidate = function() {
+            var tween = this._first;
+            while (tween) {
+                tween.invalidate();
+                tween = tween._next;
+            }
+            return this;
+        };
+
+        p._enabled = function(enabled, ignoreTimeline) {
+            if (enabled === this._gc) {
+                var tween = this._first;
+                while (tween) {
+                    tween._enabled(enabled, true);
+                    tween = tween._next;
+                }
+            }
+            return SimpleTimeline.prototype._enabled.call(this, enabled, ignoreTimeline);
+        };
+
+        p.duration = function(value) {
+            if (!arguments.length) {
+                if (this._dirty) {
+                    this.totalDuration(); //just triggers recalculation
+                }
+                return this._duration;
+            }
+            if (this.duration() !== 0 && value !== 0) {
+                this.timeScale(this._duration / value);
+            }
+            return this;
+        };
+
+        p.totalDuration = function(value) {
+            if (!arguments.length) {
+                if (this._dirty) {
+                    var max = 0,
+                        tween = this._last,
+                        prevStart = 999999999999,
+                        prev, end;
+                    while (tween) {
+                        prev = tween._prev; //record it here in case the tween changes position in the sequence...
+                        if (tween._dirty) {
+                            tween.totalDuration(); //could change the tween._startTime, so make sure the tween's cache is clean before analyzing it.
+                        }
+                        if (tween._startTime > prevStart && this._sortChildren && !tween._paused) { //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence
+                            this.add(tween, tween._startTime - tween._delay);
+                        } else {
+                            prevStart = tween._startTime;
+                        }
+                        if (tween._startTime < 0 && !tween._paused) { //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.
+                            max -= tween._startTime;
+                            if (this._timeline.smoothChildTiming) {
+                                this._startTime += tween._startTime / this._timeScale;
+                            }
+                            this.shiftChildren(-tween._startTime, false, -9999999999);
+                            prevStart = 0;
+                        }
+                        end = tween._startTime + (tween._totalDuration / tween._timeScale);
+                        if (end > max) {
+                            max = end;
+                        }
+                        tween = prev;
+                    }
+                    this._duration = this._totalDuration = max;
+                    this._dirty = false;
+                }
+                return this._totalDuration;
+            }
+            if (this.totalDuration() !== 0) if (value !== 0) {
+                this.timeScale(this._totalDuration / value);
+            }
+            return this;
+        };
+
+        p.usesFrames = function() {
+            var tl = this._timeline;
+            while (tl._timeline) {
+                tl = tl._timeline;
+            }
+            return (tl === Animation._rootFramesTimeline);
+        };
+
+        p.rawTime = function() {
+            return this._paused ? this._totalTime : (this._timeline.rawTime() - this._startTime) * this._timeScale;
+        };
+
+        return TimelineLite;
+
+    }, true);
+    
+
+
+
+
+
+
+
+    
+    
+    
+    
+    
+/*
+ * ----------------------------------------------------------------
+ * TimelineMax
+ * ----------------------------------------------------------------
+ */
+    window._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], function(TimelineLite, TweenLite, Ease) {
+
+        var TimelineMax = function(vars) {
+                TimelineLite.call(this, vars);
+                this._repeat = this.vars.repeat || 0;
+                this._repeatDelay = this.vars.repeatDelay || 0;
+                this._cycle = 0;
+                this._yoyo = (this.vars.yoyo === true);
+                this._dirty = true;
+            },
+            _tinyNum = 0.0000000001,
+            _blankArray = [],
+            _easeNone = new Ease(null, null, 1, 0),
+            p = TimelineMax.prototype = new TimelineLite();
+
+        p.constructor = TimelineMax;
+        p.kill()._gc = false;
+        TimelineMax.version = "1.12.1";
+
+        p.invalidate = function() {
+            this._yoyo = (this.vars.yoyo === true);
+            this._repeat = this.vars.repeat || 0;
+            this._repeatDelay = this.vars.repeatDelay || 0;
+            this._uncache(true);
+            return TimelineLite.prototype.invalidate.call(this);
+        };
+
+        p.addCallback = function(callback, position, params, scope) {
+            return this.add( TweenLite.delayedCall(0, callback, params, scope), position);
+        };
+
+        p.removeCallback = function(callback, position) {
+            if (callback) {
+                if (position == null) {
+                    this._kill(null, callback);
+                } else {
+                    var a = this.getTweensOf(callback, false),
+                        i = a.length,
+                        time = this._parseTimeOrLabel(position);
+                    while (--i > -1) {
+                        if (a[i]._startTime === time) {
+                            a[i]._enabled(false, false);
+                        }
+                    }
+                }
+            }
+            return this;
+        };
+
+        p.tweenTo = function(position, vars) {
+            vars = vars || {};
+            var copy = {ease:_easeNone, overwrite:(vars.delay ? 2 : 1), useFrames:this.usesFrames(), immediateRender:false},//note: set overwrite to 1 (true/all) by default unless there's a delay so that we avoid a racing situation that could happen if, for example, an onmousemove creates the same tweenTo() over and over again.
+                duration, p, t;
+            for (p in vars) {
+                copy[p] = vars[p];
+            }
+            copy.time = this._parseTimeOrLabel(position);
+            duration = (Math.abs(Number(copy.time) - this._time) / this._timeScale) || 0.001;
+            t = new TweenLite(this, duration, copy);
+            copy.onStart = function() {
+                t.target.paused(true);
+                if (t.vars.time !== t.target.time() && duration === t.duration()) { //don't make the duration zero - if it's supposed to be zero, don't worry because it's already initting the tween and will complete immediately, effectively making the duration zero anyway. If we make duration zero, the tween won't run at all.
+                    t.duration( Math.abs( t.vars.time - t.target.time()) / t.target._timeScale );
+                }
+                if (vars.onStart) { //in case the user had an onStart in the vars - we don't want to overwrite it.
+                    vars.onStart.apply(vars.onStartScope || t, vars.onStartParams || _blankArray);
+                }
+            };
+            return t;
+        };
+
+        p.tweenFromTo = function(fromPosition, toPosition, vars) {
+            vars = vars || {};
+            fromPosition = this._parseTimeOrLabel(fromPosition);
+            vars.startAt = {onComplete:this.seek, onCompleteParams:[fromPosition], onCompleteScope:this};
+            vars.immediateRender = (vars.immediateRender !== false);
+            var t = this.tweenTo(toPosition, vars);
+            return t.duration((Math.abs( t.vars.time - fromPosition) / this._timeScale) || 0.001);
+        };
+
+        p.render = function(time, suppressEvents, force) {
+            if (this._gc) {
+                this._enabled(true, false);
+            }
+            var totalDur = (!this._dirty) ? this._totalDuration : this.totalDuration(),
+                dur = this._duration,
+                prevTime = this._time,
+                prevTotalTime = this._totalTime,
+                prevStart = this._startTime,
+                prevTimeScale = this._timeScale,
+                prevRawPrevTime = this._rawPrevTime,
+                prevPaused = this._paused,
+                prevCycle = this._cycle,
+                tween, isComplete, next, callback, internalForce, cycleDuration;
+            if (time >= totalDur) {
+                if (!this._locked) {
+                    this._totalTime = totalDur;
+                    this._cycle = this._repeat;
+                }
+                if (!this._reversed) if (!this._hasPausedChild()) {
+                    isComplete = true;
+                    callback = "onComplete";
+                    if (this._duration === 0) if (time === 0 || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time && this._first) {
+                        internalForce = true;
+                        if (prevRawPrevTime > _tinyNum) {
+                            callback = "onReverseComplete";
+                        }
+                    }
+                }
+                this._rawPrevTime = (this._duration || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                if (this._yoyo && (this._cycle & 1) !== 0) {
+                    this._time = time = 0;
+                } else {
+                    this._time = dur;
+                    time = dur + 0.0001; //to avoid occasional floating point rounding errors - sometimes child tweens/timelines were not being fully completed (their progress might be 0.999999999999998 instead of 1 because when _time - tween._startTime is performed, floating point errors would return a value that was SLIGHTLY off). Try (999999999999.7 - 999999999999) * 1 = 0.699951171875 instead of 0.7. We cannot do less then 0.0001 because the same issue can occur when the duration is extremely large like 999999999999 in which case adding 0.00000001, for example, causes it to act like nothing was added.
+                }
+
+            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.
+                if (!this._locked) {
+                    this._totalTime = this._cycle = 0;
+                }
+                this._time = 0;
+                if (prevTime !== 0 || (dur === 0 && prevRawPrevTime !== _tinyNum && (prevRawPrevTime > 0 || (time < 0 && prevRawPrevTime >= 0)) && !this._locked)) { //edge case for checking time < 0 && prevRawPrevTime >= 0: a zero-duration fromTo() tween inside a zero-duration timeline (yeah, very rare)
+                    callback = "onReverseComplete";
+                    isComplete = this._reversed;
+                }
+                if (time < 0) {
+                    this._active = false;
+                    if (dur === 0) if (prevRawPrevTime >= 0 && this._first) { //zero-duration timelines are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
+                        internalForce = true;
+                    }
+                    this._rawPrevTime = time;
+                } else {
+                    this._rawPrevTime = (dur || !suppressEvents || time || this._rawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline or tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                    time = 0; //to avoid occasional floating point rounding errors (could cause problems especially with zero-duration tweens at the very beginning of the timeline)
+                    if (!this._initted) {
+                        internalForce = true;
+                    }
+                }
+
+            } else {
+                if (dur === 0 && prevRawPrevTime < 0) { //without this, zero-duration repeating timelines (like with a simple callback nested at the very beginning and a repeatDelay) wouldn't render the first time through.
+                    internalForce = true;
+                }
+                this._time = this._rawPrevTime = time;
+                if (!this._locked) {
+                    this._totalTime = time;
+                    if (this._repeat !== 0) {
+                        cycleDuration = dur + this._repeatDelay;
+                        this._cycle = (this._totalTime / cycleDuration) >> 0; //originally _totalTime % cycleDuration but floating point errors caused problems, so I normalized it. (4 % 0.8 should be 0 but it gets reported as 0.79999999!)
+                        if (this._cycle !== 0) if (this._cycle === this._totalTime / cycleDuration) {
+                            this._cycle--; //otherwise when rendered exactly at the end time, it will act as though it is repeating (at the beginning)
+                        }
+                        this._time = this._totalTime - (this._cycle * cycleDuration);
+                        if (this._yoyo) if ((this._cycle & 1) !== 0) {
+                            this._time = dur - this._time;
+                        }
+                        if (this._time > dur) {
+                            this._time = dur;
+                            time = dur + 0.0001; //to avoid occasional floating point rounding error
+                        } else if (this._time < 0) {
+                            this._time = time = 0;
+                        } else {
+                            time = this._time;
+                        }
+                    }
+                }
+            }
+
+            if (this._cycle !== prevCycle) if (!this._locked) {
+                /*
+                make sure children at the end/beginning of the timeline are rendered properly. If, for example,
+                a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which
+                would get transated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there
+                could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So
+                we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must
+                ensure that zero-duration tweens at the very beginning or end of the TimelineMax work.
+                */
+                var backwards = (this._yoyo && (prevCycle & 1) !== 0),
+                    wrap = (backwards === (this._yoyo && (this._cycle & 1) !== 0)),
+                    recTotalTime = this._totalTime,
+                    recCycle = this._cycle,
+                    recRawPrevTime = this._rawPrevTime,
+                    recTime = this._time;
+
+                this._totalTime = prevCycle * dur;
+                if (this._cycle < prevCycle) {
+                    backwards = !backwards;
+                } else {
+                    this._totalTime += dur;
+                }
+                this._time = prevTime; //temporarily revert _time so that render() renders the children in the correct order. Without this, tweens won't rewind correctly. We could arhictect things in a "cleaner" way by splitting out the rendering queue into a separate method but for performance reasons, we kept it all inside this method.
+
+                this._rawPrevTime = (dur === 0) ? prevRawPrevTime - 0.0001 : prevRawPrevTime;
+                this._cycle = prevCycle;
+                this._locked = true; //prevents changes to totalTime and skips repeat/yoyo behavior when we recursively call render()
+                prevTime = (backwards) ? 0 : dur;
+                this.render(prevTime, suppressEvents, (dur === 0));
+                if (!suppressEvents) if (!this._gc) {
+                    if (this.vars.onRepeat) {
+                        this.vars.onRepeat.apply(this.vars.onRepeatScope || this, this.vars.onRepeatParams || _blankArray);
+                    }
+                }
+                if (wrap) {
+                    prevTime = (backwards) ? dur + 0.0001 : -0.0001;
+                    this.render(prevTime, true, false);
+                }
+                this._locked = false;
+                if (this._paused && !prevPaused) { //if the render() triggered callback that paused this timeline, we should abort (very rare, but possible)
+                    return;
+                }
+                this._time = recTime;
+                this._totalTime = recTotalTime;
+                this._cycle = recCycle;
+                this._rawPrevTime = recRawPrevTime;
+            }
+
+            if ((this._time === prevTime || !this._first) && !force && !internalForce) {
+                if (prevTotalTime !== this._totalTime) if (this._onUpdate) if (!suppressEvents) { //so that onUpdate fires even during the repeatDelay - as long as the totalTime changed, we should trigger onUpdate.
+                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);
+                }
+                return;
+            } else if (!this._initted) {
+                this._initted = true;
+            }
+
+            if (!this._active) if (!this._paused && this._totalTime !== prevTotalTime && time > 0) {
+                this._active = true;  //so that if the user renders the timeline (as opposed to the parent timeline rendering it), it is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the timeline already finished but the user manually re-renders it as halfway done, for example.
+            }
+
+            if (prevTotalTime === 0) if (this.vars.onStart) if (this._totalTime !== 0) if (!suppressEvents) {
+                this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);
+            }
+
+            if (this._time >= prevTime) {
+                tween = this._first;
+                while (tween) {
+                    next = tween._next; //record it here because the value could change after rendering...
+                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering
+                        break;
+                    } else if (tween._active || (tween._startTime <= this._time && !tween._paused && !tween._gc)) {
+                        if (!tween._reversed) {
+                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
+                        } else {
+                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
+                        }
+
+                    }
+                    tween = next;
+                }
+            } else {
+                tween = this._last;
+                while (tween) {
+                    next = tween._prev; //record it here because the value could change after rendering...
+                    if (this._paused && !prevPaused) { //in case a tween pauses the timeline when rendering
+                        break;
+                    } else if (tween._active || (tween._startTime <= prevTime && !tween._paused && !tween._gc)) {
+                        if (!tween._reversed) {
+                            tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
+                        } else {
+                            tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
+                        }
+                    }
+                    tween = next;
+                }
+            }
+
+            if (this._onUpdate) if (!suppressEvents) {
+                this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);
+            }
+            if (callback) if (!this._locked) if (!this._gc) if (prevStart === this._startTime || prevTimeScale !== this._timeScale) if (this._time === 0 || totalDur >= this.totalDuration()) { //if one of the tweens that was rendered altered this timeline's startTime (like if an onComplete reversed the timeline), it probably isn't complete. If it is, don't worry, because whatever call altered the startTime would complete if it was necessary at the new time. The only exception is the timeScale property. Also check _gc because there's a chance that kill() could be called in an onUpdate
+                if (isComplete) {
+                    if (this._timeline.autoRemoveChildren) {
+                        this._enabled(false, false);
+                    }
+                    this._active = false;
+                }
+                if (!suppressEvents && this.vars[callback]) {
+                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);
+                }
+            }
+        };
+
+        p.getActive = function(nested, tweens, timelines) {
+            if (nested == null) {
+                nested = true;
+            }
+            if (tweens == null) {
+                tweens = true;
+            }
+            if (timelines == null) {
+                timelines = false;
+            }
+            var a = [],
+                all = this.getChildren(nested, tweens, timelines),
+                cnt = 0,
+                l = all.length,
+                i, tween;
+            for (i = 0; i < l; i++) {
+                tween = all[i];
+                if (tween.isActive()) {
+                    a[cnt++] = tween;
+                }
+            }
+            return a;
+        };
+
+
+        p.getLabelAfter = function(time) {
+            if (!time) if (time !== 0) { //faster than isNan()
+                time = this._time;
+            }
+            var labels = this.getLabelsArray(),
+                l = labels.length,
+                i;
+            for (i = 0; i < l; i++) {
+                if (labels[i].time > time) {
+                    return labels[i].name;
+                }
+            }
+            return null;
+        };
+
+        p.getLabelBefore = function(time) {
+            if (time == null) {
+                time = this._time;
+            }
+            var labels = this.getLabelsArray(),
+                i = labels.length;
+            while (--i > -1) {
+                if (labels[i].time < time) {
+                    return labels[i].name;
+                }
+            }
+            return null;
+        };
+
+        p.getLabelsArray = function() {
+            var a = [],
+                cnt = 0,
+                p;
+            for (p in this._labels) {
+                a[cnt++] = {time:this._labels[p], name:p};
+            }
+            a.sort(function(a,b) {
+                return a.time - b.time;
+            });
+            return a;
+        };
+
+
+//---- GETTERS / SETTERS -------------------------------------------------------------------------------------------------------
+
+        p.progress = function(value) {
+            return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), false);
+        };
+
+        p.totalProgress = function(value) {
+            return (!arguments.length) ? this._totalTime / this.totalDuration() : this.totalTime( this.totalDuration() * value, false);
+        };
+
+        p.totalDuration = function(value) {
+            if (!arguments.length) {
+                if (this._dirty) {
+                    TimelineLite.prototype.totalDuration.call(this); //just forces refresh
+                    //Instead of Infinity, we use 999999999999 so that we can accommodate reverses.
+                    this._totalDuration = (this._repeat === -1) ? 999999999999 : this._duration * (this._repeat + 1) + (this._repeatDelay * this._repeat);
+                }
+                return this._totalDuration;
+            }
+            return (this._repeat === -1) ? this : this.duration( (value - (this._repeat * this._repeatDelay)) / (this._repeat + 1) );
+        };
+
+        p.time = function(value, suppressEvents) {
+            if (!arguments.length) {
+                return this._time;
+            }
+            if (this._dirty) {
+                this.totalDuration();
+            }
+            if (value > this._duration) {
+                value = this._duration;
+            }
+            if (this._yoyo && (this._cycle & 1) !== 0) {
+                value = (this._duration - value) + (this._cycle * (this._duration + this._repeatDelay));
+            } else if (this._repeat !== 0) {
+                value += this._cycle * (this._duration + this._repeatDelay);
+            }
+            return this.totalTime(value, suppressEvents);
+        };
+
+        p.repeat = function(value) {
+            if (!arguments.length) {
+                return this._repeat;
+            }
+            this._repeat = value;
+            return this._uncache(true);
+        };
+
+        p.repeatDelay = function(value) {
+            if (!arguments.length) {
+                return this._repeatDelay;
+            }
+            this._repeatDelay = value;
+            return this._uncache(true);
+        };
+
+        p.yoyo = function(value) {
+            if (!arguments.length) {
+                return this._yoyo;
+            }
+            this._yoyo = value;
+            return this;
+        };
+
+        p.currentLabel = function(value) {
+            if (!arguments.length) {
+                return this.getLabelBefore(this._time + 0.00000001);
+            }
+            return this.seek(value, true);
+        };
+
+        return TimelineMax;
+
+    }, true);
+    
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+/*
+ * ----------------------------------------------------------------
+ * BezierPlugin
+ * ----------------------------------------------------------------
+ */
+    (function() {
+
+        var _RAD2DEG = 180 / Math.PI,
+            _r1 = [],
+            _r2 = [],
+            _r3 = [],
+            _corProps = {},
+            Segment = function(a, b, c, d) {
+                this.a = a;
+                this.b = b;
+                this.c = c;
+                this.d = d;
+                this.da = d - a;
+                this.ca = c - a;
+                this.ba = b - a;
+            },
+            _correlate = ",x,y,z,left,top,right,bottom,marginTop,marginLeft,marginRight,marginBottom,paddingLeft,paddingTop,paddingRight,paddingBottom,backgroundPosition,backgroundPosition_y,",
+            cubicToQuadratic = function(a, b, c, d) {
+                var q1 = {a:a},
+                    q2 = {},
+                    q3 = {},
+                    q4 = {c:d},
+                    mab = (a + b) / 2,
+                    mbc = (b + c) / 2,
+                    mcd = (c + d) / 2,
+                    mabc = (mab + mbc) / 2,
+                    mbcd = (mbc + mcd) / 2,
+                    m8 = (mbcd - mabc) / 8;
+                q1.b = mab + (a - mab) / 4;
+                q2.b = mabc + m8;
+                q1.c = q2.a = (q1.b + q2.b) / 2;
+                q2.c = q3.a = (mabc + mbcd) / 2;
+                q3.b = mbcd - m8;
+                q4.b = mcd + (d - mcd) / 4;
+                q3.c = q4.a = (q3.b + q4.b) / 2;
+                return [q1, q2, q3, q4];
+            },
+            _calculateControlPoints = function(a, curviness, quad, basic, correlate) {
+                var l = a.length - 1,
+                    ii = 0,
+                    cp1 = a[0].a,
+                    i, p1, p2, p3, seg, m1, m2, mm, cp2, qb, r1, r2, tl;
+                for (i = 0; i < l; i++) {
+                    seg = a[ii];
+                    p1 = seg.a;
+                    p2 = seg.d;
+                    p3 = a[ii+1].d;
+
+                    if (correlate) {
+                        r1 = _r1[i];
+                        r2 = _r2[i];
+                        tl = ((r2 + r1) * curviness * 0.25) / (basic ? 0.5 : _r3[i] || 0.5);
+                        m1 = p2 - (p2 - p1) * (basic ? curviness * 0.5 : (r1 !== 0 ? tl / r1 : 0));
+                        m2 = p2 + (p3 - p2) * (basic ? curviness * 0.5 : (r2 !== 0 ? tl / r2 : 0));
+                        mm = p2 - (m1 + (((m2 - m1) * ((r1 * 3 / (r1 + r2)) + 0.5) / 4) || 0));
+                    } else {
+                        m1 = p2 - (p2 - p1) * curviness * 0.5;
+                        m2 = p2 + (p3 - p2) * curviness * 0.5;
+                        mm = p2 - (m1 + m2) / 2;
+                    }
+                    m1 += mm;
+                    m2 += mm;
+
+                    seg.c = cp2 = m1;
+                    if (i !== 0) {
+                        seg.b = cp1;
+                    } else {
+                        seg.b = cp1 = seg.a + (seg.c - seg.a) * 0.6; //instead of placing b on a exactly, we move it inline with c so that if the user specifies an ease like Back.easeIn or Elastic.easeIn which goes BEYOND the beginning, it will do so smoothly.
+                    }
+
+                    seg.da = p2 - p1;
+                    seg.ca = cp2 - p1;
+                    seg.ba = cp1 - p1;
+
+                    if (quad) {
+                        qb = cubicToQuadratic(p1, cp1, cp2, p2);
+                        a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]);
+                        ii += 4;
+                    } else {
+                        ii++;
+                    }
+
+                    cp1 = m2;
+                }
+                seg = a[ii];
+                seg.b = cp1;
+                seg.c = cp1 + (seg.d - cp1) * 0.4; //instead of placing c on d exactly, we move it inline with b so that if the user specifies an ease like Back.easeOut or Elastic.easeOut which goes BEYOND the end, it will do so smoothly.
+                seg.da = seg.d - seg.a;
+                seg.ca = seg.c - seg.a;
+                seg.ba = cp1 - seg.a;
+                if (quad) {
+                    qb = cubicToQuadratic(seg.a, cp1, seg.c, seg.d);
+                    a.splice(ii, 1, qb[0], qb[1], qb[2], qb[3]);
+                }
+            },
+            _parseAnchors = function(values, p, correlate, prepend) {
+                var a = [],
+                    l, i, p1, p2, p3, tmp;
+                if (prepend) {
+                    values = [prepend].concat(values);
+                    i = values.length;
+                    while (--i > -1) {
+                        if (typeof( (tmp = values[i][p]) ) === "string") if (tmp.charAt(1) === "=") {
+                            values[i][p] = prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)); //accommodate relative values. Do it inline instead of breaking it out into a function for speed reasons
+                        }
+                    }
+                }
+                l = values.length - 2;
+                if (l < 0) {
+                    a[0] = new Segment(values[0][p], 0, 0, values[(l < -1) ? 0 : 1][p]);
+                    return a;
+                }
+                for (i = 0; i < l; i++) {
+                    p1 = values[i][p];
+                    p2 = values[i+1][p];
+                    a[i] = new Segment(p1, 0, 0, p2);
+                    if (correlate) {
+                        p3 = values[i+2][p];
+                        _r1[i] = (_r1[i] || 0) + (p2 - p1) * (p2 - p1);
+                        _r2[i] = (_r2[i] || 0) + (p3 - p2) * (p3 - p2);
+                    }
+                }
+                a[i] = new Segment(values[i][p], 0, 0, values[i+1][p]);
+                return a;
+            },
+            bezierThrough = function(values, curviness, quadratic, basic, correlate, prepend) {
+                var obj = {},
+                    props = [],
+                    first = prepend || values[0],
+                    i, p, a, j, r, l, seamless, last;
+                correlate = (typeof(correlate) === "string") ? ","+correlate+"," : _correlate;
+                if (curviness == null) {
+                    curviness = 1;
+                }
+                for (p in values[0]) {
+                    props.push(p);
+                }
+                //check to see if the last and first values are identical (well, within 0.05). If so, make seamless by appending the second element to the very end of the values array and the 2nd-to-last element to the very beginning (we'll remove those segments later)
+                if (values.length > 1) {
+                    last = values[values.length - 1];
+                    seamless = true;
+                    i = props.length;
+                    while (--i > -1) {
+                        p = props[i];
+                        if (Math.abs(first[p] - last[p]) > 0.05) { //build in a tolerance of +/-0.05 to accommodate rounding errors. For example, if you set an object's position to 4.945, Flash will make it 4.9
+                            seamless = false;
+                            break;
+                        }
+                    }
+                    if (seamless) {
+                        values = values.concat(); //duplicate the array to avoid contaminating the original which the user may be reusing for other tweens
+                        if (prepend) {
+                            values.unshift(prepend);
+                        }
+                        values.push(values[1]);
+                        prepend = values[values.length - 3];
+                    }
+                }
+                _r1.length = _r2.length = _r3.length = 0;
+                i = props.length;
+                while (--i > -1) {
+                    p = props[i];
+                    _corProps[p] = (correlate.indexOf(","+p+",") !== -1);
+                    obj[p] = _parseAnchors(values, p, _corProps[p], prepend);
+                }
+                i = _r1.length;
+                while (--i > -1) {
+                    _r1[i] = Math.sqrt(_r1[i]);
+                    _r2[i] = Math.sqrt(_r2[i]);
+                }
+                if (!basic) {
+                    i = props.length;
+                    while (--i > -1) {
+                        if (_corProps[p]) {
+                            a = obj[props[i]];
+                            l = a.length - 1;
+                            for (j = 0; j < l; j++) {
+                                r = a[j+1].da / _r2[j] + a[j].da / _r1[j];
+                                _r3[j] = (_r3[j] || 0) + r * r;
+                            }
+                        }
+                    }
+                    i = _r3.length;
+                    while (--i > -1) {
+                        _r3[i] = Math.sqrt(_r3[i]);
+                    }
+                }
+                i = props.length;
+                j = quadratic ? 4 : 1;
+                while (--i > -1) {
+                    p = props[i];
+                    a = obj[p];
+                    _calculateControlPoints(a, curviness, quadratic, basic, _corProps[p]); //this method requires that _parseAnchors() and _setSegmentRatios() ran first so that _r1, _r2, and _r3 values are populated for all properties
+                    if (seamless) {
+                        a.splice(0, j);
+                        a.splice(a.length - j, j);
+                    }
+                }
+                return obj;
+            },
+            _parseBezierData = function(values, type, prepend) {
+                type = type || "soft";
+                var obj = {},
+                    inc = (type === "cubic") ? 3 : 2,
+                    soft = (type === "soft"),
+                    props = [],
+                    a, b, c, d, cur, i, j, l, p, cnt, tmp;
+                if (soft && prepend) {
+                    values = [prepend].concat(values);
+                }
+                if (values == null || values.length < inc + 1) { throw "invalid Bezier data"; }
+                for (p in values[0]) {
+                    props.push(p);
+                }
+                i = props.length;
+                while (--i > -1) {
+                    p = props[i];
+                    obj[p] = cur = [];
+                    cnt = 0;
+                    l = values.length;
+                    for (j = 0; j < l; j++) {
+                        a = (prepend == null) ? values[j][p] : (typeof( (tmp = values[j][p]) ) === "string" && tmp.charAt(1) === "=") ? prepend[p] + Number(tmp.charAt(0) + tmp.substr(2)) : Number(tmp);
+                        if (soft) if (j > 1) if (j < l - 1) {
+                            cur[cnt++] = (a + cur[cnt-2]) / 2;
+                        }
+                        cur[cnt++] = a;
+                    }
+                    l = cnt - inc + 1;
+                    cnt = 0;
+                    for (j = 0; j < l; j += inc) {
+                        a = cur[j];
+                        b = cur[j+1];
+                        c = cur[j+2];
+                        d = (inc === 2) ? 0 : cur[j+3];
+                        cur[cnt++] = tmp = (inc === 3) ? new Segment(a, b, c, d) : new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c);
+                    }
+                    cur.length = cnt;
+                }
+                return obj;
+            },
+            _addCubicLengths = function(a, steps, resolution) {
+                var inc = 1 / resolution,
+                    j = a.length,
+                    d, d1, s, da, ca, ba, p, i, inv, bez, index;
+                while (--j > -1) {
+                    bez = a[j];
+                    s = bez.a;
+                    da = bez.d - s;
+                    ca = bez.c - s;
+                    ba = bez.b - s;
+                    d = d1 = 0;
+                    for (i = 1; i <= resolution; i++) {
+                        p = inc * i;
+                        inv = 1 - p;
+                        d = d1 - (d1 = (p * p * da + 3 * inv * (p * ca + inv * ba)) * p);
+                        index = j * resolution + i - 1;
+                        steps[index] = (steps[index] || 0) + d * d;
+                    }
+                }
+            },
+            _parseLengthData = function(obj, resolution) {
+                resolution = resolution >> 0 || 6;
+                var a = [],
+                    lengths = [],
+                    d = 0,
+                    total = 0,
+                    threshold = resolution - 1,
+                    segments = [],
+                    curLS = [], //current length segments array
+                    p, i, l, index;
+                for (p in obj) {
+                    _addCubicLengths(obj[p], a, resolution);
+                }
+                l = a.length;
+                for (i = 0; i < l; i++) {
+                    d += Math.sqrt(a[i]);
+                    index = i % resolution;
+                    curLS[index] = d;
+                    if (index === threshold) {
+                        total += d;
+                        index = (i / resolution) >> 0;
+                        segments[index] = curLS;
+                        lengths[index] = total;
+                        d = 0;
+                        curLS = [];
+                    }
+                }
+                return {length:total, lengths:lengths, segments:segments};
+            },
+
+
+
+            BezierPlugin = window._gsDefine.plugin({
+                    propName: "bezier",
+                    priority: -1,
+                    version: "1.3.2",
+                    API: 2,
+                    global:true,
+
+                    //gets called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
+                    init: function(target, vars, tween) {
+                        this._target = target;
+                        if (vars instanceof Array) {
+                            vars = {values:vars};
+                        }
+                        this._func = {};
+                        this._round = {};
+                        this._props = [];
+                        this._timeRes = (vars.timeResolution == null) ? 6 : parseInt(vars.timeResolution, 10);
+                        var values = vars.values || [],
+                            first = {},
+                            second = values[0],
+                            autoRotate = vars.autoRotate || tween.vars.orientToBezier,
+                            p, isFunc, i, j, prepend;
+
+                        this._autoRotate = autoRotate ? (autoRotate instanceof Array) ? autoRotate : [["x","y","rotation",((autoRotate === true) ? 0 : Number(autoRotate) || 0)]] : null;
+                        for (p in second) {
+                            this._props.push(p);
+                        }
+
+                        i = this._props.length;
+                        while (--i > -1) {
+                            p = this._props[i];
+
+                            this._overwriteProps.push(p);
+                            isFunc = this._func[p] = (typeof(target[p]) === "function");
+                            first[p] = (!isFunc) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]();
+                            if (!prepend) if (first[p] !== values[0][p]) {
+                                prepend = first;
+                            }
+                        }
+                        this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate, prepend) : _parseBezierData(values, vars.type, first);
+                        this._segCount = this._beziers[p].length;
+
+                        if (this._timeRes) {
+                            var ld = _parseLengthData(this._beziers, this._timeRes);
+                            this._length = ld.length;
+                            this._lengths = ld.lengths;
+                            this._segments = ld.segments;
+                            this._l1 = this._li = this._s1 = this._si = 0;
+                            this._l2 = this._lengths[0];
+                            this._curSeg = this._segments[0];
+                            this._s2 = this._curSeg[0];
+                            this._prec = 1 / this._curSeg.length;
+                        }
+
+                        if ((autoRotate = this._autoRotate)) {
+                            this._initialRotations = [];
+                            if (!(autoRotate[0] instanceof Array)) {
+                                this._autoRotate = autoRotate = [autoRotate];
+                            }
+                            i = autoRotate.length;
+                            while (--i > -1) {
+                                for (j = 0; j < 3; j++) {
+                                    p = autoRotate[i][j];
+                                    this._func[p] = (typeof(target[p]) === "function") ? target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ] : false;
+                                }
+                                p = autoRotate[i][2];
+                                this._initialRotations[i] = this._func[p] ? this._func[p].call(this._target) : this._target[p];
+                            }
+                        }
+                        this._startRatio = tween.vars.runBackwards ? 1 : 0; //we determine the starting ratio when the tween inits which is always 0 unless the tween has runBackwards:true (indicating it's a from() tween) in which case it's 1.
+                        return true;
+                    },
+
+                    //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)
+                    set: function(v) {
+                        var segments = this._segCount,
+                            func = this._func,
+                            target = this._target,
+                            notStart = (v !== this._startRatio),
+                            curIndex, inv, i, p, b, t, val, l, lengths, curSeg;
+                        if (!this._timeRes) {
+                            curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0;
+                            t = (v - (curIndex * (1 / segments))) * segments;
+                        } else {
+                            lengths = this._lengths;
+                            curSeg = this._curSeg;
+                            v *= this._length;
+                            i = this._li;
+                            //find the appropriate segment (if the currently cached one isn't correct)
+                            if (v > this._l2 && i < segments - 1) {
+                                l = segments - 1;
+                                while (i < l && (this._l2 = lengths[++i]) <= v) {   }
+                                this._l1 = lengths[i-1];
+                                this._li = i;
+                                this._curSeg = curSeg = this._segments[i];
+                                this._s2 = curSeg[(this._s1 = this._si = 0)];
+                            } else if (v < this._l1 && i > 0) {
+                                while (i > 0 && (this._l1 = lengths[--i]) >= v) { }
+                                if (i === 0 && v < this._l1) {
+                                    this._l1 = 0;
+                                } else {
+                                    i++;
+                                }
+                                this._l2 = lengths[i];
+                                this._li = i;
+                                this._curSeg = curSeg = this._segments[i];
+                                this._s1 = curSeg[(this._si = curSeg.length - 1) - 1] || 0;
+                                this._s2 = curSeg[this._si];
+                            }
+                            curIndex = i;
+                            //now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one)
+                            v -= this._l1;
+                            i = this._si;
+                            if (v > this._s2 && i < curSeg.length - 1) {
+                                l = curSeg.length - 1;
+                                while (i < l && (this._s2 = curSeg[++i]) <= v) {    }
+                                this._s1 = curSeg[i-1];
+                                this._si = i;
+                            } else if (v < this._s1 && i > 0) {
+                                while (i > 0 && (this._s1 = curSeg[--i]) >= v) {    }
+                                if (i === 0 && v < this._s1) {
+                                    this._s1 = 0;
+                                } else {
+                                    i++;
+                                }
+                                this._s2 = curSeg[i];
+                                this._si = i;
+                            }
+                            t = (i + (v - this._s1) / (this._s2 - this._s1)) * this._prec;
+                        }
+                        inv = 1 - t;
+
+                        i = this._props.length;
+                        while (--i > -1) {
+                            p = this._props[i];
+                            b = this._beziers[p][curIndex];
+                            val = (t * t * b.da + 3 * inv * (t * b.ca + inv * b.ba)) * t + b.a;
+                            if (this._round[p]) {
+                                val = Math.round(val);
+                            }
+                            if (func[p]) {
+                                target[p](val);
+                            } else {
+                                target[p] = val;
+                            }
+                        }
+
+                        if (this._autoRotate) {
+                            var ar = this._autoRotate,
+                                b2, x1, y1, x2, y2, add, conv;
+                            i = ar.length;
+                            while (--i > -1) {
+                                p = ar[i][2];
+                                add = ar[i][3] || 0;
+                                conv = (ar[i][4] === true) ? 1 : _RAD2DEG;
+                                b = this._beziers[ar[i][0]];
+                                b2 = this._beziers[ar[i][1]];
+
+                                if (b && b2) { //in case one of the properties got overwritten.
+                                    b = b[curIndex];
+                                    b2 = b2[curIndex];
+
+                                    x1 = b.a + (b.b - b.a) * t;
+                                    x2 = b.b + (b.c - b.b) * t;
+                                    x1 += (x2 - x1) * t;
+                                    x2 += ((b.c + (b.d - b.c) * t) - x2) * t;
+
+                                    y1 = b2.a + (b2.b - b2.a) * t;
+                                    y2 = b2.b + (b2.c - b2.b) * t;
+                                    y1 += (y2 - y1) * t;
+                                    y2 += ((b2.c + (b2.d - b2.c) * t) - y2) * t;
+
+                                    val = notStart ? Math.atan2(y2 - y1, x2 - x1) * conv + add : this._initialRotations[i];
+
+                                    if (func[p]) {
+                                        target[p](val);
+                                    } else {
+                                        target[p] = val;
+                                    }
+                                }
+                            }
+                        }
+                    }
+            }),
+            p = BezierPlugin.prototype;
+
+
+        BezierPlugin.bezierThrough = bezierThrough;
+        BezierPlugin.cubicToQuadratic = cubicToQuadratic;
+        BezierPlugin._autoCSS = true; //indicates that this plugin can be inserted into the "css" object using the autoCSS feature of TweenLite
+        BezierPlugin.quadraticToCubic = function(a, b, c) {
+            return new Segment(a, (2 * b + a) / 3, (2 * b + c) / 3, c);
+        };
+
+        BezierPlugin._cssRegister = function() {
+            var CSSPlugin = window._gsDefine.globals.CSSPlugin;
+            if (!CSSPlugin) {
+                return;
+            }
+            var _internals = CSSPlugin._internals,
+                _parseToProxy = _internals._parseToProxy,
+                _setPluginRatio = _internals._setPluginRatio,
+                CSSPropTween = _internals.CSSPropTween;
+            _internals._registerComplexSpecialProp("bezier", {parser:function(t, e, prop, cssp, pt, plugin) {
+                if (e instanceof Array) {
+                    e = {values:e};
+                }
+                plugin = new BezierPlugin();
+                var values = e.values,
+                    l = values.length - 1,
+                    pluginValues = [],
+                    v = {},
+                    i, p, data;
+                if (l < 0) {
+                    return pt;
+                }
+                for (i = 0; i <= l; i++) {
+                    data = _parseToProxy(t, values[i], cssp, pt, plugin, (l !== i));
+                    pluginValues[i] = data.end;
+                }
+                for (p in e) {
+                    v[p] = e[p]; //duplicate the vars object because we need to alter some things which would cause problems if the user plans to reuse the same vars object for another tween.
+                }
+                v.values = pluginValues;
+                pt = new CSSPropTween(t, "bezier", 0, 0, data.pt, 2);
+                pt.data = data;
+                pt.plugin = plugin;
+                pt.setRatio = _setPluginRatio;
+                if (v.autoRotate === 0) {
+                    v.autoRotate = true;
+                }
+                if (v.autoRotate && !(v.autoRotate instanceof Array)) {
+                    i = (v.autoRotate === true) ? 0 : Number(v.autoRotate);
+                    v.autoRotate = (data.end.left != null) ? [["left","top","rotation",i,false]] : (data.end.x != null) ? [["x","y","rotation",i,false]] : false;
+                }
+                if (v.autoRotate) {
+                    if (!cssp._transform) {
+                        cssp._enableTransforms(false);
+                    }
+                    data.autoRotate = cssp._target._gsTransform;
+                }
+                plugin._onInitTween(data.proxy, v, cssp._tween);
+                return pt;
+            }});
+        };
+
+        p._roundProps = function(lookup, value) {
+            var op = this._overwriteProps,
+                i = op.length;
+            while (--i > -1) {
+                if (lookup[op[i]] || lookup.bezier || lookup.bezierThrough) {
+                    this._round[op[i]] = value;
+                }
+            }
+        };
+
+        p._kill = function(lookup) {
+            var a = this._props,
+                p, i;
+            for (p in this._beziers) {
+                if (p in lookup) {
+                    delete this._beziers[p];
+                    delete this._func[p];
+                    i = a.length;
+                    while (--i > -1) {
+                        if (a[i] === p) {
+                            a.splice(i, 1);
+                        }
+                    }
+                }
+            }
+            return this._super._kill.call(this, lookup);
+        };
+
+    }());
+
+
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+/*
+ * ----------------------------------------------------------------
+ * CSSPlugin
+ * ----------------------------------------------------------------
+ */
+    window._gsDefine("plugins.CSSPlugin", ["plugins.TweenPlugin","TweenLite"], function(TweenPlugin, TweenLite) {
+
+        /** @constructor **/
+        var CSSPlugin = function() {
+                TweenPlugin.call(this, "css");
+                this._overwriteProps.length = 0;
+                this.setRatio = CSSPlugin.prototype.setRatio; //speed optimization (avoid prototype lookup on this "hot" method)
+            },
+            _hasPriority, //turns true whenever a CSSPropTween instance is created that has a priority other than 0. This helps us discern whether or not we should spend the time organizing the linked list or not after a CSSPlugin's _onInitTween() method is called.
+            _suffixMap, //we set this in _onInitTween() each time as a way to have a persistent variable we can use in other methods like _parse() without having to pass it around as a parameter and we keep _parse() decoupled from a particular CSSPlugin instance
+            _cs, //computed style (we store this in a shared variable to conserve memory and make minification tighter
+            _overwriteProps, //alias to the currently instantiating CSSPlugin's _overwriteProps array. We use this closure in order to avoid having to pass a reference around from method to method and aid in minification.
+            _specialProps = {},
+            p = CSSPlugin.prototype = new TweenPlugin("css");
+
+        p.constructor = CSSPlugin;
+        CSSPlugin.version = "1.12.1";
+        CSSPlugin.API = 2;
+        CSSPlugin.defaultTransformPerspective = 0;
+        CSSPlugin.defaultSkewType = "compensated";
+        p = "px"; //we'll reuse the "p" variable to keep file size down
+        CSSPlugin.suffixMap = {top:p, right:p, bottom:p, left:p, width:p, height:p, fontSize:p, padding:p, margin:p, perspective:p, lineHeight:""};
+
+
+        var _numExp = /(?:\d|\-\d|\.\d|\-\.\d)+/g,
+            _relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,
+            _valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
+            _NaNExp = /[^\d\-\.]/g,
+            _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g,
+            _opacityExp = /opacity *= *([^)]*)/i,
+            _opacityValExp = /opacity:([^;]*)/i,
+            _alphaFilterExp = /alpha\(opacity *=.+?\)/i,
+            _rgbhslExp = /^(rgb|hsl)/,
+            _capsExp = /([A-Z])/g,
+            _camelExp = /-([a-z])/gi,
+            _urlExp = /(^(?:url\(\"|url\())|(?:(\"\))$|\)$)/gi, //for pulling out urls from url(...) or url("...") strings (some browsers wrap urls in quotes, some don't when reporting things like backgroundImage)
+            _camelFunc = function(s, g) { return g.toUpperCase(); },
+            _horizExp = /(?:Left|Right|Width)/i,
+            _ieGetMatrixExp = /(M11|M12|M21|M22)=[\d\-\.e]+/gi,
+            _ieSetMatrixExp = /progid\:DXImageTransform\.Microsoft\.Matrix\(.+?\)/i,
+            _commasOutsideParenExp = /,(?=[^\)]*(?:\(|$))/gi, //finds any commas that are not within parenthesis
+            _DEG2RAD = Math.PI / 180,
+            _RAD2DEG = 180 / Math.PI,
+            _forcePT = {},
+            _doc = document,
+            _tempDiv = _doc.createElement("div"),
+            _tempImg = _doc.createElement("img"),
+            _internals = CSSPlugin._internals = {_specialProps:_specialProps}, //provides a hook to a few internal methods that we need to access from inside other plugins
+            _agent = navigator.userAgent,
+            _autoRound,
+            _reqSafariFix, //we won't apply the Safari transform fix until we actually come across a tween that affects a transform property (to maintain best performance).
+
+            _isSafari,
+            _isFirefox, //Firefox has a bug that causes 3D transformed elements to randomly disappear unless a repaint is forced after each update on each element.
+            _isSafariLT6, //Safari (and Android 4 which uses a flavor of Safari) has a bug that prevents changes to "top" and "left" properties from rendering properly if changed on the same frame as a transform UNLESS we set the element's WebkitBackfaceVisibility to hidden (weird, I know). Doing this for Android 3 and earlier seems to actually cause other problems, though (fun!)
+            _ieVers,
+            _supportsOpacity = (function() { //we set _isSafari, _ieVers, _isFirefox, and _supportsOpacity all in one function here to reduce file size slightly, especially in the minified version.
+                var i = _agent.indexOf("Android"),
+                    d = _doc.createElement("div"), a;
+
+                _isSafari = (_agent.indexOf("Safari") !== -1 && _agent.indexOf("Chrome") === -1 && (i === -1 || Number(_agent.substr(i+8, 1)) > 3));
+                _isSafariLT6 = (_isSafari && (Number(_agent.substr(_agent.indexOf("Version/")+8, 1)) < 6));
+                _isFirefox = (_agent.indexOf("Firefox") !== -1);
+
+                if ((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(_agent)) {
+                    _ieVers = parseFloat( RegExp.$1 );
+                }
+
+                d.innerHTML = "<a title='' style='top:1px;opacity:.55;'>a</a>";
+                a = d.getElementsByTagName("a")[0];
+                return a ? /^0.55/.test(a.style.opacity) : false;
+            }()),
+            _getIEOpacity = function(v) {
+                return (_opacityExp.test( ((typeof(v) === "string") ? v : (v.currentStyle ? v.currentStyle.filter : v.style.filter) || "") ) ? ( parseFloat( RegExp.$1 ) / 100 ) : 1);
+            },
+            _log = function(s) {//for logging messages, but in a way that won't throw errors in old versions of IE.
+                if (window.console) {
+                    //console.log(s);
+                }
+            },
+            _prefixCSS = "", //the non-camelCase vendor prefix like "-o-", "-moz-", "-ms-", or "-webkit-"
+            _prefix = "", //camelCase vendor prefix like "O", "ms", "Webkit", or "Moz".
+
+            // @private feed in a camelCase property name like "transform" and it will check to see if it is valid as-is or if it needs a vendor prefix. It returns the corrected camelCase property name (i.e. "WebkitTransform" or "MozTransform" or "transform" or null if no such property is found, like if the browser is IE8 or before, "transform" won't be found at all)
+            _checkPropPrefix = function(p, e) {
+                e = e || _tempDiv;
+                var s = e.style,
+                    a, i;
+                if (s[p] !== undefined) {
+                    return p;
+                }
+                p = p.charAt(0).toUpperCase() + p.substr(1);
+                a = ["O","Moz","ms","Ms","Webkit"];
+                i = 5;
+                while (--i > -1 && s[a[i]+p] === undefined) { }
+                if (i >= 0) {
+                    _prefix = (i === 3) ? "ms" : a[i];
+                    _prefixCSS = "-" + _prefix.toLowerCase() + "-";
+                    return _prefix + p;
+                }
+                return null;
+            },
+
+            _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : function() {},
+
+            /**
+             * @private Returns the css style for a particular property of an element. For example, to get whatever the current "left" css value for an element with an ID of "myElement", you could do:
+             * var currentLeft = CSSPlugin.getStyle( document.getElementById("myElement"), "left");
+             *
+             * @param {!Object} t Target element whose style property you want to query
+             * @param {!string} p Property name (like "left" or "top" or "marginTop", etc.)
+             * @param {Object=} cs Computed style object. This just provides a way to speed processing if you're going to get several properties on the same element in quick succession - you can reuse the result of the getComputedStyle() call.
+             * @param {boolean=} calc If true, the value will not be read directly from the element's "style" property (if it exists there), but instead the getComputedStyle() result will be used. This can be useful when you want to ensure that the browser itself is interpreting the value.
+             * @param {string=} dflt Default value that should be returned in the place of null, "none", "auto" or "auto auto".
+             * @return {?string} The current property value
+             */
+            _getStyle = CSSPlugin.getStyle = function(t, p, cs, calc, dflt) {
+                var rv;
+                if (!_supportsOpacity) if (p === "opacity") { //several versions of IE don't use the standard "opacity" property - they use things like filter:alpha(opacity=50), so we parse that here.
+                    return _getIEOpacity(t);
+                }
+                if (!calc && t.style[p]) {
+                    rv = t.style[p];
+                } else if ((cs = cs || _getComputedStyle(t))) {
+                    rv = cs[p] || cs.getPropertyValue(p) || cs.getPropertyValue(p.replace(_capsExp, "-$1").toLowerCase());
+                } else if (t.currentStyle) {
+                    rv = t.currentStyle[p];
+                }
+                return (dflt != null && (!rv || rv === "none" || rv === "auto" || rv === "auto auto")) ? dflt : rv;
+            },
+
+            /**
+             * @private Pass the target element, the property name, the numeric value, and the suffix (like "%", "em", "px", etc.) and it will spit back the equivalent pixel number.
+             * @param {!Object} t Target element
+             * @param {!string} p Property name (like "left", "top", "marginLeft", etc.)
+             * @param {!number} v Value
+             * @param {string=} sfx Suffix (like "px" or "%" or "em")
+             * @param {boolean=} recurse If true, the call is a recursive one. In some browsers (like IE7/8), occasionally the value isn't accurately reported initially, but if we run the function again it will take effect.
+             * @return {number} value in pixels
+             */
+            _convertToPixels = _internals.convertToPixels = function(t, p, v, sfx, recurse) {
+                if (sfx === "px" || !sfx) { return v; }
+                if (sfx === "auto" || !v) { return 0; }
+                var horiz = _horizExp.test(p),
+                    node = t,
+                    style = _tempDiv.style,
+                    neg = (v < 0),
+                    pix, cache, time;
+                if (neg) {
+                    v = -v;
+                }
+                if (sfx === "%" && p.indexOf("border") !== -1) {
+                    pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight);
+                } else {
+                    style.cssText = "border:0 solid red;position:" + _getStyle(t, "position") + ";line-height:0;";
+                    if (sfx === "%" || !node.appendChild) {
+                        node = t.parentNode || _doc.body;
+                        cache = node._gsCache;
+                        time = TweenLite.ticker.frame;
+                        if (cache && horiz && cache.time === time) { //performance optimization: we record the width of elements along with the ticker frame so that we can quickly get it again on the same tick (seems relatively safe to assume it wouldn't change on the same tick)
+                            return cache.width * v / 100;
+                        }
+                        style[(horiz ? "width" : "height")] = v + sfx;
+                    } else {
+                        style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx;
+                    }
+                    node.appendChild(_tempDiv);
+                    pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]);
+                    node.removeChild(_tempDiv);
+                    if (horiz && sfx === "%" && CSSPlugin.cacheWidths !== false) {
+                        cache = node._gsCache = node._gsCache || {};
+                        cache.time = time;
+                        cache.width = pix / v * 100;
+                    }
+                    if (pix === 0 && !recurse) {
+                        pix = _convertToPixels(t, p, v, sfx, true);
+                    }
+                }
+                return neg ? -pix : pix;
+            },
+            _calculateOffset = _internals.calculateOffset = function(t, p, cs) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop
+                if (_getStyle(t, "position", cs) !== "absolute") { return 0; }
+                var dim = ((p === "left") ? "Left" : "Top"),
+                    v = _getStyle(t, "margin" + dim, cs);
+                return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), v.replace(_suffixExp, "")) || 0);
+            },
+
+            // @private returns at object containing ALL of the style properties in camelCase and their associated values.
+            _getAllStyles = function(t, cs) {
+                var s = {},
+                    i, tr;
+                if ((cs = cs || _getComputedStyle(t, null))) {
+                    if ((i = cs.length)) {
+                        while (--i > -1) {
+                            s[cs[i].replace(_camelExp, _camelFunc)] = cs.getPropertyValue(cs[i]);
+                        }
+                    } else { //Opera behaves differently - cs.length is always 0, so we must do a for...in loop.
+                        for (i in cs) {
+                            s[i] = cs[i];
+                        }
+                    }
+                } else if ((cs = t.currentStyle || t.style)) {
+                    for (i in cs) {
+                        if (typeof(i) === "string" && s[i] === undefined) {
+                            s[i.replace(_camelExp, _camelFunc)] = cs[i];
+                        }
+                    }
+                }
+                if (!_supportsOpacity) {
+                    s.opacity = _getIEOpacity(t);
+                }
+                tr = _getTransform(t, cs, false);
+                s.rotation = tr.rotation;
+                s.skewX = tr.skewX;
+                s.scaleX = tr.scaleX;
+                s.scaleY = tr.scaleY;
+                s.x = tr.x;
+                s.y = tr.y;
+                if (_supports3D) {
+                    s.z = tr.z;
+                    s.rotationX = tr.rotationX;
+                    s.rotationY = tr.rotationY;
+                    s.scaleZ = tr.scaleZ;
+                }
+                if (s.filters) {
+                    delete s.filters;
+                }
+                return s;
+            },
+
+            // @private analyzes two style objects (as returned by _getAllStyles()) and only looks for differences between them that contain tweenable values (like a number or color). It returns an object with a "difs" property which refers to an object containing only those isolated properties and values for tweening, and a "firstMPT" property which refers to the first MiniPropTween instance in a linked list that recorded all the starting values of the different properties so that we can revert to them at the end or beginning of the tween - we don't want the cascading to get messed up. The forceLookup parameter is an optional generic object with properties that should be forced into the results - this is necessary for className tweens that are overwriting others because imagine a scenario where a rollover/rollout adds/removes a class and the user swipes the mouse over the target SUPER fast, thus nothing actually changed yet and the subsequent comparison of the properties would indicate they match (especially when px rounding is taken into consideration), thus no tweening is necessary even though it SHOULD tween and remove those properties after the tween (otherwise the inline styles will contaminate things). See the className SpecialProp code for details.
+            _cssDif = function(t, s1, s2, vars, forceLookup) {
+                var difs = {},
+                    style = t.style,
+                    val, p, mpt;
+                for (p in s2) {
+                    if (p !== "cssText") if (p !== "length") if (isNaN(p)) if (s1[p] !== (val = s2[p]) || (forceLookup && forceLookup[p])) if (p.indexOf("Origin") === -1) if (typeof(val) === "number" || typeof(val) === "string") {
+                        difs[p] = (val === "auto" && (p === "left" || p === "top")) ? _calculateOffset(t, p) : ((val === "" || val === "auto" || val === "none") && typeof(s1[p]) === "string" && s1[p].replace(_NaNExp, "") !== "") ? 0 : val; //if the ending value is defaulting ("" or "auto"), we check the starting value and if it can be parsed into a number (a string which could have a suffix too, like 700px), then we swap in 0 for "" or "auto" so that things actually tween.
+                        if (style[p] !== undefined) { //for className tweens, we must remember which properties already existed inline - the ones that didn't should be removed when the tween isn't in progress because they were only introduced to facilitate the transition between classes.
+                            mpt = new MiniPropTween(style, p, style[p], mpt);
+                        }
+                    }
+                }
+                if (vars) {
+                    for (p in vars) { //copy properties (except className)
+                        if (p !== "className") {
+                            difs[p] = vars[p];
+                        }
+                    }
+                }
+                return {difs:difs, firstMPT:mpt};
+            },
+            _dimensions = {width:["Left","Right"], height:["Top","Bottom"]},
+            _margins = ["marginLeft","marginRight","marginTop","marginBottom"],
+
+            /**
+             * @private Gets the width or height of an element
+             * @param {!Object} t Target element
+             * @param {!string} p Property name ("width" or "height")
+             * @param {Object=} cs Computed style object (if one exists). Just a speed optimization.
+             * @return {number} Dimension (in pixels)
+             */
+            _getDimension = function(t, p, cs) {
+                var v = parseFloat((p === "width") ? t.offsetWidth : t.offsetHeight),
+                    a = _dimensions[p],
+                    i = a.length;
+                cs = cs || _getComputedStyle(t, null);
+                while (--i > -1) {
+                    v -= parseFloat( _getStyle(t, "padding" + a[i], cs, true) ) || 0;
+                    v -= parseFloat( _getStyle(t, "border" + a[i] + "Width", cs, true) ) || 0;
+                }
+                return v;
+            },
+
+            // @private Parses position-related complex strings like "top left" or "50px 10px" or "70% 20%", etc. which are used for things like transformOrigin or backgroundPosition. Optionally decorates a supplied object (recObj) with the following properties: "ox" (offsetX), "oy" (offsetY), "oxp" (if true, "ox" is a percentage not a pixel value), and "oxy" (if true, "oy" is a percentage not a pixel value)
+            _parsePosition = function(v, recObj) {
+                if (v == null || v === "" || v === "auto" || v === "auto auto") { //note: Firefox uses "auto auto" as default whereas Chrome uses "auto".
+                    v = "0 0";
+                }
+                var a = v.split(" "),
+                    x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0],
+                    y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1];
+                if (y == null) {
+                    y = "0";
+                } else if (y === "center") {
+                    y = "50%";
+                }
+                if (x === "center" || (isNaN(parseFloat(x)) && (x + "").indexOf("=") === -1)) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative.
+                    x = "50%";
+                }
+                if (recObj) {
+                    recObj.oxp = (x.indexOf("%") !== -1);
+                    recObj.oyp = (y.indexOf("%") !== -1);
+                    recObj.oxr = (x.charAt(1) === "=");
+                    recObj.oyr = (y.charAt(1) === "=");
+                    recObj.ox = parseFloat(x.replace(_NaNExp, ""));
+                    recObj.oy = parseFloat(y.replace(_NaNExp, ""));
+                }
+                return x + " " + y + ((a.length > 2) ? " " + a[2] : "");
+            },
+
+            /**
+             * @private Takes an ending value (typically a string, but can be a number) and a starting value and returns the change between the two, looking for relative value indicators like += and -= and it also ignores suffixes (but make sure the ending value starts with a number or +=/-= and that the starting value is a NUMBER!)
+             * @param {(number|string)} e End value which is typically a string, but could be a number
+             * @param {(number|string)} b Beginning value which is typically a string but could be a number
+             * @return {number} Amount of change between the beginning and ending values (relative values that have a "+=" or "-=" are recognized)
+             */
+            _parseChange = function(e, b) {
+                return (typeof(e) === "string" && e.charAt(1) === "=") ? parseInt(e.charAt(0) + "1", 10) * parseFloat(e.substr(2)) : parseFloat(e) - parseFloat(b);
+            },
+
+            /**
+             * @private Takes a value and a default number, checks if the value is relative, null, or numeric and spits back a normalized number accordingly. Primarily used in the _parseTransform() function.
+             * @param {Object} v Value to be parsed
+             * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter)
+             * @return {number} Parsed value
+             */
+            _parseVal = function(v, d) {
+                return (v == null) ? d : (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) + d : parseFloat(v);
+            },
+
+            /**
+             * @private Translates strings like "40deg" or "40" or 40rad" or "+=40deg" or "270_short" or "-90_cw" or "+=45_ccw" to a numeric radian angle. Of course a starting/default value must be fed in too so that relative values can be calculated properly.
+             * @param {Object} v Value to be parsed
+             * @param {!number} d Default value (which is also used for relative calculations if "+=" or "-=" is found in the first parameter)
+             * @param {string=} p property name for directionalEnd (optional - only used when the parsed value is directional ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation). Property name would be "rotation", "rotationX", or "rotationY"
+             * @param {Object=} directionalEnd An object that will store the raw end values for directional angles ("_short", "_cw", or "_ccw" suffix). We need a way to store the uncompensated value so that at the end of the tween, we set it to exactly what was requested with no directional compensation.
+             * @return {number} parsed angle in radians
+             */
+            _parseAngle = function(v, d, p, directionalEnd) {
+                var min = 0.000001,
+                    cap, split, dif, result;
+                if (v == null) {
+                    result = d;
+                } else if (typeof(v) === "number") {
+                    result = v;
+                } else {
+                    cap = 360;
+                    split = v.split("_");
+                    dif = Number(split[0].replace(_NaNExp, "")) * ((v.indexOf("rad") === -1) ? 1 : _RAD2DEG) - ((v.charAt(1) === "=") ? 0 : d);
+                    if (split.length) {
+                        if (directionalEnd) {
+                            directionalEnd[p] = d + dif;
+                        }
+                        if (v.indexOf("short") !== -1) {
+                            dif = dif % cap;
+                            if (dif !== dif % (cap / 2)) {
+                                dif = (dif < 0) ? dif + cap : dif - cap;
+                            }
+                        }
+                        if (v.indexOf("_cw") !== -1 && dif < 0) {
+                            dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;
+                        } else if (v.indexOf("ccw") !== -1 && dif > 0) {
+                            dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;
+                        }
+                    }
+                    result = d + dif;
+                }
+                if (result < min && result > -min) {
+                    result = 0;
+                }
+                return result;
+            },
+
+            _colorLookup = {aqua:[0,255,255],
+                lime:[0,255,0],
+                silver:[192,192,192],
+                black:[0,0,0],
+                maroon:[128,0,0],
+                teal:[0,128,128],
+                blue:[0,0,255],
+                navy:[0,0,128],
+                white:[255,255,255],
+                fuchsia:[255,0,255],
+                olive:[128,128,0],
+                yellow:[255,255,0],
+                orange:[255,165,0],
+                gray:[128,128,128],
+                purple:[128,0,128],
+                green:[0,128,0],
+                red:[255,0,0],
+                pink:[255,192,203],
+                cyan:[0,255,255],
+                transparent:[255,255,255,0]},
+
+            _hue = function(h, m1, m2) {
+                h = (h < 0) ? h + 1 : (h > 1) ? h - 1 : h;
+                return ((((h * 6 < 1) ? m1 + (m2 - m1) * h * 6 : (h < 0.5) ? m2 : (h * 3 < 2) ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * 255) + 0.5) | 0;
+            },
+
+            /**
+             * @private Parses a color (like #9F0, #FF9900, or rgb(255,51,153)) into an array with 3 elements for red, green, and blue. Also handles rgba() values (splits into array of 4 elements of course)
+             * @param {(string|number)} v The value the should be parsed which could be a string like #9F0 or rgb(255,102,51) or rgba(255,0,0,0.5) or it could be a number like 0xFF00CC or even a named color like red, blue, purple, etc.
+             * @return {Array.<number>} An array containing red, green, and blue (and optionally alpha) in that order.
+             */
+            _parseColor = function(v) {
+                var c1, c2, c3, h, s, l;
+                if (!v || v === "") {
+                    return _colorLookup.black;
+                }
+                if (typeof(v) === "number") {
+                    return [v >> 16, (v >> 8) & 255, v & 255];
+                }
+                if (v.charAt(v.length - 1) === ",") { //sometimes a trailing commma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.
+                    v = v.substr(0, v.length - 1);
+                }
+                if (_colorLookup[v]) {
+                    return _colorLookup[v];
+                }
+                if (v.charAt(0) === "#") {
+                    if (v.length === 4) { //for shorthand like #9F0
+                        c1 = v.charAt(1),
+                        c2 = v.charAt(2),
+                        c3 = v.charAt(3);
+                        v = "#" + c1 + c1 + c2 + c2 + c3 + c3;
+                    }
+                    v = parseInt(v.substr(1), 16);
+                    return [v >> 16, (v >> 8) & 255, v & 255];
+                }
+                if (v.substr(0, 3) === "hsl") {
+                    v = v.match(_numExp);
+                    h = (Number(v[0]) % 360) / 360;
+                    s = Number(v[1]) / 100;
+                    l = Number(v[2]) / 100;
+                    c2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s;
+                    c1 = l * 2 - c2;
+                    if (v.length > 3) {
+                        v[3] = Number(v[3]);
+                    }
+                    v[0] = _hue(h + 1 / 3, c1, c2);
+                    v[1] = _hue(h, c1, c2);
+                    v[2] = _hue(h - 1 / 3, c1, c2);
+                    return v;
+                }
+                v = v.match(_numExp) || _colorLookup.transparent;
+                v[0] = Number(v[0]);
+                v[1] = Number(v[1]);
+                v[2] = Number(v[2]);
+                if (v.length > 3) {
+                    v[3] = Number(v[3]);
+                }
+                return v;
+            },
+            _colorExp = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#.+?\\b"; //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.
+
+        for (p in _colorLookup) {
+            _colorExp += "|" + p + "\\b";
+        }
+        _colorExp = new RegExp(_colorExp+")", "gi");
+
+        /**
+         * @private Returns a formatter function that handles taking a string (or number in some cases) and returning a consistently formatted one in terms of delimiters, quantity of values, etc. For example, we may get boxShadow values defined as "0px red" or "0px 0px 10px rgb(255,0,0)" or "0px 0px 20px 20px #F00" and we need to ensure that what we get back is described with 4 numbers and a color. This allows us to feed it into the _parseComplex() method and split the values up appropriately. The neat thing about this _getFormatter() function is that the dflt defines a pattern as well as a default, so for example, _getFormatter("0px 0px 0px 0px #777", true) not only sets the default as 0px for all distances and #777 for the color, but also sets the pattern such that 4 numbers and a color will always get returned.
+         * @param {!string} dflt The default value and pattern to follow. So "0px 0px 0px 0px #777" will ensure that 4 numbers and a color will always get returned.
+         * @param {boolean=} clr If true, the values should be searched for color-related data. For example, boxShadow values typically contain a color whereas borderRadius don't.
+         * @param {boolean=} collapsible If true, the value is a top/left/right/bottom style one that acts like margin or padding, where if only one value is received, it's used for all 4; if 2 are received, the first is duplicated for 3rd (bottom) and the 2nd is duplicated for the 4th spot (left), etc.
+         * @return {Function} formatter function
+         */
+        var _getFormatter = function(dflt, clr, collapsible, multi) {
+                if (dflt == null) {
+                    return function(v) {return v;};
+                }
+                var dColor = clr ? (dflt.match(_colorExp) || [""])[0] : "",
+                    dVals = dflt.split(dColor).join("").match(_valuesExp) || [],
+                    pfx = dflt.substr(0, dflt.indexOf(dVals[0])),
+                    sfx = (dflt.charAt(dflt.length - 1) === ")") ? ")" : "",
+                    delim = (dflt.indexOf(" ") !== -1) ? " " : ",",
+                    numVals = dVals.length,
+                    dSfx = (numVals > 0) ? dVals[0].replace(_numExp, "") : "",
+                    formatter;
+                if (!numVals) {
+                    return function(v) {return v;};
+                }
+                if (clr) {
+                    formatter = function(v) {
+                        var color, vals, i, a;
+                        if (typeof(v) === "number") {
+                            v += dSfx;
+                        } else if (multi && _commasOutsideParenExp.test(v)) {
+                            a = v.replace(_commasOutsideParenExp, "|").split("|");
+                            for (i = 0; i < a.length; i++) {
+                                a[i] = formatter(a[i]);
+                            }
+                            return a.join(",");
+                        }
+                        color = (v.match(_colorExp) || [dColor])[0];
+                        vals = v.split(color).join("").match(_valuesExp) || [];
+                        i = vals.length;
+                        if (numVals > i--) {
+                            while (++i < numVals) {
+                                vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];
+                            }
+                        }
+                        return pfx + vals.join(delim) + delim + color + sfx + (v.indexOf("inset") !== -1 ? " inset" : "");
+                    };
+                    return formatter;
+
+                }
+                formatter = function(v) {
+                    var vals, a, i;
+                    if (typeof(v) === "number") {
+                        v += dSfx;
+                    } else if (multi && _commasOutsideParenExp.test(v)) {
+                        a = v.replace(_commasOutsideParenExp, "|").split("|");
+                        for (i = 0; i < a.length; i++) {
+                            a[i] = formatter(a[i]);
+                        }
+                        return a.join(",");
+                    }
+                    vals = v.match(_valuesExp) || [];
+                    i = vals.length;
+                    if (numVals > i--) {
+                        while (++i < numVals) {
+                            vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];
+                        }
+                    }
+                    return pfx + vals.join(delim) + sfx;
+                };
+                return formatter;
+            },
+
+            /**
+             * @private returns a formatter function that's used for edge-related values like marginTop, marginLeft, paddingBottom, paddingRight, etc. Just pass a comma-delimited list of property names related to the edges.
+             * @param {!string} props a comma-delimited list of property names in order from top to left, like "marginTop,marginRight,marginBottom,marginLeft"
+             * @return {Function} a formatter function
+             */
+            _getEdgeParser = function(props) {
+                props = props.split(",");
+                return function(t, e, p, cssp, pt, plugin, vars) {
+                    var a = (e + "").split(" "),
+                        i;
+                    vars = {};
+                    for (i = 0; i < 4; i++) {
+                        vars[props[i]] = a[i] = a[i] || a[(((i - 1) / 2) >> 0)];
+                    }
+                    return cssp.parse(t, vars, pt, plugin);
+                };
+            },
+
+            // @private used when other plugins must tween values first, like BezierPlugin or ThrowPropsPlugin, etc. That plugin's setRatio() gets called first so that the values are updated, and then we loop through the MiniPropTweens  which handle copying the values into their appropriate slots so that they can then be applied correctly in the main CSSPlugin setRatio() method. Remember, we typically create a proxy object that has a bunch of uniquely-named properties that we feed to the sub-plugin and it does its magic normally, and then we must interpret those values and apply them to the css because often numbers must get combined/concatenated, suffixes added, etc. to work with css, like boxShadow could have 4 values plus a color.
+            _setPluginRatio = _internals._setPluginRatio = function(v) {
+                this.plugin.setRatio(v);
+                var d = this.data,
+                    proxy = d.proxy,
+                    mpt = d.firstMPT,
+                    min = 0.000001,
+                    val, pt, i, str;
+                while (mpt) {
+                    val = proxy[mpt.v];
+                    if (mpt.r) {
+                        val = Math.round(val);
+                    } else if (val < min && val > -min) {
+                        val = 0;
+                    }
+                    mpt.t[mpt.p] = val;
+                    mpt = mpt._next;
+                }
+                if (d.autoRotate) {
+                    d.autoRotate.rotation = proxy.rotation;
+                }
+                //at the end, we must set the CSSPropTween's "e" (end) value dynamically here because that's what is used in the final setRatio() method.
+                if (v === 1) {
+                    mpt = d.firstMPT;
+                    while (mpt) {
+                        pt = mpt.t;
+                        if (!pt.type) {
+                            pt.e = pt.s + pt.xs0;
+                        } else if (pt.type === 1) {
+                            str = pt.xs0 + pt.s + pt.xs1;
+                            for (i = 1; i < pt.l; i++) {
+                                str += pt["xn"+i] + pt["xs"+(i+1)];
+                            }
+                            pt.e = str;
+                        }
+                        mpt = mpt._next;
+                    }
+                }
+            },
+
+            /**
+             * @private @constructor Used by a few SpecialProps to hold important values for proxies. For example, _parseToProxy() creates a MiniPropTween instance for each property that must get tweened on the proxy, and we record the original property name as well as the unique one we create for the proxy, plus whether or not the value needs to be rounded plus the original value.
+             * @param {!Object} t target object whose property we're tweening (often a CSSPropTween)
+             * @param {!string} p property name
+             * @param {(number|string|object)} v value
+             * @param {MiniPropTween=} next next MiniPropTween in the linked list
+             * @param {boolean=} r if true, the tweened value should be rounded to the nearest integer
+             */
+            MiniPropTween = function(t, p, v, next, r) {
+                this.t = t;
+                this.p = p;
+                this.v = v;
+                this.r = r;
+                if (next) {
+                    next._prev = this;
+                    this._next = next;
+                }
+            },
+
+            /**
+             * @private Most other plugins (like BezierPlugin and ThrowPropsPlugin and others) can only tween numeric values, but CSSPlugin must accommodate special values that have a bunch of extra data (like a suffix or strings between numeric values, etc.). For example, boxShadow has values like "10px 10px 20px 30px rgb(255,0,0)" which would utterly confuse other plugins. This method allows us to split that data apart and grab only the numeric data and attach it to uniquely-named properties of a generic proxy object ({}) so that we can feed that to virtually any plugin to have the numbers tweened. However, we must also keep track of which properties from the proxy go with which CSSPropTween values and instances. So we create a linked list of MiniPropTweens. Each one records a target (the original CSSPropTween), property (like "s" or "xn1" or "xn2") that we're tweening and the unique property name that was used for the proxy (like "boxShadow_xn1" and "boxShadow_xn2") and whether or not they need to be rounded. That way, in the _setPluginRatio() method we can simply copy the values over from the proxy to the CSSPropTween instance(s). Then, when the main CSSPlugin setRatio() method runs and applies the CSSPropTween values accordingly, they're updated nicely. So the external plugin tweens the numbers, _setPluginRatio() copies them over, and setRatio() acts normally, applying css-specific values to the element.
+             * This method returns an object that has the following properties:
+             *  - proxy: a generic object containing the starting values for all the properties that will be tweened by the external plugin.  This is what we feed to the external _onInitTween() as the target
+             *  - end: a generic object containing the ending values for all the properties that will be tweened by the external plugin. This is what we feed to the external plugin's _onInitTween() as the destination values
+             *  - firstMPT: the first MiniPropTween in the linked list
+             *  - pt: the first CSSPropTween in the linked list that was created when parsing. If shallow is true, this linked list will NOT attach to the one passed into the _parseToProxy() as the "pt" (4th) parameter.
+             * @param {!Object} t target object to be tweened
+             * @param {!(Object|string)} vars the object containing the information about the tweening values (typically the end/destination values) that should be parsed
+             * @param {!CSSPlugin} cssp The CSSPlugin instance
+             * @param {CSSPropTween=} pt the next CSSPropTween in the linked list
+             * @param {TweenPlugin=} plugin the external TweenPlugin instance that will be handling tweening the numeric values
+             * @param {boolean=} shallow if true, the resulting linked list from the parse will NOT be attached to the CSSPropTween that was passed in as the "pt" (4th) parameter.
+             * @return An object containing the following properties: proxy, end, firstMPT, and pt (see above for descriptions)
+             */
+            _parseToProxy = _internals._parseToProxy = function(t, vars, cssp, pt, plugin, shallow) {
+                var bpt = pt,
+                    start = {},
+                    end = {},
+                    transform = cssp._transform,
+                    oldForce = _forcePT,
+                    i, p, xp, mpt, firstPT;
+                cssp._transform = null;
+                _forcePT = vars;
+                pt = firstPT = cssp.parse(t, vars, pt, plugin);
+                _forcePT = oldForce;
+                //break off from the linked list so the new ones are isolated.
+                if (shallow) {
+                    cssp._transform = transform;
+                    if (bpt) {
+                        bpt._prev = null;
+                        if (bpt._prev) {
+                            bpt._prev._next = null;
+                        }
+                    }
+                }
+                while (pt && pt !== bpt) {
+                    if (pt.type <= 1) {
+                        p = pt.p;
+                        end[p] = pt.s + pt.c;
+                        start[p] = pt.s;
+                        if (!shallow) {
+                            mpt = new MiniPropTween(pt, "s", p, mpt, pt.r);
+                            pt.c = 0;
+                        }
+                        if (pt.type === 1) {
+                            i = pt.l;
+                            while (--i > 0) {
+                                xp = "xn" + i;
+                                p = pt.p + "_" + xp;
+                                end[p] = pt.data[xp];
+                                start[p] = pt[xp];
+                                if (!shallow) {
+                                    mpt = new MiniPropTween(pt, xp, p, mpt, pt.rxp[xp]);
+                                }
+                            }
+                        }
+                    }
+                    pt = pt._next;
+                }
+                return {proxy:start, end:end, firstMPT:mpt, pt:firstPT};
+            },
+
+
+
+            /**
+             * @constructor Each property that is tweened has at least one CSSPropTween associated with it. These instances store important information like the target, property, starting value, amount of change, etc. They can also optionally have a number of "extra" strings and numeric values named xs1, xn1, xs2, xn2, xs3, xn3, etc. where "s" indicates string and "n" indicates number. These can be pieced together in a complex-value tween (type:1) that has alternating types of data like a string, number, string, number, etc. For example, boxShadow could be "5px 5px 8px rgb(102, 102, 51)". In that value, there are 6 numbers that may need to tween and then pieced back together into a string again with spaces, suffixes, etc. xs0 is special in that it stores the suffix for standard (type:0) tweens, -OR- the first string (prefix) in a complex-value (type:1) CSSPropTween -OR- it can be the non-tweening value in a type:-1 CSSPropTween. We do this to conserve memory.
+             * CSSPropTweens have the following optional properties as well (not defined through the constructor):
+             *  - l: Length in terms of the number of extra properties that the CSSPropTween has (default: 0). For example, for a boxShadow we may need to tween 5 numbers in which case l would be 5; Keep in mind that the start/end values for the first number that's tweened are always stored in the s and c properties to conserve memory. All additional values thereafter are stored in xn1, xn2, etc.
+             *  - xfirst: The first instance of any sub-CSSPropTweens that are tweening properties of this instance. For example, we may split up a boxShadow tween so that there's a main CSSPropTween of type:1 that has various xs* and xn* values associated with the h-shadow, v-shadow, blur, color, etc. Then we spawn a CSSPropTween for each of those that has a higher priority and runs BEFORE the main CSSPropTween so that the values are all set by the time it needs to re-assemble them. The xfirst gives us an easy way to identify the first one in that chain which typically ends at the main one (because they're all prepende to the linked list)
+             *  - plugin: The TweenPlugin instance that will handle the tweening of any complex values. For example, sometimes we don't want to use normal subtweens (like xfirst refers to) to tween the values - we might want ThrowPropsPlugin or BezierPlugin some other plugin to do the actual tweening, so we create a plugin instance and store a reference here. We need this reference so that if we get a request to round values or disable a tween, we can pass along that request.
+             *  - data: Arbitrary data that needs to be stored with the CSSPropTween. Typically if we're going to have a plugin handle the tweening of a complex-value tween, we create a generic object that stores the END values that we're tweening to and the CSSPropTween's xs1, xs2, etc. have the starting values. We store that object as data. That way, we can simply pass that object to the plugin and use the CSSPropTween as the target.
+             *  - setRatio: Only used for type:2 tweens that require custom functionality. In this case, we call the CSSPropTween's setRatio() method and pass the ratio each time the tween updates. This isn't quite as efficient as doing things directly in the CSSPlugin's setRatio() method, but it's very convenient and flexible.
+             * @param {!Object} t Target object whose property will be tweened. Often a DOM element, but not always. It could be anything.
+             * @param {string} p Property to tween (name). For example, to tween element.width, p would be "width".
+             * @param {number} s Starting numeric value
+             * @param {number} c Change in numeric value over the course of the entire tween. For example, if element.width starts at 5 and should end at 100, c would be 95.
+             * @param {CSSPropTween=} next The next CSSPropTween in the linked list. If one is defined, we will define its _prev as the new instance, and the new instance's _next will be pointed at it.
+             * @param {number=} type The type of CSSPropTween where -1 = a non-tweening value, 0 = a standard simple tween, 1 = a complex value (like one that has multiple numbers in a comma- or space-delimited string like border:"1px solid red"), and 2 = one that uses a custom setRatio function that does all of the work of applying the values on each update.
+             * @param {string=} n Name of the property that should be used for overwriting purposes which is typically the same as p but not always. For example, we may need to create a subtween for the 2nd part of a "clip:rect(...)" tween in which case "p" might be xs1 but "n" is still "clip"
+             * @param {boolean=} r If true, the value(s) should be rounded
+             * @param {number=} pr Priority in the linked list order. Higher priority CSSPropTweens will be updated before lower priority ones. The default priority is 0.
+             * @param {string=} b Beginning value. We store this to ensure that it is EXACTLY what it was when the tween began without any risk of interpretation issues.
+             * @param {string=} e Ending value. We store this to ensure that it is EXACTLY what the user defined at the end of the tween without any risk of interpretation issues.
+             */
+            CSSPropTween = _internals.CSSPropTween = function(t, p, s, c, next, type, n, r, pr, b, e) {
+                this.t = t; //target
+                this.p = p; //property
+                this.s = s; //starting value
+                this.c = c; //change value
+                this.n = n || p; //name that this CSSPropTween should be associated to (usually the same as p, but not always - n is what overwriting looks at)
+                if (!(t instanceof CSSPropTween)) {
+                    _overwriteProps.push(this.n);
+                }
+                this.r = r; //round (boolean)
+                this.type = type || 0; //0 = normal tween, -1 = non-tweening (in which case xs0 will be applied to the target's property, like tp.t[tp.p] = tp.xs0), 1 = complex-value SpecialProp, 2 = custom setRatio() that does all the work
+                if (pr) {
+                    this.pr = pr;
+                    _hasPriority = true;
+                }
+                this.b = (b === undefined) ? s : b;
+                this.e = (e === undefined) ? s + c : e;
+                if (next) {
+                    this._next = next;
+                    next._prev = this;
+                }
+            },
+
+            /**
+             * Takes a target, the beginning value and ending value (as strings) and parses them into a CSSPropTween (possibly with child CSSPropTweens) that accommodates multiple numbers, colors, comma-delimited values, etc. For example:
+             * sp.parseComplex(element, "boxShadow", "5px 10px 20px rgb(255,102,51)", "0px 0px 0px red", true, "0px 0px 0px rgb(0,0,0,0)", pt);
+             * It will walk through the beginning and ending values (which should be in the same format with the same number and type of values) and figure out which parts are numbers, what strings separate the numeric/tweenable values, and then create the CSSPropTweens accordingly. If a plugin is defined, no child CSSPropTweens will be created. Instead, the ending values will be stored in the "data" property of the returned CSSPropTween like: {s:-5, xn1:-10, xn2:-20, xn3:255, xn4:0, xn5:0} so that it can be fed to any other plugin and it'll be plain numeric tweens but the recomposition of the complex value will be handled inside CSSPlugin's setRatio().
+             * If a setRatio is defined, the type of the CSSPropTween will be set to 2 and recomposition of the values will be the responsibility of that method.
+             *
+             * @param {!Object} t Target whose property will be tweened
+             * @param {!string} p Property that will be tweened (its name, like "left" or "backgroundColor" or "boxShadow")
+             * @param {string} b Beginning value
+             * @param {string} e Ending value
+             * @param {boolean} clrs If true, the value could contain a color value like "rgb(255,0,0)" or "#F00" or "red". The default is false, so no colors will be recognized (a performance optimization)
+             * @param {(string|number|Object)} dflt The default beginning value that should be used if no valid beginning value is defined or if the number of values inside the complex beginning and ending values don't match
+             * @param {?CSSPropTween} pt CSSPropTween instance that is the current head of the linked list (we'll prepend to this).
+             * @param {number=} pr Priority in the linked list order. Higher priority properties will be updated before lower priority ones. The default priority is 0.
+             * @param {TweenPlugin=} plugin If a plugin should handle the tweening of extra properties, pass the plugin instance here. If one is defined, then NO subtweens will be created for any extra properties (the properties will be created - just not additional CSSPropTween instances to tween them) because the plugin is expected to do so. However, the end values WILL be populated in the "data" property, like {s:100, xn1:50, xn2:300}
+             * @param {function(number)=} setRatio If values should be set in a custom function instead of being pieced together in a type:1 (complex-value) CSSPropTween, define that custom function here.
+             * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parseComplex() call.
+             */
+            _parseComplex = CSSPlugin.parseComplex = function(t, p, b, e, clrs, dflt, pt, pr, plugin, setRatio) {
+                //DEBUG: _log("parseComplex: "+p+", b: "+b+", e: "+e);
+                b = b || dflt || "";
+                pt = new CSSPropTween(t, p, 0, 0, pt, (setRatio ? 2 : 1), null, false, pr, b, e);
+                e += ""; //ensures it's a string
+                var ba = b.split(", ").join(",").split(" "), //beginning array
+                    ea = e.split(", ").join(",").split(" "), //ending array
+                    l = ba.length,
+                    autoRound = (_autoRound !== false),
+                    i, xi, ni, bv, ev, bnums, enums, bn, rgba, temp, cv, str;
+                if (e.indexOf(",") !== -1 || b.indexOf(",") !== -1) {
+                    ba = ba.join(" ").replace(_commasOutsideParenExp, ", ").split(" ");
+                    ea = ea.join(" ").replace(_commasOutsideParenExp, ", ").split(" ");
+                    l = ba.length;
+                }
+                if (l !== ea.length) {
+                    //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")");
+                    ba = (dflt || "").split(" ");
+                    l = ba.length;
+                }
+                pt.plugin = plugin;
+                pt.setRatio = setRatio;
+                for (i = 0; i < l; i++) {
+                    bv = ba[i];
+                    ev = ea[i];
+                    bn = parseFloat(bv);
+
+                    //if the value begins with a number (most common). It's fine if it has a suffix like px
+                    if (bn || bn === 0) {
+                        pt.appendXtra("", bn, _parseChange(ev, bn), ev.replace(_relNumExp, ""), (autoRound && ev.indexOf("px") !== -1), true);
+
+                    //if the value is a color
+                    } else if (clrs && (bv.charAt(0) === "#" || _colorLookup[bv] || _rgbhslExp.test(bv))) {
+                        str = ev.charAt(ev.length - 1) === "," ? ")," : ")"; //if there's a comma at the end, retain it.
+                        bv = _parseColor(bv);
+                        ev = _parseColor(ev);
+                        rgba = (bv.length + ev.length > 6);
+                        if (rgba && !_supportsOpacity && ev[3] === 0) { //older versions of IE don't support rgba(), so if the destination alpha is 0, just use "transparent" for the end color
+                            pt["xs" + pt.l] += pt.l ? " transparent" : "transparent";
+                            pt.e = pt.e.split(ea[i]).join("transparent");
+                        } else {
+                            if (!_supportsOpacity) { //old versions of IE don't support rgba().
+                                rgba = false;
+                            }
+                            pt.appendXtra((rgba ? "rgba(" : "rgb("), bv[0], ev[0] - bv[0], ",", true, true)
+                                .appendXtra("", bv[1], ev[1] - bv[1], ",", true)
+                                .appendXtra("", bv[2], ev[2] - bv[2], (rgba ? "," : str), true);
+                            if (rgba) {
+                                bv = (bv.length < 4) ? 1 : bv[3];
+                                pt.appendXtra("", bv, ((ev.length < 4) ? 1 : ev[3]) - bv, str, false);
+                            }
+                        }
+
+                    } else {
+                        bnums = bv.match(_numExp); //gets each group of numbers in the beginning value string and drops them into an array
+
+                        //if no number is found, treat it as a non-tweening value and just append the string to the current xs.
+                        if (!bnums) {
+                            pt["xs" + pt.l] += pt.l ? " " + bv : bv;
+
+                        //loop through all the numbers that are found and construct the extra values on the pt.
+                        } else {
+                            enums = ev.match(_relNumExp); //get each group of numbers in the end value string and drop them into an array. We allow relative values too, like +=50 or -=.5
+                            if (!enums || enums.length !== bnums.length) {
+                                //DEBUG: _log("mismatched formatting detected on " + p + " (" + b + " vs " + e + ")");
+                                return pt;
+                            }
+                            ni = 0;
+                            for (xi = 0; xi < bnums.length; xi++) {
+                                cv = bnums[xi];
+                                temp = bv.indexOf(cv, ni);
+                                pt.appendXtra(bv.substr(ni, temp - ni), Number(cv), _parseChange(enums[xi], cv), "", (autoRound && bv.substr(temp + cv.length, 2) === "px"), (xi === 0));
+                                ni = temp + cv.length;
+                            }
+                            pt["xs" + pt.l] += bv.substr(ni);
+                        }
+                    }
+                }
+                //if there are relative values ("+=" or "-=" prefix), we need to adjust the ending value to eliminate the prefixes and combine the values properly.
+                if (e.indexOf("=") !== -1) if (pt.data) {
+                    str = pt.xs0 + pt.data.s;
+                    for (i = 1; i < pt.l; i++) {
+                        str += pt["xs" + i] + pt.data["xn" + i];
+                    }
+                    pt.e = str + pt["xs" + i];
+                }
+                if (!pt.l) {
+                    pt.type = -1;
+                    pt.xs0 = pt.e;
+                }
+                return pt.xfirst || pt;
+            },
+            i = 9;
+
+
+        p = CSSPropTween.prototype;
+        p.l = p.pr = 0; //length (number of extra properties like xn1, xn2, xn3, etc.
+        while (--i > 0) {
+            p["xn" + i] = 0;
+            p["xs" + i] = "";
+        }
+        p.xs0 = "";
+        p._next = p._prev = p.xfirst = p.data = p.plugin = p.setRatio = p.rxp = null;
+
+
+        /**
+         * Appends and extra tweening value to a CSSPropTween and automatically manages any prefix and suffix strings. The first extra value is stored in the s and c of the main CSSPropTween instance, but thereafter any extras are stored in the xn1, xn2, xn3, etc. The prefixes and suffixes are stored in the xs0, xs1, xs2, etc. properties. For example, if I walk through a clip value like "rect(10px, 5px, 0px, 20px)", the values would be stored like this:
+         * xs0:"rect(", s:10, xs1:"px, ", xn1:5, xs2:"px, ", xn2:0, xs3:"px, ", xn3:20, xn4:"px)"
+         * And they'd all get joined together when the CSSPlugin renders (in the setRatio() method).
+         * @param {string=} pfx Prefix (if any)
+         * @param {!number} s Starting value
+         * @param {!number} c Change in numeric value over the course of the entire tween. For example, if the start is 5 and the end is 100, the change would be 95.
+         * @param {string=} sfx Suffix (if any)
+         * @param {boolean=} r Round (if true).
+         * @param {boolean=} pad If true, this extra value should be separated by the previous one by a space. If there is no previous extra and pad is true, it will automatically drop the space.
+         * @return {CSSPropTween} returns itself so that multiple methods can be chained together.
+         */
+        p.appendXtra = function(pfx, s, c, sfx, r, pad) {
+            var pt = this,
+                l = pt.l;
+            pt["xs" + l] += (pad && l) ? " " + pfx : pfx || "";
+            if (!c) if (l !== 0 && !pt.plugin) { //typically we'll combine non-changing values right into the xs to optimize performance, but we don't combine them when there's a plugin that will be tweening the values because it may depend on the values being split apart, like for a bezier, if a value doesn't change between the first and second iteration but then it does on the 3rd, we'll run into trouble because there's no xn slot for that value!
+                pt["xs" + l] += s + (sfx || "");
+                return pt;
+            }
+            pt.l++;
+            pt.type = pt.setRatio ? 2 : 1;
+            pt["xs" + pt.l] = sfx || "";
+            if (l > 0) {
+                pt.data["xn" + l] = s + c;
+                pt.rxp["xn" + l] = r; //round extra property (we need to tap into this in the _parseToProxy() method)
+                pt["xn" + l] = s;
+                if (!pt.plugin) {
+                    pt.xfirst = new CSSPropTween(pt, "xn" + l, s, c, pt.xfirst || pt, 0, pt.n, r, pt.pr);
+                    pt.xfirst.xs0 = 0; //just to ensure that the property stays numeric which helps modern browsers speed up processing. Remember, in the setRatio() method, we do pt.t[pt.p] = val + pt.xs0 so if pt.xs0 is "" (the default), it'll cast the end value as a string. When a property is a number sometimes and a string sometimes, it prevents the compiler from locking in the data type, slowing things down slightly.
+                }
+                return pt;
+            }
+            pt.data = {s:s + c};
+            pt.rxp = {};
+            pt.s = s;
+            pt.c = c;
+            pt.r = r;
+            return pt;
+        };
+
+        /**
+         * @constructor A SpecialProp is basically a css property that needs to be treated in a non-standard way, like if it may contain a complex value like boxShadow:"5px 10px 15px rgb(255, 102, 51)" or if it is associated with another plugin like ThrowPropsPlugin or BezierPlugin. Every SpecialProp is associated with a particular property name like "boxShadow" or "throwProps" or "bezier" and it will intercept those values in the vars object that's passed to the CSSPlugin and handle them accordingly.
+         * @param {!string} p Property name (like "boxShadow" or "throwProps")
+         * @param {Object=} options An object containing any of the following configuration options:
+         *                      - defaultValue: the default value
+         *                      - parser: A function that should be called when the associated property name is found in the vars. This function should return a CSSPropTween instance and it should ensure that it is properly inserted into the linked list. It will receive 4 paramters: 1) The target, 2) The value defined in the vars, 3) The CSSPlugin instance (whose _firstPT should be used for the linked list), and 4) A computed style object if one was calculated (this is a speed optimization that allows retrieval of starting values quicker)
+         *                      - formatter: a function that formats any value received for this special property (for example, boxShadow could take "5px 5px red" and format it to "5px 5px 0px 0px red" so that both the beginning and ending values have a common order and quantity of values.)
+         *                      - prefix: if true, we'll determine whether or not this property requires a vendor prefix (like Webkit or Moz or ms or O)
+         *                      - color: set this to true if the value for this SpecialProp may contain color-related values like rgb(), rgba(), etc.
+         *                      - priority: priority in the linked list order. Higher priority SpecialProps will be updated before lower priority ones. The default priority is 0.
+         *                      - multi: if true, the formatter should accommodate a comma-delimited list of values, like boxShadow could have multiple boxShadows listed out.
+         *                      - collapsible: if true, the formatter should treat the value like it's a top/right/bottom/left value that could be collapsed, like "5px" would apply to all, "5px, 10px" would use 5px for top/bottom and 10px for right/left, etc.
+         *                      - keyword: a special keyword that can [optionally] be found inside the value (like "inset" for boxShadow). This allows us to validate beginning/ending values to make sure they match (if the keyword is found in one, it'll be added to the other for consistency by default).
+         */
+        var SpecialProp = function(p, options) {
+                options = options || {};
+                this.p = options.prefix ? _checkPropPrefix(p) || p : p;
+                _specialProps[p] = _specialProps[this.p] = this;
+                this.format = options.formatter || _getFormatter(options.defaultValue, options.color, options.collapsible, options.multi);
+                if (options.parser) {
+                    this.parse = options.parser;
+                }
+                this.clrs = options.color;
+                this.multi = options.multi;
+                this.keyword = options.keyword;
+                this.dflt = options.defaultValue;
+                this.pr = options.priority || 0;
+            },
+
+            //shortcut for creating a new SpecialProp that can accept multiple properties as a comma-delimited list (helps minification). dflt can be an array for multiple values (we don't do a comma-delimited list because the default value may contain commas, like rect(0px,0px,0px,0px)). We attach this method to the SpecialProp class/object instead of using a private _createSpecialProp() method so that we can tap into it externally if necessary, like from another plugin.
+            _registerComplexSpecialProp = _internals._registerComplexSpecialProp = function(p, options, defaults) {
+                if (typeof(options) !== "object") {
+                    options = {parser:defaults}; //to make backwards compatible with older versions of BezierPlugin and ThrowPropsPlugin
+                }
+                var a = p.split(","),
+                    d = options.defaultValue,
+                    i, temp;
+                defaults = defaults || [d];
+                for (i = 0; i < a.length; i++) {
+                    options.prefix = (i === 0 && options.prefix);
+                    options.defaultValue = defaults[i] || d;
+                    temp = new SpecialProp(a[i], options);
+                }
+            },
+
+            //creates a placeholder special prop for a plugin so that the property gets caught the first time a tween of it is attempted, and at that time it makes the plugin register itself, thus taking over for all future tweens of that property. This allows us to not mandate that things load in a particular order and it also allows us to log() an error that informs the user when they attempt to tween an external plugin-related property without loading its .js file.
+            _registerPluginProp = function(p) {
+                if (!_specialProps[p]) {
+                    var pluginName = p.charAt(0).toUpperCase() + p.substr(1) + "Plugin";
+                    _registerComplexSpecialProp(p, {parser:function(t, e, p, cssp, pt, plugin, vars) {
+                        var pluginClass = (window.GreenSockGlobals || window).com.greensock.plugins[pluginName];
+                        if (!pluginClass) {
+                            _log("Error: " + pluginName + " js file not loaded.");
+                            return pt;
+                        }
+                        pluginClass._cssRegister();
+                        return _specialProps[p].parse(t, e, p, cssp, pt, plugin, vars);
+                    }});
+                }
+            };
+
+
+        p = SpecialProp.prototype;
+
+        /**
+         * Alias for _parseComplex() that automatically plugs in certain values for this SpecialProp, like its property name, whether or not colors should be sensed, the default value, and priority. It also looks for any keyword that the SpecialProp defines (like "inset" for boxShadow) and ensures that the beginning and ending values have the same number of values for SpecialProps where multi is true (like boxShadow and textShadow can have a comma-delimited list)
+         * @param {!Object} t target element
+         * @param {(string|number|object)} b beginning value
+         * @param {(string|number|object)} e ending (destination) value
+         * @param {CSSPropTween=} pt next CSSPropTween in the linked list
+         * @param {TweenPlugin=} plugin If another plugin will be tweening the complex value, that TweenPlugin instance goes here.
+         * @param {function=} setRatio If a custom setRatio() method should be used to handle this complex value, that goes here.
+         * @return {CSSPropTween=} First CSSPropTween in the linked list
+         */
+        p.parseComplex = function(t, b, e, pt, plugin, setRatio) {
+            var kwd = this.keyword,
+                i, ba, ea, l, bi, ei;
+            //if this SpecialProp's value can contain a comma-delimited list of values (like boxShadow or textShadow), we must parse them in a special way, and look for a keyword (like "inset" for boxShadow) and ensure that the beginning and ending BOTH have it if the end defines it as such. We also must ensure that there are an equal number of values specified (we can't tween 1 boxShadow to 3 for example)
+            if (this.multi) if (_commasOutsideParenExp.test(e) || _commasOutsideParenExp.test(b)) {
+                ba = b.replace(_commasOutsideParenExp, "|").split("|");
+                ea = e.replace(_commasOutsideParenExp, "|").split("|");
+            } else if (kwd) {
+                ba = [b];
+                ea = [e];
+            }
+            if (ea) {
+                l = (ea.length > ba.length) ? ea.length : ba.length;
+                for (i = 0; i < l; i++) {
+                    b = ba[i] = ba[i] || this.dflt;
+                    e = ea[i] = ea[i] || this.dflt;
+                    if (kwd) {
+                        bi = b.indexOf(kwd);
+                        ei = e.indexOf(kwd);
+                        if (bi !== ei) {
+                            e = (ei === -1) ? ea : ba;
+                            e[i] += " " + kwd;
+                        }
+                    }
+                }
+                b = ba.join(", ");
+                e = ea.join(", ");
+            }
+            return _parseComplex(t, this.p, b, e, this.clrs, this.dflt, pt, this.pr, plugin, setRatio);
+        };
+
+        /**
+         * Accepts a target and end value and spits back a CSSPropTween that has been inserted into the CSSPlugin's linked list and conforms with all the conventions we use internally, like type:-1, 0, 1, or 2, setting up any extra property tweens, priority, etc. For example, if we have a boxShadow SpecialProp and call:
+         * this._firstPT = sp.parse(element, "5px 10px 20px rgb(2550,102,51)", "boxShadow", this);
+         * It should figure out the starting value of the element's boxShadow, compare it to the provided end value and create all the necessary CSSPropTweens of the appropriate types to tween the boxShadow. The CSSPropTween that gets spit back should already be inserted into the linked list (the 4th parameter is the current head, so prepend to that).
+         * @param {!Object} t Target object whose property is being tweened
+         * @param {Object} e End value as provided in the vars object (typically a string, but not always - like a throwProps would be an object).
+         * @param {!string} p Property name
+         * @param {!CSSPlugin} cssp The CSSPlugin instance that should be associated with this tween.
+         * @param {?CSSPropTween} pt The CSSPropTween that is the current head of the linked list (we'll prepend to it)
+         * @param {TweenPlugin=} plugin If a plugin will be used to tween the parsed value, this is the plugin instance.
+         * @param {Object=} vars Original vars object that contains the data for parsing.
+         * @return {CSSPropTween} The first CSSPropTween in the linked list which includes the new one(s) added by the parse() call.
+         */
+        p.parse = function(t, e, p, cssp, pt, plugin, vars) {
+            return this.parseComplex(t.style, this.format(_getStyle(t, this.p, _cs, false, this.dflt)), this.format(e), pt, plugin);
+        };
+
+        /**
+         * Registers a special property that should be intercepted from any "css" objects defined in tweens. This allows you to handle them however you want without CSSPlugin doing it for you. The 2nd parameter should be a function that accepts 3 parameters:
+         *  1) Target object whose property should be tweened (typically a DOM element)
+         *  2) The end/destination value (could be a string, number, object, or whatever you want)
+         *  3) The tween instance (you probably don't need to worry about this, but it can be useful for looking up information like the duration)
+         *
+         * Then, your function should return a function which will be called each time the tween gets rendered, passing a numeric "ratio" parameter to your function that indicates the change factor (usually between 0 and 1). For example:
+         *
+         * CSSPlugin.registerSpecialProp("myCustomProp", function(target, value, tween) {
+         *      var start = target.style.width;
+         *      return function(ratio) {
+         *              target.style.width = (start + value * ratio) + "px";
+         *              console.log("set width to " + target.style.width);
+         *          }
+         * }, 0);
+         *
+         * Then, when I do this tween, it will trigger my special property:
+         *
+         * TweenLite.to(element, 1, {css:{myCustomProp:100}});
+         *
+         * In the example, of course, we're just changing the width, but you can do anything you want.
+         *
+         * @param {!string} name Property name (or comma-delimited list of property names) that should be intercepted and handled by your function. For example, if I define "myCustomProp", then it would handle that portion of the following tween: TweenLite.to(element, 1, {css:{myCustomProp:100}})
+         * @param {!function(Object, Object, Object, string):function(number)} onInitTween The function that will be called when a tween of this special property is performed. The function will receive 4 parameters: 1) Target object that should be tweened, 2) Value that was passed to the tween, 3) The tween instance itself (rarely used), and 4) The property name that's being tweened. Your function should return a function that should be called on every update of the tween. That function will receive a single parameter that is a "change factor" value (typically between 0 and 1) indicating the amount of change as a ratio. You can use this to determine how to set the values appropriately in your function.
+         * @param {number=} priority Priority that helps the engine determine the order in which to set the properties (default: 0). Higher priority properties will be updated before lower priority ones.
+         */
+        CSSPlugin.registerSpecialProp = function(name, onInitTween, priority) {
+            _registerComplexSpecialProp(name, {parser:function(t, e, p, cssp, pt, plugin, vars) {
+                var rv = new CSSPropTween(t, p, 0, 0, pt, 2, p, false, priority);
+                rv.plugin = plugin;
+                rv.setRatio = onInitTween(t, e, cssp._tween, p);
+                return rv;
+            }, priority:priority});
+        };
+
+
+
+
+
+
+
+
+        //transform-related methods and properties
+        var _transformProps = ("scaleX,scaleY,scaleZ,x,y,z,skewX,skewY,rotation,rotationX,rotationY,perspective").split(","),
+            _transformProp = _checkPropPrefix("transform"), //the Javascript (camelCase) transform property, like msTransform, WebkitTransform, MozTransform, or OTransform.
+            _transformPropCSS = _prefixCSS + "transform",
+            _transformOriginProp = _checkPropPrefix("transformOrigin"),
+            _supports3D = (_checkPropPrefix("perspective") !== null),
+            Transform = _internals.Transform = function() {
+                this.skewY = 0;
+            },
+
+            /**
+             * Parses the transform values for an element, returning an object with x, y, z, scaleX, scaleY, scaleZ, rotation, rotationX, rotationY, skewX, and skewY properties. Note: by default (for performance reasons), all skewing is combined into skewX and rotation but skewY still has a place in the transform object so that we can record how much of the skew is attributed to skewX vs skewY. Remember, a skewY of 10 looks the same as a rotation of 10 and skewX of -10.
+             * @param {!Object} t target element
+             * @param {Object=} cs computed style object (optional)
+             * @param {boolean=} rec if true, the transform values will be recorded to the target element's _gsTransform object, like target._gsTransform = {x:0, y:0, z:0, scaleX:1...}
+             * @param {boolean=} parse if true, we'll ignore any _gsTransform values that already exist on the element, and force a reparsing of the css (calculated style)
+             * @return {object} object containing all of the transform properties/values like {x:0, y:0, z:0, scaleX:1...}
+             */
+            _getTransform = _internals.getTransform = function(t, cs, rec, parse) {
+                if (t._gsTransform && rec && !parse) {
+                    return t._gsTransform; //if the element already has a _gsTransform, use that. Note: some browsers don't accurately return the calculated style for the transform (particularly for SVG), so it's almost always safest to just use the values we've already applied rather than re-parsing things.
+                }
+                var tm = rec ? t._gsTransform || new Transform() : new Transform(),
+                    invX = (tm.scaleX < 0), //in order to interpret things properly, we need to know if the user applied a negative scaleX previously so that we can adjust the rotation and skewX accordingly. Otherwise, if we always interpret a flipped matrix as affecting scaleY and the user only wants to tween the scaleX on multiple sequential tweens, it would keep the negative scaleY without that being the user's intent.
+                    min = 0.00002,
+                    rnd = 100000,
+                    minAngle = 179.99,
+                    minPI = minAngle * _DEG2RAD,
+                    zOrigin = _supports3D ? parseFloat(_getStyle(t, _transformOriginProp, cs, false, "0 0 0").split(" ")[2]) || tm.zOrigin  || 0 : 0,
+                    s, m, i, n, dec, scaleX, scaleY, rotation, skewX, difX, difY, difR, difS;
+                if (_transformProp) {
+                    s = _getStyle(t, _transformPropCSS, cs, true);
+                } else if (t.currentStyle) {
+                    //for older versions of IE, we need to interpret the filter portion that is in the format: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand') Notice that we need to swap b and c compared to a normal matrix.
+                    s = t.currentStyle.filter.match(_ieGetMatrixExp);
+                    s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : "";
+                }
+                //split the matrix values out into an array (m for matrix)
+                m = (s || "").match(/(?:\-|\b)[\d\-\.e]+\b/gi) || [];
+                i = m.length;
+                while (--i > -1) {
+                    n = Number(m[i]);
+                    m[i] = (dec = n - (n |= 0)) ? ((dec * rnd + (dec < 0 ? -0.5 : 0.5)) | 0) / rnd + n : n; //convert strings to Numbers and round to 5 decimal places to avoid issues with tiny numbers. Roughly 20x faster than Number.toFixed(). We also must make sure to round before dividing so that values like 0.9999999999 become 1 to avoid glitches in browser rendering and interpretation of flipped/rotated 3D matrices. And don't just multiply the number by rnd, floor it, and then divide by rnd because the bitwise operations max out at a 32-bit signed integer, thus it could get clipped at a relatively low value (like 22,000.00000 for example).
+                }
+                if (m.length === 16) {
+
+                    //we'll only look at these position-related 6 variables first because if x/y/z all match, it's relatively safe to assume we don't need to re-parse everything which risks losing important rotational information (like rotationX:180 plus rotationY:180 would look the same as rotation:180 - there's no way to know for sure which direction was taken based solely on the matrix3d() values)
+                    var a13 = m[8], a23 = m[9], a33 = m[10],
+                        a14 = m[12], a24 = m[13], a34 = m[14];
+
+                    //we manually compensate for non-zero z component of transformOrigin to work around bugs in Safari
+                    if (tm.zOrigin) {
+                        a34 = -tm.zOrigin;
+                        a14 = a13*a34-m[12];
+                        a24 = a23*a34-m[13];
+                        a34 = a33*a34+tm.zOrigin-m[14];
+                    }
+
+                    //only parse from the matrix if we MUST because not only is it usually unnecessary due to the fact that we store the values in the _gsTransform object, but also because it's impossible to accurately interpret rotationX, rotationY, rotationZ, scaleX, and scaleY if all are applied, so it's much better to rely on what we store. However, we must parse the first time that an object is tweened. We also assume that if the position has changed, the user must have done some styling changes outside of CSSPlugin, thus we force a parse in that scenario.
+                    if (!rec || parse || tm.rotationX == null) {
+                        var a11 = m[0], a21 = m[1], a31 = m[2], a41 = m[3],
+                            a12 = m[4], a22 = m[5], a32 = m[6], a42 = m[7],
+                            a43 = m[11],
+                            angle = Math.atan2(a32, a33),
+                            xFlip = (angle < -minPI || angle > minPI),
+                            t1, t2, t3, cos, sin, yFlip, zFlip;
+                        tm.rotationX = angle * _RAD2DEG;
+                        //rotationX
+                        if (angle) {
+                            cos = Math.cos(-angle);
+                            sin = Math.sin(-angle);
+                            t1 = a12*cos+a13*sin;
+                            t2 = a22*cos+a23*sin;
+                            t3 = a32*cos+a33*sin;
+                            a13 = a12*-sin+a13*cos;
+                            a23 = a22*-sin+a23*cos;
+                            a33 = a32*-sin+a33*cos;
+                            a43 = a42*-sin+a43*cos;
+                            a12 = t1;
+                            a22 = t2;
+                            a32 = t3;
+                        }
+                        //rotationY
+                        angle = Math.atan2(a13, a11);
+                        tm.rotationY = angle * _RAD2DEG;
+                        if (angle) {
+                            yFlip = (angle < -minPI || angle > minPI);
+                            cos = Math.cos(-angle);
+                            sin = Math.sin(-angle);
+                            t1 = a11*cos-a13*sin;
+                            t2 = a21*cos-a23*sin;
+                            t3 = a31*cos-a33*sin;
+                            a23 = a21*sin+a23*cos;
+                            a33 = a31*sin+a33*cos;
+                            a43 = a41*sin+a43*cos;
+                            a11 = t1;
+                            a21 = t2;
+                            a31 = t3;
+                        }
+                        //rotationZ
+                        angle = Math.atan2(a21, a22);
+                        tm.rotation = angle * _RAD2DEG;
+                        if (angle) {
+                            zFlip = (angle < -minPI || angle > minPI);
+                            cos = Math.cos(-angle);
+                            sin = Math.sin(-angle);
+                            a11 = a11*cos+a12*sin;
+                            t2 = a21*cos+a22*sin;
+                            a22 = a21*-sin+a22*cos;
+                            a32 = a31*-sin+a32*cos;
+                            a21 = t2;
+                        }
+
+                        if (zFlip && xFlip) {
+                            tm.rotation = tm.rotationX = 0;
+                        } else if (zFlip && yFlip) {
+                            tm.rotation = tm.rotationY = 0;
+                        } else if (yFlip && xFlip) {
+                            tm.rotationY = tm.rotationX = 0;
+                        }
+
+                        tm.scaleX = ((Math.sqrt(a11 * a11 + a21 * a21) * rnd + 0.5) | 0) / rnd;
+                        tm.scaleY = ((Math.sqrt(a22 * a22 + a23 * a23) * rnd + 0.5) | 0) / rnd;
+                        tm.scaleZ = ((Math.sqrt(a32 * a32 + a33 * a33) * rnd + 0.5) | 0) / rnd;
+                        tm.skewX = 0;
+                        tm.perspective = a43 ? 1 / ((a43 < 0) ? -a43 : a43) : 0;
+                        tm.x = a14;
+                        tm.y = a24;
+                        tm.z = a34;
+                    }
+
+                } else if ((!_supports3D || parse || !m.length || tm.x !== m[4] || tm.y !== m[5] || (!tm.rotationX && !tm.rotationY)) && !(tm.x !== undefined && _getStyle(t, "display", cs) === "none")) { //sometimes a 6-element matrix is returned even when we performed 3D transforms, like if rotationX and rotationY are 180. In cases like this, we still need to honor the 3D transforms. If we just rely on the 2D info, it could affect how the data is interpreted, like scaleY might get set to -1 or rotation could get offset by 180 degrees. For example, do a TweenLite.to(element, 1, {css:{rotationX:180, rotationY:180}}) and then later, TweenLite.to(element, 1, {css:{rotationX:0}}) and without this conditional logic in place, it'd jump to a state of being unrotated when the 2nd tween starts. Then again, we need to honor the fact that the user COULD alter the transforms outside of CSSPlugin, like by manually applying new css, so we try to sense that by looking at x and y because if those changed, we know the changes were made outside CSSPlugin and we force a reinterpretation of the matrix values. Also, in Webkit browsers, if the element's "display" is "none", its calculated style value will always return empty, so if we've already recorded the values in the _gsTransform object, we'll just rely on those.
+                    var k = (m.length >= 6),
+                        a = k ? m[0] : 1,
+                        b = m[1] || 0,
+                        c = m[2] || 0,
+                        d = k ? m[3] : 1;
+                    tm.x = m[4] || 0;
+                    tm.y = m[5] || 0;
+                    scaleX = Math.sqrt(a * a + b * b);
+                    scaleY = Math.sqrt(d * d + c * c);
+                    rotation = (a || b) ? Math.atan2(b, a) * _RAD2DEG : tm.rotation || 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).
+                    skewX = (c || d) ? Math.atan2(c, d) * _RAD2DEG + rotation : tm.skewX || 0;
+                    difX = scaleX - Math.abs(tm.scaleX || 0);
+                    difY = scaleY - Math.abs(tm.scaleY || 0);
+                    if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {
+                        if (invX) {
+                            scaleX *= -1;
+                            skewX += (rotation <= 0) ? 180 : -180;
+                            rotation += (rotation <= 0) ? 180 : -180;
+                        } else {
+                            scaleY *= -1;
+                            skewX += (skewX <= 0) ? 180 : -180;
+                        }
+                    }
+                    difR = (rotation - tm.rotation) % 180; //note: matching ranges would be very small (+/-0.0001) or very close to 180.
+                    difS = (skewX - tm.skewX) % 180;
+                    //if there's already a recorded _gsTransform in place for the target, we should leave those values in place unless we know things changed for sure (beyond a super small amount). This gets around ambiguous interpretations, like if scaleX and scaleY are both -1, the matrix would be the same as if the rotation was 180 with normal scaleX/scaleY. If the user tweened to particular values, those must be prioritized to ensure animation is consistent.
+                    if (tm.skewX === undefined || difX > min || difX < -min || difY > min || difY < -min || (difR > -minAngle && difR < minAngle && (difR * rnd) | 0 !== 0) || (difS > -minAngle && difS < minAngle && (difS * rnd) | 0 !== 0)) {
+                        tm.scaleX = scaleX;
+                        tm.scaleY = scaleY;
+                        tm.rotation = rotation;
+                        tm.skewX = skewX;
+                    }
+                    if (_supports3D) {
+                        tm.rotationX = tm.rotationY = tm.z = 0;
+                        tm.perspective = parseFloat(CSSPlugin.defaultTransformPerspective) || 0;
+                        tm.scaleZ = 1;
+                    }
+                }
+                tm.zOrigin = zOrigin;
+
+                //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 0 in these cases. The conditional logic here is faster than calling Math.abs(). Also, browsers tend to render a SLIGHTLY rotated object in a fuzzy way, so we need to snap to exactly 0 when appropriate.
+                for (i in tm) {
+                    if (tm[i] < min) if (tm[i] > -min) {
+                        tm[i] = 0;
+                    }
+                }
+                //DEBUG: _log("parsed rotation: "+(tm.rotationX)+", "+(tm.rotationY)+", "+(tm.rotation)+", scale: "+tm.scaleX+", "+tm.scaleY+", "+tm.scaleZ+", position: "+tm.x+", "+tm.y+", "+tm.z+", perspective: "+tm.perspective);
+                if (rec) {
+                    t._gsTransform = tm; //record to the object's _gsTransform which we use so that tweens can control individual properties independently (we need all the properties to accurately recompose the matrix in the setRatio() method)
+                }
+                return tm;
+            },
+
+            //for setting 2D transforms in IE6, IE7, and IE8 (must use a "filter" to emulate the behavior of modern day browser transforms)
+            _setIETransformRatio = function(v) {
+                var t = this.data, //refers to the element's _gsTransform object
+                    ang = -t.rotation * _DEG2RAD,
+                    skew = ang + t.skewX * _DEG2RAD,
+                    rnd = 100000,
+                    a = ((Math.cos(ang) * t.scaleX * rnd) | 0) / rnd,
+                    b = ((Math.sin(ang) * t.scaleX * rnd) | 0) / rnd,
+                    c = ((Math.sin(skew) * -t.scaleY * rnd) | 0) / rnd,
+                    d = ((Math.cos(skew) * t.scaleY * rnd) | 0) / rnd,
+                    style = this.t.style,
+                    cs = this.t.currentStyle,
+                    filters, val;
+                if (!cs) {
+                    return;
+                }
+                val = b; //just for swapping the variables an inverting them (reused "val" to avoid creating another variable in memory). IE's filter matrix uses a non-standard matrix configuration (angle goes the opposite way, and b and c are reversed and inverted)
+                b = -c;
+                c = -val;
+                filters = cs.filter;
+                style.filter = ""; //remove filters so that we can accurately measure offsetWidth/offsetHeight
+                var w = this.t.offsetWidth,
+                    h = this.t.offsetHeight,
+                    clip = (cs.position !== "absolute"),
+                    m = "progid:DXImageTransform.Microsoft.Matrix(M11=" + a + ", M12=" + b + ", M21=" + c + ", M22=" + d,
+                    ox = t.x,
+                    oy = t.y,
+                    dx, dy;
+
+                //if transformOrigin is being used, adjust the offset x and y
+                if (t.ox != null) {
+                    dx = ((t.oxp) ? w * t.ox * 0.01 : t.ox) - w / 2;
+                    dy = ((t.oyp) ? h * t.oy * 0.01 : t.oy) - h / 2;
+                    ox += dx - (dx * a + dy * b);
+                    oy += dy - (dx * c + dy * d);
+                }
+
+                if (!clip) {
+                    m += ", sizingMethod='auto expand')";
+                } else {
+                    dx = (w / 2);
+                    dy = (h / 2);
+                    //translate to ensure that transformations occur around the correct origin (default is center).
+                    m += ", Dx=" + (dx - (dx * a + dy * b) + ox) + ", Dy=" + (dy - (dx * c + dy * d) + oy) + ")";
+                }
+                if (filters.indexOf("DXImageTransform.Microsoft.Matrix(") !== -1) {
+                    style.filter = filters.replace(_ieSetMatrixExp, m);
+                } else {
+                    style.filter = m + " " + filters; //we must always put the transform/matrix FIRST (before alpha(opacity=xx)) to avoid an IE bug that slices part of the object when rotation is applied with alpha.
+                }
+
+                //at the end or beginning of the tween, if the matrix is normal (1, 0, 0, 1) and opacity is 100 (or doesn't exist), remove the filter to improve browser performance.
+                if (v === 0 || v === 1) if (a === 1) if (b === 0) if (c === 0) if (d === 1) if (!clip || m.indexOf("Dx=0, Dy=0") !== -1) if (!_opacityExp.test(filters) || parseFloat(RegExp.$1) === 100) if (filters.indexOf("gradient(" && filters.indexOf("Alpha")) === -1) {
+                    style.removeAttribute("filter");
+                }
+
+                //we must set the margins AFTER applying the filter in order to avoid some bugs in IE8 that could (in rare scenarios) cause them to be ignored intermittently (vibration).
+                if (!clip) {
+                    var mult = (_ieVers < 8) ? 1 : -1, //in Internet Explorer 7 and before, the box model is broken, causing the browser to treat the width/height of the actual rotated filtered image as the width/height of the box itself, but Microsoft corrected that in IE8. We must use a negative offset in IE8 on the right/bottom
+                        marg, prop, dif;
+                    dx = t.ieOffsetX || 0;
+                    dy = t.ieOffsetY || 0;
+                    t.ieOffsetX = Math.round((w - ((a < 0 ? -a : a) * w + (b < 0 ? -b : b) * h)) / 2 + ox);
+                    t.ieOffsetY = Math.round((h - ((d < 0 ? -d : d) * h + (c < 0 ? -c : c) * w)) / 2 + oy);
+                    for (i = 0; i < 4; i++) {
+                        prop = _margins[i];
+                        marg = cs[prop];
+                        //we need to get the current margin in case it is being tweened separately (we want to respect that tween's changes)
+                        val = (marg.indexOf("px") !== -1) ? parseFloat(marg) : _convertToPixels(this.t, prop, parseFloat(marg), marg.replace(_suffixExp, "")) || 0;
+                        if (val !== t[prop]) {
+                            dif = (i < 2) ? -t.ieOffsetX : -t.ieOffsetY; //if another tween is controlling a margin, we cannot only apply the difference in the ieOffsets, so we essentially zero-out the dx and dy here in that case. We record the margin(s) later so that we can keep comparing them, making this code very flexible.
+                        } else {
+                            dif = (i < 2) ? dx - t.ieOffsetX : dy - t.ieOffsetY;
+                        }
+                        style[prop] = (t[prop] = Math.round( val - dif * ((i === 0 || i === 2) ? 1 : mult) )) + "px";
+                    }
+                }
+            },
+
+            _set3DTransformRatio = _internals.set3DTransformRatio = function(v) {
+                var t = this.data, //refers to the element's _gsTransform object
+                    style = this.t.style,
+                    angle = t.rotation * _DEG2RAD,
+                    sx = t.scaleX,
+                    sy = t.scaleY,
+                    sz = t.scaleZ,
+                    perspective = t.perspective,
+                    a11, a12, a13, a14, a21, a22, a23, a24, a31, a32, a33, a34, a41, a42, a43,
+                    zOrigin, rnd, cos, sin, t1, t2, t3, t4;
+                if (v === 1 || v === 0) if (t.force3D === "auto") if (!t.rotationY && !t.rotationX && sz === 1 && !perspective && !t.z) { //on the final render (which could be 0 for a from tween), if there are no 3D aspects, render in 2D to free up memory and improve performance especially on mobile devices
+                    _set2DTransformRatio.call(this, v);
+                    return;
+                }
+                if (_isFirefox) {
+                    var n = 0.0001;
+                    if (sx < n && sx > -n) { //Firefox has a bug (at least in v25) that causes it to render the transparent part of 32-bit PNG images as black when displayed inside an iframe and the 3D scale is very small and doesn't change sufficiently enough between renders (like if you use a Power4.easeInOut to scale from 0 to 1 where the beginning values only change a tiny amount to begin the tween before accelerating). In this case, we force the scale to be 0.00002 instead which is visually the same but works around the Firefox issue.
+                        sx = sz = 0.00002;
+                    }
+                    if (sy < n && sy > -n) {
+                        sy = sz = 0.00002;
+                    }
+                    if (perspective && !t.z && !t.rotationX && !t.rotationY) { //Firefox has a bug that causes elements to have an odd super-thin, broken/dotted black border on elements that have a perspective set but aren't utilizing 3D space (no rotationX, rotationY, or z).
+                        perspective = 0;
+                    }
+                }
+                if (angle || t.skewX) {
+                    cos = Math.cos(angle);
+                    sin = Math.sin(angle);
+                    a11 = cos;
+                    a21 = sin;
+                    if (t.skewX) {
+                        angle -= t.skewX * _DEG2RAD;
+                        cos = Math.cos(angle);
+                        sin = Math.sin(angle);
+                        if (t.skewType === "simple") { //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does
+                            t1 = Math.tan(t.skewX * _DEG2RAD);
+                            t1 = Math.sqrt(1 + t1 * t1);
+                            cos *= t1;
+                            sin *= t1;
+                        }
+                    }
+                    a12 = -sin;
+                    a22 = cos;
+
+                } else if (!t.rotationY && !t.rotationX && sz === 1 && !perspective) { //if we're only translating and/or 2D scaling, this is faster...
+                    style[_transformProp] = "translate3d(" + t.x + "px," + t.y + "px," + t.z +"px)" + ((sx !== 1 || sy !== 1) ? " scale(" + sx + "," + sy + ")" : "");
+                    return;
+                } else {
+                    a11 = a22 = 1;
+                    a12 = a21 = 0;
+                }
+                a33 = 1;
+                a13 = a14 = a23 = a24 = a31 = a32 = a34 = a41 = a42 = 0;
+                a43 = (perspective) ? -1 / perspective : 0;
+                zOrigin = t.zOrigin;
+                rnd = 100000;
+                angle = t.rotationY * _DEG2RAD;
+                if (angle) {
+                    cos = Math.cos(angle);
+                    sin = Math.sin(angle);
+                    a31 = a33*-sin;
+                    a41 = a43*-sin;
+                    a13 = a11*sin;
+                    a23 = a21*sin;
+                    a33 *= cos;
+                    a43 *= cos;
+                    a11 *= cos;
+                    a21 *= cos;
+                }
+                angle = t.rotationX * _DEG2RAD;
+                if (angle) {
+                    cos = Math.cos(angle);
+                    sin = Math.sin(angle);
+                    t1 = a12*cos+a13*sin;
+                    t2 = a22*cos+a23*sin;
+                    t3 = a32*cos+a33*sin;
+                    t4 = a42*cos+a43*sin;
+                    a13 = a12*-sin+a13*cos;
+                    a23 = a22*-sin+a23*cos;
+                    a33 = a32*-sin+a33*cos;
+                    a43 = a42*-sin+a43*cos;
+                    a12 = t1;
+                    a22 = t2;
+                    a32 = t3;
+                    a42 = t4;
+                }
+                if (sz !== 1) {
+                    a13*=sz;
+                    a23*=sz;
+                    a33*=sz;
+                    a43*=sz;
+                }
+                if (sy !== 1) {
+                    a12*=sy;
+                    a22*=sy;
+                    a32*=sy;
+                    a42*=sy;
+                }
+                if (sx !== 1) {
+                    a11*=sx;
+                    a21*=sx;
+                    a31*=sx;
+                    a41*=sx;
+                }
+                if (zOrigin) {
+                    a34 -= zOrigin;
+                    a14 = a13*a34;
+                    a24 = a23*a34;
+                    a34 = a33*a34+zOrigin;
+                }
+                //we round the x, y, and z slightly differently to allow even larger values.
+                a14 = (t1 = (a14 += t.x) - (a14 |= 0)) ? ((t1 * rnd + (t1 < 0 ? -0.5 : 0.5)) | 0) / rnd + a14 : a14;
+                a24 = (t1 = (a24 += t.y) - (a24 |= 0)) ? ((t1 * rnd + (t1 < 0 ? -0.5 : 0.5)) | 0) / rnd + a24 : a24;
+                a34 = (t1 = (a34 += t.z) - (a34 |= 0)) ? ((t1 * rnd + (t1 < 0 ? -0.5 : 0.5)) | 0) / rnd + a34 : a34;
+                style[_transformProp] = "matrix3d(" + [ (((a11 * rnd) | 0) / rnd), (((a21 * rnd) | 0) / rnd), (((a31 * rnd) | 0) / rnd), (((a41 * rnd) | 0) / rnd), (((a12 * rnd) | 0) / rnd), (((a22 * rnd) | 0) / rnd), (((a32 * rnd) | 0) / rnd), (((a42 * rnd) | 0) / rnd), (((a13 * rnd) | 0) / rnd), (((a23 * rnd) | 0) / rnd), (((a33 * rnd) | 0) / rnd), (((a43 * rnd) | 0) / rnd), a14, a24, a34, (perspective ? (1 + (-a34 / perspective)) : 1) ].join(",") + ")";
+            },
+
+            _set2DTransformRatio = _internals.set2DTransformRatio = function(v) {
+                var t = this.data, //refers to the element's _gsTransform object
+                    targ = this.t,
+                    style = targ.style,
+                    ang, skew, rnd, sx, sy;
+                if (t.rotationX || t.rotationY || t.z || t.force3D === true || (t.force3D === "auto" && v !== 1 && v !== 0)) { //if a 3D tween begins while a 2D one is running, we need to kick the rendering over to the 3D method. For example, imagine a yoyo-ing, infinitely repeating scale tween running, and then the object gets rotated in 3D space with a different tween.
+                    this.setRatio = _set3DTransformRatio;
+                    _set3DTransformRatio.call(this, v);
+                    return;
+                }
+                if (!t.rotation && !t.skewX) {
+                    style[_transformProp] = "matrix(" + t.scaleX + ",0,0," + t.scaleY + "," + t.x + "," + t.y + ")";
+                } else {
+                    ang = t.rotation * _DEG2RAD;
+                    skew = ang - t.skewX * _DEG2RAD;
+                    rnd = 100000;
+                    sx = t.scaleX * rnd;
+                    sy = t.scaleY * rnd;
+                    //some browsers have a hard time with very small values like 2.4492935982947064e-16 (notice the "e-" towards the end) and would render the object slightly off. So we round to 5 decimal places.
+                    style[_transformProp] = "matrix(" + (((Math.cos(ang) * sx) | 0) / rnd) + "," + (((Math.sin(ang) * sx) | 0) / rnd) + "," + (((Math.sin(skew) * -sy) | 0) / rnd) + "," + (((Math.cos(skew) * sy) | 0) / rnd) + "," + t.x + "," + t.y + ")";
+                }
+            };
+
+        _registerComplexSpecialProp("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType", {parser:function(t, e, p, cssp, pt, plugin, vars) {
+            if (cssp._transform) { return pt; } //only need to parse the transform once, and only if the browser supports it.
+            var m1 = cssp._transform = _getTransform(t, _cs, true, vars.parseTransform),
+                style = t.style,
+                min = 0.000001,
+                i = _transformProps.length,
+                v = vars,
+                endRotations = {},
+                m2, skewY, copy, orig, has3D, hasChange, dr;
+            if (typeof(v.transform) === "string" && _transformProp) { //for values like transform:"rotate(60deg) scale(0.5, 0.8)"
+                copy = _tempDiv.style; //don't use the original target because it might be SVG in which case some browsers don't report computed style correctly.
+                copy[_transformProp] = v.transform;
+                copy.display = "block"; //if display is "none", the browser often refuses to report the transform properties correctly.
+                copy.position = "absolute";
+                _doc.body.appendChild(_tempDiv);
+                m2 = _getTransform(_tempDiv, null, false);
+                _doc.body.removeChild(_tempDiv);
+            } else if (typeof(v) === "object") { //for values like scaleX, scaleY, rotation, x, y, skewX, and skewY or transform:{...} (object)
+                m2 = {scaleX:_parseVal((v.scaleX != null) ? v.scaleX : v.scale, m1.scaleX),
+                    scaleY:_parseVal((v.scaleY != null) ? v.scaleY : v.scale, m1.scaleY),
+                    scaleZ:_parseVal(v.scaleZ, m1.scaleZ),
+                    x:_parseVal(v.x, m1.x),
+                    y:_parseVal(v.y, m1.y),
+                    z:_parseVal(v.z, m1.z),
+                    perspective:_parseVal(v.transformPerspective, m1.perspective)};
+                dr = v.directionalRotation;
+                if (dr != null) {
+                    if (typeof(dr) === "object") {
+                        for (copy in dr) {
+                            v[copy] = dr[copy];
+                        }
+                    } else {
+                        v.rotation = dr;
+                    }
+                }
+                m2.rotation = _parseAngle(("rotation" in v) ? v.rotation : ("shortRotation" in v) ? v.shortRotation + "_short" : ("rotationZ" in v) ? v.rotationZ : m1.rotation, m1.rotation, "rotation", endRotations);
+                if (_supports3D) {
+                    m2.rotationX = _parseAngle(("rotationX" in v) ? v.rotationX : ("shortRotationX" in v) ? v.shortRotationX + "_short" : m1.rotationX || 0, m1.rotationX, "rotationX", endRotations);
+                    m2.rotationY = _parseAngle(("rotationY" in v) ? v.rotationY : ("shortRotationY" in v) ? v.shortRotationY + "_short" : m1.rotationY || 0, m1.rotationY, "rotationY", endRotations);
+                }
+                m2.skewX = (v.skewX == null) ? m1.skewX : _parseAngle(v.skewX, m1.skewX);
+
+                //note: for performance reasons, we combine all skewing into the skewX and rotation values, ignoring skewY but we must still record it so that we can discern how much of the overall skew is attributed to skewX vs. skewY. Otherwise, if the skewY would always act relative (tween skewY to 10deg, for example, multiple times and if we always combine things into skewX, we can't remember that skewY was 10 from last time). Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of -10 degrees.
+                m2.skewY = (v.skewY == null) ? m1.skewY : _parseAngle(v.skewY, m1.skewY);
+                if ((skewY = m2.skewY - m1.skewY)) {
+                    m2.skewX += skewY;
+                    m2.rotation += skewY;
+                }
+            }
+
+            if (_supports3D && v.force3D != null) {
+                m1.force3D = v.force3D;
+                hasChange = true;
+            }
+
+            m1.skewType = v.skewType || m1.skewType || CSSPlugin.defaultSkewType;
+
+            has3D = (m1.force3D || m1.z || m1.rotationX || m1.rotationY || m2.z || m2.rotationX || m2.rotationY || m2.perspective);
+            if (!has3D && v.scale != null) {
+                m2.scaleZ = 1; //no need to tween scaleZ.
+            }
+
+            while (--i > -1) {
+                p = _transformProps[i];
+                orig = m2[p] - m1[p];
+                if (orig > min || orig < -min || _forcePT[p] != null) {
+                    hasChange = true;
+                    pt = new CSSPropTween(m1, p, m1[p], orig, pt);
+                    if (p in endRotations) {
+                        pt.e = endRotations[p]; //directional rotations typically have compensated values during the tween, but we need to make sure they end at exactly what the user requested
+                    }
+                    pt.xs0 = 0; //ensures the value stays numeric in setRatio()
+                    pt.plugin = plugin;
+                    cssp._overwriteProps.push(pt.n);
+                }
+            }
+
+            orig = v.transformOrigin;
+            if (orig || (_supports3D && has3D && m1.zOrigin)) { //if anything 3D is happening and there's a transformOrigin with a z component that's non-zero, we must ensure that the transformOrigin's z-component is set to 0 so that we can manually do those calculations to get around Safari bugs. Even if the user didn't specifically define a "transformOrigin" in this particular tween (maybe they did it via css directly).
+                if (_transformProp) {
+                    hasChange = true;
+                    p = _transformOriginProp;
+                    orig = (orig || _getStyle(t, p, _cs, false, "50% 50%")) + ""; //cast as string to avoid errors
+                    pt = new CSSPropTween(style, p, 0, 0, pt, -1, "transformOrigin");
+                    pt.b = style[p];
+                    pt.plugin = plugin;
+                    if (_supports3D) {
+                        copy = m1.zOrigin;
+                        orig = orig.split(" ");
+                        m1.zOrigin = ((orig.length > 2 && !(copy !== 0 && orig[2] === "0px")) ? parseFloat(orig[2]) : copy) || 0; //Safari doesn't handle the z part of transformOrigin correctly, so we'll manually handle it in the _set3DTransformRatio() method.
+                        pt.xs0 = pt.e = orig[0] + " " + (orig[1] || "50%") + " 0px"; //we must define a z value of 0px specifically otherwise iOS 5 Safari will stick with the old one (if one was defined)!
+                        pt = new CSSPropTween(m1, "zOrigin", 0, 0, pt, -1, pt.n); //we must create a CSSPropTween for the _gsTransform.zOrigin so that it gets reset properly at the beginning if the tween runs backward (as opposed to just setting m1.zOrigin here)
+                        pt.b = copy;
+                        pt.xs0 = pt.e = m1.zOrigin;
+                    } else {
+                        pt.xs0 = pt.e = orig;
+                    }
+
+                //for older versions of IE (6-8), we need to manually calculate things inside the setRatio() function. We record origin x and y (ox and oy) and whether or not the values are percentages (oxp and oyp).
+                } else {
+                    _parsePosition(orig + "", m1);
+                }
+            }
+
+            if (hasChange) {
+                cssp._transformType = (has3D || this._transformType === 3) ? 3 : 2; //quicker than calling cssp._enableTransforms();
+            }
+            return pt;
+        }, prefix:true});
+
+        _registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"});
+
+        _registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) {
+            e = this.format(e);
+            var props = ["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"],
+                style = t.style,
+                ea1, i, es2, bs2, bs, es, bn, en, w, h, esfx, bsfx, rel, hn, vn, em;
+            w = parseFloat(t.offsetWidth);
+            h = parseFloat(t.offsetHeight);
+            ea1 = e.split(" ");
+            for (i = 0; i < props.length; i++) { //if we're dealing with percentages, we must convert things separately for the horizontal and vertical axis!
+                if (this.p.indexOf("border")) { //older browsers used a prefix
+                    props[i] = _checkPropPrefix(props[i]);
+                }
+                bs = bs2 = _getStyle(t, props[i], _cs, false, "0px");
+                if (bs.indexOf(" ") !== -1) {
+                    bs2 = bs.split(" ");
+                    bs = bs2[0];
+                    bs2 = bs2[1];
+                }
+                es = es2 = ea1[i];
+                bn = parseFloat(bs);
+                bsfx = bs.substr((bn + "").length);
+                rel = (es.charAt(1) === "=");
+                if (rel) {
+                    en = parseInt(es.charAt(0)+"1", 10);
+                    es = es.substr(2);
+                    en *= parseFloat(es);
+                    esfx = es.substr((en + "").length - (en < 0 ? 1 : 0)) || "";
+                } else {
+                    en = parseFloat(es);
+                    esfx = es.substr((en + "").length);
+                }
+                if (esfx === "") {
+                    esfx = _suffixMap[p] || bsfx;
+                }
+                if (esfx !== bsfx) {
+                    hn = _convertToPixels(t, "borderLeft", bn, bsfx); //horizontal number (we use a bogus "borderLeft" property just because the _convertToPixels() method searches for the keywords "Left", "Right", "Top", and "Bottom" to determine of it's a horizontal or vertical property, and we need "border" in the name so that it knows it should measure relative to the element itself, not its parent.
+                    vn = _convertToPixels(t, "borderTop", bn, bsfx); //vertical number
+                    if (esfx === "%") {
+                        bs = (hn / w * 100) + "%";
+                        bs2 = (vn / h * 100) + "%";
+                    } else if (esfx === "em") {
+                        em = _convertToPixels(t, "borderLeft", 1, "em");
+                        bs = (hn / em) + "em";
+                        bs2 = (vn / em) + "em";
+                    } else {
+                        bs = hn + "px";
+                        bs2 = vn + "px";
+                    }
+                    if (rel) {
+                        es = (parseFloat(bs) + en) + esfx;
+                        es2 = (parseFloat(bs2) + en) + esfx;
+                    }
+                }
+                pt = _parseComplex(style, props[i], bs + " " + bs2, es + " " + es2, false, "0px", pt);
+            }
+            return pt;
+        }, prefix:true, formatter:_getFormatter("0px 0px 0px 0px", false, true)});
+        _registerComplexSpecialProp("backgroundPosition", {defaultValue:"0 0", parser:function(t, e, p, cssp, pt, plugin) {
+            var bp = "background-position",
+                cs = (_cs || _getComputedStyle(t, null)),
+                bs = this.format( ((cs) ? _ieVers ? cs.getPropertyValue(bp + "-x") + " " + cs.getPropertyValue(bp + "-y") : cs.getPropertyValue(bp) : t.currentStyle.backgroundPositionX + " " + t.currentStyle.backgroundPositionY) || "0 0"), //Internet Explorer doesn't report background-position correctly - we must query background-position-x and background-position-y and combine them (even in IE10). Before IE9, we must do the same with the currentStyle object and use camelCase
+                es = this.format(e),
+                ba, ea, i, pct, overlap, src;
+            if ((bs.indexOf("%") !== -1) !== (es.indexOf("%") !== -1)) {
+                src = _getStyle(t, "backgroundImage").replace(_urlExp, "");
+                if (src && src !== "none") {
+                    ba = bs.split(" ");
+                    ea = es.split(" ");
+                    _tempImg.setAttribute("src", src); //set the temp <img>'s src to the background-image so that we can measure its width/height
+                    i = 2;
+                    while (--i > -1) {
+                        bs = ba[i];
+                        pct = (bs.indexOf("%") !== -1);
+                        if (pct !== (ea[i].indexOf("%") !== -1)) {
+                            overlap = (i === 0) ? t.offsetWidth - _tempImg.width : t.offsetHeight - _tempImg.height;
+                            ba[i] = pct ? (parseFloat(bs) / 100 * overlap) + "px" : (parseFloat(bs) / overlap * 100) + "%";
+                        }
+                    }
+                    bs = ba.join(" ");
+                }
+            }
+            return this.parseComplex(t.style, bs, es, pt, plugin);
+        }, formatter:_parsePosition});
+        _registerComplexSpecialProp("backgroundSize", {defaultValue:"0 0", formatter:_parsePosition});
+        _registerComplexSpecialProp("perspective", {defaultValue:"0px", prefix:true});
+        _registerComplexSpecialProp("perspectiveOrigin", {defaultValue:"50% 50%", prefix:true});
+        _registerComplexSpecialProp("transformStyle", {prefix:true});
+        _registerComplexSpecialProp("backfaceVisibility", {prefix:true});
+        _registerComplexSpecialProp("userSelect", {prefix:true});
+        _registerComplexSpecialProp("margin", {parser:_getEdgeParser("marginTop,marginRight,marginBottom,marginLeft")});
+        _registerComplexSpecialProp("padding", {parser:_getEdgeParser("paddingTop,paddingRight,paddingBottom,paddingLeft")});
+        _registerComplexSpecialProp("clip", {defaultValue:"rect(0px,0px,0px,0px)", parser:function(t, e, p, cssp, pt, plugin){
+            var b, cs, delim;
+            if (_ieVers < 9) { //IE8 and earlier don't report a "clip" value in the currentStyle - instead, the values are split apart into clipTop, clipRight, clipBottom, and clipLeft. Also, in IE7 and earlier, the values inside rect() are space-delimited, not comma-delimited.
+                cs = t.currentStyle;
+                delim = _ieVers < 8 ? " " : ",";
+                b = "rect(" + cs.clipTop + delim + cs.clipRight + delim + cs.clipBottom + delim + cs.clipLeft + ")";
+                e = this.format(e).split(",").join(delim);
+            } else {
+                b = this.format(_getStyle(t, this.p, _cs, false, this.dflt));
+                e = this.format(e);
+            }
+            return this.parseComplex(t.style, b, e, pt, plugin);
+        }});
+        _registerComplexSpecialProp("textShadow", {defaultValue:"0px 0px 0px #999", color:true, multi:true});
+        _registerComplexSpecialProp("autoRound,strictUnits", {parser:function(t, e, p, cssp, pt) {return pt;}}); //just so that we can ignore these properties (not tween them)
+        _registerComplexSpecialProp("border", {defaultValue:"0px solid #000", parser:function(t, e, p, cssp, pt, plugin) {
+                return this.parseComplex(t.style, this.format(_getStyle(t, "borderTopWidth", _cs, false, "0px") + " " + _getStyle(t, "borderTopStyle", _cs, false, "solid") + " " + _getStyle(t, "borderTopColor", _cs, false, "#000")), this.format(e), pt, plugin);
+            }, color:true, formatter:function(v) {
+                var a = v.split(" ");
+                return a[0] + " " + (a[1] || "solid") + " " + (v.match(_colorExp) || ["#000"])[0];
+            }});
+        _registerComplexSpecialProp("borderWidth", {parser:_getEdgeParser("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")}); //Firefox doesn't pick up on borderWidth set in style sheets (only inline).
+        _registerComplexSpecialProp("float,cssFloat,styleFloat", {parser:function(t, e, p, cssp, pt, plugin) {
+            var s = t.style,
+                prop = ("cssFloat" in s) ? "cssFloat" : "styleFloat";
+            return new CSSPropTween(s, prop, 0, 0, pt, -1, p, false, 0, s[prop], e);
+        }});
+
+        //opacity-related
+        var _setIEOpacityRatio = function(v) {
+                var t = this.t, //refers to the element's style property
+                    filters = t.filter || _getStyle(this.data, "filter"),
+                    val = (this.s + this.c * v) | 0,
+                    skip;
+                if (val === 100) { //for older versions of IE that need to use a filter to apply opacity, we should remove the filter if opacity hits 1 in order to improve performance, but make sure there isn't a transform (matrix) or gradient in the filters.
+                    if (filters.indexOf("atrix(") === -1 && filters.indexOf("radient(") === -1 && filters.indexOf("oader(") === -1) {
+                        t.removeAttribute("filter");
+                        skip = (!_getStyle(this.data, "filter")); //if a class is applied that has an alpha filter, it will take effect (we don't want that), so re-apply our alpha filter in that case. We must first remove it and then check.
+                    } else {
+                        t.filter = filters.replace(_alphaFilterExp, "");
+                        skip = true;
+                    }
+                }
+                if (!skip) {
+                    if (this.xn1) {
+                        t.filter = filters = filters || ("alpha(opacity=" + val + ")"); //works around bug in IE7/8 that prevents changes to "visibility" from being applied properly if the filter is changed to a different alpha on the same frame.
+                    }
+                    if (filters.indexOf("pacity") === -1) { //only used if browser doesn't support the standard opacity style property (IE 7 and 8). We omit the "O" to avoid case-sensitivity issues
+                        if (val !== 0 || !this.xn1) { //bugs in IE7/8 won't render the filter properly if opacity is ADDED on the same frame/render as "visibility" changes (this.xn1 is 1 if this tween is an "autoAlpha" tween)
+                            t.filter = filters + " alpha(opacity=" + val + ")"; //we round the value because otherwise, bugs in IE7/8 can prevent "visibility" changes from being applied properly.
+                        }
+                    } else {
+                        t.filter = filters.replace(_opacityExp, "opacity=" + val);
+                    }
+                }
+            };
+        _registerComplexSpecialProp("opacity,alpha,autoAlpha", {defaultValue:"1", parser:function(t, e, p, cssp, pt, plugin) {
+            var b = parseFloat(_getStyle(t, "opacity", _cs, false, "1")),
+                style = t.style,
+                isAutoAlpha = (p === "autoAlpha");
+            if (typeof(e) === "string" && e.charAt(1) === "=") {
+                e = ((e.charAt(0) === "-") ? -1 : 1) * parseFloat(e.substr(2)) + b;
+            }
+            if (isAutoAlpha && b === 1 && _getStyle(t, "visibility", _cs) === "hidden" && e !== 0) { //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience)
+                b = 0;
+            }
+            if (_supportsOpacity) {
+                pt = new CSSPropTween(style, "opacity", b, e - b, pt);
+            } else {
+                pt = new CSSPropTween(style, "opacity", b * 100, (e - b) * 100, pt);
+                pt.xn1 = isAutoAlpha ? 1 : 0; //we need to record whether or not this is an autoAlpha so that in the setRatio(), we know to duplicate the setting of the alpha in order to work around a bug in IE7 and IE8 that prevents changes to "visibility" from taking effect if the filter is changed to a different alpha(opacity) at the same time. Setting it to the SAME value first, then the new value works around the IE7/8 bug.
+                style.zoom = 1; //helps correct an IE issue.
+                pt.type = 2;
+                pt.b = "alpha(opacity=" + pt.s + ")";
+                pt.e = "alpha(opacity=" + (pt.s + pt.c) + ")";
+                pt.data = t;
+                pt.plugin = plugin;
+                pt.setRatio = _setIEOpacityRatio;
+            }
+            if (isAutoAlpha) { //we have to create the "visibility" PropTween after the opacity one in the linked list so that they run in the order that works properly in IE8 and earlier
+                pt = new CSSPropTween(style, "visibility", 0, 0, pt, -1, null, false, 0, ((b !== 0) ? "inherit" : "hidden"), ((e === 0) ? "hidden" : "inherit"));
+                pt.xs0 = "inherit";
+                cssp._overwriteProps.push(pt.n);
+                cssp._overwriteProps.push(p);
+            }
+            return pt;
+        }});
+
+
+        var _removeProp = function(s, p) {
+                if (p) {
+                    if (s.removeProperty) {
+                        if (p.substr(0,2) === "ms") { //Microsoft browsers don't conform to the standard of capping the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example)
+                            p = "M" + p.substr(1);
+                        }
+                        s.removeProperty(p.replace(_capsExp, "-$1").toLowerCase());
+                    } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()"
+                        s.removeAttribute(p);
+                    }
+                }
+            },
+            _setClassNameRatio = function(v) {
+                this.t._gsClassPT = this;
+                if (v === 1 || v === 0) {
+                    this.t.setAttribute("class", (v === 0) ? this.b : this.e);
+                    var mpt = this.data, //first MiniPropTween
+                        s = this.t.style;
+                    while (mpt) {
+                        if (!mpt.v) {
+                            _removeProp(s, mpt.p);
+                        } else {
+                            s[mpt.p] = mpt.v;
+                        }
+                        mpt = mpt._next;
+                    }
+                    if (v === 1 && this.t._gsClassPT === this) {
+                        this.t._gsClassPT = null;
+                    }
+                } else if (this.t.getAttribute("class") !== this.e) {
+                    this.t.setAttribute("class", this.e);
+                }
+            };
+        _registerComplexSpecialProp("className", {parser:function(t, e, p, cssp, pt, plugin, vars) {
+            var b = t.getAttribute("class") || "", //don't use t.className because it doesn't work consistently on SVG elements; getAttribute("class") and setAttribute("class", value") is more reliable.
+                cssText = t.style.cssText,
+                difData, bs, cnpt, cnptLookup, mpt;
+            pt = cssp._classNamePT = new CSSPropTween(t, p, 0, 0, pt, 2);
+            pt.setRatio = _setClassNameRatio;
+            pt.pr = -11;
+            _hasPriority = true;
+            pt.b = b;
+            bs = _getAllStyles(t, _cs);
+            //if there's a className tween already operating on the target, force it to its end so that the necessary inline styles are removed and the class name is applied before we determine the end state (we don't want inline styles interfering that were there just for class-specific values)
+            cnpt = t._gsClassPT;
+            if (cnpt) {
+                cnptLookup = {};
+                mpt = cnpt.data; //first MiniPropTween which stores the inline styles - we need to force these so that the inline styles don't contaminate things. Otherwise, there's a small chance that a tween could start and the inline values match the destination values and they never get cleaned.
+                while (mpt) {
+                    cnptLookup[mpt.p] = 1;
+                    mpt = mpt._next;
+                }
+                cnpt.setRatio(1);
+            }
+            t._gsClassPT = pt;
+            pt.e = (e.charAt(1) !== "=") ? e : b.replace(new RegExp("\\s*\\b" + e.substr(2) + "\\b"), "") + ((e.charAt(0) === "+") ? " " + e.substr(2) : "");
+            if (cssp._tween._duration) { //if it's a zero-duration tween, there's no need to tween anything or parse the data. In fact, if we switch classes temporarily (which we must do for proper parsing) and the class has a transition applied, it could cause a quick flash to the end state and back again initially in some browsers.
+                t.setAttribute("class", pt.e);
+                difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup);
+                t.setAttribute("class", b);
+                pt.data = difData.firstMPT;
+                t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+                pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself)
+            }
+            return pt;
+        }});
+
+
+        var _setClearPropsRatio = function(v) {
+            if (v === 1 || v === 0) if (this.data._totalTime === this.data._totalDuration && this.data.data !== "isFromStart") { //this.data refers to the tween. Only clear at the END of the tween (remember, from() tweens make the ratio go from 1 to 0, so we can't just check that and if the tween is the zero-duration one that's created internally to render the starting values in a from() tween, ignore that because otherwise, for example, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in).
+                var s = this.t.style,
+                    transformParse = _specialProps.transform.parse,
+                    a, p, i, clearTransform;
+                if (this.e === "all") {
+                    s.cssText = "";
+                    clearTransform = true;
+                } else {
+                    a = this.e.split(",");
+                    i = a.length;
+                    while (--i > -1) {
+                        p = a[i];
+                        if (_specialProps[p]) {
+                            if (_specialProps[p].parse === transformParse) {
+                                clearTransform = true;
+                            } else {
+                                p = (p === "transformOrigin") ? _transformOriginProp : _specialProps[p].p; //ensures that special properties use the proper browser-specific property name, like "scaleX" might be "-webkit-transform" or "boxShadow" might be "-moz-box-shadow"
+                            }
+                        }
+                        _removeProp(s, p);
+                    }
+                }
+                if (clearTransform) {
+                    _removeProp(s, _transformProp);
+                    if (this.t._gsTransform) {
+                        delete this.t._gsTransform;
+                    }
+                }
+
+            }
+        };
+        _registerComplexSpecialProp("clearProps", {parser:function(t, e, p, cssp, pt) {
+            pt = new CSSPropTween(t, p, 0, 0, pt, 2);
+            pt.setRatio = _setClearPropsRatio;
+            pt.e = e;
+            pt.pr = -10;
+            pt.data = cssp._tween;
+            _hasPriority = true;
+            return pt;
+        }});
+
+        p = "bezier,throwProps,physicsProps,physics2D".split(",");
+        i = p.length;
+        while (i--) {
+            _registerPluginProp(p[i]);
+        }
+
+
+
+
+
+
+
+
+        p = CSSPlugin.prototype;
+        p._firstPT = null;
+
+        //gets called when the tween renders for the first time. This kicks everything off, recording start/end values, etc.
+        p._onInitTween = function(target, vars, tween) {
+            if (!target.nodeType) { //css is only for dom elements
+                return false;
+            }
+            this._target = target;
+            this._tween = tween;
+            this._vars = vars;
+            _autoRound = vars.autoRound;
+            _hasPriority = false;
+            _suffixMap = vars.suffixMap || CSSPlugin.suffixMap;
+            _cs = _getComputedStyle(target, "");
+            _overwriteProps = this._overwriteProps;
+            var style = target.style,
+                v, pt, pt2, first, last, next, zIndex, tpt, threeD;
+            if (_reqSafariFix) if (style.zIndex === "") {
+                v = _getStyle(target, "zIndex", _cs);
+                if (v === "auto" || v === "") {
+                    //corrects a bug in [non-Android] Safari that prevents it from repainting elements in their new positions if they don't have a zIndex set. We also can't just apply this inside _parseTransform() because anything that's moved in any way (like using "left" or "top" instead of transforms like "x" and "y") can be affected, so it is best to ensure that anything that's tweening has a z-index. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. Plus zIndex is less memory-intensive.
+                    this._addLazySet(style, "zIndex", 0);
+                }
+            }
+
+            if (typeof(vars) === "string") {
+                first = style.cssText;
+                v = _getAllStyles(target, _cs);
+                style.cssText = first + ";" + vars;
+                v = _cssDif(target, v, _getAllStyles(target)).difs;
+                if (!_supportsOpacity && _opacityValExp.test(vars)) {
+                    v.opacity = parseFloat( RegExp.$1 );
+                }
+                vars = v;
+                style.cssText = first;
+            }
+            this._firstPT = pt = this.parse(target, vars, null);
+
+            if (this._transformType) {
+                threeD = (this._transformType === 3);
+                if (!_transformProp) {
+                    style.zoom = 1; //helps correct an IE issue.
+                } else if (_isSafari) {
+                    _reqSafariFix = true;
+                    //if zIndex isn't set, iOS Safari doesn't repaint things correctly sometimes (seemingly at random).
+                    if (style.zIndex === "") {
+                        zIndex = _getStyle(target, "zIndex", _cs);
+                        if (zIndex === "auto" || zIndex === "") {
+                            this._addLazySet(style, "zIndex", 0);
+                        }
+                    }
+                    //Setting WebkitBackfaceVisibility corrects 3 bugs:
+                    // 1) [non-Android] Safari skips rendering changes to "top" and "left" that are made on the same frame/render as a transform update.
+                    // 2) iOS Safari sometimes neglects to repaint elements in their new positions. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly.
+                    // 3) Safari sometimes displayed odd artifacts when tweening the transform (or WebkitTransform) property, like ghosts of the edges of the element remained. Definitely a browser bug.
+                    //Note: we allow the user to override the auto-setting by defining WebkitBackfaceVisibility in the vars of the tween.
+                    if (_isSafariLT6) {
+                        this._addLazySet(style, "WebkitBackfaceVisibility", this._vars.WebkitBackfaceVisibility || (threeD ? "visible" : "hidden"));
+                    }
+                }
+                pt2 = pt;
+                while (pt2 && pt2._next) {
+                    pt2 = pt2._next;
+                }
+                tpt = new CSSPropTween(target, "transform", 0, 0, null, 2);
+                this._linkCSSP(tpt, null, pt2);
+                tpt.setRatio = (threeD && _supports3D) ? _set3DTransformRatio : _transformProp ? _set2DTransformRatio : _setIETransformRatio;
+                tpt.data = this._transform || _getTransform(target, _cs, true);
+                _overwriteProps.pop(); //we don't want to force the overwrite of all "transform" tweens of the target - we only care about individual transform properties like scaleX, rotation, etc. The CSSPropTween constructor automatically adds the property to _overwriteProps which is why we need to pop() here.
+            }
+
+            if (_hasPriority) {
+                //reorders the linked list in order of pr (priority)
+                while (pt) {
+                    next = pt._next;
+                    pt2 = first;
+                    while (pt2 && pt2.pr > pt.pr) {
+                        pt2 = pt2._next;
+                    }
+                    if ((pt._prev = pt2 ? pt2._prev : last)) {
+                        pt._prev._next = pt;
+                    } else {
+                        first = pt;
+                    }
+                    if ((pt._next = pt2)) {
+                        pt2._prev = pt;
+                    } else {
+                        last = pt;
+                    }
+                    pt = next;
+                }
+                this._firstPT = first;
+            }
+            return true;
+        };
+
+
+        p.parse = function(target, vars, pt, plugin) {
+            var style = target.style,
+                p, sp, bn, en, bs, es, bsfx, esfx, isStr, rel;
+            for (p in vars) {
+                es = vars[p]; //ending value string
+                sp = _specialProps[p]; //SpecialProp lookup.
+                if (sp) {
+                    pt = sp.parse(target, es, p, this, pt, plugin, vars);
+
+                } else {
+                    bs = _getStyle(target, p, _cs) + "";
+                    isStr = (typeof(es) === "string");
+                    if (p === "color" || p === "fill" || p === "stroke" || p.indexOf("Color") !== -1 || (isStr && _rgbhslExp.test(es))) { //Opera uses background: to define color sometimes in addition to backgroundColor:
+                        if (!isStr) {
+                            es = _parseColor(es);
+                            es = ((es.length > 3) ? "rgba(" : "rgb(") + es.join(",") + ")";
+                        }
+                        pt = _parseComplex(style, p, bs, es, true, "transparent", pt, 0, plugin);
+
+                    } else if (isStr && (es.indexOf(" ") !== -1 || es.indexOf(",") !== -1)) {
+                        pt = _parseComplex(style, p, bs, es, true, null, pt, 0, plugin);
+
+                    } else {
+                        bn = parseFloat(bs);
+                        bsfx = (bn || bn === 0) ? bs.substr((bn + "").length) : ""; //remember, bs could be non-numeric like "normal" for fontWeight, so we should default to a blank suffix in that case.
+
+                        if (bs === "" || bs === "auto") {
+                            if (p === "width" || p === "height") {
+                                bn = _getDimension(target, p, _cs);
+                                bsfx = "px";
+                            } else if (p === "left" || p === "top") {
+                                bn = _calculateOffset(target, p, _cs);
+                                bsfx = "px";
+                            } else {
+                                bn = (p !== "opacity") ? 0 : 1;
+                                bsfx = "";
+                            }
+                        }
+
+                        rel = (isStr && es.charAt(1) === "=");
+                        if (rel) {
+                            en = parseInt(es.charAt(0) + "1", 10);
+                            es = es.substr(2);
+                            en *= parseFloat(es);
+                            esfx = es.replace(_suffixExp, "");
+                        } else {
+                            en = parseFloat(es);
+                            esfx = isStr ? es.substr((en + "").length) || "" : "";
+                        }
+
+                        if (esfx === "") {
+                            esfx = (p in _suffixMap) ? _suffixMap[p] : bsfx; //populate the end suffix, prioritizing the map, then if none is found, use the beginning suffix.
+                        }
+
+                        es = (en || en === 0) ? (rel ? en + bn : en) + esfx : vars[p]; //ensures that any += or -= prefixes are taken care of. Record the end value before normalizing the suffix because we always want to end the tween on exactly what they intended even if it doesn't match the beginning value's suffix.
+
+                        //if the beginning/ending suffixes don't match, normalize them...
+                        if (bsfx !== esfx) if (esfx !== "") if (en || en === 0) if (bn) { //note: if the beginning value (bn) is 0, we don't need to convert units!
+                            bn = _convertToPixels(target, p, bn, bsfx);
+                            if (esfx === "%") {
+                                bn /= _convertToPixels(target, p, 100, "%") / 100;
+                                if (vars.strictUnits !== true) { //some browsers report only "px" values instead of allowing "%" with getComputedStyle(), so we assume that if we're tweening to a %, we should start there too unless strictUnits:true is defined. This approach is particularly useful for responsive designs that use from() tweens.
+                                    bs = bn + "%";
+                                }
+
+                            } else if (esfx === "em") {
+                                bn /= _convertToPixels(target, p, 1, "em");
+
+                            //otherwise convert to pixels.
+                            } else if (esfx !== "px") {
+                                en = _convertToPixels(target, p, en, esfx);
+                                esfx = "px"; //we don't use bsfx after this, so we don't need to set it to px too.
+                            }
+                            if (rel) if (en || en === 0) {
+                                es = (en + bn) + esfx; //the changes we made affect relative calculations, so adjust the end value here.
+                            }
+                        }
+
+                        if (rel) {
+                            en += bn;
+                        }
+
+                        if ((bn || bn === 0) && (en || en === 0)) { //faster than isNaN(). Also, previously we required en !== bn but that doesn't really gain much performance and it prevents _parseToProxy() from working properly if beginning and ending values match but need to get tweened by an external plugin anyway. For example, a bezier tween where the target starts at left:0 and has these points: [{left:50},{left:0}] wouldn't work properly because when parsing the last point, it'd match the first (current) one and a non-tweening CSSPropTween would be recorded when we actually need a normal tween (type:0) so that things get updated during the tween properly.
+                            pt = new CSSPropTween(style, p, bn, en - bn, pt, 0, p, (_autoRound !== false && (esfx === "px" || p === "zIndex")), 0, bs, es);
+                            pt.xs0 = esfx;
+                            //DEBUG: _log("tween "+p+" from "+pt.b+" ("+bn+esfx+") to "+pt.e+" with suffix: "+pt.xs0);
+                        } else if (style[p] === undefined || !es && (es + "" === "NaN" || es == null)) {
+                            _log("invalid " + p + " tween value: " + vars[p]);
+                        } else {
+                            pt = new CSSPropTween(style, p, en || bn || 0, 0, pt, -1, p, false, 0, bs, es);
+                            pt.xs0 = (es === "none" && (p === "display" || p.indexOf("Style") !== -1)) ? bs : es; //intermediate value should typically be set immediately (end value) except for "display" or things like borderTopStyle, borderBottomStyle, etc. which should use the beginning value during the tween.
+                            //DEBUG: _log("non-tweening value "+p+": "+pt.xs0);
+                        }
+                    }
+                }
+                if (plugin) if (pt && !pt.plugin) {
+                    pt.plugin = plugin;
+                }
+            }
+            return pt;
+        };
+
+
+        //gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1.
+        p.setRatio = function(v) {
+            var pt = this._firstPT,
+                min = 0.000001,
+                val, str, i;
+
+            //at the end of the tween, we set the values to exactly what we received in order to make sure non-tweening values (like "position" or "float" or whatever) are set and so that if the beginning/ending suffixes (units) didn't match and we normalized to px, the value that the user passed in is used here. We check to see if the tween is at its beginning in case it's a from() tween in which case the ratio will actually go from 1 to 0 over the course of the tween (backwards).
+            if (v === 1 && (this._tween._time === this._tween._duration || this._tween._time === 0)) {
+                while (pt) {
+                    if (pt.type !== 2) {
+                        pt.t[pt.p] = pt.e;
+                    } else {
+                        pt.setRatio(v);
+                    }
+                    pt = pt._next;
+                }
+
+            } else if (v || !(this._tween._time === this._tween._duration || this._tween._time === 0) || this._tween._rawPrevTime === -0.000001) {
+                while (pt) {
+                    val = pt.c * v + pt.s;
+                    if (pt.r) {
+                        val = Math.round(val);
+                    } else if (val < min) if (val > -min) {
+                        val = 0;
+                    }
+                    if (!pt.type) {
+                        pt.t[pt.p] = val + pt.xs0;
+                    } else if (pt.type === 1) { //complex value (one that typically has multiple numbers inside a string, like "rect(5px,10px,20px,25px)"
+                        i = pt.l;
+                        if (i === 2) {
+                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2;
+                        } else if (i === 3) {
+                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3;
+                        } else if (i === 4) {
+                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4;
+                        } else if (i === 5) {
+                            pt.t[pt.p] = pt.xs0 + val + pt.xs1 + pt.xn1 + pt.xs2 + pt.xn2 + pt.xs3 + pt.xn3 + pt.xs4 + pt.xn4 + pt.xs5;
+                        } else {
+                            str = pt.xs0 + val + pt.xs1;
+                            for (i = 1; i < pt.l; i++) {
+                                str += pt["xn"+i] + pt["xs"+(i+1)];
+                            }
+                            pt.t[pt.p] = str;
+                        }
+
+                    } else if (pt.type === -1) { //non-tweening value
+                        pt.t[pt.p] = pt.xs0;
+
+                    } else if (pt.setRatio) { //custom setRatio() for things like SpecialProps, external plugins, etc.
+                        pt.setRatio(v);
+                    }
+                    pt = pt._next;
+                }
+
+            //if the tween is reversed all the way back to the beginning, we need to restore the original values which may have different units (like % instead of px or em or whatever).
+            } else {
+                while (pt) {
+                    if (pt.type !== 2) {
+                        pt.t[pt.p] = pt.b;
+                    } else {
+                        pt.setRatio(v);
+                    }
+                    pt = pt._next;
+                }
+            }
+        };
+
+        /**
+         * @private
+         * Forces rendering of the target's transforms (rotation, scale, etc.) whenever the CSSPlugin's setRatio() is called.
+         * Basically, this tells the CSSPlugin to create a CSSPropTween (type 2) after instantiation that runs last in the linked
+         * list and calls the appropriate (3D or 2D) rendering function. We separate this into its own method so that we can call
+         * it from other plugins like BezierPlugin if, for example, it needs to apply an autoRotation and this CSSPlugin
+         * doesn't have any transform-related properties of its own. You can call this method as many times as you
+         * want and it won't create duplicate CSSPropTweens.
+         *
+         * @param {boolean} threeD if true, it should apply 3D tweens (otherwise, just 2D ones are fine and typically faster)
+         */
+        p._enableTransforms = function(threeD) {
+            this._transformType = (threeD || this._transformType === 3) ? 3 : 2;
+            this._transform = this._transform || _getTransform(this._target, _cs, true); //ensures that the element has a _gsTransform property with the appropriate values.
+        };
+
+        var lazySet = function(v) {
+            this.t[this.p] = this.e;
+            this.data._linkCSSP(this, this._next, null, true); //we purposefully keep this._next even though it'd make sense to null it, but this is a performance optimization, as this happens during the while (pt) {} loop in setRatio() at the bottom of which it sets pt = pt._next, so if we null it, the linked list will be broken in that loop.
+        };
+        /** @private Gives us a way to set a value on the first render (and only the first render). **/
+        p._addLazySet = function(t, p, v) {
+            var pt = this._firstPT = new CSSPropTween(t, p, 0, 0, this._firstPT, 2);
+            pt.e = v;
+            pt.setRatio = lazySet;
+            pt.data = this;
+        };
+
+        /** @private **/
+        p._linkCSSP = function(pt, next, prev, remove) {
+            if (pt) {
+                if (next) {
+                    next._prev = pt;
+                }
+                if (pt._next) {
+                    pt._next._prev = pt._prev;
+                }
+                if (pt._prev) {
+                    pt._prev._next = pt._next;
+                } else if (this._firstPT === pt) {
+                    this._firstPT = pt._next;
+                    remove = true; //just to prevent resetting this._firstPT 5 lines down in case pt._next is null. (optimized for speed)
+                }
+                if (prev) {
+                    prev._next = pt;
+                } else if (!remove && this._firstPT === null) {
+                    this._firstPT = pt;
+                }
+                pt._next = next;
+                pt._prev = prev;
+            }
+            return pt;
+        };
+
+        //we need to make sure that if alpha or autoAlpha is killed, opacity is too. And autoAlpha affects the "visibility" property.
+        p._kill = function(lookup) {
+            var copy = lookup,
+                pt, p, xfirst;
+            if (lookup.autoAlpha || lookup.alpha) {
+                copy = {};
+                for (p in lookup) { //copy the lookup so that we're not changing the original which may be passed elsewhere.
+                    copy[p] = lookup[p];
+                }
+                copy.opacity = 1;
+                if (copy.autoAlpha) {
+                    copy.visibility = 1;
+                }
+            }
+            if (lookup.className && (pt = this._classNamePT)) { //for className tweens, we need to kill any associated CSSPropTweens too; a linked list starts at the className's "xfirst".
+                xfirst = pt.xfirst;
+                if (xfirst && xfirst._prev) {
+                    this._linkCSSP(xfirst._prev, pt._next, xfirst._prev._prev); //break off the prev
+                } else if (xfirst === this._firstPT) {
+                    this._firstPT = pt._next;
+                }
+                if (pt._next) {
+                    this._linkCSSP(pt._next, pt._next._next, xfirst._prev);
+                }
+                this._classNamePT = null;
+            }
+            return TweenPlugin.prototype._kill.call(this, copy);
+        };
+
+
+
+        //used by cascadeTo() for gathering all the style properties of each child element into an array for comparison.
+        var _getChildStyles = function(e, props, targets) {
+                var children, i, child, type;
+                if (e.slice) {
+                    i = e.length;
+                    while (--i > -1) {
+                        _getChildStyles(e[i], props, targets);
+                    }
+                    return;
+                }
+                children = e.childNodes;
+                i = children.length;
+                while (--i > -1) {
+                    child = children[i];
+                    type = child.type;
+                    if (child.style) {
+                        props.push(_getAllStyles(child));
+                        if (targets) {
+                            targets.push(child);
+                        }
+                    }
+                    if ((type === 1 || type === 9 || type === 11) && child.childNodes.length) {
+                        _getChildStyles(child, props, targets);
+                    }
+                }
+            };
+
+        /**
+         * Typically only useful for className tweens that may affect child elements, this method creates a TweenLite
+         * and then compares the style properties of all the target's child elements at the tween's start and end, and
+         * if any are different, it also creates tweens for those and returns an array containing ALL of the resulting
+         * tweens (so that you can easily add() them to a TimelineLite, for example). The reason this functionality is
+         * wrapped into a separate static method of CSSPlugin instead of being integrated into all regular className tweens
+         * is because it creates entirely new tweens that may have completely different targets than the original tween,
+         * so if they were all lumped into the original tween instance, it would be inconsistent with the rest of the API
+         * and it would create other problems. For example:
+         *  - If I create a tween of elementA, that tween instance may suddenly change its target to include 50 other elements (unintuitive if I specifically defined the target I wanted)
+         *  - We can't just create new independent tweens because otherwise, what happens if the original/parent tween is reversed or pause or dropped into a TimelineLite for tight control? You'd expect that tween's behavior to affect all the others.
+         *  - Analyzing every style property of every child before and after the tween is an expensive operation when there are many children, so this behavior shouldn't be imposed on all className tweens by default, especially since it's probably rare that this extra functionality is needed.
+         *
+         * @param {Object} target object to be tweened
+         * @param {number} Duration in seconds (or frames for frames-based tweens)
+         * @param {Object} Object containing the end values, like {className:"newClass", ease:Linear.easeNone}
+         * @return {Array} An array of TweenLite instances
+         */
+        CSSPlugin.cascadeTo = function(target, duration, vars) {
+            var tween = TweenLite.to(target, duration, vars),
+                results = [tween],
+                b = [],
+                e = [],
+                targets = [],
+                _reservedProps = TweenLite._internals.reservedProps,
+                i, difs, p;
+            target = tween._targets || tween.target;
+            _getChildStyles(target, b, targets);
+            tween.render(duration, true);
+            _getChildStyles(target, e);
+            tween.render(0, true);
+            tween._enabled(true);
+            i = targets.length;
+            while (--i > -1) {
+                difs = _cssDif(targets[i], b[i], e[i]);
+                if (difs.firstMPT) {
+                    difs = difs.difs;
+                    for (p in vars) {
+                        if (_reservedProps[p]) {
+                            difs[p] = vars[p];
+                        }
+                    }
+                    results.push( TweenLite.to(targets[i], duration, difs) );
+                }
+            }
+            return results;
+        };
+
+        TweenPlugin.activate([CSSPlugin]);
+        return CSSPlugin;
+
+    }, true);
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+/*
+ * ----------------------------------------------------------------
+ * RoundPropsPlugin
+ * ----------------------------------------------------------------
+ */
+    (function() {
+
+        var RoundPropsPlugin = window._gsDefine.plugin({
+                propName: "roundProps",
+                priority: -1,
+                API: 2,
+
+                //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
+                init: function(target, value, tween) {
+                    this._tween = tween;
+                    return true;
+                }
+
+            }),
+            p = RoundPropsPlugin.prototype;
+
+        p._onInitAllProps = function() {
+            var tween = this._tween,
+                rp = (tween.vars.roundProps instanceof Array) ? tween.vars.roundProps : tween.vars.roundProps.split(","),
+                i = rp.length,
+                lookup = {},
+                rpt = tween._propLookup.roundProps,
+                prop, pt, next;
+            while (--i > -1) {
+                lookup[rp[i]] = 1;
+            }
+            i = rp.length;
+            while (--i > -1) {
+                prop = rp[i];
+                pt = tween._firstPT;
+                while (pt) {
+                    next = pt._next; //record here, because it may get removed
+                    if (pt.pg) {
+                        pt.t._roundProps(lookup, true);
+                    } else if (pt.n === prop) {
+                        this._add(pt.t, prop, pt.s, pt.c);
+                        //remove from linked list
+                        if (next) {
+                            next._prev = pt._prev;
+                        }
+                        if (pt._prev) {
+                            pt._prev._next = next;
+                        } else if (tween._firstPT === pt) {
+                            tween._firstPT = next;
+                        }
+                        pt._next = pt._prev = null;
+                        tween._propLookup[prop] = rpt;
+                    }
+                    pt = next;
+                }
+            }
+            return false;
+        };
+
+        p._add = function(target, p, s, c) {
+            this._addTween(target, p, s, s + c, p, true);
+            this._overwriteProps.push(p);
+        };
+
+    }());
+
+
+
+
+
+
+
+
+
+
+/*
+ * ----------------------------------------------------------------
+ * AttrPlugin
+ * ----------------------------------------------------------------
+ */
+    window._gsDefine.plugin({
+        propName: "attr",
+        API: 2,
+        version: "0.3.2",
+
+        //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
+        init: function(target, value, tween) {
+            var p, start, end;
+            if (typeof(target.setAttribute) !== "function") {
+                return false;
+            }
+            this._target = target;
+            this._proxy = {};
+            this._start = {}; // we record start and end values exactly as they are in case they're strings (not numbers) - we need to be able to revert to them cleanly.
+            this._end = {};
+            for (p in value) {
+                this._start[p] = this._proxy[p] = start = target.getAttribute(p);
+                end = this._addTween(this._proxy, p, parseFloat(start), value[p], p);
+                this._end[p] = end ? end.s + end.c : value[p];
+                this._overwriteProps.push(p);
+            }
+            return true;
+        },
+
+        //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)
+        set: function(ratio) {
+            this._super.setRatio.call(this, ratio);
+            var props = this._overwriteProps,
+                i = props.length,
+                lookup = (ratio === 1) ? this._end : ratio ? this._proxy : this._start,
+                p;
+            while (--i > -1) {
+                p = props[i];
+                this._target.setAttribute(p, lookup[p] + "");
+            }
+        }
+
+    });
+
+
+
+
+
+
+
+
+
+
+/*
+ * ----------------------------------------------------------------
+ * DirectionalRotationPlugin
+ * ----------------------------------------------------------------
+ */
+    window._gsDefine.plugin({
+        propName: "directionalRotation",
+        API: 2,
+        version: "0.2.0",
+
+        //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
+        init: function(target, value, tween) {
+            if (typeof(value) !== "object") {
+                value = {rotation:value};
+            }
+            this.finals = {};
+            var cap = (value.useRadians === true) ? Math.PI * 2 : 360,
+                min = 0.000001,
+                p, v, start, end, dif, split;
+            for (p in value) {
+                if (p !== "useRadians") {
+                    split = (value[p] + "").split("_");
+                    v = split[0];
+                    start = parseFloat( (typeof(target[p]) !== "function") ? target[p] : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]() );
+                    end = this.finals[p] = (typeof(v) === "string" && v.charAt(1) === "=") ? start + parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : Number(v) || 0;
+                    dif = end - start;
+                    if (split.length) {
+                        v = split.join("_");
+                        if (v.indexOf("short") !== -1) {
+                            dif = dif % cap;
+                            if (dif !== dif % (cap / 2)) {
+                                dif = (dif < 0) ? dif + cap : dif - cap;
+                            }
+                        }
+                        if (v.indexOf("_cw") !== -1 && dif < 0) {
+                            dif = ((dif + cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;
+                        } else if (v.indexOf("ccw") !== -1 && dif > 0) {
+                            dif = ((dif - cap * 9999999999) % cap) - ((dif / cap) | 0) * cap;
+                        }
+                    }
+                    if (dif > min || dif < -min) {
+                        this._addTween(target, p, start, start + dif, p);
+                        this._overwriteProps.push(p);
+                    }
+                }
+            }
+            return true;
+        },
+
+        //called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)
+        set: function(ratio) {
+            var pt;
+            if (ratio !== 1) {
+                this._super.setRatio.call(this, ratio);
+            } else {
+                pt = this._firstPT;
+                while (pt) {
+                    if (pt.f) {
+                        pt.t[pt.p](this.finals[pt.p]);
+                    } else {
+                        pt.t[pt.p] = this.finals[pt.p];
+                    }
+                    pt = pt._next;
+                }
+            }
+        }
+
+    })._autoCSS = true;
+
+
+
+
+
+
+
+    
+    
+    
+    
+/*
+ * ----------------------------------------------------------------
+ * EasePack
+ * ----------------------------------------------------------------
+ */
+    window._gsDefine("easing.Back", ["easing.Ease"], function(Ease) {
+        
+        var w = (window.GreenSockGlobals || window),
+            gs = w.com.greensock,
+            _2PI = Math.PI * 2,
+            _HALF_PI = Math.PI / 2,
+            _class = gs._class,
+            _create = function(n, f) {
+                var C = _class("easing." + n, function(){}, true),
+                    p = C.prototype = new Ease();
+                p.constructor = C;
+                p.getRatio = f;
+                return C;
+            },
+            _easeReg = Ease.register || function(){}, //put an empty function in place just as a safety measure in case someone loads an OLD version of TweenLite.js where Ease.register doesn't exist.
+            _wrap = function(name, EaseOut, EaseIn, EaseInOut, aliases) {
+                var C = _class("easing."+name, {
+                    easeOut:new EaseOut(),
+                    easeIn:new EaseIn(),
+                    easeInOut:new EaseInOut()
+                }, true);
+                _easeReg(C, name);
+                return C;
+            },
+            EasePoint = function(time, value, next) {
+                this.t = time;
+                this.v = value;
+                if (next) {
+                    this.next = next;
+                    next.prev = this;
+                    this.c = next.v - value;
+                    this.gap = next.t - time;
+                }
+            },
+
+            //Back
+            _createBack = function(n, f) {
+                var C = _class("easing." + n, function(overshoot) {
+                        this._p1 = (overshoot || overshoot === 0) ? overshoot : 1.70158;
+                        this._p2 = this._p1 * 1.525;
+                    }, true),
+                    p = C.prototype = new Ease();
+                p.constructor = C;
+                p.getRatio = f;
+                p.config = function(overshoot) {
+                    return new C(overshoot);
+                };
+                return C;
+            },
+
+            Back = _wrap("Back",
+                _createBack("BackOut", function(p) {
+                    return ((p = p - 1) * p * ((this._p1 + 1) * p + this._p1) + 1);
+                }),
+                _createBack("BackIn", function(p) {
+                    return p * p * ((this._p1 + 1) * p - this._p1);
+                }),
+                _createBack("BackInOut", function(p) {
+                    return ((p *= 2) < 1) ? 0.5 * p * p * ((this._p2 + 1) * p - this._p2) : 0.5 * ((p -= 2) * p * ((this._p2 + 1) * p + this._p2) + 2);
+                })
+            ),
+
+
+            //SlowMo
+            SlowMo = _class("easing.SlowMo", function(linearRatio, power, yoyoMode) {
+                power = (power || power === 0) ? power : 0.7;
+                if (linearRatio == null) {
+                    linearRatio = 0.7;
+                } else if (linearRatio > 1) {
+                    linearRatio = 1;
+                }
+                this._p = (linearRatio !== 1) ? power : 0;
+                this._p1 = (1 - linearRatio) / 2;
+                this._p2 = linearRatio;
+                this._p3 = this._p1 + this._p2;
+                this._calcEnd = (yoyoMode === true);
+            }, true),
+            p = SlowMo.prototype = new Ease(),
+            SteppedEase, RoughEase, _createElastic;
+
+        p.constructor = SlowMo;
+        p.getRatio = function(p) {
+            var r = p + (0.5 - p) * this._p;
+            if (p < this._p1) {
+                return this._calcEnd ? 1 - ((p = 1 - (p / this._p1)) * p) : r - ((p = 1 - (p / this._p1)) * p * p * p * r);
+            } else if (p > this._p3) {
+                return this._calcEnd ? 1 - (p = (p - this._p3) / this._p1) * p : r + ((p - r) * (p = (p - this._p3) / this._p1) * p * p * p);
+            }
+            return this._calcEnd ? 1 : r;
+        };
+        SlowMo.ease = new SlowMo(0.7, 0.7);
+
+        p.config = SlowMo.config = function(linearRatio, power, yoyoMode) {
+            return new SlowMo(linearRatio, power, yoyoMode);
+        };
+
+
+        //SteppedEase
+        SteppedEase = _class("easing.SteppedEase", function(steps) {
+                steps = steps || 1;
+                this._p1 = 1 / steps;
+                this._p2 = steps + 1;
+            }, true);
+        p = SteppedEase.prototype = new Ease();
+        p.constructor = SteppedEase;
+        p.getRatio = function(p) {
+            if (p < 0) {
+                p = 0;
+            } else if (p >= 1) {
+                p = 0.999999999;
+            }
+            return ((this._p2 * p) >> 0) * this._p1;
+        };
+        p.config = SteppedEase.config = function(steps) {
+            return new SteppedEase(steps);
+        };
+
+
+        //RoughEase
+        RoughEase = _class("easing.RoughEase", function(vars) {
+            vars = vars || {};
+            var taper = vars.taper || "none",
+                a = [],
+                cnt = 0,
+                points = (vars.points || 20) | 0,
+                i = points,
+                randomize = (vars.randomize !== false),
+                clamp = (vars.clamp === true),
+                template = (vars.template instanceof Ease) ? vars.template : null,
+                strength = (typeof(vars.strength) === "number") ? vars.strength * 0.4 : 0.4,
+                x, y, bump, invX, obj, pnt;
+            while (--i > -1) {
+                x = randomize ? Math.random() : (1 / points) * i;
+                y = template ? template.getRatio(x) : x;
+                if (taper === "none") {
+                    bump = strength;
+                } else if (taper === "out") {
+                    invX = 1 - x;
+                    bump = invX * invX * strength;
+                } else if (taper === "in") {
+                    bump = x * x * strength;
+                } else if (x < 0.5) {  //"both" (start)
+                    invX = x * 2;
+                    bump = invX * invX * 0.5 * strength;
+                } else {                //"both" (end)
+                    invX = (1 - x) * 2;
+                    bump = invX * invX * 0.5 * strength;
+                }
+                if (randomize) {
+                    y += (Math.random() * bump) - (bump * 0.5);
+                } else if (i % 2) {
+                    y += bump * 0.5;
+                } else {
+                    y -= bump * 0.5;
+                }
+                if (clamp) {
+                    if (y > 1) {
+                        y = 1;
+                    } else if (y < 0) {
+                        y = 0;
+                    }
+                }
+                a[cnt++] = {x:x, y:y};
+            }
+            a.sort(function(a, b) {
+                return a.x - b.x;
+            });
+
+            pnt = new EasePoint(1, 1, null);
+            i = points;
+            while (--i > -1) {
+                obj = a[i];
+                pnt = new EasePoint(obj.x, obj.y, pnt);
+            }
+
+            this._prev = new EasePoint(0, 0, (pnt.t !== 0) ? pnt : pnt.next);
+        }, true);
+        p = RoughEase.prototype = new Ease();
+        p.constructor = RoughEase;
+        p.getRatio = function(p) {
+            var pnt = this._prev;
+            if (p > pnt.t) {
+                while (pnt.next && p >= pnt.t) {
+                    pnt = pnt.next;
+                }
+                pnt = pnt.prev;
+            } else {
+                while (pnt.prev && p <= pnt.t) {
+                    pnt = pnt.prev;
+                }
+            }
+            this._prev = pnt;
+            return (pnt.v + ((p - pnt.t) / pnt.gap) * pnt.c);
+        };
+        p.config = function(vars) {
+            return new RoughEase(vars);
+        };
+        RoughEase.ease = new RoughEase();
+
+
+        //Bounce
+        _wrap("Bounce",
+            _create("BounceOut", function(p) {
+                if (p < 1 / 2.75) {
+                    return 7.5625 * p * p;
+                } else if (p < 2 / 2.75) {
+                    return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;
+                } else if (p < 2.5 / 2.75) {
+                    return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;
+                }
+                return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;
+            }),
+            _create("BounceIn", function(p) {
+                if ((p = 1 - p) < 1 / 2.75) {
+                    return 1 - (7.5625 * p * p);
+                } else if (p < 2 / 2.75) {
+                    return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75);
+                } else if (p < 2.5 / 2.75) {
+                    return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375);
+                }
+                return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375);
+            }),
+            _create("BounceInOut", function(p) {
+                var invert = (p < 0.5);
+                if (invert) {
+                    p = 1 - (p * 2);
+                } else {
+                    p = (p * 2) - 1;
+                }
+                if (p < 1 / 2.75) {
+                    p = 7.5625 * p * p;
+                } else if (p < 2 / 2.75) {
+                    p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;
+                } else if (p < 2.5 / 2.75) {
+                    p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;
+                } else {
+                    p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;
+                }
+                return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5;
+            })
+        );
+
+
+        //CIRC
+        _wrap("Circ",
+            _create("CircOut", function(p) {
+                return Math.sqrt(1 - (p = p - 1) * p);
+            }),
+            _create("CircIn", function(p) {
+                return -(Math.sqrt(1 - (p * p)) - 1);
+            }),
+            _create("CircInOut", function(p) {
+                return ((p*=2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1);
+            })
+        );
+
+
+        //Elastic
+        _createElastic = function(n, f, def) {
+            var C = _class("easing." + n, function(amplitude, period) {
+                    this._p1 = amplitude || 1;
+                    this._p2 = period || def;
+                    this._p3 = this._p2 / _2PI * (Math.asin(1 / this._p1) || 0);
+                }, true),
+                p = C.prototype = new Ease();
+            p.constructor = C;
+            p.getRatio = f;
+            p.config = function(amplitude, period) {
+                return new C(amplitude, period);
+            };
+            return C;
+        };
+        _wrap("Elastic",
+            _createElastic("ElasticOut", function(p) {
+                return this._p1 * Math.pow(2, -10 * p) * Math.sin( (p - this._p3) * _2PI / this._p2 ) + 1;
+            }, 0.3),
+            _createElastic("ElasticIn", function(p) {
+                return -(this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * _2PI / this._p2 ));
+            }, 0.3),
+            _createElastic("ElasticInOut", function(p) {
+                return ((p *= 2) < 1) ? -0.5 * (this._p1 * Math.pow(2, 10 * (p -= 1)) * Math.sin( (p - this._p3) * _2PI / this._p2)) : this._p1 * Math.pow(2, -10 *(p -= 1)) * Math.sin( (p - this._p3) * _2PI / this._p2 ) *0.5 + 1;
+            }, 0.45)
+        );
+
+
+        //Expo
+        _wrap("Expo",
+            _create("ExpoOut", function(p) {
+                return 1 - Math.pow(2, -10 * p);
+            }),
+            _create("ExpoIn", function(p) {
+                return Math.pow(2, 10 * (p - 1)) - 0.001;
+            }),
+            _create("ExpoInOut", function(p) {
+                return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+            })
+        );
+
+
+        //Sine
+        _wrap("Sine",
+            _create("SineOut", function(p) {
+                return Math.sin(p * _HALF_PI);
+            }),
+            _create("SineIn", function(p) {
+                return -Math.cos(p * _HALF_PI) + 1;
+            }),
+            _create("SineInOut", function(p) {
+                return -0.5 * (Math.cos(Math.PI * p) - 1);
+            })
+        );
+
+        _class("easing.EaseLookup", {
+                find:function(s) {
+                    return Ease.map[s];
+                }
+            }, true);
+
+        //register the non-standard eases
+        _easeReg(w.SlowMo, "SlowMo", "ease,");
+        _easeReg(RoughEase, "RoughEase", "ease,");
+        _easeReg(SteppedEase, "SteppedEase", "ease,");
+
+        return Back;
+        
+    }, true);
+
+
+}); 
+
+
+
+
+
+
+
+
+
+
+
+/*
+ * ----------------------------------------------------------------
+ * Base classes like TweenLite, SimpleTimeline, Ease, Ticker, etc.
+ * ----------------------------------------------------------------
+ */
+(function(window) {
+
+        "use strict";
+        var _globals = window.GreenSockGlobals || window;
+        if (_globals.TweenLite) {
+            return; //in case the core set of classes is already loaded, don't instantiate twice.
+        }
+        var _namespace = function(ns) {
+                var a = ns.split("."),
+                    p = _globals, i;
+                for (i = 0; i < a.length; i++) {
+                    p[a[i]] = p = p[a[i]] || {};
+                }
+                return p;
+            },
+            gs = _namespace("com.greensock"),
+            _tinyNum = 0.0000000001,
+            _slice = [].slice,
+            _emptyFunc = function() {},
+            _isArray = (function() { //works around issues in iframe environments where the Array global isn't shared, thus if the object originates in a different window/iframe, "(obj instanceof Array)" will evaluate false. We added some speed optimizations to avoid Object.prototype.toString.call() unless it's absolutely necessary because it's VERY slow (like 20x slower)
+                var toString = Object.prototype.toString,
+                    array = toString.call([]);
+                return function(obj) {
+                    return obj != null && (obj instanceof Array || (typeof(obj) === "object" && !!obj.push && toString.call(obj) === array));
+                };
+            }()),
+            a, i, p, _ticker, _tickerActive,
+            _defLookup = {},
+
+            /**
+             * @constructor
+             * Defines a GreenSock class, optionally with an array of dependencies that must be instantiated first and passed into the definition.
+             * This allows users to load GreenSock JS files in any order even if they have interdependencies (like CSSPlugin extends TweenPlugin which is
+             * inside TweenLite.js, but if CSSPlugin is loaded first, it should wait to run its code until TweenLite.js loads and instantiates TweenPlugin
+             * and then pass TweenPlugin to CSSPlugin's definition). This is all done automatically and internally.
+             *
+             * Every definition will be added to a "com.greensock" global object (typically window, but if a window.GreenSockGlobals object is found,
+             * it will go there as of v1.7). For example, TweenLite will be found at window.com.greensock.TweenLite and since it's a global class that should be available anywhere,
+             * it is ALSO referenced at window.TweenLite. However some classes aren't considered global, like the base com.greensock.core.Animation class, so
+             * those will only be at the package like window.com.greensock.core.Animation. Again, if you define a GreenSockGlobals object on the window, everything
+             * gets tucked neatly inside there instead of on the window directly. This allows you to do advanced things like load multiple versions of GreenSock
+             * files and put them into distinct objects (imagine a banner ad uses a newer version but the main site uses an older one). In that case, you could
+             * sandbox the banner one like:
+             *
+             * <script>
+             *     var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.
+             * </script>
+             * <script src="js/greensock/v1.7/TweenMax.js"></script>
+             * <script>
+             *     window.GreenSockGlobals = null; //reset it back to null so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)
+             * </script>
+             * <script src="js/greensock/v1.6/TweenMax.js"></script>
+             * <script>
+             *     gs.TweenLite.to(...); //would use v1.7
+             *     TweenLite.to(...); //would use v1.6
+             * </script>
+             *
+             * @param {!string} ns The namespace of the class definition, leaving off "com.greensock." as that's assumed. For example, "TweenLite" or "plugins.CSSPlugin" or "easing.Back".
+             * @param {!Array.<string>} dependencies An array of dependencies (described as their namespaces minus "com.greensock." prefix). For example ["TweenLite","plugins.TweenPlugin","core.Animation"]
+             * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.
+             * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)
+             */
+            Definition = function(ns, dependencies, func, global) {
+                this.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses
+                _defLookup[ns] = this;
+                this.gsClass = null;
+                this.func = func;
+                var _classes = [];
+                this.check = function(init) {
+                    var i = dependencies.length,
+                        missing = i,
+                        cur, a, n, cl;
+                    while (--i > -1) {
+                        if ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {
+                            _classes[i] = cur.gsClass;
+                            missing--;
+                        } else if (init) {
+                            cur.sc.push(this);
+                        }
+                    }
+                    if (missing === 0 && func) {
+                        a = ("com.greensock." + ns).split(".");
+                        n = a.pop();
+                        cl = _namespace(a.join("."))[n] = this.gsClass = func.apply(func, _classes);
+
+                        //exports to multiple environments
+                        if (global) {
+                            _globals[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)
+                            if (typeof(define) === "function" && define.amd){ //AMD
+                                define((window.GreenSockAMDPath ? window.GreenSockAMDPath + "/" : "") + ns.split(".").join("/"), [], function() { return cl; });
+                            } else if (typeof(module) !== "undefined" && module.exports){ //node
+                                module.exports = cl;
+                            }
+                        }
+                        for (i = 0; i < this.sc.length; i++) {
+                            this.sc[i].check();
+                        }
+                    }
+                };
+                this.check(true);
+            },
+
+            //used to create Definition instances (which basically registers a class that has dependencies).
+            _gsDefine = window._gsDefine = function(ns, dependencies, func, global) {
+                return new Definition(ns, dependencies, func, global);
+            },
+
+            //a quick way to create a class that doesn't have any dependencies. Returns the class, but first registers it in the GreenSock namespace so that other classes can grab it (other classes might be dependent on the class).
+            _class = gs._class = function(ns, func, global) {
+                func = func || function() {};
+                _gsDefine(ns, [], function(){ return func; }, global);
+                return func;
+            };
+
+        _gsDefine.globals = _globals;
+
+
+
+/*
+ * ----------------------------------------------------------------
+ * Ease
+ * ----------------------------------------------------------------
+ */
+        var _baseParams = [0, 0, 1, 1],
+            _blankArray = [],
+            Ease = _class("easing.Ease", function(func, extraParams, type, power) {
+                this._func = func;
+                this._type = type || 0;
+                this._power = power || 0;
+                this._params = extraParams ? _baseParams.concat(extraParams) : _baseParams;
+            }, true),
+            _easeMap = Ease.map = {},
+            _easeReg = Ease.register = function(ease, names, types, create) {
+                var na = names.split(","),
+                    i = na.length,
+                    ta = (types || "easeIn,easeOut,easeInOut").split(","),
+                    e, name, j, type;
+                while (--i > -1) {
+                    name = na[i];
+                    e = create ? _class("easing."+name, null, true) : gs.easing[name] || {};
+                    j = ta.length;
+                    while (--j > -1) {
+                        type = ta[j];
+                        _easeMap[name + "." + type] = _easeMap[type + name] = e[type] = ease.getRatio ? ease : ease[type] || new ease();
+                    }
+                }
+            };
+
+        p = Ease.prototype;
+        p._calcEnd = false;
+        p.getRatio = function(p) {
+            if (this._func) {
+                this._params[0] = p;
+                return this._func.apply(null, this._params);
+            }
+            var t = this._type,
+                pw = this._power,
+                r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2;
+            if (pw === 1) {
+                r *= r;
+            } else if (pw === 2) {
+                r *= r * r;
+            } else if (pw === 3) {
+                r *= r * r * r;
+            } else if (pw === 4) {
+                r *= r * r * r * r;
+            }
+            return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2);
+        };
+
+        //create all the standard eases like Linear, Quad, Cubic, Quart, Quint, Strong, Power0, Power1, Power2, Power3, and Power4 (each with easeIn, easeOut, and easeInOut)
+        a = ["Linear","Quad","Cubic","Quart","Quint,Strong"];
+        i = a.length;
+        while (--i > -1) {
+            p = a[i]+",Power"+i;
+            _easeReg(new Ease(null,null,1,i), p, "easeOut", true);
+            _easeReg(new Ease(null,null,2,i), p, "easeIn" + ((i === 0) ? ",easeNone" : ""));
+            _easeReg(new Ease(null,null,3,i), p, "easeInOut");
+        }
+        _easeMap.linear = gs.easing.Linear.easeIn;
+        _easeMap.swing = gs.easing.Quad.easeInOut; //for jQuery folks
+
+
+/*
+ * ----------------------------------------------------------------
+ * EventDispatcher
+ * ----------------------------------------------------------------
+ */
+        var EventDispatcher = _class("events.EventDispatcher", function(target) {
+            this._listeners = {};
+            this._eventTarget = target || this;
+        });
+        p = EventDispatcher.prototype;
+
+        p.addEventListener = function(type, callback, scope, useParam, priority) {
+            priority = priority || 0;
+            var list = this._listeners[type],
+                index = 0,
+                listener, i;
+            if (list == null) {
+                this._listeners[type] = list = [];
+            }
+            i = list.length;
+            while (--i > -1) {
+                listener = list[i];
+                if (listener.c === callback && listener.s === scope) {
+                    list.splice(i, 1);
+                } else if (index === 0 && listener.pr < priority) {
+                    index = i + 1;
+                }
+            }
+            list.splice(index, 0, {c:callback, s:scope, up:useParam, pr:priority});
+            if (this === _ticker && !_tickerActive) {
+                _ticker.wake();
+            }
+        };
+
+        p.removeEventListener = function(type, callback) {
+            var list = this._listeners[type], i;
+            if (list) {
+                i = list.length;
+                while (--i > -1) {
+                    if (list[i].c === callback) {
+                        list.splice(i, 1);
+                        return;
+                    }
+                }
+            }
+        };
+
+        p.dispatchEvent = function(type) {
+            var list = this._listeners[type],
+                i, t, listener;
+            if (list) {
+                i = list.length;
+                t = this._eventTarget;
+                while (--i > -1) {
+                    listener = list[i];
+                    if (listener.up) {
+                        listener.c.call(listener.s || t, {type:type, target:t});
+                    } else {
+                        listener.c.call(listener.s || t);
+                    }
+                }
+            }
+        };
+
+
+/*
+ * ----------------------------------------------------------------
+ * Ticker
+ * ----------------------------------------------------------------
+ */
+        var _reqAnimFrame = window.requestAnimationFrame,
+            _cancelAnimFrame = window.cancelAnimationFrame,
+            _getTime = Date.now || function() {return new Date().getTime();},
+            _lastUpdate = _getTime();
+
+        //now try to determine the requestAnimationFrame and cancelAnimationFrame functions and if none are found, we'll use a setTimeout()/clearTimeout() polyfill.
+        a = ["ms","moz","webkit","o"];
+        i = a.length;
+        while (--i > -1 && !_reqAnimFrame) {
+            _reqAnimFrame = window[a[i] + "RequestAnimationFrame"];
+            _cancelAnimFrame = window[a[i] + "CancelAnimationFrame"] || window[a[i] + "CancelRequestAnimationFrame"];
+        }
+
+        _class("Ticker", function(fps, useRAF) {
+            var _self = this,
+                _startTime = _getTime(),
+                _useRAF = (useRAF !== false && _reqAnimFrame),
+                _lagThreshold = 500,
+                _adjustedLag = 33,
+                _fps, _req, _id, _gap, _nextTime,
+                _tick = function(manual) {
+                    var elapsed = _getTime() - _lastUpdate,
+                        overlap, dispatch;
+                    if (elapsed > _lagThreshold) {
+                        _startTime += elapsed - _adjustedLag;
+                    }
+                    _lastUpdate += elapsed;
+                    _self.time = (_lastUpdate - _startTime) / 1000;
+                    overlap = _self.time - _nextTime;
+                    if (!_fps || overlap > 0 || manual === true) {
+                        _self.frame++;
+                        _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
+                        dispatch = true;
+                    }
+                    if (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
+                        _id = _req(_tick);
+                    }
+                    if (dispatch) {
+                        _self.dispatchEvent("tick");
+                    }
+                };
+
+            EventDispatcher.call(_self);
+            _self.time = _self.frame = 0;
+            _self.tick = function() {
+                _tick(true);
+            };
+
+            _self.lagSmoothing = function(threshold, adjustedLag) {
+                _lagThreshold = threshold || (1 / _tinyNum); //zero should be interpreted as basically unlimited
+                _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
+            };
+
+            _self.sleep = function() {
+                if (_id == null) {
+                    return;
+                }
+                if (!_useRAF || !_cancelAnimFrame) {
+                    clearTimeout(_id);
+                } else {
+                    _cancelAnimFrame(_id);
+                }
+                _req = _emptyFunc;
+                _id = null;
+                if (_self === _ticker) {
+                    _tickerActive = false;
+                }
+            };
+
+            _self.wake = function() {
+                if (_id !== null) {
+                    _self.sleep();
+                } else if (_self.frame > 10) { //don't trigger lagSmoothing if we're just waking up, and make sure that at least 10 frames have elapsed because of the iOS bug that we work around below with the 1.5-second setTimout().
+                    _lastUpdate = _getTime() - _lagThreshold + 5;
+                }
+                _req = (_fps === 0) ? _emptyFunc : (!_useRAF || !_reqAnimFrame) ? function(f) { return setTimeout(f, ((_nextTime - _self.time) * 1000 + 1) | 0); } : _reqAnimFrame;
+                if (_self === _ticker) {
+                    _tickerActive = true;
+                }
+                _tick(2);
+            };
+
+            _self.fps = function(value) {
+                if (!arguments.length) {
+                    return _fps;
+                }
+                _fps = value;
+                _gap = 1 / (_fps || 60);
+                _nextTime = this.time + _gap;
+                _self.wake();
+            };
+
+            _self.useRAF = function(value) {
+                if (!arguments.length) {
+                    return _useRAF;
+                }
+                _self.sleep();
+                _useRAF = value;
+                _self.fps(_fps);
+            };
+            _self.fps(fps);
+
+            //a bug in iOS 6 Safari occasionally prevents the requestAnimationFrame from working initially, so we use a 1.5-second timeout that automatically falls back to setTimeout() if it senses this condition.
+            setTimeout(function() {
+                if (_useRAF && (!_id || _self.frame < 5)) {
+                    _self.useRAF(false);
+                }
+            }, 1500);
+        });
+
+        p = gs.Ticker.prototype = new gs.events.EventDispatcher();
+        p.constructor = gs.Ticker;
+
+
+/*
+ * ----------------------------------------------------------------
+ * Animation
+ * ----------------------------------------------------------------
+ */
+        var Animation = _class("core.Animation", function(duration, vars) {
+                this.vars = vars = vars || {};
+                this._duration = this._totalDuration = duration || 0;
+                this._delay = Number(vars.delay) || 0;
+                this._timeScale = 1;
+                this._active = (vars.immediateRender === true);
+                this.data = vars.data;
+                this._reversed = (vars.reversed === true);
+
+                if (!_rootTimeline) {
+                    return;
+                }
+                if (!_tickerActive) { //some browsers (like iOS 6 Safari) shut down JavaScript execution when the tab is disabled and they [occasionally] neglect to start up requestAnimationFrame again when returning - this code ensures that the engine starts up again properly.
+                    _ticker.wake();
+                }
+
+                var tl = this.vars.useFrames ? _rootFramesTimeline : _rootTimeline;
+                tl.add(this, tl._time);
+
+                if (this.vars.paused) {
+                    this.paused(true);
+                }
+            });
+
+        _ticker = Animation.ticker = new gs.Ticker();
+        p = Animation.prototype;
+        p._dirty = p._gc = p._initted = p._paused = false;
+        p._totalTime = p._time = 0;
+        p._rawPrevTime = -1;
+        p._next = p._last = p._onUpdate = p._timeline = p.timeline = null;
+        p._paused = false;
+
+
+        //some browsers (like iOS) occasionally drop the requestAnimationFrame event when the user switches to a different tab and then comes back again, so we use a 2-second setTimeout() to sense if/when that condition occurs and then wake() the ticker.
+        var _checkTimeout = function() {
+                if (_tickerActive && _getTime() - _lastUpdate > 2000) {
+                    _ticker.wake();
+                }
+                setTimeout(_checkTimeout, 2000);
+            };
+        _checkTimeout();
+
+
+        p.play = function(from, suppressEvents) {
+            if (from != null) {
+                this.seek(from, suppressEvents);
+            }
+            return this.reversed(false).paused(false);
+        };
+
+        p.pause = function(atTime, suppressEvents) {
+            if (atTime != null) {
+                this.seek(atTime, suppressEvents);
+            }
+            return this.paused(true);
+        };
+
+        p.resume = function(from, suppressEvents) {
+            if (from != null) {
+                this.seek(from, suppressEvents);
+            }
+            return this.paused(false);
+        };
+
+        p.seek = function(time, suppressEvents) {
+            return this.totalTime(Number(time), suppressEvents !== false);
+        };
+
+        p.restart = function(includeDelay, suppressEvents) {
+            return this.reversed(false).paused(false).totalTime(includeDelay ? -this._delay : 0, (suppressEvents !== false), true);
+        };
+
+        p.reverse = function(from, suppressEvents) {
+            if (from != null) {
+                this.seek((from || this.totalDuration()), suppressEvents);
+            }
+            return this.reversed(true).paused(false);
+        };
+
+        p.render = function(time, suppressEvents, force) {
+            //stub - we override this method in subclasses.
+        };
+
+        p.invalidate = function() {
+            return this;
+        };
+
+        p.isActive = function() {
+            var tl = this._timeline, //the 2 root timelines won't have a _timeline; they're always active.
+                startTime = this._startTime,
+                rawTime;
+            return (!tl || (!this._gc && !this._paused && tl.isActive() && (rawTime = tl.rawTime()) >= startTime && rawTime < startTime + this.totalDuration() / this._timeScale));
+        };
+
+        p._enabled = function (enabled, ignoreTimeline) {
+            if (!_tickerActive) {
+                _ticker.wake();
+            }
+            this._gc = !enabled;
+            this._active = this.isActive();
+            if (ignoreTimeline !== true) {
+                if (enabled && !this.timeline) {
+                    this._timeline.add(this, this._startTime - this._delay);
+                } else if (!enabled && this.timeline) {
+                    this._timeline._remove(this, true);
+                }
+            }
+            return false;
+        };
+
+
+        p._kill = function(vars, target) {
+            return this._enabled(false, false);
+        };
+
+        p.kill = function(vars, target) {
+            this._kill(vars, target);
+            return this;
+        };
+
+        p._uncache = function(includeSelf) {
+            var tween = includeSelf ? this : this.timeline;
+            while (tween) {
+                tween._dirty = true;
+                tween = tween.timeline;
+            }
+            return this;
+        };
+
+        p._swapSelfInParams = function(params) {
+            var i = params.length,
+                copy = params.concat();
+            while (--i > -1) {
+                if (params[i] === "{self}") {
+                    copy[i] = this;
+                }
+            }
+            return copy;
+        };
+
+//----Animation getters/setters --------------------------------------------------------
+
+        p.eventCallback = function(type, callback, params, scope) {
+            if ((type || "").substr(0,2) === "on") {
+                var v = this.vars;
+                if (arguments.length === 1) {
+                    return v[type];
+                }
+                if (callback == null) {
+                    delete v[type];
+                } else {
+                    v[type] = callback;
+                    v[type + "Params"] = (_isArray(params) && params.join("").indexOf("{self}") !== -1) ? this._swapSelfInParams(params) : params;
+                    v[type + "Scope"] = scope;
+                }
+                if (type === "onUpdate") {
+                    this._onUpdate = callback;
+                }
+            }
+            return this;
+        };
+
+        p.delay = function(value) {
+            if (!arguments.length) {
+                return this._delay;
+            }
+            if (this._timeline.smoothChildTiming) {
+                this.startTime( this._startTime + value - this._delay );
+            }
+            this._delay = value;
+            return this;
+        };
+
+        p.duration = function(value) {
+            if (!arguments.length) {
+                this._dirty = false;
+                return this._duration;
+            }
+            this._duration = this._totalDuration = value;
+            this._uncache(true); //true in case it's a TweenMax or TimelineMax that has a repeat - we'll need to refresh the totalDuration.
+            if (this._timeline.smoothChildTiming) if (this._time > 0) if (this._time < this._duration) if (value !== 0) {
+                this.totalTime(this._totalTime * (value / this._duration), true);
+            }
+            return this;
+        };
+
+        p.totalDuration = function(value) {
+            this._dirty = false;
+            return (!arguments.length) ? this._totalDuration : this.duration(value);
+        };
+
+        p.time = function(value, suppressEvents) {
+            if (!arguments.length) {
+                return this._time;
+            }
+            if (this._dirty) {
+                this.totalDuration();
+            }
+            return this.totalTime((value > this._duration) ? this._duration : value, suppressEvents);
+        };
+
+        p.totalTime = function(time, suppressEvents, uncapped) {
+            if (!_tickerActive) {
+                _ticker.wake();
+            }
+            if (!arguments.length) {
+                return this._totalTime;
+            }
+            if (this._timeline) {
+                if (time < 0 && !uncapped) {
+                    time += this.totalDuration();
+                }
+                if (this._timeline.smoothChildTiming) {
+                    if (this._dirty) {
+                        this.totalDuration();
+                    }
+                    var totalDuration = this._totalDuration,
+                        tl = this._timeline;
+                    if (time > totalDuration && !uncapped) {
+                        time = totalDuration;
+                    }
+                    this._startTime = (this._paused ? this._pauseTime : tl._time) - ((!this._reversed ? time : totalDuration - time) / this._timeScale);
+                    if (!tl._dirty) { //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
+                        this._uncache(false);
+                    }
+                    //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The startTime of that child would get pushed out, but one of the ancestors may have completed.
+                    if (tl._timeline) {
+                        while (tl._timeline) {
+                            if (tl._timeline._time !== (tl._startTime + tl._totalTime) / tl._timeScale) {
+                                tl.totalTime(tl._totalTime, true);
+                            }
+                            tl = tl._timeline;
+                        }
+                    }
+                }
+                if (this._gc) {
+                    this._enabled(true, false);
+                }
+                if (this._totalTime !== time || this._duration === 0) {
+                    this.render(time, suppressEvents, false);
+                    if (_lazyTweens.length) { //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
+                        _lazyRender();
+                    }
+                }
+            }
+            return this;
+        };
+
+        p.progress = p.totalProgress = function(value, suppressEvents) {
+            return (!arguments.length) ? this._time / this.duration() : this.totalTime(this.duration() * value, suppressEvents);
+        };
+
+        p.startTime = function(value) {
+            if (!arguments.length) {
+                return this._startTime;
+            }
+            if (value !== this._startTime) {
+                this._startTime = value;
+                if (this.timeline) if (this.timeline._sortChildren) {
+                    this.timeline.add(this, value - this._delay); //ensures that any necessary re-sequencing of Animations in the timeline occurs to make sure the rendering order is correct.
+                }
+            }
+            return this;
+        };
+
+        p.timeScale = function(value) {
+            if (!arguments.length) {
+                return this._timeScale;
+            }
+            value = value || _tinyNum; //can't allow zero because it'll throw the math off
+            if (this._timeline && this._timeline.smoothChildTiming) {
+                var pauseTime = this._pauseTime,
+                    t = (pauseTime || pauseTime === 0) ? pauseTime : this._timeline.totalTime();
+                this._startTime = t - ((t - this._startTime) * this._timeScale / value);
+            }
+            this._timeScale = value;
+            return this._uncache(false);
+        };
+
+        p.reversed = function(value) {
+            if (!arguments.length) {
+                return this._reversed;
+            }
+            if (value != this._reversed) {
+                this._reversed = value;
+                this.totalTime(((this._timeline && !this._timeline.smoothChildTiming) ? this.totalDuration() - this._totalTime : this._totalTime), true);
+            }
+            return this;
+        };
+
+        p.paused = function(value) {
+            if (!arguments.length) {
+                return this._paused;
+            }
+            if (value != this._paused) if (this._timeline) {
+                if (!_tickerActive && !value) {
+                    _ticker.wake();
+                }
+                var tl = this._timeline,
+                    raw = tl.rawTime(),
+                    elapsed = raw - this._pauseTime;
+                if (!value && tl.smoothChildTiming) {
+                    this._startTime += elapsed;
+                    this._uncache(false);
+                }
+                this._pauseTime = value ? raw : null;
+                this._paused = value;
+                this._active = this.isActive();
+                if (!value && elapsed !== 0 && this._initted && this.duration()) {
+                    this.render((tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale), true, true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render.
+                }
+            }
+            if (this._gc && !value) {
+                this._enabled(true, false);
+            }
+            return this;
+        };
+
+
+/*
+ * ----------------------------------------------------------------
+ * SimpleTimeline
+ * ----------------------------------------------------------------
+ */
+        var SimpleTimeline = _class("core.SimpleTimeline", function(vars) {
+            Animation.call(this, 0, vars);
+            this.autoRemoveChildren = this.smoothChildTiming = true;
+        });
+
+        p = SimpleTimeline.prototype = new Animation();
+        p.constructor = SimpleTimeline;
+        p.kill()._gc = false;
+        p._first = p._last = null;
+        p._sortChildren = false;
+
+        p.add = p.insert = function(child, position, align, stagger) {
+            var prevTween, st;
+            child._startTime = Number(position || 0) + child._delay;
+            if (child._paused) if (this !== child._timeline) { //we only adjust the _pauseTime if it wasn't in this timeline already. Remember, sometimes a tween will be inserted again into the same timeline when its startTime is changed so that the tweens in the TimelineLite/Max are re-ordered properly in the linked list (so everything renders in the proper order).
+                child._pauseTime = child._startTime + ((this.rawTime() - child._startTime) / child._timeScale);
+            }
+            if (child.timeline) {
+                child.timeline._remove(child, true); //removes from existing timeline so that it can be properly added to this one.
+            }
+            child.timeline = child._timeline = this;
+            if (child._gc) {
+                child._enabled(true, true);
+            }
+            prevTween = this._last;
+            if (this._sortChildren) {
+                st = child._startTime;
+                while (prevTween && prevTween._startTime > st) {
+                    prevTween = prevTween._prev;
+                }
+            }
+            if (prevTween) {
+                child._next = prevTween._next;
+                prevTween._next = child;
+            } else {
+                child._next = this._first;
+                this._first = child;
+            }
+            if (child._next) {
+                child._next._prev = child;
+            } else {
+                this._last = child;
+            }
+            child._prev = prevTween;
+            if (this._timeline) {
+                this._uncache(true);
+            }
+            return this;
+        };
+
+        p._remove = function(tween, skipDisable) {
+            if (tween.timeline === this) {
+                if (!skipDisable) {
+                    tween._enabled(false, true);
+                }
+                tween.timeline = null;
+
+                if (tween._prev) {
+                    tween._prev._next = tween._next;
+                } else if (this._first === tween) {
+                    this._first = tween._next;
+                }
+                if (tween._next) {
+                    tween._next._prev = tween._prev;
+                } else if (this._last === tween) {
+                    this._last = tween._prev;
+                }
+
+                if (this._timeline) {
+                    this._uncache(true);
+                }
+            }
+            return this;
+        };
+
+        p.render = function(time, suppressEvents, force) {
+            var tween = this._first,
+                next;
+            this._totalTime = this._time = this._rawPrevTime = time;
+            while (tween) {
+                next = tween._next; //record it here because the value could change after rendering...
+                if (tween._active || (time >= tween._startTime && !tween._paused)) {
+                    if (!tween._reversed) {
+                        tween.render((time - tween._startTime) * tween._timeScale, suppressEvents, force);
+                    } else {
+                        tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - ((time - tween._startTime) * tween._timeScale), suppressEvents, force);
+                    }
+                }
+                tween = next;
+            }
+        };
+
+        p.rawTime = function() {
+            if (!_tickerActive) {
+                _ticker.wake();
+            }
+            return this._totalTime;
+        };
+
+/*
+ * ----------------------------------------------------------------
+ * TweenLite
+ * ----------------------------------------------------------------
+ */
+        var TweenLite = _class("TweenLite", function(target, duration, vars) {
+                Animation.call(this, duration, vars);
+                this.render = TweenLite.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method)
+
+                if (target == null) {
+                    throw "Cannot tween a null target.";
+                }
+
+                this.target = target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;
+
+                var isSelector = (target.jquery || (target.length && target !== window && target[0] && (target[0] === window || (target[0].nodeType && target[0].style && !target.nodeType)))),
+                    overwrite = this.vars.overwrite,
+                    i, targ, targets;
+
+                this._overwrite = overwrite = (overwrite == null) ? _overwriteLookup[TweenLite.defaultOverwrite] : (typeof(overwrite) === "number") ? overwrite >> 0 : _overwriteLookup[overwrite];
+
+                if ((isSelector || target instanceof Array || (target.push && _isArray(target))) && typeof(target[0]) !== "number") {
+                    this._targets = targets = _slice.call(target, 0);
+                    this._propLookup = [];
+                    this._siblings = [];
+                    for (i = 0; i < targets.length; i++) {
+                        targ = targets[i];
+                        if (!targ) {
+                            targets.splice(i--, 1);
+                            continue;
+                        } else if (typeof(targ) === "string") {
+                            targ = targets[i--] = TweenLite.selector(targ); //in case it's an array of strings
+                            if (typeof(targ) === "string") {
+                                targets.splice(i+1, 1); //to avoid an endless loop (can't imagine why the selector would return a string, but just in case)
+                            }
+                            continue;
+                        } else if (targ.length && targ !== window && targ[0] && (targ[0] === window || (targ[0].nodeType && targ[0].style && !targ.nodeType))) { //in case the user is passing in an array of selector objects (like jQuery objects), we need to check one more level and pull things out if necessary. Also note that <select> elements pass all the criteria regarding length and the first child having style, so we must also check to ensure the target isn't an HTML node itself.
+                            targets.splice(i--, 1);
+                            this._targets = targets = targets.concat(_slice.call(targ, 0));
+                            continue;
+                        }
+                        this._siblings[i] = _register(targ, this, false);
+                        if (overwrite === 1) if (this._siblings[i].length > 1) {
+                            _applyOverwrite(targ, this, null, 1, this._siblings[i]);
+                        }
+                    }
+
+                } else {
+                    this._propLookup = {};
+                    this._siblings = _register(target, this, false);
+                    if (overwrite === 1) if (this._siblings.length > 1) {
+                        _applyOverwrite(target, this, null, 1, this._siblings);
+                    }
+                }
+                if (this.vars.immediateRender || (duration === 0 && this._delay === 0 && this.vars.immediateRender !== false)) {
+                    this._time = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
+                    this.render(-this._delay);
+                }
+            }, true),
+            _isSelector = function(v) {
+                return (v.length && v !== window && v[0] && (v[0] === window || (v[0].nodeType && v[0].style && !v.nodeType))); //we cannot check "nodeType" if the target is window from within an iframe, otherwise it will trigger a security error in some browsers like Firefox.
+            },
+            _autoCSS = function(vars, target) {
+                var css = {},
+                    p;
+                for (p in vars) {
+                    if (!_reservedProps[p] && (!(p in target) || p === "transform" || p === "x" || p === "y" || p === "width" || p === "height" || p === "className" || p === "border") && (!_plugins[p] || (_plugins[p] && _plugins[p]._autoCSS))) { //note: <img> elements contain read-only "x" and "y" properties. We should also prioritize editing css width/height rather than the element's properties.
+                        css[p] = vars[p];
+                        delete vars[p];
+                    }
+                }
+                vars.css = css;
+            };
+
+        p = TweenLite.prototype = new Animation();
+        p.constructor = TweenLite;
+        p.kill()._gc = false;
+
+//----TweenLite defaults, overwrite management, and root updates ----------------------------------------------------
+
+        p.ratio = 0;
+        p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;
+        p._notifyPluginsOfEnabled = p._lazy = false;
+
+        TweenLite.version = "1.12.1";
+        TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);
+        TweenLite.defaultOverwrite = "auto";
+        TweenLite.ticker = _ticker;
+        TweenLite.autoSleep = true;
+        TweenLite.lagSmoothing = function(threshold, adjustedLag) {
+            _ticker.lagSmoothing(threshold, adjustedLag);
+        };
+        TweenLite.selector = window.$ || window.jQuery || function(e) { if (window.$) { TweenLite.selector = window.$; return window.$(e); } return window.document ? window.document.getElementById((e.charAt(0) === "#") ? e.substr(1) : e) : e; };
+
+        var _lazyTweens = [],
+            _lazyLookup = {},
+            _internals = TweenLite._internals = {isArray:_isArray, isSelector:_isSelector, lazyTweens:_lazyTweens}, //gives us a way to expose certain private values to other GreenSock classes without contaminating tha main TweenLite object.
+            _plugins = TweenLite._plugins = {},
+            _tweenLookup = _internals.tweenLookup = {},
+            _tweenLookupNum = 0,
+            _reservedProps = _internals.reservedProps = {ease:1, delay:1, overwrite:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, runBackwards:1, startAt:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, easeParams:1, yoyo:1, immediateRender:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, autoCSS:1, lazy:1},
+            _overwriteLookup = {none:0, all:1, auto:2, concurrent:3, allOnStart:4, preexisting:5, "true":1, "false":0},
+            _rootFramesTimeline = Animation._rootFramesTimeline = new SimpleTimeline(),
+            _rootTimeline = Animation._rootTimeline = new SimpleTimeline(),
+            _lazyRender = function() {
+                var i = _lazyTweens.length;
+                _lazyLookup = {};
+                while (--i > -1) {
+                    a = _lazyTweens[i];
+                    if (a && a._lazy !== false) {
+                        a.render(a._lazy, false, true);
+                        a._lazy = false;
+                    }
+                }
+                _lazyTweens.length = 0;
+            };
+
+        _rootTimeline._startTime = _ticker.time;
+        _rootFramesTimeline._startTime = _ticker.frame;
+        _rootTimeline._active = _rootFramesTimeline._active = true;
+        setTimeout(_lazyRender, 1); //on some mobile devices, there isn't a "tick" before code runs which means any lazy renders wouldn't run before the next official "tick".
+
+        Animation._updateRoot = TweenLite.render = function() {
+                var i, a, p;
+                if (_lazyTweens.length) { //if code is run outside of the requestAnimationFrame loop, there may be tweens queued AFTER the engine refreshed, so we need to ensure any pending renders occur before we refresh again.
+                    _lazyRender();
+                }
+                _rootTimeline.render((_ticker.time - _rootTimeline._startTime) * _rootTimeline._timeScale, false, false);
+                _rootFramesTimeline.render((_ticker.frame - _rootFramesTimeline._startTime) * _rootFramesTimeline._timeScale, false, false);
+                if (_lazyTweens.length) {
+                    _lazyRender();
+                }
+                if (!(_ticker.frame % 120)) { //dump garbage every 120 frames...
+                    for (p in _tweenLookup) {
+                        a = _tweenLookup[p].tweens;
+                        i = a.length;
+                        while (--i > -1) {
+                            if (a[i]._gc) {
+                                a.splice(i, 1);
+                            }
+                        }
+                        if (a.length === 0) {
+                            delete _tweenLookup[p];
+                        }
+                    }
+                    //if there are no more tweens in the root timelines, or if they're all paused, make the _timer sleep to reduce load on the CPU slightly
+                    p = _rootTimeline._first;
+                    if (!p || p._paused) if (TweenLite.autoSleep && !_rootFramesTimeline._first && _ticker._listeners.tick.length === 1) {
+                        while (p && p._paused) {
+                            p = p._next;
+                        }
+                        if (!p) {
+                            _ticker.sleep();
+                        }
+                    }
+                }
+            };
+
+        _ticker.addEventListener("tick", Animation._updateRoot);
+
+        var _register = function(target, tween, scrub) {
+                var id = target._gsTweenID, a, i;
+                if (!_tweenLookup[id || (target._gsTweenID = id = "t" + (_tweenLookupNum++))]) {
+                    _tweenLookup[id] = {target:target, tweens:[]};
+                }
+                if (tween) {
+                    a = _tweenLookup[id].tweens;
+                    a[(i = a.length)] = tween;
+                    if (scrub) {
+                        while (--i > -1) {
+                            if (a[i] === tween) {
+                                a.splice(i, 1);
+                            }
+                        }
+                    }
+                }
+                return _tweenLookup[id].tweens;
+            },
+
+            _applyOverwrite = function(target, tween, props, mode, siblings) {
+                var i, changed, curTween, l;
+                if (mode === 1 || mode >= 4) {
+                    l = siblings.length;
+                    for (i = 0; i < l; i++) {
+                        if ((curTween = siblings[i]) !== tween) {
+                            if (!curTween._gc) if (curTween._enabled(false, false)) {
+                                changed = true;
+                            }
+                        } else if (mode === 5) {
+                            break;
+                        }
+                    }
+                    return changed;
+                }
+                //NOTE: Add 0.0000000001 to overcome floating point errors that can cause the startTime to be VERY slightly off (when a tween's time() is set for example)
+                var startTime = tween._startTime + _tinyNum,
+                    overlaps = [],
+                    oCount = 0,
+                    zeroDur = (tween._duration === 0),
+                    globalStart;
+                i = siblings.length;
+                while (--i > -1) {
+                    if ((curTween = siblings[i]) === tween || curTween._gc || curTween._paused) {
+                        //ignore
+                    } else if (curTween._timeline !== tween._timeline) {
+                        globalStart = globalStart || _checkOverlap(tween, 0, zeroDur);
+                        if (_checkOverlap(curTween, globalStart, zeroDur) === 0) {
+                            overlaps[oCount++] = curTween;
+                        }
+                    } else if (curTween._startTime <= startTime) if (curTween._startTime + curTween.totalDuration() / curTween._timeScale > startTime) if (!((zeroDur || !curTween._initted) && startTime - curTween._startTime <= 0.0000000002)) {
+                        overlaps[oCount++] = curTween;
+                    }
+                }
+
+                i = oCount;
+                while (--i > -1) {
+                    curTween = overlaps[i];
+                    if (mode === 2) if (curTween._kill(props, target)) {
+                        changed = true;
+                    }
+                    if (mode !== 2 || (!curTween._firstPT && curTween._initted)) {
+                        if (curTween._enabled(false, false)) { //if all property tweens have been overwritten, kill the tween.
+                            changed = true;
+                        }
+                    }
+                }
+                return changed;
+            },
+
+            _checkOverlap = function(tween, reference, zeroDur) {
+                var tl = tween._timeline,
+                    ts = tl._timeScale,
+                    t = tween._startTime;
+                while (tl._timeline) {
+                    t += tl._startTime;
+                    ts *= tl._timeScale;
+                    if (tl._paused) {
+                        return -100;
+                    }
+                    tl = tl._timeline;
+                }
+                t /= ts;
+                return (t > reference) ? t - reference : ((zeroDur && t === reference) || (!tween._initted && t - reference < 2 * _tinyNum)) ? _tinyNum : ((t += tween.totalDuration() / tween._timeScale / ts) > reference + _tinyNum) ? 0 : t - reference - _tinyNum;
+            };
+
+
+//---- TweenLite instance methods -----------------------------------------------------------------------------
+
+        p._init = function() {
+            var v = this.vars,
+                op = this._overwrittenProps,
+                dur = this._duration,
+                immediate = !!v.immediateRender,
+                ease = v.ease,
+                i, initPlugins, pt, p, startVars;
+            if (v.startAt) {
+                if (this._startAt) {
+                    this._startAt.render(-1, true); //if we've run a startAt previously (when the tween instantiated), we should revert it so that the values re-instantiate correctly particularly for relative tweens. Without this, a TweenLite.fromTo(obj, 1, {x:"+=100"}, {x:"-=100"}), for example, would actually jump to +=200 because the startAt would run twice, doubling the relative change.
+                    this._startAt.kill();
+                }
+                startVars = {};
+                for (p in v.startAt) { //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, 1, from, to).fromTo(e, 1, to, from);
+                    startVars[p] = v.startAt[p];
+                }
+                startVars.overwrite = false;
+                startVars.immediateRender = true;
+                startVars.lazy = (immediate && v.lazy !== false);
+                startVars.startAt = startVars.delay = null; //no nesting of startAt objects allowed (otherwise it could cause an infinite loop).
+                this._startAt = TweenLite.to(this.target, 0, startVars);
+                if (immediate) {
+                    if (this._time > 0) {
+                        this._startAt = null; //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in TimelineLite/Max instances where immediateRender was false (which is the default in the convenience methods like from()).
+                    } else if (dur !== 0) {
+                        return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a TimelineLite or TimelineMax, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
+                    }
+                }
+            } else if (v.runBackwards && dur !== 0) {
+                //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
+                if (this._startAt) {
+                    this._startAt.render(-1, true);
+                    this._startAt.kill();
+                    this._startAt = null;
+                } else {
+                    pt = {};
+                    for (p in v) { //copy props into a new object and skip any reserved props, otherwise onComplete or onUpdate or onStart could fire. We should, however, permit autoCSS to go through.
+                        if (!_reservedProps[p] || p === "autoCSS") {
+                            pt[p] = v[p];
+                        }
+                    }
+                    pt.overwrite = 0;
+                    pt.data = "isFromStart"; //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
+                    pt.lazy = (immediate && v.lazy !== false);
+                    pt.immediateRender = immediate; //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
+                    this._startAt = TweenLite.to(this.target, 0, pt);
+                    if (!immediate) {
+                        this._startAt._init(); //ensures that the initial values are recorded
+                        this._startAt._enabled(false); //no need to have the tween render on the next cycle. Disable it because we'll always manually control the renders of the _startAt tween.
+                    } else if (this._time === 0) {
+                        return;
+                    }
+                }
+            }
+            if (!ease) {
+                this._ease = TweenLite.defaultEase;
+            } else if (ease instanceof Ease) {
+                this._ease = (v.easeParams instanceof Array) ? ease.config.apply(ease, v.easeParams) : ease;
+            } else {
+                this._ease = (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase;
+            }
+            this._easeType = this._ease._type;
+            this._easePower = this._ease._power;
+            this._firstPT = null;
+
+            if (this._targets) {
+                i = this._targets.length;
+                while (--i > -1) {
+                    if ( this._initProps( this._targets[i], (this._propLookup[i] = {}), this._siblings[i], (op ? op[i] : null)) ) {
+                        initPlugins = true;
+                    }
+                }
+            } else {
+                initPlugins = this._initProps(this.target, this._propLookup, this._siblings, op);
+            }
+
+            if (initPlugins) {
+                TweenLite._onPluginEvent("_onInitAllProps", this); //reorders the array in order of priority. Uses a static TweenPlugin method in order to minimize file size in TweenLite
+            }
+            if (op) if (!this._firstPT) if (typeof(this.target) !== "function") { //if all tweening properties have been overwritten, kill the tween. If the target is a function, it's probably a delayedCall so let it live.
+                this._enabled(false, false);
+            }
+            if (v.runBackwards) {
+                pt = this._firstPT;
+                while (pt) {
+                    pt.s += pt.c;
+                    pt.c = -pt.c;
+                    pt = pt._next;
+                }
+            }
+            this._onUpdate = v.onUpdate;
+            this._initted = true;
+        };
+
+        p._initProps = function(target, propLookup, siblings, overwrittenProps) {
+            var p, i, initPlugins, plugin, pt, v;
+            if (target == null) {
+                return false;
+            }
+
+            if (_lazyLookup[target._gsTweenID]) {
+                _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
+            }
+
+            if (!this.vars.css) if (target.style) if (target !== window && target.nodeType) if (_plugins.css) if (this.vars.autoCSS !== false) { //it's so common to use TweenLite/Max to animate the css of DOM elements, we assume that if the target is a DOM element, that's what is intended (a convenience so that users don't have to wrap things in css:{}, although we still recommend it for a slight performance boost and better specificity). Note: we cannot check "nodeType" on the window inside an iframe.
+                _autoCSS(this.vars, target);
+            }
+            for (p in this.vars) {
+                v = this.vars[p];
+                if (_reservedProps[p]) {
+                    if (v) if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) {
+                        this.vars[p] = v = this._swapSelfInParams(v, this);
+                    }
+
+                } else if (_plugins[p] && (plugin = new _plugins[p]())._onInitTween(target, this.vars[p], this)) {
+
+                    //t - target        [object]
+                    //p - property      [string]
+                    //s - start         [number]
+                    //c - change        [number]
+                    //f - isFunction    [boolean]
+                    //n - name          [string]
+                    //pg - isPlugin     [boolean]
+                    //pr - priority     [number]
+                    this._firstPT = pt = {_next:this._firstPT, t:plugin, p:"setRatio", s:0, c:1, f:true, n:p, pg:true, pr:plugin._priority};
+                    i = plugin._overwriteProps.length;
+                    while (--i > -1) {
+                        propLookup[plugin._overwriteProps[i]] = this._firstPT;
+                    }
+                    if (plugin._priority || plugin._onInitAllProps) {
+                        initPlugins = true;
+                    }
+                    if (plugin._onDisable || plugin._onEnable) {
+                        this._notifyPluginsOfEnabled = true;
+                    }
+
+                } else {
+                    this._firstPT = propLookup[p] = pt = {_next:this._firstPT, t:target, p:p, f:(typeof(target[p]) === "function"), n:p, pg:false, pr:0};
+                    pt.s = (!pt.f) ? parseFloat(target[p]) : target[ ((p.indexOf("set") || typeof(target["get" + p.substr(3)]) !== "function") ? p : "get" + p.substr(3)) ]();
+                    pt.c = (typeof(v) === "string" && v.charAt(1) === "=") ? parseInt(v.charAt(0) + "1", 10) * Number(v.substr(2)) : (Number(v) - pt.s) || 0;
+                }
+                if (pt) if (pt._next) {
+                    pt._next._prev = pt;
+                }
+            }
+
+            if (overwrittenProps) if (this._kill(overwrittenProps, target)) { //another tween may have tried to overwrite properties of this tween before init() was called (like if two tweens start at the same time, the one created second will run first)
+                return this._initProps(target, propLookup, siblings, overwrittenProps);
+            }
+            if (this._overwrite > 1) if (this._firstPT) if (siblings.length > 1) if (_applyOverwrite(target, this, propLookup, this._overwrite, siblings)) {
+                this._kill(propLookup, target);
+                return this._initProps(target, propLookup, siblings, overwrittenProps);
+            }
+            if (this._firstPT) if ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration)) { //zero duration tweens don't lazy render by default; everything else does.
+                _lazyLookup[target._gsTweenID] = true;
+            }
+            return initPlugins;
+        };
+
+        p.render = function(time, suppressEvents, force) {
+            var prevTime = this._time,
+                duration = this._duration,
+                prevRawPrevTime = this._rawPrevTime,
+                isComplete, callback, pt, rawPrevTime;
+            if (time >= duration) {
+                this._totalTime = this._time = duration;
+                this.ratio = this._ease._calcEnd ? this._ease.getRatio(1) : 1;
+                if (!this._reversed ) {
+                    isComplete = true;
+                    callback = "onComplete";
+                }
+                if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
+                    if (this._startTime === this._timeline._duration) { //if a zero-duration tween is at the VERY end of a timeline and that timeline renders at its end, it will typically add a tiny bit of cushion to the render time to prevent rounding errors from getting in the way of tweens rendering their VERY end. If we then reverse() that timeline, the zero-duration tween will trigger its onReverseComplete even though technically the playhead didn't pass over it again. It's a very specific edge case we must accommodate.
+                        time = 0;
+                    }
+                    if (time === 0 || prevRawPrevTime < 0 || prevRawPrevTime === _tinyNum) if (prevRawPrevTime !== time) {
+                        force = true;
+                        if (prevRawPrevTime > _tinyNum) {
+                            callback = "onReverseComplete";
+                        }
+                    }
+                    this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                }
+
+            } else if (time < 0.0000001) { //to work around occasional floating point math artifacts, round super small values to 0.
+                this._totalTime = this._time = 0;
+                this.ratio = this._ease._calcEnd ? this._ease.getRatio(0) : 0;
+                if (prevTime !== 0 || (duration === 0 && prevRawPrevTime > 0 && prevRawPrevTime !== _tinyNum)) {
+                    callback = "onReverseComplete";
+                    isComplete = this._reversed;
+                }
+                if (time < 0) {
+                    this._active = false;
+                    if (duration === 0) if (this._initted || !this.vars.lazy || force) { //zero-duration tweens are tricky because we must discern the momentum/direction of time in order to determine whether the starting values should be rendered or the ending values. If the "playhead" of its timeline goes past the zero-duration tween in the forward direction or lands directly on it, the end values should be rendered, but if the timeline's "playhead" moves past it in the backward direction (from a postitive time to a negative time), the starting values must be rendered.
+                        if (prevRawPrevTime >= 0) {
+                            force = true;
+                        }
+                        this._rawPrevTime = rawPrevTime = (!suppressEvents || time || prevRawPrevTime === time) ? time : _tinyNum; //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect. We set the _rawPrevTime to be a precise tiny number to indicate this scenario rather than using another property/variable which would increase memory usage. This technique is less readable, but more efficient.
+                    }
+                } else if (!this._initted) { //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
+                    force = true;
+                }
+            } else {
+                this._totalTime = this._time = time;
+
+                if (this._easeType) {
+                    var r = time / duration, type = this._easeType, pow = this._easePower;
+                    if (type === 1 || (type === 3 && r >= 0.5)) {
+                        r = 1 - r;
+                    }
+                    if (type === 3) {
+                        r *= 2;
+                    }
+                    if (pow === 1) {
+                        r *= r;
+                    } else if (pow === 2) {
+                        r *= r * r;
+                    } else if (pow === 3) {
+                        r *= r * r * r;
+                    } else if (pow === 4) {
+                        r *= r * r * r * r;
+                    }
+
+                    if (type === 1) {
+                        this.ratio = 1 - r;
+                    } else if (type === 2) {
+                        this.ratio = r;
+                    } else if (time / duration < 0.5) {
+                        this.ratio = r / 2;
+                    } else {
+                        this.ratio = 1 - (r / 2);
+                    }
+
+                } else {
+                    this.ratio = this._ease.getRatio(time / duration);
+                }
+            }
+
+            if (this._time === prevTime && !force) {
+                return;
+            } else if (!this._initted) {
+                this._init();
+                if (!this._initted || this._gc) { //immediateRender tweens typically won't initialize until the playhead advances (_time is greater than 0) in order to ensure that overwriting occurs properly. Also, if all of the tweening properties have been overwritten (which would cause _gc to be true, as set in _init()), we shouldn't continue otherwise an onStart callback could be called for example.
+                    return;
+                } else if (!force && this._firstPT && ((this.vars.lazy !== false && this._duration) || (this.vars.lazy && !this._duration))) {
+                    this._time = this._totalTime = prevTime;
+                    this._rawPrevTime = prevRawPrevTime;
+                    _lazyTweens.push(this);
+                    this._lazy = time;
+                    return;
+                }
+                //_ease is initially set to defaultEase, so now that init() has run, _ease is set properly and we need to recalculate the ratio. Overall this is faster than using conditional logic earlier in the method to avoid having to set ratio twice because we only init() once but renderTime() gets called VERY frequently.
+                if (this._time && !isComplete) {
+                    this.ratio = this._ease.getRatio(this._time / duration);
+                } else if (isComplete && this._ease._calcEnd) {
+                    this.ratio = this._ease.getRatio((this._time === 0) ? 0 : 1);
+                }
+            }
+            if (this._lazy !== false) { //in case a lazy render is pending, we should flush it because the new render is occuring now (imagine a lazy tween instantiating and then immediately the user calls tween.seek(tween.duration()), skipping to the end - the end render would be forced, and then if we didn't flush the lazy render, it'd fire AFTER the seek(), rendering it at the wrong time.
+                this._lazy = false;
+            }
+            if (!this._active) if (!this._paused && this._time !== prevTime && time >= 0) {
+                this._active = true;  //so that if the user renders a tween (as opposed to the timeline rendering it), the timeline is forced to re-render and align it with the proper time/frame on the next rendering cycle. Maybe the tween already finished but the user manually re-renders it as halfway done.
+            }
+            if (prevTime === 0) {
+                if (this._startAt) {
+                    if (time >= 0) {
+                        this._startAt.render(time, suppressEvents, force);
+                    } else if (!callback) {
+                        callback = "_dummyGS"; //if no callback is defined, use a dummy value just so that the condition at the end evaluates as true because _startAt should render AFTER the normal render loop when the time is negative. We could handle this in a more intuitive way, of course, but the render loop is the MOST important thing to optimize, so this technique allows us to avoid adding extra conditional logic in a high-frequency area.
+                    }
+                }
+                if (this.vars.onStart) if (this._time !== 0 || duration === 0) if (!suppressEvents) {
+                    this.vars.onStart.apply(this.vars.onStartScope || this, this.vars.onStartParams || _blankArray);
+                }
+            }
+
+            pt = this._firstPT;
+            while (pt) {
+                if (pt.f) {
+                    pt.t[pt.p](pt.c * this.ratio + pt.s);
+                } else {
+                    pt.t[pt.p] = pt.c * this.ratio + pt.s;
+                }
+                pt = pt._next;
+            }
+
+            if (this._onUpdate) {
+                if (time < 0) if (this._startAt && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
+                    this._startAt.render(time, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
+                }
+                if (!suppressEvents) if (this._time !== prevTime || isComplete) {
+                    this._onUpdate.apply(this.vars.onUpdateScope || this, this.vars.onUpdateParams || _blankArray);
+                }
+            }
+
+            if (callback) if (!this._gc) { //check _gc because there's a chance that kill() could be called in an onUpdate
+                if (time < 0 && this._startAt && !this._onUpdate && this._startTime) { //if the tween is positioned at the VERY beginning (_startTime 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
+                    this._startAt.render(time, suppressEvents, force);
+                }
+                if (isComplete) {
+                    if (this._timeline.autoRemoveChildren) {
+                        this._enabled(false, false);
+                    }
+                    this._active = false;
+                }
+                if (!suppressEvents && this.vars[callback]) {
+                    this.vars[callback].apply(this.vars[callback + "Scope"] || this, this.vars[callback + "Params"] || _blankArray);
+                }
+                if (duration === 0 && this._rawPrevTime === _tinyNum && rawPrevTime !== _tinyNum) { //the onComplete or onReverseComplete could trigger movement of the playhead and for zero-duration tweens (which must discern direction) that land directly back on their start time, we don't want to fire again on the next render. Think of several addPause()'s in a timeline that forces the playhead to a certain spot, but what if it's already paused and another tween is tweening the "time" of the timeline? Each time it moves [forward] past that spot, it would move back, and since suppressEvents is true, it'd reset _rawPrevTime to _tinyNum so that when it begins again, the callback would fire (so ultimately it could bounce back and forth during that tween). Again, this is a very uncommon scenario, but possible nonetheless.
+                    this._rawPrevTime = 0;
+                }
+            }
+
+        };
+
+        p._kill = function(vars, target) {
+            if (vars === "all") {
+                vars = null;
+            }
+            if (vars == null) if (target == null || target === this.target) {
+                this._lazy = false;
+                return this._enabled(false, false);
+            }
+            target = (typeof(target) !== "string") ? (target || this._targets || this.target) : TweenLite.selector(target) || target;
+            var i, overwrittenProps, p, pt, propLookup, changed, killProps, record;
+            if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {
+                i = target.length;
+                while (--i > -1) {
+                    if (this._kill(vars, target[i])) {
+                        changed = true;
+                    }
+                }
+            } else {
+                if (this._targets) {
+                    i = this._targets.length;
+                    while (--i > -1) {
+                        if (target === this._targets[i]) {
+                            propLookup = this._propLookup[i] || {};
+                            this._overwrittenProps = this._overwrittenProps || [];
+                            overwrittenProps = this._overwrittenProps[i] = vars ? this._overwrittenProps[i] || {} : "all";
+                            break;
+                        }
+                    }
+                } else if (target !== this.target) {
+                    return false;
+                } else {
+                    propLookup = this._propLookup;
+                    overwrittenProps = this._overwrittenProps = vars ? this._overwrittenProps || {} : "all";
+                }
+
+                if (propLookup) {
+                    killProps = vars || propLookup;
+                    record = (vars !== overwrittenProps && overwrittenProps !== "all" && vars !== propLookup && (typeof(vars) !== "object" || !vars._tempKill)); //_tempKill is a super-secret way to delete a particular tweening property but NOT have it remembered as an official overwritten property (like in BezierPlugin)
+                    for (p in killProps) {
+                        if ((pt = propLookup[p])) {
+                            if (pt.pg && pt.t._kill(killProps)) {
+                                changed = true; //some plugins need to be notified so they can perform cleanup tasks first
+                            }
+                            if (!pt.pg || pt.t._overwriteProps.length === 0) {
+                                if (pt._prev) {
+                                    pt._prev._next = pt._next;
+                                } else if (pt === this._firstPT) {
+                                    this._firstPT = pt._next;
+                                }
+                                if (pt._next) {
+                                    pt._next._prev = pt._prev;
+                                }
+                                pt._next = pt._prev = null;
+                            }
+                            delete propLookup[p];
+                        }
+                        if (record) {
+                            overwrittenProps[p] = 1;
+                        }
+                    }
+                    if (!this._firstPT && this._initted) { //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
+                        this._enabled(false, false);
+                    }
+                }
+            }
+            return changed;
+        };
+
+        p.invalidate = function() {
+            if (this._notifyPluginsOfEnabled) {
+                TweenLite._onPluginEvent("_onDisable", this);
+            }
+            this._firstPT = null;
+            this._overwrittenProps = null;
+            this._onUpdate = null;
+            this._startAt = null;
+            this._initted = this._active = this._notifyPluginsOfEnabled = this._lazy = false;
+            this._propLookup = (this._targets) ? {} : [];
+            return this;
+        };
+
+        p._enabled = function(enabled, ignoreTimeline) {
+            if (!_tickerActive) {
+                _ticker.wake();
+            }
+            if (enabled && this._gc) {
+                var targets = this._targets,
+                    i;
+                if (targets) {
+                    i = targets.length;
+                    while (--i > -1) {
+                        this._siblings[i] = _register(targets[i], this, true);
+                    }
+                } else {
+                    this._siblings = _register(this.target, this, true);
+                }
+            }
+            Animation.prototype._enabled.call(this, enabled, ignoreTimeline);
+            if (this._notifyPluginsOfEnabled) if (this._firstPT) {
+                return TweenLite._onPluginEvent((enabled ? "_onEnable" : "_onDisable"), this);
+            }
+            return false;
+        };
+
+
+//----TweenLite static methods -----------------------------------------------------
+
+        TweenLite.to = function(target, duration, vars) {
+            return new TweenLite(target, duration, vars);
+        };
+
+        TweenLite.from = function(target, duration, vars) {
+            vars.runBackwards = true;
+            vars.immediateRender = (vars.immediateRender != false);
+            return new TweenLite(target, duration, vars);
+        };
+
+        TweenLite.fromTo = function(target, duration, fromVars, toVars) {
+            toVars.startAt = fromVars;
+            toVars.immediateRender = (toVars.immediateRender != false && fromVars.immediateRender != false);
+            return new TweenLite(target, duration, toVars);
+        };
+
+        TweenLite.delayedCall = function(delay, callback, params, scope, useFrames) {
+            return new TweenLite(callback, 0, {delay:delay, onComplete:callback, onCompleteParams:params, onCompleteScope:scope, onReverseComplete:callback, onReverseCompleteParams:params, onReverseCompleteScope:scope, immediateRender:false, useFrames:useFrames, overwrite:0});
+        };
+
+        TweenLite.set = function(target, vars) {
+            return new TweenLite(target, 0, vars);
+        };
+
+        TweenLite.getTweensOf = function(target, onlyActive) {
+            if (target == null) { return []; }
+            target = (typeof(target) !== "string") ? target : TweenLite.selector(target) || target;
+            var i, a, j, t;
+            if ((_isArray(target) || _isSelector(target)) && typeof(target[0]) !== "number") {
+                i = target.length;
+                a = [];
+                while (--i > -1) {
+                    a = a.concat(TweenLite.getTweensOf(target[i], onlyActive));
+                }
+                i = a.length;
+                //now get rid of any duplicates (tweens of arrays of objects could cause duplicates)
+                while (--i > -1) {
+                    t = a[i];
+                    j = i;
+                    while (--j > -1) {
+                        if (t === a[j]) {
+                            a.splice(i, 1);
+                        }
+                    }
+                }
+            } else {
+                a = _register(target).concat();
+                i = a.length;
+                while (--i > -1) {
+                    if (a[i]._gc || (onlyActive && !a[i].isActive())) {
+                        a.splice(i, 1);
+                    }
+                }
+            }
+            return a;
+        };
+
+        TweenLite.killTweensOf = TweenLite.killDelayedCallsTo = function(target, onlyActive, vars) {
+            if (typeof(onlyActive) === "object") {
+                vars = onlyActive; //for backwards compatibility (before "onlyActive" parameter was inserted)
+                onlyActive = false;
+            }
+            var a = TweenLite.getTweensOf(target, onlyActive),
+                i = a.length;
+            while (--i > -1) {
+                a[i]._kill(vars, target);
+            }
+        };
+
+
+
+/*
+ * ----------------------------------------------------------------
+ * TweenPlugin   (could easily be split out as a separate file/class, but included for ease of use (so that people don't need to include another <script> call before loading plugins which is easy to forget)
+ * ----------------------------------------------------------------
+ */
+        var TweenPlugin = _class("plugins.TweenPlugin", function(props, priority) {
+                    this._overwriteProps = (props || "").split(",");
+                    this._propName = this._overwriteProps[0];
+                    this._priority = priority || 0;
+                    this._super = TweenPlugin.prototype;
+                }, true);
+
+        p = TweenPlugin.prototype;
+        TweenPlugin.version = "1.10.1";
+        TweenPlugin.API = 2;
+        p._firstPT = null;
+
+        p._addTween = function(target, prop, start, end, overwriteProp, round) {
+            var c, pt;
+            if (end != null && (c = (typeof(end) === "number" || end.charAt(1) !== "=") ? Number(end) - start : parseInt(end.charAt(0) + "1", 10) * Number(end.substr(2)))) {
+                this._firstPT = pt = {_next:this._firstPT, t:target, p:prop, s:start, c:c, f:(typeof(target[prop]) === "function"), n:overwriteProp || prop, r:round};
+                if (pt._next) {
+                    pt._next._prev = pt;
+                }
+                return pt;
+            }
+        };
+
+        p.setRatio = function(v) {
+            var pt = this._firstPT,
+                min = 0.000001,
+                val;
+            while (pt) {
+                val = pt.c * v + pt.s;
+                if (pt.r) {
+                    val = Math.round(val);
+                } else if (val < min) if (val > -min) { //prevents issues with converting very small numbers to strings in the browser
+                    val = 0;
+                }
+                if (pt.f) {
+                    pt.t[pt.p](val);
+                } else {
+                    pt.t[pt.p] = val;
+                }
+                pt = pt._next;
+            }
+        };
+
+        p._kill = function(lookup) {
+            var a = this._overwriteProps,
+                pt = this._firstPT,
+                i;
+            if (lookup[this._propName] != null) {
+                this._overwriteProps = [];
+            } else {
+                i = a.length;
+                while (--i > -1) {
+                    if (lookup[a[i]] != null) {
+                        a.splice(i, 1);
+                    }
+                }
+            }
+            while (pt) {
+                if (lookup[pt.n] != null) {
+                    if (pt._next) {
+                        pt._next._prev = pt._prev;
+                    }
+                    if (pt._prev) {
+                        pt._prev._next = pt._next;
+                        pt._prev = null;
+                    } else if (this._firstPT === pt) {
+                        this._firstPT = pt._next;
+                    }
+                }
+                pt = pt._next;
+            }
+            return false;
+        };
+
+        p._roundProps = function(lookup, value) {
+            var pt = this._firstPT;
+            while (pt) {
+                if (lookup[this._propName] || (pt.n != null && lookup[ pt.n.split(this._propName + "_").join("") ])) { //some properties that are very plugin-specific add a prefix named after the _propName plus an underscore, so we need to ignore that extra stuff here.
+                    pt.r = value;
+                }
+                pt = pt._next;
+            }
+        };
+
+        TweenLite._onPluginEvent = function(type, tween) {
+            var pt = tween._firstPT,
+                changed, pt2, first, last, next;
+            if (type === "_onInitAllProps") {
+                //sorts the PropTween linked list in order of priority because some plugins need to render earlier/later than others, like MotionBlurPlugin applies its effects after all x/y/alpha tweens have rendered on each frame.
+                while (pt) {
+                    next = pt._next;
+                    pt2 = first;
+                    while (pt2 && pt2.pr > pt.pr) {
+                        pt2 = pt2._next;
+                    }
+                    if ((pt._prev = pt2 ? pt2._prev : last)) {
+                        pt._prev._next = pt;
+                    } else {
+                        first = pt;
+                    }
+                    if ((pt._next = pt2)) {
+                        pt2._prev = pt;
+                    } else {
+                        last = pt;
+                    }
+                    pt = next;
+                }
+                pt = tween._firstPT = first;
+            }
+            while (pt) {
+                if (pt.pg) if (typeof(pt.t[type]) === "function") if (pt.t[type]()) {
+                    changed = true;
+                }
+                pt = pt._next;
+            }
+            return changed;
+        };
+
+        TweenPlugin.activate = function(plugins) {
+            var i = plugins.length;
+            while (--i > -1) {
+                if (plugins[i].API === TweenPlugin.API) {
+                    _plugins[(new plugins[i]())._propName] = plugins[i];
+                }
+            }
+            return true;
+        };
+
+        //provides a more concise way to define plugins that have no dependencies besides TweenPlugin and TweenLite, wrapping common boilerplate stuff into one function (added in 1.9.0). You don't NEED to use this to define a plugin - the old way still works and can be useful in certain (rare) situations.
+        _gsDefine.plugin = function(config) {
+            if (!config || !config.propName || !config.init || !config.API) { throw "illegal plugin definition."; }
+            var propName = config.propName,
+                priority = config.priority || 0,
+                overwriteProps = config.overwriteProps,
+                map = {init:"_onInitTween", set:"setRatio", kill:"_kill", round:"_roundProps", initAll:"_onInitAllProps"},
+                Plugin = _class("plugins." + propName.charAt(0).toUpperCase() + propName.substr(1) + "Plugin",
+                    function() {
+                        TweenPlugin.call(this, propName, priority);
+                        this._overwriteProps = overwriteProps || [];
+                    }, (config.global === true)),
+                p = Plugin.prototype = new TweenPlugin(propName),
+                prop;
+            p.constructor = Plugin;
+            Plugin.API = config.API;
+            for (prop in map) {
+                if (typeof(config[prop]) === "function") {
+                    p[map[prop]] = config[prop];
+                }
+            }
+            Plugin.version = config.version;
+            TweenPlugin.activate([Plugin]);
+            return Plugin;
+        };
+
+
+        //now run through all the dependencies discovered and if any are missing, log that to the console as a warning. This is why it's best to have TweenLite load last - it can check all the dependencies for you.
+        a = window._gsQueue;
+        if (a) {
+            for (i = 0; i < a.length; i++) {
+                a[i]();
+            }
+            for (p in _defLookup) {
+                if (!_defLookup[p].func) {
+                    //window.console.log("GSAP encountered missing dependency: com.greensock." + p);
+                }
+            }
+        }
+
+        _tickerActive = false; //ensures that the first official animation forces a ticker.tick() to update the time when it is instantiated
+
+})(window);
+
+angular.module('b2b.att.collapse', ['b2b.att.transition'])
+
+// The collapsible directive indicates a block of html that will expand and collapse
+.directive('b2bCollapse', ['$transition', function($transition) {
+    // CSS transitions don't work with height: auto, so we have to manually change the height to a
+    // specific value and then once the animation completes, we can reset the height to auto.
+    // Unfortunately if you do this while the CSS transitions are specified (i.e. in the CSS class
+    // "collapse") then you trigger a change to height 0 in between.
+    // The fix is to remove the "collapse" CSS class while changing the height back to auto - phew!
+
+    var props = {
+        open: {
+            marginTop: null,
+            marginBottom: null,
+            paddingTop: null,
+            paddingBottom: null,
+            display: 'block'
+        },
+        closed: {
+            marginTop: 0,
+            marginBottom: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            display: 'none'
+        }
+    };
+
+    var fixUpHeight = function(scope, element, height) {
+        // We remove the collapse CSS class to prevent a transition when we change to height: auto
+        element.removeClass('b2bCollapse');
+        element.css({height: height});
+        //adjusting for any margin or padding
+        if (height === 0) {
+            element.css(props.closed);
+        } else {
+            element.css(props.open);
+        }
+        // It appears that  reading offsetWidth makes the browser realise that we have changed the
+        // height already :-/
+        var x = element[0].offsetWidth;
+        element.addClass('b2bCollapse');
+    };
+
+    return {
+        link: function(scope, element, attrs) {
+            var isCollapsed;
+            var initialAnimSkip = true;
+            scope.$watch(function() {
+                return element[0].scrollHeight;
+            }, function(value) {
+                //The listener is called when scrollHeight changes
+                //It actually does on 2 scenarios: 
+                // 1. Parent is set to display none
+                // 2. angular bindings inside are resolved
+                //When we have a change of scrollHeight we are setting again the correct height if the group is opened
+                if (element[0].scrollHeight !== 0) {
+                    if (!isCollapsed) {
+                        if (initialAnimSkip) {
+                            fixUpHeight(scope, element, element[0].scrollHeight + 'px');
+                        } else {
+                            fixUpHeight(scope, element, 'auto');
+                            element.css({overflow: 'visible'});
+                        }
+                    }
+                }
+            });
+
+            scope.$watch(attrs.b2bCollapse, function(value) {
+                if (value) {
+                    collapse();
+                } else {
+                    expand();
+                }
+            });
+
+
+            var currentTransition;
+            var doTransition = function(change) {
+                if (currentTransition) {
+                    currentTransition.cancel();
+                }
+                currentTransition = $transition(element, change);
+                currentTransition.then(
+                        function() {
+                            currentTransition = undefined;
+                        },
+                        function() {
+                            currentTransition = undefined;
+                        }
+                );
+                return currentTransition;
+            };
+
+            var expand = function() {
+                scope.postTransition = true; 
+                if (initialAnimSkip) {
+                    initialAnimSkip = false;
+                    if (!isCollapsed) {
+                        fixUpHeight(scope, element, 'auto');
+                    }
+                } else {
+                    //doTransition({ height : element[0].scrollHeight + 'px' })
+                    doTransition(angular.extend({height: element[0].scrollHeight + 'px'}, props.open))
+                            .then(function() {
+                                // This check ensures that we don't accidentally update the height if the user has closed
+                                // the group while the animation was still running
+                                if (!isCollapsed) {
+                                    fixUpHeight(scope, element, 'auto');
+                                }
+                            });
+                }
+                isCollapsed = false;
+            };
+
+            var collapse = function() {
+                isCollapsed = true;
+                if (initialAnimSkip) {
+                    initialAnimSkip = false;
+                    fixUpHeight(scope, element, 0);
+                } else {
+                    fixUpHeight(scope, element, element[0].scrollHeight + 'px');
+                    doTransition(angular.extend({height: 0}, props.closed)).then(function() {
+                        scope.postTransition = false;
+                    });
+                    element.css({overflow: 'hidden'});
+                }
+            };
+        }
+    };
+}]);
+angular.module('b2b.att.position', [])
+
+.factory('$position', ['$document', '$window', function ($document, $window) {
+    function getStyle(el, cssprop) {
+        if (el.currentStyle) { //IE
+            return el.currentStyle[cssprop];
+        } else if ($window.getComputedStyle) {
+            return $window.getComputedStyle(el)[cssprop];
+        }
+        // finally try and get inline style
+        return el.style[cssprop];
+    }
+
+    /**
+     * Checks if a given element is statically positioned
+     * @param element - raw DOM element
+     */
+    function isStaticPositioned(element) {
+        return (getStyle(element, "position") || 'static') === 'static';
+    }
+
+    /**
+     * returns the closest, non-statically positioned parentOffset of a given element
+     * @param element
+     */
+    var parentOffsetEl = function (element) {
+        var docDomEl = $document[0];
+        var offsetParent = element.offsetParent || docDomEl;
+        while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent)) {
+            offsetParent = offsetParent.offsetParent;
+        }
+        return offsetParent || docDomEl;
+    };
+
+    return {
+        /**
+         * Provides read-only equivalent of jQuery's position function:
+         * http://api.jquery.com/position/
+         */
+        position: function (element) {
+            var elBCR = this.offset(element);
+            var offsetParentBCR = {
+                top: 0,
+                left: 0
+            };
+            var offsetParentEl = parentOffsetEl(element[0]);
+            if (offsetParentEl !== $document[0]) {
+                offsetParentBCR = this.offset(angular.element(offsetParentEl));
+                offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
+                offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
+            }
+
+            return {
+                width: element.prop('offsetWidth'),
+                height: element.prop('offsetHeight'),
+                top: elBCR.top - offsetParentBCR.top,
+                left: elBCR.left - offsetParentBCR.left
+            };
+        },
+
+        /**
+         * Provides read-only equivalent of jQuery's offset function:
+         * http://api.jquery.com/offset/
+         */
+        offset: function (element) {
+            var boundingClientRect = element[0].getBoundingClientRect();
+            return {
+                width: element.prop('offsetWidth'),
+                height: element.prop('offsetHeight'),
+                top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop),
+                left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft || $document[0].documentElement.scrollLeft)
+            };
+        },
+        
+         /**
+         * Provides functionality to check whether an element is in view port.
+         */
+        isElementInViewport: function (element) {
+            if (element) {
+                var rect = element[0].getBoundingClientRect();
+                return (
+                    rect.top >= 0 &&
+                    rect.left >= 0 &&
+                    rect.bottom <= ($window.innerHeight || $document[0].documentElement.clientHeight) &&
+                    rect.right <= ($window.innerWidth || $document[0].documentElement.clientWidth)
+                );
+            } else {
+                return false;
+            }
+        }
+    };
+}])
+
+.factory('$isElement', [function () {
+    var isElement = function (currentElem, targetElem, alternateElem) {
+        if (currentElem[0] === targetElem[0]) {
+            return true;
+        } else if (currentElem[0] === alternateElem[0]) {
+            return false;
+        } else {
+            return isElement((currentElem.parent()[0] && currentElem.parent()) || targetElem, targetElem, alternateElem);
+        }
+    };
+
+    return isElement;
+}])
+
+.directive('attPosition', ['$position', function ($position) {
+    return {
+        restrict: 'A',
+        link: function (scope, elem, attr) {
+            scope.$watchCollection(function () {
+                return $position.position(elem);
+            }, function (value) {
+                scope[attr.attPosition] = value;
+            });
+        }
+    };
+}]);
+
+angular.module('b2b.att.transition', [])
+
+.factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) {
+
+  var $transition = function(element, trigger, options) {
+    options = options || {};
+    var deferred = $q.defer();
+    var endEventName = $transition[options.animation ? "animationEndEventName" : "transitionEndEventName"];
+
+    var transitionEndHandler = function() {
+      $rootScope.$apply(function() {
+        element.unbind(endEventName, transitionEndHandler);
+        deferred.resolve(element);
+      });
+    };
+
+    if (endEventName) {
+      element.bind(endEventName, transitionEndHandler);
+    }
+
+    // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
+    $timeout(function() {
+      if ( angular.isString(trigger) ) {
+        element.addClass(trigger);
+      } else if ( angular.isFunction(trigger) ) {
+        trigger(element);
+      } else if ( angular.isObject(trigger) ) {
+        element.css(trigger);
+      }
+      //If browser does not support transitions, instantly resolve
+      if ( !endEventName ) {
+        deferred.resolve(element);
+      }
+    }, 100);
+
+    // Add our custom cancel function to the promise that is returned
+    // We can call this if we are about to run a new transition, which we know will prevent this transition from ending,
+    // i.e. it will therefore never raise a transitionEnd event for that transition
+    deferred.promise.cancel = function() {
+      if ( endEventName ) {
+        element.unbind(endEventName, transitionEndHandler);
+      }
+      deferred.reject('Transition cancelled');
+    };
+
+    return deferred.promise;
+  };
+
+  // Work out the name of the transitionEnd event
+  var transElement = document.createElement('trans');
+  var transitionEndEventNames = {
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'transitionend',
+    'OTransition': 'oTransitionEnd',
+    'transition': 'transitionend'
+  };
+  var animationEndEventNames = {
+    'WebkitTransition': 'webkitAnimationEnd',
+    'MozTransition': 'animationend',
+    'OTransition': 'oAnimationEnd',
+    'transition': 'animationend'
+  };
+  function findEndEventName(endEventNames) {
+    for (var name in endEventNames){
+      if (transElement.style[name] !== undefined) {
+        return endEventNames[name];
+      }
+    }
+  }
+  $transition.transitionEndEventName = findEndEventName(transitionEndEventNames);
+  $transition.animationEndEventName = findEndEventName(animationEndEventNames);
+  return $transition;
+}])
+
+.factory('$scrollTo', ['$window', function($window) {
+    var $scrollTo = function(offsetLeft, offsetTop, duration) {
+        TweenMax.to($window, duration || 1, {scrollTo: {y: offsetTop, x: offsetLeft}, ease: Power4.easeOut});
+    };
+    return $scrollTo;
+}])
+.factory('animation', function(){
+    return TweenMax;
+})
+.factory('$progressBar', function(){
+
+   //Provides a function to pass in code for closure purposes
+   var loadingAnimationCreator = function(onUpdateCallback){
+
+      //Use closure to setup some resuable code
+      var loadingAnimation = function(callback, duration){
+          TweenMax.to({}, duration, {
+              onUpdateParams: ["{self}"],
+              onUpdate: onUpdateCallback,
+              onComplete: callback
+          });
+      };
+      //Returns a function that takes a callback function and a duration for the animation
+      return (function(){
+        return loadingAnimation;
+      })();
+    };
+
+  return loadingAnimationCreator;
+})
+.factory('$height', function(){
+  var heightAnimation = function(element,duration,height,alpha){
+    TweenMax.to(element,
+      duration,
+      {height:height, autoAlpha:alpha},
+      0);
+  };
+  return heightAnimation;
+});
+angular.module('b2b.att.utilities', ['ngSanitize'])
+.constant('b2bUtilitiesConfig', {
+    prev: '37',
+    up: '38',
+    next: '39',
+    down: '40',
+    type: 'list',
+    columns: 1,
+    enableSearch: false,
+    searchTimer: 200,
+    circularTraversal: false
+})
+.constant('b2bWhenScrollEndsConstants', {
+    'threshold': 100,
+    'width': 0,
+    'height': 0
+})
+// All breakpoints ranges from >= min and < max
+.constant('b2bAwdBreakpoints', {
+    breakpoints: {
+        mobile: {
+            min: 1,
+            max: 768
+        },
+        tablet: {
+            min: 768,
+            max: 1025
+        },
+        desktop: {
+            min: 1025,
+            max: 1920
+        }
+    }
+})
+.filter('groupBy', function ($timeout) {
+    //Custom GroupBy Filter for treeNav, returns key string and value.childarray as set of grouped elements
+    return function (data, key) {
+        if (!key) return data;
+        var outputPropertyName = '__groupBy__' + key;
+        if (!data[outputPropertyName]) {
+            var result = {};
+            for (var i = 0; i < data.length; i++) {
+                if (!result[data[i][key]])
+                    result[data[i][key]] = {};
+                if (!result[data[i][key]].childArray) {
+                    result[data[i][key]].childArray = [];
+                }
+                result[data[i][key]].childArray.push(data[i]);
+                if (data[i].activeGrp && data[i].activeGrp == true) {
+                    console.log('make ' + data[i].grpChild + ' active');
+                    result[data[i][key]].showGroup = true;
+                }
+            }
+            Object.defineProperty(result, 'length', {enumerable: false,value: Object.keys(result).length});
+            Object.defineProperty(data, outputPropertyName, {enumerable: false,configurable: true,writable:false,value:result});
+            $timeout(function(){delete data[outputPropertyName];},0,false);
+        }
+        return data[outputPropertyName];
+    };
+})
+.filter('searchObjectPropertiesFilter', [function() {
+    return function(items, searchText, attrs) {
+        if(!searchText){
+            return items;
+        }
+        var filtered = [];
+        searchText = searchText.toLowerCase();
+        angular.forEach(items, function(item) {
+            angular.forEach(attrs, function(attr) {
+                if (item.hasOwnProperty(attr) && item[attr].toLowerCase().includes(searchText)) {
+                    filtered.push(item);
+                    return;
+                }
+            });
+        });
+        return filtered;
+    };
+}])
+.filter('unsafe',[ '$sce', function ($sce) { 
+    return function(val){ 
+       return $sce.trustAsHtml(val); 
+    }; 
+}])
+.filter('b2bHighlight', function () {
+    function escapeRegexp(queryToEscape) {
+        return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
+    }
+    return function (matchItem, query, className) {
+        return query && matchItem ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class=\"' + className + '\">$&</span>') : matchItem;
+    }
+})
+/*License (MIT)
+Copyright © 2013 Matt Diamond
+https://github.com/cwilso/AudioRecorder/blob/master/js/recorderjs/recorder.js
+*/
+.factory('b2bRecorder', function() {
+
+    var Recorder = function(source, cfg) {
+        var WORKER_PATH = 'recorderWorker.js';
+        var config = cfg || {};
+        var bufferLen = config.bufferLen || 4096;
+        this.context = source.context;
+        if(!this.context.createScriptProcessor) {
+            this.node = this.context.createJavacriptProcessor(bufferLen, 2, 2);
+        } else {
+            this.node = this.context.createScriptProcessor(bufferLen, 2, 2);
+        }
+        var workerCode = 'function init(a){sampleRate=a.sampleRate}function record(a){recBuffersL.push(a[0]),recBuffersR.push(a[1]),recLength+=a[0].length}function exportWAV(a){var b=mergeBuffers(recBuffersL,recLength),c=mergeBuffers(recBuffersR,recLength),d=interleave(b,c),e=encodeWAV(d),f=new Blob([e],{type:a});this.postMessage(f)}function exportMonoWAV(a){var b=mergeBuffers(recBuffersL,recLength),c=encodeWAV(b,!0),d=new Blob([c],{type:a});this.postMessage(d)}function getBuffers(){var a=[];a.push(mergeBuffers(recBuffersL,recLength)),a.push(mergeBuffers(recBuffersR,recLength)),this.postMessage(a)}function clear(){recLength=0,recBuffersL=[],recBuffersR=[]}function mergeBuffers(a,b){for(var c=new Float32Array(b),d=0,e=0;e<a.length;e++)c.set(a[e],d),d+=a[e].length;return c}function interleave(a,b){for(var c=a.length+b.length,d=new Float32Array(c),e=0,f=0;e<c;)d[e++]=a[f],d[e++]=b[f],f++;return d}function floatTo16BitPCM(a,b,c){for(var d=0;d<c.length;d++,b+=2){var e=Math.max(-1,Math.min(1,c[d]));a.setInt16(b,e<0?32768*e:32767*e,!0)}}function writeString(a,b,c){for(var d=0;d<c.length;d++)a.setUint8(b+d,c.charCodeAt(d))}function encodeWAV(a,b){var c=new ArrayBuffer(44+2*a.length),d=new DataView(c);return writeString(d,0,"RIFF"),d.setUint32(4,32+2*a.length,!0),writeString(d,8,"WAVE"),writeString(d,12,"fmt "),d.setUint32(16,16,!0),d.setUint16(20,1,!0),d.setUint16(22,b?1:2,!0),d.setUint32(24,sampleRate,!0),d.setUint32(28,4*sampleRate,!0),d.setUint16(32,4,!0),d.setUint16(34,16,!0),writeString(d,36,"data"),d.setUint32(40,2*a.length,!0),floatTo16BitPCM(d,44,a),d}var recLength=0,recBuffersL=[],recBuffersR=[],sampleRate;this.onmessage=function(a){switch(a.data.command){case"init":init(a.data.config);break;case"record":record(a.data.buffer);break;case"exportWAV":exportWAV(a.data.type);break;case"exportMonoWAV":exportMonoWAV(a.data.type);break;case"getBuffers":getBuffers();break;case"clear":clear()}};';
+        var blob = new Blob([workerCode]);
+
+        var worker = new Worker(window.URL.createObjectURL(blob)); //TODO: Use a blob instead
+        worker.postMessage({
+            command: 'init',
+            config: {
+                sampleRate: this.context.sampleRate
+            }
+        });
+        var recording = false,
+            currCallback;
+
+        this.node.onaudioprocess = function(e) {
+            if (!recording) return;
+            worker.postMessage({
+                command: 'record',
+                buffer: [
+                    e.inputBuffer.getChannelData(0),
+                    e.inputBuffer.getChannelData(1)
+                ]
+            });
+        };
+
+        this.configure = function(cfg) {
+            for (var prop in cfg) {//TODO: look into using angular.extend() here
+                if (cfg.hasOwnProperty(prop)) {
+                    config[prop] = cfg[prop];
+                }
+            }
+        };
+
+        this.record = function() {
+            recording = true;
+        };
+
+        this.stop = function() {
+            recording = false;
+        };
+
+        this.clear = function() {
+            worker.postMessage({ command: 'clear' });
+            window.URL.revokeObjectURL(blob);
+        };
+
+        this.getBuffers = function(cb) {
+            currCallback = cb || config.callback;
+            worker.postMessage({ command: 'getBuffers' });
+        };
+
+        this.exportWAV = function(cb, type) {
+            currCallback = cb || config.callback;
+            type = type || config.type || 'audio/wav';
+            if (!currCallback) throw new Error('[b2bRecorder]: Callback not set!');
+            worker.postMessage({
+                command: 'exportWAV',
+                type: type
+            });
+        };
+
+        this.exportMonoWAV = function(cb, type) {
+            currCallback = cb || config.callback;
+            type = type || config.type || 'audio/wav';
+            if (!currCallback) throw new Error('[b2bRecorder]: Callback not set!');
+            worker.postMessage({
+                command: 'exportMonoWAV',
+                type: type
+            });
+        };
+
+        worker.onmessage = function(e) {
+            var blob = e.data;
+            currCallback(blob);
+        };
+
+        source.connect(this.node);
+        this.node.connect(this.context.destination); // if the script node is not connected to an output the "onaudioprocess" event is not triggerd in Chrome
+
+    };
+
+    return Recorder;
+
+})
+.factory('b2bViewport', function() {
+  /* Source: https://gist.github.com/bjankord/2399828 */
+  var _viewportWidth = function() {
+    var vpw;
+    var webkit = (!(window.webkitConvertPointFromNodeToPage == null));
+    
+    // Webkit:
+    if ( webkit ) {
+      var vpwtest = document.createElement( "div" );
+      // Sets test div to width 100%, !important overrides any other misc. box model styles that may be set in the CSS
+      vpwtest.style.cssText = "width:100% !important; margin:0 !important; padding:0 !important; border:none !important;";
+      document.documentElement.insertBefore( vpwtest, document.documentElement.firstChild );
+      vpw = vpwtest.offsetWidth;
+      document.documentElement.removeChild( vpwtest );
+    }
+    // IE 6-8:
+    else if ( window.innerWidth === undefined ) { 
+      vpw = document.documentElement.clientWidth; 
+    }
+    // Other:
+    else{
+      vpw =  window.innerWidth;
+    }
+
+    return (vpw);
+  }
+  return {
+    viewportWidth: _viewportWidth
+  };
+})
+.directive('b2bWhenScrollEnds', function(b2bWhenScrollEndsConstants, $log) {
+    return {
+        restrict: 'A',
+        link: function (scope, element, attrs) {
+            /**
+            * Exposed Attributes:
+            *       threshold - integer - number of pixels before scrollbar hits end that callback is called
+            *       width - integer - override for element's width (px)
+            *       height - integer - override for element's height (px)
+            *       axis - string - x/y for scroll bar axis
+            */
+            var threshold = parseInt(attrs.threshold, 10) || b2bWhenScrollEndsConstants.threshold;
+
+            if (!attrs.axis || attrs.axis === '') {
+                $log.warn('axis attribute must be defined for b2bWhenScrollEnds.');
+                return;
+            }
+
+            if (attrs.axis === 'x') {
+                visibleWidth = parseInt(attrs.width, 10) || b2bWhenScrollEndsConstants.width;
+                if (element.css('width')) {
+                    visibleWidth = element.css('width').split('px')[0];  
+                }
+
+                element[0].addEventListener('scroll', function() {
+                    var scrollableWidth = element.prop('scrollWidth');
+                    if (scrollableWidth === undefined) {
+                        scrollableWidth = 1;
+                    }
+                    var hiddenContentWidth = scrollableWidth - visibleWidth;
+
+                    if (hiddenContentWidth - element[0].scrollLeft <= threshold) {
+                        /* Scroll almost at bottom, load more rows */
+                        scope.$apply(attrs.b2bWhenScrollEnds);
+                    }
+                });
+            } else if (attrs.axis === 'y') {
+                visibleHeight = parseInt(attrs.height, 10) || b2bWhenScrollEndsConstants.height;
+                if (element.css('width')) {
+                    visibleHeight = element.css('height').split('px')[0]; 
+                }
+
+                element[0].addEventListener('scroll', function() {
+                    var scrollableHeight = element.prop('scrollHeight');
+                    if (scrollableHeight === undefined) {
+                        scrollableHeight = 1;
+                    }
+                    var hiddenContentHeight = scrollableHeight - visibleHeight;
+
+                    if (hiddenContentHeight - element[0].scrollTop <= threshold) {
+                        /* Scroll almost at bottom, load more rows */
+                        scope.$apply(attrs.b2bWhenScrollEnds);
+                    }
+                });
+            }
+        }
+    };
+})
+
+.factory('$windowBind', ['$window', '$timeout', function($window, $timeout) {
+    var win = angular.element($window);
+    var _scroll = function (flag, callbackFunc, scope) {
+        scope.$watch(flag, function (val) {
+            $timeout(function () {
+                if (val) {
+                    win.bind('scroll', callbackFunc);
+                } else {
+                    win.unbind('scroll', callbackFunc);
+                }
+            });
+        });
+    };
+
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+             requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    var _resize = function(callbackFunc, scope) {
+        throttle("resize", "optimizedResize");
+        window.addEventListener("optimizedResize", function(event) {
+            callbackFunc();
+            //win.bind(event, callbackFunc);
+            if (!scope.$$phase) {
+                scope.$digest();
+            }
+        });
+    };
+
+    var _click = function (flag, callbackFunc, scope) {
+        scope.$watch(flag, function (val) {
+            $timeout(function () {
+                if (val) {
+                    win.bind('click', callbackFunc);
+                } else {
+                    win.unbind('click', callbackFunc);
+                }
+            });
+        });
+    };
+
+    var _event = function (event, flag, callbackFunc, scope, timeoutFlag, timeoutValue) {
+        if (timeoutFlag) {
+            if (!(timeoutValue)) {
+                timeoutValue = 0;
+            }
+            scope.$watch(flag, function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    $timeout(function () {
+                        if (newVal) {
+                            win.bind(event, callbackFunc);
+                        } else {
+                            win.unbind(event, callbackFunc);
+                        }
+                    }, timeoutValue);
+                }
+            });
+        } else {
+            scope.$watch(flag, function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    if (newVal) {
+                        win.bind(event, callbackFunc);
+                    } else {
+                        win.unbind(event, callbackFunc);
+                    }
+                }
+            });
+        }
+    };
+
+    return {
+        click: _click,
+        scroll: _scroll,
+        event: _event, 
+        resize: _resize
+    };
+}])
+
+.factory('keymap', function () {
+    return {
+        KEY: {
+            TAB: 9,
+            ENTER: 13,
+            ESC: 27,
+            SPACE: 32,
+            LEFT: 37,
+            UP: 38,
+            RIGHT: 39,
+            DOWN: 40,
+            SHIFT: 16,
+            CTRL: 17,
+            ALT: 18,
+            PAGE_UP: 33,
+            PAGE_DOWN: 34,
+            HOME: 36,
+            END: 35,
+            BACKSPACE: 8,
+            DELETE: 46,
+            COMMAND: 91
+        },
+        MAP: { 91 : "COMMAND", 8 : "BACKSPACE" , 9 : "TAB" , 13 : "ENTER" , 16 : "SHIFT" , 17 : "CTRL" , 18 : "ALT" , 19 : "PAUSEBREAK" , 20 : "CAPSLOCK" , 27 : "ESC" , 32 : "SPACE" , 33 : "PAGE_UP", 34 : "PAGE_DOWN" , 35 : "END" , 36 : "HOME" , 37 : "LEFT" , 38 : "UP" , 39 : "RIGHT" , 40 : "DOWN" , 43 : "+" , 44 : "PRINTSCREEN" , 45 : "INSERT" , 46 : "DELETE", 48 : "0" , 49 : "1" , 50 : "2" , 51 : "3" , 52 : "4" , 53 : "5" , 54 : "6" , 55 : "7" , 56 : "8" , 57 : "9" , 59 : ";", 61 : "=" , 65 : "A" , 66 : "B" , 67 : "C" , 68 : "D" , 69 : "E" , 70 : "F" , 71 : "G" , 72 : "H" , 73 : "I" , 74 : "J" , 75 : "K" , 76 : "L", 77 : "M" , 78 : "N" , 79 : "O" , 80 : "P" , 81 : "Q" , 82 : "R" , 83 : "S" , 84 : "T" , 85 : "U" , 86 : "V" , 87 : "W" , 88 : "X" , 89 : "Y" , 90 : "Z", 96 : "0" , 97 : "1" , 98 : "2" , 99 : "3" , 100 : "4" , 101 : "5" , 102 : "6" , 103 : "7" , 104 : "8" , 105 : "9", 106 : "*" , 107 : "+" , 109 : "-" , 110 : "." , 111 : "/", 112 : "F1" , 113 : "F2" , 114 : "F3" , 115 : "F4" , 116 : "F5" , 117 : "F6" , 118 : "F7" , 119 : "F8" , 120 : "F9" , 121 : "F10" , 122 : "F11" , 123 : "F12", 144 : "NUMLOCK" , 145 : "SCROLLLOCK" , 186 : ";" , 187 : "=" , 188 : "," , 189 : "-" , 190 : "." , 191 : "/" , 192 : "`" , 219 : "[" , 220 : "\\" , 221 : "]" , 222 : "'"
+        },
+        isControl: function (e) {
+            var k = e.keyCode;
+            switch (k) {
+            case this.KEY.COMMAND:
+            case this.KEY.SHIFT:
+            case this.KEY.CTRL:
+            case this.KEY.ALT:
+                return true;
+            default:;
+            }
+
+            if (e.metaKey) {
+                return true;
+            }
+
+            return false;
+        },
+        isFunctionKey: function (k) {
+            k = k.keyCode ? k.keyCode : k;
+            return k >= 112 && k <= 123;
+        },
+        isVerticalMovement: function (k) {
+            return ~[this.KEY.UP, this.KEY.DOWN].indexOf(k);
+        },
+        isHorizontalMovement: function (k) {
+            return ~[this.KEY.LEFT, this.KEY.RIGHT, this.KEY.BACKSPACE, this.KEY.DELETE].indexOf(k);
+        },
+        isAllowedKey: function (k) {
+            return (~[this.KEY.SPACE, this.KEY.ESC, this.KEY.ENTER].indexOf(k)) || this.isHorizontalMovement(k) || this.isVerticalMovement(k);
+        },
+        isNumericKey: function (e) {
+            var k = e.keyCode;
+            if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105)) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        isAlphaNumericKey: function (e) {
+            var k = e.keyCode;
+            if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 65 && k <= 90)) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    };
+})
+
+.factory('$isElement', [function () {
+    var isElement = function (currentElem, targetElem, alternateElem) {
+        if (currentElem[0] === targetElem[0]) {
+            return true;
+        } else if (currentElem[0] === alternateElem[0]) {
+            return false;
+        } else {
+            return isElement((currentElem.parent()[0] && currentElem.parent()) || targetElem, targetElem, alternateElem);
+        }
+    };
+
+    return isElement;
+}])
+
+.factory('events', function () {
+    var _stopPropagation = function (evt) {
+        if (evt.stopPropagation) {
+            evt.stopPropagation();
+        } else {
+            evt.returnValue = false;
+        }
+    };
+    var _preventDefault = function (evt) {
+        if (evt.preventDefault) {
+            evt.preventDefault();
+        } else {
+            evt.returnValue = false;
+        }
+    }
+    return {
+        stopPropagation: _stopPropagation,
+        preventDefault: _preventDefault
+    };
+})
+
+
+.factory('$documentBind', ['$document', '$timeout', function ($document, $timeout) {
+    var _click = function (flag, callbackFunc, scope) {
+        scope.$watch(flag, function (val) {
+            $timeout(function () {
+                if (val) {
+                    $document.bind('click', callbackFunc);
+                } else {
+                    $document.unbind('click', callbackFunc);
+                }
+            });
+        });
+    };
+
+    var _scroll = function (flag, callbackFunc, scope) {
+        scope.$watch(flag, function (val) {
+            $timeout(function () {
+                if (val) {
+                    $document.bind('scroll', callbackFunc);
+                } else {
+                    $document.unbind('scroll', callbackFunc);
+                }
+            });
+        });
+    };
+
+    var _event = function (event, flag, callbackFunc, scope, timeoutFlag, timeoutValue) {
+        if (timeoutFlag) {
+            if (!(timeoutValue)) {
+                timeoutValue = 0;
+            }
+            scope.$watch(flag, function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    $timeout(function () {
+                        if (newVal) {
+                            $document.bind(event, callbackFunc);
+                        } else {
+                            $document.unbind(event, callbackFunc);
+                        }
+                    }, timeoutValue);
+                }
+            });
+        } else {
+            scope.$watch(flag, function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    if (newVal) {
+                        $document.bind(event, callbackFunc);
+                    } else {
+                        $document.unbind(event, callbackFunc);
+                    }
+                }
+            });
+        }
+    };
+
+    return {
+        click: _click,
+        scroll: _scroll,
+        event: _event
+    };
+}])
+
+.directive('b2bOnlyNums', function (keymap) {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elm, attrs, ctrl) {
+            var maxChars = attrs.b2bOnlyNums ? attrs.b2bOnlyNums : 4;
+            elm.on('keydown', function (event) {
+                if ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which <= 105)) {
+                    // check for maximum characters allowed
+                    if (elm.val().length < maxChars){
+                        return true;
+                    } else {
+                        event.preventDefault();
+                        return false;
+                    }
+                } else if ([8, 9, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
+                    // to allow backspace, tab, enter, escape, arrows
+                    return true;
+                } else if (event.altKey || event.ctrlKey) {
+                    // to allow alter, control, and shift keys
+                    return true;
+                } else {
+                    // to stop others
+                    event.preventDefault();
+                    return false;
+                }
+            });
+
+            var validateString = function (value) {
+                if (angular.isUndefined(value) || value === null || value === '') {
+                    return ctrl.$modelValue;
+                }
+                return value;
+            };
+            ctrl.$parsers.unshift(validateString);
+        }
+    }
+})
+
+.directive('b2bKeyupClick', [ function () {
+    return {
+        restrict: 'A',
+        link: function (scope, elem, attr) {
+            var keyCode = [];
+            attr.$observe('b2bKeyupClick', function (value) {
+                if (value) {
+                    keyCode = value.split(',');
+                }
+            });
+            elem.bind('keydown keyup', function (ev) {
+                var keyCodeCondition = function () {
+                    var flag = false;
+                    if (!(ev.keyCode)) {
+                        if (ev.which) {
+                            ev.keyCode = ev.which;
+                        } else if (ev.charCode) {
+                            ev.keyCode = ev.charCode;
+                        }
+                    }
+                    if ((ev.keyCode && keyCode.indexOf(ev.keyCode.toString()) > -1)) {
+                        flag = true;
+                    }
+                    return flag;
+                };
+                if (ev.type === 'keydown' && keyCodeCondition()) {
+                    ev.preventDefault();
+                }
+                else if (ev.type === 'keyup' && keyCodeCondition()) {
+                    elem[0].click();
+                }
+            });
+        }
+    };
+}])
+
+.factory('b2bDOMHelper', function() {
+
+    var _isTabable = function(node) {
+        var element = angular.element(node);
+        var tagName = element[0].tagName.toUpperCase();
+
+        if (isHidden(element)) {
+            return false;
+        }
+        if (element.attr('tabindex') !== undefined) {
+            return (parseInt(element.attr('tabindex'), 10) >= 0);
+        }
+        if (tagName === 'A' || tagName === 'AREA' || tagName === 'BUTTON' || tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+            if (tagName === 'A' || tagName === 'AREA') {
+                // anchors/areas without href are not focusable
+                return (element[0].href !== '');
+            }
+            return !(element[0].disabled || element[0].readOnly);
+        }
+        return false;
+    };
+
+    function isValidChild(child) {
+        return child.nodeType == 1 && child.nodeName != 'SCRIPT' && child.nodeName != 'STYLE';
+    }
+    
+    function isHidden(obj) {
+        var elem = angular.element(obj);
+        var elemStyle = undefined;
+        if(obj instanceof HTMLElement){
+            elemStyle = window.getComputedStyle(obj);
+        }
+        else {
+            elemStyle = window.getComputedStyle(obj[0]);
+        }
+        return elem.hasClass('ng-hide') || elem.css('display') === 'none' || elemStyle.display === 'none' || elemStyle.visibility === 'hidden' || elem.css('visibility') === 'hidden';
+    }
+
+    function hasValidParent(obj) {
+        return (isValidChild(obj) && obj.parentElement.nodeName !== 'BODY');
+    }
+
+    function traverse(obj, fromTop) {
+        var obj = obj || document.getElementsByTagName('body')[0];
+        if (isValidChild(obj) && _isTabable(obj)) {
+            return obj;
+        }
+        // If object is hidden, skip it's children
+        if (isValidChild(obj) && isHidden(obj)) {
+            return undefined;
+        } 
+        // If object is hidden, skip it's children
+        if (angular.element(obj).hasClass('ng-hide')) {
+            return undefined;
+        }  
+        if (obj.hasChildNodes()) {
+            var child;
+            if (fromTop) {
+                child = obj.firstChild;
+            } else {
+                child = obj.lastChild;
+            }
+            while(child) {
+                var res =  traverse(child, fromTop);
+                if(res){
+                    return res;
+                }
+                else{
+                    if (fromTop) {
+                        child = child.nextSibling;
+                    } else {
+                        child = child.previousSibling;
+                    }
+                }
+            }
+        }
+        else{
+            return undefined;
+        }
+    }
+
+    var _previousElement = function(el, isFocusable){
+
+        var elem = el;
+        if (el.hasOwnProperty('length')) {
+            elem = el[0];
+        }
+
+        var parent = elem.parentElement;
+        var previousElem = undefined;
+
+        if(isFocusable) {
+            if (hasValidParent(elem)) {
+                var siblings = angular.element(parent).children();
+                if (siblings.length > 0) {
+                    // Good practice to splice out the elem from siblings if there, saving some time.
+                    // We allow for a quick check for jumping to parent first before removing. 
+                    if (siblings[0] === elem) {
+                        // If we are looking at immidiate parent and elem is first child, we need to go higher
+                        var e = _previousElement(angular.element(elem).parent(), isFocusable);
+                        if (_isTabable(e)) {
+                            return e;
+                        }
+                    } else {
+                        // I need to filter myself and any nodes next to me from the siblings
+                        var indexOfElem = Array.prototype.indexOf.call(siblings, elem);
+                        siblings = Array.prototype.filter.call(siblings, function(item, itemIndex) {
+                            if (!angular.equals(elem, item) && itemIndex < indexOfElem) {
+                                return true;
+                            }
+                        });
+                    }
+                    // We need to search backwards
+                    for (var i = 0; i <= siblings.length-1; i++) {//for (var i = siblings.length-1; i >= 0; i--) {
+                        var ret = traverse(siblings[i], false);
+                        if (ret !== undefined) {
+                            return ret;
+                        }
+                    }
+
+                    var e = _previousElement(angular.element(elem).parent(), isFocusable);
+                    if (_isTabable(e)) {
+                        return e;
+                    }
+                }
+            }
+        } else {
+            var siblings = angular.element(parent).children();
+            if (siblings.length > 1) {
+                // Since indexOf is on Array.prototype and parent.children is a NodeList, we have to use call()
+                var index = Array.prototype.indexOf.call(siblings, elem);
+                previousElem = siblings[index-1];
+            }
+        }
+        return previousElem;
+    };
+
+    var _lastTabableElement = function(el) {
+        /* This will return the first tabable element from the parent el */
+        var elem = el;
+        if (el.hasOwnProperty('length')) {
+            elem = el[0];
+        }
+
+        return traverse(elem, false);
+    };
+
+    var _firstTabableElement = function(el) {
+        /* This will return the first tabable element from the parent el */
+        var elem = el;
+        if (el.hasOwnProperty('length')) {
+            elem = el[0];
+        }
+
+        return traverse(elem, true);
+    };
+
+    var _isInDOM = function(obj) {
+      return document.documentElement.contains(obj);
+    }
+
+    return {
+        firstTabableElement: _firstTabableElement,
+        lastTabableElement: _lastTabableElement,
+        previousElement: _previousElement,
+        isInDOM: _isInDOM,
+        isTabable: _isTabable,
+        isHidden: isHidden
+    };
+})
+
+.factory('trapFocusInElement', ['$document', '$isElement', 'DOMHelper', 'keymap', function ($document, $isElement, DOMHelper, keymap) {
+    var elementStack = [];
+    var stackHead = undefined;
+    var trapFocusInElement = function (flag) {
+        var bodyElements = $document.find('body').children();
+
+        var firstTabableElement = angular.element(DOMHelper.firstTabableElement(stackHead));
+        var lastTabableElement = angular.element(DOMHelper.lastTabableElement(stackHead));
+
+        var trapKeyboardFocusInFirstElement = function (e) {
+            if (!e.keyCode) {
+                e.keyCode = e.which;
+            }
+
+            if (e.shiftKey === true && e.keyCode === keymap.KEY.TAB) {
+                lastTabableElement[0].focus();
+                e.preventDefault(e);
+                e.stopPropagation(e);
+            }
+
+        };
+
+        var trapKeyboardFocusInLastElement = function (e) {
+            if (!e.keyCode) {
+                e.keyCode = e.which;
+            }
+
+            if (e.shiftKey === false && e.keyCode === keymap.KEY.TAB) {
+                firstTabableElement[0].focus();
+                e.preventDefault(e);
+                e.stopPropagation(e);
+            }
+        };
+
+        if (flag) {
+            for (var i = 0; i < bodyElements.length; i++) {
+                if (bodyElements[i] !== stackHead[0]) {
+                    bodyElements.eq(i).attr('aria-hidden', true);
+                }
+            }
+            firstTabableElement.bind('keydown', trapKeyboardFocusInFirstElement);
+            lastTabableElement.bind('keydown', trapKeyboardFocusInLastElement);
+        } else {
+            for (var j = 0; j < bodyElements.length; j++) {
+                if (bodyElements[j] !== stackHead[0]) {
+                    bodyElements.eq(j).removeAttr('aria-hidden');
+                }
+            }
+            firstTabableElement.unbind('keydown', trapKeyboardFocusInFirstElement);
+            lastTabableElement.unbind('keydown', trapKeyboardFocusInLastElement);
+        }
+    };
+    var toggleTrapFocusInElement = function (flag, element) {
+        if (angular.isDefined(flag) && angular.isDefined(element)) {
+            if (angular.isUndefined(stackHead)) {
+                stackHead = element;
+                trapFocusInElement(flag);
+            } else {
+                if (flag) {
+                    trapFocusInElement(false);
+                    elementStack.push(stackHead);
+                    stackHead = element;
+                    trapFocusInElement(true);
+                } else {
+                    if (stackHead.prop('$$hashKey') === element.prop('$$hashKey')) {
+                        trapFocusInElement(false);
+                        stackHead = elementStack.pop();
+                        if (angular.isDefined(stackHead)) {
+                            trapFocusInElement(true);
+                        }
+                    }
+                }
+            }
+        }
+    };
+
+    return toggleTrapFocusInElement;
+}])
+
+.factory('DOMHelper', function () {
+
+    var _isTabable = function (node) {
+        var element = angular.element(node);
+        var tagName = element[0].tagName.toUpperCase();
+
+        if (isHidden(element)) {
+            return false;
+        }
+        if (element.attr('tabindex') !== undefined) {
+            return (parseInt(element.attr('tabindex'), 10) >= 0);
+        }
+        if (tagName === 'A' || tagName === 'AREA' || tagName === 'BUTTON' || tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+            if (tagName === 'A' || tagName === 'AREA') {
+                // anchors/areas without href are not focusable
+                return (element[0].href !== '');
+            }
+            return !(element[0].disabled || element[0].readOnly);
+        }
+        return false;
+    };
+
+    function isValidChild(child) {
+        return child.nodeType == 1 && child.nodeName != 'SCRIPT' && child.nodeName != 'STYLE';
+    }
+
+    function isHidden(obj) {
+        var elem = angular.element(obj);
+        var style;
+        try {
+            style = window.getComputedStyle(obj);
+        }
+        catch(err) {
+            style = window.getComputedStyle(obj[0]);
+        }
+
+        // getComputedStyle() for Zepto object returns null
+        if (style === null){
+            return elem.hasClass('ng-hide') || elem.css('display') === 'none';
+        }
+
+        return elem.hasClass('ng-hide') || elem.css('display') === 'none' || style.display === 'none' || style.display === 'hidden';
+    }
+
+    function traverse(obj, fromTop) {
+        var obj = obj || document.getElementsByTagName('body')[0];
+
+        if (isValidChild(obj) && _isTabable(obj)) {
+            return obj;
+        }
+
+        // If object is hidden, skip it's children
+        if (isValidChild(obj) && isHidden(obj)) {
+            return undefined;
+        }
+        // If object is hidden, skip it's children
+        if (angular.element(obj).hasClass('ng-hide')) {
+            return undefined;
+        }
+
+        if (obj.hasChildNodes()) {
+            var child;
+            if (fromTop) {
+                child = obj.firstChild;
+            } else {
+                child = obj.lastChild;
+            }
+            while (child) {
+                var res = traverse(child, fromTop);
+                if (res) {
+                    return res;
+                } else {
+                    if (fromTop) {
+                        child = child.nextSibling;
+                    } else {
+                        child = child.previousSibling;
+                    }
+                }
+            }
+        } else {
+            return undefined;
+        }
+    }
+
+    var _lastTabableElement = function (el) {
+        /* This will return the last tabable element from the parent el */
+        var elem = el;
+        if (el.hasOwnProperty('length')) {
+            elem = el[0];
+        }
+
+        return traverse(elem, false);
+    };
+
+    var _firstTabableElement = function (el) {
+        /* This will return the first tabable element from the parent el */
+        var elem = el;
+        if (el.hasOwnProperty('length')) {
+            elem = el[0];
+        }
+
+        return traverse(elem, true);
+    };
+
+    return {
+        firstTabableElement: _firstTabableElement,
+        lastTabableElement: _lastTabableElement,
+        isTabable: _isTabable
+    };
+})
+
+.factory('windowOrientation', ['$window', function ($window) {
+    var _isPotrait = function () {
+        if ($window.innerHeight > $window.innerWidth) {
+            return true;
+        } else {
+            return false;
+        }
+    };
+    var _isLandscape = function () {
+        if ($window.innerHeight < $window.innerWidth) {
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    return {
+        isPotrait: _isPotrait,
+        isLandscape: _isLandscape
+    };
+}])
+
+.directive('b2bNextElement', function() {
+  return {
+    restrict: 'A',
+    transclude: false,
+    link: function (scope, elem, attr, ctrls) {
+
+        var keys = attr.b2bNextElement.split(',');
+
+        elem.bind('keydown', function (e) {
+            var nextElement = elem.next();
+            if(e.keyCode == 39 || e.keyCode == 40){ // if e.keyCode in keys
+                if(nextElement.length) {
+                    e.preventDefault();
+                    nextElement[0].focus();
+                }
+            }
+        });
+    }
+  }
+})
+
+.directive('b2bAccessibilityClick', [function () {
+    return {
+        restrict: 'A',
+        link: function (scope, elem, attr, ctrl) {
+            var keyCode = [];
+            attr.$observe('b2bAccessibilityClick', function (value) {
+                if (value) {
+                    keyCode = value.split(',');
+                }
+            });
+            elem.bind('keydown keypress', function (ev) {
+                var keyCodeCondition = function () {
+                    var flag = false;
+                    if (!(ev.keyCode)) {
+                        if (ev.which) {
+                            ev.keyCode = ev.which; 
+                        } else if (ev.charCode) {
+                            ev.keyCode = ev.charCode;
+                        }
+                    }
+                    if ((ev.keyCode && keyCode.indexOf(ev.keyCode.toString()) > -1)) {
+                        flag = true;
+                    }
+                    return flag;
+                };
+                if (keyCode.length > 0 && keyCodeCondition()) {
+                    elem[0].click();
+                    ev.preventDefault();
+                }
+            });
+        }
+    };
+}])
+
+.directive('b2bReset', ['$compile', function ($compile) {
+        return {
+            restrict: 'A',
+            require: ['?ngModel', 'b2bReset'],
+            controller: ['$scope', function ($scope) {
+                var resetButton = angular.element('<button type="button" class="reset-field" tabindex="-1" aria-label="Click to reset" aria-hidden="true" role="button"></button>');
+
+                this.getResetButton = function () {
+                    return resetButton;
+                };
+            }],
+            link: function (scope, element, attrs, ctrls) {
+
+                var ngModelCtrl = ctrls[0];
+                var ctrl = ctrls[1];
+
+                var resetButton = ctrl.getResetButton();
+
+
+                resetButton.on('click', function () {
+                    element[0].value = '';
+
+                    if (ngModelCtrl) {
+                        if (attrs.b2bReset) {
+                            ngModelCtrl.$setViewValue(attrs.b2bReset);
+                        } else {
+                            ngModelCtrl.$setViewValue('');
+                        }
+                        element[0].value = ngModelCtrl.$viewValue;
+                        ngModelCtrl.$render();
+                        scope.$digest();
+                    }
+                    element[0].focus();
+                    element[0].select();
+                });
+
+                var addResetButton = function () {
+                    element.after(resetButton);
+                    element.unbind('focus input', addResetButton);
+                };
+
+                element.bind('focus input', addResetButton);
+            }
+        };
+    }])
+
+.directive('b2bPrevElement', ['b2bDOMHelper', 'keymap', function (b2bDOMHelper, keymap) {
+  return {
+    restrict: 'A',
+    transclude: false,
+    link: function (scope, elem, attr) {
+
+        elem.bind('keydown', function (e) {
+            if(e.keyCode == 37 || e.keyCode == 38){
+                var prev = b2bDOMHelper.previousElement(elem, false);
+                if(prev !== undefined) {
+                    e.preventDefault();
+                    prev.focus();
+                }
+            }
+        });
+    }
+  }
+}])
+/**
+ * @param {integer} delay - Timeout before first and last focusable elements are found
+ * @param {boolean} trigger - A variable on scope that will trigger refinding first/last focusable elements 
+ */
+.directive('b2bTrapFocusInsideElement', ['$timeout', 'b2bDOMHelper', 'keymap', 'events', function ($timeout, b2bDOMHelper, keymap, events) {
+    return {
+        restrict: 'A',
+        transclude: false,
+        link: function (scope, elem, attr) {
+
+            var delay = parseInt(attr.delay, 10) || 10;
+
+            /* Before opening modal, find the focused element */
+            var firstTabableElement = undefined,
+                lastTabableElement = undefined;
+                
+            function init() {
+                $timeout(function () {
+                    firstTabableElement = b2bDOMHelper.firstTabableElement(elem);
+                    lastTabableElement = b2bDOMHelper.lastTabableElement(elem);
+                    angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);
+                    angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);
+                }, delay, false);
+            }
+
+            if (attr.trigger !== undefined) {
+                scope.$watch('trigger', function() {
+                    if (scope.trigger) {
+                        init();
+                    }
+                });
+            }
+
+            var firstTabableElementKeyhandler = function(e) {
+                if (!e.keyCode) {
+                    e.keyCode = e.which;
+                }
+                if (e.keyCode === keymap.KEY.TAB && e.shiftKey) {
+                    if (attr.trapFocusInsideElement === 'true') {
+                        var temp = b2bDOMHelper.lastTabableElement(elem);
+                        if (lastTabableElement !== temp) {
+                            // Unbind keydown handler on lastTabableElement
+                            angular.element(lastTabableElement).unbind('keydown', lastTabableElementKeyhandler);
+                            lastTabableElement = temp;
+                            angular.element(lastTabableElement).bind('keydown', lastTabableElementKeyhandler);
+                        }
+                    }
+                    lastTabableElement.focus();
+                    events.preventDefault(e);
+                    events.stopPropagation(e);
+                }
+            };
+
+            var lastTabableElementKeyhandler = function(e) {
+                if (!e.keyCode) {
+                    e.keyCode = e.which;
+                }
+                if (e.keyCode === keymap.KEY.TAB && !e.shiftKey) {
+                    if (attr.trapFocusInsideElement === 'true') {
+                        var temp = b2bDOMHelper.firstTabableElement(elem);
+                        if (firstTabableElement !== temp) {
+                            // Unbind keydown handler on firstTabableElement
+                            angular.element(firstTabableElement).unbind('keydown', firstTabableElementKeyhandler);
+                            firstTabableElement = temp;
+                            angular.element(firstTabableElement).bind('keydown', firstTabableElementKeyhandler);
+                        }
+                    }
+                    firstTabableElement.focus();
+                    events.preventDefault(e);
+                    events.stopPropagation(e);
+                }
+            };
+
+            init();
+        }
+    };
+}])
+
+.factory('trapFocusInElement', ['$document', '$isElement', 'DOMHelper', 'keymap', '$interval', function ($document, $isElement, DOMHelper, keymap, $interval) {
+    var elementStack = [];
+    var stackHead = undefined;
+    var stopInterval = undefined;
+    var intervalRequired = false;
+    var interval = 1000;
+    var firstTabableElement, lastTabableElement;
+
+    var trapKeyboardFocusInFirstElement = function (e) {
+        if (!e.keyCode) {
+            e.keyCode = e.which;
+        }
+
+        if (e.shiftKey === true && e.keyCode === keymap.KEY.TAB) {
+            lastTabableElement[0].focus();
+            e.preventDefault(e);
+            e.stopPropagation(e);
+        }
+
+    };
+
+    var trapKeyboardFocusInLastElement = function (e) {
+        if (!e.keyCode) {
+            e.keyCode = e.which;
+        }
+
+        if (e.shiftKey === false && e.keyCode === keymap.KEY.TAB) {
+            firstTabableElement[0].focus();
+            e.preventDefault(e);
+            e.stopPropagation(e);
+        }
+    };
+
+    var trapFocusInElement = function (flag, firstTabableElementParam, lastTabableElementParam) {
+        var bodyElements = $document.find('body').children();
+
+        firstTabableElement = firstTabableElementParam ? firstTabableElementParam : angular.element(DOMHelper.firstTabableElement(stackHead));
+        lastTabableElement = lastTabableElementParam ? lastTabableElementParam : angular.element(DOMHelper.lastTabableElement(stackHead));
+
+        if (flag) {
+            for (var i = 0; i < bodyElements.length; i++) {
+                if (bodyElements[i] !== stackHead[0]) {
+                    bodyElements.eq(i).attr('aria-hidden', true);
+                }
+            }
+            firstTabableElement.bind('keydown', trapKeyboardFocusInFirstElement);
+            lastTabableElement.bind('keydown', trapKeyboardFocusInLastElement);
+        } else {
+            for (var j = 0; j < bodyElements.length; j++) {
+                if (bodyElements[j] !== stackHead[0]) {
+                    bodyElements.eq(j).removeAttr('aria-hidden');
+                }
+            }
+            firstTabableElement.unbind('keydown', trapKeyboardFocusInFirstElement);
+            lastTabableElement.unbind('keydown', trapKeyboardFocusInLastElement);
+        }
+
+        if (intervalRequired && flag) {
+            stopInterval = $interval(function () {
+                var firstTabableElementTemp = angular.element(DOMHelper.firstTabableElement(stackHead));
+                var lastTabableElementTemp = angular.element(DOMHelper.lastTabableElement(stackHead));
+                if (firstTabableElementTemp[0] !== firstTabableElement[0] || lastTabableElementTemp[0] !== lastTabableElement[0]) {
+                    $interval.cancel(stopInterval);
+                    stopInterval = undefined;
+                    trapFocusInElement(false, firstTabableElement, lastTabableElement);
+                    trapFocusInElement(true, firstTabableElementTemp, lastTabableElementTemp);
+                }
+            }, interval);
+        } else {
+            if (stopInterval) {
+                $interval.cancel(stopInterval);
+                stopInterval = undefined;
+            }
+        }
+    };
+    var toggleTrapFocusInElement = function (flag, element, intervalRequiredParam, intervalParam) {
+        intervalRequired = intervalRequiredParam ? intervalRequiredParam : intervalRequired;
+        interval = intervalParam ? intervalParam : interval;
+        if (angular.isDefined(flag) && angular.isDefined(element)) {
+            if (flag && angular.isUndefined(stackHead)) {
+                stackHead = element;
+                trapFocusInElement(flag);
+            } else {
+                if (flag) {
+                    trapFocusInElement(false);
+                    elementStack.push(stackHead);
+                    stackHead = element;
+                    trapFocusInElement(true);
+                } else {
+                    if (angular.isDefined(stackHead) && (stackHead[0] === element[0])) {
+                        trapFocusInElement(false);
+                        stackHead = elementStack.pop();
+                        if (angular.isDefined(stackHead)) {
+                            trapFocusInElement(true);
+                        }
+                    }
+                }
+            }
+        } else {
+            if (angular.isDefined(stackHead)) {
+                trapFocusInElement(false, firstTabableElement, lastTabableElement);
+                trapFocusInElement(true);
+            }
+        }
+    };
+
+    return toggleTrapFocusInElement;
+}])
+
+.directive('b2bSetNextFocusOn', ['b2bDOMHelper', '$timeout', function(b2bDOMHelper, $timeout) {
+    return {
+        restrict: 'A',
+        scope: true,
+        link: function (scope, elem, attr) {
+            elem.bind('click', function(){
+                var firstFocusableElement = undefined; 
+                var containerElem = undefined; 
+                var containerArray = [];
+                var timeout = parseInt(attr.setNextFocusTimeout, 0) | 100;
+                var index = parseInt(attr.b2bSetNextFocusIndex, 0) | 0;
+
+                 /*
+                  *Fix for IE7 and lower 
+                  *polyfill src: https://github.com/HubSpot/pace/issues/102
+                  */
+                if (!document.querySelectorAll) {
+                    document.querySelectorAll = function (selectors) {
+                        var style = document.createElement('style'), elements = [], element;
+                        document.documentElement.firstChild.appendChild(style);
+                        document._qsa = [];
+
+                        style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
+                        window.scrollBy(0, 0);
+                        style.parentNode.removeChild(style);
+
+                        while (document._qsa.length) {
+                            element = document._qsa.shift();
+                            element.style.removeAttribute('x-qsa');
+                            elements.push(element);
+                        }
+                        document._qsa = null;
+                        return elements;
+                    };
+                }
+
+                if (attr.b2bSetNextFocusOn === '') {
+                    return;
+                } else {
+                    containerArray = attr.b2bSetNextFocusOn.split(' ');
+                }
+                $timeout(function(){
+                    var i = 0;
+                    do { // cycles thru containerArray until finds a match in DOM to set focus to
+                        containerElem = document.querySelectorAll(containerArray[i])[index]; 
+                        i++;
+                    } while ( (!containerElem) && (i < containerArray.length) );
+                    if(containerElem){
+                        if (!angular.isDefined(firstFocusableElement)) { 
+                            firstFocusableElement = b2bDOMHelper.firstTabableElement(containerElem); 
+                        }
+                        firstFocusableElement.focus(); 
+                    }
+                }, timeout, false)
+            });
+        }
+
+    };
+}])
+
+.directive('b2bInputAllow', [function() {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elem, attr, ctrl) {
+            var regexExpression = null;
+            attr.$observe('b2bInputAllow', function (value) {
+                if (value) {
+                    regexExpression = new RegExp(value);
+                }
+            });
+            var isValid = function(str) {
+                if (regexExpression !== null) {
+                    return regexExpression.test(str);
+                }
+                return false;
+            };
+            elem.bind('keypress', function($event) {
+                var charcode = String.fromCharCode($event.which || $event.keyCode);
+                if (!isValid(charcode)) {
+                    $event.preventDefault();
+                    $event.stopPropagation();
+                }
+            });
+            elem.bind('input', function (evt) {
+                var inputString = ctrl.$viewValue;
+                if (isValid(inputString)) {
+                    ctrl.$setViewValue(inputString);
+                    ctrl.$render();
+                    scope.$apply();
+                }
+            });
+        }
+    };
+}])
+
+.directive('b2bInputDeny', [function() {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elem, attr, ctrl) {
+            var regexExpression = null;
+            attr.$observe('b2bInputDeny', function (value) {
+                if (value) {
+                    regexExpression = new RegExp(value, 'g');
+                }
+            });
+            elem.bind('input', function () {
+                var inputString = ctrl.$viewValue && ctrl.$viewValue.replace(regexExpression, '');
+                if (inputString !== ctrl.$viewValue) {
+                    ctrl.$setViewValue(inputString);
+                    ctrl.$render();
+                    scope.$apply();
+                }
+            });
+        }
+    };
+}])
+
+.directive('b2bDragonInput', [function() {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elem, attr, ctrl) {
+            elem.on('focus keyup', function(){
+                elem.triggerHandler('change');
+            });
+        }
+    };
+}])
+
+.directive('b2bKey', ['b2bUtilitiesConfig', '$timeout', 'keymap', function (b2bUtilitiesConfig, $timeout, keymap) {
+    return {
+        restrict: 'EA',
+        controller: ['$scope', '$element', '$attrs', function ($scope, $element,attr) {
+            this.childElements = [];
+            this.disableNodes = {};
+            this.enableSearch = attr.enableSearch !== undefined ? true : b2bUtilitiesConfig.enableSearch;
+            this.circularTraversal = attr.circularTraversal !== undefined ? true : b2bUtilitiesConfig.circularTraversal;
+            this.counter = -1;
+            if (this.enableSearch) {
+                this.searchKeys = [];
+            }
+            var searchString = '';
+
+            var selfCtrl = this;
+
+            this.childElementsList = [];
+
+            this.b2bKeyID = "";
+
+            if (angular.isDefined(attr.b2bKey)) {
+                this.b2bKeyID = attr.b2bKey;
+            }
+
+            this.calculateChildElementsList = function () {
+                return $element[0].querySelectorAll("[b2b-key-item='" + this.b2bKeyID + "']:not([disabled])");
+            };
+
+            this.resetChildElementsList = function () {
+                return $timeout(function () {
+                    selfCtrl.childElementsList = selfCtrl.calculateChildElementsList();
+                });
+            };
+
+            this.resetChildElementsList();
+
+            $scope.$on('b2b-key-reset-child-elements-list', function () {
+                selfCtrl.resetChildElementsList();
+            });
+
+
+            this.registerElement = function (childElement, searchKey) {
+                this.childElements.push(childElement);
+                if (this.enableSearch) {
+                    this.searchKeys.push(searchKey);
+                }
+                var count = this.childElements.length - 1;
+                this.maxLength = count + 1;
+                return count;
+            };
+            this.toggleDisable = function (count, state) {
+                this.disableNodes[count] = state;
+            };
+            this.searchElement = function (searchExp) {
+                var regex = new RegExp("\\b" + searchExp, "gi");
+                var position = this.searchKeys.regexIndexOf(regex, this.counter + 1, true);
+                if (position > -1) {
+                    this.counter = position;
+                    this.moveFocus(this.counter);
+                }
+            };
+            this.startTimer = function (time) {
+                if (searchString === '') {
+                    $timeout(function () {
+                        searchString = '';
+                    }, time);
+                }
+            };
+            this.resetCounter = function (count) {
+                this.counter = count;
+            };
+            this.moveNext = function (count) {
+                this.counter = (this.counter + count) < this.maxLength ? this.counter + count : (this.circularTraversal ? 0 : this.counter);
+                if (this.disableNodes[this.counter]) {
+                    if ((this.counter + count) < this.maxLength) {
+                        this.moveNext(count);
+                    }
+                } else {
+                    this.moveFocus(this.counter);
+                }
+            };
+            this.movePrev = function (count) {
+                this.counter = (this.counter - count) > -1 ? this.counter - count : (this.circularTraversal ? this.maxLength-1 : this.counter);
+                if (this.disableNodes[this.counter]) {
+                    if ((this.counter - count) > -1) {
+                        this.movePrev(count);
+                    }
+                } else {
+                    this.moveFocus(this.counter);
+                }
+            };
+            this.moveFocus = function (index) {
+                this.childElements[index][0].focus();
+            };
+
+            this.keyDownHandler = function (ev, count) {
+                if (angular.isDefined(count) && !isNaN(count) && count !== this.counter) {
+                    this.resetCounter(count);
+                }
+                if (!ev.keyCode) {
+                    if (ev.which) {
+                        ev.keyCode = ev.which;
+                    } else if (ev.charCode) {
+                        ev.keyCode = ev.charCode;
+                    }
+                }
+                if (ev.keyCode) {
+                    if (this.prev && this.prev.indexOf(ev.keyCode.toString()) > -1) {
+                        this.movePrev(1);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (this.next && this.next.indexOf(ev.keyCode.toString()) > -1) {
+                        this.moveNext(1);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (this.up && this.up.indexOf(ev.keyCode.toString()) > -1) {
+                        if (this.type === 'table') {
+                            this.movePrev(this.columns);
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        }
+                    } else if (this.down && this.down.indexOf(ev.keyCode.toString()) > -1) {
+                        if (this.type === 'table') {
+                            this.moveNext(this.columns);
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        }
+                    } else if (ev.keyCode === keymap.KEY.HOME) {
+                        var firstIndex = 0;
+                        while (this.disableNodes[firstIndex] !== false) {
+                            firstIndex++;
+                        };
+                        var count = this.counter - firstIndex;
+                        this.movePrev(count);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode === keymap.KEY.END) {
+                        var lastIndex = this.childElements.length - 1;
+                        while (this.disableNodes[lastIndex] !== false) {
+                            lastIndex--;
+                        };
+                        var count = lastIndex - this.counter;
+                        this.moveNext(count);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    } else if (ev.keyCode >= 48 && ev.keyCode <= 105) {
+                        if (this.enableSearch) {
+                            this.startTimer(b2bUtilitiesConfig.searchTimer);
+                            searchString = searchString + (keymap.MAP[ev.keyCode] || '');
+                            this.searchElement(searchString);
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                        }
+                    }
+                }
+            };
+        }],
+        link: function (scope, elem, attr, ctrl) {
+            ctrl.prev = attr.prev ? attr.prev.split(',') : b2bUtilitiesConfig.prev.split(',');
+            ctrl.next = attr.next ? attr.next.split(',') : b2bUtilitiesConfig.next.split(',');
+            ctrl.type = attr.type ? attr.type : b2bUtilitiesConfig.type;
+            if (ctrl.type === 'table') {
+                ctrl.up = attr.up ? attr.up.split(',') : b2bUtilitiesConfig.up.split(',');
+                ctrl.down = attr.down ? attr.down.split(',') : b2bUtilitiesConfig.down.split(',');
+                ctrl.columns = attr.columns ? parseInt(attr.columns, 10) : b2bUtilitiesConfig.columns;
+            }
+
+            elem.bind('keydown', function (ev) {
+                ctrl.keyDownHandler(ev);
+            });
+        }
+    };
+}])
+
+.directive('b2bKeyItem', [function () {
+    return {
+        restrict: 'EA',
+        link: function (scope, elem, attr, ctrl) {
+            var parentCtrl = (elem.parent() && elem.parent().controller('b2bKey')) || undefined;
+            if (angular.isDefined(parentCtrl)) {
+                var count = parentCtrl.registerElement(elem, attr.searchKey);
+                elem.bind('keydown', function (ev) {
+                    parentCtrl.keyDownHandler(ev, count);
+                });
+                scope.$watch(attr.b2bKeyItem, function (value) {
+                    value = value === undefined ? true : value;
+                    parentCtrl.toggleDisable(count, !value); 
+                });
+                scope.$on('$destroy', function () {
+                    parentCtrl.toggleDisable(count, true);
+                });
+            }
+        }
+    };
+}])
+
+.directive('b2bElementFocus', [function () {
+    return {
+        restrict: 'A',
+        link: function (scope, elem, attr, ctrl) {
+            scope.$watch(attr.b2bElementFocus, function (value) {
+                if (value === true) {
+                    elem[0].focus();
+                }
+            });
+        }
+    };
+}])
+
+
+.directive('b2bAppendElement', ['$compile', function ($compile) {
+    return {
+        restrict: 'A',
+        link: function (scope, elem, attr, ctrl) {
+            var parameters = attr.b2bAppendElement.split(':');
+            if (parameters.length === 1) {
+                elem.append(scope.$eval(parameters[0]));
+            } else if (parameters.length === 2) {
+                if (parameters[1] === 'compile') {
+                    var element = angular.element('<span>' + scope.$eval(parameters[0]) + '</span>');
+                    elem.append($compile(element)(scope));
+                }
+            }
+
+        }
+    };
+}])
+
+.directive('b2bKeyItemRefreshInNgRepeat', [function () {
+    return {
+        restrict: 'EA',
+        require: '^^b2bKey',
+        link: function (scope, elem, attr, parentCtrl) {
+            if (angular.isDefined(parentCtrl)) {
+
+                var attrToObserve = 'attrToObserve';
+
+                if (attr.b2bKeyItemRefreshInNgRepeat) {
+                    attrToObserve = 'b2bKeyItemRefreshInNgRepeat';
+                }
+
+                attr.$observe(attrToObserve, function (newVal, oldVal) {
+                    if (newVal && newVal !== oldVal) {
+                        parentCtrl.resetChildElementsList();
+                    }
+                });
+            }
+        }
+    };
+}])
+
+.filter('b2bMultiSepartorHighlight', function($sce) {
+        return function(text, searchText, searchSeperator) {
+            var splitText = function(string) {
+                if(angular.isDefined(searchSeperator)){
+                    if (string.indexOf(searchSeperator) > -1) {
+                        return string.split(searchSeperator);
+                    } else {
+                        return string
+                    }
+                }else{
+                    return string;
+                }
+            }
+            if (text) {
+                var newText = splitText(text);
+                var newPhrase = splitText(searchText);
+                if (angular.isArray(newPhrase)) {
+                    for (var i = 0; i < newText.length; i++) {
+                        if (i <= 0) {
+                            text = newText[i].replace(new RegExp('(' + newPhrase[i] + ')', 'gi'),
+                                '<span class="b2b-search-hightlight">$1</span>');
+                        } else {
+                            text = text + searchSeperator + ' ' + (newPhrase[i] ? newText[i].replace(new RegExp('(' + newPhrase[i] + ')', 'gi'),
+                                '<span class="b2b-search-hightlight">$1</span>') : newText[i]);
+                        }
+                    }
+                } else {
+                    text = text.replace(new RegExp('(' + searchText + ')', 'gi'),
+                        '<span class="b2b-search-hightlight">$1</span>');
+                }
+            }
+            return $sce.trustAsHtml(text)
+        }
+    })
+    
+    .factory('b2bUserAgent', [function() {
+        var _isMobile = function() {
+            return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        };
+        var _notMobile = function() {
+            return !/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        };
+        var _isIE = function() {
+            return /msie|trident/i.test(navigator.userAgent);
+        };
+        var _isFF = function() {
+            return /Firefox/.test(navigator.userAgent);
+        };
+        var _isChrome = function() {
+            return /Google Inc/.test(navigator.vendor);
+        };
+        var _isSafari = function() {
+            return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+        };
+
+        return {
+            isMobile: _isMobile,
+            notMobile: _notMobile,
+            isIE: _isIE,
+            isFF: _isFF,
+            isChrome: _isChrome,
+            isSafari: _isSafari
+        };
+    }])
+    .run(['$document', 'b2bUserAgent', function($document, b2bUserAgent) {
+        var html = $document.find('html').eq(0);
+        if (b2bUserAgent.isIE()) {
+            html.addClass('isIE');
+        } else {
+            html.removeClass('isIE');
+        }
+    }]);
+    
+
+(function () {
+    String.prototype.toSnakeCase = function () {
+        return this.replace(/([A-Z])/g, function ($1) {
+            return "-" + $1.toLowerCase();
+        });
+    };
+    var concat = function (character, times) {
+        character = character || '';
+        times = (!isNaN(times) && times) || 0;
+        var finalChar = '';
+        for (var i = 0; i < times; i++) {
+            finalChar += character;
+        }
+        return finalChar;
+    };
+
+    // direction: true for left and false for right
+    var pad = function (actualString, width, character, direction) {
+        actualString = actualString || '';
+        width = (!isNaN(width) && width) || 0;
+        character = character || '';
+        if (width > actualString.length) {
+            if (direction) {
+                return concat(character, (width - actualString.length)) + actualString;
+            } else {
+                return actualString + concat(character, (width - actualString.length));
+            }
+        }
+        return actualString;
+    };
+
+    String.prototype.lPad = function (width, character) {
+        return pad(this, width, character, true);
+    };
+
+    String.prototype.rPad = function (width, character) {
+        return pad(this, width, character, false);
+    };
+
+    if (!Array.prototype.indexOf) {
+        Array.prototype.indexOf = function (val) {
+            for (var index = 0; index < this.length; index++) {
+                if (this[index] === val) {
+                    return index;
+                }
+            }
+            return -1;
+        };
+    }
+
+    if (!Array.prototype.regexIndexOf) {
+        Object.defineProperty(Array.prototype, 'regexIndexOf', {
+            enumerable: false,
+            value: function (regex, startIndex, loop) {
+                startIndex = startIndex && startIndex > -1 ? startIndex : 0;
+                for (var index = startIndex; index < this.length; index++) {
+                    if (this[index].toString().match(regex)) {
+                        return index;
+                    }
+                }
+                if (loop) {
+                    for (var index = 0; index < startIndex; index++) {
+                        if (this[index].toString().match(regex)) {
+                            return index;
+                        }
+                    }
+                }
+                return -1;
+            }
+        })
+    }
+})();
+angular.module("b2bTemplate/audioPlayer/audioPlayer.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/audioPlayer/audioPlayer.html",
+    "<div class=\"b2b-audio\">\n" +
+    "   <audio preload=\"auto\">\n" +
+    "       <source ng-src=\"{{audio.mp3 | trustedAudioUrl}}\" type=\"audio/mp3\"></source>\n" +
+    "       <i>Your browser does not support the audio element.</i>\n" +
+    "    </audio>\n" +
+    "\n" +
+    "    <div audio-play-pause-icon class=\"controls-wrapper\" ng-click=\"toggleAudio()\" tabindex=\"0\" b2b-accessibility-click=\"13,32\" role=\"button\" aria-label=\"{{isPlayInProgress?'pause':'play'}}\">\n" +
+    "       <i class=\"icoControls-pointer\" ng-show='!isPlayInProgress'></i>\n" +
+    "       <i class=\"icoControls-pause\" ng-show='isPlayInProgress'></i>\n" +
+    "    </div>\n" +
+    "\n" +
+    "    <div class=\"seek-bar-container-wrapper\">\n" +
+    "       <b2b-seek-bar min=\"0\" max=\"{{audio.duration}}\" step=\"1\" skip-interval=\"{{audio.timeShiftInSeconds}}\" no-aria-label ng-model=\"audio.currentTime\" on-drag-init=\"isAudioDragging=true\" on-drag-end=\"setAudioPosition(audio.currentTime)\"></b2b-seek-bar>\n" +
+    "       <div class=\"timing-container\">\n" +
+    "           <span class=\"timing-container-left\">{{timeFormatter(audio.currentTime)}}</span>\n" +
+    "           <span class=\"timing-container-right\">{{timeFormatter(audio.duration)}}</span>\n" +
+    "           <div class=\"timing-container-spacer\"></div>\n" +
+    "       </div>\n" +
+    "    </div>\n" +
+    "       \n" +
+    "    <b2b-flyout>\n" +
+    "       <div tabindex=\"0\" b2b-accessibility-click=\"13,32\" role=\"button\" aria-label=\"Volume pop-over. Volume set at {{audio.currentVolume}}%\" class=\"controls-wrapper audio-volume-control\" b2b-flyout-toggler>\n" +
+    "           <i class=\"icoControls-mutespeakers\" ng-show=\"audio.currentVolume === 0\"></i>\n" +
+    "           <i class=\"icoControls-volumedown\" ng-show=\"audio.currentVolume > 0 && audio.currentVolume <= 50\"></i>\n" +
+    "           <i class=\"icoControls-volumeup\" ng-show=\"audio.currentVolume > 50\"></i>\n" +
+    "       </div> \n" +
+    "       \n" +
+    "       <b2b-flyout-content horizontal-placement=\"center\" flyout-style=\"width:70px; height:190px;\" vertical-placement=\"above\">\n" +
+    "           <div class=\"b2b-audio-popover text-center\">\n" +
+    "               <span>Max</span>\n" +
+    "               <b2b-seek-bar min=\"0\" max=\"100\" step=\"1\" skip-interval=\"10\" vertical data-ng-model=\"audio.currentVolume\" class='volume-popover'></b2b-seek-bar>\n" +
+    "               <div class=\"min-label\">Min</div>\n" +
+    "           </div>\n" +
+    "       </b2b-flyout-content>\n" +
+    "   </b2b-flyout>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/audioRecorder/audioRecorder.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/audioRecorder/audioRecorder.html",
+    "<div class=\"b2b-audio-recorder row\">\n" +
+    "   <div class=\"b2b-elapsed-time span11\">\n" +
+    "       <div ng-if=\"isRecording\">\n" +
+    "           <span style=\"padding-right: 25px;\">{{config.whileRecordingMessage}}</span>\n" +
+    "           <span>{{timeFormatter(elapsedTime)}}</span>\n" +
+    "       </div>\n" +
+    "       <span ng-if=\"!isRecording\">{{config.startRecordingMessage}}</span>\n" +
+    "   </div>      \n" +
+    "   <div class=\"b2b-controls\" title=\"{{isRecording ? 'Stop' : 'REC'}}\" b2b-accessibility-click=\"13,32\" ng-click=\"toggleRecording()\" role=\"button\">\n" +
+    "           <i ng-if=\"isRecording\" class=\"icoControls-stop\" ></i>\n" +
+    "           <i ng-if=\"!isRecording\" class=\"icoControls-record\"></i>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/backToTop/backToTop.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/backToTop/backToTop.html",
+    "<button class=\"btn-arrow b2b-backtotop-button\" type=\"button\" aria-label=\"Back to top\">\n" +
+    "    <div class=\"btn-secondary b2b-top-btn\">\n" +
+    "        <i class=\"icoControls-upPRIMARY\" role=\"img\"></i>\n" +
+    "    </div>\n" +
+    "</button>\n" +
+    "");
+}]);
+
+angular.module("b2bTemplate/boardstrip/b2bAddBoard.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/boardstrip/b2bAddBoard.html",
+    "<div tabindex=\"0\" role=\"menuitem\" b2b-accessibility-click=\"13,32\" ng-click=\"addBoard()\" aria-label=\"Add Board\" class=\"boardstrip-item--add\">\n" +
+    "    <div class=\"centered\"><i aria-hidden=\"true\" class=\"icoControls-add-maximize\"></i> Add board</div>\n" +
+    "</div> ");
+}]);
+
+angular.module("b2bTemplate/boardstrip/b2bBoard.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/boardstrip/b2bBoard.html",
+    "<li b2b-board-navigation tabindex=\"-1\" role=\"menuitem\" aria-label=\"{{boardLabel}} {{getCurrentIndex()===boardIndex?'selected':''}}\" b2b-accessibility-click=\"13,32\" ng-click=\"selectBoard(boardIndex)\" class=\"board-item\" ng-class=\"{'selected': getCurrentIndex()===boardIndex}\">\n" +
+    "    <div ng-transclude></div>\n" +
+    "    <div class=\"board-caret\" ng-if=\"getCurrentIndex()===boardIndex\">\n" +
+    "        <div class=\"board-caret-indicator\"></div>\n" +
+    "        <div class=\"board-caret-arrow-up\"></div>\n" +
+    "    </div>\n" +
+    "</li>");
+}]);
+
+angular.module("b2bTemplate/boardstrip/b2bBoardstrip.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/boardstrip/b2bBoardstrip.html",
+    "<div class=\"b2b-boardstrip\">\n" +
+    "   <div class=\"boardstrip-reel\" role=\"menu\">\n" +
+    "       <div class=\"prev-items\">\n" +
+    "           <!-- <i tabindex=\"{{isPrevBoard() ? 0 : -1}}\" ng-class=\"{'disabled': !isPrevBoard()}\" role=\"menuitem\" aria-label=\"See previous boards\" b2b-accessibility-click=\"13,32\" ng-click=\"prevBoard()\" class=\"arrow icoControls-left\"></i> -->\n" +
+    "           <button class=\"btn-arrow arrow\" b2b-accessibility-click=\"13,32\" ng-click=\"prevBoard()\" ng-disabled=\"!isPrevBoard()\">\n" +
+    "               <div class=\"btn btn-small btn-alt\"><i class=\"icon-primary-left\"></i>\n" +
+    "               </div>\n" +
+    "               <span class=\"offscreen-text\">Previous boards</span>\n" +
+    "           </button>\n" +
+    "       </div>\n" +
+    "       <div b2b-add-board on-add-board=\"onAddBoard()\"></div>\n" +
+    "       <div class=\"board-viewport\"><ul role=\"menu\" class=\"boardstrip-container\" ng-transclude></ul></div>\n" +
+    "       <div class=\"next-items\">\n" +
+    "           <!-- <i tabindex=\"{{isNextBoard() ? 0 : -1}}\" ng-class=\"{'disabled': !isNextBoard()}\" role=\"menuitem\" aria-label=\"See next boards\" b2b-accessibility-click=\"13,32\" ng-click=\"nextBoard()\" class=\"arrow icoControls-right\"></i> -->\n" +
+    "           <button class=\"btn-arrow arrow\" b2b-accessibility-click=\"13,32\" ng-click=\"nextBoard()\" ng-disabled=\"!isNextBoard()\">\n" +
+    "               <div class=\"btn btn-small btn-alt\"><i class=\"icon-primary-right\"></i>\n" +
+    "               </div>\n" +
+    "               <span class=\"offscreen-text\">Next boards</span>\n" +
+    "           </button>\n" +
+    "       </div>\n" +
+    "   </div>\n" +
+    "</div>\n" +
+    "");
+}]);
+
+angular.module("b2bTemplate/calendar/datepicker-popup.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/calendar/datepicker-popup.html",
+    "<div id=\"datepicker\" class=\"datepicker dropdown-menu\" ng-class=\"{'datepicker-dropdown datepicker-orient-top': !inline, 'datepicker-orient-left': !inline && orientation === 'left', 'datepicker-orient-right': !inline && orientation === 'right'}\" ng-style=\"{position: inline && 'relative', 'z-index': inline && '0', top: !inline && position.top + 'px' || 0, left: !inline && position.left + 'px'}\" style=\"display: block;\" aria-hidden=\"false\" role=\"dialog\" tabindex=\"-1\" b2b-key type=\"table\" columns=\"7\">\n" +
+    "    <div class=\"datepicker-days\" style=\"display: block;\">\n" +
+    "        <div ng-repeat=\"header in headers\" class=\"text-left\" style=\"width: 100%;\" b2b-append-element=\"header\"></div>\n" +
+    "        <table class=\"table-condensed\">\n" +
+    "            <thead>\n" +
+    "                <tr>\n" +
+    "                    <th id=\"prev\" class=\"prev\" tabindex=\"0\" b2b-accessibility-click=\"13\" aria-label=\"Previous Month\" role=\"button\" b2b-element-focus=\"!disablePrev && getFocus\" ng-style=\"{visibility: visibilityPrev}\" ng-click=\"!disablePrev && move(-1,$event)\"><i class=\"icon-primary-left\" aria-hidden=\"true\"></i></th>\n" +
+    "                    <th id=\"month\" tabindex=\"-1\" aria-label=\"{{title}}\" class=\"datepicker-switch\" colspan=\"{{rows[0].length - 2}}\">{{title}}</th>\n" +
+    "                    <th id=\"next\" class=\"next\" tabindex=\"0\" b2b-accessibility-click=\"13\" b2b-element-focus=\"disablePrev && getFocus\" aria-label=\"Next Month\" role=\"button\" ng-style=\"{visibility: visibilityNext}\" ng-click=\"!disableNext && move(1,$event)\"><i class=\"icon-primary-right\" aria-hidden=\"true\"></i></th>\n" +
+    "                </tr>\n" +
+    "                <tr ng-show=\"labels.length > 0\">\n" +
+    "                    <th id=\"{{label.post}}\" class=\"dow\" ng-repeat=\"label in labels\" aria-hidden=\"true\"><span aria-hidden=\"true\">{{label.pre}}</span></th>\n" +
+    "                </tr>\n" +
+    "            </thead>\n" +
+    "            <tbody>\n" +
+    "                <tr ng-repeat=\"row in rows\">\n" +
+    "                    <td headers=\"{{dt.header}}\" b2b-key-item=\"dt.focusable\" b2b-accessibility-click=\"13\" b2b-element-focus=\"disablePrev && disableNext && getFocus && (dt.selected || dt.firstFocus || dt.fromDate || dt.dateRange)\" tabindex=\"{{(!(dt.focusable && (dt.selected || dt.firstFocus || dt.fromDate || currFocus)) && -1) || 0}}\" aria-hidden=\"{{(!dt.focusable && true) || false}}\" role=\"{{(dt.focusable && 'gridcell') || ''}}\" aria-label=\"{{(dt.focusable && dt.date | date : 'EEEE, MMMM d') || ''}}\" aria-selected=\"{{(dt.focusable && (dt.selected || dt.dateRange) && true) || false}}\" ng-repeat=\"dt in row\" class=\"day magic\" ng-class=\"{'active': dt.focusable && dt.selected && !dt.dateRange, 'start-date': dt.focusable && dt.fromDate && dt.dateRange, 'between-date': dt.focusable && !dt.fromDate && !dt.selected && dt.dateRange, 'end-date': dt.focusable && dt.selected && dt.dateRange, 'old': dt.oldMonth, 'new': dt.nextMonth, 'disabled': dt.disabled, 'due-date': dt.dueDate, 'late-fee': dt.pastDue}\" ng-focus=\"currFocus=true; trapFocus();\" ng-blur=\"currFocus=false; trapFocus();\" title=\"{{(dt.focusable && dt.pastDue && legendMessage) || ''}}\" ng-click=\"!ngDisabled && !dt.disabled && select(dt.date)\">\n" +
+    "                        <div aria-hidden=\"true\" tabindex=\"-1\" class=\"show-date\" ng-if=\"!(dt.oldMonth || dt.nextMonth)\">{{dt.label}}</div>{{(dt.focusable && dt.date | date : 'EEEE, MMMM d yyyy') || ''}}{{(dt.focusable && dt.dueDate && '. Bill-due-date.. ') || ''}}{{(dt.focusable && dt.pastDue && legendMessage) || ''}}</td>\n" +
+    "                </tr>\n" +
+    "            </tbody>\n" +
+    "            <tfoot>\n" +
+    "                <tr ng-repeat=\"footer in footers\">\n" +
+    "                    <th colspan=\"7\" class=\"text-left\" style=\"width: 278px;\" b2b-append-element=\"footer\"></th>\n" +
+    "                </tr>\n" +
+    "            </tfoot>\n" +
+    "        </table>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/calendar/datepicker.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/calendar/datepicker.html",
+    "<div>\n" +
+    "    <span class=\"icon-primary-calendar span12\" ng-class=\"{'disabled': ngDisabled}\" ng-transclude></span>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/coachmark/coachmark.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/coachmark/coachmark.html",
+    "<div class=\"b2b-coachmark-container\" tabindex=\"-1\" role=\"dialog\" aria-label=\"{{currentCoachmark.contentHeader}} {{currentCoachmark.content}} {{currentCoachmark.offscreenText}}\" ng-style=\"{'top':coackmarkElPos.top,'left':coackmarkElPos.left}\" aria-describeby=\"{{currentCoachmark}}\">\n" +
+    "   <i class=\"b2b-coachmark-caret\"></i>\n" +
+    "   <div class=\"b2b-coachmark-header\">\n" +
+    "       <div class=\"b2b-coachmark-countlabel\"><span ng-if=\"coachmarkIndex !== 0\">{{coachmarkIndex}} of {{(coachmarks.length-1)}}<span></div>\n" +
+    "       <div class=\"corner-button\">\n" +
+    "           <button type=\"button\" ng-focus=\"closeButtonFocus()\" class=\"close\" title=\"close\" aria-label=\"Close\" ng-click=\"closeCoachmark()\"></button>\n" +
+    "       </div>\n" +
+    "   </div>\n" +
+    "   <div class=\"b2b-coachmark-content\">   \n" +
+    "       <i class=\"icon-misc-dimmer\"></i>\n" +
+    "       <div class=\"b2b-coachmark-content-header\"><span class=\"offscreen-text\">{{currentCoachmark.offscreenText}}</span>{{currentCoachmark.contentHeader}}</div>\n" +
+    "       <div class=\"b2b-coachmark-description\">{{currentCoachmark.content}}</div>\n" +
+    "       <div class=\"b2b-coachmark-btn-group\">\n" +
+    "           <a class=\"b2b-coachmark-link\" href=\"javascript:void(0)\" ng-if=\"currentCoachmark.linkLabel !== '' && currentCoachmark.linkLabel !== undefined\" ng-click=\"actionCoachmark(currentCoachmark.linkLabel)\">{{currentCoachmark.linkLabel}}</a>\n" +
+    "           <button class=\"btn btn-alt\" ng-if=\"currentCoachmark.buttonLabel !== '' && currentCoachmark.buttonLabel !== undefined\" ng-click=\"actionCoachmark(currentCoachmark.buttonLabel)\">{{currentCoachmark.buttonLabel}}</button>\n" +
+    "       </div>  \n" +
+    "   </div>  \n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/dropdowns/b2bDropdownDesktop.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/dropdowns/b2bDropdownDesktop.html",
+    "<span b2b-key prev=\"38\" next=\"40\" enable-search ng-class=\"{'large': (dropdownSize === 'large'), 'disabled': (disabled), 'selectWrap': (isInputDropdown), 'selectorModule': (dropdownType === 'menu'), 'linkSelectorModule': (dropdownType === 'link-menu')}\">\n" +
+    "    <input b2b-dropdown-toggle b2b-dropdown-validation ng-disabled=\"disabled\" type=\"text\" id=\"{{dropdownId}}\" name=\"{{dropdownName}}\" class=\"awd-select isWrapped\" ng-required=\"dropdownRequired\" ng-model=\"currentSelected.text\" role=\"combobox\" aria-owns=\"listbox{{$id}}\" aria-expanded=\"{{toggleFlag}}\" ng-click=\"toggleDropdown()\" ng-focus=\"focused=true\" ng-blur=\"setBlur(); focused=false\" ng-class=\"{'active': toggleFlag, 'closed': !toggleFlag, 'large': (dropdownSize === 'large'), 'focused':focused}\" style=\"width:100%;\" value=\"{{currentSelected.text}}\" ng-show=\"isInputDropdown\" aria-describedby=\"{{dropdownDescribedBy}}\" readonly=\"readonly\">\n" +
+    "    <button type=\"button\" b2b-dropdown-toggle ng-disabled=\"disabled\" class=\"selectModule\" aria-label=\"{{labelText}} {{currentSelected.label}}\" aria-expanded=\"{{toggleFlag}}\" aria-haspopup=\"true\" ng-click=\"toggleDropdown()\" ng-blur=\"setBlur()\" ng-class=\"{'active opened': toggleFlag, 'closed': !toggleFlag, 'large': (dropdownSize === 'large')}\" ng-bind-html=\"currentSelected.text\" ng-show=\"!isInputDropdown\"></button>\n" +
+    "    <div ng-class=\"{'selectWrapper': (isInputDropdown), 'moduleWrapper': (!isInputDropdown)}\">\n" +
+    "        <ul id=\"listbox{{$id}}\" role=\"{{isInputDropdown?'listbox':'menu'}}\" ng-class=\"{'awd-select-list': (isInputDropdown), 'awd-module-list': (!isInputDropdown)}\" tabindex=\"-1\" ng-show=\"toggleFlag\" aria-label=\"Choose options\"></ul>\n" +
+    "        <ul class=\"module-optinalcta\" ng-if=\"toggleFlag && optionalCta\" tabindex=\"-1\" aria-hidden=\"false\">\n" +
+    "            <li class=\"module-list-item\" tabindex=\"-1\" role=\"menuitem\" value=\"\" aria-label=\"Optinal CTA\" aria-selected=\"true\">\n" +
+    "                <span class=\"module-data\" b2b-append-element=\"optionalCta\"></span>\n" +
+    "            </li>\n" +
+    "        </ul>\n" +
+    "</div>\n" +
+    "<i class=\"icon-primary-down\" aria-hidden=\"true\"></i>\n" +
+    "</span>    ");
+}]);
+
+angular.module("b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/dropdowns/b2bDropdownGroupDesktop.html",
+    "<li b2b-dropdown-group-desktop class=\"optgroup-wrapper\">{{groupHeader}}\n" +
+    "    <ul class=\"optgroup\" role=\"group\" aria-label=\"{{groupHeader}}\"></ul>\n" +
+    "</li>");
+}]);
+
+angular.module("b2bTemplate/dropdowns/b2bDropdownListDesktop.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/dropdowns/b2bDropdownListDesktop.html",
+    "<li b2b-dropdown-list-desktop b2b-key-item b2b-accessibility-click=\"13\" aria-selected=\"{{currentSelected.value === dropdownListValue}}\" ng-class=\"{'awd-select-list-item': (isInputDropdown), 'module-list-item': (!isInputDropdown)}\" tabindex=\"0\" role=\"{{isInputDropdown?'option':'menuitem'}}\" ng-click=\"selectDropdownItem()\"></li>");
+}]);
+
+angular.module("b2bTemplate/fileUpload/fileUpload.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/fileUpload/fileUpload.html",
+    "<label class=\"b2b-file-container\">\n" +
+    "   <span class=\"b2b-upload-link\" ng-transclude></span>\n" +
+    "   <input type=\"file\" b2b-file-change>\n" +
+    "</label>");
+}]);
+
+angular.module("b2bTemplate/flyout/flyout.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/flyout/flyout.html",
+    "<span class=\"b2b-flyout\"  b2b-flyout-trap-focus-inside>\n" +
+    "    <span ng-transclude></span>\n" +
+    "</span>");
+}]);
+
+angular.module("b2bTemplate/flyout/flyoutContent.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/flyout/flyoutContent.html",
+    "<div class=\"b2b-flyout-container\" aria-live=\"polite\" aria-atomic=\"false\" ng-class=\"{'b2b-flyout-left':horizontalPlacement==='left',\n" +
+    "                'b2b-flyout-center':horizontalPlacement==='center', \n" +
+    "                'b2b-flyout-right':horizontalPlacement==='right',\n" +
+    "                'b2b-flyout-centerLeft':horizontalPlacement==='centerLeft',\n" +
+    "                'b2b-flyout-centerRight':horizontalPlacement==='centerRight',  \n" +
+    "                'b2b-flyout-above':verticalPlacement==='above', \n" +
+    "                'b2b-flyout-below':verticalPlacement==='below',\n" +
+    "                'open-flyout': openFlyout,\n" +
+    "                'b2b-close-flyout': !openFlyout}\">\n" +
+    "    <i class=\"b2b-flyout-caret\" ng-class=\"{'open-flyout': openFlyout, \n" +
+    "                                   'b2b-flyout-caret-above':verticalPlacement==='above',\n" +
+    "                                   'b2b-flyout-caret-below':verticalPlacement==='below'}\"></i>\n" +
+    "    <span ng-transclude></span>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/footer/footer_column_switch_tpl.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/footer/footer_column_switch_tpl.html",
+    "<div class=\"footer-columns \" ng-class=\"{'five-column':footerColumns===5, 'four-column':footerColumns===4, 'three-column':footerColumns===3}\" ng-repeat=\"item in footerLinkItems\">\n" +
+    "    <h3 class=\"b2b-footer-header\">{{item.categoryName}}</h3>\n" +
+    "    <ul>\n" +
+    "        <li ng-repeat=\"i in item.values\">\n" +
+    "            <a href=\"{{i.href}}\" title=\"{{item.categoryName}} - {{i.displayLink}}\">{{i.displayLink}}</a>  \n" +
+    "        </li>\n" +
+    "    </ul>\n" +
+    "\n" +
+    "</div>\n" +
+    "\n" +
+    "<div ng-transclude></div>\n" +
+    "");
+}]);
+
+angular.module("b2bTemplate/horizontalTable/horizontalTable.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/horizontalTable/horizontalTable.html",
+    "<div class=\"b2b-horizontal-table\">\n" +
+    "    <div class=\"b2b-horizontal-table-arrows row span12\">\n" +
+    "       <div class=\"span4\">\n" +
+    "           <button class=\"btn-arrow left\" type=\"button\" ng-click=\"moveViewportLeft()\" ddh-accessibility-click=\"13,32\" ng-disabled=\"disableLeft\"><div class=\"btn btn-alt\"><i class=\"icon-primary-left\"></i></div>Previous Set</button>\n" +
+    "        </div>\n" +
+    "        \n" +
+    "        <span class=\"span5 b2b-horizontal-table-column-info\" aria-live=\"polite\" tabindex=\"-1\">\n" +
+    "           Displaying {{getColumnSet()[0]}} - {{getColumnSet()[1]}} of {{numOfCols}} (total) columns\n" +
+    "        </span>\n" +
+    "        \n" +
+    "        <div class=\"span3\">\n" +
+    "           <button class=\"btn-arrow right\" ng-click=\"moveViewportRight()\" ddh-accessibility-click=\"13,32\" ng-disabled=\"disableRight\" type=\"button\">Next Set<div class=\"btn btn-alt\"><i class=\"icon-primary-right\"></i></div></button>\n" +
+    "       </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"b2b-horizontal-table-inner-container\">\n" +
+    "        <span ng-transclude></span>\n" +
+    "    </div>\n" +
+    "</div>\n" +
+    "\n" +
+    "");
+}]);
+
+angular.module("b2bTemplate/hourPicker/b2bHourpicker.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/hourPicker/b2bHourpicker.html",
+    "<div class=\"hp-container\">\n" +
+    "    <div class=\"hp-selected\">\n" +
+    "        <div b2b-hourpicker-value=\"$index\" days=\"value.days\" start-time=\"value.startTime\" start-meridiem=\"value.startMeridiem\" end-time=\"value.endTime\" end-meridiem=\"value.endMeridiem\" ng-repeat=\"value in finalHourpickerValues\"></div>\n" +
+    "    </div>\n" +
+    "    <div b2b-hourpicker-panel></div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/hourPicker/b2bHourpickerPanel.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/hourPicker/b2bHourpickerPanel.html",
+    "<form name=\"{{'hourpickerForm' + $id}}\">\n" +
+    "    <div class=\"hp-checkbox\" role=\"group\">\n" +
+    "        <label class=\"checkbox\" for=\"checkbox_{{dayOption.title}}_{{$id}}\" aria-label=\"{{dayOption.title}}\" ng-repeat=\"dayOption in hourpicker.dayOptions\">\n" +
+    "            <input type=\"checkbox\" id=\"checkbox_{{dayOption.title}}_{{$id}}\" name=\"{{'hourpickerDays' + $id}}\" ng-model=\"hourpickerPanelValue.days[$index].value\" ng-disabled=\"dayOption.disabled\" /><i class=\"skin\"></i><span>{{dayOption.label}}</span>\n" +
+    "        </label>\n" +
+    "    </div>\n" +
+    "    <div class=\"row hp-dropdowns\">\n" +
+    "        <div class=\"span4\">\n" +
+    "            <label for=\"{{'hourpickerStartTime' + $id}}\">From</label>\n" +
+    "            <select id=\"{{'hourpickerStartTime' + $parent.$id}}\" b2b-dropdown type=\"\" ng-model=\"hourpickerPanelValue.startTime\">\n" +
+    "                <option b2b-dropdown-list value=\"\">From</option>\n" +
+    "                <option b2b-dropdown-list option-repeat=\"startTimeOption in hourpicker.startTimeOptions\" value=\"{{startTimeOption}}\">{{startTimeOption}}</option>\n" +
+    "            </select>\n" +
+    "        </div>\n" +
+    "        <div class=\"span8 radio-buttons\" role=\"radiogroup\" aria-label=\"Select AM or PM\">\n" +
+    "            <label class=\"radio\" for=\"hourpickerStartMeridiem_AM_{{$id}}\">\n" +
+    "                <input type=\"radio\" id=\"hourpickerStartMeridiem_AM_{{$id}}\" name=\"{{'hourpickerStartMeridiem' + $id}}\" value=\"am\" ng-model=\"hourpickerPanelValue.startMeridiem\" /><i class=\"skin\"></i><span>AM</span>\n" +
+    "            </label>\n" +
+    "            <label class=\"radio\" for=\"hourpickerStartMeridiem_PM_{{$id}}\">\n" +
+    "                <input type=\"radio\" id=\"hourpickerStartMeridiem_PM_{{$id}}\" name=\"{{'hourpickerStartMeridiem' + $id}}\" value=\"pm\" ng-model=\"hourpickerPanelValue.startMeridiem\" /><i class=\"skin\"></i><span>PM</span>\n" +
+    "            </label>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"row hp-dropdowns\">\n" +
+    "        <div class=\"span4\">\n" +
+    "            <label for=\"{{'hourpickerEndTime' + $id}}\">To</label>\n" +
+    "            <select id=\"{{'hourpickerEndTime' + $parent.$id}}\" b2b-dropdown ng-model=\"hourpickerPanelValue.endTime\">\n" +
+    "                <option b2b-dropdown-list value=\"\">To</option>\n" +
+    "                <option b2b-dropdown-list option-repeat=\"endTimeOption in hourpicker.endTimeOptions\" value=\"{{endTimeOption}}\">{{endTimeOption}}</option>\n" +
+    "            </select>\n" +
+    "        </div>\n" +
+    "        <div class=\"span8 radio-buttons\" role=\"radiogroup\" aria-label=\"Select AM or PM\">\n" +
+    "            <label class=\"radio\" for=\"hourpickerEndMeridiem_AM_{{$id}}\">\n" +
+    "                <input type=\"radio\" id=\"hourpickerEndMeridiem_AM_{{$id}}\" name=\"{{'hourpickerEndMeridiem' + $id}}\" value=\"am\" ng-model=\"hourpickerPanelValue.endMeridiem\" /><i class=\"skin\"></i><span>AM</span>\n" +
+    "            </label>\n" +
+    "            <label class=\"radio\" for=\"hourpickerEndMeridiem_PM_{{$id}}\">\n" +
+    "                <input type=\"radio\" id=\"hourpickerEndMeridiem_PM_{{$id}}\" name=\"{{'hourpickerEndMeridiem' + $id}}\" value=\"pm\" ng-model=\"hourpickerPanelValue.endMeridiem\" /><i class=\"skin\"></i><span>PM</span>\n" +
+    "            </label>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"row hp-buttons\">\n" +
+    "        <div class=\"span12\">\n" +
+    "            <div style=\"float:right\">\n" +
+    "                <button class=\"btn btn-secondary btn-small\" ng-click=\"resetHourpickerPanelValue()\">Clear</button>\n" +
+    "                <button class=\"btn btn-alt btn-small\" ng-disabled = \"disableAddBtn\" ng-click=\"updateHourpickerValue()\">{{hourpicker.editMode > -1 ? 'Update' : 'Add'}}</button>\n" +
+    "            </div>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "</form>");
+}]);
+
+angular.module("b2bTemplate/hourPicker/b2bHourpickerValue.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/hourPicker/b2bHourpickerValue.html",
+    "<div class=\"selected-days\">\n" +
+    "    <span class=\"day\">{{hourpickerValue.days}} &nbsp; {{hourpickerValue.startTime}} {{hourpickerValue.startMeridiem}} - {{hourpickerValue.endTime}} {{hourpickerValue.endMeridiem}}</span>\n" +
+    "    <span style=\"float:right\">\n" +
+    "        <i class=\"icon-misc-pen\" role=\"button\" title=\"Edit {{hourpickerValue.days}} &nbsp; {{hourpickerValue.startTime}} {{hourpickerValue.startMeridiem}} - {{hourpickerValue.endTime}} {{hourpickerValue.endMeridiem}}\" tabindex=\"0\" b2b-accessibility-click=\"13,32\" ng-click=\"editHourpickerValue(hourpickerValue.index)\"></i>\n" +
+    "        <i class=\"icon-misc-trash\" role=\"button\" title=\"Delete {{hourpickerValue.days}} &nbsp; {{hourpickerValue.startTime}} {{hourpickerValue.startMeridiem}} - {{hourpickerValue.endTime}} {{hourpickerValue.endMeridiem}}\" tabindex=\"0\" b2b-accessibility-click=\"13,32\" ng-click=\"deleteHourpickerValue(hourpickerValue.index)\"></i>\n" +
+    "    </span>\n" +
+    "    <div style=\"clear:both\"></div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/leftNavigation/leftNavigation.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/leftNavigation/leftNavigation.html",
+  "<div class=\"b2b-nav-menu\" ng-init=\"(showmenu = true)\" ng-class=\"{false: 'left-menu-collapsed'}[showmenu]\">\n" +
+    "    <div class=\"b2b-subnav-container\">\n" +
+    "        <ul class=\"b2b-subnav-content\">\n" +
+    "			 <li>" +
+    "				<div ng-class=\"{true: 'leftmenu-arrow-expand', false: 'leftmenu-arrow-collapse'}[showmenu]\">"+	
+    "					<a ng-click=\"toggleDrawer(showmenu);(showmenu = !showmenu) \" class=\"text-right\">" +
+    "					<i ng-class=\"{true: 'icon-controls-left', false: 'icon-controls-right'}[showmenu]\">&nbsp;</i></a>" +
+    "				</div>"+			
+    "			</li>" +
+    "            <li ng-repeat=\"menu in menuData\" ui-sref=\"{{menu.state}}\">" +
+    "    			<span ng-class=\"{true: 'menu-icon', false: 'menu-icon-collapse'}[showmenu]\"><span class=\"{{menu.imageSrc}}\"></span>&nbsp;&nbsp;</span>" +
+    "				<a ng-class=\"{expand: isOpen($index)}\" ng-if=\"showmenu\"  aria-label=\"{{menu.name}}\" title=\" \" aria-expanded=\"{{(idx==$index)?true:false;}}\" href=\"javascript:void(0);\">" +
+    "					{{menu.name}}" +
+    " 					<i aria-hidden=\"true\" ng-if=\"(menu.menuItems.length > 0)\" class=\"b2b-icon-primary-plus-minus\"ng-class=\"idx==$index ? 'icon-primary-expanded' : 'icon-primary-collapsed'\"></i>" +
+    "				</a>\n" +
+    "				<div role=\"region\" aria-hidden=\"{{(isOpen($index))?false:true;}}\">\n" +
+    "               	<ul ng-class=\"{expand: idx==$index}\">\n" +
+    "                  	  <li ng-repeat=\"menuItem in menu.menuItems\" ng-click=\"liveLink($event, $index, $parent.$index)\"><a aria-hidden=\"{{!(idx==$parent.$index)}}\" aria-label=\"{{menuItem.name}}\" title=\" \" href=\"{{menuItem.href}}\" tabindex=\"{{(idx==$parent.$index)?0:-1;}}\" ng-class=\"{active: itemIdx==$index && navIdx==$parent.$index}\">{{menuItem.name}}</a></li>\n" +
+    "              		</ul>\n" +
+    "				</div>\n" +
+    "            </li>\n" +
+    "        </ul>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/listbox/listbox.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/listbox/listbox.html",
+    "<div class=\"b2b-list-box\" tabindex=\"0\" role=\"listbox\" ng-transclude>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/modalsAndAlerts/b2b-backdrop.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/modalsAndAlerts/b2b-backdrop.html",
+    "<div class=\"b2b-modal-backdrop fade in hidden-by-modal\" aria-hidden=\"true\" tabindex=\"-1\"></div>");
+}]);
+
+angular.module("b2bTemplate/modalsAndAlerts/b2b-window.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/modalsAndAlerts/b2b-window.html",
+    "<div class=\"modalwrapper active {{windowClass}}\" ng-class=\"{'modal-landscape': isModalLandscape}\" role=\"{{isNotifDialog?'alertdialog':'dialog'}}\" tabindex=\"-1\" aria-labelledby=\"{{title}}\" aria-describedby=\"{{content}}\">\n" +
+    "    <div class=\"modal fade in {{sizeClass}}\" ng-transclude></div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/monthSelector/monthSelector-popup.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/monthSelector/monthSelector-popup.html",
+    "<div id=\"monthselector{{$id}}\" class=\"datepicker dropdown-menu monthselector\" \n" +
+    "     ng-class=\"{'datepicker-dropdown datepicker-orient-top': !inline, 'datepicker-orient-left': !inline && orientation === 'left', 'datepicker-orient-right': !inline && orientation === 'right'}\" \n" +
+    "     ng-style=\"{position: inline && 'relative', 'z-index': inline && '0', top: !inline && position.top + 'px' || 0, left: !inline && position.left + 'px'}\" \n" +
+    "     style=\"display: block;\" aria-hidden=\"false\" role=\"dialog presentation\" tabindex=\"-1\">\n" +
+    "    <div class=\"datepicker-days\" style=\"display: block;\">\n" +
+    "        <span class=\"offscreen-text\" aria-live=\"polite\" aria-atomic=\"true\">{{title}} displaying</span>\n" +
+    "        <table class=\"table-condensed\" role=\"grid\">\n" +
+    "            <thead>\n" +
+    "                <tr ng-repeat=\"header in headers\">\n" +
+    "                    <th colspan=\"7\" class=\"text-left\" style=\"width: 278px;\" b2b-append-element=\"header\"></th>\n" +
+    "                </tr>\n" +
+    "                <tr>\n" +
+    "                    <th id=\"prev{{$id}}\" role=\"button\" tabindex=\"0\" b2b-accessibility-click=\"13\" aria-label=\"Previous Year\" ng-class=\"{'prev': !disablePrev}\" ng-style=\"{visibility: visibilityPrev}\" ng-click=\"!disablePrev && move(-1,$event)\"><i class=\"icon-primary-left\"></i></th>\n" +
+    "                    <th id=\"year{{$id}}\" role=\"heading\" tabindex=\"-1\" aria-label=\"{{title}}\" class=\"datepicker-switch b2b-monthSelector-label\" colspan=\"{{rows[0].length - 2}}\">{{title}}</th>\n" +
+    "                    <th id=\"next{{$id}}\" role=\"button\" tabindex=\"0\" b2b-accessibility-click=\"13\" aria-label=\"Next Year\" ng-class=\"{'next': !disableNext}\" ng-style=\"{visibility: visibilityNext}\" ng-click=\"!disableNext && move(1,$event)\"><i class=\"icon-primary-right\"></i></th>\n" +
+    "                </tr>\n" +
+    "                <tr ng-show=\"labels.length > 0\">\n" +
+    "                    <th id=\"{{label.post}}\" class=\"dow\" ng-repeat=\"label in labels\" aria-hidden=\"true\"><span aria-hidden=\"true\">{{label.pre}}</span></th>\n" +
+    "                </tr>\n" +
+    "            </thead>\n" +
+    "            <tbody b2b-key type=\"table\" columns=\"4\" >\n" +
+    "                <tr ng-repeat=\"row in rows\">\n" +
+    "                    <td headers=\"{{dt.header}}\" b2b-key-item=\"dt.focusable\" b2b-accessibility-click=\"13,32\" tabindex=\"{{(!(dt.focusable && (dt.selected || dt.firstFocus || currFocus)) && -1) || 0}}\" aria-hidden=\"{{(!dt.focusable && true) || false}}\" role=\"{{(dt.focusable && 'gridcell') || ''}}\" aria-label=\"{{(dt.focusable && dt.date | date : 'MMMM, y') || ''}}\" aria-selected=\"{{(dt.focusable && (dt.selected || dt.dateRange) && true) || false}}\" ng-repeat=\"dt in row\" class=\"day magic\" ng-class=\"{'active': dt.focusable && dt.selected && !dt.dateRange, 'start-date': dt.focusable && dt.fromDate && dt.dateRange, 'between-date': dt.focusable && !dt.fromDate && !dt.selected && dt.dateRange, 'end-date': dt.focusable && dt.selected && dt.dateRange, 'old': dt.oldMonth, 'new': dt.nextMonth, 'disabled': dt.disabled, 'due-date': dt.dueDate, 'late-fee': dt.pastDue}\" ng-focus=\"currFocus=true\" ng-blur=\"currFocus=false\" title=\"{{(dt.focusable && dt.pastDue && legendMessage) || ''}}\" b2b-element-focus=\"inline && dt.focusable && dt.selected && !dt.dateRange\" ng-click=\"!ngDisabled && !dt.disabled && select(dt.date)\">\n" +
+    "                        <div aria-hidden=\"true\"  tabindex=\"-1\" class=\"show-date\" ng-if=\"!(dt.oldMonth || dt.nextMonth)\">{{dt.label | limitTo: 3}}</div>\n" +
+    "                    </td>\n" +
+    "                </tr>\n" +
+    "            </tbody>\n" +
+    "            <tfoot>\n" +
+    "                <tr ng-repeat=\"footer in footers\">\n" +
+    "                    <th colspan=\"7\" class=\"text-left\" b2b-append-element=\"footer\"></th>\n" +
+    "                </tr>\n" +
+    "            </tfoot>\n" +
+    "        </table>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/monthSelector/monthSelector.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/monthSelector/monthSelector.html",
+    "<div>\n" +
+    "    <span class=\"icon-primary-calendar span12\" ng-class=\"{'disabled': ngDisabled}\" ng-transclude></span>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/monthSelector/monthSelectorLink.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/monthSelector/monthSelectorLink.html",
+    "<div>\n" +
+    "    <span class=\"span12\" ng-transclude></span>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/pagination/b2b-pagination.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/pagination/b2b-pagination.html",
+    "<div class=\"b2b-pager\">\n" +
+    "    <div ng-if=\"notMobile && totalPages > 1\">\n" +
+    "        <a tabindex=\"{{currentPage <= 1 ? -1 : 0 }}\" class=\"b2b-pager__item--prev\" b2b-accessibility-click=\"13,32\" title=\"Previous Page\" ng-click=\"prev($event)\" ng-if=\"totalPages > 10\" ng-class=\"currentPage <= 1 ? 'b2b-pager__item--prev-disabled': '' \">\n" +
+    "            <i class=\"icon-primary-left\"></i>\n" +
+    "        </a>\n" +
+    "        <a tabindex=\"{{currentPage === 1 ? -1 : 0}}\" ng-class=\"{'b2b-pager__item--noclick': currentPage === 1}\" aria-selected=\"{{checkSelectedPage(page)}}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page 1{{checkSelectedPage(page) ? ' selected' : '' }}\" ng-if=\"totalPages > 10 && currentPage > 6\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(1, $event)\">\n" +
+    "            1<span class=\"offscreen-text\" ng-if=\"currentPage === 1\"> is selected</span>\n" +
+    "        </a>\n" +
+    "        <a tabindex=\"{{currentPage === 2 ? -1 : 0}}\" aria-selected=\"{{checkSelectedPage(page)}}\" ng-class=\"{'b2b-pager__item--noclick': currentPage === 2}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page 2{{checkSelectedPage(page) ? ' selected' : '' }}\" ng-if=\"totalPages > 10 && currentPage > 6\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(2, $event)\">2<span class=\"offscreen-text\" ng-if=\"currentPage === 2\"> is selected</span></a>\n" +
+    "\n" +
+    "        <span class=\"b2b-pager__item\" ng-if=\"totalPages > 10 && currentPage > 6\">...</span>\n" +
+    "\n" +
+    "        <a tabindex=\"{{checkSelectedPage(page) ? -1 : 0}}\" href=\"javascript:void(0)\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{page}}\" b2b-element-focus=\"isFocused(page)\" ng-repeat=\"page in pages\" ng-class=\"{'b2b-pager__item--active': checkSelectedPage(page), 'b2b-pager__item--noclick': checkSelectedPage(page)}\" b2b-accessibility-click=\"13,32\" ng-click=\"!checkSelectedPage(page) && selectPage(page, $event)\">{{page}}<span class=\"offscreen-text\" ng-if=\"currentPage === page\"> is selected</span></a>\n" +
+    "\n" +
+    "        <span class=\"b2b-pager__item\" ng-if=\"totalPages > 10 && currentPage <= totalPages - 5\">...</span>\n" +
+    "\n" +
+    "        <a tabindex=\"{{checkSelectedPage(page) ? -1 : 0}}\" href=\"javascript:void(0)\" ng-class=\"{'b2b-pager__item--noclick': checkSelectedPage(page)}\" aria-selected=\"{{checkSelectedPage(page)}}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{totalPages-1}}\" ng-if=\"totalPages > 10 && currentPage <= totalPages - 5\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(totalPages-1, $event)\">{{totalPages-1}}<span class=\"offscreen-text\" ng-if=\"currentPage === totalPages-1\"> is selected</span></a>\n" +
+    "\n" +
+    "        <a tabindex=\"{{currentPage === totalPages ? -1 : 0}}\" href=\"javascript:void(0)\" ng-class=\"{'b2b-pager__item--noclick': currentPage === totalPages}\" aria-selected=\"{{checkSelectedPage(page)}}\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{totalPages}}\" ng-if=\"totalPages > 10 && currentPage <= totalPages - 5\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(totalPages, $event)\">{{totalPages}}<span class=\"offscreen-text\" ng-if=\"currentPage === totalPages\"> is selected</span></a>\n" +
+    "\n" +
+    "        <a tabindex=\"{{currentPage >= totalPages ? -1 : 0 }}\" href=\"javascript:void(0)\" class=\"b2b-pager__item--next\" b2b-accessibility-click=\"13,32\" title=\"Next Page\" ng-click=\"next($event)\" ng-if=\"totalPages > 10\" ng-class=\"currentPage >= totalPages ? 'b2b-pager__item--next-disabled' :'' \">\n" +
+    "            <i class=\"icon-primary-right\"></i>\n" +
+    "        </a>\n" +
+    "        \n" +
+    "        <span class=\"fieldLabel\" ng-show=\"totalPages > 10 && showInput === true\">    \n" +
+    "            <label for=\"{{inputId}}\">Go to Page:</label>\n" +
+    "            <input id=\"{{inputId}}\" class=\"b2b-pager__item--input\" type=\"number\" ng-blur=\"onfocusOut($event)\" ng-focus=\"onfocusIn($event)\" ng-keypress=\"gotoKeyClick($event)\" b2b-only-nums=\"4\" ng-model=\"$parent.gotoPage\" />\n" +
+    "            <button class=\"btn-arrow\" ng-click=\"gotoBtnClick()\" ng-disabled=\"$parent.gotoPage !== 0 || $parent.gotoPage !== undefined\" aria-label=\"Go to\">\n" +
+    "                <div class=\"btn btn-small btn-secondary\">\n" +
+    "                    <i class=\"icon-primary-right\"></i>\n" +
+    "                </div>\n" +
+    "            </button>\n" +
+    "        </span>\n" +
+    "    </div>\n" +
+    "    <div ng-if=\"isMobile && totalPages > 1\" ng-swipe-right=\"prev()\" ng-swipe-left=\"next()\" ng-class=\"isMobile ? 'b2b-mobile-view': '' \">\n" +
+    "        <a tabindex=\"{{checkSelectedPage(page) ? -1 : 0}}\" href=\"javascript:void(0)\" class=\"b2b-pager__item b2b-pager__item--link\" title=\"Page {{page}}\" b2b-element-focus=\"isFocused(page)\" ng-repeat=\"page in pages\" ng-class=\"{'b2b-pager__item--active': checkSelectedPage(page), fade1: ($index == 0 && currentPage > meanVal+1),  fade2: ($index == 1 && currentPage > meanVal+1), fadesl: ($index == pages.length-2 && currentPage < totalPages - meanVal),  fadel: ($last && currentPage < totalPages - meanVal), 'b2b-pager__item--noclick': checkSelectedPage(page)}\" b2b-accessibility-click=\"13,32\" ng-click=\"selectPage(page, $event)\">{{page}}</a>\n" +
+    "    </div>\n" +
+    "</div>\n" +
+    "");
+}]);
+
+angular.module("b2bTemplate/paneSelector/paneSelector.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/paneSelector/paneSelector.html",
+    "<div class=\"panes\" ng-transclude></div>");
+}]);
+
+angular.module("b2bTemplate/paneSelector/paneSelectorPane.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/paneSelector/paneSelectorPane.html",
+    "<div class=\"pane-block\" ng-transclude></div>");
+}]);
+
+angular.module("b2bTemplate/profileCard/profileCard-addUser.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/profileCard/profileCard-addUser.html",
+    "<div  class=\"span3 b2b-profile-card b2b-add-user\">\n" +
+    "    <div class=\"atcenter\">\n" +
+    "        <div class=\"circle\"><i class=\"icon-primary-add-maximize\"></i></div>\n" +
+    "        <div>Create new user</div>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/profileCard/profileCard.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/profileCard/profileCard.html",
+    "<div class=\"span3 b2b-profile-card\">\n" +
+    "    <div class=\"top-block\">\n" +
+    "       <div class=\"profile-image\">\n" +
+    "            <img ng-if=\"image\" profile-name=\"{{profile.name}}\" ng-src=\"{{profile.img}}\" alt=\"{{profile.name}}\">\n" +
+    "            <span ng-if=\"!image\" class=\"default-img\">{{initials}}</span>\n" +
+    "\n" +
+    "            <h4 class=\"name\">{{profile.name}}</h4>\n" +
+    "\n" +
+    "            <p class=\"status\">\n" +
+    "                <span class=\"status-icon\" ng-class=\"{'status-green':colorIcon==='green','status-red':colorIcon==='red','status-blue':colorIcon==='blue','status-yellow':colorIcon==='yellow'}\">   \n" +
+    "                </span>\n" +
+    "                <span>{{profile.state}}<span ng-if=\"badge\" class=\"status-badge\">Admin</span></span>\n" +
+    "            </p>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"bottom-block\">\n" +
+    "         <div class=\"profile-details\">\n" +
+    "            <label>Username</label>\n" +
+    "            <div ng-if=\"shouldClip(profile.userName)\" ng-mouseover=\"showUserNameTooltip = true;\" ng-mouseleave=\"showUserNameTooltip = false;\">\n" +
+    "                <div ng-if=\"shouldClip(profile.userName)\" class=\"tooltip\" b2b-tooltip show-tooltip=\"showUserNameTooltip\">\n" +
+    "                    {{profile.userName.slice(0, 25)+'...'}}\n" +
+    "                    <div class=\"arrow\"></div>\n" +
+    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +
+    "                        <div class=\"tooltip-size-control\">\n" +
+    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +
+    "                                {{profile.userName}}\n" +
+    "                            </div>\n" +
+    "                        </div>\n" +
+    "                    </div>\n" +
+    "                </div>\n" +
+    "            </div>\n" +
+    "            <div ng-if=\"!shouldClip(profile.userName)\">\n" +
+    "                {{profile.userName}}\n" +
+    "            </div>\n" +
+    "            <label>Email</label>\n" +
+    "            <div ng-if=\"shouldClip(profile.email)\" ng-mouseover=\"showEmailTooltip = true;\" ng-mouseleave=\"showEmailTooltip = false;\">\n" +
+    "                <div ng-if=\"shouldClip(profile.email)\" class=\"tooltip\" data-placement=\"bottom\" b2b-tooltip show-tooltip=\"showEmailTooltip\">\n" +
+    "                    {{profile.email.slice(0, 25)+'...'}}\n" +
+    "                    <div class=\"arrow\"></div>\n" +
+    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +
+    "                        <div class=\"tooltip-size-control\">\n" +
+    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +
+    "                                {{profile.email}}\n" +
+    "                            </div>\n" +
+    "                        </div>\n" +
+    "                    </div>\n" +
+    "                </div>\n" +
+    "            </div>\n" +
+    "            <div ng-if=\"!shouldClip(profile.email)\">\n" +
+    "                {{profile.email}}\n" +
+    "            </div>\n" +
+    "            <label>Role</label>\n" +
+    "            <div ng-if=\"shouldClip(profile.role)\" ng-mouseover=\"showRoleTooltip = true;\" ng-mouseleave=\"showRoleTooltip = false;\">\n" +
+    "                <div ng-if=\"shouldClip(profile.role)\" class=\"tooltip\" b2b-tooltip show-tooltip=\"showRoleTooltip\">\n" +
+    "                    {{profile.role.slice(0, 25)+'...'}}\n" +
+    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +
+    "                        <div class=\"tooltip-size-control\">\n" +
+    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +
+    "                                {{profile.role}}\n" +
+    "                            </div>\n" +
+    "                        </div>\n" +
+    "                    </div>\n" +
+    "                </div>\n" +
+    "            </div>\n" +
+    "            <div ng-if=\"!shouldClip(profile.role)\">\n" +
+    "                {{profile.role}}\n" +
+    "            </div>\n" +
+    "            <label>Last login</label>\n" +
+    "            <div ng-if=\"shouldClip(profile.lastLogin)\" ng-mouseover=\"showLastLoginTooltip = true;\" ng-mouseleave=\"showLastLoginTooltip = false;\">\n" +
+    "                <div ng-if=\"shouldClip(profile.lastLogin)\" class=\"tooltip\" b2b-tooltip show-tooltip=\"showLastLoginTooltip\">\n" +
+    "                    {{profile.lastLogin.slice(0, 25)+'...'}}\n" +
+    "                    <div class=\"tooltip-wrapper\" role=\"tooltip\" aria-live=\"polite\" aria-atomic=\"false\" style=\"z-index:1111\">\n" +
+    "                        <div class=\"tooltip-size-control\">\n" +
+    "                            <div class=\"helpertext\" tabindex=\"-1\" role=\"tooltip\">\n" +
+    "                                {{profile.lastLogin}}\n" +
+    "                            </div>\n" +
+    "                        </div>\n" +
+    "                    </div>\n" +
+    "                </div>\n" +
+    "            </div>\n" +
+    "            <div ng-if=\"!shouldClip(profile.lastLogin)\">\n" +
+    "                {{profile.lastLogin}}\n" +
+    "            </div>\n" +
+    "         </div>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/searchField/searchField.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/searchField/searchField.html",
+    "<div class=\"search-bar\">\n" +
+    "    <div class='input-container' ng-blur=\"blurInput()\">\n" +
+    "        <input type=\"text\" class=\"innershadow b2b-search-input-field\" id=\"{{configObj.labelId}}\" b2b-search-input ng-model=\"inputModel\" ng-disabled=\"disabled\" b2b-reset ng-keydown=\"selectionIndex($event)\" placeholder=\"{{configObj.ghostText}}\" style=\"width:100%\" maxlength=\"{{configObj.maxLength}}\" title=\"{{inputModel}}\" aria-label=\"{{inputModel.length>0?inputModel:configObj.ghostText}}\"  aria-live=\"assertive\"/>\n" +
+    "            <button class=\"btn-search\" ng-disabled=\"disabled\" ng-click=\"startSearch()\" b2b-accessibility-click=\"13,32\" aria-label=\"Search\" ng-focus=\"showListFlag = false\" type=\"button\"><i class=\"icoControls-magnifyingglass\"></i></button>\n" +
+    "    </div>\n" +
+    "    <div class=\"search-suggestion-wrapper\" ng-if=\"filterList.length >=0\" ng-show=\"showListFlag\">\n" +
+    "        <ul class=\"search-suggestion-list\" role=\"listbox\">      \n" +
+    "            <li class=\"no-result\" ng-if=\"filterList.length == 0 && configObj.display\">{{configObj.resultText}}</li>\n" +
+    "            <li class=\"search-suggestion-item\" ng-if=\"filterList.length\" ng-repeat=\"item in filterList | limitTo:configObj.noOfItemsDisplay track by $index\" ng-bind-html=\"item.title | b2bMultiSepartorHighlight:inputModel:configObj.searchSeperator\" ng-class=\"{active:isActive($index,filterList.length)}\" ng-click=\"selectItem($index,item.title)\">\n" +
+    "                {{item.title}}     \n" +
+    "            </li>\n" +
+    "        </ul>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/seekBar/seekBar.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/seekBar/seekBar.html",
+    "<div class=\"b2b-seek-bar-container\" ng-class=\"{vertical:verticalSeekBar}\">\n" +
+    "    <div class=\"b2b-seek-bar-track-container\">\n" +
+    "        <div class=\"b2b-seek-bar-track\"></div>\n" +
+    "        <div class=\"b2b-seek-bar-track-fill\"></div>\n" +
+    "    </div>\n" +
+    "    <div class=\"b2b-seek-bar-knob-container\" role=\"menu\"  >\n" +
+    "        <div class=\"b2b-seek-bar-knob\" tabindex=\"0\" role=\"menuitem\"></div>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/slider/slider.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/slider/slider.html",
+    "<div class=\"b2b-slider-container\" ng-class=\"{'vertical':verticalSlider}\">\n" +
+    "    <div class=\"slider-track-container\">\n" +
+    "        <div class=\"slider-track\"></div>\n" +
+    "        <div class=\"slider-track-fill\" ng-style=\"{backgroundColor:trackFillColor}\"></div>\n" +
+    "    </div>\n" +
+    "    <div class=\"slider-knob-container\" ng-class=\"{'slider-knob-hidden':hideKnob}\">\n" +
+    "        <div class=\"slider-knob\" role=\"slider\" aria-valuemin=\"{{min}}\" aria-valuemax=\"{{max}}\" aria-labelledby=\"{{labelId}}\" aria-valuenow=\"{{currentModelValue}}\" aria-valuetext=\"{{currentModelValue}}{{postAriaLabel}}\" aria-orientation=\"{{verticalSlider ? 'vertical' : 'horizontal'}}\"></div>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/spinButton/spinButton.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/spinButton/spinButton.html",
+    "<div class=\"btn-group btn-spinbutton-toggle\" ng-class=\"{'disabled': disabledFlag}\">\n" +
+    "    <button type=\"button\" tabindex=\"{{isMobile?'0':'-1'}}\" aria-hidden=\"{{notMobile}}\" class=\"btn btn-secondary btn-prev icon-primary-subtractminimize\" ng-click=\"minus();focusInputSpinButton($event)\" aria-label=\"Remove {{step}}\" aria-controls=\"{{spinButtonId}}\" ng-class=\"{'disabled': isMinusDisabled()}\" ng-disabled=\"isMinusDisabled()\" aria-disabled=\"{{isMinusDisabled()}}\" role=\"spinbutton\"></button>\n" +
+    "    <input class=\"btn pull-left\" id=\"{{spinButtonId}}\" type=\"tel\" b2b-only-nums=\"3\" maxlength=\"3\" min={{min}} max={{max}} data-max-value=\"{{max}}\" ng-model=\"inputValue[inputModelKey]\" value=\"{{inputValue[inputModelKey]}}\" aria-live=\"polite\" aria-valuenow=\"{{inputValue[inputModelKey]}}\" aria-valuemin=\"{{min}}\" aria-valuemax=\"{{max}}\" ng-disabled=\"disabledFlag\">\n" +
+    "    <button type=\"button\" tabindex=\"{{isMobile?'0':'-1'}}\" aria-hidden=\"{{notMobile}}\" class=\"btn btn-secondary btn-next icon-primary-add-maximize\" ng-click=\"plus();focusInputSpinButton($event)\" aria-label=\"Add {{step}}\" aria-controls=\"{{spinButtonId}}\" ng-class=\"{'disabled': isPlusDisabled()}\" ng-disabled=\"isPlusDisabled()\" aria-disabled=\"{{isPlusDisabled()}}\" role=\"spinbutton\"></button>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/statusTracker/statusTracker.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/statusTracker/statusTracker.html",
+    "<div class=\"b2b-status-tracker row\">\n" +
+    "   <button tabindex=\"0\" ng-disabled=\"currentViewIndex === 0\" ng-if=\"statuses.length > b2bStatusTrackerConfig.maxViewItems\" class=\"btn-arrow\" type=\"button\" aria-label=\"Previous status\" ng-click=\"previousStatus()\">\n" +
+    "       <div class=\"btn btn-small btn-secondary\">\n" +
+    "           <i class=\"icon-primary-left\"></i>\n" +
+    "       </div>\n" +
+    "   </button>\n" +
+    "   <div ng-repeat=\"status in statuses\" class=\"b2b-status-tracker-step\" ng-class=\"{ 'complete' : status.complete, 'current' : currentStatus($index)}\" ng-show=\"isInViewport($index)\">\n" +
+    "       <p class=\"b2b-status-tracker-heading\">{{status.heading}}</p>\n" +
+    "       <div class=\"progress\">\n" +
+    "           <div class=\"progress-bar\">\n" +
+    "               <span class=\"hidden-spoken\">\n" +
+    "                   {{status.complete ? 'Complete' : 'Incomplete'}}\n" +
+    "               </span>\n" +
+    "           </div>\n" +
+    "       </div>\n" +
+    "       <div class=\"b2b-status-tracker-estimate\">\n" +
+    "           <i ng-show=\"status.estimate !== '' && status.estimate !== undefined\" ng-class=\"status.complete ? 'icoControls-approval' : 'icon-misc-time'\"></i> {{status.complete ? 'Complete' : status.estimate}}\n" +
+    "           &nbsp;\n" +
+    "       </div>\n" +
+    "       \n" +
+    "       <div class=\"b2b-status-tracker-description\">\n" +
+    "           {{status.description}}\n" +
+    "       </div>\n" +
+    "   </div>\n" +
+    "   <button tabindex=\"0\" ng-disabled=\"currentViewIndex + b2bStatusTrackerConfig.maxViewItems === statuses.length\" ng-if=\"statuses.length > b2bStatusTrackerConfig.maxViewItems\" class=\"btn-arrow\" type=\"button\" aria-label=\"Next status\" ng-click=\"nextStatus()\">\n" +
+    "       <div class=\"btn btn-small btn-secondary\">\n" +
+    "           <i class=\"icon-primary-right\"></i>\n" +
+    "       </div>\n" +
+    "   </button>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/stepTracker/stepTracker.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/stepTracker/stepTracker.html",
+    "<div class=\"b2b-step-tracker\">\n" +
+    "    <button class=\"btn-arrow b2b-left-arrow\" ng-click=\"previousStatus()\" ng-disabled=\"currentViewIndex === 0\" ng-if=\"stepsItemsObject.length > b2bStepTrackerConfig.maxViewItems\" aria-label=\"Previous step\">\n" +
+    "       <div class=\"btn btn-left btn-small btn-secondary\"><i class=\"icon-primary-left\"></i></div>\n" +
+    "   </button>\n" +
+    "    <button class=\"btn-arrow b2b-right-arrow\" ng-click=\"nextStatus()\" ng-disabled=\"currentViewIndex + b2bStepTrackerConfig.maxViewItems === stepsItemsObject.length\" ng-if=\"stepsItemsObject.length > b2bStepTrackerConfig.maxViewItems\" aria-label=\"Next step\">\n" +
+    "       <div class=\"btn btn-small btn-right btn-secondary\"><i class=\"icon-primary-right\"></i></div>\n" +
+    "   </button>\n" +
+    "    <ul class=\"b2b-steps\">\n" +
+    "        <li ng-class=\"{'b2b-step-done':$index < currentIndex - 1 ,'b2b-step-on':$index == currentIndex - 1}\" \n" +
+    "            ng-repeat=\"stepsItem in stepsItemsObject\" ng-show=\"isInViewport($index)\">\n" +
+    "           <p class=\"b2b-step-text\" data-sm-text=\"{{stepsItem.dataMobile}}\" data-large-text=\"{{stepsItem.dataDesktop}}\">{{stepsItem.text}}</p>\n" +
+    "            <span class=\"hidden-spoken\">\n" +
+    "                {{($index < currentIndex - 1)? 'Complete. '+stepsItem.text+' '+stepsItem.dataMobile:''}} \n" +
+    "                {{($index == currentIndex - 1)? 'In Progress. '+stepsItem.text+' '+stepsItem.dataMobile:''}} \n" +
+    "                {{($index > currentIndex - 1)? 'Incomplete. '+stepsItem.text+' '+stepsItem.dataMobile:''}}\n" +
+    "            </span>\n" +
+    "        </li>\n" +
+    "    </ul>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/switches/switches-spanish.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/switches/switches-spanish.html",
+    "<div class=\"switch-overlay\" aria-hidden=\"true\">\n" +
+    "    <span class=\"btn-slider-on\"><span class=\"hidden-spoken\">seleccione para hacer </span><i class=\"activo\">activo</i></span>\n" +
+    "    <span class=\"switch-handle\"></span>\n" +
+    "    <span class=\"btn-slider-off\"><span class=\"hidden-spoken\">seleccione para hacer </span><i class=\"inactivo\">inactivo</i></span>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/switches/switches.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/switches/switches.html",
+    "<div class=\"switch-overlay\" aria-hidden=\"true\">\n" +
+    "    <span class=\"btn-slider-on\">On</span>\n" +
+    "    <span class=\"switch-handle\"></span>\n" +
+    "    <span class=\"btn-slider-off\">Off</span>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/tableMessages/tableMessage.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tableMessages/tableMessage.html",
+    "<div class=\"b2b-table-message\">\n" +
+    "    <div class=\"b2b-message\" ng-if=\"msgType === 'noMatchingResults'\">\n" +
+    "        <div class=\"b2b-magnify-glass\"></div>\n" +
+    "        <div>\n" +
+    "            <div ng-transclude></div>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"b2b-message\" ng-if=\"msgType == 'infoCouldNotLoad'\">\n" +
+    "        <div class=\"icon-primary-alert b2b-alert\" aria-label=\"Oops! The information could not load at this time. Please click link to refresh the page.\"></div>\n" +
+    "        <div>Oops!</div>\n" +
+    "        <div>The information could not load at this time.</div>\n" +
+    "        <div>Please <a href=\"javascript:void(0)\" title=\"Refresh the page\" ng-click=\"refreshAction($event)\">refresh the page</a>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"b2b-message\" ng-if=\"msgType == 'magnifySearch'\">\n" +
+    "        <div class=\"b2b-magnify-glass\"></div>\n" +
+    "        <div>\n" +
+    "            <p class=\"b2b-message-title\">Please input values to\n" +
+    "                <br/> begin your search.</p>\n" +
+    "        </div>\n" +
+    "    </div>\n" +
+    "    <div class=\"b2b-message\" ng-if=\"msgType === 'loadingTable'\">\n" +
+    "        <div class=\"icon-primary-spinner-ddh b2b-loading-dots\"></div>\n" +
+    "        <div ng-transclude></div>\n" +
+    "    </div>\n" +
+    "</div>\n" +
+    "");
+}]);
+
+angular.module("b2bTemplate/tableScrollbar/tableScrollbar.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tableScrollbar/tableScrollbar.html",
+    "<div class=\"b2b-table-scrollbar\">\n" +
+    "    <div class=\"b2b-scrollbar-arrows\">\n" +
+    "        <button class=\"btn-arrow  b2b-scrollbar-arrow-left\" type=\"button\" ng-attr-aria-label=\"{{disableLeft ? 'Scroll Left Disabled' : 'Scroll Left'}}\" ng-click=\"scrollLeft()\" ng-disabled=\"disableLeft\"><div class=\"btn btn-alt\"><i class=\"icon-primary-left\"></i></div></button>\n" +
+    "        <button class=\"btn-arrow b2b-scrollbar-arrow-right\" ng-attr-aria-label=\"{{disableRight ? 'Scroll Right Disabled' : 'Scroll Right'}}\" ng-click=\"scrollRight()\" ng-disabled=\"disableRight\" type=\"button\"><div class=\"btn btn-alt\"><i class=\"icon-primary-right\"></i></div></button>\n" +
+    "    </div>\n" +
+    "    <div class=\"b2b-table-inner-container\">\n" +
+    "        <span ng-transclude></span>\n" +
+    "    </div>\n" +
+    "</div>");
+}]);
+
+angular.module("b2bTemplate/tables/b2bTable.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tables/b2bTable.html",
+    "<table ng-class=\"{'striped': responsive, 'complex-table': responsive && active}\" ng-transclude></table>");
+}]);
+
+angular.module("b2bTemplate/tables/b2bTableBody.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tables/b2bTableBody.html",
+    "<td ng-hide=\"isHidden()\" ng-transclude></td>");
+}]);
+
+angular.module("b2bTemplate/tables/b2bTableHeaderSortable.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tables/b2bTableHeaderSortable.html",
+    "<th scope=\"col\" role=\"columnheader\" aria-sort=\"{{sortPattern !== 'null' && 'none' || sortPattern}}\" aria-label=\"{{headerName}} {{sortable !== 'false' && ': activate to sort' || ' '}} {{sortPattern !== 'null' && '' || sortPattern}}\" tabindex=\"{{sortable !== 'false' && '0' || '-1'}}\" b2b-accessibility-click=\"13,32\" ng-click=\"(sortable !== 'false') && sort();\" ng-hide=\"isHidden()\">\n" +
+    "    <span ng-transclude></span>\n" +
+    "    <i ng-class=\"{'icon-controls-upPRIMARY active': sortPattern === 'ascending', 'icon-controls-down active down': sortPattern === 'descending'}\"></i>\n" +
+    "</th>");
+}]);
+
+angular.module("b2bTemplate/tables/b2bTableHeaderUnsortable.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tables/b2bTableHeaderUnsortable.html",
+    "<th scope=\"col\" ng-hide=\"isHidden()\" ng-transclude></th>");
+}]);
+
+angular.module("b2bTemplate/tabs/b2bTab.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tabs/b2bTab.html",
+    "<li role=\"tab\" aria-selected=\"{{isTabActive()}}\" aria-controls=\"{{tabPanelId}}\" class=\"tab\" \n" +
+    "    ng-class=\"{'active': isTabActive()}\" ng-click=\"clickTab()\" ng-hide=\"tabItem.disabled\">\n" +
+    "    <a href=\"javascript:void(0)\"  tabindex=\"{{(isTabActive() && tabItem.disabled)?-1:0}}\"\n" +
+    "       ng-disabled=\"tabItem.disabled\" aria-expanded=\"{{(isTabActive() && !tabItem.disabled)}}\" \n" +
+    "       b2b-accessibility-click=\"13,32\" ng-transclude></a>\n" +
+    "    <span class=\"hidden-spoken\" ng-if=\"isTabActive()\">Active tab</span>\n" +
+    "</li>");
+}]);
+
+angular.module("b2bTemplate/tabs/b2bTabset.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/tabs/b2bTabset.html",
+    "<ul class=\"tabs promo-tabs\" role=\"tablist\" ng-transclude></ul>");
+}]);
+
+angular.module("b2bTemplate/treeNav/groupedTree.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/treeNav/groupedTree.html",
+    "<ul role=\"group\">\n" +
+    "    <li aria-expanded=\"{{(member.active?true:false)}}\" role=\"treeitem\" aria-label=\"{{key}}\" ng-repeat='(key,value) in collection | groupBy : \"grpChild\"' b2b-tree-link><a class=\"grp\" ng-class=\"{'active': value.showGroup == true}\" tabindex=\"-1\" href='javascript:void(0);'>{{(key)?key:''}}<span class=\"b2b-tree-node-icon\"><i ng-class=\"{'icon-primary-expanded': value.showGroup == true, 'icon-primary-collapsed': value.showGroup == undefined || value.showGroup == false }\"></i></span></a>\n" +
+    "        <ul role=\"group\">\n" +
+    "            <b2b-member ng-repeat='member in value.childArray' member='member' time-delay='{{timeDelay}}' group-it='groupIt'></b2b-member>\n" +
+    "        </ul>\n" +
+    "    </li>\n" +
+    "</ul>");
+}]);
+
+angular.module("b2bTemplate/treeNav/treeMember.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/treeNav/treeMember.html",
+    "<li role=\"treeitem\" aria-expanded=\"{{(member.active?true:false)}}\" aria-label=\"{{member.tooltipContent ? member.tooltipContent : member.name}}\" aria-describedby=\"description_{{$id}}\" ng-class=\"{'bg':member.selected}\"  b2b-tree-link>\n" +
+    "    <a tabindex=\"-1\" title=\"{{member.tooltipContent ? member.tooltipContent : member.name}}\" href=\"javascript:void(0)\" ng-class=\"{'active':member.active,'b2b-locked-node':member.locked}\">       <span class=\"b2b-tree-node-name\">{{member.name}}</span>\n" +
+    "        <span class=\"{{!member.child?'end':''}} b2b-tree-node-icon\">\n" +
+    "            <i class=\"b2b-tree-expandCollapse-icon\" ng-class=\"{'icon-primary-expanded':member.active}\"></i>\n" +
+    "        </span>\n" +
+    "         <div id=\"description_{{$id}}\" class=\"offscreen-text\">\n" +
+    "           {{member.descriptionText}}\n" +
+    "        </div>\n" +
+    "        <div class=\"b2b-tree-tooltip\" ng-if=\"member.showTooltip\">\n" +
+    "           <span class=\"b2b-tree-arrow-left\"></span>\n" +
+    "           <div class=\"b2b-tree-tooltip-content\">\n" +
+    "               {{member.tooltipContent}}\n" +
+    "           </div>  \n" +
+    "        </div>\n" +
+    "    </a>\n" +
+    "</li>");
+}]);
+
+angular.module("b2bTemplate/treeNav/ungroupedTree.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/treeNav/ungroupedTree.html",
+    "<ul role=\"{{setRole}}\"><b2b-member ng-repeat='member in collection' member='member' group-it='groupIt'></b2b-member></ul>");
+}]);
+
+angular.module("b2bTemplate/treeNodeCheckbox/groupedTree.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/treeNodeCheckbox/groupedTree.html",
+    "<ul role=\"group\">\n" +
+    "    <li aria-expanded=\"{{(member.active?true:false)}}\" role=\"treeitem\" aria-label=\"{{key}}\" ng-repeat='(key,value) in collection | groupBy : \"grpChild\"' b2b-tree-node-link><a class=\"grp\" ng-class=\"{'active': value.showGroup == true}\" tabindex=\"-1\" href='javascript:void(0);'>\n" +
+    "        <span class=\"ng-hide\">\n" +
+    "            <label class=\"checkbox\">\n" +
+    "                <input type=\"checkbox\" tabindex=\"-1\" class=\"treeCheckBox grpTreeCheckbox\" style=\"margin-top:2px;\"/><i class=\"skin\"></i><span> {{(key)?key:''}}</span>\n" +
+    "            </label>\n" +
+    "        </span>\n" +
+    "        <span>\n" +
+    "            {{(key)?key:''}}    \n" +
+    "        </span>\n" +
+    "        <span class=\"nodeIcon\"><i class=\"expandCollapseIcon\" ng-class=\"{'icon-primary-expanded': value.showGroup == true, 'icon-primary-collapsed': value.showGroup == undefined || value.showGroup == false }\"></i></span></a>\n" +
+    "        <ul role=\"group\">\n" +
+    "            <b2b-tree-member ng-repeat='member in value.childArray' member='member' group-it='groupIt'></b2b-tree-member>\n" +
+    "        </ul>\n" +
+    "    </li>\n" +
+    "</ul>");
+}]);
+
+angular.module("b2bTemplate/treeNodeCheckbox/treeMember.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/treeNodeCheckbox/treeMember.html",
+    "<li role=\"treeitem\" aria-expanded=\"{{(member.active?true:false)}}\" aria-label=\"{{member.name}}\" ng-class=\"{'bg':member.selected}\"  b2b-tree-node-link>\n" +
+    "    <a tabindex=\"-1\" title=\"{{member.name}}\" href=\"javascript:void(0)\" ng-class=\"{'active':member.active}\">\n" +
+    "       <span ng-show=\"member.displayCheckbox\">\n" +
+    "               <label class=\"checkbox\">\n" +
+    "                <input type=\"checkbox\" tabindex=\"-1\" ng-model=\"member.isSelected\" ng-class=\"{'treeCheckBox': (member.displayCheckbox !== undefined)}\" style=\"margin-top:2px;\"/><i class=\"skin\"></i><span> {{member.name}}</span>\n" +
+    "            </label>\n" +
+    "        </span>\n" +
+    "       <span ng-show=\"!member.displayCheckbox\">\n" +
+    "           {{member.name}} \n" +
+    "       </span>\n" +
+    "        <span class=\"nodeIcon {{!member.child?'end':''}}\">\n" +
+    "            <i class=\"expandCollapseIcon\" ng-class=\"{'icon-primary-expanded':member.active}\"></i>\n" +
+    "        </span>\n" +
+    "    </a>\n" +
+    "</li>");
+}]);
+
+angular.module("b2bTemplate/treeNodeCheckbox/ungroupedTree.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("b2bTemplate/treeNodeCheckbox/ungroupedTree.html",
+    "<ul role=\"{{setRole}}\"><b2b-tree-member ng-repeat='member in collection' member='member' group-it='groupIt'></b2b-tree-member></ul>");
+}]);