:root {
  --mc-summer-night-blue: #132048;
  --mc-summer-night-blue-75: #424466;
  --mc-summer-night-blue-50: #716f89;
  --mc-summer-night-blue-25: #aaa8ba;
  --mc-sunrise-orange: #f26724;
  --mc-sunrise-orange-75: #f58b56;
  --mc-sunrise-orange-50: #f9ad84;
  --mc-sunrise-orange-25: #fcd4bb;
  --mc-desert-turquoise: #1e988a;
  --mc-desert-turquoise-75: #68aba1;
  --mc-desert-turquoise-50: #98c1bb;
  --mc-desert-turquoise-25: #c8dbd8;
  --mc-monsoon-grey: #d8dfe1;
  --mc-monsoon-grey-75: #e1e6e7;
  --mc-monsoon-grey-50: #eaeded;
  --mc-monsoon-grey-25: #f3f4f4;
  --mc-sunshine-yellow: #faa21b;
  --mc-sunshine-yellow-75: #fbb658;
  --mc-sunshine-yellow-50: #fdcd8b;
  --mc-sunshine-yellow-25: #ffe4c0;
  --mc-sky-blue: #0070b9;
  --mc-sky-blue-75: #5588c6;
  --mc-sky-blue-50: #89a6d6;
  --mc-sky-blue-25: #bfcde9;
  --mc-night-black: #131d28;
  --mc-night-black-75: #3e414a;
  --mc-night-black-50: #6d6d75;
  --mc-night-black-25: #aaa8ae;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Bold"),
    local("RobotoBold"),
    url("../fonts/roboto-bold-webfont.woff2") format("woff2"),
    url("../fonts/roboto-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Bold Italic"),
    local("RobotoBoldItalic"),
    url("../fonts/roboto-bolditalic-webfont.woff2") format("woff2"),
    url("../fonts/roboto-bolditalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto Italic"),
    local("RobotoItalic"),
    url("../fonts/roboto-italic-webfont.woff2") format("woff2"),
    url("../fonts/roboto-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:
    local("Roboto"),
    url("../fonts/roboto-regular-webfont.woff2") format("woff2"),
    url("../fonts/roboto-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src:
    local("Poppins"),
    local("PoppinsBold"),
    url("../fonts/poppins-bold-webfont.woff2") format("woff2"),
    url("../fonts/poppins-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src:
    local("Poppins"),
    local("PoppinsBoldItalic"),
    url("../fonts/poppins-bolditalic-webfont.woff2") format("woff2"),
    url("../fonts/poppins-bolditalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Poppins ExtraBold";
  src:
    local("Poppins ExtraBold"),
    local("PoppinsExtraBold"),
    url("../fonts/poppins-extrabold-webfont.woff2") format("woff2"),
    url("../fonts/poppins-extrabold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Poppins ExtraBold";
  src:
    local("Poppins ExtraBold Italic"),
    local("PoppinsExtraBoldItalic"),
    url("../fonts/poppins-extrabolditalic-webfont.woff2") format("woff2"),
    url("../fonts/poppins-extrabolditalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

html,
body,
p,
dt,
dd,
h4,
h5,
h6,
.h1,
.h2,
.h4,
.h5,
.h6,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
select[multiple="multiple"] {
  font-family: "Roboto", Arial, sans-serif;
}

html,
body,
dt,
dd,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
select[multiple="multiple"] {
  font-size: 0.9rem;
  line-height: 1.7em;
}

address,
div.prom-location-hours,
p {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.prom-body-content-container .digital-library-card-header {
  font-size: 1.2rem;
}

.prom-body-content-container ul,
.prom-body-content-container ol {
  padding-left: 1rem;
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.navbanner-link-text {
  font-size: 1.1rem;
}

a {
  color: var(--mc-sky-blue);
}

body {
  background-color: white;
}

button,
.btn {
  background-color: white;
  color: var(--mc-summer-night-blue);
  border-radius: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
}

.btn-close:hover {
  background-color: transparent;
}

h1,
.h1 {
  font-family: "Poppins ExtraBold", Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2rem;
  color: var(--mc-summer-night-blue);
}

h2,
.h2 {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.7rem;
  color: var(--mc-summer-night-blue);
}

h3,
.h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--mc-night-black-75);
}

.prom-body-content h1.prom-title {
  background-color: var(--mc-summer-night-blue);
  color: white;
  display: block;
  font-family: "Poppins ExtraBold", Arial, sans-serif;
  font-size: calc(1rem + 3vw);
  font-weight: bold;
  margin-bottom: 1rem;
  padding-bottom: 2rem;
  padding-top: 2rem;
  text-align: center;
  text-transform: none;
}

.item-title,
dt,
.prom-alert > p,
.prom-alert > ul {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--mc-summer-night-blue);
}

.prom-tile > svg {
  width: 50px;
}

.prom-tile:hover {
  background-color: var(--mc-sunrise-orange);
  color: white;
  text-decoration: none;
}

.prom-tile:hover > svg path,
.prom-tile:hover > svg polygon {
  fill: white;
  stroke: white;
}

.prom-tile > svg path,
.prom-tile > svg polygon {
  stroke: var(--mc-sunrise-orange);
  fill: var(--mc-sunrise-orange);
}

.prom-tile > p {
  margin-top: 0.75rem;
  font-family: "Roboto", Arial, sans-serif;
  color: var(--mc-summer-night-blue);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.prom-content {
  max-width: 1500px;
}

.prom-alert {
  color: var(--mc-sunrise-orange);
  background-color: var(--mc-monsoon-grey-25);
  border: 1px solid var(--mc-sunrise-orange);
  border-radius: 0;
}

.prom-box-border {
  border: 3px solid var(--mc-sunrise-orange);
  border-radius: 0;
}

.prom-nav-top,
.prom-content-container {
  background-color: white;
}

.prom-nav-top {
  font-size: 1rem;
}

footer {
  background-color: var(--mc-summer-night-blue);
}

.prom-nav-top > .prom-right-nav > li > div.btn-group {
  height: inherit;
}

.prom-nav-top > .prom-right-nav > li > div.btn-group > a > div.btn {
  height: 100%;
}

.prom-nav-top > .prom-right-nav > li {
  height: 2.5rem;
}

.prom-nav-top-button {
  border: 2px solid;
  border-color: var(--mc-sunrise-orange);
  color: var(--mc-night-black);
  background-color: var(--mc-sunrise-orange-25);
  font-weight: bold;
}

li.d-sm-none.prom-nav-top-button {
  border-color: var(--mc-sky-blue);
  color: var(--mc-night-black);
  background-color: var(--mc-sky-blue-25);
}

.prom-nav-top-button:nth-of-type(odd) {
  border-color: var(--mc-desert-turquoise);
  background-color: var(--mc-desert-turquoise-25);
}

.prom-nav-top > .prom-right-nav > li > a:hover {
  text-decoration: none;
}

.prom-nav-top > .prom-right-nav > li > a {
  padding: 0.25rem 0;
  color: inherit;
}

.prom-nav-top > .prom-right-nav > li > a > span.far,
.prom-nav-top > .prom-right-nav > li > a > span.fas {
  padding-top: 0.2rem;
}

.prom-nav-logo {
  background-color: var(--mc-summer-night-blue);
}

.prom-nav-middle-parent {
  background-color: var(--mc-night-black);
  font-size: 1rem;
  color: white;
}

.prom-nav-middle .navbar-toggler {
  background-color: var(--mc-summer-night-blue);
}

.prom-nav-middle .nav-link-text,
.prom-nav-middle .nav-link {
  font-size: 1.1rem;
  border-radius: 0;
  line-height: 1.5rem;
}

.prom-nav-middle li.prom-nav-link {
  text-align: center;
  font-weight: bold;
  background-color: var(--mc-summer-night-blue);
}

.prom-nav-middle a:active .prom-nav-middle .navbar-toggler:active {
  color: white;
  background-color: var(--mc-sunrise-orange);
}

.prom-nav-middle li a.nav-link.show {
  color: white;
  background-color: var(--mc-sunrise-orange);
}

.prom-nav-middle .prom-dropdown-swap-link.show > .nav-link {
  color: white;
}

.prom-leftnav-container > div > a > img {
  margin-bottom: 1rem;
}

.prom-leftnav a:hover {
  color: var(--mc-sunrise-orange);
}

.prom-leftnav .accordion-body {
  padding: 0.5rem;
}

.prom-leftnav .accordion-body ul {
  margin-bottom: 0.5rem;
  padding: 0;
  list-style: none;
}

.prom-leftnav .accordion-body ul li {
  text-indent: -1rem;
  padding-left: 1rem;
}

.prom-leftnav .accordion-body ul li:before {
  content: ">";
  color: var(--mc-sunrise-orange);
  font-size: 1rem;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
}

.prom-leftnav .accordion-button {
  color: var(--mc-summer-night-blue);
  padding: 0.5rem 0.75rem;
}

.prom-leftnav .accordion-button:not(.collapsed) {
  background-color: var(--mc-summer-night-blue);
  color: white;
}

.prom-leftnav a.prom-leftnav-featurette-button {
  color: var(--mc-summer-night-blue);
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
  background-color: white;
}

.prom-leftnav a.prom-leftnav-featurette-button:hover {
  background-color: var(--mc-sunrise-orange);
}

ul.prom-nav-middle-social a {
  color: var(--mc-summer-night-blue);
}

ul.prom-nav-footer-social a {
  color: white;
  font-size: 1.2rem;
}

.prom-footer-contact {
  background: var(--mc-sky-blue);
}

.prom-footer-contact .footer-contact:nth-child(even) > a {
  color: var(--mc-night-black);
}

.prom-footer-contact .footer-contact:nth-child(even) {
  background: var(--mc-monsoon-grey);
  color: var(--mc-night-black);
}

.prom-segment-nav {
  color: var(--mc-summer-night-blue);
  text-decoration: none;
  font-weight: bold;
}

.prom-location-tile {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.125);
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.7rem;
  background-color: white;
}

.prom-location .todays-status {
  background-color: var(--mc-night-black);
  border: 3px solid var(--mc-sunrise-orange);
  padding: 0.4rem;
  text-align: center;
  color: white;
  font-size: 1.2rem;
}

.prom-see-services-at-all {
  font-style: italic;
}

.prom-features a:hover {
  color: var(--mc-sunrise-orange);
}

footer a span {
  padding-top: 0.25rem;
}

.prom-faq-icons {
  color: var(--mc-summer-night-blue);
  font-family: "Poppins", Arial, sans-serif;
  font-weight: bold;
}

.badge.eaudiobooks {
  background-color: #f5cba7;
}

.badge.ebooks {
  background-color: #fee2a1;
}

.badge.magazines {
  background-color: #d8a7ad;
}

.badge.moviesandtv {
  background-color: #dccbdd;
}

.badge.music {
  background-color: #dddfbb;
}

.badge.newspapers {
  background-color: #6699cc;
}

.btn-active-purple {
  color: var(--mc-summer-night-blue);
  background-color: var(--mc-sunrise-orange);
}

.h4.playlist-prompt {
  color: var(--mc-summer-night-blue);
  font-size: 1.2rem;
}

div.prom-top-searchbar > div.prom-catalog-search {
  max-width: 600px;
}

div.home-catalog-search #textboxTerm,
.search-box {
  border-radius: 0;
  min-height: 2.75rem;
}

div.home-catalog-search .search-button,
.search-button {
  border-width: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: var(--mc-summer-night-blue);
  height: 3.5rem;
  width: 3.5rem;
  font-size: 1.4rem;
}

div.home-catalog-search .search-button:focus {
  border: 3px solid var(--mc-sunrise-orange);
}

div.home-catalog-search input {
  border-color: var(--mc-summer-night-blue-25);
  border-width: 3px;
}

.form-control:focus,
.form-select:focus {
  border: 3px solid var(--mc-sunrise-orange);
  box-shadow: 0 0;
  x-box-shadow: 0 0 0 0.1rem var(--mc-sunrise-orange);
}

.location-feature-link a {
  color: var(--mc-summer-night-blue);
}

.location-feature-button {
  background-color: var(--mc-desert-turquoise-25);
}

.prom-text-color {
  color: var(--mc-sunrise-orange);
}

.prom-background-color {
  background-color: var(--mc-sunrise-orange);
}

.bg-prom-primary {
  background-color: var(--mc-sky-blue);
  --bs-btn-bg: var(--mc-sky-blue);
  --bs-btn-active-bg: var(--mc-sky-blue);
}

.border-prom-primary {
  --bs-border-opacity: 1;
  border-color: var(--mc-sky-blue);
  --bs-border-color: var(--mc-sky-blue);
}

.prom-nav-middle li.prom-nav-link:nth-child(even) {
  background-color: var(--mc-summer-night-blue-75);
}

@media (min-width: 576px) {
  .prom-nav-middle li.prom-nav-link {
    background-color: var(--mc-summer-night-blue-75);
  }

  .prom-nav-middle li.prom-nav-link:nth-child(even) {
    background-color: var(--mc-summer-night-blue);
  }

  div.home-catalog-search .search-button,
  .search-button {
    height: 2.5rem;
    width: 2.5rem;
  }
}

@media (hover: hover) {
  .prom-nav-middle a:hover,
  .prom-nav-middle .navbar-toggler:hover,
  .home-catalog-search .search-button:hover {
    color: white;
    background-color: var(--mc-sunrise-orange);
  }
  .prom-nav-top > .prom-right-nav > li:hover {
  }
  .prom-nav-top > .prom-right-nav > li.prom-nav-top-button.d-sm-none:hover {
    background-color: var(--mc-sky-blue-50);
  }
  .prom-nav-top > .prom-right-nav > li.prom-nav-top-button:hover {
    background-color: var(--mc-sunrise-orange-50);
  }
  .prom-nav-top
    > .prom-right-nav
    > li.prom-nav-top-button:nth-of-type(odd):hover {
    background-color: var(--mc-desert-turquoise-50);
  }
}
