fieldset {
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
}

fieldset > legend {
  font-weight: 600;
  text-align: center;
  text-align: center;
  display: block;
}

fieldset + fieldset:not(.toggle-content) {
  margin-top: 1rem;
}

fieldset.container {
  max-width: 500px;
  padding: 0;
}

.form-radio,
.form-group {
  position: relative;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}

.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #4d5e73;
  font-size: 0.8rem;
}

.checkbox .form-help,
.form-radio .form-help,
.form-group .form-help {
  position: absolute;
  width: 100%;
}

.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}

.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 2.5rem;
}

.form-group textarea {
  resize: none;
  min-height: 6.2em;
}

.form-group select {
  height: 2.5rem;
  box-shadow: none;
  display: block;
  background: #fefefe;
  padding: 0.3rem 3rem 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #cbccce;
  border-radius: 0.2rem;
  line-height: 2;
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  min-width: 8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.form-select {
  position: relative;
}

.form-select:after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8.727L16 23.272 0 8.727z'/%3E%3C/svg%3E");
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

.form-group select + .helper {
  position: absolute;
  right: 1rem;
  top: 0.3rem;
}

.form-group > label {
  font-size: 1rem;
  font-weight: bold;
  padding-left: 0.125rem;
  margin-bottom: 0.2rem;
}

.form-group .control-label {
  position: absolute;
  top: 0.7rem;
  left: 0;
  pointer-events: none;
  padding-left: 1rem;
  z-index: 1;
  color: #4d5e73;
  font-size: 0.8rem;
  font-weight: normal;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
}

.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid transparent;
  display: block;
}

.form-group .bar:before {
  content: "";
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: oklch(0.7173 0.1924 49);
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

.form-group input,
.form-group textarea {
  display: block;
  background: #fefefe;
  padding: 0.3rem 1rem 0.3rem 1rem;
  font-size: 0.9rem;
  border: 1px solid #cbccce;
  line-height: 2;
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  min-width: 8rem;
  border-radius: 4px;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: oklch(0.7173 0.1924 49);
}

.form-group input[readonly] {
  color: #4d5e73;
}

.form-group input[type="file"] {
  line-height: 1;
}

.form-group input[type="file"] ~ .bar {
  display: none;
}

.form-group select:focus,
.form-group select:valid,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #202020;
}

.form-group select:focus ~ .control-label,
.form-group select:valid ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:required:valid ~ .control-label,
.form-group input:not([value=""]):not(:required) ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:required:valid ~ .control-label,
.form-group textarea:not([value=""]):not(:required) ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.6rem;
  color: gray;
  top: -1rem;
  left: 0;
  opacity: 0;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}

.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: oklch(0.7173 0.1924 49);
}

.form-group select:focus ~ .bar:before,
.form-group input:focus ~ .bar:before,
.form-group textarea:focus ~ .bar:before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio .radio label {
  position: relative;
  cursor: pointer;
  padding-left: 1.5rem;
  text-align: left;
  display: block;
  line-height: 1.2rem;
}

.checkbox input,
.form-radio input {
  width: 0.00000001px;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
  min-width: auto;
}

.radio {
  /* margin-bottom: 1rem; */
}

.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #4d5e73;
}

.radio .helper:before,
.radio .helper:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}

.radio .helper:after {
  -webkit-transform: scale(0);
  transform: scale(0);
  background-color: oklch(0.7173 0.1924 49);
  border-color: oklch(0.7173 0.1924 49);
}

.radio input:focus + .helper,
.radio label:hover .helper {
  color: oklch(0.7173 0.1924 49);
}

.radio input:checked ~ .helper:after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.radio input:checked ~ .helper:before {
  color: oklch(0.7173 0.1924 49);
}

.form-radio-label .radio {
  margin-top: 0 !important;
}

.form-radio-label .radio {
  margin-bottom: 1rem !important;
}

.form-radio-label .radio label {
  padding: 0;
  margin-right: 1rem;
  margin-bottom: 0;
}

.form-radio-label .radio input ~ .helper {
  position: relative;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 1px #bbc1c8 inset;
  border-radius: 0.2rem;
  white-space: nowrap;
  padding: 0.8rem 2rem;
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1;
}

.form-radio-label .radio input:focus + .helper,
.form-radio-label .radio label:hover .helper,
.form-radio-label .radio input:checked ~ .helper {
  box-shadow: 0 0 0 2px #7755dd inset;
  color: oklch(0.7173 0.1924 49);
}

.form-radio-label .radio input ~ .helper:before,
.form-radio-label .radio input ~ .helper:after {
  display: none;
}

.checkbox {
  /* margin-top: 3rem; */
  margin-bottom: 1rem;
}

label + .radio,
label + .checkbox {
  margin-top: 0rem;
}

.radio + .radio {
  margin-top: 0.5rem;
}

.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 3px;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}

.checkbox--black .helper {
  color: #4d5e73;
}

.checkbox .helper:before,
.checkbox .helper:after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: oklch(0.7173 0.1924 49);
  display: block;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 0.25rem;
  content: "";
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}

.checkbox--black .helper:before,
.checkbox--black .helper:after {
  background-color: #4d5e73;
}

.checkbox .helper:before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}

.checkbox--black .helper:before {
  box-shadow: none;
}

.checkbox .helper:after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox label:hover .helper {
  color: oklch(0.7173 0.1924 49);
}

.checkbox--black label:hover .helper {
  color: #999;
}

.checkbox input:checked ~ .helper {
  color: oklch(0.7173 0.1924 49);
}

.checkbox--black input:checked ~ .helper {
  color: #4d5e73;
}

.checkbox input:checked ~ .helper:after,
.checkbox input:checked ~ .helper:before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}

.checkbox input:checked ~ .helper:after {
  height: 0.5rem;
}

.checkbox input:checked ~ .helper:before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
  transition-delay: 0.28s;
}

.has-error .legend.legend,
.has-error.form-group .control-label.control-label {
  color: oklch(0.7173 0.1924 49);
}

.text-help {
  font-size: 0.8rem;
}

.validate-error {
  background-color: oklch(0.7173 0.1924 49);
  color: #fff;
  padding: 0.5rem 1rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  transform: translateY(100%);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  font-size: 0.7rem;
  line-height: 1;
}

.has-error.form-group .form-help,
.has-error.form-group .helper,
.has-error.checkbox .form-help,
.has-error.checkbox .helper,
.has-error.radio .form-help,
.has-error.radio .helper,
.has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: oklch(0.7173 0.1924 49);
}

.has-error .bar:before {
  background: oklch(0.7173 0.1924 49);
  left: 0;
  width: 100%;
}

.required {
  position: relative;
}

div.required label:after {
  content: "*";
  position: relative;
  top: -0.2rem;
  font-size: 0.8rem;
  color: oklch(0.7173 0.1924 49);
}

.toggle-password {
  position: relative;
}

.toggle-password input[type="checkbox"],
.toggle-password input[type="checkbox"] + span {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 35%;
  cursor: pointer;
}

.toggle-password input[type="checkbox"] {
  opacity: 0;
}

.toggle-password input[type="checkbox"] + span {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='gray' d='M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z'/%3E%3C/svg%3E")
    center center no-repeat;
  pointer-events: none;
}

.toggle-password input[type="checkbox"]:checked + span {
  background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='gray' d='M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'/%3E%3C/svg%3E")
    center center no-repeat;
}

.toggle-password input::-ms-reveal,
.toggle-password input::-ms-clear {
  display: none;
}

.form-group {
  position: relative;
}

.file-upload-wrapper {
  position: relative;
  width: 100%;
  height: 2.5rem;
  box-shadow: 0 0 0 1px #cbccce inset;
  padding: 1px;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}

.file-upload-wrapper:after {
  content: attr(data-text);
  font-size: 0.9rem;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0 1rem;
  z-index: 20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.file-upload-wrapper:before {
  content: attr(data-btn);
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  display: flex;
  background: #75d;
  color: #fff;
  z-index: 25;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  padding: 0rem 2rem;
  text-transform: uppercase;
  pointer-events: none;
  align-items: center;
}

.file-upload-wrapper:hover:before {
  background: #5dd;
}

.file-upload-wrapper input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  width: 200%;
  background: transparent;
}