* {
	box-sizing: border-box;
}

html, body {
	background-color: white;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: "Lato", Arial, Helvetica, sans-serif;
}

label, input, button, select {
	font-family: Arial;
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.1em;
    outline: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

button:focus {
	background-color: lightblue;
	outline-width: 1px;
	outline-style: solid;
	outline-offset: 2px;
}

button.page-control { border:none; color:black }
button.page-control i { color:grey }

#hamburger {
	position:relative;
	display: block;
}
#hamburger i { color: grey }
#hamburger ul {
	position:absolute;
	background-color: white;
	/*width:100%;*/
	border: 1px solid black;
	box-shadow: 0 1px 8px 1px #888888;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
	padding: 10px;
}
#hamburger li {
	list-style-type: none;
	font-size: 1.2em;
	margin: 5px 0;
}
#hamburger a {
	display: block !important;
	text-decoration: none;
}
#hamburger a:hover {
	font-weight: bold;
	background-color: #f0f0f0;
}

input[type="radio"].hide {visibility:hidden;} /* hide input radio box */
input[type="radio"].hide:checked + label {background-color: green; color:white} /* alt highlighting */

input[type="checkbox"].hide {visibility:hidden;} /* hide input checkbox */
input[type="checkbox"].hide:checked + label {background-color: green; color:white} /* alt highlighting */

input[type="radio"]:checked+label {font-weight:bold}
 
.visible {display:inline-block}
.hidden {display:none !important}
.left {float:left}
.right {float:right}

/* after below */
.tooltip-ab:hover::after { 
	content: attr(data-tooltip);
	position: absolute;
	display: block;
	top: 1.8em;
	left: 50%;
	opacity: 0.85;
	background-color: #404040;
	color: white; 
	padding: 5px 10px;
	width:150px;
	border-radius: 10px;
	transform: translateX(-50%);
	z-index:1;
}
/* before above */
.tooltip-ba:hover::before {
	content: attr(data-tooltip);
	position: absolute;
	display: block;
	top: -1em;
	left: 50%;
	opacity: 0.85;
	background-color: #404040;
	color: white; 
	padding: 5px 10px;
	width:150px;
	border-radius: 10px;
	transform: translateX(-50%) translateY(-100%);
	z-index:1;
}

.tooltip-query {
	display:inline-block;
	cursor: pointer;
	color:blue;
}
.tooltip-scope {
	height:auto;
}
/* scope=container, exp=expandable when hovering over scope */
.tooltip-scope .tooltip-exp, .tooltip-query .tooltip-exp {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	position:absolute;
	padding:0;
	margin:0;
	left: 0;
	background-color: #404040;
	color: white; 
	max-height: 0px;
	visibility:hidden;
	transition: max-height 1s ease-in-out,visibility 0s 0.8s;
	border-radius: 10px;
	padding: 5px 10px;
	z-index:1;
}
.tooltip-scope:hover .tooltip-exp, .tooltip-query .tooltip-expvis {
	visibility:visible;
	max-height:100vh;
	transition: max-height 1s ease-in-out,visibility 0s 0s;
}
.tooltip-exp .txtclose {
	position:relative;
	display: block;
	border:none;
	background:none;
	text-align:center;
}
.tooltip-exp .txtclose::before {
	content: "close";
	color: yellow;
}
.recommended::after {
	content: " (recommended)";
	color: red;
	font-weight: bold;
}
#menu {
	position: relative;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%,
		rgba(0, 0, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
	/*color: white;*/
	/*box-shadow: 0 1px 8px 1px #888888;*/
	font-family: Arial, Helvetica, sans-serif;
	padding: 4px 1px;
	z-Index: 10;
}

#menu button {
	margin: 0;
	border: none;
	cursor: pointer;
	background: transparent
}

#menu button:focus {
	color: white
}

#menu button {
	font-size: 1em
}

#menu .partition {
	display:flex;
	width:100%;
}

#menu .partition .mnuleft {
	flex-grow:1;
	text-align: left;
}

#menu .partition .mnuright {
	flex-shrink:1;
	text-align: right;
}

#menu .container {
	display: inline;
	padding-right: 5px;
	margin: 5px;
	text-align: left;
}
#menu .item {
	position:relative;
	display: inline;
	padding: 0;
}
#menu .item button {
	background: transparent;
	padding: 0;
	color: white;
	/*background-color: black;*/
	vertical-align: middle;
	width: auto;
}
#menu .name {
	display: inline;
	padding: 0;
}
#menu .name i {
	margin-right: 2px;
	color: white;
}
#menu .name span {
	color: #d0d0d0;
}
#menu .drop {
	position:absolute;
	display: inline-block;
	padding: 2px;
	top: calc(1em + 8px);
	left: 0;
	background-color: white;
	color: black;
	box-shadow: 0 1px 8px 1px #888888;
	white-space: nowrap;
	max-height: calc(100vh - (100px + 2em));
	width: 200px;
	overflow-y: auto;
	overflow-x: visible;
}
#menu .drop.hidden {
	display: none;
}
#menu .drop p {
	font-size: 1em;
	margin:0;
	padding:0;
	border-bottom: 1px dotted #404040;
}
#menu .drop ul, #menu .drop li {
	font-size: 1em;
	margin:0;
	padding:0;
	list-style-type: none;
}
#menu .drop a {
	text-decoration: none;
}

#menu .alertable i {
	padding:4px;
	width:100%;
}

#menu .drop .optionbtn {
	/*display: block;*/
	border: none;
	color: #c0c0c0;
	width: 20px;
	opacity: 90%;
}
#menu .drop .optionbtn:hover {
	color: black;
}
#menu .drop ul {
	position:relative;
	/*border: 1px solid purple;*/
}
#menu .drop ul li {
	position:relative;
	/*border: 1px solid brown;*/
}
.drop .badge {
	position:relative;
	background-color: red;
	border-radius: 4px;
	color: white;
	font-size: 1rem;
	padding: 0 2px;
	margin-left:4px;
}

@supports (position: sticky ) or (position: -webkit-sticky ) or (position: -moz-sticky) or (position: -ms-sticky ) or (position: -o-sticky ) { 
	#menu {
		position: sticky;
		top:0;
	}
}

.txbadge {
	position: absolute;
	top: -4px;
	right: -4px;
	border-radius: 4px;
	font-size: 10px;
	padding: 2px 4px 2px 4px;
	z-index: 1;
}

.pop {
	/*color: #d0d0d0;*/
	cursor: pointer;
}
.pop:hover {
	color: #8080f0;
}
.bgpop:hover {
	background-color: #e7e7e7;
}


header {
	background-color: #404040;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

header .log {
	padding: 10px;
	float: right
}

header img {
	position: relative
}

.expanded {
}

page-heading {
	position: relative;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	top: calc(1em + 10px);
	max-height: 80px;
	overflow-y:hidden;
	box-shadow: 0 1px 8px 1px #888888;
	z-index:2;
}
page-heading.active,page-heading:hover  {
	background-color: white;
	max-height: none;
	overflow-y: visible;
	padding-bottom:10px;
}
.notification {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
.notification .badge {
	position: absolute;
	top: -8px;
	right: -4px;
	background-color: red;
	border-radius: 4px;
	font-size: 10px;
	color: white;
	padding: 2px 4px 2px 4px;
	z-index: 20;
}

header h1, header p {
	letter-spacing: 5px;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
}

h2 {
	width: 100%;
	top: 50%;
	left: 0;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
	color: black;
}

h2::before, h2::after {
	width: 50px;
	height: 50px;
	left: 50%;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	animation: buble 1s linear infinite alternate
}

h2::before {
	bottom: -100px
}

h2::after {
	bottom: -110px
}

.main-footer {
	display: flex;
	background-color: white;
	padding: 0 5px;
	max-height: 1em;
	font-size: 0.8rem;
	color: black;
	overflow:hidden;
}
.main-footer .copyright {
	flex-grow: 1;
}
.main-footer .links {
	flex-shrink: 1;
}
.main-footer .links div {
	position:relative;
	display:inline;
	padding: 0 5px;
}
.main-content {
	display: flex;
	flex-direction: row;
	background-color: white;
	padding: 0 1em;
}
.main-content.fxd {
	height: calc(100vh - (100px + 2em));
}

.main-content button {}
.main-content .left {text-align:left}
.main-content .right {text-align:right}
.main-content .expanded {display: inline; }
.main-content .floaty-left {float:left}
.main-content .floaty-right {float:right}

.main-content .fbcol {
	border: 1px solid black;
	background-color: white;
	width: 200px;
}

.fbcol.index {
	flex-shrink: 0;
}

.fbcol.main {
	height:100%;
	display: flex;
	flex-direction: column;
	flex-grow:1;
}
.fbcol.side {
	flex-grow: 0;
}

.fbcol.main footer {
	position: relative;
	display: block;
	/*height: 100px;*/
	border: 4px solid #f0f0f0;
	background: #f0f0f0;
	flex-grow:2;
}

.fbcol.main section {
	flex-grow: 1;
}
section.fxd {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 100px);
}

.emergentmenucontainer {
	display:none;
}
.emergentmenu {
    position: absolute;
    display: block;
    box-shadow: 0 1px 8px 1px #888888; 
    border: 1px solid black; 
    background-color: white;
    opacity: 100%;
    text-align: left;
    padding:5px;
	right:0;
    z-index:99;
    white-space: nowrap;
}
.emergentmenu ul {
	list-style-type: none;
	margin:0;
	padding:0;
}
.emergentmenu li {
	list-style-type: none;
	background-color: white;
	padding: 4px 0 !important;
}
.emergentmenu li span {
	color: grey;
	width: 2em;
}
.emergentmenu li:hover {
	background-color: #e0e0e0;
	color: white;
}
.emergentmenu li a {
	display:block;
	text-decoration: none;
	color: black;
}

.textarea {
	display: inline-block;
	background-color: white;
	color: black;
	width: 100%;
	overflow: hidden;
	resize: both;
	min-height: 40px;
	line-height: 20px;
	border: 1px solid #ccc;
	padding: 1px 6px;
	max-height: calc(100px - 2px);
	max-width: 100%;
	overflow-y: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-align: left;
	word-break: break-word;
}
.textarea[contenteditable]:empty::before {
    content: "Type here...";
    color: gray;
}

.card-container {
	position:relative;
	padding-bottom: 8px;
}
    
profile-container {
	display:flex; 
	flex-direction:column;
}
profile-container div {
	padding: 5px;
	align-self: auto;
}
profile-container .nopad {
	padding: 0;
}
profile-card {
	background-color: white;
	position: relative;
	display: flex;
	flex-direction: row;
	
	flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}
image-container {
	background-color:white;
	border:1px solid #808080;
	border-radius: 10px;
	overflow:hidden;
	
	order: 0;
    /*flex: 0 1 auto;*/
    align-self: center;
}
details-container {
	padding: 2px 5px;
	flex-grow: 1;
	font-size: 0.9em;
	line-height: 0.9em;
	
	order: 0;
    /*flex: 0 1 auto;*/
    align-self: flex-end;
}
details-container small {
	padding:0;
	margin:0;
	line-height: .8em;
}
options-container {
	flex-shrink: 1;
	white-space: nowrap;
	line-height:1.5em;
	
	order: 0;
    align-self: flex-start;
}

div.genderline { padding: Arial; margin: 0px; font-family: 0px; font-size: 9pt; font-weight: normal }
div.gender0   { background-color: #C0C0C0; font-weight: bold; }
div.gender1   { background-color: #DDEEFF; font-weight: bold; }
div.gender10   { background-color: #DDEEFF; font-weight: bold; }
div.gender11   { background-color: #DDEEFF; font-weight: bold; }
div.gender12   { background-color: #DDEEFF; font-weight: bold; }
div.gender2   { background-color: #FEDDFF; font-weight: bold; }
div.gender3   { background-color: #FEDDFF; font-weight: bold; }
div.gender31   { background-color: #FEDDFF; font-weight: bold; }
div.gender32   { background-color: #DDEEFF; font-weight: bold; }
div.gender33   { background-color: #EADDFF; font-weight: bold; }
div.gender34   { background-color: #EADDFF; font-weight: bold; }
div.gender4   { background-color: #FFF7DD; font-weight: bold; }
div.gender41   { background-color: #DDEEFF; font-weight: bold; }
div.gender42   { background-color: #FEDDFF; font-weight: bold; }
div.gender43   { background-color: #EADDFF; font-weight: bold; }
div.gender44   { background-color: #FEDDFF; font-weight: bold; }
div.gender45   { background-color: #FEDDFF; font-weight: bold; }
div.gender5   { background-color: #FFF7DD; font-weight: bold; }

[gender="Male"] { color: blue; }
[gender="Male"]:visited { color: #000080; }
[gender="Female"] {	color: #FF00FF;}
[gender="Female"]:visited { color: #FF0066; }
[gender="Trans"] {	color: #9900CC; }
[gender="Trans"]:visited { color: #660066; }
[gender="Transgendered"] {	color: #9900CC; }
[gender="Transgendered"]:visited { color: #660066; }
[gender="Couple"] {	color: #996600; }
[gender="Couple"]:visited {	color: #663300;}
[gender="Group"] {	color: #606060;}
[gender="Group"]:visited {	color: #333333;}

[genderbk="Male"] { background-color: #ADBECF; }
[genderbk="Female"] { background-color: #CFADCF; }
[genderbk="Trans"] { background-color: #CEADCF; }
[genderbk="Transgendered"] { background-color: #CEADCF; }
[genderbk="Couple"] { background-color: #CFC7AD; }
[genderbk="Group"] { background-color: #FFF7DD; }

[genderbk="Male"][lighten] { background-color: #DDEEFF; }
[genderbk="Female"][lighten] { background-color: #FFDDFF; }
[genderbk="Trans"][lighten] { background-color: #FEDDFF; }
[genderbk="Transgendered"][lighten] { background-color: #FEDDFF; }
[genderbk="Couple"][lighten] { background-color: #FFF7DD; }
[genderbk="Group"][lighten] { background-color: #e0e0e0; }

.options {
	display:none;
}
.options ul {
	
}
.options li {
	
}

[role="presentation"] {
	
}

@keyframes bg-highlight {
  0% {background-color:yellow; margin: 10px;}
  100% { background-color:transparent; margin: 0;}
}
.selectme {
	border-bottom: 1px dotted #c0c0c0;
}
.selectme:hover {
	cursor: pointer;
	background-color: #e0e0e0;
}
.selectme .hovervis {
	display:none;
}
.selectme:hover .hovervis {
	display:inline-block;
}

.subfooter {
	border-top: 1px dotted black;
}

.csrpoint {
	cursor: pointer;
}
.w0px {
	width:0;
}
.zineg1 {z-index:-1}
.zi0 {z-index:0}
.zi1 {z-index:1}
.zi10 {z-index:10}
.zi100 {z-index:100}
.zi1k {z-index:1000}
.zi10k {z-index:10000}
.zi100k {z-index:100000}
.zi1m {z-index:1000000}
.wm150px { width:calc(100% - 150px); }
.wm120px { width:calc(100% - 120px); }
.wm100px { width:calc(100% - 100px); }
.wm200px { width:calc(100% - 200px); }
.wm250px { width:calc(100% - 250px); }
.wm300px { width:calc(100% - 300px); }
.wm350px { width:calc(100% - 350px); }
.wm90px { width:calc(100% - 90px); }
.wm80px { width:calc(100% - 80px); }
.wm70px { width:calc(100% - 70px); }
.wm60px { width:calc(100% - 60px); }
.wm50px { width:calc(100% - 50px); }
.wm40px { width:calc(100% - 40px); }
.wm30px { width:calc(100% - 30px); }
.wm20px { width:calc(100% - 20px); }
.wm10px { width:calc(100% - 10px); }
.w100pc {
	width:100%;
}
.h100pc {
	height:100%;
}
.w90pc {
	width:90%;
}
.h90pc {
	height:90%;
}
.w50pc {
	width:50%;
}
.h50pc {
	height:50%;
}
.wauto {
	width:auto;
}

.lh1p1e {line-height:1.1em}
.lh1p1r {line-height:1.1rem}
.lh1p2e {line-height:1.2em}
.lh1p2r {line-height:1.2rem}
.lh1p3e {line-height:1.3em}
.lh1p3r {line-height:1.3rem}
.lh1p4e {line-height:1.4em}
.lh1p4r {line-height:1.4rem}
.lh1p5e {line-height:1.5em}
.lh1p5r {line-height:1.5rem}
.lh1p6e {line-height:1.6em}
.lh1p6r {line-height:1.6rem}
.lh1p7e {line-height:1.7em}
.lh1p7r {line-height:1.7rem}
.lh1p8e {line-height:1.8em}
.lh1p8r {line-height:1.8rem}
.lh1p9e {line-height:1.9em}
.lh1p9r {line-height:1.9rem}
.lh100pc {line-height:100%;}
.lh {line-height: 1em;}
.lh2 {line-height: 2.5em;}

.posf {
	position: fixed;
}
.posr {
	position: relative;
}
.posa {
	position: absolute;
}
.poss {
	position: static;
}
@supports (position: sticky ) or (position: -webkit-sticky ) or (position: -moz-sticky) or (position: -ms-sticky ) or (position: -o-sticky ) { 
	.sticky {
		position: relative;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		z-index:1;
	}
}

.dispn {
	display:none;
}
.dispb {
	display:block;
}
.dispi {
	display:inline;
}
.dispg {
	display:grid;
}
.dispf {
	display:flex;
}
.table {
	display:table;
}
.tr {
	display:table-row;
}
.td {
	display:table-cell;
}
.tr.simple .td:nth-child(1)
{
	width:100px;
	max-width:200px;
}
/*
.tr.simple .td:nth-child(2)
{
	width:auto;
}
*/
.dispib {
	display:inline-block;
}
.dispig {
	display:inline-grid;
}
.dispif {
	display:inline-flex;
}
.dispitb {
	display:inline-table;
}

/* alter colour on hover event */
.hvr-dk:hover { filter: brightness(75%) sepia(0.5) }

/* colour filters */
.cf50 { filter: brightness(50%); }
.cf60 { filter: brightness(60%); }
.cf70 { filter: brightness(70%); }
.cf80 { filter: brightness(80%); }
.cf90 { filter: brightness(90%); }
.cf110 { filter: brightness(110%); }
.cf120 { filter: brightness(120%); }
.cf130 { filter: brightness(130%); }
.cf140 { filter: brightness(140%); }
.cf150 { filter: brightness(150%); }

.clr-inh {color:inherit}
.clr-teal {
	color:#008080;
}	
.clr-red {
	color:red;
}	
.clr-ltred {
	color:#ffa0a0;
}	
.clr-dkred {
	color:ff4040;
}	
.clr-green {
	color:green;
}	
.clr-ltgreen {
	color:#a0ffa0;
}	
.clr-dkgreen {
	color:#006000;
}	
.clr-blue {
	color:blue;
}	
.clr-ltblue {
	color:#a0a0ff;
}	
.clr-dkblue {
	color:#000060;
}	
.clr-black {
	color:black;
}
.clr-white {
	color:white;
}	
.clr-yellow {
	color:yellow;
}	
.clr-grey {
	color:grey;
}	
.clr-ltgrey {
	color:#e0e0e0;
}	
.clr-dkgrey {
	color:#808080;
}	
.clr-pink {
	color:#ff80ff;
}	
.clr-ltpink {
	color:#ffa0ff;
}	
.clr-brown {
	color:brown;
}	
.clr-purple {
	color:purple;
}	
.clr-orange {
	color:orange;
}

/* border colours */
.bclr-teal {
	border-color:#008080;
}	
.bclr-red {
	border-color:red;
}	
.bclr-ltred {
	border-color:#ffa0a0;
}	
.bclr-dkred {
	border-color:ff4040;
}	
.bclr-green {
	border-color:green;
}	
.bclr-ltgreen {
	border-color:#a0ffa0;
}	
.bclr-dkgreen {
	border-color:#40ff40;
}	
.bclr-blue {
	border-color:blue;
}	
.bclr-ltblue {
	border-color:#a0a0ff;
}	
.bclr-dkblue {
	border-color:#4040ff;
}	
.bclr-black {
	border-color:black;
}
.bclr-white {
	border-color:white;
}	
.bclr-yellow {
	border-color:yellow;
}	
.bclr-grey {
	border-color:grey;
}	
.bclr-ltgrey {
	border-color:#e0e0e0;
}	
.bclr-dkgrey {
	border-color:#808080;
}	
.bclr-pink {
	border-color:#ff80ff;
}	
.bclr-ltpink {
	border-color:#ffa0ff;
}	
.bclr-brown {
	border-color:brown;
}	
.bclr-purple {
	border-color:purple;
}	

/* background colours */
.bgclr-none {
	background:none;
}	
.bgclr-teal {
	background-color:#008080;
}	
.bgclr-red {
	background-color:red;
}	
.bgclr-ltred {
	background-color:#ffa0a0;
}	
.bgclr-dkred {
	background-color:#ff4040;
}	
.bgclr-green {
	background-color:green;
}	
.bgclr-ltgreen {
	background-color:#a0ffa0;
}	
.bgclr-lime {
	background-color:greenyellow;
}
.bgclr-ltlime {
	background-color:#e0ffc0;
}
.bgclr-dkgreen {
	background-color:#40ff40;
}	
.bgclr-blue {
	background-color:#a0a0ff;
}	
.bgclr-ltblue {
	background-color:#a0a0ff;
}	
.bgclr-dkblue {
	background-color:#4040ff;
}	
.bgclr-black {
	background-color:black;
}
.bgclr-yellow {
	background-color:#ffffa0;
}	
.bgclr-white {
	background-color:white;
}	
.bgclr-grey {
	background-color:#c0c0c0;
}
.bgclr-ltgrey {
	background-color:#e0e0e0;
}
.bgclr-dkgrey {
	background-color:#a0a0a0;
}
.bgclr-pink {
	background-color:#ff80ff;
}	
.bgclr-ltpink {
	background-color:#ffa0ff;
}	
.bgclr-brown {
	background-color:brown;
}	
.bgclr-purple {
	background-color:purple;
}	
.bgclr-gold {
	background: repeating-radial-gradient(circle farthest-side at top left, lightyellow, khaki 15%, lightyellow 40%);
}	
.bg-blur {
	background-color: white;
	opacity: 0.8;
}
.bg-trans {
	opacity: 0.8;
}
.ow-any {
	overflow-wrap: anywhere;
}
.ow-bw {
	overflow-wrap: break-word;
}
.of-s {
	overflow:scroll;
}
.ofx-s {
	overflow-x:scroll;
}
.ofy-s {
	overflow-y:scroll;
}
.of-a {
	overflow:auto;
}
.ofx-a {
	overflow-x:auto;
}
.ofy-a {
	overflow-y:auto;
}
.of-h {
	overflow:hidden;
}
.ofx-h {
	overflow-x:hidden;
}
.ofy-h {
	overflow-y:hidden;
}
.of-v {
	overflow:visible;
}
.ofx-v {
	overflow-x:visible;
}
.ofy-v {
	overflow-y:visible;
}

.txof-e { text-overflow: ellipsis }

.mxw100 {max-width:calc(100px - 20px);}
.mxw200 {max-width:calc(200px - 20px);}
.mxw300 {max-width:calc(300px - 20px);}
.mxw100vw {max-width:100vw}
.mxh1em {max-height:1em}
.mxh1p1em {max-height:1.1em}
.mxh1p2em {max-height:1.2em}
.mxh1p3em {max-height:1.3em}
.mxh1p4em {max-height:1.4em}
.mxh1p5em {max-height:1.5em}
.mxh10px {max-height:10px}
.mxh20px {max-height:20px}
.mxh30px {max-height:30px}
.mxh40px {max-height:40px}
.mxh50px {max-height:50px}
.mxh60px {max-height:60px}
.mxh70px {max-height:70px}
.mxh80px {max-height:80px}
.mxh90px {max-height:90px}
.mxh100px {max-height:100px}

.mxw90pc {max-width:90%}
.mxw100pc {max-width:100%}

.mxh90pc {max-height:90%}
.mxh100pc {max-height:100%}

.mxh10vh {max-height:10vh}
.mxh15vh {max-height:15vh}
.mxh20vh {max-height:20vh}
.mxh25vh {max-height:25vh}
.mxh30vh {max-height:30vh}
.mxh35vh {max-height:35vh}
.mxh40vh {max-height:40vh}
.mxh45vh {max-height:45vh}
.mxh50vh {max-height:50vh}
.mxh55vh {max-height:55vh}
.mxh60vh {max-height:60vh}
.mxh65vh {max-height:65vh}
.mxh70vh {max-height:70vh}
.mxh75vh {max-height:75vh}
.mxh80vh {max-height:80vh}
.mxh85vh {max-height:85vh}
.mxh90vh {max-height:90vh}
.mxh95vh {max-height:95vh}
.mxh100vh {max-height:100vh}

.mnh10vh {min-height:10vh}
.mnh15vh {min-height:15vh}
.mnh20vh {min-height:20vh}
.mnh25vh {min-height:25vh}
.mnh30vh {min-height:30vh}
.mnh35vh {min-height:35vh}
.mnh40vh {min-height:40vh}
.mnh45vh {min-height:45vh}
.mnh50vh {min-height:50vh}
.mnh55vh {min-height:55vh}
.mnh60vh {min-height:60vh}
.mnh65vh {min-height:65vh}
.mnh70vh {min-height:70vh}
.mnh75vh {min-height:75vh}
.mnh80vh {min-height:80vh}
.mnh85vh {min-height:85vh}
.mnh90vh {min-height:90vh}
.mnh95vh {min-height:95vh}
.mnh100vh {min-height:100vh}


.t0 {top:0}
.b0 {bottom:0}
.l0 {left:0}
.r0 {right:0}

.flxwrap {
	flex-wrap: wrap;
}

@supports (backdrop-filter: blur(5px)) {
	.bg-blur {
		background: none;
		opacity: 1;
		backdrop-filter: blur(5px);
	}
}
.valgn-top {
	vertical-align: top;
}
.valgn-mid {
	vertical-align: middle;
}
.valgn-bot {
	vertical-align: bottom;
}
.algn-right {
	text-align:right;
}
.algn-left {
	text-align:left;
}
.algn-center {
	/* don't use in combo with algn-center, because the translations will be overridden */
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.algn-vert-center {
	/* don't use in combo with algn-center, because the translations will be overridden */
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.algn-center-xy {
	/* centre both x and y */
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.centre { text-align: center }

.fmono {font-family:monospace;}
.fb {font-weight:bold}
.fn {font-weight:normal}
.fi {font-style:italic}

.f16px {font-size:16px}
.f17px {font-size:17px}
.f18px {font-size:18px}
.f0p5e {font-size:0.5em}
.f0p75e {font-size:0.75em}
.f0p8e {font-size:0.8em}
.f0p9e {font-size:0.9em}
.f1p0e {font-size:1.0em}
.f1p1e {font-size:1.1em}
.f1p2e {font-size:1.2em}
.f1p3e {font-size:1.3em}
.f1p4e {font-size:1.4em}
.f1p5e {font-size:1.5em}
.f2p1e {font-size:2.0em}

.f0p5r {font-size:0.5rem}
.f0p75r {font-size:0.75rem}
.f0p8r {font-size:0.8rem}
.f0p9r {font-size:0.9rem}
.f1p0r {font-size:1.0rem}
.f1p1r {font-size:1.1rem}
.f1p2r {font-size:1.2rem}
.f1p3r {font-size:1.3rem}
.f1p4r {font-size:1.4rem}
.f1p5r {font-size:1.5rem}
.f2p1r {font-size:2.0rem}

.small {
	font-size: 0.8em;
}
.big {
	font-size: 1.3em;
}
.huge {
	font-size: 24px;
}
.txt {
	font-size: inherit;
}
.trim {
	display:inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.obscure {
	-webkit-text-security: disc;
	-moz-text-security: disc; 
	text-security: disc;
}

.alias {
	display:inline-block;
	max-width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.unread {
	color: white;
	background-color:red;
	font-size: 0.9em;
	font-weight:bold;
	border-radius: 5px;
	padding:0 3px;
}
.unread::after {
	content:'new';
}
.frame {
	border: 1px solid black;
	overflow:hidden;
	width: 90px;
	height: 90px; 
	max-width: 90px;
	max-height: 90px; 
}
img.gallery {
	display:block;
	object-fit: cover;
	border:none;
}
img.gallery.teensy {
	width: 20px;
	height: 20px; 
	max-width: 20px;
	max-height: 20px; 
}
img.gallery.tiny {
	width: 30px;
	height: 30px; 
	max-width: 30px;
	max-height: 30px; 
}
img.gallery.small {
	width: 60px;
	height: 60px; 
	max-width: 60px;
	max-height: 60px; 
}
img.gallery.average {
	width: 90px;
	height: 90px; 
	max-width: 90px;
	max-height: 90px; 
}
img.gallery.large {
	width: 180px;
	height: 180px; 
	max-width: 180px;
	max-height: 180px; 
}
img.gallery.super {
	width: 400px;
	height: 400px; 
	max-width: 400px;
	max-height: 400px; 
}
img.gallery.mega {
	width: 800px;
	height: 800px; 
	max-width: 800px;
	max-height: 800px; 
}
ul.nolist,ul.nolist li {
	list-style: none;
	list-style-type:none;
}
a.nounder {
	text-decoration:none;
}

.extlinkItem {position:relative;display:block;margin:2px;text-align:left;padding:2px;background-color:#e0e0e0;}
.extlinkItem .pic {position:relative;display:inline-block;width:30px;max-height: 30px;overflow:hidden;}
.extlinkItem .pic img {background-color: white;max-height: 30px;object-fit: cover;border:none;}
.extlinkItem .pic iframe {background-color: white;border:none;position: absolute;top:0;left: 0;width: 100%;height: 100%;}
.extlinkItem .pic video {background-color: white;border:none;position: absolute;top:0;left: 0;width: 100%;height: 100%;}
.extlinkItem .link {position:relative;display:inline-block;width: calc(100% - 31px);padding-left:5px}
.extlinkItem .link a {max-width:100%;overflow-wrap:break-word;}

collection {display: block; position: relative; width:100%; margin:5px 0;}
collection .photo {display: inline-block; width: 230px; overflow: hidden; position: relative;overflow-wrap:break-word;}
collection .video {display: inline-block; width: 230px; overflow: hidden; position: relative;overflow-wrap:break-word;}
collection .title {overflow:hidden; max-height:1.2em;}
collection .fauxlink {display: inline-block; padding-right: 5px; padding-left: 5px}
.fauxlink {
	text-decoration:underline solid #8080ff;
	background-color: #f0f0f0;
	padding-right: 5px; padding-left: 5px
}
.fauxlink:hover {
	background-color: #808080;
	color: blue;
}
.fauxlink:active {
	background-color: #000000;
	color: white;
}
.rmarg5 {margin-right:5px;}
.rmarg10 {margin-right:10px;}
.rmarg20 {margin-right:20px;}
.lmarg5 {margin-left:5px;}
.lmarg10 {margin-left:10px;}
.lmarg20 {margin-left:20px;}

.marg5pc {margin:5%;}
.marg10pc {margin:10%;}
.marg0 {margin:0;}
.marg3 {margin:3px;}
.marg5 {margin:5px;}
.marg10 {margin:10px;}
.marg20 {margin:20px;}
.pad0 {padding:0;}
.pad3 {padding:3px;}
.pad5pc {padding:5%;}
.pad10pc {padding:10%;}
.pad5 {padding:5px;}
.pad8 {padding:8px;}
.pad10 {padding:10px;}
.pad20 {padding:20px;}
.rpad3 {padding-right:3px;}
.lpad3 {padding-left:3px;}
.rpad5 {padding-right:5px;}
.lpad5 {padding-left:5px;}
.rpad10 {padding-right:10px;}
.lpad10 {padding-left:10px;}
.rpad20 {padding-right:20px;}
.lpad20 {padding-left:20px;}
.bspc0 {padding-top:0;}
.bspc3 {padding-top:3px;}
.bspc5 {padding-top:5px;}
.bspc10 {padding-top:10px;}
.aspc0 {padding-bottom:0;}
.aspc3 {padding-bottom:3px;}
.aspc5 {padding-bottom:5px;}
.aspc10 {padding-bottom:10px;}
.tgap3 {margin-top:3px;}
.tgap5 {margin-top:5px;}
.bgap3 {margin-bottom:3px;}
.bgap5 {margin-bottom:5px;}
.lgap5 {margin-left:5px;}
.rgap5 {margin-right:5px;}
.tgap10 {margin-top:10px;}
.bgap10 {margin-bottom:10px;}
.lgap10 {margin-left:10px;}
.rgap10 {margin-right:10px;}

.box0 {border-width: 0}
.box1 {border-width: 1px}
.box2 {border-width: 2px}
.box3 {border-width: 3px}
.box4 {border-width: 4px}
.box5 {border-width: 5px}
.box {border-style: solid}
.boxd {border-style: dotted}
.toptab5 {border-radius: 5px 5px 0 0;}
.bottab5 {border-radius: 0 0 5px 5px}
.toptab10 {border-radius: 10px 10px 0 0}
.bottab10 {border-radius: 0 0 10px 10px}
.lbox {border-left-style: solid}
.rbox {border-right-style: solid}
.tbox {border-top-style: solid}
.bbox {border-bottom-style: solid}
.nlbox {border-left-style: none}
.nrbox {border-right-style: none}
.ntbox {border-top-style: none}
.nbbox {border-bottom-style: none}
.lbox1 {border-left-width:1px}
.rbox1 {border-right-width:1px}
.tbox1 {border-top-width:1px}
.bbox1 {border-bottom-width:1px}
/*
.rndlbox5 {border-left-radius:5px}
.rndrbox5 {border-right-radius:5px}
.rndtbox5 {border-top-radius:5px}
.rndbbox5 {border-bottom-radius:5px}
*/

.flexibox { width:auto; }
.mini-panel { width:200px;min-width:200px;max-width:93vw; }
.selector-panel {
	min-width:200px;max-width:93vw;
	font-size: 16px;
}

.lnul {
	border-bottom-style: solid;
}
.lnol {
	border-top-style: solid;
}
.dotul {
	border-bottom-style: dotted;
}
.dotol {
	border-top-style: dotted;
}

.rnd3 {
	border-radius: 3px;
}
.rnd4 {
	border-radius: 4px;
}
.rnd5 {
	border-radius: 5px;
}
.rnd10 {
	border-radius: 10px;
}
.rnd50pc {
	border-radius: 50%;
}
.nowrap {
	white-space: nowrap;
}
.result {
	padding: 4px 2px;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	background-color: #ffffc0;
	font-size:0.8rem
}

.cell10 {width:10px}
.cell20 {width:20px}
.cell30 {width:30px}
.cell40 {width:40px}
.cell50 {width:50px}
.cell60 {width:60px}
.cell70 {width:70px}
.cell80 {width:80px}
.cell90 {width:90px}
.cell100 {width:100px}
.cell150 {width:150px}
.cell200 {width:200px}
.cell250 {width:250px}
.cell300 {width:300px}
.cell350 {width:350px}
.cell400 {width:400px}

.mask-element {
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #ffffff;
	opacity: 0.6;
	overflow: hidden;
	z-index:9999999;
}
.fullscr {
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index:9999999;
}

.fader {
	-webkit-animation-duration: 2s;animation-duration: 2s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
}

/* full screen image */
.fsimg {
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.hflip {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	-o-transform: scaleX(-1);
}
.vflip {
	transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-o-transform: scaleY(-1);
}

.tshad {
	text-shadow: 1px 1px #000000; 
}
.tbflare {
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000 0 -1px #000; 
}
.tflare {
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; 
}
.bxshad {box-shadow: 0 1px 8px 1px #888888;}
.bxflare {box-shadow: 0 1px 8px 1px #FFFFFF;}

@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	50% {opacity: 1;}
	100% {opacity: 0; display:none}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	50% {opacity: 1;}
	100% {opacity: 0; display:none}
}

.fade-out {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.squisher {
	-webkit-animation-duration: 10s;animation-duration: 10s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
	overflow:hidden;
}
@-webkit-keyframes squishUp {
	0% {max-height: 1.2em;}
	90% {max-height: 1.2em;}
	100% {max-height: 0; display:none}
}
@keyframes squishUp {
	0% {max-height: 1.2em;}
	90% {max-height: 1.2em;}
	100% {max-height: 0; display:none}
}
.squish {
	-webkit-animation-name: squishUp;
	animation-name: squishUp;
}

@-webkit-keyframes tada {
  from {border: 1px solid red;}
  to {border: 1px solid white;}
}
@keyframes tada {
  from {border: 2px solid red;}
  to {border: 2px solid white;}
}
.wizzBang { animation-name: tada;  animation-duration: 4s; }
@keyframes opac {
	0% {
	    opacity: 0;
	}
	100% {
	    opacity: 1;
	}
}
.ani-opacity {
    animation: opac 0.8s;
}
.hide-small {
	display:inline;
}
.txsp-wide {
    letter-spacing: 10px;
}
.login {
	position:absolute;
	display:inline-block;
	max-width: 100%;
}
.login .col {
	position:relative;
	display:inline-table;
	width:calc(50% - 20px);
	padding:10px;
	margin:0;
}
.login .max {
	position:relative;
	display:inline-table;
	width:calc(100% - 20px);
	padding:10px;
	margin:0;
}
.login .btn {
	text-align: left;
	width: calc(100% - 10px)
}
.login .required-fields .blank {
	display: none;
}
.login.full .required-fields {
	display: block;
}

.popup-bubble {display:none;top:0;left:1em;right:1em;bottom:10em;overflow-y:scroll} /*max-height: 200px;*/
#cbpopup[type='checkbox'] {
  display: none;
}
#cbpopup:checked ~ .popup-bubble {
  display: block;
}

.bsc-popup-bubble {display:block;overflow-y:scroll} 

.piccell {display:inline-block;width:110px;}
.piccell img {width:100%}
.infocell {display:inline-block;width:calc(100% - 120px);}

@media screen and (min-width:1px) {
	body { font-size: 17px; }
}
@media screen and (min-width:400px) {
	body { font-size: 16px; }
}
@media screen and (min-width:700px) {
	body { font-size: calc(15px + 0.390625vw); }
}

@media ( max-width :849px) {
	#menu .item {
		position:static;
	}
	#menu .smallhide {
		display:none;
	}
	#menu .drop {
		position:absolute;
		/*display: none;*/
		top: calc(1.5em + 2px);
		left:0;
		display: inline;
		width:100%;
	}

	.main-content {
		padding:0;
	}
	.main-content .expanded {display: none;}
	header .title_img {
		display: none
	}
	header .title_txt {
		padding-top: 10px;
		display: block
	}
	.expanded {
		display: none
	}
	.main-content .index {
		display: none;
	}
	.main-content .side {
		display: none;
	}
	.main-content .fbcol {
		width: 100%
	}
	.emergentmenu {
		right:0;
	}
	image-container {
		display:none;
		overflow:visible;
	}
	.login {
		top:4%;
		left:4%;
	}
	.login.full {
		width:calc(95vw - 8%);
	}
	.login.half {
		width: calc(95vw - 8%);
	}
	.login .col {
		width:100%;
	}
	.piccell {display:block;width:100%}
	.piccell img {width:auto}
	.infocell {display:block;width:100%}
}

@media ( max-width :680px) {
	.mini-panel { width:100%;min-width:200px;max-width:93vw; }
	.flexibox { width:calc(100% - 20px); }
	button.page-control { padding: 10px; font-size:1.3em }
	#hamburger ul {
		width:100%;
		font-size: 1.2rem;
	}
	.emergentmenu {
		right:0;
		width:calc(100vw - 10px);
		font-size: 1.2rem;
	}
	.selector-panel {
		left:10px;
		width:calc(100vw - 20px);
		font-size: 1.2rem;
	}
	profile-container button {font-size: 1.2rem;}
	.login {
		top:3px;
		left:3px;
	}
	.login.full {
		width:calc(100vw - 6px);
	}
	.login.half {
		width:calc(100vw - 6px);
	}	
	.login .col {
		width:100%;
	}
	.rdevice.gallery.large {
		width: 60px;
	    height: 60px;
	    max-width: 60px;
	    max-height: 60px;
    }
    .hide-small {
    	display:none;
    }
	/* pop up absolute box */
	.popup-bubble {
		top: 5px;
	    left: 5px;
	    right: 5px;
	    bottom:10em;
	}
	.table {
		display:block;	
	}
	.tr {
		display:block;	
	}
	.td {
		display:block;	
	}
	.piccell {display:block;width:100%}
	.piccell img {width:auto}
	.infocell {display:block;width:100%}
}

@media ( min-width :850px) {
	.mini-panel { width:200px;min-width:200px;max-width:43vw; }
	header .title_img {
		display: block
	}
	header .title_txt {
		display: none
	}
	#menu .container .drop:hover {
		display: inline;
	}
	#menu .largehide {
		display:none;
	}

	.login {
		position: absolute;
		left: 50%;
		top: 50%;
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}
	.login.full {
		width:800px
	}
	.login.half {
		width: 400px;
	}
	.login.half .col {
		width:100%;
	}
}
/* display as dialog */
modal-popup {
	display:none;
}
/* display as inline text */
modal-popup:not([visible]) {
	display:block;
	background-color: #ffffc0;
	border: 5px solid #d0d0d0;
	padding: 10px;
	border-radius: 10px;
	text-align: left;
}
modal-popup:not([visible])::before {
	content: attr(title);
	display: block;
	font-weight: bold;
	border-bottom: 1px dotted black;
}
modal-popup:not([visible]) .popupboxcb::after {
	content: 'This tick box controls whether the message is displayed inline or as a pop up';
	color: #a0a0a0;
	font-size: 0.8em;
}

ul.listbubble { list-style-type: none; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; }
ul.listbubble > li {position:relative;display:inline-block;border-style:solid;border-width:0;border-radius:10px;padding:5px;line-height:100%;background-color:#e0e0e0;margin:5px 10px 5px 5px;overflow:hidden;text-overflow:ellipsis;max-width:calc(300px - 20px);list-style-type:none;white-space:nowrap;}

.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 5px 5px 15px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  /*font-weight: 600;*/
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 10px;
  width: calc(100% - 10px);
  height: 4px;
  background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 0;
  border-top: 1px solid #ccc;
}

.tabset {
  max-width: 100%;
}


/* drop down absolute box */
.wrap-collapsible {position:relative;}
.wrap-collapsible input[type='checkbox'] {
  display: none;
}
.lbl-toggle {
  display: inline-block;

  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;

  padding: 1rem;

  color: #A77B0E;
  background: #FAE042;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
  color: #7C5A0B;
}
.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
  background: rgba(250, 224, 66, .2);
  border-bottom: 1px solid rgba(250, 224, 66, .45);

  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}
.collapsible-content {
  position:absolute;
  z-Index: 100000000000000;
  max-height: 0px;
  overflow: scroll;
  background: white;

  transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 200px;
}
.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}
.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.caption {position: relative;}
.caption::before {
content: attr(data);
    background-color: lightgreen;
    border-radius: 5px;
    font-size: .7em;
    position: absolute;
    margin: 0;
    padding: 0 5px;
    top: -6px;
    left: -6px;
}

input.pinfield::-webkit-outer-spin-button,
input.pinfield::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input.pinfield[type=number] {
  -moz-appearance: textfield;
}

.bubctr {position: relative; display: inline-block }
.bubctr .bubble { position: absolute; display: block; top: 0; right: 0 }
.bubctr .bubble div { position: relative; display:block; border-radius: 3px; left:0; top:0; right:0; bottom:0; padding: 0 3px; margin: 0;}

.checkbox-ctr {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-ctr input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-ctr:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-ctr input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-ctr input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-ctr .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* show title on tap */
abbr[title] {
  position: relative;

  /* ensure consistent styling across browsers */
  text-decoration: underline dotted;
}

abbr[title]:hover::after,
abbr[title]:focus::after {
  content: attr(title);

  /* position tooltip like the native one */
  position: absolute;
  left: 0;
  width: auto;
  white-space: nowrap;

  /* style tooltip */
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
  font-size: 14px;
  padding: 3px 5px;
}