/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.warning {
  color: orange;
  border-color: orange;
}

.error {
  color: red;
  border-color: red;
}

.warningTxt {
  color: orange;
}

.errorTxt {
  color: red;
  font-size: 0.85rem;
  position: absolute;
  bottom: -10px;
}

.pd-checkbox .value {
  margin-left: 0 !important;
}

input.error[type=checkbox] {
  background-color: red;
}

input.error:not([type=submit]),
select.error {
  border: 2px solid red;
  margin-bottom: 15px;
}

label {
  display: block;
}

#kbpd-notification {
  width: 100%;
}

#kbpd-loader {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 999;
}

#kbpd-loader::after {
  content: "";
  width: 40px;
  height: 40px;
  background-color: #333;
  display: block;
  position: absolute;
  top: calc(50% - 20px);
  right: calc(50% - 20px);
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}