#nav-bar {
   width: 85%;
   height: 35px;
   padding: 1% 10%;
   margin-top: 0%;
   background-color: white;
   position: fixed;
}

#nav-bar>div {
   padding: 0% 0%;
   float: left;
   margin: 0.5% 0%;
}

#nav-bar>img {
   float: left;
   width: 10%;
   height: 80%;
   margin-left: 5%;
}

* {
   font-family: 'Roboto', sans-serif;
   margin: 0%;
}

#pay0 {
   width: 100%;
   height: 1150px;
   padding-top: 100px;
   background-color: rgb(240,245,247);
}

#pay1 {
   width: 50%;
   height: 500px;
   background: white;
   padding: 20px;
   border-radius: 10px;
   margin-left: 10%;
}
#confirm_pay{
   color: white;
   margin-right: 20px;
  
}
#continue_btn{
   color: white;  
}

h2 {
   
   background: white;
}

button {
   background: white;
}

#add,
#cards {
   height: 100px;
   width: 300px;
   border-style: dashed;
   border-radius: 10px;
   color: rgb(43, 168, 137);
}

#change {
   width: 80px;
   height: 30px;
   border-style: dashed;
   border-radius: 5px;
   color: rgb(43, 168, 137);
}

#pay1>div,
#pay2>div {
   background: white;
}

#pay2 {
   margin-top: -50px;
   width: 50%;
   height: 500px;
   background: white;
   padding: 20px;
   border-radius: 10px;
   margin-left: 10%;
}

p {
   color: gray;
   margin-bottom: 20px;
   background: white;
}

#pay3 {
   display: flex;
   flex-direction: row;
   gap: 30px;
}

#pay31 {
   width: 40%;
   height: 380px;
   padding-left: 25px;
   background: whitesmoke;
}

#but {
   background: whitesmoke;
   border: none;
   padding-top: 15px;
   font-size: 16px;
}

#add1 {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 10px;
   position: absolute;
   top: 0%;
   display: flex;
   justify-content: center;
   align-items: center;
   display: none;
}

#add2 {
   width: 550px;
   height: 550px;
   background-color: white;
   opacity: 1;
   padding: 20px;
   border-radius: 10px;
   position: relative;
}

#img {
   text-align: center;
   
}

#img>img {
   width: 550px;
   height: 130px;
}

#address {
   margin-top: 5%;
   display: grid;
   grid-template-columns: 50% 50%;
   grid-gap: 10px;
}

#address1 {
   text-align: center;
}

#address1 button {
   margin-top: 5%;
   border: none;
   background-color: rgb(0,210,144);
   padding: 2% 10%;
   height: 40px;
   border-radius: 20px;
}
hr{
   margin-top: 20px;
   margin-bottom: 20px;
  width: 100%;
}

#close {
   position: absolute;
   top: 0;
   right: 10px;
   font-size: 30px;
   transform: rotate(45deg);
   cursor: pointer;
   margin-top: 10px;
   margin-right: 20px;
}

#close2 {
   position: absolute;
   top: 0;
   right: 10px;
   font-size: 30px;
   transform: rotate(45deg);
   cursor: pointer;
   margin-top: 10px;
   margin-right: 10px;
}

#add_card {
   width: 100%;
   height: 1500px;
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 10px;
   position: absolute;
   top: 0%;
   display: flex;
   justify-content: center;
   align-items: center;
   display: none;
}

#card_details {
   width: 300px;
   height: 450px;
    background-color: white;
   opacity: 1;
   padding: 30px;
   padding-left: 80px;
   border-radius: 10px;
   position: relative;
   margin-top: 140px;
}

#Card_num {
   display: grid;
   grid-template-columns: 50%;
   grid-gap: 20px;
   margin-top: 25px;
}

#address2 {
   text-align: center;
}

#address2 button {
   margin-top: 10%;
   border: none;
   background-color: rgb(0,210,144);
   padding: 2% 30%;
   height: 40px;
   border-radius: 20px;
}

#card_num input {
   width: 100px;
   margin-top: 0%;
}

h5 {
   margin: 0px;
   font-size: 14px;
   padding: 0%;
   font-weight: 400;
}

#top {
   display: flex;
}

#cart {
   margin-left: 20px;
   width: 100%;
   height: 300px;
  
   background-color: white;
   
}

h4 {
   margin-top: 0px;
   margin-bottom: 0px;
}

h3 {
   margin-bottom: 5px;
}

#div1 {
   margin-top: 10px;
   padding: 10px;
   border: 1px solid gray;
   border-radius: 10px;
   color: gray;
   font-size: 14px;
}

#change_add_btn {
   height: 40px;
   margin-top: 20px;
   border: dashed gray;
   border-radius: 10px;
   color: rgb(110, 226, 191);
   background-color: white;
}

ul {
   list-style: none;
   /* Remove default bullets */
}

ul li::before {
   content: "\2022";
   color: green;
   font-weight: bold;
   display: inline-block;
   width: 1em;
   margin-left: -1em;
}

#checkout{
   height: 80px;
   width: 30%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   right: 0%;

}
#checkout button{
  font-size: larger;
  background-color: turquoise;
   height: 50px;
   width: auto;
   border-radius: 25px;
   
}
#box {
   height: 40px;
   width: 100px;
   border-radius: 15px;
   border: 1px solid lightgray;
   display: flex;
   margin: auto;

}

#box button {
   height: 30px;
   width: 30px;
   border: none;
   border-color: inherit;
   border-radius: 50%;
   background-color: transparent;
   font-size: large;
   font-weight: bold;
}

#plus {
   color: green;
}

#val {
   margin-top: 5px;
   margin-left: 5%;
   margin-right: 5%;
}

#box button:hover {
   cursor: pointer;
   box-shadow: 1px 1px 1px 1px lightgray;
}
#invoice{
   margin-top: 10px;
   margin-left: 20px;
   height: 250px;
   background-color: white;
   width: 94%;
   padding: 15px;
}
#instructions{
   width: 98%;
   margin-left: 20px;
   margin-top: 10px;
   background-color: white;
  padding: 8px;
   margin-bottom: 10px;
}
#instructions input{
   border: none;
   
   width: 100%;
}
#right{
   width: 25%;
}
/* location */
#set_location{
   height:20px;
   display: flex;
   flex-direction: row;
   cursor: pointer;
}

#aline1,#aline2,#aline3,#aline4{
   width: 250px;
   height: 40px;
   border: 1px solid gray;
   border-radius: 6px;
   text-align: center;
   margin-top: 5px;
   font-size: 20px;
}
#aline3,#aline4{
   margin-bottom: 20px;
}
#addL{
   font-size: 14px;
   margin-left: 10px;
   color: gray;
}
/* #aline1,#aline3{
   margin-left: 20px;
} */