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

.container-editor-multimg{
    background-color: #F4F5F6;
    padding-top:30px;
    
}
.force-not-rounded-corner:not(.disabled-function){
    border-radius:0px !important;
}

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

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

.bg-multimg-menu .disabled-function{
    cursor: not-allowed;
    opacity: 0.4;
}

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


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

.multimg-loader-general{
        position:fixed;
        top:0px;
        bottom:0px;
        left:-15px;
        right:-15px;
        display:none;
        background-color: rgba(255,255,255,1);
        z-index:20;
    }
    
    .action-next-step-multimg{
           width: 90%;
    margin-bottom: 20px;
    margin-top: 20px;
    max-width: 620px;
    position: relative;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    }
    
    .multimg-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-multimg-img-container img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
  object-fit: cover;
}

.card-multimg-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-multimg-img-container .card-multimg-img-button{
    position:absolute;
    top: calc( 50% - 110px );
    left: calc( 50% - 110px );
    width: 220px;
    height: 220px;
    display:none;
}
.card-multimg-img-container:hover .card-multimg-img-button:not(.no-img-here){
    display:block;
}

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

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

.multimg-img-v{
    width:800px;
    height:1124px;
    position:relative;
}

.multimg-img-s{
    width:800px;
    height:800px;
    position:relative;
}
 
#complete-multimg-card{
 transform: scale(0.3);
    transform-origin: top left;
    margin-left: auto;
    margin-right: auto;
}

#complete-multimg-card[data-orient="s"]{
    transform: scale(0.387);
}

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

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

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


 


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

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

#complete-multimg-card[data-orient="s"]{
    width:800px;
    height:800px;
}


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


.card-multimg-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-multimg{
    margin-left:auto;
    margin-right: auto;
    /*width: 337px;*/
    width: 100%;
    position:relative
}

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

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

.container-editor-multimg[data-orient="s"] .center-card-multimg{
    width: 311px;
}

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

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


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

.prevu-bg-multimg{
    cursor:pointer;
    margin:5px;
    display:inline-block;
    position: relative;
    z-index: 2;
}

.multimg-menu[data-orient="h"] .prevu-layout-multimg, .list-bg-modal[data-orient="h"] .prevu-bg-multimg{
    width:150px;
    height: 107px;
}

.multimg-menu[data-orient="v"] .prevu-layout-multimg, .list-bg-modal[data-orient="v"] .prevu-bg-multimg{
    width:76px;
    height: 106px;
}

.multimg-menu[data-orient="s"] .prevu-layout-multimg, .list-bg-modal[data-orient="s"] .prevu-bg-multimg{
    width:106px;
    height: 106px;
}

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


    



.multimg-menu .multimg-select-rounded-layout>div{
    width:100px;
    position:absolute;
    left:130px;
    top:0;
    bottom:0;
    background-image: url(https://dk2wbmtb9x9n8.cloudfront.net/assets/v2017/img/btn-coins-layout-carre.png);
    
}

.multimg-menu .multimg-select-rounded-layout[data-isrounded="yes"]>div{
    background-image: url(https://dk2wbmtb9x9n8.cloudfront.net/assets/v2017/img/btn-coins-layout-rond.png);
    
}


.multimg-menu .multimg-bg-color{
    position:absolute;
    left:233px;
    top:0;
    bottom:0;
    font-size: 65px;
        border-radius:10px;
background-color: #F4F5F6;
width:90px;
height:137px;
text-align:center;
}

.multimg-menu .multimg-bg-color i{

    margin-top: 45px;

}

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

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

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

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

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

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

.multimg-select-layout.selected, .multimg-select-bg.selected{

    border:2px solid #4498E0;
    
}

.multimg-select-layout.selected:after, .multimg-select-bg.selected:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
    background-image: url(https://dk2wbmtb9x9n8.cloudfront.net/assets/v2017/img/layout-selected-h.png);
    background-size: cover
    
}

.multimg-menu[data-orient="v"] .multimg-select-layout.selected:after, .multimg-menu-list-layout[data-orient="v"] .multimg-select-layout.selected:after, .list-bg-modal[data-orient="v"] .multimg-select-bg.selected:after {
    background-image: url(https://dk2wbmtb9x9n8.cloudfront.net/assets/v2017/img/layout-selected-v.png);
    
}

.multimg-menu[data-orient="s"] .multimg-select-layout.selected:after, .multimg-menu-list-layout[data-orient="s"] .multimg-select-layout.selected:after, .list-bg-modal[data-orient="s"] .multimg-select-bg.selected:after {
    background-image: url(https://dk2wbmtb9x9n8.cloudfront.net/assets/v2017/img/layout-selected-s.png);
    
}

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

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

@media (min-width: 576px) {

    .container-editor-multimg{
        margin-top:30px;
        }

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

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

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

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

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

    #complete-multimg-card{
        transform: scale(0.5);
       }
       
       #complete-multimg-card[data-orient="s"]{
        transform: scale(0.42);
       }
       
       
       
       

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

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

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


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

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

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

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

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

.container-editor-multimg[data-orient="s"] .center-card-multimg{
    width: 504px;
}

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

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

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

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


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



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

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

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

.container-editor-multimg[data-orient="s"] .center-card-multimg{
    width: 504px;
}

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


@media (min-width: 1200px) {

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

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



.cropper-center{
    display:none;
}



/* TextInput related classes */
.card-multimg-txt-container{
    visibility: visible;
    position:absolute;
}

.card-multimg-txt-container{
    padding:2px;
}

.multimgEditorContentInput, .multimgEditorContent, .multimgEditorTextInputContainer, .card-multimg-txt-container{
    line-height: 1.8em;
}

.multimgEditorContentInput, .multimgEditorContent, .multimgEditorTextInputContainer{
    height: 100%;
}



.card-multimg-txt-container:hover, .card-multimg-txt-container.is-focus-text-box{
    border: 2px solid #CB62B4;
    padding:0px;
}

.zoom-elt-txt{
    background-color:#e8e3f9;
    color:#7d59ff;
    border-radius:10px;
    padding:10px;
position:absolute;
top:-30px;
right:-30px;
display:none;
cursor: pointer;
font-size: 45px;
}

.card-multimg-txt-container:hover .zoom-elt-txt, .card-multimg-txt-container.is-focus-text-box .zoom-elt-txt{
    display:block
}

.multimgEditorTextInputContainer{
    overflow: hidden;
    padding:1px;
}

.multimgEditorTextInputContainer .multimgEditorContentInput[contenteditable=true]{
    width: fit-content;
    display: inline;
    /* border-bottom: 1px solid black; */
    padding: 0.5%;
    /* border-radius: 5px; */
}

.multimgEditorTextInputContainer .multimgEditorContentInput[contenteditable=true]:focus{
    outline: none;
}

/* Error message related classes */
/* classe a passer pour faire varier l'affichage du message d'erreur */
.errorOutOfRangeTextinput{
    border: 1px solid red;
    background-color: rgba(255, 90, 90, 0.5);
}

/* Message d'erreur */
.multimg-editor-error-message{
    /* Position */
    position: absolute;
    margin-top: -55px;
    top: 0;
    /* border: 1px solid red; */
    color: white;
    background-color: rgb(255, 90, 90);
    z-index: 999;
    font-size: 25px;
    padding: 1%;
    border-radius: 5px;
}

/* message d'erreur visible */
.visible{
    display: initial;
}

/* message d'erreur non-visible */

.invisible{
    display: none;
}

/* Classes relatives au contenu (text et input) de l'editeur */

.multimgEditorContent{
    /*width: fit-content;*/
    width: 100%;
}

.multimgEditorContentInput{
    display: inline;
    width: fit-content;
}