body{
  background:#fff;
  color:#000;
  font-family: 'Poppins', sans-serif;
}

.side-navbar {
  width: 350px;
  height: 100%;
  position: fixed;
  margin-left:0px;
  background-color: #fff;
  transition: 0.4s;
  border: 1px solid #d7d7d7;
  top: 15px;
  /* box-shadow: 4px 0px 0px #00000029;*/
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
  background-color: #ffffff26;
}

.dashboard-container {
  transition: 0.4s;
  padding:15px 50px 40px;
}

.active-nav {
  margin-left:-400px;
}

/* for main section */
.active-cont {
  margin-left:350px;
}

#menu-btn {
  background-color: #0477d7;
  color: #fff;
  margin-left: -50px;
  position: fixed;
  border-radius: 0px 5px 5px 0px;
  top: 15px;
  cursor: pointer;
  padding: 7px;
}

.dashboard-nav li a.logo img{
  width:auto;
  height:65px;
  margin: 0px auto;
}

.dashboard-nav li a{
  padding: 10px 30px;
    display: block;
    text-decoration: none;
    font-size:16px;
    color:#112650;
}

.dashboard-nav li a img{
  margin:0px 10px 0px 0px;
  height: 20px;
}

.dashboard-nav li a i{
  padding-right:10px;
}

.dashboard-nav li{
  margin-bottom:10px;
}

.dashboard-nav li a.logo{
  padding:35px 30px;
  display: block;
}

.dashboard-nav li a.logo:hover{
  background:#fff;
}

.dashboard-nav li a.logo:hover img{
  filter:inherit;
}

.dashboard-nav li.active a.collapse-link{
  background: #0477d7;
  color: #fff;
}

.dashboard-nav li.active a img{
  filter: invert(2) brightness(5);
}

.dashboard-nav li a:hover img{
  filter: invert(2) brightness(5);
}

.dashboard-nav li a.collapse-link:hover::before{
  filter: invert(2) brightness(5);
}

.dashboard-nav li a:hover{
  background:#0477d7;
  color:#fff;
}

.dashboard-nav li.active a.collapse-link::before{
  filter: invert(2) brightness(5);
}

.dashboard-nav li a.active{
  background:#0477d7;
  color:#fff;
}

.dashboard-nav li a.active img{
  filter: invert(2) brightness(5);
}

#sidebar-user-profile {
    margin-right: -350px;
    right: 0;
    width: 350px;
    background:#fff;
    position: fixed;
    bottom: auto;
    z-index: 1000;
    box-shadow: 0 0 4px 1px rgb(0 0 0 / 25%);
    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -ms-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
    border-radius: 10px 0px 0px 10px;

}

#sidebar-user-profile.active {
    right: 350px;
    width: 350px;
    overflow-y:auto;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
  }

.inner-section-profile{
  padding:20px 20px 40px 20px;
}

.sidebar-profile h3{
  font-size:18px;
  margin-bottom: 0;
}

.edit-close-section{
  margin:0px;
  padding:0px;
  list-style:none;
  display:flex;
  align-items:center;
}

.user-profile-area{
  text-align: center;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
}

.user-profile-area span{
  text-align: left;
}

.user-profile-area .fa-user-circle{
  font-size: 55px;
  color: #858585;
  padding-right: 15px;
}

.user-profile-heading{
  width: 100%;
  float: left;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 10px;
  border-bottom: 1px solid #f1f1f1;
  background: #f0f5ff;
}

.user-profile-area img {
  margin-bottom:15px;
}

.user-profile-area h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  text-transform: capitalize;
  margin-top: 5px;
}

.user-profile-area h5{
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 400;
}

.user-profile-area span{
  text-align: left;
}

.user-contact{
  padding: 30px 15px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 25px;
  border: 1px solid #dbdcdf;
}

.signout-profile {
    display: flex;
    align-items: center;
    color: #fff;
    background: #0477d7;
    padding: 8px 15px;
    text-align: center;
    justify-content: center;
    border-radius: 5px;
    text-decoration: none;
}

.signout-profile i{
  padding-right:5px;
}

.signout-profile:hover,.signout-profile:focus{
  color:#fff;
}

.track-order-section h2{
  font-size:20px;
  font-weight:700;
  margin-bottom:10px;
}

#track-order-form{
  background: #f7f7f9;
  border-radius: 10px;
  padding: 17px 15px;
  float: left;
  width: 100%;
}


#track-order-form label{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
  display: block;
}

#track-order-form input{
  border: 1px solid #D5D5D5;
  border-radius: 10px;
  height:50px;
  font-size:13px;
  padding:15px;
  margin-bottom:15px;
  width:100%;
  display:block;
  outline:none;
}

#track-order-form button{
  float: right;
}

.btn-primary.black-btn{
  background:#000;
  border-color:#000;
}

.btn-primary.black-btn:hover{
  color:#000;
  border-color:#000;
}

.user-profile-bottom{
    margin:0 auto;
    display: block;
    width:80%;
    margin-top:20px;
}

.break-word{
  display:block;
}

/*Dashboard Heading Section Start*/

.dashboard-heding-section .col-md-12{
  display:flex;
  justify-content: space-between;
}

.dashboard-heding-section{
  margin-bottom:15px;
  background: #F9F5EC;
  padding: 15px 15px;
  border-radius: 10px 0px;
}

.dashboard-heding-section h1 {
  font-size: 19px;
  color: #112650;
  font-weight: 500;
  text-decoration: none;
  padding-left: 0;
  margin: 0;
}

.user-profile {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px;
  text-transform:capitalize;
  cursor:pointer;
}

.user-profile span{
  padding-right:5px;
}

.user-profile img{
  margin-right:10px;
}

.user-contact ul{
  margin:0px;
  padding:0px;
  list-style:none;
}

.user-contact ul li{
  margin-bottom:15px;
  position: relative;
}

.user-contact ul li:last-child{
  margin-bottom:0px;
}

.user-contact ul li a{
  font-size: 15px;
  color: #6d6a6a;
  font-weight: 400;
  text-decoration: none;
  padding-left: 30px;
}

.user-contact ul li a:hover{
  color:#6d6a6a;
}

.user-contact ul li span{
  position: absolute;
  left:0;
  top:-3px;
}

.user-contact ul li span img{
  filter: brightness(0);
}

.closebtn-user-profile{
  width: 30px;
  height: 30px;
  background: #000;
  display: block;
  border-radius: 50%;
}

.closebtn-user-profile img{
      filter: invert(2) brightness(5);
}

/*Dashboard Heading Section End*/

/*Order Map Section Start*/

.order-count{
  padding: 20px 17px;
  display: flex;
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  align-items: center;
}


.order-count h2{
  margin: 0px;
  padding: 0px;
  width: 85px;
  height: 85px;
  line-height: 74px;
  text-align: center;
  margin-right:20px;
  font-size: 30px;
  font-weight: 600;
  border: 8px solid;
  border-radius: 50%;
  background:#E4FFE438;
}

.order-count h3 {
    margin: 0px;
    padding: 0px;
    color: #112650;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    text-transform:uppercase;
}

.green-border{
  border-color:#10920C;
  color:#10920C !important;
}

.red-border{
  color:#A55006 !important;
  border-color:#A55006;
}

.orange-border{
  color:#BE8D08 !important;
  border-color:#BE8D08;
}

.light-green-border{
  color:#9BBE08 !important;
  border-color:#9BBE08;
}

.order-map {
    margin-bottom: 85px;
}

/*Order Map Section End*/

/*Order History Section Start*/

.order-heading{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:20px;
}

.order-heading h2{
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 0px;
  line-height: 30px;
  border-bottom: 2px solid #dadada;
}

.btn-primary {
    font-size: 14px;
    background-color: #0477d7;
    border-color: #0477d7;
    padding: 6px 20px;
}

.btn-primary:hover{
  background:#0477d7;
  color:#fff;
}

.btn:active{
  background-color: #0477d7 !important;
  border-color: #0477d7 !important;
}

.order-history-table{
    background: #fff;
    font-size: 13px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    overflow: hidden;
    border-color:#70707047;
    table-layout:fixed;
}

.order-history table th{
  background:#F2F2F3;
  padding: 10px;
  border:1px solid #70707047;
  border-bottom:none;
  border-top: none;
}

.order-history table td{
  border:1px solid #70707047;
  border-top:none;
  padding:15px;
}

.order-history table th:first-child{
  width:60px;
}

.order-history table th:nth-child(2){
  width: 130px;
}

.order-history table th:nth-child(3){
 width: 130px;
}

.order-history table th:nth-child(4){
 width: 450px;
}

.order-history table th:nth-child(5){
 width: 180px;
}

.order-history table th:nth-child(6){
 width: 185px;
}

.order-history table th:nth-child(7){
 width: 130px;
}



.product-table tr td{
  border:none;
  padding:0px;
  padding-bottom:15px;
}

.payment-due{
  display:block;
  color:#a55006;
  font-weight:700;
  padding-bottom: 5px;
}

.order-history {
    margin-bottom: 50px;
}

.product-table span{
  display: block;
}

.order-number-box {
    font-weight: 600 !important;
}


/*Order History Section End*/

/*Reminder Section Start*/

.reminder-table table {
    background: #fff;
    font-size: 13px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    padding: 5px;
    overflow: hidden;
    table-layout:fixed;
}

.reminder-table table th{
  background:#F2F2F3;
}

.reminder-table table th:last-child{
  width:8%;
  text-align: center;
}


.reminder-table table tr:nth-child(even) td{
  background:#FCFCFC;
}

.reminder-table{
  padding:5px;
}

.edit-icon {
    color: #C79F49;
    font-size: 18px;
    margin-right: 15px;
}

.delete-icon {
    font-size: 16px;
    color: #f00;
}

.edit-icon:hover{
  color:#C79F49;
}

.delete-icon:hover{
    color: #f00;
}
.mb-0{
  margin-bottom:0px;
}

.mb-30{
  margin-bottom:30px;
}

#sidebar-reminder {
    margin-right: -405px;
    right: 0;
    width:405px;
    background:#fff;
    position: fixed;
    height:100%;
    bottom: 0;
    overflow-y:auto;
    z-index: 1000;
    box-shadow: 0 0 4px 1px rgb(0 0 0 / 25%);
    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -ms-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;

}

#sidebar-reminder.active {
    right:405px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
  }


.sidebar-reminder {
    padding: 40px 20px;
}

.reminder-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom:40px;
}

.reminder-heading h3{
  margin:0px;
  padding:0px;
  font-size:20px;
}

#add-reminder-form .form-group label{
  font-size:13px;
  margin-bottom:10px;
  color:#000;
  font-weight:600;
  display: block;
}

#add-reminder-form input{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  height:50px;
  width:100%;
  background:#F5F5FA;
  padding:15px;
  font-size:14px;
  outline:none;
}

#add-reminder-form input:focus{
  border-color:#C79F49;
}

#add-reminder-form .form-group{
  margin-bottom:15px;
}

#add-reminder-form select{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  height:50px;
  width:100%;
  background-color:#F5F5FA;
  padding:15px;
  font-size:14px;
  outline:none;
  box-shadow:none;
}

#add-reminder-form select:focus{
  outline:none;
  border-color:#C79F49;
}

#add-reminder-form textarea{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  height:120px;
  width:100%;
  background-color:#F5F5FA;
  padding:15px;
  font-size:14px;
  outline:none;
  box-shadow:none;
}

#add-reminder-form textarea:focus{
  border-color:#C79F49;
}

.date-input{
  position: relative;
}

.date-input:after{
  content: "\f073";
  position: absolute;
  top: 42px;
  right: 15px;
  font-family: FontAwesome;
  z-index: 1;
}

#add-reminder-form .btn-primary {
    display: inline-block;
    width: 100%;
    padding: 8px 10px;
    text-transform:uppercase;
}

/*Reminder Section End*/

/*address book box section start*/

.address-book-box{
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  padding:15px;
  font-size:14px;
  height:100%;
}

.address-book-box h3{
  display: block;
  font-size:16px;
  font-weight:600;
  margin-bottom:5px;
}

.address-book-box span{
  display: block;
}

.address-book-box p{
  margin-bottom:25px;
}

.mobile-number {
    margin-top: 25px;
    margin-bottom:15px;
}

.edit-delete-btn {
  text-align: center;
}

.edit-delete-btn a{
  width:35px;
  height:35px;
  line-height:35px;
  text-align:center;
  border-radius:50%;
  display: inline-block;
}

.edit-address{
  margin-right:7px;
  border: 0.5px solid #C79F49;
  font-size:20px;
  color:#c79f49;
}

.edit-address:hover{
  background:#c79f49;
  color:#fff;
}

.delete-address{
  border: 0.5px solid #E40101;
  font-size:20px;
  color:#E40101;
}

.delete-address:hover{
  background:#E40101;
  color:#fff;
}

#add-address-sidebar {
    margin-right: -405px;
    right: 0;
    width:405px;
    background:#fff;
    position: fixed;
    height:100%;
    bottom: 0;
    overflow-y:auto;
    z-index: 1000;
    box-shadow: 0 0 4px 1px rgb(0 0 0 / 25%);
    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -ms-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;

}

#add-address-sidebar.active {
    right:405px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
  }


.add-address-sidebar {
    padding: 40px 20px;
}


#add-address-form .form-group label{
  font-size:13px;
  margin-bottom:10px;
  color:#000;
  font-weight:600;
  display: block;
}

#add-address-form input{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  height:50px;
  width:100%;
  background:#F5F5FA;
  padding:15px;
  font-size:14px;
  outline:none;
}

#add-address-form input:focus{
  border-color:#C79F49;
}

#add-address-form .form-group{
  margin-bottom:15px;
}

#add-address-form select{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  height:50px;
  width:100%;
  background-color:#F5F5FA;
  padding:15px;
  font-size:14px;
  outline:none;
  box-shadow:none;
}

#add-address-form select:focus{
  outline:none;
  border-color:#C79F49;
}

#add-address-form textarea{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  height:120px;
  width:100%;
  background-color:#F5F5FA;
  padding:15px;
  font-size:14px;
  outline:none;
  box-shadow:none;
}

#add-address-form textarea:focus{
  border-color:#C79F49;
}


#add-address-form .btn-primary {
    display: inline-block;
    width: 100%;
    padding: 8px 10px;
    text-transform:uppercase;
    margin-top: 25px;
}


/*address book box section end*/

/*My Profile Section Start*/
.my-profile-section{
  background:#fff;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  padding:35px 30px;
}

.my-profile-section .form-group{
  margin-bottom:25px;
}

.my-profile-section label{
  display: block;
  margin-bottom:15px;
  font-weight:700;
  color:#112650;
  font-size:13px;
}

.my-profile-section input{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  background:#F5F5FA;
  height: 50px;
  width:100%;
  outline:none;
  padding-left:15px;
}

.my-profile-section input:focus{
  border-color:#C79F49;
}

.my-profile-section select{
  border: 1px solid #D8D8EF;
  border-radius: 10px;
  background-color:#F5F5FA;
  height: 50px;
  width:100%;
}

.my-profile-section select:focus{
   border-color:#C79F49;
   box-shadow: none;
}

.my-profile-section .col-md-6:first-child{
  padding-right:35px;
}

.my-profile-section .col-md-6:last-child{
  padding-left:35px;
}

.btn-grp {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.btn-grp button{
  width:230px;
  height:45px;
  border-radius: 10px;
  border: 1px solid #000000;
  font-size:14px;
  text-transform:uppercase;
  font-weight: 600;
}

.clear-button{
  background:#fff;
  margin-right:50px;
}

.submit-button{
  background:#000;
  color:#fff;
}

.clear-button:hover{
  background:#000;
  color:#fff;
}

.submit-button:hover{
  background:#fff;
  color:#000;
}

/*My Profile Section End*/

/*Change Password Section Start*/

.change-password-section{
  box-shadow: 0px 0px 6px #00000029;
  border-radius: 10px;
  padding: 40px;
  background: #fff;
  margin: 0 auto;
  display: block;
  width: 40%;
  margin-top:40px;
}

.change-password-section .form-group{
  margin-bottom:25px;
}

.change-password-section label{
  font-size:13px;
  font-weight:600;
  margin-bottom:15px;
  display: block;
}

.change-password-section input{
  width:100%;
  height: 50px;
  border: 1px solid #D8D8EF;
  background-color:#F5F5FA;
  border-radius: 10px;
  font-size:13px;
  padding-left:15px;
  outline:none;
}

.otp-section input {
    width: 40px;
    height: 40px;
    margin: 0 5px;
    padding: 0px;
}


.change-password-section input:focus{
  border-color:#0477d7;
}

.change-password-section .black-btn{
  width:100%;
  display: inline-block;
  padding:8px 16px;
  height:45px;
}

#change-password-form {
  width: 100%;
  margin-right: 0;
}

.password-description {
  background: #f8f3e8;
  border-radius: 5px;
  padding: 25px;
  width:300px;
  float: left;
  display: none;
}

.password-description h3{
  font-size:14px;
  font-weight:700;
  margin-bottom:30px;
}

.password-description p{
  font-size: 13px;
  margin-bottom: 10px;
  position: relative;
  padding-left:15px;
}

.password-description p:after{
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0px;
  top: 7px;
  background: green;
  border-radius: 50%;
}

/*Change Password Section End*/

.right-align-button {
    justify-content: end;
}

/*For Vender Invoice*/

.left-vendor-invoice tr {
    display: flex;
    font-size: 16px;
    margin-bottom: 15px;
}

.left-vendor-invoice th{
    display: flex;
    justify-content: space-between;
    width: 175px;
}

.left-vendor-invoice th span{
    padding-right:10px;
}

.right-vendor-invoice tr {
    display: flex;
    font-size: 16px;
    margin-bottom: 15px;
}

.right-vendor-invoice th{
    display: flex;
    justify-content: space-between;
    width: 100px;
    min-width: 100px;
}

.right-vendor-invoice th span{
    padding-right:10px;
}

.tbl22.vendor-invoice-total td{
    border-bottom:1px solid !important;
}

.vendor-invoice-head th{
    font-size: 14px;
}

.bank-detail-row {
    display: flex;
    margin-bottom: 20px;
    font-size: 14px;
}

.bank-detail-row:last-child{
    margin-bottom:0px;
}

.bank-detail-row th{
    display: flex;
    justify-content: space-between;
    width: 155px;
}

.bank-detail-row th span{
    padding-right:5px;
}

.vendor-invoice-section{
    margin-top:30px;
}

div#printpagebutton button {
    padding: 6px 20px;
    background: #0477d7;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    border: none;
    margin-right: 15px;
}

@media(max-width:1780px){
  .change-password-section{
    width:50%;
  }
}

@media(max-width:1550px){

    .dashboard-container{
        padding:15px 15px 40px;
    }

    #menu-btn{
        margin-left: -15px;
    }

  .change-password-section {
    width: 55%;
  }
}

@media(max-width:1440px){
  .side-navbar{
    width:300px;
  }

  .active-nav {
      margin-left: -320px;
  }
  .active-cont {
      margin-left: 300px;
  }

  .date-range-section ~ .align-items-center{
    margin-top:15px;
  }
}


@media(max-width:1200px){
  body{
    margin-left:0px;
  }
  .order-history .container-fluid{
    padding:0px;
  }

  .change-password-section {
    width: 60%;
  }
}

@media(max-width:1024px){
  .change-password-section {
    width: 68%;
  }
}

@media(max-width:420px){
  .user-profile-area .fa-user-circle {
    font-size: 37px;
  }
  .user-contact ul li span img{
    height:17px;
  }
}


@media print {
.print-page-break {
  page-break-after: always;
  break-after: page;
}
.print-page-break:last-child {
  page-break-after: auto;
  break-after: auto;
}
#printpagebutton{
  display: none;
}
}

.orders-filters .btn-primary{
  padding: 6px 7px;
  font-size: 12px;
}

.ack-order-body {
  margin: 0;
  padding: 20px;
  display: flex;
  font-family: 'Poppins', sans-serif;
}

.custom-alert-wrapper {
      background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
    padding: 60px 25px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-left: 6px solid #f44336;
    max-width: 575px;
    width: 100%;
    gap: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.custom-alert-icon {
  flex-shrink: 0;
  background-color: #f44336;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-alert-body {
  flex: 1;
  padding-left: 15px;
}

.custom-alert-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #b71c1c;
  margin-bottom: 10px;
}

.custom-alert-message {
margin: 8px 0;
font-size: 16px;
color: #333;
margin-bottom: 15px;
}

.custom-alert-order {
  display: inline-block;
  background-color: #ffeaea;
  color: #d32f2f;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  font-size: 14px;
}

.custom-alert-order:hover {
  color: #d32f2f;
}

.container.acknowledge-page {
    width: 800px;
    padding: 35px;
    border-radius: 10px;
    margin-top: 80px;
    background-color: #f0f5ff;
    font-family: 'Poppins', sans-serif;
}

.logo-ack {
  margin: 0 auto;
  display: block;
  text-align: center;
  padding-bottom: 35px;
  margin-bottom: 25px;
  border-bottom: 1px dashed #d5d1d1;
}

.logo-ack img{
  height:75px;
  width:auto;
}


.acknowledge-page h1 {
    font-size: 22px;
    color: #333;
    font-weight: 600;
    text-align: left;
    padding-bottom: 5px;
    width: max-content;
    margin-bottom: 30px;
    border-bottom: 2px solid #0477d7;
    line-height: normal;
}

.input-field-ack {
    font-size: 16px;
    margin-bottom: 20px;
    color: #666;
}

.input-field-ack label {
    font-weight: 600;
    color: #666;
    margin-right: 6px;
}

.input-field-ack input {
    height: 50px;
    margin-top:20px;
}

.acknowledge-page .btn-primary {
    padding: 7px 42px;
}

.acknowledge-page .btn-primary span {
    font-size: 18px !important;
}

.acknowledge-page .update-box-start .field-head {
    width: 210px;
}

.acknowledge-page .update-box-start p{
  margin-bottom:0px;
  font-size: 16px;
  color: #666;
}

.acknowledge-page .update-box-start{
  margin-bottom:20px;
}

.acknowledge-page .update-box-start span{
  font-size:16px;
  color:#666;
}

.acknowledge-page .update-box-start input, .acknowledge-page .update-box-start select{
  height: 50px;
  font-size: 16px;
  color: #666;
}

.acknowledge-page .update-box-start input::placeholder{
  color:#666;
}

.acknowledge-page .update-box-start .field-content{
  padding-left:0px;
}

.acknowledge-page h3{
  font-size: 19px;
  text-align: center;
  line-height: 1.5;
  font-weight: 300;
  width: 90%;
  margin: 0 auto;
}

@media(max-width:840px){

  .container.acknowledge-page{
    width: 95%;
    padding: 35px;
    margin-top: 25px;
  }
  .logo-ack img {
    height: 60px;
  }
  .acknowledge-page h1 {
    font-size: 20px;
  }
  .acknowledge-page .update-box-start p{
    font-size:15px;
  }
  .acknowledge-page .update-box-start span {
    font-size: 15px;
  }
  .acknowledge-page .update-box-start input, .acknowledge-page .update-box-start select{
    height: 45px;
    font-size: 15px;
    color: #666;
}
  .input-field-ack {
    font-size: 15px;
}
.input-field-ack input {
  height: 45px;
}
}


@media(max-width:640px){
  .logo-ack img {
    height: 60px;
  }
  .container.acknowledge-page{
    padding: 35px 20px;
  }
  .acknowledge-page h1 {
    font-size: 19px;
  }
  .acknowledge-page .update-box-start .field-content{
    width:fit-content; !important;
  }
  .acknowledge-page .update-box-start:nth-child(3) .field-content{
    width:100% !important;
    margin-top:15px;
  }
  .acknowledge-page .update-box-start:nth-child(4) .field-content{
    width:100% !important;
    margin-top:15px;
  }
  .custom-alert-wrapper{
    width:85%;
    padding: 35px 25px;
  }
  .custom-alert-title{
    font-size:22px;
  }
  .custom-alert-message{
    font-size:15px;
  }
  .acknowledge-page h3 {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .custom-alert-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .custom-alert-icon {
    margin-bottom: 12px;
  }

  .custom-alert-title {
    font-size: 17px;
  }

  .custom-alert-message {
    font-size: 14px;
  }
  .logo-ack img {
    height: auto;
    width:90%;
  }
  .acknowledge-page h1 {
      font-size: 18px;
  }
  .acknowledge-page .update-box-start p {
      font-size: 14px;
  }
  .acknowledge-page .update-box-start span {
    font-size: 14px;
  }
  .acknowledge-page .update-box-start .field-head {
    width: 180px;
  }
  .acknowledge-page .btn-primary {
    padding: 5px 36px;
  }
  .acknowledge-page .btn-primary span {
      font-size: 15px !important;
  }
    .input-field-ack {
      font-size: 14px;
  }
  .input-field-ack input::placeholder{
    font-size:14px;
  }
}

.developer-otp-section input[type="number"] {
  -moz-appearance: textfield;
}

.developer-otp-section input[type="number"]::-webkit-inner-spin-button,
.developer-otp-section input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-challan{
  position: relative;
}

.print-count-background{
  background-color: rgb(255, 0, 0);
  line-height: 30px;
  color: rgb(255, 255, 255);
  border-radius: 50%;
  border: 1px solid rgb(255, 0, 0);
  text-align: center;
  position: absolute;
  right: 5px;
  top: 5px;
}

.quantity-digit{
  width: 30px;
  height: 30px;
  position: absolute;
  line-height: 30px;
  color: #fff;
  font-weight: 600;
  right: 5px;
  top: 5px;
}