.zenFragmentGallery * {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
  -webkit-user-drag: none;
}

/* sapUiCrslItm */
/* ---------------------------------- */

.zenFragmentGallery .sapUiCrslItmSelected {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	border: solid 1px #007cc0 !important;
}

.zenFragmentGallery .sapUiCrslItm {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	border: solid 1px #cccccc !important;
	cursor: pointer;
	background-color: #ffffff;	/* Since svg images are transparent, hardcode background color to white */
}

.zenFragmentGallery .sapUiCrslItm.selectedItem  {
	border: solid 2px #A3A3A3 !important;
}

.zenFragmentGallery .sapUiCrslItm:not(.selectedItem):hover {
	border: solid 1px #A3A3A3 !important;
}

@font-face {
	font-family: 'SAP-icons';
	src: url('fonts/SAP-icons.ttf'),
     url('fonts/SAP-icons.eot'); /* IE9+ */
	font-weight: normal;
	font-style: normal;
}

/* Margins for breaks between items */
/* ---------------------------------- */

.zenFragmentGallery-Horizontal .sapUiCrslItm {
	margin-right: 10px !important;
}

.zenFragmentGallery-Horizontal .sapUiCrslItm:first-of-type {
	margin-left: 10px !important;
}

.zenFragmentGallery-Horizontal .sapUiCrslItm:last-of-type {
	margin-right: 0px !important;
}

.zenFragmentGallery-Vertical .sapUiCrslItm {
	margin-bottom: 10px !important;
}

.zenFragmentGallery-Vertical .sapUiCrslItm:first-of-type {
	margin-top: 10px !important;
}

.zenFragmentGallery-Vertical .sapUiCrslItm:last-of-type {
	margin-bottom: 0px !important;
}

/*
/* image spacing */
.zenFragmentGallery .zenFragmentGallery-Image .sapUiLayoutAbsPos {
	top: 10% !important;
	left: 10% !important;
}

/* Horizontal orientation (text, image, imagetext) */
/* ---------------------------------- */

.zenFragmentGallery-Horizontal .zenFragmentGallery-Image .sapUiImg.zenFragmentGallery-Image-thumb {
	position: absolute;
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.8 !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

.zenFragmentGallery-Horizontal .zenFragmentGallery-Image .sapUiLayoutAbsPos {
	width: 100%;
	height: 100%;
}

.zenFragmentGallery .zenFragmentGallery-Txt .sapUiLayoutAbsPos {	
	height: 100% !important;
}

.zenFragmentGallery .zenFragmentGallery-Txt span.sapUiTv {	
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

.zenFragmentGallery-ImgTxt .sapUiLayoutAbsPos:last-of-type .sapUiLayoutAbs{
	position: relative;
}

.zenFragmentGallery-ImgTxt .sapUiLayoutAbsPos:last-of-type .sapUiLayoutAbs .sapUiLayoutAbsPos {	
	position: absolute;	
    height: 100%;    
}

.zenFragmentGallery-ImgTxt .sapUiLayoutAbsPos:last-of-type .sapUiLayoutAbs .sapUiLayoutAbsPos span {
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

.zenFragmentGallery-ImgTxt .sapUiLayoutAbsPos:first-of-type .sapUiLayoutAbs .sapUiLayoutAbsPos {
	top: 25% !important;
}

.zenFragmentGallery-ImgTxt .sapUiImg {	
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.8 !important;
}

.sapUiCrslHorizontal .sapUiCrslItm {
	padding: 0px !important;
}

/* Vertical orientation (text, image, imagetext) */
/* ---------------------------------- */

.zenFragmentGallery-Vertical .zenFragmentGallery-Image .sapUiImg.zenFragmentGallery-Image-thumb {	
	position: absolute;
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.8 !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
}

.zenFragmentGallery-Vertical .zenFragmentGallery-Image .sapUiLayoutAbsPos {
	width: 100%;
	height: 100%;
}

.sapUiCrslVertical .sapUiCrslItm {
	padding: 0px !important;
}

/* Previous and next buttons */
/* ---------------------------------- */

.zenFragmentGallery .sapUiCrslPrevBtn, .zenFragmentGallery .sapUiCrslNextBtn {
	font-family: 'SAP-icons';
	font-style: normal;
	speak: none;
	font-size: 0;
	text-align: center !important;
	vertical-align: middle !important;
	color: #666666 !important;
	background-color: #f7f7f7 !important;
	opacity: 0.6 !important;	
	
	-webkit-box-shadow: inset 0px 0px 0px 1px #bfbfbf !important;
	-moz-box-shadow: inset 0px 0px 0px 1px #bfbfbf !important;
	box-shadow: inset 0px 0px 0px 1px #bfbfbf !important;
    
	/*
	border: solid 1px #bfbfbf !important;
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	*/
}

.zenFragmentGallery .sapUiCrslPrevBtn:hover, .zenFragmentGallery .sapUiCrslNextBtn:hover {
	background-color: #f7f7f7 !important;
	opacity: 1.0 !important;
}

.zenFragmentGallery .sapUiCrslPrevBtn:active, .zenFragmentGallery .sapUiCrslNextBtn:active {
	color: #ffffff !important;
	background-color: #007cc0 !important;
	opacity: 1.0 !important;
}

/* Previous and next buttons - Horizontal */
/* ---------------------------------- */

.zenFragmentGallery-Horizontal .sapUiCrslNextBtn{
	background-image: none !important;
}

.zenFragmentGallery-Horizontal .sapUiCrslPrevBtn{
	background-image: none !important;
}

.zenFragmentGallery-Horizontal .sapUiCrslPrevBtn:after {
	content: "\e067" !important;
	font-size: 16px;
}

.zenFragmentGallery-Horizontal .sapUiCrslNextBtn:after {
	content: "\e066" !important;
	font-size: 16px; 
}

/* Previous and next buttons - Vertical */
/* ---------------------------------- */

.zenFragmentGallery-Vertical .sapUiCrslNextBtn{
	background-image: none !important;
}

.zenFragmentGallery-Vertical .sapUiCrslPrevBtn{
	background-image: none !important;
}

.zenFragmentGallery-Vertical .sapUiCrslNextBtn {
	line-height: 16px !important;
}

.zenFragmentGallery-Vertical .sapUiCrslPrevBtn:after {
	content: "\e1e1" !important;
	font-size: 16px;
}

.zenFragmentGallery-Vertical .sapUiCrslNextBtn:after {
	content: "\e1e2" !important;
	font-size: 16px;
}
