@import url(https://fonts.cdnfonts.com/css/sf-pro-display);
@import url(https://fonts.cdnfonts.com/css/sf-pro-display);
#page-wrapper {
    margin: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-title {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0.07px;
    color: #FFFFFF;
}

#page-sub-title {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.31px;
    color: #9C9EA3;
}

h1,
p,
div,
input,
select,
button {
  font-family: 'SF Pro Display', sans-serif;
  font-size: 16px;
}

html {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  --betr-grey-4: #494a4d;
  --betr-grey-2: #242527;
}

body {
  background-color: var(--betr-grey-2);
  height: 100%;
}

.paysafe-field {
  height: 56px;
  padding: 8px 16px;
  margin-bottom: 8px;
  border: 1px solid #494a4d;
  border-radius: 8px;
  box-sizing: border-box;
  color: #9c9ea3;
  background-color: #242527;
}

#card-number, #cardholder-name {
  width: 100%;
}

#cardholder-address {
  width: 75%;
  margin-right: 20px;
}

#cardholder-city {
  width: 25%;
}

#expiration-date, #cvv, #cardholder-state, #cardholder-zip {
  width: 50%;
}

.field-container {
  display: flex;
  flex-wrap: nowrap;
}

.field-container-child {
  flex: 1;
}  

.field-container-child:first-child {
  margin-right: 20px;
} 

.state-zip:first-child, #cardholder-state {
  margin-right: 20px;
} 

.debug-output {
  color: #fff;
}

input[type=text]:focus,
input[type=tel]:focus, 
select:focus {
    outline: none; 
    border: 2px solid #9f0ccc;
}

.focused-input {
  outline: none; 
  border: 2px solid #9f0ccc;
}