@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@350&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@470&display=swap');

body {
    background-color: #ffffff; font-family: "Noto Sans Display", Roboto; font-size: 10.5pt; font-weight:300;
}
b   {font-weight:400;}
h1, .Heading1 {
    color: #666678; text-transform: uppercase; line-height: normal; letter-spacing: .2em; font-size: 20pt; font-weight:300;
}
h2, .Heading2 {
    color: #666678; text-transform: uppercase; line-height: 1.5em; letter-spacing: 0.3em; font-size: 1.5em; font-weight: inherit; margin: 0px 0px 0px 10px; padding-top: 0px;
}
h3, .Heading3 {
    color: #334; text-transform: uppercase; line-height: 1.2em; letter-spacing: 0.2em; font-size: 10.5pt; font-weight: inherit; margin: 0px 0px 0px 10px; padding-top: 0px;
}
.Heading2.white {
    color: #ffffff;
}
.normal {
    font-weight:normal;
}
#body {
    font-size:9.5pt;
}
.large {
    font-size: 14pt; line-height:14pt; margin:-1px; padding-bottom:2pt;
}
.medium {
    font-size: 9pt;
}
.small {
    font-size: 8pt;
}
.light {
    font-weight: 300;
}
a {
    text-decoration: none; color: #3366c0; padding: 2px 5px 2px 5px; margin: 0px; cursor: pointer; 
}
a:visited {
    color: #3366c0;
}
a:hover {
    color: #ffffff; background-color: #78c02c;
}   
.aLink {
    padding: 7px 6px 6px 5px;
}
.aLinkSel {
    padding: 7px 6px 6px 6px; color: #ffffff; background-color: #85c02c;
}
.oLink {
    display:block; text-align:center;
}
span {
    white-space: nowrap;
}
.red  {color:red;}
/*table {font-family: "Myriad Pro"; font-size: 9.5pt; font-weight: 300;}
*//**/
#Leftmargin {
    width: 10%;
    float: left;
    height: 1px
}
#Pagecontainer {
    position:relative; width:80%; min-width:1100px; margin:10px; float:left; background-color:#ffffff;
}
#logo {
    float:left; margin-top: 9px; margin-left: 4px; border: 0px;
}
a#homelink:hover {
    background-color: #ffffff;
}

#TitleHeader {
    position:relative; width:450px; height:30px; margin-top:7px; float:left;
}
#SearchPanel {
    position:relative; height:26px;  float:right; background-color: white; margin-top:2px; margin-bottom:3px;
}
#searchCont {
    height: 26px; margin-top: 0px; margin-bottom: 0px; margin-right:0px;
}
#SearchBox {
    float: left; width: 250px; padding-top: 4px; padding-left: 5px; color: #aaaaaa; background-color: white; margin-top: 0px; margin-right: 0px; border:0px; 
}
#srchbtn {
    width: 26px; height: 26px; background: url("/Images/search.svg") no-repeat; display: inline-block; cursor: pointer; 
}
#hintPane {
    position: absolute; left: 0px; top: 27px; width: 286px; height: 290px; overflow: hidden; text-overflow: clip; border: 0px solid #a0a0b9; box-shadow: #808080 1px 1px 4px; background-color: white; z-index: 100; white-space:nowrap; display: none; 
}
a.hintItem {
    width:284px; padding-left:4px; padding-top:4px; height:18px; display:inline-block; font-size:10pt;
}
a.hintItem:hover {
    color:#3366c0; background-color: #f0f0f8;
}
.hilight {
    background:#d8ff99;
}
#submenu {
    margin-top: 26px; margin-left: 0px; width: 600px; height: 28px; clear: both;
}
a.tabs {
    display:inline-block; text-transform: uppercase; letter-spacing: .2em; padding: 3px 6px 4px 6px; margin-left: 0px; margin-right: 0px;
}
a.tabsel {
    display:inline-block; text-transform: uppercase; letter-spacing: .2em; padding: 3px 6px 4px 6px; margin-left: 0px; margin-right: 0px; color:#ffffff; background-color: #88889c; 
}
a.tabs:link, a.tabs:visited {
    color: #334;
}
a.tabs:hover {
    color: #fff; background-color: #88889c; 
}
.bar {
    position:relative; top:-29px; height: 0px; padding-top: 4px; white-space: nowrap; 
}
.bar select{
    margin: 0px 2px -50px 1px; width:65px; font-size:9.5pt;
}
a.tbItem {
    display:inline-block; text-transform: uppercase; letter-spacing: .2em; color:#fff; margin-top:3px; padding:5px 7px 4px 7px;
}
a.tbItem:hover{
    background-color:#80809c; padding:5px 7px 4px 7px;
}
a.tbItemSel {
    text-transform: uppercase; letter-spacing: .2em; color:#3366e0; background-color:#e2e2e2; padding:5px 7px 7px 7px; background-image: linear-gradient(#f0f0f0, #e2e2e2);
}
a.tbItemSel:hover {
    color:#3366e0; 
}
a.button{
     display:inline-block; padding: 3px 6px 4px 6px; margin: 0px; background-image: linear-gradient(#f0f0f0, #e2e2e2);
}
a.button:hover {
    background-image: linear-gradient(#88889c, #80809c);
}
a.buttondk{
     display:inline-block; color:#fff; padding:3px 6px 4px 6px; margin: 0px; background-image: linear-gradient(#b6b6b6, #999999);
}
a.buttondk:hover {
    background-image: linear-gradient(#88889c, #80809c);
}
.BarTitle {
    float: right;
    padding-right: 2px;
}
.label {
    margin-top: 16px; margin-bottom:7px; font-weight:500;
}
input {
    font-family:inherit; font-size: inherit; font-weight: inherit; border:inherit;
}
input[type="text"]:focus {
    outline:none; background-color:#f4fff0; 
}
textarea {
    font-family:inherit; font-size: inherit; font-weight: inherit;
}
textarea:focus {
    outline:none;
}
select {
    outline:none; font-family: inherit; font-size:inherit; font-weight:inherit;
}
select:focus {
    outline:none; background-color:#f4fff0; border:1px solid grey; padding: 1px; font-family: inherit;  
}
.filters {
    width:120px; float:left;
}
.QTable {
    width:100%; border: 0px; border-spacing: 0px; border-collapse: collapse; margin-bottom:3px; position:relative; /*top:-26px; margin-bottom:-20px;*/
}
.QTable th {
   font-weight: normal; border: 0px; padding: 10px 0px 4px 0px; white-space: nowrap;
}
.QTable th a{
    display:block;
}
.QTable th.left {
   text-align:left; 
}
.QTable th.right {
   text-align:right;
}
.QTable td {
    border: 0.0pt solid grey; display: table-cell; padding-top:1px;
}
.QTable td div {
    min-width: 3em; max-width:110px; overflow:hidden; position: absolute; background-color:#f8f8f8; margin: -11px 0px 14px -4px; z-index: 1; padding:2px 4px 2px 6px; white-space:nowrap;
}
.QTable td div.expandover:hover {
    overflow: visible; max-width:350px; z-index: 2; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background-color:#fff;
}
.QTable td div a {
    white-space: nowrap; margin-left:-6px; margin-right:-4px; padding-right:5px; 
}
.QTable td span > span{
    padding: 0px;
}
.QTable.Contacts {
   top:-26px; margin-bottom:-23px;
}
.QTable.Leads {
   top:-24px; margin-bottom:-23px;
}
#Totals {
    width:100%; border-collapse:collapse; margin-bottom:2pt;
}
#totRow2 td {
    border-top:0.6pt solid black; border-bottom:1pt solid black;
}
.bold {
    font-weight: 400 !important;
}

.center{
    text-align: center;
}
.right{
    text-align:right;
}
.fl-right {
    float:right
}
.ml-m5{ margin-left: -5px;}
.ml-m10{ margin-left: -10px;}
.m-0   { margin:0 !important;}
.ml-0  { margin-left: 0;}
.ml-5  { margin-left: 5px;}
.ml-10 { margin-left: 10px;}
.ml-15 { margin-left: 15px;}
.mr-0  { margin-right: 0;}
.mr-5  { margin-right: 5px;}
.mr-10 { margin-right: 10px;}
.mr-15 { margin-right: 15px;}
.mt-m2 { margin-top: -2px !important;}
.mt-0  { margin-top: 0;}
.mt-5  { margin-top: 5px;}
.mt-10 { margin-top: 10px;}
.mt-15 { margin-top: 15px;}
.mb-0  { margin-bottom: 0px;}
.mb-5  { margin-bottom: 5px;}
.mb-10 { margin-bottom: 10px;}
.mb-15 { margin-bottom: 15px;}

.p-0   {padding:0 !important;}
.p-3   {padding: 3px;}
.p-5   { padding: 5px;}
.p-10  { padding: 10px;}
.p-15  { padding: 15px;}
.p-20  { padding: 20px;}

.pt-0  { padding-top: 0;}
.pt-4  { padding-top:4px;}
.pt-5  { padding-top: 5px;}
.pt-10 { padding-top: 10px;}
.pt-15 { padding-top: 15px;}
.pt-20 { padding-top: 20px;}

.pl-0  { padding-left:0 !important;}
.pl-5  { padding-left:5px !important;}
.pl-10 { padding-left:10px}
.pl-15 { padding-left:15px}
.pr-0  {padding-right:0 !important}
.pr-4  {padding-right:4px}
.pr-5  {padding-right:5px}
.pr-10 {padding-right:10px !important}
.pr-15 {padding-right:15px}
.pb-0  { padding-bottom: 0;}
.pb-3  { padding-bottom: 3px;}
.pb-4  { padding-bottom: 4px;}
.pb-5  { padding-bottom: 5px;}
.pb-10 { padding-bottom: 10px;}
.pb-15 { padding-bottom: 15px;}

.block {display:block;}
.iblock {display:inline-block;}
.absolute {position:absolute;}
.relative {position:relative;}

.DD {
    width: 186px; border:0.6pt solid #889; margin:1px; padding:1px 1px 1px 0px;
}
.DD:focus {
    outline: none; border: 0.6pt solid #889; padding:1px 1px 1px 0px;
}
.DD option {
    font-weight: inherit; margin:15px 2px 15px 2px !important;
}
.ProjDD {
    width:9.68em;
}
.ProbDD {
    border:0; padding:0; margin-right:-10px; margin-bottom:0px; background:none;
}
.ProbDD:focus {
    outline: none; border:0; background:none; padding:0; font-family: inherit;  
}
.RankDD {
    width:30px; margin-right:-5px; 
}
/*custom drop down leaves */
.ddleaf {
    border: 0.6pt solid #888;
    position:
    absolute;
    background: white;
    display: none;
    /* width: auto; */
    min-width:54px; margin-top:-1.0pt; margin-left:1px;
    text-align: left;
    box-shadow:
    rgba(0,0,0,0.2) 0px 0px 5px; z-index:1000;
}
.ddleaf li {
    list-style: none;
    margin-left: -40px;
    margin-right: -1px;
    margin-top: 0pt;
    margin-bottom: 0px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
}
.ddleaf li:hover {
    background-Color:#99ccff;
}
.listItemHover{
/*    list-style: none; 
    margin-left: -40px; 
    margin-right: -0.5px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding: 6px 1px 6px 4px; 
    cursor: pointer; */
    background-color:#99ccff; 
    border-right:3px solid #4066ff; /*#85c02c;*/
}
li.plain {
    padding: 6px 4px 6px 4px;
}

.tbox {
    width: 180px;
    border: 0.7pt solid #889;
    margin: 1px;
    padding: 2px;
    font-family: inherit;
}
.tbox:focus {
    border: 0.7pt solid #462 !important;
}
.projtbox {
    width:9em; border:0.6pt solid #889;  margin: 1px; padding: 2px 5px 2px 2px; font-family: inherit;
}
.customDD {
    width:40px; font-family:inherit; background-image: url('../Images/downarrow.svg'); background-repeat: no-repeat; background-position: center right;  border: 0.6pt solid #889; margin: 1px; padding: 2px 12px 2px 2px; cursor:default;
}
.contactcard .customDD {
    width:28px; padding:2px 12px 2px 2px; margin: 2.0pt 0 0pt 3px; border: 0; line-height:1.3em; cursor:default;
}
#DetailsArea{
    width:47%; float:left; 
}
#EmailsArea {
    width: 47%; float: left; display:none;
}
#DocumentsArea {
    width: 47%; float: left; display:none;
}
#column1 {
    width: 26.5%; min-width: 308px; background: rgba(133,192,44, 0.2);
}
#column2{
    width:50%;
}
#column3 {
    width:50%;
}
#column4 {
    width:26%; background: #d9d9d9;
}
#ReasonRow{
    border-collapse:collapse; border-spacing:0; width:100%; display:none;
}
#QuotesArea {
    clear:both;
}
.col {
    border-collapse: collapse; margin-left: 20px; margin-right: 20px;
}
.col td {
    border:0pt solid grey; font-family: inherit; white-space:nowrap; padding:1px 0px 0px 0px;
}
.hide{
    display:none;
}
.nonviz {
    visibility:hidden;
}

.ProbPercent0, .ProbPercent10, .ProbPercent20, .ProbPercent30, .ProbPercent40, .ProbPercent50, .ProbPercent60, .ProbPercent70, .ProbPercent80, .ProbPercent90, .ProbPercent100 {border-bottom:3px solid #999 !important; width:50px; font-weight:inherit;}
.ProbPercent10 {border-bottom-color:#4e6eed !important;}
.ProbPercent20 {border-bottom-color:#8469f4 !important;}
.ProbPercent30 {border-bottom-color:#c763fc !important;}
.ProbPercent40 {border-bottom-color:#e75bd2 !important;}
.ProbPercent50 {border-bottom-color:#f3518e !important;}
.ProbPercent60 {border-bottom-color:#ff474a !important;}
.ProbPercent70 {border-bottom-color:#fe6a45 !important;}
.ProbPercent80 {border-bottom-color:#fe8e43 !important;}
.ProbPercent90 {border-bottom-color:#fdb241 !important;}
.ProbPercent100 {border-bottom-color:#fcd63f !important;}

.hilighter {
    background-color: #ffd9b6; border:1pt solid blue;
}
.rowhilight1 {
    background-color: #fff9d6 !important;
}
.rowhilight2 {
    background-color: #fff9d6; /* animation-name: rowhilite2; animation-duration: 1s;*/
}
/*@keyframes rowhilite2 {
  from {background-color: #ffbb90; } 
  to {background-color: #fff9d6; }
}*/
.notesbox { 
    outline: 0px; border: 0.6pt solid #889; padding: 4px; font-family: inherit; font-weight: inherit; font-size: inherit; margin-bottom:2px; width:90%;
}

.ProjVal{
    text-align:right; padding-right:10px;
}
.contactcard {
   min-height:100px; border:0.0pt solid #bbb; background-color:#fff; padding:2px 5px 5px 5px; margin:10px; box-shadow:rgba(0,0,0,0.2) 0px 0px 5px;
}
.contactcard select{
   padding:0px 0px 2px 1px; margin-top:2px;
}
.contactcard select option{
   padding:1px 5px 1px 3px; font-weight:inherit;
}
#NewContactCard {
    position:relative; background:#e6f5cf; display:none;
}
.cardbody {
    min-height:78px; padding-top:3px;
}
.ContactSearchBox {
    width:140px; padding:2px; margin:-2px 0 0 3px; border:0; color:#88d; background-color:#f4fff0;
}
.ContactSearchBox:focus {
    background-color: #fff;
}
#MainContent_ContactTypeTextBox2 {
    background-color: #f4fff0; margin-top:0pt; line-height:1.25em;
}
#MainContent_ContactTypeTextBox2:hover {
    background-color: #fff;
    }
#dialogbg {
    position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.4); overflow: auto; position:fixed; top:0px; left:0px; width: 100%; height:100%; z-index: 100; display: none; 
}
.dialog {
    margin:110px auto; max-width:300px; border:0pt solid #bbb; box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    }
.dialoghead {
    text-align:center; background-color:#85c02c; margin:0; text-transform: uppercase; letter-spacing: .2em; color:#fff; padding:7px 0 7px 25px;
}
.dialogbody {
    min-height:100px; text-align:center; background-color:#efefef; padding:15px 15px 10px 15px;
}
.dialog_close {
    position:relative; display: inline-block; top:-12px; font-size: 25px; line-height:25px; font-weight: 400; margin-top:3.5pt;  padding: 3px 5px 3px 8px;
}
.dialog_close:hover {
    background:rgba(0,0,0,0.3); cursor:pointer;
}
.ItemEntry_close {
    position:relative; display: inline-block; top:-7px; font-size: 25px; line-height:25px; font-weight: 400; margin-top:3.5pt;  padding: 0px 6px 1px 6px; 
}
.ItemEntry_close:hover {
    background:rgba(0,0,0,0.3); cursor:pointer;
}
.Item_close {
    position:relative; display: inline-block; top:-2px; font-size: 20px; line-height:20px; font-weight: 400; margin:0px -1.5px 0 0;  padding: 0px 4px 1px 4px; 
}
.Item_close:hover {
    background:rgba(0,0,0,0.3); cursor:pointer;
}
.card {
    margin-right:-5px; margin-bottom:-10px;
}
#MainContent_ContactTypeDropDown {
    border:0; text-align:right; width:85px;
}
input[type="button"] {
    padding: 2px 3px 2px 3px; color: white; background-color: #4872cc; border: 1pt solid #4872cc;
}
input[type="button"]:hover {
    background-color: #80c048; border: 1pt solid #80c048;
}
input[type="submit"] {
    padding: 2px 5px 2px 5px; color: white; background-color: #4872cc; border: 1pt solid #4872cc;
}
input[type="submit"]:hover {
    background-color: #80c048; border: 1pt solid #80c048;
}
.pageLink{
    display:inline-block; width:21px; margin:0px; padding:5px 2px 5px 1px; text-align:center;
}
.pageLink.Sel{
    color:white; background-color:#808099; 
}
#PagesRow{
    position:relative; left:0px; transition: left 1s;
}
#PagesList {
    display:inline-block; width:600px; overflow:hidden; text-overflow:clip; white-space:nowrap;
}
#PagesMore {
    display: none; width:16px; height:20px; padding: 0px 5px 5px 0px; background-image: url('../Images/doublearrowfwd.svg'); background-repeat: no-repeat; background-position: center right;
}
#PagesBack {
    display: none; width:16px; height:20px; padding: 0px 5px 5px 0px; background-image: url('../Images/doublearrowback.svg'); background-repeat: no-repeat; background-position: center left; margin-left:5px; 
}

/*  QUOTE STYLES */
/*  ============================================================== */

#SiliconeCost {
    display: table-cell;
}

.w50    {width: 50px;}
.w70    {width:70px;}
.w90    {width:90px;}
.w110   {width:110px;}
.w130   {width:130px;}
.w150   {width:150px;}

.btnBars {
    display: inline-block; width: 18px; height: 16px; margin: -5px -2px -5px -2px; background: url("../Images/bars.svg") no-repeat left padding-box; cursor:move;
}
.IconEdit {
    display: inline-block; width: 23px; height: 22px; margin-left: 1px; background: url("../Images/editIcon.svg") no-repeat left padding-box;
}
.btnEdit {
    display: inline-block; width: 32px; height: 22px; background: url("../Images/editbtn.svg") no-repeat left padding-box; background-position: 0px;
}
.btnEdit:hover {
    background-position: -32px
}
.semitrans {
    opacity:0.5; 
}
.IconCopy {
    display: inline-block; width: 22px; height: 22px; margin-left: -2px; background: url("../Images/copyIcon.svg") no-repeat left padding-box;
}
.btnCopy {
    display: inline-block; width: 32px; height: 21px; margin: -5px; background: url("../Images/copy.svg") no-repeat left padding-box; background-position: -2px;
}

.btnCopy:hover {
    background-position: -35px
}
.IconDelete {
    display: inline-block; width: 22px; height: 22px; background: url("../Images/deleteIcon.svg") no-repeat left padding-box;
}
.btnDelete {
    display: inline-block; width: 20px; height: 20px; margin: 0px 0 -2px 0; padding:0; background: url("../Images/btnDelete.svg") no-repeat left padding-box;
}
.btnDelete:hover {
    background-position: -22px;
}
.btnPDF {
    width:27px; height:23px; background: url("../Images/pdf.svg") no-repeat left padding-box;
}
.qbox{
    border:0.6pt solid #aab; background:none; margin:0.6pt; width:26px;
}
.qbox:focus{
    border-color:#889; background-color:#f4fff0; outline:none;
}
#sortable th {
    padding: 3px 0 3px 0;
}

/*=================ItemEdit  styles=======================*/
#itemEdit	{
    display:none; position:absolute; background-color:#ffffff; left:50%; margin-left:-575px; top:100px; padding:0; border:1px solid #808099; z-index:100;
}
.formbar {
    margin:0px 0px -2px 0px; height: 21px; padding-left: 0px; padding-top: 2px; padding-bottom: 2px; padding-right:0px; border:0pt; border-bottom: 0.6pt solid #808099; background-color: #a0e080; cursor: default;
}
.formbar focus {
    cursor: default;
}
/*input boxes in item edit table column 1*/
#items input[type="text"] {
    width: 90px;
}
/*input boxes in item edit table column 2*/
#items1 input[type="text"] {
    width: 90px;
}
/*input boxes in item edit table column 3*/
#items2 input[type="text"] {
    width: 90px;
}

#glassdetails input[type="text"] {
    width: 65px;
}
#PrevButton, #NextButton{
    padding:2px 3px 1px 3px;
}
#Prevbtn, #Nextbtn{
    padding:2px 2px 1px 2px; height:17.5pt;
}
.chkbox { 
    vertical-align: middle; margin-top: 1px !important;
}
li.sidehung {
    background-image: url("../Images/sidehung.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.tophung {
    background-image: url("../Images/tophung.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.tiltturn {
    background-image: url("../Images/tiltturn.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.topswing {
    background-image: url("../Images/topswing.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.slidsash {
    background-image: url("../Images/slidsash.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.fixed {
    background-image: url("../Images/fixed.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.entrance {
    background-image: url("../Images/entrance.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.tiltslide {
    background-image: url("../Images/tiltslide.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.liftslide {
    background-image: url("../Images/liftslide.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.french {
    background-image: url("../Images/french.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.folding {
    background-image: url("../Images/folding.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.double {
    background-image: url("../Images/double.gif"); background-repeat:no-repeat; padding-left:22px;
}

li.triple {
    background-image: url("../Images/triple.gif"); background-repeat:no-repeat; padding-left:22px;
}

li.solid {
    background-image: url("../Images/solid.gif"); background-repeat:no-repeat; padding-left:22px;
}

li.float {
    background-image: url("../Images/float.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.tuff {
    background-image: url("../Images/tuff.svg"); background-repeat:no-repeat; padding-left:22px;
}

li.lam {
    background-image: url("../Images/lam.svg"); background-repeat:no-repeat; padding-left:22px;
}

.point {cursor:default;}

li.F1{
    background-image: url("../Images/F1.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F2{
    background-image: url("../Images/F2.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F3{
    background-image: url("../Images/F3.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F4{
    background-image: url("../Images/F4.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F5{
    background-image: url("../Images/F5.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F6{
    background-image: url("../Images/F6.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F7{
    background-image: url("../Images/F7.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F7a{
    background-image: url("../Images/F7a.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F8{
    background-image: url("../Images/F8.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F9{
    background-image: url("../Images/F9.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F10{
    background-image: url("../Images/F10.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F11{
    background-image: url("../Images/F11.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F12{
    background-image: url("../Images/F12.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F13{
    background-image: url("../Images/F13.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F14{
    background-image: url("../Images/F14.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F15{
    background-image: url("../Images/F15.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.F16{
    background-image: url("../Images/F16.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:400px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.FS{
    background-image: url("../Images/FSpecial.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:400px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP1{
    background-image: url("../Images/IP1.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP2{
    background-image: url("../Images/IP2.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP3{
    background-image: url("../Images/IP3.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP4{
    background-image: url("../Images/IP4.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:0px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP5{
    background-image: url("../Images/IP5.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP6{
    background-image: url("../Images/IP6.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP7{
    background-image: url("../Images/IP7.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP8{
    background-image: url("../Images/IP8.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:100px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP9{
    background-image: url("../Images/IP9.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP10{
    background-image: url("../Images/IP10.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP11{
    background-image: url("../Images/IP11.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP12{
    background-image: url("../Images/IP12.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:200px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP13{
    background-image: url("../Images/IP13.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 40px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP14{
    background-image: url("../Images/IP14.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 100px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP15{
    background-image: url("../Images/IP15.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 160px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IP16{
    background-image: url("../Images/IP16.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}
li.IPS{
    background-image: url("../Images/IPSpecial.svg"); background-repeat: no-repeat; background-position-x:center; text-align:center;
    position:absolute; top:300px; left: 220px; width:60px; height:100px;
    padding: 80px 0px 3px 2px;
    box-sizing: border-box;
}

li.atlantic {
    background-image: url("../Images/atlantic.jpg"); background-repeat: no-repeat; 
    position:absolute; top:0px; left: 40px; width:76px; height:102px;
    padding: 83px 0px 3px 2px;
    box-sizing: border-box;
}
li.satin {
    background-image: url("../Images/satin.jpg"); background-repeat: no-repeat;
    position: absolute; top:0px; left: 116px; width:76px; height:102px;
    padding: 83px 0px 3px 2px;
    box-sizing: border-box;}
li.chinchilla {
    background-image: url("../Images/chinchilla.jpg"); background-repeat: no-repeat;
    position:absolute; top:102px; left: 40px; width:76px; height:102px;
    padding: 83px 0px 3px 2px;
    box-sizing: border-box;}
li.kura {
    background-image: url("../Images/kura.jpg"); background-repeat: no-repeat;
    position: absolute; top:102px; left: 116px; width:76px; height:102px;
    padding: 83px 0px 3px 2px;
    box-sizing: border-box;
}
li.crepi {
    background-image: url("../Images/crepi.jpg"); background-repeat: no-repeat;
    position:absolute; top:204px; left: 40px; width:76px; height:102px;
    padding: 83px 0px 3px 2px;
    box-sizing: border-box;
}
li.waterdrop {
    background-image: url("../Images/waterdrop.jpg"); background-repeat: no-repeat;
    position: absolute; top:204px; left: 116px; width:76px; height:102px;
    padding: 83px 0px 3px 2px;
    box-sizing: border-box;
}
#handleTPane, #handleFPane {
    min-width:29px;
}
#handleTPane li, #handleFPane li  {
    position:absolute; width:70px; box-sizing: border-box; text-align:center; font-size:9pt; height:162px; background-repeat: no-repeat; background-position-x:center; padding: 132px 0px 3px 2px;
}

._7016 {background-color:#383e42; color:white}
._7012 {background-color:#5b6265; color:white}
._9016 {background-color:#fffaef; color:black}
._7033 {background-color:#8a8b77; color:white}
._9010 {background-color:#fef6e7; color:black}
._7021 {background-color:#2a3230; color:white}
._7030 {background-color:#959282; color:white}
._7015 {background-color:#4f5358; color:white}
._9005 {background-color:#0e0e10; color:white}

._9004 {background-color:#2b2b2c; color:white}
._6021 {background-color:#8c9977; color:white}
._7032 {background-color:#b6b198; color:white}
._7035 {background-color:#c7cabf; color:white}
._7042 {background-color:#8e9290; color:white}
._9007 {background-color:#898780; color:white}
._1011 {background-color:#af7e4f; color:white}
._7004 {background-color:#9c9996; color:white}
._7022 {background-color:#4c4a44; color:white}


._white {background-image: url("../Images/s_white.jpg"); background-repeat: no-repeat; color:black;}
._grey  {background-image: url("../Images/s_grey.jpg");  background-repeat: no-repeat; color:black;}
._clear {background-image: url("../Images/s_clear.jpg"); background-repeat: no-repeat; color:black;}
._light {background-image: url("../Images/s_light.jpg"); background-repeat: no-repeat; color:black;}
._mid   {background-image: url("../Images/s_mid.jpg");   background-repeat: no-repeat; color:black;}
._dark  {background-image: url("../Images/s_dark.jpg");  background-repeat: no-repeat; color:black;}

.exclude{color:#f33}
.exclude:before {content: "["}
.exclude:after {content: "]"}

.tolSm {color:red; border: 1pt solid red; margin:0.6px; padding:2px;}

.sillrow{}

svg {
  width: 100%; height: 100%;
}

.svg-content { 
	display: inline-block; 	position: absolute; top: 0; left: 0;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}