.toolItems{background-color: #eeeeee; font-size: 18px; height:100px;  cursor: pointer; border:1px solid #d9d9d9; transition: .5s; padding-top: 0px;
-webkit-box-shadow: inset 0px 0px 34px -5px rgba(0,0,0,0.75); -moz-box-shadow: inset 0px 0px 34px -5px rgba(0,0,0,0.75); box-shadow: inset 0px 0px 34px -5px rgba(0,0,0,0.75);}

.toolItems:hover{background: #c8981e; } 
.toolItems:hover a{ color:#fff;} 
.h-0{height: auto !important; padding:10px;}
.toolActiveMenu{background: #c8981e; }
.toolActiveMenu a{color:#fff;}
.btnArea{width:100%; height: auto; background: #fff; border:1px solid #d9d9d9;  display: none;}
.areabtn1{display: block;}
.productsArea{overflow-y: scroll; overflow-x: hidden; padding:10px;  width:100%; height: 370px; background: #fff; -webkit-box-shadow: 10px 10px 40px -13px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 40px -13px rgba(0,0,0,0.75); box-shadow: 10px 10px 40px -13px rgba(0,0,0,0.75);}
.tool_items{width:100%; height:100px;  cursor: pointer;    position: relative;  }
.tool_items img{width:80px; height: 80px; }
.tool_items_hoverArea,{width:100%; height: 80px;  position: absolute; z-index: 100; background:rgba(200, 152, 30, .3); visibility: hidden;  }
.tool_items_hoverArea p{font-size: 22px; color:#fff; margin-top: 30px;}
.tool_items p{ font-size: 11px;}
.tool_items:hover .tool_items_hoverArea{visibility: visible;  }
.tool_items:hover p{color:rgba(200, 152, 30, 1);}
.tool_items:hover .tool_items_hoverArea p{color:#fff;  }
.parts_items{width:100%;  overflow-y: hidden;     position: relative;  } 
.parts_items p{ font-size: 11px;}
.partsArea{padding-top: 10px; cursor: pointer; }
.partsArea:hover{background: rgba(255, 255, 255, .5)  }
.partsArea:hover p{color:rgba(200, 152, 30, 1);}
.parts_items:hover .parts_items_hoverArea p{color:#fff;  }
.partActive{background: rgba(255, 255, 255, .5) !important}
.partActive p{color:rgba(200, 152, 30, 1);}
.productsPartsArea{overflow-y: scroll; height: 370px}
.productsArea::-webkit-scrollbar, .productsPartsArea::-webkit-scrollbar{background: #d9d9d9}
.productsArea::-webkit-scrollbar-thumb, .productsPartsArea::-webkit-scrollbar-thumb { background: #999999; }

.productsArea::-moz-scrollbar, .productsPartsArea::-moz-scrollbar{background: #d9d9d9}
.productsArea::-moz-scrollbar-thumb, .productsPartsArea::-moz-scrollbar-thumb { background: #999999; }

.welcomeMsgArea{cursor:pointer;  display: inline-block;  padding:10px;  width:100%; height: 370px; -webkit-box-shadow: 10px 10px 40px -13px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 40px -13px rgba(0,0,0,0.75); box-shadow: 10px 10px 40px -13px rgba(0,0,0,0.75);}
.Welcomearea1{display: inline-block;}
.canvasArea{width:100%; height:400px;   text-align: center; position: relative;}
.canvasArea img{width:300px; height: 400px;}	
.tool_calculation{width: 100; background: #fff;  border:1px solid #d9d9d9; height: 50px; padding-right:5px; position: relative;}
.tool_calculation h5{color:#006699;}
.formTextTool{color:#737373;}
.ToolItemView{position: absolute; height: 120px; width:40px;  right:10px; bottom: 10px;} 
.ToolItemView img{width:40px; height: 55px; margin-bottom: 10px; cursor: pointer;}
.ToolItemView img:hover{border:2px solid rgba(200, 152, 30, 1);}
.itemPortionActive{border:2px solid rgba(200, 152, 30, 1);}
.productsArea, .toolBrandOption, .toolMainModel{display: none;}
.toolMainModel1{display: inline-block;}
.insideBtnArea{height: auto; background: #e6e6e6; width:100%; border:2px solid #ddd;}
.ToolTabsControlBtn a{font-size: 16px;}
 
.mb-10{margin-bottom: 10px}

@media (max-width: 700px){
     .tool_items{height: 50px}
     .tool_items img{height: 50px;}
}

.toolContainer{background: rgba(242, 242, 242, .9); margin-top: 20px; padding:10px; margin-bottom: 80px; border-top:2px solid #bb8f36; -webkit-box-shadow: 0px 1px 5px 0px rgba(153,153,153,1); -moz-box-shadow: 0px 1px 5px 0px rgba(153,153,153,1); box-shadow: 0px 1px 5px 0px rgba(153,153,153,1);}
canvas{border:1px solid #000;}
.modalArea{position: relative !important; width: 100%; height: 400px; background:#f2f2f2;  -webkit-box-shadow: 1px 1px 12px 0px rgba(217,217,217,1); -moz-box-shadow: 1px 1px 12px 0px rgba(217,217,217,1);
box-shadow: 1px 1px 12px 0px rgba(217,217,217,1); }
.modalArea img{position: absolute; left: 0px; width: 100%}
.tabsArea{-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); height: 400px; padding:10px; overflow-y: scroll; }
.optionTabs{padding:10px; text-align: center; border:1px solid #f2f2f2; width: 100%; cursor: pointer; font-size: 16px; margin-bottom: 10px; }
.optionTabs:hover{background: rgba(242, 242, 242, .5); }
 
.styleInfo{-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); padding: 10px; height: 400px}
.styleInfo img{display: inline-block; width: 100%; margin-top: 20px; }
.preloader{
  position:absolute;
  top:10%;
  left:0;
  right:0;
  bottom:0;
  margin:auto; 
  width: 80px;
  height: 40px;
  border-radius: 20px;
  background:rgba(0, 0, 0, .2);
  visibility:hidden;
  opacity:0;

  transition:all 0.5s ease;
  z-index:99999999999999;

}
.preloader_inner {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 40px;
  padding: 10px 5px 0px 5px;
  text-align: center;
  font-size: 22px;
  font-family: monospace;
  font-weight: 300;
  color: #fff; 
}

.show{
  visibility:visible !important;
  opacity:1 !important;
  transition:all 0.5s ease;
}

.overlay {
    background-color: rgba(1, 1, 1, .1);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999999;
    display: none;
}