:root {
  --padding: 10px;
}

.pageOn {
	background: #CCC;
	border:		1px solid #369;
	margin:		2px 4px;
	padding:	2px 4px;
	color:		#369;
}

.pageOff {
	background: #EEE;
	border:		1px solid #369;
	margin:		2px 4px;
	padding:	2px 4px;
	color:		#369;
}

.pageOff:hover {
	background:	#DDD;
	cursor: pointer;
}

.pageOff a {
	color:			 #000;
	text-decoration: none;
}

.paginationSelect {
	background: #EEE;
}

.paginationErrors {
	clear:			both;
	text-align:		left;
	border:			2px dashed #D90;
	color:			#A40;
	background:		#FD9;
	padding:		10px;
	width:			70%;
	margin:			auto;
	margin-top:		40px;
	margin-bottom:	40px;
}


.hover {
    position:relative;
}

.tooltip { /* hide and position tooltip */
  top:-30px;
  margin-left:-10px;
  margin-right:-10px;
  padding: 6px;
  background-color:#F2F2F2;;
  color:black;
  border-color: black;
  border: 1px solid;
  border-radius:5px;
  opacity:0;
  position:absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.hover:hover .tooltip { /* display tooltip on hover */
    opacity:1;
}

.lib_table {
	width: 100%;
	margin:0;
}
.lib_table th, .lib_table td {
    padding: 2px;
}

.noborder-table {
    border-collapse: collapse;
    border: none;
}
.noborder-table th, .noborder-table td {
    border: none;
}

.border-table {
    border: 1px solid #EAEAEA;
}
.border-table th, .border-table td {
     border: 1px solid #EAEAEA;
}

.lib-media-image {
	margin:0px;
}


.lib-card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	justify-content: flex-start;
	gap:var(--padding);
    padding:var(--padding);
    height:calc(100% - 2 * var(--padding));
}


.lib-media-label-container {
	display: flex;
	overflow: hidden;
	width: 100%;
}

.lib-media-label {
	text-overflow: ellipsis;
	width: 100%;
	text-align: center;
}

.lib-author-label-container {
	display: flex;
	overflow: hidden;
	width: 100%;
}

.lib-author-label {
	text-overflow: ellipsis;
	width: 100%;
	text-align: center;
	font-size: x-small;
	opacity:0.5;
}


.lib-media-card {
	width: calc(100% - var(--padding));
    min-height: 220px;
    max-width: 100%;
    border-radius: 2px;
	border: 1px solid #EAEAEA;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
	gap:5px;
	padding:var(--padding);
	overflow:hidden;
}
.lib-media-card:hover {
	outline: 2px solid #C4C4C4;
}

@media (min-width: 480px) {
	.lib-media-card {
		width: calc(50% - var(--padding));
	    max-width: 50%;
	}
}
@media (min-width: 700px) {
	.lib-media-card {
		width: calc(33% - var(--padding));
	    max-width: 33%;
	}
}

@media (min-width: 900px) {
	.lib-media-card {
		width: calc(25% - var(--padding));
	    max-width: 25%;
	}
}

@media (min-width: 1200px) {
	.lib-media-card {
		width: calc(16% - var(--padding));
	    max-width: 16%;
	}
}