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

@font-face {
    font-family: PHsans;
    src:url('fonts/Inter-Regular.ttf');
	font-weight: normal; }
@font-face {
    font-family: PHsans;
    src:url('fonts/Inter-SemiBold.ttf');
	font-weight:bold; }
@font-face {
    font-family: PHsans;
    src:url('fonts/Inter-Medium.ttf');
	font-weight:500; }
@font-face {
    font-family: PHsans;
    src:url('fonts/Inter-Bold.ttf');
	font-weight:900; }

@media screen and (min-width: 1024px) {
    .mobile {        display: none !important;    }
}
@media screen and (max-width: 1024px) {
    .desktop {        display: none !important;    }
}
    
        
html { 
height: 100%;
    }
body {
background:#ddd;
background-image: url("image/printheadtile.png");
background-attachment: fixed;
font-size: 11px;
font-smooth: auto;
color: #333;
margin: 0px;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
    }
    
.panel { 
font-family:PHsans;
margin: 2%;
margin-top: 10px;
margin-bottom: 15px;
display:block;
line-height: 1.6;
padding:2%;
padding-top:7px;
border-radius: 4px;
box-sizing:border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-margin-top: 50px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2);
background: linear-gradient(to bottom, #eee 0px, #eee 32px,  #f9f9f9 32px, #f9f9f9 100%);
    }
.panelbg { 
background: #f9f9f9;
    }
.button {
margin-top:2px;
margin-bottom:2px; 
margin-left: 2%;
width: 23%; 
height: 26px;
background-color: transparent;
border: 1px solid #444;
box-shadow: 0px 0px 0px #aaa;
color: #111;
border-radius: 2px;
cursor:pointer;
font-size: 90%;
font-family: PHsans;
font-weight: 500;


    }
.sbutton {
margin-top:2px;
margin-bottom:2px;
margin-left: 2%;
width: 12%; 
height: 26px;
border-radius: 2px;
cursor:pointer;
font-size: 95%;
font-family: PHsans;
font-weight: 500;

background-color: transparent;
border: 1px solid #444;
color: #111; 
box-shadow: 0px 0px 0px #aaa;
line-height: 1.3;
}
.input { 
margin-bottom: 2px;
font-size: inherit;
font-family: PHsans;
background-color:transparent;
border: 1px #aaa solid;
accent-color: #444;
border-radius: 2px;
width: 97%;
height: 20px;
padding: 1px;
padding-left: 3px;
line-height: 1.6;
    }
.border { 
border:#aaa 1px solid;
 }
.borderTB { 
border-top:#aaa 1px solid;
border-bottom:#aaa 1px solid;
 }    
.divider {
border-top: #aaa 1px solid;
margin-top: 10px;
margin-bottom: 5px;
    }
        
input[type="text"],   
input[type="password"],
input[type="file"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea,
option { 
margin-bottom: 2px;
font-size: inherit;
font-family: PHsans;
background-color:transparent;
accent-color: #444;
border: 1px #aaa solid;
border-radius: 2px;
    }
select, option {
  font: -moz-pull-down-menu;
}
    
input[type="text"] {    
width: 45px; 
height: 22px;
position:relative;

    }
input[type="email"] {    
width: 45px; 
height: 22px;
position:relative;
    }
    
input[type="tel"] {    
width: 45px; 
height: 22px;
position:relative;
    }

input[type="password"] {    
width: 94%; 
height: 21px;
border-radius: 2px;
    }

input[type="file"] {
padding: 2px;
    }

input[type="number"] {    
width: 55px; 
height: 21px;
    }

input[type="checkbox"] {
position: relative;
left: 0px;
vertical-align: baseline;
accent-color: #444;
width: 13px;
height: 13px;
    } 

input[type="radio"] {
position: relative;
top: 0px;
left: 0px;
vertical-align:text-bottom;
accent-color: #444;
width: 14px;
height: 14px;
    } 

.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
    
.no-spin {
  -moz-appearance: textfield;
}
   
select {   
box-sizing:border-box;
width: 70px; 
height: 24px;
border-radius: 2px;
accent-color: #444;
border: 1px #ccc solid;
background-color:#eee; 
    }
option, optgroup  { 
background-color: #eee;
accent-color: #444;
    }

input::placeholder {
font-size: 90%;
font-family: PHsans;
 }

textarea::placeholder {
font-size: 90%;
 }

textarea {
  resize: none;
}
    
.title {
color:#222; 
left:10px;
width: 100%;
font-size: 14px;
border-bottom: 0px solid #ddd;
padding-left: 16px;
padding-bottom: 4px;
padding-right: 0px;    
margin-left: -8px;
margin-bottom: 10px;
margin-top: -2px;
font-family: PHsans;
font-weight: bold;
    } 
    
.canvas {
    background-color: #FBFBFB; 
    margin-left: 0px; 
    margin-top: 0px; 
    box-shadow: 0px 3px 6px #BBB; 
    width:  320px;

    }
    
a:link { color: #333; text-decoration:none;}
a:visited {	color: #333; }
a:hover {	color: #333; text-decoration:underline; }
a:active {	color: #333; text-decoration:underline;}


.prime {
background-color:#444;
color: white;
    }
.option {
float:right; 
color: #333;
background-color:transparent; 
border: 1px #aaa solid;
cursor:pointer; 
margin-top:-20px; 
font-size:x-small; 
font-family: PHsans;
font-weight: 500;
border-radius: 2px;
margin-right: 16px;
padding: 2px 6px 2px 6px;
    }
.filter {
color: #333;
background-color:transparent; 
border: 1px #aaa solid;
cursor:pointer;  
font-size: 90%;
font-family: PHsans;
font-weight: 500;
width:60px;
padding: 2px;
margin-bottom:6px;
margin-top:4px;
margin-left:4px;
margin-right:2px;
height:20px;
border-radius: 2px;
    }
.button:hover { 
background-color: #0392ED;
border-color: #333;
color: #FFF;
text-decoration: none; 
box-shadow:0px 0px 0px #aaa; 
    }
    
.delete:hover { 
background-color: #E90392; 
text-decoration: none;    
color: #FFF;
    }
    
.clear:hover { 
background-color: #F9D101;
text-decoration: none;     
color: #333;
    }
    
.option:hover { 
background-color: #DDD;
color: #111; 
text-decoration: none;        
 }
.filter:hover { 
background-color: #DDD;
color: #111; 
text-decoration: none;        
 }
    
.nav {  
font-family: PHsans;
font-weight: bold;
vertical-align: top;
background-color:#eee;
color: #FFFFFF;
transform: translate(50%, 0%);
right: 50%;
border-radius: 0px 0px 6px 6px;
font-size: 14px;
width: 100.2%;
align-content: center;
overflow: hidden;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2);
position:fixed;
z-index: 999;
box-sizing: border-box; 
}

.nav-icon { 
height:28px; 
margin-bottom:-5px;
margin-top:-2px;
}

.nav-buttons {
color: #000;
line-height: 1.5;
padding:4px 6px 30px 6px; 
height: 32px;
display: inline-block;
margin-top: 0px;
border-radius: 3px;
box-sizing: border-box;
}

.nav-margin { 
padding-bottom: 40px;
}




.bgtext {
    font-family: PHsans;
    font-weight: bold;
}
    

.nav-c:hover { background-color: #0392ED;  text-decoration:none; transform: scale(1.2); }
.nav-m:hover { background-color: #E90392;  text-decoration:none; transform: scale(1.2); }
.nav-y:hover { background-color: #F9D101;  text-decoration:none; transform: scale(1.2);}
.nav-k:hover { background-color: #FFFFFF;  text-decoration:none; transform: scale(1.2); } 
.nav-g:hover { background-color: #999999;  text-decoration:none; transform: scale(1.2); }

.nav-invert:hover { filter:invert(1); }

.draggable-item {
  cursor: grab;
  display: block;      
  padding: 0px;        
  user-select: none; }
.draggable-item * {
  cursor: inherit !important;
}
.draggable-item a {
  cursor:pointer !important;
}
.draggable-item input[type="checkbox"] {
  cursor:default !important;
}
.sortable-chosen {
  cursor: grabbing !important; 
}
.sortable-ghost {
    opacity: 0.2;
    background: transparent;  
}
    
@media screen and (min-width: 1024px) {
.logo {
    height: 245px; 
    width: 194px; 
    background-size: 100%;
    background-image:url('image/printhead.svg'); 
    background-repeat: no-repeat; 
    position: fixed;  
    bottom:53px;  
    right: 45px; 
    z-index: -999; 
    }
.bgtext {
   position:fixed;
    width: 254px;
   bottom: 5px;
   right: 5px;
    z-index: -1;
    color: #111;
    padding:8px;
    text-align: center;
    font-size: 110%;
    line-height: 1.5;
    }
}



@media screen and (min-width: 0px) and (max-width: 640px) {
body {
font-size: 13px;
    }
    
.height1 { min-height: 0px;    }
.height2 { min-height: 0px;    }
.height3 { min-height: 0px;    }
.height4 { min-height: 0px;    }
    
.container {
float:left;
width: 98%;  
margin-left: 1%;  
margin-bottom: -8px;
display:block;  

 }
.button {
height: 30px;
  }
.sbutton {
height: 30px;
  }
input[type="text"],   
input[type="password"],
input[type="file"],
input[type="number"],
textarea {  
height: 26px;
    }
select {  
height: 30px;
width:200px;
      }
input[type="checkbox"],
input[type="radio"] {
position: relative;
top: 3px;
width: 16px;
height: 16px;
    } 
.canvas {
    width: 100%;
    margin-bottom: 150px;
    margin-top: -120px;
    }

.logo {
    width: 90px; 
    height: 120px; 
    left: calc(50% - 190px);
    background-size: 100%;
    background-image:url('image/printhead.svg'); 
    background-repeat: no-repeat; 
    position: fixed;  
    bottom:0px;  
    z-index: -999; 
    }
    
.bgtext {
    position: fixed;
    left: calc(50% - 90px);
    bottom: 20px;
    z-index: -1;
    color: #111;
    width: 100%;
    align-content: center;
    text-align: left;
    font-size: 110%;
    line-height: 1.4;
}

}

    
    
    
@media  screen and (min-width: 640px) and (max-width: 1024px) {
.logo {
    width: 90px; 
    height: 120px; 
    background-size: 100%;
    background-image:url('image/printhead.svg'); 
    background-repeat: no-repeat; 
    position: fixed;  
    bottom:5px;  
    right: 300px;
    z-index: -999; 
    }
.bgtext {
    width: 265px;
    position: fixed;
    right: 20px;
    bottom: 25px;
    z-index: -1;
    color: #111;
    text-align: left;
    font-size: 120%;
    line-height: 1.4;
    }
    
.height1 { min-height: 740px;    }
.height2 { min-height: 550px;    }
.height3 { min-height: 755px;    }
.height4 { min-height: 560px;    }
    
.container { 
float:left;
width: 48%; 
margin-left: 1%;  
margin-bottom: -8px;
display:block;    
}
.button .sbutton {
height: 25px;
}
input[type="text"],   
input[type="password"],
input[type="file"],
input[type="number"],
textarea {  
height: 22px;
    }
select {  
height: 25px;
      }
    
.canvas {
    width: 100%;
    margin-bottom: 150px;
    }
    
}
    


    

    
@media  screen and (min-width: 1024px)  {
    
.height1 { min-height: 730px;    }
.height2 { min-height: 690px;    }
.height3 { min-height: 750px;    }
.height4 { min-height: 725px;    }
    
.container { 
float:left;
width: 312px;
margin-left: 4px;
margin-bottom: -8px;
display:block;  }
    
.canvas {
margin-bottom: 80px;
position: absolute;
top: 10;
width: 290px;
    }
  }
     
    
      
:root {
--threshold:35%;
}
.thermal1{
filter: grayscale(100%);
}
.thermal2{
filter: brightness(calc(40% + var(--threshold))) grayscale(100%) contrast(1000%);
}
.thermal3{
filter: brightness(calc(30% + var(--threshold))) grayscale(100%) contrast(1000%);
}
.thermal4{
filter: brightness(calc(20% + var(--threshold))) grayscale(100%) contrast(1000%);
}