/*
 * VERIDIAN CSS
 *
 * Now that we're using Bootstrap 5.3.0, browser compatibility is:
 *   - Microsoft Edge >= 16
 *   - Firefox >= 60
 *   - Safari >= 12
 *   - iOS Safari >= 12
 *   - Chrome >= 60
 * Any other browsers are unsupported (this includes all versions of IE).
 *
 * Conventions:
 *   - Veridian class names should no longer start with "veridian"
 *   - Veridian class names shouldn't contain hyphens, to make it clearer which are Bootstrap classes
 *   - Rules are ordered alphabetically within each section
 *   - Media queries appear directly after the normal rule
 *
 * Colours: A mixture of Bootstrap colours (use the Bootstrap variables), standard HTML web colours, and a few
 *   custom colours. Usage should be commented.
 *
 * Font sizes: No base font size is specified, to leave the browser to use its default size. The minimum font size
 *   should be 0.8rem.
 *
 * Screen sizes:
 *   <= 500px is referred to as "tiny"
 *   <= 700px is referred to as "small"
 *   >= 701px is referred to as "not small"
 *   <= 800px is referred to as "smallish"
 *
 * Copyright (C)  DL Consulting Ltd.
 *
 */

/* ---- General element styling ---- */

body
{
  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  display: flex;
  flex-direction: column;
  height: 100%;
}

header, footer
{
  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  flex: none;
}

html
{
  /* We don't set a base font-size here -- leave the browser to use its default size (for better accessibility) */
  height: 100%;  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

/* We don't want <ol> to display the list numbers itself, due to the ridiculous constant 40px left padding (too much sometimes, not enough other times) */
ol
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}


/* ---- General classes that can be applied to any element ---- */

.commonedging
{
  padding-left: 15px;
  padding-right: 15px;
}
/* For reducing the left/right edging on tiny screens */
@media (max-width: 500px)
{
  .commonedging
  {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.hiddenalways
{
  display: none;
}

.hiddeninitially
{
  display: none;  /* Initial state, made visible when necessary */
}

/* For hiding some components of the UI on small screens -- note includes "screen" to avoid applying to print pages */
@media screen and (max-width: 700px)
{
  .hiddenwhensmall
  {
    display: none !important;
  }
}

/* For hiding some components of the UI on not-small screens (used for components that only apply to small screens) */
@media (min-width: 701px)
{
  .hiddenwhennotsmall
  {
    display: none !important;
  }
}

.highlightcolor
{
  background-color: #FFFF77;  /* Light yellow */
}

.inactivelink
{
  color: var(--bs-gray-600);
}

.overlay
{
  margin: 0px;
  padding: 0px;
  position: absolute;  /* Position relative to ancestor element (which can't be static) */
}

/* Display a "pulldown arrow" before (i.e. to the left, assuming ltr display) or after (i.e. to the right, assuming ltr display) the element. Use the .pulldownarrownone class if you want to prevent arrows from being displayed by Bootstrap classes that normally add them (e.g. "dropdown-toggle") */
.pulldownarrowbefore,
.pulldownarrowafter
{
  vertical-align: middle;
}
.pulldownarrowbefore::before,
.pulldownarrowafter::after
{
  border-left: .3em solid transparent;
  border-right: .3em solid transparent;
  border-top: .3em solid;
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
}
.pulldownarrowbefore::before
{
  margin-right: .3em;
}
.pulldownarrowafter::after
{
  margin-left: .3em;
}
.pulldownarrownone::before,
.pulldownarrownone::after
{
  border: 0;
  margin: 0;
}

.pulldownarrowbefore.collapsed::before,
.pulldownarrowafter.collapsed::after
{
  border-top: .3em solid transparent;
  border-bottom: .3em solid transparent;
}

/* Dynamic arrow for arrow on the left */
.pulldownarrowbefore.collapsed::before
{
  border-left: .3em solid;
}

/* Dynamic arrow for arrow on the right */
.pulldownarrowafter.collapsed::after
{
  border-right: .3em solid;
}

.semitransparent
{
  opacity: 0.5;
}

.transparent
{
  opacity: 0.0;
}


/* ---- Special "divtable" classes -- here so they can be overridden at any point below ---- */

div.divtable
{
  display: table;
}

div.divtable > div
{
  display: table-row;
}

div.divtable > div > div
{
  display: table-cell;
  vertical-align: top;  /* Override default "baseline" value, which works weirdly */
}

/* On tiny screens override the "display: table-cell" to display the divtable cells vertically */
@media (max-width: 500px)
{
  div.wrappingdivtable500 > div > div
  {
    display: block;
    width: 100% !important;
  }
}
/* On small screens override the "display: table-cell" to display the divtable cells vertically */
@media (max-width: 700px)
{
  div.wrappingdivtable700 > div > div
  {
    display: block;
    width: 100% !important;
  }
}


/* ---- Specific classes ---- */

/* The document-level/section-level tabs have links, but the "nav-link" class must be applied to the parent <div> instead of the <a>. Style these links as if "nav-link" was applied to them */
a.documentdisplayleftpanetablink
{
  text-decoration: none;
}
/* The link text has been modified to be inside of an h2 element for accessibility and these CSS rules are applied to make it look like a normal link */
a.documentdisplayleftpanetablink h2
{
  display: inline;
  font-size: var(--bs-nav-link-font-size);
}

/* Links in user admin table */
a.editusergroupslink, a.listusersallowingcommunicationslink, a.untickusercommunicationslink
{
  font-size: 0.8rem;
  font-weight: normal;
  vertical-align: top;  /* For superscript-style display */
}

/* PDF links have a 18x18 icon as a background image */
a.pdflink
{
  background-image: url(../images/iconpdf.gif);
  background-position: center left;
  background-repeat: no-repeat;
  min-height: 18px;  /* Link height must be >= icon height */
  padding-left: 23px;
  white-space: nowrap;  /* It's important everything is on one line, for the link icon display */
}

/* Enforce dark text for highlighting because the background is yellow (e.g. highlighting in the tag badges) */
b.highlightcolor
{
  color: black;
}

/* Button that is 250px wide unless there's not enough room */
button.button250, input.button250
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
  width: 100%;
}

div#adddocumentdisplayleftpanedocumentcommentsformcontainer, div#adddocumentdisplayleftpanedocumenttagsformcontainer, 
div#adddocumentdisplayleftpanesectioncommentsformcontainer, div#adddocumentdisplayleftpanesectiontagsformcontainer
{
  margin-bottom: 10px;
}

.autocomplete-suggestions
{
  cursor: default;
  border: 1px solid var(--bs-gray-400);
  border-top: 0;
  box-shadow: -1px 1px 3px rgba(0,0,0,.1);
  opacity: 1;

  /* core styles should not be changed */
  position: absolute;
  display: none;
  z-index: 9999;
  max-height: 5rem;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.autocomplete-suggestion
{
  background-color: white;
  position: relative;
  padding: 0 .6em;
  line-height: 23px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  font-size: 1.02em;
}
.autocomplete-suggestion.dictionary-tag
{
  background-color: var(--bs-gray-200);
}
.autocomplete-suggestion b  /* Used for the term highlighting */
{
  color: var(--bs-primary);
  font-weight: normal;
}

div#alertpopup
{
  z-index: 1060;  /* Must be higher than Bootstrap's .modal z-index of 1055, otherwise error boxes can be hidden */
}

div#logoutoptionspopupbuttoncontainer
{
  display: flex;
  justify-content: center;
  gap: 10px;
}

div#logoutoptionspopupbuttoncontainer input
{
  max-width: 100px;
  margin: 0px;
}

div.authenticateuseroption
{
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
  padding: 1rem;
}

/* Overlaps the div above it, for cosmetic reasons only */
div#bannerlogo
{
  flex-basis: 400px;  /* Limit to 400px on big screens (need to use this instead of max-width for Safari) */
  padding-bottom: 5px;
  padding-top: 5px;
}
div#bannerlogo.offsetbannerlogo
{
  margin-bottom: -22px;
  padding-top: 0;
  position: relative;
  top: -22px;
}
/* On small screens remove the relative positioning, so it no longer overlaps the div above it */
@media (max-width: 700px)
{
  div#bannerlogo,
  div#bannerlogo.offsetbannerlogo
  {
    margin-bottom: auto;
    position: static;
  }
}
/* For the print version remove the relative positioning, so it no longer overlaps the div above it */
@media print
{
  div#bannerlogo,
  div#bannerlogo.offsetbannerlogo
  {
    margin-bottom: auto;
    position: static;
  }
}

div#bannerlogo img
{
  width: 100%;  /* Scale the image up/down to fill the div#bannerlogo element */
}

div.blocktextcorrectionheader
{
  font-weight: bold;
  margin-top: 15px;
}

div.blocktextcorrectionline
{
  width: 100%;  /* Expand divtable */
}

div.blocktextcorrectionline > div > div
{
  padding-left: 20px;
  width: 50%;  /* 1/2 */
}

div.blocktextcorrectionstatuschange
{
  font-style: italic;
  padding-left: 20px;
}

div.commentssearchsnippet, div.tagssearchsnippet, div.txtsearchsnippet
{
  font-size: 0.9rem;
  margin-top: 10px;
}

div.commentssearchsnippet span.commenttext
{
  margin-right: 15px;
}

div.completelycorrectstats > div > div
{
  padding: 3px;
}
div.completelycorrectstats > div > div.completelycorrectstatsentryvalue
{
  padding-left: 15px;
  text-align: right;
}
div.completelycorrectstats > div > div.completelycorrectstatsentrypercentage
{
  padding-left: 15px;
}

div.datebrowserrichardmonthdaynumdocs
{
  font-size: 0.8rem;
}

div#datebrowserrichardmonthlevelcalendar
{
  border-spacing: 2px;
  width: 100%;
}

/* All cells */
div#datebrowserrichardmonthlevelcalendar > div > div
{
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.25rem;
  padding: 0.125rem;
  width: 14%;  /* 1/7th */
}

/* Header cells only */
div#datebrowserrichardmonthlevelcalendar > div:first-child > div
{
  background-color: transparent;
  border: none;
  font-size: 1.1rem;
  font-weight: 400;
  padding-bottom: 5px;
}

div#datebrowserrichardmonthlevelcalendar div.datebrowserrichardmonthlevelcalendardaycellcontents
{
  min-height: 5rem;  /* Sensible minimum (this can't be set on div.datebrowserrichardmonthlevelcalendardaycell) */
}

div#datebrowserrichardmonthlevelcalendarheader
{
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-primary);
  border-radius: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-left: 0.5rem;
}

div#datebrowserrichardmonthlevelcalendarheader .btn-group
{
  margin: 0.5rem 0.5rem 0.5rem 0rem;
}

div#datebrowserrichardmonthlevelcalendarheader h2
{
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
}

/* Each child of datebrowserrichardtoplevelcalendar is a year (row) */
div#datebrowserrichardtoplevelcalendar > div
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.25rem 0 0.25rem;
}

/* The h2 heading in each row of the top level calendar is the "year" cell; normally we display it to the left of its corresponding list of months */
div#datebrowserrichardtoplevelcalendar > div > h2
{
  display: inline-block;
  width: 4rem;  /* If this changes the calc() function in the span selector below needs to change too */
}
/* On tiny screens we instead position it above the months */
@media (max-width: 500px)
{
  div#datebrowserrichardtoplevelcalendar > div > h2
  {
    display: block;
    width: 100%;
  }
}

/* The inner div container in each row of the top level calendar is the cell containing the list of months; normally we display it on the same line as the year it corresponds to */
div#datebrowserrichardtoplevelcalendar > div > div
{
  display: inline-block;
  width: calc(100% - 4rem);  /* Change this if the width of the h2 selector above is changed */
}
/* On tiny screens we instead position it below the year */
@media (max-width: 500px)
{
  div#datebrowserrichardtoplevelcalendar > div > div
  {
    display: block;
    width: 100%;
  }
}

/* Use Flex to lay out the months in the top-level calendar */
div#datebrowserrichardtoplevelcalendar ul
{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
/* On smallish screens the months are wrapped onto multiple lines */
@media (max-width: 800px)
{
  div#datebrowserrichardtoplevelcalendar ul
  {
    border-bottom: 1px solid var(--bs-gray-200);
    flex-wrap: wrap;
  }
}

/* Style the "month" cells in the top-level calendar */
div#datebrowserrichardtoplevelcalendar ul > li
{
  margin-bottom: 0.25rem;
  text-align: center;
  width: calc((100% - (11 * 0.25rem)) / 12);  /* Leave spacing of 0.25rem for each of the 11 spaces between each row of 12 months */
}
/* On smallish screens leave spacing of 0.25rem for each of the 5 spaces between each row of 6 months */
@media (max-width: 800px)
{
  div#datebrowserrichardtoplevelcalendar ul > li
  {
    width: calc((100% - (5 * 0.25rem)) / 6);
  }
}
/* On tiny screens leave spacing of 0.25rem for each of the 3 spaces between each row of 4 months */
@media (max-width: 500px)
{
  div#datebrowserrichardtoplevelcalendar ul > li
  {
    width: calc((100% - (3 * 0.25rem)) / 4);
  }
}

/* Similar to the Bootstrap nav-link with pills styling */
div#datebrowserrichardtoplevelcalendar ul > li > a, div#datebrowserrichardtoplevelcalendar ul > li > span
{
  display: block;
  padding: 8px;
}

/* For styling clickable months in the top-level calendar */
div#datebrowserrichardtoplevelcalendar ul > li > a
{
  border: 1px solid var(--bs-gray-400);
  border-radius: var(--bs-border-radius);
}

/* For styling unclickable months in the top-level calendar */
div#datebrowserrichardtoplevelcalendar ul > li > span
{
  color: var(--bs-gray-600);
}

/* On tiny screens reduce the left/right padding on all the top-level components, to save screen space */
@media (max-width: 500px)
{
  div.datebrowserwhitneycalendar > *
  {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

div.datebrowserwhitneydocumentselectorcontainer
{
  margin-top: 0.5rem;
}

div.datebrowserwhitneydocumentselectorheader
{
  margin-bottom: 0.75rem;
}

/* For styling the "no specific month or day"/"no specific day of month" descriptions */
div.datebrowserwhitneydocumentselectorheader div.text-muted
{
  font-size: 0.8rem;
}

/* For styling the "no specific month or day"/"no specific day of month" additions to the title */
div.datebrowserwhitneydocumentselectorheader h2 > span
{
  font-size: 1.125rem;
}

div#documentclasheslistcontainer > h2
{
  margin-top: 1rem;
}
div#documentclasheslistcontainer > ol > li
{
  margin-bottom: 0.5rem;
}

div#documentdisplay
{
  border-top: solid 1px var(--bs-gray-200);
  border-left: solid 1px var(--bs-gray-200);
  border-right: solid 1px var(--bs-gray-200);
  width: 100%;  /* Expand divtable */
}

div#documentdisplaybasic
{
  margin-top: 10px;
}

div#documentdisplaycontentheader
{
  margin-top: 10px;
}

div#documentdisplayheaderlinks
{
  display: flex;
}

/* Lay out the title and right side content using Flexbox */
div#documentdisplayheader
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div#documentdisplayheader a.pdflink, div#documentdisplayheader a.tonormalmodelink
{
  margin-left: 10px;
}
div#documentdisplayheader a.pdflink span, div#documentdisplayheader a.tonormalmodelink
{
  font-size: 0.8rem;
}

div#documentdisplayheader h1
{
  font-weight: 400;
  margin-bottom: 0;
}
/* On tiny screens reduce the h1 size */
@media (max-width: 500px)
{
  div#documentdisplayheader h1
  {
    font-size: 1.25rem;
  }
}

div#documentdisplayheader.documentdisplaymaximised h1
{
  font-size: 1.25rem;
}

div#documentdisplayleftpane
{
  display: none;  /* Initial state, made visible if the window is wide enough */
  width: 0px;  /* Initial state, resized to the correct width by code in veridian-documentdisplay.js */
}

div#documentdisplayleftpanecontent
{
  height: 0px;  /* Initial state, resized to the correct height by code in veridian-documentdisplay.js */
  overflow: auto;  /* The left pane areas are simply stacked (no collapsible regions), so we need a scroll bar in most cases */
  padding: 0px 5px;
}

div#documentdisplayleftpaneheader
{
  padding-top: 4px;
  padding-left: 1px;
  padding-right: 1px;
  margin-bottom: 5px;
}

/* Reduce vertical padding on left pane tabs, to save some space */
div#documentdisplayleftpaneheader .nav-link
{
  padding-top: .25rem;
  padding-bottom: .25rem;
}

div#documentdisplayleftpanesectionleveltabcontentinactive
{
  font-style: italic;
}

div.persistentlinkurl
{
  color: var(--bs-gray-600);
  font-size: 0.8rem;
  word-break: break-all;
}

div#documentdisplayleftpanesectiontextcontainer
{
  word-break: break-word;  /* Unofficial value only supported by Chrome/Safari */
}

div.documentdisplayleftpanesectiontextheader
{
  padding-bottom: 10px;
}

div.documentdisplayleftpanetabareacontentpadding
{
  padding: 10px 0px;
}

div.documentdisplayleftpanetabareaheader
{
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.25rem;
}

div.documentdisplayleftpanetabareaheader h3
{
  font-weight: 400;
  margin: 0;
  padding: 0.5rem;
}

div.documentdisplayleftpanethumbnailcontainer
{
  text-align: center;
}

div.documentdisplayleftpanethumbnailcontainer > *
{
  margin: auto;
}

div.documentdisplaynextprevlinkscontainer
{
  margin: 10px 0px;
}

div#documentdisplaypaneseparatorcontainer
{
  background-color: var(--bs-gray-100);
  border-left: solid 1px var(--bs-gray-200);
  border-right: solid 1px var(--bs-gray-200);
  width: 1%;  /* Take up minimum space */
}

div#documentdisplaypaneseparator
{
  cursor: w-resize;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div#documentdisplaypaneseparator .touchclickable
{
  /* This negative margin has the effect of reducing the width of the separator, without reducing the size or padding of the clickable icon on the separator. So the clickable area effectively overflows the separator div by a few pixels to the left and right, providing a larger click target (especially for touchscreens). */
  margin-left: -8px;
  margin-right: -8px;
}

div.documentstaticpdflinkcontainer
{
  white-space: nowrap;  /* Mainly to prevent lock icons from going onto the next line */
}

div#documentstructuredisplay
{
  margin-bottom: 15px;
  width: 100%;  /* Expand divtable */
}

div#documentstructuredisplay > div > div:nth-child(2)
{
  padding-left: 15px;
}

ul#footercontent
{
  list-style: none;
  margin: 0px;
  border-top: 1px solid var(--bs-gray-200);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;  /* Minimum gap between items */
  justify-content: space-between;
  align-items: center;
  min-height: 51px;
}

div#headerbottomcell
{
  border-bottom: 1px solid var(--bs-gray-200);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

div#headernotice
{
  font-weight: bold;
  text-align: center;
}

/* Normally the header top cell contains the user links and language links at the right */
div#headertopcell
{
  display: flex;
  justify-content: flex-end;
}
/* On small screens the "collapsed" navigation bar is also displayed at the left */
@media (max-width: 700px)
{
  div#headertopcell
  {
    justify-content: space-between !important;
  }
}

div#homepageabout div
{
  margin-bottom: 10px;
}

div#homepagebrowse, div#homepagesearch
{
  padding-bottom: 20px;
  text-align: center;
}

li.homepagebrowseicon
{
  padding: 3px;
}
/* Separate the icon from the text a bit */
li.homepagebrowseicon svg.svgicon
{
  margin-right: 0.25rem;
}

div#homepagecontent
{
  display: flex;
}

div#homepageleftcolumn
{
  flex: 1.5;
  margin-right: 0.5rem;
}

div#homepagemiddlecolumn
{
  flex: 1;
  margin-right: 0.5rem;
}

div#homepagerightcolumn
{
  flex: 1;
}

/* On screens between 500px and 800px display #homepageleftcolumn at the top, with the other two columns side by side below it */
@media (max-width: 800px)
{
  div#homepagecontent
  {
    flex-wrap: wrap;
  }

  div#homepageleftcolumn
  {
    /* Make the "left" column fill the full screen width */
    flex-basis: 100%;
    /* Remove right margin and add some bottom margin to the "left" column, as it now has the "middle" and "right" columns beneath it */
    margin-right: 0rem;
    margin-bottom: 0.5rem;
  }

  div#homepagemiddlecolumn
  {
    /* Give the middle column some right margin */
    margin-right: 0.5rem;
  }
}

/* On tiny screens display the three columns on the home page as a single column */
@media (max-width: 500px)
{
  div#homepagecontent
  {
    display: block;
  }
  div#homepageleftcolumn,
  div#homepagemiddlecolumn,
  div#homepagerightcolumn
  {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

div#homepagecontent h2, div#textcorrecthomepagecontent h2
{
  font-size: 1.125rem;  /* Smaller than usual for h2 */
  text-align: center;
  text-transform: uppercase;
}

div#homepagesampler
{
  text-align: center;
}

div#homepagesampler img
{
  max-width: 100%;  /* Scale down the sampler image to fit if necessary, but don't allow it to exceed the image width */
}

div#homepagesamplerplaceholder /* Styling for the placeholder section when samplerdisplaycfg set to randomonthisday and no issue is available */
{
  display: flex;
  height: 250px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 1px solid var(--bs-gray-600);
  color: var(--bs-gray-600);
  align-items: center;
  text-align: center;
  white-space: normal; /* So the text wraps (if necessary) to fit the desired width */
}

div#homepagetextcorrectscoreboard table
{
  margin: auto;
}

div#homepagetextcorrectscoreboardmoreinfo
{
  padding-top: 5px;
  text-align: center;
}

div.imagecontainer
{
  box-sizing: border-box;  /* Important so bottom padding added in _sectionlevel:sectionimagecontaineropen_ doesn't increase overall height */
  margin: 5px 0px;  /* No left/right margin because this gets in the way if width: 100% is used (e.g. on the search snippet images below) */
  position: relative;  /* So it can contain absolutely-positioned overlays (e.g. query term highlighting) */
}
@media print
{
  /* Override the padding-bottom added in _sectionlevel:sectionimagecontaineropen_, otherwise it creates gaps in the printed output (wasting paper) */
  div.imagecontainer
  {
    padding-bottom: 0px !important;
  }
}

/* See _sectionlevel:sectionimagecontaineropen_ for more information */
div.imagecontainer img
{
  left: 0px;
  position: absolute;  /* Position relative to ancestor element (imagecontainer) */
  top: 0px;
  white-space: nowrap;  /* For the "alt" tag for broken images */
}

/* Allow the search snippet images to shrink to fit the available space */
div.imgsearchsnippet div.imagecontainer,
div.imgsearchsnippet div.imagecontainer img
{
  /* Override the width/height attributes on the two elements themselves (they're kept there to tell the browser the right aspect ratio) */
  height: 100% !important;
  width: 100% !important;
}

/* Undo the previous change when an image search snippet is generated for blocked content (i.e. lock icon) */
div.imgsearchsnippet div.imagecontainer span.blockedcontent
{
  position: absolute;  /* Overlay, to avoid moving any highlight divs */
}
div.imgsearchsnippet div.imagecontainer span.blockedcontent img
{
  height: auto !important;
  width: auto !important;
}

div.inputformwrappingdivtable500
{
  width: 100%;  /* Expand divtable */
}

/* All cells */
div.inputformwrappingdivtable500 > div > div
{
  padding-bottom: 0.5rem;
  vertical-align: middle;
}

div.inputformwrappingdivtable500 > div > div input
{
  max-width: 500px;  /* Limit this to avoid ridiculously long input fields on large screens */
}

/* First column cells only */
div.inputformwrappingdivtable500 > div > div:first-child
{
  width: 12rem;  /* Fixed width, to satisfy Stefan's OCD */
}

/* On tiny screens remove the bottom padding from all cells except the last in the row, to stack them better vertically */
@media (max-width: 500px)
{
  div.inputformwrappingdivtable500 > div > div:not(:last-child)
  {
    padding-bottom: 0px;
  }
}

div#inputupsuhcontainer
{
  margin-bottom: 10px;
}

div#inputupsuhcontainer a.privacylink, div#inputupaefsocontainer a.privacylink
{
  font-size: 0.9rem;
  margin-left: 15px;
}

div#languageswitch
{
  margin-left: 1rem;  /* To separate user links from language links, best this way around for the case where there is no language switch */
}

div#loadingimage
{
  padding: 10px;
}

div#logicalsectionimagedisclaimer
{
  margin: 15px 0px;
}

div.logicalsectiontocnodecontainer, div.pagetocnodecontainer
{
  padding-bottom: 3px;
  padding-left: 27px;  /* Crucial to get the link background image in the right place */
  padding-top: 3px;
}

/* Logical section/page TOC nodes have a 21x18 icon as a background image */
div.logicalsectiontocnodecontainer a.logicalsectiontocnodelink, div.logicalsectiontocnodecontainer span.logicalsectiongroupingnode, div.logicalsectiontocnodecontainer span.sectionlinkwithinviewerdisabled, div.pagetocnodecontainer a.pagetocnodelink, div.pagetocnodecontainer span.sectionlinkwithinviewerdisabled
{
  background-image: url(../images/icontext.gif);
  background-position: center left;
  background-repeat: no-repeat;
  margin-left: -27px;  /* Crucial to get the background image in the right place */
  padding-left: 27px;
}

/* Grouping nodes have a different icon */
div.logicalsectiontocnodecontainer span.logicalsectiongroupingnode
{
  background-image: url(../images/iconopenfldr.gif);
}

/* Disabled links have a different icon */
div.logicalsectiontocnodecontainer span.sectionlinkwithinviewerdisabled, div.pagetocnodecontainer span.sectionlinkwithinviewerdisabled
{
  background-image: url(../images/icontext_disabled.gif);
}

/* Round jssocial icons */
.jssocials-share-link {
  border-radius: 50%;
}

/* Space "Share page" away from the icons*/
li#footersocialbookmarks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

div#socialbookmarkssharepage {
  margin: 0 10px;
}

/* jsSocial Customisation to get 100% Google Accessiblity Audit */
div.jssocials-shares a.jssocials-share-link:hover {
  text-decoration: none;
  background: #3490F3 !important;
}

div.jssocials-share-twitter .jssocials-share-link {
  background-color: #000000;
}

div.jssocials-share-email .jssocials-share-link {
  background-color: #505050;
}

div.mediaviewer
{
  overflow: auto;  /* To create a scrollbar if the media viewer exceeds the right pane height */
  text-align: center;
}

div.mediaviewer > div#playercontainer
{
  position: relative;  /* So the player can be vertically centered */
}

div.mediaviewer > div#playercontainer > video
{
  width: 100%;  /* So video won't be clipped if it's bigger than the screen size */
  height: 100%;
}

div.metadatadisplay
{
  padding: 5px 0px;
  width: 100%;  /* Expand divtable */
}

div.metadatadisplay div.content
{
  padding: 0px 3px;
}

div.metadatadisplay div.label
{
  font-weight: bold;
  padding: 0px 3px;
  text-align: right;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

div#metadataeditstatspagecontent h2
{
  margin-top: 1rem;
}

div#navbarcollapsed
{
  display: block;
  flex: 2;
}

div#userlinksdropdown ul, div#browsemenudropdown ul, nav#navbarcollapseddropdown ul, div#homepagebrowse ul
{
  list-style: none;
  padding: 0px;
  margin: 0px;
}

/* All the following "nextprev*links" styles are used on the document display pages when documentlevelimagesview=none */
div#nextprevdocumentlinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevdocumentlinks div.nextdocumentlinkcell
{
  text-align: right;
  width: 33%;  /* 1/3rd */
}

div#nextprevdocumentlinks div.prevdocumentlinkcell
{
  width: 33%;  /* 1/3rd */
}

div#nextprevdocumentlinks div.publicationlinkcell
{
  text-align: center;
  width: 33%;  /* 1/3rd */
}

div#nextprevlogicalsectionlinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevlogicalsectionlinks div.prevdocumentlinkcell, div#nextprevlogicalsectionlinks div.prevsectionlinkcell
{
  width: 25%;  /* 1/4th */
}

div#nextprevlogicalsectionlinks div.nextdocumentlinkcell, div#nextprevlogicalsectionlinks div.nextsectionlinkcell
{
  text-align: right;
  width: 25%;  /* 1/4th */
}

div#nextprevpagelinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevpagelinks div.prevdocumentlinkcell, div#nextprevpagelinks div.prevsectionlinkcell
{
  width: 25%;  /* 1/4th */
}

div#nextprevpagelinks div.nextdocumentlinkcell, div#nextprevpagelinks div.nextsectionlinkcell
{
  text-align: right;
  width: 25%;  /* 1/4th */
}

div#nextprevsearchresultlinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevsearchresultlinks div.backtosearchresultslinkcell
{
  text-align: center;
  width: 33%;  /* 1/3rd */
}

div#nextprevsearchresultlinks div.nextsearchresultlinkcell
{
  text-align: right;
  width: 33%;  /* 1/3rd */
}

div#nextprevsearchresultlinks div.prevsearchresultlinkcell
{
  width: 33%;  /* 1/3rd */
}

div#ocrdisclaimer
{
  background-color: var(--bs-gray-200);
  border-radius: 0.25rem;
  padding: 0.25rem 0;
  margin: 0.75rem 0;
}

div#ocrdisclaimer p
{
  margin: 0.75rem;
}

div.oseadviewer, div.panojsviewer
{
  background-color: black;
}

div.pageblock
{
  cursor: pointer;
  z-index: 40;  /* Must be more than querytermarea's z-index */
}

/* Used in OSD Javascript */
div.blockbutton
{
  z-index: 50;
  width: 128px;
  height: 128px;
  background-color: black;
  opacity: 0.25;
  cursor: pointer;
  border-radius: 50%;
}
div.blockbutton:hover
{
  opacity: 1;
}

div.blockbutton svg
{
  fill: white;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

/* Grey out the label for disabled "form-check" elements */
div.form-check.disabled label.form-check-label
{
  color: grey;
}

/* .pagecontentmargin is used to apply margins to the div#pagecontent on most pages. We don't apply the margin to #pagecontent directly though,
    as on some pages we do NOT want padding or margins on #pagecontent. For example, applying padding and/or margin to #pagecontent on document
    display pages will affect the positioning of the footer on those pages. */
div.pagecontentmargin
{
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

div#panojscontextmenupopup
{
  background-color: var(--bs-gray-dark);
  border: 2px solid var(--bs-gray-600);
  padding: 4px;
  position: fixed;  /* Position relative to browser window */
  z-index: 100;  /* Must be more than everything else */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* Disable IOS Safari disable long-press text selection */
}

/* Each PanoJS context menu link is expected to have a 18x18 icon as a background image */
div#panojscontextmenupopup a, div#panojscontextmenupopup a:link, div#panojscontextmenupopup a:visited
{
  background-position: center left;
  background-repeat: no-repeat;
  color: var(--bs-gray-400);
  display: inline-block;
  margin: 1px 0px;
  min-height: 18px;  /* Link height must be >= icon height */
  padding-left: 23px;
}

div#panojscontextmenupopup a:hover
{
  color: white;
}

div#panojscontextmenupopup div
{
  white-space: nowrap;  /* It's important everything is on one line, for the link icon display in particular */
}

div#panojscontextmenupopup div.panojsadduserlistitemslinkcontainer a
{
  background-image: url(../images/iconadd_invert.gif);
}

div#panojscontextmenupopup div.panojscopyurlcontainer a
{
  background-image: url(../images/iconcopy_invert.gif);
}

div#panojscontextmenupopup div.panojslogicalsectionimageslinkcontainer a
{
  background-image: url(../images/iconclip_invert.gif);
}

div#panojscontextmenupopup div.panojspdflinkcontainer a
{
  background-image: url(../images/iconpdf.gif);
}

div#panojscontextmenupopup div.panojssectiontextlinkcontainer a, div#panojscontextmenupopup div.panojstextcorrectlinkcontainer a
{
  background-image: url(../images/icontext_invert.gif);
}

div#panojscontextmenupopup div.panojszoomtoreadlinkcontainer a
{
  background-image: url(../images/iconzoomtoread_invert.gif);
}

div#panojscontextmenupopup div.panojscontextmenupopupsectionheader
{
  color: white;
  padding-bottom: 4px;
  white-space: normal;  /* We want the header divs to wrap normally, otherwise long titles mess things up */
}

/* This is a bit tricky. We want:
   1. The individual links to display on one line (important for the link icon display)
   1a. The popup to expand horizontally (past the max-width value if necessary), if the links are long
   2. The headers to wrap if necessary, so the max-width value is honoured if the titles (but not links) are long
   3. The context menu popup to be as small as possible, after accounting for the previous rules
   The only way I've found to do all this is to use "display: table" and max-width here (and white-space above)
*/
div#panojscontextmenupopupcontent
{
  display: table;  /* Expand to fit the links if they're wide */
  max-width: 200px;  /* The context menu doesn't need to be wide, and this is bigger than the default links */
}

div#panojscontextmenupopupseparator
{
  border: 1px solid var(--bs-gray-600);
  margin: 6px 0px;
}

div.panojscrosshair
{
  background-color: var(--bs-gray-700);
  z-index: 50;  /* Must be more than most PanoJS overlays we add, except for panojscontextmenupopup */
}

div.panojsinverthighlight,
div.oseadinverthighlight
{
  background-color: var(--bs-gray-600);
  z-index: 25;  /* Must be less than the other PanoJS overlays we add (e.g. querytermarea, pageblock) */
}

div.oseadhighlight svg
{
  fill: var(--bs-gray-600);
  fill-opacity: .5;
}

div.panojspagelabel
{
  background-color: white;
  padding: 3px;
  z-index: 45;  /* Must be less than panojscrosshair's z-index */
}

div.panojsviewerbuttons,
div.oseadviewerbuttons
{
  background-color: var(--bs-gray-dark);
  border: 1px solid black;
  border-radius: 0.25rem;
  opacity: 0.8;
  padding: 0.25rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  z-index: 90;  /* Must be more than most PanoJS overlays we add, except for panojscontextmenupopup */
}

/* The buttons for the OpenSeadragon viewer are arranged in two columns */
div.oseadviewerbuttons
{
  display: flex;
  flex-wrap: wrap;
  width: 82px;
}
div.oseadviewerbuttons > div
{
  display: flex;
}

/* Remove all the default styling that applies to <button>s */
div.panojsviewerbuttons button,
div.oseadviewerbuttons button,
div.oseadviewerbuttons a.btn
{
  background: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
}

div.panojsviewerbuttons button.hiddeninitially,
div.oseadviewerbuttons button.hiddeninitially,
div.oseadviewerbuttons a.btn.hiddeninitially
{
  display: none;  /* Need to override the "display: block" from above for "hiddeninitially" buttons */
}

div.panojsviewerbuttons button svg,
div.oseadviewerbuttons button svg,
div.oseadviewerbuttons a.btn svg
{
  fill: var(--bs-gray-100);
}

div.panojsviewerbuttons button:enabled:hover svg,
div.oseadviewerbuttons button:enabled:hover svg,
div.oseadviewerbuttons a.btn:hover svg
{
  fill: var(--bs-gray-600);
}

div.panojsviewerbuttons button:enabled svg.highlightedbutton,
div.panojsviewerbuttons button:enabled:hover svg.highlightedbutton,
div.oseadviewerbuttons button:enabled svg.highlightedbutton,
div.oseadviewerbuttons button:enabled:hover svg.highlightedbutton
{
  fill: var(--bs-secondary);
}

/* OSEAD clipping cursor style */
div.selection-box .cancel-button,
div.selection-box .confirm-button
{
  cursor: pointer !important;
}
div.corner-0-handle,
div.corner-2-handle
{
  cursor: nwse-resize !important;
}
div.corner-1-handle,
div.corner-3-handle
{
  cursor: nesw-resize !important;
}
div.border-0,
div.border-0-handle,
div.border-2,
div.border-2-handle
{
  cursor: row-resize !important;
}
div.border-1,
div.border-1-handle,
div.border-3,
div.border-3-handle
{
  cursor: col-resize !important;
}

div.selection-box
{
  z-index: 50;
  cursor: move !important;
}

div.passwordstrength
{
  font-size: 0.8rem;
}

div#publicationbrowserpagecontent > h2
{
  border-bottom: 1px solid var(--bs-gray-200);
  margin-bottom: 0.125rem;
  margin-top: 0.75rem;
}

div.publicationicon
{
  margin: 15px 0px 5px 0px;
}

/* Ensure publication icons don't exceed the width of the screen */
div.publicationicon img
{
  max-width: 100%;
}

div#publicationlevelcontent
{
  clear: both;  /* Clear the float applied in div#publicationlevelcontrols */
}

/* Floated to the right normally */
div#publicationlevelcontrols
{
  float: right;
  margin-bottom: 1rem;
  margin-left: 1rem;
}
/* ...but positioned to the left on tiny screens */
@media (max-width: 500px)
{
  div#publicationlevelcontrols
  {
    float: none;
    margin-bottom: 0;
    margin-left: 0;
  }
}

div#publicationmetadataeditorformfields > div
{
  padding: 0.5rem;
}
div#publicationmetadataeditorformfields label
{
  font-weight: bold;
}

div#publicationselectorcontrols
{
  /* Flex row, justified */
  align-items: center;
  display: flex;
  justify-content: space-between;
}

div.qapageblock
{
  border: 1px solid rgba(0,0,0,0.5);
  border-bottom: 3px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  opacity: 0.5;
}

div.querytermarea
{
  z-index: 30;  /* Must be less than pageblock's z-index */
}
@media print
{
  /* Background colours seem to be removed when printing, so the query term highlighting isn't effective. Something better should probably be done here, but for now just disabling this altogether. */
  div.querytermarea
  {
    display: none;
  }
}

div.runtimeloggraph
{
  margin-bottom: 30px;
  margin-top: 30px;
}

div.runtimeloggraph img
{
  width: 100%;  /* Fill the space, up to the maximum width set on the element */
}

div#searchhistorylist
{
  width: 100%;  /* Expand divtable */
}

div#searchhistorylist > div > div
{
  padding: 4px;
}

div#searchhistorylist > div > div.linkcell span
{
  text-transform: lowercase;
}

div#searchhistorylist > div > div.numresultscell
{
  text-align: right;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

/* Display advanced search content in two columns normally */
div#advancedsearchcollapse
{
  padding: 0.25rem 0.25rem 0 0.25rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--bs-primary);
  border-top: 0;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

div#searchpageadvancedsearchcontent
{
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}
/* ...but stacked on smallish screens */
@media (max-width: 800px)
{
  div#searchpageadvancedsearchcontent
  {
    display: block;
  }
}

/* Display advanced search content in two columns normally */
div#searchpageadvancedsearchcontent > div
{
  width: 48%;
}
/* ...but stacked on smallish screens */
@media (max-width: 800px)
{
  div#searchpageadvancedsearchcontent > div
  {
    width: 100%;
  }
}

div#searchpageadvancedsearchcontent fieldset
{
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

/* Use the same font size as set for the parent div (div#searchpageadvancedsearchcontent) */
div#searchpageadvancedsearchcontent .form-control
{
  font-size: inherit;
}

div#searchpagesearchextracontainer
{
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}

div#searchpagecontent.advancedselected div#searchpagesearchextracontainer,
div#searchpagecontent.facetselected div#searchpagesearchextracontainer
{
  border-bottom: 1px solid var(--bs-primary);
  margin-bottom: 0;
}

div.searchextrawrap.selected
{
  margin-bottom: -1px;
}

#advancedsearchbuttonwrap, #refinesearchbuttonwrap 
{ 
  margin-right: 2px; 
}

div.searchextrawrapbottom
{
  height: 5px;
}
div.searchextrawrap.selected div.searchextrawrapbottom
{
  height: 0;
}

div.searchextrawrap button, div.searchextrawrap button:hover
{
  border-color: var(--bs-primary);
}

div.searchextrawrap.selected button
{
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
  padding-bottom: 12px;
  background-color: var(--bs-body-bg);
}

/* On small screens decrease paddings of buttons */
@media (max-width: 500px)
{
  div.searchextrawrap > button
  {
    padding: 4px 6px;
    font-size: 90%;
  }
}

div#searchpagecontent.facetselected div#searchpagesearchfilterscontainer a.badge
{
  margin-top: .25rem;
  margin-left: .25rem;
  margin-right: .25rem;
}

/* The width of this element is not set anywhere -- it's automatic based on the longest facet value displayed */
#searchpagesearchresultfacets
{
  flex-shrink: 0; /* Required on Chrome, Safari, and Edge to prevent the facet cell from being squeezed into the smallest possible space */
  padding: 0.25rem 0.25rem 0 0.25rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--bs-primary);
  border-top: 0;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
/* On large screens remove the padding and border */
@media (min-width: 701px)
{
  #searchpagesearchresultfacets
  {
    border: 0;
    padding: 0;
  }
}

#searchpagesearchresultfacets .card
{
  margin-bottom: 0.25rem;
}

#searchpagesearchresultfacets .card-body
{
  padding: 0.5rem;
  font-size: 0.8rem;
}

#searchpagesearchresultfacets .card-header
{
  padding: 0.5rem;
}

#searchpagesearchresultfacets h3
{
  margin: 0;
  font-size: 1rem;  /* Smaller than usual for h3 */
}

#searchpagesearchresultfacets span.searchresultfacetentrycount
{
  margin-left: 5px;  /* Done like this to prevent the count from being separated onto a new line */
}

/* Remove list styling from the facet entries on the search page */
#searchpagesearchresultfacets ul
{
  margin-bottom: 0;
  padding: 0;
}

li.searchresultfacetentry
{
  list-style-type: none;
}

#searchresultyeargraph
{
  width: 100%;
  height: 150px;
  margin-bottom: 0.5rem;
  background-color: var(--bs-gray-200);
}

#searchresultyeargraphtitle
{
  display: flex;
  justify-content: space-between;
  direction: ltr;
  background-color: var(--bs-primary);
}

#searchresultearliestyear,
#searchresultlatestyear
{
  color: white;
  padding: 0 5px;
}

#searchresultlatestyear
{
  float: right;
}

div.searchresultslimitexceeded
{
  font-size: 0.9rem;
  line-height: 1.25;
  margin: 0.5rem 0;
  padding: 0.5rem;
}

span.remove > svg
{
  height: 18px;
  margin-left: 4px;
  margin-top: -1px;
  vertical-align: middle;
  width: 18px;
}

/* Normally the search results display includes facets at the left and search results at the right */
#searchpagesearchresults
{
  flex-basis: 100%;
  padding-left: 5px;
}
/* On small screens the facets and search results are stacked, so remove the padding normally between them */
@media (max-width: 700px)
{
  #searchpagesearchresults
  {
    padding-left: 0px;
  }
}

/* Uses flexbox so the sort control can wrap if necessary */
#searchpagesearchresults div#searchresultsheader
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#searchpagesearchresults #searchresultssummary
{
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0;
}

/* Contains the search facets and search results -- laid out side by side normally */
div#searchpagesearchresultscontainer
{
  display: flex;
}
/* ...and stacked vertically on small screens */
@media (max-width: 700px)
{
  div#searchpagesearchresultscontainer
  {
    display: block;
  }
}

div.searchresulticoncell
{
  padding: 3px;
  padding-top: 6px;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

div.searchresultnumbercell, div.mostcompletesectionnumbercell
{
  padding: 3px;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

div#sectionleveltabtitlearea h2
{
  font-weight: 400;
  line-height: 1.5rem;
  margin-bottom: 0;
}

div.skiplink
{
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 100;
}
div.skiplink a:focus
{
  background-color: var(--bs-secondary);  /* To stand out from the logo */
  border-radius: 0 0 0.5rem 0.5rem;  /* Curved at bottom */
  color: white;
  margin: 0.5rem;
  padding: 0.5rem;
}

div#socialbookmarks
{
  font-size: 0.6875rem;  /* Reduce jsSocials icon size */
}

div#singleimagepreviewer
{
  text-align: center;
}

div#singleimagepreviewer div#previewbox
{
  border: 1px dashed red;
  left: 0px;
  position: absolute;  /* Position relative to ancestor element (which can't be static) */
  top: 0px;
}

div#singleimagepreviewer div#previewcontrol
{
  cursor: crosshair;
  margin: auto;
  position: relative;  /* So it can contain absolutely-positioned overlays (i.e. the previewbox) */
}

/* For the OpenSeadragon viewer */
div#singleimagepreviewer div#previewcontrol-displayregion
{
  /* Override OpenSeadragon's ridiculous 999999999 value, otherwise the red box covers the dropdown menus (and everything else) */
  z-index: 50 !important;
  border: 1px dashed red !important;
  cursor: crosshair !important;
}

/* Add border area around OpenSeadragon preview display region */
#previewcontrol-displayregioncontainer
{
  border: 2px solid #ECEEEF !important;
  background-color: rgba(150, 150, 150, 0.1) !important;
}

/* For the Text correction home page */
div#textcorrectrecommendationsspformcontainer
{
  margin-bottom: 1em;
}

div#singleimagepreviewer > span
{
  font-size: 0.8rem;
}

div#textcorrectbasicinterface
{
  width: 100%;  /* Expand divtable */
}

div#textcorrectbasicinterface div.blockimagecell
{
  border-bottom: solid 1px grey;
  padding: 15px 0px;
  width: 1%;  /* Take up minimum space */
}

div#textcorrectbasicinterface div.blockformcell
{
  border-bottom: solid 1px grey;
  padding: 15px 0px 15px 30px;
}

div.textcorrectcontributors
{
  font-style: italic;
  padding-top: 5px;
}

div#textcorrecthomepagecontent
{
  display: flex;
}

div#textcorrecthomepageleftcolumn
{
  margin-right: 0.25rem;
  flex: 1;
}

div#textcorrecthomepagerightcolumn
{
  margin-left: 0.25rem;
  flex: 1;
}

div#textcorrecthomepagecontent h3
{
  margin-top: 1rem;
}

div#textcorrectionrecommendationscontent div.card-body
{
  /* Less padding than normal */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* On smallish screens display the two columns on the text correction home page as a single column */
@media (max-width: 800px)
{
  div#textcorrecthomepagecontent
  {
    display: block;
  }
  div#textcorrecthomepageleftcolumn,
  div#textcorrecthomepagerightcolumn
  {
    margin: 0 0 0.5rem 0;
  }
}

div#textcorrectpanojsinterfacecontent div#documentdisplayleftpanecontent, div#textcorrectpanojsinterfacecontent div#documentdisplayleftpaneheader
{
  padding-left: 2px;  /* Different padding for the text correction version of the document display page */
}

div#textcorrectpanojsinterfaceformcontainer i
{
  padding: 5px;
}

div#textcorrectpanojsinterfacehelpandstatus
{
  display: flex;
  flex-direction: row;
  font-size: 0.9rem;
  justify-content: space-between;
  margin: 0 4px;
  padding-bottom: 0.125rem;
}

div#textcorrectselectedlinebox
{
  border-color: blue;
  border-style: solid;
  z-index: 35;  /* Must be more than querytermarea's z-index and less than pageblock's z-index */
}

div#timinginfo
{
  padding: 5px;
}

div#useraccountpagecontent .card
{
  margin-top: 0.25rem;
}

.useradmintableresultssummary
{
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* On tiny screens reduce the default 1.25rem left and right padding */
@media (max-width: 500px)
{
  div#useraccountpagecontent .tab-content
  {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* On tiny screens display the user account page tabs vertically */
@media (max-width: 500px)
{
  div#useraccountpagetabgroup ul.card-header-tabs
  {
    flex-direction: column !important;
  }

  /* Make the inactive tabs actually look like tabs -- why isn't this done always? */
  div#useraccountpagetabgroup ul.card-header-tabs .nav-link
  {
    border-color: var(--bs-nav-tabs-link-active-border-color);
  }
}

div.useraccountpagetabarea, div#authenticateuserformfields, div#confirminvitenewuserformfields, div#mfaformfields, div#publicationmetadataeditorformfields, div#registernewuserformfields, div#resetuserpasswordformfields
{
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}

/* Different display of the "veridian" authentication system login form, if there are multiple login options */
div.authenticateuseroption div#authenticateuserformfields
{
  border: none;
  margin: 0;
  padding: 0;
}

div#useraccountpageuserinfotabcontent div#coreuserinfo a.textcorrecthomelink
{
  font-size: 0.9rem;
  margin-left: 15px;
}

div#useraccountpageuserinfotabcontent h2
{
  font-weight: 400;
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
}

div#useradmincontent.card div.tab-content
{
  padding-left: 0;
  padding-right: 0;
}

div#useradminformscontainer
{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  /* We want the two possible forms to wrap if necessary */
  justify-content: space-between;
}

div#useradminformscontainer .input-group
{
  flex-wrap: nowrap;  /* We don't want the individual forms to wrap internally */
  margin-bottom: 0.75rem;  /* Here for when the two possible forms wrap */
}

div#useradminfilterformcontainer
{
  margin-right: 3rem;  /* For when the two possible forms don't wrap */
}

div#useradminfilterformcontainer #inputfilter, div#useradmininvitenewuserformcontainer #inputemail
{
  min-width: 280px; /* Wide enough for a typical email address, at least */
}

div#useradmininvitenewuserformcontainer #inputusergroup
{
  width: 140px;
}

div#useradmininvitenewuserformcontainer label[for="inputusergroup"]
{
  padding-left: 0.5rem;
}

div#useradmininvitenewuserformcontainer .btn
{
  margin-left: 0.15rem;
}

div#registernewuserformfields .form-check, div#confirminvitenewuserformfields .form-check
{
  margin-bottom: 0.5rem;
}

div#userlists div.userlistlinkscontainer
{
  float: right;
}

table.userscoreboard td
{
  padding: 3px;
}

td.userscoreboardentrypos
{
  text-align: right;
}

td.userscoreboardentryvalue
{
  text-align: right;
}

td.userscoreboardentryname
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

div#viewer, span#viewer
{
  position: relative; /* So overlay buttons can use absolute positioning */
  height: 0px;  /* Initial state, resized to the correct height by code in veridian-documentdisplay.js */
  width: 100%;  /* So the span expands, to match the div */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* Disable IOS Safari disable long-press text selection */
}

div.viewerblockedcontent
{
  background-color: var(--bs-gray-400);
  text-align: center;
  vertical-align: middle !important;
}

div#viewercontrols > div
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 1px 2px;
}

div#viewercontrols > div > div
{
  white-space: nowrap;  /* So the controls in each cell don't get split over multiple lines */
}

/* Remove all the default styling that applies to <button>s */
div#viewercontrols div.buttonscell button
{
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

div.vlistentryactioncell
{
  padding: 3px;
}
/* Action cell items should be one per line normally (see media query below however), and not wrap internally */
div.vlistentryactioncell > *
{
  display: block;
  white-space: nowrap;
}

div.vlistentrymaincell
{
  flex-basis: 100%;
  padding: 3px;
}

div.vlistentrypercentagecell
{
  min-width: 135px;  /* Enough for 100px of percentage indicator, and the label */
  padding: 3px;
  white-space: nowrap;
}

div.widthrestrictiondefault
{
  margin: auto;
  max-width: 1000px;
}

/* Uses display:table to allow for content that is too wide for the view port. This is currently only used on the "user management" page, as the user tables don't attempt to be responsive. */
div.widthrestrictionnoneallowoverflow
{
  display: table;  /* Expand to fit the content if it's wide */
}

footer#footer
{
  background-color: var(--bs-gray-100);
  font-size: 0.8rem;
}

form#addnewpublicationform #addnewpublicationpopupbutton
{
  margin-top: 0.5rem;
}

form#adddocumentdisplayleftpanedocumentcommentsform input[type="submit"], form#adddocumentdisplayleftpanedocumenttagsform input[type="submit"], 
form#adddocumentdisplayleftpanesectioncommentsform input[type="submit"], form#adddocumentdisplayleftpanesectiontagsform input[type="submit"]
{
  margin-top: 5px;
}

form#adduserlistitemsform #userlistitemformbutton
{
  margin-top: 0.5rem;
}

form#authenticateuserform a#forgotpassword
{
  font-size: 0.9rem;
}

form#contentblockform div#contentblockformcontrols
{
  text-align: center; max-width: 500px;  /* Center controls under the fields but limit by max-width on big screens */
}

form#contentblockform input[type="text"], form#contentblockform textarea
{
  width: 100%; max-width: 500px;  /* Fill the space available, but limit by max-width on big screens */
}

form.datebrowserwhitneyyearselector select
{
  max-width: 200px;  /* Limit this to avoid ridiculously long select fields on large screens */
}

form#publicationmetadataeditorform .alert
{
  margin-top: 1rem;
}

form.textcorrectbasicinterfaceform div.inputblockcccontainer
{
  margin-top: 8px;
  text-align: center;
}

form.textcorrectbasicinterfaceform input[type="submit"]
{
  margin-left: 20px;
}

form.textcorrectbasicinterfaceform input[name="ntv"], form.textcorrectbasicinterfaceform textarea[name="ntv"], form#textcorrectpanojsinterfaceform input[name="ntv"], form#textcorrectpanojsinterfaceform textarea[name="ntv"]
{
  font-family: Serif; /* Improve the text readability to help text correctors to distinguish between I, l and 1 easier. */
}

form.textcorrectbasicinterfaceform input[name="ntv"], form.textcorrectbasicinterfaceform textarea[name="ntv"]
{
  width: 97%;  /* Fill the space available except for a tiny bit of margin */
}

form#textcorrectpanojsinterfaceform div.inputblockcccontainer
{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

form#textcorrectpanojsinterfaceform div.inputntvcontainer
{
  margin-bottom: 1px;
}

/* Make the border of the "ntv" text entry boxes (when correcting text) red when focused */
form#textcorrectpanojsinterfaceform div.inputntvcontainer .form-control[name="ntv"]:focus
{
  border-color: red;
}

form#textcorrectpanojsinterfaceform textarea[name="ntv"]
{
  height: 500px;  /* We can't tell without Javascript how big this should be [Unavoidable fixed height] */
}

/* Modal/popup headers should always be h2 headings, and we want a slightly larger font-size than for other h2 elements */
h2.modal-title
{
  font-size: 1.5rem;
}

main
{
  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  flex: 1 0 auto;
  width: 100%;
}

/* !! These two styles are required to make the "home" icon line up properly in the breadcrumbs. If the interface is customised to display text instead of an icon in the root of the breadcrumbs this may need to be removed. Anyone who can make the "home" icon line up properly in the breadcrumbs, on all browsers, without this hacky negative margin trick, gets a chocolate fish... */
ol.breadcrumb > .breadcrumb-item:first-child
{
  margin-bottom: -10px;
}
ol.breadcrumb > .breadcrumb-item:first-child svg.svgicon
{
  vertical-align: initial;
}

/* Add a top border to all the vlist entries... */
ol.vlist li
{
  border-top: solid 1px var(--bs-gray-400);
  padding: 12px 0px;
}
/* ...except the first one */
ol.vlist li:first-child
{
  border-top: none;
}

ol.vlist li div.divtable
{
  width: 100%;  /* Expand divtable */
}
ol.vlist li div.vlistentry
{
  display: flex;
  justify-content: space-between;
}
/* On small screens the "vlistentry*cell"s are wrapped */
@media (max-width: 700px)
{
  ol.vlist li div.mostcompletesection, ol.vlist li div.useractivityentry, ol.vlist li div.userlistitem
  {
    display: block;  /* Override the "display: flex" from above, so the children are displayed vertically instead of horizontally */
  }
  /* Display the action cell entries horizontally on small screens */
  div.vlistentryactioncell > *
  {
    display: inline-block;
    margin-right: 1rem;
  }
}
/* Search results are wrapped at a different point (due to the facet display) */
@media (max-width: 1000px)
{
  ol.vlist li div.searchresult
  {
    display: block;
  }
  /* Display the action cell entries horizontally on small screens */
  ol.vlist li div.searchresult div.vlistentryactioncell > *
  {
    display: inline-block;
    margin-right: 1rem;
  }
}

/* This is a span so we can include it in <a> tags without HTML validation errors */
span.blockedcontent
{
  background-color: var(--bs-gray-400);
  display: inline-block;  /* So width and height can be set, and the element can be centered within its parent */
}

span.commenttimeanddate, li.deletedcomment
{
  font-size: 0.9rem;
  font-style: italic;
}

span.commentuser
{
  font-size: 0.9rem;
  font-weight: bold;
  margin-right: 15px;
}

/* This is a span so we can include it in <a> tags without HTML validation errors */
span.nothumbnailavailable
{
  border: solid 1px var(--bs-gray-600);
  color: var(--bs-gray-600);
  display: inline-block;  /* So width and padding can be set, and the element can be centered within its parent */
  padding: 20px 2px;
  text-align: center;
  white-space: normal;  /* So the text wraps (if necessary) to fit the desired width */
  max-width: 100%;
}

span.percentageindicator
{
  background-color: var(--bs-primary);
  display: inline-block;
  height: 1.25rem;
  margin-right: 5px;
  vertical-align: middle;
}

span.qapageblocknum
{
  background-color: black;
  border-radius: 3px;
  color: white;
  font-size: 30px;
  opacity: 0.5;
}

span.pagelabel
{
  background-color: transparent;
  color: white;
  width: 100%;
  text-align: center;
  padding: 3px;
  z-index: 45;
}
span.pagelabel.current > div > b
{
  background-color: white;
  color: black;
  padding: 2px;
  border-radius: 2px;
}

svg.svgicon
{
  vertical-align: middle;
}

/* Apply to icons that need to be clickable, to provide a suitably large click area for fingers on touch screen devices */
svg.touchclickable
{
  box-sizing: content-box;
  height: 1.75rem;
  padding: 0.25rem;
  width: 1.75rem;
}

/* Sort status of user admin table column title */
table.useradmintable a.useradmintablecolumnheader.ascend::after
{
  content: "\25b2";
}

table.useradmintable a.useradmintablecolumnheader.descend::after
{
  content: "\25bc";
}

table.useradmintable td.communications
{
  text-align: center;
}

table.useradmintable td.date
{
  white-space: nowrap;  /* So the day/month/year don't get split over multiple lines */
}

table.useradmintable td.metadataedits, table.useradmintable td.textcorrections
{
  text-align: right;
}

table.useradmintable th
{
  text-align: left;  /* Override th default of centered */
  padding: 8px;
  vertical-align: top;
}

table.useradmintable th#useradmintablecommunications
{
  text-align: center;
}

textarea#editvalueformnewvalue
{
  margin-bottom: 0.5rem;
}

/* For blocks that aren't marked as completely correct */
.textcorrectblock
{
  border: solid 2px #A00000;  /* Lightish red; deliberately not part of the site branding (see notes Nov 13 2020) */
}

/* For blocks that are marked as completely correct */
.textcorrectcompletelycorrectblock
{
  border: solid 2px #008000;  /* Mid green; deliberately not part of the site branding (see notes Nov 13 2020) */
}

/* Hide the border when the blocks are selected, otherwise they may obscure the text */
.textcorrectblock.pageblockselected, .textcorrectcompletelycorrectblock.pageblockselected
{
  border: none;
}

/* For when the mouse is hovered over the blocks */
.textcorrectblock.semitransparent, .textcorrectcompletelycorrectblock.semitransparent
{
  background-color: gray;
}

/* For when the mouse is not hovered over the blocks */
.textcorrectblock.transparent, .textcorrectcompletelycorrectblock.transparent
{
  background-color: rgba(0, 0, 0, 0);  /* Restore to transparent */
  opacity: 1;  /* This is necessary so the border is visible */
}

ul.datebrowserricharddocuments li
{
  padding: 0.125rem;
}

/* Make the text that appears in the list of documents as small as practical, to save horizontal space which is often very limited. The "em" rule is for feature code display. */
ul.datebrowserricharddocuments li a, ul.datebrowserricharddocuments li a:link, ul.datebrowserricharddocuments li a:visited, ul.datebrowserricharddocuments li em
{
  font-size: 0.8rem;
}

/* Use Flex to lay out the days in the day selector */
ul.datebrowserwhitneydayselector
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

ul.datebrowserwhitneydayselector li
{
  margin: 0.125rem 0;
  text-align: center;
  width: calc((100% - (6 * 0.25rem)) / 7);  /* Leave spacing of 0.25rem for each of the 6 spaces between each row of 7 days */
}

/* Similar to the Bootstrap nav-link with pills styling */
ul.datebrowserwhitneydayselector li a, ul.datebrowserwhitneydayselector li span
{
  display: block;
  padding: 0.5em 0.25em;  /* Need less horizontal padding for small screens */
}

/* For styling clickable days in the day selector */
ul.datebrowserwhitneydayselector li a
{
  border: 1px solid var(--bs-gray-400);
  border-radius: var(--bs-border-radius);
}

/* For styling unclickable days in the day selector */
ul.datebrowserwhitneydayselector li span
{
  color: var(--bs-gray-600);
}

/* For styling the selected day in the day selector */
ul.datebrowserwhitneydayselector li.datebrowserwhitneyselectedday a
{
  background-color: var(--bs-primary);
  color: white;
}

ul.datebrowserwhitneydaysofweek
{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0px;
}

ul.datebrowserwhitneydaysofweek li
{
  text-align: center;
  width: calc((100% - (6 * 0.25rem)) / 7);  /* Leave spacing of 0.25rem for each of the 6 spaces between each row of 7 days */
}

/* Use Flex to lay out the months in the month selector */
ul.datebrowserwhitneymonthselector
{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
/* On smallish screens the months are wrapped onto multiple lines */
@media (max-width: 800px)
{
  ul.datebrowserwhitneymonthselector
  {
    flex-wrap: wrap;
  }
}

ul.datebrowserwhitneymonthselector li
{
  margin: 0.125rem 0;
  text-align: center;
  width: calc((100% - (11 * 0.25rem)) / 12);  /* Leave spacing of 0.25rem for each of the 11 spaces between each row of 12 months */
}
/* On smallish screens leave spacing of 0.25rem for each of the 5 spaces between each row of 6 months */
@media (max-width: 800px)
{
  ul.datebrowserwhitneymonthselector li
  {
    width: calc((100% - (5 * 0.25rem)) / 6);
  }
}
/* On tiny screens leave spacing of 0.25rem for each of the 3 spaces between each row of 4 months */
@media (max-width: 500px)
{
  ul.datebrowserwhitneymonthselector li
  {
    width: calc((100% - (3 * 0.25rem)) / 4);
  }
}

/* Similar to the Bootstrap nav-link with pills styling */
ul.datebrowserwhitneymonthselector li a, ul.datebrowserwhitneymonthselector li span
{
  display: block;
  padding: 0.5em 0.25em;  /* Need less horizontal padding for small screens */
}

/* For styling clickable months in the month selector */
ul.datebrowserwhitneymonthselector li a
{
  border: 1px solid var(--bs-gray-400);
  border-radius: var(--bs-border-radius);
}

/* For styling unclickable months in the month selector */
ul.datebrowserwhitneymonthselector li span
{
  color: var(--bs-gray-700);
}

/* For styling the selected month in the month selector */
ul.datebrowserwhitneymonthselector li.datebrowserwhitneyselectedmonth a
{
  background-color: var(--bs-primary);
  color: white;
}

ul#documentdisplayleftpanetabgroup > li
{
  z-index: 100;
}

ul.helptableofcontents, ul.privacytableofcontents
{
  list-style: none;
  padding: 0px;
}

ul#publicationbrowserhlist, ul#sectionclassifierhlist
{
  margin-bottom: 0.25rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

ul#publicationbrowserhlist li, ul#sectionclassifierhlist li
{
  margin-bottom: 0.125rem;
  min-width: 44px;  /* Recommendation for minimum 44px components for touch devices */
  text-align: center;
}

/* No curved borders, because these aren't done properly if the hlist wraps onto multiple lines */
ul#publicationbrowserhlist .page-link, ul#sectionclassifierhlist .page-link
{
  border-radius: 0;
}

ul.documentclassifiervlist, ul.publicationbrowserlist, ul#publicationdocumentslist, ul.sectionclassifiervlist
{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0px;
  padding: 0.25rem;
}

ul.documentclassifiervlist li, ul.publicationbrowserlist li, ul.sectionclassifiervlist li
{
  border-bottom: 1px solid var(--bs-gray-100);
  padding: 0.25rem;
  width: 100%;  /* Single column display */
}

ul.documentclassifiernodeexploded, ul.publicationclassifiernodeexploded, ul.sectionclassifiernodeexploded
{
  list-style: none;
}

/* Double column display normally */
ul.publicationbrowserlist.doublecolumn li, ul.sectionclassifiervlist.doublecolumn li
{
  width: 50%;
}
/* ...but single column on tiny screens */
@media (max-width: 500px)
{
  ul.publicationbrowserlist.doublecolumn li, ul.sectionclassifiervlist.doublecolumn li
  {
    width: 100%;
  }
}

ul#publicationdocumentslist li
{
  border-bottom: 1px solid var(--bs-gray-100);
  padding: 0.125rem;
  width: 100%;  /* Single column display */
}

.aroundoverlay
{
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  touch-action: none;
  -ms-touch-action: none;
}

#userclipimageoverlay
{
  cursor: crosshair;
}

#clipbuttondiv
{
  margin: 0;
  padding: 0;
  position: absolute;
  display: block;
  text-align: right;
}

#clipdiv
{
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  display: block;
  touch-action: none;
  -ms-touch-action: none;
}

img.iiificon
{
  height: 20px;
  vertical-align: text-bottom;
  width: 20px;
}

/* ---------- Tutorial Popups Setting ---------- */

/* Tutorial layer style on document display page */
#viewertutorial
{
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 100;
}

/* Tutorial popup style */
.popper
{
  display: none;
  background-color: #FFF;
  border-radius: 8px;
  width: 250px;
  z-index: 105;
}
.popper .popper__arrow
{
  border-color: #FFF;
}

/* Transparent cross hair */
#tutorialmiddlecrosshair
{
  position: absolute;
  height: 1px;
  width: 1px;
  top:10%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* Slightly move the tutorial popup arrows when document is maximised */
.documentdisplaymaximisedpopperarrow
{
  top: calc(30% - 5px) !important; 
}

#tutorialpopuptutorial .documentdisplaymaximisedpopperarrow
{
  top: 5px !important; 
}

/* Add a bit of margin at the bottom of the compass icon in the tutorial link to match the alignment of the other items, also add margin between the icon and the text */
.svgtutorial
{
  margin-bottom: 4px;
  margin-right: 4px;
}

.restarttutorial
{
  font-size: 0.8rem;
  white-space: nowrap;
}