lforms 29.3.1 → 33.2.0

package/app/styles/lforms.css

@@ -1,1219 +0,0 @@
-/* lforms widget styles */
-.lf-form {
-  font-family: "Arial";
-  font-size: 14px;
-  background-color: #FFFFFF;
-}
-
-/* no spinner */
-.lf-form input[type=number]::-webkit-outer-spin-button,
-.lf-form input[type=number]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.lf-form input[type=number] {
-  -moz-appearance:textfield;
-}
-
-.lf-form input[type=file] {
-  border: 1px solid gray;
-  display: inline;
-}
-
-/* Keep the font-weight on the questions normal */
-.lf-form label {
-  font-weight: normal;
-  margin-bottom: 0;
-}
-
-/* form title */
-.lf-form-title {
-  background-color: #458AC5;
-  color: #FFF;
-  overflow: hidden;
-  padding: 8px;
-  margin: 4px 0;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.lf-form-title a {
-  color: #FFFFFF;
-}
-.lf-form-title .lf-question {
-  font-size: 120%;
-  /* Center title within containing div */
-  vertical-align: text-top;
-}
-
-/* lf-form-header */
-
-/* table structure in the forms */
-.lf-form table {
-  /*border-collapse: collapse;*/
-  padding: 0;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.lf-form-table {
-  /*border: 1px solid #73A0C8;*/
-}
-
-
-/* input fields */
-.lf-form input[type="text"],
-.lf-form input[type="number"] {
-  border: 1px solid #ced5d9 ;
-  width: 100%;
-  height: 28px;
-  min-height: 14px;
-  overflow: hidden;
-  padding: 2px 2px 2px 4px;
-  font-size: 90%;
-  font-weight: 700;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.lf-form textarea {
-  border: 1px solid #ced5d9 ;
-  width: 100%;
-  height: 1em; /* initial height (for firefox)*/
-  min-height: 28px;
-  overflow: visible;
-  padding: 2px 2px 2px 4px;
-  font-size: 90%;
-  font-weight: 700;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  vertical-align: bottom; /* remove the extra padding at the bottom of the containing div. */
-  /*display:block; !* remove the extra padding at the bottom of the containing div. (solution #2) *!*/
-  resize: vertical; /* not allow user to change width */
-
-}
-.lf-form input:focus,.lf-form textarea:focus {
-  background-color: #FFF8C6
-}
-
-.lf-form input[readonly], .lf-form textarea[readonly] {
-  background-color: #E8E8E8;
-}
-
-/* buttons in tables */
-.lf-de-button {
-  width: 22px;
-}
-.lf-form button {
-  border: 0 none;
-  cursor: pointer;
-  overflow: visible;
-  padding: 0;
-  position: relative;
-  background-color: #066aa0; /*#458AC5;*/
-  color: white;
-}
-.lf-form .lf-float-button {
-  min-width: 22px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  font-weight: bold;
-  padding: 1px;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-}
-.lf-form .lf-attachment-button {
-  padding-left: 0.25em;
-  padding-right: 0.25em;
-  border-radius: 4px;
-  margin-left: 0.25em;
-}
-.lf-form progress {
-  vertical-align: text-bottom;
-}
-.lf-form .lf-help-button,
-.lf-form .lf-control-button,
-.lf-form .lf-rm-attachment-button,
-.lf-form .lf-copyright-button {
-  font-size: 120%;
-  font-weight: bold;
-  padding: 0;
-  margin-right: 2px;
-  margin-left:2px;
-  vertical-align: middle;
-  background-color: transparent;
-  color: #066aa0; /*#458AC5;*/
-}
-.lf-form .lf-help-button:hover,
-.lf-form .lf-control-button:hover,
-.lf-form .lf-rm-attachment-button:hover,
-.lf-form .lf-copyright-button:hover {
-  color: #0087fd;
-}
-.lf-form .lf-form-title .lf-help-button,
-.lf-form .lf-form-title .lf-control-button,
-.lf-form .lf-form-title .lf-copyright-button {
-  background-color: inherit;
-  color: white;
-}
-.lf-form .lf-form-title .lf-help-button:hover,
-.lf-form .lf-form-title .lf-control-button:hover,
-.lf-form .lf-form-title .lf-copyright-button:hover {
-  color: #b4fda7;
-}
-
-.lf-form .download-link {
-  padding-left: 0.5em;
-}
-
-.lf-form-title .popover {
-  color: #333333;
-}
-
-/* name field */
-.lf-form .lf-de-label span.lf-prompt {
-  font-style: italic;
-  font-size: 75%;
-}
-.lf-form .lf-de-label span.lf-sn{
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  background-color: #066aa0;
-  font-weight: bold;
-  color: white;
-  padding: 4px 8px;
-}
-.lf-form .lf-de-label span.lf-question{
-  padding: 0 2px 0 2px;
-}
-
-/* required indicator */
-.lf-form .required {
-  color: darkred;
-}
-
-/* form stop sign */
-.lf-form .stopped {
-  text-align: center;
-  width:500px;
-  height: 50px;
-  margin-left: 30%;
-  margin-right: 30%;
-  margin-bottom: 20px;
-  vertical-align: top;
-}
-.lf-form .stopped span {
-  font-size: 300%;
-  vertical-align: top;
-  color: red;
-}
-.lf-form .stop-sign {
-  background-image: url("../images/signal-stop.png");
-  background-repeat: no-repeat;
-  background-position: left center;
-  width: 48px;
-  height: 48px; /*100%; */
-}
-
-/* html5 tooltip style */
-.lf-form input:-moz-placeholder,
-.lf-form textarea:-moz-placeholder {
-  font-size: 14px;
-  font-weight: 400;
-  color: #999999;
-  opacity: 1;
-}
-/* Repeat for IE 11, which won't read this definition if it is combined above
-   with -moz-placeholder */
-.lf-form input:-ms-input-placeholder,
-.lf-form textarea:-ms-input-placeholder {
-  font-size: 14px;
-  font-weight: 400;
-  color: #999999;
-  opacity: 1;
-}
-
-/* active row */
-.lf-form-table-row.active-row {
-  background-color: #AFEEEE;
-}
-
-/* units */
-.lf-form input.units {
-  color: #333333;
-  font-weight: 400;
-}
-
-/* restore autocomplete default styles */
-/* Also, unit fields sometimes have answer lists and sometimes not, so set the
- * padding there two for consistent field widths. */
-.lf-form input.ansList,  .lf-form input.search_field, .lf-form input.units {
-  padding-right: 14px;
-}
-
-
-/* borders for invalid fields */
-.lf-form input.ng-invalid.ng-dirty,
-.lf-form div.ng-invalid.ng-dirty {
-  border: 2px solid #FF0000;
-}
-
-/* validations messages for invalid fields */
-.lf-form .hasTooltip {
-  overflow: visible;
-}
-.lf-form .tooltipContent {
-  display: none;
-}
-.lf-form .lf-visited-before .ng-invalid > .tooltipContainer:hover .tooltipContent,
-.lf-form .active-row.lf-visited-before .ng-invalid > .tooltipContainer .tooltipContent,
-.lf-form .lf-show-validation .ng-invalid > .tooltipContainer .tooltipContent {
-  border-radius: 6px;
-  bottom: 35px;
-  background-color: #fcf8e3;
-  left: 5px;
-  padding: 9px 14px;
-  position: absolute;
-  z-index: 98;
-  max-width: 600px;
-  width: auto;
-  display: block;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-  border: 1px solid #eea236;
-
-}
-.lf-form .lf-visited-before .ng-invalid > .tooltipContainer:hover:before,
-.lf-form .active-row.lf-visited-before .ng-invalid > .tooltipContainer:before,
-.lf-form .lf-show-validation .ng-invalid > .tooltipContainer:before {
-  border: solid;
-  border-color: #fcf8e3 transparent;
-  border-width: 11px 11px 0 11px;
-  bottom: 25px;
-  content: "";
-  left: 15px;
-  position: absolute;
-  z-index: 99;
-}
-
-/* Hiding the error message bubble for DTM - datetimepicker controls the input and it doesn't
-   run through our validation process.
-   See below (commented out) on a potential way to deliver the error message - there are still issues to work out.
-*/
-.lf-form .lf-datatype-DTM .lf-visited-before .ng-invalid > .tooltipContainer:hover:before,
-.lf-form .lf-datatype-DTM .active-row.lf-visited-before .ng-invalid > .tooltipContainer:before,
-.lf-form .lf-datatype-DTM .lf-show-validation .ng-invalid > .tooltipContainer:before {
-  display:none;
-}
-
-/* An alternative way of managing/displaying error messages for DTM (where the datetimepicker controls
-   many things), could explore down the road.
-.lf-form .lf-datatype-DTM .ng-invalid > .tooltipContainer .tooltipContent:before {
-  bottom: -1px;
-  left: -6px;
-  content: "It must be a date and time value."
-}
-*/
-
-
-.lf-form .lf-visited-before .ng-invalid input[type="number"],
-.lf-form .lf-visited-before .ng-invalid input[type="text"],
-.lf-form .lf-visited-before .ng-invalid textarea,
-.lf-form .lf-show-validation .ng-invalid input[type="number"],
-.lf-form .lf-show-validation .ng-invalid input[type="text"],
-.lf-form .lf-show-validation .ng-invalid textarea {
-  border-color: red;
-}
-.validation-error:before {
-  content: '\2022';
-  padding-right: 1rem;
-}
-/* end of validation messages */
-
-/* horizontal table */
-/* title */
-.lf-form-horizontal-table-title {
-  background: #e6f1ff; /*#E8E8E8;*/
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0 0 0 1px;
-  text-align: left;
-
-  border-width: 0;
-  border-top: 2px solid white; /* leave space between headers */
-  padding: 4px 0 4px 0;
-}
-/* column headers in tables */
-.lf-form-horizontal-table-header {
-  overflow: hidden;
-  vertical-align: top;
-  background: none repeat scroll 0 0 #E8E8E8;
-  padding: 4px 2px;
-  text-align: left ;
-  color: #666666;
-  font-weight: 400;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-
-.lf-form-horizontal-table td.lf-de-button {
-  padding-left: 2px;
-  border-right: none;
-}
-.lf-form-horizontal-table {
-  border: none;
-  margin: 2px 4px 0 1px;
-}
-.lf-form-horizontal-table tr {
-  border: none;
-}
-.lf-form-horizontal-table tr td {
-  border-right: none;
-  border-left: none;
-}
-.lf-form-horizontal-table .lf-de-button {
-  width: 2.5em;
-  min-width: 2em;
-}
-.lf-layout-horizontal .lf-form-table-row.button-row {
-  margin-right: 0;
-  border: 0;
-}
-/* end of horizontal table */
-
-/* ng animate css for adding new repeating items and skip logic items*/
-.lf-form-body .data-row.has-ng-animate.ng-enter {
-  -webkit-transition: 4s;
-  transition: 4s;
-  background-color: #AFEEEE;
-}
-.lf-form-body .data-row.has-ng-animate.ng-enter-active {
-  background-color: inherit;
-}
-
-/* visible skip logic target items have different styles */
-.lf-form-body .lf-form-table-row.target-show td {
-  color: #015DAD;
-  /* todo */
-  /*tooltip: "triggered by other questions."*/
-}
-
-/* override some settings from autocomplete-lhc */
-.autocomp_selected {
-  border: 1px solid #ced5d9;
-  border-radius: 4px;
-  width: 100%;
-}
-.autocomp_selected ul {
-  margin: 0 0 0 0.25em;
-}
-
-/*
-Fix for LF-29.
-Override color of select boxes in calendar widget title bar.
-*/
-.ui-datepicker-title select {
-  color: black; /* Note: "initial" is not supported by IE */
-}
-
-/* date picker */
-.ui-datepicker {
-  font-size: 80%;
-}
-.lf-form-item-data {
-  position: relative;
-}
-.lf-form-item-data .ui-datepicker-trigger {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  height: 16px;
-  width: 14px;
-  overflow: hidden; /* hide button label */
-  z-index: 1;
-  background: transparent;
-  color: #066aa0;
-  font-family: 'Glyphicons Halflings';
-}
-.lf-form-item-data .ui-datepicker-trigger:before {
-  content: "\e109";
-}
-.lf-form-item-data .ui-datepicker-trigger:hover {
-  color: #0087fd;
-}
-
-
-/* start ==== styles for uib datetime picker */
-
-/* The container of the datetime picker block */
-.lf-dtm-picker-block {
-  position: relative;
-  display: table;
-  border: 1px solid lightgrey;
-  border-radius: 4px;
-  width: 100%;
-}
-
-/* Make the input field and calendar icon look better side by side */
-.lf-dtm-picker-block > input.form-control {
-  border: none;
-  border-radius: 0;
-  margin-left: 0;
-}
-
-/* Overall popup window for both date and time popups*/
-.datetime-picker-dropdown {
-  width: 275px;
-  background: white;
-  border: 1px solid lightgrey;
-}
-
-/* re-align the calendar header (conflicts with lform button style) */
-.datetime-picker-dropdown > li.date-picker-menu .btn-sm,
-.datetime-picker-dropdown > li.date-picker-menu .btn-group-sm>.btn {
-  padding: 5px 10px;
-}
-
-/* thead in the calendar table that is for header and day of week name rows */
-.datetime-picker-dropdown > li.date-picker-menu div > table th {
-  border:1px solid white;
-}
-
-/* The header (month and prev/next arrow) */
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th,
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th * {
-  background-color: #5c9ccc;
-  color: #dfeffc;
-}
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th:hover,
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th *:hover {
-  color: #5c9ccc;
-  background-color: #dfeffc;
-}
-/* the real controls in the header (month, prev/next) */
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th button,
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th button:hover,
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th button *,
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th button *:hover {
-  background-color: inherit;
-  color: inherit;
-}
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th button,
-.datetime-picker-dropdown > li.date-picker-menu thead tr:first-child th button:hover {
-  border: none;
-}
-
-/* Calendar date cells buttons */
-.datetime-picker-dropdown > li.date-picker-menu td.uib-day {
-  border: 1px solid white;
-}
-.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default {
-  background: #dfeffc;
-  border: 1px solid #dfeffc; /* to change color when selected/active */
-  color: #2e6e9e;
-}
-.datetime-picker-dropdown .btn-default:hover,
-.datetime-picker-dropdown > li.time-picker-menu .btn-default:hover,
-.datetime-picker-dropdown > li.date-picker-menu tbody .btn-default:hover {
-  border: 1px solid #5c9ccc;
-}
-
-/* cells displayed but are of previous or next months */
-.datetime-picker-dropdown > li.date-picker-menu div > table .text-muted {
-  color: #AAAAAA;
-}
-
-/* Today's date color */
-.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default .text-info {
-  color: black;
-  font-weight: 600;
-  text-decoration: underline;
-}
-
-/* selected date */
-.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default.active {
-  color: #e17009;
-  background-color: #fcfdfd;
-  border-color: #5c9ccc;
-}
-
-/* calendar/time bottom buttons and time AM/PM button */
-.datetime-picker-dropdown .btn-group > .btn-sm,
-.datetime-picker-dropdown > li.time-picker-menu div table button {
-  background: #dfeffc;
-  color: #5c9ccc;
-  border: 1px solid lightgrey;
-  padding: 5px 8px;
-}
-.datetime-picker-dropdown .btn-group > .btn-sm:focus,
-.datetime-picker-dropdown > li.time-picker-menu div table button:focus,
-.datetime-picker-dropdown > li.time-picker-menu div table a:focus,
-.datetime-picker-dropdown > li.date-picker-menu div > table:focus {
-  outline: none;
-}
-.datetime-picker-dropdown .btn-group > .btn-sm:hover,
-.datetime-picker-dropdown > li.time-picker-menu div table button:hover,
-.datetime-picker-dropdown > li.time-picker-menu div table a:hover {
-  border-color: #5c9ccc;
-}
-
-/* Time picker popup */
-.datetime-picker-dropdown > li.time-picker-menu div table {
-  padding-left: 50px;
-  padding-right: 50px;
-  display: inline-block;
-  padding-top: 10px;
-}
-
-/* time input/selection elements cells */
-.datetime-picker-dropdown > li.time-picker-menu div table td {
-  width: 1px;
-  padding-left: 3px;
-  padding-right: 3px;
-  color: #5c9ccc;
-}
-.datetime-picker-dropdown > li.time-picker-menu div table td a,
-.datetime-picker-dropdown > li.time-picker-menu div table td input {
-  color: #5c9ccc;
-}
-
-/* hour/minute input field */
-.datetime-picker-dropdown > li.time-picker-menu div table input {
-  width: 3em;
-}
-
-/* end ==== styles for uib datetime picker */
-
-
-/* popover dialog */
-.lf-form .lf-de-label.has-popover-warning .popover {
-  border-color: #eea236;
-  border-width: 1px;
-  padding: 0;
-  background-color: #fcf8e3;
-}
-.lf-form .lf-de-label.has-popover-warning .popover .arrow:after {
-  border-top-color: #fcf8e3;
-}
-.lf-form .popover {
-  max-width: 600px;
-  width: auto;
-}
-.lf-form .popover-content {
-  max-height: 600px;
-  height: auto;
-  overflow-y: auto;
-}
-
-/*** matrix layout ***/
-.lf-layout-matrix.lf-table-item  {
-  padding-bottom: 2px;
-}
-.lf-form-matrix-table {
-  border-collapse: separate;
-  border-radius: 4px;
-  box-sizing: border-box;
-  margin: 2px 4px 0 1px;
-  text-align: left;
-  border: 1px solid #ced5d9;
-}
-.lf-form-matrix-table .lf-form-table-header {
-  background: #E8E8E8;
-}
-.lf-form-matrix-table-title {
-  background: #e6f1ff; /*#E8E8E8;*/
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0 0 0 1px;
-  text-align: left;
-
-  border-width: 0;
-  border-top: 2px solid white; /* leave space between headers */
-  padding: 4px 0 4px 0;
-}
-
-.lf-form .lf-form-matrix-table .lf-question {
-  width: 25%;
-}
-.lf-form .lf-form-matrix-answer {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-.lf-form .lf-form-matrix-cell,
-.lf-form .lf-form-matrix-cell-other {
-  text-align: center;
-}
-.lf-form .lf-form-matrix-table th {
-  padding: 4px;
-}
-.lf-form .lf-form-matrix-table td {
-  padding: 4px;
-  border-top: 1px solid #ced5d9;
-}
-/*** end of matrix layout ***/
-
-
-/*** button row ***/
-.lf-form .lf-form-table-row.button-row {
-  background: none;
-  padding: 2px 0;
-}
-
-.lf-form.lf-template-table .lf-layout-horizontal,
-.lf-form.lf-template-table .lf-layout-matrix {
-  padding-right: 6px;
-}
-
-/* not to show title when the entire form is in horizontal or matrix layout */
-.lf-top-section .lf-layout-horizontal .lf-form-horizontal-table-title,
-.lf-top-section .lf-layout-matrix .lf-form-matrix-table-title {
-  display: none;
-}
-
-/* tree lines */
-.lf-table-item {
-  padding-left: 24px;
-  position: relative;
-}
-/* the horizontal bar of a tree line */
-.lf-table-item::before {
-  content: "";
-  position: absolute;
-  left: 12px;
-
-  border-top: 2px solid #2f96b4;
-  top: 14px;
-  width: 12px;
-  height: 0;
-}
-/* the vertical bar of a tree line */
-.lf-table-item::after {
-  content: "";
-  position: absolute;
-  left: 12px;
-
-  border-left: 2px solid #2f96b4;
-  height: 100%;
-  width: 0;
-  top: 0;
-}
-/* shorter vertical bar of a tree line for the last item of a level */
-.lf-table-item.lf-last-item::after {
-  height: 14px;
-}
-/*no tree lines for form level horizontal and matrix layouts */
-.lf-top-section .lf-layout-horizontal.lf-table-item,
-.lf-top-section .lf-layout-matrix.lf-table-item {
-  padding: 0 4px 0 3px;
-}
-.lf-top-section .lf-layout-horizontal.lf-table-item::before,
-.lf-top-section .lf-layout-matrix.lf-table-item::before {
-  border: 0;
-}
-.lf-top-section .lf-layout-horizontal.lf-table-item::after,
-.lf-top-section .lf-layout-matrix.lf-table-item::after {
-  border: 0;
-}
-/* end of tree lines */
-/* bar style */
-/* no horizontal bar */
-.lf-indentation-bar .lf-table-item::before {
-  border-top: 0
-}
-/* the vertical bar */
-.lf-indentation-bar .lf-table-item::after {
-  border: 6px solid #c6dde4;;
-  left: 6px;
-}
-/* normal vertical bar of a tree line for the last item of a level */
-.lf-indentation-bar .lf-table-item.lf-last-item::after {
-  height: 100%;
-}
-/* round bar ends for the first and the last item */
-.lf-indentation-bar .lf-table-item.lf-first-item::after {
-  border-top-left-radius: 4px;
-}
-.lf-indentation-bar .lf-table-item.lf-last-item::after {
-  border-bottom-left-radius: 4px;
-}
-/* end of bar style */
-
-
-.lf-form-view {
-  margin: 15px;
-}
-.lf-form-body {
-  border: 1px solid #ced5d9;
-  padding: 4px 0;
-  margin: 0 0 2px 0;
-
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-}
-
-/* column header */
-.lf-column-header {
-  background-color: #E8E8E8;
-  padding: 4px 2px;
-
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0 4px 2px 4px;
-
-  border-width: 0;
-}
-.lf-column-label-button,
-.lf-column-input,
-.lf-column-unit {
-  padding: 0 6px 0px 10px;
-}
-
-/* new flex box layout system based on screen size */
-/* padding on flex boxes */
-.lf-de-label-button {
-  padding: 4px 0 0 0;
-}
-.lf-de-input-unit {
-  padding: 0 0 0 0;
-}
-.lf-de-input {
-  padding: 2px 0 2px 2px;
-}
-.lf-de-unit {
-  padding: 2px 0 2px 2px;
-}
-
-/* Large */
-.lf-de,
-.lf-column-header{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  align-content: flex-start;
-}
-
-.lf-de-label-button,
-.lf-column-label-button {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-
-  order: 1;
-  flex-grow: 1;
-}
-.lf-de-label {
-  order: 1;
-  flex-grow: 1;
-}
-.lf-de-button {
-  order: 2;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.lf-de-input-unit,
-.lf-column-input-unit {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-
-  order: 2;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.lf-de-input,
-.lf-column-input {
-  order:1;
-  flex-grow: 1;
-}
-.lf-de-unit,
-.lf-column-unit {
-  order:2;
-  flex-grow: 1;
-}
-
-/* for answerLayout RADIO_CHECKBOX/COMBO_BOX */
-/*.lf-form .lf-field-answers,*/
-.lf-form .lf-answer-type-list{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-  flex-grow: 1;
-}
-
-/* within an answer (radio button/checkbox, label, other) */
-.lf-form .lf-answer-type-list .lf-answer > div {
-  display: flex;
-  flex-wrap: nowrap;
-  padding: 2px 8px;
-}
-.lf-form .lf-answer-type-list .lf-answer-button {
-  order:1;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: 20px;
-}
-.lf-form .lf-answer-type-list .lf-answer-label {
-  padding-left: 4px;
-  order:1;
-  flex-grow: 1;
-}
-/* end of within an answer */
-/* cwe type, other field */
-.lf-form .lf-answer-cwe-other > div {
-  display: flex;
-  flex-wrap: nowrap;
-  padding: 2px 8px;
-}
-.lf-form .lf-answer-cwe-other .lf-answer-button {
-  order:1;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: 20px;
-}
-.lf-form .lf-answer-cwe-other .lf-answer-label {
-  padding-left: 4px;
-  order:1;
-  flex-grow: 1;
-}
-.lf-form .lf-answer-cwe-other .lf-answer-other {
-  order:1;
-  flex-grow: 1;
-}
-/* column number control for list of answers*/
-.lf-form .lf-0-col {
-  /* means flexible */
-}
-.lf-form .lf-1-col {
-  width: 100%;
-}
-.lf-form .lf-2-col {
-  width: 50%;
-}
-.lf-form .lf-3-col {
-  width: 33.3%;
-}
-.lf-form .lf-4-col {
-  width: 25%;
-}
-.lf-form .lf-5-col {
-  width: 20%;
-}
-.lf-form .lf-6-col {
-  width: 16.6%;
-}
-/* end of answerLayout */
-
-/* form controls */
-.lf-form-controls {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-}
-.lf-form-control {
-  order: 1;
-  flex-grow: 1;
-}
-.lf-form-control input {
-  /* Turn off top margin so these align with "Total # of Questions" */
-  margin-top: 0;
-}
-/* form options, item options */
-.lf-form-options,
-.lf-item-options {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-
-  border: 2px dotted #458AC5;
-  padding: 4px 2px;
-
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-}
-.lf-form-options {
-  margin: 2px;
-}
-.lf-form-option {
-  order: 1;
-  flex-grow: 1;
-  width: 25%;
-}
-.lf-item-options {
-  margin: 2px 0 2px 10px;
-}
-.lf-item-option {
-  order: 1;
-  flex-grow: 1;
-  width: 50%;
-}
-.lf-item-options.lf-section-options .lf-item-option {
-  width: 33.3%;
-}
-/* form header */
-.lf-form-header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  align-content: flex-start;
-
-  border-style: solid;
-  border-color: #ced5d9;
-  border-width: 1px;
-
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  margin: 2px 0 0 0;
-  padding: 2px;
-
-}
-.lf-header-de {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  align-content: flex-start;
-  flex-grow: 1;
-  width: 100%;
-  padding: 2px;
-
-}
-.lf-header-de-label {
-  order: 1;
-  flex-grow: 1;
-  width: 100%;
-
-  background: #E8E8E8;
-  padding: 4px 2px;
-  border-radius: 4px;
-  box-sizing: border-box;
-  border-width: 0;
-  margin: 0 0 2px 0;
-
-}
-.lf-header-de-input {
-  order:2;
-  flex-grow: 1;
-  width: 100%
-}
-
-/* Medium view width */
-.lf-item-view-md .lf-de {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  align-content: flex-start;
-}
-.lf-item-view-md .lf-de-label-button {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-
-  order: 1;
-  flex-grow: 1;
-  width: 100%;
-}
-.lf-item-view-md .lf-de-label {
-  order: 1;
-  flex-grow: 1;
-}
-.lf-item-view-md .lf-de-button {
-  order: 2;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.lf-item-view-md .lf-de-input-unit {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-
-  order: 2;
-  flex-grow: 1;
-  width: 100%;
-}
-.lf-item-view-md .lf-de-input {
-  order:1;
-  flex-grow: 1;
-}
-.lf-item-view-md .lf-de-unit {
-  order:2;
-  flex-grow: 1;
-}
-/* column header */
-.lf-form-view.lf-view-md .lf-column-header {
-  display: none;
-}
-/* form header */
-.lf-form-view.lf-view-md .lf-form-header {
-  flex-direction: column;
-}
-.lf-form-view.lf-view-md .lf-header-de {
-  flex-direction: row;
-}
-.lf-form-view.lf-view-md .lf-header-de-label {
-  margin: 0 2px 0 0;
-}
-.lf-form-view.lf-view-md .lf-header-de-input {
-  margin: 0 0 0 2px;
-}
-.lf-form-view.lf-view-md .lf-form-option {
-  width: 33.3%;
-}
-.lf-form-view.lf-view-md .lf-item-option {
-  width: 50%;
-}
-/* end of medium view width */
-
-/* Small view width */
-.lf-item-view-sm .lf-de {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  align-content: flex-start;
-}
-.lf-item-view-sm .lf-de-label-button {
-   display: flex;
-   flex-direction: row;
-   flex-wrap: nowrap;
-   align-items: flex-start;
-
-   order: 1;
-   flex-grow: 1;
-   width: 100%;
-}
-.lf-item-view-sm .lf-de-label {
-  order: 1;
-  flex-grow: 1;
-}
-.lf-item-view-sm .lf-de-button {
-  order: 2;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.lf-item-view-sm .lf-de-input-unit {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-  align-content: flex-start;
-
-  order: 2;
-  flex-grow: 1;
-  width: 100%;
-}
-.lf-item-view-sm .lf-de-input {
-  order:1;
-  flex-grow: 1;
-  width: 100%;
-}
-.lf-item-view-sm .lf-de-unit {
-  order:2;
-  flex-grow: 1;
-  width: 100%;
-}
-/* column header */
-.lf-form-view.lf-view-sm .lf-column-header {
-  display: none;
-}
-/* form header */
-.lf-form-view.lf-view-sm .lf-form-header {
-    flex-direction: column;
-}
-.lf-form-view.lf-view-sm .lf-header-de {
-    flex-direction: column;
-}
-.lf-form-view.lf-view-sm .lf-header-de-label {
-    margin: 0 2px 0 0;
-}
-.lf-form-view.lf-view-sm .lf-header-de-input {
-    margin:  2px 2px 0 0;
-}
-
-.lf-form-view.lf-view-sm .lf-form-option {
-    width: 50%;
-}
-.lf-form-view.lf-view-sm .lf-item-option {
-    width: 100%;
-}
-/* end of small view width */
-
-/* end of flex box layout */
-
-/* boarder, padding and margin */
-/* rows in tables */
-.lf-form-table .lf-form-table-row {
-  border: solid;
-  border-color: #ced5d9;
-  border-width: 1px 0 0 0;
-  margin: 0 4px 0 2px;
-}
-/* not to use for now.
-   when questions are contained in a question, the first question's border is needed.
- */
-/*.lf-table-item .lf-form-table-row.lf-first-item {*/
-  /*border: 0;*/
-/*}*/
-
-/* section header */
-.lf-form-table .lf-form-table-row.lf-section-header {
-  background: #e6f1ff; /*#E8E8E8;*/
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0 4px 0 2px;
-
-  border-width: 0;
-  border-top: 2px solid white; /* leave space between headers */
-}
-.lf-form-table .lf-form-table-row.lf-section-header .lf-de-label-button  {
-  padding: 4px 0 4px 0;
-}
-/* title row */
-.lf-form-table .lf-form-table-row.lf-title-row  {
-  background-color: #e6f1ff; /*rgb(67,115,156);*/
-  border-top: 2px solid white; /* leave space between headers */
-}
-.lf-form-table .lf-form-table-row.lf-title-row .lf-de-label {
-  /*color: white;*/
-}
-
-/* prefix */
-.lf-form .prefix {
-  padding-right: 0.25em; /* space between the prefix and the question */
-}