@charset "utf-8";
/* CSS Document */

.admin-bar .product-designer{
  margin-top: 32px;
}

.product-designer {
  overflow: hidden;
  padding: 20px 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #00000085;
  height: 100%;
  z-index: 99;
}


.product-designer .menu {
  background: #314861 none repeat scroll 0 0;
  height: 100%;
  position: fixed;
   top: 0;
  /* transition: all 1s ease 0s; */
  width: 360px;
  z-index: 999;
  overflow-y: scroll;
}


.pd-btn{
  text-align: center;
  background: #009688;
  cursor: pointer;
  border-radius: 2px;
  color: #ffffff;
  padding: 7px 10px;
  font-size: 14px;
  display: inline-block;
}

.editor-tabs{}
.editor-tabs .editor-tab-navs{
  z-index: 999;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
  display: block;
}
.editor-tabs .editor-tab-navs .nav{
  display: inline-block;
  width: 49.5%;
  padding: 15px 0px;
  background: #3a5673;
  margin: 0;
  float: left;
  color: #fff;
  border-right: 1px solid #0000004d;
  text-align: center;
  cursor: pointer;
  font-size: 14px;

}

.editor-tabs .editor-tab-navs .nav.active{
  background: #314861;
}
.editor-tabs .editor-tab-content{
  clear: both;
  padding: 10px;
  /*background: #314861;*/
}

.editor-tabs .editor-tab-content.inactive{
  display: none;
}











/*.product-designer .menu .item {*/
/*  color: #fff;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  margin: 20px 0;*/
/*  clear: both;*/
/*  border: 1px solid #4f647b;*/
/*  background: #3c526b;*/
/*}*/

/*.product-designer .menu .item:hover{*/
/*  background: #314861 none repeat scroll 0 0;*/
/*}*/


/*.product-designer .menu .item .icon{*/
/*  outline: none;*/
/*  padding: 10px;*/
/*  background: #3a5673;*/
/*  color:#fff;*/
/*  border: none !important;*/
/*  margin: 0 !important;*/
/*}*/

/*.product-designer .menu .item .icon.ui-state-active{*/
/*outline: none;*/
/*}*/


/*.product-designer .menu .item .icon .ui-accordion-header-icon{*/
/*  display: none;*/
/*}*/

.product-designer .menu .item.templates {

}






.product-designer .menu .loading{
display: none;
  }




/*.product-designer .menu .item:hover .child {*/
/*background: #314861 none repeat scroll 0 0;*/

/*!* left: 80px; *!*/
/*  !*padding: 10px;*!*/
/*!* position: absolute; *!*/
/*!* top: 0; *!*/
/*!* width: 250px;*!*/
/*}*/


/*.product-designer .menu .item .child {*/

/*text-align: left;*/
/*  padding: 10px;*/
/*  background: none !important;*/
/*  border: none !important;*/
/*}*/



.product-designer textarea {
width: 95%;
}









.product-designer .pre-templates-list {
  margin: 15px 0;
}

.product-designer .pre-templates-list li {
  margin: 0;
  padding: 5px;
  cursor: pointer;
  border-bottom: 1px solid #4848484d;
  transition: all ease 0.5s 0s;

}

.product-designer .pre-templates-list li:hover{
  background: #4848484d;
}


.product-designer .pre-templates-list li:nth-child(2n+1) {

}



.product-designer .side-list {
  padding: 0;
  margin: 0;
}
.product-designer .side-list li {
display: block;
margin: 0;
padding: 0;
}

.product-designer .side-list img {
border-radius: 0;
box-shadow: none;
}

.product-designer .side-list li {
  display: inline-block;
  font-size: 12px;
  margin: 0 0px;
  overflow: hidden;
  padding: 5px 0;
  text-align: left;
  text-decoration: none;
  vertical-align: top;
  width: 99%;
  line-height: 0;
  /*border-bottom: 1px solid #4f647b;*/
  transition: all ease 0.5s 0s;
}


.product-designer .side-list li:last-child {

  border-bottom: 1px solid rgba(0,0,0,0);

}


.product-designer .side-list li:nth-child(2n+1) {
/*background: rgba(176, 176, 176, 0.18);*/
}

.product-designer .side-list li img{
vertical-align: middle;
width: 60px;
}

.product-designer .side-list li .name {
vertical-align: middle;
font-size: 14px;
margin-left: 10px;
  color: #fff;
}



.product-designer .side-list .fa {
/*display: inline-block;*/
/*margin-top: 55px;*/
}

/*.product-designer .side-list a.active {*/
  /*border: 1px solid #999;*/
/*}*/

.product-designer .side-list li{
  opacity: 0.3;

}



.product-designer .side-list li.active, .product-designer .side-list li:hover {
  opacity: 1;
  /*background: #506f9075;*/
}




.side-preview {
  float: right;
  padding: 5px 10px;
  background-image: url(../images/tile.png);
}

.canvas-container{
  transform: translate(50%, 0);
}

.product-designer .designer {
  /*background: #f5f5f5 none repeat scroll 0 0;*/
  /* height: 100%; */
  /* text-align: center; */
  /* float: left; */
  margin: 0 auto;
  top: 50%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
}

.product-designer .designer .bg-main{
  background: #efefef none repeat scroll 0 0;
  height: 100%;
  text-align: center;
  width: 100%;
}

.product-designer .designer .canvas-container {
  margin: 0 auto;
  border: 1px dashed rgb(175 175 175 / 98%);
  transition: all ease 1s 0s;
}

.product-designer .designer .canvas-container:hover {
  border: 1px dashed rgb(175 175 175 / 98%);
}

.product-designer #clipart-cat {
  margin-bottom: 10px;
}

.product-designer .clipart-list {
  padding: 10px 5px;
  background-image: url(../images/tile.png);
}

.product-designer .clipart-list img {
  box-shadow: none;
  display: inline-block;
  margin: 2px;
  max-width: 45px;
  vertical-align: top;
  padding: 4px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0);
  transition: all ease 1s 0s;
  background: #6b6b6be8;
}
.product-designer .clipart-list img:hover {
  background: #56565673;
  border: 1px solid #ddd;
}
.product-designer .clipart-pagination{
  margin: 10px 0px;
}
.product-designer .clipart-pagination .page-numbers {
  background: #daebfd87  none repeat scroll 0 0;
  color: rgba(0, 0, 0, 0.57);
  display: inline-block;
  margin: 5px 0 0 2px;
  padding: 2px 10px;
  text-decoration: none;
}

.product-designer .clipart-pagination .current, .product-designer .clipart-pagination .page-numbers:hover {
  background: rgb(255 255 255) none repeat scroll 0 0;
}

.product-designer .clipart-pagination .next, .product-designer .clipart-pagination .prev {
display:none;
}


.product-designer #plupload-clipart, .product-designer #plupload-shape {
  display: inline-block;
}


.product-designer .clipart-upload, .product-designer .shape-upload {
  background: #009688;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 3px;
  color: #fff;
}

.stock-images .image-list{
  columns: 2;
  column-gap: 10px;
  margin: 20px 0;
}

.stock-images .image-list img{
  margin-bottom:10px;
}
.product-designer .quotes-list {

  max-height: 250px;
  clear: both;
}

.product-designer .quotes-list .quote {
  padding: 5px 5px;
  font-size: 13px;
}

.product-designer .quotes-list .quote:nth-child(2n+1) {
  background: rgba(176, 176, 176, 0.18);
}



.product-designer .tabs {
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
}

.product-designer .tabs .navs {
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
}
.product-designer .tabs .nav {
  display: inline-block;
  float: left;
  list-style: none;
  margin: 0 0 10px 0;
  padding: 10px !important;
  background: #3a5673;
  border-right: 1px solid #314861;
  text-transform: uppercase;
  font-size: 12px;
  border: none !important;
}

.product-designer .tabs .nav.ui-tabs-active {
  background: #4f7194;
}

.product-designer .tabs .nav a {
  padding: 0 0;
  margin: 0;
  text-decoration: none;
  outline: none;
  color: #fff;
}

.product-designer .tabs .nav-content{
  clear: both;
  padding: 10px 0 0 0;
}












.product-designer .editing {
  /* margin-left: 80px; */
  /*position: absolute;*/
  /*top: 0;*/
  /*right: 0px;*/
  /*width: 300px;*/
  /*height: 100%;*/
  /*background: #3a5673;*/
  /*padding: 10px 10px 0px 10px;*/
  /*transition: all 1s ease 0s;*/
  /*z-index: 100;*/
  /*overflow-y: scroll;*/
  color: #fff;
}




.product-designer .editing .edit-text {
  display: none;
}
.product-designer .editing .edit-text.active {
  display: block;

}

.product-designer .editing .edit-curvedText {
  display: none;
}
.product-designer .editing .edit-curvedText.active {
  display: block;

}


.product-designer .add-text, .product-designer .add-curvedText, .product-designer .add-word-cloud, .product-designer .add-qr-code,.product-designer .add-barcode{
  display: inline-block;
  /* width: 49%; */
  text-align: center;
  background: #009688;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 2px;
  color: #ffffff;
  padding: 10px 15px;
}




.product-designer .editing .edit-img {
  display: none;
}

.product-designer .editing .edit-img.active {
  display: block;

}




.product-designer .editing .edit-shape {
  display: none;
}

.product-designer .editing .edit-shape.active {
  display: block;

}



.product-designer .editing #text-content {
  margin-bottom: 10px;

}



.product-designer .shape-list{
  margin-top: 20px;
  padding: 10px 5px;
  background-image: url(../images/tile.png);
}
.product-designer .shape-list img:hover {
  background: #4f7094;
}
.product-designer .shape-list img {
  width: 45px;
  height: 45px;
  display: inline-block;
  font-size: 30px;
  color: #fff;
  text-align: center;
  transition: all ease 0.5s 0s;
  border-radius: 5px;
  padding: 5px;
}


.product-designer .shape-pagination{
  margin: 10px 0px;
}
.product-designer .shape-pagination .page-numbers {
  background: #daebfd87  none repeat scroll 0 0;
  color: rgba(0, 0, 0, 0.57);
  display: inline-block;
  margin: 5px 0 0 2px;
  padding: 2px 10px;
  text-decoration: none;
}

.product-designer .shape-pagination .current, .product-designer .shape-pagination .page-numbers:hover {
  background: rgb(255 255 255) none repeat scroll 0 0;
}

.product-designer .shape-pagination .next, .product-designer .shape-pagination .prev {
  display:none;
}



.product-designer .editing .tool-button.active{
  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
}

.product-designer .editing #text-flip-h .fa {
  transform: rotate(90deg);
}



.product-designer .editing input[type="range"] {
  vertical-align: top;
}

.product-designer .editing .item:hover #text-rot-left, .product-designer .editing .item:hover #text-rot-right {
  display: inline-block;
}

.product-designer .editing #text-rot-left, .product-designer .editing #text-rot-right{
  display: none;
  margin: 0;
  width: 70px;
}




.product-designer-edit-link {
  background: #ebe9eb none repeat scroll 0 0;
  display: block;
  font-size: 13px;
  padding: 7px;
  text-align: center;
  text-decoration: none;
}


.output-side-items{
  display: none;
}
.output-side-items .item{
    clear: both;
    display: block;
}
.output-side-items .item .preview-object {
  width: 30%;
  display: inline-block;
  vertical-align: middle;
  float: left;
  margin-right: 10px;
}
.output-side-items .item .preview-name {
    display: inline-block;

}


.output-side-items svg {
  width: 100%;
  height: auto;
}

.product-designer .templates  .template{}

.product-designer .templates .template.active {
  color: #666;
}





.product-designer .final {
  display: none;
  text-align: center;
}

.product-designer .final .final-list {
  max-height: 450px;
  overflow-y: scroll;
}
.product-designer .final .final-list li {
  display: block;
  margin: 15px 0;
}

.product-designer .final .final-list li a {
  display: inline-block;
  vertical-align: top;
  width: 150px;
}

.product-designer .final .final-list li .fa {
  display: inline-block;
  margin-top: 100px;
  vertical-align: top;
  width: 60px;
}

.product-designer .toast {
  position: absolute;
  bottom: -100px;
  left: 407px;
  padding: 10px 10px;
  background: #4b6a8c none repeat scroll 0 0;
  border-radius: 3px;
  /* display: none; */
  z-index: 9999999;
  transition: all ease 1s;
  /* box-shadow: 0 0 6px 3px rgb(158 158 158 / 20%); */
  color: #fff;
  min-width: 270px;
}



.product-designer .toast.active{
  bottom: 110px;
}

.product-designer .toast.warning{}
.product-designer .toast.success{}







.product-designer .canvas-grid {
  background-color: transparent;
  background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
  background-position: 12px 12px;
}



.product-designer .pd-panel-section{
  margin: 20px 0;
  clear: both;
  /*border: 1px solid #4f647b;*/
  background: #3c526b;
  overflow: hidden;
  border-radius: 3px;
}

.product-designer .pd-panel-section:hover{
  background: #314861 none repeat scroll 0 0;

}

.pd-panel-section-inner{
  padding: 10px !important;
  clear: both;
  background: #3c526b;
}
.product-designer .pack-button {
  width: 30px;
  height: 30px;
  display: inline-block;
  /* border: 1px solid #c9c9c9; */
  text-align: center;
  background: #ffffff;
  font-size: 18px;
  cursor: pointer;
  margin: 4px 4px;
  color: #3a5673;
  float: left;
  border-radius: 3px;
}
.product-designer .pack-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*.product-designer .pack-button i {*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*}*/


.product-designer .pack-button:hover{
  background: #ffffff5c;
}


.product-designer .pack-button:hover, .product-designer .pack-button.active {

  background: #ffffff5c;

}


.product-designer .panel-section-title {
  /*text-align: center;*/
  background: #3a5673;
  margin-bottom: 0px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
  padding: 15px;
  text-transform: uppercase;
  border: none;
}

.product-designer .panel-section-title .ui-icon {
  display: none;
}




.product-designer .input-group {
  margin-bottom: 10px;
  display: block;
}
.product-designer .input-group-title {
  display: inline-block;
  width: 50%;
  font-size: 13px;
}




.product-designer .editor-preview, .product-designer .editor-download {
  display: inline-block;
  width: 49%;
  text-align: center;
  background: #009688;
  margin: 8px 0;
  cursor: pointer;
  border-radius: 2px;
  color: #ffffff;
  padding: 10px 0;
  font-size: 14px;
  line-height: 14px;
}




.product-designer .preview {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  margin: 0;
  z-index: 999999999999;
  display: none;
}

.product-designer .preview .preview-img {
  width: 600px;
  height: 600px;
  background-image: url(../images/tile.png);
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  overflow-y: scroll;
}

.product-designer .preview .preview-img img{
  box-shadow: none;
}


.product-designer .preview .preview-close {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff7171;
  color: #fff;
  cursor: pointer;
  padding: 2px 11px;
  font-size: 17px;
}


.product-designer .amount{
  color: #fff;
}

.product-designer ins{
  color: #fff;
  background: none;
}







.product-designer .object-list{

}

.layers-list .layer {
  cursor: pointer;
  padding: 6px 5px;
  display: block;
}
.layers-list .layer:hover {
  background: #506f9075;
}
 
.product-designer .object-list .list-item {
  max-height: 120px;
}
.product-designer .object-list .list-item ul {
  margin: 0;
  padding: 0;
}

.product-designer .object-list .list-item li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  cursor: pointer;
}

.product-designer .object-list .list-item li.active {
  background: #d7d7d7;
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
}


.product-designer .object-list .remove {
  padding: 5px 7px;
  background: #f16f61;
  color: #fff;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  border-radius: 3px;

}

.product-designer .object-list .hide {
  padding: 5px 6px;
  background: #3388f7;
  color: #fff;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  border-radius: 3px;

}


.product-designer .object-list .lock {
  padding: 5px 7px;
  background: #e6971a;
  color: #fff;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  border-radius: 3px;

}
.product-designer .object-list .price {
  padding: 5px 7px ;
  background: #009688;
  color: #fff;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
  display: none;
  border-radius: 3px;
  font-size: 12px;
  float: right;
}
.product-designer .object-list .selectLayer {
  padding: 0px;
  background: #e6971a;
  color: #fff;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  border-radius: 3px;
}


.product-designer .object-list .type {
  margin-right: 5px;
  font-size:12px;
  border: 1px solid #a1a1a1;
  padding: 5px 7px;
  vertical-align: middle;
  display: inline-block;


}






.product-designer .editor-busy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #63616133;
  display: none;
}

.product-designer .editor-busy .inner-content {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 8px 23px;
  transform: translate(-50%, 0);
}


.product-designer .welcome-tour {
  position: absolute;
  top: -200%;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #32486294;
  z-index: 900;
  color: #fff;
  transition: 1s all ease;
}

.product-designer .welcome-tour.active {
  top: 0px;
}


.product-designer .welcome-tour .inner-content {
  padding: 20px;
  transform: translateY(-50%);
  padding-top: 50%;
}


.product-designer .welcome-tour .headeline {
  font-size: 40px;
}
.product-designer .welcome-tour .details {
  font-size: 16px;
}
.product-designer .welcome-tour .start-tour {
  padding: 10px 25px;
  font-size: 14px;
  background: #009688;
  color: #fff;
  border: none;
  float: none;
  margin: 0 5px;
}

.product-designer .welcome-tour .end-tour {
  padding: 10px 25px;
  font-size: 14px;
  background: #f16f61;
  color: #fff;
  border: none;
  float: none;
}

.product-designer .output-side-items-attach-ids, .product-designer .output-side-items-json{
  display: none;
}


.product-designer-notice {
  padding: 15px;
  background: #30bd86;
  margin-bottom: 20px;
  color: #fff;
  display: none;
  margin-left: 360px;
}


.product-designer-notice.active {

  display: block;
}



.product-designer-notice a {
  color: #fff !important;
}

.product-designer-notice .notices{}



.cart-sides{}
.cart-sides .side{}
.cart-sides .side img{}

.product-designer .generate-side-output {
  padding: 10px 0px;
  text-align: center;
  margin-bottom: 10px;
  background: #009688;
  border-radius: 3px;
  cursor: pointer;
  transition: all ease 1s 0s;
  font-size: 14px;
  line-height: 14px;
}

.product-designer .generate-side-output:hover {

  background: #3a5673;

}

.assets-price-wrap{
  display: none;
}


.product-designer .pd-addtocart {
  width: 100%;
  padding: 10px 8px;
  text-align: center;
  display: none;
}

.product-designer .pd-addtocart.active {

  display: block;
}


.product-designer .export{

}


.product-designer .pd-save-template {
  width: 100%;
  padding: 10px 8px;
  text-align: center;
  display: none;
  margin-bottom: 30px;
}

.product-designer .pd-save-template.active {

  display: block;
}


/*setting-field*/

.product-designer .setting-field{
  margin: 10px 0;
  clear: both;
}

.product-designer .setting-field .field-label{

}

.product-designer .setting-field .field-input{

}

.product-designer .setting-field .description{

}

.product-designer .setting-field .half{

}



.product-designer .setting-field.half .field-label{
  display: inline-block;
  width: 49%;
  vertical-align: top;
  color: #fff;
}

.product-designer .setting-field.half .field-input{
  display: inline-block;
  width: 49%;
  vertical-align: top;
}

.product-designer .setting-field input[type="text"], .product-designer .setting-field input[type="number"], .product-designer .setting-field textarea{
  width: 90%;
}

.product-designer .setting-field input[data-jscolor]{
  width: 68%;
}


.product-designer .setting-field select{
  width: 100%;
}

.product-designer .setting-field input[type="range"]{
  width: 90%;
}





.product-designer .setting-field.full .field-label{
  display: block;
  width: 99%;
  vertical-align: top;
  color: #fff;
}

.product-designer .setting-field.full .field-input{
  display: block;
  width: 99%;
  vertical-align: top;
}

.product-designer .setting-field.full textarea{
  width: 95%;
}

.product-designer .setting-field label{
  display: block;
  color: #fff;
  font-size: 14px;
}

.product-designer .shortcut{
  margin: 5px 0;
}
.product-designer .shortcut kbd {
  background: #00000080;
  padding: 3px 10px;
  display: inline-block;
  border-radius: 3px;
  font-size: 12px;
  /*border: 1px solid #314861;*/
}