* { margin:0; padding:0}
a {outline: none;}

html, body {height: 100%; background:#EEE; font-family:Verdana,sans-serif; color:#4A4A4A; font-size:12px}

a{color:#259; text-decoration:none}
a:hover{color:#C22; text-decoration:underline}

h1, h2, h3, h4, h5 {font-family:"Trebuchet MS",Verdana,sans-serif;}
h2 {border-bottom:1px solid #BBBBBB;color:#444444;font-size:20px;margin:0 0 10px;padding:2px 10px 1px 0;}
h3 {border-bottom:1px solid #BBBBBB;color:#444444;font-size:16px;margin:0 0 10px;padding:2px 10px 1px 0}
h3 img{vertical-align:top;}
h4 {color:#444444;font-size:14px;margin:0;padding:2px 10px 1px 0}
h5 {color:#444444;font-size:14px;margin:0;padding:2px 10px 5px 0}

img{vertical-align:top}

ul{padding-left:20px}

.right {float:right}
.left {float:left}

.container{background:#FFF; margin:0 20px 20px; border:1px solid #58B}

.top{height:14px; background:#345; color:#FFF; font-size:10px; padding:4px 4px}
.top a{color:#FFF; font-weight:bold; text-decoration:none; margin:0 4px 0 4px}
.top a:hover{text-decoration:underline}

.head{height:80px; background:#58B; color:#FFF}
.head h1{font-size:26px; padding:10px 12px}

.head #quote {width:350px; text-align:right; padding:14px 15px}
.head #quote h5{color:#fff;font-size:11px; font-weight:normal; font-style:italic}
.head #quote p{font-size:11px; font-weight:bold; }

.main {padding:8px 10px}

.cockpit {text-align:center; margin: 0!important; position:fixed; width:100%; padding: 0 1px; z-index:5}
.cockpit input {text-align:center; width:20px!important; padding:0 0 1px 0!important}
.cockpit input[type=submit]{display:none}
.cockpit form {display:initial}

.col3a {width:33%; float:left}
.col3b {width:33%; float:left} .col3bInner{padding:0px 10px}
.col3c {width:33%; float:left}

.col2a {width:50%; float:left}
.col2b {width:50%; float:left}
.col2c {width:35%; float:left}
.col2d {width:65%; float:left}

.box {background-color:#F6F6F6;border:1px solid #E4E4E4;color:#505050;line-height:1.5em;margin-bottom:10px;padding:6px}
.box .line{background-color:#E4E4E4;height:1px; margin:10px}
.box .buttons{height:35px}
.box .note{color:#999; font-size:10px; margin-left:10px}
.box table{width:100%; padding-bottom:12px}
.box .tablerow{background:#fff}
.box .tableline{border-bottom:1px solid #e4e4e4}
.box #l2{text-align:center; width:12%}
.box #l1{text-align:left; width:16%}
.box .catalogue{color:#008000; font-weight:bold}
.box #label{float:left; width:137px; text-align:right; padding:4px 7px 0 0}
.box #labelSmall{float:left; width:120px; text-align:right; padding:4px 7px 0 0}
.box input{width:300px; margin:0 0 5px 0; padding:3px}
.box select{width:236px; margin:0 0 5px 0; padding:3px}
.box .cb{width:14px; margin:6px 0 9px 0; background:none; height:auto}
.box #message {width:306px; height:70px; margin-bottom:5px; font-size:12px}
.box textArea {font-family:Verdana,sans-serif}
.box .wider {width:100%!important;height:120px!important}
.box #submit{margin:20px 0 0 142px; width:200px}
.box .filter {float:left; padding-right:16px}
.box .filters .inputA{width:18%}
.box .filters .inputB{width:8%}
.box .filters .inputC{width:14%}
.box.filter input {width:60px}
.box hr {padding: 25px 0 0;border: 0;border-top: 1px solid #E4E4E4;margin: 20px 30px 0;}
.box.po{display:inline-block;margin:10px;width:calc(50% - 37px);vertical-align:top}
.box .bold {padding: 3px;background: #ccc;}
.box img, .box svg {max-width:100%;max-height:560px}
.details p {padding:6px}
.details h4, table {padding:6px 0}
.details ul {padding:10px}
.details table {padding-bottom:6px}
.details td {width:9%; text-align:center}
.details table .tableLeft {width:20%; text-align:left}
.details table .supplyNone {background:#E9E9E9; border:1px solid #f5f5f5; text-align:center}
.details table .supplyOut {background:#C00; border:1px solid #f5f5f5; text-align:center}
.details table .supplyIn {background:#0C0; border:1px solid #f5f5f5; text-align:center}

.inline input {width:56px; margin:0 5px 0 0}
.inline .small {width:38px}
.inline table {padding:0; margin:0}
.inline #submit{margin:0; width:80px}
.inline .panel {border:1px solid #ddd; display:inline-block; margin:4px; padding:5px; width:29%}
.inline .panel p{margin-left:25px;padding:0;height:18px;overflow:hidden;line-break: anywhere;}
.inline .panellogo {border:1px solid #ddd; display:inline-block; margin:4px; padding:5px; width:60px}
.inline .panellogo svg{height:40px}
.inline .panel.selected {
    border-color:#015;
    background:#259;
    color:#fff
}


.orders {width:100%; text-align:center; border:1px solid #E4E4E4;margin-bottom:9px;border-collapse:collapse;}
.orders th{background-color:#EEEEEE;padding:6px;white-space:nowrap;}
.orders td{padding:2px}
.odd{background-color:#F0F1F2}
.odd.timer, .odd.del3{background-color:#ee9d9f}
.timer, .del3{background-color:#f4a3a5}
.odd.timer, .odd.del2{background-color:#fac3ad}
.timer, .del2{background-color:#ffc8b2}
#admin_area .del2, #admin_area .del3 {font-size:21px; padding:20px;margin-bottom:10px}

#notes_table{padding:0px; margin:0px}
#notes_table td{padding:6px}
#newNote ul {border:1px solid #ccc; display:inline-table; margin:5px;padding:10px}
#newNote li {list-style: outside none none;}

.submitLink{border:0;background:#FFF}

.loader{border:1px solid #BBB; font-weight:bold;padding:15px; position:absolute; background:#FFF;filter:alpha(opacity=75); -moz-opacity:0.75; opacity: 0.75; left:46%; top:250px}
.loader img{vertical-align:middle;}
.hidden{visibility:hidden; display: none !important;}

.print{background:#FFF; padding:60px}
.print table{text-align:left; margin-bottom:20px}
.print table p{padding:2px}
#line{border-bottom:1px solid #CCC; height:1px; width:100%}
#total {margin-top:4px}
#total p {padding:0;margin:0;line-height:24px}
#total h4 {padding:4px 0;margin:0}
#total #r {text-align:right; padding-right:10px}
#total #b {width:92px; margin-top:44px}
#user_area {background:#FFF; margin-bottom:20px}
#user_area p{color:#777; padding:3px}
#user_area img{vertical-align:bottom;}
.print.jot {
  font-family: "Neutraface", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.print.jot h2{
  font-family: "Neutraface", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color:#222
}
.print.jot h3{
  font-family: "Neutraface", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color:#222
}
.print.jot h4, .print.jot th, .print.jot strong{
  font-family: "Neutraface", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color:#222
}
.print.jot td span {
    margin-right: 8px;
}

.checkbox{margin-left:10px}

.successPopup {
    float:right; padding:5px;
    opacity: 0;
    -webkit-animation: fadeout 4s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeout 4s; /* Firefox < 16 */
    -ms-animation: fadeout 4s; /* Internet Explorer */
    -o-animation: fadeout 4s; /* Opera < 12.1 */
    animation: fadeout 4s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.noselect {
  -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 */
}

.icon {
    color:#666;
    padding:2px;
}


.iconsvglarge{
    fill: currentcolor;
    height: 2em;
    vertical-align: -0.9em;
    width: 2em;
    margin:5px
}

.item {
    border:5px solid #ccc;
    margin-top:10px;
    font-size:16px;
    position:relative;
    overflow:hidden
}
.itemtitle {
    text-align:center;
    background:#eee;
    font-size:20px;
    padding:15px
}
.itemtitle .left{
    position:absolute;
    left:15px
}
.itemtitle .right{
    position:absolute;
    right:15px
}
.itemQuant{
    width:33px;
    margin-top:-7px
}
.itemcanvas {
    width:33%;
    max-width:500px;
    display:inline-block;
    font-family:"Trebuchet MS",Verdana,sans-serif;
}
.itemcanvas h2{
    font-size:20px;
    font-weight:bold;
    border:0;
    padding:0;
    margin:15px 0 20px
}
.itemcanvas h3{
    font-size:16px;
    font-weight:bold;
    border:0;
    padding:0;
    margin:10px 0 0 0;
}
.itemcanvas p{
    font-size:16px;
    font-weight:normal;
    border:0;
    border-bottom:1px solid #ccc;
    padding:0 0 10px;
    margin:0
}
#canvasdes, #canvasdesr {max-width:440px}
.watermark {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 13%;
    bottom: 0;
    font-size: 60px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .7;
}

.textSelect {
    border-bottom:1px dotted #444;
    cursor: pointer
}

.item.itemOff.selected {
    border:5px solid #aaa;
    cursor: pointer;
}

.item.itemOff{
    width:300px;
    display:inline-block;
    margin:10px;
}
.item.itemOff .hidable{
    display:none;
}
.item.itemOff .itemcanvas{
    width:50%;
}
.item.itemOff svg{
    width:150px;
    height:204px;
}
.item.itemOff img{
    max-width:150px;
    max-height:204px;
}

.itemCutting {
    width:170px;
    font-size:unset;
    display:inline-block;
    margin-right:10px
}
.itemCutting .itemtitle {
    font-size:unset;
    padding:5px;
}
.itemCutting p{
    padding:5px
}

.toggleOff {
    color:#b5b5bf;
    text-decoration: line-through;
}

.imageList ul {
    padding:0;
    margin:0;
}

.imageList li {
    border: 1px solid #ddd;
    display: inline-block;
    list-style: outside none none;
    margin: 4px;
    padding: 0;
}

.imageList li:hover {
    border: 1px solid #c22;
}

.tags {
    padding:0;
    margin:0 0 10px
}

.tags li {
    border: 1px solid #ddd;
    display: inline-block;
    list-style: outside none none;
    margin: 4px;
    padding: 4px;
}.tags li form{
    display: inline-block;
}.tags li input{
    width:20px;
    margin:0;
    text-align:center
}

.tags.view4 li {
    width: calc(25% - 10px);
    padding: 10px 0;
    text-align: center;
}

.tags li a{
    display:block
}

.tags .selected{
    background:#259
}
.tags .bold{
    font-weight:600
}
.tags .off{opacity:.4}

.tags .selected a{
    color:#fff
}
.tags.disabled li {opacity:.3}

.buttonFull{
    background: #f00 none repeat scroll 0 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 147px;
    font-size:100px;
    padding-top:70px;
}

.buttonFull{
    background: #259 none repeat scroll 0 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 147px;
    font-size:100px;
    padding-top:70px;
    opacity:0
}

.buttonFull:hover{
    opacity:0.3
}

.buttonFull.left{
    left:0
}

.buttonFull.right{
    right:0
}

.svgedit svg{
    border: 1px solid #bbb;
    margin-right: 20px;
    padding: 10px;
}

.svgcell{
    cursor: pointer;
}

/*.orderLogo path {
    fill:#555555;
}*/

.desPart {
    display:block;
    margin-bottom:5px
}
.desPart .title {
    display:inline-block;
    width:106px;
}
.desPart input {
    display:inline-block;
    width:30px;
    margin-left:5px;
}
.desPart input.text {
    width:160px;
}

.gallery img {max-height:400px;max-width:400px;margin:20px 20px 0 0}

table.groupOrder {margin: 0;padding: 0}
.groupOrder td {padding-right: 8px}



/*pr_*/
.imageList img {
    max-width:120px;
}
.imageList .big img {
    max-width:100%;
}
textArea.block{
    width: 307px;
    height: 73px;
    margin-bottom: 5px;
    display: block;
    font-size:12px
}
.cb-box input {
    width:16px;
    margin:8px 0 0 9px
}
.canvas {
  transition:opacity .3s ease-out, height .3s ease-out;
  opacity: 1;
  text-align: center;
  max-width:1200px;
  position: relative;
  width: 560px;
  height: 560px;
}
.canvas img{
  height: 100%;
  width:100%;
  object-fit: contain;
  position: relative;
  z-index: 100;
}
.canvas.off {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.canvArt {
  height:100%;
  width:100%;
  perspective: 296.758rem;
  perspective-origin: 0% 0%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.canvSvg {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%;
  z-index: 5;
}




/* card layouts */
.cards {
    padding:10px
}
.cards .col {
    width:calc(25% - 15px);
    margin-right:20px;
    display: inline-block;
    vertical-align: top;
}
.cards .col:nth-child(4n) {
    margin-right:0
}
.cards td {padding:1px 10px 1px 0}
.card {
    border:1px solid #bbb;
    margin:0 0 20px 0;
    padding:20px;
}
.card.half {
    display:inline-block;
    width:calc(50% - 52px)
}
.card.half:nth-child(2n-1) {
    margin-right:20px
}
.card.half.des {
    border:none;
    padding:0;
    width:calc(50% - 12px)
}
.cards .section {
    margin: 0 0 10px 20px
}
.card p {margin:0 0 5px}
.card input {width:calc(100% - 10px);border:1px solid #bbb;padding:5px;margin:0 0 10px}
.card .inner img {width:90%;max-width:140px}
.card .inner a img {width:unset}
.card textarea {
    height: 100px;
    width: 100%;
    border: 1px solid #bbb;
    padding: 5px;
    margin: 0 0 10px 0;
    font-family: Verdana,sans-serif;
    font-size: 13px;
    line-height: 20px;

}
.card select {width:calc(100% + 2px);border:1px solid #bbb;padding:5px;margin:0 0 10px}
.card .button {
    display:inline-block;
    padding: 5px 10px;
    border: 1px solid #bbb;
    margin:0 10px 10px 0
}
.card .button.image {
    display:inline-block;
    padding: 5px;
    margin:0 5px 5px 0;
    width:calc(25% - 17px)
}
.card .button.image img{
    width:100%
}
.card .toggle.selected {
    pointer-events:none
}
.card .selected.red {
    border-color:#800;
    background:#c00
}
.card .selected.green {
    border-color:#080;
    background:#0c0
}
.card .selected {
    border-color:#015;
    background:#259;
    color:#fff
}

.card .swatchbg {
    height:12px;
    width:76px;
    display:inline-block;
    padding:6px;
    margin:0 6px 0 0;
    text-align:center;
    border:1px solid #bbb
}
.card .swatch {
    display:inline-block;
}
.card .colour .swatch {
    margin-right:6px
}
.card .note {
    width: 70px;
    display: inline-block;
    text-align: center;
    text-transform: capitalize
}
.card .link{
    font-weight:normal;
    font-size:12px;font-family:Verdana,sans-serif;
}
.card .icon {
    display:inline-block;
    width: calc(16.666% - 10px);
    padding: 5px;
}
.card .icon.selected svg{
    fill:#fff;
}

.card table {
    width:100%;
    text-align:left;
}
.card th, .card td {
    padding:4px 0
}
.card table.images img {width:60px}
.card hr {
    border:0;
    border-top: 1px solid #bbb;
    margin: 12px 0 6px;
}

.score {font-size: 20px}
.score::before {
  content: "★";
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.score.score1::before {
    background: conic-gradient(#444 19%, #ddd 19%, #ddd 81%, #444 81%);-webkit-background-clip: text;background-clip: text;
}
.score.score2::before {
    background: conic-gradient(#444 36%, #ddd 36%, #ddd 81%, #444 81%);-webkit-background-clip: text;background-clip: text;
}
.score.score3::before {
    background: conic-gradient(#444 50%, #ddd 50%, #ddd 81%, #444 81%);-webkit-background-clip: text;background-clip: text;
}
.score.score4::before {
    background: conic-gradient(#444 62%, #ddd 62%, #ddd 81%, #444 81%);-webkit-background-clip: text;background-clip: text;
}
.score.score5::before {
    background: #444;-webkit-background-clip: text;background-clip: text;
}

.img3 div{width: 32%;
    display: inline-block;
    text-align: center;
    margin: 0 3px 12px;}
.img3 img {max-height: 220px;}
.img3.size-s img {max-height: 50px;vertical-align: middle;margin-right: 6px;}

.square {
    position:relative;display:inline-block; width:12px; height:12px; background:#c00; margin: 0 0 0 2px
}
.square.on {
    background:#0c0; 
}

.ops input, .ops select {
    width: unset;
}
.ops span, .ops select {
    margin-right: 8px;
}
.ops .txtin1 {width: 60%;}
.ops .txtin2 {width: 80px;}
.ops .txtin3 {width: 50%;}
.ops textarea {width: 90%;}

@font-face{
    font-family:'Neutraface';
    font-style:normal;
    font-weight:400;
    src:url(/assets/fonts/Neutraface2-Book.woff2) format("woff2"),url(/assets/fonts/Neutraface2-Book.woff) format("woff"),url(/assets/fonts/Neutraface2-Book.ttf) format("truetype")
}
@font-face{
    font-family:'Neutraface';
    font-style:normal;
    font-weight:500;
    src:url(/assets/fonts/Neutraface2-Demi.woff2) format("woff2"),url(/assets/fonts/Neutraface2-Demi.woff) format("woff"),url(/assets/fonts/Neutraface2-Demi.ttf) format("truetype")
}