/* Stored fonts, colors, and measurements */
:root{
	/* Fonts */
	--serif: 'Bitter', Georgia, Times, serif;
	--sans: 'Open Sans', 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Fira Sans', sans-serif;
	--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
	
	/* Colors */
	--strong-color: #022E51; /* Dark blue */
	--pale-text-color: #c0ccd8; /* Light blue grey */
	--pale-color: #eff2f5; /* Very light blue grey */
	--complement-color: #c94f03; /* Rich orange, rgb(201, 79, 3) */
	--alt-complement-color: #e4c83a; /* Yellowish */
	--pale-complement-color: #ffb366; /* Soft pale orange */
	--white: #fff; /* White */
	--grey: #808c99; /* Grey, with subtle blue tone */
	--very-light-grey: #fafafa;
	--c2: #eee; /* Off-white */
	--black: #000; /* Black */
	--linkedin-blue: rgb(40, 103, 178);
	
	/* Measurements */
	--main-width: 30rem;
	--header-height: 49px;
	--logo-height: 3.8rem;
	--m1: 8px;
	--rc: 6px;
}

/****
 Page frame
****/

body { 
	background-color: var(--white);
	font-size: 12pt;
	color: var(--black);
}

main {
	position: relative; /* Why do I need this? */
	max-width: var(--main-width);
	margin: auto; /* Centre in browser. */
	padding-top: 9pt;
}
main.home {
	max-width: 100%;
	margin: 0;
}
section {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/****
 Header and nav bar styles
****/

header {
	height: var(--header-height);
	border-bottom: solid var(--border-color) thin;
	box-shadow: 0 0 8px rgba(0, 0, 0, 1);
	position: relative;
	z-index: 2; /* So modals slide out from beneath the header */
}

header, footer {
	background-color: #022E51; /* Hard-coded dark blue, so unaffected by dark mode. */
	color: white; /* Hard-coded as white, so not affected by dark mode. */ 
	font-family: var(--sans);
}

/*
    The user icon in the header is white by default, and turns orange on hover.
    While a user is logged in it, is permanently orange (done by PHP code in
    nav.php).
*/
.fa-user-circle:hover, #user_menu .fa-user-circle { 
	color: var(--pale-complement-color);
}

/****
 Horizontal menu in nav bar
****/

#site_menu_horizontal {
	display: none;
	/* margin: 0 1em; */
	position: relative;
	top: -1pt;
}
#site_menu_horizontal a {
  font-weight: 600;
  margin-right: 1em;
}
#site_menu_demo {
  font-weight: 600;
  position: relative;
  top: -1pt;
  margin-right: 1em;
}
#site_menu_horizontal a:hover {
  color: var(--pale-complement-color);
}


/****
 Dropdown menus
****/

.drop_menu {
	display: none;
	z-index: 2;
	position: absolute;
	margin-top: 1pt;
	padding: 0 6pt 3pt;
	background-color: #022E51; /* Hard coded dark blue so unaffected by dark mode. */
	box-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

/* Links inside the site menus */
.drop_menu a {
	padding: 3pt 9pt;
	text-decoration: none;
	display: block;
	color: white;
}

/* Change color of links on hover */
#user_menu_list a:hover, #site_menu_list a:hover { color: var(--pale-complement-color); }

/* Menu positioning */
#user_menu_list {
	right: 3.5em;
	width: 10em;
}
#site_menu_list {
	right: 1.5em;
	width: 9em;
}

.select_list, #select_menu {
	text-align: left;
	width: 8.8em;
	margin-top: -32px;
	padding: 0px;
	border: solid 1pt lightgrey;
	border-radius: var(--rc);
	box-shadow: .5pt .5pt 1pt rgba(0, 0, 0, .3);
	background-color: var(--white);
	cursor: pointer;
}

.select_list a, #select_menu a { color: grey; }

.select_list a:hover, #select_menu a:hover {
    color: var(--black);
    font-weight: 600;
}

.select_list hr {
    border: 0;                                                                  
    border-top: 1px solid var(--pale-color); 
    margin: 4px 0;                                                              
}

/* Special formatting for the "None" option in select menus */
a.none, li.none {
	border-top: dotted 1pt lightgrey;
	background-color: var(--very-light-grey);
}

/****
 Page footer styles
****/

footer {
	/* margin-top: 1.5em; */
	padding: 3pt;
	font-size: 9pt;
}
footer p {
	margin: 0;
	text-align: center;
}

/* Links */
a {
	text-decoration: underline;
	color: var(--strong-color);
}
header a, footer a, header a:hover, footer a:hover {
	color: white; /* Hard-coded as white, so not affected by dark mode. */
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
a:hover {
	color: var(--complement-color);
}

/****
 Website page styles
****/

h1, h2, h3, h4 { 
	/* color: var(--strong-color); */
	opacity: .7;
}
h4 {
	font-style: italic;
}

.highlight {
	background-color: var(--pale-color);
	opacity: .95;
	width: 150%; 
	position: relative;
	left: -25%;
	margin: 1.5rem 0;
	padding: 0.75rem 25% 0.5rem;
	border: solid 1pt lightgray;
	border-radius: 6px; 
}
.highlight h1, .highlight h2 {
	font-size: 18pt;
	margin-top: 6pt;
}
.highlight p { /* This should apply only to the first paragraph in a highlight box */
	margin-top: 1pt;
}
.highlight a {
	color: var(--complement-color);
}
.byline {
	font-family: var(--serif);
	font-style: italic;
	font-size: 11pt;
	margin-bottom: 10pt;
}
.section_name {
	color: var(--pale-color);
	text-align: center;
	font-weight: bold;
}
.date_slug {
	color: var(--pale-color);
	font-size: 85%;
	font-weight: 600;
	font-style: italic;
}
.date_slug::after {
	color: var(--white);
	content: " • ";
}
.prevent-select {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.carousel {
	overflow: hidden;
	box-shadow: 1pt 1pt 2pt rgba(0, 0, 0, .6);
}
.slides {  /* For img inside carousel */
	display: none;
	width: 100%;
	animation-duration: .2s;
	animation-name: img_slideleft;
}
@keyframes img_slideleft {
	from {
		position: relative; left: 100%;
  	}
	to {
		position: relative; left: 0%;
    }
}
.hero_logo {
	width: 80%; 
	max-width: 20em; 
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}

/****
 User account styles: panels, toolbars, etc.
****/

.panel, .list_panel, .list_drawer, .list_panel_outline {
	border: 1px solid var(--pale-color);
	border-radius: var(--rc);
}
.panel, .list_panel, .list_drawer {
	background-color: var(--pale-color);
	padding: 3pt 9pt 3pt 4pt;
}
.modal .panel {
	background-color: var(--white);
	margin-left: 0px;
	margin-right: 0px;
}
#email_prompt_agenda p, #phone_prompt_agenda p, #text_msg_prompt_agenda p {
	color: var(--black);
}
#phone_prompt_no_agenda p, #email_prompt_no_agenda p, #text_msg_prompt_no_agenda p  {
	margin: 0;
	color: var(--grey);
	font-size: small;
}
.panel, .list_panel_outline {
	margin: 3pt;
}
.list_panel_outline:hover { 
    border-color: var(--pale-text-color);
}
.list_panel_outline { 
    display: flex;
}
.list_panel, .list_drawer {
	flex: auto;
	padding: 0 9pt;
	border-radius: var(--rc) 0 0 var(--rc);
}
.minor_text {
	font-size: 90%;
	color: var(--grey);
}
.list_drawer {
	max-width: 5rem; min-width: 5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-content: space-between;
    padding: 3pt 1pt;
	margin-left: 2px;
	border-radius: 0 var(--rc) var(--rc) 0;
	color: var(--pale-text-color);
}
.list_drawer div {
    width: 2em;
    text-align: center;
}
.list_drawer#group_action_button {
    max-width: 2.5rem; min-width: 2.5rem;
    justify-content: center;
}
.user_selected, .user_selected:hover {
    border-color: var(--strong-color);
    box-shadow: 0.4pt .6pt 1pt 0px rgba(0, 0, 0, 0.33);
}
/*
.list_drawer > div {
    position: relative;
    right: 2.5pt;
}
*/
.list_drawer a, .list_drawer button {
    color: var(--grey);
}
.list_drawer a:hover, list_drawer button:hover {
    color: var(--strong-color);
}
 
.modal_ctrl:hover { 
	color: var(--strong-color); 
	opacity: 100%;
}

#join {
	text-align: center;
	margin: 18pt auto 18pt;
}

legend, label, .label, .label_icon, .modal_ctrl, summary {
	font-size: small;
	color: var(--grey);
}
#xtras .label {
	margin: 6pt 3pt 0 6pt;
	width: 6em;
	text-transform: capitalize;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}
details > summary {
	cursor: pointer;
	outline: none;
}
details > div { padding-top: 4pt; }

.label_icon {
	margin: 6pt 3pt 0pt 0pt;
	flex: 0 0 16pt;
	text-align: center;
	/* Hiragino Sans is used for the numbered bullets in the Outreach modal */
	font-family: 'Hiragino Sans W6';
}
#emails .label_icon, #phone_nos .label_icon {
	margin-right: 0;
}
.label_icon_inv { font-size: small; color: var(--white); }

.field-row, .history-row, .category-row {
	display: flex;
	position: relative;
}

.field-row:last-child, .history-row:last-child {
	margin-bottom: 3pt;
}

/*
    I'm going to work here on new selectors to take care of giving
    all fields in a grouping the correct rounded corners, provided
    they are all grouped logically in divs.
        Note: this all seems to be working well. :-)
*/

/* First field in first row has its top-left corner rounded. */
.field-row:first-of-type .field:first-of-type {
    border-top-left-radius: var(--rc);
}
/* Last field in first row has its top-right corner rounded. */
.field-row:first-of-type .field:last-of-type {
    border-top-right-radius: var(--rc);
}
/* First field in last row has its bottom-left corner rounded. */
.field-row:last-of-type .field:first-of-type {
    border-bottom-left-radius: var(--rc);
}
/* Last field in last row has its bottom-right corner rounded. */
.field-row:last-of-type .field:last-of-type {
    border-bottom-right-radius: var(--rc);
}

.history-row:hover > .field, .category-row:hover > .field {
	background-color: var(--pale-color);
	cursor: pointer;
}
.history-row:hover > .label_icon, .category-row:hover > .label_icon, .category-row:hover > .label_icon_inv {
	color: var(--black);
	cursor: pointer;
}

.field, p.field {
	background-color: var(--white);
	color: var(--black);
	width: 100%;
	margin: 0;
	border-style: inset;
	border-width: 1pt;
	border-color: #f2f2f2;
	border-radius: 0;
	padding: 3pt;
	font-size: 12pt;
}

.field-row:first-of-type p.field {
	border-radius: var(--rc) var(--rc) 0 0;
}
.field-row:last-of-type p.field {
	border-radius: 0 0 var(--rc) var(--rc);
}
.field[readonly] {
	border-style: solid;
	border-color: #d2d2d2;
	box-shadow: .25pt .25pt .5pt rgba(0, 0, 0, .3);
}
textarea.field {
	/* height: 9em; */
	resize: vertical;
}
input.kind {
	visibility: hidden;
	position: absolute;
}

/*
    Class for the Outreach Project stage field (the stage number not the 
    label or name of the stage). These fields are the middle element, between 
    the Outreach Project name field and the Outreach Stage label field. They are 
    all hidden.
        The other reason I give them a class name is so that I can generate an 
    HTML Collection of all such fields and then update their corresponding label 
    field if the user edits the Outreach Project.
*/
.stg_no {
    width: 1px; 
    display: none;
}

/****
 Modal dialog box styles
****/

.modal { 
	display: none;
	position: fixed;
	top: calc(var(--header-height) + 3rem);
	z-index: 1;
	min-width: 310px;
	width: 100%;
	max-width: calc(var(--main-width) - 2rem);
	margin: 5px;
	padding: .35em 1.35em;
	text-align: center;
	border-radius: 6px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .6);
	background-color: var(--white);
	animation-duration: .4s;
	animation-name: modal_slidedown;
}
textarea.field {
	height: 128px;
}
.expanded { /* toggled by the expand-collapse button in modal windows */
	top: 0px;
	max-width: calc(var(--main-width) + 4rem);
}
.expanded textarea.field {
	height: 455px;
}
@keyframes modal_slidedown {
	from {
		position: fixed; top: -25em;
  	}
	to {
		position: fixed; top: calc(var(--header-height) + 3rem);
    }
}
.modal h3 {
	font-family: var(--sans);
	font-weight: 600;
	white-space: nowrap;
}
.modal p {
	font-size: 12pt;
}
.modal_ctrl {
	display: flex;
	justify-content: space-between;
	height: 11pt;
	margin-left: -12pt;
	margin-right: -12pt;
}

/****
 Drag-and-drop area for uploading a file.
 In this case, for a file with contact or address book info.
****/
.upload-container {
    position: relative;
    margin: 1em 0 1em 0;
    border: none;
}
.upload-container input {
    /* border: 1px solid white;
    border-radius: var(--rc); */
    background: var(--white);
    outline: 3pt dashed lightgrey;
    outline-offset: -8px;
    padding: 34% 30%;
    width: 100%;
}
.upload-container:before {
    position: absolute;
    left: 22%; right: 22%; top: 38%;
    content: "Drag your contacts here.";
    /* -moz-content: "Drag your contact list here. Or click “Browse”."; */
    color: gray;
    font-weight: 600;
    text-align: center !important;
}
.upload-container:after {
    position: absolute;
    left: 22%; right: 22%; top: 80%;
    content: "Accepts vCards and .vcf files";
    color: gray;
    font-size: 10pt;
    text-align: center !important;
}
.upload-container input.hover {
    background: var(--pale-color);
    border-color: var(--strong-color);
}
.upload-container:hover:before, .upload-container:hover:after {
	color: black;
}
/* End of drag-and-drop area for file uploads */

/*
    Re: [disabled], I am also using a .disabled class for some 
    elements. This needs consolidating and cleaning up.
*/
button[disabled], button[disabled]:hover,
div[disabled], div[disabled]:hover
{
	color: gray;
	cursor: default;
}
input[disabled], input[disabled]:hover {
	color: var(--grey);
	cursor: default;
}

/****
Classes for input fields arranged in groups
****/
.top-left { border-top-left-radius: 6px; }
.top-right { border-top-right-radius: 6px; }
.bottom-left { border-bottom-left-radius: 6px; }
.bottom-right { border-bottom-right-radius: 6px; }
.top { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

/****
Account Profile
****/
/*
#update_profile input[readonly], #update_pswd input[disabled] {
	border-style: solid;
	border-color: var(--white);
}
*/

/****
Privacy Policy, User Guide, News section
****/
#privacy, #preview, #admin, #terms, #user_guide {
	font-size: 12pt;
}
/* Code clean-up: Can't I just add this padding style to the "main" element? */
/*
#privacy, #user_guide, #index, #demo_intro, #news, #import {
	padding: 0 1rem;
}
*/

#privacy h3, #user_guide h3 {
	font-size: 13pt;
	font-family: var(--sans);
}

/****
News section
****/
#news h1 {
	text-align: left;
	margin-bottom: 0;
}
#news_index {
	margin-top: 2em;
}
#news_index h2 {
	font-size: 14pt;
}

/****
User Guide
****/
#user_guide h2, #privacy h2 {
	margin-top: 1.5em;
}
#user_guide ul {
	list-style-type: none;
	margin-left: 1.5em;
}
#user_guide li {
	display: flex;
}
#user_guide li span {
	flex-basis: 1.8em;
} 
#user_guide .para_icon {
	position: relative;
	left: -1.7em;
	margin-bottom: -1.9em;
}
#user_guide img {
	width: 90%;
	margin: 6pt 0pt;
}

/****
Table of Contents
****/
.toc {
	font-size: 12pt;
	list-style-type: none;
	margin-left: 1em;
}

/****
Import help page
****/

/* Comment needed: what and where is the link_card? */
.link_card {
	display: flex;
	align-items: center;
	padding: 0em 1em;
	height: 3em;
	border-bottom: 1px solid lightgrey;
}
.link_card:hover {
	background-color: var(--pale-color);
}
.link_card p {
	margin-left: 6pt;
	font-weight: 600;
}
.link_card img {
	position: relative;
	top: 2pt;
	max-width: 2em;
}
/* Code clean-up: I don't think the span.field element is used anywhere. */
/*
span.field {
	display: inline-block;
	width: calc(100% - 1.2em);
}
*/

/****
Table presentation
****/

table {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0; 
  margin: 1em 0;
}

td, th {
  border: 1px solid var(--pale-color);
  text-align: left;
  vertical-align: top;
  padding: 0.4em;
}

tr:nth-child(even) {
  background-color: var(--pale-color);
}

th { border: 0; }
th { border-bottom: 1px solid var(--strong-color); }


/****
 Form elements
****/

input[type=submit], form button, .button {
	display: inline-block;
	min-width: 7em;
	border: solid 1px lightgrey;
	border-radius: 5px;
	box-shadow: 0px 0px 10px lightgrey inset;
	padding: 3pt 8pt;
	text-align: center;
	text-decoration: none;
	font-size: 80%;
	color: var(--strong-color);
}

/* Highlight the button label in orange when mouse hovers on the button */
input[type=submit]:hover, form button:hover, .button:hover { 
	color: var(--complement-color);
}
/* Click effect */
input[type=submit]:active, form button:active, .button:active {
	position: relative;
	top: 2px;
	border-color: #b4b4b4;
}
/* Suppress orange on-hover effect for icon buttons */
form button:hover svg, .button:hover svg {
    color: var(--strong-color);
}
/* Suppress click effect on disabled buttons */
input[disabled]:active, form button[disabled]:active, .button[disabled]:active {
    position: static;
    border-color: lightgrey;
}
/* Suppress normal on-hover effect for icons in disabled buttons */
form button[disabled]:hover svg, .button[disabled]:hover svg {
    color: grey;
}

.small { /* for small buttons in dialog/modals */
	font-size: 80%;
}
.very_small { /* for small type */
	font-size: 70%;
}

.icon { /* for small buttons in dialog/modals with icon instead of text */
	font-size: 80%;
	min-width: 0;
}

.invisible { /* for fields to hide from the user but to include in POST data */
	visibility: hidden;
	position: absolute; /* removes the element from the layout */
}

/****
 Styles for list.php and show.php toolbars
****/

.toolbar-area {
	display: flex;
	align-items: center;
	height: 26pt;
	margin-left: 3pt;
}

.toolbar-button {
	color: var(--grey);
	margin: 0;
	padding: 0;
	width: 38pt;
	border-top: solid 1px lightgrey;
	border-bottom: solid 1px lightgrey;
	position: relative;
}
.toolbar-button:first-of-type {
	border-left: solid 1px lightgrey;
}
.toolbar-button:last-of-type {
	border-right: solid 1px lightgrey;
}
.toolbar-button:hover {
	color: var(--strong-color);
}
.mid-select {
	color: var(--strong-color);
	background-color: var(--pale-color);
}
.selected {
	color: var(--strong-color);
	background-color: var(--pale-color);
	border-left: solid 1px lightgrey;
	border-right: solid 1px lightgrey;
	margin-top: 1px;
}
#history_srch_btn.selected {
	border-right: none;
}
#sort_btn {
	width: 28pt;
}
#add_contact_btn, #email_btn, #phonecall_btn, #text_msg_btn, #calendar_btn, #upload_btn, #upload_help, #new_outreach_btn {
	margin-left: 3pt;
	box-shadow: none;
	border: none;
}
#upload_btn, #upload_help {
	font-size: 132%;
}
#back_to_list {
	border-left: solid 1px lightgrey;
	border-right: solid 1px lightgrey;
	padding: 0 1pt 0 0;
	width: 22pt;
	height: 24pt;
}
/* For the start phone call and start email buttons on show.php */
#phonecall_btn, #email_btn {
	width: 28pt;
	margin: 0;
	padding: 0;
}
.invalid, .invalid:hover { 
	color: var(--pale-text-color);
}

/* Quick search field */
#search_txt-2 {
	padding-left: 9px;
	color: var(--strong-color);
	background: none;
}
#clear_btn {
	color: var(--grey);
	position: absolute;
	right: 48pt;
	top: 1pt;
}
/* Toolbar menus and submenus */
.toolbar-menu, #sort_menu-2 {
	width: 8.8em;
	padding: 0px;
	border: solid 1px lightgrey;
	border-top: none;
	box-shadow: .5pt .5pt 1pt rgba(0, 0, 0, .3);
	background-color: var(--white);
	cursor: pointer;
	margin-top: -1pt;
	color: grey;
}
/* The clear option at the bottom of the search menus is toggled by .show */
#history_srch_clear {
	display: none;
}
.toolbar-menu a, #sort_menu-2 a, #action_menu a {
	color: grey;
}
.toolbar-menu a:hover, #sort_menu-2 a:hover, #action_menu a:hover {
	color: var(--black);
	font-weight: 600;
}

#history_srch_menu, #history_srch_submenu {
	left: 55pt;
}
#sort_menu-2 {
	margin-top: -24.5pt;
	right: 33pt;
}
#action_menu {
	min-width: 17.3em;
	border-top: solid 1px lightgrey;
	margin-top: -19pt;
	right: 3pt;
}
#action_options a {
	color: var(--grey);
}
#sort_options a.active, #outreach_srch_menu li.active {
	font-weight: 600;
	color: var(--strong-color);
}
#history_srch_meeting-method, #pipeline_srch_type {
	font-weight: 600;
	color: var(--black);
	background-color: var(--pale-color);
	border-bottom: dotted 1px lightgrey;
}

/* 
 Info bar customizes a list_panel_outline, adjusting
 the .list_panel and .list_drawer that it wraps.
*/
.info_bar {
    font-size: 70%;
    border: none;
}
/* Hover behaviour for the elements of the info bar. */
.info_bar div:hover {
    border-color: var(--pale-text-color);
}
.info_bar div.disabled:hover {
    border-color: var(--pale-color);
    cursor: default;
}
/* Padding/positioning for the two elements of the info bar. */
.info_bar .list_panel {
    padding: 2pt 0pt 0pt 5pt;
}
.info_bar .list_drawer {
    padding: 1pt;
}
/* Info bar text area behaviour. */
#info_bar.active {
    color: var(--strong-color);
}
/* Group action button appearance and hover behaviour. */
#group_action_button:hover a {
    color: var(--strong-color);
}
#group_action_button.disabled a, #group_action_button.disabled:hover a {
    color: var(--pale-text-color);
}

/* Show a dropdown menu (this class is toggled by JS when the user clicks on a button for a dropdown menu) */
.show {
	display: block;
}
/* Show the clear option at the bottom of a search menu as needed. */
#history_srch_clear.show {
	display: block;
}

/****
 Outreach menu
****/

#outreach_srch_menu, #outreach_srch_menu ul {
	z-index: 2;
	position: absolute;
	list-style: none;
	/* width: 9.4em; */
	width: 10.4em;
	border: solid 1px lightgrey;
	box-shadow: .5pt .5pt 1pt rgba(0, 0, 0, .3);
	background-color: var(--white);
	cursor: pointer;
	margin-top: -1pt;
	color: grey;
}
#outreach_srch_menu {
	left: calc(2em + 1pt);
	top: calc(2em + 7pt);
	border-top: none;
}
#outreach_srch_menu li {
	position: relative;
	padding: 3pt 6pt;
}
#outreach_srch_menu li .fa-caret-right {
	float: right;
	visibility: hidden;
	position: relative;
	top: 2pt;
	left: -9pt;
}
#outreach_srch_menu li:hover {
	color: var(--black);
	font-weight: 600;
}
#outreach_srch_menu li:hover ul {
	font-weight: normal;
}
#outreach_srch_menu li:hover .fa-caret-right {
	visibility: visible;
}
#outreach_srch_menu ul { /* This is the submenu for Outreach Project stages */
	display: none;
  	top: 0pt;
  	/* left: calc(100% - 5pt); */
  	left: calc(100% - 10pt);
  	z-index: 300;
}

/* Animate a dropdown menu sliding into view.
.slideopen { 
	display: none;
	transform: scale(1,1);
	transform-origin: top center;
	animation-name: menu_slideopen;
	animation-duration: .4s;
}
@keyframes menu_slideopen {
	from {
		transform: scale(1,0);
  	} to {
		transform: scale(1,1);
    }
}
*/

/* Color classes */
.dark { color: var(--strong-color); }
.pale { color: var(--pale-color); }
.complement { color: var(--complement-color); }
.alt_complement { color: var(--alt-complement-color); }
.pale_complement { color: var(--pale-complement-color); }
.pale_text { color: var(--pale-text-color); }
.white { color: var(--white); }

.bk_dark { background-color: var(--strong-color); }
.bk_pale { background-color: var(--pale-color); }
.bk_complement { background-color: var(--complement-color); }
.bk_alt_complement { background-color: var(--alt-complement-color); }
.bk_pale_complement { background-color: var(--pale-complement-color); }
.bk_pale_text { background-color: var(--pale-text-color); }
.bk_white { background-color: var(--white); }

/****
  When the screen is wide enough, adjust layout.
****/
@media only screen and (min-width: 450px) {
	body, .field {
		font-size: 14pt;
	}
	input[type=submit], form button, .button {
		font-size: 100%;
	}
    #outreach_srch_menu, #outreach_srch_menu ul {
        width: 12em;
}

/****
 Typical break points for responsive design
****/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	/* CSS code */
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	#site_menu_horizontal {
		display: inline;
	}
	#site_menu {
		display: none;
	}
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	/* CSS code */
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	/* CSS code */
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	/* CSS code */
}

/****
 Dark mode
****/

@media (prefers-color-scheme: dark) {
	:root{
		/* Colors */
		--strong-color: #cee7fd; /* Switch to a light blue */
		--white: #000; /* Switch white to black */
		--black: #fff; /* Switch black to white */
		--pale-color: #30404f; /* Switch to a very dark blue grey */
		--pale-text-color: #263440; /* Switch to a very, very dark blue */
		--very-light-grey: #262626; /* Switch to a very dark grey */
	}
	.modal {
		border: 1px solid var(--strong-color);
	}
	.agent_logo {
		filter: invert(88%);
	}
	.hero_logo {
		filter: invert(100%);
	}
	
	/****
	  Hack for Chrome-specific bug. In dark mode, the clickable 
	  calendar icon in the default date-picker tool is black on 
	  black and so invisible. So I change the background color
	  to a dark grey. I also change the background color for the
	  meeting method field for symmetry.
	  
	  I found the Chrome-specific CSS selectors here:
	  https://stackoverflow.com/questions/
	  9328832/how-to-apply-specific-css-rules-to-chrome-only
	****/
	
	/* Chrome 29+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
        input[type="date"],
        input[name="meeting_method"] {
            background-color: #444;
        }
    }
    /* Chrome 22-28 */
    @media screen and(-webkit-min-device-pixel-ratio:0) {
        .selector {-chrome-:only(; 
            input[type="date"],
            input[name="meeting_method"] {
                background-color: #444;
            }
        );} 
    }
}

/****
  Firefox-specific code
****/
@-moz-document url-prefix() {
	.upload-container:before {
		content: "Drag your contact list here. Or click “Browse…”.";
	}
}