body { font-size:0.95em; height:100%; margin:0; }
html { margin:0; box-sizing:border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

h1 { font-size:1.75em; margin:0.6em 0 0.4em 0; }

h2 { font-size:1.55em; margin:0.6em 0 0.3em 0; }
h3 { font-size:1.30em; line-height:1.2em; }
h4 { margin:0.5em 0 0.1em 0; }
h5 { margin:0.7em 0 0.2em 0; }
div { vertical-align:top; }
p { line-height:1.4em; font-size:1.05em; }
table { border-collapse:collapse; }

pre { margin:0; }

#page-login footer { padding:7px; position:fixed;bottom:0;left:0;right:0; border-top:solid #eee 1px;text-align:center; }
#page-login footer a { color:#666; }

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}
select { padding: 1px 2px; }

input[type=range] {
    outline-width: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
}

input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
	border-radius: 5px;
	height: 7px;
	background-color:#eee;
	border-radius: 5px;
	vertical-align: middle;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border-radius: 10px;
	height: 20px;
	width: 20px;
	background-color:#999;
	vertical-align:middle;
}
input[type=range]::-moz-range-thumb {
	-moz-appearance: none;
	border-radius: 10px;
	height: 20px;
	width: 20px;
	background-color:#999;
}

div.contenteditable { border:solid #666 1px; padding:5px 6px; }

img.blackWhite { filter:grayscale(100%); }

#outer-wrapper { margin:0 auto; clear:both; min-width:320px; max-width:860px; min-height:500px; height:100%; position:relative; overflow:hidden; }

#inner-wrapper { right:0; height:100%; }

#inner-wrapper {
	right:0 !important;
	-webkit-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);

	transition:transform 300ms ease;
}
#inner-wrapper {
	-webkit-transform:none;
	-ms-transform:none;
	transform:none;
	transition:-webkit-transform 0ms ease;
}

#responsiveMenu h2 { padding:8px 10px 8px 10px; background-color:#949494; height:39px; margin:0 0 0 0 !important; color:#fff; font-size:1.4em; }
#responsiveMenu h3 { padding:6px 10px 5px 10px; margin-bottom:0; }
#responsiveMenu li.logout { margin-top:15px; }
#responsiveMenu li.logout a,
#responsiveMenu li.extra a { font-weight:normal; }

#responsiveMenu  {
	position:absolute;
	width:190px;
	background-color:#f4f4f4;
	min-height:500px;
	height:100%;
	display:block;
	top:0;
	right:0;
	z-index:10000;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	transition: transform 200ms linear;
}
#responsiveMenu.active  {
	-webkit-transform:none;
	transform:none;
	transition: transform 200ms linear;
}

#responsiveMenu ul { margin:0; padding:0; }
#responsiveMenu li { list-style:none; margin:0; }
#responsiveMenu li a { text-decoration:none; padding:10px; display:block; font-weight:bold; border-bottom:solid #999 1px; color:#333; }
#responsiveMenu li a span.wrapper span { margin-left:10px; }
#responsiveMenu li a span.wrapper span span.optional { margin:0; }
#responsiveMenu li a:hover { background-color:#D0CFCF; }
#responsiveMenu li a i { width:18px; }
#responsiveMenu li a.ownProfile span.wrapper span { margin:4px 0 0 2px; display:inline-block; }
#responsiveMenu li a.optional { display:none; }
#responsiveMenu p { margin:1em;  }
#responsiveMenu .menu a div.p { margin-right:5px; max-width:100%; max-height:22px; width:100%; overflow:hidden; }
#responsiveMenu .menu a div.p div { width:20px; margin-right:7px; }
#responsiveMenu div.shadow { /*position:absolute; height:100%; top:0; left:0px; width:10px; box-shadow:inset 4px 0 8px 0 #999;*/ }

.responsiveMenu #inner-wrapper #slideBack {
	position:absolute;
	height:100%;
	top:0;
	right:0px;
	width:100%;
	z-index:9999;
	animation: fade 0.2s forwards;
}
@keyframes fade {
    from {background-color:rgba(102,102,102, 0);}
    to {background-color:rgba(102,102,102, 0.7);}
}

#inner-wrapper { top:0; width:100%; vertical-align:top; z-index:1000; }

table.vertical {}
dl.vertical dt { text-indent:0; text-align:left; color:#333; width:33%; vertical-align:top; font-weight:bold; min-width:60px; overflow:hidden; }
dl.vertical dd { position:relative; }
div.view dl.vertical dt,
div.view dl.vertical dd { padding:0; }
dl.vertical dt.divider,
dl.vertical dd.divider { padding-bottom:10px; }
dl.vertical dd:after{
  display: block;
  content: '';
}

div.row h4 { color:#f07622; margin:10px 0 3px 0; }
div.row h5 { margin:10px 0 2px 1px; }

#member { display:table; width:100%;}
#member div.row p.subtitle { font-size:90%; margin:0 0 10px 0; }
#member div.tasks div.box { display:flex; justify-content:space-around; }
#member div.tasks div.box select { width:55%; margin:0 4px 0 0; }
#member div.tasks div.box input { width:45%; }
div.tasks div.viewTasks  { margin:0 0 4px 4px; }
#member select { height:24px; }
#member textarea { width:100%; height:70px; }
#member select[name=districtId] { width:100%; }

p.changePassword { text-decoration:underline; cursor:pointer; }

span#passwordStrengthIndicatorWrapper { visibility:hidden; display:inline-block; width:60px; height:9px; background-color:#e5e5e5; position:absolute; top:18px; right:20px; overflow:hidden; border-radius:5px; }
span#passwordStrengthIndicatorWrapper span#passwordStrengthIndicator { display:inline-block; width:0px; height:100%; position:absolute; left:0; top:0; }
span#passwordStrengthIndicatorWrapper.short span#passwordStrengthIndicator { display:inline-block; width:100%; }
span#passwordStrengthIndicatorWrapper.weak span#passwordStrengthIndicator { display:inline-block; width:25%; background-color:#FF9216; }
span#passwordStrengthIndicatorWrapper.reasonable span#passwordStrengthIndicator { display:inline-block; width:40%; background-color:#ffcc4d; }
span#passwordStrengthIndicatorWrapper.good span#passwordStrengthIndicator { display:inline-block; width:55%; background-color:#3e721d; }
span#passwordStrengthIndicatorWrapper.strong span#passwordStrengthIndicator { display:inline-block; width:75%; background-color:#5c913b; }
span#passwordStrengthIndicatorWrapper.verystrong span#passwordStrengthIndicator { display:inline-block; width:100%; background-color:#77b255; }

#member span#passwordStrengthIndicatorWrapper { top:6px; right:10px; } 

#page-forgot-pass #passwordMatch { margin-bottom:10px; }
div.passwordFormWrapper input#password:focus + span#passwordStrengthIndicatorWrapper { visibility:visible; }

.passwordFormWrapper .notice { text-align:right; font-size:0.9em; color:#c33; }

table.table th,
table.table td { border:solid #999 1px; padding:3px 5px; }
table.table th { background-color:#fff; color:#333; border:none; }
table.table td.num { text-align:right; }
table.table.layout td { padding:0; }
table.table.layout td a { padding:0; margin:0; }
table.table.layout td span { display:inline-block; margin:5px; }
table.wide { width:100%; }

div.clear { clear:both; }

div.left-wrapper { width:210px; padding:0 5px 0 0; min-height:200px; display:inline-block; display:table-cell; position: relative; }
div.left-wrapper img { max-width:200px; }
div.middle-wrapper { max-width:445px; }
div.middle-wrapper { /*background-color:#f3f3f3;*/ display:inline-block; position:relative; width:auto; display:table-cell; }
div.middle-wrapper div.col { padding:0; position:relative; }
div.right-wrapper { width:215px; display:inline-block; padding:0 0 0 5px; display:table-cell; }

a,
.linkStyle { color:#f07622; text-decoration:none; }
.linkStyle { cursor:pointer; }
a[href^="tel:"] { text-decoration:none; }

h2 a { color:inherit; }

form label { display:block; max-width:360px; position:relative; margin:5px 0 0 0; cursor:default; }
form label span { display:inline-block; width:120px; text-align:right; vertical-align:top; color:#666; margin:0 10px 0 0; }
form label span.value { width:150px; overflow:visible; white-space:nowrap; }
form input,
form textarea { padding:2px 4px; }
form label input,
form label textarea,
form label select { display:inline-block; vertical-align:top; margin:0 0 0 0; } 
form label input[type=checkbox] { margin:4px 0 0 0; cursor:pointer; vertical-align:top; }
form label select { display:inline-block; vertical-align:top; margin:5px 0 0 0; } 
form label textarea { height:100px; width:200px; } 
form dd input { width:100%; max-width:280px; border:solid #cecece 1px; }
.wide input { width:100%; max-width:400px; }
form dd input.error { border:solid #c33 1px; outline-color:#c33; }
form input.middlename { width:60px; } 
form dl.vertical input.street { width:85%; max-width:205px; }
form dl.vertical input.housenumber { width:10%; min-width:35px; }
form input.date { width:100px; }
form input.date.new-style { width:145px; }
form input.time { width:60px; } 
form input.postal { width:80px; } 
form input.money { width:80px; } 
table.vertical td input.date { width:80px; } 
form label input.zipcode { width:80px; } 
form label.divider { margin-bottom:5px; }
form label.radio { display:inline-block; margin-right:6px; }
form label.button { margin-top:10px; }
form label.button input,
button.button,
input.button { border:solid #943933 1px; color:#943933; background-color:#E0E0E0; font-weight:bold; padding:5px 12px; }
input.button.delete { font-weight:normal; margin-left:10px; }
button.button.close { background-color:#f7f7f7; }

input[type=date] { width:145px; }
input[type=time] { width:100px; }

dl.vertical dd textarea { width:100%; max-width:256px; height:120px; }
dl.vertical.wide dd textarea { width:100%; max-width:400px; }

table.error th,
table.error td { border:solid #999 1px; vertical-align:top; padding:2px 3px; }

/* header */
#header { margin:0 auto; overflow:hidden; height:38px; }
#header ul { padding:0; margin:0; display:table; width:100%; white-space:nowrap; }
#header ul li { display:table-cell; margin:0; font-size:16px; vertical-align:top; line-height:10px; }
#header ul li a { display:inline-block; color:#fff; text-decoration:none; font-weight:bold; line-height:24px; vertical-align:top; }
#header ul li a.logout { border-right:none; }

nav {
	background-color:#f8c876;
	
	/*position:fixed; bottom:0; z-index:9999; width:100%; border-top:solid #efefef 1px; box-shadow:0px -4px 5px rgba(200, 200, 200, 0.4);*/
}

#header { }
#header ul { background-color:inherit;}
#header ul li { height:100%; display:flex; }
#header ul li.user a:focus span.wrapper span,
#header ul li.user a:active span.wrapper span { color:#943933; }
#header ul li.user a,
#header ul li span.responsiveButton {
	-webkit-tap-highlight-color:rgba(255, 255, 255, 0);
	line-height:14px;
	color:#943933;
	background-color:inherit;
}

#header ul li.user span.wrapper span { margin:3px 0 0 8px; font-weight:bold; }
#header ul li.user span.wrapper span.optional { margin:0; }
#header ul li.user a.current span { font-weight:bold; }
#header ul li.user span.responsiveButton span.wrapper { display:inline-block; }
#header ul li.user span.responsiveButton svg { color:#943933; height:17px; width:17px; margin:0; }
#header ul li.user a div.p { min-width:36px; }
nav ul.menu div.p { max-width:100%; width:100%; }

#header ul li.user span.wrapper { padding:12px 8px 7px 8px; }
#header ul li.user a span.wrapper svg { margin:0; }

html.no-touch #header ul li a.current span.wrapper,
html.no-touch #header ul li a.current div,
html.no-touch #header ul li a:hover span.wrapper,
html.no-touch #header ul li a:hover div { /*background-color:rgba(0, 0, 0, 0.06);*/ }
#header ul li a span.wrapper { display:inline-block; padding:6px 8px; white-space:nowrap; }
.menu a svg { top:-2px; position:relative; }
.menu a svg.newspaper { position:relative; top:0px; }
nav a div.p { display:inline-block; width:auto; overflow:hidden; max-width:36px; max-height:100%; height:100%; }
nav a div.p div { max-width:36px; max-height:100%; }


#header ul li span.responsiveButton { display:inline-block; width:43px; height:36px; cursor:pointer; flex:1; text-align:right; }
#header ul li span.responsiveButton svg { width:1.3em; height:1.3em; color:#fff; margin:7px 11px; }

#header ul li.home svg.icon { width:21px; height:19px; }

#header ul li.personal a { background-color:#f8c876; }
#header ul li.personal a:hover,
#header ul li.personal a:active,
#header ul li.personal a.current { border-bottom:solid #943933 3px; transition:all .1s ease-in-out; }
#header ul li.personal a.expensesTab span.wrapper span { display:none; }
#header ul li span.wrapper span { margin-left:7px; }
#header ul li span.wrapper span:empty { display:none; }
#header ul li span.wrapper span.hideTop { display:none; }
#header ul li#parsetimes span { display:inline-block; padding:9px 0; }

#notification { padding:0.4em 0.6em; border:solid green 2px; border-radius:10px; margin:0.7em 0; position:relative; }
#notification h3 { margin:5px 0; }
#notification p { margin:5px 25px 5px 0; line-height:1.5em; }
#notification div.button-wrapper { text-align:right; margin:0 1px 4px 0; }
#notification button { border-radius:3px; }

#notifications div.notification { border-bottom:solid #ff8430 1px; }
#notifications div.expired { opacity:0.7; }
#notifications p.info { background-color:#e5e5e5; padding:6px 8px; margin:0; }
#notifications p.info span.active { font-weight:bold; color:#c33; }

.button {
	margin: 8px 5px 15px 5px;
	padding: 6px 10px;
    border: solid 1px green;
    background-color: aliceblue;
    border-radius: 6px;    
    display: inline-block;
    text-decoration: none;
	font-weight:bold;
}
.button.simple {
	margin: 8px 5px 15px 5px;
	padding: 5px 12px;
    border: solid #943933 1px;
	color: #943933;
    background-color: #E0E0E0;
    border-radius: 3px;    
}
.button.simple svg.icon {
	margin-top: -2px;
}
a.button:hover { border-color:#003400; box-shadow: 1px 1px 1px 1px #e5e5e5; }
a.button.simple:hover { box-shadow: 1px 1px 1px 1px #e5e5e5; }

body.responsiveMenu #contentBox { position:relative; }

#contentBox ul { list-style:none; padding: 5px 0 10px 10px; }

div.table { display:table; }
div.table div.head { font-weight:bold; color:#333; }
a.r:hover { background-color: #e5e5e5; }
a.r,
label.r,
div.r { display:table-row; }
div.r.recent { font-weight: bold; }
div.d,
span.d { display:table-cell; }

div.d div.e { display:inline-block; }

.table.flat { width:100%; }
.table.flat .d { border:none; border-bottom:solid #333 1px; padding:0.3em 0.35em; }
.table.flat .head:first-child .d { border-bottom:solid #666 2px; }
.table.flat a.r { text-decoration:none; }
.table.flat .d { display: table-cell; }
.table.flat.link .d { word-break: break-all; }
.table.flat.link .d.noBreakALl { word-break: normal; }
.table.flat.link .r { text-decoration:none; height:100%; width:100%; }
.table.flat a:hover { background-color:#e5e5e5; }

.table.flat div.foot div.d { font-weight:bold; border-top:solid #000 1px; border-bottom:none; }

.table div.d.money { text-align:right; }
.table div.d.delete { width:25px; }
.table div.d.delete button{ margin:0; }

/* Global elements */


input.checkbox { width:auto; display:inline-block; vertical-align:middle; }
input[type=radio],
input[type=checkbox] { vertical-align:middle; width:auto; }

/* page specific elements */

/* login */
#page-login #outer-wrapper { min-height:auto; }
#login-wrapper,
#page-login #header,
#page-login #content { max-width:400px; margin:5px auto 20px auto; height:auto; }
#page-login #header-content { width:100%; padding-left:0.5em; display:flex; text-decoration:none; }
#page-login #logo-wrapper { display:inline-block; padding:5px; width:100px; flex: initial; }
#page-login #site-title-wrapper { display:inline-block; padding:0 5px 0 0.5em; height:100px; flex: 1; line-height:27px; display:flex; align-items: center; }
#page-login #site-title-wrapper div {  }
#page-login #site-title-wrapper p { font-size:1.4em; font-weight:bold; line-height:27px; }
#page-login #site-title-wrapper .top { color:rgb(233, 140, 0); margin:3px 0 0 0; }
#page-login #site-title-wrapper .bottom { color:rgb(207, 56, 53); margin:2px 0 0 0; }
#page-login h1 { font-size:1.3em; margin-bottom:0.5em; }

#page-login form { max-width:400px; padding:0 0 15px 0; border-bottom:solid #e5e5e5 1px;  }

div.submitWrapper { margin:10px 0 5px 0; padding-top:10px; border-top:solid #f8c876 1px; }
div.submitWrapper.noLine { border-top:none; }

#page-login div.controlGroup { margin:10px 0; position:relative; }
#page-login form input { width:100%; padding:12px 10px; border:solid #bbb 1px; }
#page-login form div.submit-wrapper { vertical-align:top; }
#page-login form div.submit-wrapper label {  }
#page-login form div.submit-wrapper label.keep { display:inline-block; margin:10px 0; width:40%; }
#page-login form div.submit-wrapper label.keep input { width:14px; margin:0 1px 0 0; vertical-align:middle; }

form #login-box .submit input {  }
#page-login form input.submit { width:200px; font-size:110%; margin:5px 0; }

#page-login form div.forgot-pass { display:inline-block; width:60%; margin:5px 0; text-align:right; }
#page-login form div.forgot-pass a { text-decoration:none; padding:5px 0; display:inline-block; }
#page-login p { text-align:left; color:#666; }
#page-login p a { color:#ff8430; text-decoration:none; }
#page-login a:hover { text-decoration:underline; }

#page-login h2  { font-size:1.2em; }

#page-forgot-pass #content { }
#page-forgot-pass #logo { margin:40px 0 40px 0; }

#page-forgot-pass form div.submit-wrapper { text-align:right; vertical-align:top; }
#page-forgot-pass form div.submit-wrapper label { width:110px; display:inline-block;  }
#page-forgot-pass form .submit input { width:auto; background-color:transparent; border:none; color:#7d7d7d; font-weight:bold; font-style:italic; text-decoration:underline; }
#page-forgot-pass form div.submit-wrapper span { width:auto; color:#7d7d7d; padding:1px 0; vertical-align:top; font-weight:normal; }
#page-forgot-pass form div.submit-wrapper input { width:auto; }

#page-login div.announcement p{ text-align:left; }


/* member */

#member div { line-height:20px; }
#member h2 { margin:0.8em 125px 0.6em 0; }
#member label.submit { margin-top:15px; }

#member div.middle-wrapper p { margin:15px 0 5px 0; color:#565656; font-size:100%; }
#member div.middle-wrapper dt span { font-size:80%; color:#565656; margin:5px 5px 0 0; }
#member div.middle-wrapper dt span.break { display:block; }

p.back { margin:1em 0.5em 0.6em 0 !important; }
p.back a { padding-left:4px; display:inline-block; }
#member div.photo-wrapper { position:relative; }
#member div.photo-wrapper div.waiter { position:absolute; left:50%; top:50%; width:16px; height:16px; z-index:100; }
#member div.photo { min-height:20px; margin:5px 0; }
#member #memberPhotos { line-height:0; }
#member #memberPhotos .photo:empty { display: none; }
#member div.photo img { cursor:pointer; }
#member p.toggleMap { text-decoration:underline; cursor:pointer; display:none; }
#map_canvas { width:100%; height:400px; }

div.parentsEditNotice { font-weight:bold; max-width:290px; margin:0 0 10px 0; }

div.personList a.parentChildRelationNotice { display:inline; justify-content:initial; text-decoration:underline; background-color:transparent; }

div.personList a.borderBtn { background-color:#fff; color:#943933; border:solid #943933 1px; margin:4px; border-radius:5px; padding:4px 7px; display:inline-block; width:auto; }
div.personList a.borderBtn.current { background-color:#f8c876; }

#mapWrapper #map { width:100%; height:800px; }
#mapWrapper div.personList { margin:0; display:table; width:100%; }
#mapWrapper div.personList div.p { width:45px; height:45px; min-width:45px; }
#mapWrapper div.personList div.p img { margin-top:-3px; }
#mapWrapper div.personList a span { font-weight:normal; }

#mapWrapper #listMapButtons { margin-top:-40px; text-align:right; }
#mapWrapper label span { width: auto; margin:3px 10px; }
#mapWrapper a:hover { color:#000; }

svg.icon { height:17px; width:18px; display: inline-block; vertical-align:middle; fill:currentColor; }


a.link-profile { position:absolute !important; top:-66px; right:5px; z-index:1000; }
a.link-profile i { display:none; }
a.action { display:inline-block; padding:2px 6px; border:solid #f8c876 1px; border-radius:3px; color:#943933; background-color:rgb(248, 200, 118); text-decoration:none; position:relative; }
a.action:hover::after { content:""; top:0; left:0; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.1); }
a.action svg { margin-top:-1px; }
a.action.right { position:absolute; right:0; top:0px; }

div.buttons { position:absolute; right:0; top:1em; }
div.buttons a.action.right {
	position:relative;
	max-width:12em;
	overflow:hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}

#contentBox div.details a.action.right { top:35px; }

#zoomableDest {
	background-color:#fff; text-align:center;
	position:absolute; left:0; right:0; top:10px;
	display:none; z-index:1200;
	margin:auto 15%;
	padding:37px 5px 5px 5px;
	border:solid #ff8430 2px;
}
#zoomableDest img {
	cursor:pointer;
	width:100px;
	max-height:100%;
}

#zoomableDest img.zoom {
	width:100%;
	transition:all 250ms ease;
	transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
}
#zoomableDest img.vertical.zoom { max-width:500px; }
#zoomableDest div.sharpening { position:absolute; top:0; width:100%; z-index:2000; display:none; }

/* Search overview */

div.personList a { display:flex; justify-content:space-between; margin:1px 0 0 0; text-decoration:none; color:#000; position:relative; }
div.personList a:first-child { border-top:solid #e5e5e5 0px; }
div.personList a.action  { border-top:solid #943933 1px; }
div.personList a.simpleBtn { display:inline; background-color:transparent; }
#home div.block { width:100%; margin-bottom:25px; }
#home div.personList a:hover,
#home div.personList a:active { background-color:#fff2db; }

div.personList { position:relative; }
#users div.personList { margin:0 0 20px 0; }
div.personList.form div.r { display:block; padding:0; position:relative; }
div.personList.form form,
form.icon { position:absolute; right: -20px; top:10px; }
div.personList.form button.delete { font-size:1em; margin:0; }
div.personList h3 { margin:12px 0 4px 0; padding:0 2px 4px 0; width:100%; position:relative; border-bottom:solid #f07622 1px; }
div.personList h3.latest { min-height:30px; }
div.personList a { width:100%; }
li.menu div.p div img,
div.personList a img { background-color:#e5e5e5; display:inline-block; max-width:100px; left:-1000%; right:-1000%; margin:0 auto; min-height:100%; min-width:100%; position:absolute; }
div.personList div {
	flex-grow:1;
	padding:8px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
div.personList a > div,
div.p.icon { border-top:solid #fff 0px; }
div.personList .descr { }
div.personList div.group { display:table; padding:0; width:100%; }
div.personList div.p,
div.p.icon { width:60px; height:60px; min-width:60px; padding:0; overflow:hidden; flex-grow:0; }
li.menu div.p div,
ul.menu div.p div,
div.p.icon div,
div.personList div.p div { padding:0; width:100%; height:100%; overflow:hidden; position:relative; display:inline-block; }
div.personList a span { display:block; font-weight:bold; }
div.personList span.churchCouncil { display:inline; font-weight:normal; font-style:italic; }
div.personList mark { background-color:#FFB989; display:inline; }
div.personList div#result-info { position:relative; margin:7px 0 -35px 0; font-weight:normal; font-size:1em; padding:0; text-align:right; z-index:1000; }
div.personList label { width:auto; padding:2px 1px; }
div.personList div.end-latest-faces { border-bottom:solid #f07622 2px; height:8px; padding:0; display:block; }

#home div.personList a.simpleBtn { margin:0 0 0 10px; color:#943933; }
#home div.personList a.simpleBtn:hover { color:#666; background-color:#fff; }
#home div.personList a.simpleBtn.stats { margin-right:10px; }

div#siblings.personList div.l { width:130px; }
div#siblings.personList ul { margin:0; list-style:none; padding:0; }

#bibleGroups { margin:0 0 20px 0; }
#bibleGroups.form form,
.bibleGroupInfo { /*max-width:450px;*/ display:inline-block; }
#bibleGroups.list div.bibleGroup { border-bottom:solid 1px #f07622; }
div.bibleGroup { margin:10px 0 5px 0; }
#bibleGroups .personList { /*max-width:400px;*/ display:inline-block; }
#bibleGroups div.table .personList { max-width:425px; display:inline-block; }

#admin textarea { max-width:none; }
#admin .personList div.p,
#bibleGroups .personList div.p,
#bibleGroups div.p.icon,
#expenseClaims .personList div.p { width:40px; height:40px; min-width:40px; }
#volunteering.view .r div.d { width:auto; }
#volunteering.view .r div.d:first-child { padding:1px 0; width:40px; }
#volunteering.view .r div.d:nth-child(2) { width:35%; }
#volunteering div.p.icon { width:30px; height:30px; min-width:30px; border:none; }
#bibleGroups .personList h4 { margin:1.3em 0 0.3em 0; }

#bibleGroups .personList.small { width:230px; line-height:0; }
#bibleGroups div.table .personList.small { width:100%; line-height:0; margin:0; }
#bibleGroups .personList.small h3 { margin-top:0; text-indent:0; }
#groups .personList.small a,
#bibleGroups .personList.small a { display:inline-block; width:45px; height:45px; margin:1px 1px 0 0; overflow:hidden; }

div.personList.small a div { display:inline-block; border-top:none; }

#groups .personList.small a div.p,
#bibleGroups .personList.small a div.p { width:100%; height:100%; min-width:auto; }

#bibleGroups .personList.extraInfo div.p { width:60px; height:60px; }

div.table a.bibleGroup.d { display:table-cell; }
div.table a.bibleGroup { display:block; text-decoration:none; padding:0; color:#000; }
div.table a.bibleGroup:hover { background-color:#e5e5e5; }
div.table .d { border-bottom:solid #666 1px; }
div.table .d.icon { width:30px; }
div.table .d .d { border-bottom:none; }

div.table.form .d { padding:3px 2px; }

#bibleGroups div.table .d .d,
#bibleGroups div.table .d .d { padding:0.4em 0.3em; }
#bibleGroups div.table.info .d { text-align:center; }
#bibleGroups div.table.info .d1 { width:28%; }
#bibleGroups div.table.info .d2 { width:28%; }
#bibleGroups div.table.info .d3 { width:44%; }
#bibleGroups div.table .photos { padding:0.4em 0.2em; }

#groups div.table .d .d,
#groups div.table .d .d { padding:0.4em 0.3em; }
#groups div.table.info .d { text-align:left; }
#groups div.table.info .d1 { width:28%; }
#groups div.table.info .d2 { width:28%; }
#groups div.table.info .d3 { width:44%; }
#groups div.table .photos { padding:0.4em 0.2em; }

#groups h2 { margin-bottom:0; }
#groups h3 { margin:8px 0 0 0; }
#groups h3 a { text-decoration:none; }
#groups p { margin:0 0 8px 0; }
#groups a.noLink { text-decoration:none; }

#groups .category-wrapper { /*border-top:solid #999 1px;*/ }
#groups .groups {
	margin-top:5px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap:1rem;
	justify-content: space-between;
}

#groups .group-wrapper { border:solid #ccc 1px; padding:5px 10px; min-width:200px; position:relative; }

#groups h3 { border-bottom:solid #ccc 0px; padding-bottom:3px; color:#000; }
#groups a:hover h3 { text-decoration:underline; }
#groups .information { color:#666; }
#groups .description { border-bottom:solid #ccc 0px; padding:10px 0 5px 0; }
#groups .description:empty { display:none; }
.group-wrapper .description a { text-decoration:none; color:#f07622; }
#groups .information p { margin-bottom:15px; }
#groups .personList { padding-top:5px; }
.group-wrapper .contact-persons { margin:0 0 1em 0; }
.group-wrapper .contact-persons ul { margin:0; padding:0 !important; }
.group-wrapper .contact-persons ul li { padding:1px 0; }
.group-wrapper .contact-persons a { text-decoration:none; color:#f07622; }

#contentBox .group-wrapper .description ul { list-style-type:square; padding:0 0 0 20px; }

#groups .group { max-width:600px; margin-bottom:20px; }

#contentBox .groups-in-user-profile ul { list-style-type:square; padding:0 10px 10px 10px; margin-left:10px; }
#contentBox .groups-in-user-profile li { margin:5px 0; }


#contactBox { display:inline-block; width:500px;}
#searchBox { display:inline-block; width:100%; vertical-align:top; background-color:#e5e5e5; z-index:6000; max-width:860px; padding:2px 5px; }
#searchBox form { position:relative; }
#searchBox label.w { width:190px; margin-right:2px; }
#searchBox label.w input{ width:100%; box-sizing:border-box; height:1.55em; }
#searchBox input { margin-top:2px; }
#searchBox input[type=checkbox] { width:auto; margin:6px 0; }
#searchBox label { display:inline-block; width:auto; margin-top:4px; }
#searchBox span { display:inline-block; width:auto; margin:4px 7px 2px 1px; }
#searchBox .searchElement svg.icon { margin:4px 5px 0 5px; }



#calendar #searchBox label.w input { padding-top:0; padding-bottom:0; margin-top:0px; }

#searchBox .waiter { width:16px; height:16px; top:0; right:0; position:absolute; margin:10px; }
#inner-wrapper .toTop {	display:none; }

.waiter { text-align:center; }
#users .waiter { padding-bottom:20px; }
#searchBox.fixedElement { position:fixed; width:auto; top:0; left:5px; right:5px; margin:0 auto; z-index:2000; transition:0.6s; }
body.responsiveMenu #searchBox.fixedElement { position:initial; }

#searchBox div.searchElement { display:inline-block; color:#666; margin:0 5px 0 0; min-height:25px; vertical-align:top; }
#searchBox div.searchElement * { vertical-align:middle; }
#searchBox div.searchElement a { text-decoration:none; display:inline-block; font-style:italic; margin:0 2px 0 1px; }
#searchBox div.searchElement a:hover { text-decoration:underline; }
#searchBox div.searchElement h4 { margin:4px 5px 0 0; padding:0; display:inline-block; }
#searchBox div.searchElement select { margin-top:2px; color:#666; height:24px; }

#contentBox ul.filterButtons { margin:10px 0; padding:0; }
#contentBox ul.filterButtons li { margin:2px 0; display:inline-block; }
#contentBox ul.filterButtons li a { display:block; padding:6px 10px; background-color:#f2f2f2; border:solid #f2f2f2 1px; border-radius:15px; color:#333; }
#contentBox ul.filterButtons li.current a,
#contentBox ul.filterButtons li a:hover { background-color:#e5e5e5; border:solid #aaa 1px; }

ul.messages { padding:5px 10px!important; list-style:none; margin:10px 0; border-radius:5px; font-weight:bold; }
ul.messages.notice { background-color:#f2fff8; color:#127f0a; border:solid green 1px; }
ul.messages.notice a { color:#127f0a; text-decoration:underline; }
ul.messages.alert { background-color:#fff2f2; color:#cc0000; border:solid #c33 1px; }

p.notice { color:#666; }

p.succes-message { color:#127f0a; font-weight:bold; background-color:#cdcdcd; padding:3px 4px;}
p.succes-message:empty { display:none; }

p.noProfilePhotoNotice a { display:inline; background-color:transparent; text-decoration:underline;}

/* dynamic searchbox */
div#relationsWrapper { width:100%; position:relative; margin-bottom:30px; padding:5px 0; }
div#relationsWrapper div.relationType { width:100%; display:inline-block; }
div#relationsWrapper div.l { width:auto; }
div#relationsWrapper h2 { margin:0.7em 0 0.5em 0.5em; }
div#relationsWrapper h3 { margin:0.7em 0 0.5em 0.5em; }
h3 { margin:15px 0 10px 0; }
div#relationsWrapper p { margin:8px 7px; }
div#relationsWrapper div.personList { display:table; width:100%; }
div#relationsWrapper div.add { background-color:#f8c876; padding:1px 0; max-width:200px; }
div#relationsWrapper div.add input { margin:5px 7px; width:178px; }
div#relationsWrapper div.add h3 { margin-left:7px; }

div#relationsTarget { }
  
div#relationsWrapper #choiceBox label { display:block; }
div#relationsWrapper #choiceBox input { width:auto; }
#member span.del { position:absolute; right:5px; bottom:5px; width:13px; height:13px; padding:2px; margin:0; line-height:10px; text-align:center; display:none; color:#f07622; cursor:pointer; }
#member .photo-wrapper span.del { right:15px; bottom:15px; }
#member .photo-wrapper:hover span.del,
#member a:hover span.del { display:block;  }
#member .photo-wrapper span.del:hover,
#member a:hover span.del:hover { background-color:#ff8430; color:#F0F0F0;  }

#choiceBox { display:block; }
#choiceBox label:hover { background-color:#ff8430; cursor:pointer; }

div.progressBarWrapper { display:none; margin:10px 5px; }
div.progressBarWrapper div.progressBar { margin:3px 5px; width:150px; height:12px; padding:1px; border:solid orange 1px; margin:5px 0; }
div.progressBarWrapper div.progress { height:100%; width:0; background-color:#ff8430; }
 
div.progress-wrapper { position:absolute; bottom:0; left:0; right:0; z-index:100; }
div.progress-wrapper div{ display:inline-block; }
div.progress-bar { border-bottom:solid #f07622 0px; height:12px; width:100%; vertical-align:bottom; }
div.progress-bar div.progress { background-color:#f8c876; height:12px; width:0; }
div.progress-wrapper div.percentage { height:18px; width:18%; padding:0 3px; }
 
div#container { margin:10px 0; }

#contentBox { position:relative; padding:0.1px 0 1.5em 0; }
#contentBox ul.tabs { list-style:none; margin:10px 0 0 0; padding:0; }
#contentBox ul.tabs li { display:inline-block; background-color:#E2E2E2; padding:3px 6px; cursor:pointer; }
#contentBox ul.tabs li:hover { background-color:#E0E0E0 !important; }
#contentBox ul.tabs li.active { background-color:#C7C7C7; font-weight:bold; }
#contentBox ul.tabs li.active:hover { background-color:#C7C7C7 !important; }

fieldset.photo-field { background-color:#C7C7C7; width:100%; }

fieldset.photo-field * { word-wrap:break-word; }
fieldset.photo-field a,
fieldset.photo-field p,
fieldset.photo-field input { margin:0.5em 0.5em 0.8em 0.5em; clear:both; }

fieldset.photo-field.profile p.group { display:none; }
fieldset.photo-field.group p.profile { display:none; }

dl { width:100%; margin:0 0 10px 0; line-height:1.3em; position:relative; }
dl dt, dl dd { display:inline-block; margin:3px 0; line-height:1.5em; }
dl dt { width:33%; min-width:120px; text-indent:6px; vertical-align:top; }
dl dd { width:67%; clear:right; }
dl dd a { word-wrap:break-word; }

dl.small-head dt { width:20%; }
dl.small-head dd { width:79%; }
dl.small-head dd input { width:auto; max-width:none; }

dl.left { max-width:450px; display:inline-block; }
div.right.right-content { max-width:350px; display:inline-block; }

div.table { display:table; width:100%; }
div.table .row { display:table-row; }
div.table .row div { display:table-cell; }

div.table.settings { width:auto; }

div.table.settings div.row { display:block; padding:3px 0; }

div#birthdays { display:flex; padding:0; flex-wrap:wrap; justify-content:space-around; }
div#birthdays h4 { margin:0 0.4em 0.3em 0em; }
div#birthdays div.dayWrapper { flex:33%; margin:0; padding:2px; width:33.32%; box-sizing:border-box; }
div#birthdays div.day { width:100%; display:block; padding:0; margin-bottom:8px; }
#home #birthdays div.day { margin-bottom:0; }
#home #birthdays div.day div.name { padding:6px 10px; }
p.more { color:#757575; font-weight:bold; }
p.more a { font-weight:bold; } 
#home div#birthdays p.more a:hover { background-color:transparent; }
div#birthdays div.p { width:30px; height:30px; min-width:30px; }
div#birthdays div.p div { width:30px; height:30px; }

#login-box dl dt { width:36%; text-align:right; color:#b45c5a; }
#login-box dl dd { width:64%; text-align:right; color:#b45c5a; }
#login-box dl dt span { margin-right:5px; }

#page-forgot-pass #login-box dl dt { width:46%; }
#page-forgot-pass #login-box dl dd { width:54%; }

#weeklyLetter #contentBox { padding:10px; }

#weeklyLettersForm table { max-width:400px; }
#weeklyLetters { max-width:500px; }
#weeklyLetters.edit { max-width:600px; }
#weeklyLetters h3 { text-decoration:underline; cursor:pointer; font-size:1.1em; background-color:#F0F0F0; }
#weeklyLetters h4 { margin:10px 0 0 0; }
#weeklyLetters a { }
#weeklyLetters a.file {vertical-align:top; text-decoration:none; overflow:hidden;  text-overflow:ellipsis; max-width:0; color:#000; }
#weeklyLetters div.name { vertical-align:top; word-break: break-all; }
#weeklyLetters span.download { width:20%; display:inline-block; }
#weeklyLetters span.download a.file { text-indent:5px; }

#weeklyLetters div.d { }
#weeklyLetters div.date { white-space:nowrap; max-width:200px;  }
#admin form label,
#weeklyletter form label { max-width:450px;  }


.documents a.file { color:#333; }
.documents a.file svg { margin-top:-2px; }
.documents .table.flat a.file { color:#333; padding:7px 5px; }


#stats-wrapper div.stats { padding:10px 10px; display:inline-block; }
#stats-wrapper div.stats a { word-break:break-all; }

#parsetime { display:none; }
#parsetime tr { border:solid #999 1px; }
#parsetime td { vertical-align:top; }

#mailingWrapper { padding-bottom:10px; }
#mailingWrapper ul { margin:0; padding:5px 0 10px 10px; list-style:none; }
#mailingWrapper label { width:100%; }
#mailingWrapper label span { width:90%; display:inline-block; text-align:left; }
#mailingWrapper label span em { font-size:90%;}

#mailing h1 em.state { font-size:75%; }

#mailing div.row { padding:3px 0; }
#mailing form label select { margin:0; }
#mailing label { width:100%; max-width:100%; }
#mailing label span{ font-weight:bold; width:auto; margin:0; overflow:hidden; display:inline-block; max-height:70px; cursor:pointer; }
#mailing #currentRecipients { padding-top:5px; box-sizing:border-box; overflow:hidden; display:none; }
#mailing #currentRecipients span { font-weight:normal; }
#mailing span.currentRecipientsNumber { display:inline-block; vertical-align:top; font-weight:bold; }
#mailing #toggleRecipients { font-style:italic; cursor:pointer; color:#f07622; margin-left:5px; }

#mailing table { position:relative; width:100%; }
#mailing table th.dateTime { width:10em; }
#mailing table th,
#mailing table td{}

#mailing .fileList {
	max-height:200px;
	padding:0 5px 4px 5px;
	overflow-x: auto;
	border:solid #666 1px;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
}
#mailing .fileList .file {
	width:315px;
	margin-right:5px;
	display:flex;
}
#mailing .fileList .file label {
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;
	width:82%;
}
#mailing .fileList .file .fileSize { margin:5px 0 0 3px; }

button { padding:1px 2px; vertical-align:top; }
button.delete { margin-left:30px; border:none; background:transparent; }
button.delete.fa { font-size:1.5em; }
input.send { margin-left:10px; }

div.table .rank { display:inline-block; width:20px; text-align:right; padding:2px 4px; }

div.table button { cursor:pointer; border:solid #ddd 1px; color:#999; border-radius:2px; background-color:#eee; margin:0 0 0 3px; padding:2px 4px; overflow:hidden; height:100%; }
div.table button svg { margin-top:-1px; }
div.table input[text] { border:solid #999 1px; border-radius: 2px; padding:2px 5px; height:100%; }
div.table.form .r { height:32px; }
div.table.form .r.head .d { text-overflow: ellipsis; overflow:hidden; word-break:break-all; min-width:35px; }
div.table.form .r .d { border:0; }
div.table.form .r .d.name { max-width:250px; }
div.table.form .r input[text] { display:inline-block; }
div.table.form .r select {  max-width:100%; }

div.table.form button:hover { background-color:#ddd; }
div.table.form button.deleteRow:hover { color:#e16968; }
div.table.form button.addRow { color:#ff8300; }

div.table.index .r .d { padding:8px 8px; }

.dragHandle { padding-top:6px !important; cursor:grab; width:30px; }
.dragHandle svg { color:#999; }
.group-wrapper .dragHandle { position:absolute; right:-10px; top:-2px; }

.sortable-placeholder div.d { border-top:solid #e4e3e3 1px !important; border-bottom:solid #e4e3e3 1px !important; }
.sortable-placeholder div.d:first-child { border-left:solid #e4e3e3 1px !important; }
.sortable-placeholder div.d:last-child { border-right:solid #e4e3e3 1px !important; }

span.button { display:inline-block; }

span.block { display:inline-block; width:9px; height:9px; background-color:#e5e5e5; }
#changelog span.admins { background-color:#999; }
#changelog span.all { background-color:#999; }

div.tabWrapper div.tabs { padding:2px 7px 0 7px; margin-bottom:-1px; position:relative; z-index:100; display:flex; }
div.tabWrapper a.tab { cursor:pointer; text-decoration:none; flex:0 auto; border:solid #999 1px; padding:0.5em 0.6em; margin:0 0.15em; vertical-align:bottom; background-color:#E7E7E7; }
div.tabWrapper a.tab.current { background-color:#f7f7f7; border-bottom:solid #f7f7f7 1px;  font-weight:bold; }
div.tabContent { border:solid #999 1px; position:relative; background-color:#f7f7f7; padding:0.3em 0.8em 0.8em 0.8em; width:100%; }
div.tabContent.current { position:relative; }

div.tabWrapper div.tabs { overflow:hidden; }
div.tabWrapper a.tab { display:flex; color:#000; }
div.tabWrapper a.tab svg,
div.tabWrapper a.tab span { flex:0 auto; }
div.tabWrapper a.tab span { margin:0 0 0 5px; line-height:16px; }
div.tabWrapper a.tab span:empty { display:none; }

#volunteering.index h2 { margin:1.2em 0 -0.5em 0; }
#volunteering.form h2 { margin:1.2em 0 0.5em 0; }
#volunteering h3 { margin:1em 0 0.4em 0; }
div.table a.r { text-decoration:none; color:#333; }
#volunteering div.table a svg { color:#999; }
#volunteering div.table { width:100%; }
#volunteering.index div.table div.head div.d { width:20%; }
#volunteering.index div.table div.head div.d:first-child { width:40%; }
#volunteering div.table div.d { padding:3px 2px; height:2em; vertical-align:middle; overflow-wrap: break-word;word-wrap: break-word; word-break: break-word; hyphens:auto;-webkit-hyphens: auto; }
#volunteering div.table div.d.name { width:50%; }
#volunteering input.note { display:none; }
#volunteering input.note.active { display:inline-block; }

.tableForm .row.head { color:#666; }
.tableForm .row { display:flex; flex-wrap:no-wrap; padding:5px 0; border-top:solid #e5e5e5 1px; }
.tableForm .row:last-child { border-bottom:solid #e5e5e5 1px; }
.tableForm.form .name { min-width:240px; margin:5px 0 3px 0; font-weight:bold; }
.tableForm.form .headCol { font-weight:normal ;}
.tableForm .fields { margin:0; }
.tableForm .cell { margin:5px 0 3px 0; font-weight:bold; }
.tableForm .group { margin:5px 0 3px 0; font-weight:bold; flex:0 0 210px; }
.tableForm .options { display:inline-block; min-width:250px; }
.tableForm .divider { display:inline-block; width:1px; min-height:29px; border-right:solid #999 1px; margin:0 2px; }

.tableForm #currentlyDoing { margin-top:30px; }

.tableForm form label { display:inline-block; background-color:#e5e5e5; width:4.5em; padding:5px 10px; cursor:pointer; margin:0 1px; text-align:center; border-radius:5px; }
.tableForm form label.currentlyDoing { width:5.5em; }
.tableForm form label:hover { background-color:#fddca3; }
.tableForm input[type="radio"],
.tableForm input[type="checkbox"] {
	display:none;
}
.tableForm input[type="radio"]:checked + label,
.tableForm input[type="checkbox"]:checked + label { 
    background-color:#f8c876;
	font-weight:bold;
	color:#333;
}
.tableForm input[type="text"] { 
	width:250px;
    margin-top:2px;
	padding:3px 4px;
	border-radius:2px;
	border:solid #a9a9a9 1px;
}

.tableForm p { margin:0.6em 0 0.2em 0; }
.tableForm textarea {
	width: 100%;
    max-width:100%;
    height: 120px;
}

input[type=number] { border-width:1px; width: 60px; }

#churchService .churchService { margin-bottom:15px; padding-bottom:10px; border-top:solid #ff9800 2px; position:relative; }
#churchService .age { color:#333; font-weight:normal; }

#churchService .status { font-weight:bold; }
#churchService .status svg { width:18px; height:18px; margin-top:-4px; }
#churchService .status.undecided svg { width:16px; height:16px; }
#churchService .status.not_invited svg { margin-top:-2px; }
#churchService .undecided,
#churchService .withdrawn { color:#666; }
#churchService .invited { color:green; }
#churchService .not_invited { color:red; }
#churchService .status .label { color:#666; }

#churchService.tableForm .rowGroup { margin-bottom:10px; }
#churchService.tableForm .row:first-child { border-top:none; }
#churchService.tableForm .row.submit { border-bottom:none; }
#churchService h2 { margin-bottom:0; }
#churchService .serviceInfo { margin:5px 0 15px 0; }
#churchService .info { position:absolute; top:15px; right:5px; }

#churchService .statusWrapper { padding:8px; border:solid #666 1px; border-radius:5px; max-width:520px; margin-bottom:10px; }
#churchService .statusWrapper p { margin-top:0; }

#churchService .rowGroup .totals { text-align:right; padding-right:3px; font-weight: normal; font-style: italic; }
#churchService .rowGroup .totals.number { text-align:left; }
#churchService .rowGroup .totals .button { margin-top:10px; }
#churchService .rowGroup .totals .visitorNumberTotal{ font-weight: bold; }

#churchService.admin .status span { display:inline; }

#churchService label { width:100%; max-width:100%; }

svg.legend { color:#666; }

p.bottomMargin { margin:15px 0 5px 0; }
p.noTopMargin { margin-top:0; }

.round {
	display:inline-block;
	width:10px;
	height:10px;
	margin:0 4px -1px 0;
	border:solid #666 1px;
	border-radius:10px;
	box-shadow: 0 0 1px transparent;
}
.round.closed {
	background-color: #666;
}

@media (max-width: 640px) 
{
	#volunteering .row { width:100%; }
	#volunteering .fields { width:100%;  }
	#volunteering .options { width:100%; min-width:auto; display:flex; }
	#volunteering .divider.expl { display:none; }
	#volunteering form label { width:19%; padding:7px 8px; }
	#volunteering form label.currentlyDoing { width:24%; }
	#volunteering form label:hover { background-color:#e5e5e5; }
	#volunteering input[type="text"] {
	    margin-top:6px;
		width:100%;
	}
	
	#churchService.admin .status .label { display:none; }
	
	.tableWrapper { overflow-x:scroll; }
	.tableWrapper .scroll { min-width:450px; }
	.tableWrapper .name { max-width:120px; }
}

#volunteeringUser h4 { color:#000; font-size:15px; margin:15px 0 5px 0; }
#volunteeringUser .category {
	text-decoration:none;
	border:solid #666 1px;
	color:#666;
	padding:6px 10px;
	display:inline-block;
	margin:2px 1px 2px 0;
	border-radius:8px;
}
#volunteeringUser .category:active,
#volunteeringUser .category:hover {
	background-color:#f0f0f0;
}
/*
#volunteeringUser .category.few {
	background-color:#ffbb55;
}
#volunteeringUser .category.reasonable {
	background-color:#ffaa2a;
}
#volunteeringUser .category.many {
	background-color:#ff9900;
}*/

span.expl { font-style:italic; font-size:80%; color:#8B8B8B; margin:5px 5px 0 0; }

#calendar div.r div.d { padding:2px 3px; border-bottom:solid #999 1px }
#calendar div.date { width:5.2em; }
#calendar a.activity { display:block; text-decoration:none; padding:2px 3px; color:#000; }
#calendar a.activity:hover { background-color:#e5e5e5; }
#calendar a.activity span.time { color:#000; width:6em; display:table-cell; }
#calendar a.activity span.block { margin:2px 4px 0 4px; }
#calendar a.activity span.name { font-weight:bold; }

#calendar div.past { color:#999; }
#calendar div.past a.activity { font-weight:normal; color:#999; }
#calendar div.past span.block { position:relative; }
#calendar div.past span.block::after { content:""; top:0; left:0; position:absolute; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.5); }

#calendar #dateTimeOptions label { display:inline-block; margin-right:5px; }

#calendar.import .title { width:320px; }
#calendar.import .date { width:90px; }
#calendar.import .time { width:65px; }
#calendar.import td { padding:1px 0; }
#calendar.import td input { width:100%; font-size:0.9em; }

select.searchable { width:100%; max-width:400px; }

div.hide { display:none; }

#expenseClaims span.date,
#expenseClaims span.description  { font-weight:bold; color:#333; }
#expenseClaims div.amount { color:#333; }

#expenseClaims svg.icon-declared { color:gray; }
#expenseClaims svg.icon-approved { color:orange; }
#expenseClaims svg.icon-payed { color:green; }

#expenseClaims span.warning { color:red; }
#expenseClaims div.head-status { min-width:1.5em; max-width:2.2em; }

#documents a div.date { width: 6em; }
#documents a div.type { width: 8.3em; }
#documents a div.name { word-break:break-all; }

#documents #dateInfo {
	font-style: italic;
    font-size: 100%;
    color: #4dab50;
    font-weight: bold;
}

#imageCropperWrapper {
	min-width:350px;
	max-width:400px;
	position:fixed;
	top:50px;
	margin: 1% auto;
	left: 0;
	right: 0;
	display:block;
	z-index:3000;
	display:none;
} 
#image-cropper {
	padding:5px 20px 20px 20px;
	position:relative;
	background-color:#fff;
	border:solid #ff8430 2px;
}
#image-cropper img { max-width:none; }
#image-cropper .cropit-preview-image-container { cursor: move; }
#image-cropper .cropit-image-wrapper { margin:25px auto 5px auto; width:200px; height:220px; }
#image-cropper.group .cropit-image-wrapper { margin:25px auto 5px auto; width:300px; height:250px; }
#image-cropper .cropit-image-input { height:1px; line-height:1px;  }
#image-cropper .cropit-preview { width:200px; height:220px; }
#image-cropper .spinner { display:none; }
.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #999;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.marker {
    background-image: url('/img/marker2.png');
    background-size: cover;
    width: 20px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
#image-cropper .cropit-preview-background { opacity: .2;}
#image-cropper .cropit-slider-wrapper { margin:30px 0; text-align:center; }
#image-cropper .cropit-slider-wrapper .cropit-image-zoom-input { width:180px; margin:10px 8px; display:inline-block;  }
#image-cropper .cropit-slider-wrapper svg { display:inline-block; cursor:pointer; }
#image-cropper .cropit-slider-wrapper svg.smaller { width:16px; height:16px; }
#image-cropper .cropit-slider-wrapper svg.bigger { width:22px; height:22px; }
svg.closeIcon { width:28px; height:28px; position:absolute; top:5px; right:5px; color:#999; cursor:pointer; }

#image-cropper #cropitErrorMsg { color:#dc2929; margin:10px 0; }

#modalBackground { position:fixed; z-index:2000; display:none; top:0; right:0; bottom:0; left:0; opacity:0.8; background-color:#333; }

#impersonatedNotice { background-color:#c33; color:#fff; padding:8px 15px; font-weight:bold; border-bottom:solid #fff 2px; }

#personsInGroup { max-width:600px; }

.pager {
	width:100%;
	display:inline-block;
	text-align:left;
}

footer.bottom .pager { width:610px; }
.pager ul {
	list-style-type:none;
	padding:0 !important;
}

.pager li {
	display:inline-block;
	margin-right:6px;
}

.pager li a {
	background:none;
	display:block;
	padding:2px 10px 4px 10px;
	width:auto;
	height:auto;
	border:1px solid #fff;
	border-radius:3px;
	line-height:20px;
	color:#333;
}
.pager li.next-previous a { border:1px solid #2c2c2c; }
.pager li.next-previous a:hover { border:1px solid #2c2c2c; }

.pager li.active a,
.pager li a:hover {
	background-color:#e5e5e5;
	border:1px solid #e5e5e5;
}

.mapboxgl-popup-close-button { padding:5px 8px; color: #333; font-size: 1.3em; font-weight: bold; }

video { max-width: 720px; }

@media screen and (max-width:720px)
{
    video {
        max-width: 100%;
    }
}

@media screen and (max-width:865px)
{

	#volunteering fieldset p { margin:0.5em 0 0.2em 0;  }

	#contentBox { padding:0.1px 0.4em 1.5em 0.4em; }
	
	div.buttons { right:0.4em; }

	#calendar h2,
	#volunteering h2 { margin-left:0; margin-bottom:0; }
	#volunteering.index h2 { margin-bottom:0; }
	
	#bibleGroups.list { margin:0; }
	#bibleGroups.list a.bibleGroup { text-decoration:underline; }

	#expenseClaims div.head-status { text-indent:-1000px; }
	
	#inner-wrapper .toTop {
		display:none; position:fixed; bottom:20px; right:8px; z-index:5000;
	}
	#inner-wrapper .toTop div { padding:6px; margin:8px;
		color:#943933; background-color:#f8c876; border:solid #943933 1px; border-radius: 4px;
	}

	body.scroll.fotogids #inner-wrapper .toTop { display:block; }
	
	body.scroll.fotogids #inner-wrapper .toTop div {
		animation: toTop 1s forwards;
	}
	@keyframes toTop {
		from { opacity:0; }
		to   { opacity:1; }
	}
}

@media screen and (max-width:767px)
{
	#imageCropperWrapper {
		max-width:400px;
		top:10px;
	}
	body { font-size:85%; }
	body#page-login { font-size:90%; }

	#outer-wrapper,
	#searchBox { width:100%; }
	#searchBox label.w { width:110px; }
	#searchBox div.searchElement h4 { display:none; }
	#searchBox.fixedElement.slideHide { top:-100%; }
	#searchBox.fixedElement.slideShow { top:0; }
	#weeklyLetter #outer-wrapper,
	#weeklyLetter #searchBox { min-width:320px; max-width:768px; width:100%; }
	#header ul { height:auto; }

	div#content { min-height:350px; }
	
	div.left-wrapper { display:table-cell; padding:0; }
	div.middle-wrapper { max-width:640px; display:table-cell; }
	#member p.toggleMap { display:block; }
	div#map_canvas { display:none; }
	div#map_canvas.display { display:block; }
	div.right-wrapper { width:150px; }
	
	a.link-profile { width:auto; height:auto; top:-33px; right:0.4em; text-align:center; } 
	a.link-profile span { display:none; }
	a.link-profile i { display:inline-block; font-size:1.6em; color:#333; margin:4px 0; }
	
	nav {
		background-color:#f8c876;
		
		/*position:fixed; bottom:0; z-index:9999; width:100%; border-top:solid #efefef 1px; box-shadow:0px -4px 5px rgba(200, 200, 200, 0.4);*/
	}
	
	#header { height:52px; }

	#header ul li.user a,
	#header ul li span.responsiveButton { -webkit-tap-highlight-color:rgba(255, 255, 255, 0);
		line-height:14px; height:100%; flex: 1 1 0; text-align: center;
	}
	#header ul li.user a.optional { display:none; }
	#responsiveMenu h2 { padding: 23px 10px 0 10px; height:52px; }
	#responsiveMenu li a.optional { display:block; }
	#responsiveMenu li a.ownProfile { padding:8px 10px; }
	
	
	#header ul li.user span.wrapper span { display:block; font-size:0.75em; margin:3px 0 0 0; font-weight:bold; }
	#header ul li.user span.wrapper span span.optional { display:none; }
	#header ul li.user span.responsiveButton span.wrapper { display:inline-block; }
	#header ul li.user span.responsiveButton svg { color:#943933; height:17px; width:17px; margin:0; }
	
	#header ul li.user span.wrapper { text-align:center; padding:9px 4px 7px 4px; }
	#header ul li.user a span.wrapper svg { margin:0; }
	
	
	div#relationsWrapper div.relationType  {  }
	div#birthdays div.dayWrapper { display:block; width:100%; }

	#stats-wrapper div.stats { width:100%; padding:0; }
	
	#bibleGroups button { margin:0.4em 0; }
	
	div.middle-wrapper #bibleGroups { margin: 0; }
	#bibleGroups div.d { font-size:0.95em; }
	
	#mapWrapper #map { width:100%; height:400px; }
	
	.resp { margin-left:0.5em !important; margin-right:0.5em !important; }
	
	form input.date.new-style { width:110px; }
	
	#groups .groups { grid-template-columns: repeat(2, 1fr); } 
	
	.buttons .optional { display:none; }
}
@media screen and (max-width:768px)
{
	.tabs a.mailing span { display:none; }
}
@media screen and (max-width:597px)
{
	div.right-wrapper { display:inline-block; width:100%; }
}

@media screen and (max-width:600px)
{
	a[href^="tel:"] { text-decoration:underline; }
	
	div.right-wrapper { padding:0; }
	div.middle-wrapper { display:block; width:100%; }
	
	#members { font-size:85%; }

	div#result-info { font-size:90%; }
	#responsiveMenu { font-size:1.1em; bottom:0; }
	
	#member div.left-wrapper { display:block; width:100%; min-height:auto; }
	#member div.left-wrapper div.photo-wrapper {
		width:50%;
		margin:0;
		display:inline-block;
		padding:2px 3px 6px 2px;		
	}
	
	#member div.left-wrapper div.photo-wrapper div.photo {
		margin:0px;
		max-height:200px;
		overflow:hidden;
		border:solid #fff 1px;
		outline:1px solid #e5e5e5;
	}
	#member div.left-wrapper #personal-photo-wrapper { padding:2px 2px 6px 3px; }
	#member #memberPhotos img {
		width:100%;
		max-width:none;
		
	}
	#member div.left-wrapper #personal-photo-wrapper img { }

	ul.tabs,
	fieldset.photo-field { font-size:85%; }
	
	div#relationLists { display:flex; flex-wrap: wrap; justify-content:space-around; }
	div#relationsWrapper div.relationType {
		flex:45%;
		margin:0 2px;
	}
	div#relationsWrapper div.relationType .personList {
		width:100%;
	}
}
@media screen and (max-width:480px)
{
	#header ul li.home a span.wrapper span { display:block; }
	#header ul li.home a span.wrapper svg.icon { margin:0; }
	
	#users div.personList { margin-top:10px; }
	div.personList div#result-info { margin-bottom:-10px; }
	
	#zoomableDest { margin:auto 5%; }
	
	#contentBox div.details a.action.right { top:17px; right:5px; }
	
	#groups .groups { grid-template-columns: repeat(1, 1fr); margin:0; }
	#groups .group-wrapper { margin-right:0; margin-left:0; min-width:100%; }
}

@media screen and (max-width:320px)
{
	body { font-size:80%; }
	#members { font-size:75%; }
	#responsiveMenu { font-size:1.0em; }
	#header ul li.personal a.expensesTab span.wrapper { display:none; }
	#header ul li.user span.wrapper span { font-size:65%; }
	div.left-wrapper { width:100px; min-height:100px; }
	div.left-wrapper img { max-width:100px; }
	
	#page-login #site-title-wrapper p { font-size:1.2em; }
	
	ul.tabs,
	fieldset.photo-field { font-size:75%; }
	
	dl dt { min-width:30%; width:30px; }
	dl.vertical dt { min-width:33%; }
	#volunteering form label.currentlyDoing { width:25%; }
	
}

@media screen and (min-width:767px)
{
	#responsiveMenu.active { }
}
@media screen and (max-width:768px) 
{
	#page-login #content { padding:0 15px; }
	footer { padding:5px 15px; }
	#page-login #outer-wrapper,
	#page-login #outer-wrapper,
	#page-forgot-pass #outer-wrapper,
	#page-forgot-pass #searchBox { min-width:320px; width:100%; }
}

div.personList a.normalLink { display:inline-block; width:auto; background-color:transparent; }