acl: acl_selector.tpl and some styling to the acl

css/style.css

@@ -110,7 +110,7 @@ iframe, img {
 
 .btn-default {
     background: #ededed;
-    color: #7a7a7a!important;
+    color: #7a7a7a;
 }
 .btn-sm {
     padding: 4px 8px;
@@ -941,10 +941,15 @@ section #jotOpen {
 }
 
 /* ACL */
+/*#jot-modal-body {
+    height: auto;
+    max-height: calc(100vh - 130px);
+    overflow-y: hidden;
+}*/
 #acl-search {
     margin-top: 20px;
-    padding: 8px;
-    border: 1px solid #ccc;
+    /*padding: 8px;*/
+    /*border: 1px solid #ccc;*/
     width: 100%;
 }
 #acl-list {
@@ -959,6 +964,11 @@ section #jotOpen {
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
+#acl-list-content {
+    overflow-y: auto;
+    max-height: calc(100vh - 330px);
+    height: auto !important;
+}
 .acl-list-item {
     width: 48%;
     width: calc(50% - 10px);
@@ -991,7 +1001,22 @@ section #jotOpen {
 .acl-list-item.grouphide {
     background-color: #E68364;
 }
-
+.acl-button-show, .acl-button-hide {
+    float: right;
+    margin-left: 5px;
+}
+#acl-showall.selected {
+    background-color: #4CAF50;
+    color: #fff;
+}
+.acl-button-show.selected {
+    background-color: #4CAF50;
+    color: #fff;
+}
+.acl-button-hide.selected {
+    background-color: #F44336;
+    color: #fff;
+}
 
 /*
 /* Stream