body.noscroll { overflow: hidden }

.formulari-wrapper { min-height: calc(100vh - 36px - 101px);color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: normal 16px/22px "Soho Gothic W01 Regular", Arial, sans-serif }
@media only screen and (min-width:900px) {
  .formulari-wrapper { font: normal 18px/26px "Soho Gothic W01 Regular", Arial, sans-serif }
}
.formulari-wrapper b,
.formulari-wrapper strong { font-family: "Soho Gothic W01 Bold" !important }
.gris { color: #a4a4a4 }
.formulari-wrapper a { color: #333; text-decoration: underline; }
.formulari-wrapper article {margin-top: 0}
.formulari-wrapper .botons-peu {margin-top: 40px}

.formulari-wrapper { display: flex; flex-flow: column nowrap; max-width: 900px; padding-top:20px; margin: auto }
.formulari-wrapper .pas { position: relative; counter-increment: passos; counter-reset: pasos; padding: 10px; max-width: 100% }
.formulari-wrapper .pas.actiu { padding-bottom: 40px }
.formulari-wrapper .pas .pas-titol { padding-left: 45px; font: normal 26px/30px "Soho Gothic W01 Bold", Arial, sans-serif; min-height: 35px; display: flex; align-items: center }
.formulari-wrapper .pas .pas-titol:before { content: counter(passos); background: #0076a8; color: #fff; height: 35px; width: 35px; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: absolute; left: 11px; top: 12px; font: normal 20px/30px "Soho Gothic W01 Regular", Arial, sans-serif }
.formulari-wrapper .pas .pas-body,
.formulari-wrapper .pas .pas-body-item { margin-top: 10px; margin-bottom: 10px; padding-left: 45px; padding-top: 25px; padding-bottom: 0 }
.formulari-wrapper .pas .pas-body-item { font: normal 16px/22px "Soho Gothic W01 Bold", Arial, sans-serif; color: #0076a8; min-height: 5px}
.formulari-wrapper .pas.actiu .pas-body-item {display: none}
.formulari-wrapper .pas .pas-body-item .info {text-transform: uppercase; color: #0076a8}
.formulari-wrapper .pas .pas-body-item .info a {color: #0076a8}
.formulari-wrapper .pas .pas-body-item .extra {font: 14px/18px 'Soho Gothic W01 Regular', sans-serif; text-transform: none;color: #333;}
.formulari-wrapper .pas .pas-body:before,
.formulari-wrapper .pas .pas-body-item:before{ content: " "; position: absolute; display: block; height: calc(100% - 50px); width: 2px; background: #0076a8; left: 27px; bottom: -5px }
.formulari-wrapper .pas .pas-body .subpas:not(:first-of-type) {display: none;}
.formulari-wrapper .pas .pas-body .subpas-titol { position: relative; margin-bottom: 20px }
.formulari-wrapper .pas .pas-body .subpas-titol:before { content: " "; display: block; position: absolute; left: -27.5px; top: calc(50% - 1px); height: 2px; width: 17.5px; background: #0076a8 }
.formulari-wrapper .pas:not(.actiu) .pas-titol { font: normal 20px/30px "Soho Gothic W01 Bold", Arial, sans-serif }
.formulari-wrapper .pas:not(.actiu):not(.complet) .pas-titol { color: #a4a4a4; }
.formulari-wrapper .pas:not(.actiu):not(.complet) .pas-titol:before { background: #a4a4a4 }
.formulari-wrapper .pas:not(.actiu) .pas-body { height: 11px; padding: 0 }
.formulari-wrapper .pas:not(.actiu) .pas-body:before { background: #a4a4a4 }
.formulari-wrapper .pas:not(.actiu) .pas-body { display: none }
@media only screen and (min-width:900px) {
  .formulari-wrapper .pas { padding: 10px 20px 10px 20px;}
  .formulari-wrapper .pas .pas-titol { min-height: 50px; padding-left: 66px; font: normal 36px/38px "Soho Gothic W01 Bold", Arial, sans-serif }
  .formulari-wrapper .pas .pas-titol:before { font: normal 22px/22px "Soho Gothic W01 Regular", Arial, sans-serif; height: 48px; width: 48px; left:20px; }
  .formulari-wrapper .pas:not(.actiu) .pas-titol { font: normal 25px/30px "Soho Gothic W01 Bold", Arial, sans-serif }
  .formulari-wrapper .pas:not(.actiu) .pas-titol:before {width: 38px;height: 38px; font-size: 19px; left: 25px; top:17px; }
  .formulari-wrapper .pas .pas-body,
  .formulari-wrapper .pas .pas-body-item { padding-top: 40px; padding-left: 66px }
  .formulari-wrapper .pas .pas-body-item { padding-top: 0; padding-bottom: 0 }
  .formulari-wrapper .pas .pas-body:before,
  .formulari-wrapper .pas .pas-body-item:before { left: 43px; bottom:-9px; height: calc(100% - 60px) }
  .formulari-wrapper .pas .pas-body .subpas-titol:before { left: -42px; width: 23px }
  .formulari-wrapper .pas:not(.actiu) .pas-body { height: 45px }
  .formulari-wrapper .pas:not(.actiu) .pas-body-item::before {height: calc(100% - 55px);}
  .formulari-wrapper .pas.ultim:not(.actiu) .pas-body-item::before {height: calc(100% - 60px);bottom: -4px;}
}

.formulari-wrapper input, .formulari-wrapper select {font:normal 18px/26px "Soho Gothic W01 Regular", Arial, sans-serif;}
.formulari-wrapper input[type="date"].form-control {line-height: inherit;}
.formulari-wrapper label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.formulari-wrapper .label-outline {display: block; font: normal 16px/22px "Soho Gothic W01 Bold", Arial, sans-serif; margin-bottom: 4px;}
.formulari-wrapper .opcions { display: flex; flex-flow: column nowrap; margin: 15px 0; padding-right: 30px; max-width: 230px }
.formulari-wrapper .opcions input[type=radio] { opacity: 0; position: absolute }
.formulari-wrapper .opcions input[type=radio]:checked+.opcio { color: #fff; background: #0076a8; border-color: #0076a8 }
.formulari-wrapper .opcions input[type=radio]:checked+.opcio:focus,
.formulari-wrapper .opcions input[type=radio]:checked+.opcio:hover { color: #fff; background: #a4a4a4; border-color: #a4a4a4 }
.formulari-wrapper .opcions input[type=radio]:first-child+.opcio { border-radius: 4px 4px 0 0 }
.formulari-wrapper .opcions .opcio { flex: 1; white-space: nowrap; border: 1px solid #a4a4a4; padding: 15px 20px; background: #fff; cursor: pointer; font: normal 16px/18px "Soho Gothic W01 Regular", Arial, sans-serif; }
.formulari-wrapper .opcions label {margin-bottom: 0;border-collapse: collapse;}
.formulari-wrapper .opcions .opcio input:checked,
.formulari-wrapper .opcions .checked,
.formulari-wrapper .opcions:hover .checked{ color: #fff; background: #0076a8; border-color: #0076a8 }
.formulari-wrapper .opcions .checked.readonly,
.formulari-wrapper .opcions:hover .checked.readonly { color: #666; background: #eeeeee; border-color: #a4a4a4;cursor: initial; }
.formulari-wrapper .opcions .opcio:focus,
.formulari-wrapper .opcions .opcio:not(.checked):not(.readonly):hover { color: #fff; background: #a4a4a4; border-color: #a4a4a4 }
.formulari-wrapper .opcions .opcio:not(.checked).readonly,
.formulari-wrapper .opcions .opcio:not(.checked).readonly:hover { background: #fff; cursor: default; }
.formulari-wrapper .opcions .opcio:first-child { border-radius: 4px 4px 0 0 }
.formulari-wrapper .opcions .opcio:last-child { border-radius: 0 0 4px 4px; border-top:none; }
.formulari-wrapper .opcions .opcio.single,
.formulari-wrapper .opcions .opcio.single:last-child {border-radius: 4px!important}
@media only screen and (min-width:900px) {
  .formulari-wrapper .opcions .opcio:last-child { border-top: 1px solid #a4a4a4}
}
.formulari-wrapper .opcions+.form-group { margin-top: 25px }
@media only screen and (min-width:900px) {
  .formulari-wrapper .opcions { flex-flow: row nowrap; padding: 0; max-width: 100% }
  .formulari-wrapper .opcions input[type=radio]:first-child+.opcio { border-radius: 4px 0 0 4px }
  .formulari-wrapper .opcions .opcio { max-width: 200px }
  .formulari-wrapper .opcions .opcio:first-child { border-radius: 4px 0 0 4px }
  .formulari-wrapper .opcions .opcio:last-child { border-radius: 0 4px 4px 0 }
  .formulari-wrapper .opcions .opcio:not(:last-child) { border-right: 0 solid }
}

.formulari-wrapper .button { font: normal 14px/20px "Soho Gothic W01 Bold", Arial, sans-serif; color: #fff; background-color: #0076a8; border-radius: 4px; padding: 15px; text-decoration: none; border: 0 solid }
.formulari-wrapper .button:hover {background-color: #00648e}
.formulari-wrapper .button:disabled { background-color: #a4a4a4; cursor: not-allowed; }

.formulari-wrapper .form-errors {display: none;}
.formulari-wrapper .error, .modal .error {font: normal 12px/16px "Soho Gothic W01 Regular", Arial, sans-serif; color: #e00404; margin-top: 10px; display: inline-block;}
.formulari-wrapper .error a {color: #e00404; font: inherit}
.formulari-wrapper .error .legal a { color: #333; text-decoration: underline; }
.formulari-wrapper .alert {margin:0 0 20px 0; padding: 0; font: normal 16px/1.3em "Soho Gothic W01 Regular", Arial, sans-serif; }
.formulari-wrapper .alert-danger { color: #e00404; background-color: transparent;border-color: transparent; border: none; padding: 0}

@media only screen and (min-width:1200px) {
  .formulari-wrapper .alert {max-width: 80%}
}

.formulari-wrapper .nota,
.formulari-wrapper .sublabel { color: #a4a4a4; font: normal 14px/22px "Soho Gothic W01 Regular", Arial, sans-serif }
.formulari-wrapper .sublabel {display: block;}
.formulari-wrapper .nota a { font: inherit }
.formulari-wrapper input[type=submit] { -webkit-appearance: button; cursor: pointer; width: 280px; max-width: 100%; }
.formulari-wrapper .triple { display: flex; flex-flow: row nowrap; align-items: flex-end; width: 400px; max-width: 100% }
.formulari-wrapper .triple .form-group { width: 100% }
.formulari-wrapper .triple .form-group .form-control { padding-left: 18px }
@media only screen and (max-width:900px) {
  .formulari-wrapper .botons-peu {display: none}
  .formulari-wrapper .triple .form-group .form-control { border-radius: 0 }
  .formulari-wrapper .triple .form-group:first-child { margin-right: -1px }
  .formulari-wrapper .triple .form-group:first-child .form-control { border-radius: 4px 0 0 4px }
  .formulari-wrapper .triple .form-group:last-child { margin-left: -1px }
  .formulari-wrapper .triple .form-group:last-child .form-control { border-radius: 0 4px 4px 0 }
}
@media only screen and (min-width:900px) {
  .formulari-wrapper .triple .form-group:not(:first-child) { margin-left: 12px }
}

.formulari-wrapper #pasfinal { padding-bottom: 50px;}
.formulari-wrapper #pasfinal .pas-titol:before { content: ""; width: 24px; height: 24px; left: 15px; background-color: #0076a8; }
@media only screen and (min-width:900px) {
  .formulari-wrapper #pasfinal { padding-bottom: 10px;}
  .formulari-wrapper #pasfinal .pas-titol:before { left: 31px;top: 18px; }
}