:root {
    --tobacco: #4e79a7;
    --smoking: #f28e2c;
    --vaping: #e15759;
    --legend-text: 15px;
  }
  
  select {
      text-overflow: ellipsis;
  }
  
  .bar-label {
    /* display: none !important; */
    /* font-size: 13px; */
  }
  /* .bar-label[data-raw-value="#"] {
    display: block !important;
  } */
  
  /* .c0 .tick text {
      transform: translate(-16px, 10px) rotate(-45deg);
  } */

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

.checkbox-container {
    display: flex;
    align-items: center;
}

.checkbox-container {
    margin: auto;
    margin-bottom: 5px;
}
.checkbox-container input[type="checkbox"] {
    margin-right: 8px;
    accent-color: #000000;
}

input[type=checkbox] {
    margin: 4px 6px 0 0 !important;
}
.checkbox-container label {
    font-size: 16px;
    /*line-height: 5px;*/
    line-height: 1.0;
    margin-bottom: 0 !important;
    /* margin-left: 8px; */
    /* margin-top: 5px; */
    font-weight: 200;
}

.label-text, label {
    margin-left: 2px;
    margin-top: 5px;
    /* line-height: 1.1em; */
}

  .table-responsive {
      padding-right: 2px;
  }
  .caption {
      color: #333;
      font-size: 1.1em;
      font-weight: 700;
  }
  
  .legend-title {
      font-weight: 700;
      font-size: 15px !important;
  }
  
  #figLegend {
      margin: 0 0px 0 90px;
  }
  
  .form-group-sm {
      margin: 10px 0px;
  }
  
  #figTitle {
      margin: 0 0px 0 100px;
      text-align: center;
      text-wrap: balance;
  }
  
  .c-axis-title, .n-axis-title {
    font-size: 18px;
  }

  #figWrapper figcaption {
    margin: 15px 0px 0 10rem;
    text-align: center;
    text-wrap: balance;
  }
  
  /* .tick line {
      stroke: #ccc;
  } */
  
  /* path.domain {
      display: none;
  } */
  
  /* table.dataTable thead .sorting_asc {
      background-image: url(/src/img/sorting-icons/sort_asc.png)!important;
      padding-right: 15px;
  }
  table.dataTable thead .sorting_desc {
      background-image: url(/src/img/sorting-icons/sort_desc.png)!important;
      padding-right: 15px;
  }
  table.dataTable thead .sorting {
      background-image: url(/src/img/sorting-icons/sorting_both.png)!important;
      padding-right: 15px;
  } */
  table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: center right;
  }
  /*boxes*/
  .boxes {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      padding: 3px;
      height: 10%;
      /* align-items: center;*/
      justify-content: center;
  }
  
  .innerBox {
      flex: 0 0 32%;
      border-radius: 10px;
      margin: 5px;
      padding: 5px 0 0 0;
      text-decoration: none;
      color: black;
      margin-bottom: 5px;
      justify-content: center;
      border-style: solid;
      border-width: 2px;
      border-color: #ccc;
      min-height: 220px;
  }
  .innerBox2 {
    flex: 0 0 32%;
    border-radius: 10px;
    margin: 5px;
    padding: 5px 0 0 0;
    text-decoration: none;
    color: black;
    margin-bottom: 5px;
    justify-content: center;
    border-style: solid;
    border-width: 2px;
    border-color: #ccc;
}

.boxHeader {
    flex: 0 0 98%;
    margin: 5px;
    margin: 10px 5px 10px;
    color: black;
    text-wrap: balance;
}
  #box1 {
      border-color: #4e79a7;
  }
  
  #box2 {
      border-color: #f28e2c;
  }
  
  #box3 {
      border-color: #e15759;
  }
  
  #box4 {
      border-color: #76b7b2;
  }
  #box5 {
      border-color: #37A86F;
  }
  #box6 {
      border-color: #edc949;
  }
  
  .trends-box {
      display: none;
  }
  
  .trends-box i {
      padding: 45px 0 28px 0;
      font-size: 60px;
  }
  
  #tobacco_img {
      margin: 0 5px 0 -5px;
      padding: 0 0 5px 0;
  }
  #smoking_img {
      margin: 0 10px 0 0;
      padding: 0 0 5px 0;
  }
  #vape_img {
      margin: 0 0px 0 -5px;
      padding: 0 0 5px 0;
  }
  
  /*individual colours*/
  /*#tobacco_use_tab.active {*/
  /*    background-color: var(--tobacco);*/
  /*    color: #fff;*/
  /*    cursor: auto;*/
  /*    text-decoration: none;*/
      /*font-weight: 700;*/
  /*}*/
  
  /*#smoking_tab.active {*/
  /*    background-color: var(--smoking);*/
  /*    color: #fff;*/
  /*    cursor: auto;*/
  /*    text-decoration: none;*/
  /*    font-weight: 700;*/
  /*}*/
  
  /*#vaping_tab.active {*/
  /*    background-color: var(--vaping);*/
  /*    color: #fff;*/
  /*    cursor: auto;*/
  /*    text-decoration: none;*/
  /*    font-weight: 700;*/
  /*}*/
  
  /*#tobacco_use_tab:not(.active) {*/
  /*    border: 2px solid var(--tobacco) !important;*/
  /*    text-decoration: none;*/
  /*}*/
  
  /*#smoking_tab:not(.active) {*/
  /*    border: 2px solid var(--smoking) !important;*/
  /*    text-decoration: none;*/
  /*}*/
  
  /*#vaping_tab:not(.active) {*/
  /*    border: 2px solid var(--vaping) !important;*/
  /*    text-decoration: none;*/
  /*}*/
  
  
  /*same colours*/
  .inline-nav-ul a {
      border: none;
      background-color: #26374A;
  }
  
  .inline-nav-ul {
      border: 2px solid #26374A;
      border-radius: 3px;
      background-color: #26374A
  }
  .inline-nav-ul .active {
      color: black;
      background-color: white;
      border-radius: 3px;
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
  }
  .inline-nav-ul a:not(.active) {
      color: white;
  }
  .list-group-item.active:hover, .list-group-item.active:focus {
      color: black;
      background-color: white;
      border-color: white;
  }
  .list-group-item.active:focus{
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: 0px;
  }
  .list-group-item:not(.active):hover, .list-group-item:not(.active):focus {
      color: white;
      /*background-color: #3d5876;*/
      /*border-color: #3d5876;*/
      background-color: #26374A;
      border-color: #26374A;
      cursor: pointer;
      text-decoration: underline;
  }
  .list-group-item:not(.active):focus {
      outline: 2px auto white;
      outline-offset: -3px;
  }
  
  
  /*new stuff*/
  .inline-nav-ul {
      font-size: 24px;
      margin: 0;
      list-style-type: none;
      padding: 0;
      display: inline-block;
  }
  
  .inline-nav-ul li {
      margin: 0;
      display: inline-block;
  }
  
  .inline-nav-ul .list-group-item {
      /*z-index: none;*/
      padding: 0 10px;
  }
  
  /* #smoking_content, #vaping_content {
      display: none;
  } */


  /* html legend */
  .html-legend {
    font-size: var(--legend-text);
    line-height: 1.65em;
    /* text-align: left !important; */
    /* margin-left: -15px; */
  }

  /* .html-legend li {
    display: block !important;
  } */

  .html-legend svg {
    width: var(--legend-text);
    height: var(--legend-text);
    transform: translate(0, -6px) !important;
  }

  .html-legend rect {
    width: var(--legend-text);
    height: var(--legend-text);
  }

  .listDiv {
    grid-template-columns: 20px auto !important;;
  }
  
  #fig-buttons {
    text-align: right;
  }

  /* hover text */
  .hover-text {
    margin-top: 150px;
  }

  @media (max-width: 991px) {
    /* .html-legend {
        text-align: center !important;
    }
    .html-legend li {
        display: inline-block !important;
    } */
    .hover-text {
        margin-top: 10px;
    }
  }
  
table.dataTable thead .sorting_asc {
    background-image: url(/src/img/sorting-icons/sort_asc.png)!important;
	padding-right: 15px;
}
table.dataTable thead .sorting_desc {
    background-image: url(/src/img/sorting-icons/sort_desc.png)!important;
	padding-right: 15px;
}
table.dataTable thead .sorting {
    background-image: url(/src/img/sorting-icons/sorting_both.png)!important;
	padding-right: 15px;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center right;
}

/*tiles*/
#tiles .wb-eqht div {
	display: inline-block;
	margin-bottom: 15px;
	padding: 20px 15px 10px 15px;
    width: 100%;
    background-color:#e1e4e7;
}
#tiles .wb-eqht a {
	text-decoration: none;
	color: black;
}
@media (min-width: 768px) {
	#tiles .wb-eqht div {
		width: 32%;
	}
}
@media (min-width: 1200px) {
	#tiles .wb-eqht div {
		width: 24%;
	}
}