/*Supress LastPass links in input fields*/
div[id^=__lpform_] {
  display: none !important
}

div[data-lastpass-icon-root] {
  display: none !important;
}


/*Supress spin buttons on number inputs*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*.section-content-container {*/
/*  padding: .5em;*/
/*  border: 1px solid silver;*/
/*  box-shadow: 3px 3px 8px silver;*/
/*}*/
form.input-form {
  width: fit-content;
}

.form-title {
  font-size: 1em;
  font-weight: 600;
}

.form-description {
  font-size: .9em;
  margin-bottom: 1em;
}

.input-table-form {
  height: 100%; /* must have height specified */
}

.input-table {
  /*display: inline-block;  Removed 2/21/25*/
  /*width: fit-content;  Removed 2/21/25*/
  table-layout: auto;
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
  /*font-family: "Verdana", "Helvetica", monospace;*/
  font-size: .9em;
  font-weight: normal;
  border-collapse: separate;
  border-spacing: .5em .2em;
}

/* ----- <thead> general ------------------------------------------- */
.input-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

/*  Make top left cell sticky for horizontal & vert scrolling  */
.input-table thead th.top-left-corner {
  left: 0;
  position: sticky;
  z-index: 2;
}

/* ----- <tbody> --------------------------------------------------- */
.input-table tbody {
  overflow: auto;
}

/* ----- <tr> ------------------------------------------------------ */
.input-table tr {
  /* no table row formatting as of now */
}

/* ----- <th> general ---------------------------------------------- */
.input-table th {
  word-wrap: break-word;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  font-weight: 400;
}

/*  Make top and left headings sticky for horizontal & vert scrolling  */
/*.input-table th.table-col-label:first-child,*/
/*.input-table th.table-row-label:first-child*/
/*{*/
/*	left: 0;*/
/*	position: sticky;*/
/*	z-index: 1;*/
/*}*/

/* ----- <th>: field row headings ---------------------------------- */
.input-table th.table-row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  width: fit-content;
  max-width: 25em;
  text-align: right;
  vertical-align: top;
  padding: 1px .5em 1px 0;
}

/* ----- <th>: field col headings ---------------------------------- */
.input-table th.table-col-label {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: center;
  vertical-align: bottom;
  background-color: white;
}


/* ----- <td> elements --------------------------------------------- */
.input-table td {
  vertical-align: top;
  /*text-align: center;*/
  width: fit-content;
  background-color: transparent;
  border: none;
}

/*override alignment to be left for class=f-rows*/
.input-table.f-cols td {
  text-align: center;
}

/*override alignment to be left for class=f-rows*/
.input-table.f-rows td {
  text-align: left;
}

.input-table td.center {
  /*background-color: lightcoral;*/
  text-align: center;
}

/* ----- Container for percentage inputs adds % sign on right ------ */
.input-pct-container {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.input-pct-container * {
  display: inline; /* changed to inline from inline-block */
  vertical-align: top;
  text-align: right;
}

/* ----- <input> <select> <textarea> -------------------------------
Note:  Input element widths are determined by cache_field_specs() and may be
       forced to a particular width, by form, using lu_FormFields.width
       See cache_field_specs.get_field_width() for details.
*/


.input-table input:not([type='checkbox']):not([type='radio']),
.input-table select,
.input-table textarea {
  min-height: 1.4em;
  width: 100%;
  border: 1px solid silver;
  background-color: white;
  line-height: 1.3em;
}

.input-table input:not([type='checkbox']):not([type='radio']).required,
.input-table select.required,
.input-table textarea.required {
  background-color: var(--pralana_blue_background); /* required field */
}

/* Additional attributes for textarea sizing */
.input-table textarea {
  overflow-y: hidden;
  height: 1.4em;
  padding: 1px 3px 2px 3px;
  box-sizing: border-box;
  resize: vertical;
}

/* Additional attributes for select input sizing */
.input-table select {
  padding: 0 0 1px 0;
}


/* Remove outline but add light green shadow on hover and focus */
input[type="checkbox"]:hover,
.select-filter:hover,
.input-table textarea:hover,
.input-table select:hover,
.input-table input:not([readonly]):not([type='radio']):hover,
.input-table li:hover {
  /*outline: none;*/
  /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #1eae7c;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #1eae7c;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #1eae7c;
}

/* For hovering over required fields add pralana blue glow */
.input-table textarea.required:hover,
.input-table select.required:hover,
.input-table input.required:not([readonly]):not([type='radio']):hover,
.input-table li:hover {
  /*outline: none;*/
  /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05), 0 0 8px var(--pralana_blue);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05), 0 0 8px var(--pralana_blue);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05), 0 0 8px var(--pralana_blue);
}

input[type="checkbox"] {
  height: 12px;
  accent-color: var(--pralana_green);
  transform: translateY(1px)
}


/* read-only checkboxes are not rendered by f_input.html.  Instead a div is
   rendered with class='readonly-checkbox' */
.readonly-checkbox {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 2px;
}

.readonly-checkmark-green {
  font-size: .8em;
  font-weight: 600;
  color: green;
  /*color: #606060;*/
}
.readonly-checkmark-red {
  font-size: .8em;
  font-weight: 600;
  color: red;
}


/*.form-disabled input,*/
/*.form-disabled select,*/
/*.form-disabled textarea {*/
/*  pointer-events: none; !* Disables all interactions *!*/
/*  opacity: 0.5; !* Optionally make them appear disabled *!*/
/*}*/

.input-table input:disabled,
.input-table select:disabled {
  background-color: #f2f2f2;
  pointer-events: none;
}

.instance-id { /* Used to render the instance id in forms */
  background-color: #f2f2f2 !important;
  color: #808080;
  border: 1px solid silver;
  line-height: 1.3em;
  min-height: 1.4em;
  padding: 1px;
  margin: 0;
}

.input-table select[readonly],
.input-table textarea[readonly],
.input-table input[readonly] {
  -webkit-user-select: none !important; /* Chrome, Opera, Safari */
  -moz-user-select: none !important; /* Firefox */
  -ms-user-select: none !important; /* IE/Edge */
  user-select: none !important; /* Standard syntax */
  background-color: #f2f2f2 !important;
  color: #808080;
  /*border: none !important;*/
  outline: none;
  /*padding-right: 1em;*/
  pointer-events: none; /* disable cursor */
}

.input-table input[readonly].hidden-readonly-value {
  color: #f2f2f2;
  pointer-events: none;
}

/* set input content alignment based on data-type attribute */
.input-table input[data-type="int"],
.input-table input[data-type="decimal"],
.input-table input[data-type="float"],
.input-table input[data-type="pct"],
.input-table input[data-type="currency"] {
  text-align: right;
}

.input-table input[data-type="str"],
.input-table select[data-type="str"] {
  text-align: left;
}

.input-table.f-cols input[data-type="bool"] {
  text-align: center;
}

.input-table.f-rows input[data-type="bool"] {
  text-align: left;
}

/*.input-table select {*/
/*  padding: 0;*/
/*  line-height: 1.4em;*/
/*  height: 1.4em;*/
/*}*/
.input-table .field-error {
  color: red;
  font-size: .9em;
  text-align: center;
  list-style-type: none;
  min-width: 5em;
  overflow-x: visible;
  text-wrap: nowrap;
}

.inflation-plus-addon {
  color: darkgray;
  text-align: right;
  font-size: 14.4px;
  margin-right: -1.6em;
  font-style: italic;
}

.input-table .form-error {
  /* Used for form-level errors.
     See forms_validation.py:  form.add_error(None, msg)*/
  color: red;
  font-size: .9em;
  list-style-type: none;
  transform: translateY(-0.5em);
}

.input-table ul.errorlist {
  color: red;
  font-size: .8em;
  text-align: center;
  list-style-type: none;
  padding: 0;
}

.input-table td.column-total {
  text-align: right;
  padding-right: .25em;
}

.input-table td .total-input {
  color: black;
  border: none !important;
  background-color: white !important;
}

.input-table td .total-input.not_equal_100 {
  color: red;
}
.input-table td .total-input.equal_100 {
  color: green;
}


div.action-button-td {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 1em;
  border: None;
  background-color: transparent;
  padding: 0;
  width: fit-content;
}

a.button-with-img {
  width: 20px;
  height: 20px;
  padding: 0 .3em;
  text-decoration: none;
  outline: none;
}


#confirm-delete-dialog {
  position: relative;
  background-color: white;
  border-radius: .25em;
  border: 2px solid red;
  width: 14em;
  height: fit-content;
  padding: 8px;
  z-index: 999;
  margin-left: 0; /* Replace transform */
  margin-top: -3em; /* Replace transform */
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.confirm-delete-title {
  margin-bottom: .5em;
}

.confirm-delete-msg {
  margin-bottom: 1em;
  font-size: .8em;
}

a.delete-button:focus > img.img-inside-button,
a.delete-button:hover > img.img-inside-button {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05), 0 0 8px red;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05), 0 0 8px red;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05), 0 0 8px red;
}

/* Style for the entire list */
.sortable ul {
  margin: -5px 0;
  padding: 0; /* Remove default padding */
  width: 200px; /* Set the width of the list */
  background: #f5f5f5; /* Set a background color */
}

/* Style for individual items */
.sortable li {
  /*width: auto; */
  white-space: nowrap; /* width will vary with user name */
  list-style-type: none; /* Remove default bullets */
  text-align: left;
  margin: 5px 0; /* Add a margin to the top and bottom */
  padding: 0 5px; /* Add some padding */
  border: 1px solid #ccc; /* Add a border */
  background: #fff; /* Change the background color */
  cursor: move; /* Change the cursor to a 'move' hand */
}

/* Style for the handle */
.sortable-handle {
  display: inline-block; /* Make it a block element */
  margin: 0 .5em 0 .1em; /* Add some margin to the right */
  cursor: move; /* Change the cursor to a 'move' hand */
}

.height_5 {
  min-height: 5em !important;
  max-height: 50vh;
  overflow-y: auto !important;
}

textarea.grey_bg {
  background-color: whitesmoke;
}

td.group-divider-row {
  border-top: 1px solid silver;
}