/* common */

html,body
{
  overflow: auto;
  height: auto;
  font-family:'Helvetica Neue',Helvetica,'Droid Sans',Arial,'Heiti SC','Droid Sans Fallback','Hiragino Sans GB',Simsun,Sans-serif;
}
ul,ol{
  margin-bottom: 0;
  -webkit-padding-start: 0;
}
.app-content,
.app, .app-body{
   height: auto !important;
   position: relative!important;
   overflow-y: auto!important;
   padding: 15px;
}
.wh100,
.scrollable,
.scrollable-content{
  height: auto;
  position: relative;
} 
.scrollable{
  position: relative;
}

.sidebar-left, .sidebar-right{
  background:url(../assets/img/bg_header.png) repeat;
}
.sidebar{
  display: block;
}
a,a:hover,a:active,a:focus{
  color:#1BC98E;
}
ul li{
  list-style: none;
}

.w100
{
	width:100%;
}
.h100
{
	height:100%;
}

.cursor-explain
{
  cursor:pointer;
}

.section
{
    padding:11px;
}
.modal
{
  z-index: 10000000
}
.form-group {
    margin-bottom: 15px;
    padding: 0;
}

.form-control-feedback
{
  display:none;
}

.has-navbar-top .app-body{
  padding:0;
}
.has-feedback .form-control-feedback
{
  display:block;
}

.control-label {
    line-height:inherit;
    margin:0 0 5px 0;
}

.absolute-center {
  margin: auto;
  position: relative;
  top: 0; left: 0; bottom: 0; right: 0;
}

.center-wrapper {display:table;width:100%;height:100%;}
.center-wrapper .cell {
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}

a:hover
{
	text-decoration: none;
}

input.scrollable-header {
  border-bottom: 3px solid #ccc;
}

.modeal-scrollable .modal-dialog{
    overflow-y: initial !important
}
.modeal-scrollable .modal-body{
    height: 250px;
}

.modeal-scrollable .modal-body .scrollable-content
{
  padding:15px;
}
.navbar-absolute-top,
.navbar-absolute-bottom,
.sidebar-left{
    position: relative;
    z-index: 3;
}

.prodcutDesign .app-body{
  width:60%;
  float: left;
}
.prodcutDesign .navbar-bottom{
    width: 40%;
    float: right;
    padding-top: 15px;
}
.has-sidebar-left .app, 
.sidebar-left-in .app{
  z-index: 2;
  box-shadow:none;
}
.product-list-group .product-list-item{
  float: left;
  text-align: center;
}
.facebook{
  display: none;
}
@media (min-height: 500px) {
    .modeal-scrollable .modal-body { height: 320px; }
}

@media (min-height: 600px) {
    .modeal-scrollable .modal-body { height: 420px; }
}

@media (min-height: 700px) {
    .modeal-scrollable .modal-body { height: 520px; }
}

@media (min-height: 800px) {
    .modeal-scrollable .modal-body { height: 620px; }
}

@media (min-height: 900px) {
    .modeal-scrollable .modal-body { height: 700px; }
}
@media (min-width: 1200px){
  .has-sidebar-left .app, 
  .sidebar-left-in .app {
      margin-left: 0;
  }
}

.list-lower-alpha
{
  list-style-type:lower-alpha;
}

.list-lower-roman
{
  list-style-type:lower-roman;
}

/* Main UI */

.mobile-copyright
{
  display: none;
}

.app
{
    background-color: #fff;
}

.sidebar-left h1
{
  padding:0;
}

.sidebar-left, .sidebar-right
{
    width:100% !important;
}

.sidebar-left .list-group
{
  margin-bottom: 0;
}

.list-group-item.active, 
.list-group-item.active:focus,
.btn-group>.btn-default.active,
.btn-group>.btn-default.active:hover,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.switch.active{
    background-color: #1BC98E;
    border-color: #1BC98E;
}
.list-group-item.active:hover{
  background-color:#f5f5f5;
  border-color:#f5f5f5;
  color: #555;
}
.navbar-app .btn-navbar, 
.navbar-app .btn,
.navbar-app .btn-navbar:hover, 
.navbar-app .btn:hover{
  color:#1BC98E;
}
.label-info{
  background-color: #1BC98E;
}

.app-name
{
  padding: 0;
  line-height: 1.2;
}

.app-logo
{
  display: block;
  text-align: center;
  padding:15px;
  float: left;
}

.sidebar-left-in .app {
  width: 100%;
  -webkit-transform: translate(250px, 0);
  -ms-transform: translate(250px, 0);
  -o-transform: translate(250px, 0);
  transform: translate(250px, 0);
  -webkit-transition: -webkit-transform 400ms ease;
  -moz-transition: -moz-transform 400ms ease;
  -o-transition: -o-transform 400ms ease;
  transition: transform 400ms ease;
}

.sidebar-right-in .app {
  width: 100%;
  -webkit-transform: translate(-250px, 0);
  -ms-transform: translate(-250px, 0);
  -o-transform: translate(-250px, 0);
  transform: translate(-250px, 0);
  -webkit-transition: -webkit-transform 400ms ease;
  -moz-transition: -moz-transform 400ms ease;
  -o-transition: -o-transform 400ms ease;
  transition: transform 400ms ease;
}

.sysStatistics-box
{
  color:#555;
  font-size: 12px;
  padding:0px 4px 1px;
}
.sysStatistics-box p
{
  text-align: right;
  margin:6px 0;
}
.addthis_box
{
  background-color:#fff;
  padding:7px 0 0;
}

.addthis_sharing_toolbox
{
  margin-left: 4px;
}

.sidebar .copyright
{
  padding:0 7px 4px;
  background: #fff;
  margin-bottom: 0;
  font-size: 12px;
}

.atm-i .atm-f
{
  height:1.6pc;
}


#at4m-mobile-container .at4m-dock-bottom
{
  bottom:22px;
}

.at4m-dock.ats-gray {
    border: 1px solid #dbdbdb;
    border-left: none;
    border-right: none;
}

.at-share-tbx-element .at-share-btn
{
  margin: 0 4px!important;
}

.disableShareBtn .at4m-dock-bottom
{
  display: none!important;
}

.lang-switch
{
    padding: 15px;
    display: block;
    float: right;
}
.lang-switch .btn
{
  border-radius: 0;
}
.lang-switch .btn.active,.lang-switch .btn:hover,.lang-switch .btn.active:hover
{
  background-color: #1BC98E;
  border-color: #1BC98E;
  color:#fff;
}

.welcome-massege{
    color: #555;
    font-size: 16px;
    padding-top: 5px;
}
.nav-bar{
  background: url(../assets/img/bg_links.jpg);
  padding: 15px;
}
.nav-bar li{
  float: left;
  padding: 7px 10px 8px 10px;
  border-right: 1px solid #575656;
  margin: 0 9px 0 0;
  list-style: none;
  position: relative;
}
.nav-bar li a{
  display: inline-block;
  color: #FFF;
  text-shadow: 0px 2px 1px rgba(0,0,0,0.46);
  font-size: 17px;
  font-weight: bold;
}
.nav-bar li a:hover,
.nav-bar li a:active,
.nav-bar li a:focus{
  color: #ac7f58;
}

.nav-bar .sliderDown{
  background: #2e2e2e;
  position: absolute;
  min-width: 200px;
  z-index: 9999;
  top: 100%;
 
}

.nav-bar .sliderDown li{
  float: none;
  border: 0;
}
tags-input.ng-invalid .tags,.has-error tags-input
{
  border-color: #b94a48;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
      -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
}
.app-content-loading {
  text-align: center;
  height: 100%;
  width: 100%;
  background: #fff;
  position: relative;
}

.loading-progress {
  position: absolute;
  font-size: 35px;
  top: 50%;
  margin-top: 19px;
  color:#1BC98E;
  text-align: center;
  width:100%;
}

.loading-spinner {
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  color:#1BC98E;
}

.navbar-brand-center
{
	padding:15px 80px;
  background:none;
}

.navbar-brand-center.has-bg
{
  background: url(../assets/img/logo-header.png) center no-repeat;
  background-size:100px;
}

.navbar-brand-center span
{
	text-align: center;
	display: block;
	width:100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* shirtStyle */
.shirt-type-list
{
	margin-bottom: 0;
}
.shirt-type-list-item
{
	padding:20px;
}

/* productEditor */
#blank-image
{
    display: none;
}

.product-editor-container
{
    position: relative;
    margin:0 auto;
    padding-bottom:33px
}

.canvas-loading{
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
}

.canvas-container
{
  border: 1px solid #ccc;
}

.canvas-view-container .direction-name,
.product-editor-container .direction-name
{
  position: absolute;
  top:5px;
  left:10px;
  font-size: 1.2em;
  text-transform: uppercase;
  color:#007aff;
}

.product-editor-container .product-direction
{
  position: absolute;
  width:39px;
  top:36px;
  right: -15%;
  border-bottom: 1px solid #ccc;
}

.product-editor-container .product-direction a
{
  padding: 3px;
  display: block;
  border: 1px solid #ccc;
  border-bottom: none;
}

.product-editor-container .product-direction a.active
{
  background-color: #f5f5f5;
}

.product-editor-container .btn-resetDirection
{
    position: absolute;
    top:0px;
    right: -15%;
    padding:6px 6px;
}

.product-editor-container .btn-undo
{
      position: absolute;
      bottom:1px;
      left:1px;
      padding:6px 6px;

}

.product-editor-container .btn-redo
{
      position: absolute;
      bottom:1px;
      right:1px;
      padding:6px 6px;

}
.product-editor-container .unit-price
{
  position: absolute;
  bottom:-24px;
  right:0;
  font-size: 1em;
}

.product-editor-container .btn-note
{
  position: absolute;
  bottom:-24px;
  font-weight: 700;
  left:0;
}
.editor-operate.navbar-app
{
	min-height: 40px;
}
.editor-operate .btn-group .btn
{
	border-radius: 0;
	line-height: 40px;
}

.editor-operate .tab-wrap
{
	margin-bottom: 0;
	background-color: #FFF;
	position: relative;
	z-index: 100000;

}

.edit-panel
{
  position: relative;
}

.edit-panel .item
{
    width:50px;
    height:80px;
    cursor:pointer;
}
.colorPick{
  max-width: 530px;
}
.edit-panel .colorPick .item{
  height:50px;
}
.edit-panel .item-2x
{
  width:80px;
}

.edit-panel .item.edit-btn
{
	float:left;
}

.edit-panel .item:hover
{
  background-color: #f7f7f7;
}

.edit-panel .btn-back
{
  position: absolute;
  top:0;
  left:0;
  background-color: #FFF;
  z-index:1;
}

.edit-panel .fa-trash-o
{
  color:red;
}

.edit-panel.text-panel-font-family .flipsnap .item
{
  width:80px;
}

.edit-panel.text-panel-align .flipsnap .item
{
  width:60px;
}

.flipsnap-sub-panel .flipsnap-wrap
{
  margin-left:50px;
}

.flipsnap-sub-panel .no-btn-back
{
  margin-left:0;
}

.sidebar-right
{
    background-color: #fff;
}

.sidebar-product-direction-list a.active {
    color: #555;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.sidebar-product-direction-list a.active:hover {
    color: #555;
    background-color: #f5f5f5;
    border-color: #ddd;
}

/* pattern-panel */

#patternList .pattern-item
{
    width:80px;
}

#patternList .pattern-item img
{
  margin: 5px
}

#patternCategoryList .item
{
    width:80px;
}

#btn-pattern-upload
{
    position: relative;
    font-weight: 600;
    top:0;
    left:0;
    width:80px;
    height:80px;
}

#btn-pattern-upload label
{
 display: block;
 width:80px;
 height:80px;
 background: url(../assets/img/upload_icon_55X55.png) center no-repeat;
 cursor:pointer;
 margin-bottom: 0;
}

.select-pattern-file
{
  display:none !important;
}

/* text-panel */

#add-text-view
{
    padding:8px;
}
#add-text-view .input-group-btn .btn
{
	height:64px;
	border:1px solid #ccc;
}

#add-text-view textarea
{
    height:64px;
    font-size: 18px;
}

.textEdit-colorpicker  .dropdown-menu
{
    padding: 0;
    box-shadow:none;
}

.textEdit-colorpicker  .dropdown-menu li
{
    font-size:0;
}

.textEdit-colorpicker .angular-color-picker
{
    padding: 10px;
}

.textEdit-colorpicker .header-title
{
    float: left!important;
    color:#777;
    font-size: 14px;
    margin-left: 5px
}

.textEdit-colorpicker .angular-color-picker
{
    border:none;
    border-top: 1px solid #ddd;
}

/* color-panel */

#color-product-parts .item
{
    width:75px;

}
#color-product-parts .item img
{
  margin: 5px 5px 5px 0;
  background: #999;
}
/* flipsnap */
.flipsnap
{
  margin-bottom: 0;
}
.flipsnap-wrap {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translateZ(0);
}

.flipsnap-wrap .flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.flipsnap-wrap .item {
    float: left;
}


/* HOME Page */
.navbar-app{
  color: #E4D836;
  border:0;
  background: #fff;
}
.prodcutDesign .navbar-app{
  background: #f4f4f4;
}
.home-page-content h2
{
  color:#007aff;
  text-align:left;
}

.home-page-content p
{
  font-size:18px;
  text-align:left;
}

.home-page-content .list-group-item:last-child
{
  border:none;
}

.home-page-item .item-img
{
  text-align: center;
}

.home-bottom-link
{
  padding:9px 15px;
  background-color: #f7f7f7;
  border-top:1px solid #ccc;
}

.home-bottom-link .btn
{
  text-align: center;
  width:100%;
  font-size: 16px;
}


.home-bottom-logo
{
  text-align: center;
  padding: 15px 0;
  border-top:1px solid #ccc;
}

.home-bottom-logo img
{
  margin:9px;
}
/* HOME Page End */

/* Preview Page */
.preview-action .btn
{
  font-size: 16px;
  font-weight: 600;

}

.preview-action .btn.btn-primary
{
  background:#007aff;
  color:#FFF;
  border-radius: 0;
}

/* Preview Page End */

.canvas-wrap
{
  margin:0 auto;
  position: relative;
}


.order-info .active
{
  width:105px;
  text-align: right;
}

/* DesignView Page  */
.design-view-title
{
  text-align: center;
}

.design-view-wrap
{
  margin-top: 9px
}

/* DesignView Page End */

/* Order Page  */

.submit-success-info p
{
  font-size: 20px;
}

.orderForm-size
{
  margin:9px 0;

}

.order-form .upload-files-list
{
  list-style: none;
  padding-left:16px;
}
/* Order Page End */


/* DesignList Page  */


.design-list .btn-more
{
  color:#007aff;
}

/* DesignList Page End */

/* SizeChartView Page  */
.size-chart img
{
  width: 600px;
  margin:5px auto;
  display: block;
}
.size-chart h3
{
  text-align: center;
  margin:9px 0;
}
/* SizeChartView Page End */


.order-invoice .font-bold
{
  font-weight: bold;
}

.order-invoice .text-right
{
  text-align: right;
}

@media (min-width: 400px) {

  textarea.designView-link
  {
    height:34px;
    resize: none;
  }
}


@media (min-width: 700px) {

  .design-list .design-list-item
  {
    width:300px;
    margin: 0 auto;
    display: inline-block;
    border: none!important;
  }
}
@media (max-width: 1199px) {
    .prodcutDesign .app-body{
      width:100%;
      float: none;
    }
    .prodcutDesign .navbar-bottom{
        width: 100%;
        float: none;
        padding-top: 15px;
    }
}
@media (max-width: 991px) {
  .nav-bar{
      padding: 0;
      background: #333;
  }
  .nav-bar li {
      float: none;
      padding: 10px;
      border-right: 0;
      margin: 0 9px 0 0;
      list-style: none;
      position: relative;
      border-bottom: 1px solid #777;
  }
  .nav-bar li a{
    display: block;
  }
  .nav-bar .sliderDown {
    background: transparent; 
    position: relative;
    padding-left: 20px;
  }

  .scrollable-content
  {
    padding-bottom: 70px;
  }

  .mobile-copyright
  {
    position: fixed;
    display: block;
    bottom: 0;
    left:0;
    right:0;
    color:#000;
    z-index: 10;
    background: #ebebeb;
    text-align: center;
    padding:3px 0;
    font-size: 12px;
  }
  .sidebar .scrollable
  {
    padding-bottom: 68px
  }
  .sidebar .copyright
  {
    display: none;
  }

  .sidebar-left .list-group-item
  {
    padding:8px 15px;
  }

  .editor-operate.navbar-app
  {
    bottom: 23px
  }


  .editor-operate .btn-group .btn {
      border-radius: 0;
      line-height: 32px;
  }

 

}
@media (max-width: 700px) {
    .absolute-center{
      margin:0;
    }
    
}
@media (max-width: 500px){
  .canvas-container{
    border: 0;
  }
  .app-content, .app, .app-body{
    padding: 0;
  }
}

@media (min-width: 992px) {
 
    .has-sidebar-right .app,
    .sidebar-right-in .app {
      margin-right: 250px!important;
    }

    .navbar-brand-center {
    	text-align: center;
      position: absolute;
      width: 100%;
    }
    .general-form,.general-form-content,.general-content-wrap
    {
      max-width: 660px;
      margin:0 auto;
    }

    .modal-content
    {
      max-width: 900px;
      margin: 0 auto;
    }

    .home-page-item
    {
      width:80%;
      margin:0 auto;
    }

    .home-page-item .item-text
    {
      width:60%;
      float:left;
      padding:0 9px;
    }

    .home-page-item .item-img
    {
      width:40%;
      float:left;
    }

    .home-page-item.item-2 .item-text,.home-page-item.item-4 .item-text
    {
      float: right
    }
    .has-sidebar-left .app, .sidebar-left-in .app {
      margin-left: 0;
      left: 0;
  }
}

@media (min-width: 1300px) {

  .general-form,.general-form-content,.general-content-wrap
  {
    max-width: 840px;
    margin:0 auto;
  }
}

.actionAlertMsgBox
{
  margin-bottom: 9px !important;
}


/* Logo Shop Mode*/

.showLogoShopMode .navbar-app,
.showLogoShopMode .navbar-app .btn,
.showLogoShopMode .design-list .btn-more,
.showLogoShopMode .loading-spinner,
.showLogoShopMode .sysStatistics-box a,
.showLogoShopMode .loading-progress
{
  color:#FF3811;
}

.showLogoShopMode .list-group-item.active,
.showLogoShopMode .switch.active,
.showLogoShopMode .btn-primary
{
  background-color: #FF3811;
      border-color: #FF3811;
}

.showLogoShopMode .switch.active .switch-handle
{
  border-color: #FF3811;
}
/* Logo Shop Mode End */
#patternLibrary li{
    padding: 15px;
    display: inline-block;
}
.drawing-mode-options .item{
  width:80px;
  line-height: 80px;
}
.drawing-line-width,
.set-drawing-shadow{
    margin-left: 50px;
    padding-right: 50px;
}
.note .modal-title{
    text-align: center;
    padding: 15px;
    color: #d44950;
}
.noteDetail li{
  list-style: none;
}