/*?********************************LICENSE**************************************** 
 * 
 * Copyright 1992-2016 PROYECTO PNUD-SIGOB
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *   http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * *****************************************************************************
 * Developed by:
 * Alejandro Genovesi Calzada (Coordination and development)
 * Arturo Martínez Mardones
 * Romualdo Rijo Disla
 * Alejandro Lamónaca Downes
 * *****************************************************************************
 * Este software utiliza software de terceros y la lista de ellos y sus licencias
 * se incorporan en el directorio "Componentes de terceros"
 ********************************END LICENSE************************************?*/
/*-----------------------------------------------------------
  Estilos comunes en formularios del sistema
-------------------------------------------------------------*/

/* paso de un proceso asistido, por ejemplo en cambio de contraseña (paso 1, paso 2, paso 3) */
.paso_proceso {
  width: 30px;
  background-color: #A3C1E0;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  font-weight: bold;
  border-radius: 4px;
}

/* DIV que contiene un formulario de datos */

div.formulario {
  padding: 0px;
  border: 0px;
  margin: 0px;
  background-color: #fff;
  width: auto;
  height: auto;
}

  div.formulario h3 {
  font-size: 12px;
  padding: 4px 2px;
  color: #0066cc;
  height: 18px;
  border-bottom: solid 1px #abc1de;
}

  div.formulario hr {
  clear: both;
  border: 0px;
  border-bottom: 1px solid #abc1de;
  height: 1px;
  margin: 0px 4px 6px 4px;
  padding: 2px 0px;
}

  div.formulario fieldset {
  border: 1px solid #abc1de;
  border-radius: 4px 4px 4px 4px;
  margin: 4px 0px;
  margin: 0px\9; /* sólo IE */
  padding: 6px\9; /* sólo IE */
}

    div.formulario fieldset > legend {
  font-size: 12px;
  color: #0066cc;
  margin-bottom: 6px\9; /* sólo IE */
}

    div.formulario fieldset em {
  display: inline-block;
  line-height: 140%;
  margin-bottom: 2px;
  font-style: normal;
  font-size: 12px;
  color: #333;
}

/* UL que contiene una lista de campos de información, usado para diseñar formularios de layout líquido. El layout es de la forma:
  <ul>
    <li>
      <label>CAMPO</label>
      <var><EDITOR DE CAMPO></var>
    </li>
  </ul>
  
  donde cada ítem LI flota en la lista, para acomodarse de forma automática según su tamaño
*/
ul.lista_campos {
  margin: 0px 2px;
  padding: 0;
}

  ul.lista_campos > li {
  margin: 0px 10px 0px 2px;
  min-height: 26px;
  height: auto;
  display: block;
  width: auto;
  float: left;
  list-style-type: none;
  padding: 0;
  border: 0px;
}

    ul.lista_campos > li.seccion {
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 2px 4px 0px;
  color: #0066cc;
  height: 16px;
  min-height: 16px;
}

/* estilo aplicado al título del campo correspondiente a un ítem */
    ul.lista_campos > li > label {
  float: left;
  width: 112px;
  height: 20px;
  text-align: right;
  border: 1px solid #BCCBDD;
  color: #000;
  background-color: #D7DDE1;
  padding-right: 2px;
  line-height: 20px;
}

/* contenedor de editor de campo de datos */
    ul.lista_campos > li var {
  display: block;
  min-height: 20px;
  height: auto;
  width: auto;
  margin: 0px 0px 2px 2px;
  padding: 0px;
  float: left;
}

/* DL usado para navegación de secciones y operaciones de un formulario. Su DT tiene el control de navegación y el DD tiene
el área cliente donde se despliegan las secciones de información */
dl.navegacion {
  position: absolute;
  left: 2px;
  right: 2px;
}

  dl.navegacion > dt {
  padding: 0px;
  border: 0px;
  width: 200px;
  height: 100%;
  margin: 0px;
  float: left;
}

  dl.navegacion > dd {
  position: absolute;
  top: 0px;
  left: 200px;
  right: 2px;
  bottom: 0px;
  padding: 0px 2px;
}

/* estilo de panel de título de la sección de información activa en un formulario. Generalmente va dentro del DD del DL
de navegación */
.pnlTituloSeccion {
  background-color: #C3D8F1;
  background-image: url(imagenes/fondo_panel.png);
  background-repeat: repeat-x;
  background-position: 0 -1px;
  border: solid 1px #688CAF;
  color: #00156E;
  height: 22px;
  margin-bottom: 2px;
  overflow: hidden;
  padding: 0;
  padding-top: 4px;
  text-decoration: none;
  text-indent: 10px;
  width: 100%;
  font-size: 10pt;
}

/* estilo de panel de resumen de validación de campos obligatorios en un formulario. */
.resumen_validacion {
  background-color: #FFFFCC;
  background-image: url("imagenes/warning.png");
  background-position: 8px 8px;
  background-repeat: no-repeat;
  border: 1px solid #c0c0c0;
  color: Red;
  font-weight: bold;
  margin-bottom: 6px;
  margin-top: -6px;
  padding: 6px 6px 6px 40px;
  clear: both;
}

/* panel de botones de comando, usado para botones Agregar/Guardar/Cancelar al editar un registro dentro de una RadGrid
usando Template para el EditForm */

.pnlBotonesComando {
  width: 100%;
  margin-top: 4px;
  background-color: ButtonFace;
  color: ButtonText;
  height: 40px;
  text-align: right;
  z-index: 10;
}

  .pnlBotonesComando A {
  margin: 5px 6px 2px 0px;
}

/* Telerik RadComboBox: cuando usa checkboxes las despliega muy desplazadas de sus etiquetas, este estilo corrige eso. */

.RadComboBoxDropDown .rcbCheckBox {
  position: relative;
  top: -2px;
  margin-right: 3px;
}

/* Telerik RadTabStrip: se despliega sin color de fondo. El tema Office2007 tiene un azul de fondo demasiado fuerte. */

.RadTabStrip_Office2007 .rtsLevel {
  background-color: Transparent !important;
}

.RadTabStrip_Office2007 .rtsLevel1 {
  background-color: Transparent !important;
}


/*-----------------------------------------------------------
  Editores de campos
-------------------------------------------------------------*/

/* editores de texto para campos de información: tienen bordes redondeados y se destaca el editor que tiene el foco
usando un borde más grueso */

.txtEdit {
  border-radius: 2px;
  border: 1px solid #abc1de;
  padding: 2px;
  font-family: 'trebuchet MS';
  font-size: 11px !important;
  min-height: 16px;
}

html body .RadInput_Windows7 .riTextBox, html body .RadInputMgr {
  border-radius: 2px;
}

html body .RadInput_Windows7 .riTextBox {
  height: 15px;
  padding: 2px !important;
}

.txtEdit:focus, html body .RadInput_Office2007 .riFocused, html body .RadInput_Focused_Office2007 {
  border: 2px solid #2f8fef !important;
  padding: 1px !important;
}


/* editores checkbox y radiobutton: tienen una altura fija, con su label centrada verticalmente respecto al checkbox */

span.chkCampo, span.radCampo {
  font-style: normal;
  height: 20px;
  margin: 0px;
  margin-left: 7px;
}

  span.chkCampo input, span.radCampo input {
  position: relative;
  top: 4px;
}

  span.chkCampo label, span.radCampo label {
  margin-left: 4px;
  position: relative;
  top: 1px;
}


.bloque {
  display: inline-block;
}

/* botón de más información "...": se despliega centrado respecto al editor que le precede */

a.btnMasInformacion {
  margin-left: 2px;
  position: relative;
  top: -1px;
}

/* SPAN que despliega el color de un tipo de tarea/evento/solicitud. Funciona junto a los estilos .colorXXXX */

.spanTipo {
  display: inline-block;
  width: 22px;
  height: 16px;
  border: solid 1px #ccc;
}

/* ABBR que despliega la descripción de un tipo de tarea/evento/solicitud: se despliega centrado respecto a su recuadro de color */

li > abbr, td > abbr {
  height: 16px;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
  position: relative;
  left: 2px;
  top: -4px;
}

li > abbr {
  display: inline-block;
  width: 180px;
}

td > abbr {
  display: inline;
  width: auto;
}

.RadInput_Windows7 span.riSingle {
  height: 22px !important;
}

.RadInput_Windows7 .riTextBox[type="text"] {
  height: 100% !important;
}

.formulario.container-fluid {
  padding-right: 8px;
  padding-left: 8px;
}

.ficha_datos .input-group-addon {
  color: #1e395b;
  background-color: #f0f6fa;
  border: 1px solid #c1cdde;
  min-width:90px;
  text-align:right;
}

.ficha_datos .form-group {
  margin-bottom: 8px;
  min-height: 38px; /* evitar problemas de posicionamiento izq-der por diferencias en height */
}

.formulario .titulo_seccion {
  padding: 6px;
  margin-bottom: 5px;
  font-size:16px;
}

.formulario .RadInput .riTextBox,
.formulario .RadAutoCompleteBox .racInput,
.formulario .form-group .RadComboBox_Bootstrap .rcbInner input {
  font-size: 14px !important;
}

.formulario .form-group .RadInput_Bootstrap .riTextBox{
  border-radius:0px;
}

.formulario .form-group .RadComboBox_Bootstrap .rcbInputCell,
.formulario .form-group .RadComboBox_Bootstrap .rcbInner,
.formulario .form-group .RadAutoCompleteBox .racTokenList {
  /*border-top-left-radius: 0;
  border-bottom-left-radius: 0;*/
  border-radius:0;
}

.formulario .RadInput_Bootstrap.RadInputHovered .riTextBox,
.formulario .RadInput_Bootstrap.RadInputHovered .riSelect,
.formulario .RadInput_Bootstrap.RadInputHovered .rcSelect,
.formulario .RadInput_Hover_Default {
  border-color: #adadad;
  color: #333;
  background-color: #fff;
}

.formulario .RadInput_Bootstrap .riTextBox,
.formulario .RadInputMgr_Bootstrap {
  padding: 6px 12px;
}

.formulario .RadInput .riTextBox,
.formulario .RadInputMgr {
  border-width: 1px;
  border-style: solid;
  vertical-align: middle;
}

.formulario .RadInput .riTextBox {
  height: inherit;
  width: 100%;
  font: inherit;
  background: none transparent;
  outline: 0;
}

.formulario .RadInput a:before {
  font: 16px/1 "WebComponentsIcons";
  vertical-align: middle;
}

.formulario .rcCalPopup:before {
  content: "\e108";
}

.formulario .RadInput a:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.formulario .RadComboBox_Bootstrap .rcbActionButton {
  border-color: #ccc;
  color: #333;
  background-color: #fff;
  padding: 6px;
  border-radius: 0 4px 4px 0;
  height: auto;
}

.formulario .form-group .input-group-btn:empty {
  display: none;
}

.formulario .input-group-addon span.chkCampo label, .formulario .input-group-addon span.radCampo label {
  font-size: 13px;
  font-weight: normal;
}