/*Index*/
.boxSelectTrimestre{
    width: 300px;
    border: 1px solid var(--greyNeutral);
    border-radius: 10px;
    padding: 20px;
    transition: 0.2s ease all;
    display: inline-block;
    margin: 20px;
}
/*Clients*/

.listClientsSnt{
    width: 100%;
    border-collapse: collapse;
}
.listClientsSnt tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.listClientsSnt tr:last-child{
    border: 0;
}
.listClientsSnt tr:hover:not(:first-child){
    background-color: var(--mainBgColor);
}
.listClientsSnt td{
    padding: 20px;
}
.listClientsSnt td:not(:first-child){
    text-align: center;
}
.texteVert{
    color: var(--greenSuccess);
}
.texteRouge{
    color: var(--redError);
}
.listClientsSnt th{
    color: var(--texteBleu);
    padding: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width: 650px) {
    .listClientsSnt th{
        padding: 10px;
    }
}
.clientCreate{
    width: 45%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
@media screen and (max-width: 650px) {
    .clientCreate{
        width: 90%;
    }
}

.infosClient{
    display: inline-block;
    width: 30%;
}

#groupInfoClient{
    overflow: hidden;
    height: 95px;
}

.arrowOpenDiv{
    cursor: default;
    float: right;
    width: 50px;
    transition: transform 220ms ease-in-out;
    text-align: center;
    transform: rotate(90deg);
}

.boxSuppBordered{
    margin: 50px auto 0 auto;
    position: relative;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--greyNeutral);
    min-height: 200px;
    padding: 15px;
    left: 0;
    right: 0;
    box-sizing: border-box;
}

.titreBoxBordered{
    /* width: 200px; */
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: var(--highlightText);
    display: inline-block;
}

#adressesIntervention {
    width: 100%;
    display: grid;
    gap: 5px;
    grid-template-columns: 350px 350px 350px;
    align-content: center;
    justify-content: start;
}

.adresse{
    display: inline-block;
    border: 1px solid var(--mainTextColor);
    padding: 10px;
    min-height: 30px;
    min-width: 300px;
    line-height: 26px;
    border-radius: 38px;
    margin: 10px;
    vertical-align: top;
}
.adresse p{
    margin: 0;
}
.adresse i{
    cursor: default;
    border: 1px solid var(--mainTextColor);
    color: var(--mainTextColor);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    transition: 0.2s ease all;
    padding: 5px;
}
.adresse i:hover{
    border-color: var(--redError);
    color: var(--redError);
}

.bigTexte{
    font-size: 1.2em;
    margin: auto 30px;
}
.shortInput{
    width: 30%;
    display: inline-block;
    vertical-align: bottom;
}
.miniInput{
    width: 15%;
    display: inline-block;
    vertical-align: bottom;
}
@media screen and (max-width: 650px) {
    .shortInput, .miniInput{
        width: 90%;
        display: block;
    }
}
.miniTexte{
    font-size: 12px;
}

.headerBigBox{
    width: 100%;
    min-height: 40px;
    margin-bottom: 20px;
}

/*Forfait*/

.listForfaitsSnt{
    width: 100%;
    border-collapse: collapse;
}
.listForfaitsSnt tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.listForfaitsSnt tr:last-child{
    border: 0;
}
.listForfaitsSnt tr:hover:not(:first-child){
    background-color: var(--mainBgColor);
}
.listForfaitsSnt td{
    padding: 20px;
}
.listForfaitsSnt td:not(:first-child){
    text-align: center;
}
.listForfaitsSnt th{
    color: var(--texteBleu);
    padding: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width: 650px) {
    .listForfaitsSnt th{
        padding: 10px;
    }
}

/*DEVIS*/

.listDevisSnt{
    width: 100%;
    border-collapse: collapse;
}
.listDevisSnt tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.listDevisSnt tr:last-child{
    border: 0;
}
.listDevisSnt tr:hover:not(:first-child){
    background-color: var(--mainBgColor);
}
.listDevisSnt td{
    padding: 20px;
}
.listDevisSnt td:not(:first-child){
    text-align: center;
}
.texteVert{
    color: var(--greenSuccess);
}
.texteRouge{
    color: var(--redError);
}
.listDevisSnt th{
    color: var(--texteBleu);
    padding: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width: 650px) {
    .listDevisSnt th{
        padding: 10px;
    }
}

.devisCreate{
    width: 90%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.devisCreateHalf{
    width: 45%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.devisClientCreate{
    width: 43%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
@media screen and (max-width: 650px) {
    .devisClientCreate{
        width: 90%;
    }
}


.bordered{
    border: 1px solid var(--greyNeutral);
    border-radius: 10px;
}
#adresseIntervention, #infosClient{
    margin-top: 20px;
}

.devisClientAdresseCreate{
    width: 43%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}

@media screen and (max-width: 650px) {
    .devisClientAdresseCreate{
        width: 90%;
    }
}

#searchAdresseOfClient{
    display: none;
}

#updateAdresseOfClient{
    display: none;
}
#createAdresseOfClient{
    display: none;
}
@media screen and (max-width: 768px) {
    .devisCreateHalf{
        width: 90%;
    }
}
@media screen and (max-width: 375px) {
    .devisClientCreate, .devisClientAdresseCreate{
        width: 90%;
        display: block;
    }
}

#groupInfoDevis{
    overflow: hidden;
    height: 250px; 
}
#infosClientDevis, #adresseInterventionDevis{
    margin-top: 20px;
}

#contentListMembre{
    margin-top: 150px;
}
.SntMembreVignette{
    width: 100px;
    border: 1px solid var(--greyNeutral);
    border-radius: 10px;
    padding:  20px;
    transition: 0.2s ease all;
    display: inline-block;
    margin: 20px;
}
.SntMembreVignette:hover{
    opacity: 0.5;
}

.infosMembre{
    display: inline-block;
    width: 30%;
}

#groupInfoMembre{
    overflow: hidden;
}

.letterAvatar{
    font-size: 40px;
    color: #ffffff;
    line-height: 94px;
    margin: 0;
}
.bas_de_pageDevis{
    text-align: right;
}
/* .headerDevis{
    border-bottom: 1px solid #333333;
    text-align: right;
} */
.infosClientDevis{
    border: 2px solid #333333;
    font-weight: bold;
    width: 300px;
    margin-left: 60%;
    margin-top: 50px;
    padding: 20px;
}
.adresseInterventionDevis, .frequenceInterventionDevis, .montantInterventionDevis, .remarqueDevis{
    margin: 50px auto;
    vertical-align: middle;
    display: flex;
}
.pageDevis i{
    margin: 0 20px;
}
.pageDevis img{
    max-height: 200px;
}
@media screen and (max-width: 650px) {
    .infosClientDevis{
        width: 90%;
        margin-left: 0;
    }
}

/* FACTURE */
.listFacturesSnt{
    width: 100%;
    border-collapse: collapse;
}
.listFacturesSnt tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.listFacturesSnt tr:last-child{
    border: 0;
}
.listFacturesSnt tr:hover:not(:first-child){
    background-color: var(--mainBgColor);
}
.listFacturesSnt td{
    padding: 20px;
}
.listFacturesSnt td:not(:first-child){
    text-align: center;
}
.listFacturesSnt th{
    color: var(--texteBleu);
    padding: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width: 650px) {
    .listFacturesSnt th{
        padding: 10px;
    }
}
.postesFacture{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}
.postesFacture tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.postesFacture tr:first-child{
    border-bottom: none;
    cursor: default;
    transition: 0.2s ease all;
}
.postesFacture tbody tr:hover{
    background-color: var(--mainBgColor);
}
.postesFacture tr > td:nth-child(1){
    width: 5%;
}
.postesFacture tr > td:nth-child(2){
    width: 60%;
}
.postesFacture tr > td:nth-child(3){
    width: 10%;
}
.postesFacture tr > td:nth-child(3) input{
    text-align: center;
}
.postesFacture tr > td:nth-child(4){
    width: 10%;
}
.postesFacture tr > td:nth-child(4) input{
    text-align: center;
}
.postesFacture tr > td:not(:first-child):not(:last-child){
    vertical-align: bottom;
}
.postesFacture td{
    text-align: center;
}
.postesFacture th{
    color: var(--texteBleu);
    /* padding: 20px; */
    font-weight: normal;
    text-align: center;
}
.postesFacturePlaceholderDragging{
    background-color: var(--texteBleu);
    height: 88px;
}
.postesFacture .groupInput{
    margin-top: 20px;
    width: 100%;;
}
.postesFacture textarea{
    height: 65px;
}
.postesFacture .nonModifiable{
    border-bottom: 1px solid var(--mainTextColorDark) !important;
}
.postesFacture .nonModifiable:hover{
    background-color: var(--boxBgColor);
}
#totalFacture{
    margin: 35px;
    font-size: 50px;
    color: var(--texteBleu);
}
.hideAtStart{
    display: none !important;
}
.btnRoundBottomRightMiniSeconde{
    right: 50px;
}
.bigTexteFacture{
    font-size: 50px;
}

.factureCreateHalf{
    max-width: 45%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.factureClientCreate{
    width: 43%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
@media screen and (max-width: 650px) {
    .factureClientCreate, .factureCreateHalf{
        width: 90%;
        max-width: 90%;
    }
    #totalFacture{
        width: 90%;
        margin: 0;
        font-size: 24px;
    }
    .btnFacture div{
        display: block;
    }
}
.texteCenter{
    text-align: center;
}
#totalFactureGroupe{
    text-align: right;
    color: var(--texteBleu);
    font-weight: 700;
    font-size: 20px;
}
.btnUnpaidActive{
    background-color: var(--redError);
    color: var(--mainTextColorDarkest);
}



/*NC*/


.listNcsSnt{
    width: 100%;
    border-collapse: collapse;
}
.listNcsSnt tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.listNcsSnt tr:last-child{
    border: 0;
}
.listNcsSnt tr:hover:not(:first-child){
    background-color: var(--mainBgColor);
}
.listNcsSnt td{
    padding: 20px;
}
.listNcsSnt td:not(:first-child){
    text-align: center;
}
.listNcsSnt th{
    color: var(--texteBleu);
    padding: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width: 650px) {
    .listNcsSnt th{
        padding: 10px;
    }
}
.postesNc{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}
.postesNc tr{
    border-bottom: 1px solid var(--mainTextColorDark);
    cursor: default;
    transition: 0.2s ease all;
}
.postesNc tr:first-child{
    border-bottom: none;
    cursor: default;
    transition: 0.2s ease all;
}
.postesNc tbody tr:hover{
    background-color: var(--mainBgColor);
}
.postesNc tr > td:nth-child(1){
    width: 5%;
}
.postesNc tr > td:nth-child(2){
    width: 60%;
}
.postesNc tr > td:nth-child(3){
    width: 10%;
}
.postesNc tr > td:nth-child(3) input{
    text-align: center;
}
.postesNc tr > td:nth-child(4){
    width: 10%;
}
.postesNc tr > td:nth-child(4) input{
    text-align: center;
}
.postesNc tr > td:not(:first-child):not(:last-child){
    vertical-align: bottom;
}
.postesNc td{
    text-align: center;
}
.postesNc th{
    color: var(--texteBleu);
    /* padding: 20px; */
    font-weight: normal;
    text-align: center;
}
.postesNcPlaceholderDragging{
    background-color: var(--texteBleu);
    height: 88px;
}
.postesNc .groupInput{
    margin-top: 20px;
    width: 100%;;
}
.postesNc textarea{
    height: 65px;
}
.postesNc .nonModifiable{
    border-bottom: 1px solid var(--mainTextColorDark) !important;
}
.postesNc .nonModifiable:hover{
    background-color: var(--boxBgColor);
}
#totalNc{
    margin: 35px;
    font-size: 50px;
    color: var(--texteBleu);
}
.hideAtStart{
    display: none !important;
}
.btnRoundBottomRightMiniSeconde{
    right: 50px;
}
.bigTexteNc{
    font-size: 50px;
}

.ncCreateHalf{
    max-width: 45%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.ncClientCreate{
    width: 43%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
@media screen and (max-width: 650px) {
    .ncClientCreate, .ncCreateHalf{
        width: 90%;
        max-width: 90%;
    }
    #totalNc{
        width: 90%;
        margin: 0;
        font-size: 24px;
    }
    .btnNc div{
        display: block;
    }
}