Improve styling for option groups and add a "drag" icon to accordion headers

@@ -1306,11 +1306,26 @@ h6.fieldset-heading {
     height: 30px;
 }
 
+.option-groups-region .ui-icon {
+    display:  inline-block;
+    position: relative;
+    top:      2px;
+    left:     -10px;
+}
+
+.option-groups-region .field-option .ui-icon {
+    top: 4px;
+}
+
 .option-groups-region .remove-group,
 .option-groups-region .remove-option {
     float: right;
 }
 
+.option-groups-region .remove-group {
+    margin-top: 1px;
+}
+
 .option-groups-region .remove-option {
     margin-top: 4px;
 }
@@ -1351,15 +1366,28 @@ h6.fieldset-heading {
 
 .option-groups-region .accordion-content .field-option {
     padding: 10px !important;
+    cursor:  move;
+}
+
+.option-groups-region div input[type=text] {
+    width: 76%;
 }
 
-.option-groups-region div input[type=text],
 .option-groups-region div textarea {
-    width: 78%;
+    width: 99%;
 }
 
-.option-groups-region .group-title:hover {
+.option-groups-region .group-title {
+    display:       inline-block;
+    max-width:     415px;
+    text-overflow: ellipsis;
+    overflow:      hidden;
+    position:      relative;
+    top:           2px;
     cursor:        pointer;
+}
+
+.option-groups-region .group-title:hover {
     color: rgb(33, 117, 155);
 }