.CustomItemLayout {
	position: relative;
	padding: 3px;
	min-width: 200px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.CustomItemLayoutInner {
	position: relative;
    border: 1px solid #21A7CF;
	padding: 5px;
}

.sapUiUx3DSSVItem:hover {
	background-color: #ABC9EE !important;
}

.CustomItemLayoutTitle {
	font-size: 13px;
	/*font-weight: bold;*/
	position: relative;
	color: #00679e;
	text-decoration: None;
}

.CustomItemLayoutTitle span:hover {
	text-decoration: underline;
    cursor: pointer;
}

.CustomItemLayoutCntnt {
	position: relative;
	display: inline-block;
}

.sapUiUx3DSSVFloating > .sapUiUx3DSSVItem > .CustomItemLayout {
	width: 200px;
}

/*Small*/

.CustomItemLayout.CustomItemLayoutSmall .CustomItemLayoutTitle {
	padding-bottom: 1.5rem;
	margin-bottom: 3px;
	border-bottom: 1px solid #21A7CF;
}

.CustomItemLayout.CustomItemLayoutSmall .CustomItemLayoutTitle > div {
	position: absolute;
	left: 40px;
	top: 8px;
}

html[dir="rtl"] .CustomItemLayout.CustomItemLayoutSmall .CustomItemLayoutTitle > div {
	right: 40px;
	left: auto;
}

.CustomItemLayout.CustomItemLayoutSmall .CustomItemLayoutTitle > img {
	width: 31px;
}

.CustomItemLayout.CustomItemLayoutSmall .CustomItemLayoutCntnt {
	width: 100%;
}

/*Large*/

.CustomItemLayout.CustomItemLayoutLarge > .CustomItemLayoutInner {
	height: 102px;
}

.CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutCntnt {
	position: absolute;
	left: 270px;
	right: 3px;
	top: 0;
}

html[dir="rtl"] .CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutCntnt {
	right: 270px;
	left: 3px;
}

.CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutTitle {
	width: 270px;
	margin-top: 4px;
}

.CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutTitle > img {
	width: 50px;
}
/*
	@ASVRAMIREZ
	Antes, en lugar de 'span' iva 'a'. Esto es: Se cambio el elemento sap.ui.commons.Link
	por sap.ui.commons.TextView.
	Esto fue para ajustar el texto: nombre de producto.
*/
.CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutTitle span {
	color: #00679e;
	font-size: 14px;
	text-decoration: none;
	width: 205px;
	word-wrap: break-word; /*Ajustar texto dentro del elemento div*/
}

.CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutTitle span:hover {
	text-decoration: underline;
    cursor: pointer;
}

.CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutTitle > div {
	position: absolute;
	left: 60px;
	top: 18px;
}

html[dir="rtl"] .CustomItemLayout.CustomItemLayoutLarge .CustomItemLayoutTitle > div {
	right: 60px;
	left: auto;
}