/* Overrides to core styles.css  */

/* base color scheme:  */
.color-blue {
	color: #337ab7;
	}
.color-orange {
	color: #e68a00;
	}
.color-green {
	color: #008000;
	}
.color-red {
	color: #a94442;
}

:root {
  --color-primary: #337ab7;
  --color-primary-bg: #fff;
  --color-highlight: #e68a00;
  --color-secondary: #fff;
  --color-text: #212529;

/*
  --color-primary-light: #575a26;
  --color-primary-bg: #f5f4dA;
  --color-secondary: #f5f4dA;  
  --color-secondary-bg: #4d4f21;
  --color-success: #004d00;
  --color-success-dark: #003300; 
  --color-danger: #edbdab;
  --color-danger-dark: #8b3a1d;
  --color-borders: #2F2F2F;*/
}

a:visited {
	color: var(--color-primary);
}

.btn-primary:link, .btn-secondary:link {
	color: var(--color-secondary);
}
.btn-primary:visited, .btn-secondary:visited {
	color: var(--color-secondary);
}



#main {
	padding: 10px;
	width: 100%;
}

#maincontent {
	background-color: var(--color-secondary);
	min-height: 500px;
}

@media screen and (min-height: 800px) {
	#maincontent {
		min-height: 700px;
	}
}

@media screen and (min-height: 1200px) {
	#maincontent {
		min-height: 1000px;
	}
}
	

#outer {
	border: none;
}

#header #logo {
	background-image: url('../../img/ff_logo.png');
	background-repeat: no-repeat;
	width: 100%;
	height: 100px;
	}
	
.navbar-header-warning-stripe {
	position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    background-color: var(--warning);
    color: #000;	
    font-size: 12px;
    font-style: italic;
}

.navbar-header-environment-stripe {
	position: fixed;
    z-index: 1001;
    background-color: var(--info);
    color: var(--color-secondary);
    text-align: center;
    width: 12px;
    top: 0;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}

.navbar-header-environment-stripe:hover {
	cursor: pointer;
}

.navbar-header-environment-stripe .message {
	position: relative;
	left: 6px;
	}

#mapheading {
	text-align:left;
}

#loginForm {
	margin-top: 40px;
	margin-bottom: 100px;
}

.login-container {
	max-width: 540px;
}

@media screen and (max-width: 520px) {
	
	#header {
		min-height: 30px;
		
	}
	
	#mapwrapper, #mapcanvas {
		min-height: 200px;
		height: 420px;
	}
	
	#header #logo {
	background-image: url('../../img/ff_logo_sm.png');
	background-repeat: no-repeat;
	width: 100%;
	height: 30px;
	}
	
	.searchText {
		display: none;
	}
}


#menu_bar {
	background-color: #195C4B;
	margin-top: 15px;
}

@media screen and (max-width: 520px) {
 	#menu_bar {
 	display: none;
 	}
}

.error-message {
	color: #dc3545;
}

.pagination .page-link {
	color: var(--color-primary);
}

.pagination .page-item.active .page-link {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-secondary);
	}
	
.workingPanel {
	background-color: var(--color-secondary);
    border-color: var(--color-primary);
    margin: 0.25rem;
    color: var(--color-primary);
}

/* --------- overrides to Bootstrap styles -------------*/
.navbar {
	margin-bottom: 0px; 
	flex-wrap: wrap;
	align-items: flex-start;
}

a {
	color: var(--color-primary);
}

 a.btn-secondary:not([href]) {
	color: #fff;
	}
	
.btn-primary {
	color: var(--color-secondary);
    background-color: var(--color-primary);
    border-color: #2e6da4;
}

.btn-light {
	border-color: #212529;
}

.btn.disabled, .btn:disabled {
	cursor: not-allowed;
	}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--color-secondary);
    background-color: var(--color-primary);
}

.navbar-right .dropdown-toggle {
	min-width: 170px;
}




/* Foodfinder-specific styles */

/* ------------ image lightboxes ------- */

img.ff-lightbox:hover {
	cursor: pointer;
}

.modal-lightbox {
    max-width: revert;
	margin: 0 15px;
    width: fit-content;
    height: fit-content;
    max-height: 100%;
    margin: 0 auto;
    padding: 10px;
}

.modal-lightbox .modal-content {
	padding: 2px;
}

.modal-lightbox .modal-content img {
	max-width: 100%;
    max-height: calc(100vh - 50px);
	}
	
.modal-lightbox .modal-content .caption {
	margin: 4px 10px;
	}

.modal-lightbox .close {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 var(--color-secondary);
    opacity: .5;
	position: absolute;
    right: 5px;
	top: 5px;
	width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: var(--color-secondary);
}

.modal-lightbox .next, .modal-lightbox .previous {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 var(--color-secondary);
    opacity: .5;
	position: absolute;
	top: 50%;
	width: 40px;
    height: 40px;
    border: none;
    background-color: var(--color-secondary);
}

.modal-lightbox .previous {
    left: 5px;
}

.modal-lightbox .next {
    right: 5px;
}


/* ----------- Nav Bar ----------------- */


.navbar {
	border-bottom: 1px solid rgba(204, 204, 204,.5);
}

.navbar-inner {
	width: 100%;
	display: flex;
}

#navbar1 {
	order: 5;
}

.navbar .navbar-toggler {
	margin-left: -5px;
    margin-right: 5px;
}

.navbar .subscribe-controls {
    display: inline-block;
    order: 5;
}

.navbar #user-menu {
    order: 6;
}

.navbar .navbar-brand {
	margin-top: 0.25rem;
}

.navbar .navbar-brand .nav-title {
	display: none;
}

.navbar .navbar-right .nav-item {
	margin-top: .5rem;
}

.navbar .navbar-nav .search-controls {
	margin-top: 1rem;
	margin-bottom: .5rem;
	position: relative;
}

.navbar .navbar-nav .search-controls::after {
	content: '\f002';
    font-family: "Font Awesome 5 Free";
	color: #777777;
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
    right: 10px;
    top: 0px;
    padding: 0;
}

.navbar .navbar-nav .search-input input::placeholder {
	opacity: .5;
}

.navbar .navbar-right .search-controls {
	display: none;
	margin: 0 10px 0 0;
}

.navbar .subscribe-collapse {
	justify-content: flex-end;
	text-align: right;
	padding: 5px;
	order: 6;
}

.navbar .subscribe-collapse .btn {
   	min-width: 100px;
   	margin-left: 4px;
}

.navbar .subscribe-menu .user-name  {
	margin-left: 15px;
	font-weight: bold;
}


.navbar .subscribe-toggler .navbar-toggler-icon, .navbar .account-toggler .navbar-toggler-icon {
	background-image: none;
	}
	
.navbar .subscribe-toggler .navbar-toggler-icon:after, .navbar .account-toggler .navbar-toggler-icon:after {
   font-family: "Font Awesome 5 Free";
   content: "\f007";
   color: #aaa;
   display: inline-block;
   padding-right: 3px;
   padding-top: 3px;
   vertical-align: middle;
   font-weight: bold;
   font-size: 25px;
}

.navbar .subscribe-controls .nav-link {
	display: none;
}

.navbar .subscribe-menu {
	justify-content: flex-end;
	text-align: right;
	padding: 10px;
	
}

.btn-subscribe {
	display: none;
}

@media (min-width: 576px) {
	
	.navbar .subscribe-controls .account-toggler {
		display:none;
	}
	
	.btn-subscribe {
		display: inline-block;
	}
	
	.btn-subscribe-nav {
		position: relative;
 	   top: -2px;
	}
	
	.nav-item-subscribe {
		display: none;
	}
	
	.navbar .subscribe-controls .nav-link {
		display: inline-block;
		margin-right: 10px;
	}
	
	.navbar .subscribe-menu {
		padding: 10px 25px 10px 10px;
		}
	
	.navbar .subscribe-menu .user-name {
		display:none;
	}
	
	.navbar .subscribe-controls .dropdown-menu {
 	   position: static;
	}
	
}



@media (min-width: 992px) {
	
	.navbar-expand-lg .subscribe-menu {
		display: none!important;
	}
	
	.navbar-expand-lg .subscribe-menu.show {
		display: flex!important;
	}
	
	.navbar-expand-lg .subscribe-menu {
    	-ms-flex-preferred-size: 100%;
    	flex-basis: 100%;
	}
	
	.navbar-expand-lg .subscribe-menu .navbar-nav {
		flex-direction: column;
	}
	
	.navbar .navbar-nav .search-controls {
		display: none;
	}
	
	.navbar .navbar-right .search-controls {
		display: revert;
	}
}

@media (min-width: 1200px) {
	.navbar .navbar-right .search-controls {
		width:300px;
	}
}

/* ----------- forms ----------------- */

.btn-createChild {
	float: right;
}

/* - styling for large custom checkboxes */ 
.custom-checkbox input[type=checkbox] {
	position: absolute;
	opacity: 0;
  	cursor: pointer;
  	height: 0;
  	width: 0;	
}

.custom-checkbox {
	position: relative;
	padding-left: 35px;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.custom-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}


.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
  left: 9px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* end custom checkbox */

.required-indicator {
	color: red;
	padding-left: 3px;
    padding-top: 8px;
    position: absolute;
    top: 4px;
    right: -10px;
}

.entity-view-container {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.entity-view-container h1 {
	margin-bottom: 1.5rem;
}

.entity-view-container label {
	font-weight:bold;
}
.entity-view-buttons {
	margin-top: 20px;
}

.finder-feature-content .headline {
	flex-basis: 100%;
}

.finder-feature-content .featureHeading {
	flex-basis: 100%;
}

.finder-feature-content .featureBodyText {
	max-width: 100%;	
}

.finder-feature-content .alert {
	margin: 0 auto;
}

.finder-home {
	margin: 40px -15px 20px -15px;
}

.finder-home .card {
	margin-bottom: 5px;
}

.finder-home .geo-card {
	text-align: center;
}

.finder-home .fa-location-arrow {
	margin-right: 10px;
}

@media (min-width: 576px) {
	
	form label {
		text-align: right;
	}
	
	.form-check label {
		text-align: left;
	}
}

#location_anchor {
	min-height: 200px;
}

	#searchform2 .form-group {
		width: 100%;
	}


.loc-panel h3 {
	font-size: 22px;
}

.loc-panel .caption {
	overflow: hidden;
}


.loc-description {
	max-width: 578px;
}

/* for now - hiding images that are too long on lists */
.loc-image {
		overflow: hidden;
		border: solid 1px #aaaaaa;
		text-align: center;
		position: relative;
	}
	
.loc-image img {
	max-width: 100%;
	height: auto;
}

.loc-image-placeholder {
	display: none;
	}

.loc-image-caption {
	font-size: .85rem;
    font-style: italic;
}

.listItem {
	position: relative;
} 

.right {
	float: right;
}

.config-modal .card {
	margin-bottom: 10px;
}

@media (min-width: 576px) {
	.finder-home {
		margin: 40px auto 20px auto;
		max-width:600px;
		}
	}
	
@media (min-height: 1024px) {
	
	.finder-feature-content .featureBodyText {
 	   max-width: 620px;
	}
	.finder-home {
		position: relative;
		min-height: 550px;
		padding-top: 170px;
		}
		
	}

@media (min-width: 768px) {
	
	#searchform2 .input-group {
		width: 500px;
	}
	
	
	.loc-panel {
	    display: inline;
		overflow-y: scroll;
	}
	
	.loc-image {
		max-height: 400px;
		overflow: hidden;
		vertical-align: middle;
		border: none;
		position: relative;
	}
	
	.loc-image img {
		max-height: 400px;
	}
	
	.loc-panel .description {
		margin-top: 10px;
	}
}

.loc-panel h3 {
	margin-top: 5px;
	font-size: 20px;
    text-transform: uppercase;
}


.location_info {
	background: white;
	margin: auto;
	border: none;
	width: 600px;
	overflow:auto;
	min-height: 400px;
	position: relative;
}

.location_info h2 {
		-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	color: #0a84c1;
}

.location_info .contact_info  {
	float: left;
}

.location_info .contact_info p {
	margin: 0px;
}

.location_info .contact_info .category {
	 font-weight: bold;
	 color: #195C4B;	 
	 font-size: 15px;
	margin-bottom: 10px;
}


.location_info .figure {
	 float: right;
	 margin-left: 10px;
}

.location_info .description  {
	  	margin-top: 10px;
	  	float: left;
}

.location_info .figure img {
	 max-width: 300px; 	
	 height: auto;
}

.location_info .row  {
	  	/*border: solid 1px;*/
}

.location_info .links {
	clear: both;
	margin-top: 20px;
}

.location_info .links .row {
	  	margin-bottom: 10px;
	  	
}

@media screen and (max-width: 520px) {
 	.location_info {
 		width: 98%;	
 	}
 	
    .location_info .figure img  {
    	max-width: 100px;
    	height: auto;
    } 
    
    .location_info .description  {
	  	float: none;
	}
	
	.location_info .figure {
		 float: none;
		 margin-left: 10px;
	}
   
}

.locationSearch {
	margin-left: 10px;
}

.locationStatus {
	display: none;
	font-weight: bold;
    color: var(--color-secondary);
    background-color: #5bc0de;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    margin: 5px 0 10px 0;
}

.locationStatus.Closed {
	display: block;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;

}

.locationStatus.Coming, .locationStatus.Pending {
	display: block;
	color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

/* logout screen */
.logout .logout-link {
	margin-top: 30px;
}



.ui-sortable-handle {
	cursor: move;
}

.switcher .switch {
	text-decoration: underline;
}

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


.formPanel {
	padding: 10px 10px;
	position: relative;
	max-width: 800px;
}

.formPanel .close {
	position: absolute;
	right: 5px;
	bottom: 0px;
	text-transform: uppercase;
	color: blue;
	background: url('../../img/icons/collapse.png') center right no-repeat;
	background-color: white;
	height: 30px;
	width: 30px;
}


.routeSummary .origin, .routeSummary .destination {
	font-weight: bold;
}

.routeSummary .link {
	float: right;
	cursor: pointer;
	text-transform: uppercase;
	color: blue;
	background-image: url('../../img/icons/expand.png');
	background-repeat: no-repeat;
}

.locationProfile {
	text-align: left;
}

.locationModal {
	min-height: 100px;
	padding-top:20px;
	padding-bottom:20px;
}

.locationModal img {
	max-width: 100%;
	margin-bottom:10px;
	height: auto;
}

.locationModal .correction-link {
	font-size: .9rem;
    margin-bottom: 1rem;
    margin-top: .5rem;
    margin-left: .5rem;
}

.locationModal .correction-panel {
	margin-top: 10px;
	position:relative;
}


.locationModal .correction-panel textarea {
	width:100%;
	margin-bottom: 1rem;
}

.locationModal .correction-panel label {
	font-size: .9rem;
}

#locationModal .custom-checkbox input:checked ~ .checkmark {
    background-color: green;
}

#locationModal .modal-footer {
	justify-content: space-between;
}

#locationModal .modal-footer .buttons {
	text-align: center;
}

#locationModal .modal-footer .btn {
	margin: 1px 0;
}


.locationModalImage {
	text-align: left;
}

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

.locationModalImage .loc-image-caption {
	margin-bottom: 10px;
}


.locationModal .card {
	margin-top: 3px;
}

.locationModal .select-list-message {
	padding: .25rem 1.25rem;
	margin-top: 4px;
}

.locationModal .select-list-add {
	width: calc(100% - 80px);
	margin-right: 2px;
}

.locationModal .add-list-row {
	padding: 10px 0 0 10px;
}

.locationModal .add-list-row label {
	font-weight:bold
}


.locationModal .btn-location-list-remove {
	margin-right: 10px;
	padding: .5rem .75rem;
}


.location-view {
	margin-top: 30px;
}

.location-view h2 {
	font-size: 1.5rem;
    text-transform: uppercase;
}

.location-view address {
	margin: 15px 0px 15px 10px;
}

.location-view .card {
	margin-top: 10px;
}


@media only screen and (min-width: 768px) {

	
}

@media only screen and (min-width: 768px) {

	.locationModal .add-list-row label {
		text-align: right;
	}
	
	.location-view h2 {
		font-size: 2rem;
    	text-transform: uppercase;
	}
}


.progress-wrapper {
	padding: 15px 10px 15px 10px;
	border: solid 1px #ddd;
	border-radius: 4px 4px 0 0;
	margin: 5px 0px;	
}

.progress-text {
	margin-bottom: 10px;
}

.alert-secondary {
	background-color: #eee;
}

.centered {
	max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.toggle {
	float:right;
}

.list-label {
	font-weight: bold;
}

.align-left {
	float: left;
	text-align: left;
}

.modal {
	    overflow-y: scroll;
}

.modal .modal-footer .alert {
	flex-basis: 100%;
}

@media only screen and (min-width: 768px) {
	.modal .large {
		width: 90%;
		max-width: 900px;
	}
	
	.form-group .indent {
		padding-left: 30px;
		padding-right: 30px;
	}
	
}

/* --------  About page --------------- */
.about #main {
	margin: 0px auto;
    max-width: 560px;
}

/* ad panels */
.ad-wide {
	display: none;
}

.ad-narrow {
	display: block;
}

@media only screen and (min-width: 723px) {
	.ad-wide {
		display: block;
	}
	
	.ad-narrow {
		display: none;
	}
}

/* bootstrap modals don't work well on iPhones (scroll issues) 
 so these properties show/hide links that drive mobile-specific behavior */
.non-mobile {
	display: none;
}

.non-mobile-inline {
	display: none;
}

@media only screen and (min-width: 480px) {
	.mobile-only {
		display: none;
	}
	
	.non-mobile {
		display: block;
	}
	
	.non-mobile-inline {
		display: inline;
	}
}

.notice {
	font-size: .75rem;
    max-width: 650px;
    margin: auto;
    text-align: center;
}

.copyright {
	font-size: .9rem;
    max-width: 650px;
    margin: auto;
    text-align: center;
}

.hover-controls {
	position: absolute;
    right: 20px;
    top: 15px;
    border: none;
}


.hover-controls .close {
	font-size: 48px;
	background-color: rgba(255,255,255,0.7);
    min-width: 50px;
    margin: 3px;
	}

@media only screen and (min-width: 750px) {
	.hover-controls .close {
		font-size: 16px;
		margin: 2px;
    	padding: 3px;
    	min-width: 20px;
	}
}


.overlap {
	position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
}

.adframe {
	text-align: center;
	max-width: 100%;
	overflow-y:hidden;
}

.adframe .amazonGrid {
	max-height: 300px;
	max-width: 800px;
	margin: 0px auto;
	border-top: solid 1px #cccccc;
}

.adblock .amazonGrid {
	max-height: 300px;
	max-width: 570px;
	margin: 0px auto;
	border: solid 1px #cccccc;
	padding: 5px;
}



/* -------- Home Page =---------------- */

#button-config {
	position: fixed;
    /*top: 60px;*/
    bottom:2px;
    left: 2px;
    width:100px;
}

#button-add-page {
	position: fixed;
    /*top: 93px;*/
    bottom:2px;
    left: 104px;
    width:100px;
}

#button-publish-page {
	position: fixed;
    /*top: 93px;*/
    bottom:2px;
	left: 205px;
    width:100px;
}

.site-welcome {
	margin-bottom: 30px;
}

/* styles for when home page is in 'Message' mode */
.body-message .jumbotron h3 {
	font-size: 18px;
	font-weight: normal;
	margin-top: 50px;
}

.body-message .site-banner.container {
	max-width: 600px;
} 



.page-collection-container {
	min-height: 400px;
}

.page-collection-container .rowspan-2 {
	min-height: 220px;
	}

.homePanel {
	overflow: hidden;
	min-height: 110px;
	border-bottom: 1px solid #dddddd;
	margin-bottom: 10px;
}


.page-collection-container .rowspan-2 {
	min-height: 220px;
	}

.page-collection-banner {
	width: 100%;
	margin-bottom: 20px;
	position:relative;
}

.page-collection-banner-full h1 {
	position: absolute;
    bottom: 0;
    left: 0;
    color: var(--color-secondary);
    font-size: 2rem;
    background-color: rgba(0,0,0,0.5);
    padding: 5px 10px;
    width:100%;
}

.page-collection-banner img {
	width: 100%;
	height: auto;
}


.page-collection-headline {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}


.homePanelAlt .content:hover {
	background-color: inherit;
	opacity: initial;
}

.homePanelInner {
	background-repeat: no-repeat;
	background-size: 0;
	opacity: 1; 
}

.homePanel.clickable {
	cursor: pointer;
}

.homePanel.clickable:hover {
	opacity: .8;
}


.homePanel.page-collection-ex {
	height: auto;
}

.homePanel.page-collection-ex .homePanelContent {
	display: flex;
	flex-wrap: wrap;
}

.homePanel.page-collection-ex h2 {
	flex-basis:100%;
	margin-top: 0.5rem;
}
	

.homePanel .page-collection-ex-more {
	flex-basis: 100%;
	text-align: center;
	margin-bottom: 0.5rem;
}

.homePanel.page-collection-ex .homePanel {
	border: none;
	}

.homePanel .page-collection-error {
	width: 100%;
	color: var(--danger);
	background-color: #eee;
	padding: 30px 10px;
	text-align:center;
}

.ui-sortable-handle .homePanelInner {
	cursor: move;
}

.homePanel.panel-draft {
	padding-top: 20px;
}



.homePanel.panel-draft:before, .newsItem.panel-draft:before {
  content: "Draft - not visible to readers";
  background-color: var(--info);
  opacity: 80%;
  color: var(--color-secondary);
  position:absolute;
  top: 0px;
  padding: 0 10px;
  text-align: center;
  z-index: 10;
  font-size: .8rem;
}

.homePanel.panel-sub-only {
	overflow: none;
}

.homePanel.panel-sub-only:after {
    content: "Subscribers Only";
    background-color: var(--warning);
    color: var(--color-secondary);
    position: absolute;
    top: 50px;
    left: calc(50% + 8px);
    padding: 6px 10px;
    text-align: center;
    width: calc(50% + 35px);
    z-index: 10;
    font-size: .9rem;
    transform: rotate(
45deg);
    /* -webkit-transform: rotate(
45deg); */
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}


.newsItem.panel-draft:before {
  	width: calc(100% - 20px);
	  top: 4px;
	}

.homePanel.panel-scheduled:before, .newsItem.panel-scheduled:before {
  content: "Scheduled - not yet visible to readers";
}

.homePanel .buttonPane {
    position: absolute;
    right: 20px;
    bottom: 10px;
}

.homePanelInner {
	height: 100%;
	width: 100%;
}


.homePanelImage  {
	display: block;
	float: left;
	margin-right: 10px;
}

.homePanelImage img {
	width: 100px;
	height: auto;
}

.homePanelMedia img {
	width: 100%;
	height: auto;
}

.homePanelInner h2 {
	margin-top: 0px;
	font-size: 1.75rem;
}

	
.homePanelInner .content {
	padding: 1rem .5rem 1.5rem .5rem;
   }
  

.homePanelInner .byline {
	color: #888;
}

.homePanelInner .feature-description {
	display: none;
	}

.homePanelInner .postdate {
		text-transform:uppercase;
		font-size: 12px;
		position: relative;
    	color: #aaaaaa;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}

.homePanelInner .author {
	margin-right: 20px;
}

.homePanelInner .publication {
	margin-right: 20px;
	font-style: italic;
}

.homePanelInner .overlay .description {
	margin-bottom: 0;
}

#homePageConfig .help-text {
	font-size: .9rem;
	margin: 2px 10px;
	color: #777;
}

.feature2 {
	height: 100%;
	width: 100%;
}

.feature2 .more {
	font-size: 14px;
	text-transform: uppercase;
	margin-right: 10px;
	width: 100%;
	text-align: center;
}

.feature-filter {
	height: 150px;
	text-align: center;
	padding: 20px 0;
}



.moreButtonPanel {
	text-align: center;
	max-width: 400px;
	margin: 0px auto 15px auto; 
}

.moreButtonPanel i {
	float: left;
	font-size: 16px;
    margin-top: 4px;
}

.overlay h2{
	font-size: 20px;
	color: var(--color-primary);
	margin-bottom: 0;	
}

.overlay p {
	font-size: 14px;
}

.authorProfile {
	min-height: 400px;
}

.product-card {
	margin-bottom: .5rem;
}

/* note - these are for the news display widget on the Home page. The News page has separate styling  (see below) */

.news-card {
	border-bottom: 1px solid #ccc;
    margin: 1rem 0;
}

.news-card h2 {
	font-size: 20px;
}

.news-card h3 {
	font-size: 16px;
	color: var(--color-highlight);
}

.news-card .dateline {
	text-transform:uppercase;
	margin-top: -5px;
	font-size: 10px;
}

.news-card a, .news-card a:visited {
	color: var(--color-highlight);
}

.news-card .headline a, .news-card .headline a:visited {
    color: var(--color-primary);
}
.news-card .author a {
	color: #000000;
}

.news-card .author a:visited {
	color: #000000;
}

.news-card .more {
	font-size: 14px;
	text-transform: uppercase;
	margin-right: 10px;
	text-align:center;
}

.news-list {
	padding: 0 0.5rem;
}

.newsItem {
	margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: solid 1px #cccccc;
	}

.newsItem h3 {
	margin-top: 5px;
	font-size: 20px;
}

.newsImage img {
	display: none;
}

/* news renders a little differently in the feature 2 mode - featureHeader upper section */
 #featureHeader  .news-card h2 {
 	text-align: center;
 	margin-bottom: 1rem;
 }
 
 #featureHeader  .news-card h3 {
 	font-size: 1.5rem;
 	margin-bottom: 0.25rem;
 }
 
   #featureHeader  .news-card h4 {
 	font-size: 1.15rem;
 }
 
 
 #featureHeader .news-card .author {
    margin-right: 10px;
    padding-right: 10px;
    border-right: solid 1px #ccc;
}

#featureHeader .news-item {
	margin-bottom: 1.5rem;
}

#featureHeader .news-item .badge {
	font-size: 60%;
	position: relative;
    top: -3px;
}

#featureHeader .news-item .read-more-link {
	padding-left: 10px;
    font-size: .9rem;
    white-space: nowrap;
}


#pageEditModal .add-feature-search {
	padding: 10px 10px 30px 30px;
}

#pageEditModal .collection-name {
	font-weight: bold;
}

#pageEditModal .buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.page-collection-container.container-message {
	min-height: 0px;
}

@media (min-width: 576px) {
	.page-collection-banner-full h1 {
		bottom: 10px;
    	padding: 15px 30px;
	}

}

@media (min-width: 768px) {
	
	.page-collection-banner-full h1 {
    	bottom: 20px;
		padding: 15px 30px;
		font-size: 2.5rem;
	}
	
	.newsImage {
		float: left;
		min-width: 200px;
		min-height: 100px;
	}
	
	.newsItem h3 {
		margin-top: 0px;
		font-size: 26px;
	}

	
	.newsImage img {
		display: block;
		width: 200px;
		margin-right: 10px;
	}
	
	.homePanel .page-collection-ex-more {
		text-align: right;
	}
	
}

@media (min-height: 800px) {
	.page-collection-container {
		min-height: 600px;
	}
}

@media (min-height: 1000px) {
	.page-collection-container {
		min-height: 800px;
	}
}

@media (min-width: 992px) {
	
	.page-collection-banner-full h1 {
    	bottom: 50px;
    	padding: 20px 30px;
	}
	
	
	#button-config {
	    top: 60px;
	    left: 2px;
	    bottom: auto;
	    	}

	#button-add-page {
	    top: 60px;
	    left: 103px;
	    bottom: auto;
	}

	#button-publish-page {
	    top: 60px;
	    left: 205px;
	    bottom: auto;
	}
	
	.homePanel {
		border-top: none;
		padding: 0 5px;
	}
	
	.homePanel.panel-draft:before {
		width: calc(100% - 10px);
	}
	
	.homePanelAlt {
		border-bottom: none;
	}

	.homePanelImage  {
		display: none;
	}
	
	.homePanelInner .news {
		position: absolute;
		border: solid 1px #aaaaaa;
    	padding: 10px;
    	height: 100%;
    	width: 100%;
	}


	.homePanelInner .news h2 {	
		margin-top: 0px;	
	}

	/* overlay for displaying text on images */
	.overlay h2, .overlay p, .overlay .byline {
		color: var(--color-secondary);
		background-color:rgba(0,0,0,0.6);
		padding: 5px 10px 5px 5px;
	}
	
	.overlay h2 {
		font-size: 1.5rem;
	}
	
	.overlay p {
		font-size: 1.1rem;;
	}
	
	.homePanel {
		min-height: 350px;
	}
	
	.page-collection-container .rowspan-2 {
		min-height: 700px;
	}
	
	.homePanelInner {
		margin: 0px;
		min-height: 340px;
		background-size: cover;
		position: relative;
		border: solid 1px #cccccc;
	}
	
	.homePanelContent {
		border: none;
	}
	
	.homePanelInner .overlay {
 	   position: absolute;
       bottom: 5px;
    	left: 0px;
    	width: 100%;
    	color: var(--color-secondary);
	}

	
	.homePanelInner .postdate {
		text-transform:uppercase;
		font-size: 12px;
    	color: #cccccc;
		padding-bottom: 0px;
	}
	
	.news-card {
		border-bottom: none;
	}
	
	
	.news-card .more {
		text-align: right;
		font-size: 14px;
		text-transform: uppercase;
		position: absolute;
		bottom: 0px;
		right: 0px;
		margin-right: 10px;
	}
}

@media (min-width: 1200px) {
	
	.page-collection-banner-full h1 {
    	padding: 20px 30px;
    	font-size: 3rem;
    	bottom:120px;
	}
}

@media (min-width: 2400px) {
	
	.page-collection-banner-full h1 {
    	padding: 20px 30px;
    	bottom: 220px;
		font-size: 4rem;
	}
}


/* ============= 403 and 404 Pages ============ */

.error-container {
	max-width: 400px;
	margin: 80px auto 50px auto;
	min-height: 400px;
	text-align:center;
}

	
.error-container .message {
	margin: 50px 0;
	}


/*============== Ad Blocks =====================*/

.adinner a:hover {
	text-decoration: none;
}

.adinner {
	border: solid 1px #cccccc;
    padding: 5px;
    text-align: left;
    max-width: 400px;
    margin: 10px auto;
}



.adinner h1 {
	text-transform: none;
	color: var(--color-primary);
	margin-bottom: 5px;
	font-size: 24px;
}

.adinner p {
	font-size: 12px;
	color: #777777;
} 

.adinner .tagline {
	color: var(--color-highlight);
	text-transform:uppercase;
}

.adinner .image {
	text-align:center;
}

.adinner img {
	max-width: 90%;
	max-height: 300px;
}

.adinner.ad-0 {
	/* styling for inline ads */
	max-width: 100%;
	text-align: center;
	border: none;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
	
}

.adinner.ad-0 img {
	max-width: 100%;
	max-height: none;
}


/*============== Author Page ====================*/

.authorProfile {
	margin-top: 40px;
}

.authorProfile h3 {
	font-size: 1.33rem;
	margin-bottom: 0;
	}

.author-bio {
	margin: 20px 0 10px -15px;
	
}

.articleList {
	clear: both;
	padding-top: 10px;
	padding-bottom: 30px;
}

.articleList h2 {
	font-size: 1.33rem;
	color: var(--color-highlight);
}

.articleList h3 {
	font-size: 1.25rem;
	color: var(--color-highlight);
}

.articleList .postdate {
	margin-top: 10px;
	font-size: .9rem;
}


.articleList .imageWrapper {
	height: 200px;
	overflow:hidden;
	vertical-align: middle;
}

.articleList img {
	width: 100%;

}

.articleList .article {
	margin-top: 10px;
}

@media (min-width: 768px) {
	.article {
		min-height: 350px;
	}
}

/*============== Social Bar =====================*/

.socialList {
	-webkit-padding-start: 0px;
	margin-top:5px;
}

.socialList li {
	display: inline-block;
}

.social {
	display: inline-block;

}

.socialList .fa {
	font-size: 22pt;
	min-width: 40px;
	color: var(--color-highlight);
}

.icon {
	display: inline-block;
	vertical-align: middle;
	min-width: 30px;
	min-height: 30px;
	background-repeat: no-repeat;
	background-size: cover;	
}

.icon-twitter {
	background-image: url("../../img/icons/twitter.png");
	top: -5px;
    position: relative;
}

.icon-facebook {
	background-image: url("../../img/icons/facebook.png");
}

@media (min-width: 992px) {
	.icon {
		min-width: 30px;
		min-height: 30px;
	}
}

.logo {
	max-width: 100%;
}

.footer-nav .nav, .footer-social .nav {
	width: 350px;
    max-width: 100%;
    margin: 0 auto;
}

.footer-social .nav {
	font-size: 22pt;
	margin-bottom: 30px;
	}


.twitterButton {
	padding-top: 5px;
}


.jumbotron {
	background-color: var(--color-secondary);
	padding-left: 0px;
	padding-right: 0px;
}


/*============== Map and locations =====================*/

.mapInfoWindow .select {
	margin-top: 5px;
}

/*=============== Calendar Page =======================*/

.calendar-container {
	padding-top: 40px;
	min-height: 400px;
}

.calendar-tooltip  .tooltip-inner {
	background-color: #ffffe6;
	color: #000;
	border: 1px solid #000;
}

.calendar-tooltip  .tooltip-inner {
	text-align: left;
	padding: 10px 15px;
	}

.calendar-tooltip  .tooltip-inner h3 {
	text-align: left;
	font-size: 1rem;
	margin-bottom: .2rem;
	}

.calendar-tooltip  .tooltip-inner ul {
	list-style: none;
	padding-inline-start: 0px;
	margin-block-end: 0;
}

.calendar-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    align-items: center;
}

.calendar-controls .month-display {
	order: 1;
	display: inline-flex;
	}

.calendar-controls .month-selector {
	min-width: fit-content;
	margin-right: 10px;
	}
	
.calendar-controls .month-label {
	min-width: fit-content;
	padding-top: 5px;
}

.calendar-controls .month-label h3 {
	font-size: 1.5rem;
	}

.calendar-controls .show-checks {
	padding: 20px 10px;
	order: 2;
	}
	
.calendar-controls .add-buttons {
	order: 3;
}

.calendar-controls .add-buttons .button-label {
	display:none;
	}


.calendar-header, .calendar-day {
	position: relative;
    width: 100%;
    flex: 0 0 14.2857143%;
    max-width: 14.2857143%;
}

.calendar-day {
	height: 200px;
	border: solid 1px #ccc;	
	padding-right: 15px;
    padding-left: 15px;
}

.calendar-day.selected {
	border: 3px solid var(--primary); 
	}

.calendar-day #add-assignment {
	position: absolute;
    top: 2px;
    right: 2px;
}

.calendar-header {
	padding: 0 5px;
}

.calendar-day.inactive {
	background-color: #eee;
}

.calendar-day.today {
	background-color: #cceeff;
}

.calendar-day.ui-droppable-hover {
	background-color: #ccc;
}

.calendar-day.end-zone {
	max-width: 100%;
    flex: 0 0 100%;
    height: 30px;
    text-align: center;
    font-size: .9rem;
    font-style: italic;
    padding-top: 4px;
}

.calendar-day.backlog {
	max-width: 100%;
	flex: 0 0 100%;
	height: 100px;
	text-align: center;
    font-size: .9rem;
    font-style: italic;
    padding-top: 30px;
    background-color: var(--info);
    margin-top: 20px;
}

.calendar-day h4 {
	font-size: 1.25rem;
	margin-left: -10px;
	margin-top: 2px;
}

.calendar-header h4 {
	font-size: 1rem;
	text-align:center;
	overflow: hidden;
}

.calendar-item {
	margin: 0 -15px 1px -15px;
    padding: 2px 5px;
    background-color: var(--primary);
    color: var(--white);
    font-size: .9rem;
    display: flex;
	justify-content: space-between;
}

.calendar-item.item-type-photographs {
	background-color: #0056b3;
}

.calendar-item.item-type-event-appearance {
	background-color: var(--pink);
}

.calendar-item.item-type-task {
	background-color: var(--info);
}

.calendar-item.item-type-news {
	background-color: #2f4f4f;
}

.calendar-item.unassigned, .calendar-item.new {
	background-color: #66b0ff;
}

.calendar-item.item-type-news.unassigned {
	background-color: #aaaaaa;
	}
	
.calendar-item.item-pub-date {
	background-color: var(--orange);
	}

.calendar-item.item-pub-date.complete {
	background-color: var(--green);
	}
	
.calendar-item.item-due.complete {
	background-color: green;
	}

.calendar-item.item-pitch-date {
	background-color: var(--indigo);
	}

.calendar-item.item-due.placeholder-complete {
	background-color: green;
	}
	
.calendar-item.item-due.overdue {
	background-color: var(--warning);
	}
	
.calendar-item.item-due.editing {
	background-color: lightgreen;
	}
	
.calendar-item.item-due.ready {
	background-color: var(--green);
}

.calendar-item.item-due.editing a {
    color: darkgreen;
}

.calendar-item.item-type-other {
	background-color: var(--purple);
	color: var(--color-secondary);
	}

.calendar-item.item-pub-date.unassigned {
	background-color: #fdab68
}

.calendar-item .item-handle {
	width: 10px;
	border-left: 1px solid #fff;
	writing-mode: vertical-lr;
    text-align: center;
	}
	
.calendar-item .item-handle:hover {
	cursor: move;
	}
	
.calendar-item .item-label {
	white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 10px);
    overflow: hidden;
}

.calendar-item .item-label a {
		color: var(--color-secondary);
	}


.calendar-item.ui-draggable-dragging {
	z-index: 10;
}

.calendar-container .backlog button {
	    float: right;
    margin-top: -40px;

}

.calendar-row {
	position: relative;
}

 .list-item {
	padding: 15px 5px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	}

.list-view .filter-selector {
	padding-bottom: 10px;
}

.list-view .date-selector {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	}



.list-view .filter-selector label, .list-view .date-selector label {
	margin-right: 10px;
	width: 60px;
	text-align: right;
}

.list-view .filter-selector .form-control {
	width: calc(100% - 70px);
}

.list-view .date-selector .form-inline {
	margin-bottom: 10px;
	flex-wrap: nowrap;
} 

.list-view .date-selector .form-control {
	width: calc(100% - 70px);
}

.list-view .date-selector button {
	margin-left: 10px;
	position: relative;
    top: -4px;
}

.assignment-list .item-header {
	display: flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
}

.assignment-list .list-item {
	position: relative;
	min-height: 100px;
}


.assignment-list .list-item .badge {
	width: 90px;
	color: #fff;
    background-color: #17a2b8;
    padding: .5em .25em;
	}
	
.assignment-list .list-item .badge-published, 	.assignment-list .list-item .badge-complete {
	background-color: var(--success);
	}

.assignment-list .list-item .badge-published:before, .assignment-list .list-item .badge-complete:before {
	font-family: "Font Awesome 5 Free";
	content: '\f058';
	font-weight: 400;	
	padding-right: 4px;
	}

.assignment-list .list-item .badge-rejected {
	background-color: var(--danger);
	}

.assignment-list .list-item .badge-pitched {
	background-color: var(--indigo);
	}

.assignment-list .list-item .badge-rejected:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;	
	content: '\f00d';
	padding-right: 4px;
	}

.assignment-list .list-item .badge-pitched:before {
	font-family: "Font Awesome 5 Free";
	content: '\f0e0';
	font-weight: 400;	
	padding-right: 4px;
	}

.assignment-list .list-item .badge-assigned {
	background-color: var(--blue);
	}

.assignment-list .list-item .badge-assigned:before {
	font-family: "Font Awesome 5 Free";
	content: '\f303';
	font-weight: 900;	
	padding-right: 4px;
	}

.assignment-list .list-item .badge-submitted {
	background-color: var(--teal);
	}

.assignment-list .list-item .badge-submitted:before {
	font-family: "Font Awesome 5 Free";
	content: '\f017';
		font-weight: 400;	
	padding-right: 4px;
	}

	
.assignment-list .list-item .item-header h3 {
	margin-bottom: 0;
	font-weight: bold;
	font-size: 1.2rem;
	order: 1;
	padding-right: 1rem;
	}

.assignment-list .list-item .item-header .badge-group {
	order: 2;
	max-width: 90px;
	}

.assignment-list .list-item .item-header .rate-group {
	order: 3;
	width: 90px;
	position: absolute;
	right: 0;
	top: 36px;
	text-align: right;
	}

.assignment-list .btn-edit {
	margin-left: 2px;
	font-size: .9rem;
	padding: 0.2rem 0.4rem;
}

.assignment-list .list-item label {
	margin-bottom: 0;
	font-weight: bold;
	}
	
.assignment-list .list-item .date-list {
	    margin: 5px 0;
	}

.assignment-list .list-item .date {
	font-size: .9rem;
}

.assignment-list .list-item .publication {
	font-style: italic;
	}

.assignment-list .pay-status-group {
	background-color: var(--color-primary);
	color: var(--color-primary-bg);
	padding: 0.25rem 0.5rem;
    margin: 0 -15px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
	}

.assignment-list .pay-status-group .label {
	margin-right: 20px;
}

.assignment-list .pay-status-group .label i {
	margin-right: 10px;
	}
.backlog-container {
	padding-top: 40px;
    min-height: 400px;
}

#assignment-list {
	padding-top: 20px;
    min-height: 400px;
}

.backlog-container .assignment-card {
	margin-bottom: 3px;
}

.backlog-container .assignment-card .card-body {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: start;
}


.backlog-container .badge-Assigned {
	background-color: var(--success);
	color: var(--color-secondary);
	}

.backlog-container .badge-Pitched {
	background-color: var(--secondary);
	color: var(--white);
}

.backlog-container .badge-Rejected {
	background-color: var(--danger);
	color: var(--color-secondary);
}

.backlog-container h4 {
	flex-basis: 60%;
	font-size: 1.25rem;
}

.backlog-container .description {
		flex-basis: 100%;
	}


.calendar-page #entityEditFormAnchor .control-label {
	text-align:left;
	padding-left: 20px;
}

#calendar-config-modal .form-check  {
	margin-top: 10px;
}

#calendar-config-modal .help-text  {
	padding-left: 25px;
	font-size: .8rem;
}

#assignmentForm #assignment-paymentTerm::after {
	content: ' days';
	margin-top: 4px;
}

@media (max-width: 768px) {
	.calendar-container {
		max-width: 100%;
	}
}

@media (min-width: 576px) {
	.calendar-page #entityEditFormAnchor .control-label {
		text-align:right;
		padding-left: 0;
	}
}

@media (min-width: 768px) {
	
	.calendar-header h4 {
		font-size: 1.25rem;
	}
	
	.list-view .filter-selector .form-control {
		max-width: 200px;
	}
	
	
	.assignment-list .item-header {
    	justify-content: flex-start;
 	}
 	
 	.assignment-list .item-body {
    	margin-left: 110px;
 	}
	
	.assignment-list .list-item .item-header .badge-group {
		order: 2;
		margin-right: 20px;
	}
	.assignment-list .list-item .badge {
		order: 1;
		padding: .5em .25em;
	}
	
	.assignment-list .list-item .item-header .rate-group {
		order: 1;
		left: 0;
		top: 32px;
	}
	
	.assignment-list .list-item .item-header h3 {
		order: 3;
	}
	
	.backlog-container .badge {
    	min-width: 120px;
    	padding: 10px;
	}
	
	.backlog-container h4 {
		flex-basis: 80%;
		font-size: 1.25rem;
	}
}

@media (min-width: 992px) {
	.calendar-controls .add-buttons .button-label {
		display: revert;
	}
}

/*=============== Contact Page =======================*/

.contact-container {
	margin-top: 40px;
}

.contact-container h1 {
	margin-bottom: 30px;
	}
	
.contact-container form {
	margin: 30px 0;
	}

.contact-container form label {
	font-size: .9rem;
}

.contact-container form .g-recaptcha {
	margin-bottom: 15px;
}

.contact-container .contact-confirmation {
	min-height: 400px;
}

.contact-container .contact-mailto {
	min-height: 300px;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.contact-container .mailto-link {
	padding: 20px 0;
}

@media screen and (min-width: 768px) {

	 .contact-container {
		width: 560px;
	}
}

@media screen and (min-height: 768px) {
	.contact-container .contact-mailto {
		min-height: 60vh;
	    padding-top: 20vh;
	    padding-bottom: 0;
	}
}

/* ============= Events Page & CalendarEvent Entity Page  View ======================== */

.event-buttons {
	position: absolute;
    top: -20px;
    right: 5px;
}

.events-container, .calendarEvent-view-container {
	margin-top: 2rem;
	position: relative;
}

.events-container h1 {
	margin-bottom: 1rem;
	}


.events-container h2 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	}


.events-container h3 {
	font-size: 1.25rem;
	}

.events-container h3 .btn-edit {
	font-size: .75rem;
	margin-left: .5rem;
	}

.events-container .content-display.content {
	margin-right: 95px;
}

.events-container .events-closer {
	margin: 1rem 0 2rem 0;
}

.events-container .events-list {
	max-width: 576px;
    margin: 0 auto;
    min-height: 200px;
}

.events-container .event-link {
	margin-top: 1rem;
	}
	
.events-container .event-list-item {
	border-bottom: 1px solid #ccc;
	padding: .5rem 0 1rem 0;
	margin: .5rem 0 1rem 0;
}

.events-container .event-list-item .coverImage, .calendarEvent-view-container .coverImage {
	margin: 1rem 0 1rem 0;
}


.events-container .event-list-item .coverImage img, .calendarEvent-view-container .coverImage img {
	width: 100%;
	height: auto;
}

.events-container .event-date-display, .events-container .event-location, .events-container .event-address,
.calendarEvent-view-container .event-date-display, .calendarEvent-view-container .event-location, .calendarEvent-view-container .event-address {
	font-style: italic;
	font-size: .9rem;
	}

.events-container .event-description, .calendarEvent-view-container .event-description {
	margin-top: .5rem;
}

.calendarEvent-view-container .title-alt {
	display: none;
}

.calendarEvent-view-container .event-content-block {
	border-top: 1px solid #ccc;
	margin-top: 2rem;
	padding-top: 2rem;
	}

@media screen and (min-width: 768px) {
	
	.events-container {
		max-width: 738px;
	}
	
	.events-container h2 {
		margin-left: -2rem;
		}
	
	.calendarEvent-view-container .image-block {
		order: 1
	}
	
	.calendarEvent-view-container .event-content-block {
		order: 2
	}
	
	.calendarEvent-view-container .coverImage {
		margin: 0;
	}
	
	.calendarEvent-view-container  {
		margin-top: 5rem;
	}
	.calendarEvent-view-container .event-location {
		margin-top: 1.5 rem;
	}
	
	.calendarEvent-view-container .event-description {
		margin-top: 3rem;
	}
	
	.calendarEvent-view-container .event-link {
		margin-top: 1.5rem;
	}
	
	.calendarEvent-view-container .title-alt {
		display: block;
		margin-bottom: 3rem;
	}	
	
	.calendarEvent-view-container h1 {
		display: none;
	}
}

/*============== Feature Styles =====================*/

.featureContainer {
	max-width: 800px;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}	

.featureContainer h1 {
	font-size: 20px;
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 0px;
}

.featureContainer h2 {
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	}

.featureContainer h3 {
	font-size: 1.1rem;
}

.featureContainer p {
	margin-bottom: 20px;
}

.featureContainer .control-block {
	margin-bottom: 5px;
	width: 100%;
}

.featureContainer .author {
	color: var(--color-primary);
	-webkit-margin-after: 0em;
	text-transform: uppercase;
}

.featureContainer .adblock {
	margin-top: 20px;
    text-align: center;
}

.featureContainer .adinner h1 {
	text-transform: none ;
	margin-bottom: 5px;
	color: var(--color-primary);
	font-size: 24px;
	
}

.featureButtonGroup {
	margin-top: 10px;
	display: flex;
	flex-wrap:wrap;
	flex-direction: row;
	justify-content: space-between;
	
}

.featureLaunch {
	text-align: center;
	max-width: 570px;
	margin: 50px 0px 50px 0px;
}

.featureNav {
	text-align: center;
	margin: 20px 0px 50px 0px;
}

.featureContent {
	min-height: 100px;
	margin-bottom: 20px;
	margin-top: 15px;
	}

	
.featureContent blockquote {
	padding: 10px 20px 0 20px;
    margin: 0 0 0px;
    font-size: 11pt;
    border-left: 5px solid #eee;
    -webkit-margin-after: 0;
}

.featureContent .calendar-event-summary {
    margin: 1rem 0;
    font-weight: bold;
    border-left: solid 4px var(--color-highlight);
    padding-left: 1rem;
}

.featureContent .callout {
	padding: 10px 15px;
    margin: 0;
    font-size: 1rem;
    border: 3px solid #212529;
    -webkit-margin-after: 0;
    background-color: #eee;
}

.featureContent .callout p {
	margin-bottom: 0;
}

.featureContent .callout ul {
	margin-top: .5rem;
	padding-inline-start: 20px;
}

.featureContent .callout li {
	margin-bottom: .5rem;
}

.featureContent .feature-tags label {
	font-weight: bold;
	
}

.featureContent .feature-tags .badge {
	margin-left: 4px;
	padding: .6em 1em;
}

.header-block .badge  {
	padding: .6em 1em;
}


.featureContent .feature-tags .badge:hover, .featureContent .feature-tags .badge:focus {
	background-color:#6c757d;
}

.header-block .badge a, .header-block .badge a:visited {
	color: var(--color-secondary);
	}

.header-block .badge a:hover, .header-block .badge a:focus {
	text-decoration: none;
	}

.featureContainer .bookCover {
	text-align: center;
	margin: 0px 0px 20px 0px;
}

.featureContainer .bookCover img {
	max-width: 100%;
	max-height: 400px;
}

	
.featureContainer .collectionItem {
	border: solid 1px;
	border-color: #cccccc;
	padding: 10px;
	margin-bottom: 5px;
	overflow: auto;

}

.featureContainer .coverImage {
	flex-basis: 100%;
	order: 1;
}
	
.featureContainer .coverImage img {
	max-width: 100%;
}

.featureContainer #openingContent {
	order: 2;
}

.finder-feature-content #openingContent {
    order: revert;
}


.featureContainer #listButtons {
	text-align: center;
	order: 3;
	width: 100%;
}

.featureContainer #mapwrapper {
	order: 4;
}

.featureContainer #locationList {
	order: 4;
	
}

.featureContainer #closingContent {
	flex-basis: 100%;
	order: 6;
}

.featureContainer #closingContent {
	min-height: 0;
	}

.featureContainer .coverImage .caption {
	margin-top: 5px;
	margin-bottom: 10px;
	}

.featureContainer .description {
	margin-top: 10px;
}

.featureContainer .header-block {
	order: 0;
	flex-basis: 100%;
	margin-top: 30px;
}

.featureContainer .modified-date {
	margin-top: -15px;
	font-style: italic;
}

.alt-postdate {
	display: none;
}

.featureContainer .video {
	width: 280px;
	height: 200px;
	margin-top: 10px;
}

.featureContainer iframe {
	max-width: 100%;
	}

.featureContainer .sub-only {
	
	height: 150px;
	overflow-y: hidden;
	position: relative;
}

.featureContainer .sub-only-overlay {
	height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    background-image: linear-gradient(to bottom , transparent, white);
}

.feature-sidebar-card {
	width: 100%;
	order: 7;
	margin-bottom: 1px;
	border: none;
}

.feature-sidebar-card .card-body {
	border: none;
	}

.feature-sidebar-card .card-widget, .feature-sidebar-card .card-ad {
	border-top: 1px solid #ccc;
	margin-top: 20px;
	}

.feature-sidebar-card .card-widget {
	max-height: 600px;
}

.feature-sidebar-card .card-ad.ad-2 {
	/* for small screens, we hide the second ad */
	display: none;
}

.feature-sidebar-card .card-title {
	margin-bottom: 10px;
	}
	
.feature-sidebar-card .card-title.subscriber-only::after {
	content: 'Subscriber Only';
    font-size: .7rem;
    background-color: var(--warning);
    margin-left: 6px;
    padding: 2px 4px;
    border-radius: 6px;
    text-transform: uppercase;
	}

	
.featureContainer #locationList {
	margin: 0 auto;
	max-width: 576px;
}

.featureContainer #locationList h3 {
	font-size: 1.25rem;
}
	
.featureContainer #locationList .card {
	border: none;
	}

.feature-tags {
	flex-basis: 100%;
	margin-bottom: 30px;
}

.feature-widget-item {
	border: none;
	}

.feature-widget-item .card-body {
		padding: .5rem 0;
	}
	
.feature-widget-item .card-title {
	margin-bottom: 0;
	}

#feature-list {
	margin: 10px 0 10px 35px;
}

.feature-list-filter {
	/* filtering not enabled yet */
	display: none;
}

.feature-list-header {
	padding-top: 30px;
	width: 100%;
}

.feature-list-header h1 {
	margin-bottom: 20px;
	width: 100%;
	border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

@media screen and (min-width: 450px) {

	.featureContainer .video {
		width: 400px;
		height: 260px;
		margin-top: 10px;
	}
}

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

	.featureContainer .video {
		width: 500px;
		height: 350px;
		margin-top: 10px;
	}
}	
	

@media screen and (min-width: 768px) {
	.featureBodyText {
		width: 570px;
		font-size: 12pt;
		margin-left: 0;
		margin-right: 0;
	}
	
	.feature-sidebar-card {
 	   max-width: 570px;
	}
	
	.featureContainer h1 {
		font-size: 32px;
		text-transform: none;
	}
	
	.featureContainer h2 {
		font-size: 20px;
	}

	.featureContainer h3 {
		font-size: 1.17rem;
	}
	
	.featureContainter .coverImage {
		flex-basis: 100%;
	}
	
	.featureContainer .coverImage img {
		max-width: 570px;
	}
	
	.featureContainer .coverImage .caption {
		max-width: 570px;
	}
	
	.featureContainer .bookCover {
		float: left;
		margin-right: 10px;
	}
	
	.condensed .bookCover {
		float: left;
		margin-right: 10px;
		min-width: 150px;
	}
	
	.featureContainer .bookCover img {
		min-width: 200px;
		max-width: 200px;
		max-height: 300px;
	}
	
	.featureContainer .video {
		width: 570px;
		height: 400px;
	}
	

	.condensed .bookCover img {
		max-width: 150px;
		min-width: 0px;
		max-height: 150px;
	}
	
	.condensed p {
		font-size: 14px;
	}
}

@media screen and (min-width: 1200px) {
	.featureContainer {
		width: 1170px;
		max-width: none;
	}
	
	.feature-sidebar-card {
 	   max-width: 360px;
 	   margin-left: 40px;
 	   order: 5;
 	   margin-top: 100px;

	}
	
	.featureContainer #listButtons {
		flex-basis: 100%;
		text-align: left;
	}
	
	.featureContainer #locationList {
    	width: 576px;
	}

	.featureContainer #closingContent {
		order: 6;
	}
	
	.feature-sidebar-card .card-ad.ad-2 {
		/* for small screens, we hide the second ad - show on large */
		display: inherit;
	}
}

/* recipe styling */

.featureContainer .recipe {
	border-left: solid 5px #eeeeee;
    padding: 10px;
}

.featureContainer .recipe h3 {
	text-transform: uppercase;
    font-size: 16px;
    color: var(--color-highlight);
}

.featureContainer .servings {
	display: block;
	margin-bottom: 10px;
}

.featureContainer .ingredients {
	display: block;
	font-size: 16px;
    font-style: italic;
}

/*============== News Page =====================*/

.news-page-list .newsItem {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.news-page-list .newsItem h3 {
	margin-bottom: .1rem;
}

.news-page-list .newsItem .author {
	font-size: .9rem;
	margin-bottom: .5rem;
}

.news-page-list .newsImage {
	padding-right: 10px;
	padding-top: 10px;
}

.news-page-list .newsImage img {
	display: block;
    max-height: 200px;
    width: 100px;
}

@media screen and (min-width: 768px) {
	.news-page-list .newsItem {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.news-page-list .newsImage {
		padding: 0;
		height: 200px;
		overflow-y: hidden;
		overflow-x: hidden;
	}
	
	.news-page-list .newsImage img {
		display: block;
    	width: 100%;
    	max-height: none;
	}
	
	.news-page-list .newsItem h3 {
		font-size: 1.25rem;
	}
}

@media screen and (min-width: 992px) {
	.news-page-list .newsImage {
			height: 240px;
			margin-bottom: 10px;
		}

	
}


/*============== Authoring Page =====================*/

.authoring-container {
	max-width: 1260px;
}

.authoring-container .tab-content .input-group {
	    margin-bottom: .5rem;
    }

.authoring-container .authoring-tabs {
	display: none;
}

.authoring-container .actions button {
	max-height: 32px;
}

.authoring-container .authoring-tab-select {
	margin: 1rem 0;
}

@media screen and (min-width: 992px) {

	.authoring-container {
		display: flex;
		padding-top: 40px;
	}
	
	.authoring-container .tab-content {
	    min-width: calc(100% - 260px);
    }
	
	.authoring-container .authoring-tabs {
		display: block;
		max-width: 200px;
		margin: 10px 20px 0 0;
	}
	
	.authoring-container .authoring-tabs .nav-item {
		width: 100%;
	}
	
	.authoring-container .authoring-tabs .nav-tabs {
		margin-bottom: none;
	}
	
	.authoring-container .authoring-tabs .nav-item a {
		border: none;
		border-radius: 0;
		color: #000;
	}
	
	.authoring-container .authoring-tabs .nav-item a.active {
		border: 1px solid #ccc;
    	background-color: #eee;
    	border-radius: 4px;
		color: #000;
	}
	
	.authoring-container .authoring-tabs .nav-item a:hover {
    	background-color: #eee;
    	border-radius: 4px;
		color: #000;
	}
	
	.authoring-container .authoring-tab-select {
		display: none;
	}

}


/* =========== Collections =============================*/

.collection-header {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.collection-header .featureButtonGroup {
	max-width: 250px;
}

.collection-card .card-image {
	width:100%;
	margin: 10px auto;
	text-align: center;
	height: 400px;
}

.collection-card .card-image img {
	max-height: 400px;
	}

.collection-card .buy-now, .collection-card .read-more	 {
	text-align: center;
}


/* ============= Page Collections ==================== */


.page-collection-container .card-body {
	padding: 0 .5rem;
	margin-top: 1rem;
}

.page-collection-container .email-card {
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.page-collection-container .email-card .feature-container {
	padding-left: 0;
	padding-right: 0;
}

.page-collection-container .coverImage img {
	width: 100%;
	height: auto;
}

.page-collection-container .email-collection-inner {
	max-width: 575px;
	margin: 10px auto;
}

.page-collection-container .email-collection-inner h2 {
	font-size: 1.33rem;
}

.page-collection-container .email-collection-inner .card {
	border: none;
	margin-bottom: 10px;	
}

.page-collection-container .email-collection-inner .card-title {
	text-decoration: none;
	font-size: 1.1rem;	
}

.page-collection-container .email-collection-inner .media-inner {
	padding: 0;
}

.page-collection-container .newsletter-title h2 {
	font-size: 1.75rem;
}

.page-collection-main {
	margin-top: 20px;
}

.page-collection-email-name {
	border: 1px solid #ccc;
	padding: 10px 20px;
	background-color: #eeee;
	display: flex;
	flex-wrap: none;
	justify-content: space-between;
	align-items: center;
	}

.page-collection-email-name p {
	font-size: 1.1rem;
	margin-bottom: 0;
}

.page-collection-config {
	min-height: 220px;
	width: 250px;
	border: solid 1px #eee;
	position: absolute;
	left: auto;
	top: auto;
	z-index: 100;
	background-color: white;
    padding: .25rem .5rem;
    display: none;
   }

.page-collection-config-header {
	display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.page-collection-config-header h4 {
	font-size: 1.25rem;
	margin-top: .25rem;
	}
	
.page-collection-config .config-buttons {
	display: flex;
	justify-content: flex-end;
}	
	
		
@media screen and (min-width: 992px) {
	.page-collection-main {
		margin-top: 50px;
	}
	}

/* ============= Product Display =======================*/

.product-action {
	margin: 20px auto;
	text-align: center;
}

.product-image {
	width: 100%;
	text-align: center;
	padding: .5rem;
}

.product-image img {
	max-width: 100%;
	}

.card-product .card-title {
	margin-top: 20px;
}

.card-product .card-image {
	text-align: center;
}

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

.productModal {
	overflow: auto;
}

.productModal .author {
	text-transform:uppercase; 
}

.productModalImage {
	text-align: center;
}

.productModalImage img {
	max-width: 100%;
	max-height: 400px;
}

@media screen and (min-width: 768px) {
	.productModalImage {
	float: left;
	margin-right: 10px;
}
}


/* --------------- Legal/Static Tenant Content -----------------*/

.tos h2 {
	font-size: 1.5rem;
	margin-top: 2rem;
}

.legal-container {
	padding-top: 30px;
	padding-bottom: 50px;
	max-width: 640px;
}

.terms {
	display: none;
}

/*============== Location Carousel =====================*/
.carousel-inner .item img {
		height: 200px;
		margin: auto;
	}

@media screen and (min-width: 600px) {
	.locationCarouselItem {
		width: 100%;
		height: 400px;
	}
	
	.locationInfo {
		max-width: 570px;
		margin: 10px auto 10px auto;
	}
	
	.locationCarouselItem .featureContent {
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		min-width: 600px;
	}

	
	.carousel-inner .item img {
		height: 100%;
		max-width: 100%;
		margin: auto;
	}
}

.caption {
	font-style: italic;
    font-size: 12px;
	position: relative;
}



/* feature-specific map styling */

.featureContainer #mapcanvas {
	min-height: 450px;
	width: 100%;
}

.featureContainer #mapwrapper {
	min-height: 450px;
	width: 100%;
}

.featureContainer .loc-image {
	border: none;
}

	
.featureContainer .caps {
	text-transform:uppercase;
	margin-bottom: 0px;
	color: var(--color-highlight);
}

.aboutAuthor {
	flex-basis: 100%;
	margin-top: 15px;
}

.aboutAuthor h3 {
	margin-top: 5px;
    margin-bottom: 10px;
    -webkit-margin-before: 4px;
    -webkit-margin-after: 10px;	
}

.aboutAuthor p {
	-webkit-margin-before: 0px;
	-webkit-margin-after: 1em;
}

#listButtons {
	margin-bottom: 10px;
	text-align: center;
}

#locationList ol {
	-webkit-padding-start: 10px;
}

.locationList li {
	margin-bottom: 10px;
	font-size: 1.1rem;
}

#btnShowBigMap {
	/* we show "big map" buttons only on large screens, since on small ones it will by
	 * default be full width of screen
	 */
	display: none
}

@media screen and (min-width: 900px) {
	#btnShowBigMap {
		display:inline-block;
	}
	
	.locationList li {
		font-size: 1.17rem;
	}
}

/* related reading */

.relatedReading {
	
	margin-top: 30px;
	margin-bottom: 10px;
	border-top: 1px solid var(--color-highlight);
	padding-top: 10px;
		
}

.relatedReading h3 {
	color: var(--color-highlight);
	margin-bottom: 20px;
}

.relatedReading .feature-block {
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 20px;
}

.relatedReading .headline {
	font-size: 1.25rem;
	color: var(--color-primary);
	margin-top: 0px;	
}

.relatedReading .coverImage {
	order: 0;
	margin-right: 10px;
	max-width: 40%;
    height: max-content;
}

.relatedReading .header-block {
	order: 1;
	margin-top: 0
}

.relatedReading .header-block p {
	margin-bottom: 5px;
}

@media screen and (min-width: 576px) {
	.relatedReading .coverImage {
		max-width: 120px;
	}
}

@media screen and (min-width: 1200px) {
	.relatedReading .coverImage {
		max-width: 120px;
	}
}

/* ============== Mailing List Manager & Newsletters ==================== */


.newsletters-container {
	min-height: 300px;
}

.newsletter-panel {
	position: relative;
}

@media screen and (min-height: 600px) {
	.newsletters-container {
		min-height: 330px;
	}
}

@media screen and (min-height: 760px) {
	.newsletters-container {
		min-height: 440px;
	}
}

@media screen and (min-height: 960px) {
	.newsletters-container {
		min-height: 700px;
	}
}

.newsletters-none {
	padding: 20px;
	border: 1px solid #ccc;
	max-width: 600px;
    margin: 60px auto;
}

.newsletters-container {
	padding-top: 30px;
}

.newsletter-card {
	margin-bottom: 5px;
	}

.newsletter-card:hover {
	cursor: pointer;
}

.newsletter-card.selected {
	background-color: #d2f4f9;
}

.newsletter-card h3 {
	font-size: 1.5rem;
	}

.newsletter-card .card-text {
	margin-bottom: 1.8rem;
}

.newsletter-card .custom-checkbox {
	position: absolute;
    bottom: 10px;
    font-size: .9rem;
}

.newsletter-buttons {
	margin-bottom: 20px;
	text-align: center;
}

.newsletter-buttons .btn {
	width: 100%;
	}


.newsletter-row {
	margin-left: -10px;
	margin-right: -10px;
}

.newsletters-heading {
	margin-bottom: 40px;
}


.newsletter-select-msg {
	margin-bottom: 10px;
	margin-top: 30px;
}

#newsletter-message {
	margin-top: 15px;
}

#newsletter-results-panel {
	max-width: 640px;
    margin: 100px auto;
    display: none;
}

#newsletter-results-message {
	margin: 30px 10px;
}

@media screen and (min-width: 768px) {
	.newsletter-card {
		max-width: calc(50% - 10px);
		margin: 4px;
	}
	
	.newsletter-buttons {
		text-align: left;
	}

	.newsletter-buttons .btn {
		min-width: 200px;
		width: auto;
	}
}

.mailing-list-container  {
	margin-top: 10px;
}

.mailing-list-container .subscriber-list .remove-link {
	margin-left: 10px;
	font-size: .8rem;
    color: var(--color-danger);
}


/* ============== Newsletter & Issue Editor ================================ */

.newsletter-editor-container {
	margin-top: 30px;
	min-height: 500px;
}

.newsletter-editor-container .newsletter-list {
	margin-top: 20px;
}

.newsletter-editor-container .newsletter-list h3 {
	font-size: 1.25rem;
}

#newsletter-anchor .card {
	margin-bottom: .25rem;
	max-width: 600px;
}

#newsletter-anchor {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #ccc;
	min-height: 450px;
}

#newsletter-anchor .card-body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-right: .5rem;
}

#newsletter-anchor .badge {
	min-width: 80px;
}

#newsletter-anchor .badge-Delivered {
	background-color: var(--success);
}

#newsletter-anchor .badge-Scheduled {
	background-color: var(--info);
}

#newsletter-anchor .badge-Sending {
	background-color: var(--warning);
}

#newsletter-anchor .badge-Error {
	background-color: var(--danger);
}

#newsletter-anchor .issue-description {
	flex-basis: 100%;
	margin-top: .33rem;
}

#newsletter-anchor .issue-actions {
	flex-basis: 100%;
	position: relative;
	top: 15px;
}

#newsletter-anchor .issue-working {
	flex-basis: 100%;
	position: relative;
	top: 15px;
	display: none;
	margin-top: 5px;
	margin-bottom: 0;
}

#newsletter-anchor .issue-actions .btn-sm { 
	font-size: 12px;
}

#newsletter-anchor .newsletter-sub-link {
	margin-left: 10px;
	text-decoration: underline;
	font-size: .9rem;
}

#issue-edit-panel {
	border-top: 1px solid #ccc;
    padding-top: 20px;
}

#issue-edit-panel, #issue-list-panel {
	min-height: 500px;
	margin-bottom: 40px;
}

#issue-edit-panel #issue-label h3 {
	font-size: 1.5rem;
}

#issue-edit-panel #issue-label P {
	font-style: italic;
}

#issue-edit-panel #btnNewPage {
	position: relative;
	top: -36px;
    left: -15px;
}

#issue-edit-panel #searchPage .input-group {
	margin-bottom: 5px;
}

#issue-edit-controls {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;

}

#sendModal #start-time-datepicker {
	max-width: none;
}

/* ============== Paywall Alert, Stripe and Metering UI ==================== */


.paywall-alert {
	padding: 20px;
	margin: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	text-align: center;
	max-width: 576px;
}

.paywall-alert-counts {
	font-size: .9rem;
	margin-top: 1rem;
	}

.paywall-alert-buttons {
	text-align:center;
	padding-top: 30px;
	}
	
.paywall-alert-login {
	margin-top: 20px;
}

.paywall-alert-login p {
	margin-block-end: .25em;
	font-size: .9rem;
}


.meter-stripe {
	width: 100%;
	background-color: #ccc;
	position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    z-index: 100;
	}
	
.meter-stripe-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 15px 10px 15px;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}

.meter-message {
	font-weight: bold;
	flex-basis: 100%;
	text-align: center;
}

.meter-message .tally, .meter-message .limit {
	color: var(--info);
}


.meter-content {
	flex-basis: 60%;
	padding-top: 10px;
	font-size: .9rem;
}

.meter-buttons {
	flex-basis: 40%;
	text-align: right;
	padding-top: 10px;
}

@media screen and (min-width: 576px) {

	.meter-message {
		text-align: left;
	}
	
	.meter-message .close {
		position: absolute;
		top: 5px;
		right: 5px;
	}
	
	.meter-stripe-wrapper {
		padding-bottom: 0;
	}
	
	.meter-buttons .btn {
		position: relative;
		top: -15px;
	}
	
}

@media screen and (min-width: 768px) {
		.meter-message .close {
			display: none;
			}
}



/*============== RECIPE STYLING =====================*/

.recipeContainer {
	max-width: 1200px;
}

.recipeContainer .ingredients {
	border-top: solid 1px #cccccc;
	padding-top: 10px;			
}

.recipeContainer .ingredients ul {
	list-style-type: none;
	font-style: normal;
    padding-left: 5px;
	}
	
.recipeContainer .ingredients li {
	font-weight: 300;
	font-size: 13pt;
	margin-bottom: 10px;
	}

.recipeContainer .ingredients h2, .recipeContainer .instructions h2 {
	font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: 12pt;
    color: #344866;
}

.recipeContainer .instructions {
	margin-bottom: 30px;
	margin-top: 20px;
	border-top: solid 1px #cccccc;
	padding-top: 10px;		
	}

.recipeContainer .instructions ol {
	padding-left: 35px;
	  list-style: none;
	}
	
.recipeContainer .instructions li {
	margin-bottom: 10px;
	font-size: 12pt;
	}

.recipeContainer .instructions li span {
	float: left;
    position: absolute;
    left: 20px;
    font: bold 12px sans-serif;
    text-align: center;
    color: var(--color-secondary);
    line-height: 18px;
    background-color: #344866;
	width: 20px;
    height: 20px;
    border-radius: 10px;
    padding-top: 1px;
    
}

.recipeContainer .coverImage {
	max-width: 800px;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {

	.recipeContainer .ingredients, .recipeContainer .instructions {
		margin-top: 30px;
	}
	
	.recipeContainer .coverImage img {
		max-width: 800px;
		height: auto;
	}
	
}

.recipeHeader {
	max-width: 800px;
	margin: 0px auto;
}

.recipes h1 {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #cccccc;
}



/* --------------- Search Page -----------------*/

.search-container {
	min-height: 400px;
}

.search-container .search-card {
	margin-top: 40px;
}

.search-container .search-results {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-container .search-results .homePanel.status-Draft:before, .search-container .search-results .homePanel.status-Submitted:before, .search-container .search-results .homePanel.status-Scheduled:before {
	content: 'Draft';
    color: #fff;
    background-color: var(--info);
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: .5rem;
	}

.search-container .search-results .homePanel.status-Scheduled:before {
	content: 'Scheduled';
    background-color: var(--success);
}

.search-container .search-results .homePanel.status-Submitted:before {
	content: 'Submitted';
    background-color: var(--teal);
}


.search-container .search-results .homePanelInner:hover {
	opacity:.8;
	}

.search-container .search-results .author {
    text-transform: uppercase;
    font-size: 12px;
    padding-right: 10px;
    margin-right: 10px;
    border-right: solid 1px #ccc;
}

.search-container .search-results .description {
	color: var(--color-text);
}


@media screen and (min-width: 768px) {
	
	#main.search-container {
 	   margin-top: 120px;
	}
	
	.search-container .search-results .homePanel.status-Draft:before, .search-container .search-results .homePanel.status-Submitted:before, .search-container .search-results .homePanel.status-Scheduled:before {
		position: absolute;
		top: 0;
		z-index: 100;
		width: calc(100% - 10px);
	}
}

@media screen and (min-width: 992px) {
	.search-container .search-results .overlay .description {
    	color: var(--color-secondary);
	}
}

/* ---------------- Setup page -------------------*/
#settings .custom-checkbox {
	padding-left: 1.5rem;
} 

/* --------------- Set-Up Wizards (facebookSetup, etc.) -----------------*/

.setup-container {
	margin-top: 30px;
	margin-bottom: 20px;
}

.setup-container .button-row {
	text-align: right;
}

.setup-container .setup-card {
	margin-bottom: 10px;
	}

.setup-container .setup-card ul {
	padding-inline-start: 20px;
}

.setup-container .setup-card li {
	margin-bottom: .5rem;
	}
	

/* --------------- Socal Media Manager -----------------*/


#social-manager {
	min-height: calc(100vh - 200px);
	margin-top: 20px;
}

#social-manager .feature-preview .locations-mentioned .custom-checkbox {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 4px 0px;
}

#social-manager .feature-preview .locations-mentioned .input-group {
	width: auto;
	margin: 0 10px 0 15px;
	
}

#social-manager .feature-preview .locations-mentioned .input-group-text {
	padding: .25rem .75rem;
	font-size: .9rem;
	cursor: pointer;
}


#social-manager .preview-body {
	padding: 0;
    border: solid 1px #ccc;
    overflow: hidden;
}

#social-manager #promotion .feature-preview .card {
	max-width: 450px;
	}
	
#social-manager #promotion .feature-preview h2 {
	font-size: 1.25rem;
}

#social-manager #promotion .feature-preview .byline p {
    margin-block-start: 0;
    margin-block-end: 0;

	}
	
#social-manager #promotion .preview-body {
	max-width: 450px;
	}
	
#social-manager #promotion .preview-body img {
	width: 100%;
	height: auto;
	}

#social-manager #promotion label {
	font-weight: normal;
}

#social-manager #promotion .social-message-buttons {
	text-align: center
}

#social-manager #promotion .social-message-buttons .btn {
	margin-top: 2px;
}

#social-manager #promotion .handle-row input, #social-manager #promotion .handle-row .input-group-append {
	height: 34px;
}

#social-manager #promotion .handle-row input {
	margin-left: 5px;
}

#social-manager #promotion .handle-row label {
	margin-top: 0;
}

#social-manager #promotion .handle-row label i {
    font-size: 26px;
    margin-top: 0;
	}
	
#social-manager #promotion .location-social-list {
	padding-top: 5px;
	border-top: 1px solid #ccc;
}

#social-manager #social-post-previews {
	margin-top: 30px;
}

#social-post-previews .instagram-buttons { 
	display: flex;
	flex-wrap: wrap;
}

#social-post-previews .instagram-buttons .btn { 
	min-width: 180px;
	margin-bottom: 2px;
	margin-right: 2px;
}

#social-post-previews .instagram-buttons .hashtag-group {
	width: auto;
	min-width: 300px;
}

#social-post-previews #hashtag-save-progress {
	position: absolute;
    top: 0px;
    background-color: #ccc;
    width: calc(100% - 40px);
    padding: 6px 0 7px 0;
    display: none;
}

#social-post-previews #hashtag-save-alert {
	width: 100%;
	display: none;
}
	
#quickpost .action-buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
    padding-bottom: 20px;
}

#quickpost .action-buttons .btn {
	min-width: 160px;
}

#social-manager .feature-preview {
	position: relative;
    min-height: 200px;
    margin-bottom: 10px;
    margin-bottom: 15px;
    display:none;
}

	


#quickpost .preview-body img {
	width: auto;
	height: auto;
	max-width: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	position: relative;
	left: 0;
	top: 0;
	}

#quickpost .preview-body .dragging {
	cursor: move;
}

#quickpost .quickpost-pane {
	position: relative;
	min-height: 400px;
}

#social-manager .card {
	margin-top: 10px;
}

#social-manager .social-message textarea {
	min-height: 200px;
}

#quickpost .social-progress .bg-info {
	background-color: lightblue !important;
}

#quickpost .progress, #quickpost .progress-bar {
	overflow: visible;
}

#quickpost .progress-bar-labels {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

#quickpost .progress-bar-labels .message {
	flex-basis: 100%;
    text-align: center;
}

#quickpost .progress-bar-labels .attained {
	color: var(--success);
	
}

#quickpost .progress-bar-labels .attained:before {
	content: '\f164';
    font-family: "Font Awesome 5 Free";
	color: var(--success);
	position: relative;
    left: -5px;
}


#social-manager .tab-content {
	margin-top: 15px;
}

#social-enablements {
	min-height: 400px;
}

#social-enablements .custom-checkbox {
	margin-bottom: 15px;
	margin-top: 15px;
}

#social-enablements .btn-collapse-hide, #social-enablements .btn-collapse-show {
	position:absolute;
	left: 180px;
	top: 0
}

#social-enablements .btn-save {
	margin-top: 10px;
}


#social-enablements .btn-wizard {
	margin-bottom: 15px;
}

.instagram-profile-pic {
	border-radius: 50%;
	max-width: 160px;
}

.social-image-detail {
	display: none;
	width: 100%;
    border: solid 1px #ccc;
    position: absolute;
    top: 60px;
	min-height: calc(100% - 60px);
    background-color: var(--color-secondary);
    left: 0;
}

.social-image-detail .control-bar {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	}
	
.social-image-detail .control-bar .btn-dismiss {
	border-color: #ccc;
}

.social-image-detail .profile-name {
	margin-left: 10px;
}


.social-image-detail .profile-pic {
	height: 32px;
	width: 32px;
	border-radius: 50%;
	}

.social-image-detail .media-image {
	width: 100%;
	padding: 10px;
}

.social-image-detail .detail-body .caption {
    padding: 10px;
    font-style: normal;
    font-size: 1rem;
    border: 1px solid #ccc;
    margin: 5px 10px;
    border-radius: 5px;
    background-color: #eee;
}

.social-image-detail #insights-anchor {
	position: relative;
	min-height: 100px;
	margin: 0 10px;
}

.social-image-detail #insights-anchor h3 {
	font-size: 1.25rem;
	margin-top: 20px;
}

.social-image-detail .insight-list {
	list-style: none;
	padding-inline-start: 10px;
}


.social-image-detail #insights-anchor .comment-count{
	margin-left: 20px;
}

.social-image-strip {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-inline-start: 0;
}

.social-image-strip li {
	margin: 1px;
	width: calc(33% - 1px);
	position: relative;
	}

.social-image-strip .media-counts {
	width: 100%;
    position: absolute;
    bottom: 10px;
    background-color: rgba(255,255,255,.6);
    text-align: center;
}

.social-image-strip .comment-count, .social-image-strip .like-count {
	margin: 0 10px;
} 

.social-image-strip .like-count i, .social-image-detail .like-count i {
	color: var(--red);
	}

.social-image-strip img {
	width: 100%;
	height: auto;
}

.social-usage-info {
	margin-bottom: 0;
}

.social-usage-card {
	margin-bottom: 25px;
}


@media screen and (min-width: 768px) {
	.social-image-detail {
		min-height: 800px;
		width: 640px;
		top: 124px;
		left: calc(50% - 320px);
		padding: 10px; 
	}
	#social-post-previews .instagram-buttons .hashtag-group {
		width: 100%;
		min-width: 300px;
	}
}

@media screen and (min-width: 992px) {
	#social-manager #promotion .handle-row input {
		width: 195px;	
	}
	#social-post-previews .instagram-buttons .hashtag-group {
		width: calc(100% - 380px);
		min-width: 300px;
	}
}


@media screen and (min-width: 1200px) {
	
	#quickpost .feature-preview {
		max-width: 900px;
		margin: 15px auto;
	}

	#quickpost .preview-body {
		width: 800px;
		height: 800px;
		background-color: #ccc;
		margin: 0 auto 10px auto;
	}
	
	#quickpost .image-toolbar {
		max-width: 800px;
		margin: 0 auto 10px auto;
	}
	
	#quickpost .social-message textarea {
		min-height: auto;
	}
	
	#social-manager #promotion .handle-row input {
		width: 255px;	
	}
}

/* --------------- States Page -----------------*/

.states-container {
	margin-top: 1rem;
}

.statemap {
	min-width: calc(100vw);
	width: 100%;
	height: 400px;
	margin-top: 20px;
	margin-left: -20px;
}

@media screen and (min-width: 768px) {

	.statemap {
		width: 700px;
		height: 500px;
		margin-top: 50px;
		margin-left: 0px;
	}	
}

@media screen and (min-width: 992px) {

	.statemap {
		width: 900px;
		height: 750px;
	}	
}

/* --------------- Subscribe Page -----------------*/

.subscribe-panel {
	min-height: 350px;
	max-width: 800px;
	margin: 50px auto 20px auto;
}

.existing-subscriber-panel {
	margin: 50px auto 20px auto;
	max-width: 800px;
}

.subscribe-panel h1, .subscribe-panel h2 {
	text-align: center;
	}

.existing-subscriber-panel h1, .existing-subscriber-panel h2 {
	text-align: center;
	margin-bottom: 30px;
	}

.existing-subscriber-panel .subscription-list {
	margin-top: 20px;
}

.existing-subscriber-panel .subscription-list ul {
	list-style: none;
	}

.existing-subscriber-panel .action-buttons .btn {
	width: 100%;
	margin-bottom: 5px;
	min-height: 50px;
}
	
.subscribe-panel h3 {
	font-size: 1.2rem;
	text-align: left;
}

.subscribe-panel .card .text-muted {
	line-height: 1;
	margin-top: 40px;
}

.subscribe-panel .card-text:last-child {
    margin-top: 40px;
}

.subscribe-panel .subscription-list {
	margin-top: 30px;
	margin-bottom: 30px;
}

.subscription-list .card:hover {
	cursor: pointer;
}

.subscription-list .card-selected {
	background-color: #eee;
	position: relative;	
	border-width: 3px;
	}
	
.subscription-list .card-selected:after {
	content: '\f058';
    font-family: "Font Awesome 5 Free";
	color: #777777;
    font-weight: bold;
    font-size: 30px;
    position: absolute;
    right: 5px;
    top: 0px;
    padding: 0;
}

.subscribe-create-account {
	padding-top: 20px;
}

#subscribe-new-account {
	max-width: 600px;
    margin: 20px auto;
}

.subscribe-create-account .ready-icon:after {
    content: '\f058';
    font-family: "Font Awesome 5 Free";
    color: green;
    font-weight: bold;
    font-size: 30px;
    position: absolute;
	left: 5px;
    top: 2px;
    padding: 0;
}

.subscribe-create-account .alert-success .content-display {
	padding-left: 30px;
}

.subscribe-create-account label {
	margin-bottom: 0;
    font-size: .8rem;
    }

.subscribe-create-account .login-buttons {
	text-align: center;
	margin: 30px 0;
}

.subscribe-remit-payment {
	margin-top: 50px;
	margin-bottom: 30px;
	min-height: 150px;
}

.subscribe-remit-payment.payment-disabled h3 {
	color: #ccc;
}

.subscribe-remit-payment.payment-disabled .payment-controls {
	display: none;
}

.subscribe-remit-payment .enablement-message {
	display: none;
}

.subscribe-remit-payment.payment-disabled .enablement-message {
	display: block;
	color: #ccc;
	font-size: .9rem;
	font-style: italic;
	margin-left: 10px;
}

.subscription-complete-panel {
	margin: 20px auto;
    max-width: 728px;
}

.subscription-complete-details {
	margin: 15px 0;
}

.subscription-complete-detail label {
    font-weight: bold;
    width: 200px;
    text-align: right;
    margin-right: 10px;
}


#subscribe-manage-link {
	max-width: 800px;
	margin: 20px auto;
	text-align: center;
}	

/* --------------- Subscription Manager -----------------*/


#enableSubscriptions {
	margin: 30px 0 15px 0;
	padding: 10px 20px;
	border: solid 1px #ccc;
	border-radius: 5px;	
} 

#enableSubscriptions .btn {
	margin-left: 20px;
	}
	
#subscription-manage {
	position: relative;
	padding: 15px 5px;
}

.page-body #promotion {
	min-height: 350px;
	position: relative;
}

.page-body #promotion label {
	font-weight: bold;
	margin-top: 10px;
	
}

.page-body #promotion .form-check {
	padding: 5px 0px 5px 20px;
}


.page-body #promotion .form-check label {
	font-weight: normal;
	margin-top: 0;
	
}

.page-body .promotion-price-selection-group {
	min-height: 150px;
}

.page-body #promotion .button-row {
	justify-content: center;
	margin-bottom: 10px;
}

.page-body #promotion .button-row .btn {
	margin-left: 2px;
}

#subscribe-page-link {
	text-align: left;
    margin: 15px 0px;
}



/* --------------- User Profile Page -----------------*/

.profile-container {
	margin-top: 40px;
}

.profile-label {
	margin-top: 15px;
	font-weight: bold;
}

.profile-card {
	margin-top: 15px;
	margin-bottom: 15px;
}

.profile-card h3 {
	font-size: 1.25rem;
}

.profile-card .subscription-list ul {
	list-style: none;
}


#subscriptionPanel .card-body {
	padding: 1.25rem .25rem;
}

#subscriptionPanel .subscription-card .card-body {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 1.25rem;
	flex-wrap: wrap;
	align-items: center;
	
}

.subscription-card .card-body .btn {
	min-width: 130px;
	margin-top: 10px;
	}

.subscription-card h3 {
	font-size: 1.5rem;
}

.subscription-card .text-subscription {
	order: 1;
	flex-basis: 80%;
}

.subscription-card .text-active {
	order: 2;
	margin-left: auto;
}

.subscription-card .text-description {
	flex-basis: 100%;
	order: 3;
	font-size: .9rem;
}

.subscription-card .manage-billing {
	order: 4;
	margin-top: 30px;
}

.subscription-card .update-subscription {
	order: 5;
	flex-basis:100%;
	margin-top: 20px;
}

.subscription-card .cancel-subscription-buttons {
	margin-left: 30px;
}

.subscription-card .update-panel {
	margin-bottom: 30px;
}

.subscription-card .update-panel-change .form-group {
	margin-bottom: 10px;
	margin-left: 30px;
	padding-top: 15px;
}

.subscription-card .update-panel.disabled .form-group {
	color: #ccc;
}

.subscription-card .subscription-alert {
	order: 6;
	flex-basis:100%;
	margin-top: 20px;
}

.subscription-card .badge {
	font-size: .9rem;
    padding: 5px 10px;
}

#subscription-change-modal .modal-body {
	min-height: 300px;
}

#subscription-change-modal .working-text {
	display: none;
	text-align: center;
	padding-top: 75px;
}


@media screen and (min-width: 768px) {
	
	.profile-label {
	    text-align: right;
	    margin-top: 0;
	}
	
	.subscription-card .text-subscription {
		flex-basis: auto;
	}
	
	.subscription-card .text-active {
		margin-right: 15px;
		margin-top: 10px;
	}
		
		.subscription-card .manage-billing {
			order: 2;
			margin-top: 0;
		}
		
		.subscription-card .text-description {
			order: 3;
		}
	}
	
/* ---------  region page ---------- */
.region-container {
	min-height: 300px;
	margin-top: 100px;
}

.region-container .page-collection-inner {
	margin: 10px 0 30px 0;
}

/* ---------  register container ---------- */
.register-container {
	margin-top: 40px;
	min-height: 400px;
	text-align: center;
}

.register-container form {
	text-align: left;
	}

.register-container .form-text {
	padding-left: 20px;
	}

.register-container .card h5 {
	margin-bottom: 2rem;
}

.register-container h1 {
	text-align: center;
	}

.register-container .welcome {
	padding: 20px 10px;
	}

.register-container #txtUrlPrefix {
	text-align: right;
}

.register-container .current-sites  {
	margin-top: 3rem;
}

.register-container .current-sites h3  {
	font-size: 1.5rem;
}

.register-container .site-list  {
	padding: 30px 0;
	}

#register-form .invalid .invalid-feedback {
	display: block;
	padding-left: 20px;
}

#register-form .valid .valid-feedback {
	display: block;
	padding-left: 20px;
}

#register-form .invalid .form-control {
	border-color: var(--danger);
}

#register-form .valid .form-control {
	border-color: var(--success);
}

#register-form .valid .input-group:after {
   font-family: "Font Awesome 5 Free";
   content: "\f058";
   color: var(--success);
   display: inline-block;
   vertical-align: middle;
   font-weight: bold;
   font-size: 25px;
   position: absolute;
   right: -30px;
}

#register-form .invalid .input-group:after {
   font-family: "Font Awesome 5 Free";
   content: "\f057";
   color: var(--danger);
   display: inline-block;
   vertical-align: middle;
   font-weight: bold;
   font-size: 25px;
   position: absolute;
   right: -30px;
}

#register-form .validating .input-group:after {
   font-family: "Font Awesome 5 Free";
   content: "\f110";
   color: var(--info);
   display: inline-block;
   vertical-align: middle;
   font-weight: bold;
   font-size: 25px;
   position: absolute;
   right: -30px;
}

.register-panel {
	margin-top: 20px;
	text-align: center;
}

.register-panel .signup, .register-panel .login {
	padding: 30px 10px;
	}

@media screen and (min-width: 768px) {
	.register-container {
		margin-top: 60px;
		max-width: 720px;
	}
}

/* -------- SSO page --------------- */

.sso-container {
	padding: 40px 10px;
	text-align: center;
	min-height: calc(100vh - 200px);
}

.sso-container button {
	text-decoration: underline;
	border: none;
	background-color: var(--color-primary-bg);
	}

.sso-container h1 {
	margin-bottom: 40px;
	}

/* ---------  transcription page ---------- */

.transcribe-container {
	margin-top: 30px;
	}

.transcribe-container .multiple {
	color: red;
	}
	
.transcribe-container .job-panel {
	margin: 15px 0;
	min-height: 200px;
}

.transcribe-container .job-create h2 {
	margin: 10px 0 20px 0;
    font-size: 1.5rem;
}
	
.transcribe-container .job-controls {
	margin-bottom: 10px;
}

.transcribe-container .job-buttons {
	margin: 10px 0;
}

.transcribe-container .transcription-job {
	border: solid 1px #ccc;
	padding: 1rem .5rem;
	margin: 4px 0;
    border-radius: 5px;
}

.transcribe-container .job-details {
	min-height: 300px;
}

.transcribe-container .job-details-panel .buttons {
	display: flex;
	}
	
.transcribe-container .job-details-panel #copy-message {
	margin-top: 10px;
	display: none;
	color: var(--success);
	}

.transcribe-container #transcription-text {
	width:100%;
	display: none;
}

.transcribe-container #transcription-code {
	margin-top: 1rem;
	width: 100%;
	height: calc(100vh - 350px);
	background-color: #eee;
	overflow-y: auto;
	padding: 1rem;
}

/* Unit Tests */
.unit-test-container {
	min-height: 800px;
	margin-top: 60px;
	padding: 50px 100px;
	background-color: #fff;
}

.unit-test-container .button-panel {
	padding: 10px 15px;
}

.unit-test-container .button-panel .btn {
	min-width: 200px;
}

.unit-test-container .card {
	background-color: #fff;
	margin-bottom: 5px;
}

.unit-test-container .card .card-title::before {
   font-family: "Font Awesome 5 Free";
   content: "\f017";
   display: inline-block;
   padding-right: 3px;
   padding-top: 3px;
   vertical-align: middle;
   font-size: 25px;
	
}

.unit-test-container .card.in-progress {
	background-color: #d7e6f4;
}

.unit-test-container .card.complete {
	background-color: rgba(40,167,69,0.2);
}

.unit-test-container .card.failed {
	background-color: rgba(220,53,69,0.2);
}

.unit-test-container .card.in-progress .card-title::before {
	content: "\f110";
    font-weight: bold;
	}

.unit-test-container .unit-test-list {
	max-height: calc(100vh - 150px);
	overflow-y: scroll;
}

.unit-test-container .unit-test-list ul {
	 list-style-type: none;
}

.unit-test-container .unit-test-list li::before {
   font-family: "Font Awesome 5 Free";
   content: "\f017";
   display: inline-block;
   padding-right: 5px;
   vertical-align: middle;
   font-size: 20px;
}

.unit-test-container .unit-test-list li.in-progress::before {
   content: "\f110";
   font-weight: bold;
}

.unit-test-container .unit-test-list li.complete::before {
   content: "\f00c";
   font-weight: bold;
   color: var(--success);
}

.unit-test-container .unit-test-list li.failed::before {
   content: "\f00d";
   font-weight: bold;
   color: var(--danger);
}

.unit-test-container .card.complete .card-title::before {
   content: "\f00c";
   font-weight: bold;
   color: var(--success);
}

.unit-test-container .card.failed .card-title::before {
   content: "\f00d";
   font-weight: bold;
   color: var(--danger);
}

.unit-test-container .card .details {
	padding: 2px 10px;
    margin-left: 20px;
    border: 1px solid;
    background-color: #eee;
}

.unit-test-container .unit-test-list .detail-list p {
	 margin: 0;
}

.unit-test-container .progress-indicator {
	margin-right: 10px;
    position: relative;
    top: 3px;
}


/* --------------- Widgets ------------------ */

.sign-up {
	min-height: 200px;
	padding: 30px 10px;
}