/* Farben aus theater1.webp
#FBB900 rgb(251, 185, 0)    gold aus Stadtwappen
#005CAA rgb(0, 92, 170)     blau aus Stadtwappen
#FFFFFF rgb(255, 255, 255)  weiß aus Stadtwappen
#E30613 rgb(227, 6, 19)     Rot Logo Feuerwehr
*/

html, body {
  background:  rgb(0, 92, 170); /* blau aus Stadtwappen */
  color:#000000;
}

a:link, a:visited {
  color:                #E30613;
  text-decoration:      none;
  font-weight:          bold;
}

.page_title {
  position:             absolute;
  top:                  0px;
  width:                99vw;
  height:               85px;
  z-index:              0;
}

h1.title, a.title {
  color:                #FFFFFF;
  font-weight:          bold;
  text-decoration:      none;
  text-align:           center;
}

.page_topleft {
  position:             absolute;
  top:                  5px;
  color:                #FFFFFF;
  font-weight:          bold;
  text-align:           left;
  width:                200px;
  height:               80px;
  z-index:              0;
}

.page_topright {
  position:             absolute;
  top:                  5px;
  right:                10px;
  color:                #FFFFFF;
  font-weight:          bold;
  text-align:           right;
  width:                200px;
  height:               80px;
  z-index:              0;
}

.page_footer {
  position:             absolute;
  bottom:               0px;
  width:                99vw;
  height:               25px;
  color:                #FFFFFF;
  text-align:           right;
  font-size:            x-small;
  font-weight:          bold;
  z-index:              0;
}

.page_menu {
  position:             absolute;
  top:                  85px;
  color:                #FFFFFF;
  left:                 0px;
  width:                200px;
  z-index:              0;
}

.page_content {
  /* background-image:     url('/images/rlbs.jpg'); */
  background-size:      100% 100%;
  background-repeat: no-repeat;
  position:             absolute;
  top:                  85px;
  bottom:               25px;
  left:                 200px;
  right:                10px;
  width:                calc(100% - 210px);
  height:               calc(100% - 110px);
  overflow:             auto;
  z-index:              0;
}

img {
  vertical-align: middle;
}

table.login {
  background:           rgb(251, 185, 0);
  position:             absolute;
  top:                  20px;
  left:                 20px;
  overflow:             auto;
  border-spacing:       10px;
  z-index:              1;
}

table.login td {
  color:                #005CAA;
  vertical-align:       middle;
  text-align:           left;
  font-size:            large;
  font-weight:          bold;
  height: 50px;
}

input[type=password], input[type=username]{
  width:                100%;
  box-sizing:           border-box;
  font-size:            large;
}

table.login th {
  color:                #005CAA;  /*beige aus Ballistrade*/
  vertical-align:       middle;
  text-align:           left;
  font-size:            x-large;
  font-weight:          bold;
}

.welcome {
  background:           rgb(251, 185, 0, 0.8);  /*grau aus Balkon*/
  color:                #005CAA; /* blau aus Vorhang*/
  text-align:           center;
  border-radius:        50px;
  border:               #005CAA 5px solid;
  width:                40%;
  margin:               auto;
  top:                  100px;
  position:             relative;
  z-index:              1;
}

table.tab_content_level_1 {
  border:               0px;
  padding:              5px;
  border-spacing:       10px;
  width:                100%;
  font-size:            x-large;
  background:           rgb(255, 255, 255, 0.5);
}

table.tab_content_level_1 th {
  color:                #FFFFFF;
  vertical-align:       middle;
  text-align:           left;
  font-size:            xx-large;
  font-weight:          bold;
  background:            #005CAA;
}

table.tab_content_level_1 td {
  vertical-align:       top;
  color:                #005CAA;
}


.tab_content_level_2_pane {
  display:              inline-block;
  /* overflow-y:           auto; */
  width:                100%;
  aspect-ratio:         1980 / 1361;
}

table.tab_content_level_2 {
  border:               0px;
  border-spacing:       0px;
  width:                100%;
  background:           rgb(255, 255, 255, 0.8);
}
table.tab_content_level_2 th {
  color:                #005CAA;
  vertical-align:       middle;
  text-align:           left;
  font-weight:          bold;
  font-size:            x-large;
  background:           #FBB900;
  position:             sticky;
  top:                  10px;
}

table.tab_content_level_2 td {
  font-family:          monospace;
  font-size:            large;
  border-bottom:        2px solid #E30613;
  padding:              5px;
}

/* table.tab_content_level_2 tr:hover td {
  background:           #005CAA;
  color:                #FFFFFF;
} */

/* Tabelle FwES Personal Detail */
table.fwes_per_detail {
    border:               0px;
    border-spacing:       0px;
    width:                100%;
    background:           rgb(255, 255, 255, 0.8);
  }
table.fwes_per_detail th {
    color:                #005CAA;
    vertical-align:       middle;
    text-align:           left;
    font-weight:          bold;
    font-size:            x-large;
    background:           #FBB900;
    border-bottom:        2px solid #E30613;
    border-right:         1px solid #E30613;
    position:             sticky;
    top:                  10px;
    writing-mode:         vertical-rl;
    width:                4%;
  }

table.fwes_per_detail td {
    font-family:          monospace;
    font-size:            large;
    border-bottom:        1px solid #E30613;
    border-right:         1px solid #E30613;
    padding:              5px;
    vertical-align:       middle;
    text-align:           right;
    white-space: nowrap;

  }

table.fwes_per_detail tr:hover td {
    background:           #FBB900;
    color:                #FFFFFF;
  }

input[type="number"] {
    text-align:             right;
    width:                  5em;
    border:                 none;
    background:             none;
}


/* Tabelle Spindnummern */
table.spindnummern {
    border:               0px;
    border-spacing:       0px;
    width:                50%;
    background:           rgb(255, 255, 255, 0.8);
  }
table.spindnummern th {
    color:                #005CAA;
    vertical-align:       middle;
    text-align:           left;
    font-weight:          bold;
    font-size:            x-large;
    background:           #FBB900;
    border-bottom:        2px solid #E30613;
    position:             sticky;
    top:                  10px;
  }

table.spindnummern td {
    font-family:          monospace;
    font-size:            large;
    border-bottom:        1px solid #E30613;
    padding:              5px;
  }

table.spindnummern tr:hover td {
    background:           #FBB900;
    color:                #FFFFFF;
  }

/* Tabelle Prüfungen */
table.pruefungen {
    border:               0px;
    border-spacing:       0px;
    width:                100%;
    background:           rgb(255, 255, 255, 0.8);
  }
table.pruefungen th {
    color:                #005CAA;
    vertical-align:       middle;
    text-align:           center;
    font-weight:          bold;
    font-size:            x-large;
    background:           #FBB900;
    position:             sticky;
    top:                  10px;
  }

table.pruefungen td {
    font-family:          monospace;
    font-size:            large;
    border-bottom:        2px solid #E30613;
    padding:              5px;
  }
table.pruefungen td.overdue {
    font-family:          monospace;
    font-size:            large;
    font-weight:          bold;
    border-bottom:        2px solid #E30613;
    padding:              5px;
    background:           rgb(251, 185, 0, 0.4) ;
    color:                #E30613;
  }

table.pruefungen td.due {
    font-family:          monospace;
    font-size:            large;
    font-weight:          bold;
    border-bottom:        2px solid #E30613;
    padding:              5px;
    color:                #E30613;
  }

 table.pruefungen tr:hover td {
    background:           #005CAA;
    color:                #FFFFFF;
  }


table.klima {
    border:               0px;
    padding:              10px;
    border-spacing:       10px;
    width:                100%;
    font-size:            x-large;
    background:           rgb(255, 255, 255, 0.8);
  }

  table.klima th {
    color:                #FBB900;
    vertical-align:       middle;
    text-align:           center;
    padding:              10px;
    font-size:            x-large;
    font-weight:          bold;
    background:           rgb(0, 92, 170);
  }

  table.klima td {
    vertical-align:       middle;
    text-align:           center;
    color:                #005CAA;
  }

select {
    background:             none;
    border:                 none;
    width:                  100px;
    color:                 #005CAA;
    font-size:              x-large;
}

select.year {
    background:             #FBB900;
    border:                 none;
    width:                  100px;
    color:                 #005CAA;
    font-size:              large;
}

input[type=text] {
    width:                70%;
    padding:              12px 20px;
    margin:               8px 0;
    box-sizing:           border-box;
    font-size:            large;
  }

textarea {
	caret-color:         #005CAA;
    width:                68%;
    height:               15em;
    padding:              12px 20px;
    font-size:            large;
}


/* https://cssbuttoncreator.com/ */
.button {
  background: #122248;
  background-image: -webkit-linear-gradient(top, #eadbc7, #122248);
  background-image: -moz-linear-gradient(top, #eadbc7, #122248);
  background-image: -ms-linear-gradient(top, #eadbc7, #122248);
  background-image: -o-linear-gradient(top, #eadbc7, #122248);
  background-image: linear-gradient(to bottom, #eadbc7, #122248);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  font-family: monospace;
  width: 200px;
  font-size: 25px;
  font-weight: 100;
  padding: 0px;
  border-style: null;
  border-color: solid;
  border-width: 0;
  /* border-color-hover: solid;
  border-style-hover: null;
  border-width-hover: 0; */
  text-shadow: 1px 1px 20px #000000;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  margin-left: 20px;
}

.button:hover {
  background: #7b828d;
  background-image: -webkit-linear-gradient(top, #7b828d, #eadbc7);
  background-image: -moz-linear-gradient(top, #7b828d, #eadbc7);
  background-image: -ms-linear-gradient(top, #7b828d, #eadbc7);
  background-image: -o-linear-gradient(top, #7b828d, #eadbc7);
  background-image: linear-gradient(to bottom, #7b828d, #eadbc7);
  border-color: solid;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  text-decoration: none;
}

/*Style-Definition für die First-Level-Navigation*/
DIV.fstLevel a, DIV.fstLevel a:visited
{
TEXT-DECORATION: none;
display: inline-block;
WIDTH: 180px;
height: 30px;
PADDING: 3px;
MARGIN: 5Px;
FONT-FAMILY: verdana, arial, helvetica;
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
TEXT-ALIGN: left;
line-height: 30px;
COLOR: #E30613;
background-color: #FBB900; /*gold aus Stadtwappen*/
}
/*Style-Definition für die First-Level-Navigation bei Mouse-Over*/
DIV.fstLevel a:hover
{
COLOR: #E30613;
BACKGROUND-COLOR: #FFFFFF;
}
/*Style-Definition für die First-Level-Navigation bei aktivem Link*/
DIV.fstLevelActive a, DIV.fstLevelActive a:visited
{
TEXT-DECORATION: none;
DISPLAY: block;
WIDTH: 180px;
height: 30px;
PADDING: 3px;
MARGIN: 5Px;
FONT-FAMILY: verdana, arial, helvetica;
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
TEXT-ALIGN: left;
line-height: 30px;
TEXT-TRANSFORM:uppercase;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #E30613;
}

/*Style-Definition für die Second-Level-Navigation*/
DIV.secLevel a, DIV.secLevel a:visited
{
TEXT-DECORATION: none;
DISPLAY: block;
WIDTH: 180px;
height: 30px;
line-height: 30px;
PADDING: 3px;
MARGIN: 5Px;
FONT-FAMILY: verdana, arial, helvetica;
FONT-SIZE: 12px;
FONT-WEIGHT: normal;
TEXT-ALIGN: right;
COLOR: #005CAA;
BACKGROUND-COLOR: #FFFFFF;
}
/*Style-Definition für die Second-Level-Navigation bei Mouse-Over*/
DIV.secLevel a:hover
{
COLOR: #E30613;   /* Rot Logo Feuerwehr */
BACKGROUND-COLOR: #FBB900; /* Beige aus Balistrade */
}
/*Style-Definition für die Second-Level-Navigation bei aktivem Link*/
DIV.secLevelActive a, DIV.secLevelActive a:visited
{
TEXT-DECORATION: none;
DISPLAY: block;
WIDTH: 180px;
height: 30px;
line-height: 30px;
PADDING: 3px;
MARGIN: 5Px;
FONT-FAMILY: verdana, arial, helvetica;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-ALIGN: right;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #E30613;
}

/* Buttons für Sicherheitsdienst Ein-/Austragen */
.button_green {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  height: 40px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 200px;
  font-weight: 100;
  padding: 5px;
  background-color: #99C624;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.button_red, a.button_red {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  height: 40px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 200px;
  font-weight: 100;
  padding: 5px;
  background-color: #DD380D;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.button_blue, a.button_blue {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  height: 40px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 200px;
  font-weight: 100;
  padding: 5px;
  background-color: #005CAA;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

.button_grey, a.button_grey {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  height: 40px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 200px;
  font-weight: 100;
  padding: 5px;
  background-color: #868686;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
/* Small Buttons */
.button_small_gold {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 20px;
    color: #005CAA;
    font-family: Georgia;
    width: 150px;
    font-weight: 100;
    padding: 1px;
    background-color: #FBB900;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
  }
  .button_small_red {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 20px;
    color: #FFFFFF;
    font-family: Georgia;
    width: 150px;
    font-weight: 100;
    padding: 1px;
    background-color: #E30613;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
  }

  .button_small_grey {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 20px;
    color: #FFFFFF;
    font-family: Georgia;
    width: 150px;
    font-weight: 100;
    padding: 1px;
    background-color: #868686;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
  }

  .button_small_blue {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 20px;
    color: #FFFFFF;
    font-family: Georgia;
    width: 150px;
    font-weight: 100;
    padding: 1px;
    background-color: #005CAA;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
  }

/* Kleiderkammer */
input[type="number"].points {
  width:              75px;
  text-align:             right;
  font-family:        monospace;
  font-size:          xx-large;
  FONT-WEIGHT: bold;
  border:                 1px solid #FBB900;;

}

input[type=text].kleiderkammer, input[type=number].kleiderkammer, select.kleiderkammer {
  width:              100%;
  font-family:        monospace;
  font-size:          x-large;
  border:             none;
  background:       #FBB900;
  text-align:         right;
}
textarea.kleiderkammer {
  width: 20vw;
  height: 100px;
  font-family: monospace;
  font-size:            x-large;
  vertical-align:       top;
  background: #FBB900;
}

select.order {
  width:              350px;
  border:             2px solid #FBB900;
}

.kleiderkammer::-webkit-input-placeholder { /* WebKit browsers */
  font-size: medium;
}
.kleiderkammer:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-size: medium;
}
.kleiderkammer::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-size: medium;
}
.kleiderkammer:-ms-input-placeholder { /* Internet Explorer 10+ */
  font-size: medium;
}

input[type=checkbox].kleiderkammer  {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}
table.kleiderkammer {
  border:               0px;
  border-spacing:       10px;
  background:           rgb(255, 255, 255, 0.8);
}

table.kleiderkammer td {
  font-family:          monospace;
  font-size:            x-large;
  vertical-align:       middle;
  text-align:           right;
  white-space: nowrap;

}
.butten_item_del {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  height: 30px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 70px;
  font-weight: 75;
  padding: 1px;
  background-color: #E30613;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.hinweis_rot {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  height: 95px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 400px;
  font-weight: 100;
  padding: 10px;
  background-color: #7f0126;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.hinweis_blau {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  height: 95px;
  color: #FFFFFF;
  font-family: Georgia;
  width: 400px;
  font-weight: 100;
  padding: 10px;
  background-color: #005CAA;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

table.esseninfo {
  background: rgb(255, 255, 255, 0.8);
  border-spacing: 5px;
  padding: 5px;
  z-index:              5;
  width: 100%;
}

table.esseninfo th {
  background: #005CAA;
  color:#ffffff;
  font-size: large;
  font-weight:          bold;
  padding: 10px;
  white-space: nowrap;
}

table.esseninfo td {
  color:      #005CAA;
  font-size: large;
  white-space:  nowrap;
}

#MPFeuer_Historie {
  height: 500px;
  overflow-y: auto;
}