@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');

@import url('./styles/workshops.css');

.row {
	/* padding: 10px; */
	/* margin-right: 0; */
	/* margin-left: 0; */
	margin: 0 5px;
}

.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	background: #7b2240;
	color: #ffffff;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
	outline: 3px solid #fad129;
	outline-offset: 2px;
}

/* region ----------------------- FONTS ----------------------- */

@font-face {
	font-family: 'ComeniaSansCondRegular';
	src: url('https://library.brooklyn.cuny.edu/resources/fonts/comenia_sans_co-webfont.eot');
	src: url('https://library.brooklyn.cuny.edu/resources/fonts/comenia_sans_co-webfont.woff') format('woff'),
		 url('https://library.brooklyn.cuny.edu/resources/fonts/comenia_sans_co-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ComeniaSansCondBold';
	src: url('https://library.brooklyn.cuny.edu/resources/fonts/comenia_sans_co_bold-webfont.eot');
	src: url('https://library.brooklyn.cuny.edu/resources/fonts/comenia_sans_co_bold-webfont.woff') format('woff'),
		 url('https://library.brooklyn.cuny.edu/resources/fonts/comenia_sans_co_bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.text-red,
.text-red a .quicklinks-image-sub-heading {
	/* Remote Access */
	color: darkred;
}

.text-green {
	color: darkgreen;
}

.font-bold {
	font-weight: bold;
}

/* endregion */

/* region ----------------------- HEADER ----------------------- */

.text-smaller,
.font-smaller {
	font-size: smaller;
}

#global-header-message,
#service-alerts-message {
	background-color: #FAD129;
	color: black;
	text-align: center;
}

.service-alerts-message-padded {
	padding: 15px 0;
}

/* endregion */


.fdlp-button-container {
	position: absolute;
	bottom: 25px;
	right: 30px;
}

.gov-info-button img {
	height: 32px;
	border: 5px solid white;
	border-radius: 1px;
	box-shadow: 2px 2px 5px #888;
}

.account-button-container {
	margin-top: 10px;
}

.account-button {
	display: inline-block;
	font: 12px 'ComeniaSansCondRegular', Arial, sans-serif;
	letter-spacing: 0.5px;
	text-decoration: none;
	padding: 14px 10px;
	white-space: nowrap;
	margin: 10px 0;
	cursor: pointer;
	/* font-family: "Trebuchet MS", sans-serif; */
	font-weight: bold;
	background: #FAD129;
	border: 1px solid #bbb8b5;
	box-shadow: 2px 2px 5px #888;
	color: black;
}

.account-button:hover {
	background: rgb(241, 201, 38);
	text-decoration: none;
	color: black;
}

/* endregion */

/* region ----------------------- CAROUSEL ----------------------- */

.carousel {
	max-height: 250px;
	padding: 0;
	margin: 0;
}

/* Adjust banners image width by window width */
/* #carouselBanners .carousel-item img, */
#carouselBanners .carousel-item img {
	width: 100%;
	max-width: 1100px;
}
#carouselBanners .carousel-inner {
	min-height: 160px;
	background-color: #d9d9d9;
}

#alertsCarousel .carousel-item.active,
#alertsCarousel .carousel-item-next,
#alertsCarousel .carousel-item-prev {
	display: block;
}

#alertsCarousel {
	height: 30px;
	padding: 0;
	margin: 0;
}

#alertsCarousel .carousel-item a {
	font-weight: bold;
}

#alertsCarousel .carousel-item span.updated {
	font-style: italic;
	font-size: smaller;
}

.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: 2s;
	transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	/*@supports (transform-style: preserve-3d) {*/
	transform: translate3d(0, 0, 0);
	/*}*/
}
/* endregion */

/* region ----------------------- SEARCH BOX ----------------------- */

.search-box {
	padding: 25px;
	/* margin-top: -40px; */
	background-color: #d9d9d9;
	 box-shadow: 0px 5px 15px -5px black;
	/* z-index: 1; */
	height: 390px;
}

.search-box .nav-item {
	border-radius: 5px;
	border: solid 2px #d9d9d9;
	background-color: #d9d9d9;
	/*padding: 0.5rem 0.25rem;*/
}
.search-box .nav-item a {
	text-decoration: none;
	color: black;
	font: 18px 'ComeniaSansCondRegular', 'ComeniaSansCondBold', "EB Garamond", serif;
	border: solid 2px transparent;
	padding: 0.7rem 0.5rem;
}

.search-box .nav-item .active,
.search-box .nav-item .active:hover,
.search-box .nav-item .active:focus {
	font-weight: bold;
	border: solid 2px rgba(0, 0, 0, 0.075);
	box-shadow: 0px 0px 7px 0px #aaa;
	background-color: #adb5bd2b;
	border-radius: 5px;
}

.search-box .nav-item:hover {
	/*font-weight: bold;*/
	border-radius: 5px;
	border: solid 2px rgba(0, 0, 0, 0.075);
	background-color: #adb5bd2b;
	/*box-shadow: 0px 0px 7px 0px #aaa;*/
}

.search-box-contents>.active {
	height: 240px;
}

.search-field {
	border: none;
	width: 90%;
	height: 50px;
	float: left;
	margin: 25px 0 0 0;
}

.search-field input[type=text] {
	width: 100%;
	height: 50px;
	border: 2px solid #767676;
	padding: 0 90px 0 20px;
	font-size: 15px;
	text-overflow: ellipsis;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.search-button {
	width: 10%;
	height: 50px;
	margin: 25px 0 40px 0;
	background-color: rgb(69, 121, 189);
	border: 0;
	cursor: pointer;
	font-family: "FontAwesome";
	content: "\f002";
	color: white;
	font-size: 20px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.search-field input[type=text]::-moz-placeholder,
.search-field input[type=text]::-webkit-input-placeholder {
	color: #b8b8b8;
}

.search-box a {
	color: #003d7a;
}

/* endregion */

/* region Searches */

.advanced-search-books {
	float: right;
}

/* Database Search */

.database-dropdown {
	position: relative;
}

.database-dropdown .dropbtn {
	cursor: pointer;
	width: 100%;
	height: 50px;
	border: 0;
	margin: 25px 0 0 0;
	-webkit-appearance: none;
	border-radius: 0;
	box-sizing: border-box;
	padding: 0 20px;
	font-size: 15px;
	background-color: #fff;
	font: 15px georgia, serif;
	font-style: italic;
	color: #959595;
	text-align: left;
}

.database-dropdown .dropbtn span {
	float: right;
}

.database-dropdown .btn:hover,
.database-dropdown .btn:active,
.database-dropdown .btn:focus {
	background-color: #fff;
	color: #959595;
	box-shadow: none;
}

.database-dropdown a:hover {
	background-color: #ddd;
}

.dropdown-content {
	display: none;
	width: 100%;
	background-color: #f6f6f6;
	overflow: auto;
	border: 1px solid #ddd;
	z-index: 1;
	overflow-y: overlay;
	/*webkit only*/
	max-height: 250px;
	position: absolute;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.show {
	display: block;
}

.database-title-heading {
	margin: 30px auto 5px auto;
	font-weight: bold;
}

.database-title {
	justify-content: center;
	flex-wrap: wrap;
}

.database-title a,
.database-title a:hover {
	color: black;
}

.pagination-sm .page-link {
	padding: .25rem .4rem;
}

/* endregion */

/* region ----------------------- QUICK INFO ----------------------- */

.quick-info-container {
	height: 350px;
	background-color: white;
	font-size: 13px;

	background-color: #fad129;
	padding: 10px;
	overflow: auto;
	overflow-x: hidden;
}

.quick-info-container .row {
	height: 39px;
	/* text-align: center; */
	align-content: center;
	padding-left: 0;
	padding-right: 0;
}

/* todo uncomment when enabling computer availability
.quick-info-container a. {
	text-decoration: none;
	color: black;
}*/

.quick-info-container>.row>.col-sm-5:hover,
.quick-info-container>.row>.col-sm-12:hover {
	background-color: #f1f1f1;
}

/* .quick-info-container .col-sm-5,
.quick-info-container .badge {
	padding: .6em 0;
} */

.available-computers-label,
.available-workshops-label {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font: 16px 'ComeniaSansCondRegular', 'ComeniaSansCondBold', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	letter-spacing: 0.05em;
	background-color: #f1f1f1;
	height: 37px;
	/* IE */
}

.available-computers-label:hover,
.available-workshops-label:hover {
	background-color: #f1f1f1 !important;
	color: black !important;
}

.available-workshops {
	font-size: 14px;
}

.workshop {
	text-align: left !important;
	align-content: flex-start !important;
}

.workshop-item {
	height: 30px !important;
	font-size: 12px;
}

.badge-availability {
	float: right;
	font-size: 12px;
	text-align: center;
	padding: .5em 0 !important;
	margin-right: 0;
	background-color: rgb(69, 121, 189);
	color: white;
	border-radius: 1rem;
	line-height: 1.1;
	height: 25px;
	/* IE */
}

/* endregion */

/* region ----------------------- QUICK LINKS ----------------------- */

.quicklinks-container {
	/*overflow: hidden;*/
	padding-bottom: 0;
	margin: 0 auto;
	text-align: center;
	padding-top: 30px;
	/* IE */
}

.quicklinks-container a {
	color: black;
	text-decoration: none;
}

.quicklinks-container select {
	display: none;
}

.quicklinks {
	border-bottom: none;
	padding: 0;
}

.quicklinks li {
	display: inline-block;
	display: inline-flex;
	flex-direction: column;
	width: 12%;
	border-right: 1px dotted #919191;
	padding: 0 10px;
	vertical-align: top;
	min-height: 170px;
	text-align: center;
}

.quicklinks li img {
	height: 64px;
}

/* .quicklinks li:first-child {
	padding-left: 0;
} */

.quicklinks li:last-child {
	padding-right: 0;
	border: 0;
}

.quicklinks li i {
	font-size: 48px;
	text-align: center;
}

.quicklinks>li>a {
	display: table-cell;
	padding: 0.5em;
	border: solid 1px #fff;
}

.quicklinks>li>a:hover {
	cursor: pointer;
	/* background-color: #d9d9d9; */
	border: solid 1px #7b224090;
	border-radius: 5px;
}


.quicklinks-last-child {
	border: none;
	border-right: none !important;
}

.quicklinks-image-heading {
	font: 17px 'ComeniaSansCondBold', 'ComeniaSansCondRegular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	margin: 20px 0 0 0;
}

.quicklinks-image-sub-heading {
	font-size: 12px;
}

.quicklinks h5 {
	font: 15px 'ComeniaSansCondBold', 'ComeniaSansCondRegular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	margin: 20px 0 0 0;
	text-shadow: none;
}

.quicklinks .quicklink {
	position: relative;
}

.remote-login i {
	margin-top: 5px;
	font-size: 13px;
}

#remote-access-problem {
	line-height: 10pt;
	margin-top: 10px;
}

#remote-access-problem a {
	color: #545454;
	font-size: 9pt;
}

/* endregion */

input:focus,
button:focus,
a:focus,
select:focus,
.nav-link:focus,
textarea:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


.chat-button {
	position: -webkit-sticky;
	position: fixed;
	top: 135px;
	right: 0;
	z-index: 1000;
	background-color: #7B2240
		/*#286090*/
	;
	border: solid 2px white;
	border-right: 0;
	padding: 10px;
	display: inline;
}

.chat-button a {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}





#searchNav {
	display: flex;
	/*justify-content: space-evenly;*/
	justify-content: space-between;
}



@media print {
	.navbar-custom {
		display: none;
	}
}


@media only screen and (max-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media only screen and (max-width: 1110px) {
	.container {
		padding-left: 0;
		padding-right: 0;
	}

	.gov-info-button {
		display: none;
	}
}

/* Change quicklinks to text, search and computers become one row */
@media only screen and (max-width: 930px) {
	.navbar .nav-link,
	.search-box .nav-item a {
		font-size: 17px;
	}

	.search-box {
		font-size: 15px;
	}

	.quicklinks {
		padding-left: 0;
	}

	.quicklinks li {
		width: 25%;
		border-right: none;
		padding: 0;
	}

	.quicklinks-image-heading {
		font: 17px 'ComeniaSansCondBold', 'ComeniaSansCondRegular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
		margin: 20px 0 0 0;
	}
}

@media only screen and (max-width: 880px) {
	.navbar .nav-link,
	.search-box .nav-item a {
		font-size: 16px;
	}

	.search-box {
		font-size: 14px;
	}

	.quick-info-container a {
		font-size: 12px;
	}

	.quick-info-container .badge-availability {
		height: 25.2px;
	}
}

@media only screen and (max-width: 800px) {
	.navbar .nav-link,
	.search-box .nav-item a {
		font-size: 15px;
	}

	.quicklinks li img {
		height: 48px;
	}

	.quicklinks li i {
		font-size: 48px;
	}
}

/* Mobile version, change nav and search? */
@media only screen and (max-width: 768px) {
	.container .col-md-4 {
		padding: 0;
	}

	.row {
		padding: 0;
	}

	.navbar {
		/* padding-top: 5px; */
		padding-bottom: 5px;
		background-color: #7b2240;
	}

	.navbar .nav-link {
		padding-left: 10px;
		font-size: 17px;
	}

	.navbar .navbar-brand {
		padding-left: 10px;
	}

	.account-button {
		display: inline-block;
	}

	.search-box {
		margin-top: -10px;
		padding: 10px;
		box-shadow: none;
		font-size: 14px;
	}

	.search-box .nav-item a {
		font-size: 16px;
	}

	.search-box {
		font-size: 14px;
	}

	.quick-info-container {
		margin: auto;
		/*text-align: right;*/
		/* TODO: enable this when PC availability is enabled again */
		height: initial;
	}

	.badge-availability {
		right: 2px;
	}

	.quicklinks li {
		width: 100%;
		min-height: 45px;
		text-align: left;
	}

	.quicklinks li {
		padding-left: 10px;
	}

	.quicklinks-image-heading {
		display: inline;
		font-size: 16px;
	}

	.quicklinks li img {
		height: 24px;
		width: 30px;
	}

	.quicklinks li i {
		font-size: 24px;
		width: 30px;
	}

	.fa-lock-open,
	.fa-lock {
		width: auto !important;
	}

	.remote-login {
		font-size: 14px;
	}

	.social img {
		width: 28px;
	}

}

/* iPhone 6 Plus/7 Plus/8 Plus/XR, Galaxy Note 9, Pixel 2/2 XL */
@media only screen and (max-width: 475px) {
	/* .page-header .row {
		height: 40px;
	} */

	.search-field input[type='text']::placeholder {
		font-size: 12px;
	}
}

.debug {
	border: solid 1px red;
}

/* iPhone 6/7/8/X/XS, LG Optimus L70, Microsoft Lumia 550/950, Galaxy S5/S9/S9+, Galaxy Note 3 */
@media only screen and (max-width: 384px) {
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}

	.search-box .nav-item a {
		font-size: 14px;
	}

	.search-box {
		font-size: 12px;
	}

	.quicklinks-image-heading {
		font-size: 14px;
	}

	.social img {
		width: 22px;
	}
}

/* iPhone 5, SE */
@media only screen and (max-width: 320px) {
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}

	.search-box .nav-item a {
		font-size: 13px;
	}

	.search-box {
		font-size: 12px;
	}

	.quicklinks-image-heading {
		font-size: 13px;
	}

	.social img {
		width: 18px;
	}
}

/* ----------------------- SECONDARY PAGES ----------------------- */

.page-title, .page_title {
	color: #7b2240;
	margin: 5px 0 20px 0;
}
h2.page-title,
h3.page-title,
h4.page-title,
h5.page-title
{
	font-weight: bold;
}

#main-content a {
	/* color: #7b2240; */
	/* text-decoration: underline; */
}

#page-breadcrumbs {
	margin-top: 15px;
}

#page-breadcrumbs a {
	color: #666666;
	font-size: 12pt;
	text-decoration: none;
}

.info-panel-header {
	border-color: black !important;
	background: #7b2240 !important;
}

#side-bar {
	color: black;
}

.info-panel-content-section-header {
	font: 22px 'ComeniaSansCondRegular', 'ComeniaSansCondBold', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif !important;
}

#category-list h3 a {
	color: black;
	font: 24px 'ComeniaSansCondRegular', 'ComeniaSansCondBold', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	text-decoration: none;
}

#category-list h3 a:hover {
	color: gray;
}

#category-list p {
	margin-bottom: 2rem;
}

.btn-outline-primary {
	color: black;
	border-color: #7b2240;
}

.btn-primary-bc,
a.btn-primary-bc,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
	background-color: #7b2240;
	border-color: #7b2240;
	color: white;
}
.btn-primary-bc:hover,
.btn-primary-bc:not(:disabled):not(.disabled).active,
.btn-primary-bc:not(:disabled):not(.disabled):active {
	color: #eee;
}

.bottom-div:hover {
	color: #7b2240;
}

#main-container p {
	margin-bottom: 0;
}

.sub-heading {
	font-family: "EB Garamond", serif;
	color: #7b2240;
}

#library-exceptions .tab-content>.active {
	height: auto;
}

/* ----------------------- DIRECTORY ----------------------- */

.card-title {
	margin-bottom: 0;
}

.directory-card {
	margin-bottom: 20px;
}

.directory-card .card-body {
	font-size: 14px;
	line-height: 22px;
}

.directory-card .card-body a,
.directory-table a {
	text-decoration: underline;
}

.directory-pagination {
	margin-top: 20px;
	margin-bottom: 30px;
	justify-content: center;
	flex-wrap: wrap;
}

h2,
h3 {
	color: #7b2240;
}

.hover-underline:hover {
	text-decoration: underline;
}

.dropdown-item.disabled {
	color: gray;
}

/* .pagination-sm .page-link,
.page-item.disabled .page-link {
	border-color: #7b2240;
} */

.search-box .nav-item a.disabled {
	color: gray;
}