h5 {
padding:0;margin:10px 0;
}

#product-detail-tabs-nav .title a {
text-decoration:none;
color:#000;
}

#mediaContent {z-index:999;}
#mediaContent table td {vertical-align:top;}

.kpi-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin: -25px -25px 25px -25px; /* Pull header to edges of parent padding */
    padding: 20px 25px; /* Restore padding for content inside header */
}

.kpi-section-header h2 {
    margin: 0;
    padding: 0;
    border-bottom: none;
    font-size: 1.8em;
    color: #495057;
    text-align: center;
	flex:1;
}

#dashboardPage button.section-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
	flex:0;
}

#dashboardPage button.section-toggle-button svg {
    width: 28px;
    height: 28px;
    stroke: #495057;
}

.kpi-section.collapsed {
    padding-bottom: 25px; /* Match top padding when collapsed */
}

.kpi-section.collapsed .kpi-carousel-wrapper {
    display: none;
}

.kpi-section.collapsed #dashboardPage button.section-toggle-button {
    transform: rotate(180deg);
}
.kpi-section.collapsed .section-toggle-button {
  transform: rotate(180deg);
}

#btnNext {
	width: 100%;
	margin-right: 20px;
	margin-bottom: 40px;
  flex:1;
}
#btnSave {
	width: 100%;
	margin-bottom: 40px;
	flex:0;
}

.kpi-carousel-wrapper {
    position: relative;
    padding: 0 50px; /* Space for arrows */
    box-sizing: border-box;
}

#dashboardPage button.kpi-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#dashboardPage button.kpi-arrow:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.4);
}

#dashboardPage button.kpi-arrow.hidden {
    display: none !important;
}

#kpi-prev {
    left: 0;
}

#kpi-next {
    right: 0;
}

.kpi-info-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: help;
    color: #6c757d;
	z-index:1001;
}

.kpi-info-button svg {
    display: block;
}

.kpi-info-button:hover {
    color: #007bff;
}

.kpi-info-button::after {
    content: attr(data-info);
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: translateX(0);
    background-color: #343a40;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: normal;
    width: 220px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
    pointer-events: none;
    margin-bottom: 8px;
}

.kpi-info-button:hover::after {
    visibility: visible;
    opacity: 1;
}

.punkt {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0; /* Rechtsbündig am Button */
  background-color: #f1f1f1;
  min-width: 140px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 4px;
  margin-top: 5px;
}

.dropdown-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-content li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-content li:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.shortkeys .btn {
  margin-right: 5px;
  margin-top: 5px;
}
.shader {
	position:fixed;
	left:0;top:0;right:0;bottom:0;
	z-index:99;
	background-color:rgba(0,0,0,0.4 );
}



.popupdialog ul li,
#protokollrender li {
	list-style-type:none;
	list-style-position:outside;

	margin-left:20px;
	padding:5px 0;
}
.popupdialog {
	position: fixed;
	top: 50px;
	background-color: #fff;
	bottom:50px;
	padding:10px;
	max-width:97%;
	width: 97%;
	border-radius:10px;
	z-index:99;
	overflow: scroll;
-webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.71);
-moz-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.71);
box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.71);
margin: 0 20px;
  display: block;
  z-index: 9999;
}
.popupdialog ul {
	margin-top:20px;		
}

.toplist {
position: fixed;
  background-color: white;
  z-index: 999;
  width: 90%;
  border-bottom: solid 1px #000;
  margin-top:-2px;
  padding-bottom:10px;
}

.btn-toolbar {
  color: #000;
  border-color: #999;
  margin-top:5px;
  margin-right:5px;
}
#checklistensearch {
	top: 100px; /*popup signage von 190 auf 100*/
  position: absolute;
}
#checklistensearch.text {
	top: 220px; /* checklisten create von 100 auf 190 */
}
#startVideo,
#stopVideo,
#takePhoto {
width: 130px;
font-size: 1.2em;
}

.mediaPreview {
	width:100%;
}
.mediaPreviewItem {width:100%;}

.mediaPreviewframe {
	float:left;
	padding:4px;
	width:46%;

}

.bigsymbol {
padding:5px 25px !important;
}

.defaultOutlineTable {
	border:solid 1px #000 !important;
}
.defaultOutlineTable td {border:0 !important;}

.OutlineTable {
	border:solid 1px #000 !important;
}
.OutlineTable td {border:0;}
.tableIsWithinTable {
	border-left:0!important;
	border-right:0!important;
	border-bottom:0!important;
}
.tableIsWithinTable tr:nth-last-child(1) td {
	border-bottom:0!important;
}
.tableIsWithinTable td:nth-child(1) {border-left:0!important;padding-left:4px;}
.tableIsWithinTable td:nth-last-child(1) {border-right:0!important;padding-right:4px;}

.noOutlineTable  {
	border:0 !important;
	border-bottom:solid 1px #000 !important;
}
.noOutlineTable td {
	padding:4px;
	border:0 !important;
	border-bottom:solid 1px #000 !important;
}
.tableWithHeadline tr:nth-child(1) td {
	border-bottom:solid 1px #000 !important;
}

.tableWithZebra tr:nth-child(even) td {
	background-color:#fff !important;
}

.smallTable td {font-size:0.9em;}

span.title {
margin-bottom: 15px;
  margin-right: 20px;
}


#tabActionPopup li {
  padding: 10px 15px;
  font-size: 1.1em;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#tabActionPopup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#tabActionPopup {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1100;
  min-width: 180px;
  padding: 5px 0;
  list-style: none;
}
#product-detail-tabs-nav .tab-link:not(.active) > span:not(.tab-arrow-container) {
  /*display: none;*/
}
.tab-arrow-icon {
  display: inline-block;
}
.tab-arrow-container:hover {
  background-color: rgba(0,0,0,0.1);
}
#product-detail-tabs-nav .tab-link:hover {
  color: #007bff;
}
.tab-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
#toolbar button {
  width: auto;
  font-size: 1.1em;
  padding: 10px 18px;
  margin-left: 10px;
}
#homeButton {
  background-color: transparent;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: 0;
    margin-left: 0px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
#homeButton:hover {
  background-color: #f0f0f0;
}
#homeButton svg {
  width: 28px;
  height: 28px;
  stroke: #333;
  transition: stroke 0.2s ease;
}
#homeButton:hover svg {
  stroke: #007bff;
}
#toolbar-left-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
#product-detail-tabs-nav .tab-link.active svg {
  stroke: #007bff;
}
.tab-icon.disabled {
	color:#ccc;
}
.tab-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  transition: stroke 0.2s ease;
padding-top:2px;
}
#product-detail-tabs-nav .tab-link.active {
  color: #007bff;
  font-weight: 600;
}
#product-detail-tabs-nav .tab-link {
  font-size: 1.1em;
  color: #495057;
  cursor: pointer;
}
#product-detail-tabs-nav {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-bottom: -17px;
  position: relative;
  top: 1px;
  margin-right: auto;
}
#product-detail-tabs-nav .tab-link.active {
  background-color: #fff;
  color: #007bff;
  border-color: #dee2e6;
    border-bottom-color: rgb(222, 226, 230);
  border-bottom: 1px solid #fff;
  font-weight: 600;
  z-index: 2;
}
#product-detail-tabs-nav .tab-link {
  font-size: 1.1em;
  padding: 12px 22px;
  margin: 0;
    margin-right: 0px;
    margin-bottom: 0px;
  width: auto;
  background-color: #e9ecef;
  color: #495057;
  border: 1px solid #dee2e6;
    border-top-color: rgb(222, 226, 230);
    border-right-color: rgb(222, 226, 230);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(222, 226, 230);
    border-left-color: rgb(222, 226, 230);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  margin-bottom: 0;
  position: relative;
  top: 0;
  margin-right: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.redfont {
	color:#ff0000;
}
div.alert {
width: 100%;
  text-align: center;
  margin-top: 20px;
  background-color: #f00;
  padding: 20 0;
  color: #fff;
  font-weight: bold;

}
.blink {
  animation: blink-animation 1s steps(2, start) infinite;
  color: #ff0000;
  font-weight: bold;
  text-decoration: none;
}

@keyframes blink-animation {
      0%   { color: white; }
      50%  { color: red; }
      100% { color: white; }
}

.kpi-section {
  width: 100%;
  max-width: 1000px;
  background-color: #fff;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.kpi-section h2 {
  font-size: 1.8em;
  color: #495057;
  text-align: center;
  margin-top: 0;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.kpi-item {
	position:relative;
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
cursor: pointer;
}
.kpi-value {
  font-size: 3.5em;
  font-weight: 700;
  color: #007bff;
  line-height: 1.1;
}
.kpi-label a {
	text-decoration:none;
  color: #6c757d;

}
.kpi-label {
  font-size: 1.1em;
  color: #6c757d;
  margin-top: 10px;
}
.search-container button {
  width: auto;
  font-size: 1.1em;
  padding: 14px 18px;
  margin: 0;
}
#dashboardPage button {
  font-size: 1.5em;
  padding: 18px 25px;
  margin: 15px 0;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex:1;
}
#dashboardPage {
  justify-content: flex-start;
  padding-top: 40px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1000px;
  margin-bottom: 40px;
}
.dashboard-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e9ecef;
}
.card-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
  font-weight: bold;
}
.dashboard-card h2 {
  font-size: 1.6em;
  color: #343a40;
  margin: 0 0 10px 0;
}
.dashboard-card p {
  font-size: 1.1em;
  color: #6c757d;
  margin: 0;
  line-height: 1.5;
}
.master-data-section {
  width: 100%;
  max-width: 1000px;
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}
.master-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.master-data-grid a
{
text-decoration:none;
color:#000;
}

.master-data-item {
  background-color: #fff;
  padding: 18px 20px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.default {text-decoration:none;color:#000;}

#dashboardSearchContainer {
  max-width: 1000px;
  margin-bottom: 40px;
}
.search-container {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 800px;
}

.inspection-section {
  width: 100%;
  padding: 20px;
  margin-top: 0;
  border: 1px solid #999;
  border-radius: 8px;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#inspection-sections-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex-grow: 1;
  flex-basis: 400px;
  max-width: 500px;
}
#standard-product-layout-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.memFreigabeEGP,
.memZusatzTechnik {
margin-left: 20px;
  color: green;
  margin-bottom: 10px;
}

.inlineTable td {font-size: 0.8em;
}

.summary {
font-size:87%;
}

.inlineTable td {
padding:0;
vertical-align:middle;
}
.freigabe {
padding: 20px;
  background-color: #4cae4c;
  color: #fff;
  border-radius: 20px;
  border: solid 3px #000;
  margin: 20px;
}
.freigabeRot {
background-color:red;
}
.nobullet {
	margin:0;padding:0;
}
.nobullet li {
margin-right:10px;
list-style:none outside;
text-indent:-45px;
margin-left:45px;
}
.nobullet li input[type="checkbox"] {
vertical-align: middle;
margin-right:10px;
}
	

.menubutton {display:flex;}
.menubutton .btn {white-space:wrap;}

.address-input-wrapper,
.type-input-wrapper {position:relative;width:100%;}

label {width:100%;width: auto !important;}
.detail-field-container label {width:auto;}

p {margin:0;}

input[type="checkbox"].confirmCheckbox,
input[type="checkbox"].confirmCheckbox2,
input[type="checkbox"].confirmCheckboxTechnik {
	width: 25px;
	height: 25px;
	appearance: none;
	background-color: #ffffff;
	border: 2px solid #0078D4;
	border-radius: 5px;
	display: inline-block;
	position: relative;
	cursor: pointer;
}

@media print {

input[type="checkbox"].confirmCheckbox,
input[type="checkbox"].confirmCheckbox2,
input[type="checkbox"].confirmCheckboxTechnik {
	width: 15px;
	height: 15px;
	border: 1px solid #0078D4;
}

}


input[type="checkbox"].confirmCheckbox:checked,
input[type="checkbox"].confirmCheckbox2:checked,
input[type="checkbox"].confirmCheckboxTechnik:checked {
	background-color: #0078D4;
}

input[type="checkbox"].confirmCheckbox::before,
input[type="checkbox"].confirmCheckbox2::before,
input[type="checkbox"].confirmCheckboxTechnik::before {
	content: "✔";
	font-size: 30px;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
}

input[type="checkbox"].confirmCheckbox:checked::before,
input[type="checkbox"].confirmCheckbox2:checked::before,
input[type="checkbox"].confirmCheckboxTechnik:checked::before {
	display: block;
}


#preview,
#photoPreview {max-width:100%;}
#preview .previewItem {
display:flex;
}
#upload {margin:10px 0;}

#preview .image,
#preview textarea {
flex:1;
}
#preview textarea {
flex-grow:1;
}

#preview .image {margin-right:15px;margin-bottom:20px;text-align:center;}

.HighlightText {
	border:solid 3px #ff0000;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 2px solid #ff0000!important;
	background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
	color: #363636;
}

        .clear-icon {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-35%);
            cursor: pointer;
            font-weight: bold;
            font-size: 18px;
            color: gray;
			padding:5px;
        }
        .clear-icon:hover {
            color: black;
        }
		.groupText {position:relative;}		
.printonly {display:none;visibility:hidden;}

@media print {

.freigabe {
  padding: 0;
  background-color: transparent;
  color: #000;
  border-radius: 0;
  border:0;
  margin: 0;
}

.productList tr {font-size:0.9em!important;}

.printonly {display:block;visibility:visible;}
.noprint,
.hideprint {display:none!important;visibility:hidden;}

.newFlexLine,
#offcanvasMenu,
#toolbar {display:none!important;visibility:hidden;}
body.toolbar-visible {padding:0!important;}
#productDetailSection h1 {visibility:hidden;display:none;}

}

#msg div {
text-align: center;
  padding: 20px;
  background-color: #fff;
  border: solid 2px #999;
  border-radius: 10px;
  width: 80%;
  margin: 0 auto;
background-color: #f00;
  color: white;
  font-weight: bold;
}
#msg {
  display:none;
position: fixed;
  width: 100%;
  z-index: 9999;
    }
@media print {
#msg {
  display:none !important;
}
}

.col2 {
/*
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
*/
    box-shadow: -7px 0px 7px rgba(0, 0, 0, 0.3), 7px 0px 7px rgba(0, 0, 0, 0.3);
background-color:#fff;
padding:10px 10px 0 10px;

}
.col1 {padding-right: 40px;}
.col3 {padding-left: 40px;}

.dropdown-part {
	cursor: pointer;
	padding: 5px;
	position: relative;
	color:#000;
}
.arrow_down::after {
	content: "▼";
	font-size: 10px;

}

.dropdown-part::after {
	content: "▼";
	font-size: 10px;
	margin-left: 10px;
border-left: solid 1px #000;
  padding-left: 10px;
}

        .dropdown-menu {
			z-index:99;
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
            width: 120px;
            list-style: none;
            padding: 5px 0;
			background-color:#fff;
			border-radius: 10px;
        }
        .dropdown-menu li {
            padding: 8px;
            cursor: pointer;
			text-align: left;
        }
        .dropdown-menu li:hover {
            background: #ddd;
        }
        .text-part {
            flex: 1;
        }


h3 {
margin-bottom:10px;
}
.simpleList {
    list-style: none;
    padding: 0;
    width: 100%;
    max-width: 800px; /* Max-Breite für Produktliste */
}

.simpleList a.default {
text-decoration:none;color:#337ab7;
    padding: 18px;
	display:block;
}
.simpleList li {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive Spalten */
    gap: 10px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.2em; /* Große Schrift für Listeneinträge */
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.simpleList li:hover {
    background-color: #f0f8ff; /* Leichter Hover-Effekt */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.simpleList li span {
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#googleDisplayContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; /* 80% of viewport width */
    height: 80vh; /* 80% of viewport height */
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 2000; /* Above everything else */
    display: flex; /* Allows iframe to fill space */
    flex-direction: column; /* Stack elements if needed, though iframe fills by default */
    box-sizing: border-box;
}

#googleDisplayContainer iframe {
    flex-grow: 1; /* Iframe takes all available space in the flex container */
    width: 100%;
    height: 100%;
    border: none;
}

.iframe-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(51, 51, 51, 0.7); /* Semi-transparent background */
    color: white;
    border: 1px solid white;
    border-radius: 50%; /* Circular button */
    width: 40px; /* Slightly larger than close button for easier clicking */
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    line-height: 38px; /* Adjust for vertical centering */
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 2001; /* Above iframe, below close button if they overlap */
}

.iframe-nav-button:hover {
    background-color: rgba(85, 85, 85, 0.9); /* Darker on hover */
}

#iframeNavBackButton {
    left: 10px; /* Position on the left side */
}

#iframeNavForwardButton {
    right: 10px; /* Position on the right side */
}

#closeGoogleDisplayButton {
    position: absolute;
    top: -15px; /* Position slightly outside and above the top-right corner */
    right: -15px;
    background-color: #333;
    color: white;
    border: 2px solid white;
    border-radius: 50%; /* Circular button */
    width: 30px;
    height: 30px;
    font-size: 18px; /* For a larger '×' */
    font-weight: bold;
    line-height: 26px; /* Adjust for vertical centering of '×' */
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /* Inherits button styling, but we override width/height/padding etc. */
}

#closeGoogleDisplayButton:hover {
    background-color: #555;
}

#nameDropdown {
    position: absolute;
    top: 100%; /* Position directly below the input */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1050; /* Above other content, below datepicker */
    max-height: 400px; /* Limit height and enable scrolling */
    overflow-y: auto;
}

#nameDropdown.hidden {
    display: none !important;
}
#nameFilterInput {
    width: calc(100% - 36px); /* Full width minus padding */
    padding: 10px 18px; /* Slightly less padding than main inputs */
    margin: 0; /* Remove default margin */
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.1em; /* Slightly smaller font for filter */
    border-radius: 0; /* No border radius for filter input inside dropdown */
}

#nameListUL {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nameListUL li {
    padding: 12px 18px;
    font-size: 1.1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

#nameListUL li:last-child {
    border-bottom: none;
}

#nameListUL li:hover {
    background-color: #f0f8ff;
}

.name-dropdown {
    position: absolute;
    top: 100%; /* Position below the input field */
    left: 0;
    right: 0; /* Make it full width of the wrapper */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none; 
    z-index: 1050; /* Ensure it's above other elements, but below datepicker */
    max-height: 150px; 
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px; /* Optional: rounded bottom corners */
}

.name-dropdown-item {
    padding: 12px 18px; /* Consistent padding */
    cursor: pointer;
    font-size: 1.2em; /* Readable text */
    color: #333;
}

.name-dropdown-item:hover {
    background-color: #f0f8ff; /* Light blue hover, consistent with product list */
}
.detail-field-container .name-input-wrapper {
  flex-grow: 1;
  margin: 0;
  width: auto;
  position:relative;
}














#typeDropdown {
    position: absolute;
    top: 100%; /* Position directly below the input */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1050; /* Above other content, below datepicker */
    max-height: 400px; /* Limit height and enable scrolling */
    overflow-y: auto;
}

#typeDropdown.hidden {
    display: none !important;
}
#typeFilterInput {
    width: calc(100% - 36px); /* Full width minus padding */
    padding: 10px 18px; /* Slightly less padding than main inputs */
    margin: 0; /* Remove default margin */
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.1em; /* Slightly smaller font for filter */
    border-radius: 0; /* No border radius for filter input inside dropdown */
}

#typeListUL {
    list-style: none;
    padding: 0;
    margin: 0;
}

#typeListUL li {
    padding: 12px 18px;
    font-size: 1.1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

#typeListUL li:last-child {
    border-bottom: none;
}

#typeListUL li:hover {
    background-color: #f0f8ff;
}

.type-dropdown {
    position: absolute;
    top: 100%; /* Position below the input field */
    left: 0;
    right: 0; /* Make it full width of the wrapper */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none; 
    z-index: 1050; /* Ensure it's above other elements, but below datepicker */
    max-height: 150px; 
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px; /* Optional: rounded bottom corners */
}

.type-dropdown-item {
    padding: 12px 18px; /* Consistent padding */
    cursor: pointer;
    font-size: 1.2em; /* Readable text */
    color: #333;
}

.type-dropdown-item:hover {
    background-color: #f0f8ff; /* Light blue hover, consistent with product list */
}
.detail-field-container .type-input-wrapper {
  flex-grow: 1;
  margin: 0;
  width: auto;
  position:relative;
}



















#addressFilterInput {
    width: calc(100% - 36px); /* Full width minus padding */
    padding: 10px 18px; /* Slightly less padding than main inputs */
    margin: 0; /* Remove default margin */
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.1em; /* Slightly smaller font for filter */
    border-radius: 0; /* No border radius for filter input inside dropdown */
}

#addressListUL {
    list-style: none;
    padding: 0;
    margin: 0;
}

#addressListUL li {
    padding: 12px 18px;
    font-size: 1.1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

#addressListUL li:last-child {
    border-bottom: none;
}

#addressListUL li:hover {
    background-color: #f0f8ff;
}

.address-dropdown {
    position: absolute;
    top: 100%; /* Position below the input field */
    left: 0;
    right: 0; /* Make it full width of the wrapper */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none; 
    z-index: 1050; /* Ensure it's above other elements, but below datepicker */
    max-height: 150px; 
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px; /* Optional: rounded bottom corners */
}

.address-dropdown-item {
    padding: 12px 18px; /* Consistent padding */
    cursor: pointer;
    font-size: 1.2em; /* Readable text */
    color: #333;
}

.address-dropdown-item:hover {
    background-color: #f0f8ff; /* Light blue hover, consistent with product list */
}

.detail-field-container .address-input-wrapper {
  flex-grow: 1;
  margin: 0;
  width: auto;
  position:relative;
}




.newFlexLine {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
  width: 100%;
}
table.historie {
width:100%;
}
table.historie td {vertical-align:top;padding:10px;width:16%;}
table.historie td:nth-child(1) {white-space:nowrap;}
table.historie td:nth-child(1),
table.historie td:nth-child(2),
table.historie td:nth-child(3) {width:4%;}


#specialProductDetails h3 {font-size:2em;}

#BereichList {
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 90%;
}
#BereichList li span {
  padding: 5px;
	white-space:pre-line;
}
#BereichList li {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 18px;
  margin-bottom: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1.2em;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.textblock-input-wrapper {
  margin: 0;
  width: auto;
  position:relative;
}

#textblockDropdown {
    position: absolute;
    top: 100%; /* Position directly below the input */
    left: 50%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1050; /* Above other content, below datepicker */
    max-height: 190px; /* Limit height and enable scrolling */
    overflow-y: auto;
}

#textblockDropdown.hidden {
    display: none !important;
}
#textblockFilterInput {
    width: calc(100% - 36px); /* Full width minus padding */
    padding: 10px 18px; /* Slightly less padding than main inputs */
    margin: 0; /* Remove default margin */
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.1em; /* Slightly smaller font for filter */
    border-radius: 0; /* No border radius for filter input inside dropdown */
}

#textblockListUL {
    list-style: none;
    padding: 0;
    margin: 0;
background-color: #fff;
  border: solid 1px #999;
}

#textblockListUL li {
    padding: 12px 18px;
    font-size: 1.1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

#textblockListUL li:last-child {
    border-bottom: none;
}

#textblockListUL li:hover {
    background-color: #f0f8ff;
}


.textblock-dropdown-item {
    padding: 12px 18px; /* Consistent padding */
    cursor: pointer;
    font-size: 1.2em; /* Readable text */
    color: #333;
}

.textblock-dropdown-item:hover {
    background-color: #f0f8ff; /* Light blue hover, consistent with product list */
}









.textblockgroup-input-wrapper {
  margin: 0;
  width: auto;
  position:relative;
}

#textblockgroupDropdown {
    position: absolute;
    top: 100%; /* Position directly below the input */
    left: 50%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1050; /* Above other content, below datepicker */
    max-height: 190px; /* Limit height and enable scrolling */
    overflow-y: auto;
}

#textblockgroupDropdown.hidden {
    display: none !important;
}
#textblockgroupFilterInput {
    width: calc(100% - 36px); /* Full width minus padding */
    padding: 10px 18px; /* Slightly less padding than main inputs */
    margin: 0; /* Remove default margin */
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.1em; /* Slightly smaller font for filter */
    border-radius: 0; /* No border radius for filter input inside dropdown */
}

#textblockgroupListUL {
    list-style: none;
    padding: 0;
    margin: 0;
background-color: #fff;
  border: solid 1px #999;
}

#textblockgroupListUL li {
    padding: 12px 18px;
    font-size: 1.1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

#textblockgroupListUL li:last-child {
    border-bottom: none;
}

#textblockgroupListUL li:hover {
    background-color: #f0f8ff;
}


.textblockgroup-dropdown-item {
    padding: 12px 18px; /* Consistent padding */
    cursor: pointer;
    font-size: 1.2em; /* Readable text */
    color: #333;
}

.textblockgroup-dropdown-item:hover {
    background-color: #f0f8ff; /* Light blue hover, consistent with product list */
}








.inlinedialog,
.inlinedialog2 {
position: absolute;
border: solid 1px #000;
z-index: 1002;
background-color: #fff;
padding:10px 20px;
border-radius:10px;
}

.inlinedialog .btn-link {
	color:#000 !important;
margin: 0;
  padding: 5px;
  font-size: 1em;
}

.inlinedialog .title {color:#000;}





#offcanvasMenu:hover:not(.pinned), /* Expand on hover only if not pinned */
#offcanvasMenu.pinned { /* Keep expanded if pinned */
    width: 400px; /* Expanded width */
}

#offcanvasMenu:hover:not(.pinned) #pinMenuButtonContainer,
#offcanvasMenu.pinned #pinMenuButtonContainer {
    opacity: 1; /* Show when menu is expanded */
}

#offcanvasMenu:hover:not(.pinned) .menu-item-text, /* Show text on hover if not pinned */
#offcanvasMenu.pinned .menu-item-text { /* Show text if pinned */
    opacity: 1;
    transition: opacity 0.2s ease 0.1s; /* Delayed appearance */
    pointer-events: auto;
}
body.menu-active.menu-expanded .page,
body.menu-active.menu-pinned .page { /* Added menu-pinned state */
    margin-left: 400px; /* Expanded menu width */
    width: calc(100% - 400px);
}

#pinMenuButtonContainer {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
    padding: 5px 10px 0px 10px; /* Padding around the button container */
    box-sizing: border-box;
    width: 100%;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.2s ease 0.1s; /* Delayed appearance */
}

#offcanvasMenu:hover:not(.pinned) #pinMenuButtonContainer,
#offcanvasMenu.pinned #pinMenuButtonContainer {
    opacity: 1; /* Show when menu is expanded */
}

#pinMenuButton {
    background: none;
    border: 1px solid #adb5bd;
    color: #495057;
    padding: 5px 8px;
    font-size: 1.2em; /* Adjust icon size */
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
    margin: 0; /* Reset default button margin */
    min-width: auto; /* override default button width */
    width: auto;  /* override default button width */
    max-width: none; /* override default button max-width */
}

#pinMenuButton:hover {
    background-color: #ced4da;
    color: #343a40;
}

#pinMenuButton.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    transform: rotate(45deg);
}

.detail-field-container input[type="text"], .detail-field-container select, 
.detail-field-container textarea, .detail-field-container .checkbox-wrapper {
  flex-grow: 1;
  margin: 0;
  width: auto;
  position:relative;
}

button:disabled,
.btn disabled {
  background-color: #e2e2e2 !important;
  color: #a0a0a0;
  cursor: not-allowed;
  border: 1px solid #d1d1d1 !important;
  box-shadow: none !important;
}

ul.tagCloud {margin:0;padding:0;}
ul.tagCloud > li {
	list-style:none outside;	
flex-grow: 1;
  padding: 4px 4px;
  font-size: 0.9em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-align: center;
  color: white;
  background-color:#eee;
  border:solid 1px #999;
  margin:5px;
float: left;
  width: 44%;
   }
ul.tagCloud li.group {
width: 100%;
  background: transparent;
  color: #000;
  border: 0;
  padding: 0;
  border-bottom: solid 1px #000;
  border-radius: 0;
padding: 5px 0 5px 0;
  font-size: 1.2em;}
.clr {clear:both;}
ul.tagCloud li a {
	text-decoration:none;
	color:#000;
	padding:4px 4px;
	display:block;
}

#detailDateField { /* Specific styling for the date field if needed */
    background-color: white; /* Ensure consistent background for datepicker input */
}
.detail-field-container {
    width: 100%;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f8;
    color: #000;
    padding-top: 0; /* Initially no padding */
    transition: padding-top 0.3s ease-in-out, margin-left 0.3s ease; /* Added margin-left transition */
}

body.toolbar-visible {
    padding-top: 80px; /* Space for the fixed toolbar */
}

/* Adjust page margins when offcanvas menu is active */
body.menu-active .page {
    width: 100%;/*calc(100% - 60px);*/
    transition: margin-left 0.3s ease, width 0.3s ease;
}

body.menu-active.menu-expanded .page {
    margin-left: 400px; /* Expanded menu width */
    width: calc(100% - 400px);
}

.page {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-size: 1.8em; /* Große Überschrift */
    margin:0;
    color: #007bff;
    text-align: center;
}

h2 {
	font-size:1.2em;
	margin: 5px 0 10px 0;
}
textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}
input[type="text"],
input[type="password"],
textarea {
    font-size: 1em; /* Große Schrift für Eingabefelder */
    padding: 18px;
    margin: 12px 0;
    width: 100%;
    /*max-width: 500px;*/ /* Begrenzung auf größeren Bildschirmen */
    box-sizing: border-box;
    border: 3px solid #ccc;
    border-radius: 8px;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
input[type="text"].selected,
input[type="password"].selected,
textarea.selected {
    border: 3px solid #ff0000;
	outline:none;
	
}
input[type="text"],
input[type="password"],
select { 
    font-size: 1em; /* Große Schrift für Eingabefelder */
    padding: 10px;
    margin: 10px 0;
    width: 100%;
    /*max-width: 500px;  Begrenzung auf größeren Bildschirmen */
    box-sizing: border-box;
    border: 3px solid #ccc;
    border-radius: 8px;
    background-color: white; /* Ensure consistent background */
    color: #333; /* Ensure text color is readable */
    -webkit-appearance: none; /* Remove default Safari/Chrome styling */
    -moz-appearance: none; /* Remove default Firefox styling */
    appearance: none; /* Remove default styling */
}
#searchContainer .btn {
  width: auto;
  font-size: 1.1em;
  padding: 14px 18px;
  margin: 0;
}
#searchContainer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20px;
  max-width: 1300px;
}

.popupdialog .btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width:auto;
}

.btn {
    font-size: 1.5em; /* Große Schrift für Schaltflächen */
    padding: 18px 25px;
    margin: 15px 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
	text-decoration:none;
}

.productList thead th {
  position: sticky;
  background: white;
  z-index: 999;
}
.search-container-sticky {
  position: sticky;
  top: 70px; /* Höhe der Toolbar */
  z-index: 1000;
  background: #f9f9f9; /* wichtig, damit sie nicht durchsichtig ist */
	width:90%;
}



.productList .btn {
	padding: 6px 12px;
}
.btnxx {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 1.2em;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration:none;
}
ul li span a.btn {font-size:0.9em;}

button:hover, button:focus,
.btn:hover, .btn:focus {
    opacity: 0.8; /* Hidden in collapsed state */
    transition: opacity 0.1s ease;
    outline: none;
}

button:active,
.btn:active,
button.selected,
.btn.selected {
    opacity: 0.8; /* Hidden in collapsed state */
    transition: opacity 0.1s ease;
}

#toolbar {
  background-color: #ffffff;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}
#toolbarTitle {
    font-size: 1.4em;
    font-weight: bold;
    color: #333;
}
#toolbarTitle a {text-decoration:none;color:#337ab7;}

#toolbar .btn {
    width: auto; /* Auto-Breite für Toolbar-Buttons */
    font-size: 1.1em; /* Etwas kleinere Schrift für Toolbar-Buttons */
    padding: 10px 18px;
    margin-left: 10px;
}

.productList {
    list-style: none;
    padding: 0;
    width: 90%;
}
#productList a.default {text-decoration:none;color:#337ab7;}

.productList tr {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive Spalten */
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.2em; /* Große Schrift für Listeneinträge */
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.productList tr:nth-child(2n+1) {
  background-color: #EFF6F9;
}
.productList tr:hover {
    background-color: #f0f8ff; /* Leichter Hover-Effekt */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.productList tr td,
.productList tr th {
    padding: 5px;
    overflow: hidden;
	padding: 8px 0 8px 10px;
	font-weight:normal;
	text-align:left;
}

.productList tr th {border-bottom: solid 1px #999;}

#productDetailSection input[type="text"] {
    margin-bottom: 10px;
}

#standardProductDetails, #specialProductDetails {
    width: 100%;
    max-width: 500px; /* Consistent max-width for detail content blocks */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content within these blocks */
}
#standardProductDetails {
  flex-grow: 1;
  flex-basis: 400px;
}

#statusButtonsContainer {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* Slightly reduced gap for tighter fit */
    margin-bottom: 20px;
    width: 100%; /* Take full width of parent (#specialProductDetails) */
}

.status-button2 {
    flex-grow: 1;
    padding: 15px 15px; /* Adjusted padding for smaller buttons */
    font-size: 1.1em; /* Adjusted font size for status buttons */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
    color: white; /* Default text color for status buttons */
}
.status-button2.red { background-color: #dc3545;border:solid 2px #dc3545; }
.status-button2.red:hover { background-color: #c82333; }
.status-button2.red.active, .status-button2.red.selected { 
background-color: #a71d2a; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #a71d2a;border:solid 1px #eee; }

.status-button2.orange { background-color: #fd7e14;border:solid 2px #fd7e14; }
.status-button2.orange:hover { background-color: #e66a00; }
.status-button2.orange.active, .status-button2.orange.selected { 
background-color: #c55a00; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #c55a00;border:solid 1px #eee; }


.col3 button,
.col3 .btn {
    flex-grow: 1;
    padding: 15px 15px; /* Adjusted padding for smaller buttons */
    font-size: 1.1em; /* Adjusted font size for status buttons */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
    color: white; /* Default text color for status buttons */
}

.status-button.red { background-color: #dc3545;border:solid 2px #dc3545; }
.status-button.red:hover { background-color: #c82333; }
.status-button.red.active, .status-button.red.selected { 
background-color: #a71d2a; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #a71d2a;border:solid 1px #eee; }

.status-button.orange { background-color: #fd7e14;border:solid 2px #fd7e14; }
.status-button.orange:hover { background-color: #e66a00; }
.status-button.orange.active, .status-button.orange.selected { 
background-color: #c55a00; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #c55a00;border:solid 1px #eee; }

.status-button.green[data-id="OK"],
.status-button.green[data-id="Ok"] {min-width: 100px;}
.status-button.green { background-color: #28a745;border:solid 2px #28a745; }
.status-button.green:hover { background-color: #218838; }
.status-button.green.active, .status-button.green.selected { 
background-color: #19692c; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #19692c;border:solid 1px #eee; }

.status-button.blue { background-color: #0099FF;border:solid 2px #0099FF; }
.status-button.blue:hover { background-color: #2FACFF; }
.status-button.blue.active, .status-button.blue.selected { 
background-color: #008BE8; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #008BE8;border:solid 1px #eee; }


.status-button.gray { background-color: #6c757d;border:solid 2px #6c757d; }
.status-button.gray:hover { background-color: #5a6268; }
.status-button.gray.active, .status-button.gray.selected {
background-color: #495057; transform: scale(0.95); box-shadow: 0 0 0 2px white, 0 0 0 4px #495057;border:solid 1px #eee; }

#specialDetailNotes {
    font-size: 1em;
    padding: 18px;
    margin: 12px 0;
    width: 100%; /* Takes full width of parent (#specialProductDetails) */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8px;
	min-height:500px;
}

.hidden {
    display: none !important;
}

/* Offcanvas Menu Styles */
#offcanvasMenu {
    position: fixed;
    top: 70px; /* Below toolbar */
    left: 0;
    height: calc(100vh - 70px); /* Full height below toolbar */
    width: 60px; /* Collapsed width */
    background-color: #e9ecef;
    border-right: 1px solid #ced4da;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 950; /* Below toolbar (1000), above content */
    overflow-x: hidden; /* Hide text when collapsed */
    overflow-y: auto; /* Enable vertical scrolling for menu items */
    transition: width 0.3s ease;
    display: flex; /* To align ul if needed, or for future header/footer in menu */
    flex-direction: column;
}

#offcanvasMenu.hidden {
    display: none !important;
}

#offcanvasMenu:hover,
#offcanvasMenu.force-expanded { /* If we need to force expansion via JS */
    width: 400px; /* Expanded width */
}

#offcanvasMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px; /* Some space from the top of the menu */
}

#offcanvasMenu li.current {
	text-decoration:underline;
}

#offcanvasMenu li {
    display: flex;
    align-items: center;
    padding: 5px 10px; /* Reduced vertical padding to minimize line height */
    font-size: 1em; /* Large and readable text */
    color: #333;
    cursor: pointer;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;  /*Ensure content fits */
    border-bottom: 1px solid #d1d8de; /* Separator for items */
	min-height: 20px;/**/
}

#offcanvasMenu li:last-child {
    border-bottom: none;
	margin-bottom:20px;
}

#offcanvasMenu li:hover {
    background-color: #d1d8de;
}
select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: .8em;
    padding-right: 40px; /* Make space for the arrow */
}

.menu-icon {
    display: inline-block;
    width: 25px; /* Fixed width for icon container */
    min-width: 25px; /* Ensure it doesn't shrink */
    font-size: 0.9em; /* Icon size */
    text-align: center;
    margin-right: 15px; /* Space between icon and text */
}

/* Specific icons using ::before pseudo-element */
#offcanvasMenu li[data-status="empty"] .menu-icon::before {
    content: '\25CB'; /* ○ - White Circle U+25CB */
    color: #6c757d; /* Gray */
}

#offcanvasMenu li[data-status="done"] .menu-icon::before {
    content: '\2713'; /* ✓ - Check Mark U+2713 (changed from U+2705) */
    color: #28a745; /* Green */
    font-weight: bold; /* Make it a bit bolder if needed */
}

#offcanvasMenu li[data-status="not-done"] .menu-icon::before {
    content: '\274C'; /* ❌ - Cross Mark U+274C */
    color: #dc3545; /* Red */
}

.menu-item-text {
    opacity: 0; /* Hidden in collapsed state */
    transition: opacity 0.1s ease;
    pointer-events: none; /* Prevent interaction when hidden */
}

#offcanvasMenu:hover .menu-item-text,
#offcanvasMenu.force-expanded .menu-item-text {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s; /* Delayed appearance */
    pointer-events: auto;
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
  border-color: transparent;
}
.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link {
  color: #337ab7;
  font-weight: normal;
  border-radius: 0;
}
.btn-danger,
.col2 .videoFrame .btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.col2 .btn-danger {
  background-color: #f6dfde;
  border-color: #f6dfde;
}

.btn-danger.selected {
  background-color: #B30000;
  transform: scale(0.95);
  box-shadow: 0 0 0 2px white, 0 0 0 4px #d9534f;
  border: solid 1px #eee;
}
.btn-orange, 
.col2 .videoFrame .btn-orange {
  color: #fff;
  background-color: #fd7e14;
  border-color: #d43f3a;
}
.col2 .btn-orange {
  background-color: #f6d8be;
  border-color: #f6d8be;

}

.btn-orange.selected {
  background-color: #fd7e14;
  transform: scale(0.95);
  box-shadow: 0 0 0 2px white, 0 0 0 4px #d9534f;
  border: solid 1px #eee;
}


.btn-blue,
.col2 .videoFrame .btn-blue {
  color: #fff;
  background-color: #0099FF;
  border-color: #0099FF;
}
.col2 .btn-blue {
  background-color: #B5DAF2;
  border-color: #B5DAF2;

}

.btn-blue.selected {
  background-color: #0099FF;
  transform: scale(0.95);
  box-shadow: 0 0 0 2px white, 0 0 0 4px #0099FF;
  border: solid 1px #eee;
}


.btn-grey {
margin-top: 10px;
  background-color: #6c757d;
}
.btn-success,
.col2 .videoFrame .btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.col2 .btn-success {
  background-color: #c3e3c3;
  border-color: #c3e3c3;


}
.btn-success.selected {
  background-color: #006600;
  transform: scale(0.95);
  box-shadow: 0 0 0 2px white, 0 0 0 4px #5cb85c;
  border: solid 1px #eee;
}


.popupdialog .btn-toolbar {
	color:#fff;
}

.btn-toolbar {
  color: #000;
  border-color: #999;
  margin-top:5px;
  margin-right:5px;
}
.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
.btn.disabled, .btn:disabled {
  opacity: .65;
}

/* Styles for product detail section labels and inputs */
.detail-field-container {
    display: flex;
    align-items: center; /* Vertically aligns label and input */
    width: 100%;
    max-width: 500px; /* Consistent max-width */
    box-sizing: border-box;
}

.detail-field-container label {
    font-size: 1.1em; /* Slightly smaller text for labels */
    color: #555; /* Muted color for label text */
    margin-right: 10px; /* Space between label and input field */
    min-width: 160px; /* Minimum width for labels to align them nicely */
    text-align: left;
    flex-shrink: 0; /* Prevents label from shrinking */
}

.detail-field-container input[type="text"],
.detail-field-container select,
.detail-field-container .checkbox-wrapper {
    flex-grow: 1; /* Input field takes remaining space */
    margin: 0; /* Remove default margins from inputs within this container */
    width: auto; /* Allow flex-grow to manage width */
}

/* Select2 specific styling */
.select2-container .select2-selection--single {
    height: auto; /* Adjust height to match other inputs */
    padding: 10px; /* Match padding of other inputs */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Ensure padding doesn't add to width/height */
	margin-bottom: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal; /* Adjust line-height to vertically center text better if needed */
    padding-left: 0; /* Reset padding if default is too much */
    padding-right: 20px; /* Space for the dropdown arrow */
    font-size: 1.4em; /* Match other input font sizes */
    color: #333;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%; /* Make arrow container full height */
    top: 0;
    right: 10px; /* Position arrow */
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent; /* Default arrow color */
    border-style: solid;
    border-width: 6px 5px 0 5px; /* Arrow size */
    margin-left: -10px; /* Adjust position */
}

.select2-dropdown {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 1.2em; /* Font size for dropdown options */
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 1.2em; /* Font size for search field in dropdown */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #007bff; /* Highlight color */
    color: white;
}

/* jQuery UI Datepicker z-index to ensure it's on top */
.ui-datepicker {
    z-index: 1051 !important; /* Higher than toolbar (1000) and offcanvas menu */
}

/* Select2 dropdown z-index to ensure it's on top of other elements, especially datepicker if open */
.select2-container--open {
    z-index: 1052 !important; /* Higher than datepicker */
}