.panel {
}

.panel-wrapper {
  width: 100%;
}

.panel-header {
  height: 120px;
  box-sizing: border-box;
  position: relative;
  padding: var(--gutter-width);
  vertical-align: bottom;
  border-top-left-radius: calc(var(--gutter-width) / 2);
  border-top-right-radius: calc(var(--gutter-width) / 2);
  background-color: var(--light-gray);
  border: 1px solid var(--light-gray);
  border-bottom: 0;
}

.panel.whitepaper .panel-header {
  background-color: rgba(123,131,163,1.0); /* #7B83A3 */
}
.panel.testimonial .panel-header {
  background-color: rgba(47,54,87,1.0); /* #2F3657 */
}
.panel.podcast .panel-header {
  background-color: rgba(222,84,60,1.0); /* #DE543C */
}
.panel.webinar .panel-header {
  background-color: rgba(249,158,77,1.0); /* #F99E4D */
}
.panel.video .panel-header {
  background-color: rgba(232,180,47,1.0); /* #E8B42F */
}
.panel.article .panel-header {
  background-color: rgba(43,69,112,1.0); /* #2B4570 */
}

.panel-icon {
  position: absolute;
  bottom: 15px;
  color: rgba(255,255,255,0.7) !important;
  font-size: 3.5em;
}

.panel-metadata {
  position: absolute;
  bottom: 0;
  right: var(--gutter-width);
  min-height: 30px;
  padding: 5px var(--gutter-width);
  border-top-left-radius: calc(var(--gutter-width) / 2);
  border-top-right-radius: calc(var(--gutter-width) / 2);
  background-color: white;
  border: 1px solid var(--light-gray);
  border-bottom: 0;
}

.panel-metadata span {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.panel-body {
  min-height: 170px;
  box-sizing: border-box;
  position: relative;
  padding: var(--gutter-width);
  border-bottom-left-radius: calc(var(--gutter-width) / 2);
  border-bottom-right-radius: calc(var(--gutter-width) / 2);
  border: 1px solid var(--light-gray);
  border-top: 0;
}

.panel-link {
  position: absolute;
  bottom: var(--gutter-width);
  left: var(--gutter-width);
}

.panel-icon.hidden,
.panel-metadata.hidden,
.panel-link.hidden {
  display: none;
}

.panel.whitepaper .hidden.whitepaper,
.panel.testimonial .hidden.testimonial,
.panel.webinar .hidden.webinar,
.panel.podcast .hidden.podcast,
.panel.video .hidden.video,
.panel.article .hidden.article {
  display: inline-block !important;
}

.package-features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.package-features li {
  display: block;
  height: 20px;
  margin-bottom: 15px;
}

.package-features li b {
  display: inline-block;
  line-height: 20px;
  vertical-align: bottom;
  font-weight: bold;
  float: left;
}

.package-features li span {
  font-size: unset;
  display: inline-block;
  line-height: 20px;
  vertical-align: bottom;
  float: right;
}

/* Pricing panel styles */

.panel.Pro {
  position: relative;
  margin-top: -10px;
  margin-left: -10px;
  width: calc(100% + 20px);
  bottom: 0px;
}

.panel-heading {
  height: 30px;
  margin-bottom: 15px;
}

.pricing .panel-header {
  height: auto;
  min-height: 240px;
}

.pricing .panel-body {
  height: auto;
  min-height: unset;
  font-size: 0.9em;
}

.pricing.FREE .panel-header,
.pricing.FREE .panel-action {
  background-color: var(--primary-orange);
  border: 1px solid var(--primary-orange);
}

.pricing.Pro .panel-header,
.pricing.Pro .panel-action {
  padding-top: 25px;
  background-color: var(--primary-green);
  border: 1px solid var(--primary-green);
}

.pricing.Enterprise .panel-header,
.pricing.Enterprise .panel-action {
  background-color: var(--alert-blue);
  border: 1px solid var(--alert-blue);
}

.pricing.Pro .panel-action {
  padding-bottom: 25px;
}

.pricing.FREE .panel-header *,
.pricing.Pro .panel-header *,
.pricing.Enterprise .panel-header * {
  color: white;
}

.pricing .panel-header span {
  display: block;
  text-align: center;
}

.pricing .panel-header span.product {
  font-size: 24px;
}

.pricing .panel-header span.product > p {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: inherit;
  line-height: inherit;
}

.pricing .panel-header span.package {
  font-size: 36px;
  font-weight: bold;
}

.pricing .panel-header span.pricing {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 72px;
  font-weight: bold;
}

.pricing .panel-header span.terms {
  font-size: 18px;
  font-weight: lighter;
}

.pricing .panel-body {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  border-bottom: 0;
}

.pricing .panel-body .package-features {
  margin-top: 15px;
}

.pricing .panel-body .package-item {
  display: block;
  height: 20px;
  margin-bottom: 15px;
}

.pricing .panel-body .package-item span a {
  font-size: inherit;
}

.pricing .panel-body .package-item .package-item-heading {
  display: inline-block;
  line-height: 20px;
  vertical-align: bottom;
  font-weight: bold;
  float: left;
}

.pricing .panel-body .package-item .package-item-description {
  display: inline-block;
  line-height: 20px;
  vertical-align: bottom;
  float: right;
}

.pricing .panel-action {
  display: block;
  position: relative;
  color: white;
  font-size: 1.5em;
  font-weight: bolder;
  text-align: center;
  text-decoration: none;
  left: 0;
  right: 0;
  min-height: 50px;
  box-sizing: border-box;
  padding: var(--gutter-width);
  border: 1px solid var(--light-gray);
  border-bottom-left-radius: calc(var(--gutter-width) / 2);
  border-bottom-right-radius: calc(var(--gutter-width) / 2);
}

.pricing-details sup {
  font-size: 0.8em;
  vertical-align: super;
}

.highlight-panel {
  display: grid;
  box-sizing: border-box;
  border-top-left-radius: calc(var(--gutter-width) / 2);
  border-top-right-radius: calc(var(--gutter-width) / 2);
  border-bottom-left-radius: calc(var(--gutter-width) / 2);
  border-bottom-right-radius: calc(var(--gutter-width) / 2);
  padding: var(--gutter-width);
}

.highlight-panel .panel.highlight {
  display: grid;
  height: 100%;
  align-self: start;
  padding: var(--gutter-width);
}

.highlight-panel .panel.highlight:first-child {
  border-top-left-radius: calc(var(--gutter-width) / 2);
  border-bottom-left-radius: calc(var(--gutter-width) / 2);
  margin-left: calc(var(--gutter-width) * -1);
  padding-left: calc(var(--gutter-width) + 15px);
}
.highlight-panel .panel.highlight:not(:first-child):not(:last-child):not(.active) {
  margin-left: calc(var(--gutter-width) * -1);
  width: calc(100% + calc(var(--gutter-width) * 2));
  padding-left: calc(var(--gutter-width) + 15px);
  padding-right: calc(var(--gutter-width) + 15px);
}
.highlight-panel .panel.highlight:last-child {
  border-top-right-radius: calc(var(--gutter-width) / 2);
  border-bottom-right-radius: calc(var(--gutter-width) / 2);
  padding-right: calc(var(--gutter-width) + 15px);
  margin-right: -15px;
}

.theme-light-color-scheme .highlight-panel > .panel.highlight:not(.active) {
  background-color: var(--light-gray);
}

.highlight-panel > .panel.highlight.active {
  z-index: 1000;
  border-radius: calc(var(--gutter-width) / 2);

  margin-top: calc(var(--gutter-width) * -1);
  padding-top: calc(var(--gutter-width) * 2);
  padding-bottom: calc(var(--gutter-width) * 2);
  height: calc(100% + calc(var(--gutter-width) * 2));

  margin-left: calc(var(--gutter-width) * -1);
  padding-left: calc(var(--gutter-width) + 15px);
  width: calc(100% + calc(var(--gutter-width) * 2));
  padding-right: calc(var(--gutter-width) + 15px);
}

.highlight-panel > .panel.highlight .big-icon {
  padding-top: var(--gutter-width);
}
.highlight-panel > .panel.highlight .content-text {
  min-height: 260px;
}
.highlight-panel > .panel.highlight span.content-link-text {
  transition: color 500ms ease;
}
.highlight-panel > .panel.highlight.active span.content-link-text {
  color: inherit;
}
.highlight-panel > .panel.highlight:not(.active) span.content-link-text {
  color: transparent;
}