*, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
 
body {
   font-family: 'Nunito', sans-serif;
   color: #384047;
   top: 0;
/*   background: #003e65; */
}
 
#cabezote {
    margin: -30px auto 0px;
    padding: 0px;
    text-align: center;
    width: 60%;
}

#cabezote img {
    max-width: 100%;
    height: auto;
}
 
h1 {
   margin: 0 0 30px 0;
   text-align: center;
   font-size: 2em;
   text-transform: uppercase;
   color: #003e65;
}
 
h2 {
   margin: 0px 0 0px 0;
   text-align: center;
   color: #7F003A;
   text-transform: uppercase;
}
 
form.borde {
   position: relative;
   width: 60%;
   margin: -10px auto;
   padding: 10px 20px;
   background: #fff;
   border-radius: 8px;
   border: 0px solid black;
   box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2), 0px 0px 8px 3px rgba(0, 0, 0, 0.2);
   height: auto;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="file"],
textarea,
select {
   background: rgba(255,255,255,0.1);
   border: none;
   font-size: 16px;
   height: 32px;
   margin: 0;
   outline: 0;
   padding: 0px 3px;
   background-color: #ffffff;
   color: #8a97a0;
   box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
   margin-bottom: 30px;
   border: 1px solid #CBCBCB;
}
 
input[type="radio"],
input[type="checkbox"] {
   margin: 0 4px 8px 0;
}
 
select {
   padding: 6px;
   border-radius: 2px solid red;
}
 
.selectlargo {
    overflow-wrap: break-word;
}
 
button {
   padding: 19px 39px 18px 39px;
   color: #FFF;
   background-color: #00a0dd;
   font-size: 18px;
   text-align: center;
   font-style: normal;
   border-radius: 5px;
   width: 200px;
   border: 0px solid #3ac162;
   box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
}
 
button:hover {
    background-color: #cccccc;
    color: #00a0dd;
}
 
.botonenviar {
    margin: auto;
    text-align: center;
}

fieldset {
    position: relative; 
    float: left;
    margin: 10px 0px 30px 0px;
    border: none;
    width: 45%;
}
 
fieldset.full {
    position: relative; 
    float: left;
    margin: 10px 0px 30px 0px;
    border: none;
    width: 90%;
}
 
legend {
    font-size: 1.4em;
    margin-bottom: 10px;
    display: block;
    color: #7F003A;
}
 
label, .descripcion {
    /*display: block;*/
    margin-bottom: 8px;
}
 
label.light, .descrip_rb {
   font-weight: 300;
   display: inline;
}
 
.number {
   background-color: #009FE3;
   color: #fff;
   height: 30px;
   width: 30px;
   display: inline-block;
   font-size: 0.8em;
   margin-right: 4px;
   line-height: 30px;
   text-align: center;
   text-shadow: 0 1px 0 rgba(255,255,255,0.2);
   border-radius: 100%;
}
 
p.clear {
    clear: both;
}
 
 
/*** BOTON UPLOAD ***/
.it .btn-orange
{
    background-color: blue;
    border-color: #777!important;
    color: #777;
    text-align: left;
    width:100%;
}
.it input.form-control
{
     
    border:none;
    margin-bottom:0px;
    border-radius: 0px;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
}
.it .form-control:focus
{
    border-color: #ff4d0d;
    box-shadow: none;
    outline: none;
}
.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

/**** HABEAS DATA  ****/
 
.habeasdata {
    background-color: #e6e6e6;
    /*border-color: red!important;*/
    color: #777;
    text-align: justify;
    font-size: 1.1em;
    width:100%;
    padding: 5px 20px;
    line-height: normal;
    margin-bottom: 20px;
    border-radius: 5px;
}

div.habeasdata input {
    text-align: center !important;
}  
 
.parrafo {
    text-align: justify;
    font-size: 0.9em;
    width:100%;
    padding: 3px 10px;
    line-height: normal;
    margin-bottom: 10px;
    border-radius: 5px;
}

div.parrafo input {
    text-align: center !important;
}  
 
/*** OTROS ***/

.espacio {
    height: 20px; 
}
 
.espacio2 {
    height: 10px; 
}
 
:read-onlySSSSSS { 
    background-color: #cccccc;
    border: 0px;
}
 
/*** LABEL ***/

.div1label {
    position: relative;
    float: left;
    width: 100%;
    padding: 0px;
    text-align: left;
    border: 0px solid orange;
}
 
.div2input {
    /*position: relative;*/
    width: 100%;
    padding: 0px;
    border: 0px solid green;
}
 
textarea {
    width: 100%;
    height: 100px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #cbcbcb;
    border-radius: 4px;
    background-color: #ffffff;
    /*resize: none;*/
}
 
.input1 {
    width: 25%;
    border: 1px solid #cccccc;
}

.input2 {
    width: 50%;
    border: 1px solid #cccccc;
}

.input3 {
    width: 100%;
    border: 1px solid #cccccc;
}
 
.col1 {
    position: relative;
    float: left;
    padding: 1%;
    width: 50%;
    border: 0px solid red;
    margin: -15px 0px 0px 0px;
}
 
.col2 {
    position: relative;
    float: left;
    padding: 1%;
    width: 100%;
    border: 0px solid blue;
    margin: -15px 0px 0px 0px;
}
 
div.col1 textarea {
    width: 100%;
}

.col3 {
    position: relative;
    float: left;
    padding: 1%;
    width: 33%;
    border: 0px solid blue;
    margin: -15px 0px 0px 0px;
}

body form div.col2 div.div2input label {
	position: relative:
	float: left;
	border: 0px solid blue;
	display: block;
	text-align: justify;
	font-size: 0.85em;
	line-height: 130%;	
} 

/***** ESTILOS INTERNOS PARA ZONAS ADMINISTRATIVAS DE LAS APLICACIONES *****/
 
.ColumnaTitulo {
    font-weight: bold;
    text-align: center;
    border: 0px;
    padding: 5px
    margin: 0px;  
}
 
table tr td a:link, table tr td a:visited {
    background-color: #D1007C;
    padding: 2px 5px;
    text-decoration: none;
    font-size: 0.75em;
    color: #ffffff;
}
 
table tr td a:hover {
    background-color: #95dfab;
    color: #ffffff;
    text-decoration: none;  
}
 
table {
    font-size: 0.80em;
}
 
td {
    border: 1px dotted #cccccc;
}

/***** IDARTES *****/
 
a.agregar:link, a.agregar:visited {
    background-color: #D1007C;
    padding: 2px 5px;
    text-decoration: none;
    font-size: 0.55em;
    color: #fff;
}
 
a.agregar:hover {
    background-color: #FF4CB3;
    color: #80003A;
    text-decoration: none; 
    font-size: 0.55em; 
}
 
table {
    font-size: 0.80em;
}
 
td {
    border: 1px dotted #cccccc;
}

/*** DIRECCION ***/

.contenedordireccion {
	position: relative;
	border: 0px solid red;
	background-color: #fff;
}

.divdireccion {
    position: relative;
    float: left;
    padding: 3px;
    border: 0px dotted #cccccc;
    margin: 0px 1px 0px 0px;
    width: 9.5%;
}

.divdireccioncomplemento {
    position: relative;
    float: left;
    padding: 3px;
    border: 0px dotted #cccccc;
    margin: 0px 1px 0px 0px;
    width: 23%;
}

.anchoDireccion {
    position: relative;
    float: left;
    padding: 1%;
    width: 100%;
    border: 1px dotted #cccccc;
    margin: 0px 1px 0px 0px;
    font-size: 0.80em;
}

.anchoDireccionComplemento {
    position: relative;
    float: left;
    padding: 1%;
    width: 100%;
    border: 1px dotted #cccccc;
    margin: 0px 1px 0px 0px;
    font-size: 0.80em;
}

.ejemploDireccion {
	text-align: center;
	font-size: 0.75em;
	color: #565656;
	font-style: italic; 
	font-weight: bold;
}

.contenedordireccion .divdireccion .div1label {
	text-align: center;
}

.complemento {
	position: relative;
	top: -20px;
	width: 100%;
	border: 0px solid red;
	margin: 0px 0px 0px 0px;
}

table.gestionRecorrido {
  position: relative;
  top:0px;
  border: 1px dotted #cccccc;
  border-width: 0px;
  font-size: 0.80em;
  width: 100%;
}

td.ColumnaTituloRecorrido {
  border: 0px dotted #cccccc;
}

td.tdRecorrido {
  border: 0px dotted #cccccc;
}

table.gestionRecorrido tr td.tdRecorrido input {
  width: 100%;  
}
 
/***** TOOLTIP *****/
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    color: #999999;
    font-size: 0.60em;
}
 
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #d8e5e6;
    color: #000000;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #5a898c;
    padding: 3px 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}
 
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
 
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.divDato {
    position: relative;
    float: left;
    padding: 3px;
    margin: 0px 1px 0px 0px;
    width: 50%;
}

/***** ESTILOS PARA MÓVILES *****/
 
@media only screen and (max-width: 500px) {
        #cabezote {
            margin: -10px auto 0px;
            padding: 0px;
            width: 90%;
        }  
        form.borde {
           width: 90%;
           margin: -15px auto;
           padding: 5px 10px;
           background: #fff;
           border-radius: 8px;
           border: 1px solid black;
        }
        fieldset {
             position: relative; 
             float: left;
             margin: 15px 0px 10px 0px;
             border: none;
             width: 85%;
         }
         .col1 {
             position: relative;
             float: left;
             padding: 1%;
             width: 100%;
             border: 0px solid red;
             margin: -15px 0px 0px 0px;
         }
 
         .col2 {
             position: relative;
             float: left;
             padding: 1%;
             width: 100%;
             border: 0px solid blue;
             margin: -15px 0px 0px 0px;
         }
         .anchoDireccion {
             position: relative;
             float: left;
             padding: 1%;
             width: 100%;
             border: 1px dotted #cccccc;
             margin: 0px 1px 0px 0px;
             font-size: 0.60em;
         }
         select {
             font-size: 10px;
          }
}

/***** VALIDACIONES CAMPOS *****/

input:invalid {
	border: 1px dotted red;
}

input:valid {
	border: 1px dotted green;
}

select:invalid {
	border: 1px dotted red;
}

select:valid {
	border: 1px dotted green;
}

textarea:invalid {
	border: 1px dotted red;
}

textarea:valid {
	border: 1px dotted green;
}

input[type="time"]:before {
  content: attr(placeholder) !important;
  color: #5C5C5C;
  margin-right: 0.5em;
}
input[type="time"]:focus:before,
input[type="time"].hasValue:before {
  content: "" !important;
  margin-right: 0;
}