#facture {
    border: 2px solid white;
    color: white;
    background-color: transparent;
}

#sabonner {
    margin-bottom: 20px;
}

#facture:hover {
    border: 2px solid transparent;
    color: black;
    background-color: white;
}

#btn-abo {
    margin-inline: 20%;
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 60%;
    display: flex;
    justify-content: center;
}


.body-monabonnement h1 {
    color: #000;
    text-align: center;
    font-size: 1.2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 40px;;
}

/* .body-monabonnement label {
    color: #000;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
} */


 .desc-info span{
    font-weight: bold;
 }

.body-monabonnement{
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 90%;
    align-items: baseline;
}

#info-abbonnement{
    width: 80%;
    margin: auto;
}
@media (max-width: 1400px) {
    .body-monabonnement{
        flex-direction: column;
    }
    .body-monabonnement section{
        width: 100%!important;
        margin: auto;
    }
    #details-abonnement{
        width: 100%!important;
    }
    #info-abbonnement{
        width: 100%;
    }
    ul{
        padding: 0!important;
    }
}
.body-monabonnement section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.body-monabonnement button {
    color: #000;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.body-monabonnement h3{
    font-weight: 700;
    font-size: 1.7em;
}
.body-monabonnement h4{
    font-weight: 700;
    font-size: 1.2em;
}
.body-monabonnement section p{
    font-weight: 700;
    font-size: 1.2em;
}
#details-abonnement{
    width: 80%;
    margin-top: 20px;
}
#details-abonnement ul{
    list-style: none;
}

.body-monabonnement p,
.body-monabonnement label {
    color: #000;
    font-size: 0.9em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.body-monabonnement h2 {
    color:var(--graycolor);
}
.body-monabonnement form{
    width:100%;
}

.body-monabonnement form div {
    width:100%;
    margin: 0.2rem 0;
    /* height:2vh; */
}

/* .body-monabonnement form div{
    display: flex;
    width:100%;
    flex-direction: row;
    justify-content: center;
    height: 100%;
} */





.message{
    display:flex;
    flex-direction: column;
    position:relative;
    /* margin-top:max(10vh,200px); */
    /* margin-bottom:max(10vh,200px); */
    text-align:center;
    width:70%;
    padding: max(10px,1.5%) max(1px,0%) max(10px,1.5%) max(1px,0%) ;
    color:var(--graycolor);
}





.navigation{
    display:flex;
    width:60%;
    min-width: 300px;
    margin-top: 1%;

}
.navigation h2{
    font-style: var(--calibri);
    width: 100%;
    text-align: center;
    margin:0;
}

.navigation h2 a{
    display: flex;
    width: 100%;
    border:1px solid black;
    justify-content: center;
    margin:0;
    text-decoration: none;
    height: 3vh;
}
.navigation p{
    width:10px;

}

.navigation .selected{
    background:var(--goldcolor);
    color: white;
}

.navigation .title-special {
    font-size: 0.55em;
}

.bouton-wrapper-btn{
    display:flex;
    flex-direction: column;
    width:70%;
    font-size: max(15px,0.5em);
}


.bouton-wrapper-btn>.bouton-message{
    width:90%;
    max-width:100%;
    margin-top:5vh;
    height: 10vh;
    max-height: 200px;

}
.bouton-message{
    display: flex;
    /* font-size: min(25px, 2.2vw); */
    padding:1vh 0.5vw 1vh 0.5vw ;
    max-width: none;
    margin:1vh auto;
}

.bouton-wrapper-btn>form{
    width:90%;
     max-width:100%;
     font-size: inherit;

 }

.payment_form label{
    display:flex;
    height:fit-content;
    flex-direction: column;
}
.payment_form div{
    display: flex;
    /* height:100%; */
    font-size: 16px;
    /* min-height:min(50px,10vh); */
}
.card-element{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:1vh;
    padding:10px;
    border:1px solid black;
    border-radius: 4px;

}

.btn-disabled {
    opacity: 0.5;
}

.card-errors{

    color:red;
}
.case-cocher{
    position: relative;
    display:flex;
    margin-top:20px;
}

.cta{
    max-width: 300px;
    padding: 10px 10px;
}

.scroller-factures {
    display: flex;
    flex-direction: column;
    width:80%;
    height:80%;
    min-height: 500px;
    overflow-y: hidden;
    border:1px solid #6d6c6c;
    border-radius: 20px;
    font-size:max(15px, 0.5em);
    margin: auto;
}

.scroller-content{
    scrollbar-width: thin;
    overflow-y: scroll;
    width:100%;
    height:100%;
}
.message p{
    justify-content: center;
    padding:0;
}

.message form{
    margin:0 auto;
    width:100%;
    padding:0;

}

.message-facture h1 {
    text-align: left;
    font-family: var(--calibri);
    text-transform: none;
    color: gray;
}

.message-facture {
    width: 80%;
    padding: 1%;
}

#formAbonnementIndetermine {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
    width: 95%;
    font-family: var(--calibri);
}

#divIndetermine {
    width:70%;

}



/* #divIndetermine label {
    margin:auto;
    text-align: left;
}

.btn-disabled {} */


.StripeElement {
    background-color: white;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.StripeElement--focus {
    border-color: #6772e5;
}

.stripe-logo {
  display: inline-block;
  background: linear-gradient(135deg, #6b3fd2, #00c6ff);
  color: white;
  font-size: 1.5em;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 12px;
  text-align: center;
  text-transform: lowercase;
  width: auto!important;
}

.stripe-disabled {
  opacity: 0.5;
  pointer-events: none;
}