.bg-draw-menu{
    background-color:#616161;
    padding:10px;
}


.draw-menu div{
    width:32%;
border-radius:10px;
background-color: #F4F5F6;
position:absolute;
    top:0;
    bottom:0;
    font-size: 65px;
height:137px;
text-align:center;
}

.draw-btn-menu-mine>div{
    left:0px;
}
.draw-btn-menu-line-width>div{
    left:34%;
}

.draw-btn-menu-color>div{
    left:68%;
}



    

.draw-menu div i{

   margin-top: 35px;

}















.container-editor-draw{
    background-color: #F4F5F6;
    padding-top:30px;
    margin-top:30px;
}

.force-not-rounded-corner:not(.disabled-function){
    border-radius:0px !important;
}

.init-scale{
    transform:scale(1) !important;
}

.draw-bg-color{
    cursor:pointer;
}

.draw-select-rounded-layout.disabled-function{
    cursor: not-allowed;
    opacity: 0.4;
}

.draw-select-rounded-layout>div{
border-radius:10px;
background-color: #F4F5F6;
}  


.list-layout-modal .prevu-layout-draw img{
    max-width:120px
}

.draw-loader-general{
        position:fixed;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        display:none;
        background-color: rgba(255,255,255,1);
        z-index:20;
    }
    
    .action-next-step-draw{
           width: 90%;
    margin-bottom: 20px;
    margin-top: 20px;
    max-width: 620px;
    position: relative;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    }
    
    .draw-loader-general i{
        margin: 0;
        position: absolute;
        top: calc( 50% - 40px );
        left: calc( 50% - 40px );
        transform: translate(-50%, -50%);
        color:#4498E0;
        font-size:80px
    }
    
.card-draw-img-container img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
  object-fit: cover;
}

.card-draw-img-container img[src="/v2017/html2canvas/proximg.php?img=/assets/v2017/img/camera_1f4f7.png"]{
   margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-draw-img-container .card-draw-img-button{
    position:absolute;
    top: calc( 50% - 110px );
    left: calc( 50% - 110px );
    width: 220px;
    height: 220px;
    display:none;
}
.card-draw-img-container:hover .card-draw-img-button:not(.no-img-here){
    display:block;
}

.card-draw-img-container{
    position:relative;
    overflow:hidden;
}

.draw-img-h{
    width:1124px;
    height:800px;
    position:relative;
}

.draw-img-v{
    width:800px;
    height:1124px;
    position:relative;
}
 
#complete-draw-card{
 transform: scale(0.3);
    transform-origin: top left;
    margin-left: auto;
    margin-right: auto;
    background-color:#ffffff
}




.limiter-height-draw-editor{
    height: 263px;
}

.limiter-height-draw-editor[data-orient="v"]{
    height: 350px;
}


 


#complete-draw-card[data-orient="h"]{
    width:1124px;
    height:800px;
}

#complete-draw-card[data-orient="v"]{
    width:800px;
    height:1124px;
}


.card-draw-img-button i{
    font-size:95px;
}


.prevu-format-draw-h
{
    width:140px;
    height:100px;
    margin: 25px auto 25px auto;
    cursor:pointer;
}

.prevu-format-draw-v
{
    width:100px;
    height:140px;
    margin: 0 auto 10px auto;
    cursor:pointer;
}

.container-choice-format-draw
{
    max-width: 450px;
    margin-right: auto;
    margin-left: auto;
}

.card-draw-img-button>div{
    width: 105px;
    height: 105px;
    text-align: center;
    border-radius: 10px;
    cursor:pointer;
    display:inline-block;
    z-index:10;
    background-color: #fff;
    padding-top:5px;
    margin-bottom:5px;
    
}

.container-editor-draw{
    margin-left:auto;
    margin-right: auto;
    width: 337px;
    position:relative
}

.center-card-draw{
    margin-left:auto;
    margin-right: auto;
    width: 337px;
    position:relative;
    text-align:center;
}

.container-editor-draw[data-orient="v"] .center-card-draw{
    width: 240px;
}

.prevu-layout-draw img{
    width:100%;
    height:auto;
}

.prevu-layout-draw{
    background-size: cover
}


.prevu-layout-draw{
    margin:5px;
    display:inline-block;
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.list-elt-modal > div > div{
    cursor:pointer;
    margin:5px;
    display:inline-block;
    position: relative;
    z-index: 2;
}

.list-elt-modal > div > div{
    width:150px;
    height: 107px;
}


.draw-menu{
    height: 137px;
    width:100%;
    position:relative;
}
.draw-menu .draw-menu-list-layout, .draw-menu .draw-select-layout-mobile{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:126px;
    background-color: #F4F5F6;
    border-radius: 10px;
}    


    



.draw-menu .draw-select-rounded-layout>div{
    width:100px;
    position:absolute;
    left:130px;
    top:0;
    bottom:0;
    background-image: url(/v2017/html2canvas/proximg.php?img=/assets/v2017/img/btn-coins-layout-carre.png);
    
}

.draw-menu .draw-select-rounded-layout[data-isrounded="yes"]>div{
    background-image: url(/v2017/html2canvas/proximg.php?img=/assets/v2017/img/btn-coins-layout-rond.png);
    
}



.prevu-layout-draw-mobile{
    width:100px;
    margin-left:auto;
    margin-right:auto;
    margin-top:35px
}

.draw-menu[data-orient="v"] .prevu-layout-draw-mobile{
    width:85px;
    margin-top:10px
}

.draw-menu[data-orient="h"] .prevu-layout-draw-mobile img{
    width:100px;
    height:auto;
}

.draw-menu[data-orient="v"] .prevu-layout-draw-mobile img{
    width:85px;
    height:auto;
}

.list-elt-modal>div>div.selected{

    border:2px solid #4498E0;
    
}

.list-elt-modal>div>div.selected:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
    background-image: url(/v2017/html2canvas/proximg.php?img=/assets/v2017/img/layout-selected-h.png);
    background-size: cover
    
}



#modal-choix-layout .swiper-slide{
    width:auto
}

.card-draw-img-container{
    background-color: #e9f4fd;
    cursor:pointer;
}

@media (min-width: 576px) {
    .prevu-layout-draw-mobile{
        width:150px;
    }
    
    .draw-menu[data-orient="h"] .prevu-layout-draw-mobile img{
        width:150px;
        height:auto;
    }

    .draw-menu[data-orient="v"] .prevu-layout-draw-mobile img{
        width:95px;
        height:auto;
    }
    
    .draw-menu .draw-bg-color{
    left:440px;
    }
    
    .draw-menu[data-orient="v"] .draw-menu .draw-menu-list-layout, .draw-menu[data-orient="v"] .draw-menu .draw-select-layout-mobile{
    width:107px;
    }
    .draw-menu .draw-select-rounded-layout>div{
        left:221px;
    }
    
    
    
    .container-editor-draw{
    width: 562px;
}

.center-card-draw{
    width: 562px;
}

.container-editor-draw[data-orient="v"] .center-card-draw{
    width: 400px;
}

    #complete-draw-card{
        transform: scale(0.5);
       }
       
       
       
       
       
       

.limiter-height-draw-editor{
    height: 430px;
}

.limiter-height-draw-editor[data-orient="v"]{
    height: 580px;
}
       
       
       
       
       
       .card-draw-img-button i{
           font-size:55px;
       }
       
       .card-draw-img-button>div{
            width: 72px;
            height: 72px;
       }
       
       .card-draw-img-container .card-draw-img-button{
            top: calc( 50% - 75px );
            left: calc( 50% - 75px );
            width: 150px;
            height: 150px;
        }
}


@media (min-width: 768px) {
    
    .prevu-layout-draw-mobile{
        width:200px;
    }
    
    .draw-menu[data-orient="h"] .prevu-layout-draw-mobile img{
        width:200px;
        height:auto;
    }

    .draw-menu[data-orient="v"] .prevu-layout-draw-mobile img{
        width:107px;
        height:auto;
    }
    
    .draw-menu .draw-bg-color{
    left:570px;
}
.draw-menu .draw-menu-list-layout, .draw-menu .swiper-container{
width:460px;
height:137px;
}
.draw-menu .draw-select-rounded-layout>div{
    left:465px;
}

    
    .container-editor-draw{
    width: 674px;
    }
    
.center-card-draw{
    width: 629.44px;
}

.container-editor-draw[data-orient="v"] .center-card-draw{
    width: 360px;
}

#complete-draw-card{
        transform: scale(0.56);
       }
       
       #complete-draw-card[data-orient="v"]{
        transform: scale(0.45);
       }
       
       
       
       

.limiter-height-draw-editor{
    height: 481px;
}

.limiter-height-draw-editor[data-orient="v"]{
    height: 521px;
}
       
       
       
       
       
       .card-draw-img-button i{
           font-size:55px;
       }
       
       .card-draw-img-button>div{
            width: 72px;
            height: 72px;
       }
       
       .card-draw-img-container .card-draw-img-button{
            top: calc( 50% - 75px );
            left: calc( 50% - 75px );
            width: 150px;
            height: 150px;
        }
}


@media (min-width: 992px) {
    
    
    .draw-menu .draw-bg-color{
    left:860px;
}
.draw-menu .draw-menu-list-layout, .draw-menu .swiper-container{
width:740px;
height:137px;
}
.draw-menu .draw-select-rounded-layout>div{
    left:750px;
}



    
    .container-editor-draw{
    width: 966px;
}

.center-card-draw{
    width: 629.44px;
}

.container-editor-draw[data-orient="v"] .center-card-draw{
    width: 360px;
}

#complete-draw-card{
        transform: scale(0.56);
       }
       
       #complete-draw-card[data-orient="v"]{
        transform: scale(0.45);
       }
       
       .card-draw-img-button i{
           font-size:55px;
       }
       
       .card-draw-img-button>div{
            width: 72px;
            height: 72px;
       }
       
       .card-draw-img-container .card-draw-img-button{
            top: calc( 50% - 75px );
            left: calc( 50% - 75px );
            width: 150px;
            height: 150px;
        }
}


@media (min-width: 1200px) {

       
       .card-draw-img-button i{
           font-size:55px;
       }
       
       .card-draw-img-button>div{
            width: 72px;
            height: 72px;
       }
       
       .card-draw-img-container .card-draw-img-button{
            top: calc( 50% - 75px );
            left: calc( 50% - 75px );
            width: 150px;
            height: 150px;
        }
}

.draw-select-layout{
    cursor:pointer;
}



.cropper-center{
    display:none;
}