/*________GoogleFonts__lo primero_____*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');


/*_____________WEBSITE__________*/

body {
  color: #303030;
  background: #000;
  background-image: url(../images/fondo-pattern.jpg);
}


a{text-decoration: none; color: #303030; outline:none;}
a:hover, a:focus {text-decoration: none; color: #303030; outline:none;}/*cambia color*/
footer, header, article, section, div, h1, h2, h3, h4, h5, p, form, input, textarea, img, span, td{margin:0; padding:0; background:transparent}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; background:transparent;outline:none;padding-inline-start: 0px; padding-inline-end: 0px; margin-block-start: 0px; margin-block-end: 0px; margin:0;}
id, class, div, section {outline:none;}
h1,h2,h3,h4,h5,h6{font:inherit}
img{border:none;}
svg{overflow:hidden; vertical-align:middle}
svg {height: 100%; max-width: 100%;}
video {width:100%; height:auto; border:0;}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; /*scroll mov suave*/}
sup, sub{font-size: 0.75em;}
b,strong{font-weight:bold}
label {margin-bottom: .25rem !important; display: inline-block;}

ul {display: block; list-style-type: square; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 20px;}
ol {display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 20px;}

ul.sin-estilo, ol.sin-estilo {padding-inline-start: 0px; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px;}

acronym, abbr {text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none;}

/*________Scrolltop_______*/

.scrolltop{position:fixed; color:#c50000; bottom:20px; right:20px; display:none; background:#ec0c4e; z-index:100; padding:6px 15px 8px 13px;font-size:0.6875em;}
a.scrolltop, a:hover .scrolltop , a:focus .scrolltop {color:white;}


/*_________________selecciones___________________*/

/* webkit, opera, IE9 */
::selection { background:#ec0c4e;  color:#ffffff; text-shadow: none;}
/* mozilla firefox */
::-moz-selection { background:#ec0c4e; color:#ffffff; text-shadow: none}

/*________FLEX_______*/

.centradovertical{height:100%; display:flex; align-items: center; justify-content: center;}
.centradovertical.columna{flex-direction: column; align-items: start;}
.centradovertical.fila{flex-direction: row;}
.d-flex {display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important;}
.push {margin-left: auto; display: inline-flex;}
.center-flex{align-items: center !important; }/*centrado vertical*/

.flex-wrap {-ms-flex-wrap:wrap!important; flex-wrap:wrap!important}/*los contenidos los pone en bloque uno debajo de otro*/
.flex-fill { -ms-flex:1 1 auto!important; flex:1 1 auto!important}
.flex-row{-ms-flex-direction:row!important; flex-direction:row!important}
.flex-column{-ms-flex-direction:column!important; flex-direction:column!important}
.flex-row-reverse{-ms-flex-direction:row-reverse!important; flex-direction:row-reverse!important}
.flex-column-reverse{-ms-flex-direction:column-reverse!important; flex-direction:column-reverse!important}

.flex-grow-1 {flex-grow: 1!important;}

.d-inline-flex{display:-webkit-inline-box!important; display:-ms-inline-flexbox!important; display:inline-flex!important}

.flex-start-end {display: flex; justify-content: space-between;}/* distribuir items uniformemente. El primer item al inicio, el último al final */

.flex-izq{flex: 1; display: flex; justify-content: flex-start; align-items: center;}
.flex-izq img{align-items: center;}
.flex-center{flex: 1; display: flex; justify-content: center; align-items: center;}
.flex-der{flex: 1; display: flex; justify-content: flex-end; align-items: center;}

.align-self-auto{align-self: auto!important;}
.align-self-start{align-self: flex-start!important;}
.align-self-end{align-self: flex-end!important;}
.align-self-center{align-self: center!important;}
.align-self-baseline{align-self: baseline!important;}
.align-self-strech{align-self: stretch!important;}

.inline-icon{display: flex; align-items: center;}
.inline-icon i, .inline-icon img{padding:0rem 0.10rem;}

.align-start{-ms-flex-line-pack:start!important; align-content:flex-start!important}
.align-end{-ms-flex-line-pack:end!important; align-content:flex-end!important}
.align-center{-ms-flex-line-pack:center!important; align-content:center!important}
.align-between{-ms-flex-line-pack:justify!important; align-content:space-between!important}
.align-around{-ms-flex-line-pack:distribute!important; align-content:space-around!important}
.align-stretch{-ms-flex-line-pack:stretch!important; align-content:stretch!important}

.align-items-start {align-items: flex-start!important;}
.align-items-center {align-items: center!important;}
.align-items-end {align-items: flex-end!important;}
.align-items-stretch {align-items: stretch!important;}

.justify-start{-ms-flex-pack:start!important; justify-content:flex-start!important}
.justify-end{-ms-flex-pack:end!important; justify-content:flex-end!important}
.justify-center{-ms-flex-pack:center!important; justify-content:center!important}
.justify-between{-ms-flex-pack:justify!important; justify-content:space-between!important}
.justify-around{-ms-flex-pack:distribute!important; justify-content:space-around!important}
.justify-stretch{-ms-flex-pack:justify !important; justify-content:stretch!important}


/*__________CUSTOM_____________*/

.bold{font-weight:bold;}
.semibold{font-weight:500;}

.chat-scrollbar::-webkit-scrollbar {width:7px; height:10px;}
.chat-scrollbar::-webkit-scrollbar-track {background: transparent; border-radius:0px; margin-top:1px; margin-bottom:1px;}
.chat-scrollbar::-webkit-scrollbar-thumb {background-color:#323232; border-radius:0px;}
.chat-scrollbar::-webkit-scrollbar-thumb:hover {background-color:#323232}
.chat-scrollbar * {scrollbar-width: thin; scrollbar-color: #323232 transparent;}/*firefox*/

.mr{margin-right:0.5rem!important}
.ml{margin-left:0.5rem!important}
.mt{margin-top:1.2rem!important}
.mb{margin-bottom:1.2rem!important}
.mtb{margin:0.5rem 0px !important;}

/*colores*/
.colordest{color:#ec0c4e}
.gris{color:#666666;}
.gris-oscuro{color:#303030;}
.verde{color:#60B760;}
.blanco{color:#ffffff;}
.rosa{color:#ff77ac;}
.rosa-claro{color:#ffa1c1}
.rojo{color:#ec0c4e;}

/*textos*/
.titpromo{font-family: 'Poppins', sans-serif; font-size:1.375em; color:#303030; font-weight:500; margin-bottom:10px}
.titpromo.blanco{color:white;}

.txtcondiciones, .txtcondiciones a, .txtcondiciones a:hover, .txtcondiciones a:focus{color:white;}

/*botones*/
.btn-colordest a{background:#ec0f4e; color:#fff; border-color:#ec0f4e;}
.btn-colordest a:hover, .btn-colordest a:focus{background:#ec0f4e; color:#fff; border-color:#ec0f4e;}

/*contenido centrado*/
.contenedor-100x100{position:relative; width:100vw;height:100vh;}
.contenido-centrado{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/*contenido centrado flex*/
.contenido-centrado-flex{min-height:100vh; display:flex; align-items: center; justify-content: center;}

/*caja-chat*/
.contenedor-chat{background:#000; padding:10px; color:#92959e; width:640px; margin-top: auto; margin-bottom: auto;}
.contenedor-carga{background:#fff; padding:40px 20px; color:#303030; width:640px; margin-top: auto; margin-bottom: auto;}
.contenedor-carga.transparente{background:rgba(0,0,0,0.6); color:white;}
.top-info{background:#3F9FD9; padding:15px; color:white;}
.puntito-verde{width:8px; height:8px; border:1px solid white; background:#4DD965; border-radius:16px; position:absolute; right:-5px; top:0px;}

.zona_chat_promo {display: flex; flex-wrap: wrap; box-sizing: border-box; position: relative; height:100% !important;}
.zona_chat_inner {width: 100%; display: flex; box-sizing: border-box; align-items: stretch; margin-right: 0px; padding-left: 0px; height:100% !important;}

.chat-interface {margin-right: 3px; position: relative; user-select: auto; box-sizing: border-box; flex-shrink: 0; height: auto; width: 60%;}
.chat-usuarios {flex: 1; position: relative; width: 40%; border-left:1px solid #717276;}

.chat_inner {height: 100%; display: flex; flex-direction: column;}
.chat_content {flex: 1; padding: 9px; background: transparent; overflow: hidden; /*min-height:300px;*/}
.chat_bottom {padding: 5px 5px 5px 9px; padding: 0px; position: relative;}
.zona_chat_texto {top: 0; flex: 1; left: 0; width: 100%; height: 100%; padding: 10px 11px 5px 9px; padding: 0px; padding-left: 10px; position: absolute; overflow-x: hidden; overflow-y: auto;}

x-user {padding: 10px 0px;}
x-user .nombre, x-user .texto{color:#92959e;}

.bottom-info{color:#303030;background:#ffff; padding:25px; margin-top:10px;}

.vchat { display: flex; align-items: flex-end; margin: -4px; }
.vchat > div {padding: 4px;}
.vchat_content{margin-right:15px;}
.vchat_bubble {display: flex; align-items: center; padding: .125rem 0;}

.vchat_msg {background-color: #fff; color:black; border-radius: 10px; padding: 10px 15px;}

.vchat.izquierda .vchat_bubble:first-child .vchat_msg { border-top-left-radius: 3px; }

.vchat.derecha { justify-content: flex-end; }
.vchat.derecha .vchat_msg { background-color: #ec0f4e; color:white; }
.vchat.derecha .vchat_bubble { flex-direction: row-reverse; }

.vchat.derecha .vchat_bubble:first-child .vchat_msg { border-top-right-radius: 3px; }

.hide-info{visibility:visible; display:inherit;}

.zona-encontrados{border:2px solid #E0E0E0; background:white; margin:10px auto; padding:10px; width:290px; text-align:left;}
.zona-encontrados.transparente{border:0px; background:transparent; margin:5px auto; padding:5px;}

/*nuevo*/
.card-promo {height: auto; margin:0 auto; max-width:640px; background:black; color:white; padding:10px;
  /* grid container settings */
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto;
}
/*nuevo*/

.match{position:absolute; bottom:-5px; left:0; background:#ec0c4e; color:white; font-size:0.75em; line-height:1; padding:2px 2px; text-align:center; border-radius:3px; width:100%;}


@media (max-width: 820px) {
	.card-promo {height: 100vh;}
	.contenido-centrado{position:inherit; margin:0 auto; top:auto; left:auto; transform:inherit;}
	.contenedor-chat{width:100vw; height:100vh}
	.contenedor-carga{width:95%; margin:0 auto;}
	.chat_content {min-height:200px;}
	
	.chat-interface {width: 80%;}
	.chat-usuarios {width: 20%;}
	x-user{padding:10px 0 50px 0px !important;}
	.hide-info{visibility:hidden !important; display:none !important;}
	/*.zona_chat_inner{height: calc(100vh - 100px);}*/
}

/*formularios*/
input, textarea { 
       -webkit-appearance: none; /* remove shadow in iOS*/
       -webkit-border-radius:0; /* remove border-radius in iOS*/
       border-radius: 0; 
}
.formulario:focus {border-color:none; outline: 0;}

.formchat{
	font: normal 1em Arial, Helvetica, sans-serif;
	color: #666;
	background:#fff;
	border: 1px solid #dddee4;
	padding:12px 12px;
	width:100%;
	margin-bottom:8px;
	
	display: inline-block;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	margin-bottom:20px;
}

.formchat::-moz-placeholder {color: #666; opacity: 1;}
.formchat:-ms-input-placeholder {color: #666;}
.formchat::-webkit-input-placeholder {color: #666;}

.formchat.btnizq{padding-left:60px;}
.formchat.btnder{padding-right:60px; padding-left:10px;}

.btnformchatizq{display:table-cell; position:absolute; top:1px; left:1px; z-index:2; background:none; height: 40px; width: 45px; font-size: 1.2857em; vertical-align:middle; border-radius:inherit; text-align:center;}
a .btnformchatizq{line-height:45px; color:#c8cfd4}
a:hover .btnformchatizq, a:focus .btnformchatizq{color:#3f9fd9;}

.btnformchatder{display:table-cell; position:absolute; top:1px; right:1px; z-index:2; background:#45c8c2; height: 96%; width: 45px; font-size: 1.2857em; border-left:0px solid rgba(0,0,0,0.20); vertical-align:middle; border-radius:inherit; text-align:center;}
a .btnformchatder{line-height:45px; color:#fff;}
a:hover .btnformchatder, a:focus .btnformchatder{color:#fff;}

.btnformchatder.adjuntar{right:46px; background:none; border:none;}

/*.form-alta input, .form-alta select, .form-alta textarea{
	border-left : none !important;
	border-right : none !important;
	border-top : none !important;
	background-color: transparent !important;
	-webkit-box-shadow: none;
          box-shadow: none;
}*/

.form-transparente{
	border-left : none !important;
	border-right : none !important;
	border-top : none !important;
	background-color: transparent !important;
	-webkit-box-shadow: none;
          box-shadow: none;
}

.formulario:focus {
	border-color:none !important; outline: 0 !important;
	-webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/*barra carga*/
.zona-carga{max-width:360px; height:16px; background:#fbcedc; border-radius:18px; margin:0 auto; position:relative;}
.barra-carga {top: 2px; left:20px; position: absolute; width: 61px; height: 12px; background: #EC0C4E; border-radius: 8px; -webkit-animation: linear infinite; -webkit-animation-name: run; -webkit-animation-duration: 2s;}

@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% { 
    left: calc(100% - 63px); 
   }
  100% {
    left: 0;     
  }
}

/*flexible añadido*/
.col01-xxs,.col10-xxs,.col11-xxs,.col12-xxs,.col02-xxs,.col03-xxs,.col04-xxs,.col05-xxs,.col06-xxs,.col07-xxs,.col08-xxs,.col09-xxs, .col5col-xxs {position:relative;min-height:1px;padding-right:15px;padding-left:15px}

@media (min-width:250px){
 
 .col01-xxs,.col10-xxs,.col11-xxs,.col12-xxs,.col02-xxs,.col03-xxs,.col04-xxs,.col05-xxs,.col06-xxs,.col07-xs,.col08-xs,.col09-xs{float:left;  z-index:1}
 .col12-xxs{width:100%}
 .col11-xxs{width:91.66666667%}
 .col10-xxs{width:83.33333333%}
 .col09-xxs{width:75%}
 .col08-xxs{width:66.66666667%}
 .col07-xxs{width:58.33333333%}
 .col06-xxs{width:50%}
 .col05-xxs{width:41.66666667%}
 .col04-xxs{width:33.33333333%}
 .col03-xxs{width:25%}
 .col02-xxs{width:16.66666667%}
 .col01-xxs{width:8.33333333%}
 
 /*empujar hacia la derecha*/
 .col12-xxs-pull{right:100%}
 .col11-xxs-pull{right:91.66666667%}
 .col10-xxs-pull{right:83.33333333%}
 .col09-xxs-pull{right:75%}
 .col08-xxs-pull{right:66.66666667%}
 .col07-xxs-pull{right:58.33333333%}
 .col06-xxs-pull{right:50%}
 .col05-xxs-pull{right:41.66666667%}
 .col04-xxs-pull{right:33.33333333%}
 .col03-xxs-pull{right:25%}
 .col02-xxs-pull{right:16.66666667%}
 .col01-xxs-pull{right:8.33333333%}
 .col00-xxs-pull{right:auto}
 
 /*tirar hacia la izquierda*/
 .col12-xxs-push{left:100%}
 .col11-xxs-push{left:91.66666667%}
 .col10-xxs-push{left:83.33333333%}
 .col09-xxs-push{left:75%}
 .col08-xxs-push{left:66.66666667%}
 .col07-xxs-push{left:58.33333333%}
 .col06-xxs-push{left:50%}
 .col05-xxs-push{left:41.66666667%}
 .col04-xxs-push{left:33.33333333%}
 .col03-xxs-push{left:25%}
 .col02-xxs-push{left:16.66666667%}
 .col01-xxs-push{left:8.33333333%}
 .col00-xxs-push{left:auto}
 
 /*desplazar cualquier columna hacia la derecha*/
 .col12-xxs-offset{margin-left:100%}
 .col11-xxs-offset{margin-left:91.66666667%}
 .col10-xxs-offset{margin-left:83.33333333%}
 .col09-xxs-offset{margin-left:75%}
 .col08-xxs-offset{margin-left:66.66666667%}
 .col07-xxs-offset{margin-left:58.33333333%}
 .col06-xxs-offset{margin-left:50%}
 .col05-xxs-offset{margin-left:41.66666667%}
 .col04-xxs-offset{margin-left:33.33333333%}
 .col03-xxs-offset{margin-left:25%}
 .col02-xxs-offset{margin-left:16.66666667%}
 .col01-xxs-offset{margin-left:8.33333333%}
 .col00-xxs-offset{margin-left:0}
 
 /*5columnas*/
 .col5col-xxs {width: 20%; float: left;}
 
}