@charset 'UTF-8';
/**
 * © 2019-2021 Higi Bigler (nullnulleins.ch). All rights reserved.
 * 
 * This file is part of glorya.
 *
 * glorya is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * glorya is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with glorya. If not, see <http://www.gnu.org/licenses/>.
 */

/* inputs */
input, select, textarea, button { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: var(--input-bg-color); color: var(--input-text-color); border: none; display: inline-block; float: none; font-size: 100%; font-family: inherit; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; vertical-align: top; }
input, div.selectwrapper, button { height: 1.8em; }
option { height: auto; }
input, textarea { padding-left: 5px; padding-right: 5px; }
textarea { resize: vertical; min-height: 1.8em; padding-top: 3px; line-height: inherit; }

::-moz-selection { background: var(--selection-bg-color); }
::selection { background: var(--selection-bg-color); }
::placeholder { color: var(--input-placeholder-color); opacity: 1; }
:-ms-input-placeholder { color: var(--input-placeholder-color); }
::-ms-input-placeholder { color: var(--input-placeholder-color); }

div.mappingwrapper:not(.mappingselects) { background-color: var(--input-bg-color); }
input:not(.button):disabled, textarea:disabled, input[readonly], textarea[readonly] { background-color: var(--input-disabled-bg-color); color: var(--input-disabled-text-color); }

input[type="file"] { border: none; padding: 0; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="color"],
input[type="search"],
input[type="password"],
textarea, option, button, .button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}

input.highlight, div.highlight, ul.highlight, textarea.highlight, span.select2.highlight { animation: highlight-shadow .25s ease-in-out 0s 6 alternate; }
td.highlight { animation: highlight-background .25s ease-in-out 0s 6 alternate; }
@keyframes highlight-shadow {
  0% { }
  90% { box-shadow: inset 0 0 0 2px var(--highlight-bg-color); }
  100% { box-shadow: inset 0 0 0 2px var(--highlight-bg-color); }
}
@keyframes highlight-background {
  0% { }
  90% { background-color: var(--highlight-bg-color); }
  100% { background-color: var(--highlight-bg-color); }
}


input.button, button.button { border: none; background-color: #676787; color: #EFEFEF; padding: 1px .6em; cursor: pointer; box-shadow: 2px 2px 3px -2px rgba(0,0,0,.5); }
input.button::-moz-focus-inner, button.button::-moz-focus-inner { border: none; }
input.button:hover, input.button:active, input.button:focus, button.button:hover, button.button:active, button.button:focus { background-color: #474767; }
input.button:disabled, button.button:disabled { background-color: #676787; color: #CCC; }

button.button.imagebutton { opacity: .7; width: calc(1.8em - 4px); text-align: center; height: calc(1.8em - 4px); margin: 2px; padding: 0; }
button.button.imagebutton:focus, button.button.imagebutton:hover { opacity: 1; }
button.button.imagebutton span:after { font-family: 'Material Design Icons'; font-size: 1.0625rem; line-height: 1.2; }
#newfolder { background-color: #008018; margin: 2px 1px 2px 2px; width: calc(1.8em - 5px); }
#newfolder span:after { content: '\F0257'; }
#newupload span:after { content: '\F0A4C'; }

input.button.cancel, button.button.cancel { background-color: #474767; }
input.button.cancel:hover, input.button.cancel:active, input.button.cancel:focus, button.button.cancel:hover, button.button.cancel:active, button.button.cancel:focus { background-color: #F54354; }
input.button.submit, button.button.submit { font-weight: 600; background-color: #272747; }
input.button.submit:hover, input.button.submit:active, input.button.submit:focus, button.button.submit:hover, button.button.submit:active, button.button.submit:focus { background-color: #288239; }
input.button.cancel:disabled, button.button.cancel:disabled, input.button.submit:disabled, button.button.submit:disabled { background-color: #777797; cursor: not-allowed; }

form#login div.formfoot div.buttons { width: 100%; }
form#login div.formfoot div.buttons input { width: 50%; }
form#login div.loginusername input, form#login div.loginpassword input { padding-left: 2em; }
form#login .inputtype div.loginusername:before, form#login .inputtype div.loginpassword:before { content: '\F0004'; margin: 0 !important; color: var(--input-decoration-color); z-index: 2; padding: 3px 0 0 3px; width: 1em; height: 1em; display: block; }
form#login .inputtype div.loginusername.disabledinput:before, form#login .inputtype div.loginpassword.disabledinput:before { color: #999; }
form#login .inputtype div.loginpassword:before { content: '\F0306'; }
form#login li.comp > div.formrow > div.inputtype.checkbox { padding-left: 2px; }
/*form#login li.comp.staysignedin span:last-child { font-size: 82.5%; }*/

body.setpassword li.comp > div.formrow { display: block; }
body.setpassword li.comp > div.formrow > label { display: block; width: 100%; }
body.setpassword li.comp > div.formrow div.inputtype { display: block; margin: 0 0 0 3px; }
body.setpassword form#login div.formfoot div.buttons input { width: auto; }
body.setpassword fieldset { max-width: 220px; margin: 0 auto; }
body.setpassword fieldset > p { margin: .5em .75em .75em; line-height: 1.25; }

/* select default */
select:not(.select2-hidden-accessible) { height: 1.8em; }
select:not(.noselect2) { visibility: hidden; height: 1.8em; }
div:not(#gloryadialog) select { visibility: visible; }

/* select2 */
select.select2-hidden-accessible { background-color: transparent; border: none; width: 100%; position: relative; z-index: 1; }
select + .select2-container.select2-container--glorya { width: 100%; max-width: 100%; border: none; background-color: var(--input-bg-color); }
select + .select2-container.select2-container--glorya.select2-container--open { box-shadow: 1px 3px 3px 0px rgba(0,0,0,.5); }
.select2-container.select2-container--glorya .select2-selection--single { height: 1.8em; line-height: 1.8em; }
select + .select2-container.select2-container--glorya.select2-container--open .select2-selection--single { z-index: 5; background-color: var(--input-bg-color); position: relative; }
select + .select2-container.select2-container--glorya.select2-container--open .select2-selection--single:hover { background-color: var(--selection-bg-color); }
.select2-container.select2-container--glorya .select2-selection--single .select2-selection__rendered { padding: 0 1.35rem 0 5px; }
.select2-container--glorya .select2-dropdown { border-radius: 0; border: none; box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5); background-color: var(--input-bg-color); z-index: 4; }
.select2-container--glorya .select2-search--dropdown { padding: 0; border-top: 1px solid var(--alt-bg-color); border-bottom: 1px solid var(--alt-bg-color); position: relative; }
.select2-container--glorya .select2-search--dropdown .select2-search__field { border: none; padding: 0 2px 0 1.5em;; }
.select2-container--glorya .select2-search--dropdown:before { content: '\F0349'; position: absolute; left: 0; top: 0; color: var(--main-text-color); font-family: 'Material Design Icons'; text-align: center; display: block; width: 1.35em; height: 100%; overflow: hidden; line-height: 1.5rem; font-size: 1.0625rem; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-weight: 400 !important; font-style: normal !important; }
.select2-container--glorya .select2-results > .select2-results__options { max-height: 180px; overflow-y: auto; overflow-x: hidden; }
.select2-container--glorya .select2-results__options[role="group"] { padding: .5em; }
.select2-container--glorya .select2-results__options .select2-results__options--nested { max-height: unset; }
.select2-container--glorya .select2-results__options .select2-results__options--nested > li { padding-left: 1em; }
.select2-container--glorya .select2-results__option { padding: 0; }
.select2-container--glorya .select2-results__option.select2-results__message { padding: .45em 3px; }
.select2-container--glorya .select2-results__option > span { padding: .25em 5px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.select2-container--glorya .select2-results__option > strong { padding: .25em 5px; display: block; background-color: #8888B3; color: #FFF; font-weight: 600; }
.select2-container--glorya .autowidth .select2-results__option { overflow-x: visible; }
.select2-container--glorya .select2-results__option[aria-disabled="true"] { background-color: var(--input-disabled-bg-color); }
.select2-container--glorya .select2-results__option[aria-selected="true"] { display: none; }
.select2-container--glorya .select2-results__option--highlighted[aria-selected] { background-color: var(--selection-bg-color); }
.select2-container--glorya .select2-selection--single .select2-selection__arrow { height: 1.8em; top: 0; width: 1.6em; right: 0; position: absolute; display: block; }
.select2-container--glorya .select2-selection--single .select2-selection__arrow b { border-top: .5em solid var(--input-decoration-color); border-right: .4em solid transparent; border-left: .4em solid transparent; position: absolute; top: .75em; right: .3em; }
.select2-container--glorya.select2-container--focus .select2-selection--single .select2-selection__arrow b, .select2-container--glorya:hover .select2-selection--single .select2-selection__arrow b { border-top-color: var(--input-text-color);  transition: .5s transform; }
.select2-container--glorya.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(-180deg); }

select + .select2-container.select2-container--glorya.select2-container--disabled { background-color: var(--input-disabled-bg-color); }
select + .select2-container.select2-container--glorya.select2-container--disabled .select2-selection__rendered { cursor: not-allowed; }
.select2-container--glorya.select2-container--disabled .select2-selection--single .select2-selection__arrow b, .select2-container--glorya.select2-container--disabled:hover .select2-selection--single .select2-selection__arrow { border-top-color: var(--input-decoration-color); cursor: not-allowed; }
.select2-selection:focus { outline: none; }

div.textfieldwrapper.selector .select2-container { vertical-align: top; }
div.textfieldwrapper.selector .select2-container .selection, div.textfieldwrapper.selector .select2-container .dropdown-wrapper { display: block; }

table.list td.selector .selectwrapper.listedit { position: relative; }
table.list td.selector .select2-container--glorya { border: none; background-color: transparent; padding: 1px 0; }
table.list td.selector .select2-container--open .select2-dropdown { top: -3px; }


label.radio { margin-left: 0em; }
label.radio input.radio { position: absolute; left: -200em; }
input.radio + span { display: block; width: 1.8em; height: 1.8em; position: absolute; margin-left: 0 !important; }
input.radio + span:before { content: ''; width: 1.15em; height: 1.15em; display: inline-block; background-color: var(--input-bg-color); position: absolute; box-sizing: border-box; margin: 0; border-radius: 50%; }
input.radio:focus + span:before, input.radio:hover + span:before { background-color: var(--selection-bg-color); }
input.radio.nestedinput + span:before { background-color: var(--input-nested-bg-color); }
input.radio + span:after { content: ''; border: none; width: calc(1.15em - 8px); height: calc(1.15em - 8px); display: block; position: absolute; left: 4px; top: 4px; box-sizing: border-box; border-radius: 50%; }
input.radio:checked + span:after { background-color: var(--input-text-color); }

li.comp input, li.comp textarea { width: 100%; }
li.comp input.checkbox { width: auto; position: absolute; left: -200em; top: 0; }
li.comp input.checkbox + span { display: block; width: 1.8em; height: 1.8em; position: absolute; margin: 0; }
li.comp input.checkbox + span:before { content: ''; border: none; width: 1.15em; height: 1.15em; display: inline-block; background-color: var(--input-bg-color); position: absolute; box-sizing: border-box; margin: .3em 0 0; }
li.comp input.checkbox.nestedinput + span:before { background-color: var(--input-nested-bg-color); }

li.comp input.checkbox:focus + span:before, li.comp input.checkbox:hover + span:before { background-color: var(--selection-bg-color); }
li.comp div.mappingoption input.checkbox.nestedinput:focus + span:before, li.comp div.mappingoption input.checkbox.nestedinput:hover + span:before { background-color: var(--highlight-bg-color); }
li.comp input.checkbox + span:after { content: ''; border: none; width: .5em; height: 1.1em; transform: rotate(45deg); display: block; position: absolute; left: .425em; top: .2em; box-sizing: border-box; }
li.comp input.checkbox:checked + span:after { border: 2px solid var(--input-text-color); border-top: none; border-left: none; }
li.comp input.checkbox[disabled] + span:before { background-color: var(--input-disabled-bg-color); }
li.comp input.checkbox[disabled] + span:after { border-color: var(--input-disabled-text-color); }
li.comp input.checkbox[disabled] + span + input + span { color: var(--input-disabled-text-color); }

li.comp:not(.timestamp) > div.formrow > div.inputtype.checkbox { padding-left: 11em; }
li.comp div.inputtype.checkbox label { position: relative; min-height: 1.8em; box-sizing: border-box; display: inline-block; }
li.comp div.inputtype.checkbox label span:last-child { margin-left: 1.5em; }
/*li.comp.timestamp div.inputtype.checkbox label span:last-child { display: none; }*/ 

/*li.comp .referencinglist .emptyrow input.checkbox { float: left; }*/
li.comp input.checkboxvalue { width: 1px; visibility: hidden; display: none; float: right; padding: 0; }
li.comp .nullablecheckboxwrapper input.checkboxvalue { display: block; }
input.date { max-width: 6.5em; }
input.time { max-width: 4.7em; margin-left: 2px; }
input.time:first-child { margin-left: 0; }
input.color { background-position: -2px -1px; position: relative; z-index: 1; text-align: center; }
input.color.bright { color: #000; }
input.color.dark { color: #FFF; }
input.color.transparent { background-color: #FFF; background-image: url(../img/bg/image.png); }
input[type="color"] { position: absolute; top: 0; width: 4.4em; min-width: 4.4em; max-width: 4.4em; left: 0; z-index: 0; }

input.numeric { max-width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.nullablecheckboxinput input.numeric { max-width: calc(6.5em - 23px); }
input.numeric.left { text-align: left; }

/* fieldset */
fieldset { border: 2px solid #676787; padding: 0; margin: 0; background-color: var(--alt-bg-color); box-shadow: 2px 2px 3px -2px rgba(0,0,0,.5); }
fieldset fieldset fieldset:not(.componenttab), body.fullsize fieldset fieldset:not(.componenttab) { border-width: 1px; }
/*fieldset fieldset fieldset:not(.componenttab) legend { margin-left: -1px; }*/
form#login fieldset { border-bottom: none; }
body.popup form > fieldset { border: none; box-shadow: none; }
body.popup form > fieldset > legend { display: none; }
body.popup div.formwrapper { display: flex; flex-direction: column-reverse; }

fieldset legend { text-transform: uppercase; background-color: #676787; color: #EFEFEF; margin: 0 0 2px -2px; padding: .35em 1em; }
fieldset.componentwrapper legend, div.gloryasettingsbox legend { background-color: transparent; text-transform: none; font-weight: 400; color: #676787; margin: 0 0 0 12px; }
fieldset.collapsable legend { padding-left: .75em; background-color: transparent; text-transform: none; font-weight: 400; color: #676787; margin: 0 0 0 12px; }
fieldset.collapsable legend a { position: relative; padding-left: 12px; cursor: pointer; display: block; text-decoration: none; }
fieldset.collapsable legend a:before { position: absolute; left: -.4em; top: .35em; content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: .5em .4em 0 .4em; border-color: #8888B3 transparent transparent transparent; transition: .25s transform }
fieldset.collapsable.collapsed legend a:before { transform: rotate(-90deg); }
fieldset.collapsable.collapsed > div.collapsed, fieldset.collapsed div.fieldset, fieldset.collapsed div.formfoot { display: none; }

fieldset.componentwrapper > div > ul:first-child > li.componentwrapper.comp:first-child { margin-top: -3px; }
/* columngroups */
#gloryacontent li.componentwrapper fieldset.componentwrapper { margin: 0 0 0px 2px; }

/* referencinglists with renderlabel==2 */
#gloryacontent li.comp.nolabel > div.formrow > div.componentwrapper > fieldset.componentwrapper { background-color: transparent; }
#gloryacontent li.comp.nolabel > div.formrow > div.componentwrapper > fieldset.componentwrapper legend + div.referencinglist { margin: 0; border: none; }

/* exor */
li.comp .exorcolumnselector .radioselector { margin-left: 11em; }
li.comp .exorcolumnselector.allowtypechange div.radioselector label:last-child { margin-bottom: 3px; }
li.comp .exorcolumnselector .exorcolumncontent > ul.comp { margin-bottom: 0; }

/* formlist */
ul.comp { margin: 0 0 2px; padding: 0; list-style-type: none; width: 100%; box-sizing: border-box;; }
li.comp { margin: 2px 0 0; padding: 0; list-style: none; width: 100%; }
/*li.formnotes + li.comp, li.formnotes + li.comp.hidden + li.comp { margin-top: 6px; }*/
li.comp > div.formrow { display: table; width: 100%; box-sizing: border-box; padding: 0 2px 0 0; table-layout: fixed; }
li.comp > div.formrow > label { width: 11em; display: table-cell; text-align: left; vertical-align: top; }
li.comp > div.formrow > div.inputtype { display: table-cell; padding: 0; text-align: left; vertical-align: top; position: relative; }
li.comp > div.formrow > div.inputtype.selector.autocomplete { display: inline-block; width: 100%; }
li.comp > div.formrow > div.inputtype.selector.autocomplete input { height: 100%; }
div.inputtype.selector.autocomplete input { text-overflow: ellipsis; overflow: hidden;  }
li.comp > div.formrow > div.inputtype.selector.autocomplete div.selectwrapper { /*height: calc(1.8em - 2px);*/ width: 100%; }

li.comp.nolabel > div.formrow { padding-left: 2px; }
li.comp.tabwrapper.tablanguagewrapper > div.formrow { padding-right: 0; }
ul.comp .exorcolumncontent ul.comp li.comp:first-child { margin: 0; }
ul.comp .exorcolumncontent div.formrow { padding-right: 0; }

fieldset > legend:first-child + ul.comp > li.comp:first-child { margin-top: 0; }

li.richtextlabeledfullwidth.comp > div.formrow { display: block; width: 100%; }
li.richtextlabeledfullwidth.comp > div.formrow > label {  width: 100%; display: block; }
li.richtextlabeledfullwidth.comp > div.formrow > div.inputtype { display: block; margin: 0 0 0 3px; }

li.formnotes { background-color: var(--highlight-bg-color); display: block; }
li.formnotes ul { padding: 6px; margin: 0 0 3px; list-style-type: none; }
li.formnotes a { text-decoration: underline; }

/* errors */
/*
li.formerrors { background-color: #F54354; color: #FFF; display: block; }
li.formerrors ul { padding: 6px; margin: 0 0 3px; list-style-type: none; font-weight: 400; }
li.formerrors a { text-decoration: underline; color: #FFF; }
*/
/*li.error label { color: #F54354; }
li.comp div.columnerror { }*/
/* errors on inputs */
li.comp div.columnerror input,
li.comp div.columnerror textarea,
li.comp div.mapping.columnerror > ul,
li.comp div.columnerror .cke_inner,
li.comp div.columnerror .select2.select2-container,
li.comp div.columnerror .selector.text,
li.comp .fileuploadwrapper.columnerror,
li.comp .referencinglist.columnerror table { box-shadow: inset 0 0 0 2px #F54354; }
li.comp .referencinglist.columnerror table { padding: 2px; }
li.comp div.columnerror .selectwrapper input { box-shadow: unset; }
li.comp div.columnerror .cke_inner .cke_contents { margin: 0 2px; }
li.comp div.columnerror input.button { background-color: #F54354; }
li.hidden { display: none; }
li.comp.labeltop > div.formrow { display: block; }
li.comp > div.formrow > label.labeltop { width: 100%; clear: both; margin-bottom: 2px; display: block; color: #676787; }
li.comp > div.formrow > label.labeltop + div.inputtype { margin: 0 0 1px 3px; display: block; }

li.comp legend label { float: none; clear: none; display: inline-block; padding: 0 1.5em 0 0; width: auto; font-weight: 400; }
li.comp legend label:last-child { padding: 0; }
li.comp label > span { margin: .35em 0 .2em 6px; display: inline-block; }
li.comp label.norow { float: none; }
li.comp label.norow > span { margin: 1px 0 0 3px; display: inline; text-align: left; float: none; } /* float none for datetimefield "leave empty" */

li.comp .referencinglist p.note { padding: .35em 5px; margin: 0; background-color: var(--input-disabled-bg-color); min-height: 1.8em; box-sizing: border-box; }
.referencinglist input.text { width: 120px; }
.referencinglist input.numeric { width: 4.8em; }
.referencinglist .imagebutton.order { cursor: default; }
.referencinglist .emptyrow td { background-color: var(--main-bg-color); }
.referencinglist .emptyrow label { float: none; width: auto; clear: none; display: inline-block; margin: 2px 0 0; }
.referencinglist .emptyrow div.inputtype { margin: 0 0 0 4px; }
li.comp .referencinglist .emptyrow td { background-color: transparent; }
li.comp .referencinglist .emptyrow div.inputtype.checkbox label { display: block; }
/*.listedit.referencinglist td.actions { background-color: white; }*/

.referencinglist.inputtype.listedit > table.list { background-color: transparent; }
.referencinglist.inputtype.listedit > table.list tr.rsrow.template { display: none; }
.referencinglist.inputtype.listedit > table.list td.actions { min-width: 22px; width: 1%; }
.referencinglist.inputtype.listedit > table.list td.listedit { padding: 0; border-left: 1px solid var(--alt-bg-color); }
/*.referencinglist.inputtype.listedit > table.list td { border-top: 2px solid var(--alt-bg-color); }*/
.referencinglist.inputtype.listedit > table.list tr:first-child td, .referencinglist.inputtype.listedit > table.list tr.rsrow.template:first-child + tr td { border-top: none; }
.referencinglist.inputtype.listedit > table.list td.listedit input:not(.button), .referencinglist.inputtype.listedit > table.list td.listedit textarea { max-width: 100%; width: 100%; }
.referencinglist.inputtype.listedit > table.list .inputtype.urlfield div.selectwrapper select + span { border-right: 1px dotted #DFDFDF; }
.referencinglist.inputtype.listedit > table.list td.listedit textarea { min-height: 1.8em; height: 3.6em; }
li.comp .referencinglist.inputtype.listedit > table.list td.listedit div.inputtype.checkbox { margin: 0 auto; width: 1.15em; }
li.comp .referencinglist.inputtype.listedit > table.list td.listedit div.inputtype.checkbox label span:last-child { display: none; }
li.comp .referencinglist.inputtype.listedit > table.list td.listedit div.inputtype.selector.autocomplete > .selectwrapper { width: 100%; background-color: transparent; }
.referencinglist.inputtype.listedit > table.list td.listedit .inputtype { position: relative; }

.referencinglist table.list tr.todelete a.imagebutton.delete { background-color: #008018; }
.referencinglist table.list tr.todelete a.imagebutton.delete:before { content: '\F0819'; }

div.videoembedfield iframe { padding: 1px; background-color: var(--input-bg-color); max-width: 100%; box-sizing: border-box; }
div.videoembedscreen { margin: 2px 0 0; display: none; width: auto; line-height: 1px; }
div.videoembedscreen.compactview { max-width: 100px; border: 1px solid #676787; }
div.videoembedscreen.compactview:hover { border-color: #000; }
div.videoembedscreen.compactview a { height: 0; background-size: cover; background-position: center; display: block; width: 100%; }

div.thumbnailwrapper img { display: inline-block; }
img.thumbnail.videoembed { background-position: center; background-size: cover; background-color: #000; }

div.fieldset { width: 100%; box-sizing: border-box; }
/*body.popup div.fieldset { padding: 2px 2px 0 0; }*/
div.fieldset p { padding: 0 6px 3px; margin: 0; }
p.code { font-family: "Courier New", "Lucida Console", monospace; /*font-size: 90%;*/ }
div.formfoot { background-color: #676787; padding: 2px 0; box-sizing: border-box; display: flex; justify-content: space-between; }
body.popup div.formfoot { position: sticky; top: 0; z-index: 120; box-shadow: rgba(0,0,0,.75) 0 -10px 5px 10px; overflow: hidden; }
fieldset fieldset div.formfoot { padding-bottom: 0; }

div.formfoot div.buttons { margin: 0; box-sizing: border-box; display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; flex-shrink: 1; }
body.popup div.formfoot div.buttons { flex-wrap: wrap-reverse; width: 100%; }
div.formfoot div.buttons input { margin: 3px; }
div.formfoot div.buttons input.button.submit, div.formfoot div.buttons button.button.submit { margin-left: 4px; margin-right: 4px; }

/* form */
div.tablewrapper { padding: 10px 0; margin: 0; }
div.headerwrapper { background-color: #919191; border: 1px solid #313131; border-top-color: #B1B1B1; border-left-color: #B1B1B1; }

div.listcolorbox { white-space: nowrap; display: inline-block; }
div.listcolorbox span { display: inline-block; vertical-align: middle; width: 1.3rem; height: 1.3rem; box-sizing: border-box; margin: -3px 3px 0 -1px; border: 1px solid black; background-image: url(../img/bg/image.png); background-position: -1px -1px; }
div.inputtype div.listcolorbox span { cursor: pointer; margin: 2px 0 0 5px; vertical-align: top; }
div.inputtype div.listcolorbox span.selected { border-color: #FFF; outline: 2px solid black; }
.listcolorboxwrapper.paletteonly input { display: none; }

/* inputs and imagebuttons */
div.textfieldwrapper.button { position: relative; display: inline-block; width: 100%; }
div.textfieldwrapper.color { max-width: 6.5em; }
div.textfieldwrapper.color:after { content: ''; display: block; width: calc(1.3rem + 2px); height: calc(100% - 2px); right: 1px; top: 1px; position: absolute; background-color: #FFF; z-index: 1; opacity: .75; }
div.textfieldwrapper.date { max-width: 8.45em; float: left; position: relative; }
div.textfieldwrapper.date input.date { max-width: 8.5em; }
div.textfieldwrapper.button input { padding-right: 2em; }
div.textfieldwrapper.button a.imagebutton { position: absolute; right: 0; height: calc(100% - 4px); top: 0; width: 1.3rem; z-index: 2; }
div.textfieldwrapper.button div.selectwrapper { display: block; float: left; }
div.selectwrapper.button:after { right: .35em; }

.inputtypebuttonwrapper { display: table; width: 100%; background-color: var(--input-bg-color); padding: 0; margin: 0; box-sizing: border-box; }
div.inputtype.selector.autocomplete .inputtypebuttonwrapper { border: none; }
.inputtypebuttonwrapper ul.imagebutton { padding: 0; margin: 2px 2px 2px 0; }
.inputtypebuttonwrapper > div { display: table-cell; padding: 0; vertical-align: top; }
.inputtypebuttonwrapper > div:last-child { width: 1.35rem; }
.inputtypebuttonwrapper > div:last-child a.imagebutton { margin: 0 0 0 1px; }
.inputtypebuttonwrapper .selectwrapper { width: 100%; height: 1.8em; }
.inputtypebuttonwrapper .selectwrapper .selectwrapper, .inputtypebuttonwrapper .selectwrapper .selectwrapper select { height: 1.8em; }
div.textfieldwrapper.selector { display: table; }
.urlfield div.textfieldwrapper.selector div.inputtype.selector { display: table-cell; width: 6.5em; }
.urlfield div.textfieldwrapper.selector div.selectwrapper { width: 6.5em; float: none; position: relative; }
.urlfield div.textfieldwrapper.selector div.inputtype.selector { width: 6.5em; padding-right: 2px; }
.listedit .urlfield div.textfieldwrapper.selector div.inputtype.selector { padding-right: 0; }
.urlfield .selectwrapper.selector.urltarget { margin-top: 3px; }

table.list a.url.https { position: relative; }
table.list a.url.https:after { content: '\F0341'; position: static; top: auto; left: auto; display: inline-block; width: auto; height: auto; color: inherit; font-size: 68%; line-height: 1; vertical-align: top; }

/* pagetype selector */
li.comp div.radioselector label { margin: 0 0 2px; padding: .35em 5px; background-color: var(--main-bg-color); cursor: pointer; position: relative; display: block; min-height: 1.8em; box-sizing: border-box; }
li.comp div.radioselector label:last-child { margin-bottom: 0; }
li.comp div.radioselector label:hover { background-color: var(--selection-bg-color); }
div.radioselector label > span { padding: 0; margin: 0 0 0 1.5em; width: auto; font-weight: 400; }
div.radioselector label > span span { padding: 0; margin: 0; display: block; }
div.radioselector label span.title { color: #676787; font-weight: 600; }
div.radioselector label input { position: absolute; left: .3em; top: .3em; display: inline-block; width: auto; cursor: pointer; height: auto; }

/* */
.nullablecheckboxwrapper { display: table; width: 100%; }
.nullablecheckbox, .nullablecheckboxinput { display: table-cell; vertical-align: top; position: relative; }
.nullablecheckbox { padding: 0 3px 0 0; width: 20px; }
.nullablecheckboxwrapper.isnull .nullablecheckboxinput { display: none; }

/* */
input + a.imagebutton { margin: 2px;}

/* */
legend + div.referencinglist { margin: 0 0 0 -6px; }

/* mapping */
li.comp.error div.mappingwrapper label { color: var(--main-text-color); }
div.mapping { overflow: auto; max-height: 12em; min-height: 1.8em; }
div.mapping ul { list-style-type: none; }
li.comp .mappingwrapper:not(.mappingselects) div.mapping ul li { padding-left: 5px; }

div.mapping > ul > li { position: relative; }

.mappingselects div.mapping ul li .mappingoption:not(.readonly) label:hover { background-color: var(--selection-bg-color); }
li.comp div.mapping ul li div.inputtype.checkbox label span:last-child { margin-right: .5em; margin-bottom: .125em; }

div.mappingfooter { position: relative; border-top: 2px solid var(--alt-bg-color); }
div.mappingfooter input { padding-left: calc(1.5em + 5px); padding-right: 1.5em; }
div.mappingfooter:before { content: '\F0349'; position: absolute; top: 2px; left: 100%; z-index: 0; color: var(--input-decoration-color); }
li.comp div.mappingfooter input.checkbox + span { margin-left: 5px; }

div.mappingwrapper.flipflop { border: none; background-color: transparent; }
div.mappingwrapper.flipflop > div { display: flex; overflow: hidden; }
div.mappingwrapper.flipflop > div > div { width: 50%; box-sizing: border-box; overflow: auto; }
div.mappingwrapper.flipflop > div > div li { position: relative; }
div.mappingwrapper.flipflop > div > div:first-child { margin-right: 3px; }
div.mappingwrapper.flipflop div.sequenceselector { display: table-cell; width: 1.5em; padding: 1px; position: absolute; right: 2px; top: 1px; z-index: 1; }
div.mappingwrapper.flipflop .mappingflop div.sequenceselector { display: none; }

/* selects */
div.mappingselects div.mapping { max-height: none; overflow: inherit; margin-top: -2px; }
div.mappingselects .mapping > ul > li { float: left; clear: none; width: auto; margin: 2px 2px 0 0; padding: 0; position: relative; background-color: var(--input-bg-color); display: block; }
div.mappingselects.disabled .mapping > ul > li, div.mappingselects.disabled .mapping > ul > li:hover { border-color: #CCC; }
div.mappingselects.disabled div.mapping > ul > li:hover { background-color: #EFEFEF; }
div.mappingselects .mapping > ul > li:hover { border-color: #271C02; }
div.mappingselects ul li div.mappingoption { width: auto; padding-top: 0; }
div.mappingselects ul li input.checkboxvalue { margin: -1px 0; }
div.mappingselects ul.ui-sortable li label { cursor: move; white-space: nowrap; }
div.mappingselects .mapping > ul > li.selector { border: none; }
div.mappingselects.readonly .mapping > ul > li.selector { display: none; }
li.comp .mappingselects div.inputtype.checkbox label { min-height: 1.8em; }
li.comp .mappingselects div.mapping ul li input.checkbox + span { margin-left: 2px; }

div.mappingselects ul li.selector div.selectwrapper select { width: 15em; }
div.mappingselects ul li.selector div.selectwrapper .select2.select2-container.select2-container--glorya { width: 15em; }

div.mappingwrapper.singleselect { border: none; background-color: transparent; }

/* autocompleter */
div.selectwrapper.autocomplete { overflow: visible; }
div.inputtype.selector, div.autocompletewrapper { position: relative; }
div.inputtype.selector.autocomplete > .selectwrapper { overflow: visible; background-color: var(--input-bg-color); }
li.comp.error div.inputtype.selector.autocomplete > .selectwrapper { background-color: #FCC; }
div.inputtype.selector.autocomplete input.selector.text { min-width: 300px; position: relative; z-index: 2; background-color: transparent; }
div.autocompleteroptions { width: calc(100% - 5px); margin: 0; top: 100%; padding: 0; position: absolute; background-color: var(--input-bg-color); z-index: 100; max-height: 250px; overflow: auto; box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5); box-sizing: border-box; }
div.autocompletewrapper div.autocompleteroptions { width: 100%; }
div.selectwrapper > div.autocompleteroptions { width: 100%; margin: 0; }
div.autocompleteroptions > ul { margin: 0; padding: 0; list-style-type: none; float: none; }
div.autocompleteroptions > ul > li { margin: 0; padding: .35em 5px; float: none; list-style-type: none; cursor: pointer; }
div.autocompletewrapper div.autocompleteroptions > ul > li { display: table; width: 100%; max-width: 100%; box-sizing: border-box; table-layout: fixed; }
div.autocompleteroptions > ul > li:first-child { border: none; }
div.autocompleteroptions > ul > li.selected { background-color: var(--selection-bg-color); }
div.autocompleteroptions > ul > li.unselectable { cursor: default; }
div.autocompleteroptions > ul > li span { display: table-cell; }
div.autocompleteroptions > ul > li span.value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90%; }
div.autocompleteroptions > ul > li span.counter { text-align: right; color: #999; padding-left: 1em; }

a.mp3player, a.videoplayer { margin-right: 4px; float: left; }

/* calendar */
div.calendar { position: absolute; background-color: var(--main-bg-color); border: none; z-index: 4; box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5); width: 16.4em; top: 100%; display: none; }
.textfieldwrapper.button.date.open div.calendar { display: block; }
.textfieldwrapper.button.date.open input { box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5); }
div.calendar a { cursor: pointer; }
div.calendar table { table-layout: fixed; }
div.calendar th { padding: .3em; background-color: #676787; color: var(--main-bg-color); vertical-align: middle; text-align: center; border: none; font-weight: 600; text-transform: uppercase; height: 1.2em; }
div.calendar th a { color: inherit; display: block; }
div.calendar th a:hover { color: var(--selection-bg-color); }
div.calendar td { text-align: center; width: 12.5%; }
div.calendar td.weeknr, div.calendar tr.labels td { padding: .3em; text-transform: uppercase; color: var(--input-decoration-color); font-weight: 300; }
div.calendar td.weekend { background-color: var(--alt-bg-color); }
div.calendar tr.labels td.weeknr { visibility: hidden; }
div.calendar td span { display: block; padding: .3em; cursor: pointer; font-weight: 400; }
div.calendar td span:hover, div.calendar td.selected span { background-color: var(--selection-bg-color); font-weight: 600; }
div.calendar td.outofmonth { color: var(--input-disabled-text-color); }
div.calendar td.timespanunique span { text-decoration: line-through !important; }
div.calendar td.timespanuniquecurrent span { text-decoration: underline !important; }

/* eventdatetimefield */
.eventdatetimefield legend label { position: relative; }
.eventdatetimefield legend label input { position: absolute; left: 0px; top: 4px; display: inline-block; width: auto; cursor: pointer; }
.eventdatetimefield legend label span:last-child { margin-left: 1.8em; }
#gloryacontent li.componentwrapper .eventdatetimefield fieldset.componentwrapper { background-color: transparent; margin-left: calc(11em - 0px); margin-bottom: 0; }
.eventdatetimefield ul ul.comp { display: flex; padding: 0 2px 0 0; width: auto; flex-wrap: wrap; }
.eventdatetimefield ul li.comp { margin: 0; }
.eventdatetimefield ul ul > li.comp { display: table-cell; padding: 0 0 0 2px; width: auto; }
.eventdatetimefield > fieldset > ul > li > ul > li > label > span, .eventdatetimefield .inputtype.weekdays label span { margin: 0 0 .15em; }
.eventdatetimefield .inputtype.weekdays { display: flex; flex-direction: row; margin: 0 0 1.25em; }
.eventdatetimefield .comp.eventdatetimefieldwrap_3 li.comp:nth-child(2) { margin-right: 1em; }
.eventdatetimefield .comp.eventdatetimefieldwrap_3 > ul > li.comp:nth-child(2) { margin-bottom: .5em; }
.eventdatetimefield li.comp .inputtype.weekdays input.checkbox + span { top: 1.25em; }
.eventdatetimefield li.comp .inputtype.weekdays div.inputtype.checkbox label span:last-child { margin-left: 0; width: 2.125em; }

/* with weekdaytimes */
.eventdatetimefield ul li.comp fieldset.componentwrapper { margin: 2px 0 0; }
.eventdatetimefield ul li.comp.weekdaytimes li.comp > div.formrow > div.inputtype { display: table-cell !important; }
.eventdatetimefield ul .weekdaytimes > div > fieldset > div > ul { display: flex; flex-direction: row; flex-wrap: nowrap; }
.eventdatetimefield ul .weekdaytimes ul .formrow { width: auto; padding-left: 0; }
.eventdatetimefield ul .weekdaytimes ul.comp.template { display: none !important; }
.eventdatetimefield ul .weekdaytimes ul li.comp { display: block; }
.eventdatetimefield ul .weekdaytimes ul li.comp:nth-child(2n - 1) .formrow:after { content: '–'; margin: 2px 0 0 5px; display: block; }
.eventdatetimefield ul .weekdaytimes ul li.comp .selector { width: 4em; }
#gloryacontent li.componentwrapper .eventdatetimefield fieldset.componentwrapper fieldset.componentwrapper { margin-left: 0; }
.eventdatetimefield .comp.weekdaytimes .inputtype.weekdays { flex-direction: row; margin: 0; }
.eventdatetimefield .comp.weekdaytimes .inputtype.weekdays label { margin-left: 1.5em; }
.eventdatetimefield .comp.weekdaytimes .inputtype.weekdays input.checkbox + span { top: -.35em; left: -1.5em; }
.eventdatetimefield .comp.weekdaytimes .inputtype.weekdays .weekday { display: flex; flex-direction: column; margin: 0 0 0 2px; }
.eventdatetimefield .comp.weekdaytimes .inputtype.weekdays .weekdaytimes { display: flex; flex-direction: column; }
.eventdatetimefield li.comp.weekdaytimes, .eventdatetimefield li.comp.exceptions { width: 100%; }

.eventdatetimefieldwrap_1 label { display: none; }
.eventdatetimefieldwrap_1 ul:first-child li label { display: block; }
#eventdatetimefield_datetype_1 ul:first-child li.buttons { padding-top: calc(1.3em + 1px); }
#eventdatetimefield_datetype_1 ul:first-child li a.imagebutton.remove { visibility: hidden; }
.eventdatetimefield ul ul > li.comp.buttons { padding-top: 1px; }
#eventdatetimefield_datetype_1 a.imagebutton { float: left; }

/* exceptions */
.eventdatetimefield .inputtype.exceptions ul { display: flex; flex-direction: row; flex-wrap: nowrap; }
.eventdatetimefield .inputtype.exceptions li.comp > div.formrow { width: auto; padding-left: 0; }
.eventdatetimefield .inputtype.exceptions li.comp > div.formrow > div.inputtype.checkbox { padding-left: 0; }
.eventdatetimefield .inputtype.exceptions li.comp.hidden { padding: 0; }
.eventdatetimefield .inputtype.exceptions li.comp:nth-child(2), .eventdatetimefield .inputtype.exceptions ul.imagebutton li { margin-right: 0; }
.eventdatetimefield .inputtype.exceptions li.actions ul.imagebutton { padding: 1px 0 0; }
.eventdatetimefield .inputtype.exceptions li.actions ul.imagebutton a.imagebutton { margin-right: 0; }
.eventdatetimefield .inputtype.exceptions li.comp:nth-child(2) .formrow::after { content: '–'; margin: 2px 0 0 5px; display: block; }
.eventdatetimefield .inputtype.exceptions ul br { display: none; }

/* in the page input type */
ul.pagehierarchy, ul.pagehierarchy ul { list-style-type: none; padding: 0; margin: 0; }
ul.pagehierarchy li li { padding-left: 1.1em; }
ul.pagehierarchy li li:before { content: ''; display: block; width: .6em; height: .85em; border: 1px solid #666; border-right: none; border-top: none; position: absolute; margin: 0 0 0 -1em; }
ul.pagehierarchy span.text { padding: .35em 0; display: block; }

/* password */
div.passwordfieldwrapper { position: relative; }
div.passwordstrengthmeter { height: 2px; position: absolute; left: 1px; bottom: 1px; }
div.passwordstrengthmeter div { height: 2px; }
div.passwordgenerator { padding: 3px; display: inline-block; }

/* tooltip styles */
li.comp label span.infotext { cursor: help; border-bottom: 1px dotted #676787; width: auto; }
.tooltipster-base { max-width: 350px; background: var(--selection-bg-color); margin: 0 0 0 4px; padding: 0; font-size: 0; line-height: 0; position: absolute; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.tooltipster-error { background: #F54354; color: var(--main-bg-color); }
.tooltipster-base .tooltipster-content { font-size: .8725rem; line-height: 1.125; padding: .35em 5px; }
.tooltipster-thumbnail { margin: 0; border-radius: 0; background-color: var(--main-bg-color); min-width: 1.3rem; min-height: 1.3rem; }
.tooltipster-thumbnail .tooltipster-content { background-color: #FFF; margin: 0; padding: 0; }
.tooltipster-thumbnail img { display: block; padding: 0; margin: 0; }

/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
.tooltipster-arrow span { display: block; width: 0; height: 0; position: absolute; }
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-top: 5px solid; bottom: -5px; }
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-bottom: 5px solid; top: -5px; }
.tooltipster-arrow-top span, .tooltipster-arrow-bottom span { left: 0; right: 0; margin: 0 auto; }
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; }
.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span { right: 6px; }
.tooltipster-arrow-left span { border-top: 5px solid transparent !important; border-bottom: 5px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -4px; right: -5px; }
.tooltipster-arrow-right span { border-top: 5px solid transparent !important; border-bottom: 5px solid transparent !important; border-right: 5px solid; top: 50%; margin-top: -4px; left: -5px; }
.tooltipster-fade { opacity: 0; transition-property: opacity; }
.tooltipster-fade-show { opacity: 1; }

/* thumbnail */
.tooltip-thumb { min-width: 14px; min-height: 14px; max-width: 300px; padding: 1px; box-sizing: border-box; margin: 0; background-color: #FFF; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; background-image: url(../img/bg/image.png); }
.arrow:after { background: #FFFFBB; }
.tooltip-error.arrow:after { background: #F54354; }

/* textfield charcounter */
div.inputtype div.charcounter { position: absolute; display: none; white-space: nowrap; right: 10px; bottom: 100%; background: var(--selection-bg-color); margin: 0 0 4px 0; font-size: .75rem; line-height: 1; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
div.inputtype div.charcounter > div:first-child { padding: .35em 5px; position: relative; z-index: 1; }
div.inputtype div.charcounter .tooltipster-arrow-top span { border-top-color: var(--selection-bg-color); }
div.inputtype div.charcounter.visible { display: block; }

/* fileupload */
div.inputtype .fileuploadwrapper .fileupload.withclips div.thumbnailwrapper { display: none; }
div.inputtype .fileuploadwrapper .fileupload.withclips div.thumbnailwrapper.clips { display: table-cell; padding-top: 0; }
div.inputtype .fileuploadwrapper div.thumbnailwrapper > div { padding: 0; margin: 2px 0 2px 2px; border: 1px solid #666; display: block; }
div.inputtype .fileuploadwrapper div.thumbnailwrapper.audioplayer div { border: none; display: block; }
div.inputtype .fileuploadwrapper div.thumbnailwrapper.clips div { border: none; }
div.inputtype .fileuploadwrapper div.thumbnailwrapper.clips .imageclip { border: 1px solid #666; margin-top: 2px; width: 100px; }
div.inputtype .fileuploadwrapper div.thumbnailwrapper.clips .imageclip > div { height: 0; position: relative; width: 100%; }
div.inputtype .fileuploadwrapper div.thumbnailwrapper.clips .imageclip img { cursor: pointer; cursor: crosshair; width: 100%; height: 100%; position: absolute; }

div.inputtype div.thumbnailwrapper div.subjectposition { border: none; position: relative; }
div.inputtype div.thumbnailwrapper div.subjectposition > div { position: absolute; left: calc(50% - 7.5px); top: calc(50% - 7.5px); width: 15px; height: 15px; border: 1px solid #000; background-color: rgba(255,255,255,.35); border-radius: 50%; cursor: move; box-sizing: border-box; }
div.inputtype div.thumbnailwrapper div.subjectposition > div:before { content: ''; width: 23px; height: 1px; background-color: #000; display: block; left: -5px; top: 6px; position: absolute; }
div.inputtype div.thumbnailwrapper div.subjectposition > div:after { content: ''; width: 1px; height: 23px; background-color: #000; display: block; left: 6px; top: -5px; position: absolute; }

div.inputtype div.thumbnailwrapper img { display: block; }
div.inputtype img.thumbnail { background-image: url(../img/bg/image.png); }
div.inputtype img.thumbnail.loading { background-image: url(../img/anim/imageloading.gif); background-position: center center; background-repeat: no-repeat; }
div.inputtype .fileuploadwrapper { padding: 0; min-height: 1.8em; background-color: var(--input-bg-color); }
div.inputtype > .fileuploadwrapper > .fileupload { display: table; width: 100%; padding: 0; box-sizing: border-box; }
td div.inputtype > .fileuploadwrapper > .fileupload { padding-left: 0; }
div.inputtype .fileupload .detailwrapper, div.inputtype .fileupload .thumbnailwrapper { display: table-cell; vertical-align: top; padding: 0; }
div.inputtype > .fileuploadwrapper > .fileupload .thumbnailwrapper { width: 1%; }
div.inputtype > .fileuploadwrapper > .fileupload .thumbnailwrapper.audioplayer { padding: 0; }
div.inputtype > .fileuploadwrapper > .fileupload .thumbnailwrapper.audioplayer .ghowler .buttons ul { margin: 0; }
div.inputtype .fileupload .detailwrapper { padding: .35em .2em 2px 5px; }
div.inputtype .fileupload ul.filemetainfo li div.table { display: table; }
div.inputtype .fileupload dl { display: table-row; }
div.inputtype .fileupload dt, div.inputtype .fileupload dd { display: table-cell; vertical-align: top; text-align: left; padding: 0; }
div.inputtype .fileupload dt { padding-right: 4px; }
ul.filemetainfo { list-style-type: none; }
div.inputtype.fileupload .qq-uploader { width: 100%; }
div.inputtype.fileupload .qq-upload-list-wrapper { margin: 2px 0; }
div.inputtype.fileupload .qq-upload-button { margin: 2px 0 0; }
div.inputtype .fileupload + .fileinput { min-height: 1.8em; }

/* */
#imageclippercanvas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 130; padding: 20px 20px 60px; background-color: rgba(0,0,0,.75); box-sizing: border-box; text-align: center; }
#imageclippercanvas div.imageclippercanvas { width: 100%; height: 100%; margin: 0 auto; background-image: url(../img/bg/image.png); background-position: 50%; border: 1px solid #FFF; box-sizing: border-box; display: inline-block; }
#imageclippercanvas div.imageclippercanvas > div { border: 1px solid #000; width: 100%; height: 100%; box-sizing: border-box; }
#imageclippercanvas div.imagewrapper { width: 100%; height: 100%; display: inline-block; box-sizing: border-box; }
#imageclippercanvas img.original { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
#imageclippercanvas img:last-child { -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); }
#imageclippertoolbar { background-color: #676787; padding: 0; margin: 0; box-sizing: border-box; text-align: right; }
#imageclippertoolbar ul.imagebutton { padding: 2px; margin: 0 auto; }
#imageclippertoolbar ul.imagebutton li { padding: 2px 20px; }
#imageclippertoolbar ul.imagebutton li a.imagebutton { width: 2em; height: 2em; }
#imageclippertoolbar ul.imagebutton li a.imagebutton:before { font-size: 200%; line-height: 1; }

/* fileattacher */
.fileattacher { background-color: #FFF; border: 1px solid #8888B3; }

/* Fine Uploader */
.qq-uploader { position: relative; }
.qq-upload-button { display: block; float: left; }
.qq-uploader-selector.qq-uploader button.button { height: calc(1.8em - 4px); margin: 2px; padding: 0 2px; opacity: .7; background-color: #133B5E; box-shadow: unset; }
.qq-uploader-selector.qq-uploader .clearfix button.button:before { content: '\F0552'; position: relative; line-height: 1.2; }
.qq-uploader-selector.qq-uploader .clearfix button.button.choose { display: none; }
.qq-uploader-selector.qq-uploader .clearfix button.button.choose:before { content: '\F0770'; }
.qq-uploader.multiple .qq-upload-button-selector.qq-upload-button button.button:before { content: '\F083D'; }
.qq-uploader-selector.qq-uploader button.button span { display: none; }
.ajaxuploadinprogress .qq-uploader-selector.qq-uploader .clearfix button.button.choose { display: none; }
.qq-upload-button-hover button.button, .qq-upload-button-focus button.button { opacity: 1 !important; }
.qq-upload-list-wrapper { display: none; margin: 0; }
.bulkupload .qq-upload-list-wrapper { margin-top: 0; }
.qq-upload-list { margin: 0; padding: 0; list-style: none; }
.qq-upload-list li { line-height: 1.8em; height: 1.8em; margin: 0; padding: 0; position: relative; background-color: var(--input-bg-color); display: block; width: 100%; background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 50%); z-index: 1; background-size: 25px 25px; -webkit-animation: submitting 2s linear infinite; animation: submitting 2s linear infinite; /*box-sizing: border-box;*/ }
.qq-upload-list li:hover { background-color: var(--selection-bg-color); }
.qq-uploader-selector.qq-uploader.multiple .qq-upload-list li { border-top: 1px dotted var(--alt-bg-color); }
.qq-upload-status-text { position: absolute; left: 0; top: 0; bottom: 0; background-color: var(--selection-bg-color); font-weight: 400; line-height: 1.8em; height: 1.8em; padding: 0; text-indent: .3em; }
.qq-upload-file { margin: 0 .3em; }
.qq-upload-delete, .qq-upload-pause, .qq-upload-continue { display: inline; }
.qq-upload-retryable .qq-upload-retry { display: inline; }
.qq-upload-failed-text { display: none; }
.qq-upload-failed-icon { display: none; width: 15px; height: 15px; vertical-align: text-bottom; }
.qq-upload-fail .qq-upload-failed-text { display: inline; }
.qq-upload-retrying .qq-upload-failed-text { display: inline; color: #F54354; }
.qq-upload-list li.qq-upload-success { background-image: none; }
.qq-upload-list li.qq-upload-fail { background-color: var(--selection-bg-color); background-image: none; }
.qq-progress-bar-container-selector { position: absolute; width: 100%; left: 0; height: 100%; }
.qq-upload-status-wrapper { position: relative; z-index: 1; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; }
.qq-upload-status-wrapper > div { white-space: nowrap; }
.qq-upload-status-wrapper > .qq-filename { overflow: hidden; text-overflow: ellipsis; flex-grow: 1; flex-shrink: 1; }
.qq-upload-status-wrapper > .qq-filesize { margin: 0 .35em; }
.qq-upload-status-wrapper > .qq-fileactions {  white-space: nowrap; margin: 2px 0 0 2px; padding: 0; }
.qq-upload-status-wrapper > .qq-fileactions .imagebutton { margin: 0; height: calc(1.8em - 4px); width: calc(1.8em - 4px); }
.qq-progress-bar { display: block; background-color: var(--input-decoration-color); width: 0%; height: inherit; margin: 0; padding: 0; z-index: 0; opacity: .3; transition: width .3s linear; }
.qq-upload-file.qq-editable { cursor: pointer; }
.qq-hide { display: none !important; }

/* componenttabs */
li.tabwrapper { padding: 0 3px; box-sizing: border-box; }
li.languagetabwrapper { padding: 0; }
li.tabwrapper div.tabwrapper:not(.languagetabwrapper) { padding: 3px 0 0; margin: 0; width: 100%; }
li.tabwrapper div.tabwrapper:not(.languagetabwrapper) fieldset.componenttab { width: 100%; padding: 0; margin: 0; }
li.tabwrapper div.tabwrapper div.languagetabwrapper div.tabcontent ul.comp { padding: 0; }
li.tabwrapper div.tabwrapper div.tabcontenthidden { display: none !important; }
div.tabwrapper:not(.languagetabwrapper) > ul { visibility: hidden; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnav { margin: 0 0 -2px; padding: 0; list-style-type: none; visibility: visible; font-size: 100%; line-height: 1.1em; font-weight: 400; display: flex; flex-wrap: wrap-reverse; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnav a { color: var(--main-text-color); }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnavready { margin-top: 0; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnav > li { visibility: hidden; margin: 2px -1px 2px 0; padding: 2px 6px; border: 1px solid #676787; border-bottom: none; background-color: var(--main-bg-color); cursor: pointer; overflow: hidden; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnavready > li { visibility: visible; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnav > li:hover { margin-top: 1px; padding-bottom: 3px; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnav > li.tabnavselected { background-color: var(--alt-bg-color); margin-top: 0; margin-bottom: 0; padding: 2px 5px 5px; position: relative; z-index: 1; cursor: default; box-shadow: 2px 0 2px -2px rgba(0,0,0,.5); border-width: 2px; border-color: #676787; }
div.tabwrapper:not(.languagetabwrapper) > ul.tabnav > li.tabnavselected a { cursor: default; }

/* languagetabs around multiple textfields */
li.languagetabwrapper div.languagetabwrapper > .tabcontent > fieldset.componenttab { width: 100%; box-sizing: border-box; border: none; box-shadow: unset; }
li.languagetabwrapper div.languagetabwrapper > .tabcontent > fieldset.componenttab li.comp > div > div.inputtype { outline: 1px solid var(--alt2-bg-color); box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5); }
div.tablanguagewrapper ul.tabnav { float: right; font-size: 86%; line-height: 1.1em; }
div.tablanguagewrapper ul.tabnav li { margin: 0 0 0 -1px; padding: 0; border: 1px solid #676787; border-top: none; }
div.tablanguagewrapper ul.tabnav li:hover { background-color: #FFFFBB; padding-top: 0; padding-bottom: 0; margin-top: 0px; }
div.tablanguagewrapper ul.tabnav li a { margin-top: 0px; float: left; text-decoration: none; padding: 0 4px; }
div.tablanguagewrapper ul.tabnav li:hover a { padding-top: 1px; margin-top: 0; }
div.tablanguagewrapper ul.tabnav li.tabnavselected { margin-top: -1px; padding-bottom: 0px; border-top: none; border-bottom-width: 3px; cursor: default; box-shadow: 2px 2px 3px -2px rgba(0,0,0,.5); }
div.tablanguagewrapper ul.tabnav li.tabnavselected:hover { padding-top: 1px; margin-top: -1px; }
div.tablanguagewrapper ul.tabnav li.tabnavselected a { padding-top: 0; }

/* langaugetabs around a single textfield */
fieldset div.languagetabwrapper ul.tabnav { margin: 0 6px; list-style-type: none; }
div.languagetabwrapper { margin: 0 -1px; }
div.languagetabwrapper.multiple { margin: 0 -1px 0 0; }
div.languagetabwrapper .tabcontent { margin: -2px 0 -1px; background: none; float: none; position: relative; z-index: 1; }
div.languagetabwrapper:not(.multiple) .tabcontent { box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5); outline: 1px solid var(--alt2-bg-color); background-color: var(--alt2-bg-color); margin: 0 1px; }
div.languagetabwrapper .tabcontent:before, div.languagetabwrapper .tabcontent:after { content: ' '; display: table; }
div.languagetabwrapper .tabcontent:after { clear: both; }
div.languagetabwrapper .tabcontenthidden { display: none !important; }
div.languagetabwrapper ul.tabnav { float: right; line-height: 1.1em; font-size: 86%; padding: 0 0 2px 0; }
div.languagetabwrapper:not(.multiple) ul.tabnav li { padding-top: 2px; }
div.languagetabwrapper ul.tabnav li { float: left; background-color: var(--main-bg-color); margin: 0; padding: 0; position: relative; z-index: 0; }
div.languagetabwrapper ul.tabnav li a { float: left; text-decoration: none; padding: 0 4px 1px; }
div.languagetabwrapper.multiple ul.tabnav li a { padding-top: 2px; }
div.languagetabwrapper ul.tabnav li:hover a { color: var(--main-text-color); }
div.languagetabwrapper ul.tabnav li.tabnavselected { border: none; background-color: var(--alt2-bg-color); cursor: default; padding-bottom: 0; cursor: default; box-shadow: 2px 2px 3px -1px rgba(0,0,0,.5); z-index: 1; }
div.languagetabwrapper ul.tabnav li.tabnavselected a { padding-bottom: 2px; color: var(--main-text-color); cursor: default; }
/* expanded language tabs */
.expandedlanguage { display: flex; margin: 0 0 2px 0; flex-direction: row-reverse; }
.expandedlanguage .inputtype { flex-grow: 1; }
.expandedlanguagelabel { width: 1.8em; flex-grow: 0; line-height: 1.8em; text-transform: uppercase; text-align: center; background-color: #8888B3; color: #FFF; }

/* align labels on top of fields for small screens */
@media only screen and (max-width: 620px) {
	body.popup li.comp > div.formrow > label { width: 100%; display: block; font-size: 86%; }
	body.popup li.comp.onofflinetoggle > div.formrow > label { display: none; }
	body.popup li.comp > div.formrow > div.inputtype.checkbox { padding-left: 0; }
	body.popup li.comp > div.formrow > div.inputtype { display: block; margin-left: 2px; }
	body.popup li.comp.nolabel > div.formrow > div.inputtype { margin-left: 0; }
	body.popup div.languagetabwrapper { margin: 0 0 0 2px; }
	body.popup #gloryacontent li.componentwrapper .eventdatetimefield fieldset.componentwrapper { margin-left: 2px; }
	body.popup div.inputtype.selector.autocomplete input.selector.text { min-width: 200px; }
	li.languagetabwrapper div.languagetabwrapper > .tabcontent > fieldset.componenttab { background-color: var(--alt2-bg-color); box-shadow: 2px 2px 3px 0px rgba(0,0,0,.5); }
	li.languagetabwrapper div.languagetabwrapper.multiple > .tabcontent > fieldset.componenttab li.comp > div > div.inputtype { box-shadow: unset; }
}

/* remove (overlay) background on autofill in chrome/opera */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #FFF inset !important; }
input:disabled:-webkit-autofill, input:disabled:-webkit-autofill:hover, input:disabled:-webkit-autofill:focus, input:disabled:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #EFEFEF inset !important; }
/* disable firefox autofill color */
input { filter: none; }

/*
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s; 
}
input:-webkit-autofill:focus {
	-webkit-box-shadow: ,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:disabled {
	-webkit-box-shadow: ,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}
.select2-selection:focus { outline: none !important; }
input:-internal-autofill-selected { background-color: red; }
*/