/* Style the form */
@font-face {
  font-family: Roboto;
  src: url('font/Roboto-Black.ttf');
}

@font-face {
  font-family: Roboto-Regular;
  src: url('font/Roboto-Regular.ttf');
}

font-family.billing-container {
  font-family: Roboto, sans-serif !important;
}

.evinox-buildings {
  background-image: url('Evniox_Residential_Skyline_Graphic.png');
  background-position: center bottom;
}

.pm-plugin-background {
  background-color:  #eb9900;
}

.pm-plugin-background-valid-user {
  background-color:  #ffffff !important;
}

#billing-container {
  font-family: Roboto, sans-serif !important;
  font-size: calc(0.4rem + 0.5vw);
  color: #ffffff;
  background-color: inherit;
  margin-left: 5% !important;
  letter-spacing: 0.01rem;
  font-weight: 300;
  font-style: normal;
  text-transform: none;
  line-height: 1.5;
}

.pm-info-section-heading {
  color: #6a6969 !important;
  font-size: calc(.6rem + 0.5vw) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.01rem !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  text-transform: none !important;
}

.pm-h2 {
  color: #ffffff !important;
}

.pm-info-section-text {
  color: #ffffff !important;
}

.pm-standard-text {
  color: #ffffff !important;
  font-size: calc(.6rem + 0.5vw) !important;
  font-weight: 300 !important;  
}

.pm-wizard-standard-text {
  color: #727b81;
  font-weight: 400;
  white-space: pre-wrap;      /* CSS3 */   
  white-space: -moz-pre-wrap; /* Firefox */    
  white-space: -pre-wrap;     /* Opera <7 */   
  white-space: -o-pre-wrap;   /* Opera 7 */    
  word-wrap: break-word;      /* IE */
}

.pm-dash-text {
  color: #6a6969 !important;
}

.pm-section-heading {
  color: #2b2929;
  font-size: calc(.6rem + 0.5vw) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.01rem !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  text-transform: none !important;
}

/*
a {
  text-decoration: none !important;
  color: #5f20a5 !important; 
}

a:hover {
  color: #ccc !important;
}
*/
p {
  margin-bottom: 5px !important;
}

#regForm {
  font-family: 'Roboto';
  background-color: #ffffff;
  /*margin: 100px auto;
  padding: 40px;*/
  width: 100%;
  height: 100%;
  min-width: 300px;
  overflow:auto;
}

.pm-box {
  width: 50%;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 3px 7px 0 rgba(0, 0, 0, 0.3);
  border-color: #d9d9d9;
  border: 3px solid;
  margin-bottom: 0.5em;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 15px;
}

.pm-wizard-box {
  width: 50%;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 3px 7px 0 rgba(0, 0, 0, 0.3);
  border-color: #d9d9d9;
  border: 3px solid;
  background-color: #ffffff;
  margin-bottom: 0.5em;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 15px;
}

.pm-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.pm-warning-info {
  color: crimson;
}

.pm-inline.required:after {
  color:red;
  content: " *";
}

.pm-inline label {
  margin: 5px 10px 5px 0 !important;
  color: #2b2929 !important;
  font-family:Roboto;
  font-size:12px;
  font-style:normal;
  font-variant-ligatures:none;
  font-weight:700;
}

/* Style the input fields */

input {
  outline: none;
  border-color: #777771 !important;
  background-color: #ffffff;
  padding: .5rem !important; 
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa !important;
  margin-bottom: 0.5em !important;
}


/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #F9E4E8;
  border-color:rgb(224, 69, 98) !important;
  border-radius:2px;
  border:1px solid;
  border-image-outset:0;
  border-image-repeat:stretch;
  border-image-slice:100%;
  border-image-source:none;
  border-image-width:1;
  box-shadow:none;
  box-sizing:border-box;
}

input:hover, input:active, input:focus, input:focus-within {
  border-color:#17A8E3 !important;
  border:2px solid;
}

.pm-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

a.pm-link {
  color: #ffffff;
  font-size: calc(.4rem + 0.3vw) !important;
  font-weight: 400;
  text-decoration: underline;
}

a.pm-link:hover {
  color: #ffffff;
}

a.pm-link:visited {
  color: #ffffff;
}

a.pm-dash-link {
  color: #eb9900;
  font-size: calc(.4rem + 0.3vw) !important;
  font-weight: 400;
  text-decoration: underline;
}

a.pm-wizard-link {
  color: #d74430;
  font-size: calc(.4rem + 0.3vw) !important;
  font-weight: 400;
  text-decoration: underline;
}

a.pm-wizard-link:hover {
  color: #d74430;
}

a.pm-wizard-link:visited {
  color: #d74430;
}

a.pm-dash-link:hover {
  color: #eb9900;
}

a.pm-dash-link:visited {
  color: #eb9900;
}

table,
th, tr, td {
  border-collapse: collapse !important;
  border: none !important;
}

button.pm-button,
input[type="button"].pm-button, 
input[type="reset"].pm-button, 
input[type="submit"].pm-button {
  min-width: 100px;
  background: #eb9900;
  border-color: #ffffff !important;
  border: 1px solid !important;
  color: #ffffff !important;
  display: inline-block;
  text-decoration: none !important;
  margin-top: 1em;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  -webkit-appearance: button;
  -webkit-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  align-items: flex-start;
  padding: 10px !important;
}

button.pm-button:hover {
  transition:box-shadow .2s !important;
  background: #5f20a5;
}

button.pm-button-inverted {
  min-width: 100px;
  background: #ffffff;
  color: #eb9900 !important;
  border-color: #eb9900 !important;
  border: 1px solid !important;
  display: inline-block;
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  -webkit-appearance: button;
  -webkit-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  align-items: flex-start;
  padding: 10px !important; 
}

button.pm-button-gradient
{
  min-width: 100px;
  background-image: linear-gradient(to right, #eb9900 , #de6027);
  border-width: 1px !important;
  color: white !important;
  display: inline-block;
  text-decoration: none !important;
  margin-top: 1em;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  -webkit-appearance: button;
  -webkit-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  align-items: flex-start;
  padding: 10px !important;
}

button.disabled {
  background: #cfd2d4;
}

button.pm-button-gradient:hover {
  background-image: linear-gradient(to right, #de6027 , #d22b2a);
}

/* Hide all steps by default: */
.tab{
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 25px;
  width: 25px;
  margin: 0 50px;
  background-color: #c6c6c6;
  border: none; 
  border-radius: 50%;
  display: inline-block;
  /*opacity: 0.5;*/
}

/* Mark the active step: */
.step.active {
  opacity: 1;
  background-color: #eb9900;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #eb9900;
}

.step-line {
  margin-top: 0px;
  margin-left: 24px;
  width: 105px;
  background-color: #c6c6c6;
  height: 4px; 
  display: inline-block;
  /*opacity: 0.5; */
}

.step-line.active {
  opacity: 1;
  background-color: #eb9900;
}

.step-line.finish {
  background-color: #eb9900; 
}

.errorCondition.hidden {
  background-color:#1ac036;
}

.errorCondition {
  margin-bottom: 1em !important;
  width: 100% !important;
  background-color:#F9E4E8;
  border-color:#E04562;
  box-sizing:border-box;
  color:#E04562;
  display:block;
  font-family:Roboto;
  font-size:12px;
  font-style:normal;
  font-variant-ligatures:none;
  height:28px;
  letter-spacing:0.15645px;
  line-height:24px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  margin-top:2px;
  overflow-wrap:break-word;
  padding-bottom:2px;
  padding-left:10px;
  padding-right:10px;
  padding-top:5px;
  text-rendering:optimizelegibility;
  text-shadow:rgba(0, 0, 0, 0.01) 0px 0px 1px;
  text-transform:none;
  width:457.203px;
  -webkit-box-direction:normal;
  -webkit-font-smoothing:antialiased; 
  border-radius: 2px;
  line-height: 2em;
}