/* Progress Bar  */
.dt-assessment .step .progress {
  height: 8px;
  background: #ECF3FF;
}
.dt-assessment .step .progress .progress-bar {
  border-radius: 15px;
}
/* Smile Emoji */
.dt-assessment .emoji-radio{
  display: flex;
  flex-wrap: wrap;
}
.dt-assessment .ans-body.emoji-radio .col {
  display: flex;
  flex-direction: column;
}
.dt-assessment .emoji-radio .sml-check {
  width: 74px;
  height: 70px;
  margin: 0 auto;
  background: #ECF3FF;
  border-radius: 100%;
  padding-top: 8px;
}
.dt-assessment .emoji-radio .closecheck{
    display: none;
}
.dt-assessment .emoji-radio input[type="radio"]:checked+label .opencheck {
    display: none;
}
.dt-assessment .emoji-radio input[type="radio"]:checked+label .closecheck {
    display: block;
}
.dt-assessment .ans-body .col label{
    overflow: hidden;
    position: relative;    
    border: 1px solid #ECF3FF;
    padding: 8px 20px;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.dt-assessment .ans-body .imgbgchk:checked + label>.tick_container{
    opacity: 1;
}
/* ANIMATION */
.dt-assessment .ans-body .imgbgchk:checked+label {
  border: 1px solid #0565FF;
}
.dt-assessment .ans-body label .tick_container h6{
  color: #6A6A6A;
}
.dt-assessment .ans-body .imgbgchk:checked+label .tick_container h6{
  color: #0565FF;    
  font-family: 'Graphik Web Medium';
}
/* End of Smile Emoji */
/* Range Button  */
.dt-assessment .sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 7px;
  margin-top: -9px;
}
.dt-assessment .sliderticks span {
  display: flex;
  justify-content: center;
  width: 3px;
  height: 10px;
  background: #ECF3FF;
  line-height: 40px;
  font-size: 20px;
  padding-top: 16px;
  color: #314351;
  border-radius: 8px;
}
.dt-assessment .kfrange input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  position: relative;
  appearance: none; 
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  /*  overflow: hidden;  remove this line*/
  height: 5px;
  background: #ECF3FF;
}
/* Thumb: webkit */
.dt-assessment .kfrange input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 17px;
  width: 17px;
  background-color: #0565FF;
  border-radius: 50%;
  border: none;
  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}
/* Thumb: Firefox */
.dt-assessment .kfrange input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  background-color: #f50;
  border-radius: 50%;
  border: none;
  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}
/* Hover, active & focus Thumb: Webkit */
.dt-assessment .kfrange input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(236,243,255,1)
}
.dt-assessment .kfrange input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(236,243,255,2)
}
.dt-assessment .kfrange input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(236,243,255,2)
}
/* Hover, active & focus Thumb: Firfox */
.dt-assessment .kfrange input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(236,243,255,1)
}
.dt-assessment .kfrange input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(236,243,255,2)
}
.dt-assessment .kfrange input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(236,243,255,2)
}
/* Range Button End  */
.dt-assessment .ans-body .form-check-input{
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 5px;
}
.dt-assessment .ans-body .form-check {
  margin-bottom: 16px;
}
.dt-assessment .ans-body .form-check label {
  font-size: 20px;
  color: #6A6A6A;
  line-height: 30px;
  margin-left: 8px;
  cursor: pointer;
  font-family: 'Graphik Web Regular';
}
.dt-assessment .ans-body .form-check input[type="radio"]:checked+label {
  color: #0565FF;
}
/* Result Page  */
/* Result Page IOT progress bar design  */

{# IOT Card  #}
.iot_card {
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--grayscale-ash-300, #F1F3F5);
    padding: 16px;
}
{# Result  #}
.iot-result-bg.position-absolute {
    z-index: -1;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
.iot-result-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#iot-thank-you {
    border-radius: 12px;
    background: #F9FAFA;
}


.iot-circle-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  width: 110px;
  height: 110px;
}

.iot-circle-card svg {
  position: relative;
  width: 110px; /* Changed width to 110px */
  height: 110px; /* Changed height to 110px */
  transform: rotate(-90deg);
}

.iot-circle-card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #F8D6ED;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease; /* Added transition for smooth animation */
}

.iot-circle-card.iot_blue svg circle {
  stroke: #ECF3FF;
}

.iot-circle-card.iot_orange svg circle {
  stroke: #FBE5B8;
}

.iot-circle-card.iot_green svg circle {
  stroke: #E1F4E0;
}

.iot-circle-card svg circle:last-of-type {
  stroke-dasharray: 346px; /* Adjusted stroke-dasharray based on the new circle radius */
  stroke-dashoffset: calc(346px - (346px * var(--percent)) / 100); /* Adjusted stroke-dashoffset based on the new circle radius */
  stroke: #C72C91;
  animation: animateProgress 2s forwards; /* Added animation for progress */
}

.iot-circle-card.iot_blue svg circle:last-of-type{
  stroke: #0565FF;
}

.iot-circle-card.iot_orange svg circle:last-of-type{
  stroke: #F58220;
}

.iot-circle-card.iot_green svg circle:last-of-type{
  stroke: #4AA147;
}

.iot-circle-card .number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Keyframes for the animation */
@keyframes animateProgress {
  0% {
    stroke-dashoffset: 346px; /* Adjusted stroke-dashoffset based on the new circle radius */
  }
  100% {
    stroke-dashoffset: calc(346px - (346px * var(--percent)) / 100); /* Adjusted stroke-dashoffset based on the new circle radius */
  }
}
/* QA Slider Animation  */
.dt-assessment .qa-slide{
  /* for chrome and safari*/
 -webkit-animation-duration: 0.7s;
 -webkit-animation-name: qaslidein;
 /*for firefox*/
 -moz-animation-duration: 0.7s;
 -moz-animation-name: qaslidein;
   /* for opera*/
 -o-animation-duration: 0.7s;
 -o-animation-name: qaslidein;
   /* Standard syntax*/
 animation-duration: 0.7s;
 animation-name: qaslidein;
}
@-webkit-keyframes qaslidein {
   from {
       margin-left: 100%;
       width: 100%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}

@-moz-keyframes qaslidein {
   from {
       margin-left: 100%;
       width: 100%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}
@-o-keyframes qaslidein {
   from {
       margin-left: 100%;
       width: 100%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}
 @keyframes qaslidein {
   from {
       margin-left: 100%;
       width: 100%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}
/* QA Slider Animation End  */

@media screen and (min-width: 576px){
  #assessmentPopupFirst .modal-dialog.modal-custom {
      max-width: 500px;
  }
}

/* Tab  */
@media screen and (min-width: 1200px){
  .iot-result-bg.position-absolute {
      top: 50%;
      transform: translateY(-50%);
  }
  #iot-bg-color{
    height: 100%;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1380px){
  .iot_card {
    padding: 12px;
    min-height: 154px;
  }
  .iot_card_text {
    padding-left: 12px;
  }
}
/* Mobile  */
@media screen and (min-width: 768px) and (max-width: 1280px){
  .dt-assessment .ans-body .col label{
    padding: 8px 16px;
  }
  .dt-assessment .ans-body label .tick_container h6 {
    font-size: 18px;
  }
}
@media screen and (max-width: 1199px){
  .iot_card_text {
    text-align: start;
  }
  #iot-bg-color{
    height: 670px;
  }
}
/* Mobile  */
@media screen and (max-width: 767px){
  /* Range Buton  */
  .dt-assessment .ans-body label .tick_container h6 {
    font-size: 16px;
  }
  #iot-bg-color {
    height: 380px;
  }
}