@import "select2.inc.css";

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--field-text-color);
}

.select2-container--default .select2-selection--single {
  border-radius: 0;
  border-color: var(--field-border-color);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 22px;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 22px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #555 transparent;
}

.select2-search--dropdown .select2-search__field {
  padding: 2px;
}

.select2-results__option {
  padding: 4px;
}

.panel label {
  width: 80px;
  display: block;
  clear: left;
  float: left;
  text-align: right;
}

.panel label.error {
  color: #C60000;
}

.panel input.error {
  background-color: #FEC3A5;
  border-style: dotted;
  border-color: #FF658D;
}

.panel .message.error {
  color: #C60000;
}

.panel .message.warn {
  color: #FF4000;
}

.panel .message.success {
  color: #34dc35;
}

.warn.withIcon {
  float: left;
  padding-top: 8px;
  background-image: url(../img/alarm_warning.gif);
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 20px;
}

.inline label {
  clear: none;
}

.panel input,
.panel select,
.panel textarea,
.panel .select2,
.panel .outputText,
.panel .image,
.panel .mceEditor,
.panel table.checkboxButtonGroup {
  float: left;
  margin-left: 10px;
  margin-bottom: 8px;
}

.panel .rich-inplace-field,
.panel .rich-inplace-select-field {
  margin-left: 0px;
}

.panel .rich-table-footer input,
.panel .rich-table-footer select {
  margin-bottom: 0px;
}

.panel input.rich-spinner-button {
  margin-left: 0px;
  margin-bottom: 5px;
}

.panel table.checkboxButtonGroup {
  border-spacing: 0px;
  border-collapse: collapse;
}

.panel table.checkboxButtonGroup input {
  margin-left: 0px;
}

.panel .outputText {
  height: 16px;
  margin-top: 2px;
  color: var(--primary-text-color);
}

.panel .detail {
  color: var(--primary-text-color);
}

.panel .picker {
  display: block;
  margin-left: 0px;
  padding-top: 2px;
  margin-right: 4px;
  vertical-align: bottom;
  float: left;
}

.suggestion .picker {
  float: left;
  margin-left: 0px;
  padding-bottom: 0px;
  vertical-align: middle;
}

.suggestionButton {
  float: left;
  margin-left: -6px;
  margin-top: 1px;
  padding-bottom: 0px;
  vertical-align: middle;
}

.suggestion .status_ARCHIVED,
.suggestion .status_DELETED {
  text-decoration: line-through;
}

.suggestion .status_DRAFT {
  color: #e26b2b;
}

.checkboxButtonGroup.multiline td,
.radioButtonGroup.multiline td {
  display: block;
  float: left;
  white-space: nowrap;
  width: auto;
}

.checkboxButtonGroup.multiline label,
.radioButtonGroup.multiline label {
  float: none;
}

.multiline.elements8 td,
.multiline.elements8 td {
  width: 12%;
}

.multiline.elements8 td:nth-child(8n+9),
.multiline.elements8 td:nth-child(8n+9) {
  clear: left;
}

table.radioButtonGroup,
.radioButtonGroup table,
.checkboxButtonGroup table {
  display: block;
  float: left;
}

.radioButtonGroup input,
.checkboxButtonGroup input {
  clear: none;
  float: left;
}

.radioButtonGroup tbody tr td label,
.radioButtonGroup span label,
.checkboxButtonGroup label {
  clear: none;
  float: right;
  text-align: left;
  margin-top: 2px;
}

.radioButtonGroup.multiline tbody tr td label,
.radioButtonGroup.multiline span label,
.checkboxButtonGroup.multiline label {
  display: inline-block;
  width: 80px;
}

.radioButtonGroup.labelWidthAuto label,
.checkboxButtonGroup.labelWidthAuto label {
  width: auto;
  margin-right: 8px;
}

.radioButtonGroup input:disabled + label,
.checkboxButtonGroup input:disabled + label {
  opacity: var(--opacity-disabled);
}

.radioButtonGroup input:disabled:checked + label,
.checkboxButtonGroup input:disabled:checked + label {
  text-decoration: underline;
}

.rich-calendar-input {
  font-size: 1.0em;
  text-align: left;
  width: 138px;
  height: 16px;
  padding: 1px 0 0 1px;
  margin: 0;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  float: left;
}

.textfield {
  font-size: 1.0em;
  text-align: left;
  width: 200px;
  height: 16px;
  padding: 1px 0 0 1px;
  margin: 0 5px 0 5px;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  float: left;
}

.textfield_disabled,
.suggestion_disabled {
  font-size: 1.0em;
  text-align: left;
  width: 138px;
  height: 16px;
  padding: 1px 0 0 1px;
  margin: 0 5px 0 5px;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  float: left;
  opacity: var(--opacity-disabled);
}

.textarea {
  font-size: 1.2em;
  text-align: left;
  width: 200px;
  height: 50px;
  padding: 0 0 0 2px;
  margin: 0 5px 0 5px;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  float: left;
}

.textarea_disabled {
  font-size: 1.2em;
  text-align: left;
  width: 200px;
  height: 50px;
  padding: 0 0 0 2px;
  margin: 0 5px 0 5px;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  float: left;
  opacity: var(--opacity-disabled);
}

input.dateTime {
  width: 180px;
}

input.number {
  width: 50px;
}

input.title,
input.city {
  width: 250px;
}

select:focus,
input:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: -1px;
  outline-color: var(--field-focus-color);
}

input[type="button"]:focus,
input[type="image"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  outline-width: 0px;
  outline-style: hidden;
  outline-offset: 0px;
}

.radioButtonGroup input[type="radio"]:focus + label,
.checkboxButtonGroup input[type="checkbox"]:focus + label,
.typeList.radio input[type="radio"]:focus + label {
  text-decoration: underline;
  text-decoration-line: underline;
  text-decoration-color: var(--field-focus-color);
}

.radioButtonGroup input[type="radio"]:focus,
.checkboxButtonGroup input[type="checkbox"]:focus,
.typeList.radio input[type="radio"]:focus {
  outline-width: 0px;
}

select:-moz-focusring {
  text-shadow: 0 0 0 #000;
}

option:not(:checked) {
  color: var(--field-text-color); /* prevent <option>s from becoming transparent as well */
}

select {
  color: var(--field-text-color);
}

.select, .listbox {
  font-size: 1.0em;
  text-align: left;
  width: 142px;
  padding: 0;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  margin: 0 5px 0 5px;
  font-family: Arial, Verdana, sans-serif;
}

.select {
  height: 20px;
}

/** applied when input gets the focus
*   (jQuery Code)
*/
.panel input.input_focus {
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
}

.select2 {
  margin: 0 5px 0 5px;
}

.select_disabled, .listbox_disabled {
  font-size: 1.0em;
  text-align: left;
  width: 142px;
  padding: 0;
  margin: 0 5px 0 5px;
  font-family: Arial, Verdana, sans-serif;
  background-color: var(--field-bg-color);
  color: var(--field-text-color);
  border: solid 1px var(--field-border-color);
  float: left;
  opacity: var(--opacity-disabled);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  opacity: var(--opacity-disabled);
}

.checkbox {
  font-size: 1.0em;
  text-align: left;
  width: 12px;
  height: 12px;
  padding: 0;
  color: #027922;
  float: left;
  margin: 0 5px 0 5px;
}

.checkbox.readOnly {
  display: none;
}

label + .checkbox.readOnly,
.checkbox.readOnly + label {
  margin: 0;
  clear: none;
  float: none;
  display: inline-block;
  /* Left padding makes room for image */
  padding: 12px;
  background: url("../img/transparent_1x1.gif") left center no-repeat;
}

label + .checkbox.readOnly:checked,
.checkbox.readOnly:checked + label {
  background-image: url("../img/check.png");
}

.radio, .radio_disabled {
  padding: 0;
  margin: 0 0 0px 10px;
  float: left;
}

.radio tbody tr td, .radio_disabled tbody tr td {
  text-align: left;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  left: 0px;
}

.radio tbody tr td label, .radio_disabled tbody tr td label {
  width: 110px;
  text-align: left;
  float: left;
  padding-top: 2px;
}

.radio tbody tr td input, .radio_disabled tbody tr td input {
  text-align: left;
  float: left;
  margin-left: 0px;
}

.text {
  text-align: left;
  color: var(--primary-text-color);
  font-weight: normal;
}

.text_bold {
  color: var(--primary-text-color);
  font-weight: bold;
}

.text_disabled {
  font-weight: normal;
  color: var(--primary-text-color);
  opacity: var(--opacity-disabled);
}

/* Buttons */
input[type="reset"],
input[type="button"],
input[type="submit"] {
  font-size: 1.1em;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
}

input.btn_submit, div.btn_submit,
input.table_btn_submit, div.table_btn_submit,
input.btn_apply, div.btn_apply,
input.table_btn_apply, div.table_btn_apply,
.documentViewer .toolbar input.btn_submit {
  padding: 3px;
  display: inline;
  background-color: var(--btn-bg-color);
  border: none;
  color: var(--btn-text-color);
  cursor: pointer;
  font-weight: normal;
  border-radius: 3px;
  float: right;
  text-decoration: none !important;
  font-family: arial, helvetica, sans-serif;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 5px 10px 5px 10px;
}

input.btn_cancel, div.btn_cancel {
  padding: 3px 8px;
  display: inline;
  background-color: var(--btn-cancel-bg-color);
  border: none;
  color: var(--btn-cancel-text-color);
  cursor: pointer;
  border-radius: 3px;
  float: right;
  text-decoration: none !important;
  font-family: arial, helvetica, sans-serif;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 5px 10px 5px 10px;
}

input.btn_ok, div.btn_ok,
input.table_btn_ok, div.table_btn_ok,
input.btn_generic, div.btn_generic {
  padding: 3px;
  display: inline;
  background-color: var(--btn-ok-bg-color);
  border: none;
  color: var(--btn-ok-text-color) !important;
  cursor: pointer;
  font-weight: normal;
  border-radius: 3px;
  float: right;
  text-decoration: none !important;
  font-family: arial, helvetica, sans-serif;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 5px 10px 5px 10px;
}

input.btn_generic, div.btn_generic {
  padding: 3px 8px;
  float: left;
}

.buttons {
  clear: both;
  margin: 0px 10px 0px 10px;
}

.buttons input[type="submit"], .buttons div.btn_submit, .buttons div.btn_cancel, .buttons div.btn_generic {
  float: right;
  /* margin: 0px 0px 0px 8px; */
}

.buttons .separator {
  height: 24px;
  width: 18px;
  margin-top: 5px;
}

.btn_submit:active {
  background-position: 0 top;
  background-color: #4383b6;
}

.btn_submit:hover,
.btn_apply:hover,
.table_btn_submit:hover,
.btn_cancel:hover,
.btn_ok:hover,
.btn_generic:hover {
  background-position: 0 center;
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

/*.btn_submit:hover,*/
/*.btn_apply:hover,*/
/*.table_btn_submit:hover {*/
/*  background-color: #154c78;*/
/*}*/

/*.btn_cancel:hover {*/
/*  background-color: #5591bb;*/
/*}*/

/*.btn_ok:hover,*/
/*.btn_generic:hover {*/
/*  background-color: #5c9702;*/
/*}*/

.btn_submit[disabled], .table_btn_submit[disabled],
.btn_generic[disabled], .btn_cancel[disabled] {
  opacity: var(--opacity-disabled);
  cursor: default;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.buttons .rich-label-text-decor {
  font-weight: normal;
  padding: 3px 0px;
  font-size: 1.2em;
}

.buttons .rich-ddmenu-label-unselect,
.buttons .rich-ddmenu-label-select {
  padding: 0px 8px;
  margin-top: 5px;
}

.buttons .rich-menu-item {
  text-transform: none;
}

.buttons .dropDownMenu {
  display: inline;
  float: right;
  padding: 0;
  margin: 0;
}

input.disabled {
  cursor: default;
  color: #888888;
}

input.readOnly {
  cursor: default;
  color: #888888;
  opacity: 0.80;
}

input.disabled:hover, input.disabled:active {
  box-shadow: 0px 0px 0px;
}

input.btn_submit.disabled:hover, div.btn_submit.disabled:hover,
input.table_btn_submit.disabled:hover, div.table_btn_submit.disabled:hover {
  background-color: #2C6DA0;
}

input.btn_cancel.disabled:hover, div.btn_cancel.disabled:hover {
  background-color: #6AA1C7;
}

input.btn_ok.disabled:hover, div.btn_ok.disabled:hover,
input.table_btn_ok.disabled:hover, div.table_btn_ok.disabled:hover {
  background-color: #66A703;
}

input.btn_generic.disabled:hover, div.btn_generic.disabled:hover {
  background-color: #66A703;
}

/* The switch - the box around the slider */
.panel .switch,
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  clear: right;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #31cc67;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #31cc67;
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

/* Rounded sliders */
.switch .slider.round {
  border-radius: 24px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

/***********************************/
/*  Style set by FieldModelUtils   */
/***********************************/
/* input string */
.typeString {
  width: 250px;
}

/* input numeric */
.typeNumeric {
}

/* input date */
.typeDate {
  width: 60px;
}

/* input date */
.typeDateAndHour {
  width: 90px;
}

/* input hour */
.typeHour {
  width: 30px;
}

/* input text area */
.typeText {
  width: 50%;
}

.typeText.longText {
  height: 150px;
}

/* input hour */
.typePhoneNumber {
  width: 80px;
}

/* lists */
.typeList.select,
.typeList.select_disabled,
.typeList.suggestion.textfield,
.typeList.suggestion_disabled.textfield {
  width: 250px;
  height: 22px;
}

.typeList.multivalued {
  height: 86px;
}

.typeList.radio.multivalued {
  margin-bottom: 8px;
}

.typeList.radio.multivalued input {
  margin-bottom: 0px;
}

.typeList.radio.multivalued label {
  width: 250px;
}

/* Fieldset */
fieldset.collapsible, fieldset.collapsible.expanded {

}

fieldset.collapsible.collapsed {
  border: 0;
  border-top: 1px dotted var(--primary-text-color);

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

fieldset.collapsible legend {
  font-weight: bold;
  cursor: pointer;
  padding-left: 16px;
}

fieldset.collapsible legend, fieldset.collapsible.expanded legend {
  background: transparent url("../img/toggle_arrow_bottom2.png") no-repeat center left;
}

fieldset.collapsible.collapsed legend {
  background: transparent url("../img/toggle_arrow_right2.png") no-repeat center left;
}


/***********************************/
/*     Style set by Coherence      */
/***********************************/
/* EnumCoherenceErrorLevel.NOT_BLOCKING */
.error_low {
  border-color: #009A00;
  border-style: dashed;
  border-width: 1px;
}

label.error_low,
table td .error_low {
  color: #009A00;
  font-weight: bold;
}

table td .error_low {
  border-width: 0px;
}

/* EnumCoherenceErrorLevel.BLOCKING_PRINTING */
.error_medium {
  border-color: #FF8800;
  border-style: dashed;
  border-width: 1px;
}

label.error_medium,
table td .error_medium {
  color: #FF8800;
  font-weight: bold;
}

table td .error_medium {
  border-width: 0px;
}

/* EnumCoherenceErrorLevel.BLOCKING_VALIDATION */
.error_high {
  border-color: #F70000;
  border-style: dashed;
  border-width: 1px;
}

label.error_high,
table td .error_high {
  color: #F70000;
  font-weight: bold;
}

table td .error_high {
  border-width: 0px;
}

table.error, .alert .error {
  border-color: inherit;
  border-width: 1px;
}