@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Mobile phones */
@media (max-width: 767px) {
	#myHeader + pre > table {
		margin-bottom: 20px;
	}
	#myHeader + pre td.cell-thumbnail, 
	#myHeader + pre td.cell-info {
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	#myHeader + pre td.cell-thumbnail {
		width: 100% !important;
	}
	#myHeader + pre td.cell-info span {
		justify-content: center;
	}
}

#sortBy {
	padding: 0 5px;
	background-color: #4CAF50; 
	border-radius: 3px;
	color: white;
	border-color: #0e582c; /* dark  Green */
	border-width: 1px 1px; 
	font-family: 'Roboto', sans-serif;
	box-shadow: 2px 4px 6px #8c8c8c;
	padding: 2px 2px;
}

#sortBy:hover {
  //background-color: #4ee38a; /* mint Green */
  background-color: #0e582c; /* dark  Green *///
  color: white;
}

button {
  background-color: #4CAF50; /* green */
  //border: none;
  color: white;
  padding: 4px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
  border-radius: 3px;
  border-color: #0e582c; /* dark  Green */
  border-width: 1px 1px; 
  //font-family: 'Work Sans', sans-serif  !important;
  font-family: 'Roboto', sans-serif;
  //font-weight: bold;
  //font-weight: 500;
  box-shadow: 2px 4px 6px #8c8c8c;


}

.buttonLarge {
	font-size: 14px;
	padding: 6px 6px;
	font-weight: 500;
}

button:hover {
  //background-color: #4ee38a; /* mint Green */
  background-color: #0e582c; /* dark  Green *///
  color: white;
}



/* Tooltip container */
.tooltip {
  /* position: relative;
  display: inline-block;
  */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: #0066cc;
  opacity: 0.80;
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
 
  position: absolute;
  margin-top: -30px;
  margin-left:-70px !important; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color:  #0066cc transparent transparent transparent;
  vertical-align: text-middle;
}

.enlarge {
	font-size:130%;
	font-weight: bold;
}

body {
	//max-width: max-content;
	max-width: none !important; 
	margin: auto;
}

table {
	width: 100%;
}


pre {
	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


img {
  border-radius: 10%;
  border: 5px solid transparent;

}

.cell-thumbnail {width:120px; text-align:center;}

a { text-decoration: none; }

a:hover {font-weight: 800;}				

.grey {color: #4d4d4d;}

.vertical-centre {
	display: flex; align-items: center; 
	}

.header, .footer{
	width: 100%;
	position: fixed;        
	background: #fff;
	padding: 0px 0;
	color: #071f4e;
	font-family: 'Work Sans', sans-serif  !important;
}
   
.header{
	top: 0;
	border-bottom: 5px solid #62b1f4;
}

.footer{
	bottom: 0;
}

.anchor { padding-top: 120px; }



.tickbox {
	width: auto;
/* shift checkbox down slightly */
	position: relative;
	top: 2px;
	/* https://www.w3docs.com/snippets/css/how-to-style-a-checkbox-with-css.html  */

	/* suggestion from https://www.fiverr.com/inbox/juliuzs */
/*	vertical-align: text-bottom; */
/* 	transform: scale(0.95);  */

}


.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  position: relative;
  top: 4px;
  box-shadow: 2px 4px 6px #8c8c8c;
  border-radius: 10px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
  border-radius: 10px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  //background: rgba(0,0,0,0.5);
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
  border-radius:50%;
}

input:checked + .slider {
  background-color: #0e582c;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0e582c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}