.input-help {
  display: block;
  position:absolute;
  z-index: 100;
  top: -1px;
  left: 244px;
  padding:8px;
  background: url('/Content/images/bg_btn_error.png') repeat-x;
  font-size:.875em;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border:1px solid #a62222;
  color: #ffffff;
  height: 38px;
}

.input-help:before {
  background: url('/Content/images/error_arrow.png') no-repeat;
  content: " ";
  position: relative;
  top:-8px;
  left:-15px;
  height: 25px;
  display: block;
  color: #ffffff;
}
.input-help-holder .input-help:before {
  background: url('/Content/images/error_arrow.png') no-repeat;
  content: " ";
  position: relative;
  top:-8px;
  left:-15px;
  height: 25px;
  display: block;
  color: #ffffff;
}
.input-help:after {
  content: " ";
  position: relative;
  display: block;
  top: -18px;
}

.input-help h4 {
    margin:0;
    padding:0;
    font-weight: normal;
    font-size: 1.1em;
    position: relative;
    margin-top: -30px;
    margin-left: 25px;
}

.input-help-flipped {
  display: block;
  position:absolute;
  z-index: 0;
  top: -16px;
  left: 50px;
  width:250px;
  padding:8px;
  background: url('/Content/images/bg_btn_error.png') repeat-x;
  font-size:.875em;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border:1px solid #a62222;
  color: #ffffff;
  height: 9px;
  border-right: none;


  margin-left: 200px;
  margin-top: 21px;
  width: 250px;
  height: auto;
  background-color: #c52f46;
  z-index: 1;
  border-radius: 5px;
}

.input-help-flipped:after {
  background: url('/Content/images/error_arrow2.png') no-repeat;
  content: " ";
  position: absolute;
  top: 3px;
  left: 274px;
  height: 25px;
  display: block;
  color: #ffffff;
  width: 7px;
}
.evolvi-search-button-holder .input-help-flipped:after {
        left: 264px;
}

.input-help-flipped:before {
  content: " ";
  position: relative;
  display: block;
    height: 16px;
    left: 220px;
    top: -3px;
}

.input-help-flipped h4 {
    margin:0;
    padding:0;
    font-weight: normal;
    font-size: 1.1em;
    position: relative;
    margin-top: -22px;
    left: -2px;
    width:220px
}
.input-help-flipped .x-close {
  position: absolute;
  top: -1px;
  left: 94%;
  cursor: pointer;
}

/* Show a blue border while an input has focus, make sure it overrides everything else */
/* Overriding Twitter Bootstrap cuz I don't agree we need to alarm the user while they're typing */
input:focus {
  color: black !important;
  border-color: rgba(82, 168, 236, 0.8) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
}

textarea:focus {
  color: black !important;
  border-color: rgba(82, 168, 236, 0.8) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
}

.ng-invalid:focus + .input-help {
  display: none;
}

.ng-invalid:focus + .input-help-flipped {
  display: none;
}

/* Show green border when stuff has been typed in, and its valid */
.ng-dirty.ng-valid {
  border-color:#3a7d34;
}

/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
  border-color:#ec3f41;
}


/* Immediate help should be red when pristine */
.immediate-help.ng-pristine:focus + .input-help {
  border-color:#ec3f41;
}

.immediate-help.ng-pristine:focus + .input-help-flipped {
  border-color:#ec3f41;
}

.immediate-help.ng-pristine:focus + .input-help::before {
  color:#ec3f41;
}

.immediate-help.ng-pristine:focus + .input-help-flipped::before {
  color:#ec3f41;
}

/* Help hould be green when input is valid */
.ng-valid + .input-help {
  border-color:#3a7d34;
}

.ng-valid + .input-help-flipped {
  border-color:#3a7d34;
}

.ng-valid + .input-help::before {
  color:#3a7d34;
}

.ng-valid + .input-help-flipped::before {
  color:#3a7d34;
}

.ng-invalid + .input-help::before {
  color: #ec3f41;
}

.ng-invalid + .input-help-flipped::before {
  color: #ec3f41;
}

.form-validation {
  position: relative;
}