.cpx-form {
  -webkit-transition: opacity 0.12s ease-in-out;
  transition: opacity 0.12s ease-in-out;
  position: relative;
}
.cpx-form input[type=text],
.cpx-form input[type=email],
.cpx-form input[type=tel],
.cpx-form input[type=password],
.cpx-form input[type=number],
.cpx-form select,
.cpx-form textarea {
  border: 2px solid var(--cpx-color-red);
  color: var(--cpx-color-text);
  background-color: #fff;
  padding: 8px 17px;
  margin-bottom: 10px;
  width: 100%;
  border-radius: 5px;
  font-size: 1rem;
  font-family: var(--cpx-font-stack);
}
.cpx-form input[type=text][aria-invalid=true],
.cpx-form input[type=email][aria-invalid=true],
.cpx-form input[type=tel][aria-invalid=true],
.cpx-form input[type=password][aria-invalid=true],
.cpx-form input[type=number][aria-invalid=true],
.cpx-form select[aria-invalid=true],
.cpx-form textarea[aria-invalid=true] {
  border-color: var(--cpx-color-red);
}
.cpx-form input[type=text]:focus, .cpx-form input[type=text]:hover,
.cpx-form input[type=email]:focus,
.cpx-form input[type=email]:hover,
.cpx-form input[type=tel]:focus,
.cpx-form input[type=tel]:hover,
.cpx-form input[type=password]:focus,
.cpx-form input[type=password]:hover,
.cpx-form input[type=number]:focus,
.cpx-form input[type=number]:hover,
.cpx-form select:focus,
.cpx-form select:hover,
.cpx-form textarea:focus,
.cpx-form textarea:hover {
  outline: 0 none;
}
.cpx-form label {
  width: 100%;
  font-family: var(--cpx-font-stack-title);
  color: inherit;
}
.cpx-form.loading {
  opacity: 0.9;
  pointer-events: none;
}
.cpx-form.loading .loading-screen {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.cpx-form.loading .loading-screen .lds-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.cpx-form--parchment {
  font-family: var(--cpx-font-stack-parchment);
}
.cpx-form--parchment input[type=text],
.cpx-form--parchment input[type=email],
.cpx-form--parchment input[type=tel],
.cpx-form--parchment input[type=password],
.cpx-form--parchment input[type=number],
.cpx-form--parchment select,
.cpx-form--parchment textarea {
  color: var(--cpx-color-text);
  background-color: rgba(255, 255, 255, 0.2);
  font-family: var(--cpx-font-stack-parchment);
  border-top: none;
  border-left: none;
  border-right: none;
}
.cpx-form--parchment label {
  font-family: var(--cpx-font-stack-parchment);
}
.cpx-form--parchment .cpx-button {
  font-family: var(--cpx-font-stack-parchment);
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  -webkit-transform-origin: 40px 40px;
          transform-origin: 40px 40px;
  -webkit-animation: lds-spinner 1.2s linear infinite;
          animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
  border: 1px solid rgb(188, 188, 188);
}

.lds-spinner div:nth-child(1) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.cpx-image-upload__input {
  visibility: hidden;
  position: absolute;
  opacity: 0;
}
.cpx-image-upload__label {
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 200px;
  display: block;
}
.cpx-image-upload__label img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.cpx-image-upload__label img:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  opacity: 0.9;
}