/*

//////////////////////////////////////////////////////////////////////
//
// 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%;
}

/* Adjust the space between a <ul> <li> bullet and the text following
   it. N.B. this works for desktop, but on small device causes the
   bullet to be too close, so this style is overriden by an @media < 600px.
   later. */

/* This works on Chrome but looks horrible in Fox. To investigate.

li::before {
    content: "";
    margin-left: -0.5rem;
}
*/

/*** 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. ***/

.sed {
    position: fixed;
    width: 200px;
    background: yellow;
    display: inline-block;
}

.setEditor {
    position: fixed;
    top: 5px;
    z-index: 100;
    display: inline-block;
    width: 250px;
    height: 97vh;
    overflow-y: clip;
    margin-left: 10px;
    margin-top: 5px;
    background: WhiteSmoke;
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 5px 5px 5px 0px #bdbdbd;
}

.setEditorHidden {
    display: none;
}

.setEditorImageTip {
    text-align: center;
    padding-top: 10px;
}

.setEditorImageTipVisible {
    display: block;
}

.setEditorImageTipInvisible {
    display: none;
}

/*********************************/
/* icons */

.clipboardCopierIcon{
    width: 20px;
    position: relative;
    top: -2px;
}

.settingsIcon {
    width: 25px;
    position: relative;
    top: -2px;
}

.setEditorImageIcon {
    width: 30px;
}

.twizzlerIcon {
    width: 16px;
    margin-right: 1em;
    transform: rotateY(180deg);
}

.fullScreenIcon {
    width: 20px;
    margin-right: 0.5em;
}

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

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

.setIdAndTitle {
    text-align: left;
    text-wrap: balance;
    font-weight: bold;
    background-color: whiteSmoke;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    width: 95%;
}

.setIdDisplay {
    text-align: center;
}

.setInfoDivider {
    margin: 0px
}

.setTitleDisplayedContainer {
    text-align: center;
    text-wrap: pretty;
    font-weight: bold;
    background-color: whiteSmoke;
    padding: 5px;
}

.setIdAndImageCount{
    font-weight: normal;
}

.setIdDisplayVisible {
    visibility: visible;
}

.setIdDisplayInvisible {
    visibility: collapse;
}

.SetEditorInactivePrompt {
    font-weight: normal;
    text-align: center;
}

.setTitleTaintedAsterisk {
    color: red;
}

.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: -5px;
}

.setEditorTable td {
    border: 0px solid blue;
    padding: 0px;
    background-color: WhiteSmoke;
    text-align: center;
}

.setNotesEditorForm {
    margin: auto;
    width: 90%;
}

.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;
    font-weight: normal;
    padding: 4px;
    border-radius: 5px;
    color: white;
    background-color: #3d68c5;
}

.HICbuttonInactive {
    font-size: 18px;
    font-weight: normal;
    padding: 4px;
    border-radius: 5px;
    color: white;
    background-color: #D3D3D3;
    cursor: not-allowed;
    border: 2px solid #D3D3D3;
}

.noTBPadding {
    padding-top: 0px;
    padding-bottom: 0px;
}

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

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

.HICbuttonSmall {
    font-size: 12px;
    padding: 4px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: #3d68c5;
    color: white;
}

.HICbuttonSmallInactive {
    font-size: 12px;
    padding: 4px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: #757575;
    cursor: not-allowed;
    color: white;
}

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

.openInSetButton {
    display: inline-block;
}

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

.dropTargetsGroup {
    height: 100%; /* was 75vh; */
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;
    background: WhiteSmoke;
    margin-top: 10px;
}

.dropTarget {
    height: 200px;
    width: 200px;
    border-radius: 15px;
    background: WhiteSmoke;
    margin: 10px;
    overflow: hidden; /* crops an over-sized image */
}

.dropTargetActive {
   border: solid 2px #ccc;
}

.dropTargetInactive {
    border: dashed 1px #ccc;
}

.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;
    text-align: center;
}

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

.resultsContainerSetEditorDisplayOn {
    /*   width: 100%; */
    width: 80%;
    margin-left: 270px;
}

.resultsContainerSetEditorDisplayOff {
    width: 100%; 
    margin-left: 0px;
}

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

#searchSummary {
    text-align: center;
    background-color: WhiteSmoke;
    border-bottom: 1px solid gray;
    width: 110%; /* Weird, yes. Needed to make the bar stretch full window, after introducing the set editor v3.. */
}

.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: 0px solid grey;
    padding: 10px;
}

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;
    text-align: right;
}


.searchButtonForLargeMedium {
    display: inline-block;
}

.mainSearchForm {
    border: 0px solid red;
}

/* media-specific things */


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

::placeholder {
    opacity: 0.7;
    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. */
    }
    li::before {
	content: "";
	margin-left: 0rem;
    }
}

@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: 0px 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;
}

.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;
}

.announcementBarLargeMediumDevice {
    background: yellow;
    color: black;
    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 {
    position: relative;
    top: -4px;
}

.metadataTagValue {
}

.twizzler {
    display: inline-block;
    position: relative;
    top: 0px;
}

/***********************************************/
/* 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: 3px solid green;
}
.mediaRestrictedGDPR {
    background-color: white;
    border: 3px solid red;
}

.mediaRestrictedCopyright {
    border: 3px solid orange;
}

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

.mediaRestrictedMatrix {
    border: 3px 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 styling, used for the set editor. Borrowed from
 https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css

 We want the select activator to look like a HICbutton.

*/

/* The :focus pseudoclass specifies the style of the select activtor.
   On Firefox, this has the side-effect of making the background colour of the options dark grey. */

.newSelect:focus {
     background-color: #3d68c5;
}


.newSelect {
    width: 45px;
    font-size: 18px;
    height: auto;
    margin-bottom: 0.5rem;
    -webkit-appearance: none; 
    appearance: none; 
    color: white;
    border: 1px solid grey;
    padding: 4px;
    border-radius: 0.25em;
    background-color: #3d68c5;
    margin-top: 0.5rem;
}

/* 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/searchIcon.png');
	background-position: 5px 3px; 
	background-repeat: no-repeat;
    }

    .navbarBottom {
	border-bottom: none;
    }
}

@media screen and (min-width: 601px) {
    .mainSearchForm input[type=text] {
	width: 94%; /* 170825, was 85% */
	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/searchIcon.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: black;
    background-color: orange;
}

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

/* 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. */
    margin-right: 0.25rem; /* Foundation has 1rem. */
}

#searchBoxContainer {
    display: inline-block;
    position: relative;
    width: 500px;
    text-align: right; /* 170825 */
}

/* 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;
}

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

/* Loader spinner for the set editor. */

#loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none; /* So you can click through it to elements beneath, with smaller z. */
   /* background-color: rgba(0, 0, 0, 0.3); */
}



/* Loader from https://cssloaders.github.io/ */
.loader {
    /* Position the loader in the center of its wrapper div. */
    position: relative;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -30px;

    /* The loader graphic. */
    display: none; /* Toggled none/block by JS. */
    width: 48px;
    height: 48px;
    border: 5px solid;
    border-color: red transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
	transform: rotate(0deg);
    }
    100% {
	transform: rotate(360deg);
    }
} 

.dangerArea {
    width: 65%;
    border-radius: 10px;
    background-color:pink;
    padding: 5px;
}

/*******************************************************************/
/* HIC-up */


#hupContainer {
/*    justify-content: center;
    display: flex;
    flex-direction: row;
*/
    text-align: center;
}

#hupDrop-area {
    border: 2px solid #ccc;
    background-color: Whitesmoke;
    width: 350px;
    height: 350px;
    border-radius: 10px;
    font-family: sans-serif;
    /* padding: 10px; */
    margin-top: 10px;
    text-align: center;
}

#hupMediaForm {
    margin-left: 20px;
    margin-top: 10px;
    text-align: left;
}

#hupArtefactForm {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
    text-align: left;
}

#hupHeader{
    text-align: center;
}

#hupDrop-area.highlight {
/*    border: 2px dashed #3d68c5; */
    background-color:  #3d68c5;
}

#hupDetails-area {
    display: none;
    border: 1px solid black;
    font-family: sans-serif;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
    width: 93%;
}

#hupPreview {
    width: 100%;
    height: 100%;
    align-content: center;
    justify-content: center;
}

#hupPreview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.uploadDone {
    background-color: green;
}

#hupFileMessage{
    font-weight: normal;
}

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

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

select.hupSelectW85 {
    width: 85%;
    margin: 0px;
    height: 28px;
}

select.hupSelectW90 {
    width: 90%;
    margin: 0px;
    height: 28px;
}

.hupForm input[type=text] {
    width: 100%;
}

.hupFormTable {
    display: block;
    border-collapse: collapse;
}

.hupFormTable td {
    white-space: nowrap;
    border: 1px solid blue;
}

.hupMediaUploader {
    text-align: center;
}

#hupLocationFormContainer {
    margin-top: 10px;
}

.mandatoryMarker {
    position: relative;
    top: 8px;
    font-weight: bold;
    font-size: 25px;
}

.mandatoryMarkerActive {
    color: red;
}

.mandatoryMarkerInActive {
    color: grey;
}

.uploadLocationTable td{
    border: 0px solid blue;
}

.hupFieldCaption{
    padding-left: 10px;
}

.hupFieldCaptionInactive {
    color: LightGray;
}

.hupLabel {
    color: black;
}

.hupLabelInactive {
    color: LightGray;
}

.hupTable {
    margin: auto;
}

.hupTable tr {
    border: 1px solid black;
}

.hupTable td {
    border: 0px solid red;
    vertical-align: top;
}

.uploadLocationTable {
    border: 1px solid black;
}

.uploadLocationTable td {
    border: 0px solid red;
}

.hupInput{
    width: 96%;
}

input [type="text"] {
    width: 95%;
}

#hupMedia_title {
}

.highlightInput {
    border: 2px solid red;
}

.mediaError {
    display: none;
    margin: auto;
    position: absolute;
    width: 340px;
    top: 150px;
    z-index: 1000;
    visibility: hidden;
    color: white;
    background-color: red;
}

.hupFormTableHeader {
    text-align: center;
    background-color: WhiteSmoke;
    color: black;
}

.mainbar {
    display: none;
    text-align: center;
}

.hupMediaIdDisplay {
    font-weight: bold;
    width: 300px;
}

.hupCustomIdInput {
    display: inline-block;
}

select:disabled {
   opacity: 0.7;
}

.hupStatus {
    position: relative;
    display: inline-block;
    width: 300px;
    background-color: WhiteSmoke;
    border: 1px solid blue;
    text-align: center;
}

.hupFieldset {
    /* By default <fieldset> is styled with a border and some padding
       etc., which we don't want. We want it to be an invisible container. */
    display: inline-block;
    padding: 0px;
    margin: 0px;
    border: none;
}

.hupTextarea {
    border: 1px solid black;
}

.hupTextarea:disabled {
    border: 1px solid rgba(118, 118, 118, 0.3);
}

#hupDropZoneMessageContainer {
    position: relative;
}

#hupDropZoneMessage {
    position: absolute;
    visibility: visible;
    width: 100%;
    text-align: center;
    top: 150px;
    z-index: 20;
}

.hupTooltip {
    position: relative;
}

.hupTooltiptext {
    position: absolute;
    width: max-content;
    z-index: 1; /* Ensure tooltip is displayed above content */
    top: -35px;
    left: 0px;
    visibility: hidden; /* Hidden by default */
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
}

/* Used in setInputError() for fading out the error message.  */ 
.fadeout {
    opacity: 1;
    transition: all 1s;
}
 
.fade {
    opacity: 0;
}

.messageInfo {
    background-color: green;
    padding: 5px;
}

.messageError {
    background-color: red;
    padding: 5px;
}

#mediaIdTable {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 2px;
    margin: auto;
}

#mediaIdTable tr {
    height: 44px;
}

#mediaIdTable td {
    padding-left: 20px;
    padding-right: 20px;
}

#hupViewInHICMessage {
}

.confirmationTick {
    color: green;
    font-size: 25px;
}

#hupNewMediaLocationPanel {
    display: none;
    margin-top: 5px;
    width: 100%;
}

#hupNewMediaCollectionPanel {
    display: none;
    margin-top: 5px;
    width: 100%;
}

#hupNewArtefactKindPanel {
    display: none;
    margin-top: 5px;
    width: 100%;
}

#hupNewArtefactLocationPanel {
    display: none;
    margin-top: 5px;
    width: 100%;
}

#hupLocationSelectElement {
    display: inline-block;
    width: 66%;
}

#hupNewMediaLocationDir {
    width: 100%;
}

#hupNewMediaLocationParent {
    width: 100%;
}

#hupMediaLocationSelect {
    width: 110%;
}

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

.activityReport {
    margin: 0px auto;
    border-collapse: collapse;
}

.activityReport thead {
    font-weight: bold;
    background-color: WhiteSmoke;
}

.activityReport td {
    padding: 10px;
}


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

#hupNewMediaLocationError {
    left: -90px;
}

.noteTable {
    width: 100%;
    border-collapse: collapse;
}

.noteTable td {
    border: 2px solid black;
}

.noteTextarea {
    border: 0px;
    padding: 2px;
}

.noteHeader {
    text-align: center;
    background-color: WhiteSmoke;
}

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

/* end */