@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@font-face {
  font-family: cdciconfont-tp4;
  src: url(https://www.cdc.gov/TemplatePackage/4.0/assets/fonts/cdciconfont.woff2?d73a47) format("woff2"),url(https://www.cdc.gov/TemplatePackage/4.0/assets/fonts/cdciconfont.woff?d73a47) format("woff");
  font-weight: 400;
  font-style: normal;
}

[class*=" cdc-icon-tp4-"]:before,[class^=cdc-icon-tp4-]:before {
  font-family: cdciconfont-tp4;
  width: 32px !important;
  display: block;
  text-align: center;
}

.cdc-icon-tp4-band-aid-light:before{
  content:"\f263";
}

.cdc-icon-tp4-hands-wash-light:before{
  content:"\f304";
}

.cdc-icon-tp4-window-frame-open-light:before{
  content:"\f3cd";
}

.cdc-icon-tp4-house-user-light:before{
  content:"\f31a";
}

.cdc-icon-tp4-user-nurse-light:before{
  content:"\f3b8";
}

.cdc-icon-tp4-head-side-mask-light:before{
  content:"\f309";
}

#respiratory-dashboard-module {
  padding: .5em;
  border-radius: 1em;
  border: 1px solid lightgray;
}

#respiratory-dashboard-module.loading *,
#respiratory-dashboard-module.error * {
  display: none !important;
}

#respiratory-dashboard-module .error-message {
  display: none;
}

#respiratory-dashboard-module.error .error-message {
  display: block !important;
}

#respiratory-dashboard-module .loader {
  display: none;
  text-align: center;
}

#respiratory-dashboard-module .loader::before {
  display: block !important;
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
  margin: auto;
  animation: spin 1s linear infinite;
}

#respiratory-dashboard-module.loading .loader {
  display: block !important;
}

#respiratory-dashboard-module ul {
  margin-left: 2em;
}

#respiratory-dashboard-module #guidance {
  display: none;
}

#respiratory-dashboard-module .row {
  margin-left: 0;
  margin-right: 0;
}

#respiratory-dashboard-module .color-indicator {
  display: inline-block;
  background-clip: content-box;
  vertical-align: middle;
  min-height: 30px;
  width: 30px;
  margin: 0 1em;
}

#respiratory-dashboard-module .color-indicator-label {
  display: inline-block;
  width: calc(100% - 30px - 2em);
  vertical-align: top;
}

#respiratory-dashboard-module .icon-arrow {
  width: 50px;
  height: 50px;
  display: none;
}

#respiratory-dashboard-module .icon-arrow.no-change {
  transform: rotate(90deg);
  display: inline;
}

#respiratory-dashboard-module .icon-arrow.increasing {
  transform: rotate(45deg);
  display: inline;
}

#respiratory-dashboard-module .icon-arrow.decreasing {
  transform: rotate(135deg);
  display: inline;
}


#respiratory-dashboard-module .icon-arrow.decreasing+.cdc-fa-circle-exclamation,
#respiratory-dashboard-module .icon-arrow.increasing+.cdc-fa-circle-exclamation,
#respiratory-dashboard-module .icon-arrow.no-change+.cdc-fa-circle-exclamation {
  display: none;
}

#respiratory-dashboard-module .more-info-link {
  padding: .5em;
  padding-right: 3em;
  position: relative;
  display: block;
}

#respiratory-dashboard-module .more-info-link:hover {
  text-decoration: none;
  background-color: rgb(236, 244, 245);
}

#respiratory-dashboard-module .more-info-link::after {
  content: '>';
  position: absolute;
  right: 1em;
  top: .5em;
}

#respiratory-dashboard-module .more-info-link .x32 {
  vertical-align: top;
}

#respiratory-dashboard-module .more-info-link .d-inline-block {
  vertical-align: top;
  width: calc(100% - 33px - 1rem);
}

#respiratory-dashboard-module .x32 {
  width: 32px;
  height: 32px;
}

#respiratory-dashboard-module .icon-paired-text {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 33px - 2rem);
}

#respiratory-dashboard-module #guidance.state-insufficient .hide-on-state-insufficient {
  display: none;
}

#respiratory-dashboard-module [class*="cdc-icon-"],
#respiratory-dashboard-module [class*="cdc-fa-"]{
	margin-right: .5em;
}

#respiratory-dashboard-module [class*="cdc-icon-"]::before,
#respiratory-dashboard-module [class*="cdc-fa-"]::before {
	font-size: 32px;
	color: #005eaa;
}

@media (max-width: 768px) {
  .illness-trend {
    padding: 1em 0;
    margin: 0 1em;
    border-bottom: 1px solid lightgray;
  }
}