.align-right { text-align: right; }
.align-center { text-align: center; }
.fa-times-circle { color: red; }
.fa-check-circle { color: green; }
.muted { opacity: 0.3; }
.error { color: red; }
body { font-family: sans-serif; font-size:  0.8em; margin: 0; }
body .container { width: 100%; max-width: 1400px; margin: 0 auto; }
body .container table { width: 100%; }
body h2,
body h3 { color: #333; }
#header { display: flex; background: rgba(27, 86, 51, 0.83); margin-bottom: 1em; min-height: 50px; }
#header #title { padding: 0 1em; color: #eee; text-transform: uppercase; font-weight: bold; background: rgba(0,0,0,0.1); letter-spacing: -1px; }
#header #title, #header #user { display: flex; align-items: center; }
#header #user { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right:  1em; color: #eee; }
#header #user a { display: flex; align-items: center; color: #fff; text-decoration: none; }
#header #user .profile-pic { border-radius: 100%; height: 30px; margin-left: 5px; }
nav { display: flex; }
nav > div { border-bottom: 4px solid transparent; }
nav div a { padding-top: 4px; }
nav div span a { color: #eee; text-decoration: none;}
nav div a,
nav div div a { height: 42px; padding-left: 2em; padding-right: 2em; text-align: center; color: #eee; text-decoration: none;  display: flex; align-items: center; }
nav a:hover { background: linear-gradient(to left, transparent, rgba(0,0,0,0.1)); }
nav > div:hover { background: linear-gradient(rgba(0,0,0,0.1), transparent); }
nav > div.active { border-bottom: 4px solid rgba(255,255,255,0.5); }
nav > div.active > span { font-weight: bold; }
nav > div.active a.active { font-weight: bold; }
nav div div { position: absolute; top: 50px; display: none; background: linear-gradient(#ddd, #fff); box-shadow: 0px 2px 5px #eee; min-width: 220px; }
nav div div a { color: #333; height: 40px; border-bottom: 1px solid #ccc; }
nav div div a:last-child { border-bottom: none; }
nav div:hover div,
nav div:focus-within div { display: block; z-index: 9000; }
.flashes { background: rgba(27, 86, 51, 0.3); padding: 1em; list-style: none; font-size: 1.2em; text-align: center; }
#page { font-size: 1.4em; display: flex; }
#page .current-goals h3,
#page .create-goals h4:first-of-type,
#update-goal-container h4,
#update-agenda-container h4 {
	margin-top: 0;
}

#page .current-goals h3 {
	border-bottom: 4px solid rgba(0,0,0,0.1);
}
#page .current-goals h3 span {
	border-bottom: 4px solid rgba(0,0,0,0.2);
	padding: 0 0.5em 0 0;
}
#page .current-goals .goal {
/*	text-indent: -1.2em;
	padding-left: 1.2em;*/
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px dashed rgba(0,0,0,0.2);
	position: relative;
}
#page .current-goals .goal .goal-number {
	position: absolute;
	left: -1em;
}
#page .current-goals .goal .goal-description {
	font-size: 0.8em;
	padding-top: 0.1em;
}
#page .current-goals .goal .agenda-items-header {
	margin-top: 1em;
	font-weight: normal;
	font-style: italic;
	font-size: 0.9em;
}
#page .current-goals .goal .goal-agenda-items {
	font-size: 1em;
}

#page .current-goals .goal .goal-agenda-items ol {
	margin-top: 0;
}

#page .current-goals .goal .goal-agenda-items ol li {
	position: relative;
}

#page .current-goals .goal .goal-agenda-items small {
	background: rgba(0,0,0,0.1);
	padding: 0.1em 0.6em;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.2);
	font-size: 0.7em;
	text-transform: uppercase;
}

#page .create-goals h4:nth-of-type(2) {
	border-top: 1px solid #999;
	padding-top: 1em;
	margin-top: 1em;
}
#page .current-goals {
	flex: 2;
	background: rgba(0,0,0,0.05);
	padding: 1em 1em 1em 2em;
	position: relative;
}
#page .create-goals,
#update-goal-container,
#update-agenda-container {
	flex: 1;
	background: rgba(0,0,0,0.1);
	padding: 2em 1em;
}
#page .create-goals form p,
#update-goal-container form p,
#update-agenda-container form p {
	display: flex;
	margin: 0.5em 0;
}
#page .create-goals label,
#update-goal-container label,
#update-agenda-container label {
	flex: 1;
}
#page .create-goals input,
#page .create-goals textarea,
#page .create-goals select,
#update-goal-container input,
#update-goal-container textarea,
#update-goal-container select,
#update-agenda-container input,
#update-agenda-container textarea,
#update-agenda-container select {
	flex: 2;
	font-size: 1em;
}
#page .create-goals textarea,
#update-goal-container textarea {
	font-family: inherit;
   	font-size: inherit;
}

#update-goal-container,
#update-agenda-container {
	position: relative;
}

#update-goal-container #close-update-goal,
#update-agenda-container #close-update-agenda {
	position: absolute;
	top: 1.5em;
	right: 0.7em;
	cursor: pointer;
}

#page #boardsuperswitcher {
	display: flex;
	background: rgba(255,255,255,0.9);
	border-radius: 6px;
}
#page #boardsuperswitcher div {
	flex: 1;
	text-align: center;
	padding: 0.2em 0 0.1em;
}
#page #boardsuperswitcher div:hover {
	cursor: pointer;
}
#page #boardsuperswitcher div.active {
	background: rgba(0,0,0,0.15);
	border: 2px solid rgba(0,0,0,0.25);
	border-radius: 6px;
}

#page #boardgoals-container,
#page #supergoals-container {
	display: none;
}
#page #boardgoals-container.visible,
#page #supergoals-container.visible {
	display: block;
}

#page .create-goals #supportingdocs-container,
#update-agenda-container #supportingdocs-container {
	display: block;
}

#no-agendas {
	display: none;
}
#no-agendas.visible {
	display: block;
}

#page .create-goals #create-goal,
#page .create-goals #create-agenda,
#update-goal-container #update-goal,
#update-agenda-container #update-agenda {
	width: 100%;
	font-size: 1em;
}

.agenda-actions,
.goal-actions {
	position: absolute;
	right: 0;
	top: -10px;
	font-size: 0.8em;
}
.agenda-actions div,
.goal-actions div {
	display: inline-block;
}
.agenda-actions .update-agenda,
.agenda-actions .delete-agenda,
.goal-actions .update-goal,
.goal-actions .delete-goal {
	cursor: pointer;
	background: rgba(0,0,0,0.1);
	padding: 0.1em 0.5em;
}

#footer { text-align: center; }
#thankyou { margin: 2em auto; padding: 1em; width: 400px; text-align: center; background: rgba(27, 86, 51, 0.3); border-radius: 15px; font-size: 1.2em; }
#footer .footer-logo { text-align: center; width: 250px; }


.material-icons {
	position: relative;
	top: 3px;
	font-size: 0.8em;
}
.agenda-actions .material-icons,
.goal-actions .material-icons {
	font-size: 18px !important;
}