﻿.ImageGallery {
	font-size: 14px;
	line-height: 16px;
}

.ImageGallery-Header {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-bottom: 1px solid #e3e3e3;
	box-sizing: border-box;
	display: -ms-flexbox;
    display: flex;
	height: 40px;
	padding-bottom: 10px;
	padding-top: 10px;
	width: 100%;
}

	.ImageGallery-Header > .ImageGallery-HeaderSpacer {
		-ms-flex: 1;
        flex: 1;
	}

	.ImageGallery-Header > .ImageGallery-HeaderTab {
		height: 20px;
		width: auto;
	}

		.ImageGallery-Header > .ImageGallery-HeaderTab > a.ImageGallery-HeaderTabItem {
			color: lightblue;
			font-size: 14px;
			font-weight: bold;
			margin: 10px;
			text-decoration: none;
		}

			.ImageGallery-Header > .ImageGallery-HeaderTab > a.ImageGallery-HeaderTabItem:hover {
				color: blue;
				font-size: 18px;
				text-decoration: none;
			}

			.ImageGallery-Header > .ImageGallery-HeaderTab > a.ImageGallery-HeaderTabItem.selected {
				color: black;
				font-size: 16px;
			}

a.ImageGallery-Button {
	-ms-border-radius: 5px;
	background-color: lightblue;
	border-radius: 5px;
	color: white;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	text-decoration: none;
}

	a.ImageGallery-Button.Up {
		height: 24px;
		line-height: 24px;
		margin-top: 3px;
		padding-bottom: 4px;
		padding-left: 6px;
		padding-right: 6px;
		padding-top: 4px;
	}

	a.ImageGallery-Button:hover {
		background-color: blue;
		text-decoration: none;
	}

	a.ImageGallery-Button.disabled {
		background-color: #e3e3e3;
		color: white;
		cursor: default;
		text-decoration: none;
	}

.ImageGallery-Gallery,
.ImageGallery-Image {
	-moz-box-sizing: border-box;
	-ms-background-size: contain;
	-webkit-box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: 1px solid #e3e3e3;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	height: 128px;
	margin: 3px;
	width: 128px;
}

	.ImageGallery-Image.Selected {
		border: 2px solid green;
	}

	.ImageGallery-Image.Exists {
		border: 2px solid black;
		cursor: default;
	}

.ImageGallery-Gallery {
	height: 96px;
	width: 96px;
    display: -ms-inline-flex;
    display: inline-flex;
    background-size: cover;
}

.ImageGallery-Gallery >div {
    display: block;
    border-radius: 5px;
	background-color: rgba(255, 255, 255, .75);
    align-self: flex-start;
    margin: 5px;
    margin-top: 10px;
    text-align: center;
    padding: 5px;
    width: 86px;
    overflow: hidden;
}
	.ImageGallery-Gallery span {
	    font-weight: bold;
	    font-size: 10px;
	    text-overflow: ellipsis;
	}

.ImageGallery-Browse-Crumb a, .ImageGallery-Upload-Crumb a {
	color: lightblue;
	float: right;
	font-size: 14px;
	font-weight: bold;
	margin: 5px;
	text-decoration: none;
}

.ImageGallery-Browse-Crumb span, .ImageGallery-Upload-Crumb span {
	float: right;
	font-size: 14px;
	font-weight: bold;
	margin: 5px;
}

.ImageGallery-Browse-Crumb a:hover, .ImageGallery-Upload-Crumb a:hover {
	color: blue;
	text-decoration: none;
}

.ImageGallery-Browse-Crumb a.selected, .ImageGallery-Upload-Crumb a.selected {
	color: black;
	text-decoration: none;
}

.ImageGallery-BrowseHeader, .ImageGallery-UploadHeader {
	display: -ms-flexbox;
    display: flex;
	height: 40px;
}

.ImageGallery-Browse-Crumb, .ImageGallery-Upload-Crumb {
	display: inline-block;
	margin: 5px;
}

.ImageGallery-BrowseItems, .ImageGallery-UploadItems {
	height: calc(100% - 40px);
	overflow: hidden;
}

.ImageGallery-Content {
	height: calc(100% - 40px);
}

.Browse-Content, .Upload-Content {
	height: 100%;
}

.ImageGallery-BrowseItems-Header, .ImageGallery-UploadItems-Header {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-bottom: 1px solid #e3e3e3;
	box-sizing: border-box;
	height: 30px;
	padding-left: 10px;
	padding-top: 10px;
}

	.ImageGallery-BrowseItems-Header span, .ImageGallery-UploadItems-Header span {
		font-size: 16px;
		font-weight: bold;
	}

.ImageGallery-BrowseItems-Galleries, .ImageGallery-UploadItems-Galleries {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 128px;
	overflow-x: scroll;
	overflow-y: hidden;
	padding-bottom: 7px;
	padding-top: 7px;
}

.ImageGallery-BrowseItems-Images, .ImageGallery-UploadItems-Images {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 10px;
	padding-top: 10px;
}

.ImageGallery-BrowseItems-Container,.ImageGallery-UploadItems-Container {
    height: calc(100% - 128px - 90px);
    display: flex
}

.ImageGallery-BrowseItems-Tags, .ImageGallery-UploadItems-Details {
    width: 200px;
}

.ImageGallery-GalleryPager {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -ms-flexbox;
    display: flex;
	height: 30px;
	overflow: hidden;
}

	.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Controls {
		width: auto;
	}

		.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Controls > a {
			-moz-box-sizing: border-box;
			-ms-border-radius: 10px;
			-webkit-box-sizing: border-box;
			background-color: lightblue;
			border-radius: 10px;
			box-sizing: border-box;
			color: black;
			font-weight: bolder;
			line-height: 30px;
			padding-bottom: 5px;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 5px;
			margin: 2px;
		}

			.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Controls > a:hover {
				background-color: blue;
				color: white;
				text-decoration: none;
			}

			.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Controls > a.selected {
				background-color: black;
				color: white;
				cursor: default;
				text-decoration: none;
			}

			.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Controls > a.disabled {
				background-color: #e3e3e3;
				color: white;
				cursor: default;
				text-decoration: none;
			}

	.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-SizeSelector {
		-ms-flex: 1;
        flex: 1;
		text-align: center;
	}

		.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-SizeSelector > select {
			width: 125px;
		}

		.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-SizeSelector > span {
			margin-left: 5px;
		}

	.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Legend {
		width: auto;
	}

		.ImageGallery-GalleryPager > .ImageGallery-GalleryPager-Legend > span {
			line-height: 30px;
			margin-left: 2px;
			margin-right: 2px;
			width: auto;
		}

.ImageGallery-Item-SelectedIcon {
	bottom: 2px;
	height: 16px;
	position: absolute;
	right: 2px;
	width: 16px;
}

.ImageGallery-Item-ExistsIcon {
	bottom: 2px;
	height: 16px;
	position: absolute;
	right: 2px;
	width: 16px;
}

.ImageGalleryButton {
	position: absolute;
	top: 0;
	right: 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	height: 16px;
	line-height: 16px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	text-decoration: none;
	background: #9dc8e2;
	color: #fff;
	display: block;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
}

	.ImageGalleryButton:hover {
		background: rgb(33, 132, 190);
		color: rgb(255, 255, 255);
		text-decoration: none;
	}

	.ImageGalleryButton.disabled {
		background: rgb(238, 238, 238);
		color: rgb(170, 170, 170);
		cursor: default;
	}

.ImagesContainer {
	height: 160px;
	overflow-y: hidden;
	overflow-x: scroll;
	border: 1px solid #e3e3e3;
	border-radius: 5px;
}

	.ImagesContainer > .ImagesInnerContainer {
		width: 0;
	}

		.ImagesContainer > .ImagesInnerContainer > .CompareImageItem {
			height: 128px;
			width: 128px;
			border: 3px solid #e3e3e3;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			border-radius: 5px;
			margin: 5px;
			display: inline-block;
		}

			.ImagesContainer > .ImagesInnerContainer > .CompareImageItem > .CompareImageBottomHover {
				display: table-cell;
				height: 128px;
				width: 128px;
				vertical-align: middle;
				position: inherit;
				bottom: inherit;
			}

			.ImagesContainer > .ImagesInnerContainer > .CompareImageItem > .CompareImageTopHover {
				display: table-cell;
				height: 128px;
				width: 128px;
				vertical-align: middle;
				position: inherit;
				bottom: inherit;
			}

				.ImagesContainer > .ImagesInnerContainer > .CompareImageItem > .CompareImageTopHover.TopBottom {
					display: block;
					height: auto;
					position: absolute;
					bottom: 50%;
					vertical-align: inherit;
				}

			.ImagesContainer > .ImagesInnerContainer > .CompareImageItem > .CompareImageBottomHover.TopBottom {
				display: block;
				height: auto;
				width: 128px;
				position: absolute;
				top: 50%;
			}

                .ImagesContainer > .ImagesInnerContainer > .CompareImageItem .CompareImageHoverButton {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px;
        text-decoration: none;
        width: 100px;
        background: #9dc8e2;
        color: #fff;
        display: block;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
    }

    .ImagesContainer > .ImagesInnerContainer > .CompareImageItem .CompareImageHoverButton:hover {
        background: rgb(33, 132, 190);
        color: rgb(255, 255, 255);
    }

    .ImagesContainer > .ImagesInnerContainer > .CompareImageItem .CompareImageHoverButton.disabled {
        background: rgb(238, 238, 238);
        color: rgb(170, 170, 170);
        cursor: default;
    }
        .ImagesContainer > .ImagesInnerContainer > .CompareImageItem .CompareImageHoverButton.Reorder {
            width: 15px;
            margin-left: 6px;
            display: inline-block;
        }

                .ImageGallery-BrowseItems-Tags {
                    overflow: hidden;
                }

                .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer {
                    border-width: 1px;
                    border-style: solid;
                    border-color: gray;
                    border-radius: 2px;
                }

                .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-Tag-Header {
                    background-color: lightgray;
                    border-width: 1px;
                    border-style: solid;
                    border-color: gray;
                    border-radius: 2px;
                    padding: 5px;
                }

                .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-Tag-Header > span {
                    font-size: 14px;
                    font-weight: bold;
                }

                .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagSelected-Container,
                .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagAvailable-Container,
                .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags> .ImageGallery-UploadItems-Details-SelectedTags,
                  .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags>.ImageGallery-UploadItems-Details-AvailableTags {
                     overflow-x: hidden;
                     overflow-y: auto;
                }

                .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagSelected-Container > div,
                 .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagAvailable-Container > div,
                .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags> .ImageGallery-UploadItems-Details-SelectedTags > div,
                .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags> .ImageGallery-UploadItems-Details-AvailableTags > div{
                    padding: 5px;
                    background-color: blue;
                    border-radius: 5px;
                    color: white;
                    display: -ms-flexbox;
                    display: flex;
                    margin: 5px;
                    cursor: pointer;
                }

            .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagSelected-Container > div:hover,
                .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags> .ImageGallery-UploadItems-Details-SelectedTags > div:hover
             {
                background-color: lightblue;
                     color: black;
            }

                 .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagAvailable-Container > div,
                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags> .ImageGallery-UploadItems-Details-AvailableTags > div{
                     background-color: lightblue;
                     color: black;
                }
                 .ImageGallery-BrowseItems-Tags > .ImageGallery-TagContainer > .ImageGallery-TagAvailable-Container > div:hover,
                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags> .ImageGallery-UploadItems-Details-AvailableTags > div:hover{
                     background-color: blue;
                    color: white;
                }

                 .ImageGallery-UploadItems-Details {
                     padding: 10px;
                     border-left: 1px solid #e3e3e3;
                 }
                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-IsStock {
                     display: -ms-flexbox;
                     display: flex;
                     align-items: flex-start;
                 }

                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-IsStock > input[type="checkbox"] {
                     margin-right: 5px;
                 }
                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-IsStock > label {
                 }
                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags {
                 }

                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags>.ImageGallery-UploadItems-Details-Filter {
                     display: -ms-flexbox;
                     display: flex;
                     align-items: center;
                 }

                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags>.ImageGallery-UploadItems-Details-Filter > input[type="text"] {
                     margin: 0;
                     margin-right: 5px;
                 }

                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags>.ImageGallery-UploadItems-Details-Filter > a {
                     -ms-border-radius: 5px;
	                    background-color: lightblue;
	                    border-radius: 5px;
	                    color: white;
	                    font-size: 16px;
	                    font-weight: bold;
	                    padding-bottom: 5px;
	                    padding-left: 10px;
	                    padding-right: 10px;
	                    padding-top: 5px;
	                    text-decoration: none;
                 }

                 .ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags>.ImageGallery-UploadItems-Details-Filter > a:hover {
		background-color: blue;
		text-decoration: none;
	}

	.ImageGallery-UploadItems-Details > .ImageGallery-UploadItems-Details-Tags>.ImageGallery-UploadItems-Details-Filter > a.disabled {
		background-color: #e3e3e3;
		color: white;
		cursor: default;
		text-decoration: none;
	}