@import "variables.css";
/**Image classes**/
.right{
 float:right;
 margin: 5px;
 display:table;
 max-width: 100%;
}
.left{
 float:left;
 margin: 10px;
 display:table;
 max-width: 100%;
}
.full-width,
.fullwidth{
 float:left;
 margin: 10px auto;
 display:table;
 width:100%;
}
.full-width img,
.fullwidth img{
 width:100%;
}

@media (max-width: 480px) {
  .right, .left{
    float:left;
    margin: 10px;
    display:table;
    width: 100%;
  }
  figure.right img, figure.left img {
    width: 100%;
  }
}
/** Caption Styling **/
figure figcaption,
figure.align-right figcaption,
figure.align-center figcaption,
figure.align-left figcaption {
  margin-top: 5px;
  display: table-caption;
  caption-side: bottom;
  font-style: italic;
  font-size: .8em;
  color: var(--dkgrey);
}
.hsmblog figure figcaption,
.hsmblog figure.align-right figcaption,
.hsmblog figure.align-center figcaption,
.hsmblog figure.align-left figcaption {
  margin: 5px;
  display: table-caption;
  caption-side: bottom;
  font-style: italic;
  font-size: .8em;
  color: var(--dkgrey);
}
figure.left figcaption,
figure.right figcaption,
figure.fullwidth figcaption,
figure.full-width figcaption {
  margin-top: 5px;
  display: table-caption;
  caption-side: bottom;
  font-style: italic;
  font-size: .8em;
  color: var(--dkgrey);
}
.hsmblog figure figcaption a,
.hsmblog figure.align-right figcaption a,
.hsmblog figure.align-center figcaption a,
.hsmblog figure.align-left figcaption a {
  font-style: italic;
  font-size: .95em;
}
#block-views-block-cards-block-4 img{
  width: 100%;
}

/* See also: ckeditor5.css */
.purple{
  color: var(--purple);
}
.gold-uni{
  font-family:"uni sans";
  font-size:1.5em;
  color:var(--gold);
}
.metallicgold-uni {
  font-family: "uni sans";
  font-size: 1.5em;
  color: var(--metallicgold);
}
.purple-uni{
  font-family:"uni sans";
  font-size:1.5em;
  color:var(--purple);
}
.white-uni{
  font-family:"uni sans";
  font-size:1.5em;
  color:white;
  text-transform:uppercase;
}

/** gives links a button-like look**/
/* See also: ckeditor5.css */
.link{
  font-family:uni sans;
  font-size:.95em;
  font-weight: bold;
  color:var(--purple);
  margin: 5px;
}
.link:hover{
  color: var(--purple);
  text-decoration: underline;
}
.link::after{
  content: "\2002\276F";
}
.link a{
  font-family:uni sans;
  font-size:.95em;
  font-weight: bold;
  color:var(--purple);
  margin: 5px;
}
.link a:hover{
  color: var(--purple);
  text-decoration: underline;
}

/* See also: ckeditor5.css */
.smbtn{
  font-family:uni sans;
  font-size:1em;
  font-weight: bold;
  color:var(--purple);
  text-transform: uppercase;
}
.smbtn:hover{
  color: var(--purple);
  text-decoration: underline;
}
.smbtn::after{
    content: "\2002\276F";
}

/* See also: ckeditor5.css */
.mdbtn{
  font-family:uni sans;
  font-size:1.1em;
  font-weight: bold;
  color:#ffffff;
  background-color: var(--purple);
  padding: 3px 10px 2px 10px;
  display: inline-block;
  text-transform: uppercase;
}
.mdbtn:hover{
 color: var(--ltgrey);
 text-decoration: underline;
}
.mdbtn::after{
  content: "\2002\276F";
}

/* See also: ckeditor5.css */
.lgbtn{
  font-family:uni sans;
  font-size:17px;
  font-weight: bold;
  color:var(--purple);
  background-color: rgba(51, 0, 111, .1);
  padding: 6px 7px 5px 7px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--purple);
  display: inline-block;
}
.lgbtn:hover,
.lgbtn:focus{
  font-family:uni sans;
  font-size:17px;
  font-weight: bold;
  color:var(--purple);
  background-color: rgba(51, 0, 111, .1);
  padding: 7px 7px 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--purple);
  display: inline-block;
}
.lgbtn-white{
  font-family: uni sans;
  font-size:17px;
  font-weight: bold;
  color:#ffffff;
  background-color: rgba(255, 255, 255, .1);
  padding: 7px 7px 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
  display: inline-block;
}
.lgbtn-white:hover{
  font-family: uni sans;
  font-size:17px;
  font-weight: bold;
  color:#ffffff;
  background-color: rgba(255, 255, 255, .1);
  padding: 7px 7px 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
  display: inline-block;
}
.lgbtn::after,
.lgbtn-white::after{
  content: "\2002\276F";
}
/* @media (max-width: 768px){

  .smbtn{
    font-size:1em;
    text-transform: uppercase;
  }
  .mdbtn{
    font-size:1em;
    padding: 3px 10px 2px 10px;
    display: inline-block;
    margin:10px 10px 10px 10px;
    text-transform: uppercase;
  }
  .lgbtn{
    font-size:1.1em;
    display: inline-block;
    text-transform: uppercase;
  }
  .lgbtn:hover{
    font-size:1.1em;
    display: inline-block;
    text-transform: uppercase;
  }
  .lgbtn-white{
    font-size:1.1em;
    display: inline-block;
    text-transform: uppercase;
  }
  .lgbtn-white:hover{
    font-size:1.1em;
    display: inline-block;
    text-transform: uppercase;
  }

} */

@media (max-width: 768px){
  .smbtn{
    font-size:1em;
  }
  .mdbtn{
    font-size:1em;
    padding: 3px 10px 2px 10px;
    display: inline-block;
    margin:10px 10px 10px 10px;
  }
  .lgbtn{
    font-size:1.1em;
    display: inline-block;
  }
  .lgbtn:hover{
    font-size:1.1em;
    display: inline-block;
  }
  .lgbtn-white{
    font-size:1.1em;
    display: inline-block;
  }
  .lgbtn-white:hover{
    font-size:1.1em;
    display: inline-block;
  }
}

/** caption styling pulled from elsewhere **/
/* Override Bartik's default blockquote and pre styles when captioned. */
.caption-pre > pre,
.caption-blockquote > blockquote {
  margin: 0;
}
.caption-blockquote > figcaption::before {
  content: "— ";
}
.caption-blockquote > figcaption {
  text-align: left; /* LTR */
}
[dir="rtl"] .caption-blockquote > figcaption {
  text-align: right;
}

/** Fast Facts **/
.factshead {
  text-align: center;
  margin: 2rem 0 2rem 0;
}
.flexy{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.fact{
  flex:none;
  padding: 0px 60px 30px 60px;
}
.fact img{
  display: block;
  margin: auto;
  height: 100px;
}
.fact p{
  text-align: center;
  font-size: 17px;
}
.fact-4{
   flex:none;
   padding: 0px 40px;
 }
 .fact-4 img{
   display: block;
   margin: auto;
   max-height: 100px;
 }
 .fact-4 p{
   text-align: center;
   font-size: 17px;
 }



@media only screen and (max-width: 975px) {
 .fact{
    flex:none;
    padding: 15px 40px 15px 40px;
  }
}

div.region.region-pre-footer{
 margin: 10px 2% 40px 2%;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
}
#block-cleanwaterexperts,
#block-cleanairexperts,
#block-safefoodexpert,
#block-safeworkplacesexperts,
#block-sustainablecommunitiesexperts {
 width: 1170px;
 max-width: 100%;
}
.columns {
 display: grid;
 grid-template-columns: 200px 200px auto;
 grid-template-rows: auto
}
.first {
 grid-column: 1;
 grid-row: 1;
 justify-self: start;
 align-self: start;
}
.second{
 grid-column: 2;
 grid-row: 1;
 justify-self: start;
 align-self: start;
}
/*Buttons*/

#edit-submit-student-research,
button#edit-submit-student-research,
button#edit-submit-faculty-page,
button#edit-submit-student-research-cards,
button#edit-submit-alumni-profiles,
[id^='edit-submit-research'],
button#edit-submit-profile-directory,
button#edit-submit-deohs-solr-search,
button#edit-submit-faculty-landing-page-2019,
[id^='edit-submit-resources-cards'] {
  color: #fff;
  background-color: var(--purple);
  border-color: var(--purple);
}
#edit-submit-alumni-profiles
div.author {
  display:none;
}
/** Styling full paginators**/
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857;
  text-decoration: none;
  color: var(--purple);
  background-color: #fff;
  border: 1px solid var(--purple);
  margin-left: -1px;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857;
  text-decoration: none;
  color: var(--purple);
  background-color: var(--ltgrey);
  border: 1px solid var(--purple);
  margin-left: -1px;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: var(--purple);
  border-color: var(--purple);
  cursor: default;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span{
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
.select-wrapper:after{
  color:var(--purple);
}
/** Front page multi-sites **/
body.multi-site div.content_middle section,
body.multi-site div.content_bottom section{
  padding: 20px;
}
@media only screen and (max-width: 768px) {
  body.multi-site div.content_middle section,
  body.multi-site div.content_bottom section{
    padding: 20px;
    width: 100%;
  }
}
/** pop-up styling **/

/* Restyle pop ups
Where on the site should it be effecting: Pop ups on all UG pages
What should it be doing on the page/s: background should be purple text should be white
*/


.spb-popup-main-wrapper {
      position: fixed;
      padding: 5px;
      border: none;
      z-index: 999999;
      background-color: var(--purple);
      margin-bottom: 10px;
  }
.spb_close {
    border: none;
    cursor: pointer;
    float: right;
    margin: 3px;
    padding: 0 10px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0);
    font-size: 20px;
}
.spb_minimize {
    border: none;
    cursor: pointer;
    float: right;
    margin: 3px;
    padding: 0 11px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0);
    font-size: 20px;
}
.spb_minimized {
    background: var(--purple) none repeat scroll 0 0;
    border: none;
    border-radius: 50%;
    bottom: 30px;
    cursor: pointer;
    padding: 20px;
    position: fixed;
    right: 20%;
    z-index: 999999;
    display: none;
}
div.popup h3,
div.popup p {
  color: #ffffff;
}
div.popup a {
  color: white;
}
div.popup a:hover,
div.popup a:focus {
  color: white;
}
@media only screen and (max-width: 768px){
  div.simple-popup-blocks-global,
  #spb-block-ctapopup,
  #spb-block-advisorpopup {
    display: none;
  }
}

/** Newsletter popup **/
/* Prevents popup from displaying on page load */
.block-newsletterpopup-modal {
  display: none;
}
#spb-block-newsletterpopup .spb-popup-main-wrapper {
  background-color: #fff;
  box-shadow: -2px 1px 4px rgb(0 0 0 / .2);
  padding-right: 0;
}
#spb-block-newsletterpopup .spb_close {
  color: #767676;
  font-size: 2rem;
}
#spb-block-newsletterpopup .media {
  padding: 1rem;
  width: 25rem;
}
#spb-block-newsletterpopup .media > .media-left {
  padding-right: 1rem;
}
#spb-block-newsletterpopup .media > .media-left > img {
  max-width: 55px !important;
  padding: 0 5px 0 0;
}
#spb-block-newsletterpopup .media > .media-body {
  padding-right: 2rem;
}
#spb-block-newsletterpopup .media > .media-body > .col-xs-6:nth-of-type(1) {
  padding: .5rem .25rem .5rem 0;
}
#spb-block-newsletterpopup .media > .media-body input, #spb-block-newsletterpopup .media > .media-body button {
  border-radius: 5px;
}
#spb-block-newsletterpopup .media > .media-body > .col-xs-6:nth-of-type(2) {
  padding: .5rem 0 .5rem .25rem;
}
#spb-block-newsletterpopup .media > .media-body > .col-xs-12 {
  padding: 0;
}
#spb-block-newsletterpopup .media > .media-body > .col-xs-12 > input {
  display: inline;
  width: 70%;
  height: unset;
  border-right: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -5px;
}
#spb-block-newsletterpopup .media > .media-body > .col-xs-12 > button {
  display: inline;
  width: 30%;
  font-weight: bold;
  background-color: var(--purple);
  border: 1px solid var(--purple);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/** Variable filter styling **/

div.form-control{
  border: none;
  box-shadow: none;
  width: auto !important;
  min-width: 216px;
  padding: 6px 0px;
  margin: 0px 12px;
  height: auto;
}
#edit_field_degree_option_target_id_chosen{
  min-width: 550px;
}
.form-control {
  box-shadow: none;
}
div.form-control:focus {
  border: 1px solid #ccc;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.chosen-container-multi .chosen-choices li.search-choice {
    position: relative;
    margin: 3px 5px 3px 0;
    padding: 3px 20px 3px 5px;
    border: none;
    max-width: 100%;
    border-radius: 3px;
    background-color: var(--purple);
    background-image: none;
    background-image: none;
    background-size: 100% 19px;
    background-repeat: none;
    background-clip: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #ffffff;
    line-height: 13px;
    cursor: default;
}

.chosen-container-multi .chosen-choices {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 5px;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-image: none;
    background-image: none;
    cursor: text;
  }

  .chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    z-index: 1010;
    width: 100%;
    border: 1px solid #aaa;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 0;
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    clip: none;
    -webkit-clip-path: none;
    clip-path: none;
    margin-top: -8px;
  }

  .chosen-container .chosen-results {
    color: var(--purple);
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0 4px 4px 0;
    padding: 0 0 0 4px;
    max-height: 240px;
    -webkit-overflow-scrolling: touch;
  }

.chosen-container .chosen-results li.highlighted{
  background-color: var(--purple);
  background-image: none;
}
/** div.view-guides-faculty a{
  padding:0px;
  margin:0px;
} **/

.hearing input, input[type="radio"], input[type="checkbox"]{
  margin: 10px;
}
body > div.dialog-off-canvas-main-canvas > div.main-container.container.js-quickedit-main-content > div > div > div > nav > ul > li.active > a,
body > div.dialog-off-canvas-main-canvas > div.main-container.container.js-quickedit-main-content > div > div > div > nav > ul > li > a {
  padding: 7px;
  font-size: 14px;
  margin: 0px;
}
/** Search **/
body.path-deohs-solr-search div.views-field-title a::after{
    content: "\2002\276F";
}

/***---------------Tables using Bootstrap grid system-------------------***/
/* Scrolling table fallback as default */
.grid-table {
  overflow-x: scroll;
}
.grid-table .row {
  display: flex;
  width: 1200px;
  font-weight: bold;
}
/* Normal font weight for data cells */
.grid-table .row > .data {
  font-weight: normal;
}
/* Increased row height with class .height-normal on .row elements */
.grid-table .row.height-normal > * {
  height: 60px;
}
/* Default cell styles */
.grid-table .row > * {
  border: 1px solid #ccc;
  padding: .25rem;
  text-align: center;
  background: #fff;
}
/* No border on top of table */
.grid-table .row:first-child > * {
  border-top: none;
}
/* No border on left of table */
.grid-table .row > *:first-child {
  border-left: none;
}
/* No border on right of table */
.grid-table .row > *:last-child {
  border-right: none;
}
/* Thinner border on data rows */
.grid-table .row:nth-of-type(1n+3) > * {
  border-bottom: none;
}
/* Title bar and column header */
.grid-table #brucellosisCaption1 > *, .grid-table #brucellosisCaption2 > * {
  width: 83.33333%;
  border: 0;
  background: var(--purple);
  color: #fff;
  text-align: left;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.grid-table div[role=columnheader] {
  background: #f5f5f5;
  border-top: none;
  border-bottom: 1px solid #ccc;
}
.grid-table.title-bar div[role=rowgroup]:nth-child(2) > .row > * {
  border-bottom: 2px solid #ccc;
}
.grid-table.title-bar div[role=rowgroup]:nth-child(2n+1) > .row > * {
  border-bottom: none;
}
/* Utility classes for no border (empty cell specialty case) */
.grid-table .row > .border-no-top {
  border-top: none;
}
.grid-table .row > .border-no-bottom {
  border-bottom: none;
}
.grid-table .row > .border-no-right {
  border-right: none;
}
.grid-table .row > .border-no-left {
  border-left: none;
}
/* Utility class for left aligned cells */
.grid-table.left-cells .row > * {
  text-align: left;
}
/* Utility class for thicker cell padding */
.grid-table.padded-cells .row > * {
  padding: .5rem;
}
/* Utility class for smaller font size (fix) */
.grid-table.small .row p {
  font-size: 100%;
}
/* Utility class for striped rows */
.grid-table.striped .row:nth-of-type(2n+3) > * {
  background: #f5f5f5;
}
/* Utility class for narrow table width */
.grid-table.narrow .row {
  width: 600px;
}
.grid-table.narrow .row > .col-xs-4:first-child {
  width: 33.33333%!important;
}
.grid-table.narrow.title-bar > .row:first-child > * {
  width: 100%!important;
}
@media (min-width: 1030px) {
  /* Prevents scrolling when full table can be shown */
  .grid-table {
   overflow-x: hidden;
  }
}
/* Remove margin-bottom on disclaimers */
.small.disclaimer {
  margin-bottom: 0;
}
/***---------------Bootstrap accordion styling overrides-------------------***/
/* Retains full width for panel headings on mobile */
@media only screen and (max-width: 768px){
  .panel-default > .panel-heading {
    width: 100%!important;
  }
}
/* Removes default border and box-shadow */
.panel-group .panel {
  border: none!important;
  box-shadow: unset!important;
}
/* Panel heading styling for brand colors, half width, and padding */
.panel-default > .panel-heading {
  border: transparent;
  background-color: var(--ltgrey);
  color: var(--purple);
  padding: 1rem 15px;
  border-radius: 3px;
}
/* Hides border-top on expanded panels */
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: transparent;
}
/* Glyph for expanded panels */
.panel-default > .panel-heading a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.33em;
  line-height: .9;
  color: var(--purple);
  float: right;
  content: "\f107";
}
/* Glyph for collapsed panels */
.panel-default > .panel-heading a.collapsed:after {
  content: "\f105";
}
/* COHR Training Modules page-specific overrides */
.cohr-training-modules > .panel-default > .panel-heading {
  cursor: pointer;
  width: 100%;
}
.cohr-training-modules > .panel-default > .panel-collapse > .panel-body > iframe {
  margin-top: .5rem;
}
.cohr-training-modules > .panel-default > .panel-collapse > .panel-body > .row.resource-links {
  margin: 2rem 0;
  padding: 1rem;
  background: var(--ltgold);
}
.cohr-training-modules > .panel-default > .panel-collapse > .panel-body > .row.resource-links hr {
  border-color: var(--gold);
}
.cohr-training-modules > .panel-default > .panel-collapse > .panel-body > .row.resource-links p:last-child {
  margin-bottom: 1rem;
}
.cohr-training-modules > .panel-default > .panel-collapse > .panel-body > .row.resource-links p.h3 {
  margin-top: 1rem;
}
/***---------------References-------------------***/
.references ol li {
  padding: .25rem 0;
}
.references ol li:target {
  background-color: #def;
}
/***---------------Bootstrap tabs styling overrides-------------------***/
.nav-tabs li {
  margin:5px;
  float:left;
  list-style:none;
}
.nav-tabs > li > a {
  padding:9px 15px;
  display:inline-block;
  background: var(--ltgrey);
  font-size:17px;
  font-weight:600;
  color:#4c4c4c;
  transition:all linear 0.15s;
  border-radius: 0px;
  border: 0px;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: white;
  text-decoration:none;
  border-left: 3px;
  border-left-style: solid;
  border-left-color: var(--purple);
  border-radius: 0px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: var(--ltgrey);
  color: var(--purple);
  border-left: 3px;
  border-top: 0px;
  border-bottom: 0px;
  border-right: 0px;
  border-left-style: solid;
  border-left-color: var(--purple);
  border-radius: 0px;
}

.nav-tabs {
    border-bottom: 0px;
}

/*----- Content of Tabs -----*/

.tab-content > div.tab-pane {
  padding:10px 20px 20px 20px;
  background:#e5e5e5;
  margin: 0px 5px;
}

.tab-content > div.tab-pane {
  display:none;
}

.tab-content > div.tab-pane.active {
  display:block;
}
.tab-content > div.tab-pane a{
  color: var(--purple);
}

/*Bar CHart CSS*/
.verticalChart {
  width:100%;
}
.verticalChart .singleBar {
  width: 2.8%;
  background: gray;
  float:left;
  margin-left:0.5%;
  margin-right:0.5%;
}
.verticalChart .singleBar .bar {
  position:relative;
  height: 104px;
  background:white;
  overflow:hidden;
  padding-top: 1em;
}
.verticalChart .singleBar .bar .value {
  position:absolute;
  bottom:0;
  width:100%;
  background: var(--purple);
  color:#ffffff;
}
.verticalChart .singleBar .bar span {
  position:absolute;
  font-size:10px;
  color:var(--purple);
  /* text-shadow:0px -1px 0px #ffffff, 0px 1px 0px #ffffff, 1px 0px 0px #ffffff, -1px 0px 0px #ffffff, -1px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px 1px 0px #ffffff, 1px -1px 0px #ffffff;
  display:none; */
  text-align:center;
}

.verticalChart .singleBar .title {
  margin-top:5px;
  text-align:center;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 10px;
}

.aoeChart2 {
  width:100%;
}
.aoeChart .singleBar {
  width: 15%;
  background: gray;
  float:left;
  margin-left:0.5%;
  margin-right:0.5%;
}
.aoeChart .singleBar .bar {
  height: 150px;
}

.aoeChart .singleBar .bar span {
  padding-left: 2em
}

/* turn off auto sizing on images */
.cohr-faculty-staff-img {
  height: 200px;
}

.teris-faculty-staff-img {
  width: 150px;
}