*{
	box-sizing:	border-box;
}

body{
	margin:				0;
	padding:			0;
	width:				100%;
	height:				100%;
	color:				#555;
	font-family:		monospace;
	
	z-index:			1;
	background-color:	#f9f9f9;
}

::-ms-reveal{
	display: none;
}

@media (max-width: 480px) {
	.form_label{
		flex-direction:	column;
	}
	
	.form_label label{
		width:	200px;
	}
	
	.info_data{
		margin-bottom:	20px;
	}
	
	.group_button{
		margin: 11px auto;
	}
	
	.button_container{
		flex-direction: column;
	}
	
/***********************************************************************
*** Popup
************************************************************************/
	.popup {
	    position: fixed;
	    display: block;
	    background-color: #f8f8f8;
	    border: 1px solid #555;
	    width: 80%;
	    left: 10%;
	    top: 15%;
	}
	
	.popup_header {
	    background-color: #555;
	    left: 10%;
	    top: 43px;
	    color: #f8f8f8;
	    font-size: 14pt;
	    text-align: left;
	    padding: 5px;
	}
/***********************************************************************/	

	.badge_accepted, .badge_declined {
	    width: 				114px;
	    height: 			114px;
	}
}

@media (min-width: 481px){
	.form_label{
		flex-direction:	row;
	}
	
	.group_button{
		margin: 11px;
	}

/***********************************************************************
*** Popup
************************************************************************/
	.popup {
	    position: fixed;
	    display: block;
	    background-color: #f8f8f8;
	    border: 1px solid #555;
	    width: 50%;
	    left: 25%;
	    top: 15%;
	}
	
	.popup_header {
	    background-color: #555;
	    left: 25%;
	    top: 43px;
	    color: #f8f8f8;
	    font-size: 14pt;
	    text-align: left;
	    padding: 5px;
	}
/***********************************************************************/	

	.badge_accepted, .badge_declined {
	    width: 				125px;
	    height: 			125px;
	}
}


.button{
	border:				none;
	background-color: 	#f8f8f8;
    color: 				#555;
    box-shadow: 		0px 0px 2px 2px rgb(0 0 0);
    margin-top:			20px;
    cursor:				pointer;
    
    font-size: 16pt;
    padding: 10px;
    font-weight: bold;
    border-radius: 23px;
}

.button:hover{
	background-color:	#eee;
}

.button_container{
	display: 	flex;
	flex-wrap:	wrap;
}

.content{
	border: 		1px solid #d3dce3;
	border-radius:	2px;
	display:		flex;
	flex-direction:	column;
	margin:			20px auto;
	max-width:		730px;
	position:		relative;
	text-align:		center;
	
	background-color:	#fff;
}

.content.scrollable{
	overflow-x:		scroll;
}

.link_small{
	font-size:		12pt;
	margin-bottom:	20px;
}

.login_header{
	text-align:	center;	
	margin:		20px;
}

.login_header h1{
	color:		#555;
	display:	inline;
}

.icon_h1_dark{
    padding-left: 		35px;
    margin-right: 		10px;
    background-image: 	url(../img/icon_calendar_555555.png);
    background-repeat: 	no-repeat;
    background-size: 	contain;
    display: 			inline;
}

.icon_h1_light{
    margin-right: 		10px;
    padding-left:		35px;
    background-image: 	url(../img/icon_calendar_f9f9f9.png);
    background-repeat: 	no-repeat;
    background-size: 	contain;
    display:			inline-block;
    color:				#f9f9f9;
}

.icon_pw_show{
	background-image:	url(../img/icon_show_pw_555555.png);
	background-repeat:	no-repeat;
	background-size:	contain;
	display:			inline-block;
	width:				50px;
	height:				50px;
	border:				1px solid;
}

.login{
	border: 		1px solid #d3dce3;
	border-radius:	2px;
	max-width:		730px;
	display:		flex;
	flex-direction:	column;
	margin:			0 auto;
	position:		relative;
	
	background-color:	#fff;
}

.login h1{
	text-align:	center;
	color:		#555;
	width:		100%;
	display: 	block;

    margin-block-start:		0.67em;
    margin-block-end: 		0.67em;
    margin-inline-start: 	0px;
    margin-inline-end: 		0px;
    font-weight: 			bold;
}

.back {
    color: 			#f9f9f9;
    font-weight: 	bold;
    font-size: 		12pt;
    vertical-align: middle;
    margin: 		25px 20px 0 0;
    width: 			75px;
    min-width:		26px;
}

.back:hover{
	cursor:	pointer;
}

nav{
	background-color:	#555;
	color:				#f8f9fa;
}

nav h1{
	margin:	0px;
}

#info_box{
	margin: 	0 20px;
    padding: 	5px;
    font-size: 	12pt;
    text-align:	justify;
}

.error{
	border: 3px solid #c51040;
    display: 	flex;
}

.success{
	border:	3px solid #0aa640;
    display: 	flex;
}

.info{
	border: 3px solid #c37221;
	display:	flex;
}

.hidden{
	display:	none;
}

.inlay_icon {
    width: 			20px;
    height:			20px;
    display: 		block;
    margin-right: 	5px;
}

.fill_link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.form{
	display:		flex;
	flex-direction:	column;
	margin:			20px;
	font-size:		16pt;
}

.form h3{
	font-size: 14pt;
    text-align: left;
    margin: 0;
}

input{
	background: none;
}

.form_description{
	font-size:		14pt;
	margin-bottom:	20px;
	text-align:		justify;
}

.form_input{
	display:		flex;
	flex-direction:	column;
}

.form_input input{
    font-size: 12pt;
    padding: 10px;
    margin-bottom: 20px;
}

.form_label{
	display:		flex;
	text-align:		left;
	gap:			10px;
}

.form_label_input{
	display:		flex;
	text-align:		left;
}

.form_label label {
    width: 110px;
}

.form_select {
    font-size: 12pt;
    padding: 10px;
    width: calc(100% - 40px);
    margin-top: 20px;
}

.form_button{
	border:				none;
	background-color: 	#555;
    color: 				#fff;
    box-shadow: 		0px 0px 2px 2px rgb(0 0 0);
    cursor:				pointer;
    
    font-size: 16pt;
    padding: 10px;
    font-weight: bold;
    border-radius: 23px;
}

.form_button:hover{
	background-color:	#777;
}

.pw_wrapper {
  display: flex;
  align-items: center; /* vertikal mittig */
  position: relative;
}

.pw_wrapper .form_input {
  flex: 1; /* nimmt den ganzen Platz */
}

.pw_wrapper input {
  width: 100%; /* Input soll die Breite ausfüllen */
}

.icon_pw_show {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  flex-shrink: 0; /* bleibt fix und schrumpft nicht */
  background-image: url(../img/icon_show_pw_555555.png);
  background-repeat: no-repeat;
  background-size: contain;
}


.group_button{
    border: 			2px solid #555;
    display: 			flex;
    justify-content:	center;
    align-items: 		center;
    font-size: 			16pt;
    color: 				#555;
    position:			relative;
    padding:			10px;
    flex-basis: 		220px;
    flex-grow: 			0;
    flex-shrink: 		0;
    aspect-ratio: 		1 / 1;
}

.group_button:hover{
	background-color:	#eee;
}

.group_button#add_group{
	font-size:	30pt;
}

#image{
	padding-left: 0px;
}

.link_button, .link_button:visited{
	text-decoration: 	none;
	font-size:			12pt;
	font-weight:		bold;
	cursor:				pointer;
	
	border:				none;
    border-radius: 		23px;
    box-shadow: 		0px 0px 2px 2px rgb(0 0 0);

	background-color: 	#f8f8f8;
    color: 				#555;
    
    padding: 			10px;
    margin:				10px 20px 20px;
}

.link_button:hover{
	background-color:	#eee;
}

.link_button_logout, .link_button_logout:visited{
	text-decoration: 	none;
	font-size:			12pt;
	font-weight:		bold;
	
	border:				none;
    border-radius: 		5px;
    box-shadow: 		0px 0px 2px 2px rgb(0 0 0);

	background-color: 	#f8f8f8;
    color: 				#555;
    
    padding: 			10px;
    margin:				10px auto 20px;
    width:				100px;
}

.link_button_logout:hover{
	background-color:	#eee;
}

.nav_button{
	width:		35px;
	height:		20px;
	position:	relative;
	cursor: 	pointer;
    margin:		auto;
    display:	none;
}

.nav_button div{
	height: 			4px;
    width: 				25px;
    background-color: 	#f9f9f9;
    position: 			absolute;
}

.nav_button .first{
 	top: 	0px;
 	left: 	5px;
}

.nav_button .second{
    top: 	8px;
    left: 	5px;
}

.nav_button .third{
    top: 	16px;
    left: 	5px;
}

.profile_button_light{
	background-image: 	url(../img/person_f9f9f9.png);
    background-repeat: 	no-repeat;
    background-size: 	contain;
    height: 			26px;
    width: 				26px;
    min-width:			26px;
    margin: 			auto 10px auto 69px;
    border: 			2px solid #F9F9F9;
    border-radius: 		13px;
    cursor:				pointer;
}

.text {
    font-size: 10pt;
}

.title{
	flex-grow:	1;
	text-align:	center;
}

.title a {
    text-decoration: 	none;
}

.header_logged_in{
	width:				100%;
    display: 			flex;
    flex-direction: 	column;
}

.wrap_header_dark{
	display:			flex;
	flex-direction:		row;
	width:				100%;
	background-color:	#555;
	padding:			10px;
}

.wrap_menus{
	position:	relative;
}

#profile_menu{
	border: 		1px solid #d3dce3;
	border-radius:	2px;
	width:			300px;
	display:		flex;
	flex-direction:	column;
	text-align:		center;
	position:		absolute;
	top:			-20px;
	right:			0px;
	visibility:		hidden;
	z-index:		100;
	
	background-color:	#fff;
}

#profile_menu h1{
	font-size:	16pt;
}

#profile_info .form_input{
	display: none;
}

.button_bar{
	display:		flex;
	flex-direction:	row;
}

.button_right{
	width: 				18px;
    height: 			18px;
    position:			absolute;
    right:				0;
   	margin:				18px 10px;
   	cursor:				pointer;
}

#create_button{
    font-size: 19pt;
    align-items: center;
    justify-content: center;
    display: flex;
}

#create_button_small{
    font-size: 			19pt;
    align-items: 		center;
    justify-content:	center;
    display: 			flex;
    margin: 			9px 5px;
    position:			relative;
    top:				-3px;
}

#edit_button {
    width: 				18px;
    height: 			18px;
    position:			absolute;
    right:				0;
    top:				0;
   	margin:				18px 10px;
   	cursor:				pointer;
    
    background-image:	url(../img/pencil_555555.png);
    background-repeat:	no-repeat;
    background-size:	contain;
}

#edit_button_small {
    width: 				18px;
    height: 			18px;
    position:			absolute;
    right:				0;
    top:				103px;
   	margin:				18px 10px;
   	cursor:				pointer;
    
    background-image:	url(../img/pencil_555555.png);
    background-repeat:	no-repeat;
    background-size:	contain;
}

#overview_button_small {
    width: 				18px;
    height: 			18px;
   	margin:				14px 5px;
   	cursor:				pointer;
   	border:				none;
    
    background-image:	url(../img/overview_555555.png);
    background-repeat:	no-repeat;
    background-size:	contain;
}

#delete_button {
    width: 				18px;
    height: 			18px;
    position:			absolute;
    right:				0;
    top:				0;
   	margin:				18px 10px;
   	cursor:				pointer;
    
    background-image:	url(../img/trash.png);
    background-repeat:	no-repeat;
    background-size:	contain;
}

#save_button, #cancel_button{
	display:	none;
}

/***********************************************************************
*** Group site
************************************************************************/
#edit_group_info{
	display:	none;
}

.headline{
	display:	flex;
}

.headline h3 {
    flex-grow: 1;
}

.edit_header {
	width:			94%;
    margin: 		-5px auto;
    font-size: 		14pt;
    text-align: 	center;
    font-weight: 	bold;
    font-family: 	monospace;
    color:			#555;
}

.rehearsal_time {
    margin: 	20px 0px;
    display: 	flex;
    font-size: 	16pt;
    gap: 		30px;
    flex-wrap: 	wrap;
}

.show_rehearsal_time{
	width:	100%;
}

.weekday{
	display:	flex;
}

.weekday label {
    margin-right: 	10px;
    display: 		block;
    width: 			110px;
    text-align: 	left;
}

.time{
	display:	flex;
}

.time label{
	margin-right:	10px;
	display:		block;
	width:			110px;
	text-align:		left;
}

.weekday label {
    margin-right: 10px;
}

.additional {
    font-weight: bold;
}

/***********************************************************************
*** Tab styling 
************************************************************************/
.tab {
  overflow: 		hidden;
  border: 			1px solid #ccc;
  background-color: #f8f8f8;
  color:			#555555;
  margin-top:		10px;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #eee;
}

.tab button.active {
  background-color: #555555;
  color:			#eee;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/***********************************************************************/

/***********************************************************************
*** Popup
************************************************************************/
.grey_out{
	width:				100%;
	height:				100%;
	background-color:	#555;
    position: 			fixed;
    left: 				0;
    top: 				0;
    opacity: 			0.6;
    display:			none;
}

.popup{
	display:	none;
	z-index:	100;
	max-height:	70%;
}

.popup_header{
	height: 32px;
}

.popup_body {
    height: calc(100% - 32px);
}

.popup_exit {
    background-color: 	#eee;
    width: 				21px;
    height: 			21px;
    text-align: 		center;
    color: 				#555;
    position: 			absolute;
    right: 				5px;
    top: 				5px;
}

.popup_exit:hover{
	background-color:	#ddd;
	cursor:				pointer;
}

#popup_edit {
    width: 				18px;
    height: 			18px;
    position:			absolute;
    right:				10px;
    top:				30px;
   	margin:				18px 10px;
   	cursor:				pointer;
   	border:				none;
    
    background-image:	url(../img/pencil_555555.png);
    background-repeat:	no-repeat;
    background-size:	contain;
}
/***********************************************************************/

/***********************************************************************
*** Terminliste
************************************************************************/
.appointment_list{
	padding:	0;
	margin: 10px 0;
}

.appointment_list_item {
    list-style-type: 	none;
    text-align: 		left;
    font-size: 			10pt;
    color: 				#555;
    display: 			flex;
    padding:			5px 0;
}

.appointment_list_item:hover{
	background-color: 	#eee;
}

.appointment_summary {
    text-align: 	left;
    font-size: 		12pt;
    border-bottom: 	1px solid #555;
    padding:		5px;
}

.appointment_text{
	flex-grow:	1;
	padding:	3px 5px;
	display:	flex;
}

.appointment_text label{
	position: 	relative;
    top: 		1px;
    display:	block;
    width:		100%;
}

.feedback.form_button {
    margin-top: 20px;
    display:	none;
}

#appointments_additional{
	display:	none;
}
/***********************************************************************/

/***********************************************************************
*** Mitgliederliste
************************************************************************/
.member_list{
	padding:	0;
}

.member_list_item {
    list-style-type: 	none;
    text-align: 		left;
    font-size: 			10pt;
    color: 				#555;
    display: 			flex;
    padding:			5px 0;
}

.member_list_item:hover{
	background-color: 	#eee;
}

.member_name{
	flex-grow:	1;
	padding:	3px 5px;
}

.appointment_button{
	display:	flex;
	gap:		5px;
}

.delete_button{
    background-image:	url(../img/trash.png);
    width: 				20px;
    height: 			20px;
    background-size: 	cover;
    border: 			none;
    background-color:	transparent;
}

.delete_button:hover{
	cursor:	pointer;
	width:	21px;
	height:	21px;
}

.edit_button{
	background-image:	url(../img/pencil_555555.png);
    width: 				19px;
    height: 			19px;
    background-size: 	cover;
    border: 			none;
    background-color:	transparent;
}

.edit_button:hover{
	cursor:	pointer;
	width:	20px;
	height:	20px;
}

.info_button{
    background-image:	url(../img/info_555.png);
    width: 				19px;
    height: 			19px;
    background-size: 	cover;
    border: 			none;
    background-color:	transparent;
}

.info_button:hover{
	cursor:	pointer;
	width:	20px;
	height:	20px;
}

.line_light{
	background-color: #fff;
}

.line_dark{
	background-color: #f9f9f9;
}
/***********************************************************************/

/***********************************************************************
*** Termin�bersicht
************************************************************************/
.appointment_overview{
	display: 		flex;
	flex-direction:	column;
	text-align:		left;
	padding:		10px 20px 20px 20px;
}

.appointment_overview h1 {
    margin: 0 auto 10px;
    font-size: 18pt;
}

.appointment_overview h2{
	margin:	10px 0;	
}

.appointment_overview p{
	margin:		10px 0;
	font-size:	12pt;
}
/***********************************************************************/

/***********************************************************************
*** R�ckmeldungs�bersicht
************************************************************************/
.conf_overview{
	border:			1px solid black;
	margin: 		20px;
	width:			1px;
}

.conf_overview th{
	border:			1px solid black;
	font-weight:	bold;
	min-width:	35px;
	width:		35px;
	max-width:	35px;
}

.conf_overview td{
	border:		1px solid black;
	min-width:	20px;
	width:		20px;
	max-width:	20px;
}

.conf_overview td.name_col, .conf_overview th.name_col{
	min-width:	150px;
	width:		150px;
	max-width:	150px;
}

.sum_line{
	font-weight:	bold;
}

.positive{
	background-color:	lightgreen;
}

.negative{
	background-color:	lightpink;
}

.none{
	background-color:	lightgrey;
}