/* forms.css */
form {
  font-family: var(--standard);
}
.formbody {
  background-color: var(--white);
    padding: 1rem;
}
.widget {
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--gry80);
}
.widget p,
.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6,
.widget a,
.widget ul,
.widget ol {
  color: var(--gry80);
}
.widget a:hover {
  color: var(--ci001);
}

.widget .help {
    font-size: var(--font_size3);
    color: var(--black);
}

input.text {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: .5rem;
  -webkit-box-shadow: 0 0 1px 0 var(--white);
  box-shadow: 0 0 1px 0 var(--white);
  border: 1px solid var(--gry50);
  font-size: var(--font_p);
  color: var(--gry80);
  font-family: var(--standard);
}
.textarea {
  width: 100%;
  height: 8rem;
  max-width: 100%;
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--gry50);
  font-size: var(--font_p);
  color: var(--gry80);
  font-family: var(--standard);
}
.ce_form div.submit_container {
  margin: 0;
  padding: 0;
  border: none;
}
.widget-upload label {
  display: block;
  font-size: 1.4rem;
  opacity: 0.7;
}
input[type="file"] {
  min-width: 500px;
  display: block;
  padding-right: 1rem;
  background-color: var(--ci001);
  font-size: 1.4rem;
  color: var(--white);
  font-family: var(--standard);
  cursor: pointer;
}
::file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--gry80);
  border: 1px solid var(--gry80);
  border-radius: 5px;
  font-size: 1.4rem;
  color: var(--white);
  font-weight: normal !important;
  transition: var(--animation_03);
  cursor: pointer;
}
::file-selector-button:hover {
  padding: 0.5rem 1.5rem;
  transition: var(--animation_03);
}
::-webkit-file-upload-button {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--gry80);
  border: 1px solid var(--gry80);
  border-radius: 5px;
  font-size: 1.4rem;
  color: var(--white);
  font-weight: normal !important;
  transition: var(--animation_03);
  cursor: pointer;
}
::-webkit-file-upload-button:hover {
  padding: 0.5rem 1.5rem;
  transition: var(--animation_03);
}

.widget-fineuploader {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--gry50);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
.fineuploader-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.fineuploader-container {
  width: 100%;
}

.fineuploader-item .color-scheme--dark {
  display: none !important;
}
.fineuploader-container .fineuploader-item {
  width: 75%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: .5rem;
  border-bottom: 1px solid var(--gry50);
}
.fineuploader-item .content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fineuploader-item .name {
  padding-left: .25rem;
}

.fineuploader-item .details {
  padding-left: .25rem;
}

.fineuploader-item .delete {
  padding-left: .5rem;
  font-weight: bold;
}

.fineuploader-wrapper .fineuploader-item.file {
  display: flex;
}


select {
  width: 100%;
  height: 50px;
  padding: .25rem .5rem;
  font-size: var(--font_p);
  color: var(--gry80);
  border: 1px solid var(--gry50);
  font-family: var(--standard);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background: none !important;
}
option {
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 2em;
  position: relative;
  display: block;
  padding: 12px;
  white-space: normal;
  font-size: var(--font_p);
  line-height: 2em;
  font-family: var(--standard);
    background: none !important;
}
option:focus,
option:hover {
  background-color: var(--white);
  color: var(--col07);
}
.widget-select {
  position: relative;
}
/*
.widget-select:after {
  right: 8px;
  top: 4px;
  position: absolute;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--gry10);
  font-size: 1.5rem;
  line-height: 1em;
  color: var(--gry10);
  content: "<>";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  pointer-events: none;
}
*/

.radio_container span {
  display: flex;
  align-items: center;
}
/*
.checkbox_container span,
.radio_container span {
  display: flex;
  align-items: center;
}

.checkbox_container label {
  padding-left: 0.5rem;
  vertical-align: middle;
  font-size: 1.4rem;
  color: var(--gry80);
  font-family: var(--standard);
}

input[type="checkbox"]:empty {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--gry80);
  font-size: 1.25rem;
  color: var(--gry80);
}
*/
/*
[type="checkbox"] + label {
  position: absolute;
}*/

.widget-checkbox [type="checkbox"] label {
    display: flex;
  align-items: center;
}

.widget-checkbox input[type="checkbox"]:checked+label::before {
  background-color: var(--ci001);
}
.widget-checkbox [type="checkbox"] {
  position: relative;
  z-index: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.widget-checkbox [type="checkbox"] + label {
    display: flex;
    align-items: center;
}

.widget-checkbox [type="checkbox"] + label::before {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 3px;
  border: 1px solid var(--gry80);
  background-color: var(--white);
  display: block;
  content: "";
  margin-right: .75rem;
  z-index: 5;
  position: relative;
}
.widget-checkbox [type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px var(--white);
  background-color: var(--gry80);
}



.widget-radio {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gry10);
}
.radio_container span {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.radio_container label {
  padding-left: 0.5rem;
  font-size: 1.4rem;
  line-height: 2em;
  color: var(--gry80);
  font-family: var(--standard);
}
input[type="radio"]:empty {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--gry80);
  font-size: 1.25rem;
  color: var(--gry80);
}

#ctrl_notify {
  padding: 0;
}


p.error {
  width: 0;
  height: 0;
  display: none;
}
.error {
  margin-right: 0;
  margin-left: 0;
}
select.error,
input.error,
textarea.error,
.widget-radio label {
  border-color: #f00;
}
.widget-radio.error label,
input.error[placeholder],
textarea.error[placeholder],
select.error[placeholder],
select.error {
  color: #f00;
}
.widget-explanation p {
  font-size: 1.4rem;
  font-family: var(--standard);
}
input[placeholder],
textarea[placeholder],
select[placeholder] {
  padding-inline: .5rem;
  font-size: 1.4rem;
  font-family: var(--standard);
}



.mod_login .formbody {
  width: 100% !important;
  background: none;
  padding: 0;
}
.mod_login label {
  display: none;
}
.mod_login .widget {
  margin: 0.25rem 0 !important;
}
.mod_login input[placeholder],
.mod_login input::placeholder {
  text-align: center;
  color: var(--white) !important;
  opacity: 1 !important;
}
input#username,
input#password {
  height: auto;
  margin: 0.25rem 0;
  padding: 1rem;
  background-color: #000;
  border: 1px solid var(--white);
  border-radius: 0;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.6);
}
.mod_login button {
  width: 100%;
  text-align: center;
  border: 1px solid var(--white);
  font-size: 1.4rem;
  background-color: rgba(0, 188, 212, 0.75);
  padding: 1rem !important;
  margin: 0.25rem 0 !important;
}
.mod_login button:hover {
  background-color: var(--ci002);
}
.mod_login button[type="submit"] {
  width: 100%;
  display: inline-block !important;
  text-align: center !important;
  border: 1px solid var(--white);
  font-size: 1.4rem;
  background-color: rgba(0,188,212,.75);
  padding: 1rem !important;
  margin: 0.25rem 0 !important;
  transition: var(--animation_03);
}
.mod_login button[type="submit"]:hover {
  background-color: var(--ci002);
  border: 1px solid var(--white);
  transition: var(--animation_03);
}