.sale-costing {
  border: 1px solid #cbcbcb;
}

.sale-costing-head{
  border-bottom: 1px solid #cbcbcb;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 20px;
  padding-top: 3px;
}
.sale-costing-head label:first-child{;
  float: left;
  font-size: 18px;
  font-weight: bold;
}
.sale-costing-head button {
  float: right;
  height: 32px;
}

.sale-costing-form {
  font-size: 12px;
}

.sale-costing-form > label {
  padding-top: 15px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 20px;
  width: 100%;
  border-bottom: 1px solid #cbcbcb;
}
.sale-costing-form > div {
  padding-left: 30px;
  padding-bottom: 20px;
}
.sale-costing-re > div {
  padding-top: 10px;
}

.tab_layer {
  width: 100%;
}
.tab_layer tbody tr {
  border-bottom:1px solid #c5c5c5;
  border-right: 1px solid #c5c5c5;
  height: 32px;
}
.tab_layer tbody tr td {
  border-left:1px solid #c5c5c5;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
}
.tab_layer_trh {
  background-color: #dddddd;
}
.tab_layer_trh td {
  font-weight: 600;
}

.tab_layer tr:nth-of-type(even){background: #f5f2e7;}
.tab_layer tr:nth-of-type(odd){background: #fbf9f1;}

.sale-costing-log-tables {
  overflow:hidden;
  max-height:0;
  transition:max-height 1s;
}
:checked ~ .sale-costing-log-tables {
  max-height:1000px;
}
.sale-costing-log {
  width: 100%;
}
.sale-costing-log label{
  padding-left: 20px;
  font-size: 14px;
}
.sale-costing-log label span{
  padding-left: 5px;
}
.sale-costing-log > label{
  padding-left: 80px;
  font-size: 14px;
}

.sale-costing-log input[type="checkbox"] {
  position:absolute;
  clip:rect(0 0 0 0);
}
:checked ~ .check-in {
  display:none;
}
:checked ~ .check-out {
  display:inline-block;
}
.check-out {
  display:none;
}
.check-in,.check-out {
  color:#2d9bf9;
  user-select:none;
  font-weight: 600;
  cursor:pointer;
}


.sale-costing > input:checked ~ .sale-costing-form {
  display: none;
}
.sale-costing > input[type="checkbox"] {
  position:absolute;
  clip:rect(0 0 0 0);
}
.sale-costing > input:checked ~ div > .sale-costing-off {
  display:none;
}

.sale-costing > input:checked ~ div > .sale-costing-no {
  display:inline-block;
}
.sale-costing-no {
  display:none;
}

.sale-costing-off, .sale-costing-no {
  height: 32px;
  float: right;
  font-size: 14px;
  line-height: 24px;
}