ui changes in manage users page

cmsWebApp/webroot/css/common.css

@@ -4173,14 +4173,81 @@ span.right-img {
 }
 .m-user-left{
   float: left;
-  width: 78%;
+  width: 71%;
   padding: 18px 26px;
+  position: relative;
+}
+
+.m-user-left .remove-icon {
+    width: 30px; height: 30px; border-radius: 50%; background: #fff;border: 2px solid #8e97a0;
+    position: absolute;top:25px; left:-15px;display: none;
+    color: #8e97a0;
+    text-align: center;
+        font-size: 37px;
+    line-height: 0;
+    cursor: pointer;
 }
+.m-user-left:hover .remove-icon {
+    display: inline-block;
+}
+
 .m-user-right{
   float: right;
   width: 22%;
   padding: 15px 17px;  
 }
+.m-user-right-padlock{
+  float: right;
+  width: 7%;
+  padding: 15px 17px 15px 0;  
+  position: relative;
+  cursor: pointer;
+}
+.m-user-right-padlockicon{
+    font-size: 12px;
+    color: #4e5258;
+    background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
+    border: solid 1px #e5e8eb;
+    box-shadow: none;
+    height: 50px;
+    line-height: 45px;
+    width: 50px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 2px;
+    
+}
+
+.m-user-right-padlockicon img{margin: 0 auto;}
+.m-user-right-padlock:hover .arrow_box {display: inline-block;}
+.arrow_box {
+	position: absolute;
+	background: #03a0e7;
+        display: none;
+        color: #fff;
+        font-size: 10px;
+        padding: 5px;
+        z-index: 100;
+        top:-15px;
+        left:-10px;
+        letter-spacing: 2px;
+        
+}
+.arrow_box:after {
+	top: 100%;
+	left: 33%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-color: rgba(3, 160, 231, 0);
+	border-top-color: #03a0e7;
+	border-width: 6px;
+	margin-left: 6px;
+}
+
 .m-user-icon,.m-user-info{
   float: left;
 }

cmsWebApp/webroot/extensions/adminportal/manage_users.jsp

@@ -136,6 +136,7 @@
                     %>
                             <div class="user-list-row"  id="<%= companyUser.getID() %>">
                                 <div class="m-user-left">
+                                    <div class="remove-icon">_</div>
                                     <div class="m-user-icon"><img src="images/user-list-icon.png"></div>
                                     <div class="m-user-info">
                                         <div class="m-user-name">
@@ -146,9 +147,15 @@
                                         </div>
                                     </div>
                                 </div>
+                                <div class="m-user-right-padlock">
+                                    <div class="arrow_box" >DISABLE</div>
+                                    <span class="m-user-right-padlockicon"><img src="images/m-user-right-padlockicon.png"></span>
+                                </div>
                                 <div class="m-user-right">
                                     <oneit:ormEnum  obj="<%= companyUser %>"    attributeName="Role"    cssClass="form-control user-role"   enums="<%= Arrays.asList(new RoleType[]{RoleType.ADMIN, RoleType.STANDARD}) %>"/>
                                 </div>
+                               
+                                
                                 <oneit:button   name="save"  value="Save"    cssClass="<%= "save-user" +  companyUser.getID().toString() + " hidden"%>"
                                                 requestAttribs="<%= CollectionUtils.mapEntry("CompanyUser", companyUser).mapEntry("nextPage", usersPage + "&UserSortOption=" + userSortOpt).toMap() %>" />
                             </div>