@CHARSET "ISO-8859-1";

/*--------------------
GENERAL
--------------------*/
/*@import url(https://fonts.googleapis.com/css?family=Roboto);*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  background: #f2f2f2;
  font-family: 'Roboto', verdana, sans-serif;
  height: 100%;
}

h1 {
  font-size: 1.5em;
  font-weight: 100;
}

#cardForm {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*--------------------
PANEL FORM
--------------------*/

.panel {
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}

.panel__header {
  background: #3F51B5;
  color: #fff;
}
.panel__header h1{
	color: #fff !important;
}
#stripe_gateway_card_container .panel__header,
#stripe_gateway_card_container .panel__footer {
  padding: 1em 2em;
}

.panel__footer {
  background: #f3f3f3;
}

#stripe_gateway_card_container .panel .panel__content {
    padding: 1em 2em;
    overflow: hidden;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap
}
#stripe_gateway_card_container .panel__content .textfield--float-label.text-field-float-100{
	width: 100%;
}
.panel__content .textfield--float-label {
  margin: 10px 0px;
  width: 50%;
}
#stripe_gateway_card_container.small-container .textfield--float-label {
  width: 100%;
  float: left;
  display: inline-block;
}
#stripe_gateway_card_container.small-container .panel{
	width: 100%;
}
.panel__content .input-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 {
    height: 33px;
    margin-bottom: -1px;
    transform: translate(0, 0);
    font-size: 12px;
    line-height: 15px;
    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;
  }
}

span.icon {
  position: relative;
  top: 0.2em;
  margin-right: 0.2em;
}

svg {
  fill: #333;
}

.panel__content .stripe-input-field {
  padding: 10px 0px 0px 0px;
  margin-bottom: 1em;
  display: block;
  background-color: transparent;
  color: rgba(0, 0, 0, .87);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .26);
  outline: 0;
  width: 100%;
  font-size: 16px;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.stripe-input-field:focus{
	border: none;
}
.pay-button {
  background: #E91E63;
  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);
}


/*--------------------
BT HOSTED FIELDS SPECIFIC 
--------------------*/

.panel__content .textfield--float-label .input-field-focus {
  border-bottom: 2px solid #3F51B5 !important;
  transition: all 200ms ease;
}

.panel__content .stripe-field-invalid {
  border-bottom: 2px solid #E91E63;
  transition: all 200ms ease;
}


/*---------------------
Media Queries
----------------------*/

@media (max-width: 600px) {
  html {
    overflow: auto;
  }
  #cardForm {
    height: auto;
    margin: 2em;
    font-size: 13px;
  }
  .panel {
    width: 100%;
  }
  .panel__content .textfield--float-label {
    width: 100%;
    float: none;
    display: inline-block;
  }
  .pay-button {
    width: 100%;
  }
}