/* WLD FIELDS
----------------------------------------------------------------------------- */

.form-logo {
	margin-bottom: 3px;
}

@media screen and (max-width: 600px) {
	.form-logo {
	margin-bottom: 3px;
		margin-top: 156px;
}
}

/* field layout */

.wld-field__marker {
  background: url(../img/custom-tick.svg) no-repeat center center #26c281;
  background-size: 10px;
  width: 10px;
  height: 10px;
  padding: 4px;
}

.wld-fieldgroup {
  margin:0;
  padding:0;
  border: none;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
    margin-left: 8px;
}

:invalid + .wld-field__marker,
fieldset:invalid .wld-field__marker {
  display: none;
}

/* Date */
.wld-field--date .wld-field__input {
  display: flex;
}

.wld-field--date .wld-input:nth-child(2) {
  border-right: 1px solid #999;
  border-left: 1px solid #999;
}


/* Confirmation (terms etc) */
.wld-field--confirm {
  display: flex;
  flex-wrap: wrap;
}

.wld-field--confirm .wld-field__input {
  flex: 0;
  order: 0;
}

.wld-field--confirm .wld-field__caption {
  order: 1;
  flex: 1;
  font-size: 10px;
  line-height: 13px;;
}


/* WLD INPUTS
----------------------------------------------------------------------------- */

.wld-input {
  font: inherit;
}

.wld-input--text,
.wld-input--select {
  display: block;
  color: #000;
  background: #fff;
  height: 50px;
  padding: 0;
  margin: 0;
  text-indent: 22px;
  line-height: normal;
  border: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  appearance:none;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.wld-input--select {
  background: url(../img/select-arrow.svg) no-repeat right #fff;
  background-size: 44px 60px;
}

input:focus, select:focus {
  border: 3px solid rgba(13,96,199,.8);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.wld-input--checkbox {
  width: 25px !important;
  height: 25px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #eee;
  border: 1px solid #bbb;
  margin: 0 10px 0 0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.wld-input--checkbox:checked {
  background: url(../img/custom-tick.svg) no-repeat center center #3b99fc;
  background-size: 13px 11px;
  border: 0;
}


/*--Mozilla Text-indent Fix--*/
@-moz-document url-prefix() {
  .wld-input--select {
    text-indent: 10px !important;
  }
  .wld-field--date .wld-input--select {
    text-indent: 5px !important;
  }
}


/* WLD BUTTONS
----------------------------------------------------------------------------- */

.wld-button {
  display: block;
  background-color: #9c0101;
  color: #fff;
  font: inherit;
  font-size: 26px;
	font-weight: 700;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 19px;
  height: 60px;
  text-align: center;
  border: 0;
  cursor: pointer;
  width: 100%;
  z-index: 99999;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Placeholder Styling */
input::-webkit-input-placeholder {
  color: #000;
  opacity: 1;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: 1;
}
input::-moz-placeholder {  /* Firefox 19+ */
  color: #000;
  opacity: 1;
}
input:-ms-input-placeholder {
  color: #000;
  opacity: 1;
}
/* SIGN UP COMPONENT - Expanded form variant
----------------------------------------------------------------------------- */
.wld-component--signup  {
  border-radius: 4px;
  overflow: hidden;
}

.wld-component--signup .wld-form__fields > * {
  margin: 0 0 3px 0;
}

.wld-component--signup .wld-field,
.wld-component--signup .wld-fieldgroup {
  position: relative; /* relative position so :valid marker can be positioned */
}

.wld-component--signup .wld-field__marker {
  position: absolute;
  right: 0;
  top: 0;
}

.wld-component--signup .wld-fieldgroup .wld-field {
  position: static; /* allow marker to sit in the group corner */
}

.wld-component--signup .wld-input--select,
.wld-component--signup .wld-input--text {
  width: 100%;
}

.wld-component--signup .wld-field:not(.wld-field--confirm) .wld-field__caption {
  display: none; /* hide <labels> */
}

.wld-component--signup .wld-field--confirm {
  background: #fff;
  padding: 10px
}

/* change the submit button when the form is valid */
.wld-component--signup form:valid .wld-button {
  background: #393;
}

/* collapse vertical space between confirm fields */
.wld-component--signup .wld-field--confirm + .wld-field--confirm {
  padding-top: 0;
}


	.wld-component--signup  {
  border-radius: 4px;
  overflow: auto;
		
}
	.wld-component--signup .wld-input--select,
.wld-component--signup .wld-input--text, .wld-fieldgroup, button.wld-button {
 box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}


@media only screen and (max-width: 768px) and (min-width: 200px) {
	.wld-component--signup  {
  border-radius: 4px;
  overflow: auto;
		
}
	.wld-component--signup .wld-input--select,
.wld-component--signup .wld-input--text, .wld-fieldgroup, button.wld-button {
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
}