/*
* FORMS
*/

/* form */
form
  { display: block; width: auto; margin: 0 auto; padding: 0; }
fieldset
  { border: 1px solid var(--color-accent); border-radius: 4px; }
fieldset + fieldset
  { margin-top: 1em; }
fieldset legend
  { display: inline; width: auto; font-size: 1.2em; margin: 0; padding: 0; color: var(--color-accent); text-transform: uppercase; font-weight: 600; }
fieldset div.fieldset-description
  { font-style: italic; font-size: .8em; margin: -1.5em 0 2.5em 0; color: #cccccc; }

/* fields */
div.form-field
  { margin: 0 0 1em 0; }
div.form-field label
  { display: block; font-size: .65em; margin: 0; font-weight: normal; text-transform: uppercase; color: var(--color-text-60); }
div.form-field label.required::after
  { display: inline-block; content: "*"; font-weight: 600; margin-left: .25em; color: rgba(214, 45, 26, 1); }
div.form-field div.description
  { font-size: .7em; font-style: italic; line-height: 1.1em; margin-top: .25em; color: var(--color-text-35); }
div.form-field input[type=text],
div.form-field input[type=password],
div.form-field input[type=number],
div.form-field input[type=email],
div.form-field select,
div.form-field textarea,
input[type=search]
  { display: block; width: 440px; max-width: 100%; filter: none; margin: .1em 0 0 0; padding: 0 1em; line-height: 2.24em; min-height: 2.24em;
  box-shadow: none; border-radius: .25em; background-color: #ffffff; border: 1px solid #cccccc; }
div.form-field textarea
  { line-height: 1.2em; padding: .5em 1em; }
div.form-field select option
  { padding: 0 1em; line-height: 2.24em; }
div.form-field select option:disabled
  { display: none; }
div.form-field input.disabled,
div.form-field select.disabled,
div.form-field textarea.disabled
  { background-color: #eeeeee; }

/* bool */
label.form-field-bool-container
  { position: relative; display: block; width: 60px; height: 34px; }
label.form-field-bool-container input.form-field-bool
  { opacity: 0; width: 0; height: 0; }
label.form-field-bool-container input.form-field-bool + span.form-field-bool-slider
  { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 34px;
  background-color: #cccccc; -webkit-transition: .4s; transition: .4s; }
label.form-field-bool-container input.form-field-bool[disabled] + span.form-field-bool-slider
  { cursor: not-allowed; }
label.form-field-bool-container input.form-field-bool + span.form-field-bool-slider:before
  { position: absolute; content: ""; height: 24px; width: 24px;
  left: 5px; bottom: 5px; background-color: #ffffff; border-radius: 50%; -webkit-transition: .4s; transition: .4s; }
label.form-field-bool-container input.form-field-bool:checked + span.form-field-bool-slider
  { background-color: var(--color-accent); }
label.form-field-bool-container input.form-field-bool:checked + span.form-field-bool-slider:before
  { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }

/* multiple */
.selectize-input
  { width: 440px; max-width: 100%; filter: none; margin: .15em 0 0 0; font-size: 1em; padding: .25em 1em; line-height: 1.74em;
  box-shadow: none; border-radius: 4px; background-color: #ffffff; border: 1px solid #cccccc; }
.selectize-input div.item,
.selectize-control.plugin-remove_button .item
  { font-size: .75em; line-height: 1.4em; padding: .25em .5em .25em .5em !important; background-color: #f2f2f2 !important; border-radius: 2px !important; }
.selectize-dropdown .active
  { background-color: #f5f5f5; color: #303030; }
.selectize-dropdown .active.create
  { color: #303030; }
.selectize-control.plugin-remove_button .item .remove
  { border: none !important; text-align: center !important; width: 30px !important; padding: 6px 0 !important; border-radius: 2px !important; font-size: 1.4em; font-weight: bold; }
.selectize-control.single.plugin-remove_button .selectize-input.full
  { padding-right: 1em; }
.selectize-control.single.plugin-remove_button .selectize-input.full::after
  { right: 1.5em; }
.selectize-control.plugin-remove_button .remove-single
  { text-decoration: none; font-size: 1.2em; font-weight: bold; width: 1em; height: 2em; line-height: 1.75em; text-align: center; }
.selectize-control.plugin-remove_button .remove-single:hover
  { opacity: .7; background-color: #f5f5f5; }

/* errors */
div.form-field.error label
  { color: rgba(214, 45, 26, 1); }
div.form-field.error input[type=text],
div.form-field.error input[type=password],
div.form-field.error input[type=number],
div.form-field.error input[type=email],
div.form-field.error select
  { border-color: rgba(214, 45, 26, 1); }
div.form-field ul.errors
  { list-style-type: none; margin: .25em 0 0 0; padding: 0; font-size: .7em; color: rgba(214, 45, 26, 1); }
div.form-field ul.errors li
  { display: block; margin: 0; padding: 0; color: rgba(214, 45, 26, 1); }

/* submit */
div.form-submit
  { display: block; margin: 2em 0 0 0; text-align: center; }
div.form-submit button, a.button,
div.form-submit button:active, a.button:active
  { background-color: var(--color-accent); border: none; color: #ffffff; box-shadow: none; text-decoration: none;
  border-radius: .357em; font-weight: 600; font-size: .7em; line-height: 1em; padding: 1em 1.5em; text-transform: uppercase; }
div.form-submit button:hover, a.button:hover
  { text-decoration: none; opacity: 1; background-color: var(--color-text); }

/*
* group permissions
*/
div.permission-category
  { font-weight: 600; margin-bottom: .15em; font-size: .7em; text-transform: uppercase; }
div.permission-module + div.permission-category
  { margin-top: 1.5em; }
div.permission-module
  { background-color: var(--color-text-5); padding: .5em; width: calc(500px + 1em); border-radius: 4px; }
div.permission-module + div.permission-module
  { margin-top: .5em; }
div.permission-module div.permission-module-name
  { display: inline-block; width: 100px; height: 60px; vertical-align: middle; line-height: 60px; font-size: .8em; }
div.permission-module div.permission-module-box
  { display: inline-block; width: 100px; height: 60px; vertical-align: middle; text-align: center; }
div.permission-module div.permission-module-box label
  { font-size: .6em; margin: 0; font-weight: normal; text-transform: uppercase; color: var(--color-text-50); }
div.permission-module div.permission-module-box input[type=checkbox]
  { display: block; margin: 0 auto; }