.js-accordion {
  margin: 30px 0;
}
/* Show/Hide Control */
.js-accordion .js-accordion__panel[role="tabpanel"] .js-accordion__header {
  display: none;
}
.js-accordion .js-accordion__panel[aria-hidden="true"] {
  display: none;
}
/* Button */
.js-accordion .js-accordion__header {
  display: block;
  position: relative;
  border: none;
  width: 100%;
  text-align: left;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02rem;
  font-size: 1.2rem !important;
  line-height: 1.5rem !important;
  transition: background-color 0.3s ease-in-out;
  padding: 16px 50px 16px 20px;
  border-top: solid 1px rgba(0, 0, 0, 0.2);
}
.js-accordion .js-accordion__header i {
  transition: transform 0.4s ease-in-out 0.02s;
  position: absolute;
  right: 20px;
  top: 18px;
}
.js-accordion .js-accordion__header[aria-expanded="true"] {
  background: #00598e;
}
.js-accordion .js-accordion__header[aria-expanded="true"] i {
  transform: rotate(90deg);
}
.js-accordion .js-accordion__header[aria-expanded="false"] {
  background: #0077be;
}
.js-accordion .js-accordion__header[aria-expanded="false"] i {
  transform: none;
}
.js-accordion .js-accordion__header:first-child {
  border: none;
}
.js-accordion .js-accordion__header:hover, .js-accordion .js-accordion__header.tab-active {
  /* replaces focus */
  background: #00598e;
  text-decoration: underline;
}
.js-accordion .js-accordion__header:first-child {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
.js-accordion .js-accordion__header[aria-expanded="false"]:nth-last-child(2) {
  border-radius: 0 0 8px 8px;
  /* if last header is closed, add radius */
}
/* Panel */
.js-accordion .js-accordion__panel {
  display: block;
  overflow: hidden;
  opacity: 1;
  transition: visibility 0s ease, max-height 0.3s ease, opacity 0.3s ease;
  visibility: visible;
  transition-delay: 0s;
  margin: 0;
  padding: 35px 20px;
  border-left: solid 1px #d7d7d7;
  border-right: solid 1px #d7d7d7;
}
.js-accordion [aria-hidden=true].js-accordion__panel {
  display: block;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.3s, 0s, 0s;
  margin: 0;
  padding: 0;
}
.js-accordion .js-accordion__panel > div:nth-child(2) > *:first-child {
  margin-top: 0;
}
.js-accordion .js-accordion__panel *:last-child {
  margin-bottom: 0;
}
.js-accordion .js-accordion__panel:last-child {
  border-bottom: solid 2px #d7d7d7;
  border-radius: 0 0 8px 8px;
}
/* Grey */
.js-accordion.is-style-grey button.js-accordion__header[aria-expanded="true"] {
  background: #545454;
}
.js-accordion.is-style-grey button.js-accordion__header[aria-expanded="false"] {
  background: #696969;
}
.js-accordion.is-style-grey button.js-accordion__header:hover, .js-accordion.is-style-grey button.js-accordion__header.tab-active {
  /* replaces focus */
  background: #545454;
}
/* Light Grey */
.js-accordion.is-style-lgrey button.js-accordion__header[aria-expanded="false"] {
  background: #eee;
  color: #444;
}
.js-accordion.is-style-lgrey button.js-accordion__header:hover, .js-accordion.is-style-lgrey button.js-accordion__header.tab-active {
  /* replaces focus */
  background: #dfdfdf;
  color: #444;
}
.js-accordion.is-style-lgrey button.js-accordion__header[aria-expanded="true"] {
  background: #dfdfdf;
  color: #444;
}
.js-accordion.is-style-lgrey .js-accordion__header {
  border-top: solid 1px rgba(0, 0, 0, 0.1);
}
/* Neg */
.wp-block-nc-block-niagara-college-blocks.neg .js-accordion .js-accordion__panel {
  background: rgba(255, 255, 255, 0.05);
  border: none;
}
/* Pos */
.wp-block-nc-block-niagara-college-blocks.lgrey .js-accordion .js-accordion__panel, .wp-block-nc-block-niagara-college-blocks.lblue .js-accordion .js-accordion__panel {
  background: #fff;
}
.lorem .neg.blue .js-accordion .js-accordion__header, .editor-styles-wrapper .neg.blue .js-accordion .js-accordion__header {
  background: #00598e;
}
.lorem .neg.blue .js-accordion .js-accordion__header:hover, .editor-styles-wrapper .neg.blue .js-accordion .js-accordion__header:hover, .lorem .neg.blue .js-accordion .js-accordion__header.tab-active, .editor-styles-wrapper .neg.blue .js-accordion .js-accordion__header.tab-active {
  background: #00456e;
  /* Accordion - Grey */
}
.lorem .neg.blue .is-style-grey.js-accordion .js-accordion__header, .editor-styles-wrapper .neg.blue .is-style-grey.js-accordion .js-accordion__header {
  background: #7f7f7f;
}
.lorem .neg.blue .is-style-grey.js-accordion .js-accordion__header:hover, .editor-styles-wrapper .neg.blue .is-style-grey.js-accordion .js-accordion__header:hover, .lorem .neg.blue .is-style-grey.js-accordion .js-accordion__header.tab-active, .editor-styles-wrapper .neg.blue .is-style-grey.js-
 .js-accordion__header.tab-active {
  background: #545454;
}
.lorem .neg.grey .is-style-grey.js-accordion .js-accordion__header, .editor-styles-wrapper .neg.grey .is-style-grey.js-accordion .js-accordion__header {
  background: #5a5a5a;
}
.lorem .neg.grey .is-style-grey.js-accordion .js-accordion__header:hover, .editor-styles-wrapper .neg.grey .is-style-grey.js-accordion .js-accordion__header:hover, .lorem .neg.grey .is-style-grey.js-accordion .js-accordion__header.tab-active, .editor-styles-wrapper .neg.grey .is-style-grey.js-accordion .js-accordion__header.tab-active {
  background: #3c3c3c;
}
