#storyDisplay{
	margin-top:15px;
}

.StoryList{
   list-style-type:none;
}
.story-container {
  margin-bottom: 15px;
  overflow: auto;
	min-height: 110px;
}
.story-summary-home *{
	font-size:1.0em !important;
}

.story-thumb img {
  	display: block;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
	border-radius: 2px;
}

.story-thumb img.rounded-circle {
    border: 5px #efefef solid;
}


.story-thumb-home {
    float: left
}

.story-text{
	margin-left: 170px;
}


a.story-title{
  display:inline-block
}

.story-title h2{
  margin-top:0px !important;
  margin-bottom:0px !important;
  font-size: 1.25rem;
}

.story-title h3{ /* unused*/
  margin-top:5px !important;
  margin-bottom:0px !important;
}


input[type=checkbox], input[type=radio] {
    margin: 0 0 4px 0;
}


.story-container:nth-child(odd) {
    background: #f7f3e8;
}

.story-container:nth-child(even) {
    background: #ffffff
}


/****************************
 Filter stuff
 *****************************/

#filterlisting input {
  position: absolute;
  left: -9999px;
}

#filterlisting label {
  display: block;
  position: relative;
  margin: 0;
  padding: 15px 10px 15px 57px;
  line-height: 1.25em;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  user-select: none;
  /*transition: background-color .2s, box-shadow .2s;*/
  font-size:1.063rem;
}
/* checked bg color.. super light shade of border accent color - may not use */
/*#filterlisting input:checked + label.school-business { background-color: #f4fff5; }
#filterlisting input:checked + label.school-arts{ background-color: #fff6f7; }
#filterlisting input:checked + label.school-education{ background-color: #fff7ff; }
#filterlisting input:checked + label.school-health{ background-color: #f2faff; }
#filterlisting input:checked + label.school-law{ background-color: #f2f3ff; }
#filterlisting input:checked + label.school-manufacturing{ background-color: #f8f2f0; }
#filterlisting input:checked + label.school-stem{ background-color: #fff5ec;}
*/

/* checked bg color. same as accent left border color, and removes border which shifts left a bit */
#filterlisting input:checked + label.school-business{
	color:#FFF;
	background-color: #249E31;
	background: rgb(36,158,49);
	background: -moz-linear-gradient(90deg, rgba(36,158,49,1) 0%, rgba(33,133,44,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(36,158,49,1) 0%, rgba(33,133,44,1) 100%);
	background: linear-gradient(90deg, rgba(36,158,49,1) 0%, rgba(33,133,44,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#249e31",endColorstr="#21852c",GradientType=1);
 }
#filterlisting input:checked + label.school-arts{
	color:#FFF;
	background-color: #C00D1E;
	background: rgb(192,13,30);
	background: -moz-linear-gradient(90deg, rgba(192,13,30,1) 0%, rgba(158,11,25,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(192,13,30,1) 0%, rgba(158,11,25,1) 100%);
	background: linear-gradient(90deg, rgba(192,13,30,1) 0%, rgba(158,11,25,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c00d1e",endColorstr="#9e0b19",GradientType=1);
 }
#filterlisting input:checked + label.school-education{
	color:#FFF;
	background-color: #93328E;
	background: rgb(147,50,142);
	background: -moz-linear-gradient(90deg, rgba(147,50,142,1) 0%, rgba(99,33,96,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(147,50,142,1) 0%, rgba(99,33,96,1) 100%);
	background: linear-gradient(90deg, rgba(147,50,142,1) 0%, rgba(99,33,96,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#93328e",endColorstr="#632160",GradientType=1);
}
#filterlisting input:checked + label.school-health{
	color:#FFF;
	background-color: #248ED8;
	background: rgb(36,142,216);
	background: -moz-linear-gradient(90deg, rgba(36,142,216,1) 0%, rgba(36,122,183,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(36,142,216,1) 0%, rgba(36,122,183,1) 100%);
	background: linear-gradient(90deg, rgba(36,142,216,1) 0%, rgba(36,122,183,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#248ed8",endColorstr="#247ab7",GradientType=1);
}
#filterlisting input:checked + label.school-law{
	color:#FFF;
	background-color: #1E22AA;
	background: rgb(30,34,170);
	background: -moz-linear-gradient(90deg, rgba(30,34,170,1) 0%, rgba(22,25,113,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(30,34,170,1) 0%, rgba(22,25,113,1) 100%);
	background: linear-gradient(90deg, rgba(30,34,170,1) 0%, rgba(22,25,113,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e22aa",endColorstr="#161971",GradientType=1);
}
#filterlisting input:checked + label.school-manufacturing{
	color:#FFF;
	background-color: #95614D;
	background: rgb(149,97,77);
	background: -moz-linear-gradient(90deg, rgba(149,97,77,1) 0%, rgba(115,71,55,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(149,97,77,1) 0%, rgba(115,71,55,1) 100%);
	background: linear-gradient(90deg, rgba(149,97,77,1) 0%, rgba(115,71,55,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#95614d",endColorstr="#734737",GradientType=1);
}
#filterlisting input:checked + label.school-stem{
	color:#FFF;
	background-color: #FF7500;
	background: rgb(255,117,0);
	background: -moz-linear-gradient(90deg, rgba(255,117,0,1) 0%, rgba(225,103,0,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,117,0,1) 0%, rgba(225,103,0,1) 100%);
	background: linear-gradient(90deg, rgba(255,117,0,1) 0%, rgba(225,103,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7500",endColorstr="#e16700",GradientType=1);
}

#filterlisting input:checked + label { text-shadow: 1px 1px 4px rgba(0,0,0,0.5); }
#filterlisting input:checked + label::before { text-shadow: none; }

/* school accent left border color - matches program tag in content divs */
#filterlisting label.school-business{  border-left: 11px solid #249E31; }
#filterlisting label.school-arts{ border-left: 11px solid #C00D1E; }
#filterlisting label.school-education{ border-left: 11px solid #93328E; }
#filterlisting label.school-health{ border-left: 11px solid #248ED8; }
#filterlisting label.school-law{ border-left: 11px solid #1E22AA; }
#filterlisting label.school-manufacturing{ border-left: 11px solid #95614D; }
#filterlisting label.school-stem{ border-left: 11px solid #FF7500; }

#filterlisting label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 14px;
  width: 32px;
  height: 32px;
	padding: 4px 0 0 3px;
  font-size: 1.6875rem;
  margin: auto 0;
  border-radius: 0px;
  color: #f5f5f5;
  line-height: 1em;
  font-weight: bold;
  background-color: #f5f5f5;
  transition: background-color .2s;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.1);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	/*  content: attr(data-before); - changed to FA */
}

/* blue outline on checkbox and label focus (must separate to work) for accessibility */
#filterlisting input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) solid 2px;
}
#filterlisting input[type="checkbox"]:focus + label {
	outline: none;
	-webkit-box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem rgba(77,144,254,0.5);
	box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem rgba(77,144,254,0.5);
}

#filterlisting input:checked + label::before {
  color: #333;
  background-color: #ffffff;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.6);
	outline: transparent solid 2px !important; /* don't visibly show outline on inner checkbox when checked */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	/*content: '\2713'; -- entity for ✓ checkmark */
}


#filterlisting {
}
#filterlisting .finputwrap {
	margin: 15px 0;
}

.story-title h2 {
	font-size: 1.375rem;
	margin-bottom: 5px !important;
}
.story-job {
	font-size:1rem;
	font-weight:bold;
}
@media screen and (max-width: 575px){
	.story-title { text-align: center; }
	.story-job { text-align: center; }
	.program-tag-wrap { text-align: center; }
	.program-tag { margin: 10px 3px 0 3px !important; font-size: 1rem !important; } /* negate 'small' font class on sm/xs */
}
.story-container {
	padding:25px;
}

#storyTable {
	padding-top: 8px;
	padding-bottom: 20px;
	width: auto !important;
}
#storyTable_filter{
	float: right;
	margin-bottom: 10px;
	/*padding-right: 10px;*/
}
#storyTable_length{
	display: inline-block;
	margin-top: 2px;
}
#storyTable_length label{
	/*margin-bottom:0;*/
}
.dt_pageSel {
	width:auto;
	display: inline-block;
	padding: 6px 0px 6px 6px;
	margin: 0 3px;
	height:auto;
}
#dt_searchTxt{
	background: #fff;
	border: 1px solid #003385;
	padding: 4px 12px;
	border-radius: 4px;
	font-family: "Montserrat";
	font-weight:normal;
}
#dt_searchTxt .dt-search-bar__button{
	border-radius: 0 4px 4px 0;
	padding-left: .5em;
	padding-right: .5em;
	width: 2.125rem;
}

#storyTable_filter input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #003385;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight:normal;
	opacity: 1; /* Firefox */
}
#storyTable_filter input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #003385;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight:normal;
}
#storyTable_filter input::-ms-input-placeholder { /* Microsoft Edge */
	color: #003385;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight:normal;
}

.dataTables_wrapper .dataTables_filter input {
	margin: 0;
	color:#444;
	font-weight:normal;
}

/*********************************************************
The following emulates both bg-cgrey-05 and shadow-3. Has to be a separate element due to jQuery datatables handling all striping dynamically,
and applying those existing classes to table rows. However they need to be added to the container div within each cell, so doing so here.
**********************************************************/
.bg-experience-row-striped .story-container {
	background-color: #f7f3e8;
	color: #000;
	-webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-ms-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-o-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.bg-experience-row .story-container {
	-webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-ms-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-o-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.story-text {
		margin-left: 0;
}
.story-thumb {
	padding: 0 5px 0 0 !important;
	text-align: center;
	margin: 0 auto;
}
#storyTable .thumbnail {
	background-color: transparent;
	padding:1px;
}
.story-thumb img {
	width:160px;
	border-radius: 50%; /* not needed once module CSS .story-thumb is fixed */
	margin:0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1549px) { .story-thumb img { width: 60%; }}
@media screen and (min-width: 1550px) and (max-width: 1879px) { .story-thumb img { width: 60%; }}
@media screen and (min-width: 1880px) { .story-thumb img { width: 60%; }}
@media screen and (min-width: 992px) { #schoolExperienceRow .story-thumb img { width: 75%; }} /* override for smaller images on School page/wider output */


.filter-tag-hidden, .filter-program-hidden {
	display:none;
}
.story-summary {
	padding-top:10px;
}
.story-summary p {
		margin: 0 0 0.5rem;
}
.program-tag {
	background: #484744;
	padding: 5px 12px;
	display: inline-block;
	color: #FFF;
	border-radius: 6px;
	margin: 3px 5px 2px 0;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.program-tag-business { background: #249E31; }
.program-tag-arts { background: #C00D1E; }
.program-tag-education { background: #93328E; }
.program-tag-health { background: #248ED8; }
.program-tag-law { background: #1E22AA; }
.program-tag-manufacturing, .program-tag-mit { background: #95614D; }
.program-tag-stem { background: #FF7500; }
a.program-tag-link span:hover {
	outline: none;
	-webkit-box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem #4D90FE;
	box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem #4D90FE;
}

#storyMain .h3, #storyMain .h4{
	margin-top: 0;
}
#sidebar .pgs-navbar--sidebar a {
	color: #000 !important;
}

#sidebar .pgs-navbar--sidebar .nav>li:first-of-type a {
    color: #fff !important;
}

#relatedstories .related-heading {
    /* text-transform: uppercase; */
    border-bottom-width: 4px;
    border-bottom-style: solid;
    padding-bottom: .5em;
}

#relatedstories img.cb-mainimg, #relatedstories img.cb-mainimg-lg {
    margin: 1em auto 1.5em;
    width: 160px;
    border: 5px solid transparent;
}

/* nicer solution than clearfix with varied number of columns, to keep cards even */
#relatedstories .aligned-row {
    display: flex;
    flex-flow: row wrap;

    &::before {
        display: block;
    }
}
#relatedstories .feature-card {
	border: 3px solid #e5e2d6;
}
#relatedprogram ol, #relatedprogram ul {
    margin-bottom: 1rem;
}
/* apply .small font on bigger displays (side column) only */
@media screen and (min-width: 992px) {
	#relatedprogram ol, #relatedprogram ul { font-size: .875em; }
}
#relatedprogram .actionbox {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
#relatedprogram .bottomSchool {
	border-bottom: 6px solid #0033a0;
	padding: 20px;
}

/* override scaling width used on main Experiences page, for Program-specific page */
#storiesMain .story-thumb img {
	width:160px;
}
#storiesMain .story-container {
    padding: 25px 20px;
}
#storiesMain .program-tag {
    display:none;
}
/* center block on mobile/small */
@media screen and (max-width: 768px) {
	#storiesMain .story-text {
	    text-align: center;
	    margin-top: 20px;
	}
}

/* override top of datatable*/
table.dataTable thead th, table.dataTable thead td {
		border-top: 1px solid #111;
		border-bottom:0;
}