/* 03 - Ideal Costing

item cost name = #9e3636  #f4e4e4(input)
cost per item  - #f1715c  #fef2f0

sales-per  bg = #3c803c  input = #e5f6e5

*/
.ideal-costing input[type=checkbox] {margin:0}
.ideal-costing .title td {/* height: 65px; */}
.ideal-costing .title h2 {
  height: 50px;/* font-size:13px; */padding: 8px 0;vertical-align: middle;display: inline-block;
}
.ideal-costing .title h2.per-sign{
  /* background-color: #3c803c; */
  background-image: url(images/sales-per.png);
  background-repeat: no-repeat;
  background-position: center;
  color:#3c803c;
}
.ideal-costing .exp-wrap .exp-table thead td:nth-child(1) h2 {/* background:#9e3636 */}
.ideal-costing .exp-wrap .exp-table thead td:nth-child(3) h2 {/* background:#f1715c */}
.ideal-costing .sp-table thead td h2 {background: #d6ffe4;border-color: #d8f3e1;color: #329c56;}

.ideal-costing .w-input.pos{background-color:#E5F6E5}
.ideal-costing .w-input.neg{background-color:#E2C4C4}

.ideal-costing .add-cost {
  position: relative;padding-left: 30px;width: 140px;
}
.ideal-costing .add-cost::before{
  position: absolute; content: '';  display: inline-block;  
  height:20px;  width:20px;
  top: 6px;  left: 6px;
  background: url(images/plus-n.png);
}
.ideal-costing .add-prod {
  position: relative;padding-left: 40px;/* padding-right: 8px; *//* width: 140px; */
}
.ideal-costing .add-prod::before{
  height:20px;
  width:20px;
  background: url(images/plus-n.png);
  content: '';
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 5px;
}

.ideal-costing .scroll-left{
  position: relative;padding-left: 25px;padding-right: 10px;width: 150px;float: left;
}
.ideal-costing .scroll-right{
  position: relative;padding-right: 30px;padding-left: 10px;width: 150px;
}
.ideal-costing .scroll-left::before{
  height: 13px;
  width: 8px;
  background: url(images/scroll-left.png) no-repeat;
  content: '';
  display: inline-block;
  position: absolute;
  top: 11px;
  left: 8px;
}
.ideal-costing .scroll-right::after{
  height: 13px;
  width: 8px;
  background: url(images/scroll-right.png) no-repeat;
  content: '';
  display: inline-block;
  position: absolute;
  top: 11px;
  right: 8px;
}

.ideal-costing .reset {
  position: relative;
  padding-left: 10px;
  padding-right: 40px;
}
.ideal-costing .reset::after{
  content: '';
  display: inline-block;
  position: absolute;
  height:22px;
  width:22px;
  top: 6px;
  right: 7px;
  background: url(images/reset.png);
}
.ideal-costing .import {
  position: relative;
  padding: 6px 10px;
  padding-right: 40px;
  margin-right: 30px;
  background: none;
  border: 2px solid #8cd790;
  color: #8cd790;
}
.ideal-costing .import::after{
  content: '';
  display: inline-block;
  position: absolute;
  height:24px;
  width:18px;
  top: 2px;
  right: 12px;
  background: url(images/import.png);
}
.ideal-costing .download{
  position: relative;
  padding: 6px 10px;
  padding-right: 40px;
  background: none;
  border: 2px solid #e7975d;
  color: #e7975d;
}
.ideal-costing .download::after{
  content: '';
  display: inline-block;
  position: absolute;
  height:20px;
  width:24px;
  top: 4px;
  right: 8px;
  background: url(images/download.png);
}



.ideal-costing .exp-wrap::after{content:'';clear:both}
.ideal-costing .roller {width: 6000%; position: relative;white-space: nowrap;}

.ideal-costing .main-table tr td:nth-child(1){width: 260px;}
.ideal-costing .main-table tr td:nth-child(2){width: 200px;}
.ideal-costing .main-table tr td:nth-child(3){width: 780px;text-align:right;}
.ideal-costing .main-table tr td:nth-child(4){width:  230px}

.ideal-costing .main-table {margin:5px 0}
.ideal-costing .name-table {width: 460px;float: left;}
.ideal-costing .exp-wrap  {width: 500px;float: left;overflow: hidden;position: relative;margin:0;}
.ideal-costing .exp-table {width: 250px;float:left;}
.ideal-costing .sp-table   {width: 280px;float:left;}
.ideal-costing .btn-table  {margin: 30px 0 10px 0;}

.ideal-costing .name-table tr td:nth-child(1){width: 260px;}
.ideal-costing .name-table tr td:nth-child(2){width:   50px}
.ideal-costing .name-table tr td:nth-child(2){width: 100px;}
.ideal-costing .name-table tr td:nth-child(3){width: 100px;}

.ideal-costing .name-table td.p-name .del{
  float:right;
  margin-top:1px;
  cursor:pointer
}

.ideal-costing .exp-table tr td:nth-child(1){width: 130px;}
.ideal-costing .exp-table tr td:nth-child(2){width: 20px;}
.ideal-costing .exp-table tr td:nth-child(3){width: 100px;}

.ideal-costing .btn-table tr td:nth-child(1){width: 460px;}
.ideal-costing .btn-table tr td:nth-child(2){width: 500px;text-align:right;}
.ideal-costing .btn-table tr td:nth-child(3){width: 280px;text-align:right;}

.ideal-costing .sp-table tr td:nth-child(1){width: 130px;}
.ideal-costing .sp-table tr td:nth-child(2){width: 50px;}
.ideal-costing .sp-table tr td:nth-child(3){width: 100px;}

.ideal-costing .exp-table .prod-exp{/* background:#f4e4e4 */}
.ideal-costing .exp-table .item-exp{/* background:#fef2f0; *//* border-color:#fef2f0; */}

.ideal-costing .btn-table button{text-transform:initial}

.ideal-costing .fig-wrap .col{
  /* margin-top:50px; */
  border: 2px solid #c4d3e5;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
  text-align: center;
  /* padding: 0 0 30px 0; */
  height: 400px;
  background: #fff;
}
.ideal-costing .fig-wrap .col#chartWrap{width:850px}
.ideal-costing .fig-wrap .col#gMarginWrap{width:360px;padding-left: 28px;padding-right: 28px;}
.ideal-costing .fig-wrap .col h2{
  padding:10px 0;
  color: #000;
}
#gmChart .inner{
  transform: rotate(-90deg);
  transition: stroke-dasharray 1s;
  transform-origin: center;
}
#gmChart g .g-margin{
    font-size: 0.6em;
    line-height: 1;
    text-anchor: middle;
    font-weight:bold;
    transform: translateY(0.25em);
}