 
:root{
   --blue:#2980b9;
   --red:tomato;
   --orange:orange;
   --black:#333;
   --white:#fff;
   --bg-color:#eee;
   --dark-bg:rgba(0,0,0,.7);
   --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: 90%;
   overflow-x: hidden;
}
.pager li .active_link{
   background: red;
 }
.container{
   max-width: 1200px;
   margin:0 auto;
   /* padding-bottom: 5rem; */
}

section{
   padding:2rem;
}
.pager li .active_link{
   background: red;
 }
.heading{
   text-align: center;
   font-size: 3.5rem;
   text-transform: uppercase;
   color:var(--black);
   margin-bottom: 2rem;
}

.btn,
.btn1,
.option-btn,
.delete-btn,
.btns{
   display: block;
   width: 100%;
   text-align: center;
   background-color: var(--blue);
   color:var(--white);
   font-size: 1.2rem;
   padding:1.2rem 2rem;
   border-radius: .5rem;
   cursor: pointer;
   margin-top: 1rem;
}

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

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

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

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

.order-message1{
   position: fixed;
   top:0;
   left:0;
   height: 100vh;
   overflow-y: scroll;
   overflow-x: hidden;
   padding:2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1100;
   background-color: var(--dark-bg);
   width: 100%;
   border: 1px solid black;


}
.order-message-container2{
   background-color: aliceblue;
   padding: 20px;
   border-radius: 5px;
   width: 50%;
   height: 80%;

}

.order-message-content{
   align-content: center;
   justify-content: center;
   display: flex;
}
.order-message-content span{
   color: #333333;
   font-size: 1.2rem;
  font-weight: 400;
  padding: 5px;
}
.description{
   width: 100%;
   height: 100px;
   background-color: whitesmoke;
   padding-top: 5%;
   border-top: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;

}
.description-details{
   align-content: center;
   justify-content: center;
   display: flex;

}
.order-message-image{
   align-content: center;
   justify-content: center;
   display: flex;
   padding-bottom: 20px;
   padding-left: 15.9rem;

}
.order-message-image span{
  

}
.out-of-stock{
   color: red;
    padding-left: 10.5rem;
   font-size: 1.5rem;
}
.in-stock{
   color: green;
    padding-left: 10.5rem;
   font-size: 1.5rem;
}
.order-message-active,
.order-message-active .order-message{
  display: flex;
}
.order-message::-webkit-scrollbar{
   width: 1rem;
}

.order-message::-webkit-scrollbar-track{
   background-color: var(--dark-bg);
}

.ordermessage::-webkit-scrollbar-thumb{
   background-color: var(--blue);
}

.messagecontainer{
   width: 50%;
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: center;
}

.messagecontainer h3{
   font-size: 1.5rem;
   color:var(--black);

}

.order-detail{
   background-color: var(--bg-color);
   border-radius: .5rem;
   padding:1rem;
   margin:1rem 0;
   display: flex;
   flex-direction: column;
   align-items: center;

}
.order-img{
  width: 100px;
  height: 120px;
  margin: 10px;
  cursor: pointer;
  position: relative;
}
.order-img img{
  width:100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.order-details{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  border-top: 1px solid #f3f3f3;

}

.order-detail span{
  color: #333333;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 5px;
}
.qty{
  padding: 2%;
  width: 60px;
  background-color: var(--red);
  color:var(--white);
  height: 25px;
  border-radius: 5px;
}
.customer-details{

   margin:1.5rem 0;

}

.customer-details p{
   padding:1rem 0;
   font-size: 1rem;
   color:var(--black);

}
.customer-details p span{
   color:var(--blue);
   padding:0.5rem;
   text-transform: none;

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

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

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

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

.shopping-cart table input[type="submit"]{
   padding:.5rem 1rem;
   cursor: pointer;
   font-size: 1rem;
   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;
   background-color: var(--red);
}
.checkout-form form{
   padding:2rem;
   border-radius: .5rem;
   background-color: var(--bg-color);
}

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

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

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

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

.display-order{
   max-width: 50rem;
   background-color: var(--white);
   border-radius: .5rem;
   text-align: center;
   padding:1.5rem;
   margin:0 auto;
   margin-bottom: 2rem;
   box-shadow: var(--box-shadow);
   border:var(--border);
}

.display-order span{
   display: inline-block;
   border-radius: .5rem;
   background-color: var(--bg-color);
   padding:.5rem 1.5rem;
   font-size: 2rem;
   color:var(--black);
   margin:.5rem;
}

.display-order span.grand-total{
   width: 100%;
   background-color: var(--red);
   color:var(--white);
   padding:1rem;
   margin-top: 1rem;
}
@media (max-width: 767px) {


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

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


.shopping-cart table input[type="number"]{
   border: var(--border);
   padding:0.2rem 0.5rem;
   font-size: 0.7rem;
   color:var(--black);
   width: 3rem;
}

.shopping-cart table input[type="submit"]{
   padding:.1rem 0.5rem;
   cursor: pointer;
   font-size: 0.4rem;
   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;
   background-color: var(--red);
}
section{
   padding:0rem;
   width: 100%;
}




}
.viewcart {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #ddd;
}

img {
  max-width: 100px;
  height: auto;
}

@media (max-width: 767px) {
  table, thead, tbody, th, td, tfoot {
    display: block;
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .order-message-content{
   align-content: center;
   justify-content: center;
   display: flex;
}
.order-message-content span{
   color: #333333;
   font-size: 1.3rem;
  font-weight: 400;
  padding: 0.5rem;
}
.order-message-content span input{
   color: #333333;
   font-size: 1.5rem;
  font-weight: 400;
  padding: 0.5rem;
  width: 90px;
}
.order-message1{
   /*position: fixed;*/
   /*top:0;*/
   /*left:0;*/
   width: 100%;
   /*height: 100vh;*/
   /*overflow-y: scroll;*/
   /*overflow-x: hidden;*/
   padding:2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   /*z-index: 1100;*/
   background-color: var(--dark-bg);
   /*width: 100%;*/
   border: 1px solid black;


}
.order-message-container2{
   background-color: aliceblue;
   padding: 20px;
   border-radius: 5px;
   width: 100%;
   /*height: 80%;*/
}
.description-details span{
   font-size: 1.5rem;


}
  .qty1{
   width: 10px;

  }
.btn,
.option-btn,
.delete-btn,
.btns
{
   
   display: block;
   width: 100%;
   text-align: center;
   background-color: var(--blue);
   color:var(--white);
   font-size: 1rem;
   padding:0.5rem 1rem;*/
   border-radius: .5rem;
   cursor: pointer;
   margin-top: 1rem;
  

  }
  .btn1{


   display: block;
   width: 80%;
   text-align: center;
   background-color: var(--blue);
   color:var(--white);
   font-size: 1.5rem;
   /*padding:0.5rem 1rem;*/
   border-radius: .5rem;
   cursor: pointer;
   margin-top: 1rem;
  
}
  a{
   font-size: 0.2rem;
  }

  td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-left: 50%;
    font-size: 1.5rem;
  }
  td input{
   width: 80px;
   font-size: 1.5rem;
   padding: 0.5rem;
  }
  .qtyupdate{
   position: relative;
   display: flex;
   align-items:center;
   justify-content: space-between;
  }
  .checkoutbtn{
   position: relative;
  /*top: 50%;*/
   padding: 0rem;
   border-bottom: 1.5rem;
  /*transform: translate(-50%, -50%);*/
}

  }
  
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap
