/************************
                                                General
                                        ************************/

* {
    font-family: 'Montserrat', sans-serif;
    /*padding: 0;
    margin: 0;
    box-sizing: border-box;*/
}

body, html{
    min-height: 100vh;
    margin:auto;
}

.fontAwesome {
    font-family: 'Montserrat', FontAwesome, sans-serif;
}

header{
    position: absolute;
    text-align: center;
    top :0;
    left:0;
    right:0;
}

header img{
    float: left;
    width: 200px;
    margin-left: 50px;
}

header p{
    margin-right: 50px;
    margin-top: 10px;
    font-weight: bold;
}

/*@media screen and (min-width: 960px) and (max-width:1599px){
    header p{
        margin-right: 50px;
        margin-top: 50px;
        font-weight: bold;
        font-size: 50px;
    }
}*/
                                /*********************************************
                                            Graphic designer login
                                **********************************************/

.img_co{
    width: 50%;
}

#cont_log_graph{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden;
}

#cont_log_graph:before{
    content: '';
    position: absolute;
    width: 2000px;
    height: 2000px;
    border-radius: 50%;
    background: linear-gradient(-45deg, #4481eb, #04befe);
    top: -10px;
    right: 48%;
    transform: translateY(-50%);
    z-index: 6;
    transition: 1.8s ease-in-out;
}

#forms_log_graph{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.signin-signup{
    position: absolute;
    top: 50%;
    left: 75%;
    transform:  translate(-50%, -50%);
    width: 50%;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 5;
    transition: 1s 0.7s ease-in-out;
}

.form_co_graph{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 5rem;
    overflow: hidden;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transition: 0.2s 0.7s ease-in-out;
}

.form_co_graph.sign-in-form{
    z-index: 2;
}

.form_co_graph.sign-up-form{
    z-index: 1;
    opacity: 0;
}

.title{
    font-size: 2.2rem;
    color: #444;
    margin-bottom: 10px;
}

.input-field{
    max-width: 380px;
    width: 100%;
    height: 55px;
    background-color: #f0f0f0;
    margin: 10px 0;
    border-radius: 60px;
    display: grid;
    grid-template-columns: 15% 85%;
    padding: 0 .4rem;
}

.input-field i{
    text-align: center;
    line-height: 55px;
    color: #acacac;
    font-size: 1.1rem;
}

.input-field input{
    background: none;
    outline: none;
    border: none;
    line-height: 1;
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
}

.input-field input::placeholder{
    color: #aaa;
    font-weight: 500;
}

#btn_co_graph, #btn_valid_signup, #sign-up-btn, #sign-in-btn{
    width: 150px;
    height: 49px;
    border: none;
    outline: none;
    border-radius: 49px;
    cursor: pointer;
    background-color: #5995fd;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin:10px 0;
    transition: .5s;
}

#btn_co_graph:hover, #btn_valid_signup:hover, #sign-up-btn:hover, #sign-in-btn:hover{
    background-color: #4d84e2;
}

/*.social-text{
    padding: .7rem 0;
    font-size: 1rem;
}

.social-media{
    display: flex;
    justify-content: center;
}

.social-icon{
    height: 46px;
    width: 46px;
    border: 1px solid #333;
    margin: 0 0.45rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    color: #333;
    font-size: 1.1rem;
    border-radius: 50%;
    transition: 0.3s;
}

.social-icon:hover{
    color: #4481eb;
    border-color: #4481eb;
}*/

.panels-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.panel{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    text-align: center;
    z-index: 7;
}

.left-panel{
    pointer-events: all;
    padding: 3em 17% 2rem 12%;
}

.right-panel{
    pointer-events: none;
    padding: 3em 12% 2rem 17%;
}

.panel .content{
    color: #fff;
    transition: .9s .6s ease-in-out;
}

.panel h3{
    font-weight: 600;
    line-height: 1;
    font-size: 1.5rem;
}

.panel p{
    font-size: 0.95rem;
    padding: 0.7rem 0;
}

.btn.transparent{
    margin: 0;
    background: none;
    border: 2px solid #fff;
    width: 130px;
    height: 41px;
    font-weight: 600;
    font-size: 0.8rem;
}

.image{
    width: 100%;
    transition: 1.1s .4s ease-in-out;
}

.right-panel .content, .right-panel .image{
    transform: translateX(1200px);
}

/* ANIMATION */

#cont_log_graph.sign-up-mode:before{
    transform: translate(100%, -50%);
    right: 52%;
}

#cont_log_graph.sign-up-mode .left-panel .image,
#cont_log_graph.sign-up-mode .left-panel .content{
    transform: translateX(-1600px);
}

#cont_log_graph.sign-up-mode .right-panel .image,
#cont_log_graph.sign-up-mode .right-panel .content{
    transform: translateX(20px);
}

#cont_log_graph.sign-up-mode .left-panel{
    pointer-events: none;
}

#cont_log_graph.sign-up-mode .right-panel{
    pointer-events: all;
}

#cont_log_graph.sign-up-mode .signin-signup{
    left: 25%;
}

#cont_log_graph.sign-up-mode form.sign-in-form{
    z-index: 1;
    opacity: 0;
}

#cont_log_graph.sign-up-mode form.sign-up-form{
    z-index: 2;
    opacity: 1;
}

@media (max-width: 870px){
    #cont_log_graph{
        min-height: 800px;
        height: 100vh;
    }
    #cont_log_graph:before{
        width: 1500px;
        height: 1500px;
        left: 30%;
        bottom: 68%;
        transform: translateX(-50%);
        right: initial;
        top: initial;
        transition: 2s ease-in-out;
    }

    .signin-signup{
        width: 100%;
        left: 50%;
        top: 95%;
        transform: translate(-50%, -100%);
        transition: 1s 0.8s ease-in-out;
    }

    .panels-container{
        z-index: 10;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr 1fr;
    }
    .panel{
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 2.5rem 8%;
    }

    .panel .content{
        padding-right: 15%;
        transition: 0.9s 0.8s ease-in-out;
    }

    .panel h3{
        font-size: 1.2rem;
    }

    .panel p{
        font-size: 0.7rem;
        padding: 0.5rem 0;
    }

    .btn.transparent{
        width: 110px;
        height: 35px;
        font-size: 0.7rem;
    }

    .image{
        width: 200px;
        transition: 0.9s 0.6s ease-in-out;
    }

    .left-panel{
        grid-row: 1 / 2;
    }

    .right-panel{
        grid-row: 3 / 4;
    }

    .right-panel .content, .right-panel .image{
        transform: translateY(300px);
    }

    #cont_log_graph.sign-up-mode:before{
        transform: translate(-50%,100%);
        bottom: 32%;
        right: initial;
    }

    #cont_log_graph.sign-up-mode .left-panel .image,
    #cont_log_graph.sign-up-mode .left-panel .content{
        transform: translateY(-300px);
    }

    #cont_log_graph.sign-up-mode .signin-signup{
        top: 5%;
        transform: translate(-50%, 0);
        left: 50%;
    }
}

@media (max-width: 570px){
    #form_log_cust{
        padding: 0 1.5rem;
    }

    .image{
        display: none;
    }

    .panel .content{
        padding: 0.5rem 1rem;
    }

    #cont_log_graph:before{
        bottom: 72%;
        left: 50%;
    }

    #cont_log_graph.sign-up-mode:before{
        bottom: 28%;
        left: 50%;
    }
}
/*@media screen and (min-width: 1600px){

    form#form_co_graph{
        margin-left: 400px;
        margin-top: 400px;
    }

    #btn_co_graph{
        margin-top: 20px;
    }

    #check_stayco{

        margin-top: 10px;
        font-size: small;
    }

    #img_work_login_graph{
        float: right;
        width: 50%;
        height: 75%;
    }

    #InputEmail, #InputPassword{
        font-family: "Font Awesome 5 Free",sans-serif;
        font-weight: 900;
        border-radius: 60px;
    }

    #InputEmail::placeholder, #InputPassword::placeholder{
        font-size: 10px;
    }

    #int_check_stay_co{
        margin-top: 2px;
    }
}
 @media screen and (min-width: 960px) and (max-width: 1599px){
     form#form_co_graph{
         margin-left: 100px;
         margin-top: 120px;
     }

     #btn_co_graph{
         margin-top: 20px;
     }

     #check_stayco{

         margin-top: 10px;
         font-size: small;
     }

     #img_work_login_graph{
         float: right;
         width: 50%;
         height: 75%;
         margin-top: 80px;
     }

     #InputEmail, #InputPassword{
         font-family: "Font Awesome 5 Free",sans-serif;
         font-weight: 900;
         border-radius: 60px;
     }

     #InputEmail::placeholder, #InputPassword::placeholder{
         font-size: 10px;
     }

     #int_check_stay_co{
         margin-top: 2px;
     }
 }*/
                                    /******************************************
                                          Graphic designer choices main menu
                                    *******************************************/


    #img_work_index_graph{
       /* float: right;*/
        width: 35%;
        margin-top: 150px;
        /*margin-right: 50px;*/
    }

    .btn-group-vertical.btn_group_bat{
        /*margin-top: 150px;*/
        display: inline-block;
        /*margin-left: 300px;*/
    }

    #btn_create_bat{
        color: white;
        background-color: #262B76;
        height: 30px;
        width: 50%;
        margin-bottom : 15px;
        border-radius: 10px;
        font-size: small;
    }

    #btn_waiting_bat{
        color: white;
        background-color: #F38116;
        height: 30px;
        width: 50%;
        margin-bottom : 15px;
        border-radius: 10px;
        font-size: small;
    }
    #btn_validate_bat{
        color: white;
        background-color: #21A91E;
        height: 30px;
        width: 50%;
        margin-bottom : 15px;
        border-radius: 10px;
        font-size: small;
    }
    #btn_refused_bat{
        color: white;
        background-color: #F02E22;
        height: 30px;
        width: 50%;
        margin-bottom : 15px;
        border-radius: 10px;
        font-size: small;
    }

    .band_bat_count{
        background-color: lightgrey;
        height: 150px;
        margin-top: 100px;
        padding-top: 20px;
        text-align: center;
        border-radius: 5px;
    }

@media screen and (min-width: 960px) and (max-width: 1599px){}

/*@media screen and (max-width: 1440px){

    #img_work_index_graph{
        float: right;
        width: 50%;
        margin-top: 100px;
    }

    .btn-group-vertical.btn_group_bat{
        margin-top: 200px;
        margin-left: 20px;
    }

    .band_bat_count{
        background-color: lightgrey;
        height: 150px;
        margin-top: 150px;
        padding-top: 30px;
        text-align: center;
        border-radius: 5px;
    }
}*/

/************************************************ BAT creation's form *************************************************/

.row_global{
    display: flex;
    justify-content: space-around;
}

#form_bat{
    position: absolute;
    margin-top: 90px;
    margin-left: 50px;
}

#alert_create_bat{
    margin-top: 50px;
}

form#form_bat .row{
    margin-bottom: 5px;
}

form#form_bat .col-6{
    margin: auto;
}

form#form_bat label{
    font-size: 12px;
}

#input_product_name, #input_date_estim_deliv, #input_date_valid_max{
    border-radius: 60px;
    height: 30px;
}

#input_dimension_product, #input_cust_name, #input_cust_email.form-control,
#input_cust_tel.form-control {
    height: 30px;
    border-radius: 60px;
    border-color: #ced4da;
}

#input_product_name::placeholder, #input_dimension_product::placeholder,#input_cust_name::placeholder,
#input_cust_email::placeholder, #input_cust_tel::placeholder, #input_date_estim_deliv.form-control,
#input_date_valid_max.form-control{
    font-size: 13px;
    color: gray;
}

#select_product.form-select{
    background-color: white;
    font-size: 12px;
    color: gray;
    width: 100%;
    height: 30px;
}

#select_product {
    border-radius: 60px;
    width: 250px;
    height: 35px;
    border-color: #ced4da;
}

/*******Drag and Drop*******/

.drag-area{
    border: 2px dashed grey;
    height: 500px;
    width: 500px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    float: right;
    margin-top: 80px;
}

.drag-area.active{
    border: 2px solid grey;
}

.drag-area .icon{
    font-size: 100px;
}

.drag-area p{
    font-size: 30px;
    font-weight: 500;
}

.drag-area span{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 15px 0;
}

.drag-area button{
    padding: 10px 25px;
    font-size: 20px;
    font-weight: 500;
    border: none;
    outline: none;
    background: sienna;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.drag-area img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.btn_env_bat_graph{
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;
}

#btn_bat_env_graph{
    font-size: 15px;
    width: 500px;
}

/*input[type="date"]::before{
    content: attr(placeholder)" : ";
    white-space: pre;
}

input[type="date"]:focus::before{
    content: ""!important;
}*/

small{
    text-align: center;
}

                            /**************************************************
                                            BAT success send
                            **************************************************/

#title_succ_send{
    margin-top: 200px;
    font-weight: bold;
    font-size: medium;
}

.grp_btn_send_succ{
    display: flex;
    align-items: center;
}

#btn_terminate_bat, #btn_download_clue_send{
    font-weight: bold;
    font-size: 13px;
    width: 300px;
    margin-top: 15px;
    border-radius: 5px;
}

                            /**********************************************************
                            Graphic designer's dashboard to check BAT validate or not
                            **********************************************************/

#title_bat_wait_valid, #title_bat_valid{
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 150px;
}

#nav_search_cust_valid, #nav_search_cust_wait_valid{
    background-color: darkgray;
}

#search_name_cust_valid,#search_name_cust_wait_valid, #search_email_cust_valid, #search_email_cust_wait_valid{
    margin-top: 10px;
    border-radius: 60px;
    margin-left: 50px;
    margin-right: 50px;
    border-width: 0;
}

#btn_search_cust_valid, #btn_search_cust_wait_valid{
    width: 300px;
    margin-left: 50px;
    margin-right: 50px;
}

#search_email_cust_valid::placeholder, #search_name_cust_valid::placeholder,
#search_email_cust_wait_valid::placeholder, #search_name_cust_wait_valid::placeholder{
    font-size: 10px;
    font-weight: bold;
    color: black;
    margin-top :10px;
    text-align: center;
}

#tab_cust_waiting, #tab_cust_validate{
    margin-top: 10px;
}

#tab_cust_waiting th, #tab_cust_validate th,
#tab_cust_waiting td, #tab_cust_validate td{
    font-size: small;
    text-align: center;
}

.btn_download_clue_send2{
    height: 30px;
    width: 100px;
    font-size: small;
    margin-bottom: 5px;
    margin-top: -5px;
}

.button_relance_wait_valid{
    height: 30px;
    width: 80px;
    font-size: small;
    margin-top: 5px;
}

@media screen and (max-width: 1199px){
    #btn_search_cust_valid, #btn_search_cust_wait_valid{
        width: 300px;
        margin-left: 50px;
        margin-right: 50px;
        margin-top: 10px;
    }
}

                            /******************************************************
                                                Stimulus' page
                            *******************************************************/

.title_bat_relance{
    margin-top: 150px;
    margin-bottom: 50px;
}

#btn_relance_env_graph{
    margin-top: 40px;
    font-size: small;
    width: 350px;
}

                                /*************************************************
                                                Customer's login
                                ***************************************************/

form#form_code_cust, form#form_log_cust{
    margin-left: 200px;
    margin-top: 200px;
}

#title_custom_co{
    margin-top: 150px;
    font-weight: bold;
}

#lable_tel_customer{
    font-size: 15px;
}

#btn_co_next_custom, #btn_co_custom{
    margin-left: 13px;
}

#img_work_login_cust{
    float: right;
    width: 50%;
    height: 75%;
}

#InputTel{
    font-family: "Font Awesome 5 Free",sans-serif;
    font-weight: 600;
}

                                /**********************************************
                                            Customer's BAT checking
                                ***********************************************/

#product_name_custom{
    font-weight: bold;
    text-align: center;
    margin-top: 150px;
}

#mess_customer_warn{
    font-size: 10px;
}

#radio_valid_or_no{
    margin-top: 30px;
    font-size: 15px;
    font-weight: bold;
}

                                /**************************************************
                                    Confirmation's page for BAT validate or not
                                **************************************************/

#title_success_bat_valid, #title_success_bat_no_valid{
    margin-top: 200px;
    font-size: 18px;
    font-weight: bold;
}

.grp_btn_custom_valid{
    display: flex;
    align-items: center;
}

                                /************************************************
                                                Customer's dashboard
                                ************************************************/

#tab_bat_custom{
    margin-top: 25px;
}

#tab_bat_custom th,
#tab_bat_custom td{
    font-size: small;
    text-align: center;
}

#title_bat_custom_db{
    margin-top: 120px;
    margin-bottom: 30px;
}

.custom_name_db{
    font-size: 12px;
}

 .btn_state_bat{
     height: 30px;
     font-size: 10px;
 }