/* 
   CSS Style for FHYA
   Hussein Suleman
   30 April 2019
*/
/* global default */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Open+Sans:wght@300;400;600;700;800&display=swap');

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a {
	color: #f37146;
}

a:visited {
	color: #f37146;
}

a:hover,
a:focus,
a:active {
	color: #f04925;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

p {
	max-width: 65em;
	line-height: 1.4;
}

img {
	max-width: 100%;
	height: auto;
}

.scope {
	margin-left: 0;
	margin-right: 1.618em;
}

.banner-links a {
	color: #222222;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 15px;
	padding: 0 10px;
}

.banner-links a:hover {
	border-bottom: 1px solid #f04925;
	transition: 0.3s ease-out;
}

.banner-logins {
	position: absolute;
	right: 0;
	top: 0;
}

.banner-login {
	background-color: #eaeaea;
	font-size: 0.8em;
	color: #9c9c9c;
	padding: 0.5em;
	border-radius: 0 0 10px 10px;
}

.banner-login a {
	color: #9c9c9c;
}

.breadcrumbs {
	font-size: 0.8em;
	padding: 0.618em;
	padding-right: 1.618em;
	display: inline-block;
	box-shadow: inset 0px 0px 3px #c7c6c6;
	background-color: #f1f1f1;
}

.breadcrumbs a,
.breadcrumbs a:visited {
	color: #a47aca;
}

.breadcrumb {
	max-width: 100%;
}

.banner {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.125758);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-content: flex-end;
	align-content: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	padding: 15px;
	margin: 0 auto;
	position: relative;
}

@media (max-width: 48em) {
	.banner {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		padding-top: 40px;
	}
}
.banner-logo {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 48em) {
	.banner-logo {
		margin-left: 0;
	}
}
.banner-logo a {
	display: block;
	padding: 0 23px 23px;
}

.banner-logo img {
	padding-left: 0;
	padding-bottom: 0;
}

.banner-logins {
	width: 80%;
	display: block;
	float: left;
}

.banner-login {
	display: block;
	float: right;
	margin-right: 10px;
}

#logoutbutton {
	display: none;
}

#logoutbutton img {
	width: 50px;
}

#loginname {
	font-family: 16px;
	margin-top: 18px;
	margin-right: 18px;
}

.login-button {
	margin: auto;
	display: block;
}

.submitsection,
.managesection {
	display: none;
}

.banner-links {
	width: 100%;
	margin-top: auto;
	margin-right: auto;
	text-align: center;
}

@media (max-width: 48em) {
	.banner-links {
		margin-top: 24px;
	}
}

.content {
	display: block;
	float: none;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 1em;
}
@media (max-width: 48em) {
	.content {
		overflow: hidden;
	}
}

.content h2 {
	text-align: center;
	color: #222222;
	font-size: 35px;
	line-height: 42px;
	width: 100%;
}

.linesection {
	margin: 10px;
	border-bottom: 1pt solid grey;
}

.searchformclass {
	width: 100%;
	text-align: center;
}

.searchboxclass {
	width: 80%;
	background-color: white;
	border-radius: 0;
	padding: 5px;
}

.searchbuttonclass {
	margin-left: 10px;
}

.collectionbox {
	display: inline-block;
	background: #cccccc;
	padding: 8px;
	margin: 10px;
	width: 236px;
	vertical-align: top;
}

.collectiontitle {
	font-size: 120%;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	color: #333333;
	text-align: center;
	white-space: normal;
}

.collectionimage {
	padding: 10px;
}

.browsesection .collectionbox a {
	text-decoration: none;
}

.browsesection .collectionbox a:hover {
	text-decoration: underline;
}

.imagepane {
	border-bottom: solid 1px grey;
	display: -webkit-flex;
	display: flex;
	padding: 5px;
	margin: 5px;
	display: flex;
	flex-direction: column;
}

.contentpane {
	float: left;
	width: 48%;
	padding: 5px;
	margin: 5px;
}

.contentitem {
	clear: both;
	overflow: scroll;
	margin-bottom: 5px;
}

.contentpane .contentitemtext {
	margin: 5px;
}

.contentpane .contentitemthumb {
	margin: 5px;
	float: right;
}

.metadatapanehalf {
	border-right: solid 1px grey;
	float: left;
	width: 48%;
	padding: 5px;
	margin: 5px;
	overflow: auto;
	box-sizing: border-box;
	word-wrap: break-word;
	white-space: initial;
}

@media (max-width: 1031px) {
	.metadatapanehalf,
	.contentpane {
		width: 100%;
		box-sizing: border-box;
	}
}

.metadatapanefull {
	padding: 5px;
	margin: 5px;
}

.commentpane {
	border-top: solid 1px grey;
	display: -webkit-flex;
	display: flex;
	padding: 5px;
	margin: 5px;
	clear: both;
	flex-direction: column;
}
.commentpane h2 {
	margin-top: 0;
	border-bottom: 2px solid #ed2e2e;
	text-align: left;
	padding-bottom: 10px;
}

.scope {
	margin-left: 15px;
	margin-right: 15px;
}

h1 {
	font-size: 140%;
	font-family: 'Lato', sans-serif;
	color: #666666;
	margin-top: 20px;
}

h2 {
	font-size: 120%;
	font-family: 'Lato', sans-serif;
	color: #666666;
	margin-top: 20px;
}

.breadcrumbs {
	font-size: 85%;
	font-family: 'Lato', sans-serif;
	font-style: italic;
	color: #666666;
}

.breadcrumb {
	margin-left: 15px;
}

.bcsep {
	display: -webkit-flex;
	display: flex;
	float: left;
	border: 2px solid white;
}

.bctext {
	display: inline;
}

.metadataField {
	margin: 2px 10px 15px 10px;
	border-top: 1px solid black;
	clear: both;
	word-wrap: break-word;
	white-space: initial;
	display: flex;
}

.metadataHeading {
	width: 20%;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	float: left;
	padding: 5px;
}

.metadataValue {
	width: 80%;
	word-wrap: break-word;
	white-space: initial;
	overflow: auto;
}

table {
	margin-top: 20px;
}

table tr td,
table tr th {
	text-align: left;
	padding: 5px;
	border-bottom: 1px solid grey;
}

td.eventActor {
	width: 250px;
}

td.eventDate {
	width: 200px;
}

.acomment {
	margin: 10px;
	padding: 10px;
	background-color: #eeeeee;
	clear: both;
}

.commentname,
.commentdate {
	font-style: italic;
	margin-bottom: 10px;
}

.commentattachment {
	background-color: #cccccc;
	margin: 10px;
	padding: 5px;
	overflow: hidden;
}

.commentattachment1 {
	padding: 5px;
	display: block;
	float: left;
}

.commentattachment2 {
	margin-left: 10px;
	padding: 5px;
	display: block;
	float: left;
}

.addcomment {
	margin: 10px;
	display: none;
}

.addcommentoff {
	margin: 10px;
	font-style: italic;
}

/* Slick carousel */
.singleimageframe {
	border: 3px solid #bbbbbb;
	width: 100%;
	margin: auto;
	background: white;
}

.singleimageframe .singleimage {
	margin: auto;
	display: block;
}

.carousel {
	border: 3px solid #bbbbbb;
	width: 700px;
	margin: auto;
}

.slider-top {
	/* max-height: 300px; */
	margin: auto;
}

.slider-content {
	padding: 2rem 2rem;
	font-size: 26px;
	color: #333333;
	text-decoration: none;
	line-height: 1;
	margin: 0;
}

.slick-prev:before,
.slick-next:before {
	color: grey;
}
.slick-dots li button:before {
	font-size: 15px;
	line-height: 0;
}
.slick-dots li.slick-active button:before {
	color: #d8d8d8;
}

.slick-prev:before,
.slick-next:before {
	content: '';
	background-image: url(arrow-left.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 40px;
	width: 100%;
	opacity: 1;
	position: absolute;
}
.slick-next:before {
	content: '';
	background-image: url(arrow-right.png);
}

.mdentryfieldwidth {
	width: 800px;
}

.mdentrysubfieldwidth {
	width: 770px;
}

.mdentryfieldbox {
	margin: 20px;
}

.mdentryfield {
	float: left;
}

.mdentryplus {
	float: left;
}

.mdentryseparator {
	clear: left;
}

.mdentrysubfieldbox {
	border: 2px solid grey;
}

.mdentrysubfield {
	margin: 20px 13px 20px 13px;
}

/* Styling from Niek de Greef, 7 July 2020 */
/* import theme
--------------------------------------------- */
/* Elements
--------------------------------------------- */
/** Usage:
@include breakpoint(tablet) {}
@include breakpoint(min-width, 1192px) {}
@include between-breakpoints(0, 1024px) {}
**/
body,
.collectiontitle {
	color: #565656;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #ef4826;
}

.bcsep {
	border: none;
	margin-right: 8px;
	margin-top: 1px;
}

.slider-top {
	/* max-height: 35vh;
	max-height: 23em; */
	width: 100%;
	padding: 0;
}

/*
.slider-top img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: auto;
}*/
/*

*/
.slick-track {
	height: auto;
}
.linesection {
	margin: 0;
}

/*.linesection, */
.metadataField,
.metadatapanehalf,
.commentpane {
	border-color: #eaeaea;
}

.carouselsection.linesection {
	border: none;
}

/*.searchsection.linesection h1 {
	text-align: center;
	color: white;
}*/

.browsesection {
	clear: both;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 60px 0;
	padding-top: 20px;
}
.browsesection:last-of-type {
	background: red !important;
}

.browsesection:nth-of-type(even) {
	background: #eeeeee !important;
}

.browsesection:nth-last-of-type(0) {
	background: red !important;
}

.browsesection.linesection {
	margin-top: 1.618em;
	padding: 3.236em;
	padding-bottom: 6.472em;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-content: stretch;
	align-content: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
}

.browsesection.linesection h1 {
	text-align: center;
	width: 100%;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

.collectionbox {
	position: relative;
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid #dddddd;
	box-shadow: 0 0 9px #4e424240;
}

/* .collectionbox:after {
	position: absolute;
	content: ' ';
	z-index: -1;
	right: -2em;
	bottom: -2.5em;
	display: block;
	width: 10em;
	height: 10em;
	background-image: url('eMandulo_square.png');
	background-size: contain;
} */

.archival_curations .collectionbox:after {
	background-image: url('eMandulo_square-archival.png');
}

.collectionimage {
	margin: 0;
	padding: 0;
	margin-bottom: 0.618em;
}

.collectionimage img {
	width: 100%;
}

.collectiontitle {
	font-weight: 300;
	text-align: left;
	font-size: 0.8em;
}

.slick-list {
	padding-bottom: 1rem;
}

.slider-top .slick-slide {
	height: auto;
	border: none;
	box-shadow: 0px 0px 9px rgb(0 0 0 / 9%);
}

.slider-centered .slick-slide img {
	margin: 0 auto;
	min-height: 300px;
}

.slider-nav .slick-slide img {
	margin: 0 auto;
	max-height: 50px;
}

.mdc-button--outlined:not(:disabled) {
	border: 2px solid white;
	color: white;
	border-radius: 0;
	text-transform: uppercase;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
	color: #b1b1b1;
	left: 16px;
}

.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
	background-color: #f37146;
}

.mdc-text-field .mdc-text-field__input {
	caret-color: var(--mdc-theme-primary, #6200ee);
}

.contentpane td {
	padding-bottom: 0;
}

body:after {
	background: #f6f6f6 url(footer_bg.png) no-repeat 100% 100%;
	content: ' ';
	display: block;
	width: 100%;
	clear: both;
	height: 150px;
	background-size: cover;
}

/* added by Hussein later for additional features */
.mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
	-webkit-transform: translateY(-120%) scale(0.75);
	transform: translateY(-120%) scale(0.75);
}

/* for composite thumbnails */
.doubleimageframe {
	border: 3px solid #bbbbbb;
	width: 500px;
	margin: auto;
	text-align: center;
}

.doubleimageframe a .doubleimage {
	max-width: 100;
	display: inline;
	margin: 10px;
}

/* for search images */
.searchthumb {
	display: block;
	width: 200px;
	height: 250px;
	float: left;
	border: 5px solid #dddddd;
	margin: 5px;
	background-color: #dddddd;
	overflow: hidden;
}

.searchthumbimage {
	width: 200px;
	height: 200px;
}

.searchthumbtext {
	font-size: 0.8em;
	margin: 5px;
}

.searchuserthumb {
	display: block;
	/*   border: 5px solid #dddddd;
    margin: 2px; */
	margin: 2px;
	padding: 2px;
	background-color: #dddddd;
	overflow: hidden;
}

.searchuserthumbtext p {
	font-size: 1em;
	margin: 0px;
	border: 0px;
	padding: 0px;
	/*   margin: 5px; */
}

.searchnav {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size: 0.8em;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.searchnav1 {
	margin-left: 20px;
	margin-right: 20px;
}

.searchnav2 {
	margin-left: 20px;
	margin-right: 20px;
}

.searchnav2 input {
	width: 40;
}

.searchnav2 a {
	text-decoration: none;
}

.searchnav2 a:hover {
	text-decoration: underline;
}

.searchgrid {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size: 0.8em;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.searchmenu {
	width: 200px;
	padding: 10px;
	margin-right: 10px;
	background: #dddddd;
}

.searchbox2class {
	width: 100%;
}

.searchresults {
	padding-left: 10px;
	width: calc(100% - 240px);
}

.browsesection.depot_section {
	display: -webkit-flex;
	display: flex;
	z-index: -2;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	background: transparent !important;
}
.browsesection.depot_section .collectiontitle {
	text-align: center;
	border: 1px solid white;
	margin: 0 16px;
	padding: 6px 24px;
	display: block;
	color: white;
}
.browsesection.depot_section .collectionbox a:hover {
	text-decoration: none;
}

.aboutfhya {
	background-color: #f6f6f6;
	padding: 48px;
}
.aboutfhya p {
	max-width: 60em;
	margin: 1em auto;
}

/* for the sort arrows */
tr th a:hover {
	color: white;
	background-color: #f37146;
}

/* ---------------------------------------- */
/* Styling from Niek de Greef, 21 June 2021 */
/* ---------------------------------------- */

#login {
	padding: 0 5px;
}
.banner-login a {
	text-decoration: none;
}
.banner-login a:hover {
	border-bottom: 1px solid #9c9c9c;
}

/*.hero {
	background-image: url('emandulo-home-hero-2.jpg');
	background-position: center;
	min-height: 480px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	font-size: 28px;
}

.red-box {
	background-color: rgba(237, 46, 46, 0.74);
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 48px;
	text-align: center;
	color: white;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}

@media (max-width: 900px) {
	.red-box {
		width: 75%;
	}
}
.red-box > * {
	max-width: 610px;
	margin-left: auto;
	margin-right: auto;
}
.red-box > p {
	margin-top: 0;
}
.red-box a.more {
	color: #f8ef24;
	font-size: 16px;
	text-decoration: none;
}
.red-box a.more:hover {
	border-bottom: 1px solid #f8ef24;
}
form.searchformclass {
	margin-bottom: 0;
}
*/
.mdc-button--outlined:not(:disabled) {
	padding: 0 20px;
}
.content h2 {
	font-weight: 600;
	margin-top: 35px;
}

.browsesection {
	justify-content: center;
}
.browsesection.archival_curations,
.aboutfhya,
.footer-search {
	width: 100vw;
	position: relative;
	margin-left: -50vw;
	padding-left: 50%;
	display: flex;
	justify-content: center;
}

.aboutfhya {
	flex-direction: column;
}

.browsesection .collectionbox {
	width: 348px;
	padding: 0;
}

.browsesection.depot_section {
	justify-content: space-between;
	padding-bottom: 80px;
}

.browsesection .collectionbox.fhya_box,
.browsesection .collectionbox.public_box {
	width: 500px;
}
@media (max-width: 1091px) {
	.browsesection .collectionbox.fhya_box,
	.browsesection .collectionbox.public_box {
		width: 100%;
	}
}
.browsesection .collectionbox.fhya_box .collectionimage,
.browsesection .collectionbox.public_box .collectionimage {
	margin: 0;
}
.browsesection .collectionbox.fhya_box .collectiontitle,
.browsesection .collectionbox.public_box .collectiontitle {
	padding: 38px;
}
.browsesection .collectionbox.fhya_box .collectionimage img,
.browsesection .collectionbox.public_box .collectionimage img {
	object-fit: cover;
}

.browsesection .collectionbox.fhya_box h2,
.browsesection .collectionbox.public_box h2 {
	margin-bottom: 30px;
	color: #ed2e2e;
	border: 2px solid #ed2e2e;
	font-size: 18px;
	padding: 12px 24px;
	text-transform: uppercase;
	text-decoration: none;
	background: white;
	margin: 0;
	width: auto;
	line-height: inherit;
}

.collectiontitle {
	padding: 15px;
	font-size: 22px;
	color: #222222;
	font-weight: 400;
}

.carouselsection {
	margin-bottom: 80px;
}

.collectionimage {
	height: 230px;
}

.collectionimage img {
	height: 100%;
	object-fit: contain;
}

.aboutfhya img {
	max-width: 106px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

.collectionbox {
	border: none;
	box-shadow: 0px 0px 13px rgb(0 0 0 / 15%);
	margin: 15px;
}

.footer-search {
	background-color: #f6f6f6;
}

/*.footer-search .searchsection.red-box {
	min-height: 248px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

.footer-search .searchsection.red-box h2 {
	margin-top: 0;
	color: white;
	font-size: 36px;
	margin-bottom: 40px;
}
*/
.breadcrumbs {
	margin-top: 30px;
	width: 100%;
	font-size: 13px;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	color: #ed2e2e;
	background-color: rgb(240 73 37 / 20%);
	box-shadow: none;
}

.breadcrumbs a,
.breadcrumbs a:visited {
	color: #ed2e2e;
}

h1 {
	font-weight: bold;
	font-size: 35px;
	line-height: 42px;
	color: #222222;
	margin-top: 60px;
}

.metadatapanehalf {
	border: none;
}

.metadatapanehalf h2 {
	margin-top: 0;
	border-bottom: 2px solid #ed2e2e;
	text-align: left;
	padding-bottom: 10px;
}

.imagepane {
	border: none;
}

.imagepane .singleimageframe {
	box-shadow: 0px 0px 9px rgb(0 0 0 / 11%);
	border: none;
	display: flex;
	justify-content: center;
}

.contentpane {
	background-color: #eeeeee;
	height: auto;
}

.contentpane h2 {
	font-size: 26px;
	text-align: left;
	padding: 0 14px;
	margin: 10px 0;
}

.contentitemtext {
	box-shadow: 0px 0px 9px rgb(0 0 0 / 11%);
	background-color: white;
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.contentitemtext b {
	font-size: 14px;
	font-weight: 200;
	color: #4a4a4a;
}
.contentitemtext a {
	color: #ed2e2e;
	font-size: 16px;
	text-decoration: none;
	font-weight: 600;
}

#sortablelist {
	padding: 10px;
}

.scope {
	margin: 0;
}

.row {
	padding: 2rem;
}

.gray-row {
	background: #eeeeee;
	width: 100vw;
	position: relative;
	margin-left: -50vw;
	padding-left: 50%;
	display: flex;
	justify-content: center;
}

.white-row {
	display: flex;
	justify-content: center;
}

.btn-border-orange {
	margin-bottom: 30px;
	color: #ed2e2e;
	border: 2px solid #ed2e2e;
	font-size: 18px;
	padding: 12px 24px;
	text-transform: uppercase;
	text-decoration: none;
	background: white;
}

.pre-footer {
	background: #dddddd;
	display: block;
	width: 100%;
	margin: 0 auto;
}

.pre-footer-content {
	max-width: 1140px;
	margin: 0 auto;
	padding: 1rem;
}
.pre-footer-content h3 {
	font-size: 16px;
	color: #222222;
	font-weight: 600;
}
.pre-footer-content p {
	font-size: 16px;
	color: #222222;
}

/* quick fix for uls not aligning on front page [hussein, 29 july 2021] */

.aboutfhya ul {
	width: 800px;
	margin: 0 auto;
	display: block;
	justify-content: center;
}

/* styling of purl links */

.material-icons.md-48 { font-size: 48px; }

.purl {
   padding: 0 20px 0 0;
   display: block;
   float: right;
}

/* styling of images to left of headings */

.titlebox {
   display: flex;
}

.titleimage {
   padding-right: 10px;
}

.titleimage img {
   width: 200px;
}

/* Changes from Deon, 25 August 2021 */

/**
 * Increase the arrow size on the Makers & Shakers page
 */
.searchnav2 a {
    text-decoration: none;
    font-size: 25px;
}

/**
 * Set view height for homepage hero and reduce font size
 */
.hero {
    min-height: 50vh;
    font-size: 24;
}

/* added for action pane [hussein, 21 nov 2021] */

.actionpane {
   background: #dddddd;
   display: -webkit-flex;
   display: flex;
   padding: 5px;
   margin: 5px;
   clear: both;
/*   text-align: left; */
   align-items: center;
   font-family: 'Lato', sans-serif;
   color: #ef4826;
}

.actionpane b {
   font-weight: 600;
   margin-right: 10px;
}

.actionpane a {
   font-weight: 300;
   align-items: center;
   display: -webkit-flex;
   display: flex;
   align-items: center;
   text-decoration: none;
   border: solid 1px white;
   padding: 5px;
}

.actionpane a:hover {
   background: #aaaaaa;
}