/*Version 1 - 07 April 2026*/
/*Version 2 - 11 April 2026 - Additional styles for new eResources profile page ; Mobile display responsiveness*/
/*Version 2.1 - 12 April 2026 - Changes to Footer*/

/*Color and height for header*/
.header {
	background-color: #ffffff;   	/* White background */
/*	width: 100%;	     */		/* Full screen width */
/*	height: 140px;	     */		/* Adjust height as needed */
/*	display: flex;       */
/*	margin-top:35px	     */
	margin-bottom: 35px; */	/* Gap between header and column containers to allow for Search and QuickSearch bars 
/*	margin-left: 25px;    */
	display: flex;		/* V2 */
	align-items: center;	/* V2 */
}

/*Color for header wrapper*/
.headerWrapper {
	background-color: #ffffff;
/*	height: 110px;      */
	width: 100%;
}

.header_container {
	color: #ffffff
/*	width: 1000px;       */
/*	min-height: 110px;   */
}

/*Logo container*/
.logo_container {
	flex-shrink: 0;		/* V2 */
/*	margin-top: 0px;	*/
/*	margin-left: 0px;	*/
}

/*Logo Image - replaced in V2*/
/*.logo_container img {	*/
/*  display: block;	*/
/*max-width: 100%;*/   /* scales down to fit container */
/*  height: auto;     /* maintains aspect ratio */
/*width: 371px;*/
/*  height: 360px;*/
/*}	*/


/*Text box next to logo - V2*/
.library_container {
    margin-left: 20px;
}

/* Text next to logo - V2*/
.library_title {
    font-size: clamp(16pt, 3vw, 20pt);
    color: #000000;
}

/* Header and Logo Mobile responsiveness - V2*/

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .library_container {
        margin-left: 0;
        margin-top: 10px;
    }

    .library_title {
        font-size: 16pt;
    }

    .logo_container img {
        max-width: 160px;
        height: auto;
    }
}

/*Lower the position of Main Menu*/
#mainMenuContainer {
  margin: 5px
}

/*Color for Welcome text - Orange*/
.welcome {
  padding:5px;
  color:#ff5100
}

/*Color for Log in text - Black*/
.loginLink a {
  color:#000000;
}

/*Color for My Lists text - Black*/
.menuLink a {
  font-size:13px;
  padding:5px;
  color:#000000;
}

/*Color for My Lists text once visited - Black*/
.menuLink a:visited {
  color:#000000;
}

/*Color for Lib Info text - Black*/
#libInfoLink {
  color:#000000;
}

/*Color for Enable Adaptability text - Black*/
.ada_link {
  color:#000000;
}

/*Color for Help circle - Black*/
.fa-question-circle::before {
  color:#000000;
}

/*Color for Pipe separators - White*/
.pipeSeparator-light {
  color:#fff
}

/*Add Search box wrapper - gold*/
#searchBoxWrapper {
	background: #ffb600;
	top: 95px; /*original = 85px*/
}

/*Color for the "Search" button - dark grey*/
#searchButton {
    background-color: #53575a;
}

/*Color for "Search" button when you hover your mouse over it - teal*/
#searchButton:hover {
    background-color: #005470;
}

/*The gold border color for the 2 search boxes in the top left*/
#searchBox .dropDown {
    border: 1px solid #ffb600;
}

/*Border around Search field*/
#q {
  border:2px solid #fff;
}

/*The "Advanced search" link*/
#searchBoxAdvancedLink a {
    	color: #000000;
	font-size: 12px;
}

/*Add QuickSearch Wrapper*/
#quicksearchWrapper {
	background-color: #ffffff;
	text-align: Center;
	width: 100%;
	min-height: 35px;
	position: absolute;
  	top: 133px; /*original = 123px*/

    	/* Flexbox for vertical centering */
    	display: flex;
	flex-wrap: wrap; /* V2 - wraps on a smaller screen */
    	align-items: center;   /* Vertical centering */
    	justify-content: center; /* Horizontal centering */
}

/*Add QuickSearch Bar*/
.quicksearchBar {
	width: 100%;
	font-size: 16px;
}

/*Add QuickSearch Buttons*/
.quicksearch_display_button {
/*	Padding: 4px 50px 0; */
	Padding: 4px 30px;	/*V2 for mobile resonsiveness*/
}

/*The "QuickSearch" buttons font colour*/
.quicksearch_display_button a {
    	color: #000000;
	font-size: 16px;
	white-space: nowrap;	/*V2 for mobile resonsiveness*/
}

/* V2 - to adjust for mobile screens */
@media (max-width: 768px) {

    #quicksearchWrapper {
        position: relative;   /* REMOVE absolute on mobile */
        top: auto;
        padding: 6px 10px;
    }

    .quicksearchBar {
        font-size: 14px;
    }

    .quicksearch_display_button {
        padding: 4px 10px;    /* drastically reduced */
    }

    .quicksearch_display_button a {
        font-size: 13px;
    }
}

/*Buttons container, a and .btn - previously in html*/
    .button-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      max-width: 400px;
      width: 100%;
    }

    .button-container a {
      text-decoration: none;
      width: 100%;
    }

    .btn {
      display: block;
      padding: 12px;
      width: 100%;
      border: none;
      color: #000;
      font-size: 16px;
      cursor: pointer;
      border-radius: 12px;
      transition: transform 0.25s ease,
                  box-shadow 0.25s ease,
                  opacity 0.25s ease;
    }

    .btn:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      opacity: 0.92;
    }

 /* Color themes - Previously in html*/
    .color1 { background: #ffb600; }   /* gold */
    .color2 { background: #000000; color: #fff; } /* black with white text */
    .color3 { background: #ffffff; }   /* white */
    .color4 { background: #53575a; color: #fff; }   /* dark grey with white text*/
    .color5 { background: #cccccc; }   /* light grey */
    .color6 { background: #870064; color: #fff; }   /* purple with white text */
    .color7 { background: #ff5100; }   /* orange */
    .color8 { background: #005470; }   /* teal */
    .color9 { background: #78ded4; }   /* turquoise */
    .color10 { background: #896b25; }  /* olive */

/*eResources Column - V2*/
  .eresources-column {
      	background: #fff;
  	padding: 10px;
	border:1px solid #000;
  	margin: 5px;
	line-height: 1.4; 	/* Sets spacing to 1.4 times the font size */
	text-align: center;
  }

/*To make only visible slide clickable*/
.slide {
  pointer-events: none;
}
.slide[style*="opacity: 1"] {
  pointer-events: auto;
}

/*Footer - colour currently dark grey*/
#footer {
  background:#53575a;
  color:#808285; 		/* fill in colour if background not fill space - cold grey */
  padding: 20px;		/*Added in V2 for responsive grid */
  display: flex;
  flex-wrap: wrap;
/*  display: grid; */		/* Grid styling removed in V2.1 to place copyright at bottom */
/*  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */ /* Grid styling removed in V2.1 to place copyright at bottom */
/*  gap: 30px; */		/* Grid styling removed in V2.1 to place copyright at bottom */
/*  min-height:25px; */    	/*Removed in V2 for responsive grid */
/*  width:100%; */		/*Removed in V2 for responsive grid */
/*  margin-top:8px;  */		/*Removed in V2 for responsive grid */
/*  position:relative;*/
/*  position:static\9*/
}

/*Color of footer text - white*/
#footer a {
  color:#fff
}

/*Line gap in footer to increase space between lines. Then add div class in html where required - V2 */
.footer-gap {
  margin-top: 15px;   /* controls the blank space above the text  */
}


/* NEW V2.1 - Footer columns - V2.1 */
.footer-column {
  flex: 1;
  min-width: 250px;
  margin: 10px;
}

/* NEW V2.1: copyright styling */
#copyright {
  flex: 0 0 100%;          /* takes full width */
  text-align: center;     /* center text */
/*  font-size: 0.85rem;  */	/* Add in is delivered sizing not work */
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); /* optional separator */
}

/*the facet filter buttons*/
.button {
    background: #ffb600 url(./images/sirsidynix/alert-overlay.png) repeat-x;
}

/*the facet filter buttons when you hover over them*/
.button:hover {
    background-color: #ff5100
}

/*Color of the links to the current/previous rooms at the top of the page*/
.secondary_header_menu_container ul li a {
    color: #ffffff;
}