:root {
	--gray-bc: #c4c4c4;
	--gray-dd: #dddddd;
	--gray-ee: #f5f5f5;
	--gray-ed: #ededed;
}

* {
  padding:0; margin:0;
}

html, body {
  width: 100%;
  background-color: var(--gray-ee);
  font-family: tahoma;
}

body {
	min-height: 100vh;
}

a {
  color: #00529e; ;
  text-decoration:none;
}

a:visited {
  text-decoration:none;
  color: #00529e;
}

a:hover {
  background-color: var(--gray-ee);
}

hr {
	display: block; 
	height: 1px;
    border: 0; 
	border-top: 1px solid #bcbcbc;
    margin: auto; 
	padding: 0;
	width: 90%;
	max-width: 1400px;
}

input {
	text-align: center;
	max-width: 100%;
}

.head_logo {
	width: 150px;
	position: absolute;
	padding-top: 20px;
	padding-left: 40px;
	text-align: left;
}

.top {
	width: 100%;
	background-color: #00529e;
	padding-bottom: 1em;
}

.top_schrift {
	width: 96%;
	margin: auto;
	text-align: left;
	color: #fff;
	letter-spacing: 0.05em;
	padding-top: 20px;
}

.center {
	width: 100%;
	margin: auto;
}

.center_inner {
	text-align: center;
	width: 100%;
	margin: auto;
	padding-top: 20px;
	color: #000;
}

.info_message {
	width: fit-content;
    margin: auto;
    padding: 30px;
    max-width: 800px;
    background-color: var(--gray-dd);
	margin-bottom: 20px;
}

.navigation {
  text-align: center;
  margin: auto;
}

.navigation ul {
  list-style-type: none;
  margin: auto;
}

.navigation li {
  font-size: 1.5em;
  display: inline-block;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.navigation li:last-child {
  border-right: none;
}

.printSheets,
.printSheetsMenu {
	display: none;
	padding: 0 5px 0 5px !important;
}

.printSheetsCheckbox {
	width: 20px;
	height: 20px;
}

table {
	table-layout: auto !important;
	width: 100% !important;
	max-width: 1200px !important;
	border-collapse: separate;
	border-spacing: 0;
	margin: auto;
	text-decoration: none;
	font-weight: normal;
	white-space: normal;	
}

.table.overflow-x {
  overflow-x: auto;
  white-space: nowrap;
}
	
table th {
	padding: 10px 5px 10px 5px;
	font-weight: bold;
	text-align: center;
	border-top: 1px solid var(--gray-bc);
	border-bottom: 1px solid var(--gray-bc);
}

table td {
	padding: 5px;
	border: solid 1px var(--gray-bc);
	border-style: none none solid none;
}

table tr th:first-child { border-left: 1px solid var(--gray-bc); border-top-left-radius: 20px; }
table tr th:last-child { border-right: 1px solid var(--gray-bc); border-top-right-radius: 20px; }
table tr:last-child td:first-child { border-bottom-left-radius: 20px; }
table tr:last-child td:last-child { border-bottom-right-radius: 20px; }
table tr td:first-child { border-left: 1px solid var(--gray-bc); }
table tr td:last-child { border-right: 1px solid var(--gray-bc); }

table > tbody > tr {
  border-left: 1px solid var(--gray-bc);
}

.header_row {
	background-color: var(--gray-ed);
}

.hidden_row
{
	white-space: normal;
	text-align: left;
	display:none;
}

.hidden_row td
{
  padding-left: 40px;
  padding-top: 20px;
  text-decoration: none;
  font-weight: normal;
}

.hidden_row td a
{
  text-decoration: none;
  font-weight: bold;
  color: #00529e;
}

.hidden_row td a:visited
{
  text-decoration: none;
  font-weight: bold;
  color: #00529e;
}

.expanded_row
{
  text-align: left;
}

.expanded_row td
{
  padding-left: 40px;
  padding-top: 20px;
  text-decoration: none;
  font-weight: normal;
}

.hidden_row_member_appointment
{
  text-align: left;
  border-left: 1px solid var(--gray-bc);
  border-right: 1px solid var(--gray-bc);
  display:none;
}

.hidden_row_member_appointment td
{
  padding-top: 2em;
  padding-left: 1em;
  padding-bottom: 2em;
  text-decoration: none;
  font-weight: normal;
}

.appointments th
{
  border-bottom: 1px solid var(--gray-bc);
  font-weight: bold;
  text-align: center;
}

.appointments td {
  text-align: center;
  border-bottom: 1px solid var(--gray-bc);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 30px;
  padding-right: 30px;
}

#table_member_attendance_appointment
{
  border-collapse: collapse;
  max-width: 100%;
}

#table_member_attendance_appointment td {
  border-bottom: 1px dashed var(--gray-bc);
  padding-top: 10px;
  padding-bottom: 3px;
  padding-right: 30px;
  padding-left: 0px;
  text-align: left;
  white-space: nowrap;
}

.hidden_row_sheet_details
{
  text-align: left;
  border-bottom: 1px solid var(--gray-bc);
  border-left: 1px solid var(--gray-bc);
  border-right: 1px solid var(--gray-bc);
  display:none;
}

/*.hidden_row_sheet_details td
{
  max-width: 500px;
  word-break: normal;
  padding-top: 1em;
  padding-left: 30px;
  padding-bottom: 1em;
  text-decoration: none;
  font-weight: normal;
}

.table_sheet_files th
{
  border-bottom: 1px solid var(--gray-bc);
  font-weight: bold;
  text-align: center;
}*/

.table_sheet_files {
	margin-top: 10px !important;
	border-collapse: collapse !important;
}

.table_sheet_files td {
	text-align: center;
}

/*
.table_sheet_files td a
{
  text-decoration: none;
  font-weight: bold;
  color: #00529e;
}

.table_sheet_files td a:visited
{
  text-decoration: none;
  font-weight: bold;
  color: #00529e;
} */

input[type=submit] {
  padding:5px 15px;
  background:#00529e;
  color: #fff;
  font-weight: bold;
  border:0 none;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.new-record {
  margin:auto;
  border: 1px solid #000;
  padding: 20px;
}

.new-record .form-field {
  margin-top: 10px;
}

.new-record-link {
  width: 100%;
  margin: auto;
  text-align: center;
  font-size: 1.5em;
  padding-bottom: 40px;
}

.disable {
	pointer-events:none;
	background: lightgrey;
	color: grey;
}

@media only screen and (min-width: 980px){

  html, body {
    font-size: 1em;
  }

  .login,
  .login input {
    font-size: 2vw;
  }

  #nav-mobile {
    display: none;
  }

  #mobileNavBar {
    display: none;
  }

  .navigation {
    padding-bottom: 50px;
  }

  .logout {
    text-align: right;
    padding-bottom: 50px;
  }
  
  .new-record {
	width: 50%;
  }
}

@media only screen and (max-width: 980px){
  html, body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  .login,
  .login input {
    font-size: 6vw;
  }

  #mobileNavBar {
    display: block;
    position: fixed;
    background-color: #00529e;
    z-index: 99;
    font-size: 1.5em;
    text-align: center;
    width: 100%;
    top: 0;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }

  #mobileNavBar a.mobileNavIcon {
    color: white;
    margin: auto;
  }

  #mobileNavBar a:hover {
    background-color: transparent;
  }

  #mobileNavBar .fa-arrow-up {
    display: none;
  }

  #nav-mobile {
    display: none;
    background-color: var(--gray-dd);
    border-bottom: 15px solid #00529e;
  }

  .navigation {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: scroll;
  }

  .center_inner .navigation {
    display: none;
  }

  .top {
    margin-top: 2em;
  }
  .top_schrift {
    padding-top: 15px;
  }

  .top_schrift h2 {
    font-size: 1.5em;
  }

  .center_inner .logout {
    text-align: left;
    padding-bottom: 2em;
  }

  .navigation li {
    font-size: 1em;
    display: block;
    text-align: center;
    padding-top: 10px;
  }

  .navigation .germania-logo {
    display: none;
  }

  .table .headcol {
    position: sticky;
    background-color: transparent;
    width: 7em;
    left: -2px;
    overflow: hidden;
    white-space: nowrap; /* Don't forget this one */
    text-overflow: ellipsis;
    text-align: right;
	background-color: var(--gray-ed);
  }

  .table .headcol.song {
    width: 3em;
    min-width: 3em;
    max-width: 3em;
  }
}

@media only screen {
	.only-print {
	  display: none;
	}
}

@media only print {

  .only-print {
    display: block !important;
  }

  body, html {
    padding: 0 !important;
    margin: 0 !important;
  }

  table {
	table-layout: auto;
  }
  
  tr {
	
  }
  
  td, th {
	width: min-content;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    border: none !important;
	border-bottom: 1px solid var(--gray-bc) !important;
    font-size: 13px !important;
	overflow-wrap: break-word;
  }
 
  
  h1, h2, h3 {
    display: none;
  }
  
  .table.overflow-x {
	overflow-x: hidden;
  }

  .no-print {
    display: none !important;
  }

  .navigation {
    display: none;
  }

  .logout {
    display: none;
  }
  
  a {
	color: #000;
  }

}