/* neues Design */

/* Importierte Schriften */
@font-face { font-family: "Roboto-Light"; src: url(./Roboto-Light.ttf);}
@font-face { font-family: "Roboto-Medium"; src: url(./Roboto-Medium.ttf);}
@font-face { font-family: "Roboto-Regular"; src: url(./Roboto-Regular.ttf);}
@font-face { font-family: "Raleway-Medium"; src: url(./Raleway-Medium.ttf);}


thead tr.aw
{ 
  position: sticky; 
  background:white;
}

thead tr.r1 { position: sticky; top: 0px; background:white}
thead tr.r2 { position: sticky; top: 18px;background:white}
thead tr.r2a { position: sticky; top: 18px}
thead tr.r3 { position: sticky; top: 36px}

H5 { margin:2px; }
H4 { margin:2px; }
H3 { margin:2px; }
H2 { margin:2px; }
H1 { margin:2px; }

/* Popup window with internal iframe */
div.popup_content
{
  position:relative;
  top:0px;
  left:0px;
}

div.help_content
{
  position:relative;
  top:0px;
  left:0px;
  height:147px;
}

div.popup_outer
{
  font-family: "Raleway-Medium";
  font-size: 14px;
  position:absolute;
  visibility:hidden;
  top:100px;
  left:100px;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  background-color:white;
}

div.popup_close
{
  position: absolute;
  right: -10px;
  top: -10px;
  background: white;
  border-radius: 10px;
}

div.help_size_button
{
  position: absolute;
  right: -10px;
  top: 170px;
  background: white;
  border-radius: 10px;
  cursor:
}

div.help_outer
{
  font-family: "Raleway-Medium";
  font-size: 14px;
  position:absolute;
  visibility:hidden;
  top:20px;
  left:500px;
  width:500px;
  height:180px;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  background-color:white;
}

div.popup_sub_content
{
  display:table;
}

div.popup_header
{
  background: #C3C3C3;
  color: white;
  padding:3px;
  border-radius:3px 3px 0px 0px;
  cursor:crosshair;
}

/* Einzeleigenschaften für diverse Sachen: */
.dimmed
{
  opacity:0.3;
}
.clickable
{
  cursor:pointer;
}

tr.row_clickable_white:hover
{
  background:#E8E8E8;
}

tr.row_clickable_gray_3:hover
{
  background:#E0E0E0;
}

tr.row_clickable_white
{
  background:white;
  cursor:pointer;
}

tr.row_clickable_gray_3
{
  background:#F0F0F0;
  cursor:pointer;
}


div.edit_w_buttons
{
  display: flex;
  align-items:center;
}
div.img_buttons
{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.img_button
{
  margin:3px;
  max-width:18px;
  max-height:18px;
}
td.rounded_top
{
  border-radius: 3px 3px 0px 0px;
}
td.rounded_bottom
{
  border-radius: 0px 0px 3px 3px;
}
td.rounded_left_top
{
  border-radius: 3px 0px 0px 0px;
}

td.rounded_right_top
{
  border-radius: 0px 3px 0px 0px;
}


/* Menüleiste links: */
nav.navigation
{
  position: fixed;
  left: 0px;
  top:0px;
  bottom:94px;
  width:220px;
  background:#567abd;
  overflow-y:auto;
  overflow-x:hidden;
}

ul.navi_ul
{
  margin:0px;
  padding-left:0px;
  list-style:none;
}

li.menu_sub0
{
  position:relative;
  width:220px;
  font-family:"Raleway-Medium";
  font-size:14px;
  font-weight:normal;
  color: white;
  text-align:center;
  padding-bottom:2px;
  padding-top:2px;
}
li.menu_hidden
{
  visibility:hidden;
  height:0px;
}

div.menu_sub
{
}
div.menu_sub0
{
  position:relative;
  font-family:"Raleway-Medium";
  font-size:14px;
  font-weight:normal;
  color: white;
  text-align:left;
  padding-left:10px;
  padding-top:3px;
  padding-bottom:3px;
}

li.menu_sub0:hover
{
  background:#47659D;
}

li.menu_indent2
{
  background:#01a89e;
  width:210px;
  Left:10px;
}
li.menu_indent4
{
  background:#f1bb40;
  width:200px;
  Left:20px;
}
li.menu_indent6
{
  background:#fa690a;
  width:190px;
  Left:30px;
}
li.menu_selected
{
  background:#38507d;
}

div.navigation_brand
{
  font-family: "Raleway-Medium";
  font-size: 10px;
  text-align: center;
  width: 220px;
  color: white;
  padding-bottom: 0px;
  background: #567abd;
  position: fixed;
  left: 0px;
  height: 70px;
  bottom: 21px;
  padding-top: 3px;
}

div.navigation_title
{
  font-family: "Raleway-Medium";
  font-size: 10px;
  text-align: center;
  width: 220px;
  color: white;
  padding-bottom: 0px;
  background: #567abd;
  position: fixed;
  left: 0px;
  height: 18px;
  bottom: 0px;
  padding-top: 3px;
}

div.main_content
{
  position:fixed;
  top:30px;
  bottom:0px;
  left:0px;
  right:0px;
  overflow-y:auto;
  overflow-x:auto;
}

div.main_iframe
{
  position:fixed;
  left:220px;
  top:0px;
  right:0px;
  bottom:0px;
}

div.opt_upper_iframe
{
  position:fixed;
  left:220px;
  top:0px;
  right:0px;
  bottom:0px;
  visibility:hidden;
}

/* Drop Down Liste */
select {
  -moz-appearance: none;
  font-family:Roboto-Regular;
  font-size:12px;
  appearance: auto;
  border-radius: 5px;
  border-width:1px;
  padding: 2px;
  background:white;
}
option {
  background:white;
  color:black;
}
option:checked {
  background: #567abd;
  color: white;
}


input.edit
{
  -moz-appearance: none;
  font-size:12px;
  appearance: auto;
  border-radius: 5px;
  padding: 2px;
  border-width:1px;
}

input.edit_left
{
  border-radius: 5px 0px 0px 5px;
}

input.edit_with_wotag
{
  -moz-appearance: none;
  font-size:12px;
  appearance: auto;
  border-radius: 0px 5px 5px 0px;
  padding: 2px;
  border-width:1px;
}

input.edit_wotag
{
  -moz-appearance: none;
  font-size:12px;
  appearance: auto;
  border-radius: 5px 0px 0px 5px;
  padding: 2px;
  border-width:1px;
  width:32px;
  text-align:right;
}

input.button
{
  -moz-appearance: none;
  font-family:Roboto-Regular;
  font-size:12px;
  appearance: auto;
  border-radius: 5px;
  padding: 3px;
  background:#38507d;
  color:white;
  border-width:0px;
}

div.circle_14
{
  border-radius: 8px;
  border-width: 0px;
  border-color: grey;
  height: 14px;
  width: 14px;
  border-style: none;
}

body
{
 font-family:Roboto-Light;
}
td,tr,th,a
{
  font-size:12px;
}

div.menu_button
{
  background:#567abd;
  font-size:12px;
  color:white;
  float:left;
  padding:3px;
  padding-left:5px;
  padding-right:5px;
  margin-right: 3px;
  border-radius: 5px;
}

.button
{
  background:#567abd;
  font-size:12px;
  color:white;
  float:left;
  padding:3px;
  padding-left:5px;
  padding-right:5px;
  margin-right: 3px;
}

.button_std
{
  border-radius: 5px;
}
div.button_right
{
  border-radius: 0px 5px 5px 0px;
}
div.button:hover
{
  background:#47659D;
}
div.menu_selected
{
  background:#38507d;
}

div.localmenu
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left:0px;
  top:0px;
  height: 30px;
  border: none;
  background:white;
  padding-left:5px;
}

div.title
{
  font-family: "Raleway-Medium";
  font-size:16px;
  color:#567abd;
  position: fixed;
  top:0px;
  height: 22px;
  right:0px;
  border: none;
  text-align:right;
  background:white;
  padding:5px 0px 0px 0px;
}

div.tableeditor_outer
{
  display: flex;
  justify-content:flex-start;
  align-items:flex-start;
  margin: 5px;
  position: fixed;
  left: 0px;
  right:0px;
  top:0px;
  bottom:0px;
  background:white;
  opacity:0.9;
  overflow-y:auto;
  overflow-x:auto;
}

tr.blackline
{
  height:1px;
  background-color:black;
}


table.employeeheader
{
  background-color:#ECECEC;
}

table.selectheader
{
  background-color:#ECECEC;
}

table.tableeditor
{
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 5px;
  margin:auto;
}

tr.tableeditor_header
{
  background: #C3C3C3;
  color: white;
  padding:3px;
}

td.tableeditor_header
{
  text-align:right;
  font-size:14px;
  padding:3px;
}

td.tableeditor
{
  padding:3px;
}

table.tabs_inner
{
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 5px;
  width:100%;
  height:30px;
  padding:5px;
}

div.tabs_header
{
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
  left:0px;
  top:0px;
  border: none;
  background:white;
  padding-left:5px;
}

div.tabs_button
{
  font-size: 12px;
  color: white;
  float: left;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 3px;
  border-radius: 5px 5px 0px 0px;
}

div.tabs_selected
{
  background:#38507d;
}
div.tabs_unselected
{
  background: #567abd;
}

table.status_groups
{
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
}

tr.status_header
{
  background: #C3C3C3;
  color: white;
}

td.status_header
{
  text-align:left;
  font-size:14px;
  padding:3px;
}

.status_item
{
  padding:1px;
  border-collapse: separate;
  border-radius: 5px;
  border-width:1px;
  border-color:white;
  border-style:solid;
  background-color:#DADADA;
}
table.std_framed
{
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 5px;
  width: auto;
  height: auto;
  padding: 5px;
  margin: 5px;
}

table.te_std
{
  width:100%;
}
table.std
{
  border-spacing: 0px;
  padding: 0px;
  margin: 0px;
}
table.std_blanc
{
  width: auto;
  height: auto;
  padding: 0px;
  margin: 5px;
}

table.tabs
{
  margin: 5px;
}



table.reportselect
{
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 5px;
  border-spacing: 0px;
  margin:5px;
}

tr.reportselect_header
{
  background: #C3C3C3;
  color: white;
  padding:3px;
}

td.reportselect_header
{
  text-align:center;
  font-size:14px;
  padding:3px;
}

td.reportselect
{
  padding:3px;
}

div.reportselect_menu
{
  display:flex;
  justify-content: center;
  align-items: center;
}

/* Kalender Fenster: */
div.calendar_outer
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  right:0px;
  top:0px;
  height:100%;
  background:lightgrey;
  opacity:0.9;
  visibility:hidden;
}

div.calendar_inner
{
  display: flex;
  font-family:Roboto-Regular;
  font-size:16px;
  position: fixed;
  width:300px;
  min-height:300px;
  background-color:white;
  border-collapse: separate;
  border:1px solid black;
  border-radius: 10px;
  justify-content:center;
  align-items:flex-start;
  padding:10px;
}

div.timeselector_inner
{
  display: flex;
  font-family:Roboto-Regular;
  font-size:16px;
  position: fixed;
  background-color:white;
  border-collapse: separate;
  border:3px solid black;
  border-radius: 10px;
  box-shadow: -12px 12px gray;
  justify-content:center;
  align-items:flex-start;
}

div.calendar_buttons
{
  font-family:Roboto-Regular;
  font-size:16px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  width:300px;
  height:300px;
  padding:10px;
}

td.timeselector_buttons
{
  padding-top:5px;
}

td.timeselector_value
{
  color: white;
  background: #38507d;
  border-radius: 8px;
}

td.timeselector
{
  font-family:Roboto-Regular;
  font-size:23px;
}

table.calendar_table
{
  font-family:Roboto-Regular;
  font-size:16px;
}

td.calendar_td_header
{
  font-family:Roboto-Medium;
  font-size:16px;
}

tr.calendar_inner
{
  height:15px;
}
table.calendar_inner
{
  border-spacing:0px;
  font-family:Roboto-Regular;
  font-size:12px;
}

td.calendar_header
{
  min-width:32px;
  height:32px;
  background-color:#C3C3C3;
  font-family:Roboto-Medium;
  padding:0px;
  border-style:solid;border-width:1px;border-color:white;
}

td.calendar_ul
{
  border-radius: 10px 0px 0px 0px;
}
td.calendar_ur
{
  border-radius: 0px 10px 0px 0px;
}
td.calendar_ll
{
  border-radius: 0px 0px 0px 10px;
}
td.calendar_lr
{
  border-radius: 0px 0px 10px 0px;
}

td.calendar_weekday
{
  background-color:#DADADA;
}

td.calendar_active_today {min-width:32px;height:32px;padding:0px;border-style:solid;border-width:1px;border-color:red;}
td.calendar_active_other {min-width:32px;height:32px;padding:0px;border-style:solid;border-width:1px;border-color:white;}
td.calendar_selected {background-color:#00a0f0;}

tr.auto_booking {opacity: 0.3;}

/* Buttons immer unten rechts: */
img.calendar_close
{
  position:relative;
  height:31px;
  width:31px;
  right:0px;
  bottom:0px;
  padding-left:10px;
}


div.std_msg_return
{
  position:fixed;
  right:0px;
  bottom:0px;
  height:3px;
  width:3px;
}

div.std_msg_outer
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  right:0px;
  top:0px;
  bottom:0px;
  background:white;
  opacity:0.9;
  overflow-y:auto;
  overflow-x:auto;
}

div.std_msg_box
{
  display: flex;
  font-family:Roboto-Regular;
  font-size:12px;
  position: fixed;
  width:auto;
  min-height:auto;
  background-color:white;
  border-collapse: separate;
  border:1px solid black;
  border-radius: 5px;
  padding:5px;
}

div.std_msg_box_info
{
  top: 5px;
  left:5px;
}

div.std_msg_content
{
}

div.std_msg_buttons
{
  position:relative;
  display:flex;
  align-items:end;
}

div.std_msg_info
{
}

div.std_msg_warning
{
  font-weight: bold;
  margin:2pt;
}

div.std_msg_question
{
}

div.std_msg_buttonrow
{
  display:flex;
  justify-content:flex-end;
}

div.std_msg_error
{
  font-weight: bold;
  color:red;
}

img.std_msg_close
{
  position:relative;
  height:16px;
  width:16px;
  right:0px;
  bottom:0px;
  padding-left:5px;
}




div.fs_msg
{
  width:100%;
  height:100%;
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.fs_msg_box
{
  font-family: Roboto-Regular;
  font-size: 12px;
  position: fixed;
  width: auto;
  height: auto;
  background-color: white;
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
}
div.fs_msg_content
{
  padding: 5px;
  justify-content:left;
  display:flex;
}
div.fs_msg_buttons
{
  padding-bottom: 5px;
  justify-content:right;
  display:flex;
}

img.std_led
{
  width:16px;
  height:16px;
  padding:2px;
}

img.std_led_small
{
  width:16px;
  height:16px;
  padding: 0px 2px 0px 0px;
}

a:hover { outline: 2px solid blue; outline-offset: -2px;}

div.edit    { float:left;}
div.text    { float:left; margin-top: 2px; margin-left: 4px; margin-right: 6px; }
div.buttonr  { float:right;}
div.editr    { float:right;}
div.textr    { float:right;}


.bgc_gray_0 {background-color:#D0D0D0;}
.bgc_gray_1 {background-color:#E0E0E0;}
.bgc_gray_2 {background-color:#E8E8E8;}
.bgc_gray_3 {background-color:#F0F0F0;}
.bgc_gray_4 {background-color:#F6F6F6;}
.bgc_white {background-color:#FFFFFF;}
.bgc_blue_0 {background-color:#80B0FF;}
.bgc_blue_1 {background-color:#CBE5FC;}
.bgc_blue_2 {background-color:#DFEFFF;}
.bgc_blue_3 {background-color:#EDF6ff;}
.bgc_blue_4 {background-color:#F4F8FC;}
.bgc_blue_idc {background-color:#0080FF;}
.bgc_button {background-color:#567abd;}
.bgc_popup_1 {background-color:#d0f2ff;}
.bgc_popup_2 {background-color:#00a0f0;}
.bgc_popup_3 {background-color:#f0faff;}
.bgc_popup_4 {background-color:#a0e5ff;}
td.split_line {background-color:#C0C0C0;height:0px;}
tr.split_line {background-color:#C0C0C0;height:0px;}

/* Jahreskalender Tabelle: */
/* low: ohne Wochenplan */
/* high: mit Wochenplan */
:root {
       --bh:20px;
       --fss:75%;
       --fsl:100%;
      }


td.jk_active_today {padding:0px;border-style:solid;border-width:1px;border-color:red;}
td.jk_active_other {padding:1px;}
td.jk_cursor {cursor:pointer;}
td.jk_high {min-width:calc(20px * 3 / 2);height:calc(20px * 3 / 2 + 2px);}
td.jk_low {min-width:calc(20px * 3 / 2);height:calc(20px + 2px);}

/* divs im Jahreskalender */
div.jk_outer_low {padding:0px;width:calc(20px * 3 / 2);height:20px;}
div.jk_outer_high {padding:0px;width:calc(20px * 3 / 2);height:calc(20px * 3 / 2);}
div.jk {position:absolute;text-align:center;}
div.jk_tr_red {top:0%;right:0%;width:66%;height:100%;background:url(./pictures/rot_ausruf.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_tr_orange {top:0%;right:0%;width:66%;height:100%;background:url(./pictures/orange_ausruf.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_tr_yellow {top:0%;right:0%;width:66%;height:100%;background:url(./pictures/gelb_ausruf.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_tr_green {top:0%;right:0%;width:50%;height:75%;background:url(./pictures/gruen_ausruf.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_tr_blue {top:0%;right:0%;width:50%;height:75%;background:url(./pictures/blau_ausruf.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_bl_yellow {bottom:0%;left:0%;width:50%;height:75%;background:url(./pictures/gelb_frage.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_br_green {bottom:0%;right:0%;width:50%;height:75%;background:url(./pictures/gruen_vertr.png);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_anw_big {top:5%;left:5%;width:90%;height:90%;background:url(./pictures/haken_big.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_anw_small {top:0%;left:0%;width:50%;height:50%;background:url(./pictures/haken.gif);background-size:contain;background-repeat:no-repeat;border:none}
div.jk_upper {padding:0%;width:100%;height:20px;}
div.jk_wp {top:66%;left:0%;width:100%;height:33%;font-size:75%;}
div.jk_fz {width:100%;height:100%;left:0%;top:0%;font-size:100%;}
div.jk_fzh1 {width:100%;height:50%;left:0%;top:0%;font-size:75%;}
div.jk_fzh2 {width:100%;height:50%;left:0%;top:50%;font-size:75%;}
div.jk_fzk {width:40%;height:60%;right:0%;bottom:0%;font-size:75%;}

/* Button innerhalb Auswertungen */
input.aw_button
{
  cursor:pointer;
  font-family:Roboto-Light;
  font-size:12px;
  background: #567abd;
  color: white;
  float: left;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  border-width: 0px;
  margin: 1px;
}