@CHARSET "ISO-8859-1";

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

div.ckLopd {
	position:fixed;
	bottom:0px;
	left:0px;
	/* width:99%; */
	padding:0px;
	z-index:100;
	width:100%;	
	z-index:1000;	
	height: 185px;
	background-color: #fff;
	box-shadow: 0 0 9px #666;
	font-family: Raleway, sans-serif;
	line-height:20px;
}

div.ckLopd {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    bottom:-100px; 
  }

  to {
    bottom:0px;
  }
}

div.ckLopdBorde {
	width: 50%;
    padding: 15px;
    text-align: left;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);    
}
div.ckLopdTexto {
	text-align:left;
	font-size: 14px;
	color: #000000;
}

.ckLopdTitulo {
	font-size: 18px;
	font-weight:700;
	margin-bottom:5px;	
}

.ckLopdBoton {
	float: left;
    margin: 5px;
    border: 0;
    border-radius: 4px;
    padding: 4px 10px;
    background: yellowgreen;
    color: #fff;
}

.ckLopdBotonNegro {
	background:#000;
}


.ckLopdDivBoton {
	margin-top: 10px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

.ckLopdDivAceptar {
	float: right;
    /* width: 100%; */
    background: #f6f6f6;
    padding: 5px;
    margin-top: 5px;
    /* text-align: center; */
    /* position: relative; */
    clear: both;
    width: 120px;
    cursor:pointer;
}

.ckLopdDivAceptar label {
	margin-right:20px;
}


A.ckLink:link, A.ckLink:visited, A.ckLink:active {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ff0000;  
}
A.ckLink:hover {
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  color: #ff0000;  
}

#btnmasInfo {
	float: right;
    color: #333;
    width:100%;
    position:relative;
}

#btnmasInfo:hover, #btnmasInfo:hover::after {
	color:#999!important;
}

#btnmasInfo:after {
	position: absolute;
    content: "+";
    right: -2px;
    /* -webkit-transform: scaleX(0.5); */
    /* transform: scaleX(1); */
    font-size: 18px;
    font-family: arial;
    top: -2px;
    padding: 0px 5px 0px 5px;
    background: #d6d6d6;
    text-align: center;
    color: #fff;
    border-radius: 50%;
}


#masInfo {
	display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: max-content;
    font-size: 14px;
    /* overflow: auto; */
    padding: 25px;
    background-color: rgba(255,255,255,0.9);
    border:1px solid #666;
    box-shadow:0 0 10px #666;
    border-radius:10px;
}

#masInfo button {
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0;
}


@media only screen and (max-width: 1400px) {
	div.ckLopdBorde, #masInfo {
		width: 95%;
	}
	
	div.ckLopd {
		height:210px;
	}	
}

@media only screen and (max-width: 900px) {
	div.ckLopdBorde, #masInfo {
		width: 98%;
	}	
}

@media only screen and (max-width: 650px) {
	div.ckLopdBorde, #masInfo {
		width: 98%;
	}
	
	div.ckLopd {
		height:265px;
	}
	
	div.ckLopdTexto {
		font-size: 12px;
		line-height: 15px;
	}
	
	.ckLopdTitulo {
		font-size:14px;
	}
	
	.ckLopdBoton {
		width:90%;
		position:relative;
		float: none;
    	left: 50%;
    	transform: translateX(-50%);		
	}
	
	.ckLopdDivBoton {
		width:100%;
	}
	
	#masInfo {
		height: 100%;
		overflow-y: auto;
	}
	
	#masInfo button {
		position:sticky;
		margin:0 auto;
		left:auto;
		transform:none;
	}
	
	.ckLopdDivAceptar {
		float:none;
		left:50%;
		transform:trasnlateY(-50%);
	}
	
	.ckLopdDivAceptar {
		float:left;
	}
	
	.modal-content {
		display: block;
	    max-height: 70%;
	    overflow-y: scroll;
	}
	
	.modal-content .ckLopdBoton {
	position: sticky!important;
    transform: none!important;
    margin: 0;
    bottom:-15px;
	}
		
}