.kimia_cal_wrap {
	font-family: var(--mainfont);
	max-width: 500px;
	margin: 30px auto;
}
.kimia_cal_wrap h2 {
  text-align: center;
  margin-bottom: 20px;
}
.kimia_cal_wrap input, .kimia_cal_wrap button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  box-sizing: border-box;
  font-family: var(--mainfont);
}
.kimia_cal_wrap button {
  background: black;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 500;
}
.kimia_cal_wrap button:hover {
  background: hotpink;
}
.hide{
	display: none
}

.kimia_cal_wrap .result {
  background: #f1f5f9;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  font-size: 13px;
}
.kimia_cal_wrap .card {
  background: #f9fafb;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  font-size: 13px;
}
.kimia_cal_wrap .label {
  color: #6b7280;
  font-size: 12px;
}
.kimia_cal_wrap .value {
  font-weight: bold;
  margin-bottom: 8px;
}
.jewel_calculate_wrap {
    border: 1px solid #eff1f5;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 12px;
}

.jcalculate_item {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-bottom: 1px solid #eff1f5;
    padding-bottom: 10px;
    margin-bottom: 9px;
    align-items: center;
    font-size: 13px;
    flex-wrap: nowrap;
}
.jcalculate_item:last-child{
	border: none;
	margin: 0
}
.jcalculate_item b{
	font-weight: normal
}
.jcalculate_item h6{
    font-size: 15px;
    line-height: 21px;
    margin: 0;
    display: block;
}
.jcalculate_item p{
    font-size: 11px;
    margin: 5px 0 0 0;
    color: #555;
}
.jcalculate_item .jc_price b{
    font-size: 11px;
    font-weight: normal;
    margin-right: 1px;
    color: #444;
}
span.jewel_dtprice_btn {
    cursor: pointer;
    opacity: 0.5;
    border-right: 1px solid blue;
    padding: 0 10px;
    transition: 0.3s all
}
span.jewel_dtprice_btn:hover{
    opacity: 1;
}

.kimia_cal_wrap .gold_price {
	background: gold;
	border-radius: 10px;
	padding: 10px 15px;
	margin: 10px 0;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.kimia_cal_wrap .card_item {
	font-size: 12px;
	margin: 5px 0 0 0;
	opacity: 0.7;
	display: block;
}

.kimia_cal_wrap .jc_price {
	font-size: 16px;
	font-weight: 600;
	color: #ff7db7;
}

.kimia_cal_wrap .jc_dt {
	display: flex;
	flex-direction: column;
}

.kimia_cal_wrap #reader {
	width: 100%;
	max-width: 420px;
	margin: 10px auto;
	border: 2px solid #ddd;
	border-radius: 10px;
}
.num-keyboard{
  display:none; 
  grid-template-columns:repeat(3,1fr);
  gap: 5px;
  margin-top:15px;
  	direction: ltr;
}
.num-keyboard button{
  	padding: 15px 10px;
	font-size: 24px;
  border-radius:14px;
  border:none;
  background:#e5e7eb;
  font-weight:bold;
  color: #000;
  margin: 0;
}

.num-keyboard button:active{
  background:#c7d2fe;
}

.num-keyboard .backspace{
  background:#f4433694;
  color:#fff;
}
.num-keyboard .enter{
  background:#22c55e;
  color:#fff;
}

.num-keyboard .enter:active{
  background:#16a34a;
}

.jc_price.final_price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0;
}

@media only screen and (max-width: 768px) {
	.kimia_cal_wrap input, .kimia_cal_wrap button {
		font-size: 12px;
	}
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgb(19 19 19 / 30%);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin: 10px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-spinner {
  width:16px;
  height:16px;
  margin-left:8px;
  border:2px solid #fff;
  border-top:2px solid transparent;
  border-radius:50%;
  display:inline-block;
  animation:spin .6s linear infinite;
  vertical-align:middle;
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

button.loading {
  opacity:.8;
  cursor:not-allowed;
}
#selected_products_list, #kimia_order_form{
	width: 100%;
	padding: 12px;
	margin-top: 25px;
	border-radius: 8px;
	border: 1px solid #ddd;
	display: none
}
#selected_products_list h3{
	line-height: 30px;
	font-size: 13px;
	margin-bottom: 15px;
	background-color: bisque;
	text-align: center;
	border-radius: inherit;
}
#selected_products_list table{
	font-size: 12px;
	line-height: 27px;
}
#selected_products_list thead tr{
	background-color: aliceblue;
}
#selected_products_list thead th{
	padding-right: 5px;
}
#selected_products_list td{
	padding: 6px 5px;
}
#selected_products_list tfoot{
	font-weight: 500;
}
#selected_products_list tfoot tr{
	background-color: ghostwhite;
}
#selected_products_list tfoot td{}

#selected_products_list td button{
	background-color: #ffcfcf;
	margin: 2px;
	padding: 2px 10px;
	width: auto;
	font-size: 12px;
	font-weight: normal;
}
p#user_result {
	background-color: #adff2f42;
	margin-top: 5px;
	padding: 10px;
	border-radius: 8px;
	display: none;
}