.btn-custom {
  padding: 11px 34px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background-color: #E50000;
  border-color: #E50000;
}

.btn-custom:hover {
  color: #fff;
  background-color: #E50000;
  border-color: #E50000;
}

.btn-custom:focus, .btn-custom.focus {
  color: #fff;
  background-color: #E50000;
  border-color: #E50000;
  box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
}

.btn-custom:disabled {
  color: #fff;
  background-color:#C5C5C5;
  border-color: #fff;
  cursor: not-allowed;
}

.btn-outline-custom {
  padding: 11px 34px;
  font-size: 12px;
  font-weight: 700;
  color: #191717;
  border-color: #858796;
}

.btn-outline-custom:hover {
  color: #191717;
  background-color: #fff;
  border-color: #858796;
}

.btn-outline-custom:focus, .btn-outline-custom.focus {
  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
}

/* detail paket */
.label-gram, input {
  position: relative;
      display: block;
      box-sizing: border-box;
  }
  
  .label-gram::after {
      content: 'g';
      position: absolute;
      top: 10px;
      left: 102px;
      font-size: 16px;
      display: block;
      padding-left: 24px;
      color: #191717;
  }
  
  .label-gram-detail, input {
  position: relative;
      display: block;
      box-sizing: border-box;
  }
  
  .label-gram-detail::after {
      content: 'g';
      position: absolute;
      top: 7px;
      left: 77px;
      font-size: 16px;
      display: block;
      padding-left: 24px;
      color: #191717;
  }
  
  .label-cm-detail, input {
  position: relative;
      display: block;
      box-sizing: border-box;
  }
  
  .label-cm-detail::after {
      content: 'cm';
      position: absolute;
      top: 10px;
      left: 110px;
      font-size: 16px;
      display: block;
      padding-left: 24px;
      color: #191717;
  }
  
  .keterangan-commodity {
    color: #191717;
    background-color: #efefef;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    border-radius: 0.5rem;
    font-size: small;
  }
  
  .logo-kurir {
    width: 22%;
    color: #191717;
  }
  
  .durasi-kurir {
    width: 12%;
    font-size: 14px;
    color: #191717;
    font-weight: 500;
  }
  
  .estimasi-kurir {
    width: 18%;
    font-size: 14px;
    color: #191717;
    font-weight: 500;
  }
  
  .harga-kurir {
    width: 24%;
    font-size: 14px;
    color: #191717;
    font-weight: 500;
  }
  
  .harga-normal {
    font-size: 14px;
    color: #191717;
    font-weight: 700;
  }
  
  .harga-diskon {
    font-size: 12px;
    color: #191717;
    font-weight: 500;
    text-decoration-line: line-through;
  }
  
  .komisi-kurir {
    width: 16%;
    font-weight: 700;
    font-size: 14px;
    color: #21BA08;
  }

  /* Create a custom radio button */
.checkmark-pengiriman {
  position: absolute;
  top: 4;
  left: 16px;
  height: 21px;
  width: 21px;
  background-color: #fff;
  border: #e3e6f0 solid 1px;
  border-radius: 50%;
  /* padding: ; */
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark-pengiriman {
  background-color: #e5000020;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark-pengiriman {
  background-color: #e50000;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-pengiriman:after {
  content: "";
  position: absolute;
  display: none;

}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark-pengiriman:after {
  display: block;

}

/* Style the indicator (dot/circle) */
.container .checkmark-pengiriman:after {
  top: 5px;
  left: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: white;

}

.jenis-pengiriman {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  
}

.jenis-pengiriman label {
  display: inline-block;
  min-width: 25%;
  flex: 1 1 25%;
  color: #191717;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
  transition: all 0.5s;
  background-color: #fff;
  border: #e3e6f0 solid 1px;
  margin:6px;
  border-radius: 5px;
  width: 176px;
  height: 106px;
}

.jenis-pengiriman label:hover {
  color: #e50000;
  
}

.jenis-pengiriman label:checked {
  background: #e5000010;
  color: #e50000;
  border: #e50000 solid 1px !important;
  border-radius: 5px;
  font-weight: 700;
}

.label-pengiriman {
  text-align: left !important;
  padding-top: 12px;
  padding-left: 48px;
}

.desc-pengiriman {
  font-size:12px;
  font-weight: 500 !important;
  color: #191717 !important;
  opacity: 80%;
}

.detail-kurir {
  text-align: right;
  font-weight: 700;
}

.detail-biaya {
  text-align: right;
  font-weight: 700;
}

.harga-paket-description {
  font-weight: 500;
  font-size: 0.8rem;
}

.btn-icon {
  margin-right: 15px;
}

.btn-icon:hover {
  cursor: pointer;
}

.table-regular-color {
  color: black;
  margin-bottom: 0rem;
}