/*
* FORMS
*/

/* form */
form
  { display: block; width: auto; margin: 0 auto; padding: 0; }
fieldset
  { border: 1px solid var(--color-accent); border-radius: 4px; padding: 1em; }
fieldset + fieldset
  { margin-top: 1em; }
fieldset legend
  { display: inline; width: auto; float: none; font-size: 1.2em; margin: 0; padding: 0 .25em; 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 img
  { display: inline-block; width: 1em; height: 1em; color: var(--color-text-filter); opacity: .6; }
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 input[type=url],
div.form-field input[type=file],
div.form-field input[type=time],
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; width: 100%; height: 320px; 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); }

/* color */
input.form-field-color-picker
  { display: inline-block; margin-right: .5em; padding: 0; border: 0; background: none; vertical-align: middle;
  line-height: 2.24em; min-height: 2.24em; width: 3.5em; box-shadow: none; border-radius: .25em; }
input.form-field-color-picker + span.form-field-color-hash
  { display: inline-block; vertical-align: middle; font-style: italic; color: var(--color-text-35); margin-right: .15em; }
input.form-field-color-picker + span.form-field-color-hash + input
  { display: inline-block !important; vertical-align: middle; }
input.form-field-color-picker::-webkit-color-swatch-wrapper
  { border: none !important; padding: 0 !important; }
input.form-field-color-picker::-webkit-color-swatch
  { border: none !important; }
input.form-field-color-picker::-moz-color-swatch
  { border: none !important; }

/* time */
div.form-field input[type=time]
  { width: auto; height: 2.24em; }

/* 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.sort-form-submit
  { text-align: right; }
div.form-submit button, a.button,
div.form-submit button:active, a.button:active,
input.form-field-file::file-selector-button
  { background-color: var(--color-accent); border: none; color: #ffffff; box-shadow: none; text-decoration: none; cursor: pointer;
  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,
input.form-field-file::file-selector-button:hover
  { text-decoration: none; opacity: 1; background-color: var(--color-text); }

/* file */
div.form-field-file-current
  { display: block; margin: .25em 0; }
div.form-field-file-current img
  { display: block; max-width: 100%; height: auto; width: 440px; }
div.form-field input[type=file]
  { padding: 0 .15em .15em .15em; }

/*
* 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; }

  
/*
* SubFormWidget
*/
div.sub-form-widget
  { margin-top: .5em; }
div.sub-form-widget-list
  { display: flex; flex-direction: column; gap: .4em; }
div.sub-form-widget-item,
div.sub-form-widget-new-form
  { border-radius: 4px; overflow: hidden; margin-left: calc(var(--widget-depth, 0) * 1em); font-size: .8em; }
div.sub-form-widget-item-display
  { display: flex; align-items: center; gap: .5em; padding: .5em .75em; background: var(--color-bg, #fff); }
div.sub-form-widget-item-content
  { flex: 1; min-width: 0; }
div.sub-form-widget-item-actions
  { display: flex; gap: .25em; flex-shrink: 0; }
div.sub-form-widget-item-actions button,
div.sub-form-widget-sort-actions button,
div.sub-form-widget-form-actions button,
div.sub-form-widget-footer button
  { font-size: .8em; padding: .2em .55em; cursor: pointer; border-radius: 3px;
    border: 1px solid var(--color-text-20, #ccc); background: var(--color-bg, #fff); color: var(--color-text, #333); }
div.sub-form-widget-form-actions button.sub-form-widget-btn-save:not(:disabled)
  { background-color: var(--color-accent); border-color: var(--color-accent); color: #fff; }
div.sub-form-widget-item-actions button:hover,
div.sub-form-widget-sort-actions button:hover,
div.sub-form-widget-form-actions button:hover,
div.sub-form-widget-footer button:hover
  { background: var(--color-text-5, #f5f5f5); }
div.sub-form-widget-item-actions button:disabled,
div.sub-form-widget-sort-actions button:disabled,
div.sub-form-widget-form-actions button:disabled,
div.sub-form-widget-footer button:disabled
  { opacity: .3; cursor: not-allowed; }
img.widget-btn-icon
  { display: inline-block; width: 14px; height: 14px; vertical-align: middle; filter: var(--color-text-filter); }
div.sub-form-widget-item--dirty,
div.sub-form-widget-new-form
  { box-shadow: inset 3px 0 0 var(--color-accent); }
div.sub-form-widget-list > div
  { padding: .75em; background-color: var(--color-text-5);}
div.sub-form-widget-list > div:nth-child(2n+1)
  { background-color: var(--color-accent-5); }
div.sub-form-widget-item-form
  { display: flex; gap: .5em; align-items: stretch; }
div.sub-form-widget-sort-actions
  { display: flex; flex-direction: column; gap: .2em; flex-shrink: 0; }
div.sub-form-widget-sort-actions .sub-form-widget-btn-up
  { margin-bottom: auto; }
div.sub-form-widget-sort-actions .sub-form-widget-btn-down
  { margin-top: auto; }
div.sub-form-widget-item-body
  { flex: 1; min-width: 0; }
div.sub-form-widget-form-actions
  { display: flex; justify-content: flex-end; gap: .4em; margin-top: 0em; }
div.sub-form-widget-new-form div.sub-form-widget-form-actions
  { justify-content: flex-start; margin-top: .5em; }
div.sub-form-widget-footer
  { margin-top: .5em; text-align:  center; }
p.sub-form-widget-empty,
p.sub-form-widget-unsaved
  { font-style: italic; color: var(--color-text-50, #888); margin: 0; font-size: .9em; }  
div.sub-form-widget-item div.form-field,
div.sub-form-widget-new-form div.form-field
  { margin-bottom: .5em; }