/* ====================================================== */
/*                                                        */
/*               eCall CCS-Definitionen                   */
/*                                                        */
/* ====================================================== */
/*                                                        */
/*                                                        */
/* Änderungen                                             */
/* ====================================================== */
/* Version:         0.5                                   */
/* Datum:           05.05.2015                            */
/* Änderung:        Trennung der verschiedenen Tabellen   */
/* Autor:           FOE                                   */
/*                                                        */
/* Inhalt                                                 */
/* ====================================================== */
/*  1  Allgemeine Definitionen                            */
/*  2  Header (Titelbalken inklusive Logo)                */
/*  3  Menü                                               */
/*  4  Titel                                              */
/*  5  Fehlermeldung und Bestätigung                      */
/*  6  Text allgemein inklusive Überschrift               */
/*  7  Tabelle                                            */
/*  8  Button                                             */
/*  9  Footer                                             */
/* 10  Spezielle Elemente                                 */
/*                                                        */
/*                                                        */
/*  1  Allgemeine Definitionen                            */
/* ------------------------------------------------------ */
/*                                                        */
.main
{
  font-family:      Arial;    /* Schriftart: Calibri      */
  font-size:        12px;  /* Schriftgrösse: mittel    */
  font-variant:     normal;   /* Schriftvariante: normal  */
  font-weight:      normal;   /* Schriftgewicht: normal   */
  font-style:       normal;   /* Schriftstil: normal      */
  color:            #000000;  /* Farbe Text: Schwarz      */
  background-color: #FFFFFF;  /* Farbe Hintergrund: Weiss */
  text-align:	      left;     /* Textausrichtung: links   */
  line-height:      normal;   /* Zeilenabstand: normal    */
  white-space:      normal;   /* Zeilenumbruch: ja        */
  word-spacing:     normal;   /* Wortabstand: normal      */
  letter-spacing:   normal;   /* Zeichenabstand: normal   */
  text-indent:      0px;      /* Texteinrückung: 0        */ 
  text-transform:   none;     /* Textart: keine           */
  text-decoration:  none;     /* Textgestaltung: keine    */
  margin:           0px;      /* Abstand: keiner          */
  border: 1px solid #FFFFFF;  /* Rand: Ja Linie weiss     */
}
/*                                                        */
/*  2  Header (Titelbalken inklusive Logo)                */
/* ------------------------------------------------------ */
/*                                                        */
.header
{
}
/*                                                       */
/*  3  Menü                                              */
/* ----------------------------------------------------- */
/*                                                       */
.navigation
{
}
/*                                                       */
/*  4  Titel                                             */
/* ----------------------------------------------------- */
/*                                                       */
.title
{
  font-size:        x-large;  /* Schriftgrösse: sehr gross */
  color:            #FFFFFF;  /* Farbe Text: weiss         */
  background-color: #009EE0;  /* Farbe Hintergrund: blau   */
  font-weight:      bold;     /* Schriftgewicht: fett      */
}
/*                                                       */
/*  5  Fehlermeldung und Bestätigung                     */
/* ----------------------------------------------------- */
/*                                                       */
.error
{
}
/*                                                       */
/*  6  Tabelle                                           */
/* ----------------------------------------------------- */
/*                                                       */
table
{
  border-collapse:  collapse;
  background-color: #F0F0F0;  /* Farbe Hintergrund: Stufe 15 */
  white-space:      nowrap;   /* Zeilenumbruch: Nein     */
  font-size:        12px;
}

.tablefilter                  /* Filterfunktion          */
{
  background-color: #D0D0D0;  /* Farbe Hintergrund: Stufe 13 */
  padding: 10px 5px 10px 5px; /* Randabstand:            */
} 

.tablefilter .textbox         /* Filterfunktion Eingabefeld */
{
  text-align:	     left;      /* Textausrichtung: links  */ 
  width:           290px;     /* Breite: 300             */
} 
.tablefilter .activefilters   /* Filterfunktion aktiver Filter */
{
  background-color: #D0D0D0;  /* Farbe Hintergrund: Stufe 12 */
  padding: 5px 5px 5px 37px;  /* Randabstand:            */ 
}
.tableactivefilters td        /* Tabelle aktiver Filter */
{
  border: solid 1px #FFFFFF;  /* Rahmen Zelle: dünn weiss */ 
} 

table th                      /* Spaltentitel            */
{
  background-color: #C0C0C0;  /* Farbe Hintergrund: Stufe 12 */
  border: solid 2px #FFFFFF;  /* Rahmen Zelle            */    
  padding: 5px 0px 5px 0px;   /* Randabstand:            */ 
  text-align:       center;   /* Textausrichtung: Mitte  */
}

table th:hover                /* Spaltentitel wenn mit Mauszeiger darüber */
{
  background-color: #A0A0A0;  /* Farbe Hintergrund: Stufe 12 */
} 
table th a                    /* Spaltentitel Link       */
{
  color:            #000000;  /* Farbe Text: Schwarz     */
}
table th a:hover              /* Spaltentitel wenn mit Mauszeiger darüber */
{
  color:            #000000;  /* Farbe Text: Schwarz     */
  text-decoration:  none;     /* Textgestaltung: keine   */
}
table th.sortasc              /* Spaltentitel wenn sortiert aufsteigend */
{
  background-image: url(../Images/grid-sorting-asc.gif);
  background-repeat: no-repeat;
  background-color: #009EE0;  /* Farbe Hintergund: blau  */
  background-position: 98% 50%;
}
table th.sortdesc             /* Spaltentitel wenn sortiert absteigend */
{
  background-image: url(../Images/grid-sorting-desc.gif);
  background-repeat: no-repeat;
  background-color: #009EE0;  /* Farbe Hintergund: blau  */
  background-position: 98% 50%;
}
table th.sortasc:hover        /* Spaltentitel wenn sortiert aufsteigend und wenn mit Mauszeiger darüber */
{
  background-color:#63B0DC;   /* Farbe Hintergund: altes blau hell */
}
table th.sortdesc:hover       /* Spaltentitel wenn sortiert absteigend und wenn mit Mauszeiger darüber */
{
  background-color:#63B0DC;   /* Farbe Hintergund: altes blau hell */
}
table tr                      /* Tabelleneintrag         */
{
  /* border: solid 2px #FFFFF; Rahmen Tabelle???        */
}
table tr td                   /* Zelleneintrag           */
{
  border: solid 2px #FFFFFF;  /* Rahmen Zelle --> AUFTEILEN: 1 Tabelle, 2. Aktive Filter, 3. Details  */
  text-indent: 0px;
}
.JColResizer tr td            /* Zelleneintrag           */
{
  padding-left: 5px !important;
  padding-right: 5px !important;
}
table td a                    /* Tabelleneintrag Link    */
{
  color:           #000000;   /* Farbe Text: Schwarz     */
}
table td input                /* Tabelleneintrag Link    */
{
  color:           #000000;   /* Farbe Text: Schwarz     */  
}
.tableAlternate table tr:nth-child(even) /* Tabelleneintrag alternativ */
{
  background-color:#E0E0E0;   /* Farbe Hintergund: Stufe 14 */
}

table tr:hover                /* Tabelleneintrag wenn mit Mauszeiger darüber */
{
  background-color: #D0D0D0;  /* Farbe Hintergrund: Stufe 13 */
} 
table td a:hover              /* Zelleneintrag wenn mit Mauszeiger darüber */
{
  color:           #000000;   /* Farbe Text: Schwarz     */
  text-decoration: none;      /* Textgestaltung: keine   */
}
.tableAlternate table tr:nth-child(even):hover /* Tabelleneintrag wenn mit Mauszeiger darüber alternativ */
{
  background-color: #C0C0C0;  /* Farbe Hintergrund: Stufe 12 */
}

table tr.selected             /* Tabelleneintrag wenn ausgewählt */
{
  background-color:#63B0DC;   /* Farbe Hintergund: altes blau hell */
}
.tableAlternate table tr:nth-child(even).selected /* Tabelleneintrag wenn ausgewählt alternativ */
{
  background-color:#2993CF;   /* Farbe Hintergund: altes blau */
}


table tr.selected:hover       /* Tabelleneintrag wenn ausgewählt und wenn mit Mauszeiger darüber */
{
  background-color: #009EE0;  /* Farbe Hintergrund: eCall blau */
}
.tableAlternate table tr:nth-child(even).selected:hover /* Tabelleneintrag wenn ausgewählt und wenn mit Mauszeiger darüber alternativ */
{
  background-color: #009EE0;  /* Farbe Hintergrund: eCall blau */
}


.tablefooter                  /* Seitenauswahl           */
{
  background-color: #D0D0D0;  /* Farbe Hintergrund: Stufe 13 */
  padding: 5px 5px 5px 5px;   /* Randabstand:            */
}


/*                                                       */
/*  7  Text allgemein inklusive Überschrift              */
/* ----------------------------------------------------- */
/*                                                       */
.content                      /* Text allgemein          */
{
  background-color: #E0E0E0;  /* Farbe Hintergrund: Stufe 14 */
}
.tabledetails td              /* Tabelle allegemein      */
{
  border: solid 1px #FFFFFF;  /* Rahmen Zelle: schmal weiss */  
  overflow: hidden;
  white-space:normal;
  word-wrap:normal;
  word-break:break-all;
  
}

/* color scheme admin */
.tabledetails td a {
   color: #337ab7;
   text-decoration: none;
}

.tabledetails td a:hover,
.tabledetails td a:focus {
   color: #23527c;
   text-decoration: underline;
}

.contentheader                /* Überschrift             */
{
  background-color: #C0C0C0;  /* Farbe Hintergrund: Stufe 12 */
  border: solid 2px #FFFFFF;  /* Rahmen Zelle            */  
  font-weight:      bold;     /* Schriftgewicht: fett    */
  display:     inline-block;  /*                        */
  width:            100%;     /* Breite: Ganze Breite    */
  padding: 5px 0px 5px 3px;   /* Randabstand:            */
  font-size:         12px;
}
.contentleft                  /* Linke Spalte            */
{
  font-weight:     normal;      /* Schriftgewicht: fett    */
  min-width:       130px;     /* Minimale Breite: 150px  */
  width:           33%;       /* Breite: 33%             */
  padding: 5px 0px 5px 3px;   /* Randabstand:            */
}                  
.contentmiddle                /* Mittlere Spalte         */
{
  font-weight:     normal;    /* Schriftgewicht: normal  */
  min-width:       250px;     /* Minimale Breite: 250px  */
  width:           75%;       /* Breite: 50%             */
  padding: 5px 0px 5px 3px;   /* Randabstand:            */
}
.contentmiddle a:hover        /* Belege, Wenn mit Mauszeiger darüber */
{
  text-decoration: underline; /* Textgestaltung: unterstrichen */
} 
.contentright                 /* Rechte Spalte           */
{
  font-weight:     normal;    /* Schriftgewicht: normal  */
  min-width:       20px;      /* Minimale Breite: 20px   */
  width:           100%;      /* Breite: Rest!           */
  padding: 5px 0px 5px 3px;   /* Randabstand:            */  
} 

/*                                                       */
/*  8  Button                                            */
/* ----------------------------------------------------- */
/*                                                       */
.button                       /* Button allgemein        */
{
  color:            #FFFFFF;  /* Farbe Text: weiss       */
  font-size:        12px;  /* Schriftgrösse: gross    */
  font-weight:      bold;     /* Schriftgewicht: fett    */
  background-color: #2993CF;  /* Farbe Hintergrund: Stufe 10 */
  border: 1px solid #63B0DC;  /* Farbe Hintergund: altes blau hell */
  padding: 1px 6px 1px 6px;   /* Randabstand: normal     */
  cursor:           pointer;  /* Mauszeiger ändert       */
}
.button:hover                 /* Wenn mit Mauszeiger darüber */
{
  background-color: #63B0DC;  /* Farbe Hintergund: altes blau hell */
  border: 2px solid #63B0DC;  /* Dicke Rahmen: dick      */
  padding: 0px 5px 0px 5px;   /* Randabstand: kleiner    */
}
.button:active                /* Wenn man klickt         */
{
  color:            #000000;  /* Farbe Text: schwarz     */
  background-color: #009EE0;  /* Farbe Hintergrund: eCall blau */
  border: 2px solid #000000;  /* Dicke Rahmen: dick      */
  padding: 0px 5px 0px 5px;   /* Randabstand: kleiner    */
}
.button:disabled              /* Wenn Button inaktiv     */
{
  color:            #606060;  /* Farbe Text: Stufe 6     */
  background-color: #E0E0E0;  /* Farbe Hintergrund: Stufe 14 */
  border: 1px solid #606060;  /* Farbe Rahmen: Stufe 6   */
  padding: 2px 7px 2px 7px;   /* Randabstand: gross      */
}

.buttoncurrentpage            /* Button aktuelle Seite   */
{
  color:            #000000;  /* Farbe Text: schwarz     */
  background-color: #009EE0;  /* Farbe Hintergrund: eCall blau */
  border: 2px solid #000000;  /* Dicke Rahmen: dick      */
  padding: 0px 5px 0px 5px;   /* Randabstand: kleiner    */
}    


/*                                                       */
/*  9  Footer                                            */
/* ----------------------------------------------------- */
/*                                                       */
.footer
{
}

/*                                                       */
/* 10  Spezielle Elemente                                */
/* ----------------------------------------------------- */
a                             /* Links normal            */
{ 
  color:            #009EE0;  /* Farbe Text: blau        */
  text-decoration:  none;     /* Textgestaltung: keine   */
}
a:visited                     /* Wenn besucht            */
{
  /* Gleich wie Links normal! */
}
a:active                      /* Wenn geklickt           */
{
  color:           #559EE0;   /* Farbe Text: blau        */
}
a:hover                       /* Wenn mit Mauszeiger darüber */
{
  color:           #14B9FF;   /* Farbe Text: blau heller */
  text-decoration: underline; /* Textgestaltung: unterstrichen */
}

.textbox                      /* Eingabefeld             */
{
  font-size:       small;     /* Schriftgrösse: gross    */
  text-align:	     center;    /* Textausrichtung: Mitte  */
  width:           40px;      /* Breite: 40              */
}

.dropdown                     /* Dropdown                */
{
  background-color: #FFFFFF;  /* Farbe Hintergrund: Weiss */
  font-size:        small;    /* Schriftgrösse: gross    */   
}

.image_pdf                    /* Bild                    */
{
  padding:          5px;      /* Randabstand: kleiner    */
  height:           50px;     /* Höhe: 50                */
}
.image_pdf:hover              /* Wenn mit Mauszeiger darüber */
{
  padding:         2px;       /* Randabstand: kleiner    */
  height:          56px;      /* Höhe: 56                */
}

/* ===================================================== */

/*                                                       */
/* 11  Hamburger                                         */
/* ----------------------------------------------------- */
.hamburger ul 
{
   list-style: none;
   padding: 0px;
   margin: 0px;
}
.hamburger  ul li {
   display: block;
   position: relative;
   border: 2px solid #FFF;
   text-align: left;
}
.hamburger  li ul {
   display: none;
}
.hamburger  ul li a {
   display: block;
   background: #F0F0F0;
   padding: 5px 10px 5px 10px;
   text-decoration: none;
   white-space: nowrap;
   color: #000;
}
.hamburger ul li a:hover {
   background:#A0A0A0;
}
.hamburger  li:hover ul {
   display: block;
   position: absolute;
}
.hamburger  li:hover li {
   float: none;
}
.hamburger  li:hover a {
   background: #A0A0A0;
}
.hamburger  li:hover li a:hover {
   background: #F0F0F0;
}

/* ===================================================== */

/*                                                       */
/* 12 Dialog-Fenster                                     */
/* ----------------------------------------------------- */
.dialog {
   font-family: Arial;
   font-size: 12px;
}
.ui-widget {
   font-family: Arial;
   font-size: 12px;    
}


/* ===================================================== */

/*                                                       */
/* 13 Seiten-Titel
/* ----------------------------------------------------- */
.pageTitle {
   color: #FFFFFF; /* Farbe Text: weiss         */
   background-color: #009EE0; /* Farbe Hintergrund: blau   */
   width: 100%;
   height: 30px;
   font-family: Verdana;
   font-size: 12px;
   font-weight: bold;
   border-style: none;
}
.pageTitle td {
   border: none;
}
.pageTitle tr:hover {
   background-color:  #009EE0 ; /* Farbe Hintergrund: blau   */
}

/* ===================================================== */

/*                                                       */
/* 14 Eingabefelder im Sinne von | KEY (Label) | VALUE / Textbox)
/* ----------------------------------------------------- */
.detailsTable tr td {
   width: 300px;
   height: 25px;
   padding-left: 5px;
}

   .detailsTable tr td:first-child {
      width: 150px;
      font-weight: bold;
}


/* ===================================================== */

/*                                                       */
/* 15 InfoBox
/* ----------------------------------------------------- */
.infoBox {
   width: 100%;
   height: 80px;
   background: none;
   font-size: large;
   font-weight: bold;
   line-height: 80px;
}


.infoBox.info {
   background-color: #66FF00;
   color: #005500;
}

.infoBox.error {
   background-color: #FFFF00;
   color: #FF0000;
}

.infoBox span {
   display: inline-block;
   vertical-align: middle;
}

.internalAlert {
   border-color: #721C24;
   border-style: solid;
   border-width: 2px;
   border-radius: 20px;
   background: #FFB6C1;
   color: #721C24;
   padding: 15px;
}

   .internalAlert a {
      color: #721C24;
      text-decoration: underline;
   }

.internalAlert a:hover {
   color: #721C24;
}
/* 1. Header Title */
.headerTitle {
   font-size: x-large; /* Schriftgrösse: sehr gross */
   color: #FFFFFF; /* Farbe Text: weiss         */
   background-color: #009EE0; /* Farbe Hintergrund: blau   */
   font-weight: bold; /* Schriftgewicht: fett      */
}

/* 2. Navigation Menu */
.navMenu {
   background-color: #F0F0F0; /* Hintergrundfarbe: Grau */
   padding: 10px; /* Innenabstand: 10px */
   font-size: 14px; /* Schriftgrösse: Standard */
   font-weight: bold; /* Fettdruck für Menüeinträge */
   text-align: center; /* Zentriere den Text */
   border-bottom: 2px solid #C0C0C0; /* Unterer Rand */
}

/* 3. Main Content */
.mainContent {
   font-family: Arial; /* Schriftart: Calibri      */
   font-size: 12px; /* Schriftgrösse: mittel    */
   color: #000000; /* Farbe Text: Schwarz      */
   background-color: #FFFFFF; /* Farbe Hintergrund: Weiss */
   text-align: left; /* Textausrichtung: links   */
   margin: 0px; /* Abstand: keiner          */
   padding: 10px; /* Innenabstand für Inhalt */
   border: 1px solid #FFFFFF; /* Rand: Ja Linie weiss     */
}

/* 4. Footer Content */
.footerContent {
   background-color: #F0F0F0; /* Hintergrundfarbe: Hellgrau */
   color: #000000; /* Textfarbe: Schwarz */
   font-size: 12px; /* Schriftgrösse */
   text-align: center; /* Zentrierter Text */
   padding: 10px; /* Innenabstand */
   border-top: 2px solid #C0C0C0; /* Oberer Rand */
}

/* 1. Filter Section */
.filter-section {
   background-color: #F5F5F5; /* Hellgrauer Hintergrund für den Filterbereich */
   padding: 15px; /* Innenabstand für optische Trennung */
   border: 1px solid #E0E0E0; /* Leichte Umrandung */
   margin-bottom: 20px; /* Abstand unterhalb des Filterbereichs */
}

/* 2. Filter Group */
.filter-group {
   display: flex; /* Flexbox zur Anordnung der Filter nebeneinander */
   flex-wrap: wrap; /* Filter in die nächste Zeile umbrechen, falls Platz nicht ausreicht */
   gap: 10px; /* Abstand zwischen den Filterelementen */
   margin-bottom: 15px; /* Abstand unterhalb der Filtergruppe */
}

/* 3. Results Section */
.results-section {
   background-color: #FFFFFF; /* Weisser Hintergrund für die Ergebnisanzeige */
   padding: 20px; /* Innenabstand */
   border: 1px solid #D0D0D0; /* Leichte Umrandung für die Ergebnisse */
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatteneffekt */
   margin-top: 20px; /* Abstand über der Ergebnisanzeige */
}
.container {
   display: flex;
   justify-content: space-between; /* Platz zwischen den Elementen */
   align-items: flex-start; /* Elemente am oberen Rand ausrichten */
}

.gridview {
   width: 48%; /* Breite des GridView ebenfalls auf 48% setzen */
}
.flex-container {
   display: flex;
   width: 100%; /* Set the container width to 100% */
   align-items: flex-start; /* Align items to the start */
}

.tableAlternate {
   width: 100%; /* Set width of the table */
}

.grid-container {
   flex: 1; /* Allow the GridView to take available space */
}

.results-panel {
   width: auto; /* Allow the table panel to size based on content */
   flex-shrink: 0;
}