body{
	font-family: sans-serif;
    background-color: #8ed2f5;
}
text, tspan{
	/*
	cursor: default;
	*/
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
textarea{
	resize: none;
}
svg:not(:root){
	overflow:  visible;
	position: relative;
    margin:40px;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
	outline: 0;
}
.form-group {
    margin-bottom: 10px;
}
/*replace old one*/
.movable{
    cursor: move;
}
.col-no-gutter{
    padding-right:0;
    padding-left:0;
}
.row-gutter{
	margin-top: 15px;
}
/*.fa + span{
	margin-left: 0.5em;
}*/
textarea.form-control{
	padding: 3px 3px;
}
/**/
.navbar{
	border-radius: 0 !important;
}
/*container*/
.sd-container{
	min-width: 1170px;
}
.container-main{
	position: fixed;
    bottom: 207px;
    left: 0;
    right: 0;
    top: 80px;
    overflow: auto;
}
.container-main.pane-open{
    bottom: 238px;
}
@media (min-width: 768px){
    .container-main.pane-open,
    .container-main{
        top: 60px;
        left: 190px;
        bottom: 0;
    }
}
.sd-pane-svg-wrapper{
    text-align:  center;
    line-height: normal;
}
/*navbar-sub*/
.navbar-sub{
	background-color:#ddd;
   	position: fixed;
	left: 0;
    top: 0;
	width: 100%;
}
.navbar-menu{
	position: relative;
	overflow: auto;
}
.navbar-sub li{
	display: table-cell;
    border-left: 1px transparent solid;
    white-space: nowrap; 
}
.navbar-sub li:first-child{
    border-left: none;
}
.navbar-sub li > a{
	text-transform: capitalize;
	display:block;
	text-align: center;
	background-color: #337ab7;
	color: #fff;
}
.navbar-sub li > a:focus,
.navbar-sub li > a:hover{
	color: #337ab7;
	background-color: #fff;
}
.navbar-sub li > a.disabled{
	opacity: 0.65;
	cursor: not-allowed;
}
.navbar-sub li > a.disabled:focus,
.navbar-sub li > a.disabled:hover{
	background-color: transparent;
}
.navbar-sub .navbar-sub-btn .fa{
	display: inline-block;
}
.navbar-sub .navbar-sub-btn .fa + span{
    display: none;
	/*display: block;
	margin-left: 0;*/
}
.navbar-menu .navbar-sub-btn{
   /* background-image: url(../image/menu-bg.png);
	background-color: transparent;
    background-position: 100% 0;*/
}
.sd-range{
    margin-left: 2px;
    font-size:12px;
}
.side-pane{
    position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	background-color: #fff;
    padding-top: 38px;
}
.side-pane-help{
    color: #666;
    padding: 0 15px;
    margin-bottom: 10px;
    font-size: 14px;
}
.img-help,
.product-help,
.template-help,
.u-template-help,
.upload-help{
    padding: 0;
}
.side-pane-header{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #f1f1f1;
    padding: 9px 15px;
    position:absolute;
    left: 0;
	right: 0;
    top:0;
}
.bt-pane-close{
    position:absolute;
    right: 0;
    top:0;
    padding: 9px 15px;
    background-color: #ccc;
    color: #333;
}
.side-pane-content{
	padding: 9px 0;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.side-pane-inner{
    position:absolute;
    left: 0;
	right: 0;
    top:38px;
    bottom: 0;
    background-color: #fff;
    z-index: 20;
}
/*edit menu color*/
@media (min-width: 768px){
    .navbar-sub{
        width: 190px;
		padding-top: 80px;
		bottom: 0;
    }
    .navbar-sub li{
		display: block;
        border-left: none;
   	}
	.navbar-sub li:not(:last-child){
		border-bottom: 1px solid #fff;
	}
	.navbar-sub li > a{
		text-transform: uppercase;
		text-align: left;
	}
	.navbar-sub .navbar-sub-btn .fa,
	.navbar-sub .navbar-sub-btn .fa + span{
		display: inline;
	}
	.navbar-sub .navbar-sub-btn .fa + span{
		margin-left: 0.5em;
	}
    .side-pane{
        width: 300px;
		left: 190px;
		top: 60px;
        right: auto;
        bottom: auto;
	}
	.side-pane.side-pane-color{
        width: 400px;
	}
    .side-pane-content{
        height: 550px;
    }
}
/*pane-sum*/
.pane-sum{
    position: fixed;
    left: 0;
	right: 0;
	bottom: 0;
    height: 205px;
	/*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
	background-color: #fff;
    overflow: auto;
}
.sd-el{
    display: table;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 10px;
}
.sd-el-label, .sd-el-data{
     display: table-cell;
}
.sd-el-data{
    text-align: right;
}
.sd-product .sd-el-data,
.sd-product-desc .sd-el-data{
     text-align: left;
}
.sd-price-single .sd-el-data{
    font-weight: bold;
}
.sd-price-tax{
    color: #555;
    font-size: 13px;
}
@media (min-width: 768px){
    .pane-sum{
        left: auto;
		top: 60px;
        width: 250px;
        right: 0;
        height: auto;
		bottom: auto;
		padding-top: 40px;
    }
}
/*option*/

.sd-option{
    border: 1px solid #ccc;
    margin-top: 2px;
    font-size: 13px;
}
.sd-option-item{
    padding: 3px 7px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    display: table;
    width: 100%;
}
.sd-option-item:last-child{
    border-bottom:none;
}
.sd-option-item:hover,
.sd-option-item.active{
    background-color: #ccc;
}
.sd-option-item.active::before{
    font-family: 'FontAwesome'; 
    content: "\f00c";
    color: #009926;
}
.sd-production-desc .sd-option-item::before{
    font-family: 'FontAwesome'; 
    content: "\f10c";
    color: #333;
    padding-right: 10px;
    font-size: 15px;
}
.sd-production-desc .sd-option-item:hover::before,
.sd-production-desc .sd-option-item.active::before{
    content: "\f192";
    color: #333;
    padding-right: 10px;
    font-size: 15px;
}
.sd-option-left,
.sd-option-body{
    display: inline-block;
    vertical-align: top;
}
.sd-option-left{
   /* width: 25%;*/
    display: table-cell;
    padding: 5px 5px 0 0;
    width:75px;
}
.sd-option-body{
    display: table-cell;
   /* width: 75%;*/
}
.sd-option-img{
    width: 100%;
}
.sd-option-label{
    font-weight: bold; 
}
/*swatch*/
.sd-wells{
    margin: 0 -8px
}
.sd-swatch-col{
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    width: 25%;
}
.sd-swatch{
    cursor: pointer;
    border: 1px solid #eee;
}
.sd-swatch.active{
   border-color: #000;
}
.sd-swatch-color{
    height: 30px;
}
.sd-swatch-color.has-color,
.sd-swatch-color.no-color{
    background-image: url(../image/color-palette.png);
    background-size: 100% 100%; 
}
/*.sd-swatch-color.no-color{
    text-align: center;
}
.sd-swatch-color.no-color::before{
    color:red;
    content:"╱";
    font-size: 20px;
}*/
.sd-swatch-label{
    font-size: 9px;
    text-align: center;
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sd-font-pickers{
    margin-left: -8px;
    margin-right: -8px;
}
.sd-font-col{
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    width: 50%;
}
.bt-removec{
    margin-left: 3px;
}
/*form*/
.side-pane-content label{
    font-size: 14px;
    margin-top: 0;
    font-weight: normal;
}
.sd-shape-row{
    margin-left: -8px;
    margin-right: -8px;
}
.sd-shape-col{
   display: inline-block;
   width: 25%;
   padding:0 8px;
}
.sd-shape-bt{
    margin-bottom: 5px;
}
.sd-col{
	display: inline-block;
	vertical-align: top;
    padding-left: 15px;
    padding-right: 15px;
	width: 50%;
}
@media (min-width: 768px){
	.sd-col{
		width: 25%;
	}
}
@media (min-width: 970px){
	.sd-col{
		width: 20%;
	}
}
.sd-scroll-viewport{
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.sd-products .thumbnail,
.sd-symbols .thumbnail,
.sd-templates .thumbnail{
	cursor: pointer;
	position: relative;
}
.sd-templates .obj-hitarea{
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   cursor: pointer;
   position: absolute;
}
.sd-templates .obj-thumbnail{
    width: 100%;
}
.l-thumb-con{
	position: fixed;
	display: inline-block;
}
/*modal*/
.sd-modal{
	position: fixed;
	padding-top: 52px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFF;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	z-index: 1050;
}
.sd-modal .sd-scroll-viewport{
	padding: 15px 15px 0 15px;
}
.sd-modal-foot {
    border-top: 1px solid #e5e5e5;
    bottom: 0;
    left: 0;
    padding: 15px;
    position: absolute;
    right: 0;
    text-align: right;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
}
.modal-backdrop{
    opacity: 0.5;
}
.sd-modal-header{
    border-bottom: 1px solid #e5e5e5;
    left: 0;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
}
.sd-modal-title{
	margin: 0;
}
.sd-modal-body{
	position: relative;
	height: 100%;
	padding-bottom: 15px;
}
.sd-modal-price{
    padding-bottom: 65px;
    font-size: 13px;
}
.sd-modal-price .sd-modal-body{
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom:0;
}
.sd-modal-price .form-group{
    padding-top: 5px;
    margin-bottom: 5px;
}
.sd-modal-price .form-group::after{
    clear: both;
    content: " ";
    display: table;
}
.sd-modal-price label{
    font-weight: normal;
}
.sd-modal-price p{
    min-height: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: right;
}
.price-single{
     border-top: 1px solid #e5e5e5;
     color: #449944;
}
.price-total, .price-total label{
    font-weight: bold;
    font-size: 14px;
}
@media (min-width: 768px){
	.sd-modal{
		margin: 30px auto;
		border-radius: 6px;
        width: 730px;
	}
    .sd-modal-price{
        width: 480px;
    }
}
@media (min-width: 970px){
	.sd-modal{
        width: 900px;
	}
}

.sd-symbols .sd-col,
.sd-templates .sd-col{
    width: 100%;
}
.sd-modal .thumbnail img{
    padding: 5px;
}
.thumbnail .caption {
    font-size: 10px;
    padding: 5px;
    text-align: center;
    border-top: 1px #ccc solid;
}
.sd-symbols .sd-col .thumbnail .caption {
    font-size: 12px;
    padding: 5px;
}
@media (min-width: 768px){
    .sd-symbols .sd-col,
    .sd-templates .sd-col{
        width: 25%;
    }
}
@media (min-width: 970px){
    .sd-symbols .sd-col,
    .sd-templates .sd-col{
        width: 20%;
    }
}
/*end new*/
.caption-name-img{
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pre-user-temp{
	position: relative;
} 
.pre-user-temp .img-pre{
	padding: 10px;
}
.pre-user-temp .thumbnail{
	position: relative;
    top: 10px;
    left: 10px;
    padding-left: 10px;
    padding-right: 10px;
	display: inline-block;
    text-decoration: none;
	box-shadow: gray 0px 1px 1px;
}
.pre-user-temp{
	text-align: center;
	padding-top: 20px;
}
.pre-user-temp .thumbnail{
	width: 300px;
	text-align: center;
}
/*share*/

.sd-row .sd-share{
    border-top: #ccc 1px solid;
    padding-top: 5px;
}
.icon-share .list-icon-share{
	display: inline-block;
	margin: 1px;
	width: 19%;
	height: 50px;
}
.sd-templates .icon-share .list-icon-share{
	width: 30px;
    height: 30px;
}
.sd-templates .sd-col{
	position: relative;
}
.delete-template-btn{
	display: inline-block;
    position: absolute;
    z-index: 3;
    right: 20px;
    opacity: 0.2;
    font-weight: bold;
    font-size: 20px;
	cursor: pointer;
}
.delete-template-btn:hover{
	opacity: 0.5;
}
.sd-templates .icon-share:hover{
	opacity: 1;
}
.sd-col .list-icon-share .thumbnail{
	margin: auto;
}
.icon-share .icon-email,
.sd-col .icon-email{
	margin-right: -3px;
}
.sd-form-palette{
	/*overflow: auto;*/
}
.form-e-mail{
	background-color: #fff;
}
.sd-form-palette .sd-pop-head{
	padding-left: 15px;
}

/*loading*/
.sd-loading{
	position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1500;
    background-color: #80bfff;
    /*width: 250px;*/
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.loading-txt{
	margin-left: 5px;
    color: #004d99;
    display: inline;
    padding-right: 5px;
    position: relative;
    bottom: 12px;
}
.loading-img{
	width: 32px;
    height: 32px;
    margin-top: 3px;
    display: inline-block;
    background: no-repeat;
	background-image: url(../../image/email/loading.gif);
}
/*command u-template*/
.sd-u-template .sd-utp-palette .form-group .sd-pop-head{
	padding-left: 0;
}
.sd-u-template{
	height: 100%;
    padding-bottom: 55px;
    position: relative;
}
.sd-utp-palette{
	padding: 15px;
	padding-top: 0;
	overflow: auto;
}
.btn-select-template,
.del-template{
	text-align: center;
}
.btn-select-template .btn-primary{
	width: 50%;
}
.del-template .btn-primary{
	width: 50%;
	background-color: #e60000;
	border-color: #990000;
}
.del-template .btn-primary:hover{
	background-color: #cc0000;
}
.del-template .btn-primary:active{
	background-color: #800000;
}

/*template new*/
.do-template{
    color: #333;
    font-size: 12px;
    text-align: center;
    border-top: 1px #ccc solid;
}
.do-template .do-col{
    /*padding: 5px;*/
    margin: 5px 0;
    width: 31%;
    text-align: center;
    border-right: #ccc 1px solid;
    display: inline-block;
}
.do-template .do-col:last-child{
    border: 0;
}
.do-col a{
    color: #333;
}
.price-info-btn,
.option-info-btn{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    line-height: 1;
}
.btn-clear-all{
    position: absolute;
    right: 10px;
}

.btn-font-img{
   /* background-repeat: no-repeat;
    background-position: 50% 50%;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    color: transparent;
		width: auto;*/
		padding: 4px;
}
.parent-curve .parent-type .btn-group{
    width: 100%;
    height: 34px;
}
.parent-curve .parent-type .btn-group .bt-curve-in,
.parent-curve .parent-type .btn-group .bt-curve-out{
    width: 50%;
    height: 100%;
}
.parent-curve .parent-type .btn-group .bt-curve-in{
	display: inline-block;
    background: no-repeat;
    background-image: url('../image/curve-in.png');
	background-size: 50% 100%;
    background-position: center; 
}
.parent-curve .parent-type .btn-group .bt-curve-out{
	display: inline-block;
    background: no-repeat;
    background-image: url('../image/curve-out.png');
	background-size: 50% 100%;
    background-position: center; 
}
.size-row-value{
    text-align: right;
    width: 50%;
}
.sd-progress-message{
    position: fixed;
    bottom: 60px;
    right: 15px;
}
/*.sd-progress-message .message-row{
    margin-bottom: 10px;
}*/
.sd-bar{ 
    height: 5px;
    position: fixed;
    top: 0;
    background: #0080ff;
    width: 0;
    z-index: 1080;
}
.sd-bar.load{
    width: 90%;
    animation: progressBar 3s ease-in-out;
}
.sd-bar.end{
    width: 100%;
    animation: progressBarEnd 0.1s linear;
}
@keyframes progressBarEnd {
  100% { width: 100%; }
}
@keyframes progressBar {
  0% {width: 0;} 
  100% { width: 90%; }
}
.sd-static-message{
    position: relative;
    margin: auto;
    top: 10px;
    width: 250px;
    z-index: 1100;
}
@media (min-width: 768px) {
    .sd-static-message{
        width: 350px;
    }
}
@media (min-width: 970px) {
    .sd-static-message{
        width: 450px;
    }
}
.sd-static-message-bg{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    z-index: 1090;
}
.sd-static-message .message-row{
    position: relative;
    padding: 10px 15px;
    margin-bottom: 5px;
}
.sd-static-message .message-btn-group{
    text-align: right;
}
.sd-static-message .message-btn-group .btn{
    margin: 0 5px;
}
.sd-static-message .message-alert{
    margin-bottom: 5px;
}
.sd-static-message .close{
    position: absolute;
    top: 0px;
    right: 3px;
}
.sd-static-message .danger{
    border: 1px solid #ff4d4d;
    background-color: #ff4d4d;
    color: #fff;
}
.sd-static-message .success{
    border: 1px solid #009926;
    background-color: #009926;
    color: #fff;
}
.sd-static-message .warning{
    border: 1px solid #ff9900;
    background-color: #ff9900;
    
    color: #fff;
}
.sd-static-message .sd-alert,
.sd-static-message .confirm{
    border: 1px solid #bfbfbf;
    background-color: #fff;
    color: #000;
}
.sd-static-message .load{
    background-color: #fff;
    border: 1px solid #ccc;
}
.load-img{
	width: 25px;
    height: 25px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    background: no-repeat;
    background-image: url(../../image/email/loading.gif);
    background-size: contain;
}
.text-load{
    display: inline-block;
}
.btn-cart{
    position: relative;
}
.message-load-price{
    position: absolute;
    padding: 10px 15px;
    background-color: #fff;
    top:-1px;
    left:-1px;
    right:-1px;
    bottom: -1px;
    text-align: center;
    color:#333;
}
.top-bar{
	position: fixed;
	background-color: #ddd;
	text-align: center;
}
.top-menu li{
	display: inline-block;
	vertical-align: top;
}
.top-menu li:not(:last-child){
	border-right: #fff 1px solid;
}
.top-menu i{
	text-align: center;
	display: block;
	font-size: 20px;
}
.top-menu a.disabled{
	cursor: not-allowed;
	opacity: 0.65;
}
.sd-production{
    padding: 0 15px;
}
.sd-production .sd-option-item .sd-option-label{
    position: relative;
    margin-left: 13px; 
}
.sd-production .sd-option-item.active .sd-option-label{
    margin-left: 0; 
}
@media (min-width: 768px){
	.top-bar{
		left: 190px;
		right: 0;
	}
   
}
.btn-message-danger,
.btn-confirm,
.btn-cancel{
    border-radius: 0;
}
.label-move-top-bottom{
    white-space: nowrap;
}
.sd-delete-btn,
.sd-ok-btn{
    width: 100%;
}

/*new utp*/
.sd-modal-foot .form-share{
    position: relative;
    height: 35px;
}
.form-share .list-share{
    position: absolute;
    top: 0;
    right: 0;
}
.form-share .list-action{
    position: absolute;
    top: 0;
    left: 0;
}
.form-share .row-icon-share{
    display: inline-block;
    width: 35px;
    cursor: pointer;
    margin: 0 2px;
}
.u-template-btn-action{
    margin: 0 2px;
}
.form-parent-email{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 15%;
}
.form-parent-email .form-u-template-email{
    padding: 15px;
    margin: auto;
    position: relative;
    width: 50%;
    background-color: #fff;
}
.bg-form-email{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5; 
}
.sd-templates .obj-hitarea-selected{
    box-shadow: 0 0 10px dodgerblue
}
.option-list label span{
    font-weight: normal;
    vertical-align: top;
    padding-left: 5px;
}
.sd-view-size-con{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 15px;
    top: 50px;
    left: 40px;
    border: 1px solid #4e83a5;
    color: #4e83a5;
}
@media (min-width: 768px){
    .sd-view-size-con{
        bottom: 20px;
        left: auto;
        top: auto;
        right: 300px;
    }
}
.hole-layout
.fix-row{
	margin-left: -10px;
	margin-right:-10px;
}
.fix-item-col,
.hole-item-col{
	display: inline-block;
	width: 33.33%;
	vertical-align: top;
	padding: 0 10px;
	margin-bottom: 10px;
}
.fix-item-col{
	width: 50%;
}
.fix-item,
.hole-item{
	padding: 5px;
	border: 1px solid #dddddd;
	cursor: pointer;
}
.active .fix-item,
.hole-item.active{
	border-color: #0000ff;
}
.fix-thumb img,
.hole-item img{
	width: 100%;
}
.fix-label{
	display: inline-block;
	font-size: 13px;
}
.fix-selection{
	position: relative;
	margin-bottom: 2px;
}
.fix-select-btn{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
}
.fix-select-btn::before{
	position: relative;
	top: 41%;
	display: inline-block;
	padding: 0 3px;
	font-family: FontAwesome;
	content: "\f107";
	color: #fff;
	font-size: 15px;
}
@media (min-width: 768px){
  .hole-item-col{
		width: 10%;
	}
	.fix-item-col{
		width: 16.66%;	
	}
}
.sd-tab-box{
	display: none;
	padding-top: 15px;
	padding-bottom: 15px;
}
.sd-tab-box.active{
	display: block;
}
.hole-list-btns{
	float: right;
}
.more-option legend{
	cursor: pointer;
	border: none;
}
.more-option legend::after{
	font-family: FontAwesome;
	font-size: 15px;
	color: #aaa;
	padding-left: 3px;
	content: "\f067";
}
.more-option.active legend::after{
	content: "\f068";
}
.more-option .pre-moreoption{
	display: none;
}
.more-option.active .pre-moreoption{
	display: block;
}
.logo{
	position: absolute;
	left: 0;
	top:0;
	right: 0;
}
.logo img{
	width: 100%;
}