/* General */ /* Objects *//* Headline */
/* Table */
/* Form */
/* Filters Global */
/* Disabled Fields */

:root {
  --maincolor: #1195CD;
  --accentcolor: #555555;
  --maincolorlight1: #26b2ed;
  --maincolorlight2: #55c2f1;
  --maincolorlight4: #84d3f5;
  --maincolorlight4: #b4e4f9;
  --maincolorlight4: #d0eefb;
}

.blury {
  filter: blur(3px);
}

.color_filter_global_display {
  background-color: var(--maincolorlight4);
}

.color_yellow {
  background-color: yellow;
}


body {
  font-family: Arial, Helvetica, sans-serif !important;
  /* height: 100vh; */
}

/* General */
/* ####### */

button {
  cursor: pointer;
  border-radius: 3px;
  background-color: transparent;
  border: 2px solid var(--maincolor);
}

button:active {
  background-color: var(--maincolor);
}

select {
  border: none;
  padding: none;
  width: 100%;
  height: 100%;
}

.select_hide_arrow {
  /* If all fields are disabled, then don't show the arrow in a select field. Will be set in Javascript */
  appearance: none;
}

textarea:not(tinymce_textarea) {
  border: none;
  resize: none;
  width: 100%;
  vertical-align: top;
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
  white-space: pre-wrap;
}
/* Tinymce */
.tinymce_textarea{
  /* height: 100% !important; */
  width: 100%;
}



input {
  border: none;
  width: 100%;
}

input[type="number"] {
  border: none;
  width: 100%;
  text-align: end;
}

/* Input hide arrwos */
/* Works for Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Works for Firefox */
/* input[type="number"] {
  -moz-appearance: textfield;
} */

.number {
  text-align: end;
}

input[type="checkbox"] {
  margin-top: 5px;
}

input:checked {
  accent-color: var(--maincolor);
}

.divarea {
  max-width: 150px;
  resize: none;
  background-color: lightblue;
}

.cursorpointer {
  cursor: pointer;
}

.invisible {
  display: none !important;
}



/* .is_readonly {
  background-color: lightgray;
} */

/* Objects */
/* ####### */

.myObject {
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  /* For displaying div by div vertically: */
  display: flex;
  flex-direction: column;
}

/* Headline */
/* ######## */

.myHeadline {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
}

/* .myObjectLabel{

} */

.myActionButtons {
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
}

.myCustomActionsMenu {
  display: flex;
  position: absolute;
  z-index: 1;
  flex-direction: column;
  margin-top: 5px;
}

.myCustomActionsMenuitem {
  background-color: white;
  outline: 2px solid var(--maincolor);
  margin-left: 2px;
  margin-right: 2px;
  padding-left: 3px;
  padding-right: 3px;
}

.myCustomActionsMenuitem:hover {
  cursor: pointer;
  background-color: var(--maincolorlight4);
}

.myCustomActionsMenuitem:active {
  background-color: var(--maincolor);
}

.myActionButtons {
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
}

.myInsertRecordButton {
  margin: 5px;
}

.myDeleteButton {
  margin: 5px;
}

.myToggleTableFormButton {
  margin: 5px;
}

.myReloadButton {
  margin: 5px;
}

.myGlobalFilterButton {
  margin: 5px;
}

.myLinkButton {
  margin: 5px;
}

.myUnlinkButton {
  margin: 5px;
}


.myCustomActionsButtonWrap {
  margin: 5px;
}


.myCustomActionButton {
  margin: 5px;
}

.myFilterObjectWrap {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

.myFilterObject {
  border: 2px solid var(--maincolor);
}

.myFilterObjectResetButton {
  height: auto;
  margin-left: 2px;
}

/* Table */
/* ######## */

.myTableWrap {
  height: 100%;
  overflow-y: hidden;
  border-bottom: 1px solid grey;
}

.ShowScroll {
  overflow-y: scroll !important;
}

table {
  font-family: arial, sans-serif;
  border-spacing: 0;
  width: 100%;
  /* table-layout: fixed; */
}
.record_selector {
  min-width: 20px; 
  max-width: 1%;
  width: 1%;
  background-color: #eeeeee;
}
.record_selector:hover {
  background-color: var(--maincolorlight4);
  cursor: pointer;
}

/* If selector column is hidden, then set the left border of the table manually (Javascript) */
.myTableBorderLeft {
  border-left: 1px solid grey;
}

/* If headline is hidden, then set the top border of the table manually (Javascript) */
.myTableBorderTop {
  border-top: 1px solid grey;
}

/* .myTableHeader {

} */

.myTableHeaderRow {
  position: sticky;
  top: 0px;
  background-color: white;
}

.MyTableHeaderCell:hover {
  cursor: pointer;
  background-color: var(--maincolorlight4);
}

.reference_label_wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.reference_label_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1e88e5;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.reference_label_dot:hover {
  transform: scale(3);
}

.reference_label_text {
  display: inline-block;
}

.reference_label_menu {
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  border: 1px solid #c7c7c7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 150px;
  font-size: 12px;
}

.reference_label_menu_item {
  padding: 6px 10px;
  cursor: pointer;
}

.reference_label_menu_item:hover {
  background-color: var(--maincolorlight4);
}

.igrid_email_field_host,
.igrid_phone_field_host {
  position: relative;
}

.igrid_email_textarea,
.igrid_phone_textarea {
  padding-right: 14px;
}

.igrid_email_action_dot,
.igrid_phone_action_dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 2;
}

.igrid_email_menu_item,
.igrid_phone_menu_item {
  display: block;
  color: inherit;
  text-decoration: none;
}

table th {
  border: 1px solid grey;
  border-left: none;
  vertical-align: top;
  text-align: left;
  padding-left: 3px;
  padding-right: 3px;
}

table td {
  border: 1px solid grey;
  border-left: none;
  border-top: none;
  vertical-align: top;
  text-align: left;
  padding-left: 3px;
  padding-right: 3px;
}

/* Hide on Small Screens */
@media screen and (max-width: 600px) {
  .hide_on_small_screen {
    display: none;
  }
}

table tr > th:first-child,
table tr > td:first-child {
  border-left: 1px solid grey;
}

.table_sort_asc {
  border-bottom: 3px solid var(--maincolor);
}

.table_sort_desc {
  border-top: 3px solid var(--maincolor);
}

.element_selected {
  background-color: var(--maincolorlight4);
  cursor: pointer;
}

/* Stile für den tr-Tag mit der Klasse row_selected */
tr.row_selected {
  background-color: var(--maincolorlight4);
}
/* Stile für alle Kind-Elemente des tr-Tag mit der Klasse row_selected */
tr.row_selected * {
  background-color: var(--maincolorlight4);
}

/* Hover Selektor Table Row and Children: Background Color and Cursor = Hand */
.tr_hover:hover,
.tr_hover:hover * {
  background-color: var(--maincolorlight4);
  cursor: pointer;
}
/* No Outline for Child Elements (= Inputs), because they are readonly */
.tr_hover:hover * {
  outline: none;
}
/* Important for Hover Selector */
/* Ensures that Klicks on disabled Inputs will fall through the Parent Element */
/* This is important for Klicks on disabled Inputs like Checkboxex */
/* So we can catch the Click on Row-Level */
tr input[disabled]{
  pointer-events:none
}

/* raus */
.cell_hover:hover {
  background-color: var(--maincolorlight4);
}
.cell_hover_readonly {
  outline: none;
}

/* Form */
/* #### */
/* Container */
.myFormWrap {
  height: 100%;
  overflow-y: scroll;
  border-bottom: 1px solid grey;
}

/* .myForm {

} */

/* All Elements in myFormWrap */
/* .myFormWrap * {
  box-sizing: border-box;
} */

/* Row in Form = Label + Field */
/* Row Wrap: */
/* .myFormRow {

} */

/* Label Wrapper */
.myFormRowLabelWrap {
  float: left;
  width: 25%;
  /* margin-left: 5px; */
}

/* Labels in myForm */
.myForm label {
  /* padding: 12px 12px 12px 0; */
  display: inline-block;
}

/* Field Wrapper */
.myFormRowFieldWrap {
  float: left;
  width: 75%;
  border: 1px solid lightgrey;
}

.myFormRowFieldWrap > textarea {
  overflow: hidden;
  resize: none; /* Optional, falls du das manuelle Größenändern unterbinden willst */
}

/* All numbers in Form Fields */
.myFormRowFieldWrap > input[type="number"] {
  text-align:start;
}

/* All Checkboxes in Form Fields */
.myFormRowFieldWrap > input[type="checkbox"] {
  margin-left: 3px;
}

/* Field */
.myFormRowField {
  width: auto;
}

/* Row: Clear floats after the Columns */
.myFormRow:after {
  content: "";
  display: table;
  clear: both;
}




/* Footline */
/* ######## */
.myFootline {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin-bottom: 5px;
}

/* Pagination */
.myPagination {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
}
.myPageIndexJumpButton {
  margin-left: 3px;
  margin-right: 3px;
}
.myPageIndexJumpButton:first-child {
  margin-left: 0px;
}
.myRecordCounter {
  display: flex;
  flex-direction: row;
  vertical-align: center;
}
.myRecordCounterTextDiv {
  margin: 3px;
}
.myRecordIndex {
  margin: 0px;
  text-align: end;
  border: 1px solid grey;
  border-radius: 3px;
}
.myRecordCount {
  margin: 0px;
}


/* Filters Global */
.myFiltersGlobalWrap {
  display: flex;
  align-items: stretch; /* Stellt sicher, dass alle Kinder die gleiche Höhe haben */
  width: 100%;
  box-sizing: border-box; /* Macht die Größenanpassung einfacher */
}

.myFiltersGlobalTextWrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  border: 1px solid #ccc; /* Optional, für Sichtbarkeit */
  /* padding: 1px; */
}

.myFiltersGlobalText {
  flex-grow: 1;
  text-align: left;
  padding: 3px;
  margin-left: 3px;
  margin-right: 3px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.myFiltersGlobalResetButton {
  padding-left: 6px;
  padding-right: 6px;
  margin-right: 8px;
  margin-top: 3px;
  margin-bottom: 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image_container{
  display: flex;
  justify-content: center;
}
.image_in_table {
  height: 20px;
}

/* Image Popup Styles */
.popup_for_image {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.popup_for_image_image, .popup_for_image_iframe {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
}

.popup_for_image_iframe {
  width: 90%;
  height: 90%;
}

.popup_for_image_close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other and make columns 100% of screen width. This includes the Submit Button */
@media screen and (max-width: 600px) {
  .col-25,
  .col-75,
  input[type="submit"] {
    width: 100%;
    margin-top: 0;
  }
}

/* Disabled Fields */
/* ############### */
*:disabled {
  opacity: 1;
  background-color: inherit;
  color: inherit;
}

/* Other Fields CSS */
.width_100_percent {
  width: 100%;
}

.width_auto {
  width: auto;
}

.width_300px {
  width: 300px;
}


/* checkbox-style:disabled {
  background-color: blue;
} */

/* input[disabled]{
  border:1px solid red;
}

select option:disabled {
  color: #000;
  font-weight: bold;
} */

/* Field Formatting */

/* .currency::after {
  content: '€';
  position: absolute;
  top: 0;
  z-index: 1;
} */

/* Funktionniert nicht beim Input direkt, aber möglichweise beim Parent-Element oder Wrapper benutzen */
/* .currency:after {
  content: '€';
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 1;
} */
/* Developer Context Menu */
.dev-context-menu {
  position: fixed;
  min-width: 220px;
  max-width: 320px;
  background-color: #1f1f1f;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  overflow: visible;
  z-index: 10000;
  display: none;
}

.dev-context-menu--visible {
  display: block;
}

.dev-context-menu__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.dev-context-menu__list-item {
  margin: 0;
  padding: 0;
}

.dev-context-menu__item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.dev-context-menu__item:hover,
.dev-context-menu__item:focus {
  background-color: rgba(255, 255, 255, 0.12);
  outline: none;
}

.dev-context-menu__list-item--has-submenu {
  position: relative;
}

.dev-context-menu__item--has-submenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dev-context-menu__submenu-icon {
  margin-left: 12px;
  font-size: 0.85em;
  opacity: 0.7;
}

.dev-context-menu__submenu {
  position: absolute;
  top: -4px;
  left: 100%;
  margin-left: 6px;
  min-width: 200px;
  background-color: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 0;
  list-style: none;
  display: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  z-index: 10001;
}

.dev-context-menu__submenu--visible {
  display: block;
}

.dev-context-menu__submenu--left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 6px;
}

.dev-context-menu__list-item--submenu-left .dev-context-menu__submenu-icon {
  transform: rotate(180deg);
}

/* Dev Object Settings Popup */
.dev-object-settings-popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  max-width: 90%;
  max-height: 90%;
  width: 80%;
  height: 80%;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow: hidden;
  flex-direction: column;
  border-radius: 4px;
}

.dev-object-settings-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #d3d3d3;
  padding: 6px 10px;
  font-size: 14px;
}

.dev-object-settings-popup__title {
  font-weight: 600;
}

.dev-object-settings-popup__close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.dev-object-settings-popup__close:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.dev-object-settings-popup__content {
  flex: 1 1 auto;
  padding: 10px;
  overflow: auto;
}

.dev-object-settings-popup__error {
  color: #b00020;
}

.autocomplete_dropdown {
  position: absolute;
  left: 0;
  width: 350px;
  z-index: 20;
  background-color: #ffffff !important;
  border: 1px solid #c4c4c4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  max-height: 180px;
  overflow-y: auto;
}

.autocomplete_option {
  padding: 6px 8px;
  cursor: pointer;
  background-color: #ffffff !important;
}

.autocomplete_option:hover,
.autocomplete_option_active {
  background-color: #e6f2ff !important;
}

.igrid_multiselect {
  position: relative;
  min-width: 190px;
  width: 100%;
  box-sizing: border-box;
}

.igrid_multiselect_summary {
  min-height: 24px;
  padding: 3px 24px 3px 6px;
  box-sizing: border-box;
  border: 1px solid #9b9b9b;
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.igrid_multiselect_summary::marker {
  color: #333333;
}

.igrid_multiselect_options {
  position: absolute;
  left: 0;
  right: auto;
  z-index: 80;
  min-width: 230px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid #9b9b9b;
  background-color: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  text-align: left;
}

.igrid_multiselect_option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 2px 6px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.igrid_multiselect_option:hover {
  background-color: #e6f2ff;
}

.igrid_multiselect_option input {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

.igrid_multiselect_option span {
  flex: 0 1 auto;
  text-align: left;
}

.igrid_multiselect_empty {
  padding: 7px;
  color: #666666;
}

.igrid_multiselect_saving .igrid_multiselect_summary {
  background-color: #fff8d6;
}