@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.count-wrapper {
  border-radius: 12px;
  background: #fff;
  padding:20px 25px;
  margin-bottom:16px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.count-header {
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; 
  margin-bottom:5px;
}

.remaining-days {
  color: #1DA25F;
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; 
  margin-bottom:12px;
}

.count-progress {
  display:flex;
  align-items: center;
  margin-bottom:16px
}

.count-progress-wrap {
  width:100%;
  height:10px;
  background:#1DA25F50;
  border-radius:5px;
  overflow:hidden
}

.count-progress-scale {
  height:inherit;
  background:#1DA25F;
  width:64%
}

.count-question {
  width:16px;
  height:16px;
  background-image:url('https://img.icons8.com/material-rounded/16/C70000/question-mark.png');
  margin-left:8px;
  cursor:help;
  position:relative;
}

.count-question:after {
  content:attr(title-text);
  position:absolute;
  right:0;
  top:-35px;
  background:#fff;
  padding:5px 10px;
  white-space:nowrap;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  border-radius:5px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; 
  opacity:0;
  transition:all .3s;
  pointer-events:none;
}

.count-question:hover:after {
  opacity:1
}

.count-wrapper button {
    border-radius: 5px;
    border: none;
    padding: 10px 20px;
    color: #fff;
    background: #1DA25F;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-align: left;
    position: relative;
    transition: 0.3s transform;
    width:fit-content;
    display:none;
}

.count-wrapper button:hover {
    transform: translateY(-1px);
}

.count-wrapper .xdget-productTiming {
	display:none;
}