/* Allow document to grow wider than the viewport so wide D3 SVGs scroll horizontally.
   width:100vw locks layout and clips charts; vw includes scrollbar on some browsers. */
html {
  overflow-x: auto;
}

body {
  overflow-x: auto;
}
.text-black{
  color:#000;
}
.footer{
  padding-top:50px;
}
body>.container-fluid{
  padding:60px 15px 0;
}
/* Bootstrap 5 dropped .form-group; keep spacing for existing templates. */
.form-group {
  margin-bottom: 1rem;
}
.box:hover{
  stroke:#000;
  cursor:pointer;
}
.col_label:hover, .row_label:hover, .hover_bold:hover{
    font-weight:700;
    cursor:pointer;
}
#d3-container{
  background-color:transparent;
  /* Intrinsic width follows the SVG so parents can expand (see main:has rule). */
  width: max-content;
  max-width: none;
}

/* Bootstrap .container-fluid is 100% viewport; widen main when a heatmap is present. */
main.container-fluid:has(#d3-container) {
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

/* Rows with the chart: let flex width follow the SVG instead of capping at the viewport. */
main.container-fluid:has(#d3-container) .row:has(#d3-container) {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}

/* Column wrappers around #d3-container (% widths clip wide SVGs). */
main.container-fluid:has(#d3-container) .col:has(> #d3-container),
main.container-fluid:has(#d3-container) [class*="col-"]:has(> #d3-container) {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
}

/* Heatmap markup puts grid classes on #d3-container itself (e.g. morphology). */
#d3-container[class*="col-"] {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
}
.hide{
  display:none;
}
.show{
  display:list-item;
}
.wordwrap{
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap:break-word;
}
.meow{
  display:inline-block;
  min-width:100px;
  max-width:300px;
}
.meow:hover{
  font-weight:650;
}
.ddxtbg{
  background-color:#66c2a5;
}
.histmorphbg{
  background-color:#fc8d62;
}
.bstopbg{
  background-color:#8da0cb;
}
.antibodybg{
  background-color:#e78ac3;
}
.biopsybg{
  background-color:#e5c494;
}

.bg-carcinoma {
  background-color:#B2DFDB;
}
label.bg-carcinoma:hover{
  background-color:#80CBC4;
}
.fg-carcinoma {
  background-color:#4DB6AC;
}
.fg-carcinoma.active, .fg-carcinoma.collapsible:hover {
  background-color: #26A69A;
}

.bg-sarcoma{
  background-color:#FFCDD2;
}
label.bg-sarcoma:hover{
  background-color:#EF9A9A;
}
.fg-sarcoma {
  background-color:#E57373;
}
.fg-sarcoma.active, .fg-sarcoma.collapsible:hover {
  background-color: #EF5350;
}

.bg-gonadal{
  background-color:#B3E5FC;
}
label.bg-gonadal:hover{
  background-color:#81D4FA;
}
.fg-gonadal {
  background-color:#4FC3F7;
}
.fg-gonadal.active, .fg-gonadal.collapsible:hover {
  background-color: #29B6F6;
}

.bg-melanoma{
  background-color:#D7CCC8;
}
label.bg-melanoma:hover{
  background-color:#BCAAA4;
}
.fg-melanoma {
  background-color:#A1887F;
}
.fg-melanoma.active, .fg-melanoma.collapsible:hover {
  background-color: #8D6E63;
}

.bg-neuro{
  background-color:#FFE0B2;
}
label.bg-neuro:hover{
  background-color:#FFCC80;
}
.fg-neuro {
  background-color:#FFB74D;
}
.fg-neuro.active, .fg-neuro.collapsible:hover {
  background-color: #FFA726;
}

.bg-heme{
  background-color:#D1C4E9;
}
label.bg-heme:hover{
  background-color:#B39DDB;
  color:#000;
}
.fg-heme {
  background-color:#9575CD;
  color:#ffffff;
}
.fg-heme.active, .fg-heme.collapsible:hover {
  background-color: #7E57C2;
  color:#ffffff;
}

.bg-normal{
  background-color:#F5F5F5;
}
label.bg-normal:hover{
  background-color:#EEEEEE;
}
.fg-normal {
  background-color:#E0E0E0;
}
.fg-normal.active, .fg-normal.collapsible:hover {
  background-color: #BDBDBD;
}

.card-header { cursor: pointer; }

#id_ihcpos { height: 600px; }
#id_ihcneg { height: 600px; }



/*.btn{
  padding-top:.1rem;
  padding-right:.1rem;
  padding-bottom:.1rem;
  padding-left:.1rem;
}*/

/*.form-check-label {
  border-radius: .25rem;

}*/

/* Hide the browser's default checkbox */
/*input.form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}*/

/* Create a custom checkbox */
/*.checkmark {
  position: absolute;
  top: 0;
  left: -10px;
  height: 25px;
  width: 25px;
  background-color: #DCDCDC;
}*/

/* On mouse-over, add a grey background color */
/*.checkmark:hover {
  background-color: #ccc;
}*/

/* When the checkbox is checked, add a blue background */
/*input:checked ~ .checkmark {
  background-color: #2196F3;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}*/

/* Show the checkmark when checked */
/*input:checked ~ .checkmark:after {
    display: block;
}*/

/* Style the checkmark/indicator */
/*.checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/

/*#myInput{*/
  /*background-image:url(../img/searchicon.png);*/
  /*background-size:25px 25px;*/
  /*background-position:10px 12px;*/
  /*background-repeat:no-repeat;*/
  /*width:100%;*/
  /*font-size:16px;*/
  /*padding:12px 20px 12px 40px;*/
  /*border:1px solid #ddd;*/
  /*margin-bottom:12px*/
/*}*/


/*Styling the collapsibles within the cards on combined-dx page*/
/*.collapsible {*/
  /*background-color: #777;*/
  /*color: white;*/
  /*cursor: pointer;*/
  /*padding: 18px;*/
  /*width: 100%;*/
  /*border: none;*/
  /*text-align: left;*/
  /*font-size: 15px;*/
  /*outline: none !important;*/
  /*box-shadow: none;*/
  /*border-radius: .25rem;*/
  /*margin-bottom: .2rem;*/
/*}*/

/*Down arrow to indicated drop down menu*/
/*.collapsible:before {*/
  /*content: '\25BC';*/
  /*color: white;*/
  /*font-weight: bold;*/
  /*float: left;*/
  /*margin-right: 5px;*/
  /*font-size: 12px;*/
  /*font-size: inherit;*/
/*}*/

/*Up arrow to indicate drop down menu that's been expanded*/
/*.active:before {
  content: "\25B2";
}*/

/*.top-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.form-group {
  list-style: none;
}*/

/*.broad-morph-columns {
  column-gap: 0rem;
}

.sub-item {
  padding-left: 2.5rem;
}*/