/******************************/
/**DASHBOARD**/
/******************************/
.grid-5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;  
}
.grid-2{
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 10px; 
}
.grids{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;   
}
.widget-border{
  padding: calc(0.40rem * 6);
  border: 0;
  border-radius: .5rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 20, .08), 0 1px 2px rgba(0, 0, 20, .08);
}
.widget-icon{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.8rem;
}
.wb1{background-color: #ff9800;}
.wb2{background-color: #047edf;}
.wb3{background-color: #04aa6d;}
.wb4{background-color: #f44336;}
.wb5{background-color: #8f04aa;}
.widget-text h4{
  font-size: 2.6rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #919191;
}
.widget-text span{
  font-size: 2rem;
  font-weight: 700;
}
.dashCards{
  border: 1px solid #000;
  padding: 15px;
}
.dashCards h4{font-weight: 700}
.justfy{
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.dashboard-table thead th{border: none}
.dashboard-table td,
.dashboard-table tbody tr:nth-of-type(odd){
  background: none;
  border: none;
  cursor: pointer;
}
.dashboard-table tbody tr:hover{
  background-color: rgba(0, 0, 0, .075);
}
.dashboard-table th{font-size: 1.6rem;}
.dashboard-table td{font-size: 1.3rem}
.bg-role{
  font-size:1.3rem;
  font-weight: 700;
  text-transform: uppercase;
}
#user_table thead th,
#account_table thead th,
#requests_table thead th,
#material_table thead th,
#add_ons_table thead th{
  background-color: #047edf;
  color: #fff;
}
#pos_table thead th{
  background-color: #8804df;
  color: #fff;  
}
.toggleSwitch span span {display: none;}
.toggleSwitch {
  display: inline-block;
  height: 18px;
  position: relative;
  overflow: visible;
  padding: 0;
  margin-left: 50px;
  cursor: pointer;
  width: 40px
}
.toggleSwitch * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.toggleSwitch label,
.toggleSwitch > span {
  line-height: 20px;
  height: 20px;
  vertical-align: middle;
}
.toggleSwitch input:focus ~ a,
.toggleSwitch input:focus + label {outline: none;}
.toggleSwitch label {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
}
.toggleSwitch input {
  position: absolute;
  opacity: 0;
  z-index: 5;
}
.toggleSwitch > span {
  position: absolute;
  left: -50px;
  width: 100%;
  margin: 0;
  padding-right: 50px;
  text-align: left;
  white-space: nowrap;
}
.toggleSwitch > span span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
  width: 50%;
  margin-left: 50px;
  text-align: left;
  font-size: 0.9em;
  width: 100%;
  left: 15%;
  top: -1px;
  opacity: 0;
}
.toggleSwitch a {
  position: absolute;
  right: 50%;
  z-index: 4;
  display: block;
  height: 100%;
  padding: 0;
  left: 2px;
  top: -1px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #CCC;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.toggleSwitch > span span:first-of-type {
  color: #ccc;
  opacity: 1;
  left: 45%;
}
.toggleSwitch > span:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50px;
  top: -2px;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 30px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.toggleSwitch input:checked ~ a {
  border-color: #fff;
  left: 100%;
  margin-left: -8px;
  top: -1px;
}
.toggleSwitch input:checked ~ span:before {
  border-color: #0097D1;
  box-shadow: inset 0 0 0 30px #0097D1;
}
.toggleSwitch input:checked ~ span span:first-of-type {opacity: 0;}
.toggleSwitch input:checked ~ span span:last-of-type {
  opacity: 1;
  color: #fff;
}
.learn-more{
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none!important;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
}
button.learn-more {
 width: 12rem;
 height: auto;
}
button.learn-more .circle,
button.learn-more .circle-2 {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 display: block;
 margin: 0;
 width: 3rem;
 height: 3rem;
 background: #282936;
 border-radius: 1.625rem;
}
button.learn-more .circle .icon,
button.learn-more .circle-2 .icon{
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #fff;
}
button.learn-more .circle .icon.arrow,
button.learn-more .circle-2 .icon.arrow {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 left: 0.625rem;
 width: 1.125rem;
 height: 0.125rem;
 background: none;
}
button.learn-more .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(230deg);
}
button.learn-more .circle-2 .icon.arrow::before{
  position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(45deg); 
}
button.learn-more .button-text {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.75rem 0;
 margin: 0 0 0 1.85rem;
 color: #282936;
 font-weight: 700;
 font-size: 1.2rem;
 line-height: 1.3;
 text-align: center;
 text-transform: uppercase;
}
.learn-more:hover .circle,
.learn-more:hover .circle-2 {width: 100%;}
.learn-more:hover .circle .icon.arrow,
.learn-more:hover .circle-2 .icon.arrow {transform: translate(1rem, 0);}
.learn-more:hover .button-text {color: #fff;}
.widget-month-sale{
  padding-top: 3rem;
  display: flex;
  justify-content: space-between;
  gap: 5rem;
}
.widgets-this-month h3{
  font-weight: 700;
  text-align: center;
  font-size: 3.5rem;
}
.sales-widgets{
  color: rgb(15, 54, 89);
  box-shadow: rgba(238, 238, 238, 0.5) 0px 4px 20px 0px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
  width: 100%;
}
.bg-pk{background-color: rgb(255, 226, 229);}
.bg-yl{background-color: rgb(255, 244, 222);}
.bg-gn{background-color: rgb(220, 252, 231);}
.sales-widgets-i{
  display: flex;
  flex-direction: column;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 16px;
}
.bg-pk .sales-widgets-i{background-color: rgb(250, 90, 125);}
.bg-yl .sales-widgets-i{background-color: rgb(255, 148, 122);}
.bg-gn .sales-widgets-i{background-color: rgb(60, 216, 86);}
.sales-widgets h2{
  font-size: 3rem;
  font-weight: 700;
  margin: 0px 0px 8px;
  line-height: 1.33;
  color: rgb(21, 29, 72);
}
.sales-widgets p{
  margin: 0px 0px 8px;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  color: rgb(66, 81, 102);  
}
.sales-widgets span{
  margin: 0px;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.33;
  font-family: Poppins, "Open Sans", Epilogue, sans-serif;
  color: rgb(64, 121, 237);  
}
/******************************/
/**RECEIPTS**/
/******************************/
.receipt-form{
 font-size: 2.2rem;
 line-height: 1.4;
}
.search-box{
  display: none;
  box-shadow: 1px 1px 7px #959595;
  background-color: transparent;
}
.search-box-button{
  display: flex;
  gap: 1rem; 
  align-items: baseline; 
  color: #2aace2; 
  cursor: pointer;
}
.from-input-receipt{gap:6px!important;}
.btn-submit{
  font-weight: 600;
  font-size: 1.8rem;
  padding: 0.875rem 2.5rem;
}
#Cresult {margin-top: 0.5rem;}
.showResult {
  padding: 10px;
  display: block;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
}
.showResult:hover {
  background: #cfe2ff;
}
#open_modal{
  display: flex;
  gap: 1rem;
  align-items: baseline;
  color: #2aace2;
  cursor: pointer;
  font-size: 1.2rem;
}
.validation{position: relative;}
.validation.error .bel-control,
#receipt_selector.error{border: 2px solid #e74c3c;}
.error-check{border: 2px solid #e74c3c!important;}
.validation small{
  font-size: 1.2rem;
  color:  #e74c3c;
  position: absolute;
  bottom: -1.8rem;
  left: 0;
  visibility: hidden;  
}
.validation.error small{visibility: visible;}
.hero.error #drop-area,
.hero.error #drop-areas{
  border: 2px dashed #e74c3c;
}
/*quick add*/
#quick_add_form{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.from-flex-group{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/**view**/
.receipts-view h4{
  color: var(--red);
  font-size: 2rem;
  font-weight: 700;
}
.receipts-view h5{font-size: 1.6rem;}
.receipts-view{font-size: 2rem;}
.Receipt-container{
  background: #ffffcc;
  padding: 2.5rem 2.5rem;
  border-radius: 0.3125rem;
  width: 60%;  
}
.header-section,
.company-info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 75px;
  row-gap: 0px;
  align-items: center;  
}
.from-p {font-weight: 600;}
.form-group-input {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 75px;
  row-gap: 0px;
  align-items: flex-start;
}
.form-group-input-2 {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  column-gap: 75px;
  row-gap: 0px;
  align-items: flex-start;
}
.form-group-input-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 10px;
  row-gap: 0px;
  align-items: flex-start;
}
.form-group-input-4 {
  display: grid;
  grid-template-columns: 50px 1fr 330px 1fr;
  column-gap: 0px;
  row-gap: 0px;
  align-items: start;
}
.form-group-label {font-weight: 600;}
.bel-control{
  background-color: transparent;
  font-size: 1.3rem;
  color: #000!important;
  border: 2px solid #000;
  padding: .375rem .75rem;
}
.bel-control:focus{color: #000;}
.bel-control:focus{background-color: transparent;}
.left{font-size: 1.7rem;}
.ck-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0px;
  cursor: pointer;
  color:#000;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ck-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: 2px solid #000;
}
.ck-container:hover input ~ .checkmark {background-color: transparent;}
.ck-container input:checked ~ .checkmark {background-color: transparent;}
.checkmark:after{
  content: "";
  position: absolute;
  display: none;
}
.ck-container input:checked ~ .checkmark:after {display: block;}
.ck-container .checkmark:after{
  left: 7px;
  top: 3px;
  width: 7px;
  height: 13px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* receipt preview only  */
.checkedOP:after{
  content: "";
  position: absolute;
  display: block;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 13px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn-back {
  font-weight: 600;
  font-size: 1.8rem;
  background-color: var(--blue);
  padding: 0.875rem 2.5rem;
}
select.form-control:not([size]):not([multiple]) {height: calc(2.70rem + 2px);}
/**print**/
.Receipt-print-container{width: 100%;}
.Receipt-print-container .from-p {font-size: 2.3rem;}
.Receipt-print-container .form-group-label{font-size: 2rem;}
.form-under{
  background-color: transparent;
  font-size: 1.3rem;
  color: #000;
  border-bottom: 1.5px solid #000;
  padding-left: 1.3rem;
  padding-bottom: 0.6rem;
}
.Receipt-print-container .ck-container{font-size: 2rem;}
.bottom-image{
  display:flex; 
  justify-content:center;
  padding-top: 3rem;
}
.from-bottom {
  margin-top: 3rem;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 600;
}
/**payments**/
.paymets-made-container{width: 50%;}
.payments-header{
  font-size: 3rem;
  background: var(--blue);
  text-align: center;
  padding: 10px;
  color: #fff;
  text-transform: uppercase;  
}
.padding{padding: 0 20px;}
.customer-info{
  display: flex;
  align-items: center;
  gap: 5rem;
}
.profile-image{
  border-radius: 50%;
  background-color: var(--blue);;
  padding: 10px;
  text-align: center;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 4.5rem;
  color: #fff; 
}
.info-group label,
.flexing-group label{
  font-weight: 700;
  font-size: 2rem;
}
.info-group div,
.flexing-group div{
  border-bottom: 2px solid var(--blue);
  font-size: 1.6rem;
  min-height: 30px;
}
.w-80{width: 80%;}
.receipt-info h4{
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--blue);
}
.flexing-group label{width: 200px;}
.flexing-group{
  display: flex;
  gap: 2rem;
}
/******************************/
/**CUSTOMER**/
/******************************/
.customer-form{
  width: 50%;
  padding: 20px;
  font-size: 2rem;
  display: block;
}
.demo-info h4{
  font-size: 2.3rem;
  color: var(--blue);
  font-weight: 700;
}
.text-area-input{
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 448px;
  overflow: auto;
  padding: 2px;
  resize: vertical;
  border-bottom: 3px solid var(--blue);
  font-size: 1.6rem;
}
/******************************/
/**DEPOSIT**/
/******************************/
.flexing{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.depositView h4{
  font-size: 2.3rem;
  font-weight: 700;
  text-transform: capitalize; 
}
.deposit-table{
  border: 1px solid #ccc;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
.deposit-table tr {
  background-color: #fff;
  border: 1px solid #ddd;
}
.deposit-table th {
  font-size: 1.6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.deposit-table td{
  font-size: 1.4rem;
  font-weight: 400;  
}
.deposit-table th, .deposit-table td{
  padding: .625em;
  text-align: center;
}
.deposit-form{
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  width: 60%;
  font-size: 2.2rem;
  font-weight: 500;
}
.deposit-form h4{
  font-size: 2.5rem;
  font-weight: 600;
}
.deposit-form .bel-control{text-align: center;}
#depoNo{color: #e74c3c;}
#drop-areas,#drop-area, .drop-area{
  width: 400px;
  height: 400px;
  text-align: center;
  background-color: #fff;
  border-radius: 20px;
  border: 2px dashed rgb(0, 108, 153);
}
.view-image{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #f7f8ff;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/******************************/
/**VOUCHERS**/
/******************************/
.voucher-form{width: 60%;}
.voucher-form .from-p{
  font-size: 2.3rem;
  margin-bottom: 1.2rem;
}
/******************************/
/**INVENTORY**/
/******************************/
.inventory-form{width: 60%;}
.inventory-form .from-p{
  font-size: 2.3rem;
  margin-bottom: 1.2rem;
}
.wrap{
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: baseline;
}
.grid-table{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #ddd;
  padding: 5px;
  align-items: center;
}
.grid-table label{
  font-size: 1.6rem;
  font-weight: 600;
  background: #0000000d;
  padding: 10px;
  margin: 0;
  text-transform: uppercase;
}
.grid-table input,
.grid-table div{
  border: none!important;
}
#custom-select-list{
  width: 100%;
  background: #fff;
  border: 2px solid #000;
  list-style: none;
  margin: 0;
  left: 0;
  bottom: -2.7rem;
}
.select-form{
  position: relative;
  text-align: justify;
}
.select-form::before{
  content: "";
  position: absolute;
  cursor: pointer;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  width: 7px;
  height: 7px;
  top: 1.3rem;
  right: 1rem;
  transition: 0.5s ease;
  transform: translateY(-50%) rotate(44deg);
}
.custom-select-options{
  display: none;
  border: 2px solid #000;
  list-style: none;
}
.resResult{
  padding: 5px;
  cursor: pointer;
}
.resResult:hover{background: #cfe2ff;}
/******************************/
/**SALES**/
/******************************/
.sales-form{width: 60%;}
.header-section-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 20px 0;
}
.sales-header{
  display: flex;
  flex-direction: column;
  gap:1rem;
}
.sales-header h4{
  font-size: 3rem;
  font-weight: 700;
}
.sales-header p{font-size: 1.8rem;}
.customer-info-form{width:300px;}
.q-hr{border-top: 2.5px solid var(--blue);}
.accordion{
 display:flex;
 flex-direction: column;
 gap: 5px;
 list-style: none;
}
.accordian-label{
  display: flex;
  gap: 1rem;
}
.summary_totals{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.summary_table{font-size:1.4rem;}
.cart_total{font-size:1.8rem;}
.discount-list{
  list-style:none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.header-section-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-bottom: 20px;
}
.sales-bottom{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.sales-bottom h4{
  font-size: 2rem;
  font-weight: 600;
}
.sales-bottom div{
  font-size: 1.6rem;
}
/*******************************/
/***********JOB ORDER***********/
/*******************************/
.standard_second_table{
  max-width: 100%;
  width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
  border: 1px solid #dee2e6;
  text-align: center;
}
.standard_second_table thead th{
  border-bottom: 1px solid #dee2e6;
  background-color: rgb(243 243 243 / 1);
  padding-bottom: 1.6rem;
  padding-top: 1.6rem;
  text-transform: uppercase;
  font-weight: 700;
}
.standard_second_table th,
.standard_second_table td {
  font-size: 1.3rem;
}
.view-more-btn i{
  transform: rotate(90deg);
  color: #000;
  font-size: 1.6rem;
}
.view-details{
  transform: rotate(179deg);
  color: #000;
  font-size: 1.6rem;
  padding: 10px;
}
.view-details:hover{background-color: rgb(217 217 217 / 1);}
.showMore{
  display:none;
  border: 1.5px solid #dee2e6;
  padding: 20px;
}
.border-viewmore{
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
}
.border-viewmore div{position:relative;}
.qty_cir_tel{
  display: block;
  height: 30px;
  width: 30px;
  background: #000;
  color: #ffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  right: 16.4rem;
  top: -1.6rem;
}
.countdown-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
  flex-wrap: wrap; /* Allow wrapping on small screens */
}
.time-segment {
  background-color: #f1ffef;
  color: #1e8a31;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin: 0.5rem;
  min-width: 90px; 
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); 
}
.time-segment-50{
  background-color: #fffbef;
  color: #7d8a1e;    
}
.time-segment-30{
  background-color: #ffefef;
  color: #8a1e1e;    
}
.time-value {
  font-size: 1.3rem; 
  font-weight: 700; 
  line-height: 1;
}
.time-label {
  font-size: 0.875rem; 
  color: #4a5568; 
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em; 
}
.message-box {
  background-color: #ffeccf; 
  color: #92400e; 
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  width: 100%;
  text-align: center;
  font-weight: 500;
  border: 1px solid #fbd38d; 
  display: none; 
}
.job-order-section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.jobSection h1{
  font-size:3rem;
  font-weight: 700;
  text-transform: uppercase;
}
.details{
  margin-top:1rem;
  margin-bottom:2rem;
}
.details div{
  display: flex;
  gap: 5px;
  font-size:1.6rem;
  margin-bottom:1rem;
}
.details div span{font-weight:600;}
.progress-stauts-all{
  display: flex;
  align-items: baseline;
  margin-top: 5rem;
  padding-left: 0;
  gap:2rem;
}
.progress-stauts-all li{
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.status-icon{
  font-size: 25px;
  color: var(--black);
  margin: 0 30px;
}
.progressText{
  font-size: 15px;
  text-align: center;
  font-weight: 600;
  color: var(--black);
}
.progress-stauts{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(68, 68, 68);
  margin: 12px 0;
  display: grid;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  cursor:pointer;
}
.progress-stauts-all li .progress-stauts .uli{display: none;}
.progress-stauts-all li .progress-stauts p{font-size: 13px;}
.progress-stauts::after{
  content: " ";
  position: absolute;
  width: 90px;
  height: 5px;
  background-color: rgba(68, 68, 68, 0.781);
  right: 30px;
  z-index: -1;
}
.one-progress::after{
  width:0;
  height: 0;
}
.progress-actives .progress-stauts,
.progress-actives .progress-stauts::after{background-color: #0D864C;}
.progress-actives .status-icon,
.progress-actives .progressText{color: #0D864C;}

.progress-pause .progress-stauts,
.progress-pause .progress-stauts::after{background-color: #eedf0c;}
.progress-pause .status-icon,
.progress-pause .progressText{color: #eedf0c;}

.progress-stop .progress-stauts,
.progress-stop .progress-stauts::after{background-color: #ee0c0c;}
.progress-stop .status-icon,
.progress-stop .progressText{color: #ee0c0c;}

.validation{position:relative;}
.validation small{
  color: red;
  font-size: 10px;
}
#uploadForm{
  display: flex;
  justify-content: space-between;
}
.btcd-f-input {
  display: block;
  width: 50%;
  position: relative;
  overflow: hidden;
  font-size: 1.8rem;
}
.btcd-f-input > div > input::-webkit-file-upload-button {cursor: pointer;}
.btcd-f-wrp {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
.btcd-f-wrp > small {
  color: gray;
  font-size: 1.5rem;
}
.btcd-f-wrp > .btcd-inpBtn{
  cursor: pointer;
  background: #f3f3f3;
  padding: 5px;
  display: flex;
  border-radius: 9px;
  border: none;
  margin-right: 8px;
}
.btcd-f-wrp > button > img {width: 24px;}
.btcd-f-wrp > button > span,
.btcd-f-wrp > span,
.btcd-f-wrp > small {
  vertical-align: super;
  padding: 1rem;
}
.btcd-f-input > .btcd-f-wrp > input {
  z-index: 100;
  width: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  height: 37px;
  cursor: pointer;
}
.btcd-f-wrp:hover {
  background: #fafafa;
  border-radius: 10px;
}
.btcd-submit{
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  font-size:1.5rem;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #D7DF26;
  color: #000;
}
#fileList {
  margin-top: 1.5rem;
  width: 100%;
  text-align: left;
  background-color: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem;
  min-height: 50px;
  font-size: 1.6rem;
}
#selectedFilesList{
 display: grid;
 flex-direction: column;
 gap: 5px;
}
.details-tab{
  display: flex;
  justify-content: end;
  gap: 1rem;
}
.details-tab li{
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 300px;
  position: relative;
  box-sizing: border-box;
  align-self: start;
  justify-content: space-between;
  max-height: 100%;
  padding-bottom: 1rem;
  border-radius: 10px;
  background-color: #101204;
  color: #9fadbc;
  vertical-align: top;
  white-space: normal;
  scroll-margin: 8px;
  box-shadow: 3px 4px 1px #091e4240, 6px 9px 1px #091e424f
}
.details-h1{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: calc(0.25rem * 4);
  border-radius: 3px;
  background-color: #454f59;
  color: #dee4ea;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 10px;
}
.details-des{
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-left: 10px;
}
.details-section{
  margin: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.2rem;
}
.details-section p{
  display: flex;
  gap: 0.5rem;
}
/*******************************/
/**************POS**************/
/*******************************/
.pos-header{
  background-color: #000;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  padding: 10px;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 40px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.pos-footer{
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #0000000d;
  padding: 10px;
  font-size: 1.8rem;
  font-weight: 700;
  width: 100%;
  height: 97px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.pos-footer div{
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  border: 1.5px solid #a9a9a9;
  padding: 5px;
  border-radius: 50%;
}
.pos-footer div i{
  transform: rotate(182deg);
  color: #a9a9a9;
}
.pos-system{
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 20px;
}
.category-serach{
  display: flex;
  position: relative;
  background: gba(255, 255, 255, 0.06);
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.2),
    inset -1px -1px 6px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: fit-content;
}
.category-serach input{display: none;}
.category-serach label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  font-size: 1.5rem;
  padding: 1.8rem 1.6rem;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #626671;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease-in-out;
}
.glass-glider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 3);
  border-radius: 1rem;
  z-index: 1;
  transition:
    transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
    background 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out;
}
#alldeposit:checked ~ .glass-glider,
#deposit50:checked ~ .glass-glider,
#otherdeposit:checked ~ .glass-glider{
  transform: translateX(0%);
  background: linear-gradient(135deg, #c0c0c055, #e0e0e0);
}
#deposit50:checked ~ .glass-glider{transform:translateX(100%);}
#otherdeposit:checked ~ .glass-glider{transform:translateX(208%);}

.list-search{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  min-height: 50vh;
}
.keypad-invoice{
  margin-top: 3rem;
  background: #c0c0c055;
  box-shadow: inset -1px 1px 3px 2px #ffffff5e,-1px 1px 3px 2px rgba(66, 66, 66, 0.2);
  border-radius: 10px;
  padding: 1.8rem 1.6rem;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  height: fit-content;
}
.input-pos-div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset -1px 1px 1px 2px #42424233,-1px 1px 3px 2px rgba(66, 66, 66, 0.2);
  border-radius: 10px;
  padding: 1.8rem 1.6rem;
}
.clear-amount-given{
  width: 40px;
  height: 38px;
  background-color: #c0c0c0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.6rem;
}
.input-container-pos{
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  width: -webkit-fill-available;
  font-size: 2.8rem;
  font-weight: 700;
  color:#000;
}
.tendered{
  font-size: 2.8rem;
  font-weight: 700;
}
.input-container-pos input{
  width: 23%;
  border: none;
  outline: none!important;
  color: #000;
  font-weight: 700;
}
.input-container-pos input::placeholder{color: #000;}
.btn-keypad{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
.btn-key-pad-number{
  box-shadow: -1px 1px 1px 2px #00000045,-1px 1px 3px 2px rgba(66, 66, 66, 0.2);
  padding: 1.8rem 1.6rem;
  border-radius: 10px;
  text-align: center;
  font-size: 1.8rem;
  cursor: pointer;
  border-color: transparent!important;
  outline: none!important;
}
.btn-key-options{
  background-color: #c0c0c0;
  color: #fff;
  box-shadow: -1px 1px 1px 2px #00000045,-1px 1px 3px 2px rgba(66, 66, 66, 0.2);
  border-radius: 10px;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent!important;
  outline: none!important;
}
.btn-key-payment{
  color: #fff;
  box-shadow: -1px 1px 3px 2px #00000045,-1px 1px 3px 2px rgba(66, 66, 66, 0.2);
  border-radius: 10px;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 1.6rem;
  border-color: transparent!important;
  outline: none!important;
}
.green-option{background-color: #01930b;}
.purple-option{background-color: #8d29ff;}
.blue-option{background-color: #032db5;}
.red-option{background-color: #b50303;}
.other-option{background-color: #ed9a1b;}
.items-list{
  box-shadow: -1px 1px 3px 1px rgba(66, 66, 66, 0.2);
  border-bottom: 1px solid #c0c0c0;
  border-left: 1px solid #c0c0c0;
  border-right: 1px solid #c0c0c0;
  border-top: 5px solid var(--blue);
  border-radius: 10px;
  height: 100%;
  width: 100%;
  padding: 20px;
  position: relative;
}
.payment-details-pos{
  width: 100%;
  height: 20%;
  background-color: rgba(42, 171, 226, 0.50);
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.payment-details-div{
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1.8rem;
  font-weight: 500;
}
.total-amt{
  font-size: 2.8rem;
  font-weight: 700;
}
.invoice-details{
  width: 100%;
  height: 60%;
  overflow-y: scroll;
}
.pos-item{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #c0c0c0;
}
.pos-details{
  display: flex;
  align-items: center; 
  gap: 20px;
  font-size: 1.8rem;
}
.pos-details h3{
  margin: 0;
  font-weight: 600;
}
.receipt-preview h3{
  text-align: center;
  font-style: italic;
  font-size: 2.3rem;
}
.Preview-box{
  padding: 10px;
}
.receipt-slides{display: none;}
.receipt-prev{
 margin-bottom: 3rem;
 background: #ffffcc;
 padding: 2.5rem 2.5rem;
 border-radius: 0.3125rem;
 font-size: 1.6rem;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 22px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.prev{
  left: 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.change_amount{
  background-color: rgb(42 226 96 / 50%);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  font-size:2.8rem;
  font-weight: 700;
}
.balance_amount{
  background-color: rgb(226 42 42 / 50%);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  font-size:2.8rem;
  font-weight: 700;
}
/******** INVOICE && ORDER ********/
.sales-info-label{
  color: #ee6534;
  background-color: #f7ded5;
  padding: 1.25rem 1rem;
  display: flex;
  align-items: end;
  width: fit-content;
  gap: 1rem;
  font-size:2rem;
  font-weight:700;
  border-radius: 8px;
}
.sub-info-label{
  margin-top: 3rem;
  color: var(--black);
  font-size:2.2rem;
  font-weight: 700;
}
.grid-x-3{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.grid-x-3 div p{
  color: #aaa;
  font-weight: 600;
  font-size: 1.8rem;
}
.grid-x-3 div span{
  color: var(--black);
  font-weight: 500;
  font-size: 1.6rem;
}
.grid-x-2{
  width: 100%;
  display: flex;
  gap: 2rem;
}
.x2-pay{
  flex-direction: column;
  font-size: 1.8rem;
  gap: 1.2rem;
  width: 150px;
}
.x2-pay p{
  position: relative;
  font-weight: 700;
  display: inline-block;
}
.x2-pay p::after{
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 60%;
  width: 24px;
  height: 2.5px;
  background-color: var(--black);
  border-radius: 0.25rem;
  transform: rotate(90deg);
}
.x2-pay span{color: #aaa;}
.x2-pay-info{
  font-size: 1.6rem;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.x2-pay-info label{
  color: #34ee34;
  background-color: #d5f7d8;
  padding: 1.25rem 1rem;
  display: flex;
  align-items: end;
  width: fit-content;
  gap: 1rem;
  font-weight:700;
  border-radius: 8px;
}
.sales-preview{
  background-color: #e7e7e7;
  padding: 20px;
}
.sales-from{
  background-color: #fff;
  box-shadow: 1px 1px 4px 3px #d1d1d1;
  padding: 15px;
}
/* History */
.toggle-transition{
  transform: rotate(180deg);
}
.flex-end{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3rem;
}
.acknowledge{
  max-width: 600px;
  width: 100%;
}
.acknowledge-span{
  font-size:1.6rem;
  line-height: 1.8;
}
.signSection{
  width:380px;
  display: inline-block;
  position:relative;
}
.bel-control {
  background-color: transparent;
  font-size: 1.3rem;
  color: #000 !important;
  border: 2px solid #000;
  padding: .375rem .75rem;
}
.wdp-ribbon{
  display: inline-block;
  padding: 2px 15px;
  position: absolute;
  left: 0px;
  top: 3.5px;
  line-height: 24px;
  height:24px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  border-radius: 0;
  text-shadow: none;
  font-weight: normal;
  background-color: #ff0000 !important;
  color: #fff;
  font-weight:800;
}
.wdp-ribbon-two:before, .wdp-ribbon-two:before {
  display: inline-block;
  content: "";
  position: absolute;
  right: -16px;
  top: 0px;
  border: 9px solid transparent;
  border-width: 12px 8px;
  border-left-color: #ff0000;
}
.payment-agreement{margin-top:2rem;}
.payment-agreement p{
  font-size:2rem;
  font-weight: 600;
}
.payment-radios{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.payment-radio label{
  font-size:1.6rem;
  margin-left: 1rem;
}
.paytype-label{
  padding: calc(0.25rem * 3);
  background: #c6fdc8;
  color: #109d2f;
  margin: 0;
  border-radius: 6px;
}
.payMeth-label{
  padding: calc(0.25rem * 3);
  background: #fdfcc6;
  color: #939d10;
  margin: 0;
  border-radius: 6px;
}
/******** POS DATA TABLE ********/
.main-daily-table{
  margin-top: 5rem;
  padding: calc(0.40rem * 6);
  border: 0;
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 20, .08), 0 1px 2px rgba(0, 0, 20, .08);
}
.datas-x-table thead th{
  border: none;
  background-color: var(--orange);
  color: #fff;
}
.datas-x-table td,
.datas-x-table tbody tr:nth-of-type(odd){
  background: none;
  border: none;
  cursor: pointer;
}
.datas-x-table th{font-size: 1.6rem;}
.datas-x-table td{font-size: 1.3rem}
.main-daily-header{
  padding-bottom: 1.25rem ;
  padding-top: 1.25rem ; 
  font-size: 2rem;
}
.action-full-payment{
  padding: 5px;
  color: #34b15c;
  background-color: rgba(52, 177, 92, 0.2);
  border-radius: 5px;
  text-transform: capitalize;
}
.label-prod-pay{
  padding: 8px;
  width: 60px;
  border-radius: 5px;
  text-transform: capitalize;
  font-weight: 700;
}
.label-product-return{
  padding: 8px;
  width: 60px;
  color: #345cb1;
  background-color: rgba(52, 75, 177, 0.2);
  border-radius: 5px;
  text-transform: capitalize;
  font-weight: 700;
}
.label-product-Cash,
.credit-label{
  color: #34B1AA;
  background-color: rgba(52, 177, 170, 0.2);
  width: 140px;
}
.label-product-Online{
  color: #34b15c;
  background-color: rgba(52, 177, 92, 0.2);
  width: 140px;
}
.label-prod-Check{
  background-color: rgb(232, 175, 243, 0.2);
  color:#7604aa;
  width: 140px;
}
.audit-label{
  color: #cac710;
  background-color: rgba(238, 255, 0, 0.26);
  width: 140px;
}
.refund-label,
.debit-label,
.label-product-inhouse{
  color: #F95F53;
  background-color: rgba(249, 95, 83, 0.2); 
  width: 140px;   
}
.price-cir-tel{
  display: block;
  height: 30px;
  width: 30px;
  background: #000;
  color: #ffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  right: 5.4rem;
  top: -1.4rem;  
}
#items_refund,
.grid-display{
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 20px;
  align-items: top;  
}
.refund-top-section{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: baseline;
}
.refund-top-section h1{
  margin: 0;
  font-weight: 700;
}
.refund-top-section h4,
.refund-top-section p{
  margin: 0;
}
.refund-top-section p{
  font-size: 1.4rem;
  color: #808080;
}
.general,
.billing,
.summary-tables-refund{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.general label,
.billing label{
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: 1.4rem;
}
.sub-label label{
  margin-top: 0;
  font-weight: 500;
  color: #808080;
  font-size: 1.4rem;
}
.sub-label a{font-size: 1.3rem;}
.sub-label div{
  border: 1.5px solid #808080;
  border-radius: 5px;
  padding: 5px;
  font-size: 1.3rem;
}
.order-notes{
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 20, .08), 0 1px 2px rgba(0, 0, 20, .08);
}
.accordian{
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(128, 128, 128, 0.4);
  padding: 5px;
  font-size: 1.5rem;
  font-weight: 700;
}
.message-display{
  height: inherit;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.message-container{
  clear: both;
  position: relative;  
}
.message-container .arrow {
  width: 12px;
  height: 20px;
  overflow: hidden;
  position: relative;
  float: left;
  top: 6px;
  right: -1px;
}
.message-container .arrow .outer {
  width: 0;
  height: 0;
  border-right: 20px solid #000000;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.message-container .arrow .inner {
  width: 0;
  height: 0;
  border-right: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  top: 0;
  left: 2px;
}
.message-container .message-body {
  float: left;
  width: 300px;
  height: auto;
  border: 1px solid #CCC;
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 6px 8px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.4rem;
}
.notes-card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 150px;
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 20, .08), 0 1px 2px rgba(0, 0, 20, .08);
}
.notes-text{
  color: #000;
  font-size: 1.6rem;
}
.note-heading{
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 20, .08), 0 1px 2px rgba(0, 0, 20, .08);
  background-color: #fff; 
  width: 160px;
  height: 30px; 
}
.note-footer{
  width: 100%;
  position: absolute;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
  font-size: 1.3rem;
}
#root-signature canvas{
  height: 85px!important; 
  width: -webkit-fill-available!important;  
}

.modal-tab{
  display: none;
}
.this-current-tab{
  display: block;
}

.input-pos-status{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #e3e2e2;
  background-color: #e3e2e2;
  border-radius: 5px;
  padding: 1rem;
}
#cash-on-hand{
  background-color: #e3e2e2;
  width: 90%;
  outline: transparent;
  border: transparent;
  font-size: 1.5rem;
  color: #000;
}
#cash-on-hand::placeholder {
  color: #000;
}
.input-pos-status i{
  font-size: 2.7rem;
}
.pos-aside{
  display: grid;
  grid-template-columns: 200px 1fr; 
}
.pos-aside-links{
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-right: 15px;
}
.pos-aside-links li a{
  background: #0000000d;
  display: block;
}
.touch-pad-pos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


/**SHIPPING**/
.shipping-label-card {
  background-color: #ffffff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 550px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.shipping-card-header {
  background-color: #111111;
  color: #ffffff;
  padding: 2.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shipping-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
.shipping-address-info{
  text-align: center;
  margin-top: 0.5rem;  
}
.shipping-address-info p:first-child {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.shipping-address-info p:last-child {
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  font-weight: 500;
}
.gradient-divider {
  background: linear-gradient(to right, #ee3643, #f37a20, #f9c32c, #8dc641, #32b4e6);
  padding: 10px 0;
  text-align: center;
}
.gradient-divider h2 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin: 0;
}
.shipping-form {
  padding: 2.5rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.shipping-form-row {
  display: flex;
  align-items: flex-end;
}
.shipping-form-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
}
.label-text {
  font-weight: 500;
  font-size: 1.8rem;
  margin-right: 8px;
  white-space: nowrap;
  color: #000000;
}
.input-line {
  border: none;
  border-bottom: 1.5px solid #000000;
  border-radius: 0;
  background: transparent;
  flex-grow: 1;
  outline: none;
  padding: 0 4px 2px 4px;
  font-size: 1.8rem;
  font-family: inherit;
}        
.input-line:focus {
  border-bottom-color: #32b4e6;
}
.w-full {
  width: 100%;
}
.submit-container {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
}
.btn-submit {
  background-color: #111111;
  color: #ffffff;
  padding: 0.75rem 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
}
.btn-submit:hover {
  background-color: #1f2937;
}
.shipping-card-footer {
  background-color: #111111;
  padding: 1.25rem 0;
  text-align: center;
  margin-top: auto;
}
.shipping-card-footer p {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  margin: 0;
}