li.rpm2 { margin: -.3em 0em 0em 0em; text-align:left; font-size: 18px; vertical-align:middle;}
ul.rpm2 { list-style: none; padding-top: 12px; vertical-align: middle; }
ul { list-style:disc; }
li.rpm { margin: 0em 0em .7em 2em; text-align: justify;}
i.rpm { color: green; padding-left: 2em; text-align: justify; }
.tr-rpm:nth-child(even) { background-color: rgb(26, 95, 180); color: white; }
.span-rpm { line-height: 5em; margin: 0.2em 0; }
.tr-avisopriv:nth-child(even) { background-color:black; }
.card-rpm {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-deck-rpm .card-rpm {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
}
.card-body-rpm .card-rpm {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 1px;
	padding: 0.0rem
}
.sidebar-app-agente {
	position: fixed;
	height: 100%;
	width: 2.4rem;
	top: 2.2rem;
	left: 0;
	z-index: 1;
	background-color: #e6f2ff;
	overflow-x: hidden;
	transition: 0.4s;
	padding: 0.0rem 0;
	padding-top: 3rem;
	box-sizing: border-box;
	color: white;
	border: 10px;
	border-color: #0066ff;
	border-right-color: #0066ff;
}
.sidebar-app-agente ul, .sidebar-app-agente li {
	margin-left: 0.0rem;
	margin-top: 0.5rem;
	padding-left: 1px;
	padding-right: 1px;
	list-style: none inside;
	align-items: center;
	display: block;
	min-width: 190px;
	max-width: 250px;
}
.sidebar-app-agente a { display: block; font-size: 100%; color: white; text-decoration: none; }
.sidebar-app-agente a:hover { color: white; background-color: #666; text-decoration: none; }

#contenido { transition: margin-left 0.4s; padding-top: 20px; }

.rpm-bar {
	color: #f0f;
	height: 2.2rem;
	width: 100%;
	padding: 0px;
	text-align: left;
	border-color: #337ab7;
	border-bottom-color: #337ab7;
	border-spacing: 0px;
	margin-left: 0px;
	padding-left: 0px;
}

.status-conexion {
	font-weight: bold;
	color: white;
	width: 100%;
	text-align: center;
}

.rpm-button {
	border: none;
	display: inline-block;
	padding: 0px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	background-color: inherit;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	background: #337ab7;
	color: #fff;
}
.rpm-button:hover {
	color: yellow;
	text-decoration: underline;
}
.rpm-color-letra-docu {color: #007bff;} 
.rpm-color-fondo-block { background-color: #ffffff !important; }
.rpm-color-fondo { background-color: rgb(26, 95, 180) !important; }
.rpm-color-letra { color: rgb(26, 95, 180) !important; }
.rpm-color-letra2 { color: #ffeecc !important; }
.rpm-color-letra3 { color: #FFFFFF !important; }
.rpm-color-letra_bold { font-weight:bold; color: rgb(26, 95, 180) !important; }
.rpm-color-fondo-gral { background-color: rgb(26, 95, 180) !important; color: white !important; }
.rpm-color-linea-gral { border-color: rgb(26, 95, 180); color: white; }
.rpm-color-text-gral { color: rgb(26, 95, 180) !important; }

.rpm-btn {
	display: inline-block;
	font-weight: 400;
	color: white;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: rgb(26, 95, 180);
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out,border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	opacity: .9;
}.rpm-btn:hover {
	opacity: 1;
	color: white;
	text-decoration: none;
}

/* Para el icono del textsms */
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
		format('woff2');
}
/*https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2*/
/* Para el icono del textsms */
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
}

.menuDropdown {
	padding: 5px;
	color: #666 !important;
	font-size: 12px;
	background: transparent;
	-webkit-appearance: none;
	background-color: rgb(26, 95, 180) !important;
}

.menuDropdown:a {
	background-color: #FFF;
	color: black;
}

.dropdown-item:hover {
	background-color: #666 !important;
	color: white !important;
}

.rpm-bar-block .rpm-dropdown-hover, .rpm-bar-block .rpm-dropdown-click {
	width: 100%
}

.rpm-bar-block .rpm-dropdown-hover .rpm-dropdown-content, .rpm-bar-block .rpm-dropdown-click .rpm-dropdown-content
	{
	min-width: 100%
}

.rpm-bar-block .rpm-dropdown-hover .rpm-button, .rpm-bar-block .rpm-dropdown-click .rpm-button
	{
	width: 100%;
	text-align: left;
	padding: 8px 16px
}

.main {
	background-color: white;
	margin-left: 0rem;
	margin-top: 0rem;
	padding-left: 0rem;
	font-size: 100%;
	text-align: center;
	vertical-align: middle;
	align-content: center;
	align-items: center;
	align-self: center;
}

/* Las siguientes clases son para el chat */
.chat-titulo {
	font-size: medium;
	height: 50px;
	text-align: center;
	line-height: 50px;	
	border-radius: 5px;
}
.MessageList {
	overflow-y: scroll;
	width: 100%;
	height: 420px;
}
.avatar {
	height: 20px;	
}
.bot {
	background-color: rgb(26, 95, 180);
	color: white;
	display: flex;	
	border-radius: 10px;
	padding: 15px 5px 15px 5px;
	border: none;
	width: 85%;	
	float: right;	
}
.user {
	display: flex;
	background-color: #a4d1e7;
	color: black;
	display: flex;
	border-radius: 10px;
	padding: 15px 5px 15px 5px;
	border: none;
	width: 85%;	
}
.response {
	display: flex;	
	margin: 3%;
}
.open-button {
	background-color: rgb(26, 95, 180);
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.9;
	position: fixed;
	bottom: 33px;
	right: 28px;
	width: 70px;
	border-radius: 25px;
}
.chat-popup {
	display: none;
	position: fixed;
	bottom: 0;
	right: 15px;
	border: 3px solid #f1f1f1;
	z-index: 9;	
	border-radius: 15px;
}
.form-container {
	max-width: 400px;
	padding: 10px;
	background-color: white;
}
.form-container textarea {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
	resize: none;
	min-height: 40px;
}
.form-container textarea:focus { background-color: #ddd; outline: none; }
.form-container .btn {
	background-color: #04AA6D;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom: 10px;
	opacity: 0.8;
	border-radius: 10px;
}
.form-container .cancel { background-color: #AA0000; }
.form-container .btn:hover, .open-button:hover { opacity: 1; }
/* Aqui terminan las clases son para el chat */

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
	display: block
}

summary {
	display: list-item
}

audio, canvas, progress, video {
	display: inline-block
}

progress {
	vertical-align: baseline
}

audio:not([controls]) { display: none; height: 0 }
[hidden], template { display: none }

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b, strong { font-weight: bolder }
dfn { font-style: italic }
mark { background: #ff0; color: #000 }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: -0.25em }
sup { top: -0.5em }
figure { margin: 1em 40px }
img { border-style: none }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em }
button, input, select, textarea, optgroup { font: inherit; margin: 0 }
optgroup { font-weight: bold }
button, input { overflow: visible }
button, select { text-transform: none }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button }
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0 }
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em }
legend { color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal }

textarea { overflow: auto }

body {
	font-family: "Segoe UI", sans-serif;
	font-size: 100%;
	color: blue;
	background-color: #ffffff !important;
	font-family: Verdana, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	overflow: scroll;	
}

html {
	font-size: 100%;
	width: 100%;
	box-sizing: border-box;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: Verdana, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	/*overflow-x: hidden*/
}

/* Esto toma box-sizing: border-box; de html (linea arriba) para que el padding y el border formen parte del width */ 
*, *:before, *:after { box-sizing: inherit; }

h1 { font-size: 36px }
h2 { font-size: 30px }
h3 { font-size: 24px }
h4 { font-size: 20px }
h5 { font-size: 18px }
h6 { font-size: 16px }
h1, h2, h3, h4, h5, h6 { font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; margin: 10px 0; text-align: justify; }

hr {
	border: 0;
	border-top: 1px solid #eee;
	margin: 20px 0;
	box-sizing: content-box;
	height: 0;
	overflow: visible;	
}

/* Tooltip*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* Acaba Tooltip*/

.text-align-center { text-align: center; } .text-align-left { text-align: left; }
.len30 { width: 30px; } .len50 { width: 50px; }
.len100 { width: 100px; } .len150 { width: 150px; }
.len200 { width: 200px; } .len250 { width: 250px; }
.len270 { width: 270px; } .len300 { width: 300px; }
.len350 { width: 350px; } .len400 { width: 400px; }
.len450 { width: 450px; } .len500 { width: 500px; }
.textizq { text-align: left; } .textder { text-align: right; } .textcen { text-align: center; }
.textjus { text-align: justify; } .textinh { text-align: inherit; } 

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: rgb(26, 95, 180);
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover{opacity: 1;}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #fce94f;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #fcaf3e;
  cursor: pointer;
}

.rpm-caja { border-radius: 25px; border: 2px solid rgb(26, 95, 180); padding-top: 15px; padding-left: 30px; padding-right: 30px; }
.rpm-caja-blanca { border-radius: 25px; border: 2px solid #ffffff; padding-top: 15px; padding-left: 30px; padding-right: 30px; }

.wrap { word-wrap: break-word; display: inline-block; }

.wa {
	background-color: rgb(26, 95, 180);
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.9;
	position: fixed;
	bottom: 100px;
	right: 28px;
	width: 70px;
	border-radius: 25px;
}

.derecha {
	float: right !important;	
}
.izquierda {
	float: left !important;	
}

.destacado {
  background-color: #FFC000; /* Color de fondo amarillo */
  color: #FFFFFF; /* Color de texto negro */
  font-size: 13px; /* Tamaño de fuente más grande */
  font-weight: bold; /* Texto en negrita */
  padding: 5px 5px; /* Añadir relleno alrededor del texto */
}