/* formulario */

.webform-progress{
	width: 100%;
}

.webform-likert-table{
    width: 100%;
}

.webform-submission-form button,
.webform-submission-form input,
.webform-submission-form select,
.webform-submission-form textarea {
    line-height: normal;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid var(--color-custom1-filete);
}

.webform-submission-form .form-textarea-wrapper textarea{
    margin-top: 5px;
}

.webform-submission-form input[type="submit"].webform-submit{
    padding: 8px 15px;
    border: 1px solid var(--color-custom1-filete);
    background: var(--color-custom1-fondo);
    color: white;
    border-radius: 25px;
    font-weight: bold;
    width: 100%;
}

.webform-submission-form .form-actions input.webform-previous{
    margin-right: 10px;
    width: 30%;
    min-width: 150px;
    border-radius: 30px;
    background: #c5d0e0;
}

.webform-submission-form .form-actions{
    width: 100%;
    display: flex;
}

.webform-submission-form select,
.webform-submission-form input{
    width: 100%;
    box-sizing: border-box;
    margin: 3px 0;
}

.webform-submission-form input[type=submit]{
    padding: 8px 20px;
    width: auto;
}

/* clase si queremos que el botón de envío sea 100% */
.full-btn-submit.webform-submission-form input[type=submit]{
    width: 100%;
}

/* componente marcado */

 .webform-submission-form .webform-component-markup,
 .webform-submission-form .webform-component-markup p{
    font-size: 0.7rem;
}

/* EOL componente marcado */

/* componente subida de fichero */

.webform-submission-form div[id^="edit-submitted-"]{
    width: 100%;
}

.webform-submission-form .webform-component-file .form-managed-file{
    display: flex;
    flex-wrap: wrap;
}

.webform-submission-form .form-managed-file input[type="file"]{
    margin-top: 0;
}

.webform-submission-form .form-managed-file input[type="submit"]{
    padding: 8px 15px;
    background: #c5d0e0;
    color: white;
    border-radius: 3px;
    font-weight: bold;
    margin: 0;
}

/* end componente subida fichero */

/* componente date-picker */

.webform-submission-form .webform-datepicker,
.webform-submission-form .webform-component-date .webform-container-inline{
    display: flex;
    justify-content: left;
}

.webform-submission-form .webform-datepicker .form-item,
.webform-submission-form .webform-component-date .form-item{
    width: auto;
    padding: 0;
}

.webform-submission-form .webform-datepicker .form-item label,
.webform-submission-form .webform-component-date .form-item label{
    margin: 0;
}

.webform-submission-form .webform-datepicker select,
.webform-submission-form .webform-datepicker input,
.webform-submission-form .webform-component-date select,
.webform-submission-form .webform-component-date input{
    height: 35px!important;
    width: auto;
    margin: 0;
}

.webform-submission-form .webform-datepicker input[type="image"],
.webform-submission-form .webform-component-date input[type="image"]{
    margin: 8px 0;
}

.webform-submission-form .webform-datepicker img.webform-calendar,
.webform-submission-form .webform-component-date img.webform-calendar{
    width: 18px;
    height: 15px;
}

/* end componente date-picker */

.webform-submission-form .form-item label{
    margin-bottom: 5px;
    margin-top: 0!important;
}

/* componentes radio */

.webform-submission-form .form-radios,
.webform-submission-form .form-checkboxes{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.webform-submission-form .form-item.form-type-radio,
.webform-submission-form .form-item.form-type-checkbox{
    width: 100%;
}

.webform-submission-form .form-type-radio input,
.webform-submission-form .form-type-checkbox input{
    margin-right: 8px;
    order: 2;
    width: auto;
}

/* EOL componentes radio */

/* formulario iconos  en línea */

.webform-submission-form{
    & .inline.radios--wrapper, .inline.checkboxes--wrapper{
        & .form-radios, .form-checkboxes{
            flex-wrap: nowrap;
            width: 100%;
            & .form-item{
                width: 100%;
                display: flex;
                align-items: self-end;
                flex-wrap: wrap;
                justify-content: center;
                background: #f4f4f4;
                padding-bottom: 0;
                border-radius: 7px;
                padding-top: 5px;
            }
            & input{
                width: 100%;
                margin: 0;
            }
            & label{
                text-align: center;
                padding: 5px 5px 0 5px;
                margin-bottom: 10px;
            }
        }
        & .form-checkboxes .form-item{
            padding-bottom: 10px!important;
        }
        & .form-type-radio, .form-type-checkboxes{
            & input{
                margin-right: 0;
                margin-top: 7px;
                order: 0;
            }
        }
    }
}

/* EOL formulario iconos en línea */

/* checkbox con imagen */

.checkimage{
	& .js-webform-checkboxes{
		display:flex;
		gap: 1rem;
		margin-top: 1rem;
		& .js-form-item{
			display:flex;
			width: auto;
			gap: 1rem;
			padding: 1rem;
			background: #eeeeee;
      border-radius: 5px;
      margin: 0;
			& img{
				display: block;
				width: 5.5rem;
				height: auto;
			}
		}
	}
}

/* eol checkbox con imagen */

.webform-submission-form fieldset {
    width: 100%;
}

.webform-submission-form fieldset[class^="webform-component-"]{
    border: 1px solid var(--color-custom1-filete);
    padding: 10px;
    border-radius: 5px;
    width: 99%;
    margin: 0.5em 0.5%;
}

.webform-submission-form fieldset[class^="webform-component-"] legend span{
    font-weight: bold;
    font-size: 19px;
    padding: 0 15px
}

.webform-submission-form .webform-client-form > div,
.webform-submission-form [class^="webform-component-"] > .fieldset-wrapper,
form.webform-submission-form,
form.webform-submission-form .fieldset-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
}

.webform-submission-form [class^="webform-component-"].collapsed >  .fieldset-wrapper{
    display: none;
}

/* estilos componentes */

.node-type-webform .form-item.bg{
    display: block;
    background: rgb(239, 239, 239);
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}

.node-type-webform .form-item.condensed,
.node-type-webform div.condensed .form-item{
    margin: 2px 0.5%;
}

.webform-submission-form fieldset[class^="webform-component-"].bg{
    display: block;
    background: rgb(239,239,239);
    box-sizing: border-box;
    padding: 0 15px;
    border-radius: 0;
}

.webform-submission-form fieldset[class^="webform-component-"].w-space {
    padding: 0;
    margin: 0;
    border: 0;
}

.webform-submission-form fieldset[class^="webform-component-"] fieldset[class^="webform-component-"]{
    margin-left: 5px;
}

.webform-submission-form .form-item {width: 99%; margin: 0.5em 0.5%;}
.webform-submission-form .form-item.col-1 {width: 7.33%;}
.webform-submission-form .form-item.col-2 {width: 15.66%;}
.webform-submission-form .form-item.col-3 {width: 24%;}
.webform-submission-form .form-item.col-4 {width: 32.33%;}
.webform-submission-form .form-item.col-5 {width: 40.66%;}
.webform-submission-form .form-item.col-6 {width: 49%;}
.webform-submission-form .form-item.col-7 {width: 57.33%;}
.webform-submission-form .form-item.col-8 {width: 65.66%;}
.webform-submission-form .form-item.col-9 {width: 74%;}
.webform-submission-form .form-item.col-10 {width: 82.33%;}
.webform-submission-form .form-item.col-11 {width: 90.66%;}
.webform-submission-form .form-item.col-12 {width: 99%;}

.webform-submission-form .form-item .col-1 {width: 7.33%;}
.webform-submission-form .form-item .col-2 {width: 15.66%;}
.webform-submission-form .form-item .col-3 {width: 24%;}
.webform-submission-form .form-item .col-4 {width: 32.33%;}
.webform-submission-form .form-item .col-5 {width: 40.66%;}
.webform-submission-form .form-item .col-6 {width: 49%;}
.webform-submission-form .form-item .col-7 {width: 57.33%;}
.webform-submission-form .form-item .col-8 {width: 65.66%;}
.webform-submission-form .form-item .col-9 {width: 74%;}
.webform-submission-form .form-item .col-10 {width: 82.33%;}
.webform-submission-form .form-item .col-11 {width: 90.66%;}
.webform-submission-form .form-item .col-12 {width: 99%;}

@media (max-width: 720px){
    .webform-submission-form .form-item[class*="col-"]{
        width: 99%!important;
    }
}

/* end formulario */


/* revisar y añadir */

/* formulario elementos likert */

@media (max-width: 768px) {
    .form-type-webform-likert table.sticky-header {
        display: block;
    }
}

/* eol formulario elementos likert */