/**************************************************
                Estilos de input
***************************************************/
textarea {
  resize: none;
}

.has-error label{
  color: #a94442 !important;
}


textarea {
    font-size: 16px !important;
    line-height: 16px !important;
    padding: 10px 0 !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;
    background: none !important;
}

textarea:focus, {
    outline: none !important;
}

/**************************************************
              Input Text EMAIL - GMAIL
***************************************************/
.input-mail input{
  padding-right: 35%;
}

.mail{
  position: absolute;
  top: 20px;
  right: 10%; 
}

/**************************************************
    Input Password - Mostrar y ocultar contraseña
***************************************************/
.input-password input{
  padding-right: 15%;
}

.show-password{
  position: absolute;
  top: 20px;
  right: 7%; 
}
.input-password span{
    cursor: pointer;
    z-index: 1;
}


/**************************************************
                Estilos de botones
***************************************************/

.btn {
  border: none;
  padding: 10px 20px;
  border-radius: 3px !important;
  letter-spacing: 0.06em;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn:hover {
  color: #eee;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}

.btn-default:hover {
  color: #333;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}

.boton-accion {
  padding: 0px;
  margin-left: 3px;
}

.boton-accion > span{
  padding: 9px;
}

.btn-secondary{
  color: #f4f4f4 !important;
}

.modal-footer > .btn-secondary{
  color: #223265 !important;
}



/******************************************************
                Estilo Input File
******************************************************/
.file-input {
  display: inline-block;
  text-align: left;
  background: #fff;
  /*padding: 16px;*/
  width: 100%;
  position: relative;
  border-radius: 3px;
}

.file-input > [type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

.file-input > .button {
  display: inline-block;
  cursor: pointer;
  background: #223265;
  padding: 5px 10px;
  margin-right: 8px;
  color: #fff;
  font-size: 15px
}

.file-input:hover > .button {
  background: #1d2b58;
  color: white;
}

.file-input > .label {
  color: #333;
  white-space: nowrap;
  opacity: .7;
}

.file-input > .labelRecaudo{
  color:#000;
  font-weight: bold;
}

.file-input.-chosen > .label {
  opacity: 1;
}

.input-file-line{
    content: '';
    height: 2px;
    width: 0;
    bottom: 0;
    position: absolute;
    background-color: #223265;
    position: relative;
    display: block;
    width: 100%;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    transition: 0.3s ease all;
}

/***********************
      ToolTip
************************/
.texto-tooltip:link {color: #000;}
.texto-tooltip:visited {color: #000;}
.texto-tooltip:active {color: #000;}
.texto-tooltip:hover {color: #000;}

/***********************
      Modal
************************/
.modal-header , .modal-footer {
    background-color: #f6f6f6;
}


/***********************
      Tabla
************************/

table.detail-view tr.odd{
  background: #f1f1f1 !important;
}

table.detail-view tr.even{
  background: #fff !important;
}

.tabla-title {
  background-color: #223265;
  text-align: center;
  padding: 7px;
  color: white;
  border-radius: 7px;
}

.tabla-borde {
  border: 1px solid #223265;
  padding: 8px;
  border-radius: 7px;
}



/***********************
  CARD
************************/
.card-header{
    padding: 0.4em !important;
}

/*.card-header > h4{
  margin-bottom: 0px !important;
}
*/
/*.card-title{
    padding: 10px !important;
    font-size: 2.1em !important;
  }*/


/************************
        Input Error
**************************/
.help-block{
  color: #a94442 !important;
}

/**Al quitar este código se removerá el color roja de la línea de error en los input ***/
.has-error .floating-label .form-control,
.has-error .bootstrap-select .dropdown-toggle{
  border-color: #a94442 !important;
  box-shadow: inset 0 -2px 0 -1px #a94442 !important;
  outline: 0;
}

/** FIN Al quitar este código se removerá el color roja de la línea de error en los input ***/


/** Color del asterisco para los campos que son requeridos */

.floating-label > label >span{
  color: #820000;
}

/** Color para los help   **/
.floating-label > span{
  color: #756262 !important;
}

.has-error > .floating-label > span{
  color: #a94442 !important;
}

/*****************************
        Read-only
*****************************/
.form-control[readonly]{
  color: rgba(47, 47, 47, 0.92) !important;
}


/*****************************
        Botones acciones
*****************************/
.btn-acciones:hover{
  background-color: #e2e2e2;
}

/*****************************************
        deshabilitar boton guardar
*****************************************/
.btn-disabled{
  pointer-events: none;
  background: rgba(0, 0, 0, .12) !important;
  color: rgba(0, 0, 0, .26) !important;
}

.btn-disabled:after{
  content: "...";
}



/***********************************************
                  TOOLTIP
**********************************************/
  /* Add this attribute to the element that needs a tooltip */
[data-petro],
[data-tooltip] {
  position: relative;
  z-index: 49;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-petro]:before,
[data-petro]:after,
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-petro]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 225px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: url('../images/petro-icon.png') " " attr(data-petro);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 225px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content:attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}


/* Triangle hack to make tooltip look like a speech bubble */
[data-petro]:after,
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-petro]:hover:before,
[data-petro]:hover:after,
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


/******************************************
  Box en el inicio de los Analista
******************************/
.statistics .box{
    overflow: hidden;
  }

  .statistics .box .info{
    text-align: center;
    width: auto;
    margin-left: 10px;
  }

  .statistics .box .info h3{
    margin: 5px 0 5px;
    display: inline-block;
  }

  .statistics .box > i{
    float: left;
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    margin-top: 5px;
    margin-left: 5px;
  }



/****************************************
          HEADER PANEL
**************************************/
.header-panel{
  background-color: #fff; 
  color: #000;
  margin-bottom: 10px;
  border-radius: 9px;
}



/****************************************
          BORDES EN LOS CARD
**************************************/
.card{
  border-radius: 9px !important;
}

.card-header{
  border-radius: 9px 9px 0px 0px !important;
}

/****************************************
          BORDES MODAL
**************************************/
.modal-header:first-child{
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

/****************************************
          BORDES EN LOS ALERT
**************************************/
.alert{
  border-radius: 7px !important;
}


/**********************************************
                  REPORTE
****************************************************/
@media screen and (max-width: 767px){
  .chart-container{
    width: 100%;
  }
}

@media screen and (min-width: 768px){
  .chart-container{
    width: 70%;
  }
}










/**********************************************
                  REPORTE
****************************************************/
@media screen and (max-width: 600px){
  #todas_observaciones{
    margin: 0 !important;
  }
}




/****************************************
          BORDER RADIUS EN TABLAS
**************************************/
.redondear-tablas-top{
  border-radius: 9px 9px 0px 0px;
}