.titleJA              {font-family: droid sans; color: #333333; font-size: 24px; font-weight: bold;}
.newstextJA           {font-family: droid sans; font-size: 15px; color: #333333; text-align: left;}
.newstextJAcenter     {font-family: droid sans; font-size: 15px; color: #333333; text-align: center;}
.linkJA               {font-family: droid sans; color: #414952; font-size: 15px; font-weight: bold;text-decoration: underline;}
.link14JA             {font-family: droid sans; color: #0648FF; font-size: 14px; font-weight: bold; text-align: center; }
.linkRed             {font-family: droid sans; font-size: 14px; color: #FF0000; text-align: center; font-weight:bold;}
.linkBlue            {font-family: droid sans; font-size: 14px; color: #0648FF; text-align: center; font-weight:bold;}
.linkGreen           {font-family: droid sans; font-size: 14px; color: #08FD2D; text-align: center; font-weight:bold;}
.titleRed             {font-family: droid sans; color: #FF0000; font-size: 15px; font-weight: bold;}
.titleBlue            {font-family: droid sans; color: #0648FF; font-size: 15px; font-weight: bold;}
.titleGreen           {font-family: droid sans; color: #08FD2D; font-size: 15px; font-weight: bold;}
.titleBlack           {font-family: droid sans; color: #333333; font-size: 15px; font-weight: bold;}
.counterJA            {font-family: droid sans; color: #333333; font-size: 19px; font-weight: bold;}
.pagelinkJA           {font-family: droid sans; color: #FFFFFF; font-size: 15px; font-weight: bold;}
.currentpagelinkJA      {font-family: droid sans; color: #FFF700; font-size: 15px; font-weight: bold;}
.newstextRed            {font-family: droid sans; font-size: 11px; color: #FF0000; text-align: left;}
.newstextGreen          {font-family: droid sans; font-size: 11px; color: #08FD2D; text-align: left;}
.newstextBlue           {font-family: droid sans; font-size: 16px; color: #474e57; text-align: left; font-weight: bold;}
.newstextYellow         {font-family: droid sans; font-size: 11px; color: #FDF504; text-align: left;}
.newstextViolet         {font-family: droid sans; font-size: 16px; color: #610ab3; text-align: left;font-weight: bold;}
.titledays              {font-family: droid sans; color: #333333; font-size: 15px; font-weight: bold;}
.talktitle              {font-family: droid sans; font-size: 13px; color: #2762bc; text-align: left;}
.presenter              {font-family: droid sans; color: #0c3d86; font-size: 15px; font-weight: bold;}
.whitetext              {font-family: droid sans; color: #FFFFFF; font-size: 1px; font-weight: bold;}

table.ankuendigung {
 border-style:solid ;
 border-width:10px ;
 border-color:#e3f0f9 #e3f0f9 #e3f0f9 #e3f0f9 ;
 border-spacing:4px ;
 padding:3px ;
 margin:4px ;
 padding:0.25em 0 0.25em 0.3em;
 margin:0 0 1em 0;
 background-color:#f1f5f8;
 }

td.ankuendigung {
 border-style:solid ;
 border-width:5px ;
 border-color:#e3f0f9 #e3f0f9 #e3f0f9 #e3f0f9 ;
 }

th.ankuendigung {
 border-style:solid ;
 border-width:5px ;
 border-color:#e3f0f9 #e3f0f9 #e3f0f9 #e3f0f9 ;
 }

table.ankuendigung_int {
 border-style:solid ;
 border-width:0px ;
 border-color:#e3f0f9 #e3f0f9 #e3f0f9 #e3f0f9 ;
 border-spacing:0px ;
 padding:0px ;
 margin:0px ;
 background-color:#f1f5f8;
 }

td.ankuendigung_int {
 border-style:solid ;
 text-align: center;
 border-width:0px ;
 border-color:#e3f0f9 #e3f0f9 #e3f0f9 #e3f0f9 ;
 }

th.ankuendigung_int {
 border-style:solid ;
 border-width:0px ;
 border-color:#e3f0f9 #e3f0f9 #e3f0f9 #e3f0f9 ;
 text-align: center;
 }
/* The Modal (background) */
.loginbox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.loginbox-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 20%; /* Could be more or less, depending on screen size */
}

/* Full-width input fields */
.loginbox input[type=text], input[type=password], input[type=file] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.loginbox button {
  background-color: #5fAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.loginbox button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.loginbox-cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.loginbox-imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

.loginbox-imgcontainer img.avatar {
  width: 40%;
  border-radius: 50%;
}

.loginbox-container {
  padding: 16px;
}

.loginbox-container-cancelbtn {
  padding: 16px;
}

.loginbox-container-cancelbtn button {
  color: white;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.loginbox-container-cancelbtn button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.loginbox-container-cancelbtn button {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.loginbox-container span.psw {
  float: right;
  padding-top: 16px;
}


/* The Close Button (x) */
.loginbox-close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.loginbox-close:hover,
.loginbox-close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.loginbox-content animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

.pfeil-right {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-left: 16px solid #555;
	border-bottom: 8px solid transparent;
}

.pfeil-left {
	width: 0;
	height: 0;
	border-top:  8px solid transparent;
	border-right: 16px solid #555;
	border-bottom:  8px solid transparent;
}

.pfeil-up {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid transparent;
}

.pfeil-down {
        width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #555;
	border-bottom: 1px solid transparent;
}

/* Add a black background color to the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #2196F3;
  color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}

.topnav button {
  border: none; /* Remove borders */
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  cursor: pointer; /* Add a pointer cursor on mouse-over */
}

.topnav button.success {background-color: #4CAF50;} /* Green */
.topnav button.success:hover {background-color: #46a049;}

.topnav button.info {background-color: #2196F3; color: white;} /* Blue */
.topnav button.info:hover {background: #0b7dda;}

.topnav button.warning {background-color: #ff9800; color: white;} /* Orange */
.topnav button.warning:hover {background: #e68a00;}

.topnav button.danger {background-color: #f44336; color: white;} /* Red */
.topnav button.danger:hover {background: #da190b;}

.topnav button.default {background-color: #d7d7d7; color: black;} /* Gray */
.topnav button.default:hover {background: #ddd;}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.topnav sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Dropdown Button */
.topnav-dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.topnav-dropdown {
  overflow: hidden;
}

.topnav-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.topnav-dropdown-content p {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav-dropdown-content p:hover {
  background-color: #ddd;
}

.topnav-dropdown:hover .topnav-dropdown-content {
  display: block;
}

/* Change color of dropdown links on hover */
.topnav-dropdown-content p:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.topnav-dropdown:hover .topnav-dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.topnav-dropdown:hover .topnav-dropbtn {background-color: #3e8e41;}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}


#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable td {
  /* Add a bottom border to all table rows */
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

#myTable td:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #d1d1d1;
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #e1e1e1;
}
#myTable tr:nth-child(even) {
  background-color: #f2f2f2
}


#myTableHH {
  border-collapse: collapse; /* Collapse borders */
  width: 50%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#myTableHH th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

#myTableHH tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTableHH td {
  /* Add a bottom border to all table rows */
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

#myTableHH td:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #d1d1d1;
}

#myTableHH tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #e1e1e1;
}
#myTableHH tr:nth-child(even) {
  background-color: #f2f2f2
}

/* The Modal (background) */
.newmabox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box new MA */
.newmabox-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
}

/* Full-width input fields */
.newmabox input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.newmabox input[type=textarea] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  min-hight: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.newmabox button {
  background-color: #5fAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.newmabox button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.newmabox-cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.newmabox-imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

.newmabox-imgcontainer img.avatar {
  width: 60%;
  border-radius: 70%;
}

.newmabox-container {
  padding: 16px;
}

.newmabox-container-cancelbtn {
  padding: 16px;
}

.newmabox-container-cancelbtn button {
  color: white;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.newmabox-container-cancelbtn button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.newmabox-container-cancelbtn button {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

span.psw {
  float: right;
  padding-top: 16px;
}


/* The Close Button (x) */
.newmabox-close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.newmabox-close:hover,
.newmabox-close:focus {
  color: red;
  cursor: pointer;
}
.newmabox-50-l {
  width: 50%;
  float: left;
}
.newmabox-50-l input[type=text], input[type=password] {
  width: 90%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.newmabox-50-l button {
  background-color: #5fAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.newmabox-50-r {
  width: 50%;
  float: right;
}
.newmabox-50-r input[type=text], input[type=password] {
  width: 90%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.newmabox-50-r button {
  background-color: #5fAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Add Zoom Animation */
.newmabox-content animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

.dropbtn {
/*  background-color: #4CAF50;
  color: white;
*/
  padding: 10px;
  font-size: 18px;
  min-width: 100px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content p {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #f1f1f1;}