/* 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;
}

/* 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;*/
}
.lf-form .lf-float-button {
  min-width: 22px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
  color: white;
  padding: 1px;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.lf-form .lf-help-button,
.lf-form .lf-control-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-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-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 */
}