.form-group .input-group > span {
   position: absolute;
   right: 15px;
   font-size: 18px;
   top: 12%;
   /* transform: translateY(-50%); */
   opacity: 0.5;
   cursor: pointer;
   z-index: 4;
}
.form-group .input-group > span.fa-eye-slash {
   opacity: 1;
   color: darkcyan;
}

.page_container {
   background-color: #fff;
   border-radius: 10px;
   border: none;
   padding: 20px;
   position: relative;
   margin-bottom: 30px;
   box-shadow: 0 0.3rem 2rem rgba(90, 97, 105, 0.08), 0 0.9rem 1.4rem rgba(90, 97, 105, 0.1),
      0 0.2rem 0.5rem rgba(90, 97, 105, 0.08), 0 0.1rem 0.18rem rgba(90, 97, 105, 0.1);
}

/* Order track detail  */

.tracking-wrapper {
   margin: 10px 30px;
   padding: 0;
}
.tracking * {
   padding: 0;
   margin: 0;
}
.tracking-wrapper .tracking {
   position: relative;
   max-width: 600px;
   width: 100%;
   margin-inline: auto;
}
.tracking .empty-bar {
   background: #ddd;
   position: absolute;
   width: 90%;
   height: 6px;
   top: 40%;
   margin-left: 5%;
}
.tracking .color-bar {
   background-color: var(--primary);
   position: absolute;
   height: 20%;
   top: 40%;
   margin-left: 5%;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transition: all 0.5s;
   -o-transition: all 0.5s;
}
.tracking ul {
   display: flex;
   justify-content: space-between;
   list-style: none;
}
.tracking ul > li {
   background: #ddd;
   text-align: center;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   z-index: 1;
   background-size: 70%;
   background-repeat: no-repeat;
   background-position: center center;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transition: all 0.5s;
   -o-transition: all 0.5s;
   display: inline-block;
   position: relative;
   width: 35px;
}
.tracking ul > li .el {
   position: relative;
   /* margin-top: 100%; */
   width: 35px;
   aspect-ratio: 1/1;
}
.tracking ul > li .el i {
   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   color: #fff;
   font-size: 100%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
}
.tracking ul > li .txt {
   position: absolute;
   /* top: 120%; */
   left: -50%;
   text-align: center;
   line-height: 26px;
   /* width: 250%; */
}
.tracking .progress-0 .color-bar {
   width: 00%;
}
.tracking .progress-1 .color-bar {
   width: 15%;
}
.tracking .progress-2 .color-bar {
   width: 30%;
}
.tracking .progress-3 .color-bar {
   width: 45%;
   background-color: var(--second);
}
.tracking .progress-4 .color-bar {
   width: 60%;
   background-color: var(--second);
}
.tracking .progress-5 .color-bar {
   width: 75%;
   background-color: var(--second);
}
.tracking .progress-6 .color-bar {
   width: 90%;
   background-color: var(--second);
}
.tracking .progress-7 .color-bar {
   width: 90%;
   background-color: var(--green);
}

.tracking
   :is(.progress-0, .progress-1, .progress-2, .progress-3, .progress-4, .progress-5, .progress-6, .progress-7)
   > ul
   > li.bullet-1 {
   background-color: var(--primary);
}

.tracking :is(.progress-2, .progress-3, .progress-4, .progress-5, .progress-6, .progress-7) > ul > li.bullet-2 {
   background-color: var(--second);
}

.tracking :is(.progress-4, .progress-5, .progress-6, .progress-7) > ul > li.bullet-3 {
   background-color: var(--second);
}
.tracking :is(.progress-6, .progress-7) > ul > li.bullet-4 {
   background-color: var(--blue);
}
.tracking .progress-7 > ul > li:is(.bullet-1, .bullet-2, .bullet-3, .bullet-4) {
   background-color: var(--green);
}

.tracking
   :is(.progress-1, .progress-2, .progress-3, .progress-4, .progress-5, .progress-6, .progress-7)
   > ul
   > li.bullet-1
   .el
   i {
   display: block;
}

.tracking :is(.progress-3, .progress-4, .progress-5, .progress-6, .progress-7) > ul > li.bullet-2 .el i {
   display: block;
}

.tracking :is(.progress-5, .progress-6, .progress-7) > ul > li.bullet-3 .el i {
   display: block;
}

.tracking .progress-7 > ul > li.bullet-4 .el i {
   display: block;
}

.tracking :is(.progress-1, .progress-2, .progress-3, .progress-4, .progress-5, .progress-6, .progress-7) > ul > li.bullet-1 .txt {
   color: var(--blue);
}

.tracking :is(.progress-3, .progress-4, .progress-5, .progress-6, .progress-7) > ul > li.bullet-2 .txt {
   color: var(--second);
}

.tracking :is(.progress-5, .progress-6, .progress-7) > ul > li.bullet-3 .txt {
   color: var(--second);
}

.tracking .progress-7 > ul > li.bullet-4 .txt {
   color: var(--green);
}

/* demo */
.controls {
   margin: 90px 30px 30px;
   display: flex;
   flex-wrap: wrap;
   /* flex-direction: column; */
   justify-content: space-between;
   align-items: center;
}
.controls > div {
   display: flex;
   justify-content: flex-start;
   align-items: space-between;
   margin: 0;
   padding: 0;
}
.controls p {
   border: 0;
   line-height: 20px;
   padding: 10px 15px;
   font-size: 0.8rem;
   text-transform: uppercase;
}

.controls #step {
   width: 40px;
   border: none;
   outline: none;
}

.controls button {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 30px;
   border: none;
   background: var(--blue);
   color: #fff;
   border-radius: 50px;
   transition: all 0.3s;
}

.controls button:hover {
   box-shadow: 0px 2px 12px #ddd;
}

.controls #input_file {
   display: none;
}

.controls button:nth-child(1) {
   margin-right: 12px;
}
.controls button i {
   font-size: 1rem;
   margin: 0 5px;
}
.controls button#prev {
   display: none;
   /* padding-right: 30px; */
}

.controls button:hover,
.controls button:focus {
   outline: none;
   background-color: var(--green);
}