/*==============================================*/
/* Jeffrey's Functional CSS Customisations [START]
/*==============================================*/

/* General/Core/Base Style */

/*---------------------------------------------*/
/* Document Page Style */
/*---------------------------------------------*/
/* TOC Style */
.smaller {
  font-size: 80%;
}
/* div.ulukautocgroupinghide { */
/*   display: none; */
/* } */
div.ulukautocgroupingshow {
  display: block;
}
div.ulukautocgroupingexpandable {
  cursor: pointer;
  transition: background-color ease-in 0.2s;
}
div.ulukautocgroupingexpandable:hover {
  background: #b0b0b0;
}

/* Document Content Display */
ul#documentdisplayleftpanetabgroup {
  border-bottom: 0px;
}
div.documentdisplayleftpanetabareaheader {
  background-color: #006286;
  color: white;
}
div.documentdisplayleftpanetabareaheader > h1 {
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0;
  padding: 0.5rem;
}
div.audiodisplay,
div.audiodisplay div {
  width: 100%;
}
div.audiodisplay audio {
  width: 90%;
}
ul#ulukaudocumentdisplayrightpaneselectors {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
}
ul#ulukaudocumentdisplayrightpaneselectors li {
  color: #006286;
  font-size: 1rem;
  cursor: pointer;
}
ul#ulukaudocumentdisplayrightpaneselectors li:hover {
  border-radius: 0.25rem 0.25rem 0 0;
}
ul#ulukaudocumentdisplayrightpaneselectors li#ulukaupagerestpane {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  cursor: unset;
}
ul#ulukaudocumentdisplayrightpaneselectors li#ulukaupagerestpane:hover {
  background: unset;
}
div#ulukautextviewerbuttons {
  z-index: 92;
  display: none;
  right: 25px;
}
div#ulukaupagetextview {
  position: absolute;
  background-color: white;
  z-index: 91;
  padding: 10px;
  overflow: scroll;
}
div#ulukaupagetextview td, div#ulukaupagetextview th {
  padding: 5px;
}
div#ulukaupagetextview table, div#ulukaupagetextview tr,  div#ulukaupagetextview td,  div#ulukaupagetextview th {
  border-width: 0px;
}

/* Document Item Display */
div.ulukaudocumentdisplay {
  display: flex;
}
div.ulukaudocumentdisplay div.ulukaudocumentdisplaythumb {
  margin-right: 10px;
  border: 1px solid #505050;
}
div.ulukaudocumentdisplay div.ulukaudocumentdisplayinfo label {
  font-weight: bold;
}
/*==============================================*/
/* Jeffrey's Functional CSS Customisations [END]
/*==============================================*/

/*==============================================*/
/* Ryan's Cosmetic CSS Customisations [START]
/*==============================================*/
section#searchpagesearchresultfacets a, ul.helptableofcontents a, div#documentleveltabmetadataareacontent a, div.popupcontent a
{
  border-bottom: 1px dashed;
  text-decoration: none;
}
section#searchpagesearchresultfacets a:hover, ul.helptableofcontents a:hover, div#documentleveltabmetadataareacontent a:hover, div.popupcontent a:hover
{
  border-bottom: 1px solid;
  text-decoration: none;
}
/*Approved Font for Hawaiian language symbols*/
html,
body
{
  font-family: 'Public Sans', sans-serif !important;
}

/* General custom hero image, top and bottom banner styling */
div#banner-image-section
{
  background-image: url(../images/book-Heroimage-jpeg-Q100.jpg);
  height: 100% !important;
  background-position-y: 50%;
  background-size: cover;
  z-index: -1;
  display: block;
  padding-left: 0px;
  padding-right: 0px;
}
div#content
{
  background-color: #e0e0e0;
}
header#header
{
  position: relative;
}
header#header.home-page-banner
{
  min-height: 350px;
  height: 45%;
}
header#header.content-page-banner
{
  min-height: 160px;
  height: 18%;
}
header#header.content-page-banner div#Umbrella-Logo-section
{
  margin-top: 3vh;
}

div#hero-top-banner, div#bottom-banner-background-image
{
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
div#hero-top-banner
{
  padding-top: 10px;
}

div.texture-banner
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding-left: 0px;
}

div#hero-bottom-banner > div.texture-banner
{
  background-color: rgb(0, 98, 134, 50%);
}

div#hero-top-banner a, #hero-bottom-banner a, #hero-bottom-banner svg
{
  color: #fff;
  fill: #fff;
}
#Umbrella-Logo-section
{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(75%, rgb(104, 153, 172)), color-stop(95%, rgba(104, 153, 172, 0)));
  background-image: linear-gradient(to right, rgb(104, 153, 172) 75%, rgba(104, 153, 172, 0) 95%);
  width: 50%;
  padding:10px 10px 10px 15px;
  position: absolute;
  margin-top: 20vh;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  z-index: 1;
}
#Umbrella-Logo-section a
{
  color: #fff;
}
div#umbrella-logo-container
{
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  font-size: 48px;
}
header#header.content-page-banner div#umbrella-logo-container
{
  font-size: 30px
}
#logo-section img, #logo-section-IE-only img
{
  height: auto;
  width: 200px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  margin-left: auto;
  border-radius: 3px;
  margin-right: auto;
}
a#logo-section, a#logo-section-IE-only
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  cursor: pointer;
  padding-left: 15px;
}
#hero-bottom-banner
{
  border-top: 5px solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
  position: relative;
  width: 100%;
  height: auto;
  background-color: #006286;

  background-image: url(../images/Background_Texture.jpg);
}
.nav-link
{
  padding: .5rem 15px;
}
div#navbar
{
  display: block;
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
div#userlinks
{
  padding-right: 25px;
}
.dropdown-toggle::after
{
  color: #fff;
}
div#userlinks a
{
  color: #006286;
}
nav#language-selection-links
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 15px;
}
nav#language-selection-links a
{
  color: black;
  padding: 10px 15px 10px 15px;
  background-color: rgb(255 255 255 / 50%);
}
nav#language-selection-links a:hover
{
  background: #f5f5f1;
}
nav#language-selection-links img
{
  vertical-align: text-top;
  padding-right: 5px;
}
nav#language-selection-links a:not(.active-language)
{
  filter: grayscale(1);
}
nav#language-selection-links a:not(.active-language):hover
{
  filter: none;
}

a.active-language
{
  background-color: #f5f5f1 !important;
  font-weight: bold;
}

button#exploreulukau, button#exploreulukau-mobile
{
  padding-left: 15px;
  padding-right: 15px;
  position: absolute;
  right: 15px;
  bottom: 10px;
}

#exploreulukau, #exploreulukau-mobile
{
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0.25rem;
  border: none;
  margin-left: auto;
  z-index: 100;
}

#exploreulukau:hover, #exploreulukau:focus, #exploreulukau-mobile:hover, #exploreulukau-mobile:focus
{
  background: #fff;
  color: #006286;
  fill: #006286 !important;
}
#exploreulukau svg, #exploreulukau-mobile svg
{
  margin-right: 3px;
  vertical-align: sub;
  color: #fff
}

/* Custom navigation item colors*/
#exploreulukau:hover svg, #exploreulukau:focus svg, #exploreulukau-mobile:hover svg, #exploreulukau-mobile:focus svg
{
  fill: #006286;
}
.nav-item:hover, .nav-link.active
{
  background: #fff;
}
li.nav-item:hover a, .nav-item:hover .dropdown-toggle::after, .nav-link.active, .nav-link.active .dropdown-toggle::after
{
  color: #006286 !important;
}
div.dropdown-menu.show a.dropdown-item.active
{
  color: #fff !important;
}
button.btn-light, button.btn-light svg, .breadcrumb-item svg, #homepagebrowse a svg, button svg
{
  color: #006286;
  fill: #006286;
}
div#navbarcollapsed nav.dropdown-menu.show a.dropdown-item, ul#navbarentries nav.dropdown-menu.show a.dropdown-item
{
  color: #006286;
}
div#navbarcollapsed nav.dropdown-menu.show a.dropdown-item.active, ul#navbarentries a.dropdown-item.active
{
  color: #fff;
}

/* Allow popup menus to have priority of these content items */
div#collectionlist
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#exploreulukau-mobile.mobile-explore-button
{
  display: none;
}
ul#navbarentries a
{
  text-decoration: underline;
}
.logicalsectiongroupingnode > a
{
  color: #212529;
  text-decoration: underline;
}
a:focus
{
  outline: 2px solid #006286;
}
/* make keyboard focus of page image buttons visible */
.oseadviewerbuttons button:focus
{
  outline: 2px solid #ff7;
}
div.documentdisplayleftpanetabareacontentpadding div.metadatadisplay div.content a
{
  text-decoration: underline;
}

/*==============================================*/
/* Responsive alignment CSS Customisations
/*==============================================*/

@media(max-width: 980px)
{
  header#header.home-page-banner
  {
    min-height: 250px;
    height: 45%;
  }
  div#umbrella-logo-container
  {
    font-size: 35px;
  }
}

@media(max-width: 600px)
{
  div#umbrella-logo-container, header#header.content-page-banner div#umbrella-logo-container
  {
    font-size: 25px;
    font-weight: bold;
  }
  div#Umbrella-Logo-section
  {
    width: 65%;
  }
}

@media(max-width: 580px)
{
  #logo-section img, #logo-section-IE-only img
  {
    height: auto;
    width: 190px;
    padding: 5px;
    margin: 0px;
  }
}

@media(max-width: 500px)
{
  div#userlinks
  {
    padding-right: 5px;
  }
  #hdictsearchcontrols, #hdictpagecontent, button#exploreulukau, button#help-link, div#Umbrella-Logo-section, button#exploreulukau-mobile
  {
    padding-left: 5px;
    padding-right: 5px;
  }
  header#header.content-page-banner div#Umbrella-Logo-section
  {
    margin-top: 1vh;
  }
  a#logo-section, a#logo-section-IE-only
  {
    padding-left: 5px;
  }
  nav#language-selection-links
  {
    padding-right: 5px;
  }
  button#exploreulukau, button#exploreulukau-mobile
  {
    right: 5px;
  }
  div#hero-top-banner
  {
    padding-top: 5px;
  }
  #exploreulukau
  {
    display: none;
  }
  #exploreulukau-mobile.mobile-explore-button
  {
    display: block;
    position: static;
    border-radius: 0px;
    font-size: 16px;
  }
}

@media(max-width: 370px)
{
  #logo-section img, #logo-section-IE-only img
  {
    width: 173px;
    padding: 5px;
  }
  header#header.content-page-banner div#Umbrella-Logo-section
  {
    margin-top: 0vh;
  }
}

@media(max-width: 470px)
{
  nav#language-selection-links a
  {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 5px;
  }
  nav#language-selection-links a img
  {
    margin-left: auto;
    margin-right: auto;
  }
  div#documentdisplayheader
  {
    margin-top: 12px;
  }
}

@media(max-width: 330px)
{
  div#umbrella-logo-container, header#header.content-page-banner div#umbrella-logo-container
  {
    font-size: 20px;
    font-weight: bold;
  }
  button#exploreulukau
  {
    bottom: 5px;
  }
}
@media(max-width: 320px)
{
  #logo-section img, #logo-section-IE-only img
  {
    width: 150px;
  }
  nav#language-selection-links a
  {
    padding: 4px;
  }
}

footer#footer
{
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1rem;
}

div#hdictpagefooterlinks, div#footertip
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14.4px;
}

div#hdictpagefooterlinks a {
  padding-left: 20px;
  padding-right: 20px;
}

a#logo-section-IE-only
{
  display: none;
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
  div.texture-banner
  {
    background-color: rgba(0, 98, 134, 0.5);
  }
  a#logo-section
  {
    display: none;
  }
  a#logo-section-IE-only
  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
/*==============================================*/
/* Ryan's Cosmetic CSS Customisations [START]
/*==============================================*/

/*==============================================*/
/* Wayne's Book Browser CSS Customisations [START]
/*==============================================*/

div.widthrestrictiondefault
{
  max-width: 1400px;
}

.ulukaubooks-book-keyword
{
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.bookthumbdiv
{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

span.thumbloadingplaceholder {
  margin: auto;
  animation: flickerAnimation 1s infinite;
}

#ulukaubooks-book-browser-control-wrapper
{
  display: -webkit-box;
    display: -ms-flexbox;
      display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
#ulukaubooks-book-browser-control-wrapper > div
{
  -webkit-box-flex :1;
  -ms-flex :1;
  flex :1;
  margin: 8px 0 8px 0;
  max-width: 32.6%;
}

.ulukaubooks-book-browser-filter-status{
  display: none;
  text-align: center;
  line-height: 2.28571rem;
  font-size: 1.2em;
  padding: 0.8rem 0.7rem 0.7rem 0;
  border-bottom: 1px solid #999;
}

.publicationbrowserlist
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.ulukaubooks-book-browser-row
{
  display: flex;
  flex-direction: column;
  width: 250px;
  margin-top: 0px;
  margin-bottom: 20px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  text-align: left;
  transition: all .2s ease-in-out;
  overflow: hidden;
}

.ulukaubooks-book-browser-row:hover {
  background-color: #e0e0e0;
  box-shadow: 3px 3px 5px -1px rgb(0 0 0 / 50%);
  transform: scale(1.025);
  text-decoration: none;
}

.ulukaubooks-book-browser-empty-row
{
  display: none;
  line-height: 2.28571rem;
  font-size: 1.2em;
  padding: 0.8rem 0.7rem 0.7rem 0;
  border-bottom: 1px solid #999;
}

.ulukaubooks-book-browser-row .tt.locked a
{
  color:#9c9c9c;
}

.ulukaubooks-book-browser-row-right
{
  padding: 10px;
}

.ulukaubooks-book-browser-row-right > .tp, .ulukaubooks-book-browser-row-right > .la, .ulukaubooks-book-browser-row-right > .sb
{
  font-size: 0.9rem;
}

.ulukaubooks-book-browser-row-left > .tb
{
  overflow: hidden;
  height: 250px;
}

@media(max-width: 1000px)
{
  .ulukaubooks-book-browser-row
  {
    width: 250px;
  }
}
@media(max-width: 650px)
{
  .ulukaubooks-book-browser-row
  {
    width: 250px;
  }
}
/*==============================================*/
/* Wayne's Book Browser CSS Customisations [END]
/*==============================================*/

/*==============================================*/
/* Query page CSS Customisations [START]
/*==============================================*/
.advancedsearchwrapper
{
  border: 1px solid white;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.metadata
{
  font-size: 0.9rem;
}
/*==============================================*/
/* Query page CSS Customisations [END]
/*==============================================*/

/*----------------------------*/
/* Dictionary lookup via wehewehe.org */
/*----------------------------*/
#definitionsdiv
{
  z-index: 1000;
}

/*----------------------------*/
/* Animation */
/*----------------------------*/
@keyframes flickerAnimation {
  1%   {  opacity: 1; }
  50%  {  opacity: 0.7; }
  100% {  opacity: 1; }
}

.animate-flicker {
    opacity: 1;
}

/* Added by Stefan on 8-Feb-2024. Styling of the notice that appears on books with downloadable audio. */
#ulukaubooksaudionotice.toast
{
  max-width: none;
  margin-bottom: 0.25rem;
}
#ulukaubooksaudionotice.toast .toast-header
{
  background-color: #d59f0f;
  color: white;
  padding: 0.1rem 0.75rem;
}
#ulukaubooksaudionotice.toast .toast-header button.close
{
  color: white;
}
#ulukaubooksaudionotice.toast .toast-body
{
  padding: 0.1rem 0.75rem;
}
#ulukaubooksaudionotice.toast ul
{
  margin-bottom: 0;
  font-size: 0.8rem;
}

/* Added by Stefan on 29-Apr-2024. Custom styling of download links on document display page. */
div.documentstaticpdflinkcontainer
{
  display: flex;
  white-space: normal;
  max-width: 800px;
}

div.documentstaticpdflinkcontainer > div
{
  display: flex;
  line-height: 0.9rem;
  margin: 0.25rem 0 0.25rem 0.25rem;
  white-space: nowrap;
  font-size: 0.8rem;
}

div.documentstaticpdflinkcontainer img
{
  margin: 0 0.25rem 0 0.5rem
}

div.documentstaticpdflinkcontainer span
{
  font-size: 0.6rem;
}

@media(max-width: 800px)
{
  div.documentstaticpdflinkcontainer
  {
    display: block;
    max-width: 300px;
  }
  div#documentdisplayheader
  {
    align-items: start;
  }
}

.ulukaubooks-audiobook-icon > img
{
  float: right;
}


/* Chrome doesn't like position:absolute on the hidden screen reader spans - they increase the maximum height of the page (even though they are put inside an overflow:scroll element).*/
/* Another alternative is position:initial AND display:inline-block, but this is two lines, isntead of one */
/* The screen reader spands in the table of contents are requested by the client, so can't ever be deleted */
div#documentdisplayleftpanecontent .sr-only
{
  position: fixed !important;
}