/*---- FORMS ----*/

form {
  width: 860px;
  margin: 0 auto;
}

form.wide {
  width: 100%;
  margin: 0 auto;
}

form.login {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  width: 100%;
  min-width: auto;
  max-width: 400px;
  margin-top: 5%;
  padding: 50px;
  text-align: center;
  background-color: var(--back-primary);
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
  box-shadow: 0 0 10px #00000044;
}

form.login li {
  width: 100%;
}

form.login label.small {
  margin-top: 6px;
}

form.login label.small a, form.login label.small a:visited {
  color: var(--color-secondary);
}

form.login input {
  width: 100%;
  text-align: center;
}

form.login button {
  width: 120px;
  height: auto;
  margin-top: 20px;
  border: 1px solid var(--button-border);
  background-color: var(--button-normal);
}

form li {
  display: block;
  list-style: none;
  width: 100%;
  margin-bottom: 20px;
}

form li label {
  display: block;
  margin-bottom: 4px;
  padding-left: 10px;
  color: var(--color-secondary);
  font-size: 0.8rem;
}

form li.right label { text-align: right; }
form li.right label b { display: inline-block; width: 100px; text-align: right; font-size: 1.2em; color: var(--color-primary); }

form li input, form li textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  background-color: var(--back-primary);
  color: var(--color-primary);
  font-size: 1em;
}

form li.left { text-align: left }
form li.left vbar { justify-content: flex-start; align-items: flex-start; }


input.w100 { width: 100px; }
input.w150 { width: 150px; }
input.w200 { width: 200px; }
input.w300 { width: 300px; }
input.w400 { width: 400px; }
input.w500 { width: 500px; }
input.w600 { width: 600px; }
input.h400 { height: 400px; }
input:disabled { color: var(--input-disabled); background-color: var(--back-disabled); border: 1px solid var(--border-secondary); }
input:focus { background-color: var(--back-active); }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; text-align: right; }

.upper { text-transform: uppercase; }

label.check {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  vertical-align: middle;
}

input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

input[type=search] {
  min-width: 400px;
  margin: 0; 
  padding: 10px;
  padding-left: 40px;
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}


textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  background-color: var(--back-primary);
  color: var(--color-primary);
  font-size: 1em;
}

textarea.w200 { width: 200px; }
textarea.w400 { width: 400px; }
textarea.w600 { width: 600px; }
textarea.h200 { height: 200px; }
textarea.h400 { height: 400px; }
textarea:disabled { color: var(--color-disabled); }

select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  background-color: var(--back-primary);
  color: var(--color-primary);
  font-size: 1em;
}

.formBox { max-width: 860px; }
.formPage { max-width: 860px; width: 100%; padding: 40px; background-color: var(--back-page); border-radius: 8px; box-shadow: 0 0 6px #00000044; }
/*.formBox textarea { height: 100px; }*/

button[data-selected="true"] { background-color: #ccf; }
button[data-selected="false"] { background-color: #fcc; }


.upload { position: relative; width: 220px; height: 220px; margin: 0 auto; text-align: center; vertical-align: center; /*border: 1px solid #ccc; border-radius: 8px;*/ }
.file { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; cursor: pointer; }
.preview { width: 200px; height: 100%; object-fit: contain; }
.hidden { display: none; }
.format { width: 100%; height: 100%; object-fit: contain; }