/* Apache Customer Portal quick-action buttons only. */
:root {
  --apache-red: #cf262a;
  --apache-red-dark: #a91e22;
  --apache-black: #111111;
  --apache-white: #ffffff;
}

/* Reveal the existing uploaded companyLogo image. */
#img-logo-top-left {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 210px !important;
  height: auto !important;
}

/* Apache navigation: black bar, white type, brick-red accents. */
header.navbar,
nav,
.navbar,
.navbar-default,
.main-menu,
.top-menu {
  background-color: var(--apache-black) !important;
  border-color: var(--apache-black) !important;
}

header.navbar a,
nav a,
.navbar a,
.main-menu a,
.top-menu a {
  color: var(--apache-white) !important;
}

header.navbar .navbar-nav > li > a:hover,
header.navbar .navbar-nav > li > a:focus,
nav a:hover,
nav a:focus,
.navbar a:hover,
.navbar a:focus,
.main-menu a:hover,
.top-menu a:hover {
  background-color: var(--apache-red) !important;
  color: var(--apache-white) !important;
}

/* Keep dropdowns readable and aligned with the Apache palette. */
.dropdown-menu,
header.navbar .dropdown-menu,
[role="menu"],
[class*="dropdown-menu"],
[class*="submenu"] {
  background-color: #4b4b4b !important;
  border-top-color: var(--apache-red) !important;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
[role="menu"] a:hover,
[role="menu"] a:focus {
  background-color: var(--apache-red) !important;
  color: var(--apache-white) !important;
}

/* Dashboard icons and contract controls. */
.wynneWidgetPane .widget-icon {
  background-color: var(--apache-red) !important;
  border-color: var(--apache-white) !important;
}

.wynneWidgetPane .widget-icon i,
.wynneWidgetPane .widget-icon i::before {
  color: var(--apache-white) !important;
}

#sign-contract-widget .tabs ul {
  border-bottom-color: var(--apache-red) !important;
}

#sign-contract-widget .tabs ul li a.active,
#sign-contract-widget .contract-row.unsign .button,
#sign-contract-widget .find-contract .input-row button {
  background-color: var(--apache-red) !important;
  border-color: var(--apache-red-dark) !important;
  color: var(--apache-white) !important;
}

#sign-contract-widget .find-contract .input-row input {
  border-bottom-color: var(--apache-red) !important;
}

#apache-portal-actions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 8px 10px 12px !important;
  padding: 0 !important;
}

#apache-portal-actions .apache-portal-action {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: #cf262a !important;
  border: 1px solid #a91e22 !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
}

#apache-portal-actions .apache-portal-action:hover,
#apache-portal-actions .apache-portal-action:focus {
  background: #a91e22 !important;
  border-color: #89171a !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

#apache-portal-actions .apache-portal-action:focus {
  outline: 2px solid #cf262a !important;
  outline-offset: 2px !important;
}

/* Front-page action card, replacing only the former Off Rent summary card. */
#apache-dashboard-action-card {
  box-sizing: border-box !important;
  align-self: flex-start !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  padding: 10px !important;
  background: var(--apache-white) !important;
  overflow: hidden !important;
}

#apache-dashboard-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(2, 36px) !important;
  align-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
}

#apache-dashboard-actions .apache-portal-action {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 5px 12px !important;
  border: 1px solid var(--apache-red-dark) !important;
  border-radius: 3px !important;
  background: var(--apache-red) !important;
  color: var(--apache-white) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
}

#apache-dashboard-actions .apache-portal-action:nth-child(2) {
  background: var(--apache-black) !important;
  border-color: var(--apache-black) !important;
}

#apache-dashboard-actions .apache-portal-action:hover,
#apache-dashboard-actions .apache-portal-action:focus {
  filter: brightness(1.12) !important;
  color: var(--apache-white) !important;
  text-decoration: none !important;
}

/* Finish the two lower dashboard panels in the Apache palette. */
.apache-lower-heading {
  box-sizing: border-box !important;
  color: var(--apache-white) !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.apache-lower-heading,
.apache-lower-heading * {
  color: var(--apache-white) !important;
}

.apache-lower-heading > * {
  background: transparent !important;
}

.apache-lower-heading--red {
  background: var(--apache-red) !important;
  border-bottom: 4px solid var(--apache-red-dark) !important;
}

.apache-lower-heading--black {
  background: var(--apache-black) !important;
  border-bottom: 4px solid var(--apache-red) !important;
}

/* Contract carousel pagination: replace the remaining default blue/teal. */
.pagination > a,
.pagination > li > a,
.pagination .back-page,
.pagination .next-page,
#sign-contract-widget .pagination > a,
#sign-contract-widget .pagination .back-page,
#sign-contract-widget .pagination .next-page {
  background: var(--apache-red) !important;
  border-color: var(--apache-red-dark) !important;
  color: var(--apache-white) !important;
}

.pagination > a:hover,
.pagination > li > a:hover,
.pagination .back-page:hover,
.pagination .next-page:hover,
.pagination .active > a,
.pagination > a.active {
  background: var(--apache-black) !important;
  border-color: var(--apache-black) !important;
  color: var(--apache-white) !important;
}

.pagination .disabled > a,
.pagination a.disabled,
.pagination a.disable,
.pagination .back-page.disabled,
.pagination .next-page.disabled {
  background: #d7d7d7 !important;
  border-color: #c4c4c4 !important;
  color: #777777 !important;
}

@media (max-width: 767px) {
  #apache-dashboard-action-card {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
}