/* routine checker progess css */
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: Roboto;
}

.routineCheckContainer {
   width: 100%;
   height: 100vh;
   z-index: 2000;
   background: #111111;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   padding: 40px;
   overflow: hidden;
   box-sizing: border-box;
   gap: 40px;
}

.rotating-border-svg {
   width: 175px;
   /* mobile default */
   height: 175px;
   display: block;
}

.routineLogo {
   width: 120px;
}

.routineLogo img {
   width: 100%;
   height: auto;
}

.routineImgGroup {
   width: 175px;
   height: 175px;
   position: relative;
   box-sizing: border-box;
}

.routineFrameIcon {
   position: absolute;
   bottom: 0;
   left: 13px;
   z-index: 4;
}


.routinevalueIcon {
   position: absolute;
   bottom: -10px;
   left: 0px;
   z-index: 4;
   animation: zoomInOut 4s ease-in-out infinite;
}

@keyframes zoomInOut {
   0% {
      transform: scale(1);
   }

   15% {
      transform: scale(1.10);
   }

   100% {
      transform: scale(1);
   }
}

.routinePlusIcon-1 {
   position: absolute;
   top: 6px;
   transform-origin: center center;
   animation: zoomBlink 4s ease-in-out infinite,
      blink 3s ease-in-out infinite;
   animation-delay: 0s, 0s;
}

@keyframes zoomBlink {

   0%,
   100% {
      transform: scale(1) rotate(0deg);
   }

   50% {
      transform: scale(1.3) rotate(30deg);
   }
}

.routinePlusIcon-2 {
   position: absolute;
   right: -8px;
   top: 20%;
   width: 6px;
   transform-origin: center center;
   animation: zoomBlink 4s ease-in-out infinite,
      blink 3s ease-in-out infinite;
   animation-delay: 0s, 0.7s;
}

.routineDotteIcon-1 {
   position: absolute;
   bottom: 12px;
   left: -6px;
   animation: blink 3s ease-in-out infinite;
   animation-delay: 1.4s;
}

@keyframes blink {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.2;
   }
}

.routineDotteIcon-2 {
   position: absolute;
   right: -6px;
   bottom: 20%;
   animation: blink 3s ease-in-out infinite;
   animation-delay: 2.1s;
}


.rotating-border {
   transform-origin: 87.5px 87.5px;
   animation: spin 60s linear infinite;
}

@keyframes spin {
   from {
      transform: rotate(360deg);
   }

   to {
      transform: rotate(0deg);
   }
}

.routineCircleIcon {
   position: absolute;
   z-index: 3;
}

.circleBlur {
   position: absolute;
   width: 32px;
   height: 32px;
   background: #DB9204;
   border-radius: 50%;
   filter: blur(36px);
   right: 50%;
   top: 0;
   transform: translate(40%, -57%);
}

.routineContent {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   width: 280px;
}

.routineHeadText {
   font-size: 24px;
   font-weight: 500;
   color: #FFFFFF;
}

.underLine {
   width: 72px;
   height: 1px;
   background: #F0BE49;
}

.routineSubText {
   font-size: 12px;
   font-weight: 400;
   color: #8F99A3;
   line-height: 150%;
   margin-bottom: 0;
}

.routineHelpContent {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 0.5px solid #363635;
   background: #1F1F1E;
   gap: 9px;
   padding: 12px;
   width: 280px;
   border-radius: 4px;
}

.helpIconWapper {
   width: 20px;
   height: 20px;
}

.helpIcon {
   width: 32px;
   height: 32px;
   background: #2A2419;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 26px;
}

.helpIconWapper img {
   width: 100%;
   height: auto;
}

.rightArrow {
   width: 18px;
   height: 18px;
   display: flex;
   cursor: pointer;
}

.rightArrow img {
   width: 100%;
   height: 100%;
}

.helpText {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
}

.helpHeadText {
   font-size: 12px;
   font-weight: 400;
   color: #FFFFFF;
   line-height: 14px;
   margin-bottom: 0;
}

.routineFooter {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
}

.footerNotesIcon {
   display: flex;
}
.detail > ul > li.lpMainWrapper{
   width: 200px;
   margin-right: 12px;
}
@media(max-width:767px){
   .detail > ul > li.lpMainWrapper{
      width:fit-content;
      margin-right: 2px;
   }
}
@media (min-width: 760px) {
   .routineCheckContainer {
      padding: 60px;
      gap: 10px;
   }

   .routineLogo {
      width: 240px;
   }

   .underLine {
      width: 84px;
   }

   .routineContent {
      width: 464px;
   }

   .routineHeadText {
      font-size: 32px;
   }

   .routineSubText {
      font-size: 18px;
   }

   .routineHelpContent {
      width: 437px;
   }

   .helpHeadText {
      font-size: 18px;
   }

   .helpText {
      gap: 6px;
   }
}