/* ####################################### Checklists Page - Webpage - START ####################################### */
.checklist-webpage .checklist-scale-item {
  background-color: #f0f0f0;
  padding: 12px 20px 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.checklist-webpage .checklist-scale-item:not(:last-child)::after {
  position: absolute;
  content: "";
  z-index: 1;
  width: 2rem;
  height: 2rem;
  background-color: inherit;
}
@media (min-width: 768px) {
  .checklist-webpage .checklist-scale-item:not(:last-child)::after {
    top: 50%;
    transform: translateY(-50%);
    right: -1.3rem;
    clip-path: polygon(25% 25%, 75% 50%, 75% 50%, 25% 75%);
  }
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-scale-item:not(:last-child)::after {
    bottom: -1.1rem;
    left: 1.1rem;
    clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 50% 75%);
  }
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-scale-item {
    flex: 100%;
  }
}
.checklist-webpage .checklist-scale-item .num {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.checklist-webpage .checklist-scale-1 .num {
  background-color: #E72328;
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-scale-1 {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
}
@media (min-width: 768px) {
  .checklist-webpage .checklist-scale-1 {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
  }
}
.checklist-webpage .checklist-scale-2 .num {
  background-color: #326de9;
}
.checklist-webpage .checklist-scale-3 .num {
  background-color: #F89B1F;
}
.checklist-webpage .checklist-scale-4 .num {
  background-color: #1A8E42;
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-scale-4 {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
}
@media (min-width: 768px) {
  .checklist-webpage .checklist-scale-4 {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }
}
.checklist-webpage .checklist-ratting-container {
  border: 1px dashed #f0f0f0;
  padding: 40px;
  position: relative;
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-ratting-container {
    padding: 40px 20px;
  }
}
.checklist-webpage .checklist-ratting-container .title-txt {
  top: -12px;
  position: absolute;
  left: 12px;
  background: #ffffff;
  padding: 0 10px;
}
@media (min-width: 992px) {
  .checklist-webpage .checklist-ratting-container .title-txt {
    top: -14px;
    left: 50px;
  }
}
.checklist-webpage .checklist-ratting-container .check-rating-item {
  padding: 15px 30px;
  background: rgba(238, 238, 241, 0.5019607843);
  border-radius: 0.5rem;
  line-height: normal;
  min-height: 100%;
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-ratting-container .check-rating-item {
    padding: 1rem;
  }
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 {
  display: flex;
  align-items: start;
  gap: 1rem;
  min-height: 47px;
}
@media (max-width: 767.98px) {
  .checklist-webpage .checklist-ratting-container .check-rating-item .bx1 {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-title {
  margin-right: auto;
  color: #1E1C4A;
  align-self: center;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx {
  background: #ffffff;
  padding: 0 30px 0 45px;
  height: 37px;
  margin: 5px 0;
  margin-left: 25px;
  border: 1px solid #dddddd;
  position: relative;
  color: #f0f0f0;
  font-size: 18px;
  border-radius: 50px;
  display: flex;
  align-items: center;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-1 .rate-selected-num {
  background-color: rgb(250.2, 211, 212);
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-1 .rate-star-list .rate-star:first-child .bi-star::before {
  content: "\f586";
  color: #E72328;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-2 .rate-selected-num {
  background-color: rgb(214, 225.8, 250.6);
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-2 .rate-star-list .rate-star:nth-child(-n+2) .bi-star::before {
  content: "\f586";
  color: #326de9;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-3 .rate-selected-num {
  background-color: rgb(253.6, 235, 210.2);
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-3 .rate-star-list .rate-star:nth-child(-n+3) .bi-star::before {
  content: "\f586";
  color: #F89B1F;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-4 .rate-selected-num {
  background-color: rgb(209.2, 232.4, 217.2);
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx.rating-4 .rate-star-list .rate-star:nth-child(-n+4) .bi-star::before {
  content: "\f586";
  color: #1A8E42;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx .rate-selected-num {
  background-color: #f0f0f0;
  width: 47px;
  height: 47px;
  line-height: 47px;
  flex: 0 0 auto;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  left: -25px;
  top: -5px;
  color: #999;
  box-shadow: -1px 0px 1px #ccc;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx .rate-star-list {
  gap: 15px;
  display: flex;
  align-items: center;
  color: #ccc;
}
.checklist-webpage .checklist-ratting-container .check-rating-item .bx1 .rating-bx .rate-star-list .rate-star {
  cursor: pointer;
}

/* ####################################### Checklists Page - Webpage - END ####################################### */