/* Formulari CSS */


/* form */

form::after { content: ""; display: table; clear: both; width: 100%; height: 1px; opacity: 0; }


/* fieldset */

fieldset { padding: 1em 2em 0 2em; margin-bottom: 2em; background-color: #fff; border: 1px solid #ddd; border-radius: 25px; }

fieldset legend { font-size: .9em; text-transform: uppercase; padding: .3em 1em; }


/* elemenfts de form */

.imc--f-el { float: left; padding-right: 1em; margin-bottom: 1.5em; }
.imc--f-el > label { display: block; font-size: .9em; padding-left: 1em; padding-bottom: .3em; }


/* llistat checks i radios */

.imc--f-el .imc--control ul { display: flex; min-height: 2.3em; padding-top: .4em; padding-right: .5em; margin-bottom: 0; }
.imc--f-el .imc--control ul li { list-style: none; padding-bottom: 0; margin-right: 1em; }
.imc--f-el .imc--control ul li:last-child { margin-right: 0; }


/* input */

input { display: inline-block; vertical-align: middle; font: normal 1em 'Bariol Regular',Arial,Helvetica,sans-serif; height: 2.3em; padding: .3rem 1.1rem .4rem 1.1rem; background-color: #fff; border: 2px solid #ccc; border-radius: 25px; }

input {
    -webkit-transition: background-color .2s ease-out, border-color .2s ease-out;
    -moz-transition: background-color .2s ease-out, border-color .2s ease-out;
    -ms-transition: background-color .2s ease-out, border-color .2s ease-out;
    -o-transition: background-color .2s ease-out, border-color .2s ease-out;
    transition: background-color .2s ease-out, border-color .2s ease-out;
}

input:hover { position: relative; z-index: 2; border-color: #009892; }
input:focus { position: relative; z-index: 2; background-color: #ffffdd; border-color: #006260; }

input:focus { box-shadow: 0px 0px 4px 4px rgba(0, 140, 137, .3); }

input[disabled] { background-color: #f2f2f2; }

input[disabled]:hover,
input[disabled]:focus { background-color: #f2f2f2; border: 2px solid #ccc; }

input[readonly]:focus { background-color: #fff; box-shadow: none; }


/* botons */

button { display: inline-block; vertical-align: middle; min-height: 2.3em; font: normal 1em 'Bariol Regular',Arial,Helvetica,sans-serif; text-align: left; padding: .3rem 1.1rem .3rem 1.1rem; background-color: #009892; border: none; border-radius: 25px; cursor: pointer; will-change: background-color, transform; }

button {
    -webkit-transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    -ms-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}

button span,
button strong { display: inline-block; vertical-align: middle; color: #fff; line-height: 1.6em; }

button:focus,
button:hover { background-color: #006260; }

button[disabled],
button[disabled]:focus,
button[disabled]:hover { background-color: #ccc !important; transition: background-color .2s ease-out, transform .2s ease-out; cursor: default; }


/* selectors */

select { display: inline-block; vertical-align: middle; font: normal 1em 'Bariol Regular',Arial,Helvetica,sans-serif; width: 100%; height: auto; padding: .3rem 1.5rem .4rem 1.1rem; background-color: #fff; border: 2px solid #ccc; border-radius: 25px; cursor: pointer; }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2em;
    background: #fff url(../files/ico_selector.svg) no-repeat right .8em center / 1em auto;
}

select {
    -webkit-transition: border-color .2s ease-out;
    -moz-transition: border-color .2s ease-out;
    -ms-transition: border-color .2s ease-out;
    -o-transition: border-color .2s ease-out;
    transition: border-color .2s ease-out;
}

select:hover { border-color: #009892; }
select:focus { background-color: #ffffdd; border-color: #006260; }

select[disabled] { background-color: #f2f2f2; }

select[disabled]:hover,
select[disabled]:focus { background-color: #f2f2f2; border-color: #ccc; }


/* textarea */

textarea { display: inline-block; vertical-align: middle; font: normal 1em 'Bariol Regular',Arial,Helvetica,sans-serif; width: 100%; min-width: 20em; padding: .3rem 1.1rem .4rem 1.1rem; background-color: #fff; border: 2px solid #ccc; border-radius: 25px; }

textarea {
    -webkit-transition: background-color .2s ease-out, border-color .2s ease-out;
    -moz-transition: background-color .2s ease-out, border-color .2s ease-out;
    -ms-transition: background-color .2s ease-out, border-color .2s ease-out;
    -o-transition: background-color .2s ease-out, border-color .2s ease-out;
    transition: background-color .2s ease-out, border-color .2s ease-out;
}

textarea:hover { position: relative; z-index: 2; border-color: #009892; }
textarea:focus { position: relative; z-index: 2; background-color: #ffffdd; border-color: #006260; }

textarea:focus { box-shadow: 0px 0px 4px 4px rgba(0, 140, 137, .3); }

textarea[disabled] { background-color: #f2f2f2; }

textarea[disabled]:hover,
textarea[disabled]:focus { background-color: #f2f2f2; border: 2px solid #ccc; }

textarea[readonly]:focus { background-color: #fff; box-shadow: none; }


/* checkbox */

.imc--checkbox,
.imc--checkbox input { cursor: pointer; }

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    font-size: 1em;
    margin-right: 4px;
    border: .2em solid #c9c9c9;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: middle;
    border-radius: 10%;
    background-color: #fff;
    position: relative;
    top: -0.15em;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background: #006260 url(../files/ico_check_fff.svg) no-repeat center center / 70% auto;
    border-color: #006260;
}


/* radio */

.imc--radio { display: inline-block; vertical-align: middle; position: relative; cursor: pointer;  }
.imc--radio input { position: absolute; z-index: 0; top: -0.2em; left: -0.3em; width: 1.1em; height: 1.1em; cursor: pointer; }

.imc--radio input + span::before {
    content: ""; display: inline-block; vertical-align: middle;
    position: relative;
    top: -0.1em;
    width: 1.2em;
    height: 1.2em;
    margin-right: .3em;
    background: #fff;
    border: 3px solid #c9c9c9;
    border-radius: 50%;
    cursor: pointer;
}

.imc--radio input:focus + span::before {
    border-color: #009892;
}

.imc--radio input:checked + span::before {
    border-color: #006260;
    box-shadow: 0 0 0 3px #006260 inset;
}


/* obligatori */

.imc--f-el[data-obligatori] label { position: relative; }
.imc--f-el[data-obligatori] label::after { content: ""; display: block; position: absolute; top: .1em; left: -.1em; width: .2em; height: .2em; margin-left: .5em; background-color: #c00; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c00; transform: rotate(45deg); }


/* error */

.imc--f-el[data-error] input,
.imc--f-el[data-error] select,
.imc--f-el[data-error] textarea { border-color: #c00; }

.imc--f-el[data-error] .imc--radio input + span::before,
.imc--f-el[data-error] .imc--radio input:focus + span::before {
    border-color: #c00;
}


/* botonera */

.imc--f-botonera { clear: both; width: 100%; padding: 1em 0; }