﻿
.ms-rteStyle-Responsive {-ms-name: "Responsive"; max-width: 100%; height: auto; }

.ms-rteStyle-LPI {-ms-name: "Le podría interesar"; background-color:#efefef; padding:0.6em; display:inline-block; font-size:1.3em !important; }
	p.ms-rteStyle-LPI::before { content:"Le podría interesar: ";}
	
	.ms-rteStyle-LPI a, .ms-rteStyle-LPI a:link, .ms-rteStyle-LPI a:active {color: var(--bs-primary); text-decoration:underline;}
	.ms-rteStyle-LPI a:visited {color:var(--bs-gray-dark);}
	.ms-rteStyle-LPI a:hover {color: var(--bs-black) !important; text-decoration: none !important; background-color:transparent; }
	.ms-rteStyle-LPI:hover { background-color:var(--bs-yellow);}

.ms-rteStyle-tableResponsive { -ms-name: "Tabla Responsive"; width: 100%; border-collapse: collapse; }
	.ms-rteStyle-tableResponsive tr:nth-of-type(odd) {  }

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
	/* Force table to not be like tables anymore */
	.ms-rteStyle-tableResponsive, .ms-rteStyle-tableResponsive thead, .ms-rteStyle-tableResponsive tbody, .ms-rteStyle-tableResponsive th, .ms-rteStyle-tableResponsive td, .ms-rteStyle-tableResponsive tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.ms-rteStyle-tableResponsive thead tr { 
		position: absolute; top: -9999px; left: -9999px;
	}
	.ms-rteStyle-tableResponsive tr { border: 1px solid #ccc; }
	.ms-rteStyle-tableResponsive td { 
		/* Behave  like a "row" */
		border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;
	}
	.ms-rteStyle-tableResponsive td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;
	}
}
