/* FORMULAIRES COMMUN */
.contact-form {
    background: none;
    /*background-size: 100% 100%;*/
    /*background-repeat: no-repeat;*/
    padding: 4rem 0rem 4rem 0rem;
}
.contact-form.projet-contact {
    padding-bottom: 0;
}
.contact-form--ct {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height:auto;
}
.contact-form--ct .col-left {
    background-image: url('../img/contact_image.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 526px;
    height: 623px;
}
.contact-form--ct .col-left.projet {
    background-image: url('../img/projet_image.png');
}
.installateur-form .contact-form--ct .col-left {
    background-image: url('../img/installateur-image.png');
}
.contact-form--ct .col-right {
    width: 674px;
    height: 100px;
    position: relative;
    padding-top: 4rem;
    padding-left: 1rem;
}
.documentions--form .contact-form--ct .col-right {
    width: 100%;
    height: 100%;
    padding-top: 1rem;
    padding-left: 1rem;
}
.documentions--form .coordonnee-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}
.documentions--form .coordonnee-container .input-group,
.documentions--form .coordonnee-container .doc-install_contact{
    width: 45%;
    margin-bottom: 0;
}
.contact-form--ct .col-right .block-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-form--ct .col-right h2 {
    font-size: 2.6rem;
    font-weight: 500;
}
.contact-form--ct .col-right h3 {
    font-size: 1.6em;
    line-height: 1em;
    font-weight: 400;
}
.contact-form--ct .col-right input[type=text],
.contact-form--ct .col-right input[type=email],
.contact-form--ct .col-right input[type=tel],
.contact-form--ct .col-right input[type=number],
.contact-form--ct .col-right select
{
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin-top: 1rem;
    padding-top: 5px;
    padding-bottom: 5px;
}
.contact-form--ct .col-right input[type=text].erreurFormulaire,
.contact-form--ct .col-right input[type=tel].erreurFormulaire,
.contact-form--ct .col-right input[type=email].erreurFormulaire,
.contact-form--ct .col-right input[type=number].erreurFormulaire,
.contact-form--ct .col-right select.erreurFormulaire,
.contact-form--ct .col-right textarea.erreurFormulaire
{
    border-top: 1px solid #e61e2a;
    border-left: 1px solid #e61e2a;
    border-right: 1px solid #e61e2a;
    border-bottom: 1px solid #e61e2a;
    margin-top: 1rem;
    box-shadow: none;
}
.documentions--form .coordonnee-container .input-group  input[type=email],
.documentions--form .coordonnee-container .input-group  input[type=tel],
.documentions--form .coordonnee-container input[type=text],
.documentions--form .coordonnee-container .col-right select,
.documentions--form .coordonnee-container .input-group  input[type=email].erreurFormulaire,
.documentions--form .coordonnee-container .input-group  input[type=tel].erreurFormulaire,
.documentions--form .coordonnee-container input[type=text].erreurFormulaire,
.documentions--form .coordonnee-container .col-right select.erreurFormulaire{
    margin:  0;
}
.contact-form--ct .col-right div.erreurFormulaire {
    border-top: 1px solid #e61e2a;
    border-left: 1px solid #e61e2a;
    border-right: 1px solid #e61e2a;
    border-bottom: 1px solid #e61e2a;
    padding: 0.7rem 0;
    box-shadow: none;
}
.contact-form--ct .col-right .form-contact {
    background-color: white;
    width: 745px;
    position: absolute;
    right: 0;
    padding: 3rem;
    font-weight: 300;
}
.documentions--form .contact-form--ct .col-right .form-contact,
.contact-form--ct.form-notices .col-right .form-contact
{
    position: relative;
    width: 100%;
    padding: 0;
}
.contact-form--ct .col-right #form-1 .form-contact {
    height: 432px;
}
.contact-form--ct .col-right #form-1 .form-contact .block-choix {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contact-form--ct .col-right #form-4,
.contact-form--ct .col-right #form-5,
.contact-form--ct .col-right #form-6,
button.next,
button.return,
button.send,
.title-formulaire,
.contact-form--ct .col-right .list-puce
{
    display: none;
}
.contact-form--ct .col-right #form-2, .contact-form--ct .col-right #form-3,
.contact-form--ct .col-right #form-4, .contact-form--ct .col-right #form-5
,.contact-form--ct .col-right #form-6
,.contact-form--ct .col-right #form-7
,.contact-form--ct .col-right #form-8
,.contact-form--ct .col-right #form-9{
    margin-bottom: 5rem;
    width: 100%;
}
.contact-form--ct .col-right #form-7
,.contact-form--ct .col-right #form-8
,.contact-form--ct .col-right #form-9{
    margin-bottom: 2rem;
    width: 100%;
}
.contact-form--ct .col-right #form-2 .form-contact {
    min-height: 207px;
    font-size: 1.6rem;
}
.contact-form--ct .col-right .form-contact,
.contact-form--ct .col-right .block-choix {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
.contact-form--ct .col-right .block--choix-element {
    margin-top: 2rem;
    width: 326px;
    height: 109px;
    border: 1px solid #cccccc;
    border-radius: 2%;
    display: flex;
}
.contact-form--ct .col-right .block--choix-element:hover {
    cursor: pointer;
}
.contact-form--ct .col-right .block--choix-element:hover svg,
.contact-form--ct .col-right .block--choix-element:hover p
{
    fill: #40a155;
    color: #40a155;
}
.contact-form--ct .col-right .block--choix-element p {
    line-height: 1.3;
}
.contact-form--ct #choix-projet {
    width: 100%;
}
.contact-form--ct #choix-projet .picto {
    width: 104px;
}
.contact-form--ct #choix-projet .element-text {
    width: 80%;
    text-align: center;
    padding: 3rem 0.7rem;
}
.contact-form--ct #choix-projet .element-title {
    margin-top: -1rem;
    margin-bottom: 2rem;
}
.block--choix-element .picto {
    width: 98px;
    height: 100%;
    display: block;
    padding: 1.5rem;
    display: flex;
    align-items: center;
}
.block--choix-element .element-title {
    font-weight: 500;
    font-size: 1.6rem;
}
.block--choix-element .element-text {
    width: 204px;
    height: 100%;
    display: block;
    padding: 1rem 1rem 1rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.3rem;
}
.form-contact .block-button {
    text-align: right;
    bottom: 20px;
    position: absolute;
    right: 40px;
}
.documentions--form .form-contact .block-button {
    position: relative;
    right: 10px;
}
.form-contact button.return, #dialog-contact-projet button,
#aides-financieres-results button.send{
    height: 49px;
    background-color: white;
    color: #e61e2a;
}
.form-contact button.next,
.contact-form button.send,
.contact-form button.send_aide,
.installateur-form button.send,
.documentions--form button.send,
.notices button.send-notice{
    height: 49px;
    background-color: #e61e2a;
    color: white;
    margin-left: 1rem;
}
.form-contact button.return:hover svg,
#aides-financieres-results button.send:hover svg{
    stroke: white;
}
.form-contact button.next:hover svg,
.contact-form button.send:hover svg,
.installateur-form button.send:hover svg,
.documentions--form button.send:hover svg,
.notices button.send-notice:hover svg,
.contact-form button.send_aide:hover svg
{
    stroke: #e61e2a;
}
.form-contact button.return:hover,
#aides-financieres-results button.send:hover,
#dialog-contact-projet button{
    background-color: #e61e2a;
    color: white;
}
.form-contact button.next:hover,
.contact-form button.send:hover,
.installateur-form button.send:hover,
.documentions--form button.send:hover,
.notices button.send-notice:hover,
.contact-form button.send_aide:hover
{
    background-color: white;
    color: #e61e2a;
}
.form-contact button.return svg,
#aides-financieres-results button.send svg{
    fill: none;
    stroke: #e61e2a;
    margin-right: 1.2rem;
    width: 20px;
}
.form-contact button.next svg,
.contact-form button.send svg,
.installateur-form button.send svg,
.documentions--form button.send svg,
.notices button.send-notice svg,
.contact-form button.send_aide svg
{
    fill: none;
    stroke: white;
    margin-right: 1.2rem;
    width: 20px;
}
.form_contact--title {
    display: flex;
}
.form_contact--title h3 {
    margin-bottom: 2rem;
    text-align: left;
    font-size: 2.4rem;
    line-height: 2.4rem;
    font-weight: 400;
}
.puce_child{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #cccccc;
    color: #fff;
    min-width: 1em;
    border-radius: 50%;
    vertical-align: middle;
    padding: 6px;
    margin: 0px;
    width: 23px;
    height: 23px;
    margin-right: -3px;
}

.puce_child.active{
    background-color: #e61e2a;
    border: 2px Solid #fff;
    color: #fff;
    min-width: 1em;
    border-radius: 50%;
    vertical-align: middle;
    padding: 6px;
    box-shadow: 0px -0px 0px 3px #e61e2a;
    -webkit-box-shadow: 0px -0px 0px 3px #e61e2a;
    -moz-box-shadow: 0px -0px 0px 3px #e61e2a;
    margin: 0px;
    width: 23px;
    height: 23px;
    cursor:pointer;
}
.vertical_line {
    border-top: 2px solid #cccccc;
    width: 20px;
    height: 1px;
    display: inline-block;
    margin-right: -4px;
}
.vertical_line.active {
    border-top: 2px solid #e61e2a;
}
.contact-form--ct .col-right .subtitle {
    font-size: 1.6rem;
    font-weight: 400;
}
.contact-form--ct .col-right .subtitle.with-space{
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}
.contact-form--ct .col-right .form_radio_label {
    font-size: 1.4rem;
    margin-right: 1.2rem;
}
.contact-form--ct .list_title h2 {
    padding-left: 2rem;
}
.contact-form--ct .block_produit {
    display: flex;
    margin-bottom: 1rem;
}
.contact-form--ct input[type="radio"]:checked + label::before {
    background: url(../img/ico-radio-on-green.svg);
}
.contact-form--ct .produit_picto {
    height: 70%;
    display: block;
}
.contact-form--ct .produit_picto.sav {
    height: 59%;
    display: block;
}
.contact-form--ct .produit_picto svg {
    display: block;
    margin: 0 auto;
    height: 100%;
}
.contact-form--ct .block--produit_element {
    width: 135px;
    height: 95px;
    border: 1px solid #cccccc;
    border-radius: 3%;
    position: relative;
    margin-right: 5rem;
    cursor: pointer;
}
.contact-form--ct .block_produit.personne .block--produit_element {
    margin-right: 3rem;
}
.contact-form--ct .block--produit_element .buble {
    background-image: url('../img/buble.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 17px;
    height: 15px;
    display: block;
    position: absolute;
    right: 6px;
    top: 5px;
}
.contact-form--ct .block--produit_element.active .buble {
    background-image: url('../img/buble-checked.svg');
}
.contact-form--ct .block--produit_element:hover, .contact-form--ct .block--produit_element.active{
    fill: #40a155;
    color: #40a155;
    font-weight: 400;
}
.contact-form--ct .block--produit_element:hover #Tracé_186,
.contact-form--ct .block--produit_element:hover #Tracé_187,
.contact-form--ct .block--produit_element:hover #Ligne_18,
.contact-form--ct .block--produit_element:hover #Ligne_15,
.contact-form--ct .block--produit_element.active #Tracé_186,
.contact-form--ct .block--produit_element.active #Tracé_187,
.contact-form--ct .block--produit_element.active #Ligne_18,
.contact-form--ct .block--produit_element.active #Ligne_15
{
    stroke: #40a155;
}

.contact-form--ct .block--produit_element p {
    text-align: center;
    margin: 0;
    font-size: 1.4rem;
}
.input-group {
    position: relative;
    margin: 33px 0 20px;
}

.input-group input:focus {
    outline: none;
}

.input-group input, .input-group select
{
    color: #707070;
}
.input-group input:empty ~ label,
.input-group.select label{
    position: absolute;
    left: 10px;
    top: 0px;
    pointer-events: none;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.input-group.select label{
    top: -35px;
    left: 0;
    font-size: 12px;
    line-height: 3;
    color: black;
    font-weight: inherit;
    margin-top: 0;
    margin-bottom: 0;
}
.input-group input:focus ~ label,
.input-group input.notempty ~ label,
.input-group select.notempty ~ label,
.input-group.select label,
.input-group.novalid input:focus ~ label{
    top: -35px;
    left: 0;
    font-size: 12px !important;
    line-height: 3;
}
.error-form {
    font-size: 14px;
    color: rgb(228, 0, 32);
    display: none;
}
#form-doc-error.error-form {
    display: inline;
}
.error-form::before {
    background-image : url('../img/warning.svg');
    -webkit-background-size: 100%;
    background-size: 100%;
    display: inline-block;
    content: ' ';
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: text-top;
}
/* AIDES FINANCIERES */
.simulateur .contact-form--ct .col-left {
    background-image: url('../img/simulateur_image.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 526px;
    height: 1021px;
}
.simulateur .contact-form--ct .col-right{
    width: 674px;
    height: 1021px;
    position: relative;
    padding-top: 0;
    padding-left: 1rem;
}
.simulateur .contact-form--ct .col-right .form-contact {
    top: 0;
    padding-bottom: 0;
    height: 100%;
}
.simulateur .contact-form--ct .col-right .form_radio_label {
    position: relative;
    vertical-align: top;
}
.simulateur .contact-form--ct .col-right .form_radio_label::before{
    top: 10px;
}
#tab-container {
    width: 80%;
    margin:0 auto;
}
#tab-simulateur-aide {
    width: 100%;
    margin:0 auto;
    border-spacing: 5px;
    border-collapse: separate;
    border: 0;
}
#tab-simulateur-aide td {
    background-color: #F6F6F6;
    border-radius: 1px;
    border-color: white;
    font-weight: 400;
}
#tab-simulateur-aide td.first {
    width: 50%;
    text-align: left;
    padding-left: 5rem;
}
#tab-simulateur-aide tr.total td.first {
    text-align: right;
    padding-right: 5rem;
}
#tab-simulateur-aide td.second {
    width: 20%;
    text-align: center;
}
#tab-simulateur-aide tr.total td, .aides-coproprietaire-text .first-cop {
    background-color: #E61E2A;color: white;"
}
.aides-coproprietaire-text {
    background-color: #F6F6F6;
    padding: 3rem;
}
.aides-coproprietaire-text ul {list-style: none}
.aides-coproprietaire-text li::before {
    content: "•"; color: #E61E2A;
    display: inline-block;
    opacity: 0.6;
    font-size: 25px;
    margin-left: -1em;
    position: absolute;
    top: -7px;
}
.aides-coproprietaire-text li {
    position: relative;
}

@media (max-width: 960px) {
    .contact-form {padding-top: 0;}
    .contact-form--ct {height: auto; }
    .contact-form--ct .col-left {
        display: none;
    }
    .contact-form--ct .col-right {
        width: 100%;
        display: block;
        height: auto;
    }
    .contact-form--ct .col-right .form-contact {
        position: relative;
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 2rem;
    }
    .contact-form--ct .col-right .block--choix-element {
        width: 48%;
    }
    .contact-form--ct{
        height:auto !important;
    }
}
@media (max-width: 500px) {
    .documentions--form .coordonnee-container .input-group,
    .documentions--form .coordonnee-container .doc-install_contact{
        width: 100%;
        margin-bottom: 0;
    }
    .contact-form--ct .col-right .form-contact {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0!important;
    }
    .contact-form  {
        padding-left: 0;
        padding-right: 0;
    }
    .contact-form--ct .col-left {
        width: 100%;
        height: auto;
    }
    .contact-form--ct .col-right {
        padding: 0;
    }
    .contact-form--ct #choix-projet .picto {
        width: 90px;
        height: 100%;
        display: block;
        padding: 1.5rem;
        display: flex;
        align-items: center;
    }
    .contact-form--ct #choix-projet .element-text {
        width: 236px;
        height: 100%;
        display: block;
        padding: 1rem 1rem 1rem 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.3rem;
    }
    .contact-form--ct #choix-projet .element-title {
        margin-top: auto;
        margin-bottom: auto;
    }
    .contact-form--ct .col-right .block-title {
        display: block;
    }
    .contact-form--ct .list_title {
        text-align: center;
        width: 100%;
        display: block;
    }
    .contact-form--ct .list_title h2 {
        margin-bottom: 0;
        padding-left: 0;
    }
    .contact-form--ct #chp_type_proprietaire label {
        margin-left:  0!important;
    }
    .simulateur .contact-form--ct .col-right {
        padding-left: 0;
    }
    .simulateur .block-button.txtright {
        bottom: 0 !important;
    }
    #tab-simulateur-aide tbody {
        display: flex;
        flex-direction: column;
    }
    #tab-simulateur-aide tbody tr {
        display: flex;
    }
    #tab-container {
        width: 100%;
    }
    #tab-simulateur-aide td.first { width: 60%}
    #tab-simulateur-aide td.second { width: 40%}
    table#tab-simulateur-aide tbody tr:nth-child(2n) {
        background-color: white;
    }
    .contact-form--ct .col-right .list-puce{
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    .contact-form--ct .col-right h3 {
        font-size: 2rem;
        font-weight: 500;
    }
    .contact-form--ct .col-right #form-2 {
        margin-bottom: 0;
    }
    .form-contact .block-button {
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: 2rem;
        width: 100%;
        bottom: inherit;
        right: inherit;
    }
    .contact-form--ct .col-right .block--choix-element {
        width: 100%;
    }
    .contact-form--ct .block--produit_element {
        width: 100%;
        margin-right: 1rem;
    }
    .contact-form--ct txtright {
        text-align: center;
        margin: 0 auto;
    }
    .contact-form--ct #form-4 .block--produit_element,
    .contact-form--ct .block_produit.douche .block--produit_element{
        width: 45%;
        margin-right: 1rem;
        margin-top: 1rem;
    }
    .contact-form--ct .block_produit.personne .block--produit_element {
        width: 29%;
        margin-right: 1rem;
        margin-top: 1rem;
    }
    .contact-form--ct .block_produit.personne .block--produit_element:last-child {
        margin-right: auto;
        margin-left: 1rem;
    }
    .contact-form--ct #form-4 .block_produit,
    .contact-form--ct .block_produit.douche,
    .contact-form--ct .block_produit.personne
    {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
.notices {
    background-color: #f6f6f6;
}
/*.notices select {*/
    /*background-color: #f6f6f6;*/
/*}*/
.notices--btn {
    align-self: flex-end;
    margin-bottom: 1rem;
    min-height: 4rem;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 400px) {
    .notices {
        padding: 1rem;
    }
    .notices--btn {
        margin-top: 1rem;
    }
}