/* ---------- Author: Rosemary Lockie, but compiled with the assitance of 
------ www.titanwolf.org/Network/q/087b17ad-6a9e-4c81-83d4-1bacf9efeda4/y
-------------- also www.w3schools.com/howto/howto_css_custom_checkbox.asp
----------------- and moderncss.dev/pure-css-custom-styled-radio-buttons/
-------------------------------- and css-tricks.com/the-checkbox-hack/  */
/*  ------------------------------------------------------------------  */
/*  - As of 4 Sep 2021 this document validates as CSS level 3 + SVG! -  */
/*  ----------- Yay for me (and for the references above!) -----------  */
.tabs {
	border: 0px;
	padding: 0px;
	width: 100%;
	border-bottom: groove black 3px;
	margin-bottom: 10px;
}
/*  -------------------- top, right, bottom, left --------------------  */
/*  ---------- or if 2 values only (top,bottom), (left,right) --------  */
.tabs td {
	padding: 6px 0px 0px 3px;
	width: 25%; 
}
.container {
	cursor: pointer;
	display: block;
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	overflow: hidden;
/*  ------ set this to the same width as the checkbox or button ------  */
	padding-left: 45px;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*  ------------- hide the browser's default radio button ------------  */
.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.checkmark {
	position: absolute;
	top: 0px;
	left: 0;
	padding-top: 6px;
	padding-bottom: 8px;
	height: 25px;
	width: 45px;
	background-color: #e0e0e0;
	border-radius: 10px 0px 0px 0px;
/*	border-radius: 50%; <= makes it round - I don't want that ---------  */
}
/*  ----------- this pads the right hand side of the text ------------  */
/*  -- specific styling for the label class wasn't in the original ---  */
.label {
	display: block;
	padding-top: 6px;
	padding-right: 40px;
	padding-bottom: 7px;
	border-radius: 0px 10px 0px 0px;
	background-color: #e0e0e0;
}
.label:hover {
	background-color: #c0c0c0;
}
.container:hover input ~ .checkmark {
	background-color: #c0c0c0;
}
.container input:checked ~ .checkmark {
	background-color: #51c8e4;
}
.container input:checked ~ .checkmark+.label {
	color: white;
	background-color: #51c8e4;
}
/*  --------------- definitions of what happens 'after' --------------  */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.container input:checked ~ .checkmark:after {
	display: block;
}
/*  ------------------ this draws a checkmark (tick) -----------------  */
/*  ----- if it was intended to be a circle it would be different ----  */
.container .checkmark:after {
	left: 12px;
	top: 9px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
/*  -------- apparently there is no need of a -moz-transform ---------  */
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*  -------------- font bold red - qv wishful.css et al. -------------  */
/*  -------- but using the same 'red' as churchdb.css::.head1 --------  */
.fontred { color: #ff003b;; font-weight: bold }

/*  - custom tooltips: https://www.w3schools.com/css/css_tooltip.asp -  */
/*  -- needs :after and stuff to be selective - way too complicated --  */
/*  --------- otherwise they all show if one hovers over one ---------  */
/*  ------------ title attribute suffices for my purposes ------------  */