@media print{/*only put properties that have to be different in print than normaly*/
	.short_earnumber_highlight{
		background-color: initial !important;
	}
	.noprint{
		display: none !important;
	}
	
	@page{
		size: A4;
		margin: 0;
		font-size: 11px;
		overflow: visible;
		background: #FFF;
	}
}

@supports (zoom: 2){
	.zoom2x{
		zoom: 2;
	}
}

.table_row_id_col{
	max-width: 7vw;
}

.short_earnumber_highlight{
	font-weight: bold;
	background-color: #F7EAD3;
}

*{
	
	border: 0vw;
	margin: 0vw;
	padding: 0vw;


	
	font-family: Arial, Helvetica, sans-serif;
	
	
	
}

.query_param_selector_list_flex_container{
	display: flex;
	flex-wrap: wrap;
	
	text-align: center;
}

.query_param_selector_list_flex_member{
	flex: 25%;
	
	margin: 1em 0em;
}

.pedigree_table_data_p{
	text-align: center;
}
.pedigree_table, .pedigree_table_data {
	border: 1px solid black;
	border-collapse: collapse;
}

datalist{
	display: none;
}

html{
	font-size: 1.2em;
}

body{
	background-color: #F2DEBA;/*dutch white*/
}

.page_wrap{
	/*background-color: red;*/
	width: 100%;
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
	min-height: 100vh;
	text-align: center;
}

.header{
	background-color: #BACEF2;/*beau blue*/
	width: 100%;
	min-height: 7vh;
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
	
	display: flex;
}

.header_eamil_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: left;

}

.header_medical_in_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: center;
}

.header_medical_out_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: center;
}

.header_medical_edit_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: center;
}

.header_medical_definition_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: center;
}

.header_note_to_developer_button{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: center;
}

.header_bulk_event_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: center;
}

.header_logout_button_container{
	flex: 1;
	margin-top: 2vh;
	margin-bottom: 2vh;
	margin-right: 2vw;
	margin-left: 2vw;
	text-align: right;
}

.content{
	/*background-color: blue;*/
	
	display: flex;
	
	width: 100%;
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
}

.left_bar{
	/*background-color: yellow;*/
	
	flex: 1;
	max-width: 20vw;
	
	border: 0vw;
		border-right: 0.2vw solid black;
	margin: 0vw;
	padding: 0vw;
	
	
	
}

.active_archive_selector{
/*background-color: pink;*/
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
	padding-bottom: 1vw;
	padding-top: 0.5vw;
}

.active_archive_all_currently_selected_option{
	width: 3vw;
	height: 3vh;
	
	background-color: #8EE9A3;/*teal deer*/
	color: black;
	padding: 1vh 1vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	
	border-radius: 10px;
}

.active_archive_all_currently_selected_option:hover{
	width: 3vw;
	height: 3vh;
	
	background-color: #3fd963;/*this hex value is a modification(light/dark 74% => 55% w3schooll color picker) of the 'teal deer' color*/
	color: black;
	padding: 1vh 1vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	
	border-radius: 10px;
}

.active_archive_all_NOT_selected_option{
	width: 3vw;
	height: 3vh;
	
	background-color: #F2DEBA;
	color: black;
	padding: 1vh 1vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	
	border-radius: 10px;
}

.active_archive_all_NOT_selected_option:hover{
	width: 3vw;
	height: 3vh;
	
	background-color: #E7C27E;/*this hex value is a modification(light/dark 84% => 70% w3schooll color picker) of the 'dutch white' color*/
	color: black;
	padding: 1vh 1vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	
	border-radius: 10px;
}

.search_bar{
/*background-color: red;*/
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
}

.animal_list_wrap{
/*background-color: orange;*/
	max-width: 80vw;
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
}

.new_animal_button_container{

}

.new_animal_button{
	color: blue;
}

.member_of_animal_list_container{
/*background-color: grey;*/
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
	
	text-align: left;
}

.member_of_animal_list_link{
	font-size: 2vw;

	width: 5vw;
	height: 3vh;
	
	/*background-color: #F2DEBA;*//*this is tested AND found to be redundant because inharitance from body{}*/
	color: black;
	padding: 0.5vh 1vw;
	
	text-decoration: none;
	display: inline-block;
	
	border-radius: 5px;
}

.right_bar{
/*background-color: purple;*/
	
	flex: 4;
	max-width: 80vw;
	
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
}

.animal_data{
/*background-color: brown;*/
	border: 0vw;
		border-bottom: 0.2vw solid black;
	margin: 0vw;
	padding: 0vw;
	display: flex;
	max-width: 80vw;
	min-height: 30vh;
	font-size: 1.3em;
}

.animal_data_col1{
/*background-color: red;*/
	flex: 1;
	max-width: 40;
	text-align: left;
	margin-left: 0.5vw;
	
}

.event_insert_buttons_for_checkbox_selection{
	margin: 2em;
}

.bulk_event_buttons{
	margin: 1em;
	min-width: 10em;
	min-height: 2em;
}

.animal_data_buttons_container{
	margin-bottom: 1.5vh;/*this is correle]ated with animal_data_col2 and animal_data_col3 margin-top:*/
}

.edit_animal_button{
	color: blue;
	margin: 0.1vh 0.5vw;
	
}

.animal_data_col2{
/*background-color: blue;*/
	flex: 1;
	max-width: 40;
	text-align: left;
	margin-left: 0.5vw;
	margin-top: 2vh;/*this is correlated with animal_data_buttons_container margin-bottom:*/
}

.event_buttons_container{
	display: flex;
	max-width: 12vw;
}

.repro_buttons_container {
	flex: 1;
}

.repro_button {
	height: 3vh;
	width: 5vw;
	
	font-weight: bold;
	font-size: 0.8em;
}

.repro_button:hover {
	background-color: #BACEF2;
}

.template_buttons_container{
	flex: 1;
}

.template_button {
	height: 3vh;
	width: 5vw;
	
	font-weight: bold;
	font-size: 0.8em;
}

.template_button:hover {
	background-color: #BACEF2;
}

.note_and_short_note_container {
	text-align: left;
	margin: 3px;
	max-width: 80vw;
}

.animal_events_list_container{
/*background-color: gold;*/
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
}

.animal_events_list{
	
}

.bulk_event_button{
	margin-left: 1vw;
	text-align: left;
	
	color: blue;
}

/*-------------------------------------------------------------------------------------------------*/
/* Dropdown Button */
.dropbtn {
	background-color: #c0c0c0;
	color: black;
	padding: 16px;
	margin: 1vh 1vw 0vh 0vw;
	min-width: 10vw;
	font-weight: bold;
	font-size: 0.8em;
	border: none;
}

/* The  <div> - needed to position the dropdown content */
.event_list_style_selector {
	position: relative;
	/*display: inline-block;*/
	margin: 1vh 1vw;
	float: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #c0c0c0;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	
	font-size: 1.2em;
	text-align: center;
	/*transition: height .4s ease;*/
}

/* Links inside the dropdown */
.dropdown-content a{
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

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

.dropdown-content button{
	color: black;
	width: 10vw;
	min-height: 5vh;
	/*padding: 12px 16px;**/
	/*text-decoration: none;*/
	display: block;
}

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

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


/* Change the background color of the dropdown button when the dropdown content is shown */
.event_list_style_selector:hover .dropbtn {background-color: #808080;}
.template_buttons_container:hover .dropbtn {background-color: #808080;}
.repro_buttons_container:hover .dropbtn {background-color: #808080;}


/*--------------------------------------------------------------------------------------------*/
.events_table{
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
	
	width: 80vw;
}

table {
	border-collapse: collapse;
}

td, th{
	width: 16vw;
	border: 2px solid black;
	text-align: center;
}

.footer{
	background-color: grey;
	border: 0vw;
	margin: 0vw;
	padding: 0vw;
	
	width: 100%;
	height: 10vh;
}

.animal_list_earnumber_paragraph{
	display: inline;
}
.loader {
	position: fixed;
	display: none;
	z-index: 0;
	left: 50%;
	top: 50%;
	margin-top: -60px;
	margin-left: -60px;
	
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#popup{
	display: none;
	width: 80vw;
	height: 80vh;
	background-color: #8EE9A3;/*teal deer*/
	
	margin: 0px;
	padding: 1vh 1vw;
		border-radius: 20px;
	border: 0px;
	
	position: fixed;
	z-index: 0;
	left: 10vw;
	top: 10vh;
	
	text-align: left;
}