.cards--grid .card .card-content {
	@media only screen and (max-width: 979px) {
		height: 100%;
	}
}

.cards--grid .card .card-content .card-content__detail {
	text-align: center;
}

// ----------------------------
// -- CARD IMAGE CONTAINER & LABEL
// ----------------------------
.card-content {
	&__img-container {
		position: relative;
	}
	&__labels {
		position: absolute;
		bottom: 4px;
		right: 4px;
		.label {
			font-size: 90%;
			display: inline-block;
		}
	}
}

// ----------------------------
// -- CARD TEXT STYLE
// ----------------------------
.card-content {
	&__title {
		font-size: 15px;
		font-weight: 600;
		height: 40px;
	}
	.muted {
		color: #848484;
		display: block;
		margin-top: 8px;
	}
}

// ----------------------------
// -- CARD HOVER
// ----------------------------

.card {
	opacity: 1;
	&:hover a {
		text-decoration: none;
		opacity: 1;
	}
	.card-content:hover {
		opacity: 1;
		-webkit-transform: translateY(-3px);
		-ms-transform: translateY(-3px);
		transform: translateY(-3px);
		opacity: 1;
		a {
			text-decoration: none;
		}
	}
}


.toolbar {
	background: #ddd;
	padding: 6px;
	text-align: center;
	min-height: 40px;
	a {
		background: #fff;
		padding: 4px 8px;
		border-radius: 350px;
		text-align: center;
		margin: 0 5px;
		display: inline-block;
	}
}



.cards--grid .card.card .card-content {
	&__img-container {
		height: 150px;
		overflow: hidden;
		position: relative;
		.card-content__img{
			width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: auto;
			min-width: 225px;
			img {
				width: 100% !important;
				height: auto;
				min-height: 150px;
			}
		}
	}
}

@media only screen and (max-width: 979px) and (min-width: 480px){
	.cards--grid .card {
		width: 50%;
	}
}

@media only screen and (max-width: 480px){
	.cards--grid .card {
		width: 100%;
	}
}

.badge-margin {
	margin: 10px 0;
}

.search-image-album {
	padding-left: 0;

	@media only screen and (max-width: 767px) {
		padding-left: 15px;
	}
}

// ----------------------------
// -- custom secondary navbar
// ----------------------------

.affix.navbar-app {
	top: 51px;
	left: 0;
	right: 0;
	z-index: 10;
	border: 0 0 1px;
	border-radius: 0;
}


.navbar-header .navbar-toggle {
	@media only screen and (max-width: 767px) {
		top: -40px;
	}
}

.nav-collapse .navbar-form-gallery {
	@media only screen and (min-width: 980px) {
		float: right;
	}
}

.details_form .controls p {
	font-weight: 600;
}

.details_form .metadata [class*='col-md']{
	width: auto;
	float: none;
	padding: 0;
}

// ----------------------------
// -- Justified Gallery overrides
// ----------------------------

.justifiedGallery {
	.jg-image-content {
		padding-top: 0;
		padding-right: 30px;
		background: #000;
		position: absolute;

		// Adds an ellipsis to all data inside the image info box
		p, small {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			// Removes <br> tags from the image info box so text can ellipsis properly.
			br {
				display: none;
			}
		}

	}

	// Added smooth gradient to top of image info
	.jg-image-content {
		&::after {
		content: '';
		position: absolute;
		background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		height: 25px;
		bottom: calc(100% - 1px);
		left: 0;
		right: 0;
		}
	}

	.jg-label, .jg-image-selected {
		background: rgba(0,0,0, 0.5);
	}

	.jg-label {
		cursor: pointer;
		position: absolute;
		width: 14px;
		height: 14px;
		top: 5px;
		left: 5px;
		background: rgba(238,238,238, 0.6);
		border: 1px solid rgba(0,0,0, 0.3);
		border-radius: 2px;
	}

	.jg-image-active .jg-label {
		background: rgba(238,238,238, 0.0);
		border: 1px solid rgba(0,0,0, 0.0);
	}

	.justifiedGallery-active .jg-image {
		opacity: 0.6;
	}

	input[type=checkbox] {
		visibility: hidden;
	}
}

// ----------------------------
// -- Slider Pro extra styles
// ----------------------------

.slider-pro {
	.sp-slides-container {
		background: rgba(0,0,0,1);
	}

	.sp-layer{
		visibility: hidden;
		opacity: 0;
		padding: 10px 15px;

		> .row > .col-md-6 > * {
			display: inline-block;
		}
	}

	.sp-black.sp-layer-top {
		background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
		height: 70px;
	}

	.sp-black.sp-layer-bottom {
		background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
		height: 70px;
	}

	.sp-arrow {
		position: absolute;
		display: block;
		width: 24px;
		height: 44px;
		cursor: pointer;
	}

	.sp-arrow:before {
		-webkit-transform: skew(145deg,0deg);
		-ms-transform: skew(145deg,0deg);
		transform: skew(145deg,0deg);
		border-color: #000;
		border-style: solid;
		border-width: 1px 1px 0px 1px;

	}

	.sp-arrow:after {
		-webkit-transform: skew(-145deg,0deg);
		-ms-transform: skew(-145deg,0deg);
		transform: skew(-145deg,0deg);
		border-color: #000;
		border-style: solid;
		border-width: 0px 1px 1px 1px;
	}

	.sp-next-arrow:after, .sp-next-arrow:before, .sp-previous-arrow:after, .sp-previous-arrow:before {
		content: '';
		position: absolute;
		width: 20%;
		height: 50%;
		background-color: #FFF;
	}

	.sp-thumbnail-image {
		width: auto;
		height: 100%;
	}

	.sp-thumbnails .sp-thumbnail-container:not(.sp-selected-thumbnail) {
		opacity: .5;
	}

    .image-file-name {
        @media only screen and (max-width: 480px) {
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
        }
    }

    .image-dropdown-toggle {
		color: #FFF;
		cursor: pointer;

		&:hover {
			color: #FFF;
		}
	}

    .image-likes a {
        color: #fff;
    }

	.image-dropdowns {
		float: right;
		min-width: 50px;
		cursor: pointer;
	}

	.dropdown {
		display: inline-block;

		&:first-child {
			margin-right: 10px;
		}
	}

	.image-likes{
		margin-top: 20px;
	}

	.sp-full-screen-button{
		top: auto;
		bottom: 100px;
		right: 20px;
		color: #fff;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);

		&:before {
            background: url('/interface_default/gallery/assets/images/expand-outline-white.svg');
            width: 23px;
            height: 23px;
            display: block;
            content: "";
		}
	}
}

.sp-full-screen.slider-pro {
	.sp-full-screen-button:before {
		content: "";
	}
}

.image-details {
	margin-top: 10px;
	padding: 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #eee;
	.text-right {
		a,span {
			padding: 0 8px;
			border-right: 1px solid #000;
			&:last-child{
				border-right: none;
			}
		}
	}
}

// ----------------------------
// -- Favourites
// ----------------------------
.gallery-toggle-favourite {
    cursor: pointer;
    display: flex;

    ion-icon {
        font-size: 1.2rem;
    }
}

.album-favourite {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.input-group.sort-input-group {
padding: 0 10px;
}

@media only screen and (max-width:768px) {
    .input-group.sort-input-group {
    padding: 0 5px 5px;
    }
}

.sort-input-group .input-group-btn .sort-button {
margin-left: 5px;
}
