html, body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	color: #3f3f3f;
	max-width: 100%;
	height: 100%;
	background: #dddddd;
	font-size: 14px;
	text-align:center;
	overflow-x: hidden;
}
#copy {
	position: absolute;
	text-align :center;
	bottom: 10px;
	font-size: 60%;
	width: 200px;	
}
h2 {
	font-size: 200%;
}
a {
	color: #800000;
	text-decoration: none;
}
a:hover, button:hover {
	text-decoration: underline;
}
#logindiv {
	text-align: center;
	background: #bbbbbb;
	display: inline-block;
	margin-top: 10%;
	width: auto;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#logindivheader {
	background: #800000;
	color: white;
	text-align: left;
	padding: 15px;
	font-weight: bold;
}
.loginform {
	display: inline-block;
	text-align: left;
	padding: 50px;
}
#menu {
	
}
.submenu {
	color: #aaaaaa;
}
.zaznam1 {
	font-size: 70%;
}


button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: #800000; 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: none;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}




.calendartab {
	width: 80%;
	border: 1px solid #808080;
}
.calendartabday td{
	width: 200px;
}




table.minimalistBlack {
  border: 1px solid #aaaaaa;
  font-size: 90%;
  padding: 25px;
  text-align: left;
  border-collapse: collapse;
  background: white;
}
table.minimalistBlack td, table.minimalistBlack th {
  border: 1px solid #aaaaaa;
  padding: 5px 4px;
}
table.minimalistBlack tbody td {
  
}
table.minimalistBlack thead {
  background: #CFCFCF;
  border-bottom: 1px solid #aaaaaa;
}
table.minimalistBlack thead th {
 
  font-weight: bold;
  color: #000000;
  text-align: left;
}
table.minimalistBlack tfoot {
  
  font-weight: bold;
  color: #000000;
  border-top: 1px solid #aaaaaa;
}
table.minimalistBlack tfoot td {
  
}
.weekend {
	background: #dddddd;
}
.monthname {
	color: white;
	background: #800000;
	font-size: 130%;
	font-weight: bold;
	padding: 10px 5px;
	border: 1px solid #800000;
}








.info:hover .tooltip {
  color: red;
  visibility: visible;
  display: inline-block;
  opacity: 1;
  transition: opacity 1s;
  width: 0px;
  background: #000000;
  overflow: visible;
  font-size: 50%;
}
.tooltip {
  visibility: hidden;
  display: none;
  opacity: 0;
  transition: opacity 1s
}
}
.tooltip:hover {
  visibility: visible;
  display: inline;
}

.info {
    cursor: help
}











#header {
	padding: 15px 25px 0 25px;
	background: #d9d9d9;
	border-bottom: 1px solid #cccccc;
	margin: 0;
	position: relative;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
}
#logo {
	height: 40px;

}
#main {
	float: left;
	padding: 25px;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
}
#header #menu {
  display: none;
  padding-bottom: 25px;
}
#header a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  margin: 13px 15px;
  font-size: 250%;
}
#iconx {
	display: none;
}
#iconc {
	display: none;
}




@media only screen and (min-width: 768px) {
  #header {
  	padding: 25px 25px 0 25px;
    width: 230px;
	height: 100%;
	float: left;
	border-right: 1px solid #cccccc;
	box-sizing: border-box;
	margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px;
  }
  #logo {
	height: 50px;
	padding-top: 25px;

	}
	#header #menu {
  		display: block;
  		padding-bottom: 25px;
	}
	#header a.icon {
		display: none;
	}
	#main {
	width: auto;
	padding-left: 280px;
	}
	.container {
	overflow: hidden;
	height: 100%;
	position: fixed;
	}
}



.w3-teal {
	color:#fff !important;
	background-color:#800000 !important;
}
.w3-display-topright {
	position:absolute;
	right:0;
	top:0;
}
.w3-content {
	margin-left:auto;
	margin-right:auto;
}
.w3-content {
	max-width:980px;
}
.w3-modal {
	z-index:3;
	display:none;
	padding-top:100px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4);
}
.w3-modal-content {
	margin:auto;
	background-color:#fff;
	position:relative;
	padding:0;
	outline:0;
	width: 80%;
	max-width: 700px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.w3-container {
	padding:0.01em 16px;
}
.w3-button {
	border:none;
	display:inline-block;
	padding:8px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	font-size: 200%;
}
#id01, #id02 {
	display: none;
}