/**
 * @file
 * Visual styles for Bartik's forms.
 */
/*form resets*/
.view-filters select.form-control{
  margin-top: 0;
}

.view-filters .button.form-submit{
  margin: 1vh;
  margin-right: 0;
  margin-left: 0;
}
select.form-control{
  background-color:#E7E9EA;
  font-size: 15px;
  border-color: transparent;
  border-radius: 2px;
}

.button.form-submit{
  background-image: none;
  color: #fff;
  background-color: #1b2a36;
  border-radius: 2px;
  border: none;
  font-size: 1rem;
  padding: 6px 20px;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.button.form-submit:hover{
  background-color: var(--rojo-incibe);
  color: #fff !important;
}

input, button, select, optgroup, textarea{
  font-size: 15px;
}

.form-item label, .form-wrapper .label{
  font-family: 'open_sanssemibold',sans-serif;
  font-size: 1em;
}

.evento-programa-envoltorio .form-type-date  label{
  display: block;
}

.views-exposed-form  label{
  display: block;
}

/* Password field. */
.password-field {
  margin: 0;
}

/* Form elements. */
form {
  margin: 0px;
  padding: 0px;
}
fieldset {
  min-width: 0;
  margin: 1em 0;
}
details,
fieldset,
.filter-wrapper {
  border-radius: 4px;
}
.filter-wrapper {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.filter-help a {
  font-size: 0.857em;
}
.filter-wrapper .form-item label {
  margin-right: 10px; /* LTR */
}
[dir="rtl"] .filter-wrapper .form-item label {
  margin-right: 0;
  margin-left: 10px;
}
summary {
  color: #3b3b3b;
  background: #dbdbdb;
  text-shadow: 0 1px 0 #fff;
}
details summary a {
  color: #3b3b3b;
}
details summary a:hover,
details summary a:active,
details summary a:focus {
  color: #000;
}
details .details-description {
  font-style: italic;
}
label {
  display: table;
  font-weight: bold;
}
label[for] {
  /*cursor: pointer;*/
}
input,
textarea,
select {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}
input {
  box-sizing: border-box;
  /* Keep form elements from overflowing their containers. */
  max-width: 100%;
  margin: 2px 0;
  padding: 4px;
}
input,
textarea {
  font-size: 0.929em;
}

/**
 * Make the font slightly bigger in mobile
 * @todo: check the correct font-size
 */
@media screen and (max-width: 60em) { /* 920px */
  input,
  textarea {
    font-size: 16px;
  }
}
textarea {
  line-height: 1.5;
}
textarea.form-textarea {
  padding: 4px;
}
input.form-text,
input.form-tel,
input.form-email,
input.form-url,
input.form-search,
input.form-file,
input.form-number,
input.form-color,
textarea.form-textarea {
  color: #3b3b3b;
  border: 1px solid #ccc;
}
input.form-submit:hover,
input.form-submit:focus {
  background: #dedede;
}
.password-suggestions ul li {
  margin-left: 1.2em; /* LTR */
}
[dir="rtl"] .password-suggestions ul li {
  margin-right: 1.2em;
  margin-left: 0;
}
.form-wrapper .label {
  font-size: 0.929em;
}
.form-wrapper .field-multiple-table .label {
  font-size: inherit;
}
.form-type-radio label,
.form-type-checkbox label {
  margin-left: 4px; /* LTR */
}
[dir="rtl"] .form-type-radio label,
[dir="rtl"] .form-type-checkbox label {
  margin-right: 4px;
  margin-left: 0;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 2px; /* LTR */
}
[dir="rtl"] .form-type-radio .description,
[dir="rtl"] .form-type-checkbox .description {
  margin-right: 2px;
  margin-left: 0;
}
.form-actions {
  padding-top: 10px;
}

/* Node Form */
#edit-body {
  margin-bottom: 2em;
}
.node-form label,
.node-form .description,
.node-form .form-wrapper .label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.node-form .form-wrapper .field-multiple-table .label {
  font-family: inherit;
}
.node-form .form-wrapper {
  margin-bottom: 2em;
}
.node-form .entity-content-form-footer,
.node-form .field--name-status {
  margin-bottom: 0;
}
.node-form .form-actions {
  margin-top: 0;
  padding-top: 0;
}

/* Contact Form */
.contact-form #edit-name {
  width: 75%;
  border-radius: 4px;
}
.contact-form #edit-mail {
  width: 75%;
  border-radius: 4px;
}
.contact-form #edit-subject {
  width: 75%;
  border-radius: 4px;
}
.contact-form #edit-message {
  width: 76.3%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Disabled form elements */
.form-disabled input,
.form-disabled select,
.form-disabled textarea {
  color: #717171;
  border-color: #bbb;
  background: #ededed;
}
.form-disabled label {
  color: #717171;
}

/* Comment form */
.comment-form label {
  float: left; /* LTR */
  width: 120px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.929em;
}
[dir="rtl"] .comment-form label {
  float: right;
}
.comment-form input,
.comment-form .form-select {
  margin: 0;
  border-radius: 4px;
}
.comment-form .form-type-textarea label {
  float: none;
}
.comment-form .form-item,
.comment-form .form-radios,
.comment-form .form-type-checkbox,
.comment-form .form-select {
  overflow: hidden;
  margin-bottom: 10px;
}
.comment-form .form-type-checkbox,
.comment-form .form-radios {
  margin-left: 120px; /* LTR */
}
[dir="rtl"] .comment-form .form-type-checkbox,
[dir="rtl"] .comment-form .form-radios,
[dir="rtl"] .comment-form .form-item .description {
  margin-right: 120px;
  margin-left: 0;
}
.comment-form .form-type-checkbox label,
.comment-form .form-radios label {
  float: none;
  margin-top: 0;
}
.comment-form input.form-file {
  width: auto;
}
.layout-no-sidebars .comment-form .form-text {
  width: 800px;
}
.layout-one-sidebar .comment-form .form-text {
  width: 500px;
}
.layout-two-sidebars .comment-form .form-text {
  width: 320px;
}
.comment-form .form-item .description {
  margin-left: 120px; /* LTR */
  font-size: 0.786em;
  line-height: 1.2;
}
.comment-form .form-textarea {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.comment-form details.filter-wrapper .details-wrapper,
.comment-form .text-format-wrapper .form-item {
  margin-top: 0;
  margin-bottom: 0;
}
.filter-wrapper label {
  float: none;
  width: auto;
}
.filter-wrapper .form-select {
  min-width: 120px;
}
.comment-form details.filter-wrapper .tips {
  font-size: 0.786em;
}
#comment-body-add-more-wrapper .form-type-textarea label {
  margin-bottom: 0.4em;
}
#edit-actions input {
  margin-right: 0.6em; /* LTR */
}
[dir="rtl"] #edit-actions input {
  margin-right: 0;
  margin-left: 0.6em;
}
#edit-submit-vulnerabilities, #edit-reset {
  margin: 0.25vh !important;
}

/* Form error styles. */
.form-item textarea.error + .cke {
  border: 2px solid red;
}

/* Form error message styles. */
.form-item--error-message {
  color: #e32700;
}

/**
 * Improve form element usability on narrow devices.
 */
@media all and (max-width: 600px) {
  .form-actions .button {
    display: block;
    float: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0 0;
    padding-bottom: 6px;
  }

  .js .dropbutton .dropbutton-action > input,
  .js .dropbutton .dropbutton-action > a,
  .js .dropbutton .dropbutton-action > button {
    padding-left: 3em;
    text-align: center;
  }
}
.webform-submission-form{
  margin: 5px;
  padding: 15px;
}
.title-form{
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 15px;
  color: var(--espacio-color);
}
/*Para dar un ancho especifico a los formularios y no ocupen toda la pantalla*/
.container-form-margin{
  margin: 0 auto;
  width: 66%;
}
@media only screen and (max-width: 768px){
  /*Para cambiar el tamaño del titulo si la pantalla disminuye*/
  .title-form{
    font-size:30px;
  }
  /*Para que los formularios ocupen todo el ancho en pantallas pequeñas*/
  .container-form-margin{
    width: 100%;
  }
}
@media only screen and (max-width: 416px){
  /*Cambiar el tamaño del titulo en pantañas inferiores a 416px*/
  .title-form{
    font-size:20px;
  }
}
/*Para añadir los label uno debajo del otro y quitar las negritas que vienen por defecto*/
.container-form-margin label{
  font-weight: inherit;
  display: block;
}
/*Formato para subtitulos en un formulario*/
.container-form-margin .title-h2-form {
  color: var(--espacio-color);
  font-size: 1.5em;
  font-weight: bold;
  margin-left: 0px;
}
/*Estilos del laber que esta en el recuadro de aceptar terminos y condiciones y para los input de tipo checkbox*/
.accept-terms label,
.checbox-form label{
  display: contents;
  font-size: 0.87em !important;
  margin-bottom: 0.5em;
  font-family: 'open_sansregular', sans-serif !important;
  font-weight: normal !important;
}
/*Estilos para el recuadro de aceptar terminos y condiciones*/
.accept-terms input{
  width: auto !important;
}
/*Estilos para los input de tipo radio*/
.form-radios{
  margin-left: 20px !important;
  line-height: 0;
}
.js-webform-radios.form-radios {
  display: grid !important;
}
/*estilos para los checkbox*/
.form-checkboxes{
  display: grid !important;
  margin-left: 20px !important;
  line-height: 0;
}
/*Estilos para el campo que avisas de campos obligatorios que contengan el asterisco*/
.campos-obligatorios-form{
  font-size: 0.9em !important; 
  margin-top: 15px; 
  margin-bottom: 15px;
  margin-left: 0px; 
  font-weight: bold !important;
  color: #E23137;
}
.container-form-margin select{
  border: 1px solid #ccc !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
/*Efectos de borde negro si se optiene el foco*/
.container-form-margin select:focus,
.container-form-margin textarea:focus{
  border: 2px solid #000 !important;
  box-shadow: none;
  border-radius: 4px;
}
/*Para que los recuadros de los input ocupen todo el ancho de la web salvo si se trata de un checkbox, radio o un button*/
.container-form-margin input:not(.form-radio, .form-checkbox, .form-submit){
  width: 100%;
}
/*Estilos para cambiar la letra del boton enviar al pasar el mouse por encima (porque cambia el color a rojo)*/
.container-form-margin .form-submit:hover{
  color: #fff;
}
/*Estilos para crear un recuadro con fondo negro*/
.container-form-margin .box-black {
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0);
  border-image: initial;
  border-radius: 4px;
  background-color:#000000; 
  width:100%;
}
/*Estilos para crear un recuadro con fondo negro*/
.container-form-margin .box-heading-black {
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}
/*Estilos para cambiar el color de la letra en recuadros con fondo negro*/
.container-form-margin h2.container-text-box-black{
  color: #FFFFFF;
  text-align: center;
  font-size: 1.8em !important;
}
.container-form-margin h2.container-text-box-black:before {
  background: black !important;
}
/*Para cambiar el tamaño de los texarea, por defecto viene en auto, y esto hace que tenga un efecto al clikear que se desliza la pagina un poco, para quitar
el efecto se añade esta propiedad, para que no actue el "auto"*/
.container-form-margin textarea{
  height: 130px !important;
}
/*Estilo para añadir recuadros con un borde en cualquier formulario*/
.container-form-margin .box-border{
  border: 1px solid grey;
  font-size: 0.9em;
  padding: 25px 15px 15px 35px;
}
/*Recuadro con margin de color rojo muy transparente para formularios de incibe*/
.box-incibe {
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  border-color: #ebccd1 !important;
}
/*Estilos para recuadro añadir color de fondo (rojo transparente) al recuadro de formulario de incibe*/  
.box-incibe .box-heading {
  color: #a94442 !important;
  background-color: #f2dede !important;
} 
/*Estilos para recuadro añadir padding al recuadro de incibe (recuadro con fondo rojo casi trasnparente en el titulo) */  
.box-incibe .box-body, .box-incibe .box-heading {
  padding: 10px 15px;
}
/*Estilo para quitar el efecto de los titulos (añadir un recuadro encima a la izquierda de rojo) y que no aparezca en los formularios*/
.container-form-margin h1:before{
  background-color: transparent !important;
}
/*Estilo para quitar los dos puntos ":" despues de cada label de los formularios*/
.container-form-margin .form-type-radio label:after,
.container-form-margin .form-type-checkbox label:after{
  content:'';
}
/*Cambiar la letra de los checkbox y radios que vienen por defecto*/
.container-form-margin .form-type-radio label,
.container-form-margin .form-type-checkbox label{
  font-family: 'open_sansregular', sans-serif !important;
  font-size: 0.85em;
}