.view-business-unit-submenus a {
  color: #002D72;
  text-decoration: none;
}

#page .views-field-field-level-1-links .field-content > ul > li, 
#page .views-field-field-level-1-links .field-content > ul,
#page .view .views-field.views-field-field-level-1-links ul li, 
#page .view .field-content ul li {
  list-style-type: none;
  margin-left: 0;
  margin-right: 0;
}

#page .views-field-field-level-1-links {
  color: #002D72;
  font-weight: 700;
}

#page .views-field-field-level-1-links .field-content > ul > li + li {
  margin-top: 24px;
}

#page .view .views-field-field-level-1-links ul li::before, 
#page .view .field-content ul li::before {
  display: none;
}

#page .views-field-field-level-1-links .parent ul {
  display: block;
  max-height: 0;
  margin: 0 0 0 15px !important;
  overflow: hidden;
}

#page .views-field-field-level-1-links .parent.focus-within ul {
  display: block;
  max-height: 600px;
  margin: 5px 25px;
}

#page .views-field-field-level-1-links .parent  {
  position: relative;
}

#page .views-field-field-level-1-links .parent:after {
  font-family: 'FontAwesome';
  content: '\f0da';
  display: block;
  transform: rotate(90deg);
  position: absolute;
  right: 0;
  top: 0;
  color: #002D72;
  font-size: 24px;
}

#page .views-field-field-level-1-links .parent.focus-within:after {
  transform: rotate(-90deg);
}

.region-sidebar-second .card {
  margin-bottom: 30px;
}

/* Adding a CSS class in views with an underscore converts the underscore to a dash. This is to remedy that issue.
   https://www.drupal.org/project/views/issues/1513480 */
.region-sidebar-second .card-thin {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* New implementation to add a button so the user can easily click it to toggle opening the subnavigation. */
.btn-icon-caret {
  position: relative;
  color: #002D72;
  border: 0;
  width: 24px;
  height: 24px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.btn-icon-caret::before {
  display: block;
  font-family: 'FontAwesome';
  content: '\f0da';
  position: absolute;
  right: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  transition: rotate 250ms ease-in-out;
}

.btn-icon-caret.isActive::before {
  transform: rotate(-90deg);
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease-in-out;
}

.submenu.isOpen {
  max-height: 1000px;
  overflow: visible;
}

.submenu > li + li {
  margin-top: 20px;
}

.submenu > li > a {
  font-weight: 700;
}
