/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Variables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Colors */
/* Fonts */
/* Responsive */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #151945;
  font-style: normal;
  font-family: "Barlow", sans-serif;
  font-size: 1.063rem;
  font-weight: 400;
  display: block;
}

h1 {
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
}
@media (max-width: 991px) {
  h1 {
    font-size: 2.125rem;
  }
}
@media (min-width: 992px) {
  h1 {
    font-size: 4.0625rem;
  }
}

h2 {
  font-weight: 600;
  line-height: 1.2;
  font-size: 38px !important;
}
@media (max-width: 991px) {
  h2 {
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  h2 {
    font-size: 2.125rem;
  }
}

a {
  color: #e61d51;
}

p {
  font-family: "Barlow", sans-serif;
}

input {
  border-radius: 0px !important;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/******************     Header     ***/
header {
  width: 100%;
}

/******************     Nav         ***/
.navbar {
  background-color: #151945;
  justify-content: space-between;
  height: 5.0625rem;
  padding: 0 1.6rem;
  z-index: 10;
  position: relative;
  transition: 0.2s ease-in-out;
  box-sizing: border-box;
}

/* Misc */
.nav-link {
  font-size: 14px;
}

#admin-nav-item {
  box-sizing: border-box;
  padding: 0.05rem 0.65rem;
  border: 2px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #f8b01c, #e61d51);
}
#admin-nav-item:hover {
  background-image: linear-gradient(90deg, #f8b01c, #e61d51);
}
#admin-nav-item:hover #admin-dropdown {
  color: #151945;
  font-weight: bold;
}
#admin-nav-item:hover .nav-chevron {
  color: #151945;
}
#admin-nav-item:active {
  background-image: linear-gradient(90deg, #f8b01c, #e61d51);
}
#admin-nav-item:active #admin-dropdown {
  color: #151945;
  font-weight: bold;
}
#admin-nav-item:active .nav-chevron {
  color: #151945;
}

#memberaship-dropdown {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

.nav-item {
  box-sizing: border-box;
  padding: 0.05rem 0.65rem;
}
.nav-item.hover-white .nav-link {
  color: #fff;
}
.nav-item.hover-white .nav-link:hover {
  text-decoration: underline;
}
.nav-item.hover-white .nav-link .nav-chevron {
  color: #e61d51;
}

.navbar-collapse {
  transition: height 0.3s ease;
  background-color: #151945;
}

.navbar-right {
  float: right;
  margin-right: 0;
}

/*.non-border-item {
    color: #fff;

    &:hover {
        color: #fff;
    }
}*/
/* Misc - Mobile*/
.bi-list {
  color: white;
  font-size: 2.35rem;
}

.navbar-toggler {
  box-shadow: none !important;
}
.navbar-toggler:active {
  color: #e61d51 !important;
}

.mobile-menu-toggle:hover {
  color: #fff;
}

#more-dropdown-mobile {
  color: #fff;
  font-size: 1rem;
}
#more-dropdown-mobile:hover, #more-dropdown-mobile:focus, #more-dropdown-mobile[aria-expanded=true] {
  color: #fff !important;
  background-color: transparent;
}

.nav-dropdown-item-mobile {
  margin: 0.5rem 0.25rem;
}
.nav-dropdown-item-mobile:active {
  background: #fff;
}

.main-nested-dropdown-item-mobile {
  font-weight: 700;
}

#journal-nav-item {
  font-weight: 400;
  font-style: italic;
}

.mobile-dropdown-options {
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 12rem;
  height: 100vh;
  border-radius: 0;
  min-width: 75vw;
}

.bottom-nav-item {
  border: none !important;
  margin-bottom: 0;
}

.nav-chevron-blue {
  color: #151945;
}

/* More Dropdown */
.nav-chevron {
  color: #e61d51;
}

.dropdown-toggle::after {
  display: none !important;
}

.nav-dropdown-item-text:hover {
  text-decoration: underline;
  color: #151945;
}

.nav-dropdown-item {
  border-bottom: 1px solid;
  border-image-slice: 0 0 1;
  border-image-source: linear-gradient(90deg, #f8b01c, #e61d51);
}
.nav-dropdown-item:active {
  background-color: #fff;
  color: #151945;
}

.mobile-nav-book-icon {
  background-image: linear-gradient(90deg, #f8b01c, #e61d51);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* My Account */
#account-nav-item {
  color: #fff;
}
#account-nav-item:hover {
  text-decoration: none;
  border-bottom: 1px solid;
}

#account-nav-link:hover {
  text-decoration: none;
}

/******************     Footer     ***/
footer {
  width: 100%;
}

.footer {
  background-color: #151945;
}

.footer-text {
  color: #fff;
  font-weight: 400;
}

.footer-info-links {
  color: #fff;
}
.footer-info-links:hover {
  color: #e61d51;
}

.footer-links {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.footer-links:hover {
  text-decoration: underline;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Inquiry Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#inquiry-form-container {
  max-width: 100%;
}

.scrollable-dropdown {
  max-height: 30vh;
  overflow-y: auto;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Request Submitted ~~~~~~~~~~~~~~~~~~~~~~~~*/
.message-page-icon {
  font-size: 6rem;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Review Query ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.query-info-label {
  font-size: 1.25rem;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Inquiry Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#word-count-feedback {
  color: black;
}

#word-count-feedback.warning {
  color: orange;
}

#word-count-feedback.limit-reached {
  color: red;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Inquiry List Views ~~~~~~~~~~~~~~~~~~~~~~~*/
.page-item .page-link {
  border: 1px #151945;
  border-radius: 0;
  color: #151945;
}
.page-item.active .page-link {
  background-color: #151945;
  color: #fff;
  border: 1px #151945;
  border-radius: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Admin Response List ~~~~~~~~~~~~~~~~~~~~~~*/
.search-container .search-box {
  max-width: 315px;
}
.search-container .input-group .form-control {
  border-radius: 0;
}
.search-container .input-group .btn {
  border-radius: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Shared Classes ~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/******************     Body       ***/
.page-content {
  justify-content: center;
}

.hero {
  background-color: #151945;
  position: static;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 24px;
}
@media (max-width: 991px) {
  .hero {
    margin: 0 0 3rem 0;
    padding: 2rem 3rem;
  }
}
@media (min-width: 992px) {
  .hero {
    margin: 0 0 2.5rem 0;
    padding: 4rem 7rem;
  }
}

.hero-image {
  box-shadow: -14px 14px 0 0 #e61d51;
}

/******************     Forms      ***/
.form-label {
  font-weight: bold;
  font-size: 0.813rem;
  margin-bottom: 0.25rem;
}

.red-fill-button {
  border-radius: 0;
  font-size: 0.813rem;
  font-weight: bold;
  background-color: #e61d51;
  color: #fff;
  border: 2px solid #e61d51;
}
.red-fill-button:hover {
  color: #151945;
  text-decoration: none;
}
.red-fill-button:active {
  background-color: #e61d51;
  color: #151945;
  text-decoration: none;
}

.red-outline-button {
  border-radius: 0;
  font-size: 0.813rem;
  font-weight: bold;
  background-color: #fff;
  color: #e61d51;
  border: 2px solid;
}
.red-outline-button:hover {
  color: #151945;
  text-decoration: none;
}
.red-outline-button:active {
  background-color: #e61d51;
  color: #151945;
  text-decoration: none;
}

.red-icon-button {
  border-radius: 0;
  font-weight: bold;
  background-color: #fff;
  color: #e61d51;
  border: 0px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #f8b01c, #e61d51);
}
.red-icon-button:hover {
  background-image: linear-gradient(90deg, #f8b01c, #e61d51);
  color: #151945;
  text-decoration: none;
}

.red-gradient-fill-button {
  border-radius: 0;
  font-size: 0.813rem;
  font-weight: bold;
  background-color: #fff;
  color: #e61d51;
  border: 2px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #f8b01c, #e61d51);
  background-image: linear-gradient(90deg, #f8b01c, #e61d51);
  color: #fff;
  text-decoration: none;
}

.simple-message-button {
  border-radius: 0;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid;
  background-color: #e61d51;
  color: #fff;
  text-decoration: none;
}

.red-nav-button {
  border-radius: 0;
  margin-left: 10rem;
  font-size: 0.813rem;
  font-weight: bold;
  background-color: #e61d51;
  border-color: #e61d51;
  color: #fff;
}
.red-nav-button:hover {
  background-color: #e61d51;
}

.modal-primary-button {
  border-radius: 0;
  font-size: 0.813rem;
  font-weight: bold;
  background-color: #e61d51;
  border-color: #e61d51;
  color: #fff;
}
.modal-primary-button:hover {
  background-color: #e61d51;
}

.modal-secondary-button {
  border-radius: 0;
  font-size: 0.813rem;
  font-weight: bold;
  border-color: #151945;
  color: #151945;
}
.modal-secondary-button:hover {
  background-color: #151945;
  color: #fff;
}