﻿linkButton,
.linkButtonDefault {
   background-color: transparent;
   text-decoration: none;
}

.linkButtonMenu,
.linkButtonMenuFondoTransparente {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   font-size: 1rem;
   text-decoration: none;
}

   .linkButtonMenu:hover,
   .linkButtonMenuFondoTransparente:hover {
      background-color: var(--colorParaFondoControles);
      color: var(--colorParaTextoControles);
      text-decoration: none;
   }

.linkButtonMenuFondoTransparente {
   background-color: transparent;
}

   .linkButtonMenuFondoTransparente:hover {
      background-color: transparent;
      text-decoration: none;
   }

input[type="text"],
input[type="password"],
textarea,
textBox,
.textBoxDefault,
.textBox {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   border-radius: var(--borderRadiusTextBox);
   Text-align: left;
   border: var(--bordeGeneral);
   min-width: 100%;
   width: 100%;
   max-width: 100%;
}

textarea {
   resize: none;
}


.textBoxReadOnly {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   Text-align: right;
}

.textBoxError {
   background-color: var(--colorParaFondoControles);
   color: var(--colorTextoAdvertencia);
   Text-align: left;
   border: var(--bordeGeneral);
   width: 100%;
}

select {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   width: max-content;
   max-width: 100%;
   text-align: left;
   border-radius: var(--borderRadiusLabel);
}

   select * {
      background-color: var(--colorParaFondoControles);
      color: var(--colorParaTextoControles);
   }

   select option:nth-child(2n+1) {
      background-color: var(--colorParaFondoRowNon);
      color: var(--colorParaTextoRowNon);
   }

   select option:nth-child(2n) {
      background-color: var(--colorParaFondoRowPar);
      color: var(--colorParaTextoRowPar);
   }

   select option[selected="selected"] {
      background-color: var(--colorParaFondoRowSeleccionado);
      color: var(--colorParaTextoRowSeleccionado);
   }

dropDownList,
.dropDownListDefault {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   text-align: left;
   border-radius: var(--borderRadiusLabel);
}

.dropDownListConSombra {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   border: var(--bordeGeneral);
   text-align: left;
   border-radius: var(--borderRadiusLabel);
}

.dropDownListSinSombra {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   border: var(--bordeGeneral);
   text-align: left;
   border-radius: var(--borderRadiusLabel);
}

.dropDownListEmpresasSinSombra:hover {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
}

/*se requiere referenciar la clase en el Skin para que se renderize el span*/
.checkBoxEtiqueta,
.checkBoxDefault {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   border: var(--bordeGeneral);
   font-weight: normal;
   border-radius: var(--borderRadiusLabel);
   padding: 0;
   line-height: normal;
   justify-content: end;
   justify-items: end;
}

/*el label a un lado del checkbox*/
span[class="checkBoxDefault"] label {
   border: none;
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   padding: 0;
   margin-left: .2rem;
   display: inline;
   cursor: pointer;
   font-size: 1rem;
   width: 1rem;
   height: 1rem;
}

/*el label a un lado del checkbox cuando esta checked*/
span[class="checkBoxDefault"] input[checked="checked"] + label {
   border: none;
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   padding: 0;
   margin-left: .3rem;
   display: inline;
   cursor: pointer;
   font-size: 1rem;
   width: 1rem;
   height: 1rem;
}

/*el checkbox propiamente dicho*/
span[class="checkBoxDefault"] input[type="checkbox"],
span[class="checkBoxDefault"] input[checked="checked"] {
   /*appearance: none;*/
   border: var(--bordeGeneral);
   border-radius: var(--borderRadiusLabel);
   background-color: var(--colorFondoCheckBoxNo);
   color: var(--colorParaTextoControles);
   padding: 0;
   cursor: pointer;
   display: inline;
   height: 1rem;
   width: 1rem;
}

   /*el checkbox propiamente dicho cuando esta checked*/
span[class="checkBoxDefault"] input[checked="checked"] {
   /*appearance: none;*/
   border: var(--bordeGeneral);
   border-radius: var(--borderRadiusLabel);
   background-color: var(--colorFondoCheckBoxSi);
   color: var(--colorParaTextoPrincipal);
   padding: 0;
   cursor: pointer;
   display: inline;
   height: 1rem;
   width: 1rem;
}

.radioButtonListDefault {
   background-color: transparent;
   border: none;
   font-size: 1rem;
   font-weight: bold;
   padding: .3rem;
   text-align: left;
   height: 1.1rem;
   align-items: center;
   align-content: center;
   height: max-content;
   min-width: max-content;
   width: max-content;
   max-width: max-content;
   border-radius: var(--borderRadiusLabel);
}


.checkBoxItemValido {
   display: flex;
   height: 100%;
   flex-shrink: 0;
   min-height: 0;
   min-width: 100%;
   width: 100%;
   max-width: 100%;
   align-content: var( --alinenacionVerticalRenglones);
   align-items: var( --alinenacionVerticalRenglones);
   padding-bottom: .3rem;
}

span[class="radioButtonListDefault"] label {
   background-color: transparent;
   color: var(--colorParaTextoControles);
   display: inline;
   cursor: pointer;
   /*   font-size: .8rem;*/
   cursor: pointer;
   margin-right: 1rem;
}

span[class="radioButtonListDefault"] input[checked="checked"] + label {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   display: inline;
   cursor: pointer;
   font-size: 1rem;
   width: 1rem;
   height: 1rem;
   margin-right: 1rem;
}

span[class="radioButtonListDefault"] input {
   /*appearance: none;*/
   background-color: var(--colorFondoCheckBoxNo);
   display: inline;
   cursor: pointer;
   width: 1rem;
   height: 1rem;
   padding-left: .3rem;
}

   span[class="radioButtonListDefault"] input[checked="checked"] {
      /*appearance: none;*/
      background-color: var(--colorFondoCheckBoxSi);
      display: inline;
      cursor: pointer;
      width: 1rem;
      height: 1rem;
      padding-left: .3rem;
   }

input[type="radio"],
radioButton,
.radioButtonDefault {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   border: none;
   align-items: center;
   align-content: center;
   font-size: 1rem;
   font-weight: bold;
   padding: 0;
   padding-left: .3rem;
   padding-right: .3rem;
   height: 100%;
   border-radius: var(--borderRadiusLabel);
}

.fileUploadDefault {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   border-radius: var(--borderRadiusLabel);
}

input[type="file"] {

   /* jojo
      display: none;*/
}

hyperLink,
.hyperLinkDefault {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   color: red;
   font-size: .9rem;
   text-align: left;
   border-radius: var(--borderRadiusLabel);
}

.labelAdvertencia,
.labelRojo,
.labelAzul {
   background-color: transparent;
   color: var(--colorTextoAdvertencia);
   animation: blinker 1.5s linear infinite;
   animation-delay: 0.5s;
   animation-duration: 5s;
   font-weight: bold;
   text-align: center;
   border-radius: var(--borderRadiusLabel);
}

.labelAzul {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   border-radius: var(--borderRadiusLabel);
}

label,
.labelDefault,
.labelNotificacion,
.labelMensajes,
.labelEtiqueta,
.labelTitulo,
.labelSubTitulo {
   background-color: var(--colorParaFondoControles);
   color: var(--colorParaTextoControles);
   padding: .3rem;
   font-size: 1rem;
   font-weight: normal;
   text-align: left;
   border-radius: var(--borderRadiusLabel);
}

.labelNotificacion {
   text-align: center;
}

.labelMensajes {
   color: var(--colorTextoNotificacion);
   padding: .3rem;
}

.labelEtiqueta {
   background-color: transparent;
   font-weight: bold;
   border: var(--bordeGeneral);
   border-radius: var(--borderRadiusLabelEtiqueta);
   padding-bottom: 0;
}

.labelTitulo {
   font-size: 1.2rem;
}

.labelSubTitulo {
   font-size: 1.1rem;
}

.updatePanel {
   min-width: 100%;
   width: 100%;
   max-width: 100%;
}