@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i');

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    font-family: 'Source Sans Pro';
    font-weight: 400;
}

body {
    line-height: 1em;
    font-size: 1em;
}

article,aside,details,figcaption,figure,
footer,header,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    font-size: 0.8em;
    font-family: 'Source Sans Pro';
    color: #4d67c1;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}
a:hover {
    color: #5b79e4;
    cursor: pointer;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

form ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
form ul li {
    list-style: none;
    display: block;
    padding: 2px 0;
    margin: 0;
}

input, select {
    vertical-align:middle;
}

input[type=text][disabled] {
    color: #AAA;
}

input[type=text], input[type=search], input[type=email], input[type=password], textarea, select {
    background-color: #FFF;
    color: #333;
    padding: 4px;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid rgba(100, 100, 100, 0.3);
    box-shadow: none;
    border-radius: 2px;
    transition: border-color 0.3s ease;
}
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, select:focus {
    border-color: rgba(100, 100, 225, 0.5);
}
input::-webkit-input-placeholder {
    color:    #AAA;
}
input:-moz-placeholder {
    color:    #AAA;
}
input::-moz-placeholder {
    color:    #AAA;
}
input:-ms-input-placeholder {
    color:    #AAA;
}
/* update fields_map_shapes set color = '#55007F' where color = '#00FFFF'; */
input[type=submit], input[type=button], button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
button.easy-button-button {
    border: none;
    border-radius: 3px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}
/* update fields_map_shapes set color = '#55007F' where color = '#00FFFF'; */
input[type=submit], input[type=button], button:not(.easy-button-button), a.button {
    line-height: 17px;
    margin: 0;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    font-family: 'Source Sans Pro';
    vertical-align: middle;
    background: #2196F3;
    color: #fff;
    outline: 0;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    text-transform: uppercase;
    font-size: 1.2em;
    padding: 7px 15px;
    transition: background-color .2s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
}
button + button, a.button + button, button + a.button, a.button + a.button {
    margin-left: 7px;
}
button img, a.button img { vertical-align: middle; display: inline-block; margin-right: 5px; }
button.button-icon img, a.button.button-icon img { margin-right: 0; }
button .fa, a.button .fa { display: inline-block; vertical-align: middle; margin: 2px 5px 2px 0; }
button .material-icons, a.button .material-icons {
    vertical-align: middle;
    margin-right: .3em;
    font-size: 1em;
}
button .fa:last-child, a.button .fa:last-child, button .material-icons:last-child, a.button .material-icons:last-child { margin-right: 0; }
button span, a.button span { vertical-align: middle; display: inline-block; line-height: 1em; }

button:hover, input[type=submit]:hover, a.button:hover {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
}
button:active, input[type=submit]:active, a.button:active {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    background: #54bcf3;
}
button:disabled, input[type=submit]:disabled, a.button:disabled,
button.disabled, input[type=submit].disabled, a.button.disabled {
    box-shadow: none;
    background: rgba(200, 200, 200, .2);
    color: rgb(150, 150, 150);
}
input[type="button"]::-moz-focus-inner {
    border: 0;
}
button::-moz-focus-inner {
    border: 0;
}
a.button::-moz-focus-inner {
    border: 0;
}
button:focus, input[type=submit]:focus, a.button:focus {
    outline: 0;
}
input[type=submit]:active, input[type=button]:active, button:active, a.button:active, input[type=submit].button-pressed, button.button-pressed, a.button.button-pressed {
    box-shadow: inset 0 0 2px rgba(150, 150, 150, 0.4);
}
button.secondary,
a.button.secondary,
.district button:not(.primary),
.district a.button:not(.primary),
.backdrop_box a.button:not(.primary),
.backdrop_box button:not(.primary),
.fullpage_backdrop_content button:not(.primary),
.fullpage_backdrop_content a.button:not(.primary) {
    background: transparent;
    color: #2196F3;
    box-shadow: none;
    border-radius: 4px;
    text-align: center;
}
.popup_message button.secondary {
    color: rgb(255, 170, 0);
}
button.popup-activator:not(.primary),
a.button.popup-activator:not(.primary),
button.icon,
a.button.icon {
    background: transparent;
    box-shadow: none;
    color: rgb(100, 100, 100);
}
button.popup-activator.icon,
a.button.popup-activator.icon,
button.icon,
a.button.icon {
    border-radius: 100%;
    min-width: 34px;
    padding: 7px 10px;
}
.icon .fa {
    min-width: 16px;
}
button.secondary:hover,
a.button.secondary:hover,
button.icon:hover,
a.button.icon:hover,
.district button:not(.primary):hover,
.district a.button:not(.primary):hover,
.backdrop_box a.button:not(.primary):hover,
.backdrop_box button:not(.primary):hover,
.fullpage_backdrop_content button:not(.primary):hover,
.fullpage_backdrop_content a.button:not(.primary):hover {
    background: rgba(33, 150, 203, .2);
}
button.popup-activator:not(.primary):hover,
a.button.popup-activator:not(.primary):hover,
button.popup-activator:not(.primary).active,
a.button.popup-activator:not(.primary).active {
    background-color: rgba(200, 200, 200, .2);
}
.button-group > button,
.button-group > a.button {
    margin: 0 3px;
}
.button-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: flex-end;
    padding: 10px;
    flex: 0 0 auto;
}
button.popup-activator .fa:last-child,
.button.popup-activator .fa:last-child {
    margin-left: 7px;
}
.tab-pane > .button-group {
    justify-content: flex-end;
}
.fancycheckbox {
    display: none;
}
.fancycheckbox + label {
    display: inline-block;
    color: #555;
    transition: color .2s ease-in-out;
}
.fancycheckbox:disabled + label,
.fancycheckbox:disabled + label + .explanation {
    color: #DDD;
}
.fancycheckbox:checked + label {
    color: #585;
}
.fancycheckbox:disabled + label {
    color: #DDD;
}
.fancycheckbox:focus + label {
    color: #558;
    box-shadow: 0 0 3px rgba(150, 150, 210, 1);
}
.fancycheckbox + label .fa.unchecked,
.fancycheckbox:checked + label .fa.checked {
    display: inline-block;
    margin-right: 5px;
}
.fancycheckbox + label .fa.checked,
.fancycheckbox:checked + label .fa.unchecked {
    display: none;
}
.fancycheckbox + label ~ .fancycheckbox + label {
    margin-left: 10px;
}

body { background-color: #FFF; height: 100vh; width: 100%; }

p {
	padding: 0 2px 15px;
}
/* fullpage (faded out) backdrop styling */
.semi_transparent { opacity: 0.4; }
.semi_transparent img { vertical-align: middle; }
.medium_transparent { opacity: 0.7; }
.medium_transparent img { vertical-align: middle; }
.popup_message {
    font-family: 'Source Sans Pro';
    margin: 0 auto;
    font-weight: 100;
    position: fixed;
    bottom: 100px;
    left: 50%;
    width: auto;
    padding: 10px 20px;
    font-size: .85rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    line-height: 1.2em;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
    background-color: #333;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 200001;
    color: rgba(255, 255, 255, .8);
    transform: translateX(-50%);
    align-items: center;
}
.popup-title {
    flex: 1 1 auto;
    margin-right: 100px;
}
.faded_out { color: #AAA; }

.fullpage_backdrop_content { position: relative; z-index: 100001; font-family: 'Source Sans Pro'; }
.fullpage_backdrop { font-family: 'Source Sans Pro'; background-color: rgba(255, 255, 255, 0.75); z-index: 999999; width: 100%; height: 100%; overflow: auto; position: fixed; top: 0; left: 0; margin: 0; padding: 0; text-align: center; }
#settings-overlay.fullpage_backdrop { z-index: 1000000; }
.fullpage_backdrop.dark { background-color: rgba(0, 0, 0, 0.7); }

.backdrop_box { position: absolute; top: 30px; left: 50%; z-index: 100001; clear: both; padding: 0; }
.backdrop_box#reportissue_container { top: 10px; }
.backdrop_box.small { width: 400px; margin: 0 -200px 0 -200px; }
.backdrop_box.mediumsmall { width: 500px; margin: 0 -250px 0 -250px; }
.backdrop_box.medium { width: 600px; margin: 0 -300px 0 -300px; }
.backdrop_box.mediumlarge { width: 640px; margin: 0 -320px 0 -320px; }
.backdrop_box.large { width: 800px; margin: 0 -400px 200px -400px; }
.backdrop_box.larger { width: 950px; margin: 0 -475px 200px -475px; }
.backdrop_box.huge { width: 1010px; margin: 0 -500px 200px -500px; }
.backdrop_box, #dialog-query-backdrop-content {
    margin: 5px 0;
    clear: both;
    font-size: 0.9em;
    display: block;
    padding: 0px;
    padding-bottom: 2px;
    background-color: #FFF;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-shadow: 0 0 4px rgba(150, 150, 150, 0.3);
    border-radius: 2px;
    color: #333;
}
#backdrop_detail_content { font-weight: normal; font-size: 0.9em; padding: 5px; text-align: left; }

#dialog-query-backdrop { z-index: 2000000; background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; margin: 0; padding: 0; text-align: center; }
#dialog-query-backdrop-content { display: block; width: 600px; margin: 30px auto; padding: 7px; font-size: 0.9em; }
#dialog-title, #dialog-content { margin-left: 75px; }
#dialog-yes, #dialog-no {
    font-size: 1.2em;
    padding: 7px 10px;
    line-height: 1.4em;
}
#dialog-query-title {
    display: block;
    text-align: left;
    padding: 5px 5px 10px 5px;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 100;
    color: #888;
}
#dialog-query-content {
    text-align: left;
    font-size: .9rem;
    color: #555;
    line-height: 1.3rem;
    font-weight: 100;
    padding: 0 5px;
}
.dialog-query-buttons.change-password {
    flex: 0 0 auto;
}
.dialog-query-buttons {
    padding: 0 10px;
    /*height: 40px;*/
    display: flex;
    margin: 10px 0;
    justify-content: space-between;
    align-items: flex-end;
    font-size: .75rem;
    justify-self: flex-end;
    flex: 1 1 auto;
}
.district .dialog-query-buttons {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.congregation .dialog-query-buttons,
.campaign .dialog-query-buttons {
    padding-bottom: 10px;
}

/* end backdrop styling */

/* rounded boxes styling */
.shadowed { box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); }
.rounded_box { border-width: 1px; border-style: solid; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 3px; }
.rounded_box.green { background-color: #CFE8CF; border-color: #aaC6aa; color: #242; }
.rounded_box.yellow { background-color: #F9EF9E; border-color: #D9D9BB; }
.rounded_box.lightyellow { background-color: #F9F5B2; border-color: #D9D9BB; }
.rounded_box.verylightyellow { background-color: #FFFBD7; border-color: #E3DDa5; }
.rounded_box.red { background-color: #E8CFCF; border-color: #C6aaaa; color: #422; }
.rounded_box.blue { background-color: #585DB2; border: 0; }
.rounded_box.iceblue { background-color: #D4E5FF; border-color: #B1B8E9; }
.rounded_box.mediumgrey { background-color: #E7E7E7; border-color: #D7D7D7; }
.rounded_box.lightgrey { background-color: #F3F3F3; border-color: #DDD; }
.rounded_box.verylightgrey { background-color: #F8F8F8; border-color: #DDD; }
.rounded_box.invisible { background-color: transparent; border-color: transparent; }
.rounded_box.invisible:hover { background-color: #F5F5F5; border-color: #F5F5F5; }
.rounded_box.invisible.nohover:hover { background-color: transparent; border-color: transparent; }
.issue_detail_unmerged { background-color: #E0AC9C; border: 0; }
.issue_detail_changed { background-color: #FFF299; border: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

.rounded_box.cut_bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; }
.rounded_box.cut_top { border-top-right-radius: 0; border-top-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; }
.rounded_bottom { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; }
.rounded_top { border-top-right-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; }
.rounded_box.borderless { border: 0; }

.rounded_box .description { padding: 3px 3px 3px 0; }
.rounded_box .question_header { font-size: 0.9em; }

.rounded_box.iceblue .percent_filled { background-color: #88C; }
.rounded_box.red .percent_filled { background-color: #C88; }
.rounded_box.yellow .percent_filled { background-color: #CC8; }
.rounded_box.lightgreen .percent_filled, .rounded_box.green .percent_filled { background-color: #8C8; }

.rounded_box.iceblue .percent_unfilled { background-color: #aaF; }
.rounded_box.red .percent_unfilled { background-color: #FCC; }
.rounded_box.yellow .percent_unfilled { background-color: #FFa; }
.rounded_box.lightgreen .percent_unfilled, .rounded_box.green .percent_unfilled { background-color: #CFC; }

.rounded_box.red .faded_out { color: #B77; }
.rounded_box.iceblue .faded_out { color: #99C; }
.issue_detail_unmerged .faded_out { color: #FFD9D6; }
.rounded_box.lightgreen .faded_out, .rounded_box.green .faded_out { color: #7B7; }

.rounded_box.iceblue .faded_out .dark { color: #77C; }

.rounded_box.iceblue th { border-color: #a0aDC0; background-color: #C1D1E8; }
.rounded_box.iceblue .header_div { border-color: #a0aDC0; }

.rounded_box.lightgrey.highlighted { background-color: #FFF299; border: 0; }

.rounded_box.blue a { color: #B5B5FF; font-weight: bold; }
.rounded_box.lightgreen a, .rounded_box.green a { color: #4E703D; border-bottom-color: #4E703D; }

.rounded_box.blue a:hover { color: #C9C9FF; font-weight: bold; }
.rounded_box.lightgreen a:hover, .rounded_box.green a:hover { color: #6a9753; border-bottom-color: #6a9753; }

.rounded_box.white { background-color: #FFF; border-color: #CCC; }
.rounded_box.white th { font-weight: bold; background-color: #F1F1F1; border-bottom: 1px solid #DDD; padding-bottom: 2px; }
.rounded_box.white thead.light th { background-color: #F9F9F9; border-color: #EEE; }
/* end rounded box styling */

#fullscreen-container {
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    overflow: auto;
    width: 100%;
    min-height: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
#loading .fullpage_backdrop_content {
	position: absolute;
	top: 50%;
	height: 50px;
	margin-top: -25px;
	left: 50%;
	margin-left: -501px;
	width: 1000px;
	z-index: 999999;
	border: none;
    padding: 0 20px;
    color: rgba(255, 255, 255, 0.8);
}
/* Progress Bar */
.progress {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #acece6;
    border-radius: 2px;
    background-clip: padding-box;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden; }
.progress .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: #5b79e4;
    transition: width .3s linear; }
.progress .indeterminate {
    background-color: #5b79e4; }
.progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
.progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s; }

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%; }
    60% {
        left: 100%;
        right: -90%; }
    100% {
        left: 100%;
        right: -90%; } }
@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%; }
    60% {
        left: 100%;
        right: -90%; }
    100% {
        left: 100%;
        right: -90%; } }
@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%; }
    60% {
        left: 107%;
        right: -8%; }
    100% {
        left: 107%;
        right: -8%; } }
@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%; }
    60% {
        left: 107%;
        right: -8%; }
    100% {
        left: 107%;
        right: -8%; } }

h1 {
	font-size: 1.4em;
}
h2 {
	font-size: 1.25em;
}
h3 {
	font-size: 1.1em;
}
h4 {
	font-size: 1em;
}
h5 {
	font-size: 1.1em;
}
h6 {
	font-size: 1em;
}

.draggable_ghost {
    position: absolute;
    display: block;
    background: rgba(10, 0, 100, 0.3);
    border: 1px dotted rgba(10, 0, 100, 0.5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.dialog {
    border-radius: 2px;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-shadow: 0 0 2px rgba(155, 155, 155, 0.2);
    background-color: #FFF;
    padding: 0;
    color: #AAA;
    margin: 10px;
}

.dialog h1 {
    /*background-color: rgba(0, 0, 0, 0.3);*/
    font-weight: 400;
    padding: 10px 15px 10px 0;
    margin: 0 10px;
    text-align: left;
    font-size: 1.4em;
    text-transform: uppercase;
    border-bottom: 1px dotted rgba(50, 50, 50, 0.2);
    cursor: move;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.dialog .error {
    border-radius: 4px;
    color: rgb(223, 50, 51);
    font-weight: 600;
    border: 1px solid rgb(223, 50, 51);
    padding: 10px;
    vertical-align: middle;
    display: block;
    margin: 10px 0;
    font-size: 1.15em;
    background: transparent;
}

.dialog .content {
    padding: 10px;
}

#login-dialog {
    width: 500px;
    margin: 100px auto 0 auto;
}
#login-dialog.wide {
    width: 600px;
    margin: 100px auto 0 auto;
}
#login-dialog .content p:not(.error) {
    font-size: 1.15em;
    color: #333;
    line-height: 1.3em;
}
#login-dialog .congregation-name {
    color: #555;
    font-weight: bold;
}
input#login-details {
    display: inline-block;
    font-size: 1.1em;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}
#login-dialog .dialog-query-buttons {
    padding: 0;
}

label { display: inline-block; min-width: 140px; font-weight: normal; color: #AAA; text-transform: uppercase; cursor: pointer; }
#forgot-button { width: 69%; display: inline-block; margin: 10px 0 5px 0; text-align: left; }
#login-button { width: 29%; display: inline-block; margin: 10px 0 5px 0; text-align: right; }
#home-button { width: 100%; display: block; margin: 10px 0 5px 0; text-align: right; }


#top-menu {
    width: 100%;
    z-index: 100000;
    border: none;
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    background: #FFF;
    padding: 0;
    color: #333;
    margin: 0;
    text-align: left;
    box-shadow: 0 2px 2px rgba(150, 150, 150, 0.2);
    display: flex;
    justify-content: space-between;
    transition: transform .3s ease-in-out;
}
#top-menu.hidden {
    transform: translateY(-110%);
}
#bottom-drawer {
    display: none;
}
#app-bar {
    display: none;
}
#global-app-bar {
    width: calc(100% - 300px);
    flex: 0 0 auto;
    position: fixed;
    background: #FFF;
    z-index: 900;
    padding: 0;
    margin: 0;
    color: rgba(0, 0, 0, .4);
    text-align: left;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: stretch;
    align-items: center;
    align-content: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
    top: 0;
    left: 300px;
    box-sizing: border-box;
    flex-direction: row;
    font-size: 1.1em;
    min-height: 40px;
    transform: translateY(0);
}
#global-app-bar.hidden {
    transform: translateY(-110%);
}
#global-app-bar ~ .main-menu,
#global-app-bar ~ .areas_list {
    padding-top: 65px;
}
#global-app-bar a.app-drawer-button,
#global-app-bar a.app-drawer-button:hover,
#global-app-bar a.app-drawer-button:active {
    flex: 0 0 auto;
    padding: 15px;
    color: #333;
    font-weight: 400;
    min-width: 40px;
    box-sizing: border-box;
}

a.search-container,
a.search-container:hover {
    flex: 0 0 auto;
    padding: 15px;
    color: #333;
    font-weight: 400;
    min-width: 40px;
    box-sizing: border-box;
    background: transparent;
    display: flex;
}

a.search-container.active,
a.search-container.active:hover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #FFF;
}

a.search-container .form-content {
    display: none;
}

a.search-container.active .form-content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}
a.search-container input {
    border: none;
    flex: 1 1 auto;
}

a.search-container form {
    display: flex;
    align-items: center;
}
a.search-container form .filter-item {
    flex: 0 0 auto;
}

#global-app-bar .main-title {
    flex: 1 1 auto;
    font-size: 1.4em;
    font-weight: 400;
    text-align: center;
    align-content: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    justify-self: stretch;
    align-self: center;
    line-height: 1.9em;
    padding: 10px 0;
    color: #333;
}

.main-content {
    flex: 1 1 auto;
    overflow: auto;
}
#sidebar {
    flex: 0 0 300px;
    z-index: 1000;
    border: none;
    background: #FFF;
    padding: 0;
    color: #333;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease-in-out;
    min-height: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: none;
    border-right: 1px solid rgba(100, 100, 100, .2);
}
#sidebar.collapse-map {
    display: none;
}
#sidebar.active {
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.35);
    border-right: none;
    position: fixed;
}
#sidebar.active + .scrim {
    z-index: 999;
    background-color: rgba(0, 0, 0, .3);
    width: calc(100% - 300px);
    position: fixed;
    top: 0;
    left: 300px;
    height: 100%;
}
.user-banner {
    display: flex;
    flex-direction: column;
    padding: 20px 0 5px 0;
}
.user-banner > .list-item, .user-banner > .list-item:hover {
    background: transparent;
    cursor: default;
}
.user-banner .name-container {
    display: flex;
    flex-direction: column;
}
.name-container .realname {
    font-size: 1.1rem;
    font-weight: 600;
}
.name-container .email {
    font-size: .8rem;
    font-weight: 400;
    color: rgb(100, 100, 100);
}
.list-mode {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.list-item, a.list-item {
    padding: 7px 10px;
    display: flex;
    flex-direction: row;
    color: rgb(50, 50, 50);
    border-radius: 5px;
    margin: 5px 10px;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    font-size: .9rem;
}
.submenu .list-item,
.submenu a.list-item {
    padding: 4px 15px;
    margin: 2px 10px;
}
.list-item:not(.disabled):not(.separator):hover, a.list-item:not(.disabled):not(.separator):hover {
    background-color: rgba(100, 100, 100, .1);
}
.list-item.selected, a.list-item.selected {
    background-color: rgba(100, 100, 150, .2);
    color: #1f6cbc;
}
.list-item .icon {
    flex: 0 0 50px;
    color: rgb(100, 100, 100);
    align-self: center;
}
.submenu .list-item .icon {
    flex: 0 0 35px;
    font-size: 1.4em;
}
.list-item.selected .icon {
    color: #1f6cbc;
}
.list-item.expandable.expanded .icon {
    color: #1f6cbc;
}
.list-item span.name {
    flex: 1 1 auto;
    align-self: center;
    padding: 5px 0;
    font-weight: 400;
    font-size: 1em;
}
.list-item.disabled span.name {
    color: rgb(150, 150, 150);
}
.list-item.expandable.expanded .name {
    color: #1f6cbc;
}
.submenu .list-item span.name {
    font-size: .95em;
}
.submenu {
    border-top: 1px solid rgba(100, 100, 100, .2);
}
.list-item.separator {
    height: 1px;
    border-bottom: 1px solid rgba(100, 100, 100, .2);
    margin: .5em .5em 0 .5em;
    padding: 0;
}
.list-item.expandable + .submenu {
    display: none;
}
.list-item.expandable.expanded + .submenu {
    display: initial;
    border-bottom: 1px solid rgba(100, 100, 100, .2);
}
.list-item.expandable .expander {
    transform: rotate(0);
    cursor: pointer;
}
.list-item.expandable.expanded .expander {
    transform: rotate(180deg);
    color: #1f6cbc;
}
.list-mode .header,
.submenu .header {
    text-transform: none;
    color: rgb(150, 150, 150);
    font-size: .75rem;
    padding: 15px;
}

.popup-menu li.header { padding: 10px; margin-top: 25px; text-transform: uppercase; color: #CCC; background: #FFF; }
.popup-menu li.header:first-child { margin-top: 0px; }

.list-mode .primary {
    display: inline-block;
}
input[type=submit].mobile-visible, .mobile-visible, .list-mode .mobile-visible {
    display: none;
}
#user-menu { float: right; }
#user-menu > li > a { padding: 14px 25px; line-height: 1.1em; }
#user-menu > li > a .congregation_name { font-size: 0.8em; text-transform: uppercase; color: #AAA; display: block; white-space: nowrap; }
#user-menu li img { float: left; vertical-align: middle; margin: 5px 10px 5px 0; display: inline-block; width: 22px; }
.large-dropdown {
    font-size: 1.3em;
    color: #888;
    cursor: pointer;
}
.large-dropdown .dropdown-label {
    display: flex;
    width: 100%;
    font-size: 1em;
    color: #888;
    align-items: center;
    text-transform: uppercase;
    z-index: 12;
    position: relative;
    border-bottom: 1px solid rgba(200, 200, 200, .2);
}
.large-dropdown.active .dropdown-label {
    border-bottom-color: #5b79e4;
}
.large-dropdown .dropdown-caret {
    flex: 0 0 25px;
    padding: 10px;
    font-size: .8em;
    border-left: 1px solid rgba(100, 100, 100, .3);
}
.large-dropdown:hover .dropdown-label {
    background-color: rgba(220, 220, 220, .2);
}
.large-dropdown .dropdown-caret .fa {
    transform: rotate(0);
    transition: transform .2s ease;
}
.large-dropdown.active .dropdown-caret .fa {
    transform: rotate(180deg);
}
.large-dropdown .name-container, .large-dropdown .name-container:hover {
    flex: 1 1 auto;
    padding: 15px;
    font-size: 1em;
    font-weight: 300;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.large-dropdown > ul {
    display: none;
    list-style: none;
    padding: 5px 0;
    margin: 0 10px;
    position: absolute;
    font-size: 0.9em;
    width: calc(100% - 20px);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
    border: none;
    border-radius: 0 0 3px 3px;
    z-index: 11;
}
.large-dropdown.active > ul,
.large-dropdown > ul li {
    display: block;
    background: #FFF;
}
.large-dropdown > ul li a,
.large-dropdown > ul li a:hover {
    display: block;
    border: none;
    padding: 12px;
    position: relative;
    min-width: 250px;
    cursor: pointer;
    background-color: transparent;
    color: #555;
}
.large-dropdown > ul li a:hover {
    background-color: rgba(200, 200, 200, .1);
}
.large-dropdown > ul li.disabled a,
.large-dropdown > ul li.disabled a:hover {
    color: #CCC;
    cursor: default;
    background-color: transparent;
}
.large-dropdown > ul li.header  {
    padding: 10px;
    margin-top: 25px;
    text-transform: uppercase;
    color: #CCC;
    background: #FFF;
}
.large-dropdown > ul li.header:first-child {
    margin-top: 0;
}
.large-dropdown > ul .color-strip {
    bottom: 0;
    top: auto;
    opacity: 0;
}
.large-dropdown > ul li a:hover .color-strip {
    opacity: 1;
}
.large-dropdown > ul li.disabled a:hover .color-strip {
    opacity: 0;
}

.list-item .color-strip {
    display: none;
}
.list-item.selected > .color-strip {
    display: block;
}

.main-menu {
    /*max-width: 700px;*/
    max-width: 642px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}
.main-menu.wide {
    max-width: 900px;
}
#global-app-bar ~ .main-menu.wide.search {
    max-width: none;
    padding: 57px 0;
}
h1 + .main-menu {
    margin-top: 0;
    padding-top: 0;
}

.main-menu > ul, .no-congregation > ul, .menu-buttons > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-menu .menu li, .reports-list li, .no-congregation li, .main-menu.menu-buttons li {
    font-size: 1em;
    position: relative;
    margin: 5px 0 10px 0;
    padding: 0;
    border-radius: 2px;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-shadow: 0 0 2px rgba(155, 155, 155, 0.2);
    background-color: #FFF;
    list-style: none;
}
.main-menu .menu li a .material-icons {
    margin-right: 7px;
}
.main-menu .menu li a .material-icons,
.main-menu .menu li a span {
    vertical-align: middle;
}
.main-menu.menu-buttons {
    padding: 0;
    margin: auto auto 0 auto;
    align-self: flex-end;
    justify-self: flex-end;
}
.main-menu.menu-buttons li.destroy-link a:hover {
    color: #FFF;
}
.main-menu.menu-buttons li.destroy-link a:hover::first-line {
    color: #FFF;
}
.main-menu.territory-actions {
    padding: 0;
}
.main-menu.territory-actions li, .main-menu.menu-buttons li {
    display: inline-block;
    width: calc(50% - 15px);
    vertical-align: top;
    font-size: 0.9em;
    margin-right: 10px;
}
.main-menu.menu-buttons li, .district-sidebar .main-menu.territory-actions li {
    display: block;
    width: 100%;
    vertical-align: top;
    font-size: 0.9em;
    margin-right: 0;
    transition: opacity .2s ease-in-out;
}
.district-sidebar .district-meta-container {
    padding: 10px 0;
}
.main-menu.menu-buttons li.disabled {
    opacity: .4;
    cursor: default;
}
.main-menu .menu li a, .main-menu .menu li a:hover, .reports-list li a, .reports-list li a:hover, .no-congregation li a, .no-congregation li a:hover, .menu-buttons li a, .menu-buttons li a:hover {
    color: #AAA;
    display: block;
    padding: 15px;
    line-height: 1.5em;
    font-size: 1.2em;
}
.main-menu .menu li a:first-line, .reports-list li a:first-line, .no-congregation li a:first-line, .menu-buttons li a:first-line {
    color: #555;
    font-weight: normal;
    font-size: 1.2em;
    text-transform: uppercase;
}
.main-menu > ul.reports-list {
    margin-bottom: 40px;
}
.reports-list li .fa, .main-menu li .fa {
    margin-right: 5px;
}
.reports-list li .colored {
    color: dodgerblue;
}
.reports-list li .reports-logs-link {
    color: mediumseagreen;
}
.main-menu .menu li.separator, .edit-district-map li.separator, .show-district li.separator {
    height: 1px;
    padding: 5px 10px 10px 10px;
    margin: 15px 10px 0 10px;
    border: none;
    box-shadow: none;
    border-top: 1px dotted rgba(50, 200, 50, 0.5);
    background: transparent;
}
.main-menu.territory-actions li.separator {
    display: none;
}
.main-menu ul.menu li .button {
    margin-right: 10px;
    padding: 7px 15px;
    font-size: 14px;
    min-width: 80px;
    text-align: center;
}
h1 {
    border: none;
    position: relative;
    padding: 10px 0 15px 0;
    margin: 5px 0;
    color: #AAA;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.35em;
    display: flex;
}
.main-menu > h1 {
    /*max-width: 640px;*/
    margin: 5px auto;
    /*align-items: center;*/
    display: none;
}
h1 .button {
    font-size: 0.75em;
    font-weight: normal;
    text-transform: unset;
    float: right;
}
h1 .color-strip {
    bottom: 0;
    top: auto;
}
.main-menu h2 {
    border: none;
    position: relative;
    padding: 0 0 15px 0;
    margin: 0 0 5px 0;
    color: #777;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.1em;
}
.campaign-header {
    background: rgba(235, 235, 180, 0.3);
    padding: 5px 10px 10px 10px;
    border: none;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    border-radius: 4px;
    font-size: 1em;
    position: relative;
    margin: 5px 0 7px 0;
}
.campaign-header h2 {
    margin: 0;
    padding: 10px 5px 5px 5px;
    font-size: 1rem;
    font-weight: 600;
}
.campaign.finished .finish-campaign {
    display: none;
}
.finish-campaign .description {
    font-size: 1.1em;
    line-height: 1.2em;
}

.campaign-description {
    padding: 0 5px 5px 5px;
    font-size: 1.2em;
    color: #777;
    line-height: 1.3em;
}
.campaign-date {
    display: inline-block;
    font-weight: bold;
}
.main-menu #districts_list h2:first-line, .main-menu #districts_list h2 .firstline {
    font-size: 1.15em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.main-menu #districts_list h2 {
    font-size: 1.1em;
    padding: 10px 5px 5px 5px;
    margin: 5px 0 0 0;
    font-weight: normal;
    line-height: 1.2em;
    text-transform: none;
}
.main-menu p { margin: 0 0 15px 0; padding-top: 10px; }

#quote {
    position: fixed;
    z-index: -1;
    bottom: 10px;
    right: 10px;
    color: rgba(100, 100, 100, 0.4);
    font-size: 18px;
    font-weight: normal;
    padding: 10px;
    font-style: italic;
    width: 400px;
    text-align: right;
    line-height: 1.3em;
}

.main-menu ul.areas_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.white .color-strip {
    background-color: white;
}
.yellow .color-strip {
    background-color: yellow;
}
.green .color-strip {
    background-color: green;
}
.orange .color-strip {
    background-color: orange;
}
.red .color-strip {
    background-color: red;
}
.darkred .color-strip {
    background-color: darkred;
}
.magenta .color-strip {
    background-color: magenta;
}
.aquamarine .color-strip {
    background-color: aquamarine;
}
.purple .color-strip {
    background-color: purple;
}
.limegreen .color-strip {
    background-color: limegreen;
}
.lightgreen .color-strip {
    background-color: lightgreen;
}
.darkgreen .color-strip {
    background-color: darkgreen;
}
.cornflowerblue .color-strip {
    background-color: cornflowerblue;
}
.dodgerblue .color-strip {
    background-color: dodgerblue;
}
.blue .color-strip {
    background-color: blue;
}
.darkblue .color-strip {
    background-color: darkblue;
}
input.pick-district.date {
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 11px 5px 8px 5px;
    font-size: 1.5em;
    width: 120px;
    background: #FFF;
    box-shadow: none;
}
select.pick-district-selector {
    border-width: 0;
    border-bottom-width: 1px;
    box-shadow: none;
    background: #FFF;
    vertical-align: middle;
    font-size: 1.7em;
    font-weight: 100;
    padding: 10px 5px 5px 5px;
}
.pick-district {
    border-bottom: 1px solid #555;
    border-radius: 0;
    padding: 10px 5px 5px 5px;
    font-size: 1.6em;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2em;
}
.signature-container {
    display: flex;
    flex-direction: row;
}
.pick-district.date {
    flex: 0 0 100px;
    text-align: center;
}
.pick-district.signature {
    flex: 1 1 auto;
    text-align: left;
}
.areas_list h1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.areas_list h3, .district-history h3 {
    position: relative;
    padding: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-size: cover;
    font-weight: lighter;
    font-size: 1.65em;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}
#fullpage-backdrop-content h3,
#fullpage-backdrop-content h3.simple,
.fullpage-backdrop-content h3,
.fullpage-backdrop-content h3.simple {
    padding: 15px 10px;
    margin-bottom: 0;
    border-bottom: none;
    font-size: 1.65em;
    box-sizing: border-box;
    color: #333;
    font-weight: 600;
    background: transparent;
    text-transform: none;
}
#fullpage-backdrop-content h3.mapped,
h3.mapped {
    padding: 0;
    /*height: 400px;*/
    width: 100%;
    position: relative;
    overflow: hidden;
}
#fullpage-backdrop-content h3#header-bg {
    padding: 150px 0 0 0;
}
h3.mapped .map-canvas {
    z-index: 1;
    position: relative;
    transition: margin-left 0.3s ease;
    -o-transition: margin-left 0.3s ease;
    -ms-transition: margin-left 0.3s ease;
    -moz-transition: margin-left 0.3s ease;
    -webkit-transition: margin-left 0.3s ease;
}
h3.mapped .map-canvas img {
    width: 100%;
}
h3.mapped .map-canvas.hidden {
    margin-left: -800px;
}
h3.mapped .map-canvas + .map-canvas-overview {
    margin-left: 800px;
    margin-top: -400px;
    transition: margin-left 0.3s ease;
    -o-transition: margin-left 0.3s ease;
    -ms-transition: margin-left 0.3s ease;
    -moz-transition: margin-left 0.3s ease;
    -webkit-transition: margin-left 0.3s ease;
}
h3.mapped .map-canvas.hidden + .map-canvas-overview {
    margin-left: 0;
}
h3.mapped .shader {
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
}
.district-history h4 {
    margin: 10px;
    display: flex;
    align-items: center;
}
.district-history h4 > span {
    flex: 1 1 auto;
}
.district-history .edit-district.edit-campaign h3 .shader { padding-top: 10px; text-transform: uppercase; font-weight: normal; font-size: 0.85em; color: #AAA; text-shadow: none; border-bottom: 1px dotted rgba(100, 100, 100, 0.2); }
.auto-indicator {
    display: none;
}
.submitting .auto-indicator {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0 7px;
}
form .submit-container {
    text-align: right;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 0;
    background-color: rgb(252, 252, 252);
    padding: 20px;
    box-shadow: inset 0 5px 10px -10px rgba(0, 0, 0, 0.5);
    margin: 0 0 10px 0;
    font-size: 0.9em;
}
.district-history .edit-district .map-canvas-container {
    border-bottom: 1px solid #555;
    height: 200px;
}
.district-history .edit-district .map-canvas-container.expanded, .map-canvas-container.expanded { height: 450px; }
#map-toolbar {
    display: none;
    position: fixed;
    left: 55px;
    top: 11px;
    z-index: 10;
    justify-content: space-between;
    width: calc(100% - 415px);
}
.map-container-fullscreen #map-toolbar {
    display: flex;
}
.manage #map-toolbar {
    width: calc(100% - 30vw);
    max-width: calc(100% - 570px);
}
.show-district #map-toolbar {
    width: calc(100% - 610px);
}
.map-view #map-toolbar {
    width: calc(100% - 460px);
}
#map-toolbar a.map-button, #map-toolbar .container input {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 10px;
    background-color: #FFF;
    border: 1px solid rgba(20, 20, 20, .4);
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    border-radius: 3px;
    color: #555;
    font-size: 1.3em;
    align-self: flex-start;
}
#map-toolbar .container {
    display: flex;
    align-content: center;
    align-items: center;
}
#map-toolbar a.map-button i + span {
    margin-left: 5px;
}
#map-toolbar .container > a.map-button + a.map-button {
    margin-left: .5em;
}
#map-toolbar .container input {
    padding: 4px;
}
#map-toolbar #filter-input {
    width: 2px;
    opacity: 1;
    padding: 6px 6px 6px 30px;
    font-size: 1.5em;
    background: url('/images/icon-search.png') no-repeat 10px 9px #FFF;
}
#map-toolbar #filter-input:focus {
    width: 200px;
}
#map-toolbar a.map-button .fa,
#map-toolbar a.map-button .material-icons {
    margin-right: 7px;
    flex: 0 0 auto;
}
#map-toolbar a.map-button .fa:last-child,
#map-toolbar a.map-button .material-icons:last-child {
    margin-left: 7px;
    margin-right: 0;
}
#map-toolbar a.map-button span {
    flex: 1 1 auto;
}
#map-toolbar .popup-menu a {
    font-size: 1.2em;
    padding: 8px 12px;
}
.show-district .map-container-fullscreen {
    width: calc(100% - 500px);
}
.map-container-fullscreen {
    width: 100%;
    height: 100vh;
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}
.map-container-fullscreen.edit-district {
    width: calc(100vw - 500px);
    height: 100vh;
    top: 0;
}
.map-container-fullscreen #map-canvas-container {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 9;
    overflow: hidden;
    position: relative;
}
.map-container-fullscreen #map-canvas {
    z-index: 9;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: left 0s ease-in-out .3s, top 0s ease-in-out .3s, width 0s ease-in-out .3s, height 0s ease-in-out .3s;
}
#map-canvas-container .screenshot-overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 100%;
    top: 0;
    position: absolute;
    font-size: 1.6em;
    color: #888;
    z-index: 20;
    line-height: 2em;
    background: #FFF;
    text-align: center;
    transition: left 0s ease-in-out .5s, opacity 0s ease-in-out .5s;
}
#map-canvas-container.screenshot {
    z-index: 20;
}
#map-canvas-container.screenshot .screenshot-overlay {
    left: 0;
    opacity: 1;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    transition: left .3s ease-in-out, opacity .3s ease-in-out;
}
#map-canvas-container.screenshot #map-canvas {
    width: 700px;
    height: 474px;
    left: calc(50% - 350px);
    top: calc(50% - 230px);
}
.edit-district-sidebar,
.district-sidebar,
.territory-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #FFF;
    border-left: 1px solid rgba(100, 100, 200, .8);
    box-shadow: -7px 0 5px rgba(0, 0, 0, .1);
    width: 350px;
    display: block;
    z-index: 10;
    box-sizing: border-box;
    transition: right .3s ease-in-out;
}
.territory-sidebar.collapsed {
    right: -360px;
}
.territory-sidebar.browse.collapsed {
    right: -510px;
}
.territory-sidebar + .collapser {
    position: fixed;
    right: 349px;
    top: 120px;
    /*transform: translateX(-99%);*/
    padding: 30px 10px;
    border: 1px solid rgba(100, 100, 200, .8);
    border-right: none;
    box-shadow: -7px 0 5px rgba(0, 0, 0, .1);
    z-index: 25;
    background: #FFF;
    border-radius: 5px 0 0 5px;
    transition: right .3s ease-in-out;
}
.territory-sidebar.browse + .collapser {
    right: 499px;
}
.territory-sidebar.collapsed + .collapser {
    right: 0;
}
.territory-sidebar.collapsed + .collapser .fa {
    transform: rotate(180deg);
}
.territory-sidebar ul.area-territory-list {
    padding: 20px;
}
.territory-sidebar.browse .fa.loading-indicator {
    font-size: 2em;
    margin: 150px auto 0 calc(50% - 2em);
    color: #888;
}
.territory-sidebar.browse ul.area-territory-list .district {
    margin: 0 0 20px;
}
/*.territory-sidebar.browse ul.area-territory-list .district .button-group button {*/
    /*padding: 7px 10px;*/
/*}*/
/*.territory-sidebar.browse ul.area-territory-list .district .button-group button > .fa {*/
    /*margin: 0;*/
/*}*/
.territory-sidebar.browse ul.area-territory-list .district .button-group .fa + span,
.district-card-container .fa + span {
    /*display: none;*/
}
.territory-sidebar.browse ul.district-last-completed {
    padding: 5px 0 10px 0;
}
.territory-sidebar .territory-header {
    position: relative;
    display: block;
}
.area-territory-container {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    transition: height .2s ease-in-out, opacity .2s ease-in-out;
}
.area-territory-container.active {
    height: auto;
    opacity: 1;
    overflow: auto;
}
.territory-sidebar .information {
    font-size: 1.6rem;
    flex: 1 1 auto;
}
.infobox.active {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 250px;
    padding: 2rem;
    flex-direction: column;
    font-size: 1.4rem;
}
.information {
    color: #AAA;
}
.information .fa {
    font-size: 3.5rem;
    z-index: 1;
    position: relative;
    vertical-align: bottom;
    padding-top: 0;
}
.information .fa:first-child {
    margin-right: -3rem;
    color: rgb(33, 150, 243);
    z-index: 2;
    margin-bottom: 15px;
}
.information .message {
    display: block;
    margin-top: 1.8rem;
    line-height: 2rem;
}
.infobox .action-button {
    text-align: center;
    margin-top: 25px;
    font-size: .8rem;
}
.territory-header .color-strip {
    top: auto;
    bottom: -2px;
}
.count-badge {
    display: inline-block;
    margin-left: 10px;
    font-size: .9em;
    background-color: rgba(100, 100, 100, .2);
    border-radius: 16px;
    color: #333;
    padding: 7px 12px;
    vertical-align: middle;
}
.disabled .count-badge {
    opacity: .4;
}
.territory-sidebar .district h3 .shader {
    padding: 10px;
    /*margin-top: -46px;*/
}
.district h3 .map-canvas-overview img{
    width: 100%;
}
.district h3 .map-canvas-overview{
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}

#district-main-container #map-toolbar {
    width: calc(100% - 615px);
    top: 14px;
}
.frame-container {
    position: fixed;
    z-index: 11;
    border-width: 0;
    border-color: rgba(0, 0, 0, .7);
    border-style: double;
    width: 25px;
    height: 25px;
    display: block;
}
.frame-container.top-left {
    top: calc(50% - 245px);
    left: calc(50% - 600px);
    border-top-width: 5px;
    border-left-width: 5px;
}
.frame-container.top-right {
    top: calc(50% - 245px);
    right: calc(50% - 100px);
    border-top-width: 5px;
    border-right-width: 5px;
}
.frame-container.bottom-left {
    bottom: calc(50% - 245px);
    left: calc(50% - 600px);
    border-bottom-width: 5px;
    border-left-width: 5px;
}
.frame-container.bottom-right {
    bottom: calc(50% - 245px);
    right: calc(50% - 100px);
    border-bottom-width: 5px;
    border-right-width: 5px;
}
.district-card-container {
    position: fixed;
    bottom: 75px;
    left: 25px;
    display: block;
    width: 400px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    z-index: 25;
    transition: transform .3s ease-in-out;
    transform: translateX(-110%);
}
.district-card-container.active {
    transform: translateX(0%);
}
.make-a-map-checklist {
    position: fixed;
    top: 200px;
    left: 25px;
    display: flex;
    flex-direction: column;
    width: 400px;
    padding: 15px;
    background: #FFF;
    border: none;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    font-size: 1.1em;
    color: #555;
    z-index: 10;
}
.make-a-map-checklist.completed {
    width: 200px;
    font-size: .9em;
}
.make-a-map-checklist.completed .item {
    padding: 5px;
}
.make-a-map-checklist .item {
    margin: 0;
    padding: 10px;
    transition: color .3s ease-in-out;
    line-height: 1.4em;
}
.make-a-map-checklist .item.checked {
    color: #CCC;
}
.make-a-map-checklist .item:not(.checked) + .item:not(.checked),
.make-a-map-checklist .item:not(.checked) + .item:not(.checked) .intro {
    color: #DDD;
}
.make-a-map-checklist .button-container {
    margin: 10px 0 15px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: .85em;
}
.make-a-map-checklist .button-container button + button {
    margin-top: 5px;
}

.make-a-map-checklist .item .intro {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: #888;
}
.make-a-map-checklist:not(.completed) .item.checked .intro {
    text-decoration: line-through;
}
.make-a-map-checklist.completed .item .description {
    display: none;
}

.make-a-map-checklist .item .checked,
.make-a-map-checklist .item.checked .unchecked {
    display: none;
}
.make-a-map-checklist .item:not(.checked) .unchecked,
.make-a-map-checklist .item.checked .checked,
.make-a-map-checklist .helpful {
    display: inline-block;
    margin-right: 7px;
}
.map-pan-message {
    position: fixed;
    bottom: 25px;
    left: 25px;
    display: block;
    width: auto;
    padding: 10px;
    background: #FFF;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    font-size: 1.1em;
    color: #555;
    z-index: 10;
}
.district-sidebar,
.territory-sidebar.browse {
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 1rem;
}
.territory-sidebar.browse {
    padding: 0;
}
.edit-district-sidebar {
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 0;
}
.edit-district-sidebar > .tab-bar {
    flex: 0 0 auto;
}
.edit-district-sidebar > .tab-panes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.edit-district-sidebar > .tab-panes > .tab-pane {
    flex: 1 1 auto;
    flex-direction: column;
}
.edit-district-sidebar h1 {
    display: none;
}
.edit-district-sidebar .color-strip {
    position: relative;
    height: 5px;
}
.edit-district-sidebar form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.edit-district-sidebar .map-editor-highlight {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.edit-district-sidebar .submit-container {
    margin-bottom: 0;
    flex: 0 0 auto;
}
.edit-district-sidebar #no_district_comments.info {
    padding: 20px;
}
#edit_district_indicator {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
#shape-list {
    padding: 0;
    box-sizing: border-box;
    border: none;
    margin: 15px 0;
}
#shape-list .map-explanation { padding: 10px 0; color: #AAA; font-size: 1em; font-style: italic; }
#shape-list h4, .map-editor-highlight h4 {
    color: #777;
    text-transform: uppercase;
    font-weight: normal;
    padding: 0 0 7px 0;
    box-sizing: border-box;
    border: none;
    margin-bottom: 0;
    display: block;
}
#map-shapes {
    box-sizing: border-box;
    list-style: none;
    padding: 7px 0;
    background-color: #FFF;
    margin: 0;
    border: 1px solid rgba(100, 100, 100, .3);
}
#map-shapes .box { margin-right: 5px; }
#map-shapes .remove-shape { display: none; margin-right: 5px; font-size: 1.1em; padding: 0 2px; line-height: 11px; }
#map-shapes li:last-child .remove-shape { display: inline-block; }
#map-shapes button.remove-shape .fa { margin: 0; }
#map-shapes li {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    padding: 8px;
    position: relative;
    background-color: transparent;
    font-size: 0.9em;
    color: #555;
    transition: background-color 0.3s ease-in-out;
}
#map-shapes li.no-shapes {
    width: auto;
    display: block;
    font-size: 1em;
    color: #AAA;
    padding: 10px;
    font-style: italic;
}
#map-shapes li.coverage {
    width: auto;
    display: block;
    font-size: 1em;
    background-color: #FAFAFA;
    margin: 0;
}
#map-shapes li:hover {
    background-color: #F4F4F4;
}
#map-shapes .toggle-coverage {
    color: #777;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    background-color: transparent;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
#map-shapes .toggle-coverage:hover {
    background-color: #AAA;
    color: #FFF;
}
.edit-district form ul, #district-actions-menu ul {
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    flex: 1 1 auto;
}
.edit-district.edit-district-map label {
    color: #777;
}
.edit-district.edit-district-map form ul {
    margin: 0;
    font-size: 0.9em;
    display: block;
}
.edit-district form ul label {
    min-width: 103px;
}
.edit-district.edit-user ul label {
    min-width: 160px;
}
.edit-district.edit-district-map ul li.is_active,
.edit-district.edit-district-map ul li.num_visits {
    display: inline-block;
    width: calc(50% - 5px);
}
.edit-district.edit-district-map.is-campaign ul li.num_visits {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(100, 100, 100, .1);
    padding: 10px;
    font-size: 1.2em;
    margin-top: -2px;
    border: 1px solid rgba(150, 150, 150, .4);
    border-radius: 0 0 3px 3px;
    background-color: #FFF;
}
.edit-district.edit-district-map.is-campaign #district_num_visits {
    color: #555;
}
.edit-district.edit-district-map ul li.is_active label,
.edit-district.edit-district-map ul li.num_visits label {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    width: 105px;
}
.edit-district.edit-district-map ul li.is_active select,
.edit-district.edit-district-map ul li.num_visits input {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    box-sizing: border-box;
    height: 35px;
    padding: 7px;
    line-height: 1em;
}

.edit-district ul li.number,
.edit-district ul li.dates,
.edit-district ul li.name,
.edit-district ul li.special-article,
.edit-district ul li.color {
    display: inline-block;
}
.edit-district ul li.description {
    display: block; margin: 15px 0 10px 0;
}
.edit-district ul li.flags {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.edit-district ul li.number label,
.edit-district ul li.name label,
.edit-district ul li.is_active label,
.edit-district ul li.special-article label,
.edit-district ul li.dates label,
.edit-district ul li.description label,
.edit-district ul li.location label,
.edit-district ul li.color label,
.edit-district.edit-district-map ul li.area_picker label,
.edit-district.edit-district-map ul li.campaign-territories-list > label {
    display: block; font-size: 1.1em; padding: 0 0 5px;
}
.edit-district ul li.number input,
.edit-district ul li.name input,
.edit-district ul li.email input {
    font-size: 1.3em; padding: 5px;
}
.edit-district.edit-district-map ul li.number input,
.edit-district.edit-district-map ul li.name input {
    font-size: 1.5em; padding: 8px;
}
.edit-district.edit-district-map ul li.number input {
    width: 100%;
}
.edit-district ul li.description textarea {
    font-size: 1.1em;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Source Sans Pro';
    height: 143px;
    margin: 0;
}
.edit-district ul li.description .num_visits {
    display: block;
    padding: 10px 0;
}
.edit-district ul li.description .num_visits label {
    display: inline-block;
    width: 140px;
}
.edit-district ul li.description .num_visits input {
    width: 50px;
}
.edit-district ul li.number, .edit-district ul li.color {
    width: 100px;
    vertical-align: bottom;
}
.edit-district.edit-district-map ul li.number {
    width: 60px;
}
.edit-district.edit-district-map ul li.name {
    width: calc(100% - 63px);
}
.edit-district ul li.name input {
    width: 100%;
}
.edit-district ul li input[name=num_visits] {
    width: 40px;
}
.edit-district ul li.location input[name=location] {
    width: 515px;
}
.edit-district.edit-district-map ul li.location {
    width: 100%;
    margin-top: 10px;
}
.edit-district.edit-district-map ul li.location input[name=location] {
    width: 100%;
}
.edit-district ul li.name {
    width: 413px; vertical-align: bottom;
}
.edit-district.edit-district-map ul li.name input, .edit-district.edit-district-map ul li.number input {
    padding: 6px;
}
.edit-district.edit-district-map ul li.area_picker {
    width: 100%;
    vertical-align: top;
    display: block;
    margin: 0;
}
.edit-district ul li.is_active select {
    width: 100%;
}
.edit-district.edit-district-map ul li.is_active select {
    padding: 7px;
}
.edit-district.edit-district-map ul li.area_picker select {
    width: 100%;
}
.edit-district ul li.username, .edit-district ul li.password {
    display: inline-block; width: 250px; margin: 10px 5px 10px 0;
}
.edit-district ul li.email {
    display: inline-block; width: 250px; vertical-align: bottom;
}
.edit-district ul li.separator {
    display: block;
}
.edit-district ul li.separator.invisible {
    height: 1px;
}
.edit-district ul li.username label, .edit-district ul li.email label, .edit-district ul li.password label {
    display: block; margin-bottom: 5px;
}
.edit-district ul li.username input, .edit-district ul li.email input, .edit-district ul li.password input {
    width: 240px;
}
.edit-district ul li.special-article input {
    width: 300px;
}
.edit-district ol {
    display: block;
    clear: none;
    float: none;
    width: 100%;
    min-height: 150px;
    overflow: auto;
    box-sizing: border-box;
    padding: 5px;
    margin: 0;
    border: none;
    height: calc(100vh - 720px);
    border-radius: 3px 3px 0 0;
    border: 1px solid rgba(150, 150, 150, .4);
    background-color: #FFF;
}
.edit-district.custom-mapped ol {
    height: calc(100vh - 850px);
}
.edit-district ol li {
    display: inline-block; clear: none; float: none; width: 49%; box-sizing: border-box; padding: 0 5px 5px 0; margin: 0; border: none;
}
.edit-district ol .district-name {
    display: inline-block; vertical-align: middle; width: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.edit-district ol li {
    width: 375px;
}
.edit-district ol li input[type=checkbox] {
    display: none;
}
.edit-district ol li input[type=checkbox]:checked + label .district-number {
    background-color: rgba(100, 150, 100, 0.6); color: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.2);
}
.edit-district ol li input[type=checkbox]:checked + label .district-name {
    color: rgba(50, 100, 50, 0.6);
}
.edit-district ol li.taken, .edit-district ol li.taken span {
    opacity: 0.6; text-decoration: line-through;
}
.district-name {
    transition: color 0.3s ease;
}
.edit-district ol li label {
    width: 340px; overflow: hidden; white-space: nowrap;
}
.edit-district.edit-district-map ul li.campaign-territories-list {
    margin-top: 15px;
}
.edit-district.edit-district-map ul li.description {
    width: 100%;
    box-sizing: border-box;
    display: block;
}
.edit-district.edit-district-map ul li.description textarea {
    border: 1px solid rgba(100, 100, 100, .4);
    font-size: 1.25em;
}
.edit-district-map .handout-details {
    display: block;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    flex: 1 1 auto;
}
.edit-district-map .handout-details li {
    display: inline-block;
    padding: 5px 0;
    width: calc(50% - 3px);
    box-sizing: border-box;
}
.edit-district-map .handout-details li.explanation, .edit-district-map .handout-details li.is_out {
    display: block;
    padding: 5px 0;
    width: 100%;
    box-sizing: border-box;
    color: #555;
    line-height: 1.4em;
}
.edit-district-map .handout-details label {
    display: block;
    padding: 5px 0;
}
.edit-district-map .handout-details li.is_out label {
    display: inline-block;
}
.edit-district-map .handout-details li.is_out .faded_out {
    display: inline-block;
    float: right;
    vertical-align: middle;
    padding: 5px 0;
}
.edit-district-map .handout-details input {
    width: calc(40% - 10px);
    box-sizing: border-box;
    font-size: 1em;
    padding: 7px;
}
.edit-district-map .handout-details a.button {
    width: auto;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
}
.edit-district-map .handout-details .faded_out {
    display: block;
    padding: 10px 0 0 0;
}
/*.territory-header .name-container {*/
    /*font-size: 1.3em;*/
    /*color: #888;*/
    /*text-transform: uppercase;*/
    /*padding: 10px;*/
    /*font-weight: 300;*/
/*}*/
.map-explanation {
    padding: 0 0 12px 0;
    color: #888;
    display: block;
    font-size: 1.2em;
    vertical-align: middle;
}
.map-editor-highlight { 
    padding: 10px;
    margin: 0;
    background-color: rgba(235, 235, 235, 0.4);
    color: rgba(166, 165, 165, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
}
.map-editor-highlight > span.custom-image-infotainer {
    background-color: #FFF;
    color: #555;
    border: 1px dotted rgba(100, 100, 100, 0.4);
    padding: 10px;
    margin: 15px 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
}
.custom-mapped .map-editor-highlight > span.custom-image-infotainer {
    display: flex;
    flex: 0 0 400px;
    position: fixed;
    bottom: 15px;
    right: 525px;
    left: auto;
    width: 400px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .6);
}
span.custom-image-infotainer .info {
    color: #555;
    flex: 1 1 auto;
    margin-right: 15px;
}
span.custom-image-infotainer .info label {
    color: #555;
    display: block;
    text-transform: uppercase;
}
span.custom-image-infotainer .info select {
    display: block;
    width: 100%;
    margin: 10px 0;
}
span.custom-image-infotainer .preview {
    flex: 0 0 250px;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid rgba(100, 100, 100, .3);
    background: #FFF;
}
span.custom-image-infotainer .preview img {
    width: 100%;
    box-sizing: border-box;
}
#remove-district-map {
    display: none;
}
.custom-mapped #remove-district-map {
    display: block;
}
.map-editor-highlight > span {
    padding: 5px 0;
    color: #AAA;
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
}
.map-editor-highlight > .button {
    margin: -1px -2px 0 0;
    float: right;
    vertical-align: middle;
}
#district-actions-menu {
    margin: 0;
    left: auto;
    right: 9px;
    width: 250px;
}
#district-actions-menu ul {
    display: inline-block;
    width: 235px;
    box-sizing: border-box;
    vertical-align: top;
}
#district-actions-menu ul .header {
    padding: 0 0 10px 5px;
    font-size: 0.9em;
}
h3 .shader {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 10px;
    color: #FFF;
    position: relative;
    background: rgba(0, 0, 0, .45);
    z-index: 10;
}
.area h3 .shader {
    margin-top: 150px;
}
.district h3 .shader {
    margin-top: -54px;
}
.backdrop_box.medium.changelog {
    padding: 10px;
    text-align: left;
}
.changelog h2, .changelog h4 {
    text-align: left;
    text-transform: uppercase;
    color: #888;
    font-weight: normal;
}
.changelog h2 {
    font-size: 1.6em;
    margin-bottom: 5px;
    padding: 5px;
}
.changelog h4 {
    font-size: 1.3em;
}
.changelog ul {
    margin: 0 10px 25px 10px;
    padding: 5px;
}
.changelog li {
    padding: 3px;
    line-height: 1.3em;
}
.changelog p {
    padding: 3px;
    line-height: 1.3em;
}
.changelog li h5 {
    font-size: 1.05em;
    font-weight: bold;
    color: #777;
    padding: 3px 0;
    display: block;
}
.changelog .button {
    align-self: flex-end;
}
.district-history #backdrop_detail_content { padding: 0; }
.district-history h4 { font-size: 1.15em; color: #AAA; text-transform: uppercase; font-weight: normal; border-bottom: 1px dotted #CCC; padding: 5px 0; margin: 15px 0 5px 0; position: relative; }
.district-history h4 .button-group { float: right; margin-top: -7px; }
.district-history h4 .button-group .button { font-size: 0.75em; padding: 4px 5px; float: right; line-height: 1.4em; }
.district-history .button-group .button { font-size: 1.15em; padding: 7px 10px; float: left; line-height: 1.4em; }
.share-link {
    padding: 25px 0 10px 0;
}
.share-markers {
    font-size: 1.2em;
    padding-bottom: 25px;
}
#share-territory .district-picked-message {
    margin: 0;
}
.share-link a.button {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgba(100, 100, 100, .2);
    text-transform: none;
    font-size: 1.3em;
    word-wrap: break-word;
    width: calc(100% - 50px);
}
.handin-early-instructions { font-size: 1.2em; font-weight: normal; padding: 10px 0 15px; text-align: left; line-height: 1.4em; }
.handin-early-instructions .important { font-weight: 600; display: block; margin-top: 15px; }
.handin-quote { font-size: 1.1em; font-weight: normal; color: #CCC; padding: 5px 0; text-align: left; line-height: 1.4em; }
.handin-quote .source { font-weight: bold; text-transform: uppercase; display: block; text-align: right; }
.button-action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    font-size: .9em;
    padding: 15px 10px;
}
.button.disabled { opacity: 0.3; }
.areas_list h3 .area_name a, .areas_list h3 .area_name a:hover {
    color: inherit;
    border: none;
}
h3 .area_name {
    flex: 1 1 auto;
}
.color-strip {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
}
.areas_list .area {
    position: relative;
    margin: 5px 0 10px 0;
    max-width: 640px;
    padding: 0;
    border-radius: 4px;
    border: none;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    background-color: #FFF;
    list-style: none;
    transition: opacity 0.3s ease;
    opacity: 1;
    overflow: hidden;
}
.areas_list.reporting .area {
    box-sizing: border-box;
    width: calc(50% - 10px);
    display: inline-block;
    margin-bottom: 0;
}
.areas_list.handout-list .area {
    margin: .5em auto;
}
.areas_list.reporting .area .counts .count {
    margin-bottom: 15px;
}
.handin-instructions {
    display: block;
    vertical-align: top;
    padding: 0;
    width: auto;
}
.handin-lookup {
    display: block;
    box-sizing: border-box;
    width: auto;
    padding: 10px;
    font-size: 1.1em;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-shadow: 0 0 2px rgba(155, 155, 155, 0.2);
    background-color: rgba(200, 225, 200, 0.1);
    max-width: 640px;
}
.handin-lookup h1 {
    padding: 0;
}
.handin-lookup label {
    font-size: 0.9em;
    display: block;
    margin-bottom: 7px;
}
.handin-lookup input[type=search] {
    width: 100px;
    display: inline-block;
    margin-right: 10px;
}
.areas_list .area.inactive {
    opacity: 0.4;
}
.areas_list .area.inactive:hover {
    opacity: 1;
}
.areas_list .area:hover {
    background-color: rgba(200, 200, 200, 0.1);
}
.area-description {
    color: #888;
    padding: 13px 10px 10px 10px;
    margin-bottom: 3px;
    position: relative;
}
.district-description { padding: 10px; position: relative; }
.district-description .tab-pane {
    flex-direction: column;
}
.district-description .color-strip { height: 6px; }
.district-description .description { line-height: 1.4; font-size: 1.25em; color: #666; padding: 15px 10px; }
.district-card-page .campaign-districts { padding: 10px 0; }
.district-description .description label, .campaign-districts label { font-size: 0.8em; display: block; }
.campaign-districts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    clear: both;
}
.campaign-districts ul li.district-details {
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    clear: both;
    font-size: 1.25em;
    line-height: 1.4em;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    border-radius: 4px;
}
.campaign-districts ul li.district-details:last-child {
    margin-bottom: 0;
}
.campaign-districts ul li.district-details .district-name-and-number {
    padding: 10px;
    border: none;
    border-bottom: 1px solid rgba(100, 100, 100, .2);
    border-radius: 4px 4px 0 0;
    background-color: rgb(250, 250, 250);
}
.campaign-districts ul li.district-details .district-name-and-number .district-name {
    color: #555;
}
.campaign-districts ul li.district-details .image-and-description-container {
    display: flex;
    flex-direction: row;
    border: none;
    border-radius: 0 0 4px 4px;
}
.campaign-districts ul li.district-details .image-and-description-container .image-container {
    flex: 0 0 60%;
    padding: 10px;
}
.campaign-districts ul li.district-details .image-and-description-container .district-description {
    flex: 1 1 auto;
    display: inline-block;
    padding: 10px 0;
}
.campaign-districts img {
    width: calc(100% - 5px);
    display: block;
}
.campaign-districts .district-description {
    display: none;
}
.district-card-page .campaign-districts .district-name {
    color: #AAA;
    vertical-align: middle;
    text-transform: uppercase;
}
.district-history .campaign-districts .territory-preview {
    display: none;
}
.area-description .num_districts { padding: 10px; font-size: 1.3em; }
.area-description .num_districts .count-badge { margin-right: .35em; margin-left: 0; }
.area_range, .district-badge, .district-badge:hover, .button-badge, .button-badge:hover, .area_range:hover { display: inline-block; background-color: rgba(255, 255, 255, 0.85); border-radius: 2px; padding: 5px; flex: 0 0 auto; color: #555; box-shadow: 0 0 2px rgba(100, 100, 100, 0.3); font-size: 0.8em; text-shadow: none; }
.button-badge, .button-badge:hover { text-transform: uppercase; color: #888; font-size: 0.9em; }
.district-badge, .district-badge:hover { min-width: 18px; text-align: center; }
.areas_list .area_range.edit-area { top: 10px; bottom: auto; font-size: 0.6em; }
span.quarantine_days { display: none; margin-top: 10px; }
span.quarantine_days label { display: inline-block; }
.edit-area input[type=checkbox]:checked + span.quarantine_days { display: block; }
span.quarantine_days input { width: 80px; }
.district-history .district-badge { position: relative; left: auto; top: auto; right: auto; bottom: auto; display: inline-block; margin-right: 8px; }
.area_range span:last-child:before { content: '- '; }

.counts { display: block; font-weight: normal; text-align: center; padding: 15px 0; }
.areas_list .reporting .counts { text-align: left; }
.counts .count { display: inline-block; text-align: center; color: #555; margin: 5px 10px; box-sizing: border-box; max-width: calc(25% - 25px); min-width: calc(20% - 25px); }
.counts.autopick-grouped .count { width: calc(33% - 25px); }
.areas_list .reporting .counts .count { width: calc(50% - 25px); text-align: left; }
.counts .count { font-size: 1.6em; }
.counts .count .label { display: flex; align-items: center; font-size: 0.55em; text-transform: uppercase; color: #AAA; margin-bottom: 7px; justify-content: center; margin-top: 8px; }
.counts .count .label span { flex: 0 0 auto; text-align: left; }
.counts .count .label span.image-container { flex: 0 0 24px; margin-right: 8px; }
.counts .count .label img { width: 100%; }

.area .district, .area.mode-handout .district { display: none; font-size: 1em; box-shadow: none; border-top-width: 0; margin: 0; border-left-width: 0; border-right-width: 0; border-radius: 0; }
.area.selected .district, .area.mode-handout .district { display: block; position: relative; }
.handin .area .color-strip { height: 15px; opacity: 0.6; }

.handin .area .area-description { padding: 0; height: 15px; }
.handin .area .district .district-actions { padding-bottom: 0; }
.handin #districts_list .district:not(.handed-out) { display: none; }
.area .district .district-number { font-size: 1.5em; }
.area .district:first-child { font-size: 1em; box-shadow: none; border-top-width: 1px; }
.area .district:last-child { font-size: 1em; box-shadow: none; border-bottom-width: 0; }

.district, .congregation, .user, .campaign {
    font-size: 1em;
    position: relative;
    margin: 5px 0 7px 0;
    padding: 0;
    border-radius: 4px;
    border: none;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    background-color: #FFF;
    list-style: none;
    overflow: visible;
}
.district:target {
    margin-top: 50px;
    margin-bottom: 50px;
}
.congregation:hover, .user:hover, .campaign:hover { cursor: pointer; }
.district:hover, .congregation:hover, .user:hover, .campaign:hover { background-color: rgb(250, 250, 250); }
.district-number {
    display: inline-block;
    flex: 0 0 auto;
    background-color: rgb(255, 255, 255);
    vertical-align: middle;
    border-radius: 1px;
    padding: 5px;
    color: #555;
    border: 1px solid rgba(150, 150, 150, 0.2);
    font-size: 1.1em;
    float: none;
    margin: 0 7px 0 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    line-height: 1em;
}
.district-badge.district-number {
    font-size: 0.9em;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    right: auto;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
.district-name-and-location {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.district .color-strip {
    position: relative;
}
.district .district-location {
    display: block;
    padding: 0;
    font-size: 0.9em;
    color: #777;
}
.district .shader .district-location {
    font-size: 0.75em;
    color: #FFF;
    text-shadow: 0 0 3px rgba(50, 50, 50, 0.4);
}
.district .shader:hover .district-location {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.district-location img {
    width: 16px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
.congregation .congregation-name, .campaign .campaign-name, .user .user-name {
    display: inline-block;
    font-weight: normal;
    font-size: 1.25em;
    vertical-align: middle;
    background: transparent;
    color: #555;
    line-height: 1.2em;
}
.district .district-name-and-number {
    font-weight: normal;
    font-size: 1.25em;
    vertical-align: middle;
    background: transparent;
    color: #555;
    line-height: 1.2em;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.district .district-name-name {
    display: inline-block;
    vertical-align: middle;
    flex: 1 1 auto;
}
.user .user-email {
    font-size: 0.8em;
    display: inline-block;
    margin-left: 15px;
    color: #AAA;
    vertical-align: middle;
}
.user .user-email a {
    color: rgba(75, 125, 75, 0.5);
    background: transparent;
}
.user .user-email a:hover {
    color: rgba(75, 125, 75, 0.8);
    background: transparent;
}
.district .district-actions, .congregation .congregation-actions, .campaign .campaign-actions, .user .user-actions {
    text-align: left;
    overflow: auto;
    padding: 10px 10px 10px 5px;
}
.district .district-actions {
    background-color: rgba(200, 200, 200, 0.15);
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
/*.congregation .button-group, .campaign .button-group, .user .button-group {*/
    /*position: absolute;*/
    /*top: 10px;*/
    /*right: 10px;*/
/*}*/
/*.district .button-group, .campaign .button-group {*/
    /*position: absolute;*/
    /*top: 10px;*/
    /*right: 5px;*/
    /*font-size: .9em;*/
/*}*/
/*.district .button-group.non-admin, .district .actions-container.non-admin {*/
    /*position: relative;*/
    /*display: block;*/
    /*height: 53px;*/
    /*clear: both;*/
    /*left: 0;*/
    /*top: auto;*/
    /*text-align: right;*/
    /*box-sizing: border-box;*/
    /*width: 100%;*/
    /*padding: 10px;*/
/*}*/
/*.district .button-group.non-admin .button {*/
    /*float: none;*/
    /*padding: 7px 10px;*/
    /*font-size: 1.1em;*/
    /*display: inline-block;*/
/*}*/
/*.district .button-group .button, .district .button-group button, .congregation .button-group .button, .campaign .button-group .button, .user .button-group .button {*/
    /*float: left;*/
/*}*/
ul.district-last-completed {
    list-style: none;
    margin: 7px;
    padding: 5px 7px 15px 7px;
    /*min-height: 50px;*/
}
ul.district-last-completed li:not(.district-picked-message) {
    display: inline-block;
    margin: 0 5px 0 0;
    /*width: 330px;*/
    vertical-align: top;
}
ul.district-last-completed li.district-picked-message {
	font-size: 1em;
	margin: 10px 2px;
}
ul.district-last-completed li.campaign-territories {
    display: block;
    width: auto;
    margin: 10px;
    border-top: 1px dotted #CCC;
    padding: 10px 0 0 0;
}
ul.district-last-completed li.campaign-territories label {
    display: block;
    text-align: center;
    margin-bottom: 5px;
}
ul.district-last-completed li.campaign-territories .district-name-and-number {
    font-size: 0.9em;
    padding: 2px 0;
}
ul.district-last-completed li label {
    width: auto;
    min-width: 0;
    margin-right: 7px;
}
ul.district-last-completed .handed-out-name-container {
    display: block;
}
.district-last-completed, .congregation-details, .campaign-details, .user-details {
    display: block;
    padding: 20px 10px;
    font-size: 1.1em;
    position: relative;
}
.digital-copy {
    font-size: 1em;
    color: rgb(100, 100, 100);
    line-height: 1.4em;
    text-align: left;
    padding: 15px;
}
.show-district {
    display: block;
    max-width: 900px;
    box-sizing: border-box;
    margin: 0 auto;
}
.show-district.district-card-page {
    max-width: 800px;
}
.show-district h1 {
    padding: 10px 0;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    display: flex;
    white-space: nowrap;
    text-overflow: ellipsis;
	flex-direction: row;
	flex-wrap: nowrap;
}
.show-district h1 .crumb {
    font-size: 0.7em;
}
.name-container {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
    align-self: center;
}
h1 .button-group {
	float: none;
	flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.show-district h1 .download-link {
    float: none;
    vertical-align: middle;
}
h1 button.popup-activator, .main-menu h1 ul.popup-menu, h1 .popup-menu {
    font-size: 0.8em;
    text-transform: none;
    margin-top: 0;
    left: auto;
    right: 0;
}
h1 .popup-menu li {
    font-size: 0.8em;
}
.crumb:after {
    display: inline-block;
    content: '\A0\BB\A0';
}
.show-district .district-maps-container:not(.map-container-fullscreen) {
    display: block;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.7);
    margin: 10px 0;
    z-index: 10;
}
.district-unavailable-overlay {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(200,200,200,.2) 35px, rgba(200,200,200,.2) 70px);
    font-size: 2.4em;
    font-weight: normal;
    color: rgba(100, 100, 100, 0.6);
    padding-top: 200px;
}
.show-district .district-maps-container .button-badge {
    bottom: auto;
    top: 10px;
    font-size: 1.1em;
    cursor: pointer;
}
.show-district .district-maps-container > img, .show-district .district-maps-container > .district-view, .show-district .district-maps-container.show-overview > img.overview {
    width: 100%;
    display: block;
}
.show-district .district-maps-container > img.overview, .show-district .district-maps-container.show-overview > img.zoom, .show-district .district-maps-container.show-overview > .district-view.zoom {
    display: none;
}
.show-district .district-maps-container .color-strip {
    top: auto;
    bottom: -2px;
}
.show-district .district-maps-container a.open-in-google {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 36px;
    height: 36px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 2px rgba(25, 25, 25, 0.6);
}
.show-district .district-maps-container a.open-in-google img {
    width: 100%;
    height: 100%;
}
.show-district .district-maps-container .color-strip {
    display: none;
}
.district-picked-message {
    display: block;
    box-sizing: border-box;
    background-color: rgb(250, 250, 200);
    padding: 15px;
    font-size: 1.05em;
    font-weight: normal;
    color: rgba(50, 50, 50, 0.7);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    margin: 10px 0;
}
.district-picked-message:first-line {
    font-size: 1.2em;
    line-height: 1em;
    font-weight: 600;
}
.district-picked-message.woops {
    background-color: rgb(250, 200, 200);
}
.district-picked-message.login-token {
    background-color: #CFE8CF;
    font-size: 1.1em;
}
.district-picked-message .username {
    font-weight: bold;
}
.district-meta-container {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    padding: 0;
}
.district-meta-container .num-visits {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-sizing: border-box;
    background-color: rgba(77, 103, 193, 1);
    border-radius: 4px;
    padding: 8px;
    font-size: 1.1em;
    font-weight: normal;
    color: #FFF;
    line-height: 1.4em;
    text-align: center;
}
.district-meta-container .num-visits.dont-visit {
    background-color: rgba(193, 82, 78, 1);
}
.num-visits .count-houses {
    font-size: 1.9em;
}
.num-visits .count-houses + span {
    line-height: .6em;
    white-space: nowrap;
}
.num-visits .material-icons {
    font-size: 1.2em;
}
.district-expiration-date {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-sizing: border-box;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    padding: 10px 5px;
    font-size: 1.15em;
    font-weight: normal;
    color: #555;
}
#handout_content .district-expiration-date {
    margin: 10px;
    padding: 10px;
    flex-direction: row;
    align-items: center;
}
.district-expiration-date.overdue {
    background-color: #AA0000;
    color: #FFF;
}
.district-expiration-date .handed-out-completed-type {
    font-size: 1.2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
}
.district-expiration-date .handed-out-completed-type span:not(.image-container) {
    flex: 1 1 auto;
}
.district-expiration-date .material-icons {
    margin-right: .15em;
    flex: 0 0 auto;
    font-size: 2.1em;
}
.district-expiration-date .image-container { flex: 0 0 24px; margin: 0 8px; }
.district-expiration-date img { width: 24px; }
.district-expiration-date > span {
    flex: 0 0 auto;
}
#handout_content .district-expiration-date > span {
    flex: 1 1 auto;
    text-align: left;
}
.district-expiration-date .expiration-date {
    font-weight: 600;
    text-decoration: underline;
}
.show-district .district-description-container {
    font-size: 1.3em;
    color: #555;
    font-weight: 100;
    padding: 15px 0;
    line-height: 1.5em;
}
.show-district .district-description-container label, .show-district .district-more-details label {
    font-size: 0.8em;
    display: block;
}
.show-district .district-more-details label {
    margin-bottom: 5px;
}
.areas_list.show-district .actions-container {
    text-align: right;
    padding: 15px 0;
    position: relative;
    justify-content: flex-end;
    display: flex;
}
.areas_list.show-district .actions-container .button {
    font-size: 1.15em;
    padding: 7px 10px;
    float: none;
    line-height: 1.4em;
}
.show-district .district-more-details {
    display: inline-block;
    padding: 15px 15px 15px 0;
    box-sizing: border-box;
    width: calc(49% - 2px);
    margin: 0;
    font-size: 1.1em;
    color: #555;
}
.district-more-details .num-visits {
    font-size: 1.1em;
}
.campaign .description {
    color: #AAA;
    display: block;
    font-size: 1.05em;
    padding: 5px 5px 10px 5px;
}
.edit-campaign .area-picker {
    font-size: 1.15em;
}
.edit-campaign .area-picker, .edit-campaign .area-picker label {
    display: block;
}
.edit-campaign .area-picker table {
    border: none;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.edit-campaign .area-picker thead {
    background: #FFF;
    border-bottom: 1px dotted rgba(100, 100, 100, 0.2);
}
.edit-campaign .area-picker th {
    font-weight: normal;
    text-transform: uppercase;
    color: #AAA;
    text-align: center;
    width: 100px;
    vertical-align: bottom;
    background: #FFF;
    cursor: pointer;
}
.edit-campaign .area-picker th:first-child {
    width: auto;
    cursor: default;
}
.edit-campaign .area-picker td {
    text-align: center;
    padding: .4em 0;
}
.edit-campaign .area-picker td:first-child {
    text-align: left;
    color: #555;
    font-weight: 600;
}
.district-last-completed .last-completed, .congregation-details .detail, .user-details .detail {
    display: inline-block;
    padding: 5px 0;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1em;
    color: #AAA;
}
.district-last-completed .last-completed.to {
    text-align: center;
}
.district-last-completed .last-completed.to + span img {
    display: none;
    vertical-align: middle;
    margin-right: 5px;
}
.district-last-completed .last-completed.to + span.autoreturned img {
    display: inline-block;
}
.district .comment-container {
    display: block;
    overflow: visible;
    position: absolute;
    bottom: 94px;
    right: -14px;
    z-index: 1;
}
.district .out-container {
    display: none;
    overflow: visible;
    position: absolute;
    bottom: 52px;
    right: -14px;
    z-index: 1;
}
.statistics {
    display: block;
    width: 100%;
}
.statistics .statistic-block {
    width: calc(50% - 20px);
    display: inline-block;
}
.statistics .statistic-block.full {
    width: 100%;
    display: block;
}
.filter-enabled .district.filtered,
.filter-enabled .user.filtered,
.filter-enabled .congregation.filtered,
.filter-enabled .area.filtered
{
    display: none;
}
.filter-bits {
    display: flex;
    text-align: right;
    vertical-align: middle;
    margin: 7px 0 7px 7px;
}
.filter-bit, .filter-bit:hover {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid rgba(100, 100, 100, 0.8);
    color: rgba(100, 100, 100, 0.8);
    text-align: center;
    font-size: 0.9em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 2px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.filter-bit.out {
    background-color: rgb(255, 235, 85);
}
.filter-bit.overdue {
    background-color: rgb(235, 85, 85);
}
.filter-bit.due {
    background-color: rgb(105, 215, 105);
}
.filter-bit.unlabelled {
    background-color: rgb(255, 255, 255);
}
.filter-bit.inactive {
    background-color: rgb(225, 225, 225);
    color: rgb(100, 100, 100);
}
.filter-out .filter-bit.out, .filter-overdue .filter-bit.overdue, .filter-due .filter-bit.due, .filter-unlabelled .filter-bit.unlabelled, .filter-inactive .filter-bit.inactive {
    opacity: 0.3;
}
.filter-unlabelled .district:not(.handed-out):not(.inactive):not(.due):not(.overdue) { display: none; }
.filter-out .district.handed-out:not(.overdue):not(.inactive) { display: none; }
.filter-out.filter-overdue .district.handed-out:not(.inactive).overdue { display: none; }
.filter-due .district:not(.inactive).due { display: none; }
.filter-overdue .district:not(.inactive).overdue { display: none; }
.filter-inactive .district.inactive { display: none; }
.district:not(.inactive).due .out-container.due { display: block; }
.district.inactive .out-container.inactive { display: block; }
.district:not(.inactive).picked .out-container.picked { display: block; }
.district:not(.inactive).handed-out .out-container.out { display: block; }
.district:not(.inactive).handed-out.overdue .out-container.out { display: none; }
.district:not(.inactive).picked.due .out-container.due { display: none; }
.district:not(.inactive).handed-out.overdue .out-container.overdue { display: block; }

.district .comment-container .label {
    background-color: rgb(235, 235, 235);
    color: rgba(55, 55, 55, 0.7);
    position: relative;
}
.district .comment-container .label:after {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -10px;
    right: -1px;
    border-top: 10px solid rgb(215, 215, 215);
    border-right: 15px solid transparent;
}
.district .out-container .label.out {
    background-color: rgb(255, 235, 85);
    color: rgba(55, 55, 55, 0.7);
    position: relative;
}
.district .out-container .label.out:after {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -10px;
    right: -1px;
    border-top: 10px solid rgb(166, 153, 55);
    border-right: 15px solid transparent;
}
.district .out-container .label.due {
    background-color: rgb(105, 215, 105);
    color: rgba(55, 55, 55, 0.6);
    position: relative;
}
.district .out-container .label.due:after {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -10px;
    right: -1px;
    border-top: 10px solid rgb(153, 153, 55);
    border-right: 15px solid transparent;
}
.district .out-container .label.inactive {
    background-color: rgb(225, 225, 225);
    color: rgb(100, 100, 100);
    position: relative;
}
.district .out-container .label.inactive:after {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -10px;
    right: -1px;
    border-top: 10px solid rgb(205, 205, 205);
    border-right: 15px solid transparent;
}
.district .out-container .label.picked {
    background-color: rgb(85, 235, 85);
    color: rgba(55, 55, 55, 0.7);
    position: relative;
}
.district .out-container .label.picked:after {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -10px;
    right: -1px;
    border-top: 10px solid rgb(55, 153, 55);
    border-right: 15px solid transparent;
}
.district .out-container .label.overdue {
    background-color: rgb(235, 85, 85);
    color: rgba(55, 55, 55, 0.7);
    position: relative;
}
.district .out-container .label.overdue:after {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    bottom: -10px;
    right: -1px;
    border-top: 10px solid rgb(153, 55, 55);
    border-right: 15px solid transparent;
}
.district .out-container .label {
    box-shadow: -2px 2px 5px rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(100, 100, 100, 0.3);
    font-size: 1em;
    padding: 8px 5px;
    text-transform: uppercase;
    text-align: right;
    width: 150px;
    display: block;
}
.district .comment-container .label {
    box-shadow: -2px 2px 5px rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(166, 153, 55, 0.4);
    font-size: 1.1em;
    padding: 5px 7px;
    text-transform: uppercase;
    text-align: right;
    width: auto;
    display: inline-block;
}
.district .comment-container .label .fa {
    margin-right: 5px;
}

#register_email {
    font-size: 1.1em;
}
#register_email input[type=email] {
    font-size: 1.1em;
    display: block;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
}
#register_email .error {
    display: none;
    color: red;
}
#register_email.failed .error {
    display: block;
}

li.right-button-group, li.left-button-group { padding: 10px; display: inline-block; width: 49%; box-sizing: border-box; }
li.left-button-group { text-align: left; }
li.right-button-group { text-align: right; }

#map-canvas-container {
    width: 100%;
    height: 150px;
    padding: 0;
    box-shadow: inset 0 0 3px rgba(100, 100, 100, 0.2);
}
.area-map #map-canvas-container {
    height: 550px;
}
.district-maps-container:not(.map-container-fullscreen) #map-canvas-container.district-view {
    height: 500px;
}
#map-canvas { width: 100%; height: 100%; }

#districts_list.handle h3 { margin-top: 15px; font-size: 1.2em; font-weight: normal; border-bottom: 1px solid #CCC; padding-bottom: 6px; padding-top: 10px; margin-bottom: 0; }
#districts_list.handle #districts_list_container { margin-top: 0; margin-bottom: 10px; }
/*#districts_list .district.inactive td { background-color: #DDD; }*/
.districts_list_container { width: 100%; margin-top: 5px; margin-bottom: 20px; }
.handin .districts_list_container { margin-top: 0; }
/*.districts_list_container th:first-child { border-left: 5px solid #EAEAEA; }*/
table th { padding: 5px 2px; background-color: #EAEAEA; border-bottom: 1px solid #CCC; text-align: left; font-weight: bold; font-size: 1em; }
table th.small { font-size: 9px; width: 40px; text-align: center; }

.box {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin: 0 1px;
    opacity: 0.7;
    vertical-align: middle;
}
.box.out {
    background-color: yellow;
}
.box.overdue {
    background-color: red;
}
.box.needs_completion {
    background-color: limegreen;
}
.district_loading_indicator {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    height: 100%;
    display: block;
    z-index: 10;
}
.district_loading_indicator img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

table.sortable th.sortcol { cursor: pointer; }
table.sortable th.sortdesc {
    background: -webkit-linear-gradient(bottom, #A5E5A5 0%, #EAEAEA 70%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(bottom, #A5E5A5 0%, #EAEAEA 70%); /* FF3.6+ */
    background: -ms-linear-gradient(bottom, #A5E5A5 0%, #EAEAEA 70%); /* IE10+ */
    background: -o-linear-gradient(bottom, #A5E5A5 0%, #EAEAEA 70%); /* Opera11.10+ */
    background: linear-gradient(to top, #A5E5A5 0%, #EAEAEA 70%); /* W3C */
}
table.sortable th.sortasc {
    background: -webkit-linear-gradient(top, #A5E5A5 0%, #EAEAEA 70%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top, #A5E5A5 0%, #EAEAEA 70%); /* FF3.6+ */
    background: -ms-linear-gradient(top, #A5E5A5 0%, #EAEAEA 70%); /* IE10+ */
    background: -o-linear-gradient(top, #A5E5A5 0%, #EAEAEA 70%); /* Opera11.10+ */
    background: linear-gradient(to bottom, #A5E5A5 0%, #EAEAEA 70%); /* W3C */
}
td.small span.sortable-content { display: none; }
.completion_list { border-collapse: collapse; }
.completion_list th:first-child { border-left: 1px solid #CCC; }
.completion_list th:last-child { border-right: 1px solid #CCC; }
.completion_list #district_history_add_item { border: 1px solid rgba(100, 100, 100, 0.3); }
.completion_list tbody td { border: none; padding: 3px; font-size: 1.1em; }
.completion_list .out td { background-color: yellow; }
.completion_list td.overdue { background-color: red; }
.completion_list td img, .completion-mode-icon img { width: 16px; margin-right: .35em; vertical-align: middle; display: inline-block; }
.completion_list td span { vertical-align: middle; display: inline-block; }
.completion_list tbody tr:hover { background-color: rgba(245, 245, 245, 0.4); }
#district_completions_list tr.extra { display: none; }
#district_completions_list.show-extra tr.extra { display: table-row; }
.notice {
    display: block;
    border: 1px solid rgba(100, 100, 100, 0.2);
    box-sizing: border-box;
    margin: 10px;
    background-color: rgb(250, 250, 200);
    padding: 15px;
    font-size: 1em;
    font-weight: normal;
    color: rgba(50, 50, 50, 0.7);
}

.log-item {
    position: relative;
    display: block;
    padding: 10px;
    border: 1px solid transparent;
    margin: 3px 0;
    transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out;
    opacity: 0.4;
    color: #777;
}
.log-item .button-group {
    position: absolute;
    right: 3px;
    top: 3px;
}
.log-item.unread {
    color: #333;
    opacity: 1;
}
.log-item:hover {
    border-color: rgba(200, 200, 200, 0.2);
}
.log-item:first-line {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: normal;
}
.log-item .fa {
    margin-right: 7px;
    font-size: 1.1em;
    vertical-align: middle;
}
.log-item time {
    vertical-align: middle;
    display: inline-block;
    margin-right: 7px;
    font-weight: normal;
    color: #AAA;
}
.log-item span, .log-item a, .log-item a:hover {
    vertical-align: middle;
    color: #333;
}
.log-item .item-description {
    display: inline-block;
    font-size: 1.1em;
    padding: 7px 0;
    line-height: 1.2em;
}
.log-item .item-description.comment::before {
    content: '"';
}
.log-item .item-description.comment::after {
    content: '"';
}
.log-item .item-description.comment {
    font-style: italic;
}

.redbox { box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border: 1px solid rgba(140, 13, 13, 0.5); color: #8C0D0D; background-color: rgba(255, 50, 50, 0.6); padding: 5px; }
.greybox { box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); background-color: rgba(200, 200, 200, 0.1); padding: 5px; }
.lightyellowbox { box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); background-color: rgba(249, 245, 178, 0.8); padding: 5px; }
.yellowbox { box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); background-color: rgba(249, 245, 178, 1); padding: 5px; }
.greenbox { box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); background-color: rgba(177, 210, 143, 0.6); border: 1px solid rgba(147, 174, 118, 0.5); padding: 5px; }
.bluebox { box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); background-color: rgba(212, 229, 255, 0.6); border: 1px solid rgba(177, 184, 233, 0.7); padding: 5px; }

.popup-menu, .main-menu ul.popup-menu {
    display: none;
    min-width: 100px;
    margin: 0;
    padding: 5px 0;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    list-style: none;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
}
.popup-activator.active + .popup-menu, .main-menu .popup-activator.active + ul.popup-menu {
    display: block;
    font-size: 1rem;
    z-index: 101;
}
.popup-activator-container {
    position: relative;
    flex: 0 0 auto;
    margin: 0 3px;
}
.popup-activator-container .popup-activator > .label {
    max-width: 300px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: none;
}
.popup-activator-container .popup-activator > label {
    min-width: 0;
    flex: 0 0 auto;
    margin-right: 7px;
}
.filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    background: rgba(225, 225, 225, .1);
    border: none;
    padding: 0;
    margin-top: 0;
}
.filter-bar .search-bar-container {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(225, 225, 225, .3);
    border-radius: 5px 5px 0 0;
    padding: 10px;
    background: #FFF;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.filter-bar .search-options-container {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    flex-wrap: wrap;
    font-size: .9em;
}
.filter-bar .checkbox-options {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.filter-bar .submit-button-container {
    font-size: .9em;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    background-color: rgb(252, 252, 252);
    padding: 20px;
    box-shadow: inset 0 5px 10px -10px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 5px 5px;
    flex-wrap: wrap;
}
.filter-bar i {
    flex: 0 0 auto;
}
.filter-bar input {
    flex: 1 1 auto;
    border: none;
    border-bottom: 1px solid rgba(100, 100, 100, .1);
    background-color: transparent;
    padding: 10px;
}

.popup-menu.from-bottom, .main-menu ul.popup-menu.from-bottom {
    top: auto;
    bottom: calc(100% + 5px);
}
.popup-menu li {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    background-color: transparent;
}
.popup-menu li a, .popup-menu li a:hover {
    display: flex;
    align-items: center;
    padding: 5px;
    font-size: 0.85rem;
    margin: 0;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
}
.popup-menu li.labelled a, .popup-menu li.labelled a:hover {
    padding: 0;
}
.popup-menu li.labelled label, .popup-menu li.labelled label:hover {
    padding: 7px 10px;
    flex: 1 1 auto;
    text-transform: none;
    font-size: 1.1em;
}
.popup-menu li.labelled .fancycheckbox:checked + label, .popup-menu li.labelled label:hover {
    background-color: rgba(85, 136, 85, .2);
}
.popup-menu li.disabled a, .popup-menu li.disabled a:hover {
    color: #CCC;
    background-color: #FFF;
    cursor: default;
}
.popup-menu li.destroy-link a, li.destroy-link a, button.destroy-link i {
    color: #E84545;
}
.district.inactive .deactivate-link, .row.inactive .deactivate-link, .district.inactive .visible-active { display: none; }
.district:not(.inactive) .activate-link, .row:not(.inactive) .activate-link { display: none; }
.popup-menu li.deactivate-link a .fa {
    color: #428739;
}
.popup-menu li.activate-link a {
    color: #777;
}
.district.inactive .popup-activator { border-left-width: 1px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.popup-menu li a:hover {
    background-color: rgba(100, 100, 100, 0.1);
}
.popup-menu li.destroy-link a:hover, li.destroy-link a:hover {
    background-color: #E84545;
    color: #FFF;
}
.popup-menu li a img {
    margin-right: 5px;
}
.popup-menu li a .fa,
.popup-menu li a .material-icons {
    margin-right: 5px;
}
.popup-menu li a .material-icons {
    font-size: .9em;
}
.popup-menu li.separator {
    height: 1px;
    padding: 5px 10px 0px 5px;
    margin: 5px 10px 0 10px;
    border: none;
    box-shadow: none;
    border-top: 1px dotted rgba(150, 150, 150, 0.5);
}
.fullpage_backdrop.dark { background-color: rgba(0, 0, 0, 0.7); }

.upload_container {
    position: absolute;
    height: calc(100% - 35px);
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    color: rgba(0, 0, 0, .4);
    line-height: 1.1em;
    width: 100%;
    left: 0;
    top: 0;
    padding: 35px 0;
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
    font-size: 1.8em;
    font-weight: normal;
    text-align: center;
    border: 3px rgba(100, 100, 100, 0.2) dashed;
    border-radius: 5px;
    -webkit-transition: background-color 0.3s ease, opacity 0.3s ease;
    -moz-transition: background-color 0.3s ease, opacity 0.3s ease;
    -ms-transition: background-color 0.3s ease, opacity 0.3s ease;
    -o-transition: background-color 0.3s ease, opacity 0.3s ease;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.upload_container:hover { opacity: 0.5; }
.upload_container .upload_click_here { color: rgb(50, 150, 50); }
.upload_container.file_hover { background-color: rgb(225, 225, 200); }
#file_upload_list { list-style: none; margin: 0; padding: 0; }
#file_upload_list li { list-style: none; margin: 0; padding: 7px; font-size: 1.1em; }
#file_upload_list li .filename { font-style: italic; }
#file_upload_list li .filesize { color: #AAA; display: inline-block; margin-left: 10px; }
#file_upload_list li label { width: 180px; display: inline-block; font-size: 1.1em; font-weight: normal; }
#file_upload_list li label:first-of-type { font-weight: bold; }
#file_upload_list li input[type="text"] { width: 400px; }
#file_upload_list .progress { display: block; width: 1%; height: 4px; margin: 5px 0; padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.5); background-color: #7777CC; }
#file_upload_list .progress.completed { background-color: #00CC33; opacity: 0.5; }
#file_upload_list { display: block; clear: both; }
#file_upload_list li { clear: both; }
#file_upload_list .imagepreview { display: block; width: 100%; }
.imagepreview { display: block; margin: 0; padding: 2px; border: 1px solid rgba(100, 100, 100, 0.3); transition: border-color 0.3s ease; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
.imagepreview:hover { border-color: rgba(200, 200, 200, 0.5); }
.imagepreview img { display: block; width: 100%; max-height: 115px; margin: 0; padding: 0; }

.district-history .comments-list .comment_content {
    font-size: 1em;
}
.comments-list, .edit-district ul.comments-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.comments-list > li {
    list-style: none;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    display: block;
    border: 1px solid transparent;
    transition: border-color 0.3s ease-in-out;
}
.comments-list:not(.dont-visit-overview) li.dont-visit {
    font-size: 1.1em;
    border-color: rgba(150, 100, 100, 0.1);
    background-color: rgba(193, 82, 78, 1);
    color: #FFF;
}
.comments-list:not(.dont-visit-overview) li.dont-visit button.icon,
.comments-list:not(.dont-visit-overview) li.dont-visit .button.icon {
    color: #FFF;
}
.comments-list:not(.dont-visit-overview) li.dont-visit label {
    color: #FFF;
    font-weight: 600;
}

.comments-list li:target {
    border-color: rgba(100, 100, 100, 0.1);
    background-color: rgba(100, 150, 100, 0.3);
}
.comments-list li .button-group {
    float: right;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    align-content:center;
}
.comments-list .comment_content {
    font-size: 1.1em;
    padding: 5px 0;
}
.comments-list label .flag-important, .comments-list label .flag-unapproved {
    vertical-align: middle;
    font-size: 1.1em;
    display: none;
    margin-right: 7px;
}
.comments-list li.unapproved .unapprove-link, .comments-list li .approve-link {
    display: none;
}
.comments-list li.unapproved .approve-link {
    display: block;
}
.comments-list li.important label .flag-important {
    color: blue;
    display: inline-block;
}
.comments-list li.unapproved label .flag-unapproved {
    color: orange;
    display: inline-block;
}
#no_district_comments.info {
    display: block;
    padding: 10px 0;
    font-size: 1.1em;
    color: #555;
}

.areas_list .district {
    /*width: calc(100% - 20px);*/
    /*max-width: 640px;*/
    margin: 5px auto 12px auto;
    padding-bottom: 2px;
}
.areas_list #district-map-info .info {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    font-size: 1.1em;
    color: #888;
    text-align: center;
    padding: 15px 0;
    border: 1px solid rgba(100, 100, 100, 0.2);
}
.areas_list #district-map-info.hidden .info {
    opacity: 0;
}
.areas_list #district-map-info h2 {
    font-size: 1.3em;
    font-weight: normal;
    padding: 20px 0 5px 0;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out 0.3s;
}
.areas_list #district-map-info .district {
    padding: 10px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out 0.3s;
}
.areas_list #district-map-info.hidden .district, .areas_list #district-map-info.hidden .district.added, .areas_list #district-map-info.hidden h2 {
    opacity: 0;
    visibility: hidden;
}
.areas_list #district-map-info .district.added .button-group {
    display: none;
}
.areas_list #district-map-info .district.added {
    opacity: 0.4;
}
.areas_list .mapped-container .district {
    opacity: 0;
    position: fixed;
    bottom: -400px;
    width: 640px;
    left: calc(50% - 320px);
    transition: opacity 0.6s ease-in-out, bottom 0.6s ease-in-out;
}
.areas_list .mapped-container .district.selected {
    bottom: 15px;
    opacity: 1;
}

.areas_list.manage .district {
    max-width: none;
}

.areas_list .district .map-canvas-overview, .show-district .map-canvas-overview, .show-district .map-canvas { text-align: center; }
.areas_list .district .map-canvas-overview img, .show-district .map-canvas-overview img, .show-district .map-canvas > img {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    width: 100%;
    /*height: 100%;*/
}
span.out_count { display: inline-block; margin-left: 10px; }

.overview-print { display: none; }
.main-menu p.handin-help {
    font-size: 1.1em;
    line-height: 1.4em;
    padding: 0;
    color: #555;
    max-width: 640px;
    margin: 25px 0;
    text-align: left;
}
.edit-user .handin-help {
    padding: 0 0 10px 0;
    line-height: 1.5em;
    font-size: 1.1em;
}

.fab-button.more-popup,
.fab-button,
.fab-button:hover, .more-popup.fab-button:hover,
.fab-button:active, .more-popup.fab-button:active,
.fab-button:focus, .more-popup.fab-button:focus {
    display: block;
    position: fixed;
    bottom: 24px;
    right: 24px;
    top: auto;
    border-radius: 28px;
    padding: 15px 16px;
    line-height: 1;
    color: #FFF;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    background-color: rgb(200, 50, 50);
    z-index: 100;
    outline: none;
}
.fab-button + .fab-button,
.fab-button + ul + .fab-button,
.fab-button + .fab-button:hover, .fab-button + .more-popup.fab-button:hover,
.fab-button + .fab-button:active, .fab-button + .more-popup.fab-button:active,
.fab-button + .fab-button:focus, .fab-button + .more-popup.fab-button:focus{
    bottom: 90px;
}
.fab-button.map-mode {
    /*background-color: #FFFFD3;*/
    /*color: #333;*/
    background-color: #2196F3;
}
.fab-button.pick {
    background-color: #2196F3;
}
.fab-button.share {
    background-color: #00AA00;
}
.fab-button i {
    transition: transform 0.3s ease;
}
.fab-button:active i, .more-popup.fab-button:active i,
.fab-button:focus i, .more-popup.fab-button:focus i {
    outline: none;
    transform: rotate(360deg);
}
.more-popup {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 5px;
    cursor: pointer;
    color: #333;
    background-color: rgba(100, 100, 100, 0);
    border-radius: 3px;
    transition: background-color 0.3s ease;
    z-index: 2;
}
.more-popup + ul {
    display: block;
    position: fixed;
    right: 5px;
    top: 20px;
    margin: 20px 0 0 0;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    transition: height 0.3s ease;
    background-color: #FFF;
    border: 0px solid rgba(100, 100, 100, 0.2);
    box-shadow: 0 0 8px rgba(100, 100, 100, 0.2);
    z-index: 3;
}
.more-popup.fab-button + ul {
    background-color: transparent;
    border: none;
    box-shadow: none;
    right: 24px;
    top: auto;
    bottom: 85px;
}
.fab-button + .more-popup.fab-button + ul {
    bottom: 150px;
}
.more-popup + ul li {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: height 0.3s ease;
}
.more-popup.selected + ul li.separator {
    height: 1px;
    padding: 5px 10px 10px 10px;
    margin: 15px 10px 0 10px;
    border: none;
    box-shadow: none;
    border-top: 1px dotted rgba(50, 200, 50, 0.5);
}
.more-popup + ul li a, .more-popup + ul li a:hover {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
    color: #555;
    text-transform: none;
    font-size: 1.2em;
    min-width: 200px;
}
.more-popup + ul li a:hover {
    background-color: rgba(100, 100, 100, 0.1);
}
.more-popup.fab-button + ul li a {
    text-align: right;
}
.more-popup.fab-button.selected + ul li a {
    height: 50px;
}
.more-popup.fab-button + ul li a .material-icons {
    float: right;
    background-color: rgb(100, 100, 100);
    color: #FFF;
    padding: 5px;
    border-radius: 20px;
    margin-right: 3px;
    box-shadow: 0 3px 3px rgba(50, 50, 50, 0.3);
}
.more-popup.fab-button + ul li a span {
    display: inline-block;
    padding: 5px;
    background-color: #FFF;
    border: none;
    box-shadow: 0 2px 3px rgba(50, 50, 50, 0.3);
    color: #333;
    border-radius: 5px;
    margin: 5px 15px 0 0;
    vertical-align: middle;
}
.more-popup.fab-button + ul li a:hover {
    background-color: transparent;
}
.more-popup.selected + ul {
    border-width: 1px;
    z-index: 1000;
}
.more-popup + ul li a .material-icons {
    margin: 0 25px 0 5px;
    vertical-align: middle;
    text-align: center;
}
.more-popup.selected + ul li a {
    height: 38px;
    padding: 8px;
}
.more-popup.selected, .more-popup:hover, .more-popup:active {
    background-color: rgba(100, 100, 100, 0.2);
}
#preacher-select-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: none;
    height: auto;
    max-height: 300px;
    overflow: auto;
}
.select-preacher #preacher-select-list {
    display: block;
}
#preacher-select-list li {
    display: block;
    font-size: 1.3em;
    padding: 10px;
}
#preacher-select-list li.disabled {
    color: #888;
}
#preacher-select-list.filtered li, #preacher-select-list input[type=checkbox] {
    display: none;
}
#preacher-select-list.filtered li.selected {
    display: block;
}
#preacher-select-list li .fa {
    margin-right: 7px;
}
#preacher-select-list li.selected .checked, #preacher-select-list li .unchecked {
    display: inline-block;
}
#preacher-select-list li .checked, #preacher-select-list.filtered li .unchecked {
    display: none;
}
.preacher-select-container.submittable .handover-button, .preacher-select-container .select-preacher-button {
    display: inline-block;
}
.preacher-select-container .handover-button, .preacher-select-container.submittable .select-preacher-button {
    display: none;
}
.click-again-info {
    font-size: 0.9em;
    color: #888;
    display: none;
    padding: 10px 8px 8px 0;
}
.selected .click-again-info, .disabled .click-again-info {
    display: block;
}

.tab-bar {
    display: flex;
    width: 100%;
    justify-content: stretch;
    align-content: baseline;
    margin-top: .5rem;
}
.tab-bar button.tab {
    flex: 1 1 auto;
    display: flex;
    padding: 0 10px;
    text-transform: uppercase;
    color: #888;
    background: transparent;
    border: none;
    font-weight: 500;
    box-shadow: none;
    font-size: .9rem;
    text-align: center;
    border-bottom: 2px solid transparent;
    min-height: 2.7rem;
    justify-content: center;
    align-items: center;
    border-radius: 0;
}
.tab-bar button.tab.disabled, .tab-bar button.tab[disabled] {
    opacity: .4;
    cursor: not-allowed;
}
.tab-bar button.tab span:not(.count-badge) {
    padding: 0;
    text-align: left;
}
.tab-bar button.tab .fa + span {
    margin-left: 5px;
}
.tab-bar button.tab img {
    flex: 0 0 24px;
    height: 24px;
    margin-right: 8px;
}
.tab-bar button.tab.selected {
    border-bottom-color: rgba(100, 100, 200, .8);
    color: rgba(100, 100, 200, .8);
}
.tab-panes {
    display: block;
}
.tab-panes > .tab-pane {
    display: none;
}
.tab-panes > .tab-pane.selected {
    display: flex;
    flex-direction: column;
}
.tab-pane > h4 {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 1.2em;
}

#global-app-bar a.app-drawer-button {
    display: none;
}

.responsive-table {
    display: block;
    padding: 0;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: 0;
}
.responsive-table .row {
    font-weight: 400;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: center;
    border-bottom: 1px solid rgba(200, 200, 200, .2);
    font-size: 1.1em;
}
.responsive-table .row:not(.header):not(.summary):hover {
    background-color: rgba(220, 220, 220, .2);
}
.responsive-table .row.header .column {
    font-weight: 600;
    background-color: rgba(220, 220, 220, .2);
    padding: 10px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.responsive-table .row .column-set {
    flex: 1 1 auto;
    padding: 0;
    align-items: center;
    display: flex;
    flex-direction: row;
}
.responsive-table .row .column {
    padding: 3px 5px;
}
.responsive-table .row .column.tiny {
    flex: 0 1 65px;
}
.responsive-table .row .column.small {
    flex: 0 0 100px;
}
.responsive-table .row .column.medium {
    flex: 0 0 250px;
}
.responsive-table .row .column.auto-size {
    flex: 1 1 auto;
}
.responsive-table .row .column .button-group {
    margin: 0;
    padding: 0;
}
.responsive-table .row.summary {
    justify-content: flex-end;
    border-bottom: none;
}
.responsive-table .row.summary .column {
    font-weight: 600;
    font-size: 1.4em;
    padding: 10px 5px;
    border-top: 1px solid rgba(100, 100, 100, .6);
}

@media print {
    #sidebar { display: none; }
    #app-bar { display: none; }
    #global-app-bar {
        display: flex;
        left: auto;
        top: 0;
        position: fixed;
        width: 100%;
        border: none;
        box-shadow: none;
    }
    #global-app-bar .main-title {
        font-weight: 600;
    }
    .campaign-districts {
        margin-top: 50px;
        break-before: page;
    }
    .actions-container { display: none; }
    .main-menu.territory-actions { display: none; }
    .fab-button { display: none; }
    .leaflet-touch .leaflet-bar { display: none; }
    .easy-button-button { display: none; }
    .show-district > h1 { display: none; }
    .district-picked-message { display: none; }
    #district-maps-container a { display: none; }
    #district-maps-container .button-badge { display: none; }
    #map-canvas { width: 100%; }
    .show-district.district-card-page {
        max-width: none;
    }
    #fullscreen-container { overflow: visible; height: auto; }
}

@media screen and (max-width: 600px) {
    .district-meta-container {
        padding: 10px;
    }
    .areas_list.reporting .area {
        width: 100%;
    }
    #global-app-bar {
        display: none;
    }
    #global-app-bar ~ .main-menu,
    #global-app-bar ~ .areas_list {
        padding-top: 5px;
    }
    .show-district #map-toolbar {
        width: calc(100% - 110px);
    }
    #sidebar {
        display: none;
    }

    .main-menu {
        padding-top: 5px;
        padding-bottom: 65px;
    }
    #global-app-bar ~ .areas_list.show-district:not(.backdrop_box) {
        padding-top: 55px;
        margin-top: 0;
        padding-bottom: 70px;
    }
    .admin-users {
        padding-top: 60px;
        margin-top: 0;
    }

    .areas_list h1.area-header {
        display: none;
    }
    .areas_list .district {
        width: calc(100% - 20px);
        max-width: 640px;
    }
    .admin-users > h1 {
        display: none;
    }

    .show-district h1 {
        display: none;
    }

    #app-bar {
        position: fixed;
        width: 100%;
        z-index: 100000;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        padding: 0;
        margin: 0;
        color: rgba(0, 0, 0, .4);
        text-align: left;
        box-shadow: none;
        display: flex;
        justify-content: stretch;
        align-items: center;
        align-content: center;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
        top: 0;
        left: 0;
        box-sizing: border-box;
        flex-direction: row;
        font-size: 1.1em;
        min-height: 40px;
        transform: translateY(0);
    }

    #app-bar.scroll-up,
    #app-bar.scroll-down {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        background-color: rgba(255, 255, 255, 1);
        color: rgba(0, 0, 0, 1);
    }

    #app-bar.scroll-down {
        transform: translateY(-110%);
    }

    #app-bar.scroll-up {
        transform: translateY(0);
    }

    #app-bar.fullscreen {
        transform: translateY(-110%);
    }

    #app-bar a.app-drawer-button,
    #app-bar a.app-drawer-button:hover,
    #app-bar a.app-drawer-button:active {
        flex: 0 0 auto;
        padding: 15px;
        color: #333;
        font-weight: 400;
        min-width: 40px;
        box-sizing: border-box;
    }

    #app-bar .district-number {
        background-color: rgb(250, 250, 250);
    }

    #app-bar .main-title {
        flex: 1 1 auto;
        font-size: 1.4em;
        font-weight: 400;
        text-align: center;
        align-content: center;
        padding-right: 0;
        white-space: normal;
        text-overflow: ellipsis;
        overflow: hidden;
        justify-self: stretch;
        align-self: center;
        line-height: 0.9em;
    }
    #app-bar .app-drawer-button + .main-title:not(.with-search) {
        padding-right: 40px;
    }
    #app-bar.show-district .main-title {
        color: #333;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        justify-items: center;
    }

    #bottom-drawer {
        position: fixed;
        width: 100%;
        z-index: 100000;
        border: none;
        background: #FFF;
        padding: 0;
        color: #333;
        margin: 0;
        text-align: left;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        display: flex;
        justify-content: space-around;
        transition: transform .3s ease-in-out;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        flex-direction: row;
        min-height: 64px;
    }

    #bottom-drawer.map-overlay {
        box-shadow: 0 1px 3px rgb(0, 0, 0), 0 1px 2px rgb(0, 0, 0);
    }

    #bottom-drawer a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 7px 0;
    }

    #bottom-drawer a.selected .fa,
    #bottom-drawer a.selected span,
    #bottom-drawer a:active .fa,
    #bottom-drawer a:active span,
    #bottom-drawer a:focus .fa,
    #bottom-drawer a:focus span {
        font-weight: 600;
    }

    #bottom-drawer a .fa {
        font-size: 1.6em;
        padding: 3px 0 0 0;
        transition: font-weight .15s ease-in-out, padding-top .15s ease-in-out, padding-bottom .15s ease-in-out;
    }

    #bottom-drawer a.selected .fa,
    #bottom-drawer a:active .fa,
    #bottom-drawer a:focus .fa {
        padding: 1px 0 2px 0;
    }

    #bottom-drawer a span {
        padding: 5px;
        text-align: center;
    }

    .territory-sidebar {
        display: none;
    }

    .territory-sidebar + .collapser {
        display: none;
    }

    .fab-button, .fab-button.more-popup,
    .fab-button:hover, .more-popup.fab-button:hover,
    .fab-button:active, .more-popup.fab-button:active,
    .fab-button:focus, .more-popup.fab-button:focus {
        bottom: 90px;
    }
    #fullpage-backdrop-content h3.mapped, h3.mapped {
        height: 65vw;
    }
    .campaign-districts ul li.district-details .image-and-description-container .image-container {
        flex: 0 0 40%;
    }
}

@media screen and (min-width: 600px) and (max-width: 770px) {
    .show-district {
        margin-top: 0;
    }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
    .district-meta-container {
        padding: 10px;
    }
    #fullpage-backdrop-content h3.mapped, h3.mapped {
        height: 65vw;
        max-height: 435px;
    }
    .show-district #map-toolbar {
        width: calc(100% - 110px);
    }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
    #global-app-bar {
        width: 100%;
        left: 0;
    }
    #global-app-bar a.app-drawer-button {
        display: initial;
    }
    #global-app-bar .app-drawer-button + .main-title {
        padding-left: 0;
    }
    #sidebar:not(.active),
    #sidebar.collapse-map {
        display: none;
    }
}

@media screen and (max-width: 770px) {
    .show-district #map-toolbar {
        width: calc(100% - 110px);
    }
    .district-maps-container:not(.map-container-fullscreen) #map-canvas-container.district-view {
        height: 60vh;
    }
    .district-maps-container:not(.map-container-fullscreen) {
        max-height: 60vh;
    }
    .district-picked-message + .district-maps-container:not(.map-container-fullscreen) #map-canvas-container.district-view {
        max-height: calc(60vh - 100px);
    }
    .district-information-container:not(.out) .main-menu.territory-actions {
        position: fixed;
        bottom: 63px;
        width: 100%;
        background: #FFF;
        margin-bottom: 0;
        z-index: 100;
        min-height: 0;
        box-shadow: 0 -2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    }
    .district-sidebar {
        display: none;
    }

    .filter-bar {
        border: none;
        border-radius: 5px;
        margin: 10px;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    }
    #quote {
        position: fixed;
        z-index: -1;
        bottom: 0;
        right: 0;
        color: rgba(100, 100, 100, 0.4);
        font-size: 1.1em;
        font-weight: normal;
        padding: 10px;
        font-style: italic;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        text-align: right;
        line-height: 1.3em;
    }
    .menu-links li a { padding: 15px 17px; }
    .menu-links li.logo a { padding: 5px 12px; }
    #user-menu > li > a {
        padding: 11px 12px;
    }
    #user-menu > li > a img {
        float: none;
        margin: 0;
    }
    #global-app-bar + #app-bar ~ .main-menu,
    #global-app-bar + #app-bar ~ .areas_list {
        padding-top: 65px;
    }
    .main-menu:not(.territory-actions) {
        margin: 0;
        min-height: 100vh;
        background: rgba(200, 200, 200, .2);
        box-sizing: border-box;
        max-width: none;
        padding-bottom: 65px;
    }
    .main-menu.territory-actions {
        background: transparent;
        padding-bottom: 65px;
    }
    .main-menu h1, .main-menu.handin h1 {
        padding-bottom: 10px;
        margin-top: 0;
    }
    a.button.map-mode-link { display: none; }
    button.map-mode-link { display: none; }
    .primary, input[type=submit].primary, .menu-links .primary {
        display: none;
    }
    .mobile-visible, input[type=submit].mobile-visible, .menu-links .mobile-visible {
        display: inline-block;
    }
    .mobile-hidden, input[type=submit].mobile-hidden, .menu-links .mobile-hidden {
        display: none;
    }
    #filter-input {
        width: 35px;
    }
    .main-menu p.handin-help { margin: 0 auto; }
    .main-menu.territory-actions li {
        display: block;
        width: auto;
        margin: 10px;
    }
    .main-menu.territory-actions li a, .main-menu.territory-actions li a:hover {
        padding: 10px;
    }
    .main-menu.territory-actions li.separator {
        display: block;
    }
    /*#filter-input:focus, input[type=search]:focus {*/
        /*width: 100%;*/
        /*position: absolute;*/
        /*left: 0;*/
        /*top: 0;*/
        /*height: 46px;*/
        /*box-sizing: border-box;*/
        /*margin: 0;*/
        /*padding-left: 40px;*/
        /*background: url('/images/icon-search.png') no-repeat 10px 15px #FFF;*/
    /*}*/
    .statistics .statistic-block {
        width: 100%;
        display: block;
    }
    .areas_list h3, #districts_list h3 {
        font-size: 1.45em;
        font-weight: normal;
    }
    .areas_list h3 .shader {
        margin-top: 145px;
    }
    .areas_list .district h3 .shader {
        margin-top: -54px;
        z-index: 25;
    }
    .counts .count .label span.image-container {
        margin-right: 0;
    }
    .counts .count .label span:not(.image-container) {
        display: none;
    }
    .area.inactive {
        display: none;
    }
    #global-app-bar ~ .areas_list.in-area {
        padding-top: 55px;
    }
    .popup-activator.active + .popup-menu.main-bottom {
        right: 0;
        width: 100%;
        position: fixed;
        bottom: 63px;
        text-align: left;
    }
    .actions-container .popup-activator-container .popup-activator + .popup-menu.main-bottom li a {
        padding: 15px;
        font-size: 1rem;
    }
    /*.actions-container .popup-activator-container {*/
        /*display: flex;*/
        /*flex: 1 1 auto;*/
        /*justify-content: center;*/
    /*}*/
    #login-dialog {
        box-sizing: border-box;
        width: calc(100% - 20px);
        margin: 10px;
        border: none;
        box-shadow: none;
    }
    #login-dialog h1 {
        color: #555;
        justify-content: center;
        text-transform: none;
        font-size: 1.7em;
        margin-top: 40px;
        border: none;
    }
    #login-dialog input[type=password], #login-dialog input[type=text] {
        box-sizing: border-box;
        width: 100%;
    }
    #login-dialog .content p {
        font-size: 1.3em;
        line-height: 1.4em;
        text-align: center;
    }
    #login-dialog .congregation-name {
        display: block;
        margin-bottom: 15px;
    }
    #login-dialog label { display: block; font-size: 1.1em; margin: 10px 0 5px 0; }
    #login-dialog label:first-of-type { margin-top: 0; }
    #login-button { margin: 15px 0 5px 0; }
    #login-button input[type=submit] { font-size: 1.1em; padding: 10px 15px; }
    .backdrop_box.medium, #dialog-query-backdrop-content {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        left: 0;
        height: auto;
        position: fixed;
        top: 0;
        transform: translateY(0);
    }
    .dialog-query-buttons {
        /*padding: 10px 0 5px 0;*/
    }
    .backdrop_box.mediumlarge, .backdrop_box.large, .backdrop_box.medium {
        overflow: auto;
        box-sizing: border-box;
        margin: 0;
        position: fixed;
        width: calc(100% - 20px);
        left: 10px;
        top: 10px;
        height: auto;
        max-height: calc(100% - 20px);
    }
    .backdrop_box.mediumlarge #backdrop_detail_content,
    .backdrop_box.large #backdrop_detail_content,
    .backdrop_box.medium #backdrop_detail_content {
        background: #FFF;
        border: none;
        box-shadow: none;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
    }
    #backdrop_detail_content > form {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    .district .out-container {
        bottom: auto;
        top: 45px;
        right: -6px;
    }
    .district .out-container .label {
        width: 80px;
        font-size: .9em;
        padding: 5px 2px;
    }
    .district .out-container .label:after {
        bottom: -6px;
        right: 0;
        border-top: 6px solid rgb(215, 215, 215);
        border-right: 5px solid transparent;
    }
    .district .out-container .label.due:after {
        bottom: -6px;
        right: 0;
        border-top: 6px solid rgb(153, 153, 55);
        border-right: 5px solid transparent;
    }
    .district .out-container .label.out:after {
        bottom: -6px;
        right: 0;
        border-top: 6px solid rgb(166, 153, 55);
        border-right: 5px solid transparent;
    }
    .district .out-container .label.picked:after {
        bottom: -6px;
        right: 0;
        border-top: 6px solid rgb(55, 153, 55);
        border-right: 5px solid transparent;
    }
    .district .out-container .label.inactive:after {
        bottom: -6px;
        right: 0;
        border-top: 6px solid rgb(205, 205, 205);
        border-right: 5px solid transparent;
    }
    .district .out-container .label.overdue:after {
        bottom: -6px;
        right: 0;
        border-top: 6px solid rgb(153, 55, 55);
        border-right: 5px solid transparent;
    }
    .district-history.show-district h3.mapped {
        height: 225px;
    }
    .district-history h3.mapped #map-canvas + #map-canvas-overview {
        margin-top: 0;
    }
    .district-history h3 .simple { padding: 10px; }
    .district-history h3 .shader { padding-top: 75px; }
    li.right-button-group { padding-left: 0; padding-right: 7px; }
    .fullpage_backdrop { overflow: visible; width: 100%; height: 100%; }
    .fullpage_backdrop_content { width: 100%; height: 100%; }
    .pick-district.signature { width: calc(100% - 10px); }
    .district h3.mapped {
        height: 200px;
    }
    /*.district #map-canvas-overview img {*/
        /*margin-top: -125px;*/
    /*}*/
    .district .map-canvas-overview .district-unavailable-overlay {
        padding-top: 75px;
        font-size: 1.9em;
    }
    .district .color-strip {
        position: relative;
        top: auto;
        bottom: auto;
    }
    .show-district {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .show-district h1 {
        padding: 10px;
    }
    .show-district .district-maps-container {
        box-shadow: none;
        border: none;
        margin: 0;
    }
    .show-district .map-container-fullscreen {
        width: 100%;
    }
    .show-district .district-maps-container .color-strip {
        display: block;
    }
    .show-district .district-description-container {
        padding: 15px 10px;
    }
    .show-district .district-more-details {
        padding: 15px 10px;
    }
    .areas_list.show-district .actions-container {
        padding: 15px 10px;
    }
    .actions-container.non-admin {
        margin-bottom: 80px;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        display: flex;
        flex-direction: row;
    }
    .district-maps-container .district-unavailable-overlay {
        padding-top: 80px;
        font-size: 1.7em;
    }
    .edit-district ul li.name, .edit-district ul li.username, .edit-district ul li.email, .edit-district ul li.password { width: auto; display: block; }
    .edit-district ul li.name input, .edit-district ul li.username input, .edit-district ul li.email input, .edit-district ul li.password input { width: 100%; box-sizing: border-box; }
    .district-card-page .campaign-districts { padding: 10px; }
    #no_district_comments.info {
        padding: 0 10px 10px 10px;
    }
    .popup_message {
        width: calc(100% - 20px);
        display: block;
        margin: 0;
        padding: 15px;
        box-sizing: border-box;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }
    .district-picked-message {
        /*font-size: 1.2em;*/
        line-height: 1.2;
        margin: 10px;
    }
    .district-picked-message:first-line {
        display: inline-block;
        margin-bottom: 7px;
    }

}