/* ========================================================================= */
/* Definiciones generales. */
/* ========================================================================= */

html {
  width: 100%;
}
* {
  background-color: #fcfcfc;  /* Gris claro. */
  box-sizing: border-box;
  font-family:"Verdana","sans-serif"; 
  /* font-size: 16px; */
  font-size: 14px;
}
p {
  padding: 5px;
  margin: 0 0 10px 0;
}
h2 {
  margin: 0;
  padding: 25px 0;
  font-size: 22px;
  border-bottom: 1px solid #e0e0e3;
  color: #4a536e;
}
h3 {
  margin: 0;
  padding: 25px 0;
  font-size: 20px;
  color: #4a536e;
}
h4 {
  margin: 0;
  padding: 15px 0;
  font-size: 18px;
  color: #4a536e;
}
ul {
  /* list-style-type: none; */
  margin-top: -10px;
  margin-left: 30px;
  padding: 5px;
}
ol {
  /* list-style-type: none; */
  margin-top: -10px;
  margin-left: 30px;
  padding: 5px;
}
li {
  padding-bottom: 10px;
}
input[type=text], input[type=password] {
  padding:5px; 
  border:2px solid #ccc; 
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #ffffff;
}
input[type=text]:focus, input[type=password]:focus {
  border-color:#333;
  background-color: #ffffff;
}
input[readonly] {
  padding:5px; 
  border:2px solid #ccc; 
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #f0f0f0;
}
input[type=submit] {
  background:#dcdcdc;
  padding:12px 12px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}
input[type=submit]:focus {
  background:#bebebe;
  padding:12px 12px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}


input[type=button] {
  background:#dcdcdc;
  padding:8px 12px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}
input[type=button]:focus {
  background:#bebebe;
  padding:8px 12px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}


/* ========================================================================= */
/* Clase:  form-hori. */
/* ========================================================================= */

.form-hori label {
  display: flex;
  flex-direction: column;
  padding:5px; 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.form-hori input[type=text] {
  display: flex;
  flex-direction: column;
  padding:5px; 
  border:2px solid #ccc; 
  -webkit-border-radius: 5px;
  border-radius: 5px;
  /* background-color: #ffffff; */
}


/* ========================================================================= */
/* Clase:  form-vert. */
/* ========================================================================= */

.form-vert form { 
  display: table;
  border-spacing: 4px;
}
.form-vert p { 
  display: table-row;
}
.form-vert label { 
  display: table-cell;
  vertical-align: top;
  padding-top:    6px;
  padding-bottom: 6px;
}
.form-vert input { 
  display: table-cell;
}

/* ========================================================================= */
/* Clase:  miniform. */
/* ========================================================================= */

.miniform input[type="submit"] {
  background:#dcdcdc;
  padding: 3px 6px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 2px;
  border-radius: 5px; 
}
.miniform input[type="submit"]:focus {
  background:#bebebe;
  padding: 3px 6px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 2px;
  border-radius: 5px; 
}

.miniform input[type="button"] {
  background:#dcdcdc;
  padding: 3px 6px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 2px;
  border-radius: 5px; 
}
.miniform input[type="button"]:focus {
  background:#bebebe;
  padding: 3px 6px; 
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 2px;
  border-radius: 5px; 
}



/* ========================================================================= */
/* Clase:  navtop. */
/* ========================================================================= */

.navtop {
  background-color: #0000A0;
  height: 80px;
  width: 100%;
  border: 0;
}
.navtop div {
  background-color: #0000A0;
  display: flex;
  margin: 0 auto;
  height: 100%;
}
.navtop div h1, .navtop div a {
  background-color: #0000A0;
  display: inline-flex;
  align-items: center;
}
.navtop h1 {
  flex: 1;
  font-size: 20px;
  padding: 20px;
  margin: 0;
  color: #eaebed;
  /* font-weight: normal; */
  font-weight: bold;
}
.navtop div a {
  padding: 0 20px;
  text-decoration: none;
  /* color: #c1c4c8; */
  color: #f0f0f0;
  font-weight: bold;
}
.navtop div a i {
  padding: 2px 8px 0 0;
}
.navtop div a:hover {
  color: #c0c0c0;
}

/* ========================================================================= */
/* Clase:  output. */
/* ========================================================================= */

.output {
  /* background-color: #f3f4f7; */
  margin: 0 0;
  font-size: 12px;
}

/* ========================================================================= */
/* Clase:  alert. */
/* ========================================================================= */

.alert {
  color:#ff0000;
  background-color:#f8d7da;
  border-color:#f5c6cb;

  margin-bottom:1rem;
  padding:.75rem 1.25rem;
  border:1px solid transparent;
  border-radius:.25rem
}

/* ========================================================================= */
/* Clase para mis tablas de informes. */
/* ========================================================================= */

table { 
  border-spacing: 0px;
}
.border-top td, .border-top th {
  border-top: 1px solid;
}
.border-bottom td, .border-bottom th {
  border-bottom: 1px solid;
}
.tdright {
  text-align: right;
  margin-right: 1em;
  padding:3px 10px 3px 10px; /* top right bottom left */
}
.tdleft {
  text-align: left;
  margin-left: 1em;
  padding:3px 10px 3px 10px; /* top right bottom left */
}
.tdcenter {
  text-align: center;
  margin-left: 1em;
  padding:3px 10px 3px 10px; /* top right bottom left */
}

/* ========================================================================= */
/* Clase para mis tablas de users, riders, tests, and series. */
/* ========================================================================= */

.table-users table { 
  border-spacing: 0px;
}
.table-users td {
  background-color: #eaf2f8;  /* Azul claro. */
}

.table-riders table { 
  border-spacing: 0px;
}
.table-riders td {
  background-color: #fef9e7; /* Amarillo claro. */
}

.table-tests table { 
  border-spacing: 0px;
}
.table-tests td {
  background-color: #eafaf1;  /* Verde claro. */
}

.table-series table { 
  border-spacing: 0px;
}
.table-series td {
  /* background-color: #fdfefe; Gris claro. */
  background-color: #ffffff; /* Gris claro. */
}

.table-files table { 
  border-spacing: 0px;
}
.table-files td {
  /* background-color: #fdfefe; Gris claro. */
  background-color: #ffffff; /* Gris claro. */
}