.container{max-width:100% !important;padding:0;}
html,body,.container,#design{height:100%;}

.topnav .col{padding:0 .25em;}
.topnav .col div,.topnav .btn{display:inline-block;vertical-align:middle;}
.topnav>.col>.topbar-controls{height:100%;}
.topnav .divider{border-right:1px solid #ccc;margin:0 .2em;height:100%;display:inline-block;vertical-align:middle;min-height:32px;}
.topnav #product-image{max-width:2.5em;}
.topnav #product-image img{max-width:100%;max-height:100%;cursor:pointer;}

#topbar{border-bottom:1px solid #ccc;width:100%;padding:.25em 0;white-space:nowrap;}
#topbar #timestamp{font-size:.75em;}
#topbar #btn-previewmode{white-space:nowrap;}
#topbar #btn-previewmode .btn{border-top:2px solid #8a8a8a;border-bottom:2px solid #8a8a8a;cursor:pointer;font-size:.8rem;}
#topbar #btn-previewmode>.btn:first-child{border-left:2px solid #8a8a8a;}
#topbar #btn-previewmode>.btn:last-child{border-right:2px solid #8a8a8a;}
#topbar #btn-previewmode .btn label{font-weight:bold;color:white;text-shadow:0px -1px 2px #444;cursor:pointer;}
#topbar #btn-previewmode .btn{background:#b8c4d2;
background:-moz-linear-gradient(top,#b8c4d2 0%,#97aac0 50%,#829ab1 51%,#8a9eb6 100%);
background:-webkit-linear-gradient(top,#b8c4d2 0%,#97aac0 50%,#829ab1 51%,#8a9eb6 100%);
background:linear-gradient(to bottom,#b8c4d2 0%,#97aac0 50%,#829ab1 51%,#8a9eb6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8c4d2', endColorstr='#8a9eb6',GradientType=0);
}
#topbar #btn-previewmode .btn.active{background:#9aafc9;
background:-moz-linear-gradient(top,#9aafc9 0%,#6d8cb3 50%,#597eaa 51%,#5b80ab 100%);
background:-webkit-linear-gradient(top,#9aafc9 0%,#6d8cb3 50%,#597eaa 51%,#5b80ab 100%);
background:linear-gradient(to bottom,#9aafc9 0%,#6d8cb3 50%,#597eaa 51%,#5b80ab 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9aafc9',endColorstr='#5b80ab',GradientType=0);
}

@media (min-width:576px){} /*sm*/
@media (min-width:768px){#topbar{position:absolute;height:3em;}} /*md*/
@media (min-width:992px){#topbar #btn-previewmode .btn{font-size:1rem;}} /*lg*/

#design-canvas{overflow-x:hidden;padding:.5em 0 0 .5em;text-align:center;}
#design-canvas-inner{display:inline-block;margin:0 auto;position:relative;}

@media (min-width:768px){#design{padding-top:3em;}}

#frame-main{position:relative;/*left:0;top:0;*/background-repeat:no-repeat;background-size:contain;background-position:center center;outline:1px dashed #a0a0a0;width:0;height:0;background-size:cover;background-color:#ccc;}
/*#frame-main.active{background-color:#f5f5f5;}*/

ul#frames{height:17em;overflow:auto;padding:.5em;border:1px solid #d0d0d0;margin:0 0 .5em 0;}
ul#frames li{list-style-type:none;padding:.2em;cursor:pointer;white-space:nowrap;}
ul#frames li.ui-selected{background-color:#87cefa;}
ul#frames li.ui-sortable-placeholder{display:block;height:1.5em;border:1px dashed #ccc;visibility:visible !important;background:none !important;}
ul#frames li .sort-handle{display:inline-block;height:1em;width:1em;vertical-align:middle;margin-right:.3em;background-image:url(/content/images/sort.svg);background-repeat:no-repeat;background-position:center center;background-size:contain;cursor:ns-resize;display:none;}
ul#frames li.ui-selected .sort-handle{display:inline-block;}

ul#frames li  span.frame-name{background-repeat:no-repeat;background-position:center left;padding-left:1.8em;}
ul#frames li.frame-image span.frame-name{background-image:url(/Content/images/frame_image.png);}
ul#frames li.frame-text span.frame-name{background-image:url(/Content/images/frame_text.png);}
ul#frames li.frame-main span.frame-name{background-image:url(/Content/images/frame_product.png);}

.badge{padding:0 .5em;display:inline-block;}
.badge>span{color:red;font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle;display:inline-block;}

#design-controls .row{margin-left:-.25em;margin-right:-.25em;}
#design-controls .row .col{padding:0 .25em;}

#design-controls{padding:.5em .25em 0;overflow-y:auto;}
#design-controls .btn,.topnav .btn{padding:.2em .3em;border:1px solid #d0d0d0;}
#design-controls .btn{margin-bottom:.2em;}
#design-controls .btn-group-toggle .btn{line-height:1;cursor:pointer;position:relative;}
#design-controls .btn-group-toggle .btn.active{background-color:#ccc;border-color:#222;}


@media (min-width:768px){
#design-controls{height:100%;width:20em;max-width:none;border-right:2px solid #ccc;flex:none;}
#design-canvas{height:100%;width:calc(100% - 20em);max-width:none;flex:none;}
}

.frame.active{outline:none;}
#frame-main{z-index:0;}
.frame-group-handle{z-index:1;}
.frame-handle,.frame-group-handle{width:1px;height:1px;position:absolute;}
.frame{position:absolute;outline:1px solid #b0b0b0;}
.frame-group{position:absolute;}
.frame-group .frame{outline:1px solid #b0b0b0;}

.frame.active .ui-resizable-se, .frame.active .ui-resizable-nw, .frame.active .ui-resizable-sw, .frame.active .ui-resizable-ne,
.frame-group .ui-resizable-se, .frame-group .ui-resizable-nw, .frame-group .ui-resizable-sw, .frame-group .ui-resizable-ne{background:#fff;border:1px solid #555;width:10px;height:10px;/*z-index:99999 !important;*/}
.frame.active .ui-resizable-w, .frame-group .ui-resizable-w{background:url("images/vresize.gif") repeat-y 5px top;}
.frame.active .ui-resizable-e, .frame-group .ui-resizable-e{background:url("images/vresize.gif") repeat-y 1px top;}
.frame.active .ui-resizable-n, .frame-group .ui-resizable-n{background:url("images/hresize.gif") repeat-x left 5px;}
.frame.active .ui-resizable-s, .frame-group .ui-resizable-s{background:url("images/hresize.gif") repeat-x left 1px;}

.frame .text-path{position:absolute;width:10px;height:10px;background:red;border-radius:100%;z-index:999;cursor:pointer;display:none;}
.frame.active .text-path{display:block;}
.frame.frame-text{text-align:center;}
.frame.frame-text img{object-fit:contain;max-width:100%;height:100%;vertical-align:top;}
.frame.frame-image img{object-fit:contain;width:100%;height:100%;}
#elpreview img{max-width:100%;max-height:100%;}

.ui-resizable-se{right:-5px;bottom:-5px;background-image:none !important;}
.ui-resizable-ne, .ui-resizable-nw, .ui-resizable-se, .ui-resizable-sw{width:15px;height:15px;z-index:91 !important;}
.ui-rotatable-handle{height:25px;width:25px;position:absolute;}
.ui-rotatable-handle{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAtklEQVQ4je2TUQ3DMAxEH4cyCIERGIIhCIMwCINSCIZCKIdSKIZS2D7maG7apF63n0l70klVZZ0T+wJ/fpYO8EAUBcCdNYvAvaKkmi2WU02FwSha1L9ZfTfpVWGUBppQGDcNXWG2h2c7gip5brOhoclwlIK+UXMBrkrNrWfD2nXfJonh8C1DPfDTAS7J+ZrYRiaTRCZurMMbeC3Asw69t5rmJ1V7ekdJ2MXxvFZpPMhpP6LjYEkPqNJPCwBrBicAAAAASUVORK5CYII="), pointer;}
.ui-rotatable-handle-sw{bottom:-27px;left:-27px;}
.ui-rotatable-handle-nw{top:-27px;left:-27px;}
.ui-rotatable-handle-se{bottom:-27px;right:-27px;}
.ui-rotatable-handle-ne{top:-27px;right:-27px;}

.prop{font-size:.85rem;margin-bottom:.5em;}

.prop .prop-ctrl span, .prop .prop-ctrl input{max-width:100%;}
.prop-group{margin-bottom:.5em;}
.prop-group > .prop:last-child{margin-bottom:0;}
.prop select{width:100%;}
hr{margin:0 -.25em .5em -.25em;height:.5em;border:0;box-shadow:inset 0 .4em .4em -.4em rgba(0, 0, 0, 0.5);}
.block-header{margin:0 0 .5em 0;background-color:#b8c6db;background:linear-gradient(to bottom,#6782B4 0%,#B1BFD8 74%);}
.block-header span{display:block;line-height:2;font-weight:bold;font-size:1em;text-shadow:0 0 2px #777;color:#fff;}

.form-control{height:2em;padding:.2em .5em;line-height:1.1;font-size:.8rem;}
.form-control:focus{box-shadow:none;}
.ui-spinner{border:none !important;}
.ui-spinner > input{margin:0;}
.ui-spinner .ui-spinner-button{border-left:1px solid #ced4da !important;font-size:.8em;cursor:pointer;}
.ui-spinner .ui-spinner-button:hover{background-color:#eee;}
.ui-spinner .ui-spinner-up{border-bottom:1px solid #ced4da !important;}
.ui-spinner .ui-spinner-button::after{position:absolute;left:0;right:0;width:100%;text-align:center;font-size:.7em;}
.ui-spinner .ui-spinner-up::after{content:"▲";bottom:0;}
.ui-spinner .ui-spinner-down::after{content:"▼";top:0;}

label{margin-bottom:0;}
/*.ui-widget input{font-size:initial;}*/

/*Buttons*/
.btn-x{position:relative;margin:0;padding:0;overflow:hidden;background:#CCC;border-radius:2px;border:solid 2px #FFF;transition:all .3s ease-out;cursor:pointer;width:1em;height:1em;box-sizing:content-box;vertical-align:middle;display:inline-block;}
.btn-x:hover{background:#BB3333;transform:rotate(90deg);}
.btn-x b{display:block;position:absolute;height:0;width:0;padding:0;margin:0;border:solid .5em rgba(255,255,255,0);}
.btn-x b:nth-child(1){border-top-color:#FFF;top:-2px;}
.btn-x b:nth-child(2){border-left-color:#FFF;left:-2px;}
.btn-x b:nth-child(3){border-bottom-color:#FFF;bottom:-2px;}
.btn-x b:nth-child(4){border-right-color:#FFF;right:-2px;}

/*Spectrum*/
.sp-replacer{width:100%;}
.sp-replacer .sp-preview{float:left;margin:0;;width:80%;}
.sp-replacer .sp-dd{float:right;margin:0;width:20%;text-align:center;}

.elfinder-cwd-select,.elfinder-cwd-selectall{display:none;}
.elfinder-navbar{min-width:12em;}
.btn.disabled{opacity:.45;cursor:not-allowed;}

/*JsTree*/
#jstree,#cc-colors{max-height:25em;height:25em;overflow-y:auto;overflow-x:hidden;margin:.5em;padding:1em .5em;border:1px solid #ccc;}
#cc-colors .cc-color{padding-top:.2em;padding-bottom:.2em;}
#cc-colors .cc-color:hover{background-color:#f0f0f0;}
.vakata-context{z-index:9999 !important;} 

#product-title{overflow: hidden;text-overflow:ellipsis;max-width:25vw;font-size: 0.8em;}