* {padding:0px;}

html {
 font-size: 14px;
}

body {
 margin: 0px;
}

html, body {
 height: 100%;
 width: 100%;
}

body {
 background-color: white;
 background-size: auto;
 background-repeat: repeat;
 font-family: Verdana, sans-serif;
 color: #333;
}

/*
form {display:block; height:100%;}
*/
img {border: none; margin:0px;}

table {
 border:0px; 
 border-style:hidden; 
 vertical-align:top; 
 border-spacing:0;/* Equivalente a cellspacing="0" */
}

td {padding:0;/* Equivalente a cellspadding="0" */}

input[type="text"], input[type="tel"], input[type="email"], 
input[type="password"], input[type="date"], select {
 border-width:0px 0px 1px 0px;
 border-style:solid;
 font-size:1.0rem;
 overflow:hidden;
 padding:4px 7px 6px;
}

option {
 border-style:none;
 padding:4px 7px 4px;
}

option:hover {
 color:rgb(230,230,230);
 background-color:red;
}
/*
select option:first-child{}
*/
input[type="submit"]
{
 border-radius:8px;
 color:rgb(240,240,240);
 cursor:pointer;
 font-size:0.95rem;
 height:33px;
 line-height:31px;
 padding:0 0 2px;
 text-align:center;
 vertical-align:middle;
 width:133px;
}

/* #body Contenedor de .panel */
#body {
 width:100%;
 padding-top:8px;
 padding-bottom:8px;
 flex-flow:row wrap;
 justify-content:space-around;}

#tBody { height:100%; }

#tBody #body td
{
 background-attachment: fixed;
 background-position: right bottom;
 background-repeat: no-repeat;
}

#header-bar td
{
 height: 40px;
 padding-left: 10px;
 padding-right: 10px;
 color: rgb(255,255,255);
 border: none;
 border-collapse: collapse;
}

/* #footer-back-btn : Btn.Siguiente reactivos.php*/

#footer-back-btn {
  /*line-height: 30px;*/
  cursor: pointer;
  text-align: center;
  padding: 10px 5px;
  /*width: 90%;*/
  color: rgb(255,255,255);
  letter-spacing: 3px;
  display: block;
  margin: 10px;
  /*font-size: 1.22em;*/
}

@media only screen and (min-width : 900px) 
{/*Pantallas grandes/escritorio: Fondo grande*/
  #close-header { display: table-cell; }
}

@media only screen and (max-width : 900px)
{/* Pantallas pequeñas/celulares */
  #close-header { display: none; }
  #footer-back-btn { margin: 15px; }
}

@media only screen and (min-width : 900px) 
{/*Pantallas grandes/escritorio: Fondo grande*/
  #header-bar td { letter-spacing: 3px; }
}

/* .panel Items de index.php y bienvenida.php  */
.panel {
 width:21%;
 min-width:250px;
 max-width:265px;
 max-height:300px;
 background-size:265px; /*Revision*/
 margin:12px;
 color:#333333 !important;
 background-color:#0072BB;
 border-radius:5px;
 font-size:0.93rem;
 text-align:center;
 text-decoration: none !important;
 box-shadow:0px 2px 3px rgba(0,0,0,0.25); }

.panel:hover .panel-body {
 color:#fff; /*Revision*/
 transition:background 0.35s linear;
 background:linear-gradient(rgb(255,255,255,0) 90%, rgb(255,255,255,0.4));}

.panel-head {
 min-height:135px;
 background-color:none; /*Revision*/
 border-radius:5px 5px 0px 0px;
 padding:10px 15px; }

.panel-body {
 min-height:123px;
 font-size:0.9rem;
 border-radius:0px 0px 5px 5px;
 padding:10px 15px;
 background-color:#fff; }

.panel:hover .panel-body {
 background-color:none; }

@media only screen and (max-width : 900px)
{/* Pantallas pequeñas/celulares */
  .panel {
    width:275px; 
    max-width:290px;
    max-height:480px;
    background-size:275px;
    font-size:1.15rem;
    letter-spacing:1px;
  }
  .panel h3 {
    font-size: 125%;
    font-weight: 600;
  }
  .panel-head {
    height:130px;
    min-height:120px;
  }
  .panel-body {
    min-height:147px;
  }
}

/* Caracteristicas.php */
.tb-content {
  padding: 10px; 
  background-color: rgb(255, 255, 255);
}

.tb-content table tr > th {
  padding: 5px;
  letter-spacing: .1rem; 
}

.tb-content table tr > td { 
  text-align: center;
  letter-spacing: .1rem; 
  border-style: solid;
  border-color: white;
  border-width: 3px 2px;
  padding: 10px 15px 10px !important; 
  background-color: rgb(245,245,251); }

@media only screen and (min-width : 900px) 
{/*Para escritorio*/
  .tb-content {
    width: 97%;
    margin: 15px 10px;
    padding: 10px;
    box-shadow: 4px 5px 10px 0px rgba(0,0,0,0.5);
  } 
}

@media only screen and (max-width : 900px)
{/* Pantallas pequeñas/celulares */
  .tb-content {
    width: 100%;
    padding: 20px; 
  } 
}

/* .reactivo : reactivo_mod.php, instrumento.php, resultados.php, admin_index.php */

.reactivo { 
  padding: 10px; background-color: rgb(255, 255, 255);
  border-left: 5px solid rgb(0,55,100);
  box-shadow: 4px 5px 10px 0px rgba(0,0,0,0.5);
}

.reactivo > p { letter-spacing: .2rem; margin: 10px 0px 20px; }
.reactivo > p > input[type="text"] { padding: 0px; width:40px; text-align:center; }

.respuesta { margin-left: 15px; }

#header-min { letter-spacing: .2rem; }
#header-min > td > select { letter-spacing: .1rem; }

/* .examen : instrumento.php, resultados.php, admin_index.php  */

.examen > p { letter-spacing: .2rem; margin: 10px 0px 20px; }
.examen > table tr > th {
  padding: 5px;
  letter-spacing: .1rem; 
}
.examen > table tr > td { 
  text-align: center;
  letter-spacing: .1rem; 
  border-style: solid;
  border-color: white;
  border-width: 3px 2px;
  padding: 10px 15px 10px !important; 
  background-color: rgb(245,245,251); }

#tr-btn a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 7px;
  width: 200px;
  height: 40px;
  color: rgb(250, 250, 250);
}

/* --- */

#tMain
{
 width:85%;
 min-width:200px;
 margin:0px;
}

#tMain td
{
 vertical-align:middle;
}

/*#nav > td {padding: 10px; font-size: 0.9em;}*/

.block
{
 border-style:none;
 margin:0px;
 padding:10px;
 /*display:inline;*/
 height:55px;
}

.u2 input[type="text"],
.u2 input[type="tel"], .u2 input[type="email"], 
.u2 input[type="password"], .u2 input[type="date"] 
{ width:180px;}
.u2 select 
{ width:196px;}


@media only screen and (min-width : 900px) 
{/*Pantallas grandes/escritorio: Fondo grande*/
  .block {float:left; text-align:left;}
  #tMain td { padding:0px 10px; } 
}

@media only screen and (max-width : 900px)
{/*Pantallas pequeñas/celulares */
  p {font-size:125%;}
  .block {float:center; text-align:center;}
  #tMain {width:100%;}
  #tMain td { padding: 0px; }
}

.mensajes {font-weight: bold}
.info, .error {font-weight: bold; display: block; font-size: small}
.error {color: red}

::selection {color:rgb(250,250,250);background:rgb(176,176,176);}
::-moz-selection {color:rgb(250,250,250);background:rgb(176,176,176);} 

A { text-decoration:none; }


#info {/*Info*/
 display:flex;
 padding:0px;
 margin:5px 3px;
 min-height:60px;
 font-size:0.96rem;
 align-items:center;
 letter-spacing:1px;
 color:rgb(37,37,37);
 justify-content:space-between;
 box-shadow:3px 0 7px rgb(174,174,174);
 background-image:url('/img/msj/fr_fon.png');}
#info div {
 display:flex;
 height:100%;
 min-height:60px;
 min-width:60px;
 margin-right:15px;
 align-items:center;
 justify-content:center;
 background-color:white; }
#info div:last-child {
 min-width:30px;
 margin-right:0px;
 margin-left:15px;
 align-items:flex-start;
 background-color:transparent;}
#info div:last-child img {
 pointer:cursor;
 margin-top:8px;
}

@media only screen and (min-width : 900px) 
{/*Para escritorio*/

}

@media only screen and (max-width : 900px)
{/* Pantallas pequeñas/celulares */
  
}

/* Custom based on EXANIs */

input[type="text"], input[type="tel"], input[type="email"], 
input[type="password"], input[type="date"], select {
 border-bottom-color: #1669BA;
}

input[type="submit"] {
 background-color: rgba(26,191,241);
 border: 1px solid rgb(245,245,245);
}

h2 { color: blue; }

.tb-content-main {
  width: 100%;
  padding: 10px;
  margin: 10px 0px !important;
  background-color: transparent;
  background-image: linear-gradient(
   rgb(255 255 255 / 30%) 0%, 
   rgb(255 255 255 / 100%) 40%,
   rgb(255 255 255 / 100%) 99%,
   rgb(0 0 0 / 7%) 100%);
  box-shadow: none;
}

.tb-content-main table tr > td { 
  text-align: center;
  letter-spacing: 0.1rem; 
  border-style: solid;
  border-color: white;
  border-width: 3px 2px;
  padding: 10px 15px 10px !important; 
  background-color: rgb(245,245,251);
}

.tb-content {
  width: 100%;
  padding: 10px 35px;
  margin: 10px 0px !important;
  background-color: transparent;
  background-image: linear-gradient(
   rgb(255 255 255 / 30%) 0%, 
   rgb(255 255 255 / 100%) 40%,
   rgb(255 255 255 / 100%) 99%,
   rgb(0 0 0 / 7%) 100%);
  box-shadow: none;
}

#logo-lock { width: 330px; }

#bienvenida-img {
 width: 59%;
 min-width: 550px;
 max-width: 1100px;
 border-radius: 7px; 
 opacity: 0.96;
 border: 1px solid white;
 box-shadow: 1px 1px 4px 2px rgb(0 0 0 / 20%); }
.panelimg { background-color: transparent; }

@media only screen and (max-width : 900px)
{/*Pantallas pequeñas/celulares */
  #bienvenida-img { width:550px; }
}

#header-bar {
 color: rgb(255,255,255);
 box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.55);
}

#header-bar td {
 height: 60px;
 border-bottom: none;
 text-transform: uppercase;
 /*text-shadow: rgb(0 0 0/60%) 1px 2px 2px;*/
 text-shadow: rgb(0 0 0/60%) 2px 2px 1px;
}

#header-bar td:first-child {
 font-size: 117%;
 letter-spacing: 5px;
 font-weight: 500;
 /*text-shadow: rgb(0 0 0/50%) 1px 1px 1px;*/
}

#header-bar td:nth-child(2) {
 padding-right: 20px;
}

@media only screen and (max-width : 900px)
{/* Pantallas pequeñas/celulares */
 #header-bar td:first-child { 
   font-size: 120%; letter-spacing: 3px; }
 #header-bar td:nth-child(2) img { display: none; }
 #header-bar td:nth-child(2) { padding: 0px; }
}

#close-header {
 font-size: 95%;
 color: white; /*Revision*/
 width: 230px !important;
}

#footer-back-btn {
 color: rgb(240,240,240);
 background-color: rgb(0,55,100);
}

#footer-back-btn {
 display:block; /*Revisar*/
 text-transform: uppercase;
 border: 1px solid white;
 text-shadow: rgb(0 0 0/30%) 1px 1px 4px; /*Revisar*/
 box-shadow: 1px 2px 4px 0px rgb(255 255 255 / 90%);
}

@media only screen and (min-width : 900px) 
{/*Pantallas grandes/escritorio: Fondo grande*/
  #footer-back-btn { font-size: 112%; }
}

#nav a { color: rgb(0,55,100); }

#tr-btn a {
  background-color: rgb(255,108,14);
  box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.5);
}

.reactivo {
 margin: 0px 15px;
 border-left: none;
 box-shadow: 2px 2px 1px 0px rgb(0 0 0 / 20%);
}

@media only screen and (max-width : 900px)
{/* Pantallas pequeñas/celulares */
 .reactivo { margin: 0px; }
}

A:link    { color: rgb(26,81,230); } /* Vinculos sin visitar */
A:visited { color: rgb(26,81,230); } /* Vinculos visitados */
A:hover   { color: rgb(26,81,230); } /* Mouse sobre el vinculo #C0C0C0; */
A:active  { color: rgb(26,81,230); } /* Vinculo al clic del mouse */