.textType6b {
    color: #979797;
}
.content{
    background-color: #F2F4F6;
    padding-bottom:  12.5rem;
}

/* ----- PERSONAL INFORMATION ----- */
.info {
    max-width: 670px;
    margin: 0 auto;
    position: relative;
}

.info__header {
    padding: 9.5626rem 0 3.375rem;
}

.info__form {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, auto);
    column-gap: 6.25rem;
    padding: 6.25rem 6.25rem 7.6875rem;
    box-shadow: 0 20px 40px 0 rgba(13, 18, 39, 0.30);
    border-radius: 30px;
    background-color: #FFFFFF;
}

.info__form__adress__label {
    grid-area: 1 / 1 / 2 / -1;
}

.info__form__adress__input {
    grid-area: 2 / 1 / 3 / -1;
}

.info__form__city__label {
    grid-area: 3 / 1 / 4 / 2;
}

.info__form__city__input {
    grid-area: 4 / 1 / 5 / 2;
}

.info__form__postal__label {
    grid-area: 3 / 2 / 4 / -1;
}

.info__form__postal__input {
    grid-area: 4 / 2 / 5 / -1;
}

.info__form__email__label {
    grid-area: 5 / 1 / 6 / -1;
}

.info__form__email__input {
    grid-area: 6 / 1 / 7 / -1;
}

.info__form__button {
    grid-area: 8 / 1 / 9 / 2;
}

#messageInfo {
    position: absolute;
    bottom: 20%;
    color: rgb(124, 17, 17); 

}


.info__form input:not(:last-of-type) {
    border-top:none;
    border-right:none; 
    border-bottom:2px solid #F2F4F6;
    border-left:none; 
    width: 100%;
    max-height: 5.75rem;
    margin-bottom: 3.4375rem;
    padding-bottom: 1.2rem;
}



/* ----- PAYMENT SUMMARY ----- */
.payment {
    margin: 6.625rem auto 0;
    max-width: 1170px;
    width: 100%;
    display: grid;
    grid-template-columns: 470px 1fr;
    grid-template-rows: 121px 1fr;
    box-shadow: 0 20px 40px 0 rgba(13, 18, 39, 0.30);
    border-radius: 30px;
    overflow: hidden;
    height: 100%;
}

.payment__overview {
    width: 100%;
    grid-area: 1 / 1 / 3 / 2;
    padding-top: 3.9975rem;
    padding-bottom:4.1875rem;
    padding-left: 4.375rem;
    background-color: #ffe9e9;
}

.payment__overview__table {
    border-collapse: collapse;
    margin: 4.1875rem auto auto 1.875rem;
    text-align: start;
    max-width: 270px;
    width: 100%;
    overflow: hidden;
}

.payment__overview__table tr:nth-of-type(3) th{
    border-bottom: 6px solid #f9c4d2;

}

.payment__overview__td:nth-of-type(odd),.payment__overview__th:nth-of-type(odd) {
    padding-right: 80px;
}

.payment__overview__th {
    text-align: start;
    padding-top: 1.8rem;
    padding-bottom: 1.5rem;
}
.payment__overview__table tr:nth-of-type(4) td{
    padding-top: 1.5rem;
}


/* ------- PAYMENT LINKS ----- */
.payment__methods{
    display: flex;
    justify-content: space-between;
    grid-area: 1 / 2 / 2 / 3;
    border-bottom: 2px solid #F2F4F6;
    padding-left: 6.25rem;
    padding-right: 4rem;
    background-color: #FFFFFF;
}
.payment__methods__li{
    list-style: none;
    border-bottom: 6px solid rgba(0, 0, 0, 0);
    display: inline-block;
    text-align: center;
    width: 8.125rem;
    padding-top: 4.0625rem;
    padding-bottom: 1.8125rem;
    cursor: pointer;
}
.payment__methods__li:hover, .payment__methods__li--active{
    border-bottom: 6px solid #f9c4d2;
    display: inline-block;
    width: 8.125rem;
    padding: 4.0625rem auto 1.8125rem;
}
.payment__methods__li a {
    color: black;
}



/* ----- PAYMENT METHOD ----- */
.payment__form {
    background-color: #FFFFFF;
    max-width: 700px;
    grid-area: 2 / 2 / 3 / 3 ;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 6.25rem;
    padding: 6.25rem 6.25rem 3.875rem;
    position: relative;
}

.payment__form__cardnumber__label {
    grid-area: 1 / 1 / 2 / -1;
}

.payment__form__cardnumber__input {
    grid-area: 2 / 1 / 3 / -1;
}

.payment__form__date__label {
    grid-area: 3 / 1 / 4 / 2;
}

.payment__form__date__input {
    grid-area: 4 / 1 / 5 / 2;
}

.payment__form__cvv__label {
    grid-area: 3 / 2 / 4 / -1;
}

.payment__form__cvv__input {
    grid-area: 4 / 2 / 5 / -1;
}

.payment__form__name__label {
    grid-area: 5 / 1 / 6 / -1;
}

.payment__form__name__input {
    grid-area: 6 / 1 / 7 / -1;
}

.payment__form__button {
    grid-area: 7 / 2 / 8 / -1;
    justify-self: end;

}

#messagePayment {
    position: absolute;
    bottom: 21%;
    left: 15%;
    color: rgb(124, 17, 17);
}


.payment__form input:not(:last-of-type) {
    border-top:none;
    border-right:none; 
    border-bottom:2px solid #F2F4F6;
    border-left:none; 
    width: 100%;
    max-height: 5.75rem;
    margin-bottom: 3.4375rem;
    padding-bottom: 1.2rem;
}




/* MEDIA QUERIES TABLET */
@media screen and (max-width: 768px) {
    .content{
        padding-bottom:  5.5rem;
    }
    
    /* ----- PERSONAL INFORMATION ----- */
      
    .info__header {
        padding: 2rem 3%;
    }
    .info__form {
        margin: 0 auto;
        width: 95%;
        column-gap: 4.25rem;
        padding: 2.25rem 4.25rem 2.6875rem;
    }
        
    #messageInfo {
        bottom: 17%;    
    }
      
    /* ----- PAYMENT SUMMARY ----- */
    .payment {
        margin: 2.625rem auto 0;
        max-width: 700px;
        width: 95%;
        grid-template-columns: 1fr;
        grid-template-rows: auto 121px 1fr;
    }
    
    .payment__overview {
        grid-area: 1 / 1 / 2 / -1;
        padding-top: 3.9975rem;
        padding-bottom: 5.1875rem;
        padding-left: 3.375rem;
        margin: 0 auto;
    }
    
    .payment__overview__table {
        margin: 4.1875rem auto auto 1.875rem;
        max-width: 700px;
        width: 80%;
    }
    
    .payment__overview__table tr:nth-of-type(3) th{
        width: 80%;
    }
    
    
    /* ------- PAYMENT LINKS ----- */
    .payment__methods{
        grid-area: 2 / 1 / 3 / -1;
        padding-left: 3rem;
        padding-right: 2.25rem;
    }
    
    
    /* ----- PAYMENT METHOD ----- */
    .payment__form {
        max-width: 700px;
        width: 100%;
        grid-area: 3 / 1 / 4 / -1 ;
        column-gap: 4.25rem;
        padding: 4.25rem 4.25rem 2.6875rem;
    }
    #messagePayment {
        bottom: 20%;
        left: 10%;
    }
}

/* MEDIA QUERIES MOBILE */
@media screen and (max-width: 360px) {
    .content{
        padding-bottom: 5.5rem;
    }
    
    /* ----- PERSONAL INFORMATION ----- */
      
    .info__header {
        padding: 2rem 3%;
    }
    .info__form {
        column-gap: 1.25rem;
        padding: 2.25rem 1.25rem 2.6875rem;
    }
        
    #messageInfo {
        bottom: 15%;    
    }

    /* ----- PAYMENT SUMMARY ----- */
    .payment {
        grid-template-rows: auto 100px 1fr;
        margin: 2.625rem auto 0;
        max-width: 360px;
    }
    
    .payment__overview {
        padding-top: 1.9975rem;
        padding-bottom: 4.1875rem;
        padding-left: 1.375rem;
    }
    
    .payment__overview__table {
        margin: 2rem auto auto 2%;
        max-width: 350px;
        width: 85%;
    }
    
    .payment__overview__table tr:nth-of-type(3) th{
        width: 50%;
    }

    .payment__overview__td:nth-of-type(odd),.payment__overview__th:nth-of-type(odd) {
        padding-right: 2rem;
    }
    
    .payment__overview__th {
        padding-top: .8rem;
        padding-bottom: .5rem;
    }
    .payment__overview__table tr:nth-of-type(4) td{
        padding-top: 1.5rem;
    }
    
    
    /* ------- PAYMENT LINKS ----- */
    .payment__methods{
        max-width: 350px;
        padding-left: 0;
        padding-right: 0;
    }
        
    .payment__methods__li{
        cursor: default;
        border-bottom: 6px solid rgba(0, 0, 0, 0);
    }
    .payment__methods__li--active, .payment__methods__li:hover {
        border-bottom: 6px solid #f9c4d2;
    }
    .payment__methods__li, .payment__methods__li--active, .payment__methods__li:hover {
        width: 7.292rem;
        height: auto;
        padding: 1rem auto 1rem;
    }
    
    
    /* ----- PAYMENT METHOD ----- */
    .payment__form {
        max-width: 350px;
        column-gap: 1.25rem;
        padding: 2.25rem 1.25rem 2.6875rem;
    }
    #messagePayment {
        bottom: 19%;
        left: 6%;
    }
}