/* Labs combine style to match library.link carousel style */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

h2.action-header {
    line-height: 1.5 !important;
}

.data-source {
    opacity: 0;
}

i.data-source {
    font-size: 120%;
    color: lightgrey;
}

.combined-resources {
    overflow: auto;
}

.combined-resources.combined-resources-carousel {
    height: 340px;
}

.combined-resources.combined-resources-grid {
}

#combine {
    /*padding-top: 10px;*/
    /*padding-left: 20px;*/
    /*padding-right: 20px;*/
}

.combined-carousel .thumbnail .thumbnail-actions {
    margin-top: 10px;
    text-align: center;
}

.combined-carousel .thumbnail .thumbnail-actions ul.dropdown-menu li {
    position: relative !important;
    z-index: 999 !important;
}

.grid-group .thumbnail {
    width: 200px;
    margin: 5px 5px !important;
}

.thumbnail {
    height: 300px;
    padding: 3px 5px !important;
    margin: 5px 5px !important;
    float: left !important;
}

.view-display .view-button {
    margin-right: 3px;
}

.view-display .view-button .button-text {
    padding-left: 2px;
    padding-right: 2px;
}

.view-display ul.dropdown-menu {
    min-width: inherit !important;
}

.thumbnail-holder {
    max-height: 240px;
    min-height: 240px;
    height: 240px;
    width: 160px;
    text-align: center;
    margin: 0 auto;

}

.thumbnail-holder .thumbnail-image img {
    border: none !important;
    margin-left: auto;
    margin-right: auto;
    min-height: 240px;
    max-height: 240px;
    z-index: 1;
}

.thumbnail-holder .thumbnail-group .media-type {
    font-size: 140%;
}

.thumbnail-holder .thumbnail-group span.type {
    position: absolute;
    top: -4%;
    right: -6%;
    font-size: 130%;
    opacity: 0.9;
    z-index: 1;
}

.thumbnail-holder .thumbnail-group .media-type {
    font-size: 140%;
}

.item-cover .thumbnail-holder .thumbnail-group span.type {
    right: -3%;
    font-size: 200%;
}

.thumbnail-holder {
    position: relative;
}

.item-cover .thumbnail-holder .thumbnail-image img {
    min-height: inherit;

}

.item-cover .thumbnail-holder .thumbnail-image img {
    max-height: 310px;
}

.thumbnail-holder .thumbnail-overlay {
    font-size: 5.4em;
    opacity: 0.8;
    padding-top: 25px;
}


.thumbnail .caption {
    height: 40px;
    overflow: hidden;
    padding: 0px 5px 5px 5px;
    color: inherit !important;
    font-size: 13px;
}

.combined-carousel .thumbnail .thumbnail-actions {
    margin-top: 10px;
    text-align: center;
}

.combined-carousel .thumbnail .thumbnail-actions ul.dropdown-menu li {
    position: relative !important;
    z-index: 999 !important;
}

#combine.combined-resources-carousel .rank-indicator, #combine.combined-resources-grid .rank-indicator {
    position: absolute;
    top: 0;
    left: -5%;
    z-index: 1;
}

#combine.combined-resources-carousel .rank-badge, #combine.combined-resources-grid .rank-badge {
    font-size: 120%;
    opacity: 0.9;
}

/* use slick css for loader gid and font-awesome fonts for slick carousel chevrons */

.slick-prev:before, .slick-next:before {
    font-family: FontAwesome !important;
    font-size: 70px !important;
    line-height: 1 !important;
    color: darkgrey !important;
    opacity: 0.75 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.slick-prev {
    margin-left: 11px !important;
    z-index: 100;
    left: -10px;
    width: 40px !important;
    height: 40px !important;
    height: 40px !important;
    top: 45% !important;
}

.slick-next {
    margin-right: 33px !important;
    z-index: 100;
    right: -10px !important;
    width: 40px !important;
    height: 40px !important;
    top: 45% !important;
}

.slick-prev:before {
    content: "\f137" !important; /* fa-chevron-circle-left */
}

[dir="rtl"] .slick-prev:before {
    content: "\f138" !important; /* fa-chevron-circle-right */
}

[dir="rtl"] .slick-next {
    left: -5px !important;
    /*top: 70px !important;*/
    right: auto !important;
}

[dir='rtl'] .slick-prev {
    right: -5px !important;
    left: auto;
}

.slick-next:before {
    content: "\f138" !important; /* fa-chevron-circle-right */
}

[dir="rtl"] .slick-next:before {
    content: "\f137" !important; /* fa-chevron-circle-left */
}

.slick-slider {
    margin-bottom: 0px !important;
    background-color: #FFFFFF !important;
}

.slick-list {
    max-height: 344px;
}

/* responsive scale for slick carousels for smaller screens (align with center-mode seting) */

@media (max-width: 480px) {
    .slick-item {
        padding-left: 75px;
    }
}

@media (max-width: 480px) {
    .navbar-default {
        overflow-x: hidden;
    }
}

/* responsive buttons */

@media (max-width: 768px) {
    .navbar-brand .organization-name {
        display: none;
    }

    .collection-info {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .navbar-brand .organization-name {
        display: none;
    }
}

#combine-wrapper {
    min-height: 320px;
}

.combined-notification {
    position: relative;
    width: 160px;
    margin: 10px auto;
}

.combined-notification:before {
    position: absolute;
    content: "\f1ce";
    font-family: FontAwesome;
    font-size: 160px;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    z-index: -1;
    color: lightgrey;
}

.combine-message-alert {
    position: relative;
    padding: 15px;
    width: 99%;
    top: 60px;
}

#combined-message {
    font-size: large;
}

#combined-resources-collection {
    font-weight: 700;
}

#combined-resources-library {
    font-weight: 700;
}

.combined-resources-citation {
    font-size: 110% !important;
}

.combined-resources-context {
    padding-right: 5px;
}

#footer {
    padding-top: 30px;
}

.line {
    border-top: 3px solid grey;
}

.prose {
    font-size: larger;
}

.alert-prose-title {
    font-weight: 600;
    padding-bottom: 10px;
}

#default-alert {
    display: none;
}

#resource-combine-count, #resource-fetch-count, #resource-fail-count {
    display: none;
}

#instance-fail-count, #instance-fetch-count, #instance-total-count, #work-fail-count, #work-fetch-count, #work-total-count {
    display: none;
}

#overview {
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    overflow: auto;
}

#get-started ul {
    height: 110px;
    overflow: auto;
}

#get-started h4 {
    margin-top: 0px;
}

.mixer-title h4, .lister-title h4 {
    padding-top: 20px;
}

#lister-title, #mixer-title {
    display: none;
}

#lister-description, #mixer-description {
    display: none;
    font-size: 110%;
}

#lister-context h1, #mixer-context h1 {
    margin: 5px 0px 0px 5px;
    border-bottom: 1px solid lightgrey;
    opacity: 0.9;
    font-size: 200%;
}

/*#lister-context h2, #mixer-context h2 {*/
    /*margin: 5px 0px 0px 5px;*/
    /*font-size: 140%;*/
    /*padding-top: 10px;*/
/*}*/

#lister-context .lister-description, #mixer-context .mixer-description {
    margin: 15px;
}


.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

#combined-resource-missing .list-group {
    max-height: 140px;
    overflow: auto;
}

#combined-resource-missing .list-group-item {
    padding: 5px 10px;
}

#combined-resource-missing {
    display: none;
}

#combined-resource-missing hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid darkgrey;
}

#combined-resource-missing .list-group {
    padding-top: 10px;
}

.combined-resource-missing-text {
    padding-left: 3px;
    font-weight: bold;
}

.btn-mix-results {
    padding: 4px 15px;
    margin-top: -5px;
}


/* combine layout for simple lists */

#combine.combined-resources-grid .resource-preview {
    /*width: 200px;*/
}

#combine.combined-resources-grid .slot {
}

#combine.combined-resources-grid .thumbnail {
    width: 200px;
}

/*  BiblioGraph complex combined list style */

.library-list-title {
    font-size: 160%;
    padding: 5px;
}

.library-list-description {
    font-size: 120%;
    color: darkgray;
    padding: 5px;
}

.library-list-panel {
    padding-bottom: 40px;
}

.data-source {
    opacity: 0.1;
}

#debug {
    padding-top: 20px;
    border-top: 3px solid #dddddd;
}

/* Common style */

#library-list-actions .btn-group {
    padding-bottom: 5px;
}

#library-list-info {
    padding-bottom: 10px;
}

.list .resource-instances a {
    padding-left: 2px;
    padding-right: 2px;
}

.list .library-list-item .title {
    font-weight: 500;
}

.carousel figure, .carousel .resource-preview {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    width: 200px;
    height: 360px;
    /*height: auto;*/
    text-align: center;
    cursor: pointer;
}

.grid figure, .grid .resource-preview {
    position: relative;
    float: left;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    padding: 5px;
}

.combined-resources-grid {
}

.combined-resources-list .list-group-item {
    padding: 7px 12px !important;
}

.combined-resources-list .list-group-item i.fa-lg {
    font-size: 120%;
}

.combined-resources-list .list-group-item i.fa-2x {
    font-size: 140%;
}


.combined-resources-list .list-group-item .resource-instances .instance-option {
    padding-left: 3px;
    padding-right: 3px;
}


.carousel .thumbnail-image, .grid .thumbnail-image {
    width: 100%;
    min-height: 295px;
    overflow: hidden;
}

/* NOTE: remove .grid figure img */
.carousel figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
}

.carousel figure img:hover, .grid figure img:hover {
    opacity: 0.5 !important;
}

.carousel figure figcaption, .grid figure figcaption {
    padding: 0.3em;
    /*color: #fff;*/
    /*text-transform: uppercase;*/
    font-size: 1.2em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*border-top: 1px solid #dddddd;*/
    /*margin-top: 5px;*/
}

.carousel figure figcaption .title, .grid figure figcaption .title {
    overflow: auto;
}

.carousel figure figcaption::before,
.carousel figure figcaption::after,
.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.carousel figure figcaption,
.carousel figure figcaption > a,
.grid figure figcaption,
.grid figure figcaption > a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.carousel figure figcaption > a,
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.carousel figure h2,
.grid figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.carousel figure h2 span,
.grid figure h2 span {
    font-weight: 800;
}

.carousel figure h2,
.carousel figure div.resource-instances,
.grid figure h2,
.grid figure div.resource-instances {
    margin: 0;
}

.carousel figure div.resource-instances,
.grid figure div.resource-instances {
    letter-spacing: 1px;
    font-size: 68.5%;
}

/* default settings for instance options */

.instance-option i {
    /*font-size: 300%;*/
}

.instance-option.large i {
    font-size: 400%;
}

p.resource-instances {
    margin: 0px 0px;
}


span.resource-box i.resource-inner {
    /*color: #FFA500;*/
    color: #3399f3;  /* align with spacelab.min.css */
    font-size: 150%;
}

span.resource-box i.resource-inner {
    color: #006161; /* align with style.css --link */
    font-size: 150%;
}

span.resource-box i.resource-outer {
    color: #fff;
}

span.resource-box:hover i.resource-inner {
    color: #fff !important;
}

span.resource-box:hover i.resource-outer {
    color: #006161; /* align with style.css --link */
}

span.resource-largebox i.resource-outer {
    font-size: 170% !important;
}

/*-----------------*/
/***** Kira *****/
/*-----------------*/

figure.effect-kira {
	background: #fff;
	text-align: left;
    min-width: fit-content;
}

figure.effect-kira img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-kira figcaption {
	z-index: 1;
    padding: 5px;
    max-height: 45px;
    font-size: 13px;
    overflow: hidden
}

figure.effect-kira div.resource-instances {
    margin-top: -200px;
	/*padding: 2.25em 0.5em;*/
	font-weight: 600;
	font-size: 100%;
	line-height: 3;
	opacity: 0;
    height: 200px;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-kira div.resource-instances a {
	margin: 0 0.5em;
	color: #101010;
}

figure.effect-kira div.resource-instances a:hover,
figure.effect-kira div.resource-instances a:focus {
	/*opacity: 0.6;*/
}

figure.effect-kira figcaption::before {
	position: absolute;
	top: 0;
	right: 2em;
	left: 2em;
	z-index: -1;
	height: 3.5em;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
	transform: translate3d(0,4em,0) scale3d(1,0.023,1);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

figure.effect-kira:hover img {
	opacity: 0.5;
}

figure.effect-kira:hover div.resource-instances {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-kira:hover figcaption::before {
	/*opacity: 0.7;*/
	-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
	transform: translate3d(0,5em,0) scale3d(1,1,1);
}

.data-title {
    display: flex;
}

.data-title a {
    overflow: hidden;
    text-overflow: ellipsis;
}