/**
 * @file
 * CSS file which applies platform-specific styles that are not part of the
 * standard EdGEL package.
 *
 * This file must NOT be used to override or extend any existing EdGEL styles.
 *
**/

.media-container {
  margin: 0 auto;
  max-width: 660px;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%
}

.embed-responsive-4by3 {
  padding-bottom: 75%
}

.uoe-table-horizontal-scrolling {
  overflow: auto;
  white-space: nowrap;
}

.cite {
  font-style: italic;
}

.beta-container {
  border-top: solid 1px #e8e8e9;
}

.beta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2rem;
}
/* mega menu styles */
.tbm--mobile {
  padding-top: 1rem;
}
.tbm.tbm--mobile .tbm-collapse {
  background: unset;
  padding-top: 1rem;
}
.uoe-mega-menu {
  box-shadow: inset 0px -1px 0px #343a40;
}
.tbm {
  background-color: unset;
}
.tbm-group-container {
  border-top: 0 solid rgba(0, 0, 0, 0.2);
}
.level-1 .tbm-column {
  border-left: 1px solid var(--edgel-dark);
  padding-left: 10px;
}
.tbm--mobile .level-1 .tbm-column {
  border-left: 0 solid var(--edgel-dark);
  padding-left: 0;
}
.level-2 .tbm-column {
  border-left: 0 solid var(--edgel-dark);
  padding-left: 0;
}
.tbm-link.level-1:hover, .tbm-link.level-1:focus {
  background-color: unset;
  color: var(--edgel-brand-as-link-hover);
  border-bottom: 2px solid var(--edgel-brand-as-link-hover);
  text-decoration: none;
  font-weight: 600;
  padding: 16px 1.9rem 16px;
}
.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link:hover, .tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link:focus {
  color: var(--edgel-brand-as-link-hover);
  text-transform: unset;
}
.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link {
  color: var(--edgel-dark);
}
.tbm-item.level-1 {
  border-right: 0 solid rgba(0, 0, 0, 0.2);
  font-weight: 600;
  color: #343a40;
}
.tbm-item.level-1 a,
.level-1.no-link {
  padding: 16px 1.9rem 18px;
  border-right: 0 solid rgba(0, 0, 0, 0.2);
}
.no-link, .no-link span {
  text-transform: unset;
  color: var(--edgel-dark);
}
.tbm-item.level-2 a {
  color: var(--edgel-brand-link);
  text-transform: unset;
}

.tbm-nav .tbm-link.no-link:hover, .tbm-nav .tbm-link.no-link:focus, [dir='ltr'] .tbm-nav .tbm-link.no-link:hover, [dir='ltr'] .tbm-nav .tbm-link.no-link:focus {
  cursor: default;
}
.tbm-link.level-1.no-link {
  cursor: pointer !important;
}
.tbm-item.level-3 {
  font-weight: 400;
}

/* mobile menu changes */
.tbm--mobile button.tbm-button {
  color: #212529;
  background-color: #fff;
  border-color: #6c757d;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
  width: 100%;
  text-align: left;
  margin-bottom: -2px;
}
.tbm--mobile .tbm-button .tbm-button-container span {
  border-radius: 0;
}
.tbm.tbm--mobile .tbm-collapse {
  padding-top: 0;
}
.tbm--mobile .tbm-link-container {
  background-color: #ffffff;
  border-bottom: 1px solid #ced4da;
}
.tbm--mobile .tbm-submenu-toggle {
  border-left: 0 solid rgba(0,0,0,0.2) !important;
  background-color: #ffffff;
}
.tbm--mobile .tbm-link.level-1 {
  color: var(--edgel-brand-as-link-hover);
}
.tbm--mobile .tbm-item.level-1 a,
.tbm--mobile .level-1.no-link {
  padding: 16px 1.9rem 16px;
  border-right: 0 solid rgba(0, 0, 0, 0.2);
}
.tbm--mobile .tbm-link.level-1:hover, .tbm--mobile .tbm-link.level-1:focus {
  background-color: #fff;
  color: var(--edgel-brand-as-link-hover);
  border-bottom: 0 solid var(--edgel-brand-as-link-hover);
  text-decoration: none;
  font-weight: 600;
  padding: 1rem 1.25rem;
}
.tbm--mobile .tbm-submenu-toggle:focus {
  background-color: #ffffff;
}
.tbm--mobile .tbm-item.level-1 a {
  padding-left: 1.25rem;
}

/* styling for image paragraph */

.single-image {
  width: 100%;
}

/* In EdGel image has a margin bottom which renders as white space under the */
/* image if there is no caption. Moved to margin top on caption to fix. */

.figure-caption {
  margin-top: 0.5rem;
}

.figure-img {
  margin-bottom: 0;
  width: 100%;
}

/*  end styling for image paragraph */

/* Tag button styles */
button.btn-brand a {
  color: #fff;
}
.tag-list {
  margin-top: 1rem;
}
.tag-list button {
  margin-right: 1rem;
  border: 1px solid transparent;
}
/* End tag button styles */

/* Footer styles */

.footer-subsite-menu a {
  color: var(--edgel-dark);
}

.footer-subsite-menu a:hover {
  color: #2a5799;
}

.footer-subsite .address-title {
  margin-bottom: .5rem;
  font-size: 20px;
}

.footer-subsite .container-footer {
  padding-bottom: 1rem;
}

a.footer-affiliation-link:hover {
  text-decoration: none;
}
/* End footer styles */

/* Masthead fixes */
@media screen and (max-width: 575px) {
  .container-branding img {
    max-width: 4rem;
  }
}

/* fix to grid layout when theres more than one row */
.grid .col {
  margin-top: 0;
}
.paragraph--type--layout .layout .col {
  margin-top: 1.5rem;
}

/* node layout overrides */
#block-wpp-theme-content {
  margin-top: 1.5rem;
}
.lead {
  margin-bottom: 2rem;
}

/* design and layout fixes */
.paragraph--type--feature-box.card-featurebox .card-header {
  background-color: #e8e8e8;
}
.paragraph--type--feature-box {
  margin-bottom: 1.25rem;
}
.paragraph--type--feature-box p {
  margin-bottom: 0;
}
 /* webform styling */
.webform-submission-form .form-item-email .form-email {
  display: block;
  width: 100%;
  font-weight: 400;
  line-height: 1.428571429;
  color: #495057;
  background-color: #e9ecef;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  min-height: calc(1.428571429em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: calc(12.2px + .675vw);
  border-radius: 0.3rem;
}

.form-label {
  margin-bottom: 0.5rem;
  font-weight: 700;
  display: inline-block;
  width: 100%;
}