/* @import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import "https://apps.library.albany.edu/host/ualibraries-branding-assets/css/root-vars.css"; */

@import url('https://apps.library.albany.edu/host/branded-nav/ulib-customized-la-chat-widget.css');


@media print {
  #ual-header,
  footer { 
    display: none; 
  }
}

@media screen {
    html { 
        margin:	0;
        padding: 0;
        scroll-behavior: smooth;
    }   

    body {
        color: var(--primary-text-color);
        background-color: var(--lightest-offset);
        font-family: var(--ua-basic-sans);
        font-size: var(--ua-type-base);
        line-height: var(--ua-line-height-sans);
        text-rendering: optimizeLegibility;
        word-break: break-word;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin:	0;
        padding: 0;
        display: grid;
        transition: all 0.5s ease-in-out;
    }

    .s-lg-guide-body :focus-visible {
      outline: dotted 3px var(--ua-gold);
    }

    .s-lg-guide-body a:focus,
    .s-lg-guide-body a:focus-visible,
    .s-lib-public-body a:focus,
    .s-lib-public-body a:focus-visible {
      outline: dotted 3px var(--ua-gold);
      outline-offset: 5px;
    }

   /*  .s-lg-guide-body .btn.focus, 
    .s-lg-guide-body .btn:focus, 
    .s-lg-guide-body .btn:focus-visible, 
    .s-lg-guide-body .btn:hover */
    
    #s-lg-side-nav-content .btn:is(.focus,:focus,:focus-visible,:hover),
    #s-lg-index-cols .btn-info:is(.focus,:focus,:focus-visible,:hover) {
      color: var(--ua-gold)!important;
      background-color: var(--ua-purple-mid);
      outline: dotted 3px var(--ua-gold);
      outline-offset: 5px;
    }

    .form-control,
    .btn-default {
      color: var(--primary-text-color);
    }

    .input-group-sm>.form-control, 
    .input-group-sm>.input-group-addon, 
    .input-group-sm>.input-group-btn>.btn {
      font-size: var(--ua-type-base);
    }

    .form-control:focus, .form-control:focus-visible {
      border-color: var(--ua-purple-mid);
      outline: dotted 3px var(--ua-gold);

    }


    /*********** override the color of 'basic' links, as set in lg-public.min.css:9 ***********/
    #s-lib-admin-main .dataTables_paginate > ul.pagination > li.paginate_button:not(.disabled):not(.active) > a,
    #s-lib-public-main .dataTables_paginate > ul.pagination > li.paginate_button:not(.disabled):not(.active) > a, 
    .s-lg-link-contrast, 
    .ui-widget-content a, 
    a {
    color: var(--ua-purple);
    }




    /* https://ishadeed.com/article/css-min-max-clamp/ #Dynamic Margin */
    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: min(7vh, 2.75rem) 0 1.05rem;
      font-weight: 400;
      text-wrap: balance;
    }

    img {
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }

    /* new header styles */

      /* undo bootstrap in the header -- old code -- commented out works fine so far...
      #ual-header .col-lg-1, #ual-header .col-lg-10, #ual-header .col-lg-11, #ual-header .col-lg-12, #ual-header .col-lg-2, #ual-header .col-lg-3, #ual-header .col-lg-4, #ual-header .col-lg-5, #ual-header .col-lg-6, #ual-header .col-lg-7, #ual-header .col-lg-8, #ual-header .col-lg-9, #ual-header .col-md-1, #ual-header .col-md-10, #ual-header .col-md-11, #ual-header .col-md-12, #ual-header .col-md-2, #ual-header .col-md-3, #ual-header .col-md-4, #ual-header .col-md-5, #ual-header .col-md-6, #ual-header .col-md-7, #ual-header .col-md-8, #ual-header .col-md-9, #ual-header .col-sm-1, #ual-header .col-sm-10, #ual-header .col-sm-11, #ual-header .col-sm-12, #ual-header .col-sm-2, #ual-header .col-sm-3, #ual-header .col-sm-4, #ual-header .col-sm-5, #ual-header .col-sm-6, #ual-header .col-sm-7, #ual-header .col-sm-8, #ual-header .col-sm-9, #ual-header .col-xs-1, #ual-header .col-xs-10, #ual-header .col-xs-11, #ual-header .col-xs-12, #ual-header .col-xs-2, #ual-header .col-xs-3, #ual-header .col-xs-4, #ual-header .col-xs-5, #ual-header .col-xs-6, #ual-header .col-xs-7, #ual-header .col-xs-8, #ual-header .col-xs-9
      {
          padding-right:0px;
          padding-left:0px;
      }
      */

    #ual-header {
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        background: var(--ua-purple);
        color: var(--white-color);
        margin-bottom: 0.5rem;
        font-family: var(--brand-headline);
        font-size: var(--ua-type-1);
    }


    #ual-header .container {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    #ual-branding {
      display: flex;
      flex-basis: 45%;
      flex-grow: 1;
      align-items: center;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    #ual-branding a {
      text-decoration: none;
    }

    #ual-branding img {
      width: clamp(15.625rem, 13.958rem + 8.333vw, 20.625rem); /* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=250&size-max=330&viewport-min=320&viewport-max=1280 */
      padding: 0 1rem 0 0;
      border-right: 1px solid var(--ua-gold);
    }

    h2#ua-app-title {
      margin: 0 0 0 1rem;
      padding: 0 0 0.5rem 0; 
      color: var(--ua-gold);
      font-family: var(--ua-brand-headline);
      font-size: var(--ua-type-3);
      line-height: 1;
    }

    #ual-header a,
    #ual-header a:hover,
    #ual-header a:focus {
      text-decoration: none;
    }

    /* Top Level Navigation */

    #ual-navigation {
    flex-basis: 0;
    flex-grow: 999;
    transition: all 1s ease;
    align-self: stretch;
    /* border: 3px solid gold; */
    }

    #ual-navigation button { 
      display: none;
      background: transparent;
      border: 0px inset transparent;
      cursor: pointer;
    }

    #ual-navigation button span {
      text-transform: uppercase;
      display: none;
    }
   


    @media (max-width: 768px) {


/*     @media (max-width: 992px) {  */ 
      #ual-branding {
        flex-basis: unset;
        padding-inline-start: 0.5rem;
      }
      #ual-navigation button span {
       /*  display: inline-flex; */
      }

      /* make the content show before the menu -- only on mobile */
      #s-lg-side-nav-content .row {
        display: flex;
        flex-direction: column-reverse;
      }

      #s-lg-guide-tabs {
        
      }

      /* fixes the overflow on mobile */
      .container {
          padding-left: 0;
          padding-right: 0;
      }
    
      .row {
          margin-left: 0;
          margin-right: 0;
      }
      
      .pull-right {
        float: none!important;
      }

      #ual-navigation nav ul a.current-app {
        display: none;
      }

    }

    #ual-navigation img {
      width: 4rem;
    }

    .menu-container {
      display: flex;
      justify-content: flex-end;
    }

   /* tried to get the nav search button to look better 
   when jumping around, but decided it's not worth it...
   
      .s-lg-guide-body #ual-navigation [aria-expanded="true"]:active {
        outline: none;
    } 
   */

    #ual-navigation nav ul {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      justify-items: center;
      height: 100%;
    /*  border: 1px solid blue; */
      margin: 0;
      padding: 0;
    }

    #ual-navigation nav ul a {
      flex-grow: 1;
      padding: 0 1rem;
      min-width: 25%;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid var(--ua-purple-mid);
    }

    #ual-navigation nav ul a.current-app {
      border-block-start: 0.5rem solid var(--ua-gold);
      padding-block-end: 0.5rem;
      color: var(--ua-gold);
    }

    #ual-navigation nav ul a.current-app:hover {
      background: var(--ua-purple);
    }

    #ual-navigation nav ul li:first-child {
      flex-basis: 0;
      flex-grow: 999;
      padding-inline: 0;
      padding-block: 1rem;
    } 

    #ual-navigation nav ul a:last-child {
     /*  width: 15%; */
      white-space: nowrap;
      border-right: 0px solid transparent;
    } 

    #ual-navigation nav a {
      font-family: var(--ua-brand-headline);
      font-size: var(--ua-type-1);
      line-height: 1em;
      /* text-transform: uppercase; */
      /* border: 1px solid white; */
      /* width: 100%; */
      padding: 0.75rem;
    }

    #ual-navigation nav a, 
    #ual-navigation nav a:active, 
    #ual-navigation nav a:visited {
        color: var(--lightest-offset);
    }


    #ual-navigation nav ul a:first-child span.not-highlight {
      display: none;
    }


    #ual-navigation nav ul a {
      transition: all .5s;
    }


    #ual-navigation nav ul a li {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }


    #ual-navigation nav ul a:hover,
    #ual-navigation nav ul a:has(li:hover)  {
        background: var(--ua-purple-mid);
        text-decoration: none;
    }

    /* #ual-navigation nav a span.highlight, */
   /*  #ual-navigation nav ul a li:last-child a {
        color: var(--ua-gold);
    }
 */


    #ual-navigation button {
      display: none;
      position: absolute;
      top: 2.5rem;
      right: clamp(2.5rem, 2vw, 40px);
    }
  


     @media (max-width: 1100px) { 

      #ual-branding {
        flex-basis: 100%;
      }

      #ual-navigation {
        flex-basis: 100%;
      }

      .menu-container {
        display: flex;
        justify-content: center;
        align-items: center;
        
      }

      #ual-navigation nav {
        width: 100%;
      }

      #ual-navigation nav.collapse.in {
        display: flex;
        justify-content: stretch;
      }

      #ual-navigation nav ul li {
        white-space: nowrap;
      }


      #ual-navigation nav ul {
     /*    border-top: 1px solid var(--ua-purple-light);
        background-color: var(--ua-purple-mid); */
        height: unset;
        width: 100%;
      }

  
      #ual-navigation nav ul li a {
       /*  border: 1px solid var(--ua-purple-mid); */
      }

/* 
     }

    @media (max-width: 768px) { 
 */

      #ual-navigation nav ul {
        height: unset;
        width: 100%;
      }
      /* 
      #ual-navigation nav ul li:last-child {
        width: unset;
        min-width: unset;
      } */

    }


    /*  internal page changes */


    /* apply link effect from https://css-irl.info/exploring-has-again/ */

    #s-lg-srch-content a,
    #s-lg-content-databases a,
    #s-lib-public-main #col1 a,
    #s-lg-guide-main a,
    #s-lg-index-list-guides a,
    #s-lg-index-list-subjects a,
    #s-lg-index-list-types a,
    #s-lg-index-list-owners a {
      font-weight: 700;
      transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms;
      text-decoration: underline;
      text-underline-offset: 0.2em;
      text-decoration-thickness: 0.1em;
      line-height: 150%;
      word-wrap: balance;
    }

    :is(#s-lg-srch-content, #s-lg-content-databases, #s-lib-public-main #col1, #s-lg-index-main, #s-lg-index-list-guides, #s-lg-index-list-subjects, #s-lg-index-list-types, #s-lg-index-list-owners) 
    a:is(:hover,:focus,:focus-visible) {
      text-decoration: underline;
      text-underline-offset: 0.35em;
      color: var(--ua-purple);
      text-decoration-color: var(--ua-gold);
      text-decoration-thickness: 0.2em;
      transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms;
    }


    #s-lg-guide-main {
      box-shadow: 0.5rem 0.5rem 0.75rem -0.5rem #AAAAAA;
    }

    /*** breadcrumbs ***/

    #s-lib-admin-bc .breadcrumb a, #s-lib-bc .breadcrumb a {
      font-weight: normal;
      font-size: var(--ua-type-base);
      text-decoration: underline;
      transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms;
      text-underline-offset: 0.1em;
      text-decoration-thickness: 0.05em;
    }


    #s-lib-admin-bc .breadcrumb a:hover, 
    #s-lib-bc .breadcrumb a:hover  {
      text-decoration: underline;
      text-underline-offset: 0.2em;
      color: var(--ua-purple);
      text-decoration-color: var(--ua-gold);
      text-decoration-thickness: 0.1em;
      transition: color 200ms, text-underline-offset 200ms, text-decoration-color 200ms;
    }

    /** when not wide, show first and last -- ellipsis for rest */
    /* 
    .breadcrumb {
      width: 35vw; 
      border: 1px solid red;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; 
    }

    .breadcrumb-item.active {
      border: 1px solid blue;
    } */



    #s-lg-guide-header a{
      color: var(--ua-purple-mid);
    }

    #s-lg-guide-header-info h1 {
      font-size: var(--ua-type-4);
      font-family: var(--ua-brand-headline);
      line-height: 1;
    /*   margin: min(7vh, 5rem) 0 min(5vh, 2.75rem) 0; */  
      margin-block-start: var(--ua-space-xl);
      margin-block-end: var(--ua-space-2xs);
      margin-inline-start: 0;
      margin-inline-end: 0;
    }


    /* guide search box */
    .input-group-sm > .input-group-btn > .btn {
      line-height: 1;
      font-size: var(--ua-type-base);
    }

    #s-lg-guide-header-search {
      margin-block-start: calc(var(--ua-space-xl) - var(--ua-space-xs));
      margin-block-end: var(--ua-space-xs);
    }

    #s-lg-guide-search-box {
      margin-top: 3px;
    }

    #col2 #s-lg-guide-search {
      margin-block-end: 0.75rem;
    }

    .s-lg-az-result-description, .s-lg-az-result-moreinfo, .s-lg-az-result-moreinfo-link,
    #s-lg-guide-desc-container {
      /* border: 1px solid red; */
      margin-block-start: var(--ua-space-xs);
      margin-block-end: var(--ua-space-s);
    }

    .s-lg-az-result-description, 
    .s-lg-az-result-moreinfo, 
    .s-lg-az-result-moreinfo-link,
    .s-lg-database-moreinfo {
      font-size: var(--ua-type-1);
    }

    .s-lg-database-moreinfo {
      line-height: 133%;
      margin-left: 5rem;
    }
    
    .s-lg-db-panel-title {
      font-size: var(--ua-type-2);
      margin: 2.5rem 2.5rem 1rem 2.5rem;
      padding-bottom: 0.25rem;
      border-bottom: 3px solid var(--ua-gold)!important;
    }


    @media (max-width: 992px) {

      #s-lg-guide-header {
        padding-inline: 1rem;
      }

      #s-lg-guide-header-search {
        margin-block-start: 0;
        margin-block-end: var(--ua-space-xs);
        float: none;
      }

      #s-lg-guide-search-box {
        margin-left: 0;
      }
      

    }


    /*** main ***/


    #s-lg-side-nav-content .row,
    #s-lg-side-nav-content .row > * {
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-left: 0;
      padding-right: 0;
    }

    #s-lg-side-nav-content .row .col-md-9 {
      margin-block-end: 5rem;
    /*  border-bottom: 1px solid var(--ua-purple-mid); */
    /*   box-shadow: 0 8px 6px -6px #AAAAAA; */
    }

    /* 
    #s-lg-side-nav-content .row #s-lg-tabs-container {
      padding-right: 3rem;
    }
    */


    .s-lib-box-content li ~ li {
    /*  border: 1px solid red; */
      padding-top: var(--ua-space-s);
    }


    /* HACK -- must override Libguide inline CKEditor styles -- but can't important on var()s! */

    .col-md-9 .s-lib-box *:not(h1,h2,h3,h4,h5,.s-lib-vox-title) {
      font-size: 16px!important;
      font-weight: 400;
      line-height: var(ua-line-height-body-sans);
      line-height: 165%;
    }

    .col-md-9 .s-lg-tab-content a,
    .col-md-9 .s-lib-box a[style],
    .col-md-9 .s-lib-box a span[style] {
    color: var(--ua-purple-mid)!important;
    background-color: transparent!important;
    text-decoration: underline;
    }

    .col-md-9 strong,
    .col-md-9 strong a,
    .col-md-9 strong a span[style],
    .col-md-9 b {
      font-weight: 700!important;
    }


    .col-md-9 ul li, 
    .col-md-9 ol li {
    line-height: 200%;
    padding-bottom: 0.5rem;
    }

    .s-la-widget-embed {
      overflow: auto;
      height: 50vh;
      margin-block-end: 3vh;
    }

    .s-la-faq-listing-q {
      margin-bottom: 0.5rem;
    }

    .s-la-widget .s-la-faq-listing-meta .metalabel,
    .s-la-widget .s-la-faq-listing-meta .metavalue,
    .s-la-widget .s-la-faq-listing-topics .label-topic a {
      padding-right: 0px!important;
      font-size: 0.8rem!important;
    }
    

    /*** sidebar ***/
    .s-lg-tabs-side .s-lg-boxnav {
      font-family: var(--ua-brand-headline);
    }

    .nav-stacked > li + li {
      margin-top: 0.25rem;
    }
    
    #s-lg-tabs-container .nav-stacked.nav-pills > li > a,
    #s-lg-tabs-container .nav-stacked.nav-pills > a {
      border-left: 3px solid var(--ua-purple-mid);
      border-radius: 0 0 0 0px!important;
      transition: all 0.5s ease-in-out;
    }

    .col-md-3 .nav>li>a:hover,
    .col-md-3 #s-lg-tabs-container .nav-stacked.nav-pills > a:hover {
      border-left: 3px solid var(--ua-gold);
      transform: scale(105%);
      outline: 0px solid transparent;
    }


    #s-lg-tabs-container .nav-stacked.nav-pills > .active > a {
      background: linear-gradient(90deg, rgba(99,41,142,1) 0%, rgba(80,29,120,1) 66%, rgba(69,22,106,1) 100%);
      color: var(--ua-gold);
      padding-block-start: 1.25rem;
      padding-block-end: 1.25rem;
      font-size: var(--ua-type-2);
      font-weight: 400;
      border: 0px;
    }


    #s-lg-tabs-container .nav-stacked.nav-pills > .active > a:hover {
      transform: none;
    }


    .nav>li>a:focus, .nav>li>a:focus-visible {
      background-color: var(--ua-purple);
      outline: dotted 3px var(--ua-gold);
    }

    /* 
    overrides inline settings from General Look and Feel
    https://albany.libapps.com/libguides/lookfeel.php
    */

    #s-lg-tabs-container .nav-tabs > li > a, 
    #s-lg-tabs-container .nav-tabs > li > button, 
    #s-lg-tabs-container .nav-pills > li > a, 
    #s-lg-tabs-container .nav-pills > li > button {
      background-color: var(--ua-purple-light);
      color: var(--ua-purple);
      border-radius: 0 0 0 0;
    /*  border: 0px!important; */
      font-family: var(--ua-brand-headline);
      font-size: var(--ua-type-1);
      font-weight: 400;
      padding-block-start: var(--ua-space-s);
      padding-block-end: var(--ua-space-s);
      margin-inline-end: 0rem;
    /*   box-shadow: -1.5rem 0px 0.75rem -1.5rem var(--ua-purple-mid) inset,
                  0.5rem 0.5rem 0.75rem -0.5rem #AAAAAA;   */
    }

    .nav-stacked > li + li:not(.active),
    #s-lg-tabs-container .nav-pills > li > a:not(.active) {
    /*  border-left: 3px solid var(--ua-purple-mid); */
    /*   clip-path: polygon(0 0, 0.25rem 100%, 100% 100%, 100% 0%); */  
    /*  clip-path: polygon(0% 0%, 0% calc(100% - 1.5rem), 1.5rem 100%, 100% 100%, 100% 0%); */
    transition: all 0.5s ease-in-out;
    }

    #s-lg-tabs-container .nav-pills > li > a:not(.active) {
      border: 0px;
      border-left: 3px solid var(--ua-purple-mid);
    }

    /* .nav-stacked > li + li:not(.active):hover, */
    #s-lg-tabs-container .nav-pills > li > a:not(.active):hover {
      /* clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 100% 100%, 100% 0%); */
      border-left: 3px solid var(--ua-gold);
      transform: scale(105%);
    }

    #s-lg-guide-tabs-title-bar {
      border-top: 0px!important;
    }

    /* 
    #s-lg-tabs-container .nav-tabs::before {
        content: "Guide Sections >";
        width: auto; 
        background: #ffffff;
        height: 32px;
        display: block;
        float: left;
        padding-top: 2px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 10px;
        margin-right: 5px;
        margin-bottom: 10px;
        margin-top: 2px;
        font-family: var(--ua-brand-headline);    
        color: #642a90;
        font-size: 1.1em;
    } */


    #s-lg-tabs-container .nav-tabs > li > a {
      font-family: var(--ua-brand-headline);
      font-weight: 300;
      font-size: var(--ua-type-1);
      border-radius: 0 0 0 0;
    }

    #s-lg-tabs-container .nav-tabs > .active > a {
      border-radius: 0 0 0 0 ;
    }

    #s-lg-side-nav-content .s-lg-tab-content {
      /* border-left: 0.33rem solid var(--ua-purple); */
      margin-left: 2rem;
    }

    @media (max-width: 992px) {

        #s-lg-side-nav-content .s-lg-tab-content {
          /* border-left: 0.33rem solid var(--ua-purple); */
          margin-left: 0rem;
          margin-inline: 0.5rem;
        }
    }

    .s-lg-tabs-side .s-lg-boxnav .list-group-item {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    /********* Submenus on left sidebar -- in page navs **********/

    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item {
      padding:var(--ua-space-s);
      margin-bottom:0;
      background-color:var(--ua-gold-mid);
      border:0px solid transparent;
      border-left:3px solid transparent;
      /* border-bottom: 1px solid var(--ua-gold); */
      font-size: var(--ua-type-1);
    }


    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item a {
      display: block;
    }


    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item {
      transition: all .5s;
    }
    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item:hover {
      background-color:var(--ua-gold);
      border-left:3px solid var(--ua-purple-mid);
    }

    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item:hover a {
      color: var(--ua-purple);
      text-decoration: none;
    }

    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item:first-child {
      border-top-left-radius:0px;
      border-top-right-radius:0px;
    }

    .s-lg-tabs-side .active .s-lg-boxnav .list-group-item:last-child{
      margin-bottom:var(--ua-space-m);
      border-bottom-right-radius:0px;
      border-bottom-left-radius:0px;
      border-bottom: 0px solid var(--ua-gold);
    }


    #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-top-link, 
    #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-top-link,
    #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-top-link:hover, 
    #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-top-link:hover {
      padding-block-start: var(--ua-space-s);
      padding-block-end: var(--ua-space-s);
      margin-inline-end: 0rem;
      font-weight: inherit;
    }

    #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-drop, 
    #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-drop {
      padding-block-start: var(--ua-space-s);
      padding-block-end: var(--ua-space-s);
      border-left: 1px solid var(--ua-purple-mid);
      color: var(--ua-purple-mid);
    }

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


    #s-lg-tabs-container .nav-pills > li > a.s-lg-tab-drop:hover, 
    #s-lg-tabs-container .nav-pills > li > button.s-lg-tab-drop:hover {
      padding-block-start: var(--ua-space-s);
      padding-block-end: var(--ua-space-s);
      transform: none;
    }

    .dropdown-menu:not:[aria-labelledby*="admin"] {
      border-radius: 0px;
    }

    .split-button-nav .dropdown-menu:not:[aria-labelledby*="admin"] {
      width: 100%;
      font-size: var(--ua-type-1);
    }

    .dropdown-menu:not:[aria-labelledby*="admin"] > li > a {
      font-family: var(--ua-brand-headline);
      padding-block-start: var(--ua-space-xs);
      padding-block-end: var(--ua-space-xs);
      transition: all 0.5s;
    }

    .dropdown-menu:not:[aria-labelledby*="admin"] > li > a:focus, 
    .dropdown-menu:not:[aria-labelledby*="admin"] > li > a:hover {
      background-color: var(--ua-gold-light);
    }

    .s-lg-item-quicksort-button {
        background: var(--ua-purple-light);
    }

    .s-lg-tabs-side .s-lg-boxnav li {
      border-radius: 0px;
      margin-top: 0px;
      transition: all .5s;
    }

    .active + .s-lg-boxnav {
      font-size: var(--ua-type-1);
    }

    .active + .s-lg-boxnav li:has(a:hover) {
      background-color: var(--ua-gold-mid);
    }


    .active + .s-lg-boxnav a:hover {
      color: var(--ua-purple);
      text-decoration: none;
    }

    /*** main guide content -- big column ***/

    .s-lg-guide-info-views {
      display: none;
    }

    .s-lib-box {
        border-color: transparent;
        border-width: 0px;
        box-shadow: 0 0px 0px 0px transparent;
        border-radius: 0px 0px 0px 0px;
        background-color:transparent;
        margin-bottom: 0px;
    }

    #col2 .s-lib-box .s-lib-box-title {
        display: none;
    }

    .col-md-9 .s-lib-box-content {
      padding: var(--ua-space-xl);
      background: var(--white-color);
    }
    
    :is(#s-lg-index-list, #s-lg-sb-content-guides,#s-lg-sb-content-databases) .s-lib-box-content {
    /*  padding: 1.5rem 3rem; */
      padding-inline: var(--ua-space-l);
      padding-block: var(--ua-space-s);
    }

    :is(#s-lg-sb-content-guides) .s-lib-box-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-flow: row-reverse;
    }

    .s-lib-box-container .s-lib-floating-box {
      padding: 0;
      /* padding: var(--ua-space-s); */
      background-color: transparent;
    }

    
    .s-lg-page-section {
       border-bottom: 0px solid transparent;
    }

    .s-lg-page-section h4 {
       color: var(--ua-purple);
       font-size: var(--ua-type-3);
       font-family: var(--ua-brand-headline);
    }

    .s-lg-tab-content .s-lg-page-section:not(:first-child) {
      margin-block-start: 4rem;
    }

    .s-lib-floating-box-content {
      background: transparent;
    }

    #s-lg-guide-main .s-lib-floating-box-content img {
      max-width: 32%; 
      float: right;
      margin-left: 1%;
      height: auto;
    }

    #s-lg-guide-main #s-lg-col-1 .s-lib-box .s-lib-box-title {
      background-color: var(--ua-purple);
      padding: 1.25rem 2.5rem;
      padding-inline-start: var(--ua-space-xl);
      background-image: none;
      color: var(--white-color);
      /* text-shadow: 2px 3px 3px rgba(0,0,0,0.1); */
      font-weight: 400;
      border-radius: 0px 0px 0px 0px;
      font-family: var(--ua-brand-headline);
      font-size: var(--ua-type-2);
    /*   font-size: calc(var(--ua-type-2) + 0.33rem); */
    /*  border-bottom: 1rem solid var(--ua-purple-mid); */
    /*  border-right: 1rem solid var(--ua-purple-mid); */
    /*  transform: translateX(0.5rem); */
    }


    /* 
    #s-lg-guide-main #s-lg-col-1 .s-lib-box h5 {
      border-top: 1px dashed #846A98;
      padding-top: 15px;
    } */

    .col-md-9 .s-lg-tab-content a.databases-btn {
      background: var(--ua-gold-mid)!important;
      /* color: var(--white-color)!important; */
      padding: 0.75rem 1.9rem;
      border-radius: 0.5rem;
      margin-top: 1rem;
      text-decoration: none!important;
    }


    .col-md-9 .s-lg-tab-content a.databases-btn:is(.focus, :focus, :focus-visible, :hover) {
      background: var(--ua-purple-mid)!important;

    }

    /* mobile for left column -- flex 50/50 */
    /* 
    #s-lg-guide-tabs {
      display: flex;
    }

    #s-lg-guide-tabs ul.nav-pills {
      flex-grow: 1;
    }
    */

    .col-md-9 .s-lg-tab-content a.btn-primary,
    #s-lg-guide-main a.btn-primary {
      background-image: unset;
      text-shadow: unset;
      border-color: var(--ua-purple-mid);
      text-decoration: none;
    }

    .col-md-9 .s-lg-tab-content a.btn-primary.btn:is(.focus,:focus,:focus-visible,:hover),
    #s-lg-guide-main a.btn-primary:is(.focus,:focus,:focus-visible,:hover) {
      color: var(--ua-purple)!important;
      border-color: var(--ua-purple);
      background-color: var(--ua-purple-light)!important;
    }
 


    /* on the Subjects Page */
    /* also defined in the LGAZ homepage for the sidebar -- watch for conflicts */

    #by_subject_list li a {
      border-color: transparent;
      border-width: 0px;
      box-shadow: 0 8px 6px -6px #AAAAAA;
      border-radius: 0px;
      background-color: var(--white-color);
      padding: 1.5rem 1.5rem 1.5rem 1.5rem;
      display: block;
      text-decoration: none!important;
    }

    #by_subject_list ul {
      padding-inline: 0;
      list-style: none;
    }

    @media (min-width: 993px) { 
      #by_subject_list ul {
        column-count: 3;
      }
     }

    #by_subject_list li {
      padding: 0;
      margin-block-end: 1rem;
    }

    #by_subject_list li a:is(.focus,:focus,:focus-visible,:hover){
      background-color: var(--ua-gold-mid);
     /*  transition: all .5s;
      transform: scale(115%); */
    }


    /* moved search bar to top instead of 3rd column */

    #s-lg-sb-search-bar h2{
      border-bottom: 0px solid transparent;
      padding-bottom: 0px;
    }

    #s-lg-sb-search-bar details[open] h2 {
      border-bottom: 1px solid var(--ua-gold);
      padding-bottom: 0.25rem;
    }

    #s-lg-sb-search-bar details {
      display: unset;
      border: 1px solid var(--ua-purple-mid);
      /* color: var(--ua-purple-mid); */
      border-radius: 5px;
      padding: 5px 10px;
      text-decoration: none !important;
      transition: all .5s;
      margin-bottom: 2rem;
      cursor: pointer;
    }

    #s-lg-sb-search-bar details:is(:hover,:focus,:focus-visible) {
      background-color: var(--ua-gold-mid);
    }

    #s-lg-sb-search-bar details[open] {
      background-color:var(--white-color);
    }

/* this didn't work... :(
    #s-lg-sb-search-bar details::marker {
      content: "▶";
    }

    #s-lg-sb-search-bar details[open]::marker {
      transform: rotate(45deg);
    }
 */

    #s-lg-sb-search-bar details[open] .margin-bottom-xlg .s-lib-public-side-header h2{
      display:none;
    }

    #s-lg-sb-search-bar details[open] .margin-bottom-xlg {
      margin-bottom: 0.5rem!important;
    }

    
    #s-lg-sb-cols {
      margin-top: 1.5rem;
    }



    /* ******* guide author box ******* */



    /* ---- from temp styles file -- Subject Gateways ----*/ 
    #s-lg-guide-tabs .s-lg-col-boxes {
      margin-inline-start: 3rem;
      margin-inline-end: 3rem;
    }
    /* 
    #s-lg-guide-main #s-lg-col-2 .s-lib-box .s-lib-box-title {
      background-color: #eeb211;
      color: #46166b;
      padding: 16px;
      border-radius: 0px 0px;
      font-family: var(--ua-brand-headline);
      font-size: 1.1em;
    } */

    .s-lib-profile-div a:focus, .s-lib-profile-div a:focus-visible {
      outline: dotted 3px var(--ua-gold);
      outline-offset: 5px; 
    }

    .s-lib-profile-name {
      font-family: var(--ua-brand-headline);
      color: var(--ua-purple-mid);
      padding-bottom: 1.5rem;
      font-size: var(--ua-type-2);
    }

    .label-info {
      background-color: var(--darker-gray-color);
      color: var(--ua-gold);
      font-family: var(--ua-brand-headline);  
      font-weight: 300;
      text-transform: uppercase;
      border-radius: 0px;
      padding: var(--ua-space-xs) var(--ua-space-s);
    }

    .label-info[href]:focus, .label-info[href]:hover {
      color: var(--ua-gold);
      background-color: var(--ua-purple);
    }

    .s-lib-profile-email {
      margin-bottom: var(--ua-space-xl);
    }

    /***** 

    profile details should have a bgcolor as long as there is CONTENT 
    ie div is not empty, but :empty won't work due to spaces inside tags... 
    so we use has() to see if there's actually an element... 
    in this case <strong> is used for titles within the divs

    *****/

    .s-lib-profile-div:has(strong) {
      padding: var(--ua-space-xs);
      background-color: var(--ua-gold-light);
      border-left: 2px solid var(--ua-gold-mid);
    }


    #s-lg-guide-main #s-lg-col-1 .s-lib-box .clearfix:first-child h5 {
      border-top: 0px solid #cccccc;
      padding-top: 0px;
      margin-top: 0px;
    }

    #s-lg-guide-tabs .s-lib-box .s-lib-box-title {
      background-color: var(--lightest-offset);
      background-image: none;
      color: var(--ua-purple);
      text-align: center;
      font-family: var(--ua-basic-sans);
    } 

    /* ******* pager bottom nav styles ******* */


    .pager li > a, 
    .pager li > span {
      border-radius: 0;
      border: 0px solid transparent;
      transition: all 0.5s ease-in-out;
      text-decoration: none;
      background: transparent;
    }


    .pager li.previous > a:hover,
    .pager li.previous > span:hover {
      transform:translateX(-.5rem);
      background: var(--ua-gold-mid);
      color: var(--ua-purple);
    }

    .pager li.next > a:hover {
      transform:translateX(.5rem);
      background: var(--ua-gold-mid);
      color: var(--ua-purple);
    }


    #s-lib-scroll-top {
      right: 0px;
      top: 50%;
    }


    #s-lib-scroll-top a:focus,
    #s-lid-scrool-top a:focus-visible {
      outline-offset: 10px!important;
    }

    .svg-inline--fa.fa-stack-2x {
      width: unset;
      height: unset;
    }

    .fa-stack {
      display: grid;
    }

    @media (min-width: 1281px) { 
        #s-lib-scroll-top {
          right: clamp(10px, calc((100vw - 1170px)/8), 5vw);
        }

        /* 
        #s-lib-scroll-top a {
          color: var(--ua-purple-mid);
        }
        */
        #s-lib-scroll-top a span {
          transition: all .5s;
          color: var(--ua-purple-mid);
        }
        #s-lib-scroll-top a:hover span {
          transform: scale(115%);
        }
    }      /** end media query **/



    
      /* ********* for XML DataTable js **************
                that powers the Reserves widget 
         ******************************************   */


    .dataTables_wrapper .dataTables_length select {
        padding: 2px 4px !important; /* back to lg's standard */
    }



    
    
      /********************************************** 
      ************** new footer styles ************** 
      ***********************************************/

    .s-lib-footer {
      border-top: 0px solid #ffffff;
      background-color: transparent;
    }

    footer {
        background-color: var(--ua-purple);
        color: #ffffff;
        margin-bottom: 0px;
        margin-top: 0px;
        position: relative;

        padding-block-start: clamp(0.5rem,5vh,10rem);
        padding-block-end: clamp(2rem,10vh,50rem);
                 
    }

    footer h3 {
      color: #ffffff;
    }

    footer a {
      color:var(--ua-gold-mid);
     /*  text-decoration: underline; */
    }
    
    footer a:hover {
      text-underline-offset: 0.2em;
      color: var(--ua-gold-light);
     }

    footer .cta-link {
      font-size: var(--ua-type-3);
      display: grid;
      grid-auto-flow: row;
      gap: 1rem;
      align-content: center;
      justify-items: center;
      /* margin-inline-start: 2.5rem; */
      font-family: var(--ua-brand-headline);
      transition: all .5s ease;
      padding-block: 1.25rem;
      margin-block-end: 1rem;
    }

    footer .cta-link:hover, 
    footer .cta-link:focus-visible {
      transform: scale(1.125);
      color: var(--white-color);
      text-decoration: none;
    }

    footer nav {
      margin-block-end: 2.5rem;
    }
/* 
    footer .nav > li:first-child a {
      padding-top: 0px;
    }


    footer .nav > li:last-child a {
      padding-bottom: 2.5rem;
    } */


    /* override lg-public.css ln 5 and 7 */

     
    .nav > li > a:hover {
      outline: dotted 1px transparent;
      text-decoration: underline;
      background-color: transparent;
    }
 
    footer .cta-link:focus, 
    .nav > li > a:focus,
    #footer-ccbync-row a:focus,
    #ual-navigation nav a:focus,
    #ual-header a:focus,
    #ual-navigation button:focus {
      outline: dotted 3px var(--ua-gold);
      text-decoration: inherit;
      color: white;
    }


    #footer-branding {
      padding: 0 2.5rem;
      line-height: 150%;
    }

    #footer-branding a {
      display: block;
    }
    #footer-branding a img {
      margin-block-end: 2.5rem;
      transition: all .5s;
    }

    #footer-branding a:hover img {
      transform: scale(1.1);
    }

    #footer-branding .btn-group-sm > .btn, 
    #footer-branding .btn-sm {
      border-radius: 0px;
      border: 1px solid var(--ua-gold);
      display: block;
      padding-block: 1.25rem;
      font-family: var(--ua-brand-headline);
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      transition: all 500ms;
    }

    #footer-branding .btn:is(.focus,:focus,:focus-visible,:hover) {
      color: var(--ua-gold)!important;
      background-color: var(--ua-purple-mid);
      outline: dotted 3px var(--ua-gold);
      outline-offset: 5px;
    }

    #footer-ccbync-row {
      border-top: 1px solid var(--ua-gold);
      padding-block-start: clamp(1rem, 2vh, 2rem);
      margin-block-start: 1rem;
      text-align: center;
      text-wrap: balance;
    }

    .cc-by-nc img {
      display: inline-block;
      height: 1.25rem;
      width: 6.719rem;
      margin-right: 0.25rem;
    }

    @media (max-width: 992px) {
      footer #footer-content-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
      }

      footer .row:before {
        display: none;
      }

      #footer-branding {
        text-align: center;
      }

      #footer-ccbync-row {
        border-top: 0px solid transparent;
        padding-inline: 1rem;
        padding-block-start: 2rem;
      }


    }

    /* fix old stuff styles */


    /* guide homepage / listing page */

    .s-lib-public-side-header h2 {
      color: var(--primary-text-color);
      /* font-family: var(--ua-brand-headline); */
      font-size: var(--ua-type-1);
      font-weight: 700;
      border-bottom: 1px solid var(--ua-gold);
      padding-bottom: 0.75rem;
    }


    #s-lg-az-nav, #s-lg-er-nav, #s-lg-hp-nav, #s-lg-profile-nav, #s-lg-srch-nav {
      color: var(--ua-purple);
      background: var(--ua-purple-light);
      border-radius: 5px;
      margin-bottom: 20px;
      padding: 0;
    }

    #s-lg-er-nav-bottom, #s-lg-hp-nav-bottom, #s-lg-srch-nav-bottom {
      background-color: var(--ua-gold-light);
    }

    #col1 .nav-tabs li:last-of-type {
      display: none;
    }

    #col1 .nav-tabs.margin-bottom-med {
      margin-bottom: 0px!important;
    }

    #col1 .tab-content,
    #s-lg-hp-nav {
      box-shadow: 0.5rem 0.5rem 0.75rem -0.5rem #AAAAAA;
      border-left: 1px solid #ddd;
    }

    .s-srch-results {
      background-color: var(--white-color);
      padding: 0rem 2.5rem 2rem 2.5rem;
      margin-top: 2rem;
    }


    .s-srch-result {
      font-size: var(--ua-type-1)!important;
      border-bottom: 1px solid var(--ua-gold)!important;
    }

    .s-srch-result > div {
      margin: 1rem 1rem 1rem 1rem;
    }

    .s-srch-result-title {
      padding-bottom: 1rem;
    }
/* 
    .s-srch-result > div:last-of-type {
      margin-bottom: 1rem;
    } */

    .metalabel,
    .s-srch-result-meta a {
      font-weight: 400!important;
    }

    .s-srch-result-guide,
    .s-srch-result-guide a{
      font-weight: bold!important;
    }

    .s-srch-result-highlights {
      margin-bottom: 2rem;
    }

    #col1 .pull-left {
      float: none!important;
    }

    #col1 .pull-left h2.muted {
      padding-left: 1.5rem;
      margin-top: 0px;
      padding-top: 2.5rem;
      padding-bottom: 1rem;
    }

    #s-lg-sb-content-databases.pad-right-sm,
    #s-lg-sb-content-guides.pad-right-sm {
      margin-right: 0px!important;
    }

    #s-lg-sb-content-databases,
    #s-lg-sb-content-guides,
    #s-lg-sb-content-guides > div:nth-child(2n-1),
    #s-lg-index-list-guides #col-1 > div:nth-child(2n-1) {
      background: var(--white-color);
    }

    #s-lg-sb-content-guides > div,
    #s-lg-index-list-guides #col-1 > div,
    .panel-group {
      border: 1px solid var(--white-color);
      background-color: var(--lightest-offset);
    }

    .panel-default > .panel-heading,
    .panel-heading,
    .panel-default,
    .panel,
    .panel-group .panel {
      border-radius: 0 0 0 0;
      box-shadow: none;
      border-color: transparent;
      background-color: transparent;
    }

    .panel-heading {
      padding: 1.5rem;
    }

    .panel-group > div:nth-child(2n-1) {
      background: var(--white-color);
    }

    #s-lg-content-databases a,
    #s-lib-public-main a,
    #s-lg-index-list-guides a,
    #s-lg-index-list-subjects a,
    #s-lg-index-list-types a,
    #s-lg-index-list-owners a {
      font-size: var(--ua-type-1);
    }

    #s-lg-index-list-subjects .panel-body .alert div {
      padding-block: 0.5rem;
    }
    
    #s-lg-index-list-subjects .panel-body .alert div a {
      font-size: var(--ua-type);
    }

    :is(#s-lg-index-cols, #s-lib-public-main) :is(.txt) {
      line-height: 1.5;
      margin-block-start: 0.5rem;
      margin-block-end: 2rem;
    }

    :is(#s-lg-index-cols, #s-lib-public-main) :is(.txt) {
      line-height: 1.5;
      margin-block-start: 0.5rem;
      margin-block-end: 2rem;
    }


/*     #s-lg-sb-search-bar .btn:is(.focus,:focus,:focus-visible,:hover), */
    :is(#s-lg-content-databases, #s-lg-index-cols, #s-lib-public-main, #s-lg-sb-search-bar) :is(.btn-primary, .btn-info, .btn-info.active, .btn-info:active) {
      background-color: var(--ua-purple-mid)!important;
      background-image: unset;
      border-color: transparent;
    }


    /* index list filters */
    .nav-pills > li.active > button,
    .nav-pills > li.active > button:focus,
     .nav-pills > li.active > button:hover  {
      background-color: var(--ua-purple-mid);
    }

    .nav-pills > li.active > button:hover {
      color: var(--ua-gold);
      background-color: var(--ua-purple);
    }
  
    .nav .s-lg-index-nav-btn > button:hover {
      border-color: var(--ua-purple);
      color: var(--ua-purple);
    }

    .nav .s-lg-index-nav-btn > button {
      color: var(--ua-purple);
    }

    .s-lib-featured-profile-image {
      background: #ffffff;
    }

  

    /* admin style fixes */

    .col-md-9 .s-lg-tab-content a.s-lg-edit-link {  
      text-decoration: none!important;
      color: #ffffff;
      opacity: 0.85;
      transition: 0.2s all ease;   
    }

    .col-md-9 .s-lg-tab-content a.s-lg-edit-link i {
      color: #ffffff;
      opacity: 0.85;
      transition: 0.2s all ease;
    }

    .col-md-9 .s-lg-tab-content a.s-lg-edit-link:hover,
    .col-md-9 .s-lg-tab-content a.s-lg-edit-link:hover i {
      transform: scale(1.25);
      opacity: 1;
    }


    .col-md-9 .s-lg-tab-content button.close {
      color: #ffffff;
      text-decoration: none!important;
      transform: scale(2);
      opacity:1;
      text-shadow: none;
      transition: 0.2s all ease;
      top: 1px;
      margin-inline-start: 10px;
    }

    .col-md-9 .s-lg-tab-content button.close:hover {
      transform: scale(2.5);
    }

    .dropdown-toggle .fa-edit {
        transform: scale(1.25);
    }


  } /* end screen media query */