/*

Research Guides Styles
Theme: U-M Library Guides 2024
Layout: Side-nav

- Global elements
- Guide Page
- Homepage
- Search
- Subject
- Profile
- A-Z

*/


/* Layout*/
.s-lib-main {
  padding-bottom: 0;
}

div#s-lib-public-main {
  min-height: 250px;
}

/* Focus */
a:focus {
  outline: 0px;
  box-shadow: 0 0 0 2px var(--color-maize-400), 0 0 0 3px var(--color-neutral-400);
  border-radius: 2px !important;
}

.form-control:focus {
  outline: 0px;
  box-shadow: 0 0 0 2px var(--color-maize-400), 0 0 0 3px var(--color-neutral-400);
  border-radius: 2px !important;
}

div#s-lib-public-main:focus,
div#s-lib-guide-main:focus  {
  box-shadow: none;
  border-radius: 0 !important;
}

/* Buttons */

.btn-primary {
  color: #fff;
  background-color: var(--color-teal-400) !important;
  background-image: none;
  border: solid 1px var(--color-teal-400) !important;
  font-weight: var(--bold);
}

button.s-lg-btn-api-drop.btn.btn-default {
  color: var(--color-neutral-400);
  background-color: var(--color-neutral-100) !important;
  background-image: none;
  border: solid 1px var(--color-neutral-100) !important;
  font-weight: var(--bold);
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Icon for external open */
.fa-external-link {
  font-size: 12px !important;
  color: var(--color-neutral-400);
}

/* Scroll up Back to Top bottom widget */

#s-lib-scroll-top {
 font-size: 1.25em;
}

.fa-stack-1x {
  background-color: #fff;
  border: solid 4px #106684;
  border-radius: 8px;
}

a[aria-label="Back to Top"]:focus {
  outline: 0px;
  box-shadow: 0 0 0 2px var(--color-maize-400), 0 0 0 3px var(--color-neutral-400);
  border-radius: 2px !important;
  padding: 1.5rem .5rem 2.25rem .75rem;
}

/* Typography - Headings */

h1, .s-lib-header h1 {
  font-size: var(--page-heading-size);
  font-family: var(--font-second-family);
  line-height: var(--line-height-page-heading);
  padding-top: 2rem;
}

#s-lg-guide-header-info h1, .s-lib-header h1 {
   font-size: 2.5rem;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-base-family);
  color: var(--color-neutral-400);
}

h2, 
h2.s-lib-box-title,
.s-lib-public-side-header h2  {
  font-family: var(--font-base-family);
  color: var(--color-neutral-400);
  font-size: var(--text-medium);
  font-weight: var(--bold);
}

#s-lg-guide-header-info h1 {
  padding-top: 2rem;
}

/* Admin Command Bar Guide pages */
nav#s-lg-admin-command-bar > ul > li > a {
  font-size: 13px;
}

span#s-lg-guide-name-editable {
  font-size: 2.5rem;
}

.s-lg-admin-guide-page-nav > ul > #s-lg-page-friendly-anchor > div,
.s-lg-admin-guide-page-nav > ul > li > a.dropdown-toggle {
color: var(--color-neutral-400);
}

select.s-lib-enter {
  height: 44px;
  }

/* Dialogs in Admin */
.ui-dialog {
  margin-top: 2rem;
}  

/* Login link */

#s-lib-footer-login-link {
  color: var(--color-teal-400);
  font-size: 1rem;
  font-weight: 600;
   margin-bottom: 1rem;
 }

/* Remove options from CKEditor/WYSIWYG */

.cke_combo__font, .cke_combo__fontsize, .cke_button__textcolor, .cke_button__bgcolor { 
  display: none !important;
}

/* Inputs- Search & Selects */

.search-group {
  display: flex;
  flex-direction: row;
}

.search-group > input[type="search"] {
  padding: 0.75rem .75rem 0.5rem;
  border: solid 1px var(--color-neutral-300);
  border-radius: 2px;
  width: 65%;
  height: 44px;
}

input[type="text"]::placeholder {
  color: var(--color-neutral-300);
  font-size: 1rem;
  font-family: var(--font-base-family);
}

input[type="search"]::placeholder {
  color: var(--color-neutral-300);
  font-size: 1rem;
  font-family: var(--font-base-family);
}

input#s-lg-guide-search-terms {
  font-size: .95rem;
}

.s-lg-widget > div > .form-inline {
  display: flex;
}

.s-lg-widget > div > .form-inline > select {
  color: var(--color-neutral-400);
  font-size: 1rem;
  width: 75%;
  height: 44px;
}

.s-lg-widget > div > .form-inline > button {
  width: 15%;
  height: 44px;
}

.guide-search-box > input#s-lg-guide-search-terms,
 #s-lg-srch-form > input#s-lg-srch-input-q {
  height: 44px;
  padding: 0.75rem .75rem 0.5rem;
  border: solid 1px var(--color-neutral-300);
  border-radius: 2px;
  width: 75%;
}

#s-lg-guide-search-form > .input-group  > .input-group-btn > .btn,
#s-lg-srch-form > .form-group > .input-group  > .input-group-btn > .btn,
#s-lg-az-filter-cols > #col-search > form > .form-group > .input-group  > .input-group-btn > .btn {
  border: var(--color-maize-400);
  background: var(--color-maize-400);
  color: var(--color-neutral-400);
  font-weight: 700;
  font-family: var(--font-base-family);
  border-radius: var(--radius-default);
  padding: .45rem;
  }

#s-lg-guide-search-form > .input-group  > .input-group-btn > .btn {
  display: flex;
  align-items: center;
}


@media screen and (max-width: 320px) {
  .search-group > input[type="search"] {
    width: 85%;
  }
}

.guide-search-box > input#s-lg-guide-search-terms > button.btn.btn-default {
  height: 44px;
  color: var(--color-neutral-400);
  background-color: var(--color-neutral-100) !important;
  background-image: none;
  border: solid 1px var(--color-neutral-100) !important;
  font-weight: var(--bold);
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Hero banner - Homepage */

.guides-homepage-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.guides-homepage-hero > h1.page-heading {
  font-size: var(--page-heading-size) !important;
  font-family: var(--font-second-family);
  line-height: var(--line-height-page-heading);
  padding: 2rem 0 1rem;
}

.guides-homepage__search {
  margin-top: 2.25rem;
 }

.tag-line {
  font-size: var(--text-medium);
  font-weight: var(--bold);
}

.hero-accent-svg {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

@media screen and (max-width: 720px) {
  .hero-accent-svg { 
    opacity: .25;
  }
}

/* Homepage Content Containers */

/*Remove box border and header styling for 3 boxes*/

#s-lg-box-33520457, 
#s-lg-box-33507836, 
#s-lg-box-33514267,
#s-lg-box-33527765,
#s-lg-box-33527738,
#s-lg-box-33527783  {
  border: none;
  background-color: #fff;
  box-shadow: none;
}

#s-lg-box-33520457 > h2.s-lib-box-title, 
#s-lg-box-33507836 > h2.s-lib-box-title,
#s-lg-box-33514267 > h2.s-lib-box-title,
#s-lg-box-33527765 > h2.s-lib-box-title,
#s-lg-box-33527738 > h2.s-lib-box-title,
#s-lg-box-33527783 > h2.s-lib-box-title {
  display: none;
}

.how-to__text{
max-width: 60ch;
}

ul.how-to__guide-list {
  padding-left: 0;
  margin-bottom: 0;
  }
  
ul.how-to__guide-list li {
  list-style: none;
  color: var(--color-teal-400);
  font-weight: bold;
  padding: .5rem 0;
}

ul.how-to__guide-list li:last-of-type {
  padding-bottom: 0;
}
  
ul.how-to__guide-list li a {
  text-decoration: none;
  font-size: 1.25rem;
}

ul.how-to__guide-list li a:hover {
  text-decoration: underline;
}

.view-all-link {
  padding-top: 1rem;
  display: flex;
  gap: .25rem;
}

@media screen and (max-width: 576px) {
  ul.how-to__guide-list {
    max-width: 85%;
   }

   .how-to__text p {
   max-width: 85%;
   }
}

/* Get Help Container */

.get-help-container {
  display: flex;
  flex-flow: row wrap;
  background-color: var(--color-teal-100);
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.get-help-container > * {
  padding: 0 2rem;
}

.get-help-container__image {
  max-width: 450px;
}

@media screen and (max-width: 576px) {
  .get-help-container ul {
    max-width: 85%;
   }

  .get-help-container__image {
    display: none;
  }  

  .get-help-container > * {
    padding: 0 1rem;
  }  
}

.get-help-container ul {
  padding-left: 0;
}

.get-help-container ul li {
  list-style: none;
  padding: 0.5rem 0;
}

.get-help-container ul li {
  color: var(--color-teal-400);
  font-weight: var(--semibold);
}

.help__text > .prose {
  max-width: 45ch;
}

/* Guide page */

div#s-lg-guide-desc-container {
  padding-top: 1rem;
}

.guides-content-box {
  padding-top: 3rem;
}

/* Guide page - Content Column */

.s-lib-box .s-lib-box-title {
  color: var(--color-neutral-400);
  font-size: var(--text-medium);
  font-weight: var(--bold);
  background-color: transparent;
  border-bottom: solid 2px var(--color-neutral-100);
  padding-left: 0;
}

.last-updated-attribute {
  border-top: solid 2px var(--color-neutral-100);
  padding-top: 1rem;
  margin-top: 1rem;
}

.last-updated-attribute > .s-lg-guide-label {
  font-style: italic;
  font-weight: 400;
  color: var(--color-neutral-400);
}

.last-updated-attribute > .s-lg-text-greyout {
  font-style: italic;
  font-weight: 400;
  color: var(--color-neutral-400);
}

.subjects-tag-clouds {
  padding-top: 1.25rem;
  font-size: 1rem;
}

.subjects-tag-clouds > div > span > a {
  color: var(--color-neutral-400);
  background-color: var(--color-teal-100);
  border: solid 2px var(--color-teal-200);
  border-radius: 16px;
  padding: 4px 10px;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
}

.subjects-tag-clouds > div > span > a:hover {
  border: solid 2px var(--color-teal-400);
}

.subjects-tag-clouds > #s-lg-guide-header-subjects,
.subjects-tag-clouds > #s-lg-guide-header-tags
 {
  display: flex;
  gap: .85rem;
  flex-direction: column;
  margin-bottom: 1rem;
}

.subjects-tag-clouds > #s-lg-guide-header-subjects > span.s-lg-small.bold ,
.subjects-tag-clouds > #s-lg-guide-header-tags > span.s-lg-small.bold {
 display: flex;
 flex-flow: row wrap;
 gap: .5rem;
}

/* Guide- Tabs component - main column */

.nav-tabs>li>a {
  font-weight: normal;
  color: var(--color-teal-400);
  border-top: 5px solid transparent;
  color: var(--color-neutral-400);
}

.nav-tabs>li.active>a {
  font-weight: bold;
  color: var(--color-teal-400);
  border-top: 5px solid var(--color-teal-400);
  text-decoration: none;
}

.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  border-top: 5px solid transparent;
}

/* Guide - Side navigation */

div#s-lg-guide-tabs > .nav-pills > li {
  border-top: solid 1px var(--color-neutral-100);
}

div#s-lg-guide-tabs > .nav-pills > li > a, 
#s-lg-tabs-container .nav-pills > li > a {
   background-color: transparent;
   border-left: solid 2px transparent;
   color: var(--color-neutral-400);
   text-decoration: none;
   font-weight: 400;
   padding-top: .25rem;
   padding-bottom: .25rem;
}

#s-lg-guide-tabs .nav-pills > .active > a,
#s-lg-tabs-container .nav-pills > .active > a {
  border-left: solid 2px var(--color-teal-400);
  color: var(--color-teal-400);
  background-color: transparent;
}

#s-lg-tabs-container .nav-tabs > .active > a:hover, 
#s-lg-tabs-container .nav-pills > .active > a:hover {
  color: var(--color-teal-400);
  border-left: solid 2px var(--color-teal-400);
  text-decoration: underline;
  background-color: transparent;
  outline: 0;
}


div#s-lg-guide-tabs > .nav-pills > li > a:hover, 
#s-lg-tabs-container .nav-pills > li > a:hover {
   color: var(--color-neutral-400);
   background-color: transparent;
   border-left: solid 2px transparent;
   text-decoration: underline;
   outline: 0;
}

#s-lg-tabs-container .nav .dropdown-toggle .caret {
  border-top-color: var(--color-neutral-400);
}

ul.list-group.s-lg-boxnav li {
  border: 0;
}

ul.list-group.s-lg-boxnav li a {
  background-color: transparent;
}

.s-lg-tabs-side .s-lg-boxnav .list-group-item {
  border: 0;
  background-color: transparent;
}

#s-lg-tabs-container .nav-pills > li > a.s-lg-tab-top-link {
  font-weight: 400;;
}

.caret {
  border-top: 6px dashed;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

/* Breadcrumb */

nav#s-lib-bc {
  margin-top: 2rem;
}

.breadcrumb,  #s-lib-bc .breadcrumb  {
  font-size: 1rem;
  font-weight: normal;
}

ol#s-lib-bc-list li:first-child {
 display: none;
}

.breadcrumb > li {
  padding-right: .25rem;
}

.breadcrumb>li+li:before {
  content: "";
  margin: 0;
  padding: 0;
}

.breadcrumb>li+li:after {
  content: "\003E";
  color: var(--color-neutral-400);
  margin-left: .5rem;
  margin-right: .5rem;
}

#s-lib-bc .breadcrumb>.active:after {
  display: none;
}

#s-lib-admin-bc .breadcrumb>.active, 
#s-lib-bc .breadcrumb>.active {
  color: var(--color-neutral-400);
}

/* Subject Pages */

#s-lg-sb-search-bar > div > .navbar-default,
.subject-search-navbar > .navbar-default  {
  border: 0;
  background-color: transparent;
}

.s-lib-box-er-course-list, 
.s-lib-box-idx-blog-post-list, 
.s-lib-box-idx-er-course-list, 
.s-lib-box-idx-guide-list {
  border-top: solid 1px var(--color-neutral-100);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

div#s-lg-sb-content-guides > .s-lib-box-content {
 font-size: 1rem;
}

div#s-lg-sb-content-guides > .s-lg-gtitle a {
  text-decoration: none;
}

.s-lg-sb-label-text {
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--color-neutral-300);
  font-weight: bold;
  padding-top: .5rem;
}

section[aria-label="Content by Subject"] {
  margin-bottom: 2rem;
}

/* Search Page */

div#s-lg-srch-local > .navbar-default  {
  border: 0;
  background-color: transparent;
}

.s-srch-result-title, .s-srch-result-meta {
  font-size: 1rem !important;
}

.mark, mark {
background-color: var(--color-maize-400);
color: var(--color-neutral-400);
font-weight: var(--semibold);
}

.s-lg-facet-div-title {
  font-size: 1.15rem !important;
  color: var(--color-teal-400) !important;
  font-weight: var(--bold) !important;
  border-left: solid 2px var(--color-teal-400);
  padding-left: .5rem;
  border-bottom: none !important;
}

.s-lg-facet-div-content {
  border-bottom: solid 2px var(--color-neutral-100);
  padding-bottom: 1rem;
  overflow-y: scroll !important;
}

.s-lg-facet-div-content {
--background-color: rgba(255, 255, 255, 1); /*White bg color */
--shadow-color: rgba(29, 116, 145, 0.55);
--shadow-size:.5em;
--transparent: rgba(255, 255, 255, 0);

overflow-y: scroll;
background: linear-gradient(
    var(--background-color),
    var(--background-color),
    var(--transparent) calc(var(--shadow-size) * 3)
  ),
  radial-gradient(
    farthest-side at 50% 0,
    var(--shadow-color),
    var(--transparent)
  ),
  linear-gradient(
    to top,
    var(--background-color),
    var(--background-color),
    var(--transparent) calc(var(--shadow-size) * 3)
  ),
  radial-gradient(
      farthest-side at 50% 100%,
      var(--shadow-color),
      var(--transparent)
    )
    0 100%;
background-color: var(--background-color);
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;
background-size: 100% 100%, 100% var(--shadow-size), 100% 100%,
  100% var(--shadow-size);
}

input[type="checkbox"] {
  accent-color: var(--color-teal-400);
  width: 18px;
  height: 18px;
  margin-right: 0.75rem !important;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
  background-color: var(--color-teal-400);
  border-color: var(--color-teal-400);
  border-radius: var(--radius-default);
  font-weight: var(--bold);
}

.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
  border-radius: var(--radius-default);
  border: solid 1px var(--color-neutral-300);
}

ul.pagination.pagination-sm {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.5rem;
}

/* Meta data in guide list */

.s-lg-gmeta {
  color: #637381;
   font-size: .95rem;
}

/* Profile page */

.s-ui-helptip > .btn-link {
  color: var(--color-teal-400);
}

i.fa.fa-info-circle.s-lib-popover {
  color: var(--color-teal-400);
}

.s-lg-profile-personal-statement:before {
  content: "About me";
  color: var(--color-neutral-400);
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.margin-bottom-xlg.s-lg-profile-personal-statement {
  background-color: transparent;
  border: 0;
}

.s-lib-profile-email .label-info {
  background-color: #E9F2F5;
  border: solid 2px transparent;
  color: #212B36;
}

.s-lib-profile-email .label-info:focus {
  background-color: #E9F2F5;
  border: solid 2px transparent;
  color: #212B36;
}

.s-lib-profile-email > a {
  display: inline-flex;
  align-items: center;
  padding: 1rem;
  background-color: #E9F2F5;
  border: solid 2px transparent;
  color: #212B36;
}

.s-lib-profile-email > a:hover {
  border: solid 2px #1D7491 !important;
  background-color: #E9F2F5  !important;
  color: #212B36  !important;
  text-decoration: underline;
}

.s-lib-profile-email > a:before {
  content: url(https://d2jv02qf7xgjwx.cloudfront.net/sites/24/include/email.svg);
  padding-right: .5rem
}

/* Not sure we need this anymore */

#g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -78px 0 0 0 !important;
  width: 302px !important;
  height: 76px !important;
  z-index: -999999;
  opacity: 0;
}

/* A to Z */

#s-lg-az-index > div > button {
  color: var(--color-neutral-400);
  font-size: 1rem;
}

#s-lg-az-index >  div > button.bold {
  color: var(--color-teal-400);
  font-weight: var(--bold);
  text-decoration: underline;
}

#s-lg-az-results > .s-lg-db-panel > h3.s-lg-db-panel-title {
  font-size: 1.5rem;
}