/* ********** ********** OUTER FRAME ********** ********** */
/* ********** ********** OUTER FRAME ********** ********** */
body {
   background-color: #254666;
   color: #ffffff;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: small;
   overflow-y: scroll;
   margin: 0;
   padding: 0;
}

/* ********** ********** INNER FRAME ********** ********** */
#appName {
   color: #111004;
   font-size: 24px;
   font-weight: Bold;
   vertical-align: baseline;
}

#headerContainer {
   background-color: #5c8BBB;
   padding: 0px 10px 0px 10px;
}

/*
#appTitle{
	padding: 5px 5px 5px 5px;
	border: #fcbf00 solid 0px;
	text-align: left;
	width: 100%;
}
#divMain {
   background: none;
	overflow-x: auto;
}
*/
#mainContent {
   /* padding: 5px 5px 5px 5px; */
   text-align: center;
   width: 100%;
   background-color: #254666;
   color: #ffffff;
   /* Adding white text for contrast as background is dark */
}

/*
#footer-line{
	vertical-align: text-bottom;
}
*/
/* ********** ********** ********** ********** MENUES ********** ********** ********** ********** */
.mainMenu {
   border: none;
   background-color: #111333;
   color: #777999;
   font-size: medium;
   padding: 0px 10px 0px 10px;
   text-decoration: none;
}

.mainMenu.active {
   background-color: #254666;
   color: #5c8BBB;
   border-radius: 10px 10px 0 0;
}

.mainMenu:hover {
   background-color: #254666;
   color: #5c8BBB;
}

#menuLine {
   /* padding: 5px 5px 0px 15px; */
   padding: 5px 0px 0px 5px;
   /* text-align: left; */
   display: flex;
   align-items: flex-end;
}

/* Dropdown Container */
.dropdown {
   position: relative;
   display: flex;
   /* Changed from inline-block to work with flex parent */
   align-items: flex-end;
   /* Align bottom like other items */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #111333;
   /* Dark background like menu */
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   top: 100%;
   /* Position right below */
   left: 0;
}

/* Links inside the dropdown */
.dropdown-content a {
   color: #777999;
   padding: 6px 16px;
   text-decoration: none;
   display: block;
   font-size: medium;
   text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
   background-color: #254666;
   color: #5c8BBB;
}

/* Show the dropdown menu when toggled */
.dropdown.show .dropdown-content {
   display: block;
}

/* Keep the main button active style when dropdown is shown */
.dropdown.show .mainMenu {
   background-color: #254666;
   color: #5c8BBB;
}

/* ********** ********** ********** ********** Page: Login ********** ********** ********** ********** */
#dLogin {
   border: #eee0d3 solid 1px;
   border-radius: 15px 15px 15px 15px;
   margin: 0 auto;
   position: relative;
   width: 300px;
}

/* ********** ********** ********** ********** Page: Tickets ********** ********** ********** ********** */
#ticket-table {
   border: 0px solid #ff0000;
}

.status_select_class {
   border: 0px solid #ff0000;
}

.ticket_class {
   border: 0px solid #ff0000;
}

#wordContainer {
   border: 1px solid black;
   margin: 1px 1px 1px 1px;
   padding: 1px 1px 1px 1px;
   /*border: 5px solid #ff0000;*/

}

/* ********** ********** ********** ********** Page: Comments ********** ********** ********** ********** */
/* Standard-Stil für das select-Element */
select {
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

/* Stil für hohe Priorität (rot) */
.high-priority,
.date-input-high {
   background-color: #ffcccc;
   /* heller roter Hintergrund */
   border-color: #ff0000;
   /* roter Rand */
   color: #660000;
   /* dunkler Text für Lesbarkeit */
}

/* Stil für mittlere Priorität (gelb) */
.medium-priority,
.date-input-medium {
   background-color: #ffffcc;
   /* heller gelber Hintergrund */
   border-color: #ffbb00;
   /* gelber Rand */
   color: #664400;
   /* dunkler Text für Lesbarkeit */
}

/* Stil für niedrige Priorität (grün) */
.low-priority,
.date-input-low {
   background-color: #ccffcc;
   /* heller grüner Hintergrund */
   border-color: #00cc00;
   /* grüner Rand */
   color: #006600;
   /* dunkler Text für Lesbarkeit */
}

#theState {
   background-color: #ffffcc;
   /* heller gelber Hintergrund */
   border-color: #ffbb00;
   /* gelber Rand */
   color: #664400;
   /* dunkler Text für Lesbarkeit */
   font-size: 12px;
   height: 20px;
   padding: 0px 5px 1px 5px;
}

/* ********** ********** ********** ********** ********** DESIGN ********** ********** ********** ********** ********** */
/* ********** ********** TABLES ********** ********** */
table {
   width: 100%;
   border-collapse: collapse;
}


th,
td {
   /* text-align: left; */
   text-decoration: none;
   padding: 10px;
   border: 1px solid #111333;
}

th {
   background-color: #aeb8d1;
   color: #111004;
   font-size: medium;
   padding: 10px;
}

/* Alternating Row Colors */
tbody tr:nth-child(odd) {
   background-color: #bec8d1;
   color: #111004;
}

tbody tr:nth-child(even) {
   background-color: #d3dae0;
   color: #111004;
}

/* Link Colors in Tables */
tbody tr:nth-child(odd) a {
   color: #254666;
   text-decoration: none;
   font-weight: bold;
}

tbody tr:nth-child(even) a {
   color: #254666;
   text-decoration: none;
   font-weight: bold;
}

/* ********** ********** BUTTONS ********** ********** */
/* ********** ********** FORMS ********** ********** */
form {
   /*margin-bottom: 20px;*/
   margin-bottom: 0px;
}

#add-ticket-form {
   border: #000000 solid 0px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Firefox 
input[type=number] {
   -moz-appearance: textfield;
}	
*/
select {
   background-color: #ffffff;
   border: #111333 solid 2px;
   color: #111333;
   font-size: small;
}

/* Sicherstellen, dass der .form-floating Container relativ positioniert ist */
.form-floating {
   position: relative;
   margin-bottom: 1rem;
   /* Abstand zwischen den Form-Feldern */
}

/* Gemeinsame Styles für das select und input (text) Feld */
.form-floating>.form-select,
.form-floating>.form-control {
   appearance: none;
   /* Entfernt standardmäßige Pfeilsymbole im Select */
   background-color: #ffffff;
   border: 1px solid #eee0d3;
   border-radius: 5px;
   /*color: #444034;*/
   color: #111004;
   font-size: 1rem;
   line-height: 1.5;
   padding: 0.75rem 0.5rem;
   width: 90%;
}

/* Styling für das Label */
.form-floating>label {
   background-color: #ffffff;
   /*color: #6c757d;*/
   /*color: #444034;*/
   color: #111004;
   font-size: 0.85rem;
   left: 0.75rem;
   padding: 0 0.25rem;
   pointer-events: none;
   position: absolute;
   top: 0.5rem;
   transition: 0.2s ease all;
}

/* Effekt, wenn das select- oder input-Element den Fokus hat oder gefüllt ist */
.form-floating>.form-select:focus+label,
.form-floating>.form-select:not(:placeholder-shown)+label,
.form-floating>.form-control:focus+label,
.form-floating>.form-control:not(:placeholder-shown)+label {
   top: -0.5rem;
   left: 0.5rem;
   font-size: 0.75rem;
   /*color: #495057;*/
   /*color: #444034;*/
   color: #111004;
}

.form-floating>.form-control:focus,
.form-floating>.form-select:focus {
   outline: none;
   /* Entfernt den Standard-Umriss */
   /*border-color: #007bff; /* Passt die Rahmenfarbe an */
   /*border-color: #444034; /* Passt die Rahmenfarbe an */
   border-color: #111004;
   /* Passt die Rahmenfarbe an */
   /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Füg einen weichen Schatten hinzu */
}

/* Styling für den Submit-Button */
.form-floating>.submit-button {
   /*background-color: #007bff; /* Hauptfarbe für den Button */
   /*background-color: #444034; /* Hauptfarbe für den Button */
   background-color: #222014;
   /* Hauptfarbe für den Button */
   border: none;
   border-radius: 5px;
   color: #ffffff;
   cursor: pointer;
   font-size: 1rem;
   font-weight: bold;
   padding: 0.75rem 1rem;
   transition: background-color 0.3s ease;
   width: 90%;
}

/* Hover-Effekt für den Submit-Button */
.form-floating>.submit-button:hover {
   /*background-color: #0056b3; /* Dunklere Farbe beim Hover */
   background-color: #ffffff;
   /* Dunklere Farbe beim Hover */
   border: #222014 solid 1px;
   color: #222014;
   /* Dunklere Farbe beim Hover */
}

/* Fokus-Effekt für den Submit-Button */
.form-floating>.submit-button:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

/* Deaktivierter Zustand */
.form-floating>.submit-button:disabled {
   background-color: #cccccc;
   cursor: not-allowed;
}

/* Styling für das Date-Feld */
.form-floating>.date-input {
   padding: 0.75rem 1rem;
   font-size: 1rem;
   color: #333;
   background-color: #fff;
   border: 1px solid #ced4da;
   border-radius: 4px;
   outline: none;
   box-sizing: border-box;
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
   width: 90%;
}

/* Date-Feld bei Fokus */
.form-floating>.date-input:focus {
   border-color: #007bff;
   box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Style für Kalender-Icon im Date-Picker (Browser-abhängig) */
.form-floating>.date-input::-webkit-calendar-picker-indicator {
   background: #007bff;
   color: #fff;
   padding: 0.25rem;
   border-radius: 50%;
   cursor: pointer;
   transition: background 0.3s ease;
}

/* Hover-Effekt für das Kalender-Icon */
.form-floating>.date-input::-webkit-calendar-picker-indicator:hover {
   background: #0056b3;
}

/* Für den Fall, dass das Date-Feld disabled ist */
.form-floating>.date-input:disabled {
   background-color: #e9ecef;
   cursor: not-allowed;
}


/* ********** ********** ********** ********** ********** NOT OLD ********** ********** ********** ********** **********  */
.wmax {
   width: 250px;
}

h1 {
   font-size: x-large;
   margin-top: 0px;
   padding-top: 10px;
   margin-bottom: 0px;
}

h2 {
   font-size: large;
   margin-top: 0px;
   padding-top: 10px;
   margin-bottom: 0px;
   margin: auto;
}

h3 {
   margin-top: 0px;
   padding-top: 10px;
   margin-bottom: 0px;
}

li {
   font-size: small;
}

#dbResults {
   float: inherit;
}