@import url('https://fonts.googleapis.com/css2?family=Muli;700&display=swap');
 
:root{
    --line-border-fill:rgb(74, 166, 236) ;; 
    --line-border-empty:#e0e0e0;
}

*{
    box-sizing: border-box;
}
body{  
    font-family: "Muli",sans-serif;
    display: flex;  
    margin:0;  
    align-items: center; 
    justify-content:center; 
    height: 100vh;
} 
.container{
    text-align: center;
} 

.progress-container{
    display:flex; 
    justify-content: space-between;  
    position:relative; 
    max-width:100%;
    width:350px; 
    margin-bottom:30px;
}  

.progress-container::before{ 
    content:'';
    background-color:var(--line-border-empty);
    position:absolute;
    top:50%; 
    left:0;  
    height:4px; 
    width:100%;  
    transform: translateY(-50%); 
    z-index:-1; 
} 

 .progress{
    background-color:var(--line-border-fill) ;
    position:absolute;
    top:50%; 
    left:0;  
    height:4px; 
    width:0%;  
    transform: translateY(-50%); 
    z-index:-1; 
    transition: 0.4s ease;
} 

.circle{
    background-color: #fff; 
    color:var(--line-border-empty); 
    border-radius:50%; 
    height:30px; 
    width:30px; 
    display:flex; 
    align-items:center; 
    justify-content: center; 
    border:3px solid var(--line-border-empty); 
    transition:0.4s ease; 
} 
.circle.active{
    border-color: var(--line-border-fill) ; 
    color: var(--line-border-fill);
} 

.btn{
    background-color: var(--line-border-fill);  
    border:0;
    color:white;
    cursor:pointer; 
    padding:8px 30px; 
    font-family:inherit; 
    border-radius:2px; 
    margin:15px; 
    font-size:14px;
} 
.btn:active{
    transform:scale(0.98);
} 

.btn:focus{
    outline:0;
} 

.btn:disabled{
    background-color: #e0e0e0; 
    cursor:not-allowed;
}