/* Progress bar in card */
@font-face {
    font-family: 'LarabieCompressedBold';
    src: url('../font/Larabiefont-Compressed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
/* @font-face {
    font-family: 'LarabieCompressedBold';
    src: url('fonts/Larabiefont-Compressed-Bold.woff2') format('woff2'),
         url('fonts/Larabiefont-Compressed-Bold.woff') format('woff'),
         url('fonts/Larabiefont-Compressed-Bold.ttf') format('truetype');
} */

.progress-wrapper{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .progress-track{
    flex:1;
    height:18px;
    background:var(--track);
    border-radius:999px;
    overflow:hidden;
    position:relative;
    background: #fcb800;
  }

  .progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--fill-start),var(--fill-end));
    border-radius:999px;
    transition:width 900ms cubic-bezier(.2,.9,.3,1);
    box-shadow:0 4px 10px rgba(6,11,64,0.08) inset;
    background: #000000;
    float: right;
  }

  .progress-info{
    min-width:64px;
    text-align:center;
    font-weight:700;
    color:var(--muted);
    font-size:1.4rem;
  }
.limitotr {
	display: flex;
	align-items: center;
	font-size: 16px;
	background: #e7e7e7;
	padding: 20px;
	border-radius: 10px;
  margin-bottom: 40px;
}

  /* small screens */
  @media (max-width:420px){
    .progress-info{ min-width:56px; font-size:0.85rem; }
  }

/**************   New Created Card Css   *****************/
.card {
	border-radius: 11px;
	padding: 30px;
	box-sizing: border-box;
	position: relative;
	color: var(--accent);
	overflow: hidden;
  background-image: url('../images/background.png');
  background-color: #171717;
	/*background: radial-gradient(900px 900px at 15% 70%, rgba(255,255,255,0.02), transparent 10%), radial-gradient(700px 700px at 85% 30%, rgba(255,255,255,0.02), transparent 10%), linear-gradient(180deg, #151515 0%, #0f0f0f 100%);*/
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  width: 465px;
  background-size: cover;
  background-repeat: no-repeat;
}

/* top-right badge */
.top-right {
  position:absolute;
  right:48px;
  top:40px;
  display:flex;
  gap:12px;
  align-items:center;
}

.jiologo {
	width: 66px;
}

.second-row {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chip-img {
	display: inline-block;
}
.chip-wifi img{
  width: 22px;
}
.chip-img img {
	width: 46px;
	height: auto !important;
}

.card-numbers {
	margin-top: 10px;
	font-family: var(--digit-font);
	/* font-size: 47px; */
  font-size: 29px;
	letter-spacing: 6px;
	color: #FFF;
  /* font-family: 'LarabieCompressedBold', Arial, sans-serif; */
}

.bottom-row {
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bottom-row .card-holder-otr {
	width: 40%;
}

.bottom-row .expiry .label,
.bottom-row .card-holder-otr .card-holder{
  font-size: 13px;
  color: #FFFBFB;
}

.bottom-row .expiry .date,
.bottom-row .card-holder-otr .name{
  font-weight: 500;
  font-size: 17px;
  color: #FFFBFB;
}
.right-bottom .muted.small img {
	width: 50px;
}
@media only screen and (max-width: 767px) {
  .card {
      width: 100%;
      max-width: 430px;
      padding: 20px;
  }
  .card-numbers {
      font-size: 23px;
  }
  .bottom-row .card-holder-otr {
      width: 35%;
  }
  .bottom-row {
      margin-top: 20px;
      align-items: flex-start;
  }
  .second-row {
    margin-top: 15px;
  }
  .bottom-row .expiry .date, .bottom-row .card-holder-otr .name {
      font-size: 14px;
  }
}