#divMyMojis { max-width: 896px; }


/*MyMyji Selector*/
.mymoji-selector .thumbnail > .preview-wrapper { height: 300px; text-align: center; }
.modal-body.mymoji-selector .thumbnail > .preview-wrapper { height: 200px; }
.mymoji-selector .thumbnail > .preview-wrapper > img { max-width: 100%; }
.mymoji-selector .thumbnail img.plus_overlay { position: absolute; width: 50px; top: calc(50% - 25px); left: calc(50% - 25px); }
.mymoji-selector .thumbnail .caption { min-height: 43px; line-height: 40px; text-align: center; padding: 0px; }
    .mymoji-selector .thumbnail .caption .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:75%; }
    .mymoji-selector .thumbnail .caption .caption-edit { float: left; color: darkorange; font-weight: bold; margin-top: 2px; padding: 0 10px; }
    .mymoji-selector .thumbnail .caption .caption-delete { float: right; color: maroon; margin-top: 3px; font-size: 20px; padding: 0 10px; }
    .mymoji-selector .thumbnail .caption .ui-edit + .name { width: 65%; }
    .mymoji-selector .thumbnail .caption .ui-edit { float: left; margin-top: 10px; }
    .mymoji-selector .thumbnail .caption .ui-delete { float: right; margin-top: 10px; }

/*MyMyji Editor*/
.mymoji-editor .button-container { padding: 10px; border-top: solid 1px #dbdbdb; margin: 0; }
.avatar-flip { position: absolute; top: 55px; right: 10px; }
.svg-canvas { max-height: 100%; overflow: hidden; text-align: center; }
svg * { transform-origin: 0px 0px 0px; -moz-transform-origin: 0px 0px 0px !important; -webkit-transform-origin: 0px 0px 0px !important; -o-transform-origin: 0px 0px 0px !important; }
.svg-canvas svg:first-of-type { max-width: 100%; max-height: 874px; }
.svg-canvas img:first-of-type { max-width: 100%; }

.feature-themes { padding: 10px; border-bottom: solid 1px #dbdbdb; margin-left: 68px; }
    .feature-themes label, .caption label { padding-top: 5px; }
.feature-categories { padding: 0; margin: 0; float: left; }
    .feature-categories > .feature-category { display: block; width: 68px; height: 76px; background-color: #F3F3F3; -webkit-box-shadow: inset -2px 0px 4px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset -2px 0px 4px -2px rgba(0,0,0,0.3); box-shadow: inset -2px 0px 4px -2px rgba(0,0,0,0.3); border-bottom: solid 1px #dbdbdb; }
        .feature-categories > .feature-category.active { background-color: #95D2C5; -webkit-box-shadow: inset -2px 1px 4px -1px rgba(0,0,0,0.3); -moz-box-shadow: inset -2px 1px 4px -1px rgba(0,0,0,0.3); box-shadow: inset -2px 1px 4px -1px rgba(0,0,0,0.3); }
        .feature-categories > .feature-category:last-child { border-bottom: 0 none; }
        .feature-categories > .feature-category svg { width: 100%; height: 100%; }
        .feature-categories > .feature-category.active path { fill: #78BFB3; }
            .feature-categories > .feature-category.active path:last-child { fill: #fff; }
        .feature-categories > .feature-category.disabled { pointer-events: none; cursor: not-allowed; }
            .feature-categories > .feature-category.disabled path:last-child { fill: #D8D8D8; }

.features { margin-left: 68px; position: relative; }
    .features .tab-pane { position: relative; }
    .features .feature-assets { max-height: 589px; overflow-y: auto; overflow-x: hidden; }
    .features .has-transform > .feature-assets { height: 533px; }
    .features .has-colors > .feature-assets { height: 482px; }

    .features .has-transform.has-colors > .feature-assets { height: 419px; }

    .features .feature-assets > .feature-asset { float: left; position: relative; cursor: pointer; width: 33.33%; height: 140px; box-sizing: border-box; border-bottom: solid 1px #dbdbdb; border-right: solid 1px #dbdbdb; text-align: center; }
        .features .feature-assets > .feature-asset:nth-child(3n+3) { border-right: none; }
        /*.features .feature-assets > .feature-asset:nth-last-child(-n+2) { border-bottom: 0 none; }*/
        .features .feature-assets > .feature-asset img { max-width: 100%; max-height: 100%; }
    .features .color-options { padding: 10px 10px 0px; height: 50px; border-top: solid 1px #dbdbdb; overflow-y: hidden !important; overflow-x: auto; white-space: nowrap; }
        .features .color-options .range-container { position: absolute; width: calc(100% - 1px); background: #fff; border-top: solid 1px #ccc; margin-left: -10px; margin-top: -42px; padding: 10px 10px 0px; }
        /*.features .color-options.show-range { height: 100px; }*/
        .features .color-options > ul { list-style: none; padding: 0; margin: 0; }
            .features .color-options > ul > li.color-option { content: 'test'; width: 30px; height: 30px; border: solid 1px #dbdbdb; display: inline-block; cursor: pointer; }
        .features .color-options label { font-weight: normal; margin-right: 5px; }
    .features .transform-options { padding: 17px; border-top: solid 1px #dbdbdb; text-align: center; }
        .features .transform-options > span.ol-sprites { margin: 0 5px -10px; }

.canvas-preview { position: relative; max-height: 588px; overflow: hidden; }
    .canvas-preview .caption { position: absolute; width: 100%; bottom: 0px; padding: 10px 4px; background-color: rgba(255, 255, 255,0.8); border-top: solid 1px #dbdbdb; }

    .canvas-preview .social-share { height: 40px; margin-bottom: -10px !important; border-bottom: solid 1px #dbdbdb; background-color: rgba(255, 255, 255, 0.8); text-align: right; margin: 5px 0px; }
        .canvas-preview .social-share a { margin: 5px 0px -5px; }
            .canvas-preview .social-share a:last-child { margin-right: 5px; }

@media only screen and (max-width: 1223px) { /* Tablet (iPad Landscape) */
}

@media only screen and (max-width: 767px) { /* Tablet (iPad Portrait) */
}

@media (max-width: 531px) {
    .mymoji-editor .modal-body { padding: 0px; }

    .mymoji-selector .thumbnail > .preview-wrapper { height: 200px; }
    .feature-categories { float: none; display: block; border: 0 none; }
        .feature-categories > .feature-category { float: left; width: 14.285%; max-height: 58px; border-bottom: 0 none; border-right: solid 1px #dbdbdb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
            .feature-categories > .feature-category.active { -webkit-box-shadow: inset 0px 1px 4px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 1px 4px -2px rgba(0,0,0,0.3); box-shadow: inset 0px 1px 4px -2px rgba(0,0,0,0.3); }
            .feature-categories > .feature-category:last-child { border-right: none; }

    .features { margin: 0; width: 100%; height: auto; clear: both; -webkit-box-shadow: 0px -2px 2px -1px rgba(0,0,0,0.3); -moz-box-shadow: 0px -2px 2px -1px rgba(0,0,0,0.3); box-shadow: 0px -2px 2px -1px rgba(0,0,0,0.3); }
        .features .feature-assets { height: 100px !important; min-height: inherit; max-height: inherit; width: 100%; overflow: hidden; overflow-x: auto; white-space: nowrap; }
            .features .feature-assets > .feature-asset { float: none; display: inline-block; max-width: 70px; max-height: 100px; border-right: solid 1px #dbdbdb; border-bottom: 0; }
                .features .feature-assets > .feature-asset:nth-child(3n+3) { border-right: solid 1px #dbdbdb; }
}

@media (max-width: 414px) { /* Mobile (iPhone 6+) */

    .svg-canvas { max-height: 332px; }
        .svg-canvas svg:first-of-type { height: 60%; max-width: 80%; }
}

@media only screen and (max-width: 374px) { /* Mobile (iPhone 6) */

}

@media only screen and (max-width: 320px) { /* Mobile (iPhone 5 Galaxy S5) */
    .mymoji-selector .thumbnail .caption { min-height: 43px; line-height: 40px; text-align: center; padding: 0 2px; }
        .mymoji-selector .thumbnail .caption .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
        .mymoji-selector .thumbnail .caption .ui-edit + .name { width: 65%; }
        .mymoji-selector .thumbnail .caption .ui-edit { float: left; margin-top: 10px; }
        .mymoji-selector .thumbnail .caption .ui-delete { float: right; margin-top: 10px; }
}