drg_cms 0.6.0.6 → 0.6.1.4

data/app/assets/stylesheets/drg_cms/drg_cms.css

@@ -23,6 +23,8 @@
 #++
 */
 
+@import url('https://fonts.googleapis.com/css2?family=Exo:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"');
+
 /* Web reset. Countributed by
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
@@ -42,9 +44,9 @@ article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-	margin: 0px;
-	padding: 0px;
-	border: 0px;
+	margin:  0;
+	padding:  0;
+	border:  0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
@@ -54,6 +56,7 @@ article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
+
 body {
 /*	line-height: 1; */
 }
@@ -74,26 +77,27 @@ table {
 }
 /* END */
 
-/* Firefox only
-@-moz-document url-prefix() { 
-}
-*/
-
 body {
-font-family: arial,sans-serif;
-font-size: 12px;
-margin: 0px;
+font-family: Exo,arial,sans-serif;
+font-size: 14px;
+margin: 0;
 vertical-align: middle;
-color: #222;
+color: #000;
+font-weight: 400;
 }
 
+button {
+font-family: Exo,arial,sans-serif;
+}
+
+
 textarea, input, select {
-color: #222;
+color: #000;
 padding: 6px 4px;
 margin-left: 1px;
-border: solid 1px #ccc;;
+border: 1px dashed #888;;
 border-radius: 2px;
-font: 14px arial,sans-serif;
+font: 14px Exo,arial,sans-serif;
 max-width: 100%;
 vertical-align: middle;
 }
@@ -113,6 +117,7 @@ input[type=submit]:focus {
 
 textarea[readonly], input[readonly], select[readonly] {
   background-color: #eee !important;
+  border: 1px solid #ddd !important;
 }
 
 input.file {
@@ -124,8 +129,8 @@ select {
 }
 
 select option { 
-  /* not working */
-  outline: none;
+  /* not working
+  outline: none;*/
 }  
 
 hr {
@@ -135,8 +140,8 @@ height: 2px;
 }
 
 .div {
-  border: 0px;
-  padding: 0px;
+  border: 0;
+  padding: 0;
 }
 
 
@@ -147,13 +152,13 @@ height: 2px;
 td { vertical-align: middle; }
 
 th {
-padding: 4px;
-text-align: left;
-border-bottom:2px solid #ddd;
-border-right:2px solid #ddd;
-background: #ddd;
-color:#888;
-font-weight: bold;
+  padding: 4px;
+  text-align: left;
+  border-bottom: 2px solid #ddd;
+  border-right: 2px solid #ddd;
+  background: #ddd;
+  color: #888;
+  font-weight: bold;
 }
 
 th a:hover { color: #000;}
@@ -163,18 +168,20 @@ img { vertical-align:bottom; }
 .dc-link a:link, .dc-link a:active, .dc-link a:visited, 
 .dc-animate a:link, .dc-animate a:active, .dc-animate a:visited, 
 .dc-result a:link, .dc-result a:active, .dc-result a:visited { 
-color: #666;
-font-weight: bold;
-text-decoration: none; 
-background: transparent;
-padding: 7px;
+  color: #666;
+  font-weight: 600;
+  text-decoration: none;
+  background: transparent;
+  padding: 7px;
 }
 
+/*
 .dc-link a:hover, .dc-animate a:hover, .dc-result a:hover  { 
-background: #f8f8f8;
-transition: 0.3s;
-color: #000;
+  background: #f8f8f8;
+  transition: 0.3s;
+  color: #000;
 }
+*/
 
 a.dc-animate:hover { color: #000; background: transparent;}
 
@@ -183,11 +190,11 @@ a.dc-animate:hover { color: #000; background: transparent;}
 .dc-image-preview img { max-height: 2rem; padding-left: 0.5rem;}
 .dc-image-preview img:hover { cursor: zoom-in;}
 
-.text-with-select { width: 24px; }
+.text-with-select { width: 20px; }
 
 .no-borders {
-  padding: 0px;
-  border-spacing: 0px;
+  padding:  0;
+  border-spacing:  0;
 }
 
 .td-spacer {
@@ -198,15 +205,23 @@ a.dc-animate:hover { color: #000; background: transparent;}
 
 .dc-result {
 width: 99.9%;
-padding: 0px;
-border-spacing: 0px;
+padding:  0;
+border-spacing:  0;
 border-radius: 1px;  
-background-color: #f9f9f9;
+/*background-color: #f9f9f9;*/
 }
 
 .dc-result i { 
 padding: 2px;
-font-size: 0.9rem;
+font-size: 14px;
+vertical-align: initial;
+}
+
+.dc-result .dc-link-no {
+  padding: 0;
+  border: none;
+  color: #bbb;
+  background: transparent !important;
 }
 
 .dc-result .actions .dc-animate { 
@@ -215,7 +230,7 @@ padding: 0;
 
 .dc-result-header {
   display: flex;
-  background: linear-gradient(to bottom, #eee 0%, #e2e2e2 100%); 
+  /* background: linear-gradient(to bottom, #eee 0%, #e2e2e2 100%); */
 }
 .dc-result-data {
   display: flex;
@@ -227,35 +242,44 @@ padding: 0;
 }
 
 .dc-result-header .th {
-  padding: 8px 2px;
+  padding: 4px 3px;
   white-space: nowrap;
   overflow: hidden;
-  font-weight: bold;
-  color: #444;
+  font-weight: 600;
+  color: #fff;
+  background-color: #666;
+}
+.dc-result-header .th:last-child {
+  flex-grow: 1;
 }
 
 .dc-result-header .spacer, .dc-result-data .spacer {
-  width: 1px;
+  width: 2px;
+  /*
   font-size: 1.5em;
-  margin: 0 0px;
-  padding: 4px 0px;
+  margin: 0  0;
+  padding: 4px  0;
   resize: both;
 /*  border-left: 1px solid #ccc;*/
 }
 
-.dc-result-header .spacer:hover {
-  cursor:ew-resize;
-}
-
-.dc-result-header a:link {
+.dc-result-header a:link, .dc-result-header a:visited {
   padding-left: 0;
+  color: #fff;
+  font-weight: 500;
 }
 
 .dc-result-data .td {
-  padding: 5px 2px;
+  padding: 5px 3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+}
+
+.dc-result-data .td:last-child {
+  flex-grow: 1;
 }
 
 .dc-result-data .actions, .dc-result-header .actions {
@@ -265,6 +289,14 @@ padding: 0;
   justify-content: center;  
   white-space: nowrap;
 }
+.dc-result-header .actions {
+  background-color: #666;
+}
+
+.dc-result-data.dc-even.dc-checked, .dc-result-data.dc-odd.dc-checked {
+  background-color: #dbebff;
+  background-color: rgba(76,154,255, 0.6);
+}
 
 .dc-result-data .dc-link, .dc-result-data .dc-link-ajax {
   background: none;
@@ -281,7 +313,7 @@ padding: 0;
 
 .dc-result-data:hover { 
   background-color: #eee;
-  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
+  box-shadow: inset 0 0 0 1px rgba(76,154,255, 1);
 }
 
 .dc-result-data.footer {
@@ -295,6 +327,18 @@ padding: 0;
   background-color: transparent;
 }
 
+.dc-check {
+  padding-right: 4px;
+}
+
+.dc-result-header .dc-check-all {
+  font-size: 1.2em;
+  margin-left: -1rem;
+  background-color: white;
+  /* padding: 8px 5px; */
+  padding: 6px 3px;
+}
+
 .dc-menu {
 padding: 4px 0;
 display: inline-table;
@@ -305,21 +349,20 @@ display: inline-table;
   margin-right: 3px;
 }
 
-
 #data-fields {margin: 5px;}
 
 .dc-link {
-font-weight: bold;
+font-weight: 600;
 color: #666;
 text-align: center;
-border-radius: 2px;
+border-radius: 3px;
 background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%);
 border: 1px solid #ddd;
 }
 
 .dc-link:hover {
   border: 1px solid rgba(76,154,255, 1);
-  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
+  box-shadow: inset 0 0 0 1px rgba(76,154,255, 1);
   transition: 0.3s; 
   color: #000;
   cursor: pointer;
@@ -331,32 +374,33 @@ border: 1px solid #ddd;
 }
 
 .dc-link div { 
-  padding: 7px; 
+  padding: 7px 8px; 
 }
 
 .dc-link-no {
   text-align: left;
-  font-weight: bold;
+  font-weight: 600;
   padding: 7px;
   vertical-align: bottom;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  color: #888;
-  background: #eee !important;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  color: #777;
+  text-shadow: 1px 1px #fff;
+  background: #ddd !important;
 }
 
 .dc-link-ajax {
   text-align: left;
-  font-weight: bold;
-  padding: 7px;
-  border-radius: 2px;
+  font-weight: 600;
+  padding: 8px 8px 6px;
+  border-radius: 3px;
   color: #666;
   background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
   border: 1px solid #ddd;
 }
 
 .dc-link-ajax.with-link {padding: 7px}
-#cmsform .dc-link-ajax.with-link {padding: 0}
+.cmsform .dc-link-ajax.with-link {padding: 0}
 
 .dc-link-ajax i, .dc-link-no i {
   padding: 1px 3px 0 0;
@@ -367,7 +411,7 @@ cursor: pointer;
 background: #eee;
 border: 1px solid #bbb;
   border: 1px solid rgba(76,154,255, 1);
-  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
+  box-shadow: inset 0 0 0 1px rgba(76,154,255, 1);
 transition: 0.3s; 
 color: #000;
 }
@@ -382,7 +426,7 @@ transition: 0.3s;
 .dc-link-img {
   padding: 3px;
   text-align: center;
-  margin: 0px;
+  margin:  0;
 }
 
 .dc-link-img:hover {
@@ -392,7 +436,7 @@ transition: 0.3s;
 
 .dc-link-icon {
 padding: 3px;
-border-radius: 2px;
+border-radius: 3px;
 background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
 border: solid 1px #ccc;;
 }
@@ -416,7 +460,7 @@ border: solid 1px #ccc;;
   padding: 5px 4px 4px;
   background: #fff;
   border: 2px solid #222;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .dc-inline-link:hover {
@@ -428,7 +472,7 @@ border: solid 1px #ccc;;
   text-align: center;
   border:1px solid #888;
   padding:1px 4px 1px 4px;
-  border-radius: 5px;
+  border-radius: 3px;
   box-shadow: 2px 2px 5px #aaa;
   width: 13px; 
   margin-left: 350px;
@@ -445,14 +489,21 @@ border: solid 1px #ccc;;
 .dc-window-open i {
   padding-right: 4px;
 }
+.dc-window-open:hover {
+  cursor: pointer;
+}
 .dc-link-submit {
   text-align: left;
-  padding: 8px 6px 6px;
-
-  border-radius: 2px;
+  padding: 1px 8px 0.5px; 
+/* Exo  padding: 0 8px; */
+  
+  border-radius: 3px;
   background-color: #eee;
   background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
   border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  
 }
 
 .dc-link-submit .fa {
@@ -465,24 +516,25 @@ border: solid 1px #ccc;;
 .dc-link-submit:hover {
   color: #000;
   border: 1px solid rgba(76,154,255, 1);
-  box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);  
-  transition: 0.3s;
+  box-shadow: inset 0 0 0 1px rgba(76,154,255, 1);  
+  transition: 0.3s;  
 }
 .dc-link-submit:hover .dc-submit {
   color: #000;
   transition: 0.3s;
-
-
 }
+
 .dc-submit {
   text-decoration: none;
   border: none;
   color: #666;
-  font-weight: bold;
-  padding: 0px 2px;
-  border-radius: 0px;
+  font-weight: 600;
+  padding: 1px 2px 0;
+  border-radius:  0;
   background: transparent;
-} 
+  line-height: 30px;
+  font-size: 14px;
+}
 
 .dc-submit:hover { 
   cursor: pointer;
@@ -512,7 +564,7 @@ color: #aaa;
 }
 .dc-paginate .pagination span a {
   display: block;
-  color: #888;
+  color: #666;
   padding: 4px 6px 3px 7px;
   text-decoration: none;
 }
@@ -531,23 +583,22 @@ color: #aaa;
 }
 
 .dc-paginate .pagination .current {
-  background: #888;
+  background: #666;
   color: #fff;
-  border: 1px solid #888;
+  border: 1px solid #666;
 }
 
 .dc-paginate .pagination .current:hover  {
-  border: solid 1px #888;
   outline: none;
 }
 
 .dc-title {
-  font-weight: bold;
+  font-weight: 600;
   font-size: 1.4em;
   color: #338;
   padding: 5px 1px;
-  border-spacing: 0px;
-  margin: 0px;
+  border-spacing:  0;
+  margin:  0;
   background-color: #fff;
 }
 
@@ -557,19 +608,27 @@ color: #aaa;
   font-size: 0.8em;
 }
 
+.dc-title .dc-help {
+  float:right;
+  padding: 4px 0 0 4px;
+  font-size: 1.1em;
+  height: 1em;
+  border: none;
+  background: none;
+}
+
 .dc-form-frame {
   width: 99.9%;
-  margin: 0px;
+  margin:  0;
   background-color: #fff;
 }
 
 .dc-form {
   width: 99.8%;
-  padding: 0px;
-  padding-top: 4px;
+  padding: 4px 0 0;
   border: 1px solid #eee;
   border-radius: 2px; 
-  background-color: #fcfcfc;
+  /*background-color: #fcfcfc; */
 }
 
 .dc-form .row-div {
@@ -620,13 +679,13 @@ color: #aaa;
   color: #555;
   text-align: right;
   vertical-align: middle;
-  font-weight: bold;
+  font-weight: 600;
   padding: 10px 2px;
-  width:  150px;
+  width: 150px;
 }
 
 .dc-form-label label {
-  padding: 0px 0px 2px 1px;
+  padding: 0 0 2px 1px;
 }
 
 .dc-form-label-top {
@@ -637,6 +696,9 @@ color: #aaa;
   padding: 3px 5px;
 }
 
+.dc-form-label.dc-color-odd, .dc-form-label.dc-color-even {background-color: transparent;}
+.dc-form-field.dc-color-odd, .dc-form-field.dc-color-even {background-color: transparent;}
+
 .dc-align-left {
   text-align: left;
 }
@@ -664,7 +726,7 @@ color: #aaa;
   font-weight: normal;
   color: #222;
   padding: 6px 4px;
-  border: solid 1px #ccc;;
+  border: solid 1px #ddd;;
   background-color: #eee;
   border-radius: 2px;
 }
@@ -682,10 +744,10 @@ color: #aaa;
 }
 .dc-form-ul {
 padding: 2px 0;
-margin-top: 6px;
 margin-bottom: -3px;
 }
 
+.dc-width-0 {width: 0;}
 .dc-width-10 {width: 10%;}
 .dc-width-14 {width: 14%;}
 .dc-width-21 {width: 21%;}
@@ -701,19 +763,18 @@ margin-bottom: -3px;
 .dc-form-li {
   display:inline-block; 
   white-space: nowrap;
-  list-style:none;
-  color: #666;
+  list-style: none;
+  color: #fff;
   text-decoration: none;
   text-align: center;
-  font-weight: bold;
-  line-height: 1rem;
-
-  padding:4px 15px;
-  background: #e8e8e8;
-  margin-right: 2px;
+  font-weight: 600;
+  line-height: 1.2em;
+  padding: 0.4em 1em;
+  background: #666;
+  margin: 0 1px 1px 0;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0  0;
 }
 
 .dc-form-li:hover, .dc-form-li-selected {
@@ -751,6 +812,9 @@ border-top: 1px solid #ddd;
 display: flex;
 }
 .dc-head .dc-column {
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 2px;
 }
 .dc-head .text {
   font-weight: normal;  
@@ -787,8 +851,19 @@ display: flex;
   color: lightcoral;
 }
 
+#menu-hamburger { display: none;}
+
+.dc-handle:before {
+  font-family: 'FontAwesome';
+  content: '\f0dc\20';
+  color: #000;
+  cursor: pointer;
+  padding-top: 2px;
+  font-size: 1.1em;
+}
+
 #cmsedit-div {
-font-family: Arial, sans-serif;
+font-family: Exo,Arial, sans-serif;
 font-size: 13px;
 line-height: 13px;
 }
@@ -825,7 +900,7 @@ font-size: 1.2em;
 }
 
 .cmsedit-top #menu select#record_select { 
-  padding: 0px;
+  padding:  0;
   max-width: 300px;
   height: 26px;
 }
@@ -846,16 +921,16 @@ font-size: 1.2em;
 }
 
 .cmsedit-container #menu {
-display: inline-block;
-padding: 4px 0px;
-margin: 4px;
-font-size: 13px;
-color: #222;
-font-weight: bold;
+  display: inline-block;
+  padding: 4px 0;
+  margin: 4px;
+  font-size: 14px;
+  color: #222;
+  font-weight: 600;
 }
 
 .cmsedit-container .fa {
-width: 20px;
+width: 26px;
 }
 
 .cmsedit-container #menu a {
@@ -899,8 +974,8 @@ display: none;
 
 .default-table {
   width: 100%;
-  padding: 0px;
-  border-spacing: 0px;
+  padding:  0;
+  border-spacing:  0;
   text-align: left;
 }
 
@@ -914,13 +989,31 @@ display: none;
 }
 /****** jquery ui-autocomplete widget ***************/
 .ui-autocomplete-input {
-  font-style: italic;
-  padding: 6px;
+  padding: 6px 6px 6px 12px;
   border-radius: 2px;
-  border: solid 1px #9c9;
-/*  background: linear-gradient(#8d8 0%, #ffe 15%, #fff 80%); */
+}
+.dc-text-autocomplete {
+  position: relative;
 }
 
+.dc-text-autocomplete input {
+  border: 1px dashed #555;
+}
+
+
+.dc-text-autocomplete input+span:before {
+  font-family: 'FontAwesome';
+  content: '\f002';
+  top: -4px;
+  left: 4px;
+  position: absolute;
+  color: #666;
+  font-weight: bold;
+  font-size: 10px;
+}
+
+.filter_field .dc-text-autocomplete input+span:before {top: -16px;}
+
 .ui-autocomplete.ui-menu{
  font-size: 1.1em;
 }
@@ -940,11 +1033,16 @@ color: #000;
 .ui-autocomplete-border {
   display: inline-block;
   border-radius: 2px;
-  border: solid 1px #ccc;;
+  border: dashed 1px #555;;
   padding: 8px;
   background-color: #fff;
 }
 
+.ui-autocomplete-border .dc-text-autocomplete {
+  margin-left: 4px;
+}
+
+
 .dc-red { color: #d99;}
 .dc-red:hover { color: #e66;}
 .dc-green { color: #9c9;}
@@ -962,14 +1060,14 @@ background-color: lightyellow;
   font-size: 1.2em;
   padding: 0 5em 1em 1em;
   border: 1px solid #669;
-  box-shadow: 0px 0px 5px #666;
+  box-shadow: 0 0 5px #666;
 }
 #dc-login h2 {
   font-weight: bold;
   font-size: 1.4em;
 }
 #dc-login .label {
-  padding: 5px 0px;
+  padding: 5px  0;
 }
 
 .div-hidden {
@@ -993,31 +1091,31 @@ border: 1px solid #eee;
 .drgcms_popmenu_item:hover {
 background-color: white;
 border: 1px solid rgba(76,154,255, 1);
-box-shadow: inset 0px 0px 0px 1px rgba(76,154,255, 1);
+box-shadow: inset 0 0 0 1px rgba(76,154,255, 1);
 border-radius: 2px;
 }
 
 .drgcms_sort {
 width: 22px; 
-border: 0px; 
+border:  0; 
 background: none; 
 height: 16px;
-padding: 0px;
+padding:  0;
 }
 
 .iframe_embedded {
 padding: 4px;
 background-image: none;
 border-radius: 2px;
-border: 1px solid #669;
+border: 2px solid #666;
 background-color: #fff;
 }
 
 #iframe_edit, #iframe_cms {
 height: 1px;
 width: 100%;
-border: 0px;
-margin-bottom: 0px;
+border:  0;
+margin-bottom:  0;
 overflow-x:hidden;
 }
 
@@ -1026,7 +1124,7 @@ overflow-x:hidden;
 /******************* action-menu *********************/
 
 #dc-action-menu {
-padding: 2px 0px 6px 0px;
+padding: 2px 0 6px  0;
 font-weight: bold;
 color: #666;
 display: inline-flex;
@@ -1034,7 +1132,7 @@ display: inline-flex;
 
 #dc-action-menu ul {
 list-style:none;
-padding: 0px;
+padding:  0;
 /*margin: 8px 2px 4px 2px; */
 line-height: 2.2rem;
 }
@@ -1050,11 +1148,11 @@ white-space: nowrap;
 list-style:none;
 padding: 7px;
 margin-right: 4px;
-border-radius:2px;
+border-radius: 3px;
 z-index: 1;
 
 background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
-border: 1px solid #ddd;
+/*border: 1px solid #ddd; */
 }
 
 .dc-action-menu ul {
@@ -1069,7 +1167,7 @@ border: 1px solid #ddd;
 display: block; 
 float: none;
 padding: 6px 10px;
-margin-right: 0px;
+margin-right:  0;
 white-space: nowrap;
 background: #fff;
 border: 0;
@@ -1099,9 +1197,8 @@ padding: 7px;
 color: #222;
 }
 .dc-action-menu li:hover ul li:hover {
-border: 0px;
+border:  0;
 background: #eee;
-border-radius: 2px;
 }
 
 .menu-filter {
@@ -1117,7 +1214,7 @@ color: #000 !important;
 background-color: transparent;
 }
 
-.menu-filter hr {margin: 0px;}
+.menu-filter hr {margin:  0;}
 
 .dc-action-menu .no-background {
   background: #fff;
@@ -1137,6 +1234,118 @@ background-color: transparent;
   cursor: pointer;
   color: #ccc;
 }
+
+.dc-action-menu .dc-link:empty {
+  display: none;
+}
+
+.dc-action-menu li.spacer {
+  border-right: 2px solid #888;
+  border-radius: 0;
+  padding: 7px 0;
+  margin-right: 5px;
+}
+
+/*****  POPUP ******/
+
+#popup {
+  min-width: 50%;
+}
+
+#popup .dc-help .help-top {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 2px 4px;
+  border: 1px dotted #ccc;
+  border-radius: 4px;
+  background: rgba(76,154,255,0.2);
+}
+
+#popup .dc-help {
+  background: #fff;
+  padding: 8px;
+  max-height: 700px;
+  overflow-y: auto;
+  max-width: 800px;
+}
+
+#popup .dc-help h1 {
+  background: darkred;
+  color: #fff;
+  font-weight: 600;
+  padding: 4px;
+  font-size: 1.2em;
+  border-radius: 2px;
+}
+
+#popup .dc-help h2 {
+  font-size: 1.4em;
+  font-weight: 600;
+}
+
+#popup .dc-help h3 {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+#popup .dc-help .help-body {
+  padding: 4px
+}
+
+#popup .dc-help .help-tab {
+  display: table;
+  margin: 8px 0 0;
+  padding: 3px 12px;
+  color: #fff;
+  background: #555;
+  border-radius: 5px 5px 0 0;
+  font-weight: 600;
+}
+
+#popup .dc-help .help-tab-help {
+  font-weight: 600;
+  color: #fff;
+  background: #777;
+  padding: 3px 12px;
+}
+
+#popup .dc-help .help-fields {
+  margin-top: 1rem;
+  border-top: 1px solid #222;
+}
+
+#popup .dc-help .help-field {
+  display: flex;
+  background-color: #eee;
+  padding: 3px;
+}
+
+#popup .dc-help .help-field:nth-child(odd) {
+  background-color: #f8f8f8;
+}
+
+#popup .dc-help .help-label {
+  width: 25%;
+}
+
+#popup .dc-help .help-text {
+  max-width: 75%;
+}
+
+#popup .dc-help .help-body {
+  border-top: 1px solid #222;
+  padding-top: 8px;
+}
+
+#popup .dc-help .help-buttons {
+  padding: 4px 0;
+}
+
+#popup .dc-help .dc-link {
+  display: inline-flex;
+}
+
 .filter-popup {
   background-color: #fff;
   box-shadow: 2px 2px 5px #666;
@@ -1175,6 +1384,7 @@ cursor: pointer;
 #dc-document-info-popup {
 text-align: left;
 padding:4px;
+font-size: 0.9em;
 position:absolute;
 background-color: #f8f8f8;
 border: solid 1px #ccc;;
@@ -1188,7 +1398,7 @@ z-index: 100;
   width: 80px;
   padding: 1px;
 }
-#dc-document-info-popup div span:last-child {font-weight: bold;}
+#dc-document-info-popup div span:last-child {font-weight: 600;}
 
 
 /************************** filter popup *************************/
@@ -1220,20 +1430,22 @@ color: #669;
   max-width: 50%;
   background-color: #fff;
   padding: 10px;
-  border: solid 1px #ccc;;
+  border: dashed 1px #666;
+  margin-left: 1px;
 }
 
 /**  Radio button input field **/
 
 .dc-radio {
-  background-color: #fff;
-  border: solid 1px #ccc;;
-  padding: 5px 0 7px 0;
+  padding: 6px 0 12px 0;
   display: inline-table;
+  border: 1px dashed #666;
+  margin-left: 1px;
+  background-color: #fff;
 }
 .dc-radio div {
   font-size: 1.1em;
-  padding: 0 8px 6px 0;
+  padding: 8px;
   white-space: nowrap;
 }
 .dc-radio.dc-inline div {
@@ -1241,14 +1453,26 @@ color: #669;
 }
 
 .dc-radio input {
-  vertical-align: bottom;
+  vertical-align: initial;
+  margin: 6px 4px 0 0;
 }
 
 /****** MOBILE DEVICE *****/
-@media only screen and (max-width: 600px) {
+@media only screen and (max-device-width: 600px) {
+  body, .body {font-size: 11px !important;}
+  #site-top div:nth-of-type(2) {padding-top: 0 !important;}
+
+  .dc-form {
+    border: none;
+    border-top: 2px solid #888;
+    border-bottom: 2px solid #888;
+    margin-top: 4px;
+  }
+
   .dc-form .row-div {
     display: block;
   }
+  .dc-form-li {margin-top: 3px;}
 
   .dc-form-label {
     text-align: left;
@@ -1256,9 +1480,50 @@ color: #669;
     padding-bottom: 2px;
     white-space: nowrap;
   }
+  .dc-form-label label {
+    font-size: 14px;
+  }
+
+  .app-menu li {margin-bottom: 4px;}
+
+  .dc-submit {
+    padding: 1px 0 0;
+    line-height: 26px;
+    font-size: 11px;
+  }
+  #result {width: 200%;}
+
+  .dc-separator {
+    margin: 8px 0 0;
+    border-top: 2px solid #888;
+  }
   
-  .dc-form-li {margin-top: 3px;}
-  .dc-menu li {margin-top: 2px;}
+  .dc-menu li {margin-bottom: 4px;}
   
   .dc-width-10, .dc-width-14, .dc-width-21, .dc-width-85, .dc-width-100 {width: 100%;}
+
+  .dc-width-100 {
+    overflow: auto;
+  }
+
+  textarea, input, select {
+    max-width: 90%;
+  }
+
+  #menu-hamburger {
+    display: block;
+    padding: 4px;
+    font-size: 2em;
+  }
+
+  .cmsedit-container #menu {display: none;}
+  .cmsedit-container #menu.visible {display: initial; width: 150%;}
+  .cmsedit-iframe {padding-left: 2px;}
+}
+
+/******* Firefox only ********/
+@-moz-document url-prefix() {
+  .dc-submit {
+    padding: 0 2px 1px;
+  }
 }