/*#dropin-wrapper{
  display: block;
  text-align: center;
}*/

/*#input-form {
  height: 100%;
  justify-content: center;
  align-items: center;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}*/

.hosted-field--label {
  transform: translateY(0.4em);
  /*font-size: 1.125em;*/
  /*line-height: 32px;*/
  transition: all .15s ease-out;
  display: block;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  margin-bottom: 0.5em;

  &.label-float {
    text-overflow: ellipsis;
    color: #2196F3;
    transition: all .15s ease-out
  }
  &.filled {
    @extend .label-float;
    color: rgba(0, 0, 0, .54);
  }
  &.invalid {
    @extend .label-float;
    color: #F44336;
  }
}
body {  
  background-color:transparent !important;
} 
/*.hosted-field {*/
  /*height: 34px;*/
  /*margin-bottom: 1em;*/
  /*display: block;*/
  /*background-color: transparent;*/
  /*color: rgba(0, 0, 0, .87);*/
  /*border: 1px solid lightgrey;*/
  /*border-radius: 8px;*/
  /*border-bottom: 1px solid rgba(0, 0, 0, .26);*/
  /*outline: 0;*/
  /*width: 100%;*/
  /*font-size: 16px;*/
  /*padding: 5px;*/
  /*box-shadow: none;*/
  /*margin: auto;*/
  /*position: relative;*/
/*}*/
.hosted-field {
  /* Adjust the following properties to match Tailwind CSS styles */
  height: 2.8rem; /* Equivalent to Tailwind's h-10 */
  box-sizing: border-box;
  color: #1a202c; /* Equivalent to Tailwind's text-gray-900 */
  border-bottom: 1px solid rgba(0, 0, 0, .76); /* Equivalent to Tailwind's border-b-2 border-gray-300 */
  
  width: 100%;
  font-size: 1rem; /* Equivalent to Tailwind's text-sm */
  padding: 0.175rem 0;  /* Equivalent to Tailwind's py-1.5 */
  /*margin: 0 auto;  Center the input */
  position: relative;
  /*opacity: 1;*/
  background-color: transparent;
  color: #1a202c;
  outline: null;
}
/*#input-form{
  background-color: transparent;
}*/
/*.pay-button {
  background: #ffb718;
  color: #fff;
  margin: 0 auto;
  border: 0;
  border-radius: 3px;
  padding: 1em 3em;
  font-size: 1em;
  text-transform: uppercase;
  box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
}*/

.hosted-field:focus {
  /*color: #495057;*/
  background-color: transparent;
  border-bottom-color: yellow-500;
  /*outline: 0;*/
  /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
}

.braintree-hosted-fields-focused {
  /*color: #495057;*/
  background-color: transparent;
  border-bottom-color: yellow-500;
  /*border-color: #80bdff;*/
  /*outline: 0;*/
  /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
}

.braintree-hosted-fields-focused .is-invalid {
  /*border-color: #dc3545;*/
  border: 1px solid red;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.error-border {
  border: 1px solid red;
}
/*.input-wrapper {
  position: relative;
}


.fixed-text {
  position: absolute;
  right: 5px; /* Adjust the positioning as needed 
  top: 50%; /* Adjust the positioning as needed */
  /*transform: translateY(-50%); /* Vertically center the text */*/
  /*color: #999;  Adjust the text color as needed */
  /*font-size: 14px;  Adjust the font size as needed */
/*}*/