/*PERMITE ESTABLECER LA ESTRUCTURA Y DISEŅO DE LA APLICACION*/

/*
body{
   font: 8pt Arial, Helvetica, sans-serif;
   margin: 10 0 10 0px;
   text-align: center;
   background-color: #ebebeb;
}
*/
.verde{background-color: #78cd51;}
.amarillo{background-color: #f0ad4e;}
.rojo{background-color: #d9534f;}
.cabe{height: 100px; text-align: center;	font: 13pt arial,"arial",Times, serif;color: #4A5A6D;font-weight: bold;text-transform :uppercase;}
#principal{
	border-radius: 20px;
	/*background-image: url(../imagenes/background.jpg);*/
}
.estilocabe{font: 11pt arial,"arial",Times, serif;color: #4A5A6D;font-weight: normal;}
.estilocabeN{font: 10pt arial,"arial",Times, serif;color: #4A5A6D;font-weight: bold;}
#contenedor{
   text-align: left;
   width: 800px;
   margin: auto;
}
#bienv{
   font: 60pt "Times New Roman", Times, serif;
   color: #CDDEF5;
   font-style: italic;
   font-weight: bold;
   text-align:center;
  
}
#baner{
   font: 120pt "Times New Roman", Times, serif;
   color: #CDDEF5;
   font-style: italic;
   font-weight: bold;
   text-align:center;
   text-shadow: #C3C3C3 10px 10px 10px ;
}

#cuerpo{
   margin: 4 0 4 0px;
}
#lateral{
   width: 135px;
   float:left;
   border: 1px solid ThreeDShadow;
   -moz-border-radius: 5px;
}
#lateral ul{
   margin : 0 0 0 0px;
   padding: 0 0 0 0px;
   list-style: none;
}
#lateral li{
   margin: 0 0 0 0px;
   padding: 0 0 0 4px;
   font-weight: bold;
   text-align:left;
}
#lateral a{color: #3333cc;text-decoration: none;}

#pie{
	height: 40px;
   font: 9pt Arial, Helvetica, sans-serif;
   padding: 3 10 3 10px;
   text-align:center;
   clear: both;
   border: 1px solid ThreeDShadow;
   -moz-border-radius: 5px;
   background-image: url(../imagenes/barra.jpg);
}

.area{
   font: 30pt "Times New Roman", Times, serif;
   color: #CECECE;
   font-style: italic;
   font-weight: bold;
}
.enlace{
   margin: 2 4 2 4px;
   color:#CECECE;
   width: 149px;
   height: 24px;
   border: 1px solid ThreeDShadow;
   -moz-border-radius: 1px;
   float: left;
   text-align:center;
   font: 12pt "Times New Roman", Times, serif;
}
#reloj{
	font: 9pt "arial", Times, serif;
   height: 17px;
   width: 798px;
   padding: 0 0 0 0px;
   border: 1px solid ThreeDShadow;
   -moz-border-radius: 3px;
   margin: 3 0 3 0px;
}
#usuario{
	   width: 260px;
	   float: left;
	   padding: 0 0 0 4px;
}
#sesion{
	   width: 230px;
	   margin-left: 20px;
	   text-align:center;
}
#tiempo{
	   width: 290px;
	   float: right;
	   text-align:right;
	   padding: 0 4 0 0px;
}
.telecom{font: 22pt arial,"arial", Times, serif;}

.fuenteP{font: 10pt arial,"arial", Times, serif;color: #000000;}

.fuenteN{font: 12pt arial, Times, serif;color: #000000;font-weight: bold;text-transform :uppercase;}
.fuente{font: 12pt arial, Times, serif;color: #000000;text-transform :uppercase;}
.resaltado{font: 11pt arial, Times, serif;color: #0000FF;border: 1px solid #B9CAE1; }
.fuenteNormal{font: 9pt arial, Times, serif;color: #000000;text-transform :none;}

.fuenteM{font: 9pt arial, Times, serif;color: #000000;text-transform :uppercase; font-weight: bold;text-decoration: underline;}

.error{font: 12pt "arial", Times, serif;color: #FF0000;font-weight: bold; text-align:center;text-transform :uppercase;}
#imagen  {
background-image: url(../imagenes/boton.jpg);
}
#imagen  a {
	display: block; /* para poder darle altura y ancho*/
	width: 130px;
	height: 22px;
}
#imagen.active, #imagen :hover{
	background-image:url(../imagenes/botonhover.jpg);
}
A.estilo{font-weight: 500; font-size : 13px; font-family : Arial; color : #000099; text-decoration: none;}
A.estilo:hover{ font-size : 13px;  font-family : Arial; color : #194D81; text-decoration: underline;}
.arrow_btn{ font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; font-family: verdana, arial, helvetica; color: #000000; border-left: 1px solid #cccccc; border-right: 1px solid #eeeeee; border-top: 1px solid #eeeeee; border-bottom: 1px solid #cccccc; background-color: #ffffff;}


/*MENSAJES*/

.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }

#effect { width: 240px; height: 135px; padding: 0.4em; position:absolute;z-index:200;float: right;right:20px;}
#effect h5 { margin: 0; padding: 0.4em; text-align: center; }



.tit_sms{font: 12pt "arial", Times, serif;color: #4A5A6D;font-weight: bold;}
.fuente_sms{font: 10pt "arial", Times, serif;color: #333333;}
.fuente_sms_corto{font: 8pt "arial", Times, serif;color: #838383;}

.fuente_sms_n{font: 10pt "arial", Times, serif;color: #333333;font-weight: bold;}
.fuente_sms_corto_n{font: 7pt "arial", Times, serif;color: #838383;font-weight: bold;}

#t_mensaje{
	/*background-image:url(imagenes/titulo_sms.jpg);*/
	height: 30px;
	width: 150px;
	border: 1px solid ThreeDShadow;
}
#t_listado{
	/*background-image:url(imagenes/titulo_sms.jpg);*/
	height: 30px;
	width: 280px;
	border: 1px solid ThreeDShadow;
}
#t_detalle{
	/*background-image:url(imagenes/titulo_sms.jpg);*/
	height: 30px;
	width: 320px;
	border: 1px solid ThreeDShadow;
}

#mensaje{
	height: 480px;
	width: 150px;
	border: 1px solid ThreeDShadow;
}
#listado{
	height: 480px;
	width: 280px;
	border: 1px solid ThreeDShadow;
	overflow:auto;
}
#detalle_cont{
	/*height: 380px;*/
	width: 660px;
	border: 1px solid ThreeDShadow;
	overflow:auto;
}
#detalle{
	height: 380px;
	width: 320px;
	border: 1px solid ThreeDShadow;
	overflow:auto;
}
#envio_cont{
	height: 100px;
	width: 660px;
	border-top: 1px solid ThreeDShadow;
	border-right: 1px solid ThreeDShadow;
	border-left: 1px solid ThreeDShadow;
	
	
}
#envio{
	height: 100px;
	width: 320px;
	border-top: 1px solid ThreeDShadow;
	border-right: 1px solid ThreeDShadow;
	border-left: 1px solid ThreeDShadow;
	
	
}
#sms_rec{
	width: 200px;
	border: 1px solid #B1D85D;
	overflow:auto;
	float: left;
	font: 10pt "arial", Times, serif;color: #333333;
	-moz-border-radius: 8px;
	background: #E4FDAE;
}
#sms_env{
	width: 200px;
	border: 1px solid #C3D7FA;
	overflow:auto;
	float: right;
	font: 10pt "arial", Times, serif;color: #333333;
	-moz-border-radius: 8px;
	background: #E0EAFA;
}


#sms_rec_cont{
	width: 400px;
	border: 1px solid #B1D85D;
	overflow:auto;
	float: left;
	font: 10pt "arial", Times, serif;color: #333333;
	-moz-border-radius: 5px;
	background: #E4FDAE;
}
#sms_env_cont{
	width: 400px;
	border: 1px solid #C3D7FA;
	overflow:auto;
	float: right;
	font: 10pt "arial", Times, serif;color: #333333;
	-moz-border-radius: 5px;
	background: #E0EAFA;
}
#error, #error{
	display:none;
	height: 40;
	text-align: center;
}
.sms_envio{
	border: 1px solid ThreeDShadow;
	-moz-border-radius: 5px;

}

/*   estilos para boton para subir archivo     */
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn-file{overflow:hidden;position:relative;vertical-align:middle;}.btn-file>input{position:absolute;top:0;right:0;margin:0;opacity:0;filter:alpha(opacity=0);transform:translate(-300px, 0) scale(4);font-size:23px;direction:ltr;cursor:pointer;}
.fileupload{margin-bottom:9px;}.fileupload .uneditable-input{display:inline-block;margin-bottom:0px;vertical-align:middle;cursor:text;}
.fileupload .thumbnail{overflow:hidden;display:inline-block;margin-bottom:5px;vertical-align:middle;text-align:center;}.fileupload .thumbnail>img{display:inline-block;vertical-align:middle;max-height:100%;}
.fileupload .btn{vertical-align:middle;}
.fileupload-exists .fileupload-new,.fileupload-new .fileupload-exists{display:none;}
.fileupload-inline .fileupload-controls{display:inline;}
.fileupload-new .input-append .btn-file{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.thumbnail-borderless .thumbnail{border:none;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.fileupload-new.thumbnail-borderless .thumbnail{border:1px solid #ddd;}
.control-group.warning .fileupload .uneditable-input{color:#a47e3c;border-color:#a47e3c;}
.control-group.warning .fileupload .fileupload-preview{color:#a47e3c;}
.control-group.warning .fileupload .thumbnail{border-color:#a47e3c;}
.control-group.error .fileupload .uneditable-input{color:#b94a48;border-color:#b94a48;}
.control-group.error .fileupload .fileupload-preview{color:#b94a48;}
.control-group.error .fileupload .thumbnail{border-color:#b94a48;}
.control-group.success .fileupload .uneditable-input{color:#468847;border-color:#468847;}
.control-group.success .fileupload .fileupload-preview{color:#468847;}
.control-group.success .fileupload .thumbnail{border-color:#468847;}
.loading666 {
	width: 100%;
	height: 100%;
	border-color: blue;
	box-shadow: 0px 0px 5px blue;
	border-width: 2px;
	border-radius: 5px;
}
.loading333 {
	width: 100%;
	height: 50%;
	border-color: blue;
	box-shadow: 0px 0px 5px blue;
	border-width: 2px;
	border-radius: 5px;
}

.loading111 {
	width: 100%;
	height: 25%;
	border-color: blue;
	box-shadow: 0px 0px 5px blue;
	border-width: 2px;
	border-radius: 5px;
}
.centrado{
	
	position: fixed;
	left: 60%;
	top: 60%;
	z-index: 10;
	/*background: url('../imagenes/loading.gif') 50% 50% no-repeat rgb(249,249,249);*/
}

.container_pb{
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
}

.progressbar {
    color: #fff;
    text-align: right;
    height: 25px;
    width: 0;
    background-color: #0ba1b5; 
    border-radius: 3px; 
}

.txt_min {
	text-transform: lowercase;
}
.txt_may {
	text-transform: uppercase;
}
.txt_cap {
	text-transform: capitalize;
}
.txt_ini {
	text-transform: initial;
}
.txt_normal {
	text-transform: none;
}
.txt_heredado {
	text-transform: inherit;
}
.aling_center {
	text-align: center;
}
.aling_der {
	text-align: right;
}
.aling_izq {
	text-align: left;
}
.load_center {
  color: #2775E2;
  padding: 15px 25px;
  width: 100%;
  max-width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 55%;
  top: 20%;
  text-align: center;
}
.load_center_procesando {
  color: #5BC0DE;
  padding: 15px 25px;
  width: 100%;
  max-width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 40%;
  text-align: center;
}
.load_center_grid {

	color: #2775E2;
	width: 100%;
	max-width: 300px;
	position: relative;
	text-align: center;
	margin: auto;
	height: 50%;
	top: 15%;
}
.load_center_datatable {
	color: #2775E2;
	width: 100%;
	position: relative;
	text-align: center;
}

/*
  EFECTO FLIP
=================*/

/* Contenedor - Asignamos perspectiva */
.flip-container {
	width: 500px; 
	position: absolute; 
	left: 50%; top: 50%; 
	/*margin: -260px 0 0 -150px;*/
	margin-left: -250px;
	/*margin-top: -125px;*/
	text-align: center; 
	/*-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;*/
	/* Compatibilidad Firefox -IE */
	/*-moz-transform-style: preserve-3d;
	-moz-transform: perspective(1000px);
	-ms-transform-style: preserve-3d;
	-ms-transform: perspective(1000px);*/
	margin-top: -40vh;
}
.flip-container, .flipper, .form1, .form2, .form3, .form4 {
	width: 500px;
}
.form1, .form2, .form3, .form4 { 
	/*margin-top: -40vh;*/
}
@media screen and (min-width: 701px){
	.flip-container .flipper .form1 #avatar_user_cont{
		/*padding-right: 15px;*/
		margin-right: -10px;
	}

}
@media (max-width:700px) {
	.flip-container, .flipper, .form1, .form2, .form3, .form4 {
	    width: 450px;
	}
	.flip-container {
		left: 50%; top: 50%;
	    /*margin: -125px 0 0 -125px;*/
	    margin-left: -225px;
	}
	.flip-container .flipper .form1 #avatar_user_cont{
		/*padding-right: 15px;*/
		margin-right: -10px;
	}
}

@media (max-width:600px) {
	.flip-container, .flipper, .form1, .form2, .form3, .form4 {
	    width: 300px;
	}
	.flip-container {
		left: 50%; top: 50%;
	    margin-left: -150px;
	}
}
@media screen and (min-width: 600px){
	.flip-container .flipper .form1 #avatar_user_cont {
		text-align: right;

	}
	.flip-container .flipper .form1 #avatar_user_cont a {		
		margin-left: 35%;
	}
}
@media (max-width:400px) {
	.flip-container, .flipper, .form1, .form2, .form3, .form4 {
	    width: 250px;
	}
	.flip-container {
		left: 50%; top: 50%;
	    margin-left: -125px;
	}
	/*#flip #flipper #test2, #flip #flipper #test3, #flip #flipper #test1, , #flip #flipper #test4 {
		display: none;
	}*/
}
@media screen and (max-width: 400px){
	.flip-container .flipper .form1 #test1 {
		display: none;
		margin-top: ~50%;
	}
	.flip-container .flipper .form1 #avatar_user_cont{
		margin-left: -15px;
	}
}
@media (max-width:300px) {
	.flip-container, .flipper, .form1, .form2, .form3, .form4 {
	    width: 200px;
	}
	.flip-container {
		left: 50%; top: 50%;
	    margin-left: -100px;
	}
}
@media screen and (max-width: 300px){
	.flip-container .flipper .form1 #test1 {
		display: none;
	}
	.flip-container .flipper .form1 #avatar_user_cont, .flip-container .flipper .form1 #avatar_user_cont #avatar_user {
		/*margin-right: 5px;*/
		display: none;
	}
}
.flipper-container2 {
	/*width: 100%;*/
	position: absolute;	
	text-align: center; 
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	/* Compatibilidad Firefox -IE */
	-moz-transform-style: preserve-3d;
	-moz-transform: perspective(1000px);
	-ms-transform-style: preserve-3d;
	-ms-transform: perspective(1000px);
}
.flip-container2 .flipper .form1, .flip-container2 .flipper .form2, .flip-container2 .flipper .form3, .flip-container2 >.flipper > .form4 {
	/*width: 100%; */
}
.flipper {
	/*-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;

	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;*/
}

.form1, .form2, .form3, .form4 {
  /*-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  -ms-transition: 0.6s;
  -ms-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: absolute;*/
}

.form1 {
  /*-webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);*/
  z-index: 2;
}

.form2, .form3, .form4 {
  /* -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
       -ms-transform: rotateY(-180deg);
           transform: rotateY(-180deg);*/
}

/* Hover - Toggle */
.giro {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.giro2  {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


.flip-container .flipper form input[type=text], .flip-container input[type=password], .flip-container input[type=email] { 
	
	box-shadow: 0 0 0px 2px #ebebeb; 
	-webkit-box-shadow: 0 0 0px 2px #ebebeb; 
	-moz-box-shadow: 0 0 0px 2px #ebebeb;
	border: 1px solid #d7d7d7;
	display: inline-block;
	letter-spacing: 1px;
	font: bold 12pt Helvetica, Sans-Serif;
	padding: 2px;
}
.flip-container input[type=password] {
	/*-webkit-text-security: disc;*/
	-webkit-text-security: square;
	/*-webkit-text-security: circle;*/
	letter-spacing: 3px;
}
#pnt_top {
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px;
}
#pnt_top_blue{
	position: relative; 
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px;
}


.thumbnail {
	border:0px;
	text-align:center;
  -webkit-box-shadow: 0px;
     -moz-box-shadow: 0px;
          box-shadow: 0px;
    background: none;
    text-align: center;      
	
}

#register-wraper {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  /*-webkit-box-shadow: 0 0 8px rgba(200, 200, 230, 0.4);
  -moz-box-shadow: 0 0 8px rgba(200, 200, 230, 0.4);
  box-shadow: 0 0 8px rgba(200, 200, 230, 0.4);*/
  margin-top: 5px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 15px;
  background: white;
  text-align: center;
}

.register-info-wraper {
  /*background: rgba(200, 200, 230, 0.4);*/
}

#register-info {
  position: relative;
  margin-top:5px;
  padding: 0px;
  padding-top:10px;
}
#register-info ul {
  margin-right: 25px;
}
#register-info ul li {
  margin-bottom: 25px;
}
/* register info */
#register-info h1 {
  font-size: 42px;
  font-family: "Open Sans", sans-serif;
  line-height: 55px;
  font-weight: 700;
  text-align: right;
  padding-bottom: 30px;
  color: white;
}


#register-info h2, #register-info h3,  {
	font-family: 'Raleway', sans-serif;
	font-size:26px;
	color:#000066;
	font-weight: 300;
}

#register-info h3 {
	font-weight: 200;
} 
#register-info ul {
  text-align: right;
  color: white;
  font-size: 24px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

#register-info hr {
  	border: 0;
  	border-top: 1px solid silver;
  	border-top-style: dashed;
	margin-top:3px;
}

.img-circle {
  border-radius: 50%;
}
.thumbnail {
  display: inline-block;
  display: block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

.thumbnail > img {
  display: block;
  height: auto;
  max-width: 50%;
}

a.thumbnail:hover,
a.thumbnail:focus {
  border-color: #428bca;
}

.thumbnail > img {
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #333333;
}
.cont2 {
	text-align:center;
	margin-top:8px;
}

.cont3 {
	text-align:left;
	margin-left:8px;
	color:#000000;
}

.cont3 ok {
	color:#b2c831;
}

.info-user2 {
	text-align:center;
	font-size: 32px;
	color: #b2c831;
	padding-bottom:58px;
	}

.fs1 {
	padding:5px 5px 5px 5px;
	position:relative;
}

.fs1:hover {
	position:relative;
	color: #00f;
	cursor:pointer
}

div.scrollhorizontal {
  overflow: auto;
  white-space: nowrap;
}


/*AQUI MIGUEL*/
.float-w{
    position:fixed; 
	bottom:14px;
	right:37px;
	background-color:#2775e2;
	color:#FFF;
	border-radius: 30px 8px 30px 30px; 
	box-shadow: none;
	z-index:100;
	cursor: pointer;
	transition: all 0.1s ease-out 0s;
	padding: 5px 10px 5px 10px;
	font-size: 18px;
}
.float-w:hover {
 	transform: scale(1.1);
}

.my-float-w{
    margin-top:0px;
}

.my-float-t{
    font-size: 14px;
}