body {
    font-family:Helvetica;
    margin: 0px;
    height:600px;
}

header{
    
    background-color:#579ddb;

    width:100%;
    position:fixed;
    height:55px;
    top:0px;
}

input::-webkit-calendar-picker-indicator {
  display: none;
}
::-webkit-input-placeholder {
 font-size: 14px;
 font-style:normal;
 
}
#txtUsuario, #txtContraseña,#txtCaptcha {
                      
            padding-left: 10px;           
            border:solid;
            border-width:1px;
            border-color: #cacaca;
            color: gray;
}
#txtUsuario:focus, #txtContraseña:focus, #txtCaptcha:focus {
        outline: 0;
        border-width: 1px;
        border-color: #35baf6;
}
.usuario {
    margin-top:10px;
    background: url(../images/login/usericon.svg) no-repeat scroll right;
     background-position: 98% 50%;
    background-size:20px;
    height:40px;
    width: 388px;
    font-size:18px;
    color:gray;
}
.callcenter {
    margin-top:10px;   
    height:40px;
    width: 400px;
    font-size:18px;
    background-position: 385px 10px;
    background-image: url(../images/form/trigger_uno.png);
    background-repeat: no-repeat;
    border: solid;
    border-width: 1px;
    border-color: rgb(202, 202, 202);
    font: 300 13px/21px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    color:gray;
}

.usuario:focus {
   
   
}
.contrasena{
    background: url(../images/login/contra.svg) no-repeat scroll right;
    margin-right:5px;
    background-size:18px;
      background-position: 98% 50%;
     height:40px;
    width:  388px;
    margin-top:10px;
    font-size:18px;
}
.contrasena:focus {
 
}
.warning{
    border-color: #e1485a;
    border-width:2px;
}
.captcha{
     width:30px;
}
.captcha:focus{
    
  
}
.main{
    margin-top:150px;
}
.logo {
  display: block;
  margin: 0 auto;
 width:250px;
}
.form {
  width: 400px ;
  margin: 0 auto;
}
label{
    color:gray;
}
p{
    color: #35baf6 ;
}

a {
    color: #35baf6 ;
    text-decoration: none;
}
a:visited {
    
}
label:focus{
    border-width: 1px;
    border-color: #35baf6;
}
#OlvidasteContrasena:hover {
    cursor:pointer;
    text-decoration:underline;
}
.refrescar{
    cursor:pointer;
    margin-top:5px;
    margin-left:10px;

}
.btn{
    border:0px;
    width:100px;
    height:35px;
    color:white;

}
.btnAceptar{
   background-color:#579ddb;
}
.btnAceptar:hover{
    cursor:pointer;
}
.btnAceptar:focus{
  
   background-color: #2c80cc;
}
.btnCancelar:hover{
    cursor:pointer;
}
.btnCancelar{
   background-color:#e1485a;
}
.btnCancelar:focus{
   background-color:#cd2236;
}
#txtCaptcha {
     height:35px;
}
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:45px;
   width:100%;
   background:#e4e4e4;
  
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

.treegridindent {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

.x-grid3-hd.sort-asc .x-grid3-hd-inner:after{
    border: 0px none;
}

.x-grid3-hd.sort-desc .x-grid3-hd-inner:after{
    border: 0px none;
}

input[type=checkbox].x-tree-node-cb {
    position: absolute;
    z-index: 10;
    opacity:0;
    width:16px;
    height:16px;
    left: -9999px;
    top: 2px;
}

input[type=checkbox] + label:before {
    content:' '; 
    background: url('../images/form/checkbox.png')no-repeat;
    background-position: 0px 1px;
    height: 16px;
    width: 16px;
    display:inline-block;
    /*float: left;*/
    clear: left;
    position: relative;
    top: 2px;
    padding-left: 0;
}

input[type=checkbox]:focus + label:before
{
    background-position: -15px 1px;
}

input[type=checkbox]:checked + label:before {
    background-position: 0px -14px;
}

input[type=checkbox]:checked:focus + label:before{
    background-position: -15px -14px;
}

input[type=checkbox]:indeterminate + label:before {
    background-position: 0px -29px;
}

input[type=checkbox]:indeterminate:focus + label:before{
    background-position: -15px -29px;
}

input[type=checkbox]:checked:hover + label:before{
    background-position: -15px -14px;
}

input[type=checkbox]:indeterminate:hover + label:before{
    background-position: -15px -29px;
}

input[type=checkbox]:hover + label:before{
    background-position: -15px 1px;
}

.messagepop {
    /*background-color: #FFFFFF;*/
    /*border: 1px solid #999999;*/
    cursor: default;
    display: none;
    margin-left: 410px;
    margin-top: -50px;
    position: absolute;
    text-align: left;
    background-color:#cd2236;
    z-index: 50;    
     background-repeat: no-repeat;
     border-radius: 5px 5px 5px 5px;
  }
.messagepop:focus{
 display: block;
}

.messagecaptcha {
    /*background-color: #FFFFFF;*/
    /*border: 1px solid #999999;*/
    cursor: default;
    display: none;
    margin-left: 60px;
    margin-top: 50px;
    position: absolute;
    text-align: left;
    background-color:dimgray;
    z-index: 50;    
     background-repeat: no-repeat;
     border-radius: 5px 5px 5px 5px;
  }

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
    margin: auto ;
  top: 25%;
  font-family: Helvetica;
  padding: 0px;
  background: #fff;
  border: 2px solid #5FA2DD !important;
  border-radius: 3px 3px 0px 0px;
  vertical-align: middle;
  width: 300px;
  position: relative;
  transition: all 5s ease-in-out;
}
.popup span {
  margin-top: 0;
  color: white;
  font-family: Helvetica;
  
}

.popup .close {
  position: absolute;
  top: 0px;
  right: 10px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: white;
}
.popup .close:hover {
  /*color: #06D85F;*/
}
.popup .content {
  max-height: 30%;
  padding:25px;
  overflow: auto;
}
.ocultarform{
    display: none;
}
.mostrarform{
    display: block;
}
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
datalist{
    color:gray;
}

 /*.f2,*/ .f3, .f4, .f5, .f6, .f7, .f8, .f9 {
  -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   font-size: 11px;
   min-width: 300px;
   /*vertical-align: top;*/
 }
 .contenedor_referencias{
     vertical-align:middle;
 }

.f1, .f3, .f6, .f9 {
    text-align: left;
 }

.f1{
    /*margin-top: 5px;*/
    color: #404040;
    width: 34%;
    font-size:11px; 
    display:table;
    height: 100%;
    float: left;
}
.f11{
    padding: 0; 
    display: table-cell; 
    vertical-align: middle;
}

.f2 {
    color: #404040;
    text-align: center;
    margin-top: 5px;
 }

.f3 {
        /*width: 65%;*/
        display: table; 
        float: right; 
        height: 100%;
}

.f6 {
    /*color: gray;*/
    color: #404040;
    margin-top: -5px;
}

.f9 {
    /*color: gray;*/
    color: #404040;
    margin-top: -10px;
}

.row_referencias span,.row_referencias_header span {
    max-width: 170px;
    width:30%;
    -o-text-overflow: ellipsis;
	text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    display: inline-block;
}

.row_referencias {
    /*color: grey;*/
    color: #404040;
}
.contenedor_referencias{
    color: #404040;
    padding: 0;
    display: table-cell; 
    vertical-align: middle;
}
.contenedor_referencias .row_referencias,.contenedor_referencias .row_referencias_header {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    flex-flow:nowrap;
}
.contenedor_referencias .row_referencias span, .contenedor_referencias .row_referencias_header span {
    flex-grow: 1;
    padding-right: 5px;
}
#spanlblReferenciaTelefono, #spanlblReferenciaCorreo{
    font-weight: bold;
}
#spanlblReferenciaContacto, #spanReferenciaContacto1, #spanReferenciaContacto2, #spanlblReferenciaCorreo, #spanlblReferenciaTelefono {
    flex-grow:0;
    padding-right: 5px;
    width:55px;
}

#spanReferenciaTelefono1,#spanReferenciaTelefono2{
    flex-grow:0;
    padding-right: 5px;
    width:85px;
}
#spanReferenciaCorreo1,#spanReferenciaCorreo2{
    flex-grow:0;
    padding-right: 5px;
    width:170px;
}
#spanReferenciaTelefono2,#spanReferenciaCorreo2 {
    padding-left: 60px;
}
.columnaFooter {
    width: 30%;
}

.tablaFooter td,.tablaFooter tr, .tablaFooter th {
    padding: 0px;
    border-width:0px;
    height:5px;
}

.row_referencias div:hover {
  position: relative;
}

.row_referencias div:hover:before {
  content: attr(tooltip);
  border: 0 none;
  background-color: rgb(116,116,116);
  border-radius: 3px;
  box-shadow: 0px 2px 5px -1px #888888;
  font: normal 12px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
  color: #d9d9d9;
  padding: 3px !important;
  position: absolute;
  z-index: 1000;
  top: -8px;
  white-space: nowrap;
  /*
  height: 20px;
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: -10px;
  z-index: 1000;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);*/
}