@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');



* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  font-family: Raleway, 'Courier New', Courier, monospace;

  line-height: 24px;

}



div {

  transition: all 0.5s;

}



.billing-form {

  padding-top: 5px;

  padding-bottom: 5px;

}



.form-title,

.form-label {

  color: #8c979e;

  font-size: 14px;

  line-height: 24px;

  font-weight: bold;

  text-align: left !important;

  padding-left: 5%;

}



.form-title {

  display: block;

}



.block {

  display: block;

}



.billing-form input[type='text'],

textarea {

  background-color: #f5f5f5;

  margin: 0px 0px 24px;

  padding: 5px 4px;

  outline: none;

  box-shadow: none;

  border: none;

  width: 90%;

  border-radius: 0px;

  border: 1px solid rgb(228, 228, 228);

}



.billing-form input[type='text'] {

  height: 50px;

}



.billing-form input[type='email'] {

  background-color: #f5f5f5;

  margin: 0px 0px 24px;

  padding: 5px 4px;

  outline: none;

  box-shadow: none;

  border: none;

  height: 50px;

  width: 90%;

  border-radius: 0px;

  border: 1px solid rgb(228, 228, 228);

}



select {

  width: 90%;

  text-align: left;

  border: 1px solid rgb(228, 228, 228);

}



.email-container {

  width: 100%;

}



.image {

  width: 100%;

  max-width: 475px;

  min-width: 220px;

  height: auto;

}



.no-errors:hover,

.no-errors:focus {

  border: solid 1px blue !important;

}



.has-errors {

  border: solid 1px red !important;

  background: #fff7f7;

}



.form-group {

  margin: 1em 0;

}



.required {

  font-size: 10px;

}



.form-group p,

.info {

  color: #8c979e;

  font-size: 10px;

}



.absolute {

  position: absolute;

  z-index: -10;

}



.hide {

  opacity: 0;

}



.form-error {

  display: block;

  color: red;

  font-size: 12px;

  font-weight: bold;

}



.error {

  background: #ffeeee;

  border-top: 1px solid #a52020;

  border-bottom: 1px solid #a52020;

}



.billing-form a {

  font-size: 11px;

  text-decoration: none;

  color: #5234f9;

  font-weight: 600;

}



textarea {

  resize: none;

  width: 100%;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.foam-options {

  list-style-type: none;

  color: #8c979e;

  font-size: 12px !important;

}



label b {

  color: #8c979e;

  font-size: 12px;

}



.clickable {

  cursor: pointer;

}



.submit-button,

.save-button {

  font-size: 1em;

  font-weight: 600;

  border: none;

  opacity: 0.9;

  transition: all 0.5s;

}



.submit-button {

  background: #5d47d7;

  width: 150px;

  height: 50px;

  color: #fff;

  margin-right: 16px;

  opacity: 0.7;

}



#form-has-error {

  color: #a52020;

  font-size: medium;

  font-weight: bold;

}



.save-button {

  color: #5d47d7;

  background-color: #fff;

}



.submit-button:hover {

  background: #4e39c4;

  opacity: 1;

}



.save-button:hover {

  opacity: 1;

  color: #4e39c4;

}



@media only screen and (min-width: 641px) {

  .billing-form input[type='text'],

  select {

    width: calc(50% - 8px);

  }

 .billing-form  select {

	height: 50px;

	background-color: #f5f5f5;

    margin: 0px 0px 24px;

    padding: 5px 4px;

    outline: none;

    box-shadow: none;

    border: none;

    width: 90%;

    border-radius: 0px;

    border: 1px solid #e4e4e4;

  }

  

  .billing-form input[type='email'] {

    width: 100%;

  }



  .form-title,

  .form-label {

    padding-left: 0;

  }



  .form-group {

    text-align: left;

    padding: 4px;

    margin-bottom: 10px;

    margin-top: 10px;

  }



  .email-container {

    display: flex; /* establish flex container */

    flex-direction: row; /* default value; can be omitted */

    flex-wrap: nowrap; /* default value; can be omitted */

    justify-content: space-between; /* switched from default (flex-start, see below) */

    width: 100%;

  }

  .left-input {

    width: calc(50% - 10px);

  }

  .right-input {

    width: calc(50% - 10px);

  }

}