body {
  background-color: #f7f7f7;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
h1{
  color:#f3c13a;
}
.payment-method-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.payment-method-select img {
   /* adjust the width and height to your liking */
  height: 50px;
  object-fit: contain;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  padding: 3px;
  position: relative;
  transition: all ease-in-out 400ms;
  border-width: 3px;
  border-color: transparent;
  border-style: solid;
}
.design-template-select img{
  height: 300px;
  object-fit: contain;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  padding: 3px;
  position: relative;
  transition: all ease-in-out 400ms;
  border-width: 3px;
  border-color: transparent;
  border-style: solid;
}
.payment-method-select img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.payment-method-select input,
.design-template-select input{
  visibility: hidden;
}
.payment-method-select input:checked + img ,
.design-template-select input:checked + img{
  border-color: #337ab7;
  border-width: 3px;
  border-style: solid;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
#unique-id{
  visibility: hidden;
}

.scan-container {
  position: relative;
}

.upload-text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background-color: #f6f8f8;
  pointer-events: none;
  border-radius: 10px;
  border: dashed 2px #ccc;
  box-shadow: 0 0 0 5px #f6f8f8;
  padding: 0;
  margin: 0;
}

input#image-upload {
  height: 400px;
  width: 100%;
}

#video{
  height: 400px;
  width: 100%;
  border: dashed 2px #ccc !important;
  box-shadow: 0 0 0 5px #f6f8f8;
  border-radius: 10px;
}
.shopee{
  background-color: #ed4c2f;
}

.btn-accent{
  background-color: #4ECDC4;
  border: solid 2px #4ECDC4;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
}

.btn-accent:is(:hover,:active){
  background-color: #4ECDC4;
  border: solid 2px #a8915c;
}

form h3{
  text-transform: capitalize;
}

.form-floating{
 position: relative;
}
.form-floating>label {
  border: 1px solid transparent;
  height: 100%;
  left: 0;
  overflow: hidden;
  padding: 1rem .75rem;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out,transform .1s ease-in-out;
  white-space: nowrap;
  width: 100%;
}

.form-floating>.form-control, .form-floating>.  , .form-floating>.form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-floating label {
  color: #8b929a!important;
}

.form-floating i {
  position: absolute;
  top: 0;
  right: -30px;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.svg-display svg{
  width: 100%;
  height: 100%;
}