/* New stuff */

/*MU Gold: #F1B82D
UMKC Blue: #0066cc
UMKC Gold:  #FFdd00
UMSL Red: #981E32
UMSL Gold: #EAAB00
MST Apple: #509E2F
MST Miner Green: #007A33*/

.hide-during-load {
    opacity: 0;
    transform: opacity .5s;
}
.hide-during-load.mounted {
    opacity: 1;
}

/*Force a single column on this page in TwentySeventeen*/
body.page-two-column:not(.archive).page-impact-data-sheets #primary .entry-content,
body.page-two-column:not(.archive).page-impact-data-sheets #primary .entry-header {
    float: none;
    width: auto;
}

.page-impact-data-sheets .wrap {
  max-width: 1400px;
}
.page-impact-data-sheets.page:not(.twentyseventeen-front-page) .wrap #primary {
  max-width: 1200px;
}
.impact-page-header {
  margin-bottom: .4em;
  /*overflow: visible;*/
}
.impact-page-header h1 {
  /*float: left;*/
  margin: 0;
  /*display: inline-block;*/
  font-size: .95em;
  /*clear: none;*/
  padding-top: 0;
}
.impact-page-header .location-name {
/*  float:left;
  clear: left;*/
  margin-top: .5em;
  margin-bottom: 0;
  padding: 0;
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color:#1A364C;
}
.impact-page-header .location-name.location-single-line {
  margin-top: .75em;
}
.impact-page-header .system-banner-header {
  max-width: 100%;
  max-height: 160px;
  margin-left: auto;
  padding-bottom: 20px;
  display: block;
}
.pdf-body .impact-page-header .system-banner-header {
  max-height: 100px;
  padding-bottom: 0;
  display: block;
}
h2.impact-page-subheader {
  margin-top:0;
  /*display: inline-block;*/
}
.pdf-body h2.impact-page-subheader,
.pdf-body h2.section-header {
    font-size: 16.25px;
}
/*h2.location-name {
  font-weight: 700;
  color:#1A364C;
}*/
.impact-data-sheet h1:first-child,
.impact-data-sheet h2:first-child,
.impact-data-sheet h3:first-child,
.impact-data-sheet h4:first-child,
.impact-data-sheet h5:first-child,
.impact-data-sheet h6:first-child {
    padding-top: 0;
    margin-top: 0;
}
.section-icon {
  width: 54px;
  height: 54px;
  display: inline;
  vertical-align: middle;
  margin-left: -54px;
}
h3.section-header {
  margin-bottom: 0.2em;
  padding-left: 54px;
}
.pdf-body h3.section-header {
  font-size: 12px;
}
.section-header.no-icon {
  padding-left: 0;
}
.header-text {
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
}
.list-header {
  font-weight: 700;
}
.pdf-body h4.section-header,
.pdf-body h4.district-name,
.pdf-body h4.subsection-header {
  font-size: 11px;
}
h4.subsection-header {
  margin-bottom: 0.1em;
  margin-top: 0;
}
.district-data-items {
  list-style: none;
}
/*data bullets should be red*/
.data-item-list,
.data-item-list ul{
  list-style: none; /* Remove default bullets */
  padding-left: .4em;
  margin-left: 1.4em;
  margin-bottom: 0;
}
.data-item-list ul{
	list-style:disc;
}
.data-item-list {
  line-height: 1.4;
}
.data-item-list li {
  margin-bottom: .2em;
}
.data-item-list > li > ul,
.data-item-list > li > ol {
    list-style: none;  /*Remove default bullets*/
}
.data-item-list .financial-aid-chart-container {
  margin-left: -1.4em;
  /*padding-left: 0;*/
}
.ext-educational-contacts {
  margin-left: 0;
  padding-left: 0;
}
.data-details-list li:not(.no-bullet)::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: rgb(132, 30, 50); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.campusBreakdown .indicator-item {
  margin-bottom: 1em;
  padding-bottom: .5em;
}
.campusBreakdown .indicator-item h4 {
  margin-top: 0;
  padding: .2em .8em;
  color: white;
  display: inline-block;
  margin-bottom: .5em;
}
.campusBreakdown .indicator-item.mu {
  border: 1px solid rgb(234, 181, 60);
}
.campusBreakdown .indicator-item.mu h4 {
  background-color: rgb(234, 181, 60);
  color: black;
}
.campusBreakdown .indicator-item.umkc {
  border: 1px solid rgb(1, 102, 204);
}
.campusBreakdown .indicator-item.umkc h4 {
  background-color: rgb(1, 102, 204);
}
.campusBreakdown .indicator-item.mst {
  border: 1px solid rgb(0, 122, 60);
}
.campusBreakdown .indicator-item.mst h4 {
  background-color: rgb(0, 122, 60);
}
.campusBreakdown .indicator-item.umsl {
  border: 1px solid rgb(132, 30, 50);
}
.campusBreakdown .indicator-item.umsl h4 {
  background-color: rgb(132, 30, 50);
}
/* This is a ul */
.impact-data-list-results .education-training {
  padding-left: 0;
  margin-left: -1em;
}
.education-training img {
  margin-bottom: .8em;
}
.no-bullet {
}
.loading-indicator {
  display: block;
  background: #EBEBEB;
  text-align: center;
  border-radius: 2px;
  padding: 1em;
  margin: 1em 0;
  color: #666666;
}
/*Media elements.*/
.iconized-text img {
  max-width: 90px;
}
.Media-body :first-child {
  margin-top: 0;
}
/*Changes for engagemo sites*/
.the-journal-child .impact-data-page-section h3 {
  font-size: 24px;
}
.the-journal-child .impact-data-page-section h4 {
  font-size: 20px;
}
.the-journal-child .impact-page-header h1 {
  font-size: 1em;
}

.district-map {
  text-align: center;
}

.impact-data-page-section.state .data-item-list li {
    margin-bottom: .6em;
}

.district-map .active-district {
    stroke: #841e32;
    stroke-width: 4;
    fill: #841e32;
}
.district-details {
/*  position: absolute;
  top: 10px;
  right: 10px;
  padding: .4em .2em;
  background-color: rgba(255,255,255,.6);*/
}
#impact-data-sheet-container .pdf-button {
  font-size: 0.9em;
  line-height: 1.2;
  padding: .6em 1em .4em;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
}


.float-clear {
  clear: both;
}

.make-layout {
  overflow: auto;
}
.golden-rule {
  background-color: #f1b82d;
  margin: .2em 0;
}
.report-footer {
  margin-bottom: 1em;
  margin-top: 2em;
}
.report-footer .section-header {
  text-align: center;
}
.impact-data-sheet.pdf-width {
  max-width: 800px;
}

.pdf-body .report-footer {
  margin-bottom: 0;
}

.pdf-body .report-footer p {
  font-size: .9em;
}
.pdf-body .report-footer .data-credits {
  font-size: .85em;
}
.report-footer .campus-logos {
  max-width: 25vw;
}
.pdf-body .report-footer .campus-logos {
  /*width: 45%;*/
}

.Grid-cell p {
  margin: .6em 0;
}

.image-atop-column img {
  width: 72px;
}
.image-left-of-content.two-thirds img {
  width: 66%;
}
.image-left-of-content.half img {
  width: 50%;
}
.image-left-of-content.patents img {
  width: 50%;
}
#page .wrap #primary p.data-credits {
  font-size: .8em !important;
}

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

.leaflet-map {
  height: 100%;
  border: 1px solid #CCC;
}
/* Don't show the map on small screens. */
.report-geography-chooser-map {
  display: none;
}
@media (min-width:36em) {
  .report-geography-chooser-map {
    position: relative;
    display: block;
  }
}

.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out,
.leaflet-touch .leaflet-control-custom {
  text-decoration: none;
}
.report-geography-chooser-map .leaflet-control-custom {
    background-image: url(../images/mo.png);
    background-color: #f1b82d;
    background-position: center;
    background-repeat: no-repeat;
}

/* Control to choose a geography level */
.geography-level-select .main-geogs {
  display: flex;
}
.geography-level-select ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.geography-level-select .main-geogs > li {
  flex-grow: 1;
  white-space: nowrap;
}
.geography-level-select.calculating .main-geogs > li {
  flex-grow: 0;
}
.geography-level-select {
  position: relative;
  width: 100%;
}
.geography-level-select .more-geographies {
  /*display: none;*/
}
.geography-level-select.enable-more .more-geographies {
  /*display: list-item;*/
}
.geography-level-select .more-geographies-list {
  /*visibility: hidden;*/
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 750;
  background-color: #FAFAFA;
}
.geography-level-select.show-secondary .more-geographies-list {
  /*visibility: visible;*/
  /*background-color: #FAFAFA;*/
}
.geography-level-select.show-secondary .more-geographies > button {
  background-color: rgb(55, 55, 55);;
}

.geography-level-select .more-geographies-list li {
  /*margin-right: 0;*/
  /*margin-bottom: 0;*/
}
.geography-level-select .more-geographies-list li label{
  /*margin-right: 0;*/
  /*margin-bottom: 0;*/
  display: block;
  border-bottom-color: #aaa;
}

.more-geographies-list input[name="geography_type"] + label {
  width: 100%;
}

.geography-level-select {
  margin: .4em 0 1em;
  padding: 0;
  border: none;
}
input[name="geography_type"] {
  opacity: 0;
  width: 1px;
  height: 1px;
}
input[name="geography_type"] + label {
  text-align: center;
  display: inline-block;
  width: 96%;
  overflow: auto;
  /*margin-right: .4em;*/
  /*margin-bottom: .4em;*/
  padding: .4em 1em;
  background-color: #e1e1e1;
  border-bottom: 2px solid #ddd;
  transition: all .2s;
  cursor: pointer;
}
input[name="geography_type"]:checked + label {
  /*color: #f00;*/
  /*font-weight: 700;*/
  background-color: #f1f1f1;
  border-bottom: 2px solid #f1b82d;
}
.geography-level-select .more-geographies > button {
  width: 100%;
  padding: .4em 1em;
  font-size: 1.0625rem;
  border-bottom: 2px solid #f1b82d;
}

/* Address search box */
#address-search-form {
    position: absolute;
    top: 25px;
    right: 10px;
    z-index: 500;
    max-width:75%;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);*/
}
#address-input {
    background-image: url(../images/search-gray.png);
    /*background-color: #f1b82d;*/
    background-position: center right 4%;
    background-repeat: no-repeat;
    background-size: 1.4em auto;
    padding-right: 2.4em;
}
.search-submit-button {
  display: none;
}

/* Geo ID chooser list */
.geography-chooser {
 height: 550px;
}
.report-geography-chooser-select-interface {
  height: 100%;
  overflow: auto;
  padding-bottom: 0;
}
.report-geography-chooser-select-interface legend {
  margin-bottom: 0;
}
.report-geography-chooser-select-interface .geoid-option {
  display: block;
}
.report-geography-chooser-select-interface .geoid-option input {
  margin-right: .5em;
}
.report-geography-chooser-select-interface .geoid-option label {
  display: inline;
}

/* Selected geographies user-feedback */
.geo-short-results-list {
    margin: 1em 0 2.5em;
}
.geo-short-results-item {
  margin-right: .4em;
  margin-bottom: .4em;
  padding: 4px 10px;
  border: 2px solid #ddd;
  display: inline-block;
}
.geo-short-results-item button {
  background-color: #ddd;
  margin: -5px -10px -5px 5px;
  padding: .8em 1.2em;
  font-size: .8em;
  box-shadow: none;
  line-height: 1.2;
}

/*Single-campus reports*/
.mo-campus-map {
  position: relative;
}

.mo-campus-map .campus-pin {
  position: absolute;
}

.campus-data-sheet .impact-page-header {
  /*margin-bottom: 1.8em;*/
}

.campus-data-sheet .campus-page-header h1 {
  padding: .2em .6em;
  margin-bottom: .8em;
  background-color: #EAEAEA;
}

/*
MU Gold: #F1B82D
UMKC Blue: #0066cc
UMKC Gold:  #FFdd00
UMSL Red: #981E32
UMSL Gold: #EAAB00
MST Apple: #509E2F
MST Miner Green: #007A33
*/
.campus-data-sheet.umc .campus-page-header h1 {
  background-color: #000;
  color: #FFF;
}
.campus-data-sheet.umkc .campus-page-header h1 {
  background-color: #0066cc;
  color: #FFF;
}
.campus-data-sheet.umsl .campus-page-header h1 {
  background-color: #981E32;
  color: #FFF;
}
.campus-data-sheet.mst .campus-page-header h1 {
  background-color: #007A33;
  color: #FFF;
}

/* Financial aid awards vis */
.financial-aid-vis h5 {
  margin-bottom: .2em;
  font-size: 1.2em;
  font-weight: 500;
}
.financial-aid-vis .financial-aid-stats {
  min-height: 102px;
}
.pdf-body .financial-aid-vis .financial-aid-stats {
  min-height: 68px;
}
.financial-aid-vis .key-figure {
  font-weight: 500;
  font-size: 1.4em;
  display: block;
  margin-top: 1em;
}
.financial-aid-vis .minor-text {
  font-size: .7em;
  display: inline-block;
}
.financial-aid-vis .financial-aid-stats span {
  position: relative;
}
.financial-aid-vis .financial-aid-stats::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(255,255,255,0.8);
}
.financial-aid-vis .financial-aid-students {
  position: relative;
  background-image: url(../images/students-mu.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.financial-aid-vis .financial-aid-students.umkc {
  background-image: url(../images/students-umkc.png);
}
.financial-aid-vis .financial-aid-students.st {
  background-image: url(../images/students-st.png);
}
.financial-aid-vis .financial-aid-students.umsl {
  background-image: url(../images/students-umsl.png);
}
.financial-aid-vis .financial-aid-awarded {
  position: relative;
  background-image: url(../images/alt-financial-aid-mu.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.financial-aid-vis .financial-aid-awarded.umkc {
  background-image: url(../images/alt-financial-aid-umkc.png);
}
.financial-aid-vis .financial-aid-awarded.st {
  background-image: url(../images/alt-financial-aid-st.png);
}
.financial-aid-vis .financial-aid-awarded.umsl {
  background-image: url(../images/alt-financial-aid-umsl.png);
}
.dollar-return-container {
  position:  relative;
}
.dollar-return-value {
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  top: 1.1em;
  line-height: 1.2;
}
.dollar-value {
  display: block;
  font-size: 1.25em;
  font-weight: bold;
}
.data-updated-statement p {
  text-align: center;
  color: #981E32;
  font-weight: bold;
  font-size: 1.1em;
}

/* Modal */
.modal-content {
  display: none;
}
.modalToggle {
  background-color: #f0f0f0;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #ccc;
  vertical-align: middle;
  margin-left: .5em;
}
.modal-mask {
  position: fixed;
  z-index: 199998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}
.modal-cancel-button {
  position: sticky;
  top: 0;
  float: right;
}
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.modal-container {
  width: 100vw;
  height: 100vh;
  padding: 20px 30px;
  background-color: #fff;
  transition: all 0.3s ease;
  overflow-y: scroll;
  position: relative;
  text-align: left;
}
.no-button-styling {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
}
.no-button-styling:hover {
  background: transparent;
}
.no-button-styling.underline {
  cursor: pointer;
  text-decoration: underline;
}
@media (min-width:36em) {
  .modal-container {
    width: 50vw;
    height: 50vh;
    margin: 0px auto;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  }
}
.modal-header h3 {
  margin-top: 0;
  /*color: #42b983;*/
  /*color: var(--accentColorMain);*/
}
.modal-body {
  margin: 20px 0;
}
.modal-footer {
  padding-bottom: 20px;
}
.modal-default-button {
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}
.modal-leave-active {
  opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* PDF styling */
.loading-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loading-ellipsis span {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ddd;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-ellipsis span:nth-child(1) {
  left: 8px;
  animation: loading-ellipsis1 0.6s infinite;
}
.loading-ellipsis span:nth-child(2) {
  left: 8px;
  animation: loading-ellipsis2 0.6s infinite;
}
.loading-ellipsis span:nth-child(3) {
  left: 32px;
  animation: loading-ellipsis2 0.6s infinite;
}
.loading-ellipsis span:nth-child(4) {
  left: 56px;
  animation: loading-ellipsis3 0.6s infinite;
}
@keyframes loading-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loading-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loading-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/*PDF work*/
.web-report .pdf-only {
  display: none;
}
body.pdf-body.impact-data-sheet {
  background-color: white;
}
.pdf-body .no-pdf {
  display: none !important;
}
.pdf-body {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
}
.pdf-body p,
.pdf-body li {
  font-size: 11px;
  line-height: 1.4;
}
.pdf-body .pdf-column > .Grid--guttersXl {
  margin-bottom: 0;
}

.new-page-start {
  page-break-before: always !important;
}
.impact-data-page-section {
  position: relative;
  /*page-break-inside: avoid !important;*/
}

.pdf-body .data-item-list li {
    margin-bottom: 0;
}
.pdf-body .county-breakdown-list > li {
    margin-bottom: 1em;
}

.pdf-body .Grid--guttersXl {
    margin: -1em 0 1em -1em;
}
.pdf-body .Grid--guttersXl > .Grid-cell {
    padding: 1em 0 0 1em;
}

.pdf-body .iconized-text img {
  max-width: 48px;
}
.pdf-body .image-atop-column img {
  max-width: 48px;
}
.impact-data-sheet .Media {
  margin-bottom: 0;
}
.district-map svg {
  max-width: 90%;
  max-height: 210px;
}
.financial-aid-chart-container {
  max-width: 100%;
  padding-right: 5%;
}
.legacy-geog-section-header-button {
  display: block;
  width: 99%;
  text-align: left;
  font-size: .75em;
}
.legacy-geog-section-header-button span::before {
    content: ' ';
    display: inline-block;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #666;

    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);

    transition: transform .2s ease-out;
}
.legacy-geog-section-header-button.expanded span::before {
    transform: rotate(90deg) translateX(-3px);
}

.legacy-geography-list {
  margin-left: 0;
  padding-left: 1.5em;
  -webkit-columns: 5 200px;
  -moz-columns: 5 200px;
  columns: 5 200px;
}

.intro-text {
  display: none;
}