/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
/* Endblock styles generated from project.scss */


/*
The following styling is for the colvis datatable button, from
https://stackoverflow.com/questions/32701006/checkbox-for-each-button-to-select-a-column-in-datatables-1-10-without-colvis
*/
.dt-button-collection .dt-button.buttons-columnVisibility {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0.25em 1em !important;
  margin: 0 !important;
  text-align: left !important;
}
.dt-button-collection .buttons-columnVisibility:before,
.dt-button-collection .buttons-columnVisibility.active span:before {
  display:block;
  position:absolute;
  top:1.2em;
  left:0;
  width:12px;
  height:12px;
  box-sizing:border-box;
}
.dt-button-collection .buttons-columnVisibility:before {
  content:' ';
  margin-top:-8px;
  margin-left:10px;
  border:1px solid black;
  border-radius:3px;
}
.dt-button-collection .buttons-columnVisibility.active span:before {
  font-family: 'Arial' !important;
  content:'\2714';
  margin-top: -15px;
  margin-left: 12px;
  text-align: center;
  text-shadow: 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.dt-button-collection .buttons-columnVisibility span {
  margin-left:17px;
}

/* End block of colvis styling */


/* Block custom styling for customer_select_form on sample list page */
#customer_select_form .input-group {
  margin-right: 5px;
  width: 100%;
}
#customer_select_form select {
  width: 300%;
  margin-left: 5px;
}
#clear_customer_select_button {
  margin-right: 5px;
}

/* The following removes up/down arrows from number input boxes in forms for the following browsers */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* Fix the issue of transparent fixed datatable column
actually this was fixed in a more recent css package for the library extension
.dtfc-fixed-left {
  color: white !important;
  background-color: white !important;
  opacity: 1 !important;

}
th.dtfc-fixed-left {
  border-right-width: 0px !important;
}*/

/* custom style effect for edit_button and other toggles */
.dt-button.datatable_button_toggle.active {
  background-color: blue !important;
  color: white !important;
}


/* Extend Boostrap container max-width for very wide screens */
@media (min-width: 1500px) {
  .container {
    width: 1462px;
  }
}
@media (min-width: 1800px) {
  .container {
    width: 1852px;
  }
}
@media (min-width: 2300px) {
  .container {
    width: 2242px;
  }
}

@media (min-width: 2500px) {
  .container {
    width: 98%;
  }
}



/* Style the note modal */
.note-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}


.note-date {
  margin-top: 5px;
}
textarea
{
  tab-size: 4;
}
td.text-wrap {white-space: pre-wrap;}

/*
PITA styling
*/
.current-data td {
  background-color:#dafae0;
}
.pita.current-data button {
  background-color:#227e33;
  color: white;
}

/*
 bootstrap tooltip styling
 which makes it nicer to read with grey background
*/
.tooltip-arrow,
.tooltip > .tooltip-inner {background-color: rgb(110, 110, 110);}
.tooltip.top > .tooltip-arrow {background-color: rgb(110, 110, 110);}


/* Style the select2 to allow for more height*/
.select2-container .select2-dropdown .select2-results__options {
  max-height: 50vh !important;
  overflow-y: auto !important;
}

/*
datatable vue component title styling
*/
.table-title {
  text-align: left;
  padding: 10px 0;
  margin-bottom: 10px;
  position: relative;
}

.table-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #aaa, transparent);
}


.bubble-label {
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

.bubble-label-thin {
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  font-size: 0.8em;
  max-height: 1.5em;
  line-height: 0.8em;
  text-align: center;
}