input.form-standard,
textarea.form-standard,
select.form-standard {
  background-color: var(--main-5-color);
  border: 1px solid var(--main-15-color);
}

label.form-standard-label, 
.wraparea label.form-standard-label {
  font-size: 14px;
}

input.form-standard:focus,
textarea.form-standard:focus,
select.form-standard:focus {
  border-color: var(--accent1-color);
}

.form-group-standard.error input.form-standard,
.form-group-standard.error textarea.form-standard,
.form-group-standard.error select.form-standard {
  border-color: var(--alert-color);
}

.form-standard-label {
  color: var(--main-50-color);
}

input.form-standard:focus + .form-standard-label,
input.form-standard:not(:placeholder-shown) + .form-standard-label,
input.form-standard:-webkit-autofill + .form-standard-label,
select.form-standard:focus + .form-standard-label,
select.form-standard:not([value=""]):valid ~ .form-standard-label,
.wraparea textarea.form-standard:focus + .form-standard-label,
.wraparea textarea.form-standard:not(:placeholder-shown) + .form-standard-label {
  color: var(--main-color);
}

.form-standard-error {
  color: var(--alert-color);
  font-size: 10px;
}

.form-standard-codecheck {
  color: var(--accent1-color);
  font-size: 12px;
}


input.form-standard, 
textarea.form-standard, 
select.form-standard {
  font-size: 16px;
}




/* Checkboxes */

.form-group-standard .checkbox-standard input[type="checkbox"]:not(:checked) + label,
.form-group-standard .checkbox-standard input[type="checkbox"]:checked + label {
  font-size: 1em;
}

/* checkbox aspect */
.form-group-standard .checkbox-standard input[type="checkbox"]:not(:checked) + label:before {
  border: 1px solid var(--main-15-color);
  background: var(--main-5-color);
}

.form-group-standard .checkbox-standard input[type="checkbox"]:checked + label:before {
  border: 0px solid var(--main-color);
  background: var(--main-color);
}

/* checked mark aspect */
.form-group-standard .checkbox-standard input[type="checkbox"]:not(:checked) + label:after,
.form-group-standard .checkbox-standard input[type="checkbox"]:checked + label:after {
  top: 15px;
  left: 5px;
  font-size: 26px;
  line-height: 0;
  color: var(--accent1-color);
}

/* Disabled checkbox */
.form-group-standard .checkbox-standard input[type="checkbox"]:disabled:not(:checked) + label:before,
.form-group-standard .checkbox-standard input[type="checkbox"]:disabled:checked + label:before {
  background-color: var(--main-5-color);
}

.form-group-standard .checkbox-standard input[type="checkbox"]:disabled:checked + label:after {
  color: var(--main-25-color);
}

.form-group-standard .checkbox-standard input[type="checkbox"]:disabled + label {
  color: var(--main-25-color);
}



/* Radiobuttons */

.radiobtn__indicator {
  background: var(--main-15-color);
}

.radiobtn.radiobtn--radio p {
  color: var(--main-50-color);
  font-size: 1em;
  line-height: 1.25;
}

.radiobtn.radiobtn--radio .item-support-persona-dropdown,
.radiobtn.radiobtn--radio .item-support-persona-info {
  opacity: 0.5;
}

.radiobtn input:checked ~ .item-support-persona-dropdown,
.radiobtn input:checked ~ .item-support-persona-info {
  opacity: 1;
}


.radiobtn input:checked ~ p {
  color: var(--main-color);
}

.radiobtn.radiobtn--radio input:disabled ~ p {
  color: var(--main-25-color);
}

.radiobtn:hover input ~ .radiobtn__indicator,
.radiobtn input:focus ~ .radiobtn__indicator {
  background: var(--accent1-color);
}

.radiobtn input:checked ~ .radiobtn__indicator {
  background: var(--main-color);
}

.radiobtn:hover input:not([disabled]):checked ~ .radiobtn__indicator,
.radiobtn input:checked:focus ~ .radiobtn__indicator {
  background: var(--main-color);
}

.radiobtn input:disabled ~ .radiobtn__indicator {
  background: var(--main-5-color);
}

.radiobtn--radio .radiobtn__indicator:after {
  background: var(--accent1-color);
}

.radiobtn--radio input:disabled ~ .radiobtn__indicator:after {
  background: var(--main-25-color);
}



/* DARK BG Form */

.darkbgform input.form-standard,
.darkbgform textarea.form-standard,
.darkbgform select.form-standard {
  background-color: var(--white-color);
  border: 1px solid var(--main-15-color);
}

.darkbgform label.form-standard-label,
.darkbgform .wraparea label.form-standard-label {
  color: var(--main-50-color);
}

.darkbgform input.form-standard:focus,
.darkbgform textarea.form-standard:focus,
.darkbgform select.form-standard:focus {
  border-color: var(--accent1-color);
}

.darkbgform input.form-standard:focus + .form-standard-label,
.darkbgform input.form-standard:not(:placeholder-shown) + .form-standard-label,
.darkbgform input.form-standard:-webkit-autofill + .form-standard-label,
.darkbgform select.form-standard:focus + .form-standard-label,
.darkbgform select.form-standard:not([value=""]):valid ~ .form-standard-label,
.darkbgform .wraparea textarea.form-standard:focus + .form-standard-label,
.darkbgform .wraparea textarea.form-standard:not(:placeholder-shown) + .form-standard-label {
  color: var(--white-color);
}

.darkbgform .form-standard-error {
  color: var(--alert-color);
}

.darkbgform .formchecktext {
  color: var(--white-color);
}

.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:not(:checked) + label, 
.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:checked + label {
  color: var(--white-color);
}

.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:not(:checked) + label:before {
  background: var(--main-15-color);
}

.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:checked + label:before {
    background: var(--accent1-color);
}

.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:checked + label:after {
  color: var(--main-color);
}

.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:disabled:checked + label:before {
    background-color: var(--main-5-color);
}

.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:disabled:checked + label:after {
  color: var(--main-50-color);
}

.darkbgform .radiobtn.radiobtn--radio p {
  color: var(--white-color);
}

.darkbgform .radiobtn input:checked ~ .radiobtn__indicator {
    background: var(--accent1-color);
}

.darkbgform .radiobtn--radio .radiobtn__indicator:after {
    background: var(--main-color);
}

.darkbgform .radiobtn:hover input:not([disabled]):checked ~ .radiobtn__indicator,
.darkbgform .radiobtn input:checked:focus ~ .radiobtn__indicator {
  background: var(--accent1-color);
}

.darkbgform .radiobtn--radio input:disabled ~ .radiobtn__indicator:after {
    background: var(--main-50-color);
}

.darkbgform .radiobtn input:disabled:checked ~ .radiobtn__indicator {
  background: var(--main-15-color);
}

.darkbgform .radiobtn.radiobtn--radio input:disabled ~ p,
.darkbgform .radiobtn input:disabled ~ .radiobtn__indicator,
.darkbgform .form-group-standard .checkbox-standard input[type="checkbox"]:disabled + label {
  opacity: 0.4;
}



/* Toggle Buttons */

.formchecktext {
  font-size: 0.95em;
  line-height: 1.5;
}

.formcheck .tgl-light:checked + .tgl-btn {
  background: var(--accent1-color);
}

.formcheck .tgl-light + .tgl-btn {
  background: var(--main-25-color);
}


/* Tablet Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {


}


/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {



}


/* Mobile Portrait */
@media only screen and (max-width: 767px) {

  .formchecktext {
    font-size: 14px;
    line-height: 1.5;
  }

  .form-standard-error {
    font-size: 9px;
  }

  .form-group-standard .checkbox-standard input[type="checkbox"]:not(:checked) + label, 
  .form-group-standard .checkbox-standard input[type="checkbox"]:checked + label {
    font-size: 12px;
  }

}