@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root{
  --blue: #2980b9;
  --red: rgb(205, 14, 14);
  --orange: orange;
  --black: #333;
  --white: #fff;
  --bg-color: #eee;
  --dark-bg: rgba(0, 0, 0, .7);
  --green: rgb(23, 154, 23);
  --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  --border: .1rem solid #999;
}

*{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize ;
}

html{
  font-size: 62.5%;
  max-width: 120rem;
  margin: auto auto;
  height: 100%;
}

.body{
  margin: auto auto;
  height: 100%;
}

.container{
  max-width: 120rem;
  margin: 13rem auto 0 auto;
}

section{
  padding: 2rem;
}

.heading{
  text-align: left;
  font-size: 3.5rem;
  text-transform: uppercase;
  color: var(--black);
  margin-left: 12rem;
  margin-bottom: 2rem;
}


.btn,
.option-btn,
.delete-btn{
    display: inline-block;
      /* Applied inline-block as it's common for buttons */
      width: 100%;
      /* Use this only for buttons that need full width */
      cursor: pointer;
      border-radius: 5px;
      padding: 10px;
      font-size: clamp(10px, 1vw, 20px);
      color: var(--white);
      background-color: orangered;
      text-align: center;
      margin-top: 10px;
      
      /* Adjust this as needed for specific buttons */
}

/* Specific button variations */
.option-btn {
  background-color: var(--orange);
}

.delete-btn {
  background-color: var(--red);
}

.btn:hover,
.option-btn:hover,
.delete-btn:hover{
  background-color: var(--black);
  color: white;
}

.option-btn i,
.delete-btn i{
  padding-right: .5rem;
}


.option-btn{
  background-color: var(--green);
}

.delete-btn{
  margin-top: 0;
  background-color: var(--red);
}

.btn-2{
  display: block;
  width: 100%;
  text-align: center;
  background-color: #01852d;
  color: var(--white);
  font-size: 1.7rem;
  padding: 1.2rem 3rem;
  border-radius: .5rem;
  cursor: pointer;
  margin-top: 1rem;
}

.btn-2:hover{
  background-color: var(--black);
  color: white;
}

.message{
  position: sticky;
  top: 50%;left: 0;
  z-index: 10000;
  border-radius: .5rem;
  background-color: rgb(190, 235, 243);
  padding: 1.5rem 2rem;
  margin: 0 auto;
  max-width: 18.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
}

.message span{  
  font-size: 2rem;
  color: var(--black);
}

.message i{
  font: 4.5rem;
  color: var(--black);
  cursor: pointer;
}

.message i:hover{
  color: var(--red);
}

.logo img{
  width: 20rem;
  cursor:pointer;
}

.header{
  background-color: rgb(254, 253, 253);
  position: fixed;
  width: 100vw;
  top: 0; left:0;
  z-index: 10000;
  box-shadow: 0.125rem 0.125rem 0.313rem rgb(48, 48, 48);
  padding-right: 2rem;
}


.header .flex{
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 120rem;
  margin: 0 auto;
}

.header .flex .logo{
  margin-right: auto;
  font-size: 2.5rem;
  color: var(--white);
}

.navbar{
display: flex;
}

#welcome-message>p{
  -webkit-text-fill-color: #2697f0;
  color: #2697f0;
  font-size: clamp(1rem, 2vw, 2rem);
}

.header .flex .navbar a{
  margin-left: 2.5rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--black);
}

.header .flex .navbar a:hover{
  color: var(--red);
}

.header .flex .cart {
  font-size: 4.5rem;
  color: var(--black);
}

.header .flex .cart i{
  font-size: 5rem;
  color: orangered;
  cursor: pointer;
}

.header .flex .cart:hover {
  color: var(--green);
}

.header .flex .cart-container{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
}

.header .flex span{
  position: absolute;
  top: 25%; left: 45%;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
}

#logout-icon{
  font-size: 3rem;
  margin-left: 2rem;
  color: var(--black);
}

#menu-btn{
  margin-left: 2rem;
  font-size:2.5rem;
  cursor: pointer;
  color: var(--blue);
  display: none;
}


.add-product-form{
  width: 80%;
  background-color: var(--black);
  margin: 0 auto;
  padding: 2rem;
  border-radius: .5rem;
}

.add-product-form h3{
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
}

section:nth-child(1)>form>div:nth-child(4),
section:nth-child(1)>form>div:nth-child(6){
  display: flex;
  column-gap: 3rem;
}

.add-product-form .box{
  text-transform: none;
  padding: 1.2rem 1.4rem;
  font-size: 1.7rem;
  color: var(--black);
  border-radius: .5rem;
  background-color: var(--white);
  margin: 1rem 0;
  width: 100%;
}

.add-product-form .cnt-upload-card{
  display: flex;
  justify-content: center;
}

.add-product-form .cnt-upload-card .upload-card{
  width: 18.75;
  object-fit: cover;
}

/* product list search form */

.search-product{
  width: 35%;
  display: flex;
  flex-direction: row;
}

body>div.container>section.search-bar>form>select{
  width: 15rem;
  height: 3.1rem;
  background-color: orangered;
  color: white;
  margin: .5rem 1rem;
}

/* chat icon for messenger */


.chat-icon {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 2.5rem;
  right: 1.25rem;
  background-color: #0078ff;
  /* Facebook Messenger blue */
  color: #fff;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  padding: 0.938rem;
  font-size: 1.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  /* Ensure it's on top */
}

.chat-icon-2 {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 10rem;
  right: 1.25rem;
  background-color: #0078ff;
  color: #fff;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  padding: 0.938;
  font-size: 1.5;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1001;
  /* Ensure it's on top */
}


/* display product list */

.display-product-table table{
  width: 100%;
  text-align: center;
}

.display-product-table>h3{
  font-size: clamp(1.8rem, 1vw, 2.5rem);
}

.display-product-table table thead th{
  padding: 1.5rem;
  font-size: 2rem;
  background-color: var(--black);
  color: var(--white);
}

.display-product-table table td{
  padding: 1.5rem;
  font-size: 2rem;
  color: var(--black);
}

.display-product-table table td:first-child{
  padding: 0;

}

.display-product-table>table>tbody>tr>td:nth-child(2){
  text-align: left;
}


.display-product-table table tr:nth-child(even){
  background-color: rgb(237, 235, 235);
}

.display-product-table .empty{
  margin-bottom: 2rem;
  text-align: center;
  background-color: var(--bg-color);
  color: var(--black);
  font-size: 2rem;
  padding: 1.5rem;
}

.edit-form-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  background-color: var(--dark-bg);
  padding: 2rem;
  display: none;
  min-height: 100vh;
  width: 100%;
}

.edit-form-container form {
  width: 50rem;
  display: flex;
  margin: 11rem auto 0 auto;
  flex-direction: column;
  border-radius: .5rem;
  background-color: var(--white);
  text-align: center;
  padding: 2rem;
}

.edit-form-container form .box {
  width: 100%;
  background-color: var(--bg-color);
  border-radius: .5rem;
  font-size: 1.5rem;
  color: var(--black);
  margin-top: .4rem;
  padding: 1.2rem 1.4rem;
  text-transform: none;
}

.edit-form-container>button{
  cursor: pointer;
  font-size: 1.5rem;
}

body > div > section > table > tbody > tr > td > div > img{
  max-width: 100%;
  max-height: 20rem;
}

/* product table css */
.box{
  position: relative;
}

.products .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 25rem);
  gap: 1.5rem;
  justify-content: center; 
}

.products .box-container .box {
  text-align: center;
  padding: 2rem;
  height: auto;
  max-height: 60rem;
  box-shadow: 0.125rem 0.125rem 0.625rem rgb(205, 205, 205);
  /* border: var(--border); */
  border-radius: .5rem;
}

.products .box-container .box img {
  max-width: 100%;
  height: 15rem;
  object-fit: cover;
  cursor: pointer;
}

.products .box-container .box h3 {
  margin: 1rem 0;
  font-size: clamp(1rem, 1vw, 1.5rem);
  font-weight: 400;
  color: var(--black);
  height: auto;
  width: 20rem;
  max-height: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products .box-container .box span{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  font-size: clamp(1rem, 1vw, 1.25rem);
  background-color: red;
  color: #eee;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;

}
#product-name-display {
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* Limits the text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    height: 6.5rem;
    margin-bottom: 1.5rem;
}


.products .box-container .box .price {
  font-size: 2rem;
  color: var(--red);
}

.box-container .box .btn{
  padding: .5rem;
}

.box-container .box .btn:hover{
  background-color: var(--red);
}


.fa-solid{
  margin-right: .5rem;
  font-size: 2.5rem;
}



/* cart layout css */

.shopping-cart{
  margin-top: 15rem;
}

.shopping-cart h1{
  text-align: center;
}

.shopping-cart table {
  text-align: center;
  width: 100%;
}

.shopping-cart table thead th {
  padding: 1.5rem;
  font-size: 2rem;
  color: var(--white);
  background-color: var(--black);
}

.shopping-cart table tr td {
  border-bottom: var(--border);
  padding: 1.5rem;
  font-size: 2rem;
  color: var(--black);
}

.shopping-cart table input[type="number"] {
  border: var(--border);
  padding: 1rem 2rem;
  font-size: 2rem;
  color: var(--black);
  width: 10rem;
}

input[type="email"] {
  text-transform: none;
}

.shopping-cart table input[type="submit"] {
  padding: .5rem 1.5rem;
  cursor: pointer;
  font-size: 2rem;
  background-color: var(--orange);
  color: var(--white);
}

.shopping-cart table input[type="submit"]:hover {
  background-color: var(--black);
}

.shopping-cart table .table-bottom {
  background-color: var(--bg-color);
}

.shopping-cart .checkout-btn {
  text-align: center;
  margin-top: 1rem;
}

.shopping-cart .checkout-btn a {
  display: inline-block;
  width: auto;
}

.shopping-cart .checkout-btn a.disabled {
  pointer-events: none;
  opacity: .5;
  user-select: none;
  -webkit-user-select: none;
  /* Safari 3+, Chrome */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Standard syntax */
  background-color: var(--red);
}


body>div>section>p{
  color: red;
  font-size: 1.5rem;
  width: 50%;
}



.checkout-form form {
  padding: 2rem;
  border-radius: .5rem;
  background-color: var(--bg-color);
}

#checkout-form-details>div>label{
  font-size: 1.2rem;
}

.checkout-form form .flex {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.2rem;
}

.checkout-form form .flex .inputBox {
  flex: 1 1 40rem;
}

.checkout-form form .flex .inputBox span {
  font-size: 2rem;
  color: var(--black);
}

#checkout-form-details>div:nth-child(2){
  width: 100%;
}

#cod,
#lbc{
  cursor: pointer;
}

body>div>section>form>div.inputBox>label,
body>div>section>form>div.inputBox>div>label{
  font-size: 1.5rem;
}

.checkout-form form .flex .inputBox input,
.checkout-form form .flex .inputBox select {
  width: 100%;
  background-color: var(--white);
  font-size: 1.3rem;
  color: var(--black);
  border-radius: .5rem;
  margin: .3rem 0;
  padding: 1.2rem 1.4rem;
  text-transform: none;
  border: var(--border);
}

.cart-image-container img{
  object-fit: cover;
  object-position: center;
}

.checkout-form{
  margin-top: 14rem;
}

.display-order{
  font-size: 1.8rem;
  width: 70%;
  margin: auto auto;
  background-color: var(--white);
  box-shadow: 0.125rem 0.125rem 0.313rem gray;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: .5rem;
}

.grand-total{
  width: 80%;
  text-align: center;
  color: red;
}


.checkout-container{

  width: 80%;
  flex-direction: column;
  margin: auto auto;
}

.checkout-form h1{
  text-align: center;
  width: 100%;
  margin: auto 0;
}

body>div>section>form>input{
  font-size: 1.8rem !important;
}

#checkout-form-details>div:nth-child(3){
  width: 100%;
}

#checkout-form-details>div:nth-child(3){
  display: flex;
  width: 100%;
  column-gap: 1rem;
}

#checkout-form-details>div:nth-child(3)>div:nth-child(1),
#checkout-form-details>div:nth-child(3)>div:nth-child(2){
  width: 50%;
}


/* -----------order message---------- */


.order-message-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-container {
  background: #fff;
  width: 50%;
  padding: 1.25rem;
  border-radius: 0.625rem;
  text-align: center;
  margin: 10% auto;
}

.message-container h3 {
  margin-bottom: 1.25rem;
  font-size: 4rem;
}

.message-container .order-detail,
.message-container .customer-details {
  margin-bottom: 0.625rem;
  font-size: 2rem;
  text-transform: none;
}

.message-container .btn {
  margin-top: 1.25rem;
}

/* order list */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 1.125rem;
  text-align: left;
}

table th,
table td {
  padding: 0.75rem;
  border: 0.063rem solid #ddd;
}

table th {
  background-color: #f2f2f2;
}

.orderlist-h1{
  margin-top: 18rem;
  margin-bottom: 5rem;
  font-size: clamp(0.813rem, 5vw, 2.813rem);
  text-align: center;
}

.order-list-container{
  margin: 0 2rem 0 2rem;
}

/* Business profile */

.edit-f-content{
  margin-top: 15rem;
  margin-left: auto;
  margin-right: auto;
  width: clamp(50rem, 50%, 90rem);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0.5rem 2rem 0 rgba(31, 38, 135, 0.37);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  border-radius: 0.625rem;
  border: 0.063rem solid rgba(255, 255, 255, 0.18);
}

body>div>div>form>div>img{
  width: auto;
  max-width: 100%;
}

.edit-f-content .edit-form{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.edit-footer-content .edit-form .edit-form-content{
  display: flex;
  justify-content: center;
  row-gap: 2rem;
  column-gap: 3rem;
  width: clamp(50rem, 90%, 90rem);
}

.column{
  margin: 2rem 0;
}

.column textarea{
  margin-top: 1rem;
  font-size: clamp(1rem, 1vw, 1.563rem);
  align-content: center;
  padding-left: 1.5rem;
  border-bottom: 0.063rem solid black;
}

.column h2{
  font-size: 2.5rem;
  text-align: center;
}

.edit-footer-content{
  margin-top: 13rem;
}

.edit-footer-content>form{
  margin-top: 1rem;
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.edit-footer-content button{
  width: 100%;
  margin: auto auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}


.edit-footer-content h1{
  font-size: clamp(3rem, 5vw, 6rem);
  text-align: center;
  margin-top: 4.5rem;
  color: rgb(3, 126, 38);
  border-bottom: 0.063rem dashed black;
}

textarea{
  resize: none;
  padding-left: .5rem;
}

.edit-user-container{
  margin-top: 5rem;
}

/* Popup form styles */
.popup-form {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 31.25rem;
  background: #fff;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  z-index: 1000;
}

.popup-form.active {
  display: block;
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-overlay.active {
  display: block;
}

.popup-form .close-btn {
  background: #f00;
  color: #fff;
  border: none;
  padding: 0.625rem;
  cursor: pointer;
  float: right;
}


/* client profile section */

.container>.profile-section{
  margin-top:13rem;
}

.container>.profile-section>.heading{
  margin: 0;
  color: #01852d;
}

.container>.profile-section>.profile-details{
  font-size: clamp(0.813rem, 1vw, 2rem);
  margin-bottom: 4rem;
}

/* Add CSS for the modal */
/* Modal Background */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 1.25rem;
  border: 0.063rem solid #888;
  width: 80%;
}

/* Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

body>form:nth-child(4),
#status,
#start_date,
#end_date,
body>div>table>tbody>tr>td>form>select{
  font-size: clamp(1rem, 1vw, 1.25rem);
}

#search{
  background-color: var(--bg-color);
  border: 0.063rem solid rgb(197, 195, 195);
  margin-right: 2rem;
}

#start_date{
  margin-right: 5rem;
}

body>form:nth-child(4)>button{
  font-size: 2rem;
  cursor: pointer;
  background-color: #2697f0;
  color: white;
  padding: 0.125rem 1.25rem;
  border-radius: 0.625rem;
}

.btn-3{
  background-color:#01852d;
  color: white;
  padding: 0.313rem 1.25rem;
  border-radius: 0.313rem;
  cursor: pointer;
}

body>div.container>section.search-bar>div{
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.btn-4{
  box-sizing: border-box;
  display: inline-block;
  background-color:var(--black);
  color: white;
  padding: 0.313rem 1.25rem;
  border-radius: 0.313rem;
  cursor: pointer;
  font-size: clamp(.8rem, 1vw, 1.3rem);
  /* width: 10rem; */
  margin: 0.313rem 1.125rem;
  text-align: center;
}

.btn-4:hover{
  background-color: #01852d;
}

/* client edit profile modal */
.modal>.modal-content{
  margin: 13rem auto 0 auto;
  width: 20%;
}

.modal>.modal-content>h2{
  font-size: 2rem;
}

.modal>.modal-content>form>input{
  background-color: var(--bg-color);
  width: 100%;
}

.modal>.modal-content>form>input:last-child{
  background-color: #f00;
}


.search-bar>form{
  display: inline-block;
  width: 100%;
  text-align: center;
}

.container>.search-bar>form>input:first-child{
  background-color:#dcddde; 
  height: 3rem; 
  width: 23rem;
}

#login-icon,
#logout-icon{
  display: none;
}

#new-products>table>thead>tr>th,
#all-products>table>thead>tr>th{
  font-size: 150%;
  text-align: center;
}

#new-products>table>tbody>tr>td,
#all-products>table>tbody>tr>td{
  font-size: 120%;
}

#new-products>table>tbody>tr>td:nth-child(6),
#all-products>table>tbody>tr>td:nth-child(6){
  font-size: 80%;
  width: 32%;
}

#new-products>table>tbody>tr>td:nth-child(2),
#all-products>table>tbody>tr>td:nth-child(2){
  width: 32%;
}

#all-products>table>tbody>tr:nth-child(2)>td:nth-child(1)>img{
  width: 100%;
}

#edit-modal>div{
  display: relative;
  width: 40%;
}

#edit-modal>div>span{
  font-size: 3rem;
  color: red;
  display: inline-block;
  width: 100%;
  text-align: end;
}

#edit-modal>div>form>textarea{
  width: 100%;
  margin-top: 2rem;
  border: 1px solid black;
}

#edit-modal>div>form>div{
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

#edit-modal>div>form>div:nth-child(4)>input:nth-child(1),
#edit-modal>div>form>div:nth-child(4)>input:nth-child(2),
#edit-modal>div>form>div:nth-child(6)>select:nth-child(1),
#edit-modal>div>form>div:nth-child(6)>select:nth-child(2){
  width: 40%;
  text-align: center;
  border-bottom: 1px solid black;
}

#edit-modal>div>form>input{
  margin-top: 1rem;
  font-size: 150%;
  border-bottom: 1px solid black;
}

.index-container .box-container {
  width: 80%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 38rem);
  gap: 1rem;
  justify-content: center;
}

body>div>div>div>a>div>div>img{
  width: 100%;
  object-fit: cover;
}

#editModal>div{
  width: 50%;
}

#editModal>div>form>input{
  border-bottom: 1px solid black;
}

.btn-5{
    display: inline-block;
    background-color: orangered;
    color: #eee;
    width: 100%;
    border-radius: .3rem;
    text-align: center;
    cursor: pointer;
    margin-top: .3rem;
}
.btn-6{
    display: inline-block;
    background-color: green;
    color: #eee;
    width: 100%;
    border-radius: .3rem;
    text-align: center;
    cursor: pointer;
    margin-top: .3rem;
}

body>div>table>tbody>tr>td>form>select,
body>div>table>tbody>tr>td>form>select>option{
  width: 100%;
  padding: .2rem;
  text-align: center;
}

 body > div > section > div.cart-table-container > table > tbody > tr > td{
    font-size: 120%;
    }


body > div > section > div.cart-table-container > table > tbody > tr > td > a{
    font-size: 100%;
    display: flex;
    align-items: center;
}

body > div > section > div.cart-table-container > table > tbody > tr.table-bottom > td:nth-child(4) > a{
    font-size: 80%;
}

body > div > section > div.cart-table-container > table > tbody > tr > td > form{
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

body > div > section > div.cart-table-container > table > tbody > tr > td > form > input[type=number],
body > div > section > div.cart-table-container > table > tbody > tr > td > form > input[type=submit]{
    font-size:100%;
    height: 4rem;
    margin: 0;
    padding: 0 .5rem;
    text-align: center;
}

body > div > section > div.cart-table-container > table > tbody > tr > td > form > input[type=number]{
    width: 30%;
}

body > div > section > div.cart-table-container > table > thead > tr> th,
body>div>section>section>div>table>tbody>tr>td:nth-child(2),
body>div>section>section>div>table>tbody>tr>td:nth-child(3),
body>div>section>section>div>table>tbody>tr>td:nth-child(4),
body>div>section>section>div>table>tbody>tr>td:nth-child(5),
body>div>section>section>div>table>tbody>tr>td:nth-child(6){
    font-size: 120%;
}

body>div>section>div.cart-table-container>table>tbody>tr>td:nth-child(1),
body>div>section>div.cart-table-container>table>thead>tr>th:nth-child(1){
  width: 5%;
  margin: 0;
}

.News-free-shipping{
  color: red;
  font-size: 1.7rem
}


body>div>table>tbody>tr>td:nth-child(4){
  text-transform: none !important;
}

#quantity-110 {
  width: 2.5rem;
  font-size: 1.5rem;
}





























































































































@media (max-width:1200px){

html{
  font-size: 55%;
}

.header .flex .navbar a,
#welcome-message > p{
  font-size: 1.75rem;
  margin-left: .8rem;
}

#welcome-message > p

body>div.edit-footer-container>div>form {
  margin-top: 5rem;
}

body>div.all-users-container>div,
body>div>section>section>div {
  overflow-x: scroll;
}

body>div.all-users-container>div>table,
body>div>section>section>div>table {
width: 70rem;
  font-size: 2rem;
}

body.order-list-container>.order-list-table-cnt{
  overflow-x: scroll;
}

body.order-list-container>.order-list-table-cnttable.order-list-table{
  width: 70rem;
  font-size: clamp(0.625rem, 1vw, 1.375rem);
  
}


#new-products>table>thead>tr>th,
#all-products>table>thead>tr>th{
  font-size: 1.2rem;
}

#new-products>table>tbody>tr>td,
#all-products>table>thead>tr>th{
  font-size: 1.5rem;
}

#edit-modal>div {
  width: 85%;
}

 body > div > section > div.cart-table-container > table > tbody > tr > td{
        font-size: 110%;
    }

body>div>section>section>div>table>tbody>tr>td{
  font-size: 60%;
  border: 1px solid red;
}

#cartForm>p {
  font-size: 1.2rem;
  width: 100%;
}

/* ---table overflow--- */
#quantity-113 {
  width: 2.5rem;
  font-size: 1.5rem;
}

}






@media (max-width:890px){

  #menu-btn{
    display: inline-block;
    transition: .2s linear;
  }
  #menu-btn.fa-times{
    transform: rotate(180deg);
  }

  .header .flex .navbar{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 99%; left: 0; right: 0;
    background-color: var(--white);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: .2s linear;
    justify-content: center;
  }

  #welcome-message>p{
    text-align: center;
    font-size: 2.8rem;
  }

  .header .flex .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    box-shadow: 0.125rem 0.125rem 0.313rem rgb(207, 206, 206);
  }

  .header .flex .navbar a{
    margin: 1.2rem .5rem;
    display: block;
    text-align: center;
    font-size: 2.5rem;
  }

  .display-product-table,
  .order-list-table{
    overflow-x: scroll;
  }

  .display-product-table table,
  .order-list-table table{
    width: 90rem;
  }
  
  
  

  .edit-footer-container>div>form{
    margin-top: 5rem;
    font-size: 50%;
    width: 90%;
    margin: 5rem auto;
  }

  .edit-form-content>div.column.col-one,
  .edit-form-content>div.column.col-two{
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  
  .edit-form-content>div.column.col-one>textarea,
  .edit-form-content>div.column.col-two>textarea{
    width: 90%;
    margin: auto;
    font-size: clamp(0.625rem, 1.7vw, 1rem);
  }

    .all-users-container>div{
      font-size: 80%;
    }

    body>div.all-users-container>div{
      overflow-x: scroll;
    }

    body>div.all-users-container>div>table{
      width: 70rem;
      font-size: 1.3rem;
    }

    body>div>table>tbody>tr{
      font-size: clamp(0.75rem, 1vw, 1.563rem);
    }
    .search-product{
    width: 60% ;
    }
    #new-products>table>thead>tr>th,
    #all-products>table>thead>tr>th {
      font-size: 1rem;
    }

    #new-products>table>tbody>tr>td,
    #all-products>table>tbody>tr>td {
      font-size: .8rem;
    }

    #new-products>table>tbody>tr>td>div>img,
    #all-products>table>tbody>tr>td>div>img{
      width: 6rem;
      height: 4rem;
    }



    .client_profile-container>table>thead>tr>th {
      font-size: 80%;
      text-align: center;
    }

    .client_profile-container>table>tbody>tr>td{
      font-size: clamp(0.813rem, 1vw, 1.875);
    }

    #edit-modal>div {
      width: 85%;
    }

    #editModal>div {
      width: 80%;
    }
    
    body > div > section > div.cart-table-container > table > tbody > tr > td{
        font-size: 100%;
    }
    
body > div > section > div.cart-table-container > table > tbody > tr > td > form{
    display: flex;
    flex-direction: column;
    width: 10rem;
    margin: auto;
}

#cartUpdateBtn{
    width: 100%;
    margin: 0;
}

body > div > section > div.cart-table-container > table > tbody > tr > td >form>.quantity-wrapper>.quantity-input{
    width: 50%;
}


body > div > section > div.cart-table-container > table > tbody > tr:nth-child(1) > td > form > div{
    margin: auto;
    width: 100%;
}

#cartForm>p {
  font-size: 1.2rem;
  width: 100%;
}

/* ---table overflow--- */
#cartForm>div,
body>div>section>div>section>div {
  overflow-x: scroll;
}

#cartForm>div>table,
body>div>section>div>section>div>table {
  width: 100%;
}

#cartForm>div>table>tbody>tr>td,
.out-of-stock>div>table>tbody>tr>td {
  font-size: 1.2rem;
}

#cartForm>div>table>thead>tr>th,
.shopping-cart>.cart-table-container>.out-of-stock>div>table>thead>tr>th {
  font-size: 1.3rem;
}

#quantity-113 {
  width: 2.5rem;
  font-size: 1.5rem;
}

  .cart-table-container,
  .client_profile-container {
    overflow-x: scroll;
  }

  .cart-table-container>table,
  .client_profile-container>table {
    width: 93rem;
    font-size: 1.3rem;
  }


}








@media (max-width:550px) {

  html {
    font-size: 60%;
  }

  .heading{
    font-size: 2rem;
    text-align: center;
    margin: auto 0;
  }


  .edit-footer-container>div>form {
    width: 85%;
    padding-top: 2rem;
    margin-top: 0 !important;
    margin: auto;
  }

  .edit-form-content>div.column.col-one>h2,
  .edit-form-content>div.column.col-two>h2{
    font-size: clamp(1rem, 5vw, 2rem);
   
  }

  .edit-form-content{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .edit-form-content>div.column.col-one,
  .edit-form-content>div.column.col-two {
    display: flex;
    flex-direction: column;
    width: 60%;
  }

  .edit-form-content>div.column.col-two{
    margin-top: 0;
  }

  .edit-form-content>div.column.col-one>textarea,
  .edit-form-content>div.column.col-two>textarea {
    width: 100%;
    margin: auto;
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
  }

  body>div>table>tbody>tr {
    font-size: clamp(0.625, 1vw, 1rem);
  }

  .cart-table-container,
  .client_profile-container {
    overflow-x: scroll;
  }

  .cart-table-container>table,
  .client_profile-container>table {
    width: 70rem;
    font-size: 1.3rem;
  }

  body>div>section>p{
    width: 100%;
    font-size: clamp(0.625, 1vw, 1.563rem);
  }

  body>div.container>section.search-bar>form>input[type=text]:nth-child(1),
  body>div.container>section.search-bar>form>select{
    margin-left: 2.4rem;
  }

  #search{
    width: 60%;
  }

  .client_profile-container>table>thead>tr>th {
    font-size: 100%;
    text-align: center;
  }

  #start_date{
    margin-right: 2rem;
  }

  body>form:nth-child(4)>button{
    font-size: 1.5rem;
    width: 100%;
    margin-top: 1rem;
  }

body>form:nth-child(4)>label:nth-child(5),
#start_date, body>form:nth-child(4)>label:nth-child(7), #end_date{
  margin-top: 1rem;
}

body>form:nth-child(5){
  width: 100%;
  display: flex;
 justify-content: space-around;
}

.add-product-form{
  width: 100%;
}
section:nth-child(1)>form>input:nth-child(2),
section:nth-child(1)>form>input:nth-child(3){
  font-size: 95%;
}

section:nth-child(1)>form>textarea{
  height: 10rem;
  font-size: 95%;
}

section:nth-child(1)>form>input,
section:nth-child(1)>form>div:nth-child(4)>input:nth-child(1),
section:nth-child(1)>form>div:nth-child(4)>input:nth-child(2),
section:nth-child(1)>form>div:nth-child(6)>select:nth-child(1),
section:nth-child(1)>form>div:nth-child(6)>select:nth-child(2){
  height: 4rem;
  font-size: 95%;
}
section:nth-child(1)>form>input:nth-child(7){
  font-size: 90%;
}



section.search-product{
  width: 100%;

}

section.search-product>form{
  width: 100%;
  display: flex;
  flex-direction: column;
}

section.search-product>form>input{
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

#edit-modal>div{
  width: 85%;
}

#checkout-form-details>div:nth-child(4){
  display: flex;
  flex-direction: column;
}

#checkout-form-details>div:nth-child(4)>div:nth-child(1),
#checkout-form-details>div:nth-child(4)>div:nth-child(2){
  width: 100%;
}

body>div>section>.checkout-container,
body>div>section>form>div.display-order{
  width: 95%;
}
/* 
body > div > section > div.cart-table-container > table > tbody > tr > td,
body > div > section > div.cart-table-container > table > tbody > tr.table-bottom > td, 
body > div > section > p,
body > div > section > div.cart-table-container > table > tbody > tr.table-bottom > td,
body > div > section > div.cart-table-container > table > tbody > tr > td > form > input[type=number],
body > div > section > div.cart-table-container > table > tbody > tr > td > form > input[type=submit]{
    font-size:1rem;
} */

body > div > section > div.cart-table-container > table > thead > tr> th{
    font-size: 1.4rem;
}

body > div > section > div.cart-table-container > table > tbody > tr > td > form{
    width: 70%;
    margin: auto;
}


body > div > section > div.cart-table-container > table > tbody > tr > td > form{
    display: flex;
    flex-direction: column;
}

body > div > section > div.cart-table-container > table > tbody > tr > td > form > input[type=number]{
    width: 100%;
}

#cartForm>p{
  font-size:1.2rem;
  width: 100%;
}

/* ---table overflow--- */
#cartForm>div,
body>div>section>div>section>div{
  overflow-x: scroll;
}

#cartForm>div>table,
body>div>section>div>section>div>table{
  width: 20rem;
}

#cartForm>div>table>tbody>tr>td,
.out-of-stock>div>table>tbody>tr>td{
  font-size: 1.2rem;
}

#cartForm>div>table>thead>tr>th,
.shopping-cart>.cart-table-container>.out-of-stock>div>table>thead>tr>th{
  font-size: 1.3rem;
}

#quantity-113{
  width: 2.5rem;
  font-size: 1.5rem;
}

#product-name-display{
     height: 4.8rem;
}

}