@charset "utf-8";

/* add chevron glyphs to left of bootstrap accordian entries */
.panel-heading .accordion-toggle:before {
    /* chevron down */
    font-family: 'icons-solid';
    content: "\f078  ";
    color: #aaa;
}
.panel-heading .accordion-toggle.collapsed:before {
    /* chevron right */
    content: "\f054  ";
}

/* Make accordion headers bold as requested by Rob */
.panel-title {
  font-weight: bold;
}

.glyphicon {
  font-size: 14px;       /* lock glyphicon sizes to this many pixels */
}


/* lock icon sizes to 16px */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-size: 14px;
}

/* Don't underline when hovering over icons */
[class^="icon-"]:hover, [class*=" icon-"]:hover {
  text-decoration: none;
}

/* Make icons associated with checkboxes a little smaller to prevent clipping */
label [class^="icon-"]:before, [class*=" icon-"]:before {
  font-size: 14px;
}

/* Make icons used in input group addons, such as append or prepend text smaller */
.input-group-addon [class^="icon-"]:before, [class*=" icon-"]:before {
  font-size: 14px;
}

/*
.icon-big {
  font-size: 20px;
}
*/

/* icons on objections list page : key */

/* Indicate if a related record, for example in OneToOne relationship has outsanding decisions */
.icon-in-progress, .icon-in-progress:visited { color: #ffa500; }
.icon-in-progress:hover { color: rgba(255, 165, 0, 0.6) }

/* indicate if record is ready to be finalised */
.icon-ready-to-process, .icon-ready-to-process:visited { color: blue; }
.icon-ready-to-process:hover { color: rgba(0, 0, 255, 0.6) }

/* Indicate if a related record, for example in OneToOne relationship, has already been finalised */
.icon-done, .icon-done:visited { color: #3C3; }
.icon-done:hover { color: rgba(51, 204, 51, 0.6) }

/* indicate if record has been cancelled */
.icon-cancelled, .icon-cancelled:visited { color: #aaa; }
.icon-cancelled:hover { color: rgba(170, 170, 170, 0.6) }

/* indicate if record has not yet been created */
.icon-new, .icon-new:visited { color: #33f; }
.icon-new:hover { color: rgba(51, 51, 255, 0.6) }

/* indicate if a link to a record is disabled */
.icon-disabled, .icon-disabled:visited { color: #aaa; }
.icon-disabled:hover { color: rgba(170, 170, 170, 0.6) }

/* icons on pcm source search pages : key */
/* Indicate if a related record, is linked */
.icon-linked, .icon-linked:visited { color: #3C3; }
.icon-linked:hover { color: rgba(51, 204, 51, 0.6) }

/* Indicate if a related record, is not linked */
.icon-not-linked, .icon-not-linked:visited { color: #aaa; }
.icon-not-linked:hover { color: rgba(170, 170, 170, 0.6) }

.warning {
  color: red;
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.flip-horizontal {
  transform: rotateX(180deg);
}

.flip-vertical {
  transform: rotateY(180deg);
}

/* ---------------------------------------------------------------------- */
/* Datatables styles                                                      */
/* ---------------------------------------------------------------------- */
/* show icons representing ordering of columns for d-tables2 */
.table-container th.asc:after {
  content: '\0000a0\0025b2';
  position: relative;
  color: #369;
}

.table-container th.desc:after {
  content: '\0000a0\0025bc';
  position: relative;
  color: #369;
}

/* overflow: hidden prevents viewing all parts of table on smaller screens.
.table-ajax {
  overflow: hidden;
}

*/

/* Don't show datatables ordering icons */
table.dataTable thead .sorting:after {
    /* background: none; */
    content: "";
}

/* show icons representing ordering of columns  for datatables */
table.dataTable thead .sorting_asc:after {
  content: '\0000a0\0025b2';
  color: #369;
}

table.dataTable thead .sorting_desc:after {
  content: '\0000a0\0025bc';
  color: #369;
}

/* Tweak datatables selection css so inline editable fields
   will be readable for selected rows.
*/
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color: #3AE;
  color: #333;
}

/* Tweak datatable editor inline form styles to not add negative margins. */
div.DTE_Inline div.DTE_Field input[type=checkbox],
div.DTE_Inline div.DTE_Field div.controls,
div.DTE_Inline div.DTE_Field input[type=color],
div.DTE_Inline div.DTE_Field input[type=date],
div.DTE_Inline div.DTE_Field input[type=datetime],
div.DTE_Inline div.DTE_Field input[type=datetime-local],
div.DTE_Inline div.DTE_Field input[type=email],
div.DTE_Inline div.DTE_Field input[type=month],
div.DTE_Inline div.DTE_Field input[type=number],
div.DTE_Inline div.DTE_Field input[type=password],
div.DTE_Inline div.DTE_Field input[type=search],
div.DTE_Inline div.DTE_Field input[type=tel],
div.DTE_Inline div.DTE_Field input[type=text],
div.DTE_Inline div.DTE_Field input[type=time],
div.DTE_Inline div.DTE_Field input[type=url],
div.DTE_Inline div.DTE_Field input[type=week]
{
  margin: 0;
  padding: 0;
  height: 16px;
  font-size: 11px;
}

div.DTE_Inline div.DTE_Field select {
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  font-size: 11px;
}

/* Adjust text color for these classes so text will not become invisible when the table row is highlighted. */
.DTE_Field_InputControl, .DTE_Field_SpecialFeature {
  color: #333;
}

/* Position datatables lightbox background above awesomplete fields */
div.DTED DTED_Lightbox_Background {
  z-index: 101;
}

.table-editable-col {
  background-color: rgba(0, 0, 255, 0.05)
}

.table-inline-editable-col {
  background-color: rgba(0, 255, 0, 0.05)
}

.add-top-margin {
  margin-top: 20px !important;
}

/* Suppress inline display of datatable errors
.DTE_Form_Error {
  display: none !important;
}
*/

/* Tweak datatables order icon to be more to the right */
.dt-column-order {
  margin-right: -12px !important;
}

/* ---------------------------------------------------------------------- */

/* overflow (aka trim) table cells that are too long */
td {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 204px;
    height: 16px;
}

/* fixed width, but won't size smaller than column header */
.col-fixed-width {
  width: 24px;
}

/* so long cell content will be displayed on hover */
/* td:hover {
    white-space: normal;
}
*/

/* remove margins from .container to allow more to fit on screen */
/* no longer in use since we're using container-fluid, which doesn't have margins */
/*.container {
    margin: 0;
}*/

.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
    padding: 0 4px 0 4px;
    font-size: 11px;
}

/* White background for all element with class table,
to prevent line from panel from showing through table
on smaller screens.
However, we don't want to set any colors at all, as that
will interfere with branding, so disabling for now.
*/

/*
.table {
  background-color: rgba(255,255,255,1);
}
*/


/* Make bootstrap glyphicons bigger */
/*.glyphicon {
    font-size: 16px;
}*/

/* override bootstrap input sizes. Not the right approach.
input[type="text"] {
	height: 20px;
	padding: 0 3px !important;
}
*/

/* remove padding from all bootstrap 3 containers..  */
/* .container-fluid {
	padding: 0;
}
*/

/* Hide columns for smaller screen sizes */
/* This may be rather annoying to the user on a smaller screen
   if they can't see things they want to see.
@media only screen and (max-width : 1500px) {
    .ssourceaccountnumber {display: none;}
}

@media only screen and (max-width : 1426px) {
    .lpi {display: none;}
}

@media only screen and (max-width : 1294px) {
    .landusename {display: none;}
}

@media only screen and (max-width : 1180px) {
    .tariffname {display: none;}
    .szonename {display: none;}
}

@media only screen and (max-width : 1100px) {
    .effectiveextents {display: none;}
}

@media only screen and (max-width : 1048px) {
    .streetaddress {display: none;}
}

@media only screen and (max-width : 862px) {
    .categoryname {display: none;}
}
*/

/* Hide asterisks for property view */
#id_property_form .asteriskField {display: none}

/* Hide asterisks for advanced search form */
#id_property_search_form .asteriskField {display: none}

/* Hide asterisks for property update view */
#id_property_update_form .asteriskField {display: none}

/* Hide asterisks for billing import property delete view */
#id_property_delete_form .asteriskField {display: none}

/* Hide asterisks for core property edit view */
#id_property_edit_form .asteriskField {display: none}

/* Hide asterisks for Property_create view */
/* #id_property_create_form .asteriskField {display: none} */

.in-page-brand {
    font-family: "Copperplate Gothic Bold";
    font-size: 1.294em;
}

/* Grey out a table if any form values are altered.
   Listeners on form elements will trigger this. */
.table-oldresults tr td {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.3);
}

/* override awesomplete class to increase width */
.awesomplete {
    width: 100%;
}

/* Place z-index above clear icon, only for drop-down list
   So clear icon will be on tip in main field, but below
   drop-down list.
*/
.awesomplete > ul {
  z-index: 101;
}

/* adjust inline checkbox padding for property search */
#search-fields #div_id_spropertytype, #advanced-search-fields #div_id_idpropertystate {
    padding-bottom: 10px;
    margin: 0;
}

/* Remove padding above checkboxes, overriding bootstraps !important. */
/* Also using margin right instead of left, as it looks better for inline checkboxes or radios. */
.checkbox-inline, .radio-inline {
  padding-top: 0 !important;
  padding-bottom: 2px; /* Prevent annoying clipping of bottom of checkboxes */
  margin-left: 0;
  margin-right: 10px;
}

/* Use margin right instead of left, for subsequent inline checkboxes or radios. */
.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
    margin-top: 0;
    margin-left: 0;
}

/* used when using django-filter for advanced search */
/*
#div_id_custom_property_type, #div_id_custom_property_status {
    padding-bottom: 10px;
    margin: 0;
} */

/* prevent form labels from wrapping to a new line when too long */
label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Provide an override class to prevent non-wrapping set above when needed
   Searches for label element children of element with .do-wrap class.
*/
.do-wrap label {
  white-space: normal;
  word-wrap: break-word;
}

/* Override to force wrapping when needed */
.do-wrap {
  white-space: normal;
  word-wrap: break-word;
}

/* white-space is wrapped, so text is wrapped in textarea, but not in other form fields */
.form-control {
    /* overflow: hidden; */ /* this hides the scrollbar of multi-selects on webkit based browsers. */
    text-overflow: ellipsis;
}

/* Adjust prepended items to conform to our custom field height */
.input-group-addon {
  padding: 2px 10px 2px 10px;
}

.outline {
  /* 0.135 alpha over black = hex: DDDDDD, same as default bootstrap outlines. */
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
  border: 1px solid rgba(0, 0, 0, 0.135);
  /* background-color: rgba(0, 0, 0, 0.05); */
  background-color: #eee;
}

/* match .requiredField class, then div sibling if present, then input child if present
   Useful if the little * required field indicator is considered insufficient.
*/
/*
.requiredField + div input {
  background-color: red;
}
*/

/* Put a bit of padding above alerts, neater when used inline, such as for displaying error messages. */
.alert {
  margin-top: 8px;
}

/* Underline links in help text to make them more visible */
.alert a {
  text-decoration: underline;
}

/* Add padding above and below bullet lists in help */

.alert ul {
  padding-top: 12px;
  padding-bottom: 12px;
}

.alert li {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* styling for even or odd classes of tables2 */
.even {
  background-color: #f9f9f9;
}

.odd {
  background-color: #ffffff;
}

.selected {
  background-color: #3AE !important; /* should take precedence over other classes */
  color: #333;
}

/* Highlight background of highlighted table rows. */
tr:hover {
  background-color: #D9EDF7 !important;
}

/* visually indicate the start of a group of table cells */
.group-start {
  border-top: solid;
  border-width: 2px;
}

/* Invisible, but space for this element is still allocated */
.invis {
  visibility: hidden;
}

/* styling for even or odd classes for datatables that uses higher selection specificity */
div.dt-container table.dataTable tr.even {
  background-color: #f3f3f3;
}

div.dt-container table.dataTable tr.odd {
  background-color: #ffffff;
}

/* Highlight related fields in the datatables editor */
.editor-related-field-group {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 4px;
  margin: 4px;
}

/* used to style table rows in non-predictable groups,
   e.g. for property duplicates. after even and odd as
   it overrides them. */
.row-type-1 {
  background-color: #f3f3f3;
}

.row-type-2 {
  background-color: #ffffff;
}

/* N/A (Not Applicable) row type */
.row-type-na {
  background-color: #aaa;
}

/* remove margin below filter fieldset for property-search-input boxes */
.property-search-input fieldset {
  margin-bottom: 0;
}

/* Remove padding for BL030 hr's */
.billing-import-filter {
  margin: 0px;
}

/* Make text bold for form-control classes on elements below font-strong class.
   Allows changing font strength using css_class via crispy forms.
*/
.font-strong .form-control {
  font-weight: bold;
}

/* Make text bold */
.font-weight-bold {
  font-weight: bold;
}

/* add uniform padding around buttons */
.btn {
  margin: 4px 4px 4px 4px;
}

/* increase margin side between form fieldsets */
fieldset {
  margin: 16px 0 16px 0;
  /* border-radius: 4px; */ /* Chrome changed presentation behavior wrt to this */
  padding: 0 16px 16px 16px;
  border: 1px solid rgba(0, 0, 0, 0.135);
  background-color: #f2f2ff;
}

legend {
  padding: 2px 6px 2px 6px;
  border: 1px solid rgba(0, 0, 0, 0.135);
  background-color:#f2f2ff;
  border-radius: 4px;
}

.mini-legend > legend {
  font-size: 14px;
  font-weight: bold;
}

/* remove underline when glyphicon is applied to a tag */
a.glyphicon {
  text-decoration: none;
}


/* adjust vertical alignment for remove glyphs at higher screen res */
.delete-row {
  float: right;
  top: 5px;
}

.add-row {
  /* do a clearfix for add-row class so inline formset add link will display on new line. */
  content: "";
  display: table;
  clear: both;
}

/* alignment of remove glyphicon for delete-row class - used by formsets */
/* add separator between inline items at lower screen sizes. */
@media(max-width:991px){
  .delete-row {
    float: right;
    top: -20px;
  }

  .formset-container {
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
}

/* adding some padding above tabs */
.nav-tabs {
  padding-top: 10px;
}


/* ------------------------------------------------------------------------------------------------- */
/*Classes for normal property table row highlighting */

/* split value master */
tr.svm {
  background-color: #BBFFBB;
}

/* split value */
tr.sv {
  background-color: #DDFFDD;
}

/* sectional scheme master */
tr.ssm {
  background-color: #CCCCFF;
}

/* sectional scheme unit */
tr.ssu {
  background-color: #EEEEFF;
}

/* archived property */
tr.ap {
  background-color: #FFC0C0;
}

/* deleted property */
tr.dp {
  background-color: #FF6060;
}

/* normal property */
/* applied when colours are used as zebra striping would be confusing in those cases. */
tr.np {
  background-color: #fff;
}

tr.highlighted {
  background-color: #D9EDF7;
}

/* Class(es) for property inspections */
/* inspection completed */
tr.ic {
  background-color: #50ff99;
}

/* inspection blocked */
/* tr.ib {
  background-color: #ff5099;
} */


.light-background {
  background-color: rgba(255, 255, 255, 1);
}

/* ------------------------------------------------------------------------------------------------- */
/* Classes for row highlighting in CAMA
   Forced to use high specificity as that's what datatables css does
   above our heads.
*/
div.dt-container table.dataTable tr.svm {
  background-color: #BBFFBB;
  /* font-weight: bold; */
}

div.dt-container table.dataTable tr.sv {
  background-color: #DDFFDD;
  /* font-style: italic; */
  color: #333;
}

div.dt-container table.dataTable tr.ssm {
  background-color: #CCCCFF;
  font-weight: bold;
  /* text-decoration: underline; */
  color: #333;
}

div.dt-container table.dataTable tr.ssu {
  background-color: #EEEEFF;
  /* font-style: italic; */
  color: #333;
}

/* archived property */
div.dt-container table.dataTable tr.ap {
  background-color: #FFC0C0;
  color: #333;
}

/* deleted property */
div.dt-container table.dataTable tr.dp {
  background-color: #FF6060;
  color: #333;
}

/* applied when colours are used as zebra striping would be confusing in those cases. */
div.dt-container table.dataTable tr.np {
  background-color: #ccc;
  color: #333;
}

/* link list headers for CAMA valuations parameters menu */
/* set on li's */
.ul-link-list-root {
  padding-top: 20px;
  list-style-type: none;
}

/* set on ul's */
.ul-link-list-section {
  padding-bottom: 10px;
}

.li-link-list-section {
  font-size: 15px;
  font-weight: bold;
}

.li-link-list-sub-section {
  padding-bottom: 10px;
  font-weight: bold;
  list-style-type: none;
}

/* set on li's */
.li-link-list-link {
  padding-bottom: 10px;
}

/* Attach money classes to any money fields. */
.money {
    text-align: right;
}

/* Set select2 container to respect parent width */
.select2-container {
    max-width: 100% !important;
    min-width: 100% !important;
}

/* set select2 fields to approximately the same size as the others */
.select2-selection {
    height: 24px !important;
}

/* Align select 2 field content with default choice field content */
.select2-selection__rendered {
  position: relative;
  top: -4px;
  left: -4px;
}

/* Select 2  - hide default clear icon */
.select2-selection__clear {
  visibility: hidden;
}
/* Select 2  - add custom clear icon  */
.select2-selection__clear:before {
  visibility: visible;
  content: "✖";
  color: rgba(96, 96, 96);
  font-size: 12px;
  font-weight: normal;
}

/* tweak so clear icon will display correctly in all form controls */
.controls {
    position: relative;
}

/* tweak to hide datalist drop-down arrow in chrome - otherwise clear icon overlaps it. */
input::-webkit-calendar-picker-indicator {
  display: none;
}

/* hide IE 10/11/Edge field clear button - else it's shown together with the system one */
input[type=text]::-ms-clear {
  visibility: hidden;
}

/* Improve visibility of clear icon */
.add-clear-x {
  color: rgb(96, 96, 96) !important;
}

/* Hide chrome type="number" spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button

{
    display: none;
}

/* Hide firefox type="number" spinners */
input[type="number"] {
  -moz-appearance:textfield;
}

/* indicate that this row has already been processed */
/*
.objection-processed {
  color: #aaa;
}
*/

/* Force select2 container text to uppercase  */
.select2-container {
  text-transform:uppercase;
}

/* indicate clickable elements (such as bootstrap popovers with 'click' trigger) */
.clickable {
  cursor: pointer;
}

/* Sticky table headers */
.table-freeze-head          {
    overflow-y: auto;
    height: 100px;
}
.table-freeze-head thead th {
    position: sticky;
    top: -1px;
}

/* Have outline for th despite position: sticky border bug */
.table-freeze-head th {
  box-shadow: inset 0 1px #ccc, 0 1px #ccc;
}

/* Default table header default colour*/
table thead th {
  background-color: rgba(255,255,255,1);
}

/* Irregular table header background colour classes */
table thead th.accent-odd {
  background-color: rgba(255,255,221,1);
}

table thead th.accent-even {
  background-color: rgba(221,255,255,1);
}

/* Fade out and in for ajax tables (htmx)
   This helps the transition be less jarring if a big table
   is replaced with a smaller one.
*/
.fade-out.htmx-swapping {
  opacity: 0;
  transition: opacity 100ms ease-out;
}

.fade-in.htmx-settling {
  opacity: 0;
}
.fade-in {
  opacity: 1;
  transition: opacity 100ms ease-out;
}

/* Find a way to lock the buttons at the top of the Mass Appraisal page, so they can be used
   even when scrolling through big property lists. */
.cama-fixed-buttons {
  position: fixed;
  top: 5px;
  /* Raise height above bootstrap modal background, but below wait overlay.
     Bootstrap modal is supposed to be 1050. */
  z-index: 1041;
  background-color: rgba(0, 0, 0, 0);
  border: 0 solid rgba(0, 0, 0, 0);
  margin: 0;
}

.cama-fixed-buttons-right {
  left: 50%;
}

/* Kluge to allow proceeding if modal activated from floating buttons */
#modal-container-autovalue-listed-properties {
  position: fixed;
  top: 20%;
}

/* Set color to transparent */
.transparent {
  color: rgba(1, 1, 1, 0);
}

.transparent:hover {
  color: rgba(1, 1, 1, 0);
}

.col-icon {
  padding-top: 2px !important;
}

.osd-thumbnail {
  cursor: zoom-in;
}

.panel-heading {
  &:has(.lims-property-search) {background-color: #8FBCE8 !important;}
  &:has(.lims-data-collector) {background-color: #79C2D0 !important;}
  &:has(.lims-land-use-management) {background-color: #88D8B0 !important;}
  &:has(.lims-finance) {background-color: #79C2D0 !important;}
  &:has(.lims-valuation) {background-color: #FFB347 !important;}
  &:has(.lims-deeds) {background-color:  #B39EB5 !important;}
  &:has(.lims-reports) {background-color: #A1D6CA !important;}
  &:has(.lims-tools) {background-color: #C5B9CD !important;}
  &:has(.lims-admin) {background-color: #9A9EAB !important;}
  &:has(.lims-help) {background-color: #F0DBAF !important;}
}