/*
*   mise en forme des popups site FG
*/
/* 
    Created on : 13 juil. 2021, 15:05:44
    Author     : webmaster
*/

   /* fenetre ajout produit au panier */
    .maskScreen {
        position:fixed;
        z-index:100;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width :100vw;
        height :100vh;
        background-color: rgba(0,0,0,0.9);
        transition: opacity 0.2s;
    }
    .confirmWindow {
        display : flex;
        flex-flow:wrap;
        justify-content: space-around;
        align-items: center;
        width : 500px;  /*34vw;*/
        padding: 2em;
        height : 350px; /*24vw */
        border : 10px solid ;
        border-radius : 16px;
        border-color : #424242;
        background-color: rgba(218,214,214,0.9);
        color:#000000;
    }
    .confirmWindow > .msg {
        display: flex;
        width : 28vw;
        height: 2.5em;
        justify-content: center;
        align-items: center; 
        background-color:rgba(160,160,160,0.6); /* grey;*/
        border-radius:6px;
    }
    .confirmWindow > .item-link, .confirmWindow > .basket-link, .confirmWindow > .search-link  {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        color:#000000;
        background-color:rgba(160,160,160,0.6);
        border-radius:6px;
        padding:1em;
    }
    
    .confirmWindow > .item-link > img, .confirmWindow > .basket-link >img, .confirmWindow > .search-link > img{
        display : flex;
        max-width: 3vw;
    }
    .confirmWindow > .item-link > p, .confirmWindow > .basket-link >p ,.confirmWindow > .search-link > p{
        /*border:1px solid blue;*/
        color:#000000;
    }
    
    .logWindow {
        display: flex;
	width:30vw;
	height :22vw;
        padding: 1em;
        flex-flow:column; /*wrap;*/
        justify-content: space-between; /*center;*/
        align-items: center;
        border : 10px solid ;
        border-radius : 16px;
        border-color : #424242;
        background-color: rgba(218,214,214,0.9);
        color:black;
        
    }
    
    .clear-top {
        display : flex;
        min-width: 30vw;
        justify-content: flex-end;
    }
    .clear-top a img {
        display: flex;
        max-width : 1.8em;
    }
    .logWindow > top {
        display : flex;
        min-width: 30vw;
        justify-content: center; 
    }
    .logWindow > top > p {
        display: flex;
        justify-content: center;
        min-width: 24vw;
        border : 1px solid black;
    }
    .logWindow > top > p.title {
        padding : 0.5em;
        background: black;
        color:white;
        border-radius: 6px;
    }
    .logWindow > bottom {
        min-width: 30vw;
        text-align: center;
        padding-top: 2em;
    }
    
    .B2BForm {
        display: flex;
    }

    .B2BForm> form {
    /* occupe la largeur restante */
        display:flex;
        flex-flow:column;
        min-width: 22vw;
        justify-content: center;
        align-items: center;
    }

    .B2BForm .inputLog,.B2BForm .inputPwd {
        display: flex ;
        min-width: 20vw;
        height:2.5vw;
        justify-content:space-between;
        align-items: center;
        border:2px solid black;
        border-radius: 6px;
        padding : 0.4em 0.2em;
        margin:0.5em;
        background: white;
    }     

    .inputLog > input, .inputPwd > input{
        display: flex;	
        width:12vw;
        padding-left : 1.5em;
        border:none;
        background: none;
        outline:none;
        -webkit-appearance: none;
    }
    
    .inputPwd> img {
        height:2em;
        /*margin: 0px 4px;*/
        /*border:1px solid red;*/
        cursor: pointer;  
    } 

    .imgSub > input {
        display: flex;
        width:4vw;
        /*height :3vw;*/
    }
    
        /*------------------------ media-queries ----------------------*/
@media screen and (max-width: 1200px) {
    
    .clear-top {
        min-width: 42vw;
        }
    .logWindow {
        width : 42vw;
        /*border-color: red;*/
        height : 30vw;
    }       
    .logWindow > top {
        min-width: 42vw;
    }
    .logWindow > top > p {
        min-width: 34vw;
    }
    .logWindow > top > p.title {
        padding : 0.4em;
    }
    
    .confirmWindow {
        width :460px;
        height : 350px;
        font-size:0.9em;
    }
    .confirmWindow > .msg {
        display: flex;
        width : 440px;
    }    
    .confirmWindow > .item-link > img, .confirmWindow > .basket-link >img, .confirmWindow > .search-link > img{
        display : flex;
        max-width: 4vw;
    }    
    
    .B2BForm .inputLog,.B2BForm .inputPwd {
        min-width: 24vw;
        padding : 0.6em 0.3em;
    } 
    .inputPwd> img {
        height:1.8em;
        cursor: pointer;     
    } 
    .imgSub > input {
        width:5vw;
        /*height :3vw;*/
    }
    
}
    
    /*------------------------ media-queries ----------------------*/

    @media screen and (max-width: 960px) {
        
    /**************** popup ajout panier ***************/
    .confirmWindow {
        width :430px;
        height : 320px;
        font-size:0.8em;
    }
    .confirmWindow > .msg {
        display: flex;
        width : 430px;
    }
     
       /* ********************* popup login b2b ********************/
        .clear-top {
            min-width: 60vw;
        }
        .logWindow {
            width : 60vw;
            /*border-color: green;*/
            height : 42vw;
        }
        .logWindow > top {
            min-width: 48vw;
        }
        .logWindow > top > p {
            min-width: 46vw;
        }
        .logWindow > top > p.title {
            padding : 0.4em;
        }
        .imgSub > input {
            width:6vw;
            /*height :3vw;*/
        }

        .B2BForm {
            min-width: 4vw;
        }
        .B2BForm > form {
            min-width: 36vw;
        }

        .B2BForm .inputLog,.B2BForm .inputPwd {

            min-width: 30vw;
            padding : 0.9em 0.5em;
        } 

        .inputLog > input, .inputPwd > input{
                width:16vw;
                border-radius: 6px;
                height : 1.5em; /*1.7vw;*/
            }
        .imgSub > input {
            width:7vw;
            /*height :3vw;*/
        }
        
    }
    
    @media screen and (max-width: 640px) {
        
    /**************** popup ajout panier ***************/
    .confirmWindow {
        width :320px;
        height : 230px;
        font-size:0.6em;
    }
    .confirmWindow > .msg {
        width : 300px;
    }
    .confirmWindow > .item-link > img, .confirmWindow > .basket-link >img, .confirmWindow > .search-link > img{
        max-width: 5vw;
    }
    /************** popup login b2b ********************/
    
        .logWindow {
            width :90vw;
            min-height :64vw;
        }
        .clear-top {
            min-width: 90vw;
        }
         .logWindow > top > p {
            min-width: 66vw;
        }
        .logWindow > top > p.title {
            padding : 0.3em;
        }

        .B2BForm > form {
            min-width: 58vw;
        }

        .B2BForm > form > p {
                max-width: 80vw;
        }

        .B2BForm .inputLog,.B2BForm .inputPwd {

            min-width: 50vw;
            padding : 1em 0.6em;
        } 

        .inputLog > input, .inputPwd > input{
                width:30vw;
                border-radius: 6px;
                height : 1.5em; /*1.7vw;*/
            }
        .imgSub > input {
                display: flex;
                width:12vw;
                /*height :10vw;*/
        }
    
        .imgSub > input {
            display: flex;
            width:12vw;
            /*height :10vw;*/
        }
    }