/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
/* ol, */
ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fonts */
@font-face {
  font-family: 'futura-light';
  src: url('/test/fonts/Futura-Light.woff');
}

@font-face {
  font-family: 'futura-LT';
  src: url('/test/fonts/FuturaLT.woff2'),
       url('/test/fonts/FuturaLT.woff')
}

@font-face {
  font-family: 'futura';
  src: url('/test/fonts/Futura-Medium.woff2'),
       url('/test/fonts/Futura-Medium.woff')
}

/* Site Styling */
body {
  font-family: 'futura-LT', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#page {
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

#page > div {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

#header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 30px 48px 30px 24px;
  z-index: 100;
}

.header_menu {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
  white-space: nowrap;
  color: #014d41;
  letter-spacing: 0.75px;
  cursor: pointer;
}

.header_menu a:link, .header_menu a:visited, .header_menu a:hover, .header_menu a:active {
  color: #014d41;
}

.header_menu > li {
  padding: 0 9px 0 9px;
  position: relative;
  left: 9px;
}

.header_menu ul {
  position: absolute;
  right: -1em;
  display: none;
  background-color:#fff;
  padding: 10px 0;
  border-radius: 5px;
  box-shadow: 10px 0px 15px #0000004D;
}

.header_menu ul li {
  height: 28px;
  font: 15px/28px 'futura-light', sans-serif;
  border: 0;
  padding: 0 16px;
}

.header_menu ul li a {
  display: flex;
  align-items: center;
}

.header_menu ul li a img {
  padding-right:8px;
}

.header_menu ul.header_menu_square {
  border-radius: 0px;
  padding: 16px 0;
}

.header_menu ul.header_menu_square li {
  height: 32px;
  font: 15px/32px 'futura-light', sans-serif;
  border: #F59E18 solid;
  border-width: 0 0 1px 0;
  padding: 0 20px;
}

.header_menu ul.header_menu_square li:last-child {
  border: 0;
}
.header_menu_square a:link, .header_menu_square a:visited,
.header_menu .header_menu_square a:hover, .header_menu .header_menu_square a:active,
.header_menu a:link, .header_menu a:visited {
  text-decoration: none;
}


.header_menu a:hover, .header_menu a:active {
  text-decoration: underline;
}

.header_menu_square li:hover {
  background-color: #f2f2f2;
}


.header_menu li:hover ul {
  display: block;
}

#header_logo {
}

#footer {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  box-sizing: border-box;
  padding: 50px 60px;
  font: 24px/30px 'futura-LT', sans-serif;
  margin-top: auto;
}

#content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  box-sizing: border-box;
  padding: 1rem 14.9%;
}

#banner {
  box-sizing: border-box;
  color: #fff;
  background: #014D41;
  min-height: 3em;
  padding: 39px 0 0 120px;
}

#background {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #fff url("/test/img/FOOTER-path.svg") no-repeat right bottom;
  background-size: 150% auto;
}
#plain_background {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #fff;
}

#background.short {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #014D41 url("/test/img/FOOTER-path.svg") no-repeat center bottom;
  background-size: 150% auto;
}

#background.short #banner, #background.short #banner a:link, #background.short #banner a:visited, #background.short #banner a:hover, #background.short #banner a:active,
#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active
{
  color: #fff;
}

#footer a:link {
  text-decoration: none;
}

#footer a:hover, #footer a:active {
  text-decoration: underline;
}



.right_icons {
  display: flex;
  justify-content: flex-end;
}

.right_icons > div {
  padding: 0 0 0 1em;
}

input, select, textarea, input:focus, select:focus, textares:focus {
  border: 0;
  outline: none !important;
}

textarea {
  resize: none;
}


@media only screen and (max-width: 600px) {
#header {
  box-sizing: border-box;
  height: 80px;
  padding: 0 8px;

}

#background {
  background-size: 310% auto;
}


}
#message_list {
background-color:#fff;
box-sizing: border-box;
width: 90%;
max-width: 1440px;
border-radius:16px;
padding:44px;
margin: 0 auto;
flex-grow: 1;
display: flex;
flex-direction: column;

}

.message_list_icons {
  display: flex;
  margin-bottom: 48px;
}

.message_list_icons a {
  margin-right: 20px;
}

.message_list_icons #email_search_box {
  margin: 0 0 0 auto;
  display: flex;
  justify-content: space-between;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #ADADAD;
  border-radius: 14px;
  font: 18px 'futura-LT', sans-serif;
  color: #999;
  padding: 0 14px;
  margin-bottom: 9px;
}

#email_search_box input[type=text] {
  font: 18px 'futura-LT', sans-serif;
  color: #999;
}

#email_search_box form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 0;
}

#email_search_box button {
  border: 0;
  margin: 0;
  padding: 0;
  height: 22px;
  background: #fff;
}

#message_list > table {
  width: 100%;

}

#message_icons {
  color: #014D41;

}

#message_list #message_icons a:link, #message_list #message_icons a:visited,
#message_list message_icons a:hover, #message_list #message_icons a:active {
  color: #014D31;
}

#message_list_header {
  background-color: #f2f2f2;
  color: #999999;
}

.message_list_entry {
  color: #999999;
}

#message_list .message_list_entry a:link, #message_list .message_list_entry a:visited,
#message_list .message_list_entry a:hover, #message_list .message_list_entry a:active {
  color: #999999;
}

#message_list #message_list_header a:link, #message_list #message_list_header a:visited,
#message_list #message_list_header a:hover, #message_list #message_list_header a:active {
  color: #999999;
}

#message_list .message_entry {
  background-color:#f2f2f2;

  color: #999999;
}

#message_list .message_read_entry {
  font-weight: bold;
}

#page_number {
  align-self: flex-end;
  margin-top: auto;
  color: #999999;
}

#message_list #page_number a:link, #message_list #page_number a:visited,
#message_list #page_number a:hover, #message_list #page_number a:active {
  color: #999999;
}

#message_list .message_entry_thread {
  display: flex;
  flex-direction: column;

  background-color:#f2f2f2;

  color: #999999;

  padding: 0.5em;
}

#message_list .message_entry_header {
  align-self: flex-end;
}

#message_list .message_entry_subject {
  font-weight: bold;
  margin:0.2em 0;
}

#message_list .message_entry_body {
  margin:0.2em 0;
}

#message_list .message_entry_reply {
  padding:0.5em;
  display: flex;
  flex-direction: column;

  margin-top:0.5em;

  background-color:#f2f2f2;

  color: #999999;
}

#message_list .message_favourite_button {
  border: none;
  padding: 0;
  margin: 0;
  outline: inherit;
  cursor: pointer;
  background: none;
  color: #999;
}

#message_list .message_select_checkbox {
  display: none;
}

#message_list .message_select_checkbox + label {
  display: block;
  height: 16px;
  width: 16px;
  background: url("/test/img/checkbox unselected.svg");
}

#message_list .message_select_checkbox:checked + label {
  background: url("/test/img/checkbox selected.svg");
}

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

#message_list {
  width: initial;
  margin: 0 8px;
  padding: 0;
}

.message_list_icons {
  margin: 16px 16px 22px 16px;
}

}