@font-face { font-family: "ara-comunitats3"; src: url("https://s1static.ara.cat/interactius/assets/common/tipo_ara/fonts/ara-comunitats3.eot?hash=10111213dfgaa1aa"); src: url("https://s1static.ara.cat/interactius/assets/common/tipo_ara/fonts/ara-comunitats3.eot?#iefix?&hash=10111213dfgaa1aa") format("embedded-opentype"), url("https://s1static.ara.cat/interactius/assets/common/tipo_ara/fonts/ara-comunitats3.woff?hash=10111213dfgaa1aa") format("woff"), url("https://s1static.ara.cat/interactius/assets/common/tipo_ara/fonts/ara-comunitats3.ttf?hash=10111213dfgaa1aa") format("truetype"), url("https://s1static.ara.cat/interactius/assets/common/tipo_ara/fonts/ara-comunitats3.svg#ara-comunitats3?hash=10111213dfgaa1aa") format("svg"); font-weight: normal; font-style: normal }
[data-icon]:before { font-family: "ara-comunitats3" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
[class^=icon-]:before,
[class*=" icon-"]:before { content:" "; background: transparent center center no-repeat;font-family: "ara-comunitats3" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
.form-group[class*=icon-] input, .form-group[class*=icon-].form-group-select:before { background-repeat: no-repeat; background-position: 15px center; }
.icon-c-fb:before {content: "q"}
.icon-google:before {content: "M"}
.icon-telefon input {background-image: url("../img/icons/telephone.svg");}
.icon-aniversari input:first-of-type {background-image: url("../img/icons/birthday.svg");background-position: 15px 12px}
.icon-email input {background-image: url("../img/icons/email.svg");}
.icon-password input {background-image: url("../img/icons/password.svg");}
.icon-user input {background-image: url("../img/icons/user.svg");}
.icon-location input {background-image: url("../img/icons/location.svg");}
.icon-targeta input {background-image: url("../img/icons/creditcard.svg");}
.icon-location.form-group-select:before {content:" "; position:absolute; top:0; left:0; width:48px; height:56px;background-image: url("../img/icons/location.svg");}
[class*=" icon-"] .input-pensant {background-image: url(../img/loading_g.gif)!important }

.formulari-wrapper .fila { display: flex; flex-flow: row wrap; justify-content: space-between; width: 460px; max-width: 100% }
.form-group { position: relative; margin-bottom: 20px; width: 320px; max-width: 100% }
.form-group * { box-sizing: border-box }
.form-group:focus-within .form-control:focus,
.form-group:focus-within .form-control:not(:invalid) { border-color: #0074a1; }
.form-group .form-control { width: 100%; padding: 16px 16px 16px 48px; border: 1px solid #e5e5e5; border-radius: 4px; color: #333; outline: none; min-height: 56px }
.form-group .form-control:focus:not(:invalid) { border-color: #0074a1 }

.form-group input::placeholder { opacity: 0 }
.form-group .label { font-size: 16px; line-height: inherit; position: absolute; top: 0; left: 0; margin: 16px 16px 16px 48px; padding:0; color: #999; font-weight: normal; transition: all 200ms; }
.form-group:focus-within .label { color: #0074a1; background: #fff; padding: 0 6px; font-size: 12px; transform: translate3d(0, -100%, 0); margin: 10px 10px}
.form-group .form-control:not(:placeholder-shown)+.label { color: #333 }
.form-group input:not(:placeholder-shown) + .label,
.labelsup{ background: #fff; padding: 0 6px; font-size: 12px; transform: translate3d(0, -100%, 0); margin: 10px 10px; }
.form-group .labelsup {transform: translate3d(0, 46%, 0); font-weight: normal; margin: 0 10px;}
.form-group input:not(:placeholder-shown):not(:focus) + .label {margin-top:10px;margin-left: 10px;}
.form-group input[readonly]:not(:placeholder-shown):not(:focus) + .label {margin:7px 10px 0;}
.form-group:not([class*=icon-]) .label {  margin-left: 20px; }
.form-group:not([class*=icon-]) input:placeholder-shown:focus + .label {  margin-left: 10px; }

.form-group select { -moz-appearance: none; -webkit-appearance: none; background: url("../img/icons/arrow.svg") calc(100% - 10px)/20px no-repeat;padding-right: 35px!important; }
.form-group-select label {display: none}
.form-group select::-ms-expand { display: none }
.form-group .form-control+select { width: 130px }
.form-group-select select option {font:normal 18px/26px "Soho Gothic W01 Regular", Arial, sans-serif; padding-left: 18px; }

.form-group input[type=date] {color: #999}
.form-group input[type=date] { -webkit-appearance: none }
.form-group input[type=date]::-webkit-inner-spin-button,
.form-group input[type=date]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none }

.form-group textarea,
.form-group input:not([type=checkbox]),
.form-group input[type=text],
.form-group input[type=button],
.form-group input[type=password],
.form-group input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none }
.form-group input[type=password],
.form-group input[placeholder="Contrasenya"] {padding-right: 45px}
.form-group input[type=number] {-webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;}
.form-group input[type=number]::-webkit-inner-spin-button,
.form-group input[type=number]::-webkit-outer-spin-button {  margin: 0; -webkit-appearance: none;}

.form-group-checkbox input {margin-top: 5px;}
.form-group-checkbox span { font-size: 16px; line-height: 1.3em;display: inline-block;}

.compost { display: flex; flex-flow: row nowrap }
.compost .form-control { padding-left: 18px; min-width: 30px }
.compost .form-group-select { width: 110px }
.compost:not(.swap) .form-group-select select {border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.compost .form-group-input { width: 100% }
.compost .form-group-input input {border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 48px; clip-path: inset(-8px -8px -8px 0px);}
.compost .form-group:last-of-type .form-control:focus:not(:invalid) {border-left-color: #e5e5e5;}
.compost.swap .form-group-input { width: 165px }
.compost.swap .form-group-input input {border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; clip-path: inset(-8px 0px -8px -8px);}
.compost.swap .form-group-input input:not(:readonly):focus-within { border-right: 1px solid #0074a1!important;}
.compost.swap .form-group-select, .compost.swap .form-group-input:last-of-type { width: 100% }
/*.compost.swap .form-group-select select, .compost.swap .form-group-input:last-of-type:not(:readonly) input {border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-right: 1px solid #e5e5e5}*/
.compost.swap .form-group-select select, .compost.swap .form-group-input:last-of-type input{border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; clip-path: inset(-8px -8px -8px 0px);}
.compost.swap .form-control[readonly] {background-color: #f4f7f9;}
.compost.swap .form-group input.form-control[readonly]::placeholder { opacity: 1;font-size: 16px; }
.compost.swap .form-group:focus-within .form-control[readonly]:focus,
.compost.swap .form-group:focus-within,
.compost.swap .form-group .form-control[readonly]:focus {border-color: #e5e5e5; box-shadow: none;}
.compost.swap .form-group-ben_poblacio, .compost.swap .form-group-pag_poblacio, .compost.swap .form-group-regal_poblacio {display: none}
.form-group:not([class*=icon-]) .form-control { padding-left: 18px }
.form-group.form-group-option,
.compost,
.form-group.form-group-checkbox {max-width: 400px;width: 100%}

a.subpas:not(:first-of-type) {display: none;}
.label-hidden {display: none}
.form-group-select label#ben_via-label,
.form-group-select label#pag_via-label,
.form-group-select label#regal_via-label
  {display:block; position:absolute; top:0; left:0; padding: 0 3px; margin: 10px 10px; transform: translate3d(0, -100%, 0); font-size: 12px; font-weight:normal; background: #fff; }

.botons-peu {position: relative;}
.spinner {position: absolute; top:0;left: 0; width: 280px; height: 50px; padding-top: 18px!important;padding-bottom: 12px!important; text-align: center; display: none; }
.spinner > div {width: 18px; height: 18px; background-color: #fff; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.spinner .bounce1 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
@keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0); } 40% {-webkit-transform: scale(1.0); transform: scale(1.0); } }

@media (max-width: 390px) {
  .form-group-ben_poblacio_input, .form-group-pag_poblacio_input, .form-group-regal_poblacio_input {display: none}
  .form-group-select label#ben_via-label,
  .form-group-select label#pag_via-label,
  .form-group-select label#regal_via-label {padding: 0;}
}