/* =========================================================
   MERIVALE MEDICAL IMAGING
   LIVEHELPNOW KNOWLEDGE BASE
   ========================================================= */


/* =========================================================
   GLOBAL FONT
   ========================================================= */

body,
input,
textarea,
select,
button,
a {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}


/* =========================================================
   TOP HEADER
   ========================================================= */

#site-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: 3px solid #78a22f !important;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06) !important;
}

#site-header::before,
#site-header::after {
  background: transparent !important;
  background-image: none !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#nav-primary {
  background: transparent !important;
}

#nav-primary > ul > li > a {
  color: #49176d !important;
  background: transparent !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

#nav-primary > ul > li > a:hover {
  color: #78a22f !important;
  background: transparent !important;
  opacity: 1 !important;
}

#category-dropdown-caret,
#nav-primary .fa-caret-down {
  color: #49176d !important;
}


/* =========================================================
   KNOWLEDGE BASE CATEGORY DROPDOWN
   ========================================================= */

#category-dropdown .category-dropdown {
  background: #ffffff !important;
  border: 1px solid #e4dce8 !important;
  box-shadow: 0 8px 22px rgba(73, 23, 109, 0.14) !important;
}

#category-dropdown .category-dropdown-name,
#category-dropdown .category-dropdown-name a {
  background: #ffffff !important;
  color: #49176d !important;
}

#category-dropdown .category-dropdown-name a {
  display: block !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.category-dropdown-name a:hover,
#category-dropdown .category-dropdown-name a:hover,
#category-dropdown .category-dropdown-name:hover a {
  background: #f2f6eb !important;
  color: #78a22f !important;
}

#category-dropdown .category-dropdown-name:hover {
  background: #f2f6eb !important;
}

#category-dropdown .category-dropdown-name:last-child,
#category-dropdown .category-dropdown-name:last-child a {
  background: #f5f0f8 !important;
  color: #49176d !important;
}

#category-dropdown .category-dropdown-name:last-child:hover,
#category-dropdown .category-dropdown-name:last-child:hover a {
  background: #49176d !important;
  color: #ffffff !important;
}


/* =========================================================
   HERO
   ========================================================= */

#page-header {
  background: #49176d !important;
  background-color: #49176d !important;
  background-image: none !important;
  color: #ffffff !important;
}

#page-header::before,
#page-header::after {
  background: transparent !important;
  background-image: none !important;
}

#page-header-title,
#page-header .search-heading {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#page-header-tagline {
  color: #ffffff !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}


/* =========================================================
   SEARCH FORM
   ========================================================= */

#page-header form.kb-site-search {
  display: grid !important;

  grid-template-columns:
    154px
    minmax(260px, 1fr)
    48px !important;

  grid-template-areas:
    "tabs input submit"
    "advanced advanced advanced"
    "results results results" !important;

  align-items: stretch !important;

  width: 100% !important;
  max-width: 590px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  gap: 0 !important;

  box-sizing: border-box !important;

  position: relative !important;
}


/* =========================================================
   BASIC / ADVANCED TAB GROUP
   ========================================================= */

#advanced-search-buttons {
  grid-area: tabs !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  width: 154px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;

  background: #f5f0f8 !important;

  border: none !important;
  border-radius: 5px 0 0 5px !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}


/* Remove unused icon */
#basic-search-icon {
  display: none !important;
}


/* Both tabs */
#basic-search-button,
#advanced-search-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 77px !important;
  min-width: 77px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;

  border: none !important;
  border-radius: 0 !important;

  box-sizing: border-box !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  cursor: pointer !important;

  opacity: 1 !important;
}


/* Basic default */
#basic-search-button {
  background: #78a22f !important;
  color: #ffffff !important;
}


/* Advanced default */
#advanced-search-button {
  background: #f5f0f8 !important;
  color: #49176d !important;
}


/* Active tab */
#advanced-search-buttons p[style*="opacity: 1"],
#advanced-search-buttons p[style*="opacity:1"] {
  background: #78a22f !important;
  color: #ffffff !important;
  opacity: 1 !important;
}


/* Inactive tab */
#advanced-search-buttons p[style*="opacity: 0.5"],
#advanced-search-buttons p[style*="opacity:0.5"] {
  background: #f5f0f8 !important;
  color: #49176d !important;
  opacity: 1 !important;
}


/* Hover */
#basic-search-button:hover,
#advanced-search-button:hover {
  background: #668c27 !important;
  color: #ffffff !important;
}


/* =========================================================
   SEARCH INPUT CONTAINER
   ========================================================= */

#search-input-container {
  grid-area: input !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;

  box-sizing: border-box !important;
}


/* Search input */
#search-input-container input[type="text"],
#search-input-container input[type="search"],
#search {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  float: none !important;
  position: static !important;

  box-sizing: border-box !important;

  background: #ffffff !important;
  color: #323035 !important;

  border: 1px solid #e0dae4 !important;
  border-left: none !important;
  border-right: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  font-size: 13px !important;
  line-height: normal !important;
}

#search-input-container input::placeholder,
#search::placeholder {
  color: #99969c !important;
  opacity: 1 !important;
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

#main-search-button {
  grid-area: submit !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  min-width: 48px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  transform: none !important;

  box-sizing: border-box !important;

  background: #78a22f !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 0 5px 5px 0 !important;

  box-shadow: none !important;
}

#main-search-button:hover {
  background: #668c27 !important;
  color: #ffffff !important;
}

#main-search-button i,
#main-search-button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* =========================================================
   ADVANCED SEARCH PANEL
   ========================================================= */

#advanced-search-options {
  grid-area: advanced !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 10px 0 0 0 !important;
  padding: 14px 16px !important;

  float: none !important;
  position: static !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    1fr
    1fr !important;

  gap: 12px 18px !important;

  align-items: center !important;

  background: rgba(255, 255, 255, 0.08) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 6px !important;

  color: #ffffff !important;

  text-align: left !important;
}


/* Text inside advanced panel */
#advanced-search-options,
#advanced-search-options label,
#advanced-search-options span,
#advanced-search-options p,
#advanced-search-options div {
  color: #ffffff !important;
}


/* Inputs/selects inside advanced panel */
#advanced-search-options input[type="text"],
#advanced-search-options select {
  width: 100% !important;
  height: 36px !important;

  margin: 0 !important;

  padding: 0 10px !important;

  box-sizing: border-box !important;

  background: #ffffff !important;
  color: #323035 !important;

  border: 1px solid #ded8e2 !important;
  border-radius: 4px !important;
}


/* Checkbox should not stretch */
#advanced-search-options input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

#kb-site-search_results {
  grid-area: results !important;

  width: 100% !important;

  margin-top: 10px !important;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

#page-header-breadcrumbs {
  background: #f5f0f8 !important;
  border-bottom: 1px solid #e7e0ea !important;
}

#page-header-breadcrumbs a {
  color: #49176d !important;
  font-weight: 500 !important;
}

#page-header-breadcrumbs a:hover {
  color: #78a22f !important;
}


/* =========================================================
   GLOBAL HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;

  color: #49176d !important;
  font-weight: 700 !important;
}

#page-header h1,
#page-header h2,
#page-header h3,
#page-header-title,
#page-header-tagline {
  color: #ffffff !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  color: #49176d !important;
  text-decoration: none !important;
}

a:hover {
  color: #78a22f !important;
  opacity: 1 !important;
}


/* =========================================================
   ARTICLE HEADER
   ========================================================= */

header.entry-header,
.entry-header,
.kb-entry-header,
.article-header,
.post-header {
  background: #f5f0f8 !important;

  border-left: 4px solid #78a22f !important;
  border-radius: 8px !important;

  padding: 22px 26px !important;
  margin-bottom: 30px !important;
}

header.entry-header h1,
.entry-header h1,
.entry-title,
.kb-entry-header h1 {
  color: #49176d !important;
  font-weight: 700 !important;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.kb-entry-content,
.entry-content {
  color: #323035 !important;
}

.kb-entry-content h2,
.entry-content h2,
.kb-container h2 {
  color: #49176d !important;
  font-weight: 700 !important;
}

.kb-entry-content h3,
.entry-content h3,
.kb-container h3 {
  color: #49176d !important;
  font-weight: 700 !important;
}

.kb-entry-content p,
.entry-content p,
.kb-entry-content li,
.entry-content li {
  color: #323035 !important;
  line-height: 1.7 !important;
}


/* =========================================================
   ARTICLE LIST LINKS
   ========================================================= */

.kb-article-list a,
.lhn-kb-articles a,
.kb-articles a,
.popular-articles a,
.top-articles a,
.latest-articles a,
[class*="article-list"] a,
[class*="kb-list"] a {
  color: #49176d !important;
}

.kb-article-list a:hover,
.lhn-kb-articles a:hover,
.kb-articles a:hover,
.popular-articles a:hover,
.top-articles a:hover,
.latest-articles a:hover,
[class*="article-list"] a:hover,
[class*="kb-list"] a:hover {
  color: #78a22f !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

a.btn,
.btn,
.button,
.lhn-btn,
input[type="submit"] {
  background: #49176d !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 6px !important;

  font-weight: 600 !important;
}

a.btn:hover,
.btn:hover,
.button:hover,
.lhn-btn:hover,
input[type="submit"]:hover {
  background: #371050 !important;
  color: #ffffff !important;
}


/* Keep main search green */
#main-search-button {
  background: #78a22f !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

#site-footer,
#site-footer-widgets,
footer,
#lhn-footer,
.lhn-footer,
.sp-footer {
  background: #49176d !important;
  color: #ffffff !important;
}

#site-footer a,
#site-footer-widgets a,
footer a,
#lhn-footer a,
.lhn-footer a {
  color: #ffffff !important;
}

#site-footer a:hover,
#site-footer-widgets a:hover,
footer a:hover,
#lhn-footer a:hover,
.lhn-footer a:hover {
  color: #ffffff !important;
  opacity: 0.75 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 680px) {

  #page-header form.kb-site-search {
    grid-template-columns:
      132px
      minmax(120px, 1fr)
      44px !important;

    max-width: 95% !important;
  }

  #advanced-search-buttons {
    width: 132px !important;
  }

  #basic-search-button,
  #advanced-search-button {
    width: 66px !important;
    min-width: 66px !important;

    font-size: 11px !important;
  }

  #main-search-button {
    width: 44px !important;
    min-width: 44px !important;
  }

  #advanced-search-options {
    grid-template-columns: 1fr !important;
  }
}