/* GLOBALES**********************************/

section {
    display: block;
}

.img-logo{
	width: 50%;
	display: block;
	margin: auto;
}

#container{
    background: #FFF;
    margin: auto;
    height: 100%;
}

#container form{
    background: #FFF;
    width: 80%;
    display: block;
    margin: auto;
}

.logbar{
    background: #FFF;	
	font-family: 'Arial';
    font-size: 10px;
	width: 80%;
	padding-left: 25px;
	padding-right: 5px;
	margin: 5px auto;
	text-align: left;
    color: #00F;	
	}

.logo{
	background: #FFF;
	width: 90%;
	padding-top: 35px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 5px auto;
	display: block;	
	}

.paraDivLogoCon {
		width: 80%;
	background: #FFF;
	height:  80px;
}

.logoCon{
	background: #FFF;
	width: 5%;
	padding: 5px;
	margin: 5px auto;
	float:right;
	display: block;	
	}
	
h2{
	font-family: 'Arial';
	font-size: 10pt;
	letter-spacing: 1px;
	background: #FFF;
	padding: 10px;
	border: 0px;
	color: #535353;
	text-align: center;
	display: block;
}


h3{
	font-family: 'Arial';
	font-size: 12pt;
	letter-spacing: 1px;
	width: 80%;
	background: #FFF;
	padding: 10px;
	margin: 15px auto;
	border: 0px;
	color: #033;
	text-align: center;
	display: block;
}

/* ENTRADA DATOS****************************/
.inp_loguin{
	font-family: 'Arial';
	font-size: 15pt;
	background: #FFF;
	width: 50%;
	padding: 5px;
	margin: 20px auto;
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	display: block;
}

.input{
	font-family: 'Arial';
	font-size: 15pt;	
	background: #FFF;
	width: 50%;
	padding: 5px;
	margin: 5px auto;
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	display: block;
}

input[type=checkbox] {
    transform: scale(3);
	margin: 30px;
}


input[type=radio] {
    transform: scale(2.5);
	margin-left: 10px;
	margin-right: 30px;
	
}

.rad{
	font-family: 'Arial';
	font-size: 15pt;
	color: #009;
}

.rad2{
	font-family: 'Arial';
	font-size: 15pt;
	color: #009;
	width: 55%;
	margin-top: 25px;
	margin-bottom: 15px;

}



.fecha{
	font-family: 'Arial';
	font-size: 15pt;
	width: 50%;
	background: #FFF;
	padding: 5px;
	margin: 5px auto;;
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	display: block;
}

.combo{
	width: 50%;
	padding: 5px;
	background: #FFF;
	font-size: 15pt;
	display: block;
	margin: 10px auto;
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	}

.G1{
	background:#E6FFB7
}

.G2{
	background:#FFD2F9;
}

.G3{
	background:#D9D2FF;
}

.TT{
	background:#ECC7B0;
}

/* SALIDA DATOS****************************/

.display{
	font-family: 'Arial';
	font-size: 20pt;
	letter-spacing: 1px;
	width: 50%;
	background: #FFF;
	padding: 15px;
	margin: 10px auto;
	border-radius: 5px;
	color: #000;
	font-style: italic;
	text-align: left;
	border: 1px solid  #85929e;
	display: block;	
}

.display2{
	font-family: 'Arial';
	font-size: 15pt;
	color: #009;
	width: 50%;
	background: #FFF;
	padding: 15px;
	margin: 10px auto;
	border-radius: 5px;
	text-align: left;
	border: 1px solid  #85929e;
		
}


.mensaje{

	font-family: 'Arial';
	font-size: 15pt;
	letter-spacing: 1px;
	background: #FFF;
	padding: 10px;
	border: 0px;
	text-align: center;
	display: block;
	background: #FFF;
	color: #060;

}


.ident{
	font-family: 'Arial';
	font-size: 18pt;
	letter-spacing: 1px;
	background: #FFF;
	padding: 5px;
	margin: 5 px auto;
	border: 0px;
	color: #009;
	font-style: italic;
	text-align: center;
	display: block;	
}

.etiqueta{
	font-family: 'Arial';
	font-size: 15pt;
	color: #009;
	display: block;
	width: 90%;
	margin-top: 20px;
	margin-left: 140px;
	}

/* ACCION****************************/

.bot1{
	background: #006;
    width: 50%;
	font-size: 11pt;
	padding: 15px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #FFF;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
}

.bot2{
	background: #000;
    width: 50%;
	font-size: 11pt;
	padding: 15px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #FFF;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
}

.bot3{
	background: #fff;
    width: 50%;
	font-size: 11pt;
	padding: 15px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #000;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
	border-bottom: 1px solid #0033FF;
}

.bot4{
	background: #999;
    width: 50%;
	font-size: 11pt;
	padding: 15px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #000;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
}

/********************************* Para pantallas de 992px o menores ***********************************/

@media screen and (max-width: 992px){

/* GLOBALES**********************************/


.img-logo{
	width: 100%;
	display: block;
	margin: auto;
}

section {
    display: block;
}

#container{
    background: #FFF;
    margin: auto;
    height: 100%;
}

#container form{
    background: #FFF;
    width: 100%;
    display: block;
    margin: auto;
}

.logbar{
    background: #FFF;	
	font-family: 'Arial';
    font-size: 25px;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	margin: 5px auto;
	text-align: left;
    color: #00F;	
	}

.logo{
	background: #FFF;
	width: 90%;
	padding-top: 35px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 5px auto;
	display: block;	
	}

.paraDivLogoCon {
	background: #FFF;
	height:  80px;
	width: 100%;
}

.logoCon{
	background: #FFF;
	width: 5%;
	padding: 5px;
	padding-right: 25px;
	margin: 5px auto;
	float:right;
	display: block;	
	}
	
h2{
	font-family: 'Arial';
	font-size: 35pt;
	letter-spacing: 1px;
	background: #FFF;
	padding: 10px;
	border: 0px;
	color: #535353;
	text-align: center;
	display: block;
}


h3{
	font-family: 'Arial';
	font-size: 27pt;
	letter-spacing: 1px;
	width: 80%;
	background: #FFF;
	padding: 10px;
	margin: 15px auto;
	border: 0px;
	color: #033;
	text-align: center;
	display: block;
}

/* ENTRADA DATOS****************************/
.inp_loguin{
	font-family: 'Arial';
	font-size: 35pt;
	background: #FFF;
	width: 85%;
	padding: 15px;
	margin: 20px auto;
	margin-top: 50px;
	padding-top: 30px;
	padding-bottom: 30px;	
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	display: block;
}
.input{
	font-family: 'Arial';
	font-size: 35pt;	
	background: #FFF;
	width: 85%;
	padding: 15px;
	margin: 5px auto;
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	display: block;
}

input[type=checkbox] {
    transform: scale(3);
	margin: 20px;
}

input[type=radio] {
    transform: scale(2.5);
	margin-top: 40px;
	margin-bottom: 15px;
	margin-left: 30px;
	margin-right: 30px;
	
}
	
.rad{
	font-family: 'Arial';
	font-size: 25pt;
	color: #009;
}

.rad2{
	font-family: 'Arial';
	font-size: 25pt;
	color: #009;
	width: 10%;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}
	
.fecha{
	min-height: 2.5rem;
	font-family: 'Arial';
	font-size: 35pt;
	width: 90%;
	background: #FFF;
	padding: 5px;
	margin: 5px auto;;
	border-radius: 5px;
	border: 1px solid  #85929e;
	text-align: left;
	display: block;

	background-image:
	    linear-gradient(0deg, transparent 50%, blue 50%),
	    linear-gradient(0deg, blue 50%, transparent 50%),
	    linear-gradient(to right, skyblue, skyblue);

	background-position:
	    calc(100% - 20px) calc(1em - 30px),
	    calc(100% - 25px) calc(1em - 30px),
	    100% 0;
	
	background-size:
	    30px 30px,
	    20px 30px,
	    1.8em 2.5em;
	
	background-repeat: no-repeat;
	
}

.combo{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	
	background-image:
	    linear-gradient(45deg, transparent 50%, blue 50%),
	    linear-gradient(135deg, blue 50%, transparent 50%),
	    linear-gradient(to right, skyblue, skyblue);

	background-position:
	    calc(100% - 40px) calc(1em - 12px),
	    calc(100% - 15px) calc(1em - 12px),
	    100% 0;
	
	background-size:
	    25px 25px,
	    25px 25px,
	    1.8em 2.5em;
	
	background-repeat: no-repeat;	

	padding-top: 15px;
	padding-bottom: 15px;	
	padding-left: 15px;
	width: 90%;
	font-size: 35pt;
	border-radius: 5px;
	border: 1px solid  #85929e;

}


/* SALIDA DATOS****************************/

.display{
	font-family: 'Arial';
	font-size: 30pt;
	letter-spacing: 1px;
	width: 90%;
	background: #FFF;
	padding: 15px;
	margin: 10px auto;
	border-radius: 5px;
	color: #000;
	font-style: italic;
	text-align: left;
	border: 1px solid  #85929e;
	display: block;	
}

.display2{
	font-family: 'Arial';
	font-size: 30pt;
	color: #009;
	width: 90%;
	background: #FFF;
	padding: 15px;
	margin: 10px auto;
	border-radius: 5px;
	text-align: left;
	border: 1px solid  #85929e;
		
}


.mensaje{

	font-family: 'Arial';
	font-size: 30pt;
	letter-spacing: 1px;
	background: #FFF;
	padding: 10px;
	border: 0px;
	text-align: center;
	display: block;
	background: #FFF;
	color: #060;

}


.ident{
	font-family: 'Arial';
	font-size: 35pt;
	letter-spacing: 1px;
	background: #FFF;
	padding: 5px;
	margin: 5 px auto;
	border: 0px;
	color: #009;
	font-style: italic;
	text-align: center;
	display: block;	
}

.etiqueta{
	font-family: 'Arial';
	font-size: 35pt;
	display: block;
	width: 90%;
	margin-top: 35px;
	margin-left: 50px;
	color: #009;
	}

/* ACCION****************************/

.bot1{
	background: #006;
    width: 90%;
	font-size: 40pt;
	padding: 45px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #FFF;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
}

.bot2{
	background: #000;
    width: 90%;
	font-size: 40pt;
	padding: 45px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #FFF;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
}

.bot3{
	background: #fff;
    width: 90%;
	font-size: 22pt;
	padding: 45px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #000;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
	border-bottom: 1px solid #0033FF;
}

.bot4{
	background: #999;
    width: 90%;
	font-size: 22pt;
	padding: 45px;
	margin: 14px auto;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
	color: #000;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
	display: block;
}
}