:root {
  --color-green: #7A8B59;
  --color-green-hover: #56623F;
  --color-orange: #D08B38;
  --color-orange-hover: #A7702D;
  --color-teal: #447876;
  --color-teal-hover: #2C4D4C;
  --color-yellow: #D4AF37;
  --color-yellow-hover: #9C842D;
  --color-maroon: #a05250;
  --color-maroon-hover: #763D3B;
  --color-purple: #6b5b95;
  --color-purple-hover: #574b77;
  --color-magenta: #AA3A72;
  --color-magenta-hover: #883356;
  --color-blue: #061C60;
  --color-blue-hover: #04123c;
  --color-sideline-border: #ddd;
  --color-sideline-bg: #fafafa;
}

.text-M-700 {font-family: 'Arial', sans-serif; font-weight: 700}
.text-M-800 {font-family: 'Arial', sans-serif; font-weight: 800}

.h1-adjusted {font-size: 2em}
.ul-right {text-align: right; direction: rtl;}

/* MAIN NAVIGATION CLASSES */
#header {}
.li-margin-left-20 {margin-left: 20px}
.mobile-icon {cursor: pointer}
.logo-placement {margin-top: -46px}
.dph-logo {width: 100%; max-width: 160px}
.close-placement {margin-top: -46px}

#mobile-menu-div {
  position: fixed; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;
  z-index: 1; padding-top: 4px; width: 100%; overflow: scroll
}
#open-header {width: 100%}
#menu {margin-top: 66px}
.cursor {cursor: pointer}
.media-nav-div {display: grid; position: relative; margin: 0 auto}
.mobile-menu {font-size: 16px; font-weight: bold; padding-left: 20px}
.mobile-menu a:link, .mobile-menu a:visited {color:#2D3F77; text-decoration: underline}

.open-fixed-menu {
  position: fixed; top: 0px; padding-top: 4px; padding-bottom: 4px;
  width: 100%; z-index: 1
}

.section-buttons {}
.resource-top-section {}
.mobile-infographic {}

/* COLORS, LINES, HYPERLINKS */
.text-black {color: #000}
.text-blue {color: #061C60}
.bg-blue {background-color: #061C60}
.bg-lblue {background-color: #2d68a8}
.bg-ablue {background-color: #4F81BD}
.bg-bblue {background-color: #31859C}
.bg-cblue {background-color: #17375E}
.bg-lgrey {background-color: #D3D3D3}
.bg-dblue {background-color: #345DA6}
.bg-eblue {background-color: #C2D1EC}
.bg-fblue {background-color: #DCE5F4}

.fillContainer .btn {
  flex: 1
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: top;
  overflow: hidden
}

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0
}

.table-responsive {
  max-width: 100%
}

.axis {
  font-size: 14px
}

.tooltip, .definition-tooltip {
  position: absolute;
  z-index: 1;
  opacity: 0;
  background: #000000c2;
  color:#fff;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
  pointer-events: none
}

.tooltip table td {
  padding: 2px 10px
}

.tooltip table td.right-aligned {
  text-align: right
}

.tooltip table td.left-aligned {
  text-align: left;
  font-weight: bold
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent
}

#rwHeadBanner {
  border-top: thick solid #FFB03B !important;
  border-bottom: thick solid #FFB03B !important
}
#acdcSchoolsHeader {
  border-top: thick solid #a1d9bc !important;
  border-bottom: thick solid #a1d9bc !important
}

.disease-head-img-overlay {
  position: absolute;
  bottom:0;
}

.disease-head-title {
  background: rgb(255 255 255 / 74%);
  font-weight: 600;
}

/* BANNER SLIDE */
.jumbotron-flu {
  background-image: url('../images/photo-flu-banner.jpg');
  background-size: cover;
  background-position: center center;
  border-radius: 0;
  height: 280px;
}

.banner-rectangle {
  height: 8px;
  width: 130px;
  background-color: #4dbcb5;
  text-align: left;
}
.banner-horiz-gradient {
  height: 24px;
  background-image: linear-gradient(to right, rgba(120,149,205,1), rgba(141,213,235,1), rgba(0,127,172,1))
}
.banner-vert-gradient {
  background-image: linear-gradient(to bottom, rgba(120,149,205,1), rgba(141,213,235,1), rgba(0,127,172,1))
}
.social-icons {
  width: 75px;
  height: 75px;
}

/* OTHER */
.center {text-align: center}
.right {text-align: right}
.justify {text-align: justify}
.center-mobile {text-align: center}

.fixed-footer {
  position: fixed;
  width: 100%;
  height: 40px;
  bottom: 0;
  z-index: 1
}

.video-100 {
  width: 100%;
  height: 130%;
  padding-bottom: 20%
}
.w-100-img {
  width: 100%;
  height: auto;
  margin-bottom: 20px
}

/* collapsed sections */
button .collapseSection::before {font-family: 'FontAwesome'; content: "\f068"}
button.collapsed .collapseSection::before {font-family: 'FontAwesome'; content: "\f067"}

/* collapsed sections ARROW */
button .collapseSection-Arrow::before {font-family: 'FontAwesome'; content: "\f062"}
button.collapsed .collapseSection-Arrow::before {font-family: 'FontAwesome'; content: "\f063"}

/* Left Side Menu */
a .collapseVaccineMenu::before {font-family: 'FontAwesome'; content: "\f068"}
a.collapsed .collapseVaccineMenu::before {font-family: 'FontAwesome'; content: "\f067"}

/* MOBILE PORTRAIT */
@media only screen and (min-width: 0px) {
  body {}

  /* MAIN NAVIGATION CLASSES */
  #desktop-menu {display: none}
  #mobile-menu-div {display: none}
  .media-nav-div {width: 88%}
}

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
  body {}

  /* MAIN NAVIGATION CLASSES */
  #desktop-menu {display: none}
  #mobile-menu-div {display: none}
  .media-nav-div {width: 88%}
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
  body {}
}

/* SMALL TABLET */
@media only screen and (min-width: 600px) {
  body {}
}

/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) {
  body {}

  .jumbotron-flu {height: 330px}
  .resource-top-section {padding-left: 5px; padding-right: 5px}
  .social-icons {width: 50px; height: 50px}
  .video-100 {width: 690px; height: 388px; padding-bottom: 0}
  .section-buttons {padding-left: 10px; padding-right: 10px}
  .mobile-infographic {display: none}
  .desktop-infographic {display: block;}
}

/* TABLET/NETBOOK */
@media only screen and (min-width: 945px) {
  body {}

  .w-100-img {margin-bottom: 0px}
  .h1-adjusted {font-size: 2.5em}
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) {
  body {}

  /* DPH MEDIA HEADER */
  .colAtoZ1, .colAtoZ2 {display: block}
  .colGrey3 {display: block}
  .colGrey4 {float: right; width: 300px; padding-top: 10px;}
  .globalNavGreyMedia a:link, .globalNavGreyMedia a:visited {font-size: 18px}

  /* DPH MEDIA FOOTER */
  .column3alt {font-size: 11px; font-family: Arial, Helvetica, sans-serif; width: 70%; margin-left: 15%; margin-right: 15%}
  .column3alt-1 {padding-left: 2%; width: 30%; display: inline-block}
  .column3alt-2 {width: 66%; display: inline-block; vertical-align: top}

  .media-nav-div {width: 1003px; float: none}
  .dph-width {width: 1003px; float: none; margin: 0 auto; padding: 0%}

  .social-icons {width: 32px; height: 32px}
}

@media only print and (min-width: 768px) {
  body {}

  #mobile-icon {display: none}
  #mobile-menu-div {display: none}
  .logo-placement {display: none}
}

/* CUSTOM CM CSS 10.23.23 */
@media only screen and (min-width: 1600px) {
  .carousel-text h2 {
    font-size: 1.7vw;
  }
  .carousel-text h1 {
    font-size: 2vw;
  }
}

@media only screen and (min-width: 1900px) {
  .carousel-text h2 {
    font-size: 2em;
  }
  .carousel-text h1 {
    font-size: 2.4em;
  }
}

@media only screen and (max-width: 768px) {
  .carousel-text h2 {
    font-size: 14px;
    display: inline-block;
    border-radius: 5px;
  }
  .carousel-text h1 {
    font-size: 18px;
    display: inline-block;
  }
  .carousel-text * {
    margin-left: 8px;
  }
  .carousel-item.active img {
    min-height: 18vw;
  }
}
li.nav-item {
  padding-bottom: 0px;
}

/*side line*/	
.side-line {
  padding: .75em;
}

.side-line .card-title {
  border-bottom: #fff 5px solid;
  padding: 0.5em;
  font-weight: bold;
}

.side-line .card {
  margin-bottom: 0.75em;
  border: 0;
  background-color: var(--color-sideline-bg);
}

.side-line > .card {
  border-radius: 5px !important;
  overflow: hidden;
  border: 1px solid var(--color-sideline-border);
}

.side-line .card-body {
  padding: 0 0.5em 0.5em 0.5em;
}

.side-line img {
  margin: .5em;
}

.card-columns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

@media (min-width: 998px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

.yellow-alert-warning {
  color: #805d11;
  background-color: #fdf0d2;
  border-color: #fce9c1;
}

.yellow-alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

/* Education Toolkit Table Styling */
.outbreak-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.outbreak-table thead tr,
.outbreak-table thead tr th {
  background-color: #397CC9;
  color: #ffffff;
  text-align: center;
  font-size: 1rem;
}
.outbreak-table th,
.outbreak-table td {
  padding: 0.5rem;
  text-align: left;
  border: 1px solid #48525b;
}
.outbreak-table p {
  font-weight: 400;
  margin-bottom: 0.2rem;
}
.table-responsive table td, .table-responsive th {
  max-width: 50%;
}
.table-responsive {
  max-width: 100%;
}
.sympt-col-1 {
  font-size: 1rem;
  background-color: #E0EEFF;
  font-weight: 600;
}
.stay-home {
  color: #E67936;
  font-weight: 600;
}
.return-when {
  color: #03924D;
  font-weight: 600;
}
.ok-to-attend {
  color: #0097B2;
  font-weight: 600;
}
.seek-attention {
  color: #B22020;
  font-weight: 600;
}
strong {
  font-weight: 700;
}

/* Misc Accordion Styling */
.accordion > .card {
  border:none;
}
.accordion > .card > :is(h1, h2, h3, h4, h5, h6) .card-header:not(.collapsed),
.accordion > .card > .card-header:not(.collapsed),
.accordion > .card > :is(h1, h2, h3, h4, h5, h6) .card-header:hover,
.accordion > .card > .card-header:hover {
  background: #f7f7f7;
}

/* RespWatch */
#RespWatchNav .soc-media-icons i {
  border-radius: 50%;
}
#RespWatchNav .report-link {
  color: #061C60;
  text-decoration: none;
}

#RespWatchNav .navbar-nav {
  display: flex;
  justify-content: space-around !important;
  flex-basis: 0 !important;
  flex-grow: 1 !important;
  width: 100% !important;
  margin-left: 0em;
}

.reportbtn {
  border-radius: 5px;
  background: rgb(255, 176, 59);
}
#RespWatchNav .report-link:hover, .reportbtn:hover {
  background: #061C60;
  color: #fff;
}

.reportbtn >a{
  color:#061c60;
}
.reportbtn > a:hover{
  color:#fff;
}

#secondRespWatchNav > ul > li {
  padding: 0 1em;
}
#secondRespWatchNav > ul > li > a {
  color: #061C60;
  text-decoration: none;
}
#secondRespWatchNav > ul > li > a:hover {
  text-decoration: underline;
}
.respwatch-pbi-holder {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

iframe.respwatch-pbi {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.ed-container img {
  width: 100%;
  display: block; /* Ensures that the images do not have extra spacing */
}

.ed-clear {
  clear: both;
}

@media (min-width: 600px) {
  /* Adjust styles for larger screens (you can customize the breakpoint) */
  .ed-container img {
    float: left;
    width: 50%;
  }
}

@media (max-width: 1200px) {
  #RespWatchNav .report-link {
    font-size: 0.8rem;
  }
}
@media (max-width: 1000px) {
  #RespWatchNav > ul > li, #RespWatchNav > ul > li > a {
    font-size: 1rem;
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid #000;
    color: #000;
  }
}
@media (max-width: 600px) {
  .container {
    padding: 2%;
  }
  #acdcSchoolsHeader, #acdcDiseaseHeader {}
  #acdcSchoolImage, #acdcDiseaseImage {
    margin: 1em auto;
  }
  #acdcSchoolImage > svg, #acdcDiseaseImage > svg {
    max-height: 100px;
  }
  #acdcSchoolImage, #acdcDiseaseImage {
    display: none;
  }
}

/* ACD Schools & Diseases left nav */
ul.tnt-leftnav, p.tnt-leftnav {
  list-style: none;
  padding: 0;
}

ul.tnt-leftnav > li {
  border-top: 1px solid rgba(0,0,0,.125);
  text-decoration: none;
  padding: 0.5rem;
}

ul.tnt-leftnav > li:hover {
  background-color: #d9e5f0;
  color: #000;
}

ul.tnt-leftnav .bg-mp-blue:not(.btn,.badge,:hover) {
  background-color: #061c60;
  color: #fff;
  text-decoration: none;
}

ul.tnt-leftnav .bg-mp-blue:hover {
  background-color: #40586B;
  color: #fff !important;
}

ul.tnt-leftnav a:not(.btn,.badge,:hover) {
  color: #000;
  display: block;
}

ul.tnt-leftnav .bg-mp-blue a { color: #fff; }

ul.tnt-leftnav a { text-decoration: none !important; }
ul.tnt-leftnav a:hover { color: #000; }
.nav-list-group li {
  padding: .139rem;
}

.nav-list-group li a {
  text-decoration: none;
  color: #075290 !important;
  line-height: 1.2em;
  margin: 0;
}

.nav-list-group li a:hover,
.nav-list-group li {
  color: #075290 !important;
  cursor: pointer;
}

.nav-list-group-item {
  border: none;
  margin: auto .45em;
  padding: .45rem;
  border-top: 1px solid rgba(0, 0, 0, .125);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
  line-height: 1.15em;
}

.nav-list-group-item:hover {
  background-color: #fcfcfc;
}

.nav-list-group > li .list-group {
  margin-top: .45em;
  margin-left: .8em;
}

.nav-list-group > li .list-group li:last-child {
  border-bottom: none;
}
.bg-nav {
  background-color: #397CC9;
}

/* COVID COMMUNITY PAGE */
#CovidCommunityBanner {
  width: 100%; 
  height: auto; 
  background-color: #A6B727;
  border: 1px solid #A6B727;
}

.community-summary-image {
  width: 110px;
  margin-top: 50%;
}

#CommunityIntro {
  border: 1px solid rgb(184 92 39);
  font-style: italic;
  text-align: justify;
  background: rgb(184 92 39 / 5%);
}
#CommunityIntro p {
  color: #603014;
}

.community-section-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: #A7B827;
  color: white;
  text-transform: uppercase;
}

.community-summary-header {
  color: #212529;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.community-summary-header a {
  text-decoration: none;
  color: #17a2b8;
}
.community-summary-header a:hover {
  color: ##0f6674;
  text-decoration: underline;
}

/* circle bullets added to core.css/bullets.css */
.cm-number-circle-list {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 60px;
}

.cm-number-circle-list li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}

.cm-number-circle-list li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  position: absolute;
  --size: 24px;
  left: calc(-1 * var(--size) - 10px);
  left: -34px;
  line-height: var(--size);
  line-height: 24px;
  width: var(--size);
  width: 24px;
  height: var(--size);
  height: 24px;
  top: 2px;
  border-radius: 50%;
  text-align: center;
}

.cm-number-circle-list.fill-chartreuse li::before {
  background-color: #A6B727;
}
.cm-number-circle-list.fill-purple li::before {
  background-color: #692099;
}

.cm-number-circle-list.fill-green li::before {
  background-color: #059905;
}
.cm-number-circle-list.fill-orange li::before {
  background-color: #D66B2D;
}

.community-nested-list {
  display: list-item;
  list-style: square;
}

.community-list {
  margin-left: 30px;
}

.btn-covidcommunity {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.btn-covidcommunity:hover {
  background-color: grey;
  border-color: lightgray;
  color: white;
}

/* Community Mobile */
#CovidCommunityBanner h1 {}

@media (min-width: 1200px) {
  #CovidCommunityBanner h1 {font-size: 45px !important;}
  #CovidCommunityBanner h4 {font-size: 30px !important;}
}
@media (max-width: 600px) { 
  #CovidCommunityBanner h1 {font-size: 5vw;}
  #CovidCommunityBanner h4 {font-size: 3.7vw;}
  .community-summary-image {
    display: none;
  }
}

/* ACD Disease Pages */
.btn-outline-diseases-otp {
  color: rgb(6,28,96);
  border-color: rgba(6,28,96, .1);
}
.btn-outline-diseases-otp:hover {
  color: #fff;
  background-color: rgb(6,28,96);
  border-color: rgb(6,28,96);
}

.bg-diseases-otp {
  background-color: #FFB03B;
}

/* ACD Main Page */
#ACD-page-nav .navbar-nav {
  display: flex;
  justify-content: space-around !important;
  flex-basis: 0 !important;
  flex-grow: 1 !important;
  width: 100% !important;
  margin-left: 0em;
}

#ACD-page-nav .acdpagebtn {
  background: rgb(0, 96, 114);
  border-radius: 0px;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  box-shadow: 2px 2px rgb(6, 31, 92);
}

#ACD-page-nav .acdpagebtn:hover {
  background: rgb(184, 87, 99);
  color: #fff;
}

@media (min-width: 600px) {
  @media (max-width: 1200px) {
    #ACD-page-nav.acdpagebtn {
      font-size: 0.8rem;
    }
  }
  @media (max-width: 1000px) {
    #ACD-page-nav > ul > li, #ACD-page-nav > ul > li > a {
      font-size: 1rem;
      width: 100%;
      border-radius: 0;
      border-bottom: 1px solid #000;
      color: #000;
    }
  }
}
.acdmainbutton {
  border: 1px solid #061C60;
  border-radius: 5px;
  background: #061C60;
  min-height: 5rem;
  margin: 1rem;
}

.acdmainbutton:hover {
  background: #A6B727;
}
.acdmainbuttonlink:hover {
  text-decoration: none;
}
.acdmainbutton-img, .acdmainbutton-text {
  margin: auto;
  color: white;
  padding: 5px 10px;
}
/* custom color text and background */

/* Background Colors */
.bg-green {
    background-color: var(--color-green);
}

.bg-maroon {
    background-color: var(--color-maroon);
}

.bg-magenta {
    background-color: var(--color-magenta);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-purple {
    background-color: var(--color-purple);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.bg-teal {
    background-color: var(--color-teal);
}

/* Text Colors */
.text-green {
    color: var(--color-green);
}

.text-maroon {
    color: var(--color-maroon);
}

.text-magenta {
    color: var(--color-magenta);
}

.text-blue {
    color: var(--color-blue);
}

.text-purple {
    color: var(--color-purple);
}

.text-orange {
    color: var(--color-orange);
}

.text-yellow {
    color: var(--color-yellow);
}

.text-teal {
    color: var(--color-teal);
}

/* General button styles */

/* Yellow button */
.btn-yellow {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
}
.btn.btn-yellow:hover {
  color: #fff;
  background-color: var(--color-yellow-hover);
  border-color: var(--color-yellow-hover);
}
.btn-yellow:focus, .btn.active.btn-yellow:hover {
  box-shadow: 0 0 0 0.2rem rgb(246 178 32 / 50%);
  color: var(--color-yellow-hover);
}
.btn.active.btn-yellow {
  background-color: #fff;
  color: var(--color-yellow);
  border-color: var(--color-yellow);
  border-width: 2px;
  font-weight: bold;
}

/* Teal button */
.btn-teal {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}
.btn.btn-teal:hover {
  color: #fff;
  background-color: var(--color-teal-hover);
  border-color: var(--color-teal-hover);
}
.btn-teal:focus, .btn.active.btn-teal:hover {
  box-shadow: 0 0 0 0.2rem rgba(58,176,195,.5);
  color: var(--color-teal-hover);
}
.btn.active.btn-teal {
  background-color: #fff;
  color: var(--color-teal);
  border-color: var(--color-teal);
  border-width: 2px;
  font-weight: bold;
}

/* Green button */
.btn-green {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.btn.btn-green:hover {
  color: #fff;
  background-color: var(--color-green-hover);
  border-color: var(--color-green-hover);
}
.btn-green:focus, .btn.active.btn-green:hover {
  box-shadow: 0 0 0 0.2rem rgba(34,139,34,.5);
  color: var(--color-green-hover);
}
.btn.active.btn-green {
  background-color: #fff;
  color: var(--color-green);
  border-color: var(--color-green);
  border-width: 2px;
  font-weight: bold;
}

/* Maroon button */
.btn-maroon, .nav-link.btn-maroon {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-maroon);
  border-color: var(--color-maroon);
}
.btn.btn-maroon:hover {
  color: #fff;
  background-color: var(--color-maroon-hover);
  border-color: var(--color-maroon-hover);
}
.btn-maroon:focus, .btn.active.btn-maroon:hover {
  box-shadow: 0 0 0 0.2rem rgba(148,41,42,.5);
  color: var(--color-maroon-hover);
}
.btn.active.btn-maroon {
  background-color: #fff;
  color: var(--color-maroon);
  border-color: var(--color-maroon);
  border-width: 2px;
  font-weight: bold;
}

/* Orange button */
.btn-orange {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
.btn.btn-orange:hover {
  color: #fff;
  background-color: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
}
.btn-orange:focus, .btn.active.btn-orange:hover {
  box-shadow: 0 0 0 0.2rem rgba(58,176,195,.5);
  color: var(--color-orange-hover);
}
.btn.active.btn-orange {
  background-color: #fff;
  color: var(--color-orange);
  border-color: var(--color-orange);
  border-width: 2px;
  font-weight: bold;
}

/* Purple button */
.btn-purple, .nav-link.btn-purple {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-purple);
  border-color: var(--color-purple);
}
.btn.btn-purple:hover {
  color: #fff;
  background-color: var(--color-purple-hover);
  border-color: var(--color-purple-hover);
}
.btn-purple:focus, .btn.active.btn-purple:hover {
  box-shadow: 0 0 0 0.2rem rgba(107, 91, 149, .5);
  color: var(--color-purple-hover);
}
.btn.active.btn-purple {
  background-color: #fff;
  color: var(--color-purple);
  border-color: var(--color-purple);
  border-width: 2px;
  font-weight: bold;
}

/* Magenta button */
.btn-magenta {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-magenta);
  border-color: var(--color-magenta);
}
.btn.btn-magenta:hover {
  color: #fff;
  background-color: var(--color-magenta-hover);
  border-color: var(--color-magenta-hover);
}
.btn-magenta:focus, .btn.active.btn-magenta:hover {
  box-shadow: 0 0 0 0.2rem rgba(136, 51, 86, .5);
  color: var(--color-magenta-hover);
}
.btn.active.btn-magenta {
  background-color: #fff;
  color: var(--color-magenta);
  border-color: var(--color-magenta);
  border-width: 2px;
  font-weight: bold;
}

/* Blue button */
.btn-blue {
  color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn.btn-blue:hover {
  color: #fff;
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
}
.btn-blue:focus, .btn.active.btn-blue:hover {
  box-shadow: 0 0 0 0.2rem rgba(6, 28, 96, .5);
  color: var(--color-blue-hover);
}
.btn.active.btn-blue {
  background-color: #fff;
  color: var(--color-blue);
  border-color: var(--color-blue);
  border-width: 2px;
  font-weight: bold;
}

/* Blue Outline Button */
.btn-blue-outline {
    color: var(--color-blue);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-blue);
    font-weight: bold;
}

.btn-blue-outline:hover {
    color: #fff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-blue-outline:focus,
.btn.active.btn-blue-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, .5);
    color: #fff;
    background-color: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
}

.btn.active.btn-blue-outline {
    background-color: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}

/* Yellow Outline Button */
.btn-yellow-outline {
    color: var(--color-yellow);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-yellow);
    font-weight: bold;
}

.btn-yellow-outline:hover {
    color: #fff;
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

.btn-yellow-outline:focus,
.btn.active.btn-yellow-outline:hover {
    box-shadow: 0 0 0 0.2rem rgb(246, 178, 32, 0.5);
    color: #fff;
    background-color: var(--color-yellow-hover);
    border-color: var(--color-yellow-hover);
}

.btn.active.btn-yellow-outline {
    background-color: var(--color-yellow);
    color: #fff;
    border-color: var(--color-yellow);
}

/* Teal Outline Button */
.btn-teal-outline {
    color: var(--color-teal);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-teal);
    font-weight: bold;
}

.btn-teal-outline:hover {
    color: #fff;
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}

.btn-teal-outline:focus,
.btn.active.btn-teal-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
    color: #fff;
    background-color: var(--color-teal-hover);
    border-color: var(--color-teal-hover);
}

.btn.active.btn-teal-outline {
    background-color: var(--color-teal);
    color: #fff;
    border-color: var(--color-teal);
}

/* Green Outline Button */
.btn-green-outline {
    color: var(--color-green);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-green);
    font-weight: bold;
}

.btn-green-outline:hover {
    color: #fff;
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.btn-green-outline:focus,
.btn.active.btn-green-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(34, 139, 34, 0.5);
    color: #fff;
    background-color: var(--color-green-hover);
    border-color: var(--color-green-hover);
}

.btn.active.btn-green-outline {
    background-color: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}

/* Maroon Outline Button */
.btn-maroon-outline {
    color: var(--color-maroon);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-maroon);
    font-weight: bold;
}

.btn-maroon-outline:hover {
    color: #fff;
    background-color: var(--color-maroon);
    border-color: var(--color-maroon);
}

.btn-maroon-outline:focus,
.btn.active.btn-maroon-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(148, 41, 42, 0.5);
    color: #fff;
    background-color: var(--color-maroon-hover);
    border-color: var(--color-maroon-hover);
}

.btn.active.btn-maroon-outline {
    background-color: var(--color-maroon);
    color: #fff;
    border-color: var(--color-maroon);
}

/* Orange Outline Button */
.btn-orange-outline {
    color: var(--color-orange);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-orange);
    font-weight: bold;
}

.btn-orange-outline:hover {
    color: #fff;
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-orange-outline:focus,
.btn.active.btn-orange-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
    color: #fff;
    background-color: var(--color-orange-hover);
    border-color: var(--color-orange-hover);
}

.btn.active.btn-orange-outline {
    background-color: var(--color-orange);
    color: #fff;
    border-color: var(--color-orange);
}

/* Purple Outline Button */
.btn-purple-outline {
    color: var(--color-purple);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-purple);
    font-weight: bold;
}

.btn-purple-outline:hover {
    color: #fff;
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}

.btn-purple-outline:focus,
.btn.active.btn-purple-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(107, 91, 149, 0.5);
    color: #fff;
    background-color: var(--color-purple-hover);
    border-color: var(--color-purple-hover);
}

.btn.active.btn-purple-outline {
    background-color: var(--color-purple);
    color: #fff;
    border-color: var(--color-purple);
}

/* Magenta Outline Button */
.btn-magenta-outline {
    color: var(--color-magenta);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-magenta);
    font-weight: bold;
}

.btn-magenta-outline:hover {
    color: #fff;
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
}

.btn-magenta-outline:focus,
.btn.active.btn-magenta-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(136, 51, 86, 0.5);
    color: #fff;
    background-color: var(--color-magenta-hover);
    border-color: var(--color-magenta-hover);
}

.btn.active.btn-magenta-outline {
    background-color: var(--color-magenta);
    color: #fff;
    border-color: var(--color-magenta);
}

/* Blue Outline Button */
.btn-blue-outline {
    color: var(--color-blue);
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    border-color: var(--color-blue);
    font-weight: bold;
}

.btn-blue-outline:hover {
    color: #fff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-blue-outline:focus,
.btn.active.btn-blue-outline:hover {
    box-shadow: 0 0 0 0.2rem rgba(6, 28, 96, 0.5);
    color: #fff;
    background-color: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
}

.btn.active.btn-blue-outline {
    background-color: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}


/* Sideline */
#signage-cards a:after,
#resources a:after {
  background: none;
  padding: unset;
  margin-left: unset;
}
.sign-side-line {
  padding: .75em;
}

.sign-side-line .card {
  padding-bottom: 1em;
  border: 0;
  background-color: var(--color-sideline-bg);
}

.sign-side-line > .card {
  border-radius: 5px !important;
  overflow: hidden;
  border: 1px solid var(--color-sideline-border);
}

.sign-side-line .col-teal {
  border-left: var(--color-teal) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-yellow {
  border-left: var(--color-yellow) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-green {
  border-left: var(--color-green) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-maroon {
  border-left: var(--color-maroon) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-magenta {
  border-left: var(--color-magenta) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-blue {
  border-left: var(--color-blue) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-purple {
  border-left: var(--color-purple) 8px solid;
  border-radius: 0;
}
.sign-side-line .col-orange {
  border-left: var(--color-orange) 8px solid;
  border-radius: 0;
}

.sign-side-line .card-body {
  padding: 0 0.7em 1.25em 0.7em;
  border-bottom: #fff 5px solid;
  font-size: 0.8em;
}

.sign-side-line img {
  margin: .5em;
}

.card-columns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

@media (min-width: 998px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

.sign-card-title {
  padding: 0.5em 0.5em 0 0.5em;
  font-weight: bold;
  margin-bottom: 0;
  border-bottom: none;
}
/* Custom navigation panel per ACDC Schools page */
.nav-panel .nav-link.nav-link-custom:hover {
  background-color: #efefef;
  /* Slightly darker background on hover for all links */
}

.subtle-card {
  border: none;
}

.subtle-header {
  border-bottom: 4px solid var(--color-yellow);
  padding: 1rem;
}

.subtle-tab-container {
  background-color: #f0f0f0;
  padding: 1rem 1rem 0;
}

.subtle-tabs {
  border-bottom: none;
}

.subtle-tab-link,
.nav-link-custom {
  color: #003366;
  font-weight: 600;
  border: none;
  border-radius: 4px 4px 0 0;
  padding: 0.75rem 1.1rem;
  transition: background-color 0.3s ease;
}

.subtle-tab-link:hover,
.subtle-tab-link:focus {
  background-color: #e0e0e0;
  color: #003366;
}

.subtle-tab-link.active {
  background-color: #ffffff;
  color: #003366;
  border-bottom: 3px solid #003366;
}

.subtle-tab-content {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-top: none;
  padding: 1.5rem;
}

/* ACD Header 2024 */
.dropdown-item {
  font-size: 0.9rem;
}

/*section > .card, section > .row {
  margin-top: 1em;
}*/
h1.card-header, h5.card-header, h6.card-header, .accordion .card-header button {
  font-weight: 650;
}

@media screen and (max-width: 400px) {
  h1 {
    font-size: 8.5vw;
  }
  #dph-logo {
    text-align: center;
  }
  #nav-row-2 > div, #nav-row-1 > div {
    width: 100%;
    text-align: center;
  }
  .spacer-nr-1 {
    display: none;
  }
  .container {
    padding: 0;
  }
  .colTranslate, .colTranslate * {
    float: none;
  }
  #google_translate_wrapper {
    text-align: center;
  }
  #nav-row-1 * , #nav-row-2 * {
    margin-left: auto;
    margin-right: auto;
  }
  footer {
    padding: 1em !important;
  }
  #google_translate_wrapper {
    width: 94px;
  }
}

:root {
  --bs-primary: #061C60;
  --bs-link-color: #397CC9;
  --bs-link-color-rgb: 57,123,201;
  --bs-primary-rgb: 6,28,96;
}

.list-group {
  --bs-list-group-active-bg: #D4AF37;
  --bs-list-group-active-border-color: #D4AF37;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #397CC9;
}

/* KM 03/08/2024 */
.reporting-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.reporting-table thead tr,
.reporting-table thead tr th {
  background-color: #397CC9;
  color: #ffffff;
  text-align: center;
  font-size: 1.3rem;
}
.reporting-table th {
  padding: 0.5rem;
  text-align: left;
  border: 1px solid #48525b;
}
.reporting-table td {
  padding: 0.5rem;
  border: 1px solid #48525b;
}
.bodycell {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid #48525b;
}
.reporting-table p {
  font-weight: 400;
  margin-bottom: 0.2rem;
}
.table-responsive table td, .table-responsive th {
  max-width: 50%;
}
.table-responsive {
  max-width: 100%;
}
.reporting-col-1 {
  font-size: 1.4rem; /* Adjusted font size */
  background-color: #E0EEFF;
  font-weight: 600;
  text-align: center;
  line-height: 1.4rem;
}
.reporting-col-header {
  font-size: 1.5rem; /* Adjusted font size */
  background-color: #397CC9;
  font-weight: 600;
  text-align: center;
}
strong {
  font-weight: 700;
}

/** COVID MENU **/
.covid-menu {
  font-size:0.8rem;
  color: var(--bs-primary);
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease-in;

}

/* Hover effect changes text color */
.covid-menu:hover {
  color: var(--color-blue-hover);
  font-weight:400;
  border-bottom: 2px solid var(--bs-primary);
  transition: border-bottom 0.3s ease;
}
/* Custom header styling for Epidemiology section */
.epidemiology-header {
  font-weight: 700;
  color: #333333;
  border-bottom: 2px solid var(--color-yellow);
  padding-bottom: 5px;
}

.epidemiology-subheader {
  color: var(--color-blue);
  border-right: 4px solid var(--color-blue);

}
/*custom style for Hepatitis page */
.hep-cover-image, .cot-cover-image {
  max-height:275px;
  object-fit: cover;
}

ul.fact-list {
  list-style: none;
  padding-left: 0;
}

ul.fact-list li {
  margin-bottom: 15px;
  padding-left: 35px;
  position: relative;
  font-size: 1.1rem;
}

ul.fact-list li:before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-yellow);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
}

ul.vhp-list {
  list-style: none;
  padding-left: 0;
}
ul.vhp-list li {
  margin-bottom: 15px;
  padding-left: 35px;
  position: relative;
  font-size: 1.1rem;
}

ul.vhp-list li:before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-green);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
}
/* Left Navigation Styling within #acd-leftnav */
#acd-leftnav .list-group-item {
  font-size: 0.8rem; /* Small font for navigation items */
  border-left: 4px solid var(--color-orange)
}

/* Styling for links inside list items */
#acd-leftnav .link-secondary {
  color: #333; /* Default link color */
  text-decoration: none; /* Remove underline */
}

#acd-leftnav .link-secondary:hover {
  color: #333; 
  font-weight:500;
}

/* Unordered list within list-group-item */
#acd-leftnav ul.list-unstyled {
  padding-left: 1rem; /* Indentation for nested list items */
}
#acd-leftnav ul.list-unstyled a {

}

.b73sectionhead {
  text-transform:uppercase;
}

.b73pageNav {
  font-size: 0.8rem;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* H5N1 Toolkit Badges */
/* Subtle outlined-style badge using custom colors */
.badge-custom {
  border: 1px solid;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.4em 0.65em;
  border-radius: var(--bs-border-radius-pill)
}

/* Tag colors */
.badge-pet {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.badge-public {
  border-color: var(--color-maroon);
  color: var(--color-maroon);
}

.badge-food {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.badge-worker {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.badge-wild {
  border-color: var(--color-green);
  color: var(--color-green);
}

.badge-flock {
  border-color: var(--color-purple);
  color: var(--color-purple);
}

/* H5 Bird Flu and HPAI Recalls */
    button.recall-button {
        background-color: var(--bs-card-cap-bg);
        font-size: 1.2rem;
        font-weight: bold;
        padding: 12px;
        border-radius: 5px;
        transition: background-color 0.3s ease-in-out;
        width: 100%;
        color: var(--bs-primary);
        border: 1px solid var(--bs-card-cap-bg);
    }


    button.recall-button:after {
        font-family: 'FontAwesome';
        content: "\f068";
        /* Minus icon */
        color: var(--bs-primary);
        float: right;
        transition: all .75s ease-in-out;
    }

    button.recall-button.collapsed:after {
        content: "\f067";
        /* Plus icon */
        transition: all .75s ease-in-out;

    }