@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;

}


body{
    max-height: 100vh;
    background: #F6F7F7;
}


.nav-btn {
    background: #CECECE;
    color: #333333;
    border-radius: 5;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    padding: 12px 25px;
  }
  
  a.nav-btn {
    text-decoration: none;
  
  }
  
  .nav-btn:hover {
    background: #1355ff;
    transition-duration: 0.4s;
  }
  
  .nav-btn:active {
    transition-duration: 0.4s;
    background: #003ddb;
  }
  




.main-heading{ 
    font-size: 20px;
    font-weight: bold;
    color: #292D32;
}







.card .box-info img{
    max-height: 30px;
}


.card .icon_bg {
    background: #E3E6FF;
    width: max(3vw, 42px);
    height: max(3vw, 42px);
    border-radius: 10px;
}

.box-details h2{
    font-size: max(1.6vw, 16px);
    color: #292D32;
    font-weight: 600;
}



.box-details p{
    font-size: max(0.9vw, 12px);
    color: #61666C;
    font-weight: normal;
}


.card-title{
    font-size: max(1vw, 16px);
    color: #292D32;
    font-weight: 500;
    }


.progreess-box-right .card-title{
font-size: max(1vw, 16px);
color: #292D32;
font-weight: 600;
}


.progreess-box-right h2{
    font-size: max(1.6vw, 16px);
    color: #292D32;
    font-weight: 600;
    margin-bottom: 0;
}




.ne-nutrition-distribution {
    position: relative;
    padding-bottom: 65%;
    height: 0;
    overflow:hidden;
}
.ne-nutrition-distribution__chart {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:80%;
}

.progreess-box-info h2{
    font-size: max(1.6vw, 28px);
    color: #292D32;
    font-weight: 600;

}



.delivery-info .green-box{
    width: 20px;
    height: 13px;
    background-color: #49C288;
 margin-right: 6px;

}

.delivery-info .yellow-box{
    width: 20px;
    height: 13px;
    background-color: #FFAB48;
 margin-right: 6px;

}

.delivery-info .blue-box{
    width: 20px;
    height: 13px;
    background-color: #4169FF;
 margin-right: 6px;

}


.info-style{
    font-size: 16px;
}



.card .arrow_icon_bg {
    background: #fff;
    width: 30px;
    height: 28px;
    border-radius: 3px;
}



.input-box input {
    width: fit-content;
    border: none;
    outline: none;
    font-size: max(1vw, 14px);
    position: relative;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #333333;
    font-weight: 600;
  }
  
  .input-box input::-webkit-calendar-picker-indicator {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    position: absolute;
    background: url(../images/calender-icon.png) no-repeat;
    background-position: calc(100% - 10px);
    background-size: 20px;
        cursor: pointer;
  }


.left-box {width: 110px;}






@media screen and (max-width: 1440px) {

.card .box-info img{
    max-height: 25px;
}
}


@media screen and (max-width: 803px) {
    .custom_fill_flex{
        flex: 1;
    }

}

@media screen and (max-width: 600px) {
    .card {
        --bs-card-spacer-y: 0.8rem;
        --bs-card-spacer-x: 0.8rem;
    
    }

    .nav-btn {
        font-size: 14px;
        padding: 10px 20px;
      }




    

}
    


@media screen and (max-width: 411px) {




.card {
    --bs-card-spacer-y: 0.5rem;
    --bs-card-spacer-x: 0.5rem;
   
}

.card .box-info img{
    height: 22px;
}


.nav-btn {
    font-size: 14px;
    padding: 10px 20px;
  }



  .delivery-info .green-box{
    width: 13.5px;
    height: 8px;


}

.delivery-info .yellow-box{
    width: 13.5px;
    height: 8px;


}

.delivery-info .blue-box{
    width: 13.5px;
    height: 8px;


}



  .info-style{
    font-size: 13px;
}




.ne-nutrition-distribution {
    padding-bottom: 80%;

}

}



@media screen and (max-width: 375px) {
    .card {
        --bs-card-spacer-y: 0.4rem;
        --bs-card-spacer-x: 0.4rem;
    
    
    }
    
    .nav-btn {
        font-size: 14px;
        padding: 5px 10px;

      }

      .ne-nutrition-distribution {
        padding-bottom: 80%;
    
    }

}





