.node--type-webform .region-top-header {
  width: 100%;
}
 
.node--type-webform #main-wrapper {
  padding-top: 50px;
}

.node--type-webform h1 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 60px;
  font-weight: normal;
}

.node--type-webform h1 span {
  font-weight: bold;
}

.webform-card {
  border:none;
}

.webform-submission-regroupez-vos-credits-form {
  max-width: 740px;
  margin: -125px auto 50px;
  background: #fff;
  border: 1px solid #ccc;
  padding:20px 80px 80px;
  border-radius: 44px;
}

.node--type-webform nav.navbar-expand-lg {
  padding: 0;
}

.node--type-webform #navbar-top {
  padding: 0;
}

.node--type-webform .img-container {
  padding: 25px 0;
}

.webform-submission-form h2 {
  text-align: center;
  font-size: 35px;
  font-weight: bold!important;
  color:#451264!important;
  margin-top:0!important;
  margin-bottom: 35px!important;
}

.webform-submission-form {
  font-family:Arial, sans-serif!important;
}

#edit-first-name-card {
  margin:0;
}

#edit-first-name-card label.form-check-label,
#edit-last-name-card label.form-check-label,
#edit-gender-card label.form-check-label,
#edit-fichage-bancaire-obj label.form-check-label {
  border-width:1px!important;
  padding: 10px 20px;
  border: 1px solid #5D206C;
  cursor:pointer;
  width: 100%;
  text-align: center;
  border-radius:33px;
  color:#5D206C;
  font-weight:bold;
  font-size:18px;
  
}

#edit-last-name-card .webform-options-display-buttons-wrapper, #edit-credits-immobilier .webform-options-display-buttons-wrapper {
  width: 100%;
}

.webform-options-display-buttons input:checked + label.form-check-label {
  border-color:#5D206C!important;
  border-width:2px!important;
  background:#5D206C!important;
  color:#fff!important;
}

.webform-button--next {
  background:#C22850;
}

#edit-residence--wrapper > div {
  width: 640px;
  margin: 0 auto;
}

#edit-cards-prev {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 75px;
  background:none;
  color:#C22850;
  border:none;
}

#edit-cards-prev:focus {
  box-shadow:none;
}

#edit-cards-prev:hover {
  font-weight:bold;
  text-decoration:underline;
}

#edit-cards-prev:before {
  content: '«';
  top: -28px;
  left: -20px;
  font-size: 55px;
  font-weight: lighter;
  font-family: monospace;
  position:absolute;
}

#edit-cards-next, #edit-actions-submit {
  left:50%;
  transform:translateX(-50%);
}

#edit-cards-next, #edit-actions-submit, #back-hp {
  background:#C22850;
  color:#fff;
  padding: 14px 50px;
  border-radius: 30px;
  position: absolute;
  font-weight:bold;
  border-color: transparent;
  width: 200px;
}

#back-hp {
  position:initial!important;
  width:inherit!important;
  text-decoration:none;
  text-transform: none;
  font-weight: bold;
}

.webform-confirmation a.back {
  text-decoration: none;
  color: #fff;
  background: #C22850;
  font-weight: bold;
  padding: 15px 50px;
  border-radius: 30px;
}

#edit-actions-submit {
  width: inherit!important;
}

#edit-email-card label,
#edit-phone-card label,
#edit-lieu-de-residence label,
#edit-vos-informations-personnelles label {
  color:#00B0EB;
  font-weight: initial;
  font-size: 16px;
}

#edit-comments-card label {
  color:#00B0EB!important;
  font-weight: initial!important;
}

#edit-email-card input,
#edit-phone-card input,
#edit-comments-card input,
 #edit-vos-informations-personnelles label {
   padding: 10px 20px 10px 10px;
 }

#edit-email-card .webform-card-wrapper > div,
#edit-phone-card .webform-card-wrapper > div,
#edit-comments-card .webform-card-wrapper > div,
#edit-lieu-de-residence .webform-card-wrapper > div,
#edit-vos-informations-personnelles .webform-card-wrapper > div,
#edit-vos-informations-personnelles .webform-card-wrapper > fieldset .fieldset-wrapper > div {
  width: 420px!important;
  margin: 0 auto;
}

#edit-email-card .webform-card-wrapper > div:not(:last-child),
#edit-phone-card .webform-card-wrapper > div:not(:last-child),
#edit-lieu-de-residence .webform-card-wrapper > div:not(:last-child),
#edit-vos-informations-personnelles .webform-card-wrapper > div:not(:last-child),
#edit-vos-informations-personnelles .webform-card-wrapper > fieldset .fieldset-wrapper > div:not(:last-child) {
  margin-bottom:30px!important;
}

#edit-email-card .webform-card-wrapper > div input,
#edit-phone-card .webform-card-wrapper > div input,
#edit-comments-card .webform-card-wrapper > div input,
#edit-lieu-de-residence .webform-card-wrapper > div input,
#edit-vos-informations-personnelles .webform-card-wrapper > div input,
#edit-vos-informations-personnelles .webform-card-wrapper > fieldset .fieldset-wrapper > div input {
  padding:10px!important;
}

input:focus-visible {
  outline:none!important;
  border-color:#00B0EB!important;
}

#edit-votre-situation-professionnelle select {
  margin: 0 auto;
  display: block;
  padding: 10px 340px 10px 10px;
}

#edit-fichage-bancaire-obj {
  width:300px;
  margin:0 auto!important;
}

#edit-fichage-bancaire-obj > div {
  width:100%;
}

#edit-naissance {
  margin: 0 auto;
  display: block;
  padding: 15px;
  width: 300px;
}

#edit-telephone {
  display: block;
  width: 100%;
}

.error.form-item--error-message {
  color: red;
  font-weight: normal;
  font-size: 13px;
  position: absolute;
  bottom: 100px;
}

.webform-options-display-buttons,
.form-composite.webform-fieldset--title-inline .fieldset-wrapper > div.webform-options-display-buttons {
  position: inherit;
}

.node--type-webform footer > .container {
  max-width: 100%;
  padding: 0;
}

.site-footer {
  background: none!important;
  padding:0!important;
}

.site-footer .site-footer__bottom {
  border-top: none;
  margin-top: 0;
}

.site-footer__bottom .region.region-footer-fifth {
  margin: 0!important;
}

#block-mentionslegalescm {
  background: #373c41;
  margin: 0;
  text-align: justify;
  padding: 20px 100px;
}

#block-mentionslegalescm p {
  color: #fff;
  text-align:center;
}

#block-mentionslegales p span {
  font-weight: bold;
}

#block-avertisement {
  background: #373c41;
  margin: 0;
  text-align: center;
  height: 70px;
  line-height: 70px;
}

#block-avertisement p {
  color: #fff;
  font-weight: bold;
}

#block-avertisement .content {
  padding: 0;
}

.form-check {
  padding-left:0;
}

#edit-type-logement {
  justify-content: space-between;
}

#edit-contact-via-phone-card .error.form-item--error-message,
#edit-vos-informations-personnelles .error.form-item--error-message,
#edit-montant-mensuel-error,
#edit-reste-rembourser-error,
#edit-montant-mensuel-immobilier-error,
#edit-reste-rembourser-immobilier-error {
  position: initial;
}

#edit-vos-informations-personnelles legend,
#edit-contact-via-phone-card legend,
#edit-contact-via-phone-card label {
  color: #00B0EB;
  font-size: 16px;
  padding-left: 10px;
}

fieldset.form-item-montant-mensuel {
  position: relative;
  margin-bottom: 50px!important;
}

fieldset.form-item-reste-rembourser {
  position: relative;
}

#edit-montant-mensuel-error,
#edit-reste-rembourser-error {
  position: absolute;
  bottom: -30px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.webform-confirmation {
  text-align: center;
}

.webform-confirmation p {
  margin: 40px 0px;
}

.webform-confirmation strong {
  font-weight:bold;
}

.webform-confirmation span {
  display:inline-block;
  margin:30px 10px;
}

.webform-submission-regroupez-vos-credits-form input:not(#edit-base-flag-accepte, #edit-fichage-bancaire-false, #edit-fichage-bancaire-true):focus,
.webform-submission-regroupez-vos-credits-form select:focus {
    color: #212529;
    background-color: #fff;
    border-color: #00B0EB;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(0 176 235 / 25%);
}

.webform-submission-regroupez-vos-credits-form input.error:focus,
.webform-submission-regroupez-vos-credits-form select.error:focus {
  border-color: #eb002b!important;
  box-shadow: 0 0 0 0.25rem rgb(235 0 43 / 25%);
}

.highlighted {
  background: linear-gradient(180deg, #68BCEC 0%, #1279B4 100%);
  padding-top:30px;
  height:180px;
}

.highlighted p {
  margin-bottom:0!important;
  text-align:center;
  color:#fff;
  text-transform:uppercase;
  font-family:'Roboto', sans-serif;
  font-weight:bold;
  font-size:20px;
}

.highlighted img {
  margin-bottom: 10px;
}

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper {
  width:31%;
}

#edit-type-logement > div > div {
  padding:0;
}

#block-blocreassurance {
  margin-bottom:60px;
  text-align:center;
}

#block-blocreassurance p {
  font-weight:bold;
  color:#000;
}

#block-blocreassurance p:last-child {
  color:#36AAFF;
  font-size: 26px;
}

.featured-bottom .container {
  max-width:inherit;
}

#block-liensmentionslegalesetdonneespersonnelles {
  background:#5f666d;
}

#block-liensmentionslegalesetdonneespersonnelles ul {
  max-width:465px;
  padding: 10px 0;
  margin: 0 auto;
}

#block-liensmentionslegalesetdonneespersonnelles li {
  list-style-type:none;
}

#block-liensmentionslegalesetdonneespersonnelles li:first-child {
  float:left;
  margin-right:5px;
}

#block-liensmentionslegalesetdonneespersonnelles li:first-child:after {
  content:'|';
  color:#fff;
  margin-left: 5px;
}

#block-liensmentionslegalesetdonneespersonnelles a {
  text-decoration:none;
  color:#fff;
}

.form-item-reste-rembourser-consommation.mb-3 > label,
.form-item-montant-mensuel-consommation.mb-3 > label,
.form-item-reste-rembourser-immobilier.mb-3 > label,
.form-item-montant-mensuel-immobilier.mb-3 > label {
  color:#36AAFF;
}

#edit-fichage-bancaire-true,
#edit-fichage-bancaire-false {
  opacity: 0;
  position: fixed;
  width: 0;
}

#edit-fichage-bancaire-true+label,
#edit-fichage-bancaire-false+label,
#edit-fichage-bancaire-true+strong+label,
#edit-fichage-bancaire-false+strong+label{
  border-width: 1px!important;
  padding: 10px 20px;
  border: 1px solid #5D206C;
  cursor: pointer;
  width: 100%;
  text-align: center;
  border-radius: 33px;
  color: #5D206C;
  font-weight: bold;
  font-size: 18px;
}

#edit-fichage-bancaire-true:checked+label,
#edit-fichage-bancaire-false:checked+label,
#edit-fichage-bancaire-true:checked+strong+label,
#edit-fichage-bancaire-false:checked+strong+label {
  border-color: #5D206C!important;
  border-width: 2px!important;
  background: #5D206C!important;
  color: #fff!important;
}

#edit-fichage-bancaire {
  display:flex;
  justify-content:space-around;
}

#edit-fichage-bancaire > div {
  width:40%;
  padding:0;
}

.progress-step.is-active:last-child:after {
  content: '';
  display: block;
  position: absolute;
  z-index: auto;
  top: 10px;
  right: -4.9%;
  width: 10%;
  height: 4px;
  -webkit-transition: background-color 0.3s, background-position 0.3s;
  transition: background-color 0.3s, background-position 0.3s;
  background-color: #01239B;
}

.webform-progress-tracker .progress-step .progress-marker::before {
  content:'';
  width:initial;
  height:initial;
  display:none;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
  background-color:#01239B!important;
}

.webform-progress-tracker .progress-step .progress-marker::after {
  background-color:transparent!important;
}

.webform-progress-tracker {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  top: 88px;
  transform: translateX(-4.9%);
}

/*REMOVE FOR DEBUGGING*/
.alert-wrapper {
  display:none;
}

@media screen and (max-width: 800px) {
  #block-mentionslegalescm {
    padding: 20px;
  }
  
  #block-avertisement {
    padding: 20px;
    height: inherit;
    line-height: inherit;
  }
  
  #block-avertisement p {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 767px) {
  .ajax-progress.ajax-progress-throbber {
    position:relative;
    top:75px;
    left:50%;
    transform:translateX(-50%);
  }
}

@media screen and (max-width: 767px) {
  .webform-submission-form h2 {
    font-size: 18px;
  }

  #edit-cards-next, #edit-actions-submit {
    position: initial;
    width: 90%;
    margin: 0 auto;
    display: block;
    transform:none;
  }
  
  #edit-cards-prev {
    top:0;
  }
  
  #edit-cards-prev:before {
    left:50%;
    transform:translateX(-250%);
  }

  .webform-submission-regroupez-vos-credits-form {
    padding: 20px 10px 0;
  }

  #edit-actions {
    display: flex;
    flex-direction: column-reverse;
  }

  #edit-cards-next, #edit-actions-submit {
    margin-bottom: 20px;
  }

  .error.form-item--error-message {
    bottom: 85px;
  }
  
  #block-blocreassurance p {
    font-size:16px;
  }
  
  #block-blocreassurance p:last-child {
    font-size:20px;
  }
  
}

@media screen and (max-width: 600px) {
  #edit-type-logement .form-check,
  #edit-code-charge .form-check,
  #edit-code-charge-immobilier .form-check {
    padding-left:0;
  }
  
  .webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper {
    width:100%;
  }
  
  .webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper:not(:last-child) {
    margin-bottom: 20px;
  }
}

@media screen and (max-width:530px) {
  #block-liensmentionslegalesetdonneespersonnelles ul {
    flex-flow:column;
    text-align:center;
  }
  
  #block-liensmentionslegalesetdonneespersonnelles li {
    margin-bottom: 10px;
  }
  
  .highlighted p {
    font-size:16px;
  }
}