/* Prevent angular js from showing {{variable}} upon page load*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}


body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* unset bs3 setting */
/*.modal-open {
    overflow: auto;
}*/

/*Ajax loader*/
.loader-div {
    /*position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    background-color: white;
    opacity: .6;*/
}

.ajax-loader {
    position: fixed;
    left: 50%;
    top: 15%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px; /* -1 * image height / 2 */
    display: block;
}

.global-progress {
    position: fixed;
    left: 50%;
    top: 15%;
    width: 200px;
    display: block;
}

.tr-ng-grid .tr-ng-column-header .tr-ng-title {
    text-align: left;
    padding-top: 0px;
}

table.pixelz-standard-grid {
    font-family: arial;
    margin: 10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}

    table.pixelz-standard-grid > tbody > tr:nth-of-type(even) {
        background-color: #f9f9f9;
    }

.trial {
    background-color: Orange !important;
    color: black;
}

.duplicated {
    background-color: Violet !important;
    color: black;
}

.has-product-id {
    background-color: #00CC33;
    color: black;
}

.float-right {
    float: right;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.visible {
    visibility: visible;
}

.invisible {
    display: none;
}

.has-error {
    color: red !important;
}

.padding-top-7 {
    padding-top: 7px;
}

.normal-text {
    font-weight: normal;
}

.canvasMarking > canvas {
    border: 1px dotted black;
}

button[disabled=disabled], button:disabled {
    cursor: default;
    pointer-events: none;
    /*Button disabled - CSS color class*/
    color: #c0c0c0;
}

.mark-image-thumb {
    max-height: 200px;
    max-width: 450px;
}

.table > tbody > tr > td,
.table > tbody > tr > td > .tr-ng-cell {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.adelete:hover {
    background-color: red;
}

input.editing {
    background-color: #FDFDE4;
}

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

.padding-right-20 {
    padding-right: 20px;
}

.height-500 {
    height: 500px;
}

.pixelz-text-inline {
    display: block;
    white-space: nowrap;
}

.pixelz-menu-label {
    display: inline-block;
    width: 40px;
}

.form-control {
    margin-bottom: 3px;
    color: initial;
}

.urgent {
    background-color: #ed5565;
    color: #FFFFFF;
}

.selectedHightLight {
    font-weight: bold;
}

.img-container {
    display: block;
}

.rtb-img {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.03);
}

.background-color-gray {
    background-color: #f8f8f9;
}

.background-color-dark-gray {
    background-color: #b3b3b3;
}

.pLeft-204{
    padding-left:204px;
}

.mRight-54
{
    margin-right: -54px;
}

.borderless {
    border: none;
}

.thumb-legend 
{
    border: medium none;
    margin-left: 5%;
    padding: 0 10px;
    position: relative;
    text-align: left;
    font-size: 13px;
    font-weight: bold;  
}

/*Thumbnails*/
.thumb {
  width: 260px;
  margin: 5px; 
}
.thumb .thumbnail {
    position: relative;
    cursor: pointer;
    text-align: center;
    height: 390px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; 
    /*position: relative;
    display:inline-block;
    border: 0px solid gray;
    margin: 15px 5px;
    border:solid 1px white;*/
}
.thumb .thumbnail .thumbnail-only {
    height: 390px;
    width: 200px;
}
.thumb .thumbnail .title {
      font-weight: bold;
      max-width: 100%;
      ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; 
}
.thumb .thumbnail .date {
      color: #666; 
}
.thumb .thumbnail .btn.btn-sm.btn-danger {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 3px 10px; 
}
.thumb .thumbnail .image-wrapper {
      display: block;
      margin-bottom: 10px;
      overflow: hidden; 
}
.thumb .thumbnail .image-wrapper img {
        position: relative; 
}
.thumb .thumbnail:hover {
    border-color: #008000;
    border-color: rgba(0, 128, 0, 0.22);
    cursor: pointer;
}
.thumb .thumbnail:hover p {
    color: #fff;
}
.thumb-selected-border{
    border-color:green !important;
}
.thumb-unselected-border {
    border-color:#cccccc !important;
}
.status-bar {
    position: fixed;
    right: 0;
    bottom: 0px;
    background-color: #e3ff4f;
    background-color: rgba(227, 255, 79, 0.11);
    width: 200px;
    height: 150px;
    margin-right: 22px;
    margin-bottom: 25px;
    padding: 10px;
}

.status-bar:hover
 {
     cursor: ns-resize;
 }
 
.countImageLeft
 {
    font-size: large;
    padding: 10px 0px;
    border-bottom: dotted 1px black;
 }
 
.countMovingImage
 {
     font-size: large;
 }

 .center-div {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    -ms-border-radius: 2px;
    border-radius: 2px;
 }

 .ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

 /*Colorways*/
.colors {
    padding: 0px 15px;
}

.color-swatch-box {
    width: 245px;
    height: 62px;
    margin: 5px; 
}

.colors .swatch {
    margin-right: 15px;
    display: inline-block;
}

.colors .swatch .color-square {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 15px 0 0;
}

.distance {
    margin-bottom: 20px !important;
}

.colors .color-swatch-box .spec-option {
    padding: 0 15px 0 0;
    margin-bottom: 0;
    border: 1px solid #DDDDDD;
    box-shadow: 4px 4px 11px 0px rgba(0,0,0,0.06);
    height: 62px;
}
.text-container {
    float: left;
    width: calc(100% - 75px);
}
.colors .swatch h5 {
    text-align: left;
    margin: 10px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.colors .colorway-image {
    width: 800px;
    height: 600px;
}

/*.flexslider {
    max-width: 90%;
    max-height: 600px;
}*/

.flexslider .slides img {
    max-width: 80%;
    max-height: 580px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.flexslider-container {
	max-width: 800px;
    max-height: 600px;
	margin: 10px auto;
}
.flexslider .slides img {
    background-color: black;
}

.div-inline-left {
  float: left;
  width: 80%;
  text-align: right;
  margin: 2px 10px;
  display: inline
}
.div-inline-right {
  float: left;
  text-align: left;
  margin: 8px 10px;
  display: inline
}


.image-upload > input {
    display: none;
}

.image-upload img {
    cursor: pointer;
}

.example-thumb {
    width: 100px;    
    margin: 5px;
}

.exmaple-thumb .example-thumbnail {
    position: relative;
    cursor: pointer;
    text-align: center;
    height: 100px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.badge, .label{
    font-family: inherit;
}

.modal-xl{
    width: 90%;
}

.modal-full{
    width: 100%;
}

/*Login form*/
.login-form .wrapper {
    margin-top: 80px;
    margin-bottom: 20px;
}

.login-form .form-signin {
    max-width: 420px;
    padding: 30px 38px 66px;
    margin: 0 auto;
    background-color: #eee;
    border: 3px dotted rgba(0,0,0,0);
}

.login-form .form-signin-heading {
    text-align: center;
    margin-bottom: 30px;
}

.login-form .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
}

.login-form input[type="text"] {
    margin-bottom: 0px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.login-form input[type="password"] {
    margin-bottom: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.login-form .colorgraph {
    height: 7px;
    border-top: 0;
    background: #c4e17f;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

.image-search-form .form-control {
    height: 25px;
}

.image-search-form select.form-control {
    height: 25px;
    padding: 0 12px;
}

.image-search-result img.imgThumbnail {
    width: 50px;
}

.image-search-result .high-line {
    background: #666666;
    border-radius: 100%;
    padding: 1px 6px;
    color: #ffffff !important;
    text-align: center;
    margin: 2px;
}
.image-search-form .checkbox .control-label{
     padding-top: 0px;
}

.image-search-form label {
    font-weight: normal;

}
.image-search-form {
    padding: 10px;

}


.image-search-form.form-horizontal .control-label {
    padding-top: 4px;
}

.layerPalletteModal .modal-header{
    background-color: #3a3a3a;
    color: #ddd;
    height: 24px;
    padding: 4px 10px;
    border: none;
}
.layerPalletteModal .modal-title{
    margin: 0;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
}
.layerPalletteModal .modal-header .close{
    margin: 0;
    line-height: 14px;
    font-size: 14px;
    color: #ccc;
    text-shadow: none;
    opacity: 1;
}
.layerPalletteModal .modal-body{
    position: relative;
    padding: 0px;
}
.layerPalletteModal .line{
    height: 96px;
    background-color: #535353;
    border-top: solid 1px #707070;
    padding: 3px 10px;
    border-bottom: solid 1px #383838;
    color: #fff;
    font-size: 12px;
    position: relative;
}
.layerPalletteModal .line span{
    padding: 4px 2px 4px 18px;
    float: left;
}
.layerPalletteModal .line input{
    float: left;
    border: solid 1px #303030;
    color: #fff;
    padding: 4px 4px;
    line-height: 14px;
    width: 40px;
    background-color: #3a3a3a;
}
.layerPalletteModal .line input.edit{
    color: #333;
    background-color: #fff;
}
.layerPalletteModal .line button{
    float: left;
    width: 24px;
    height: 24px;
    border: none;
}
.layerPalletteModal .line .dropbtn{
    background: url("/Content/images/layerpallette/dropbtn.png") no-repeat right top;
}
.layerPalletteModal .line .dropbtn_disable{
    background: url("/Content/images/layerpallette/dropbtn_disable.png") no-repeat right top;
    cursor: default;
}
.layerPalletteModal .line .dropbtnsel{
    background: url("/Content/images/layerpallette/dropbtnsel.png") no-repeat right top;
}
.layerPalletteModal button.blend{
    background: #6c6c6c url("/Content/images/layerpallette/box.png") no-repeat right top;
    border: none;
    width: 160px;
    height: 24px;
    padding: 2px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: left;
}
.layerPalletteModal button.blend span.filter-name {
    font-size: 12px;
    padding: 2px;
}
.layerPalletteModal .dropdown-menu{
    font-size: 12px;
    width: 160px !important;
    min-width: 100px;
}
.layerPalletteModal .dropdown-menu li a{
    line-height: 1.2;
    cursor: pointer;
}
.transparent_btn{
    background: url("/Content/images/layerpallette/transparent.png") no-repeat right top;
}
.pixel_btn{
    background: url("/Content/images/layerpallette/pixel.png") no-repeat right top;
}
.position_btn{
    background: url("/Content/images/layerpallette/position.png") no-repeat right top;
}
.lockall_btn{
    background: url("/Content/images/layerpallette/lockall.png") no-repeat right top;
}
.transparent_btn_disable{
    background: url("/Content/images/layerpallette/transparent_disable.png") no-repeat right top;
    cursor: default;
}
.pixel_btn_disable{
    background: url("/Content/images/layerpallette/pixel_disable.png") no-repeat right top;
    cursor: default;
}
.position_btn_disable{
    background: url("/Content/images/layerpallette/position_disable.png") no-repeat right top;
    cursor: default;
}
.lockall_btn_disable{
    background: url("/Content/images/layerpallette/lockall_disable.png") no-repeat right top;
    cursor: default;
}
.transparent_btn_sel{
    background: url("/Content/images/layerpallette/transparent_sel.png") no-repeat right top;
    cursor: default;
}
.pixel_btn_sel{
    background: url("/Content/images/layerpallette/pixel_sel.png") no-repeat right top;
    cursor: default;
}
.position_btn_sel{
    background: url("/Content/images/layerpallette/position_sel.png") no-repeat right top;
    cursor: default;
}
.lockall_btn_sel{
    background: url("/Content/images/layerpallette/lockall_sel.png") no-repeat right top;
    cursor: default;
}
.transparent_btn:hover{
    background: url("/Content/images/layerpallette/transparent_over.png") no-repeat right top;
}
.pixel_btn:hover{
    background: url("/Content/images/layerpallette/pixel_over.png") no-repeat right top;
}
.position_btn:hover{
    background: url("/Content/images/layerpallette/position_over.png") no-repeat right top;
}
.lockall_btn:hover{
    background: url("/Content/images/layerpallette/lockall_over.png") no-repeat right top;
}
.layerPalletteModal .body{
    min-height: 200px;
    background-color: #535353;
    border-top: solid 1px #707070;
    padding: 3px 0px;
    border-bottom: solid 1px #383838;
    color: #fff;
    font-size: 12px;
}
.layerPalletteModal .modal-footer{
    margin: 0;
    background-color: #3a3a3a;
    color: #ddd;
    height: 38px;
    padding: 4px 10px;
    border: none;
}
.layerPalletteModal .line-bottom{
    height: 27px;
    background-color: #535353;
    border-top: solid 1px #707070;
    padding: 3px 10px;
    border-bottom: solid 1px #383838;
    color: #fff;
    font-size: 12px;
}
.layerPalletteModal .line-bottom button{
    float: right;
    width: 18px;
    height: 18px;
    border: none;
    margin: 0 5px;
}
.link_btn{
    background: url("/Content/images/layerpallette/link.png") no-repeat right top;
}
.newset_btn{
    background: url("/Content/images/layerpallette/newset.png") no-repeat right top;
}
.newlayer_btn{
    background: url("/Content/images/layerpallette/newlayer.png") no-repeat right top;
}
.dellayer_btn{
    background: url("/Content/images/layerpallette/del.png") no-repeat right top;
}
.link_btn:hover{
    background: url("/Content/images/layerpallette/link_over.png") no-repeat right top;
}
.newset_btn:hover{
    background: url("/Content/images/layerpallette/newset_over.png") no-repeat right top;
}
.newlayer_btn:hover{
    background: url("/Content/images/layerpallette/newlayer_over.png") no-repeat right top;
}
.dellayer_btn:hover{
    background: url("/Content/images/layerpallette/del_over.png") no-repeat right top;
}
.link_btn_disable{
    background: url("/Content/images/layerpallette/link_disable.png") no-repeat right top;
}
.dellayer_btn_disable{
    background: url("/Content/images/layerpallette/del_disable.png") no-repeat right top;
}
.layerPalletteModal .modal-footer button {
  background: #3e3e3e;
  background-image: -webkit-linear-gradient(top, #3e3e3e, #333);
  background-image: -moz-linear-gradient(top, #3e3e3e, #333);
  background-image: -ms-linear-gradient(top, #3e3e3e, #333);
  background-image: -o-linear-gradient(top, #3e3e3e, #333);
  background-image: linear-gradient(to bottom, #3e3e3e, #333);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  color: #aaa;
  font-size: 12px;
  padding: 5px 10px 5px 10px;
  border: solid #141414 1px;
  text-decoration: none;
}

.layerPalletteModal .modal-footer button:hover{
  background: #4e4e4e;
  background-image: -webkit-linear-gradient(top, #4e4e4e, #474747);
  background-image: -moz-linear-gradient(top, #4e4e4e, #474747);
  background-image: -ms-linear-gradient(top, #4e4e4e, #474747);
  background-image: -o-linear-gradient(top, #4e4e4e, #474747);
  background-image: linear-gradient(to bottom, #4e4e4e, #474747);
  text-decoration: none;
}
.opacitySlider{
    position: absolute;
    z-index: 1000;
    width: 100px;
    top: 30px;
    left: 193px;
}
.fillSlider{
    position: absolute;
    z-index: 1000;
    width: 100px;
    top: 30px;
    left: 291px;
}
.lock_ico{
    background: url("/Content/images/layerpallette/lock_ico.png") no-repeat right top;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 5px;
    right: 10px;
}
.lock_child{
    background: url("/Content/images/layerpallette/lock_child.png") no-repeat right top;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 5px;
    right: 10px;
}
.link_ico{
    background: url("/Content/images/layerpallette/link_ico.png") no-repeat right top;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 6px;
    right: 30px;
}
.layer{
    position: relative;
    color: #ddd;
    overflow: hidden;
    height: 28px;
    border: solid 1px #333;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    margin: 0 -1px -1px -1px;
} 
.set_visible{
    background: url("/Content/images/layerpallette/visible.png") no-repeat 7px 6px;
    width: 30px;
    height: 100%;
    float: left;
    border-right: solid 1px #333;
    background-color: #535353;
}
.set_invisible{
    background: url("/Content/images/layerpallette/invisible.png") no-repeat 7px 6px;
    width: 30px;
    height: 100%;
    float: left;
    border-right: solid 1px #333;
    background-color: #535353;
}
.layer_name {
    float: none;
    width: auto;
    overflow: hidden;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
}
.layer_name span {
    cursor: pointer;
    padding-left: 3px;
    line-height: 26px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                not supported by any browser */
}
.set_open{
    background: url("/Content/images/layerpallette/set_open.png") no-repeat 7px 5px;
    width: 43px;
    height: 100%;
    float: left;
}
.set{
    background: url("/Content/images/layerpallette/set.png") no-repeat 7px 5px;
    width: 43px;
    height: 100%;
    float: left;
}
.layer_ico{
    background: url("/Content/images/layerpallette/layer_ico.png") no-repeat 7px 3px;
    width: 43px;
    height: 100%;
    float: left;
}
.layer.selected{
    background-color: #596678;
}
.name_edit{
    padding: 0 2px;
    line-height: 14px;
    color: #333;
    margin-top: 7px;
    width: 360px;
    border: none;
}
.grad_green_red {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, green , red); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, green, red); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, green, red); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, green , red); /* Standard syntax */
  height: 10px;
}
/* Style for btn add note */
.btn-show-note, .btn-add-note {
    margin: 0px 2px;
    border: solid 1px transparent;
    opacity: 0.3;
}

    .btn-show-note:hover, .btn-add-note:hover {
        /*border: solid 1px rgb(168, 168, 168);*/
        opacity: 1;
    }

td > .btn-add-note, div > .btn-add-note {
    visibility: hidden;
}

tr:hover img.btn-add-note {
    visibility: visible;
}

.noteEntryWrapper:hover img.btn-add-note {
    visibility: visible;
}

.note-image-wrapper, .note-wrapper {
    display: inline-block;
}

.note-solved-false {
    color: red !important;
}

/*module Note*/
.short-note-sender {
    font-weight: bold;
}

    .short-note-sender::after {
        content: ":";
        font-weight: bold;
    }

.short-note-box {
    cursor: pointer;
}
/*end module Note*/

#noticeViewContainer {
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 100000;
}

.colorPalette
{
    width: 50px;
    height: 50px;
    border: 1px solid #808080;
    padding: 5px;
    margin: 5px;
    float: left;
}

#fromColorHex
{
    margin-top: 25px;
}

.canvasbg
{
    background: #ffffff url(/Images/transparentbg.png) repeat !important;
}

#mCanvas
{
    cursor: crosshair;
}

.reviewColorImage tr td
{
    text-align: center;
}

.warning {
    background: url(warning.png) no-repeat top left;
    width: 300px;
    height: 32px;
    padding-left: 40px;
    padding-top: 7px;
    color: red;
}
#spritespin {
    cursor: move;
}
.dialog-template-spec {
    background-color: white;
}

.dialog-template-spec .spec-properties {
    clear: left;
    width: 100%;
    overflow: visible;
}

.dialog-template-spec .spec-row {
    display: block;
    border-bottom: solid 1px #ddd;
    padding: 4px;
}

.dialog-template-spec .spec-col-title {
    font-style: italic;
    font-weight: bold;
    display: inline-block;
    width: 200px;
}


.dialog-template-spec .spec-col-title {
    font-weight: bold;
}


.dialog-template-spec .spec-comments .spec-col-title{
    display: block;
}
.qa-template-spec {
    padding: 3px 0px 3px 0px;
    font-style: italic;
    color: Black;
    max-height: 175px;
    overflow: auto;
    background-color: white;
}

.qa-template-spec .spec-properties {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}

.qa-template-spec .spec-row {
    display: block;
    padding: 4px;
}

.qa-template-spec .spec-col-title {
    font-style: italic;
    font-weight: bold;
}

.qa-template-spec .spec-col-title:after {
    content: ":";
}

.qa-template-spec .spec-comments .spec-col-title{
    display: block;
}
.product-id-package{
    color: #00CC33;
}

.first-order-job-package{
    color: Orange;
}
/*
 * jquery.popeye.css 2.1
 *
 * Mandatory CSS classes for jQuery.popeye
 *
 * Copyright (C) 2011 Christoph Schuessler (schreib@herr-schuessler.de)
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 */
.ppy-outer {
    display:                none;
}
.ppy-active .ppy-outer {
    display:                block;
}
.ppy-stage {
    background-repeat:      no-repeat !important;
    background-position:    center center !important;
    position:               relative;
}

.ppy-placeholder {
    position:               relative;
}

.ppy-caption,
.ppy-captionwrap {
    overflow:               hidden;
}

.ppy-hidden {
    display:                none !important;
}

.ppy-worker-result .template-vertical-align-panel
{
    height:100%;
    top:0px;
    background-repeat:no-repeat;
    position:absolute;
    width:48px;
    min-height: 150px;
}
.ppy-worker-result .rtb-img, .ppy-worker-result .ppy-nav
{
    margin-left:46px;
}
/*
 * jquery.popeye.style.css 2.1
 *
 * Example styles for jQuery.popeye
 *
 * Copyright (C) 2011 Christoph Schuessler (schreib@herr-schuessler.de)
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 */

/* fallback styles for image list */
.ppy-imglist {
    width:          100%;
    display:        block;
    overflow:       hidden;
}
.ppy-imglist li {
    padding:        10px;
    border:         1px solid #f0f0f0;
    background:     #ccc;
    list-style:     none;
    float:          left;
    display:        block;
    margin:         0 10px 10px 0;
}
.ppy-imglist li a img {
    display:        block;
    border:         0;
}
.ppy .ppy-extcaption {
    width:          240px;
    display:        block;
}
.ppy .ppy-imglist li {
    width:          240px;
    height:         270px;
}


/* popeye example 1 */
.ppy .ppy-active {
    width:          262px;
    float:          left;
    margin:         0 20px 10px 0;
}

.ppy .ppy-outer {
    padding:        10px;
    background:     #ccc; 
}

.ppy .ppy-stage {
    width:          200px;
    height:         200px;
    cursor:         pointer;
}

.ppy .ppy-outer:hover,
.ppy .ppy-expanded .ppy-outer {
}

.ppy .ppy-caption 
{
    min-height: 50px;
    overflow: hidden;
    margin:         -9px 9px 0 9px;
    padding:        10px;
    font-size:      0.9em;
    line-height:    1.3em;
    background:     #eee;
    border: 1px solid #ccc;
    border-radius:          0 5px 5px 5px;
    -moz-border-radius:     0 5px 5px 5px;
    -webkit-border-radius:  0 5px 5px 5px;
    visibility:         hidden; /* prevent flash of content before popeye loads */
}

.ppy .ppy-caption a {
}
.ppy .ppy-caption a:hover {
    text-decoration:underline;
}

.ppy .ppy-counter {
    border-bottom:  1px solid #888;
    padding:        0 0 2px 0;
    margin:         0 0 5px 0;
    font-size:      0.9em;
}

.ppy .ppy-stagewrap {
    background:     #ccc;
}

.ppy .ppy-loading {
    background:     #0c3b3d url(/Images/popeye/loading1.gif) no-repeat center !important;
}

.ppy .ppy-nav {
    background:     #0c3b3d;
    background:     -moz-linear-gradient(
        center bottom,
        rgb(12,59,61) 0%,
        rgb(58,131,133) 100%
    );
    width:          104px;
    height:         32px;
    padding:        5px;
    position:       absolute;
    top:            0;
    left:           0;  
}

.ppy .ppy-nav a {
    display:        block;
    overflow:       hidden;
    text-indent:    -900em;
    height:         22px;
    float:          left;
    padding:        5px;
    border-radius:          5px;
    -moz-border-radius:     5px;
    -khtml-border-radius:   5px;
    -webkit-border-radius:  5px; 
}

.ppy .ppy-prev {
    width:          22px;
    background:     url(/Images/popeye/prev3.png) no-repeat center;
}

.ppy .ppy-next {
    width:          22px;
    background:     url(/Images/popeye/next3.png) no-repeat center;
}

.ppy .ppy-switch-enlarge {
    width:          30px;
    background:     url(/Images/popeye/enlarge3.png) no-repeat center;
}

.ppy .ppy-switch-compact {
    width:          30px;
    background:     url(/Images/popeye/compact3.png) no-repeat center;
}

.ppy .ppy-nav a:hover {
    background-color:   #000;
    cursor:         pointer;
}


.qaImagesTable {
    background: #ccc;
    /* border-bottom: 1px dotted #4e667d; */
}

.padding-top-20 {
    padding-top: 20px;
}

.mRight0 {
    margin-right: 0px;
}
#ruler {
    display: none;
    width: 800px;
    height: 30px;
    border: none;
    position: absolute;
    top: 200px;
    margin-left: auto;
    margin-right: auto;
    cursor: move;
    padding: 2px;
    background: url(/Images/rulerbg.png?v=1.0) repeat !important;
    z-index: 99999;
}

#showrulerbox {
    top: 82px;
    right: 1px;
    position: fixed;
    padding: 1px;
    background-color: #ccc;
    z-index: 998;
}

#closeRuler {
    text-decoration: none !important;
    font-weight: bold;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}

/*Background color picker*/
#colorCode {
    margin-left: 15px;
    width: 65px;
    float: left;
    clear: left;
}

#backgroundColorPicker {
    display: none;
    width: 500px;
    height: 150px;
    border: 1px;
    position: absolute;
    top: 200px;
    margin-left: auto;
    margin-right: auto;
    cursor: move;
    padding: 2px;
    /*background: url(rulerbg.png?v=1.0) repeat !important;*/
    z-index: 99999;
}

#closeColorPicker {
    float: left;
    text-decoration: none !important;
    font-weight: bold;
}

#colorSlider {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
}
#editorVarianceReportTable {
    border-collapse: collapse;
    margin-top: 25px;
    width: auto !important;
}

    #editorVarianceReportTable th, #editorVarianceReportTable td {
        padding: 2px 5px;
        border: 1px solid #ddd;
    }

        #editorVarianceReportTable th.odd {
            color: #fff;
            background-color: #333;
            font-weight: normal;
        }

        #editorVarianceReportTable th.even {
            color: #fff;
            background-color: #888;
            font-weight: normal;
        }

    #editorVarianceReportTable tr.lowHeader {
        background-color: #fafafa;
    }

        #editorVarianceReportTable tr.lowHeader th {
            font-weight: normal;
        }

    #editorVarianceReportTable tbody tr.selected {
        background-color: #A9F5F2;
    }

#editorVarianceRangePicker {
    padding: 6px;
    border-radius: 3px;
    width: 180px;
}

#editorVarNavi {
}

    #editorVarNavi input#txtSearch {
        padding: 6px;
        border-radius: 3px;
        width: 220px;
    }

    #editorVarNavi div.left {
        display: table-cell;
    }

    #editorVarNavi div.right {
        display: table-cell;
        width: 100%;
    }

    #editorVarNavi .checkbox {
        position: relative;
        display: block;
        margin: 5px 5px 5px 10px;
        float: left;
        width: 205px;
    }

        #editorVarNavi .checkbox label {
            min-height: 19px;
            line-height: 19px;
        }

#editorVarianceReportTable tbody tr td {
    text-align: right;
    color: #000;
}

    #editorVarianceReportTable tbody tr td.name {
        text-align: left;
    }

#editorVarianceReportTable td, #editorVarianceReportTable th {
    white-space: nowrap;
}

#gaussian_container {
    position: relative;
    width: 900px;
    height: 290px;
    border: 1px solid #888;
    margin-top: 10px;
    font-size: 12px;
}

    #gaussian_container div {
        position: absolute;
        bottom: 0;
        width: 2px;
    }

#low {
    position: absolute;
    z-index: 1000;
    left: 0px;
    bottom: -22px !important;
}

#high {
    position: absolute;
    z-index: 1000;
    right: 30px;
    bottom: -22px !important;
}

#editorVarianceReportTable tbody tr td.name a {
    color: #333;
    font-weight: 600;
    font-size: 12px;
}

    #editorVarianceReportTable tbody tr td.name a:hover {
        text-decoration: underline;
    }

.percentLow {
    background: rgba(128,0,0,.4);
    cursor: pointer;
}

.percentHigh {
    background: rgba(128,0,0,.4);
    cursor: pointer;
}

.centerGaussian {
    border-top: solid 2px rgba(0, 128, 0, 0.6);
}

.gaussDashDot {
    float: left;
    margin-right: 2px;
    margin-top: 5px;
    background-color: #66B366;
    height: 2px;
    width: 2px;
}

.gaussLegend {
    height: 12px;
    padding-top: 0;
    line-height: 10px;
    font-size: 10px;
}

.realData {
    background-color: rgba(0,175,240,.5);
}

.realIn {
    background-color: rgba(0,0,255,.5);
    cursor: pointer;
}

td.variance {
    cursor: pointer;
}

.table-thead-fixed {
    top: 0;
    position: fixed;
    width: auto;
    display: none;
    border: none;
}