* {
	box-sizing: border-box;
}
/* Reset und Grundstruktur */
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#dhs-identifier {
	font-size: 11px;
	margin-bottom: 2px;
	text-align: right;
}

/* Hintergrundgradient */
body {
    font-family: 'Nunito Sans', sans-serif;
    color: #333;
    background: linear-gradient(
        to bottom,
        white 0%,
        #deeefd 100%
    ) fixed;
   /* min-height: 100vh;*/
   padding: 0px 20px 0 20px;
}


body.loading {
	overflow: hidden;
}
body.loading .ajaxloader {
	display: block;
}
.ajaxloader {
	display: none;
	position: fixed;
	z-index: 11000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba( 255, 255, 255, .6 ) url('../images/ajax-loader.gif') 50% 50% no-repeat;
}

a, a:visited, a:hover{ color: #333; text-decoration: none }
.fa-code { display: none; }

.row {
	display: table;
	width: 100%;
	padding: 0;
}
.col {
	display: table-cell; /*inline-block*/
	vertical-align: top;
    width: auto;
    /*min-height: 15px;
    min-width: 20px;*/
}
.col-25 { width: 25%; }
.col-33 { width: 33%; }
.col-35 { width: 35%; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-65 { width: 65%; }
.col-95 { width: 95%; }
.col-5  { width: 5%;  }
.col-2  { width: 2%;  }
.col-70  { width: 70%;  }
.col-30  { width: 30%;  }
.col-80  { width: 80%;  }
.col-20  { width: 20%;  }
.col-10  { width: 10%;  }
.col.right { text-align: right; /*padding-right: 7px;  padding: 3px; height: 30px;*/}
.col.right + .col { padding: 3px;}
.col.center { text-align: center !important; }
.col.middle { vertical-align: middle !important; }
.col div.formatanzeige { font-style: italic; font-weight: 300; display: inline;}
.col-20px {
	width: 20px;
}
.col-60px {
	width: 60px;
}
.col-80px {
	width: 80px;
}
.col-100px {
	width: 100px;
}
.col-120px {
	width: 120px;
}
.col-150px {
	width: 150px;
}
.col-160px {
	width: 160px;
}
.col-170px {
	width: 170px;
}
.col-180px {
	width: 180px;
}
.col-200px {
	width: 200px;
}
.col-250px {
	width: 250px;
}
.col-270px {
	width: 270px;
}
.col-300px {
	width: 300px;
}
.col-320px {
	width: 300px;
}
.col-400px {
	width: 400px;
}
.gray {
	color: #E1E1E1;
}
.bggray {
	background-color: #E1E1E1 !important;
	color: #000 !important;
	border-color: #E1E1E1 !important;
}


/* Kopfbereich */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
#header img { max-height: 66px; }
.GKMlogo { margin-left: 66px; }

#userinfo { 
	font-size: 12px; color: #555; 
	text-align: right;
	padding-top: 20px;
}

#logout {
	color: #007bfe;
    text-decoration: none;
}
#logout:hover {
	font-weight: 700;
    text-decoration: underline;
}

input.erforderlich,
select.erforderlich,
textarea.erforderlich { 
	background-color: rgba(255,255,255,1.00);
	border: 1px solid #F9BA53;
	/*box-shadow: 0 0 1px 0 #5B5B5B;*/
}

.erforderlich[data-alternativ]{
background-image:
       repeating-linear-gradient(45deg, 
                                white 0%, 
                                white 2%, #F6FAFF 2%, 
                                #F6FAFF 4%, white 4%);}

.not-valid{ background-color: rgba(255,165,0,0.50) !important;}
.not-valid[data-alternativ]{ background-color: rgba(200,255,0,0.50) !important;}
.not-valid-text { display: block; background-color: #FFA500; font-size: 8pt; padding: 2px; }
.not-valid-text.alternativ { background-color: rgba(200,255,0,0.50) !important;}
.validation-error-textbox { background-color: #FFA500; padding: 5px; display: inline-block}
/*input.gueltig { background-color: rgba(0,255,0,0.1)}*/
/*input.gueltig::before { position: absolute; content: '\f00c'; font-family: FontAwesome; padding-left: 1px; font-size: 16px; color: lightfa-square-o; }*/
input.ungueltig { background-color: rgba(255,0,0,0.2) !important}



/* Action-Buttons */
#actions {
    margin-bottom: 10px;
}
#actions button,
a.button,
input[type=submit] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007BFF;
    color: #fff;
    transition: background-color 0.2s;
	text-decoration: none;
}

#editform input,#editform select { font-size: 0.95em;}

#actions button:hover,
.button:hover { background-color: #0056b3; }
.inactive {	background-color: #ccc !important; }

.vorlagenwrapper { padding: 0; margin: 0; display: inline-block; position: relative}
.vorlagenwrapper li { padding: 0; margin: 0; list-style: none}


ul.vorlagemenu { font-size: 0.9em; display: none; position: absolute; border: 1px solid #aaa; padding: 0; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2); min-width: 100%; transition: 1.5s; }
ul.vorlagemenu li { }
ul.vorlagemenu li small { font-size: 0.6em }
ul.vorlagemenu.menuaktiv { display: block; z-index: 10000; transition: 1.5s; background-color: white; }
.vorlagenwrapper a {
	/*font-weight: 600;*/
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
	transition: 0.5s;
	cursor: pointer;
}

.vorlagenwrapper a:hover {
	background-color: #0056b3;
	color: #fff;
	transition: 0.5s;
}


.ui-tooltip {
	padding: 5px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
	background: rgba(255,255,255,1.00);
	border-width: 2px;
}

/* Filterbereich */
#filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
	margin-top: 16px;
}
#filters label {
    font-size: 14px;
    display: flex;
	font-weight: 600;
    flex-direction: column;
    gap: 6px;
}
#filters select {
    width: 120px !important;
    padding: 6px;
    border-radius: 3px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: none;
}
#filters input {margin: auto;}

#filters select:not(:has(option:checked[value=""])),
#filters input[type="text"]:not(:placeholder-shown)
{
  border-right: 4px solid #ffd58d;
  border-left: 4px solid #ffd58d;
  font-weight: 600;
}

select {
  will-change: transform;
}
select option { background-color: white; }
select option.newentry { background-color: rgba(255,9,9,0.69); }

.ui-widget { font-size: 0.9em; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	border: 1px solid rgba(0, 99, 204, 1);
	background: linear-gradient(0deg, rgba(0, 99, 204, 1) 0%, rgba(0, 123, 255, 1) 100%);
	font-weight: 700;
	color: #fff;
}
.AC_active {
	border: 1px solid rgba(0, 99, 204, 1);
	background: linear-gradient(0deg, rgba(152,152,152,1.00) 0%, rgba(197,197,197,1.00) 100%);
	font-weight: 700;
	color: #fff;
}
.ui-menu .ui-state-focus, .ui-menu .ui-state-active {
	margin: -1px;
}

.AC_active { font-weight: 600; }

.ui-widget.ui-widget-content {
	border: 1px solid rgba(0, 99, 204, 1);
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	max-height: 310px; 
	background: white;
	overflow-x: scroll;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-helper-hidden-accessible { display: none; }



/* Reset-Button, wenn ein Filter aktiv ist */
#reset-filters.active {
  background-color: #ff9800;  /* Orange */
  color: #fff;
}
#reset-filters.active:hover {
  background-color: #fb8c00;
}

#sum-display  {
	font-size: 14px;
	color:chocolate;
    /*display: flex;*/
	font-weight: 600;
    /*flex-direction: column;
    gap: 6px;
	text-align: right;*/
	margin-top: 17px;
}

.fa-clone {
	font-weight: 300;
}
.vorlage-btn {background-color: #D4D4D4;
  color: #fff;
  border: none;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-right: 1px;}
.vorlage-btn.vaktiv { background-color: #66C470; }

.dup-btn {
  background-color: #66C470;
  color: #fff;
  border: none;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-right: 1px;
}
.edit-btn {
  background-color: #66C470;
  color: #fff;
  border: none;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-right: 1px;
}

/* Tabellenstyle */

.table-container {
	overflow-y: auto;  
	overflow-x: visible;
}
div.editwrapper {
	box-shadow: 0 8px 24px rgba(26,67,116,0.2);
	margin: 15px 10px 35px 0px;
	border-radius: 8px;
	position: relative;
}
div.editholder {
	display: grid;
  	grid-template-columns: repeat(8, minmax(0,1fr));
  	gap: 5px 20px;
	padding: 20px;
}
.closesymbol {
	position: absolute;
	right: -10px;
	font-size: 1.6em;
	top: -10px;
	color: #e53935;
	cursor: pointer;
}
.newline {
  grid-column-start: 1;
}
div.editholder .field {
	display: flex;
	flex-direction: column;
}
div.editholder .field label {
	font-size: 13px; 
	color: #374151;
	font-weight: 500;
	margin-bottom: 0px;
	white-space: nowrap;
	margin-left: 2px;
}
div.editholder .field input {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 14px;
	width: 100%;
}
div.editholder .field input:disabled {
	color: black;
	background-color: transparent;
	border: 1px dashed #aaa;
}
div.editholder .field input.editableforgkm:disabled { border-color: red; }
div.editholder .field.hidediv { display: none; }
.actions {
/*	margin-top: 18px;*/
	display: flex;
	gap: 10px;
	padding: 0 20px 10px 20px;
}
.btn {
	border: 0;
	padding: 10px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
}
.btn.tertiary {
	background: transparent;
	border: 1px dashed #b3b3b3;
	color: #374151;
}

#order-table,
#gkm-table{
    width: calc(100% - 10px);
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(26,67,116,0.2);
}
#gkm-table {font-size: 0.95em;}
th, td {
    padding: 6px 4px;
    vertical-align: middle;
    border: none;
/*	border-bottom: 1px solid #fff;*/
	border: 1px solid rgba(0, 0, 0, .1);
}

#order-table thead th,
#gkm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;    
}
#gkm-table td { white-space: nowrap; }
/* Zebra-Striping */
tbody tr:nth-child(odd) { background-color: #fff; }
tbody tr:nth-child(even) { background-color: #f2f2f2; }

/* Hover-Effekt */
tbody tr:hover { background-color: #e8f4fd; }

/* Inaktive Zeilen (Gelb) */
tbody tr.incomplete { background-color: #ffd58d !important; }
tbody tr.aktiv { /*background-color: #ffd58d !important;*/ font-weight: 700; }

tbody tr.aktiv td:first-child:after { 
	content: "\f061";       
    font-family: "Font Awesome 6 Free"; 
	position: absolute; 
	left: 5px;
}

/* Textzentrierung für Checkbox-Spalten */
#order-table th:first-child,
#order-table td:first-child,
#order-table th:nth-child(3), #order-table td:nth-child(3),
#order-table th:nth-child(9), #order-table td:nth-child(9),
#order-table th:nth-child(12), #order-table td:nth-child(12),
#order-table th:nth-child(14), #order-table td:nth-child(14),
#order-table th:nth-child(19), #order-table td:nth-child(19) {
    text-align: center;
}

/* Tabellenkopf */
th {
    background-color: #a3cbf5;
    color: #fff;
    font-weight: 600;
	font-size: 0.9em;
    text-align: left;
	background: #0063cc;
    background: linear-gradient(0deg, rgba(0, 99, 204, 1) 0%, rgba(0, 123, 255, 1) 100%);
	border-top: none;
}

#order-table th:first-child,
#gkm-table th:first-child {border-top-left-radius: 8px; border-left: none; border-top: none}
#order-table th:last-child,
#gkm-table th:last-child {border-top-right-radius: 8px; border-right: none; border-top: none}

#order-table td:nth-child(10) > input
{
 text-align: right;
}

#nr-styler {
	font-size: 13px;
	font-weight: 600;
	color: #000;
}
.lieferdatum { 
	color: #000;
	font-size: 13px; 
}
input.lieferdatum { width: 118px; height: 30px;}

td.selecter[ismarkiert="1"] #nr-styler{ position: relative; }
td.selecter[ismarkiert="1"] #nr-styler:after
{ 
	content: "\f14a";       
    font-family: "Font Awesome 6 Free";
	margin-left: 5px;
	color: red;
	font-size: 1.2em;
}

/* Feste Breiten */
.fixed-width-select {
    min-width: 100px !important;
	width: calc(100% - 6px);
    padding: 6px;
    border-radius: 3px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: none;
}
.fixed-width-input {
    min-width: 70px !important;
	/*width: calc(100% - 12px);*/
	width: 100%; 
	padding: 6px;
	border-radius: 3px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: none;
	position: relative;
}
option.top { /*color:#66C470;*/ font-weight: 600; }

input:disabled,
select:disabled {
  background-color: #eee; /* helle Grundfarbe */
  background-image: 
    repeating-linear-gradient(
      45deg,          /* Schraffurwinkel */
      rgba(0,0,0,0.05), /* Linie sehr hell */
      rgba(0,0,0,0.05) 1px,
      transparent 1px,
      transparent 6px   /* Abstand zwischen Linien */
    );
  color: #999;         /* dezente Textfarbe */
  border: 1px solid #ccc;

}

.isgkm input[name^="dat"]:disabled,
.isgkm input:not([name]):disabled,
.isgkm select[name^="dat"]:disabled
{
	background-color: transparent;
	background-image: none;
	border: none;
	color: black;
	-moz-appearance:textfield;
}


/* Highlight für neue Zeilen */
@keyframes fadeOutline {
    from { outline-color: #007BFF; }
    to { outline-color: transparent; }
}
.new-row {
    outline: 1px solid #007BFF;
    outline-offset: -1px;
    animation: fadeOutline 1s ease-out forwards;
}

/* Löschen-Button in Tabelle */
button.delete-btn {
    background-color: #f44336;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
button.delete-btn:hover { background-color: #e53935; }

/* Datumsfilter im Filterbereich */
#filters input[type="date"] {
    width: 125px !important;
    padding: 6px;
    border-radius: 3px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: none;
}
#filters input[type="text"] {
	width: 130px !important;
    padding: 6px;
    border-radius: 3px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: none;
}


.hidecol {display: none;}


.hinweis {
	background-color: rgba(132,202,86);
	padding: 15px;
	font-weight: 600;
	color: #FFFFFF;
}
.hinweis.nohide{}
.error {
	background-color: red;
	color: #fff;
}
div.error,p.error {
	padding: 15px;
	font-weight: 600;
}

/* Footer sticky fixed */
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #fff;
	border-top: 1px solid #eee;
}
#footer nav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #555;
    margin: 0;
    padding: 0;
	position: relative;
}
#footer nav a {
    color: #555;
    text-decoration: none;
    margin: 0 8px;
}
#footer nav a:hover {
    text-decoration: underline;
}
#footer #statusupdater 
{
	position: absolute; margin-right: 30px; right: 0;
	background-color: rgba(255,255,255,0.72);
  	bottom: 5px;
  	padding: 5px 10px;
}
#footer #statusupdater:has(br) { border: 1px solid black; }