/* CSS3 */
/* Developed by: MrCh0n <mrchon@gmail.com> */  
/* fecha de modificacion: 08/03/2021 */

/********** Objeto input efect label up ************/
div.input-block, div.input-blockmini, div.input-block2  {
  position: relative;
}

div.input-block input, div.input-block2 input, div.input-block input[type="password"] {
   /*font-weight: 500;*/
 font-size: 1.2rem;
  color: #495055;

  padding: 15px 15px;
  border-radius: 1rem;
  border: 2px solid  #D9D9D9;
  outline:none;
}

div.input-block span.placeholder {
  position: absolute;
  margin: 17px 0;
  padding: 0 4px;
  top: 0;
  left: 60px;
  width:100%;

  font-family: Roboto, sans-serif;

  color:  #BDBDBD;

  display: flex;
  align-items: center;

  font-size: 1rem;



  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder,
div.input-block input[type="password"]:valid + span.placeholder,
div.input-block input[type="password"]:focus + span.placeholder {
transform: scale(0.6) translateY(-35px);
background: #fff;
border-radius: 25px;
}

div.input-block input:focus,
div.input-block input[type="password"]:focus {
    color: #000; /*#1976D2;*/
    border-color: #1976D2;
}

div.input-block input:focus + span.placeholder,
div.input-block input[type="password"]:focus + span.placeholder {
    color: #1976D2;
}

/*====================================================================*/


div.input-block2 span.placeholder {
  position: absolute;
  margin: 17px 0;
  padding: 0 4px;
  top: 0;
  left: 10px;
  	width:100%;

  font-family: Roboto, sans-serif;

  color:  #BDBDBD;

  display: flex;
  align-items: center;

  font-size: 1rem;

  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-block2 input:valid + span.placeholder,
div.input-block2 input:focus + span.placeholder,
div.input-block2 input[type="password"]:valid + span.placeholder,
div.input-block2 input[type="password"]:focus + span.placeholder {
	transform: scale(0.6) translateY(-35px);
	background: #fff;
	border-radius: 25px;
}

div.input-block2 input:focus,
div.input-block2 input[type="password"]:focus {
    color: #000; /*#1976D2;*/
    border-color: #1976D2;
}

div.input-block2 input:focus + span.placeholder,
div.input-block2 input[type="password"]:focus + span.placeholder {
    color: #1976D2;
}


@media only screen and (max-width: 1024px){ 
	div.input-block input:valid + span.placeholder,
	div.input-block input:focus + span.placeholder,
	div.input-block input[type="password"]:valid + span.placeholder,
	div.input-block input[type="password"]:focus + span.placeholder {
		transform: scale(0.6) translateY(-60px) translateX(-30px);
		border-radius: 25px;
	}


	div.input-block2 input:valid + span.placeholder,
	div.input-block2 input:focus + span.placeholder,
	div.input-block2 input[type="password"]:valid + span.placeholder,
	div.input-block2 input[type="password"]:focus + span.placeholder {
		transform: scale(0.6) translateY(-60px) translateX(-10px);
		border-radius: 25px;
	}
	
}


/*====================================================================*/
div.input-blockmini input, div.input-blockmini input[type="password"] {
   /*font-weight: 500;*/
 font-size: 1rem;
  color: #495055;

  padding: 7px 7px;
  border-radius: 0.5rem;
  border: 1px solid  #D9D9D9;
  outline:none;
}

div.input-blockmini span.placeholder {
  position: absolute;
  margin: 8px 0;
  padding: 0 4px;
  top: 0;
  left: 50px;

  font-family: Roboto, sans-serif;

  color:  #BDBDBD;

  display: flex;
  align-items: center;

  font-size: 0.8rem;



  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-blockmini input:valid + span.placeholder,
div.input-blockmini input:focus + span.placeholder,
div.input-blockmini input[type="password"]:valid + span.placeholder,
div.input-blockmini input[type="password"]:focus + span.placeholder {
transform: scale(0.7) translateY(-20px);
background: #fff;
}

div.input-blockmini input:focus,
div.input-blockmini input[type="password"]:focus {
    color: #000; /*#1976D2;*/
    border-color: #1976D2;
}

div.input-blockmini input:focus + span.placeholder,
div.input-blockmini input[type="password"]:focus + span.placeholder {
    color: #1976D2;
}
div.input-blockmini.justinput span.placeholder {
	left: 10px;
}
div.input-blockmini .prefix {
    font-size: 1.5rem;
    position: absolute;
    top: -3px;
    left:3%;
    width: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.iconblockmini{
	font-size: 0.5rem;
    position: absolute;
    top: 3px;
    left:5%;
    width: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
}
div.input-blockmini .select-wrapper input.select-dropdown {
	height: 1.5rem;
}
div.input-blockmini  .select-wrapper + label {
    font-size: .8rem;
    position: absolute;
    top: -30px;
    left: 5px;
}
/*
div.input-blockmini input[type="text"]:read-only {
 background-color:#9E9E9E;
}
*/
div.input-disabled.col label {
    left: 0;
    top: -30px;
    font-size:0.6em;
    
}

div.input-block.fechita span.placeholder {
  left: 10px;
}
div.input-block.fechita2 span.placeholder {
  left: 20px;
}

.upercas{
	text-transform:uppercase;
}

.labelInfoEjemplo{
	font-size:0.8em;
	color:#fff;
	font-weight:bolder;
	text-align:center;
}
.labelInfoShow{
	font-size:1.2em;
	color:#003366;
	font-weight:bolder;
}
.labelInfoShowred{
	font-size:1.2em;
	color:#D32F2F;
	font-weight:bolder;
}
.mensajeNolastexp{
	font-weight:bold;
	font-size:1.2em;
	text-transform: uppercase;
}
/*================================================================================
  BOTONES SWAL - SWEET ALERT
================================================================================*/
.swal-modal {
	width:70%;
}
.swal-button{
	background-color:#455A64;
	font-weight:normal;
}
.swal-button:hover{
	color:#fff;
	font-weight:normal;
	background-color:#607D8B;
}
.swal-button--ok{
	color:#fff;
	font-weight:normal;
	background-color:#455A64;
}
.swal-button--ok:hover{
	font-weight:normal;
}
.swal-button--cancel {
    color: #455A64;
    font-weight:normal;
    background-color: #efefef;
    border:1px solid #BDBDBD;
}
.swal-button--cancel:hover {
    font-weight:normal;
	color: #000;
    background-color: #CFD8DC;
    border:1px solid #BDBDBD;
}
/*================================================================================
  BOTONES
================================================================================*/
.btn:hover, .btn-small:hover{
	color:#fff;
	font-weight:bold;
	background-color:#455A64;
}
.btn-mini{
  height: 24px;
  padding: 0 1rem; 
  line-height: 25px;
  top: 24px;
}
.btn-mini i{
  font-size:1em;
}
.btn-mini2{
  height: 24px;
  padding: 0 1rem; 
  line-height: 25px;
  top: 1px;
}
.btn-reg-verde{
    background-color:#4c9e45;
}
.btn-reg-verde:hover{
    background-color:#388E3C;
}

.btn-reg-rojo,.btn-floating.btn-floating-small.btn-reg-rojo{
    background-color:#F44336;
}
.btn-reg-rojo:hover,.btn-floating.btn-floating-small.btn-reg-rojo:hover{
    background-color:#D32F2F;
}
.btn-floating.btn-floating-small {
    line-height: 30px;
    width: 30px;
    height: 30px;
}
.btn-floating.btn-floating-small i {
	line-height: 30px;
}
/*================================================================================
  window interna
================================================================================*/
.almostall{
	width:96%;
	margin:30px auto;
}


/*  BOTON INDEX  */
.btn.btn-index{
    height: 24px;
    padding: 0.5em 1rem;
    margin:10px auto;
    line-height: 25px;
    top: 0;
    width: 80%;
    height: 60px;

    -webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
.btn.btn-index:hover{
	color:#455A64;
	font-weight:normal;
	background-color:#FFEB3B;
}
.btn.btn-index:hover >i.left{
	color:#455A64;
}

.btn.btn-index i.left {
    margin-top: 10px;
    margin-left:20px;
    margin-right:10px;
}
.boton2022 {
    background-color: #7f2855 !important;
}

.texto2022 {
    color: #7f2855 !important;
}

/*================================================================================
  BLOQUEO LOADING
================================================================================*/
/* == bloqueo loading == */
.modal_loader {
  display:none;
  position:absolute;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: alpha(opacity=50);
  background-color: #000;
  z-index: 20000;
  margin:0;
  padding:auto;
  text-align:center;
}
.modal_loader > img {
  margin-top:50%;
}
.centerbox{
  /* Internet Explorer 10 */
  display:-ms-flexbox;
  -ms-flex-pack:center;
  -ms-flex-align:center;

  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;

  /* Safari, Opera, and Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* W3C */
  display:box;
  box-pack:center;
  box-align:center;
}
.window80{
	width:80%;
}

.modal-header{
	border:0 solid #000;
	background-color: #f1f1f1;
	padding-top:10px;
	padding-bottom:5px;
}
.modal-header > h4{

	border:0 solid #f00;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}

.msgAlertWindow{
	padding-top:50px;
	text-align:center;
	font-size:1.5em;
	color:#F44336;
	padding:10px 30px;
}
.errorWindowIndex{
	display:block;
	width:80%;
	margin:auto;
	border:0 solid #D32F2F;
	font-size:1.2em;
	color:#D32F2F;
	text-align:center;
	padding-top:3%;
}

/* #################### bloqueo #################### */
.overlaySistem{ 
  visibility: hidden; 
  position: fixed; 
  width:100%;
  height: 100%;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;  
  z-index:998; 
  -webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  -moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
  -webkit-transform: translateZ(0); 
  -moz-transform: translateZ(0); 
  -ms-transform: translateZ(0); 
  -o-transform: translateZ(0); 
  transform: translateZ(0);
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
  background-color: rgba(255, 255, 255, 0.8);

  /*
  visibility: hidden; 
  display:none;
  position:absolute;
   */
}
.progressBarHiden{
    display:none;
}
.progress {
	margin:0;
    /*margin: 0.05rem 0 1rem 0;
    background-color: #3c69cf;*/
    background-color: transparent !important;
    position: fixed;
    width: 99.5%;
    z-index: 1001;
}
.progress .indeterminate {
    background-color: #448AFF;
    opacity: 1;
    z-index: 10002;
}
.overlaySistemShow{
  visibility: visible;
}

.overlayConWindow{
	border:1px solid #000;
	width:30%;
	margin-left:35%;
	height: 50px;
	margin-top: calc(10%);
	z-index: 1997;
	background-color:#fff;
	text-align:center;
	
}
/*================================================================================
  window interna
================================================================================*/
.selectspace{
	margin-top:20px;
	margin-bottom: 30px;
}
.selectspace .prefix {
	margin-top:-10px;
	margin-left:-5px;
}
.chowpass:hover{
	cursor:pointer;
}
/*================================================================================
  PROGRESS BAR CHON
================================================================================*/
.porcientoleft{
	width:13%;
	display:inline-block;
	text-align:right;
}
.porcientoright{
	width:10%;
	display:inline-block;
	text-align:left;
}
.barcontenedor{
	width:70%;
	display:inline-block;
	border:1px solid #e0e0e0;
	height:10px;
	border-radius: 25px;
	overflow: hidden;
}
.barporciento{
	height:100%;
	width:1%;
	background-color:#2196F3;
}


.bar-fill {
	-webkit-transition: width .3s linear;
            transition: width .3s linear;

   /*border-radius:8px;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:sendprogresschon 7s infinite;
    animation:sendprogresschon 7s infinite*/
}

/*
@-webkit-keyframes sendprogresschon
{
    0%
    {
        right: 1%;
        left: 1%;
    }
    60%
    {
        right: 60%;
        left: 60%;
    }
    100%
    {
        right: -90%;
        left: 100%;
    }
}
*/
/*================================================================================
  Rotaciones
================================================================================*/
.rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.icon-flipped {
    -o-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}



.select2-container{
	z-index:10222;
	text-align:left;
}

.text-justify{
	text-align:justify;
}