@charset "UTF-8";

/* betaflash main stylesheet - general conventions
 *
 * Avoid IDs to style elements. Everything that needs styles can be done without IDs
 * Use IDs are for reference

 status classes (style variations, part of components normal state
 .is-*  (e.g. .bf-nav__link.is-active)
 .has-* (e.g. .bf-panel.has-error)

 typography classes are reuseable, should start with .t-*

 */

:root {
	--opacity-off: 1;
	--opacity-min:.87;
	--opacity-on: .60;
	--opacity-max:.38;
}
/* overwrite balloon vars to enable dark mode */
:root {
	--balloon-color: var(--on-surface-color);
	--balloon-text-color: var(--bg-surface-color);
	--balloon-font-size: 1rem;
}

/* weight: normal = 400, bold = 700 */
@font-face {
  font-family: 'RobotoCondensed';
  font-display: swap;
  src: url('../fonts/robotocondensed-light-webfont.woff2') format('woff2'),
       url('../fonts/robotocondensed-light-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 300; //thin
}
@font-face {
  font-family: 'RobotoCondensed';
  font-display: swap;
  src: url('../fonts/robotocondensed-regular-webfont.woff2') format('woff2'),
       url('../fonts/robotocondensed-regular-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 400; //normal
}
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: local('Roboto'),
       local('Roboto-Light'),
       url('../fonts/roboto-light-webfont.woff2') format('woff2'),
       url('../fonts/roboto-light-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: local('Roboto'),
       local('Roboto-Regular'),
       url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
       url('../fonts/roboto-regular-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: local('Roboto'),
       local('Roboto-Italic'),
       url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
       url('../fonts/roboto-italic-webfont.woff') format('woff');
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: local('Roboto'),
       local('Roboto-Medium'),
       url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
       url('../fonts/roboto-medium-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 500;
}

.opacity--off {opacity: var(--opacity-off,1)  } /* no transparency */
.opacity--min {opacity: var(--opacity-min,.87)} /* high-emphasis text */
.opacity--on  {opacity: var(--opacity-on,.60) } /* medium-emphasis text and hint text */
.opacity--max {opacity: var(--opacity-max,.38)} /* disabled text */

.l-round--small  {border-radius:.2em}
.l-round--medium {border-radius:.4em}
.l-round--large  {border-radius:.8em}

.t-text--red   {color: var(--bg-error-color,red) }
.t-text--amber {color: var(--amber-500,#FFC107) }

.t-hide { visibility: hidden }

.l-border { border:1px solid var(--primary-color) !important }

.l-short { height: 64px }
.l-tall { height: 320px }

.has-error {
	background-color:	var(--bg-error-color, red)!important; 
	color:			var(--on-error-color, white)!important;
}

/* remove outline (blue border in chrome) */
button:focus,input:focus,textarea:focus,select:focus{outline:none}
/* remove border for textarea if inside fieldset */

.w3-disabled {
	cursor:not-allowed;
	opacity: var(--opacity-max,.38);
}

/* style disabled controls */
button.disabled,a.disabled, :disabled * {
	opacity: var(--opacity-max,.38);
	-webkit-pointer-events: none;
	-moz-pointer-events: none;
	pointer-events: none;
/*	cursor: not-allowed; */
}

/*
 * Safari for OS X and iOS (San Francisco)
 * Chrome < 56 for OS X (San Francisco)
 * "Segoe UI",           // Windows
 * Roboto,               // Android
 * "Helvetica Neue",     // Basic web fallback
 */

body {
	background-color: #FAFAFA; color: #121212; 
	display: flex; flex-direction: column;
	min-height: 100vh;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
	font-weight: 400;
	font-size: 1.4rem; 
}
.bf-content {
	background-color: var(--bg-surface-color); color: var(--on-surface-color);
	flex: 1 0 auto;		/* keep the footer at bottom		*/
	line-height: 1.5;	/* 150% of font-size	*/
}

fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}
/*
 * target HTML markup for input fields and select2
 */
.w3-modal-content, .w3-dropdown-content {
	background-color: var(--bg-surface-color, #FAFAFA); color: var(--on-surface-color, #121212);
}
button,input,optgroup,select,textarea,.select2-search,.select2-search input,.select2-results {
	color:inherit;font:inherit;margin:0;
	background-color: inherit;
}
button[type=submit] {
	background-color:	var(--secondary-color);
	color:			var(--on-secondary-color);
        padding: .6em;
        box-shadow: none
/* background-image: -webkit-linear-gradient(top, var(--secondary-color-l), var(--secondary-color-d)); */
}

input[type="radio"],input[type="checkbox"] {vertical-align:middle;margin:0;}
input[readonly] {opacity: var(--opacity-max)}
/* #givenGradeAdj */
input[type="range"] {width:90px}
input[type="text"],input[type="email"],input[type="number"],input[type="search"],input[type="date"],select {
	border: none;
/*	border-bottom: 1px solid var(--primary-color-a); TODO thin alpha*/
	box-shadow: inset 0 .1em .2em rgba(0,0,0,.45);
}

/* show users when their values are valid or invalid */
input:invalid+span:after {
	vertical-align:middle;
	content: '✖';
	color: var(--bg-error-color,red);
	padding-left: 5px;
}
input:valid+span:after {
	vertical-align:middle;
	content: '✓';
	color: var(--light-green,green);
	padding-left: 5px;
}

.bf-truncate {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

label {
	color:var(--primary-color-a);
	font-size:80%;
	vertical-align:baseline;
}
legend {
	color:var(--primary-color);
}

/*
 * generic layout only classes *
 *
 * margin,padding t r b l, t rl b, tb rl, tbrl
 */

.l-container{padding:0.01em 1em}
.l-section {margin-top:16px!important;margin-bottom:16px!important;}
/* TODO consider using "display: flow-root;" on container with float elements */
.l-left	{float:left!important}
.l-right{float:right!important}
.l-text--left	{text-align:left!important}
.l-text--right	{text-align:right!important}
.l-text--center	{text-align:center!important}
.l-width--100   {display:block; width:100%;}

.fa-ban {color:var(--bg-error-color)}

.bf-card,.bf-card-2 {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	border: 1px solid var(--primary-color);
}

.bf-card__head {
	padding: 0.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color:	var(--primary-color, #607D8B); /* Steel Teal */
	color:			var(--on-primary-color, white);
}
.bf-card__head-lft,.bf-card__head-rgt {
	flex: auto;
	display: flex;
}
.bf-card__head-rgt {
	justify-content: flex-end;
}
.bf-card__head-rgt > * {
	margin-left: 1em;
}
.bf-card__body {
	padding: 0.5em;
}

.bf-close {
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}

/* horitzontal navigation bar */
.bf-nav-h,.bf-nav-v {
	background-color:	var(--primary-color, #607D8B); /* Steel Teal */
	color:			var(--on-primary-color, white);
}

/* horitzontal flexible row */
.bf-row {
	display: flex;
	overflow-x: auto;
}
.bf-row > p {
	padding: 1em;
}	

ul {
	margin:0;
	padding:0;
}
ul.bf-nav-h>li {
	display:inline-block!important;
	position: relative;
	transition-duration:0.5s;
}
ul.bf-nav-h>li:hover,ul.bf-nav-h>li:focus-within {
	background-color:	var(--primary-color-a);
	cursor:	pointer;
}
footer ul.bf-nav-h li:hover, footer ul.bf-nav-h li:focus-within {
	background-color:	var(--primary-color-a);
	cursor:	pointer;
}
header>ul>li>a, 
footer>ul>li>a, 
nav>ul>li>a, 
header>ul>li>button, 
footer>ul>li>button, 
nav>ul>li>button, 
ul.bf-nav-h .bf-button {
	background-color: inherit;
	color: inherit;
	padding:8px 16px;
	display: inline-block;
	scale: 1;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	cursor: pointer; 
-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	border: none;
	text-decoration: none;
}
.bf-nav-h>a:hover,
.bf-nav-h>a:focus {
	background-color:	var(--primary-color-a);
	opacity: var(--opacity-min);
}
header ul,
footer ul,
nav ul {
	list-style-type:none;
}
nav ul li ul { /* dropdown-content */
	position:absolute;
	border:.5rem solid var(--bg-surface-color);
	transition: all 0.5s ease;
	min-width:200px; /* 50vw; */
/*	visibility: hidden;
	margin:.5rem;
	opacity: 0; */
	display:none;
}
ul li:hover > ul,
ul li ul:hover,
ul li ul:focus {
	visibility: visible;
	opacity: 1;
	display: block;
}
/* IE 11 won't get this, but at least the top-level menus will work */
nav ul li:focus-within > ul {
	visibility: visible;
	opacity: 1;
	display: block;
}
nav ul li ul li {
	display:block;
	clear:both;
	width:100%;
}
nav li:hover,
nav li:focus {
	background-color: rgb(255,255,255,.1);
}
nav ul li ul li a {
	color:	var(--on-primary-color, white);
	display: inline;
	padding:8px 16px;
}
#myBeta   {z-index:10;}

header.w3-bar, section .w3-bar, .w3-modal-content header {
	background-color:	var(--primary-color, #607D8B); /* Steel Teal */
	color:			var(--on-primary-color, white);
}

/*
 * header
 */
h1,h2,h3,h4,h5,h6{font-weight:500;margin:0.5em 0}
h1{font-size:2.2rem}h2{font-size:2rem}h3{font-size:1.8rem}h4{font-size:1.6rem}h5{font-size:1.4rem}h6{font-size:1.2rem}

/*
 * noscript modal dialog via :target selector
 */
.ns-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	max-height: 100%; /* iPhone safari has problems with fixed pos and keyboard */
	z-index: 10000;
	overflow-y: scroll; /* Ensure that the modal is scroll-able */
  -webkit-transition: width 0s linear .2s, height 0s linear .2s;
     -moz-transition: width 0s linear .2s, height 0s linear .2s;
       -o-transition: width 0s linear .2s, height 0s linear .2s;
          transition: width 0s linear .2s, height 0s linear .2s;
}
.ns-modal:target {
	width: 100%;
	height: 100%;
	z-index: 10010;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}
.ns-modal-overlay {
	opacity: 0;
  -webkit-transition: opacity .2s;
     -moz-transition: opacity .2s;
       -o-transition: opacity .2s;
          transition: opacity .2s;
}
.ns-modal:target > .ns-modal-overlay {
	opacity: 1;
}
.ns-modal-box {
	opacity: 0;
  -webkit-transform: scale(.8,.8);
     -moz-transform: scale(.8,.8);
       -o-transform: scale(.8,.8);
          transform: scale(.8,.8);
  -webkit-transition: opacity .2s, -webkit-transform .2s;
     -moz-transition: opacity .2s,    -moz-transform .2s;
       -o-transition: opacity .2s,      -o-transform .2s;
          transition: opacity .2s,         transform .2s;
}
.ns-modal:target > .ns-modal-box {
	opacity: 1;
  -webkit-transform: none;
     -moz-transform: none;
       -o-transform: none;
          transform: none;
}
.ns-modal-overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.8);
	cursor: default;
	outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ns-modal-box {
	display: block;
	position: absolute;
	top: 10%;
	left: 15px;
	right: 15px;
	bottom: auto;
	max-width: 560px;
	margin: 0 auto;
	border: 1px solid var(--primary-color);
	border-radius:.4em ;
	background-color: var(--bg-surface-color); color: var(--on-surface-color);
	box-shadow: 0 0 10px 0 rgba(0,0,0,.4);
}
.ns-modal-box.full {
  top: 15px;
  bottom: 15px;
  max-width: none;
  margin: 0;
}
.ns-modal-close {
  display: block;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  z-index: 1;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 2rem;
  color: var(--on-primary-color);
}
.ns-modal-close:hover,
.ns-modal-close:focus {
  color: var(--amber-500,#FFC107);
/*text-decoration: none;*/
}
.ns-modal-box-inner {
  max-height: 450px;
  overflow: auto;
  padding: 1rem;
}
.ns-modal-box.full .ns-modal-box-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: none;
}
/* remove me */
/* .ns-modal-box.header { top: 10%; left: 0px; } */

a, a.bf-link {
	text-decoration: none;
	color:			var(--on-surface-color-a);
}
a.bf-link:hover, a.bf-link:focus {
	opacity: var(--opacity-min);
/*	text-decoration: underline; */
}
.bf-button:hover, .bf-button:focus {
	opacity: var(--opacity-min);
}
button.bf-link {
	background:		none!important;
	color:			var(--on-surface-color-a);
	border: none; 
	padding: 0!important;
	font: inherit;
	cursor: pointer;
}

.select2-choice, .w3-dropdown-content>a:hover, .w3-dropdown-content .w3-bar:hover {
	background-color: var(--bg-surface-color-a);
}
.w3-dropdown-content { min-width: 50vw; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); }
.l-container .w3-dropdown-hover .w3-dropdown-content { left: -1em; padding: 1em; }
@media screen and (max-width: 600px) and (orientation: portrait) {
	.w3-dropdown-content { width: 100%; }
}

img {
	vertical-align: middle;
	background-color: transparent;
}

/* LVHA rule-chain :link — :visited — :hover — :active */
button#toggle-beta {
	background:none!important;
	border:none; 
	padding:0!important;
	font: inherit;
	cursor: pointer;
}
button#toggle-beta:hover, button.toggle-beta:focus {text-decoration: underline;}

.bf-tag {
	background-color:	var(--primary-color);
	color:			var(--on-primary-color);
	display: inline-block;
	padding-left: .4em; padding-right: .2em;
	font-size: 80%;
	text-align: center;
}
.bf-tag span {
	display: inline-block;
	padding: .4em .4em;
	vertical-align: middle;
	text-align: center;
	font-weight: 500;
	white-space: nowrap;
}
.bf-removeable a {
	background-color:	var(--bg-error-color, red);
	color:			var(--on-error-color, white);
	border: none;
	display: inline-block;
	padding: .4em .4em;
	vertical-align: middle;
	text-decoration: none; 
	text-align: center;
	font-weight: 900;
	cursor: pointer;
	white-space: nowrap;
}

.w3-table td,.w3-table th{padding:2px 4px}
th.bf-date, td.bf-date { white-space:nowrap; }
td.cell_classtype{width:25px}
td.bf_classtype{white-space:nowrap;width:40px}
td.bf_control{white-space:nowrap}
td.bf-action-cell{white-space:nowrap;text-align:right;padding-right:16px;}
td .era_info{font-style:oblique;float:right;}
td.bf-action-cell .bf-link{margin-left:8px!important;}
/*writing hand*/
.era_edit1::after {content:"\202F\270d";}
.era_sended::after {content:"\202F\2714\202F";color:var(--primary-color);}
.era_beauty1::before {color:var(--amber-500); content:"\2605";}
.era_beauty2::before {color:var(--amber-500); content:"\2605\2605";}
.era_beauty3::before {color:var(--amber-500); content:"\2605\2605\2605";}
.era_beauty-1::before{content: "\2639";}
.era_avg::after {content: "\2205";}
.era_given_beauty1::after {color:var(--amber-500); content: "\2205\2605";}
.era_given_beauty2::after {color:var(--amber-500); content: "\2205\2605\2605";}
.era_given_beauty3::after {color:var(--amber-500); content: "\2205\2605\2605\2605";}
.era_given_beauty-1::after{content: "\2205\2639";}
.era_expo::after {content: "\2757";}
.era_ascent1::after{content:"\202F\278A";}
/* the beauty rating */
.given-beauty, .given-beauty label::before {display:inline-block;}
/* .given-beauty label:hover, .given-beauty label:hover ~ label {color: #189800;} */
.given-beauty label:hover, .given-beauty label:hover ~ label {color: var(--amber-500)}
.given-beauty * { margin: 0; padding: 0; }
.given-beauty input {display:none;}
.given-beauty {
    unicode-bidi:bidi-override;
    direction: rtl;
    text-align: center;
}
.given-beauty label {color: var(--on-surface-color)}
.given-beauty label::before {
    content: "\2605";
    width: 1.6em;
    line-height: inherit;
    text-align: center;
    font-size: 1.6em;
    cursor: pointer;
}
.given-beauty .frown label::before {content:"\2639";}
.given-beauty .none label::before  {content:"\2610";}
.given-beauty input:checked ~ label{color: var(--amber-500);}
.given-beauty-disabled {
    opacity: var(--opacity-max);
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

/*
 *
 */
.vertical-checklist, .vertical-inputlist {
	line-height: 2em;
	height: 10em;
	overflow: auto;
	border: 5px solid var(--primary-color);
}

.vertical-inputlist {
	border: none;
	margin-bottom: 1.5em;
}

/* form in modal box TODO remove*/
.form-head {
	padding: 10px 1rem 2px;	/* t rl b */
}
.form-body {
	padding: 1rem 1rem;	/* tb rl */
}
.form-body .bf-row {
	padding: 0.4rem 0;
}
.form-foot {
	background-color:	var(--primary-color-a);
	color:			var(--on-primary-color);
	padding: 2px 1rem 10px;	/* t rl b */
	text-align: right;
}

.input-block,.select-block {
  display: block;
  width: 100%;
  margin-bottom: .5rem;
  padding: .2rem .3rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
 * buttons
 *
 * core extract from Pure v1.0.1
 * https://github.com/pure-css/pure/blob/master/LICENSE.md
 * */
.bf-button {
    display: inline-block;
    scale: 1;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    -webkit-user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box
}

/* Firefox: Get rid of the inner focus border */
.bf-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
/* end of extract */

/*
 * more bf button defaults
 */
.bf-button {
	background-color: inherit;
	color: inherit;
	border: none;
	overflow: hidden;
	text-decoration: none;
}
/* match h3 in entry.html TODO em*/
.bf-button-circle {
	line-height: 2em;
	height: 2em;
	width: 	2em;
	font-size: 15px;
	font-weight: bold;
	border: none;
	border-radius:50%!important;
	padding:0!important;
	background-color:	var(--secondary-color);
	color:			var(--on-secondary-color);
}
.bf-button-circle .fa {
	line-height: 2em;
}

/* TODO remove .button */
.button {
	background-color:	var(--primary-color);
	color:			var(--on-primary-color);
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	min-width: 34px
	height: 26px;
	line-height: 26px;
	margin-left: 3px;
	padding: 0 5px;
	border-radius: 3px;
	vertical-align: top;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	font-size: 1em;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,.3);
}
.button:hover,.button:focus,.button:active {
	background-color:	var(--primary-color-a);
}
.button:first-child {margin-left:0}

/* wrapper for text input with clear icon with jquery */
span.deleteicon {
  border-bottom: 1px solid var(--primary-color-a);
  box-shadow: inset 0 .1rem .3rem 0 rgba(0,0,0,.08);
  padding: .2rem .4em .2rem .2em; /* t r b l */
  display: inline-block;
}

/* the clear switch */
span.deleteicon span {
	/*background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='61' height='41' fill='@{bgColor}' stroke='none'><path d='M0,0 L30,40 L60,0 L0,0 Z'></path></svg>") no-repeat; */
	cursor: pointer;
	color: red;
	font-weight: bold;
	/* visibility:hidden; */
}
span.deleteicon input {
	border: none;
	box-shadow: none;
	background: none;
	padding: 0 0;
	margin: 0 0;
}

#pathSearch {
    background-image: none;
    border: none;
    padding: 2px;
    width: 5ch;
   -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#pathSearch:focus {
	box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
	width:10ch;
}

#searchSubmit {width:10px; visibility: hidden;}
#latInput {font-family:'Lucida Console',monospace;width:10em;text-align:center;}
#lngInput {font-family:'Lucida Console',monospace;width:10em;text-align:center;}
#zoomInput{font-family:'Lucida Console',monospace;width:2em;text-align:center;}

/* areas multi-column layout */
ol.entrylist {
	line-height:2em;
	list-style:square inside;
	padding-left:1em;
	column-count:3;
	column-width:300px;
}

#letters {
	list-style:none;
	display:inline-block;margin:0;padding:0
}
#letters a {
	background-color:	var(--secondary-color);
	color:			var(--on-secondary-color);
/*	background:#1242ba;
	color:#fff; */
	border-radius:50%;
	display:block;
	line-height:30px;width:30px;
/*	transition:all 0.1s linear */
}
#letters a:hover{background:rgba(18,66,186,0.5);text-decoration:none}
#letters li{display:inline-block;margin:0 0.25em 0.5em;text-align:center}

/*
 * 
 */
.breadcrumb2 {
	padding:0.8em 0;
	list-style:none;
	line-height:1;
}
.breadcrumb2>li {display:inline-block;}
/* .breadcrumb2>li+li:before {padding:0 .1em;content:"/\00a0"} */
.breadcrumb2>li+li:before {padding:0 .2em;content:"/"} /* tb rl */
.breadcrumb2:active {color:var(--on-surface-color-a);}
.breadcrumb2 button {border:none;margin:0;color:inherit;}
.breadcrumb2 button:focus {
	box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}
.breadcrumb2 button:active {transform: scale(0.99);}
.breadcrumb2 img {max-height: 16px;}
.breadcrumb2 input[type="search"] {
	border: none;
	padding: 2px;
	width: 5ch;
	-webkit-transition: width 0.1s ease-in-out;
	transition: width 0.1s ease-in-out;
}

.suggestionList ul {list-style:none}

/*
 * icon buttons
 */
.bf-icon {
	font-family: FontAwesome;
	display: inline-block;
}
.bf-icon:before {
	padding-right: 0.2em;
}
.bf-icon-bell:before { 
	content: "\f0f3"; /* fa-bell */ 
}
.bf-icon-bell-o:before { 
	content: "\f0a2";
}
.bf-icon-file-text:before { 
	content: "\f15c"; /* fa-file-text */ 
}
.bf-icon-globe:before { 
	content: "\f0ac"; /* fa-globe */ 
}
.bf-icon-group:before { 
	content: "\f0c0"; /* fa-group */ 
}
.bf-icon-key:before {
	content: "\f084"; /* fa-key */
}
.bf-icon-location:before {
	content: "\f124"; /* fa-location-arrow */
}
.bf-icon-map:before {
	content: "\f279"; /* fa-map */
}
.bf-icon-map-marker:before {
	content: "\f041"; /* fa-map-marker */
}
.bf-icon-map-o:before {
	content: "\f278";
}
.bf-icon-setup:before {
	content: "\f013"; /* fa-cog */ 
}
.bf-icon-search:before {
	content: "\f002"; /* fa-search */
}
.bf-icon-sign-out:before {
	content: "\f08b"; /* fa-sign-out */
}
.bf-icon-user:before { 
	content: "\f007"; /* fa-user */ 
}

#lftNeighbor::before{content:"\00AB\202F";}
#lftNeighbor::after {content:"\202F\2039";}
#rgtNeighbor::before{content:"\203A\202F";}
#rgtNeighbor::after {content:"\202F\00BB";}

/* old var(--amber-500) */
.era_type_id1::after{content:"boulder";color:var(--amber-500);font-size:8px;font-style:oblique}
.era_type_id2::after{content:"sport";  color:var(--amber-500);font-size:8px;font-style:oblique}
.era_type_id3::after{content:"trad";   color:var(--amber-500);font-size:8px;font-style:oblique}
.era_type_id4::after{content:"alpine"; color:var(--amber-500);font-size:8px;font-style:oblique}
.era_type_idClimber::after{content:"climber";var(--amber-500);font-size:8px;font-style:oblique}

#li[data-class='route'] div:first-child { content: "[R " attr(data-class) "]";color:var(--amber-500);font-style: oblique }

.icon::after {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	width:1em;
	padding-left: .1em;
/*	text-align: right; */
}
/*
 * eye, onsight
 * bolt, flash
 * circle, redpoint
 * circle, pinkpoint
 * power-off, "free (a.f.)"
 * life-ring, "aid (m.U.)" 
 * arrow-down, "2nd top rope" 
 * arrow-down, "2nd flash" 
 * arrow-down, "2nd redpoint" 
 * arrow-down, "2nd free (a.f.)" 
 * arrow-down, "attempt" 
 */
.bf-style_id0::after{content:"\f176";color:#c0c0c0;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id1::after{content:"\f06e";color:#4CAF50;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id2::after{content:"\f0e7";color:#D2BE0E;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id3::after{content:"\f111";color:#F44336;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id4::after{content:"\f111";color:#e91e63;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id5::after{content:"\f011";color:#c0c0c0;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id7::after{content:"\f1cd";color:#ff9800;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id9::after{content:"\f176";color:#c0c0c0;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id10::after{content:"\f175";color:#757575;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id12::after{content:"\f175";color:#D2BE0E;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id13::after{content:"\f175";color:#F44336;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id15::after{content:"\f175";color:#c0c0c0;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id19::after{content:"\f175";color:#757575;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}
.bf-style_id20::after{content:"\f0ad";color:#000;font-weight:900;font-family:"FontAwesome";margin:0 0.2em;}

.bf-beauty0::before{content:"";color:var(--amber-500);font-weight:700;font-family:"FontAwesome";margin:0 0.2em;}
.bf-beauty1::before{content:"\f006";color:var(--amber-500);font-weight:700;font-family:"FontAwesome";margin:0 0.2em;}
.bf-beauty2::before{content:"\f006\f006";color:var(--amber-500);font-weight:700;font-family:"FontAwesome";margin:0 0.2em;}
.bf-beauty3::before{content:"\f006\f006\f006";color:var(--amber-500);font-weight:700;font-family:"FontAwesome";margin:0 0.2em;}
/* frown-o, grab */
.bf-beauty-1::before{content:"\f119";color:var(--amber-500);font-weight:700;font-family:"FontAwesome";margin:0 0.2em;}

/* show caret down "\f0d7" or up "\f0d8" for grade adjust lower1 upper3 */
/* show hand down "\f0a7" or up "\f0a6" for grade adjust lower1 upper3 */
.bf-grade-adj-1::after{content:"\f0d7";font-weight:800;font-family:"FontAwesome";margin:0 0.2em;}
.bf-grade-adj-2::after{content:" ";margin:0 0.2em;}
.bf-grade-adj-3::after{content:"\f0d8";font-weight:800;font-family:"FontAwesome";margin:0 0.2em;}
/*
 * next is for record_table
 */
.bf-record_table, .bf-entry_table {
        width:100%; padding: 0 0.8em;
}
@media (max-width:600px) {
        .bf-record_table, .bf-entry_table {line-height:1.5;font-size:80%;}
}

ul.bf-record_list{
    list-style-type:none;
    padding:0;
    margin:0
}
/*ul.bf-record_list li{border-bottom:1px solid #ddd}ul.bf-record_list li:last-child{border-bottom:none}*/
li.bf-record, li.bf-entry {
        display: flex;
        flex-flow: row nowrap; /* justify-content: space-around; */
        align-content: space-between;
        padding: 0.4em 0;
}
li.bf-record>*, li.bf-entry>* {
/*        flex: 1 1 160px; */
        flex: 1 1 10%;
}
/*li.bf-record div { flex: 1 1 0%; } */
li.bf-record div:nth-of-type(1) { flex:0 0 10%; white-space:nowrap }
li.bf-record div:nth-of-type(2) { padding:0 0.8em }
li.bf-record div:nth-of-type(4) { flex:0 0 32px }

li.bf-entry div:nth-of-type(1) { padding:0 0.8em 0 0 }
li.bf-entry div:nth-of-type(2) { flex:0 0 32px; text-align: right; white-space:nowrap }
div.bf-action-cell .bf-link { margin-left:8px!important }
.action_list > ul {
	padding: .5em 0;
	line-height: 2em;
	text-align: right;
	list-style: none;
	border-bottom: 1px solid var(--primary-color);
}

li.bf-record:hover, li.bf-entry:hover {
/*
//  background-image: @TableStripe;
//  background-color: yellow; */
    background-image: linear-gradient(0,rgba(0,0,0,0.07),rgba(0,0,0,0.07));
}

/*
 * path / to / entry in list view
 */
.bf-entry_path {
        opacity: var(--opacity-min);
	font-size: 0.8em;
}
.bf-control{
        flex: 0 0 48px;
      white-space:nowrap; 
        text-align:right;
/*        padding-right:16px; */
}
.bf-beta_list{
        font-style:oblique;
        opacity: var(--opacity-on);
        padding-left:10%;
        padding-right:32px;
        text-align:right;
}
li.bf-beta{
        display:inline;
        margin-left:0 0.8em;
}

/*
 *
 */
.era_class_area     {margin-left:0}
/*.era_class_subarea  {margin-left:4px} */
.era_class_formation{margin-left:8px}
.era_class_section  {margin-left:12px}
.era_class_route    {margin-left:16px}
.era_class_pitch    {margin-left:20px}
.era_class_project  {margin-left:16px}
/* old var(--amber-500) */
.era_class_area::before     {content:"A"; color:var(--amber-500);font-style: oblique}
.era_class_formation::before{content:"F"; color:var(--amber-500);font-style: oblique}
.era_class_section::before  {content:"f"; color:var(--amber-500);font-style: oblique}
.era_class_route::before    {content:"R"; color:var(--amber-500);font-style: oblique}
.era_class_pitch::before    {content:"r"; color:var(--amber-500);font-style: oblique}
.era_class_project::before  {content:"P"; color:var(--amber-500);font-style: oblique}
.era_class_person::before   {content:"C"; color:var(--amber-500);font-style: oblique}

/* .era_addEntry::before       {content:"\ff0b\202f"; color:var(--amber-500);font-style: oblique;} */

.bf_accordion p {margin:5px;}
.bf_accordion a {margin:10px}
.bf_accordion div {
    height: 0;
    overflow: hidden;
    transition: height 300ms ease-in 0s;
    font-size: 0.8em;
/*    margin-top: -500px;
    padding-top: 500px; */
}
.bf_accordion .accord > a {
    background: none repeat scroll 0 0 #222;
    color: #3a3a3a;
    display: block;
    margin-bottom: 1px;
    padding: 5px;
    text-decoration: none;
}
.bf_accordion div:target {height:80px;}

/* new accordion panel*/
.accordion-container { display: inline-block; height: auto; padding: 0; margin-top: 1rem; margin-bottom: 2rem; overflow: hidden; }

.accordion-container .panel { margin-top: 0; border-bottom: 1px solid var(--primary-color); width: 100%; text-align: left; transition: 0.4s; }
.accordion-container .panel:last-child { border: none; }
.accordion-container .panel .setting { font-size: 0.85em; font-weight: 500; color: var(--on-surface-color-a); opacity: var(--opacity-min,.87); padding: 1em 1.5em; }
.accordion-container .panel .setting::after { content:"\f106";font-family:"FontAwesome";font-size:2em;margin:0 1em;vertical-align: sub; }
.accordion-container .panel.active .setting::after { content:"\f107";font-family:"FontAwesome";font-size:2em;margin:0 1em;vertical-align: sub; }
.accordion-container .panel .content { padding: 0 1.5em; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.accordion-container .panel .content p { font-size: 0.8em; line-height: 1.5em; font-weight: 400; padding: 1em 0; margin: 0; }
.accordion-container .panel .content p:first-child { padding-top: 0; }
.accordion-container .panel p:last-child { padding-bottom: 20px; }
.accordion-container .panel.active { opacity: var(--opacity-off,1) }
.accordion-container input { pointer-events: none; }

select.paginate {
	border:0;
	background-color: var(--primary-color); color: var(--on-primary-color);
}

/*
 * image slide controls
 */

.js-slide-dot {
	border: 1px solid var(--amber-500, #FFC107);
	background-color: transparent;
	height: 13px;
	width: 13px;
	padding: 0;
	cursor: pointer;
}
.js-slide-dot:hover {
	background-color: var(--amber-500, #FFC107);
}
.js-slide-prewiew:hover {
	border: 1px solid var(--amber-500, #FFC107);
	opacity: var(--opacity-min);
}

/*
 * Generated HTML markup for autocomplete suggestions is displayed below.
 */
#js-location__autocomplete-loading {
	display: none;
}
.js-location__autocomplete-input {
	display: none;
	background-color: inherit;
}
.js-location__autocomplete-input input[type="search"] {
	width: 100%;
	padding: .4em .6em;
	border: 1px solid var(--primary-color);
	box-shadow: inset 0 1px 7px 0 rgba(0,0,0,.08);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*
 *  fa-spinner inside input box FIXME does not work
 *
.js-location__autocomplete-input input[type="search"]:after {
	position: absolute
	right: 20px;
	top: 50%;
	font-family: FontAwesome;
	content: "\f110";
}
 */

/*
 * anker for jquery-autocomplete suggestion result
 * containerClass: 'autocomplete-suggestions',
 *       selected: 'autocomplete-selected',
 *     suggestion: 'autocomplete-suggestion'
 *
 */
.autocomplete-suggestions {
        background-color: var(--bg-surface-color, #FAFAFA);
        color: var(--on-surface-color, #121212);
	overflow: auto;
	cursor: default;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: .4em .6em;
	border: 1px solid var(--primary-color);
	border-top: none;
	border-bottom .6em solid var(--bg-surface-color);
/*
	-webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
	-moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
	box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); */
/*	box-shadow: inset 0 1px 7px 0 rgba(0,0,0,.08); */
}
.autocomplete-suggestion {
/*	white-space: nowrap; overflow: hidden; */
}
.autocomplete-no-suggestion { padding: .4em .6em;}
.autocomplete-selected { background-color: var(--primary-color-a); color: var(--on-primary-color); }
.autocomplete-suggestions strong { font-weight: bold; color: var(--bg-error-color); }
.autocomplete-group { padding: .4em .6em 0 0; display:block; font-size:80%; opacity: var(--opacity-on,.60); }

/*
 * CSS Pixel Ratio's
 * 3a 411px x 846px
 * iphone 320 x 480
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
 */

@media (max-width:600px) {
	.breadcrumb2 {line-height:1.5;font-size:80%;}
}

/* CSS Code wenn Dark Mode aktiv */ 
@media (prefers-color-scheme: dark) {
	a {
		background-image: none;
		text-shadow: none;
	}
	img {
		filter: grayscale(30%);
		opacity: .75;
		transition: opacity .5s ease-in-out;
	}
	img:hover { opacity: 1; }
	.bf-card,.bf-card-2 {
		box-shadow: none;
		border: none;
		background-color: rgb(255,255,255,.1);
	}
	button,input,optgroup,select,textarea,.select2-search,.select2-search input,.select2-results {
		box-shadow: none;
		background-color: rgb(255,255,255,.08);
	}
	input:focus,textarea:focus {
		background-color: rgb(255,255,255,.1);
	}
	.ns-modal-overlay {
		background-color: rgba(255,255,255,.6);
	}
}