/* COMPONENTS SHARED */

/* error */
.error-field {
  text-align: left;
  /* padding-left: 14px; */
  position: absolute;
  top: 100%;
  left: 0;
}

/* input */
.component-input-box {
  position: relative;
  display: inline-block;
}

.component-input-box .error-field {
  font-family: "Bradesco Sans Medium", sans-serif;
  font-size: 12px;
  color: #ff224d;
}

.component-input-basic.input-ie {
  display: none;
  width: 100%;
}

.component-input-basic {
  width: 86%;
  display: block;
  border: 1px solid #a9a9a9;
  color: #3a3a3a;
  font-size: 16px;
  line-height: 28px;
  border-radius: 4px;
  padding: 0px 14px;
  height: 40px;
  background: #f5f5f5;
}

/* .component-input-basic.small {
  height: 40px;
} */

.component-input-basic:focus {
  outline-color: #b41a83;
}

.component-input-basic.parsley-error {
  border-color: #ff224d;
}

/* checkbox */
.component-checkbox {
  opacity: 0;
  position: absolute;
}

.component-checkbox+label {
  cursor: pointer;
  padding: 0;
  position: relative;
}

.component-checkbox+label:before {
  border: 1px solid #333;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1),
    0 1px 1px 0 rgba(173, 173, 173, 0.32);
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1),
    0 1px 1px 0 rgba(173, 173, 173, 0.32);
  content: "";
  display: inline-block;
  vertical-align: bottom;
  height: 20px;
  width: 20px;
  margin-right: 8px;
  transition: all 300ms;
  -webkit-transition: all 200ms;
}

.parsley-error>.component-checkbox+label {
  color: #ff224d;
}

.parsley-error>.component-checkbox+label:before {
  border-color: #ff224d;
}

.component-checkbox:hover+label:before {
  background-color: #3077d6;
  border-color: #1a7dff;
}

.component-checkbox:checked+label:before {
  background-color: #3077d6;
  border-color: #1a7dff;
}

.component-checkbox:disabled+label {
  color: #b8b8b8;
  cursor: auto;
}

.component-checkbox:disabled+label:before {
  background-color: #ddd;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.component-checkbox:checked+label:after {
  background-color: #fff;
  -webkit-box-shadow: 2px 0 0 #fff, 4px 0 0 #fff, 4px -2px 0 #fff,
    4px -4px 0 #fff, 4px -6px 0 #fff, 4px -8px 0 #fff;
  box-shadow: 2px 0 0 #fff, 4px 0 0 #fff, 4px -2px 0 #fff, 4px -4px 0 #fff,
    4px -6px 0 #fff, 4px -8px 0 #fff;
  content: "";
  height: 2px;
  left: 6px;
  position: absolute;
  top: 4px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 2px;
  transition: all 300ms;
  -webkit-transition: all 200ms;
}

/* select */
.component-select {
  background: none;
  border: 0;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background: url("https://assets.bradesco/content/dam/portal-bradesco/html/classic/promocoes/promocaoagro/img/icon-selection.svg") no-repeat top 5px right;
  color: #6d6e71;
  font-size: 13px;
  font-style: italic;
  line-height: 18px;
  padding-right: 16px;
  cursor: pointer;
  border-radius: 0;
  border-bottom: 1px solid #B41A83;
  margin-right: 6px;
}

/* for IE10 */
.component-select::-ms-expand {
  display: none;
}