/*

//////////////////////////////////////////////////////////////////////
//
// The University of Manchester Department of Computer Science
// Historical Images Catalogue (HIC).
//
//////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////
//
// HIC.css. This file defines the CSS for HIC.
//
//////////////////////////////////////////////////////////////////////

*/

a:link {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: blue;
} 

a:hover {
    color: blue;
    background: #ffff00;
}

a:active {
    color: blue;
}

html {
    /* 040825: When opening the help pop-up or the set editor notes
   pop-up, the scrollbar disappears from the parent page, then comes
   back (why, I don't know). This causes the parent page to wobble
   slightly, but noticeably, horizontally. The scrollbar-gutter
   setting below causes space to be always allocated for the
   scrollbar, which is overlaid on top of the space, so the wobble
   doesn't happen. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter */
    scrollbar-gutter: stable;
}

body {
    font-family: Arial, sans-serif;
    font-size: .95em;
    height: 100%;
    line-height: 150%;
    word-break : break-word; /* To break long URLs. */
    /* The following, when html:overflow-x: hidden is also set, are supposed to prevent horizontal scrolling on mobile, but do not. */
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

p {
    line-height: 150%;
    font-size: 0.95em;
}

h1, h2, h3, h4, h5 { 
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #000000;
}

/* 110225: Remove indent on bullet. */
ul {
    padding-inline-start: 0;
    list-style-position: inside;
}

li {
    font-size: 0.95em;
    line-height: 150%;
}

/*** The navbar and its components. ***/
.navbar {
    position: sticky; /* 130425: Making this 'fixed' gives wrong layout. */
    top: 0px;
    background: white;
    /* padding here is what we want for for large/medium devices. For
   small devices this causes the page to be horizontally swipe-able, so
   we use a media query to change small device padding to 10, 10, 10,
   10. */
    padding: 10px 0px 10px 0px; /* top right bottom left. */
    width: 100%;
    color: black;
    text-align: center;
    z-index: 100; /* Ensure it always covers any other elements. */
}

.navbarName {
    font-size: 20px;
}

.navbarRH {
    display: inline-block;
}

.navbarEmphasis {
    font-weight: bold;
}

.HICpageTitleSmall {
    background-color: blue;
    color: white;
    text-align: center;
    padding: 5px;
}

.HICreadonly {
    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 15pt;
}

/*** The set editor. ***/

.setEditor {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 60%;
    height: 345px;
    background: WhiteSmoke;
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 5px 5px 5px 0px #bdbdbd;
}

.setEditorHidden {
    display: none;
}

.newSelect {
    font-size: 19px;
    border-radius: 0.25em;
    background-color: #ffffff;
    height: auto;
    border: 1px solid grey;
    padding: 4px;
}

.selectContainer {
    position:relative;
    display: inline;
}

.setTitleDisplayed {
    font-size: 15px;
    font-weight: bold;
}

.setTitleTaintedAsterisk {
    visibility: hidden;
    font-weight: bold;
    font-size: 30px;
}

.setNotesTextAreaCaption {
    font-weight: bold;
}

.setEditorImageNotesImage {
    font-weight: bold;
}
    
.td-center-align {
    text-align: center;
    white-space: nowrap;
}

.setEditorTable {
    width: 100%;
    border: 0px solid red;
    margin-bottom: -3px;
}

.setEditorTable td {
    width: 100%;
    border: 0px solid red;
    padding: 0px;
    background-color: WhiteSmoke;
}

.setEditorTableTitle {
    width: 900px;
}

.setNotesEditorTable {
    border-radius: 10px;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
}

.setImageNotesConcatTitle {
    font-weight: bold;
}

.setNotesTextarea {
    background-color: #ffebe6;
}

.contactFormTextarea {
    background-color: white;
    margin-bottom: 5px;
}

.setNotesConcatImageTextarea {
    background-color: WhiteSmoke;
}

.HICbutton {
    font-size: 18px;
    padding: 4px;
    border-radius: 5px;
    border: 0px solid black;
    color: white;
    background-color: #3d68c5;/*  #2283d8;*/
    font-weight: normal;
}

.HICbutton:hover {
    background-color:#1b4bb4; 
}

.HICbutton:active {
    background-color:#1b4bb4; 
}

.HICbuttonSmall {
    font-size: 12px;
    padding: 4px;
    border-radius: 0px;
    border: 1px solid black;
}

.HICbuttonInactive {
    font-size: 20px;
    color: LightGray;
    padding: 4px;
    border: 1px solid LightGray;
    border-radius: 0px;
}

.HICbuttonDelete {
    font-size: 18px;
    color: white;
    padding: 4px;
    background-color: red;
    border-radius: 5px;
}

.openInSetButton {
    display: inline-block;
}

/*** Styles for drag and drop. ***/

.dropTargetsGroup {
    overflow-x: scroll;
    white-space: nowrap;
    background: WhiteSmoke;
}

.dropTarget {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: solid 2px #ccc;
    border-radius: 15px;
    background: WhiteSmoke;
    margin: 10px;
    overflow: hidden; /* crops an over-sized image */
}

.dropTargetEditorInactive {
    display: inline-block;
    height: 200px;
    width: 200px;
    border-radius: 15px;
    border: dashed 1px #ccc;
    background: WhiteSmoke;
    margin: 10px;
    overflow: hidden; /* crops an over-sized image */
}

.drag-over {
    border: solid 2px black;
}

.thumbnailSet-drag-over {
    border: solid 10px blue;
}

.thumbnailSet-dropComplete{
    background-color: yellow;
}

.greyOut {
    opacity: 0.4;
    filter: blur(1px);
    border: solid 10px yellow;
}

.best {
    border: solid 2px green;
    background: #93C572;
}

.drag-overBin {
}

img.droppedImage {
    display: block;
    margin-left: auto;  /* center the image */
    margin-right: auto; /* center the image */
}

.droppedImageCaption {
    display: block;
    font-weight: bold;
}

/*** The search results container. ***/

.resultsContainer {
    height: 100%;
    z-index: 1;
}

#searchSummary {
    text-align: center;
    background-color: WhiteSmoke;
    border-bottom: 1px solid gray;
}

.searchResultsSummary {
    margin-top: 20px;
    text-align: center;
}

.searchResultsSummarySmallDevice {
    margin: auto;
    text-align: center;
    margin-bottom: 30px;
}

.searchResultsSummarySearchTerm {
    font-weight: bold;
}

.strictSearchResultSpacer {
    margin-top: 20px;
}

.mediaDetailsTitle {
    font-weight: bold;
}

.notInDBYet {
    font-weight: bold;
    color: red;
}

/*** Image styles. ***/

img.neg {
    filter: invert(1);
}

img.mirrorHoriz {
   transform: scaleX(-1);
}

img.rotate90 {
    transform: scale(1.0) rotate(90deg);
}

img.rotate180 {
  transform: rotate(180deg);
}

img.rotate270 {
  transform: rotate(270deg);
}

img.imageWithBorder {
    border: 1px solid grey;
    vertical-align: middle;
}

img.imageCentered {
    vertical-align: middle;
}

.matchNotHighlighted {
    background-color: transparent;
}
.matchHighlighted {
    background-color: lime;
}

.forumEntry {
}

textarea {
  padding: 5px 5px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 18px;
  font-family: Arial, sans-serif;
  resize: none;
}  

.editorFieldCaption, newNoteCaption {
    font-weight: bold;
}


.searchButtonForLargeMedium {
    display: inline-block;
}

.mainSearchForm {
    border: 0px solid red;
}

/* media-specific things */


/***********************************************/

input::placeholder {
    opacity: 0.5;
    color: grey;
}

.mainSearchForm input[type=submit] {
    height: 32px;
    width: 90px;
    font-size: 150%;
}

.adminLowResForm input[type=text] {
    width: 3em;
}

@media screen and (max-width: 600px) {
    .navbar {
	padding: 10px 10px 10px 10px; /* top right bottom left. */
    }
}

@media screen and (max-width: 600px) {
    .mediaEditTable {
	width: 100%;
	border: 0px solid black;
	padding: 10px;
    }
}

@media screen and (min-width: 601px) {
    .mediaEditTable {
	width: 600px;
	border: 0px solid black;
	padding: 10px;
    }
}

.mediaEditTable td {
    border: 0px solid black;
}

.mediaEditButtonVisible {
 visibility: visible;
}

.mediaEditButtonInvisible {
 visibility: hidden;
}

.editConfirm {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  border: 3px solid #f1f1f1;
  z-index: 10;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mediaSearchResult {
    border: 1px solid #808080;
}

.helpItem {
    font-weight: bold;
}

.helpButtonName {
    font-weight: bold;
    border: 1px solid black;
    padding: 2px;
}

.editConfirmation {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*****************************/
/* Styles for tooltips */
/* 060425: These styles were renamed from tooltip* to HICtooltip* to
   differentiate the tooltip* classes defined in foundation.css. */
/* usage:
   <div class="HICtooltip">Some text
     <span class="HICtooltiptext">this is what pops up</span>with a tooltip.
   </div>
*/

/* original .HICtooltip {
    position: relative;
    display: inline-block;
    z-index: 0;
}
*/

.HICtooltip {
    display: inline-block;
    position: relative;
}

.HICtooltip .HICtooltiptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    padding: 5px;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.HICtooltip:hover .HICtooltiptext {
    visibility: visible;
    opacity: 1;
}

.clipboardCopier {
    display: none;
    position: absolute;
    padding: 5px;
    background-color: #555;
    color: white;
    width: 100px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    bottom: 150%; /* vertical position of popup "link copied" */
    left: 10%;    /* horizontal position of popup "link copied" */
    z-index: 10000;
}

/*****************************/
.errortip {
    position: absolute;
    display: inline-block;
}

.errortip .errortexthidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}

.errortip .errortextshow {
    visibility: visible;
    position: absolute;
    text-align: center;
    width: 180px;
    font-size: 15px;
    border-radius: 6px;
    background-color: grey;
    color: white;
    text-align: center;
    padding: 5px 5px;
    bottom: 5%;
    left: 0%;
    margin-left: -105px;
    opacity: 1;
}

/*** end of styles for tooltips **/

.adminPageDBcode {
    font-weight: bold;
}

.lowResMessage {
    font-weight: bold;
    color: red;
    background-color: yellow;
}

.userControlList {
    border: 1px solid black;
    padding: 2px;
}

.userControlList th,td {
    border: 1px solid black;
    padding: 5px;
}

/*** For tools ***/

.disclaimerBarLargeMediumDevice {
    background: white;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    color: red;
    text-align: center;
    word-wrap: break-word;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.disclaimerBarSmallDevice {
    background: red;
    color: white;
    text-align: center;
    word-wrap: break-word;
    padding: 5px;
}

.disclaimerBoxSmallDevice {
    background: red;
    color: white;
    text-align: center;
    word-wrap: break-word;
    padding: 5px;
    border-radius: 10px;
}

.smallDeviceContactLink {
    background: white;
    padding: 3px;
    border-radius: 10px;
}

/***********************************************/
/* Contact form */

.contactFormContainer {
  position: fixed; /* This prevents the div from scrolling. */
  background: white;
  padding: 10px;
  height: auto;
  border: 10px solid #f1f1f1;
  border-radius: 20px;
  z-index: 40;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.contactForm input[type=text], input[type=password], textarea {
    font: inherit;
    width: 100%;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid black;
}

.loginFormContainer {
  background: white;
  padding: 10px;
  z-index: 40;
}

.loginForm input[type=text], input[type=password] {
    font: inherit;
    width: 100%;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid black;
}

/* "loggedInUsername" styles the display of the <span>real-name</span>
   of the logged in user. The :empty variant addresses the unexpected
   (but apparently standard) behaviour such that if the span is empty
   (nobody logged in, so real-name == ""), the background colour
   specified applies to what appears to be a space character in the
   <span>, instead of nothing, so you get a blob of background colour
   appearing. The :empty variant sets the background colour to white
   so this blob is not visible.
*/

.loggedInUsername {
    font-size: 16px;
    padding: 6px;
    color: black;
    background-color: #eeeeee;
    border-radius: 5px;
}

.loggedInUsername:empty {
    background-color: white;
}

.userManagerForm input[type=text], input[type=password], textarea {
    font: inherit;
    width: 100%;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid black;
}

.setEditorButtonInvisible {
 visibility: hidden;
}

.setEditorButtonVisible {
 visibility: visible;
}

.mediaInResultsTableCell {
    vertical-align: top;
}

.audioInResultsTableCell {
    vertical-align: middle;
}

.mediaInfoInResultsTableCell {
    vertical-align: top;
}

img.imageInMetadataReport {
    width: 400px;
    border: 1px solid black;
}

.metadataReportTable {
}

.metadataReportTable td {
    width: 600px;
    border: 0px solid red;
    font-family: Arial, sans-serif;
    font-size: 1em;
    height: 100%;
    line-height: 150%;
}

.highlightedMetadata {
    padding: 5px;
    background-color: #e5e4e2;
}

.metadataTagName {
    font-weight: bold
}

.metadataLink {
    text-align: right;
}

.metadataTagValue {
}

/***********************************************/
/* For the visibility matrix page */

.matrixWrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   grid-column-gap: 0px;
   grid-row-gap:6px;
  }

.box {
  width: 160px;
  background: white;
  border: 1px solid black;
  padding: 5px 5px 5px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.visCaption {
   color: red;
  }

.imageVisible {
    border: 25px solid green;
}

.restrictedDisplay {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15pt;
    text-align: center;
    line-height: 150%;
    padding: 5px;
    margin-top: 25px;
    margin-bottom: 10px;
    background-color: #e5e4e2;
    border: 1px solid black;
}

.imageRestricted {
    border: 25px solid red;
}

.mediaUnrestricted {
    border: 5px solid green;
}
.mediaRestrictedGDPR {
    background-color: white;
    border: 5px solid red;
}

.mediaRestrictedCopyright {
    border: 5px solid orange;
}

.mediaRestrictedCopyrightAndGDPR {
    /* Source: css-tricks.com/stacked-borders */
    box-shadow: 0 0 0 5px red;
    outline: dashed 5px orange;
}

.mediaRestrictedMatrix {
    border: 5px solid red;
}

/* For getVisibilityMatrixPage() mouseover zooming. */

.imageContainer {
    margin: auto;
    bottom: 0;
    height: 80%;
    border: 0px solid green;
}

.imageContainer img {
   transition: 0.2s ease-in-out;
}

.imageContainer img:hover {
    transform: scale(3.0);
}

/***********************************************/

/* Styles for the TIFF file uploader. */

.tfu_container {
    border: #d7d7d7 1px solid;
    border-radius: 5px;
    margin: 20px auto;
    padding: 10px 20px 10px 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    background-color: WhiteSmoke;
}

.tfu_container table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 20px;
}

.tfu_container table td {
    text-align: left;
    padding: 5px;
    border: 1px solid #ededed;
    width: 50%;
}

.progressBarsContainer tr:nth-child(even) {
    background-color: #f2f2f2
}

.tfu_container .progress {
    margin: 20px 0 0 0;
    width: 300px;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
}

.tfu_container .progress-bar {
    width: 0%;
    height: 24px;
    background-color: #1589ff;
    margin-top: 15px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
}

@keyframes tfuFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.tfu_img {
    height: 100px;
    border: 1px solid black;
    animation: tfuFadeIn ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.tfu_csv {
    background-color: blue;
    text-align: center;
    color: #ffffff;
    padding: 5px;
}

.tfu_mp {
    background-color: orange;
    text-align: center;
    color: #ffffff;
    padding: 5px;
}

.unifiedUploaderStatus {
    font-size: 1.5em;
}

.uploaderWarning {
    color : red;
    font-weight: bold;
    font-size: 20px;
}

.uploaderOK {
    color : green;
    font-weight: bold;
    font-size: 20px;
}

.uploaderPrompt {
    font-weight: bold;
    font-size: 20px;
}

.uploaderCSV {
    width: 100%;
    border-collapse: collapse;
    background-color: WhiteSmoke;
}

.uploaderCSV td {
    width: 1px;
    border: 1px solid black;
    padding: 5px;
    text-align: center;
}

.uploaderCSV td.emph {
    width: 1px;
    border: 1px solid black;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

/*************************************************/

.resultsListCell {
    border: 1px solid blue;
}

/* For desktop grid (aka thumbs) view shift-mouseover zooming. */

.imageHoverScale img:hover {
    transform: scale(2.5);
}

.imageHoverNoScale img:hover {
    transform: none;
}

/* .HIC-image is a marker class attached to an image to tell the set
   editor's drag-and-drop receiver that this is a valid image element
   to add to the set. */
.HIC-image {
    width: 100%; /* 290425: 'width: 100%' had been removed, unknown why, so on desktop image was not filling RH cell. */
}

/* .HIC-imageGrid has the same function as .HIC-image but adds some
   styling too. */

.HIC-imageGrid {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.setEditorImage {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.resultsThumbCell {
    height: 250px;
    width: 100%;
    border: 1px solid black;
    text-align: center;
}

.resultsThumbTitle {
    border: 1px solid black;
    text-align: center;
    border-bottom: none;
}

.resultsThumbCell + .resultsThumbTitle {
    border: none;
}

.resultsThumbImageContainer {
    width: 100%; /* H & W need to be defined for img's object-fit to work. */
    height: 100%;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .resultsListRow {
	margin-top: -30px;
    }
}

@media screen and (min-width: 601px) {
    .resultsListRow {
	margin-top: 30px;
	border: 1px solid black;
    }
}

/***********************************************/

/* For HIC-setEditor.js updating search results. */

.fader {
    background-color: white;
    animation: fadeIn 2s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/***********************************************/

.mediaIdDisplay {
    font-weight: bold;
}

/***********************************************/

/***********************************************/
/* For HIC-visualise-archive.php               */

.strayMatrixWrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   grid-column-gap: 0px;
   grid-row-gap:6px;
  }

.strayBox {
  width: 210px;
  background: white;
  border: 1px solid black;
  padding: 5px 5px 5px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.smallDeviceInfoPage {
    padding: 10px;
}

.smallDeviceMediaDetails {
    padding-top: 10px;
}

/* video proxy */

.videoProxy {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.videoProxyTitle {
    padding: 5px;
    color: black;
    border: 1px solid gray;
    background-color: #e8e8e8;
}

.videoProxyImage{
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.videoProxyIcon {
}

.videoProxyPoster{
    width: 100%;
}

/* image proxy */

.imageProxy{
    width: 100%;
/*    padding: 10px;*/
    text-align: center;
    margin-bottom: 20px;
}

.imageProxyTitle {
    padding: 5px;
    color: black;
    border: 1px solid gray;
    background-color: #e8e8e8;
}

.imageProxyImage {
    border: 1px solid gray;
}

/* audio proxy */

.audioProxy{
    width: 100%;
/*    padding: 10px; */
/*    margin-top: 10px;*/
    text-align: center;
    margin-bottom: 20px;
}

.audioProxyTitle {
    padding: 5px;
    color: black;
    border: 1px solid gray;
    background-color: #e8e8e8;
}

.audioProxyImage{
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.audioProxyIcon {
    position: relative;
    top: 0px;
}

.mediaProxyRestrictedReason {
    padding: 5px;
    color: black;
    border: 1px solid gray;
    /*    background-color: #e5e4e2; */
    background-color: #f3cfc6;
}

/* Use an 'adjacent sibling selector' to solve the double border
   problem in the construction of image/video/audio proxies for small
   devices, when the title div is immediately followed by a
   restricted-reason div. Both divs have borders, and the bottom of
   the title div may not precisely coincide with the top of the reason
   div. "X + Y { style: value; }" means that when an element of class
   Y immediately follows an element of class X, style:value is applied
   to the Y element.
*/

.imageProxyTitle + .mediaProxyRestrictedReason {
    border-top: none;
}
.audioProxyTitle + .mediaProxyRestrictedReason {
    border-top: none;
}
.videoProxyTitle + .mediaProxyRestrictedReason {
    border-top: none;
}

/***********************************************/
/* Overrides for definitions in foundation.css */

select {
  width: 30%; /* foundation: 100% -- too wide for the set editor. */
}

/* 220425: in foundation.css, .has-tip has 'position: relative'. In
   desktop thumbs view, when you shift-mouseover an image and it
   scales, the tooltipped text shows through the image. The fix found
   was to remove the 'position: relative'. */

.has-tip {
    position: static;    /* foundation: relative */
    border-bottom: none; /* foundation: dotted 1px #8a8a8a; */
}

.tooltip {
    font-size: 100%;     /* foundation: 80% */
    border-radius: 10px; /* foundation: 0 */
    max-width: 20rem;    /* foundation: 10rem */
}

/***********************************************/

.smallDeviceButtons {
    padding: 5px;
}

.smallDeviceBackButton {
    display: inline-block;
    padding-right: 0px;
}

.smallDeviceBackButtonAlignRight {
    width: 100%;
    display: inline-block;
    text-align: right;
}

.justifyItems {
    display: flex;
    justify-content: space-between;
}

/* gridOpenInSetEditor is overriden by an @media version to hide it except on large screens. */
.gridOpenInSetEditor {
    display: inline-block;
    color: white;
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/***********************************************/

/* 240425: The navbar button that toggles display of the set editor,
   for logged-in users. We only want this displayed on large
   screens. Foundation defines large as >=1024px width, which includes
   iPad mini which is 1024px. So we define our own media query to
   catch this. The same applies to the open-in-set-editor button: We
   don't want this on the iPad.*/

@media screen and (max-width: 1024px) {
    .setEditorToggleButton {
	display: none;
    }
    
    .gridOpenInSetEditor {
	display: none;
    }

    .openInSetButton {
	display: none;
    }

    .HICshowLargeOnly {
	display: none;
    }

    .HICshowMediumOnly {
	display: inline-block;
    }
}

@media screen and (min-width: 1025px) {
    .setEditorToggleButton {
	display: inline-block;
    }
    
    .gridOpenInSetEditor {
	display: inline-block;
    }

    .HICshowLargeOnly {
	display: inline-block;
    }

    .HICshowMediumOnly {
	display: none;
    }
}

@media screen and (max-width: 600px) {
    .mainSearchForm input[type=text] {
	width: 100%;
	height: 27px;
	font-family: inherit;
	font-size: 18px;
	margin-bottom: 0px;
	padding: 2px 0px 2px 30px; /* top right bottom left. Th eleft padding to allow for the icon. */
	background-color: white;
	background-image: url('https://icarus.cs.man.ac.uk/toby/HIC4/assets/search20.png');
	background-position: 5px 3px; 
	background-repeat: no-repeat;
    }

    .navbarBottom {
	border-bottom: none;
    }
}

@media screen and (min-width: 601px) {
    .mainSearchForm input[type=text] {
	width: 100%;
	height: 27px;
	line-height: 1; /* Foundation's line-height is 1.5, which causes text in the input box on iPad to be clipped. */
	font-family: inherit;
	font-size: 20px;
	margin-bottom: 0px;
	padding: 2px 0px 2px 30px; /* top right bottom left */
	margin: auto;
	display: inline;
	background-image: url('https://icarus.cs.man.ac.uk/toby/HIC4/assets/search20.png');
	background-position: 5px 3px; 
	background-repeat: no-repeat;
    }

    .navbarBottom {
	border-bottom: 2px solid LightGray;
    }
}

/*******************************************************************/
/* Styles for HIC-slideshow.php */
/*******************************************************************/

.slideshowTitle {
    width: 100%;
    margin: auto;
    font-size: 25px;
    text-align: center;
    color: gray;
    border-bottom: 1px solid gray;
    padding: 10px;
}

.slideTitleContainer {
    width: 100%;
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
}

.slideTitle {
    /* font-size: set in HIC-slideShow.php */
    /* padding: set in HIC-slideShow.php */
    margin: auto;
    color: black;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.slideContainer {
    width: 100%;
    height: 80vh; /* height of the viewport, i.e. screen height */
    margin: auto;
    animation: fadeIn 0.4s;
}

/*******************************************************************/

.statusBar {
    width: 100%;
    background-color: SkyBlue;
    font-weight: bold;
    padding: 10px;
}

/*******************************************************************/

.chartContainer{
    margin: auto;
    margin-top: 10px;
    width:80%;
}

.statsChart{
}

/*******************************************************************/

.searchOptions {
    display: none;
    position: absolute;
    text-align: left;
    padding: 10px;
    z-index: 99999;
    border-radius: 10px;
    background-color: WhiteSmoke;
    border: 1px solid black;
    color: black;
    column-count: 2;
}

.emphasis {
    font-weight: bold;
}

.searchShowOptionsTable th {
    width: 50%;
}

/*******************************************************************/

.dev {
    color: white;
    background-color: red;
}

/* 200625. Override this Foundation style to bring a radio button's label closer to the button. */

[type=radio] + label {
    margin-left: 0rem; // Foundation has 0.5rem.
}

#searchBoxContainer {
    display: inline-block;
    position: relative;
    width: 500px;
}

/* Redefine the width of searchBoxContainer for small devices. While
    this <div> is not semantically needed on a small device, because
    Boolean search is not on small devices, because of the page
    structure it will nevertheless be present. (I have failed to think
    how to use the Foundation small-device-only type mechanism for
    this, as multiple versions of the <div> would contain elements
    with the same id's, which is is illegal.) searchBoxContainer
    contains the main search form <input> field, which will inherit
    its width. We want this width to be fixed at 500px on medium/large
    devices, so the Boolean search box is positioned correctly under
    the <input> field, but on small devices we want the input field to
    be 100% screen width. */

@media screen and (max-width: 600px) {
    #searchBoxContainer {
	width: 100%;
    }
}

#BooleanSearchFields {
}

#BooleanSearchTerm {
    font-weight: bold;
}

#BooleanSearchBoxContainer {
    position: absolute;
    visibility: hidden;
    top: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.BooleanSearchBox {
    width: inherit;
    background-color: WhiteSmoke;
    margin: 2px;
}

#BooleanRefinementsContainer {
/*    visibility: hidden; */
    width: inherit;
    background-color: WhiteSmoke;
    margin: 2px;
}

/* When a new Boolean search box is added to the DOM, fade it in over
 300ms, with starting delay 0ms.
 https://thinkdobecreate.com/articles/css-animating-newly-added-element/
*/
.BooleanSearchBoxAnimationOpen {
    animation: show 300ms 0ms ease-in forwards;
    opacity: 0;
}

@keyframes show {
  100% {
    opacity: 1;
    transform: none;
  }
}

#BooleanSearchStatusContainer {
    background-color: white;
    border: 1px solid black;
    border-bottom: 0px;
}

#BooleanSearchStatus {
    color: white;
}

select.BooleanSearch {
    width: 100%;
    margin: 0px;
    height: 28px;
}

.BooleanSearchTable { 
    /*   border: 0px solid green; */
    border: none;
    border-collapse: collapse;
    margin-bottom: 3px;
        border-radius: 15px;
}

.BooleanSearchTable tr:nth-child(odd) td {
    background: whiteSmoke;
}

.BooleanSearchStatusContainer + .BooleanSearchBox {
    border-top: 0px;
}

/*******************************************************************/

/* end */