.ltsp {
letter-spacing: 0.6px !important;  
}


.ftnv {
font-family: 'Open Sans', sans-serif !important;

}

.ftnva {
font-family: 'Roboto', sans-serif !important;
  
}

.ftnvb {
font-family: 'Poppins', sans-serif !important;

}

.ftnvc {
font-family: 'Kanit', sans-serif !important;

}

.ftnvd {
font-family: 'Montserrat', sans-serif !important;

}

.ftnve {
font-family: 'Roboto Slab', serif !important;

}

.ftnvf {
font-family: 'Raleway', sans-serif !important;

}

.ftnvg {
font-family: 'Lato', sans-serif !important;

}


.oppoa {
font-size: 13px;
font-family: 'Roboto', sans-serif !important;
letter-spacing: 1px;
background-color: #003366 !important;
color: white;
}

.oppob {
font-family: 'Roboto', sans-serif !important;
font-size: 12px;
font-weight: bold;
letter-spacing: .5px;

}

.btnv {
background-color: #003366 !important;
font-size: 12px !important;
padding: 3px 8px !important;
letter-spacing: .6px;
color: white !important;

}

.btnv:hover , .btnv:focus {
background-color: #004C99 !important;
color: white;
box-shadow: none !important;

}

.btnv1 {
font-family: 'Roboto', sans-serif !important;
background-color: #003366 !important;
font-size: 15px !important;
padding: 8px 16px !important;
letter-spacing: 1px;
color: white !important;
border-radius: 5px !important;
box-shadow: 0 2px 3px black !important;
margin-top: 2px;
}

.btnv1:hover , .btnv1:focus {
background-color: #004C99 !important;
color: white;
box-shadow: 0 2px 5px black !important;

}


.btnv3 {
font-family: 'Roboto', sans-serif !important;
background-color: #003366 !important;
font-size: 15px !important;
padding: 5px 16px !important;
letter-spacing: 1px;
color: white !important;
border-radius: 5px !important;
box-shadow: 0 2px 3px black !important;

}

.btnv3:hover , .btnv3:focus {
background-color: #004C99 !important;
color: white;
box-shadow: 0 2px 5px black !important;

}



.sub {
padding: 40px 50px 30px 50px;
border-radius: 10px;
box-shadow: 0 0 0 2px #E0E0E0 , 0 0 0 6px #6c757d , 0 0 0 8px #E0E0E0 , 0 0 20px white ;

}

.subnv1 {
height: 60px !important;
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
letter-spacing: .5px;

}

.subnv1:focus {
border-color: none !important;
box-shadow: none !important;

}

.subnv2 {
background-color: #C61414 !important;	
font-family: 'Poppins', sans-serif !important;
letter-spacing: .7px;
height: 50px !important;
border-radius: 30px !important;
color: white !important;
}

.subnv2:hover {
background-color: #D51A1A !important

}

.subnv3 {
font-family: 'Raleway', sans-serif !important;
font-size: 15px;
letter-spacing: .8px;
cursor: pointer;
}

.ftrnv {
background-color: #606060;
font-family: 'Kanit', sans-serif !important;
color: white;
padding: 8px 0px;
font-size: 12px;
text-align: center;
letter-spacing: 1px;

}

.chnlonv {
min-height: 100vh;

}

.chnlonva {
min-height: 60vh;

}

.errnv {
font-size: 14px;
font-family: 'Lato', sans-serif !important;
color: #990000;
letter-spacing: .7px;
padding-left: 10px;

}

.chngnv {
background-color: rgb(245,245,245);

}

.lbnv {
font-family: 'Roboto Slab', serif !important;
font-size: 14px;
letter-spacing: .6px;

}

.inpnv {
font-family: 'Poppins', sans-serif !important;
font-size: 15px !important;
height: 45px !important;
letter-spacing: .6px;
}

.inpnv:focus {
box-shadow: 0 0 0 1.5px #003366 !important;
border: 1px solid #003366 !important;
outline: none !important;
}

/* date picker css start */

th.datepicker-switch {
background-color: #003366 !important;
color: white !important;
font-family: 'Kanit', sans-serif !important;
font-size: 15px !important;
letter-spacing: 1px !important;

}

.datepicker-days .table-condensed {
font-family: 'Kanit', sans-serif !important;
font-size: 15px !important;

}

.datepicker table tr td span {
font-family: 'Kanit', sans-serif !important;
font-size: 15px !important;
}


/* date picker css exit */

.dlynv4d {
font-family: 'Roboto Slab', serif !important;
padding: 10px 15px;
background-color: #F0F0F0;
color: black;
border-radius: 10px; 

}

.spina {
margin: 10px 10px 10px 22px !important;

color: #004091;

}

/* HTML: <div class="loader"></div> */

.loader {
  width: 50px;
  aspect-ratio: 1.154;
  --_g: no-repeat radial-gradient(farthest-side, #004091 90%, #0000);
  background: 
    var(--_g) 50%  0,
    var(--_g) 0    100%,
    var(--_g) 100% 100%;
  background-size: 35% calc(35%*1.154);
  animation: l16 1s infinite;
}
@keyframes l16{ 
    50%,100% {background-position: 100% 100%,50% 0,0 100%} 
}

/* HTML: <div class="loader"></div> */

/* HTML: <div class="loader1"></div> */


.loader1 {
  width: fit-content;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17px;
  color:#0000;
  background: linear-gradient(90deg,#003366 25%,#8A9B0F 0 50%,#CC0000 0 75%,#00A0B0 0) 0 0/400% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation:l10 3s infinite cubic-bezier(0.3,1,0,1);
}
.loader1:before {
  content:"Updating"
}
@keyframes l10 {
  0%   { background-position: calc(4*100%/3) 0; }
  25%  { background-position: calc(3*100%/3) 0; }
  50%  { background-position: calc(2*100%/3) 0; }
  75%  { background-position: calc(1*100%/3) 0; }
  100% { background-position: 0 0; }
}


/* HTML: <div class="loader1"></div> */


/* HTML: <div class="loader2"></div> */


.loader2 {
  width: fit-content;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px;
  color:#0000;
  background: linear-gradient(90deg,#003366 25%,#8A9B0F 0 50%,#CC0000 0 75%,#00A0B0 0) 0 0/400% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation:l10 3s infinite cubic-bezier(0.3,1,0,1);
}
.loader2:before {
  content:"Searching"
}
@keyframes l10 {
  0%   { background-position: calc(4*100%/3) 0; }
  25%  { background-position: calc(3*100%/3) 0; }
  50%  { background-position: calc(2*100%/3) 0; }
  75%  { background-position: calc(1*100%/3) 0; }
  100% { background-position: 0 0; }
}


/* HTML: <div class="loader1"></div> */

.editnv {
color: #990000; 

}

.editnv:hover , .editnv:focus {
color: #CC0000;

}

.table th, .table td {
padding: 16px 12px 16px 12px !important;

}

.edticon{
padding: 11px 11px 11px 13px;
color: #0066CC;
background-color: #DAECFF;
border-radius: 30px;
transition-duration: 0.4s;
display: ruby;
}

.edticon:hover , .edticon:focus {
background-color: #0066CC;
color: white;
transition-duration: 0.4s;
}

.delicon{
padding: 9px 12px 11px 13px;
color: #990000 !important;
background-color: #FFCCCC;
border-radius: 30px;
transition-duration: 0.4s;
cursor: pointer !important;
display: ruby;
}

.delicon:hover , .delicon:focus {
background-color: #990000;
color: white !important;
transition-duration: 0.4s;
}

.hisicon {
padding: 11px 11px 9px 12px;
color: #CC6600;
background-color: #FFCC99;
border-radius: 30px;
transition-duration: 0.4s;
display: ruby;

}

.hisicon:hover , .hisicon:focus {
background-color: #FF8800;
color: white;
transition-duration: 0.4s;
}

.inficon {
padding: 10px 15px 11px 16px;
color: #156E41;
background-color: #AADAC2;
border-radius: 30px;
transition-duration: 0.4s;
display: ruby;
}

.inficon:hover , .inficon:focus {
background-color: #006633;
color: white;
transition-duration: 0.4s;
}


.clonicon {
padding: 12px 12px 12px 13px;
color: #CC0000;
background-color: #FF9999;
border-radius: 30px;
transition-duration: 0.4s;
display: ruby;
}

.clonicon:hover , .clonicon:focus {
background-color: #CC0000;
color: white;
transition-duration: 0.4s;
}



.txtnv {
font-family: 'Roboto Slab', serif !important;
font-size: 12px;
font-weight: bold;
letter-spacing: .5px;  
border: 1px solid transparent;
background-color: transparent;
resize: none;

}

.modal-body {
font-family: 'Lato', sans-serif !important;
font-size: 14px;
letter-spacing: .6px;
color: #990000;
}

.modal-text {
font-family: 'Poppins', sans-serif !important;
}

.modal-header {
background-color: #003366 !important;
color: white !important;
}

.modal-title {
font-family: 'Poppins', sans-serif !important;
letter-spacing: 0.6px;
font-size: 19px;  
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-box {
  background: #fff;
  padding: 30px 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.modal-box2 {
  background: #fff;
  padding: 15px 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}


.modal-actions {
  margin-top: 20px;
}

.modal-actions .btn {
margin: 0 10px;
cursor: pointer;

}

.icon_box {
width: 90px;
height: 90px;
margin: 0 auto;
border-radius: 50%;
z-index: 9;
text-align: center;
border: 3px solid #f15e5e;
}

.icon {
color: #f15e5e;
font-size: 50px;
display: inline-block;
margin-top: 17px;

}

.searchSelect {
width: 100%;
padding: 8px;
box-sizing: border-box;
display: inline-block !important;
}
    
.categorySelect {
width: 100%;
height: 100px !important;

}

.slposnv10 {
position: absolute;
z-index: 1000;
padding-right: inherit;
}

@media (max-width: 767px) {
  .slposnv10 {
    position: relative;
    padding-right: initial;
  }
}

.thmclrnv {
color: #990000 !important;

}

.list-group-item {
border: none !important;
padding: 20px 0px 20px 20px !important;
background-color: #606060 !important;
color: white !important;
font-size: 15px;
font-family: 'Raleway', sans-serif !important;
letter-spacing: 1px;
margin-top: 1px !important;

}

.list-group-item:hover {
background-color: #919191 !important ;
color: white !important ;

}

.list-group-item.active {
background-color: #808080 !important;
color: white !important;
}

.nava {
background-color: #606060 !important;
padding-left: 0px !important;
padding-right: 0px !important;

}

.ordhisnv {
background: #f4f7fc;
}

.timlinv {
text-align: center;
padding-top: 50px;
padding-bottom: 40px;
font-weight: 700;

}

/* order_history.php css Start */

.timeline {
      position: relative;
      padding: 40px 0;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #4e73df;
      transform: translateX(-50%);
    }

    .timeline-entry {
      position: relative;
      width: 45%;
      padding: 15px 20px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.06);
      opacity: 0;
      transform: translateY(50px);
      transition: 0.6s ease-in-out;
    }

    .timeline-entry.active {
      opacity: 1;
      transform: translateY(0);
    }

    .timeline-entry:nth-child(odd) {
      left: 1%;
      margin-right: 60px;
    }

    .timeline-entry:nth-child(even) {
      left: 48.6%;
      margin-left: 60px;
    }

    .timeline-entry::before {
      content: "";
      position: absolute;
      top: 20px;
      width: 20px;
      height: 20px;
      background: #4e73df;
      border-radius: 50%;
      box-shadow: 0 0 12px #4e73df, 0 0 20px #4e73df;
      animation: pulseDot 2s infinite ease-in-out;
      z-index: 1;
    }

    .timeline-entry:nth-child(odd)::before {
      right: -50px;
    }

    .timeline-entry:nth-child(even)::before {
      left: -50px;
    }

.timeline-icon {
  width: 50px;
  height: 50px;
  background: #4e73df;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  margin-bottom: 15px;
  animation: bounceIcon 2s infinite ease-in-out;
}

.timeline-entry:hover {
  background: #eef3ff;
  box-shadow: 0 10px 30px rgba(78, 115, 223, 0.2);
}

.timeline-time {
font-size: 0.8rem;
color: #888;
margin-top: 10px;
font-family: 'Lato', sans-serif !important;

}

@keyframes bounceIcon {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes pulseDot {
  0% {
    box-shadow: 0 0 8px rgba(78, 115, 223, 0.7), 0 0 16px rgba(78, 115, 223, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(78, 115, 223, 1), 0 0 25px rgba(78, 115, 223, 0.6);
  }
  100% {
    box-shadow: 0 0 8px rgba(78, 115, 223, 0.7), 0 0 16px rgba(78, 115, 223, 0.3);
  }
}


/* order_history.php css exit  */

.ordtsnv {
font-family: 'Roboto Slab', serif !important;
font-weight: bold;
letter-spacing: .5px;

}

.prtstsrdnv11 {
background-color: #990000;
padding: 3px 6px 4px 6px;
border-radius: 30px;
color: white;
letter-spacing: 1px;
margin: 0px;

}

.prtstsorngnv11 {
background-color: #FF8000;
padding: 3px 4px 4px 4px;
border-radius: 30px;
color: white;
letter-spacing: 1px;
margin: 0px;
}

.prtstsgrnnv11 {
background-color: #006633;
padding: 3px 4px 4px 4px;
border-radius: 30px;
color: white;
letter-spacing: 1px;
margin: 0px;
}

.prtstsbrwnv11 {
background-color: #795548;
padding: 3px 4px 4px 4px;
border-radius: 30px;
color: white;
letter-spacing: 1px;
margin: 0px;
}

.ordvwnv11 td {
vertical-align: middle !important;

}

.accnv {
font-family: 'Lato', sans-serif !important;
font-size: 13px; 
color: #990000;

}

/* Wallet CSS Start */

.wallet-container { 
padding:15px; 
position:relative; 

}
.wallets { 
display:flex; 
gap:10px; 
font-family: 'Lato', sans-serif !important;
letter-spacing: .4px;

}

.wallet {
width:150px; 
border-radius:4px; 
color:#fff;
font-size:14px;
font-weight:600; 
text-align:center; 
padding:4px 2px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
position:relative; 
overflow:hidden;
transition: transform 0.2s;
}

.wallet span { 
display:block; 
font-size:12px; 
opacity:0.9; 

}

.vikrant_ktk { 
background:#1d3557;
}

.renprints {
background:#ff006e;
}

.nishant { 
background:#8338ec;
}

.sonvik {
background-color: #006400;
}

.nihson {
background-color: #2F4F4F;
}

.csh_nishant {
background: #CC6600;
}

.csh_vikrant {
background: #99004C;
}

.csh_naresh {
background: #008080;
}

.totalwallet {
background-color: #CC0000;
}

  /* Shimmer */
.shimmer::before {
content:""; 
position:absolute; 
top:0; 
left:-150%; 
width:150%; 
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.6),transparent);
animation: shimmerSweep 1s linear forwards; 
border-radius:12px;
}

@keyframes shimmerSweep { 100% { left:150%; } }

/* Shake animation */
.shake {
animation: shakeAnim 0.6s;
}
  
@keyframes shakeAnim {
    0% { transform: translateX(0); }
    15% { transform: translateX(-5px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.rldbtnnv {
margin-top: 22px;
padding-left: 0px !important;
}

.reload_btns {

top:28px; 
right:30px; 
width:32px; 
height:32px; 
border-radius:50%;
border:none; 
background:#1d3557; 
color:#fff; 
font-size:18px; 
cursor:pointer;
}

.swing {
animation: swingAnim 0.6s linear;

}
  
@keyframes swingAnim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }

}

/* Wallet CSS EXIT */

.edtamtnv {
background-color: #990000 !important;
color: white !important;
font-family: 'Poppins', sans-serif !important;
font-size: 12px !important;
letter-spacing: .6px;
padding: 1px 5px !important;
margin-left: 30px;
transition-duration: .2s;
}

.edtamtnv:hover , .edtamtnv:focus {
background-color: #CC0000 !important;
transition-duration: .2s;
}

.updtamtnv {
background-color: #006600 !important;
color: white !important;
font-family: 'Poppins', sans-serif !important;
font-size: 12px !important;
letter-spacing: .6px;
padding: 1px 5px !important;
margin-left: 30px;
transition-duration: .2s;
}

.updtamtnv:hover , .updtamtnv:focus {
background-color: #098909 !important;
transition-duration: .2s;
}

/* Toggle Style */
.toggle{
    display:inline-flex;
    border-radius:2px;
    overflow:hidden;
}

.toggle input{
    display:none;
}

.toggle label{
    padding:5px 12px;
    cursor:pointer;
    background:#ddd;
    transition:.3s;
}

/* YES Checked → Green */
.toggle input[value="1"]:checked + label{
background:#00994c;
color:#fff;
padding:6px 20px;

}

/* NO Checked → Red */
.toggle input[value="0"]:checked + label{
background:#CC0000;
color:#fff;
padding:6px 20px;

}

.toggle label:hover{
opacity:0.9;
}

.ctfnd{
border-radius: 4px;
padding: 2px 5px;
background-color: #009900;
color: white;
margin-left: 5px;
font-size: 15px;

}

.ctntfnd{
border-radius: 4px;
padding: 2px 6px;
background-color: #CC0000;
color: white;
margin-left: 5px;
font-size: 15px;

}

.ctntavbl{
border-radius: 4px;
padding: 2px 5px;
background-color: #FFFF00;
color: black;
margin-left: 5px;
font-size: 15px;

}

.cterrmsg {
font-family: 'Lato', sans-serif !important;
color: #990000;
margin-left: 5px;
font-size: 14px;

}

.eko5 {
color: white;
font-family: 'Roboto Slab';
letter-spacing: 1px;
font-size: 25px;
text-align: center !important;

}