.fill-side {width: 60%;background-color: white;
min-height: 100vh;padding: 30px ;padding-top: 80px;height: 100%;
position: fixed;left: 0;top: 0;bottom: 0;overflow-y: auto;
}
.total-side {width: 40%;background-color: var(--checkout);
height: 100% ; min-height: 100vh;position: absolute;right: 0;top: 0;bottom: 0;
overflow-y: auto;padding: 30px;padding-top: 70px;
}
h3 {font-size: 22px;color: var(--color-text);padding: 8px 0;
    border-bottom: 2px solid var(--color-text);display: inline-flex;margin: 20px 0;}

input[type="radio"] {
    -webkit-appearance: none;  appearance: none;  margin: 0;
    font: inherit;color: currentColor;cursor: pointer;
    width: 1.15em;height: 1.15em;
    border: 0.15em solid currentColor;border-radius: 50%;
      transform: translateY(-0.075em); display: grid; place-content: center;
    }
input[type="radio"]::before {
     content: ""; width: 0.65em; height: 0.65em; border-radius: 50%;
     transform: scale(0); transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em var(--roy);}
input[type="radio"]:checked::before {transform: scale(1);}
input[type="radio"]:focus {box-shadow: 0 0 0 !important;outline-offset: max(2px, 0.15em);
    border: 0.15em solid currentColor !important;
}




.input_wrap .sh-pass{position: absolute;right: 18px; top: 50%;
    transform: translateY(-50%); font-size: 18px;color: rgb(179, 178, 184);cursor: pointer;}
.input_wrap .sh-pass-act {color: var(--roy);text-shadow: var(--roy) 1px 0 10px;}

.fill-side::-webkit-scrollbar , .total-side::-webkit-scrollbar {width: 2px;}

.side-top img{width: 95%;max-width: 200px;margin-bottom: 10px;}
.breadcrumb {font-size: 15px;}

.fill-side form {width: 100%;max-width: 650px;padding: 30px 0;}



.form_wrap {position:relative;}
input[type="text"] , input[type="email"] , input[type="number"] , input[type="password"] , select  { border: 1px solid silver !important;border-radius: 5px !important;
width: 100% !important;;font-size: 14px !important;box-shadow: none !important;padding-left: 8px !important;height: 50px !important;}
textarea  { border: 1px solid silver;border-radius: 5px;
    width:100%;font-size: 14px;box-shadow: none;padding: 8px;height: 120px;resize: vertical;}
input:focus + label, input:valid + label , 
textarea:focus + label, textarea:valid + label {font-size: 12px;color: #777d85;top: -5px;left:10px;background: #ffffff;
padding: 0px 5px 0px 5px;}
.input_wrap {width:auto; height:auto; position:relative;}
.input_wrap label {font-size:16px;color: #777d85;padding: 14px;position: absolute;top: 0;left: 0;transition:0.2s ease all; 
    -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;pointer-events: none;}

.tab-s {width: 48%;display: inline-table;}
.tab {width: 100%;margin: 20px 0;}

input:focus , textarea:focus , select:focus {border:  1px solid var(--roy) !important; 
    box-shadow:  0 0 0 4px var(--roy-opt) !important;outline: none ;}
  
.prod {width: 100%;margin: 10px 0;display: inline-table;}
.prod img {width: 55px;border-radius: 10px;height: 55px;object-fit: cover;float: left;}
.prod h4 {font-size: 16px;max-width: 45%;display: inline-table;margin-left: 15px;text-align: left;
height: 100%;float: left;margin-top: 13px;
}
.prod h4 span {font-size: 14px;}
.prod .nu {border-radius: 10px;background-color: rgb(152, 152, 155)
;color: white;text-align: center;margin: 0 4px;padding: 1px 12px;font-size: 11px;
}
.prod h5 {font-size: 16px;width: 25%;display: inline-table;text-align: right;float: right;line-height: 55px;}  
.lig {width: 100%;height: 1px ;background-color:  rgba(189, 189, 189, 0.9);}  

.comp {padding: 15px 0;}
.comp-txt {width: 50%;text-align: left;font-size: 18px;display: inline-table;}
.comp-pr {width: 50%;float: right;text-align: right;font-size: 16px;display: inline-table;}
.comp-pr-t {font-size: 19px;}

.pay-s  , .paym {width: 100%;border: 1px solid rgba(189, 189, 189, 0.9) ;position: relative;
    padding: 15px 10px;border-radius: 6px; margin: 5px 0; background-color: white;}
.pay-s h6 {font-size: 17px;margin: 0px 10px !important;}
.pay-s p {font-size: 14px;text-align: justify;}  
.pay-s img{max-height: 30px;margin-left: 5px;}

.pay-s h6 span {font-size: 15px ;color: rgb(92, 92, 92);}

.stripe-form {width: 95%;padding: 10px 5px;}
.stripe-form h4 {font-size: 20px; color: var(--color-text);margin-bottom: 15px;}
.stripe-form .row {margin: 5px 0;padding: 0 !important;}
.stripe-form .col {padding: 0 !important;}




.pay-btn  {padding: 12px 20px;
    border-radius: 8px;background-color: var(--roy);color: white;border: 1px solid transparent;
    margin: 10px 0;
display: flex; text-align: center;align-items: center;
}
.pay-btn i {margin-left: 5px;}
.pay-btn:hover {background-color: var(--roy-hover);}

.pp-btn , .cod-btn , .stripe-btn , .razorpay-btn {display: none;margin: 20px 0;}
.error {font-size: 16px;color: rgb(226, 77, 77);text-align: left;display: flex;
align-items: center;margin:10px 0;
}  




@media only screen and (max-width: 1000px ) {
.fill-side {width: 100%;position: relative;left: auto;top: auto;bottom: auto;}
.total-side {width: 100%;position: relative;right:  auto;top: auto;bottom: auto}
}
@media only screen and (max-width: 450px ) {
  .fill-side , .total-side {padding: 20px 5px;}
  .pay-s h6 {font-size: 15px;} 
}