@font-face {
  font-family: "MyFont";
  src: url(../css/louis_george_caf/Louis\ George\ Cafe\ Bold.ttf)
    format("truetype");
}

    

 body {
  font-family: "MyFont";
  margin-bottom: 4rem;
  margin: 0%;
}

 .direct {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 0.5em;
 /* border: 0.1em solid black;  */
}

p {
  text-align: center;
}
h1 {
  text-align: center;
  font-weight: bold;
  border-top: 0.2em;
  font-size: 3em;
}

.element {
    padding-bottom: 0.2rem;
    border-top-width: 0.15rem;
    border-top-style: solid;
    border-top-color: black;
    padding-top: 1rem;
    text-align: center;
  }


.button-nav3 {
  display: inline-block;
  /* display:inline; */
  right: 50px;
  padding: 15px 25px;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #f2d298;
  border: none;
  border-radius: 20px;
  box-shadow: 0 7px #999;
  margin: 0.3rem;
}

.lab {
  background: none;
  width: 10em;
  height: 1em;
}

.lab2 {
  background: none;
  width: 33em;
  height: 1em;
}
input[type="text"],
textarea {
  font-family: "MyFont";
}
.container {
  margin: 2rem;
  margin-top:5em;
  height:100%;
  /* border: 1px solid black; */
  /* max-width: 1800px; */
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  /* background:-webkit-linear-gradient(#c5e5e5, #ccddf9);
  background:linear-gradient(#c9e5e9,#ccddf9); */
}
.dropdown-select.visible {
  display:block;
}
.dropdown {
  position:relative;
}

.dropdown-select {
  position:absolute;
  cursor: pointer;
  background:rgb(186, 205, 194);
  text-align:left;
  box-shadow:0px 3px 5px 0px rgba(0,0,0,0.1);
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  width:90%;
  /* left:2px; */
  line-height:2em;
  margin-top:2px;
  box-sizing:border-box;
}
.thin {
  font-weight:400;
}
.small {
  font-size:12px;
  font-size:.8rem;
}
.half-input-table {
  border-collapse:collapse;
  width:100%;
}
.half-input-table td:first-of-type {
  border-right:10px solid rgb(209, 231, 188, 0.0);
  width:50%;
}
.window {
  height:700px;
  width:1000px;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2);
  /* box-shadow: 0px 15px 50px 10px rgba(0, 0, 0, 0.2); */
  border-radius:20px;
  z-index:10;
}
.order-info {
  /* background: rgb(209, 231, 188, 0.2); */
  height:100%;
  width:80%;
  padding-left:25px;
  padding-right:25px;
  box-sizing:border-box;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  position:relative;
}
.price {
  bottom:0px;
  position:absolute;
  right:0px;
  color:#4488dd;
}
.order-table td:first-of-type {
  width:25%;
}
.order-table {
    position:relative;
}
.line {
  height:1px;
  width:100%;
  margin-top:10px;
  margin-bottom:10px;
  background:#ddd;
}
.order-table td:last-of-type {
  vertical-align:top;
  padding-left:25px;
}
.order-info-content {
  table-layout:fixed;

}

.full-width {
  width:100%;
}
.pay-btn {
  border:none;
  font-family: "MyFont";
  background:rgb(53, 114, 77);
  line-height:2em;
  /* border-radius:0px; */
  font-size:19px;
  font-size:1.2rem;
  color:white;
  cursor:pointer;
  position:absolute;
  bottom:25px;
  width:calc(100% - 50px);
  -webkit-transition:all .2s ease;
          transition:all .2s ease;
}
.pay-btn:hover {
  background:rgb(21, 100, 50) ;
  -webkit-transition:all .2s ease;
          transition:all .2s ease;

}


.total {
  margin-top:25px;
  font-size:20px;
  font-size:1.3rem;
  position:absolute;
  /* bottom:30px; */
  right:27px;
  left:35px;
}
.dense {
  line-height:1.2em;
  font-size:16px;
  font-size:1rem;
}
.input-field {
  background:rgba(255,255,255);
  border: 1px solid #ccc;
  margin-bottom:10px;
  margin-top:3px;
  line-height:1.5em;
  font-size:20px;
  font-size:1.3rem;
  padding:5px 10px 5px 10px;
  color:#fff;
  box-sizing:border-box;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.credit-info {
  /* background:rgb(92, 145, 128); */
  height:100%;
  width:80%;
  /* color:#eee; */
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  font-size:14px;
  font-size:.9rem;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  box-sizing:border-box;
  padding-left:25px;
  padding-right:25px;
  border-top-right-radius:30px;
  border-bottom-right-radius:30px;
  position:relative;
  
}
.dropdown-btn {
  background:rgb(53, 114, 77,0.2);
  width:90%;
  border-radius:5px;
  text-align:center;
  line-height:1.5em;
  cursor:pointer;
  position:relative;
  -webkit-transition:background 0.2s ease;
          transition:background 0.2s ease;
}
.dropdown-btn:after {
  content: '\25BE';
  right:8px;
  position:absolute;
}
.dropdown-btn:hover {
  background:rgba(53,114,77,0.5);
  -webkit-transition:background .2s ease;
          transition:background .2s ease;
}
.dropdown-select {
  display:none;

}
.credit-card-image {
  display:block;
  max-height:80px;
  margin-left:auto;
  margin-right:auto;
  margin-top:35px;
  margin-bottom:15px;
}
.credit-info-content {
  margin-top:25px;
  -webkit-flex-flow:column;
      -ms-flex-flow:column;
          flex-flow:column;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  width:100%;
}


@media screen and (max-width: 800px) {
  .window {
    width: 100%;
    height: 100%;
    display:block;
    border-radius:10px;

  }
  .order-info {
    width:100%;
    height:auto;
    padding-top: 5rem;
    padding-bottom:100px;
    border-radius:10px;
  }
  .credit-info {
    width:100%;
    height:auto;
    padding-bottom:100px;
    border-radius:10px;
  }
  .pay-btn {
    border-radius:0px;
  }
}

#flowerNumber{
  width:4rem;
}
#flowerNumber2{
  width:4rem;
}
#flowerNumber3{
  width:4rem;
}