/* PAGE HEAD /////////////////////////////*/
.margin-left-right{
    margin-inline: var(--lr-spacing-dt);
}
.centered-row{    
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-div{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.margin-inline{    
    /* margin-inline: 3vw; */
}
.input-fields{
    padding: 0.6vw;
    border: 0.19vw solid black;
}
.input-fields-file{
    padding: 0.6vw;
    border-block: 0.19vw solid black;
    border-left: 0.19vw solid black;
} 
.input-fields::placeholder, textarea::placeholder {
    color: #6C6C6C;
}
.input-warning {
    font-size: 1.2vw;
    font-weight: 600;
    display: none;
    color: red;
    padding-top: 0.5vw;
    padding-left: 1vw;
}


.last-name {
    position: relative;
  }
  
  .error-icon {
    position: relative;
    bottom: 4vw;
    left: 44.1vw;
    transform: translateY(-50%);
    color: red;
  }
  .error-icon-file{
    position: relative;
    bottom: -1.1vw;
    left: 37.1vw;
    transform: translateY(-50%);
    color: red;
  }
  #error-icon-lname, #error-icon-email{
    left:43vw;
    width: 0;
  }
  .input-warning {
    display: none;
  }
  .fa-lg1 {
      font-size: 1.9vw;
  }
  .fa-lg2 {
      font-size: 1.8vw;
  }




.submission-page-wrapper{
    display: flex;
    flex-direction: column;
    /* margin: 0; */
    position: relative;
    top: -28vw;
}
.crochet-footer{
    display: none;
}
/* #submission-title-desktop, #submission-title-mobile{
    display: none;
} */

/*  HEADER IMAGES ////////////////////////////////// */
.image-header {
    width: 62vw;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: black;
    color: white;
}
.img-top { grid-area: 1 / 1 / 5 / 6;
    border-top: 1.25vw solid white;
    border-right: 1.25vw solid white
}
.img-bottom-1 { grid-area: 5 / 1 / 7 / 2;
    border-top: 0.75vw solid white;
    border-right: 0.75vw solid white;
 }
.img-bottom-2 { grid-area: 5 / 2 / 7 / 4;
    border-top: 0.75vw solid white;
 }
.img-bottom-3 { grid-area: 5 / 4 / 7 / 6;
    border-top: 0.75vw solid white;
    border-left: 0.75vw solid white;
    border-right: 1.25vw solid white;
 }
.img-container {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ENTRY TEXT ////////////////////////// */
.container-entry-text {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: #1D2339;
}
.entry-text{ grid-area: 1 / 1 / 2 / 3;
    margin-block: 6.1vw;
    padding-right: 4vw;
}

/* FORM / SHAPE ////////////////////////////////////// */
.form-left{
    /* width: 3vw; */
    border-top: 0.4vw solid black;
}
.form-right{
    width: 3vw;
    border-left: 0.3vw solid black;
}
.container-form{
    display: flex;
    flex-direction: row;
    margin-left: 0;
}
.line-around{
    border-top: 0.3vw solid black;
    padding-left: 3.4vw;
    width: 96.6vw;
}
.form-bottom-layout{
    display: flex;
    flex-direction: row;
    margin-top: 6vw;
}
.button-line{
    width: 100%;
    border-bottom: 0.3vw solid black;
}

/* FORM CONTACT //////////////////////////// */
.form-contact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(4, 1fr); */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.contact-title { grid-area: 1 / 1 / 3 / 3;
    color: #1D2339;
    padding-top: 3.9vw;
    margin-bottom: 3vw;
}
.last-name { grid-area: 3 / 1 / 4 / 3;}
.first-name { grid-area: 3 / 3 / 4 / 5;}
.email { grid-area: 4 / 1 / 5 / 3;}
.phone { grid-area: 4 / 3 / 5 / 5;}
#last-name, #email{
    width: 98%;
}
#first-name, #phone{
    width: 100%;
    border-right: none;
}
.last-name, .first-name, .company-name, .company-website, .activity-sector, .budget{
    padding-bottom: 2vw;
}

/*  FORM BESOINS ///////////////////////////// */
.checkbox-bg{
    position: relative;
    /* left: -3vw;
    width: 100vw; */
    left: -4vw;
    width: 101vw;
}
.besoins-title {
    color: #1D2339;
    margin-top: 6.2vw;
    margin-bottom: 3.3vw;
}

/*  FORM ENTREPRISE /////////////////////// */
.company {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(10, 0.5fr); */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.company-title { grid-area: 1 / 1 / 2 / 3;
    color: #1D2339;
    margin-top: 6.1vw;
    margin-bottom: 3.2vw;
}
.company-name { grid-area: 2 / 1 / 3 / 3; }
.company-website { grid-area: 2 / 3 / 3 / 5; }
.activity-sector { grid-area: 3 / 1 / 4 / 3; }
.add-file { grid-area: 3 / 3 / 4 / 5; }
.other-informations { grid-area: 5 / 1 / 6 / 3;
    color: #1D2339;
    margin-top: 4vw;
    margin-bottom: 3vw;
}
.budget { grid-area: 6 / 1 / 7 / 3; }
.comments { grid-area: 7 / 1 / 11 / 5; 
    height: 25vw;
}

#comments{
    border-block: 0.19vw solid black;
    border-left: 0.19vw solid black;
    color: #6C6C6C;
    padding: 0.5rem;
    height: 100%;
}
#company-name, #activity-sector, #budget{
    width: 98%;
}
#company-website, #comments, #add-file{
    width: 100%;
    border-right: none;
}
.add-file label {
    color: #6C6C6C;
    display: flex;
    cursor: pointer;
    height: 2vw;
    overflow: hidden;
    word-wrap: break-word;
}
.add-file label img {
    width: 2vw;
    height: 2vw;
    vertical-align: middle;
    margin-right: 10px;
}
#delete-icon{
    position: relative;
    margin-right: 1vw;
    margin-block: 4px;
}

/*  SIMPLE-PROCESS ////////////////// 
    INSIDE: 
    project.project-includes.submission-simple-process */

.submission-bottom-page{
    margin-top: 1.5vw;
    margin-bottom: -21vw;
}

/*  PROMESSES /////////////////// */
.container-promesse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(5, 1fr); */
    grid-column-gap: 13vw;
    grid-row-gap: 0px;
    margin-block: 6vw;
}
.promesse-main-title { grid-area: 1 / 1 / 2 / 3;
    color: #1D2339;
}
.design { grid-area: 2 / 1 / 4 / 3; 
    margin-top: 2vw;
}
.shopify { grid-area: 2 / 3 / 4 / 5; 
margin-top: 2vw;
}
.conversion { grid-area: 4 / 1 / 6 / 3; 
margin-top: 1.6vw;
}
.best-price { grid-area: 4 / 3 / 6 / 5; 
margin-top: 1.6vw;
}

.promesse-title{
    color: #0C0C0C;
    margin-block: 1vw;
}
.bottom-form{
    height: 1.9vw;
}

/* SUCCESS MODAL //////////////////////////// */
.modal{
    max-width: 50ch;
}
.modal::backdrop{
    background: rgba(0, 0, 0, 0.8);
}
.success-modal{
    background: white;
}
.error-modal{
    background: white;
}
.modal-title{
    color: #0C0C0C;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-block: 1vw;
}
.modal-text{
    color: #000;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* Disable scroll with modal */
body.modal-open {
    overflow: hidden;
    position: static;
    width: 100%;
}

.btn-modal-test{
    margin-top: 5vw;
}


/* BTN */
.btn{
    font-weight: bold;
    padding: 4px;
    padding-block: 10px;
    padding-inline: 30px;
    margin-bottom: 10px;
}
.btn-submit{
    position: relative;
    /* bottom: -27px; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 3.5vw;
    border: 0.3vw solid #000;
    background-color: white;
    color: #000;
}
.btn-close-success-modal,
 .btn-close-error-modal{
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: black;
    color: white;
    border-radius: 1px;
    text-align: center;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 1.2rem;
}


/* CELL VIEW */
@media screen and (max-width: 768px) and (orientation: portrait){
    .submission-page-wrapper {
        top: -34.3vw;
    }
    /* MArgin for page */
    .margin-left-right{
        margin-inline: var(--lr-spacing-mob);
    }

    .top-img-txt-container{
        width: 100%;
    }
    .top-img-txt{
        text-align: left;
    }

    .special-width{
        /* margin-left: 0; */
    }
    /* Mobile errors */
    .input-warning {
        font-size: 2.2vw;
    }    
    .error-icon {
        bottom: 6.6vw;
        left: 88.1vw;
    }    
    .error-icon-file{
        bottom: -2.3vw;
        left: 74.1vw;
    }
    #error-icon-lname, #error-icon-email{
      left:88vw;
    }
    .fa-lg1 {
        font-size: 3.8vw;
    }
    .fa-lg2 {
        font-size: 3.8vw;
    }
    #delete-icon {
        margin-right: 2vw;
        margin-block: 1px;
    }
    /* Mobile title */
    .submission-title{
        width: 100%;
        height: 145.8vw;
        background-color: var(--color-dark);
        font-size: 11.28vw;
        font-weight: 200;
        line-height: normal;
        color: white;
    }
    .submission-title strong{
        font-weight: 700;
    }
    .submission-title-mobile-title{
        padding-left: var(--lr-spacing-mob);
    }
    .submission-title-mobile-container{
        position: relative;
        /* margin-left:6.3vw; */
        padding-top: 32.31vw;
    }
    .submission-title-mobile-verticalLine{
        position: relative;
        right: 0px;
        bottom: 3.1vw;
        height: 70vw;
        left: 21.1vw;
        border-left: 1.5vw solid white;
    }
    .submission-en-line-width{
        left: 49.5vw;
    }
    .submission-title-mobile-en-verticalLine{
        position: absolute;
        height: 70vw;
        width: 74.7vw;
        border-left: 1.5vw solid white;
    }
    .image-header {
        width: 82vw;
        height: 66.2vw;
    }

    /* ENTRY TEXT */
    .container-entry-text {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        color: #1D2339;
        margin-bottom: 7vw;
    }
    .entry-text {
        margin-top: 15.5vw;
        margin-bottom: 4vw;
    }
    .form-contact > * {
        margin: 0; 
        padding: 0;
    }

    /* FORM CONTACT //////////////////////////// */   
    .line-around{
        width: 96.6vw;
        border-top: 0.5vw solid black;
    }
    .form-right {
        border-left: 0.5vw solid black;
    }
    .button-line {
        border-bottom: 0.5vw solid black;
    }
    .form-contact {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 3vw;
    }    
    .bg-m3-left{
        position: relative;
        left: -1vw;
    }
    .contact-title { grid-area: 1 / 1 / 2 / 3;
        margin-top: 8vw;
        margin-bottom: 4vw;
    }
    .last-name { grid-area: 2 / 1 / 3 / 3; }
    .first-name { grid-area: 3 / 1 / 4 / 3; }
    .email { grid-area: 4 / 1 / 5 / 3; }
    .phone { grid-area: 5 / 1 / 6 / 3; }
    #last-name, #email, #first-name, #phone{
        width: 100%;
        border-right: none;
    }

    /* NEEDS AND CAROUSEL */
    .besoins-title{
        padding-top: 9vw;
        padding-bottom: 4vw;
    }

    /* YOUR COMPANY */
    .company {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 1vw;
    }    
    .company-title { grid-area: 1 / 1 / 2 / 3; 
        margin-top: 14.9vw;
        margin-bottom: 7vw;
    }
    .company-name { grid-area: 2 / 1 / 3 / 3; }
    .company-website { grid-area: 3 / 1 / 4 / 3; }
    .activity-sector { grid-area: 4 / 1 / 5 / 3; }
    .add-file { grid-area: 5 / 1 / 6 / 3; }
    .other-informations { grid-area: 7 / 1 / 8 / 3; 
        margin-top: 13.5vw;
        margin-bottom: 6.8vw;
    }
    .budget { grid-area: 8 / 1 / 9 / 3; }
    .comments { grid-area: 9 / 1 / 10 / 3; }  
    #company-name, #activity-sector, #budget, #company-website, #comments, #add-file{
        width: 100%;
        border-right: none;
    }
    .add-file label {
        height: 4vw;
    }
    .add-file label img {
        width: 4vw;
        height: 4vw;
    }
    #comments {
        height: 49.5vw;
    }
    .form-bottom-layout {
        margin-top: 34vw;
    }
    /*  SUBMIT BTN */
    .btn-submit {
        bottom: 9px;
        height: 7.5vw;
        width: 31vw;
        border: 0.5vw solid #000;
    }
    .input-fields, .input-fields-file {
        padding-left: 2vw;
    }
    
    /*  PROMESSES /////////////////// */
    .container-promesse {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 3vw;
        /* margin-right: 6vw; */
        margin-bottom: 7vw;
    }    
    .promesse-main-title { grid-area: 1 / 1 / 2 / 3; 
        margin-bottom: 1vw;
        margin-top: 7.5vw;
    }
    .design { grid-area: 2 / 1 / 3 / 3; 
        margin-top: 0;
    }
    .best-price { grid-area: 3 / 1 / 4 / 3; }
    .shopify { grid-area: 4 / 1 / 5 / 3; }
    .conversion { grid-area: 5 / 1 / 6 / 3; }
    .promesse-title{
        margin-bottom: 5vw;
        margin-top: 4.2vw;
    }
    .submission-bottom-page {
        margin-top: 3.5vw;
    }

}