/**
 *  Development CSS work that will be incorporated 
 *  into the main style.sccs or site-overrides.css file. Can work on css
 *  here without recompiling scss files for each change.
 * 
 */
 
/*
.node-41 .col-img {
  width: 33% !important;
  border: 1px solid #444444;
}

.node-41 .col-txt {
  width: 67% !important;
}
*/

/*
 *   Gutters
 */

/*
.row {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}
*/

/*
.container, 
.container-fluid, 
.container-sm, 
.container-md, 
.container-lg, 
.container-xl, 
.container-xxl {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}
*/

/*
* {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}
*/

#page-hero aside.container {
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}


/*
 *  Work In Progress 
 */

.field--name-node-title {
  /*margin: 3rem 0 1rem 0;*/
}

.sidebar h2,
.sidebar h2 > * {
  font-size: 1.8rem;
  line-height: 2rem;
}

#page-wrapper.page-title-justification-left .field--name-node-title h2 {
  text-align: left;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: auto;
  margin: 15px 5%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

#page-wrapper.page-title-justification-right .field--name-node-title h2 {
  text-align: right;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: auto;
  margin: 15px 5%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

#page-wrapper.page-title-justification-left .field--name-field-page-title-display-icon,
#page-wrapper.page-title-justification-right .field--name-field-page-title-display-icon {
  display: none;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#page-wrapper.page-title-color-black .field--name-node-title h2 {
  color: #000;
} 
#page-wrapper.page-title-color-osu-orange .field--name-node-title h2 {
  color: #D73F09;
} 
#page-wrapper.page-title-color-white .field--name-node-title h2 {
  color: #FFF;
} 
#page-wrapper.page-title-color-gray .field--name-node-title h2 {
  color: #444;
} 





/** 
 *    Page Header & Navbar/Branding 
 */

/* Adjustment for Fixed Header */

header#header {
  width: 100%;
  border-bottom: 2px solid #888;
  /*border-top: 2px solid black;*/
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
  z-index: 1030;
  position: fixed;
  top: 0;
  /*height: 168px;*/
}

body {
  padding-right: 0 !important;
  overflow: initial !important;
}

body.user-logged-in header#header {
  position: initial;
  /*overflow: clip !important;*/
}

div#main-wrapper {
  /*margin-top: 168px;*/
  /*margin-top: 132px;*/
  /* Full height Including Secondary Menu
  122px
  46px
  */
}

body.user-logged-in div#main-wrapper {
  margin-top: inherit !important;
}

nav#secondary_navbar {
  padding: 0 !important;
  background-color: black;
}

header .nav-link {
  padding: 5px 10px !important;
} /* Forcing exact measurements on header nav links */

div.container-second-navbar {
  padding: 0 !important;
  background-color: transparent !important;
}

/*  Header hack that I think I can remove... 
    holding onto it for just a bit 
*/
/*
header#header .row > * {
  width: unset !important;
}
*/

header#header .navbar-branding {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

header#header .navbar-toggler {
  border: none !important;
}

header#header .navbar-toggler:focus {
  border: 0 !important;
}

header#header .navbar {
  --bs-navbar-color: transparent !important;
  --bs-navbar-padding-y: 0;
}

header#header button#navbar-toggler-button {
  border: 1px solid transparent !important;
  background-color: transparent !important;
}

header#header button#navbar-toggler-button:hover {
  border: 1px solid white !important;
}

header#header .osu-brand {
  display: flex;
  margin-left: .5rem;
  margin-right: .5rem;
  align-items: center;
}

header#header .nav-details {
  display: flex;
  margin-left: .5rem;
  margin-right: .5rem;
  flex-flow: column;
  justify-content: center;
}

header#header img.osu-logo {
  /*width: 170px !important;*/
  height: 45px;
}

header#header .site-name-slogan {
  font-size: .9rem;
  line-height: 1rem;
  color: #fff;
}

header#header div.cof-linkback,
header#header div.cof-linkback a,
header#header div.cof-linkback a:visited,
header#header div.cof-linkback a:active {
  font-family: 'Stratum2Web', sans-serif;
  font-size: 1em;
  line-height: 1.8em;
  padding: 0 !important;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  margin-left: .5rem;
  margin-right: .5rem;
}

header#header div.cof-linkback a:hover {
  text-decoration: underline;
}

header#header div.site-name p,
header#header div.site-name a,
header#header div.site-name a:visited,
header#header div.site-name a:active {
  font-family: 'Stratum2Web', sans-serif;
  /*font-size: 1.4em;*/
  font-size: 2em;
  line-height: normal;
  font-weight: 500;
  padding: 0 !important;
  margin: .4rem auto;
  color: #fff;
  text-decoration: none;
}

header#header div.site-name a:hover {
  text-decoration: underline;
}


/**
 *  Handling Header Wrapping Points 
 **/

@media only screen and (max-width: 992px) {
  #page-wrapper.header-wrap-md .container-navbar {
    flex-wrap: wrap;
  }

  #page-wrapper.header-wrap-md .collapsingmainnavbar {
    width: 100%;
    border-top: 1px solid #000000;
  }
}


@media only screen and (max-width: 768px) {
  #page-wrapper.header-wrap-md .container-navbar {
    flex-wrap: wrap;
  }

  #page-wrapper.header-wrap-sm .collapsingmainnavbar {
    width: 100%;
    border-top: 1px solid #000000;
  }
}

@media only screen and (max-width: 576px) {
  #page-wrapper.header-wrap-md .container-navbar {
    flex-wrap: wrap;
  }

  #page-wrapper.header-wrap-xs .collapsingmainnavbar {
    width: 100%;
    border-top: 1px solid #000000;
  }
}

/** 
 * End Handling Header Wrapping Points 
 **/



/** Main/Primary Navbar Menu **/

header#header ul.nav li.nav-item a.nav-link,
header#header ul.nav li.nav-item a.nav-link:visited {
  font-family: 'Stratum2Web', sans-serif;
  font-size: 1.1rem;  
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

header#header ul.nav li.nav-item a.nav-link:hover,
header#header ul.nav li.nav-item a.nav-link:active {
  color: #000000;
  text-decoration: underline;
}

header#header ul.nav li.nav-item a.nav-link.is-active {
  color: #000000;
}


/** Audience/Secondary Navbar Menu **/

header#header nav#secondary_navbar a.nav-link,
header#header nav#secondary_navbar a.nav-link:visited {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
  border-bottom: 2px solid transparent;
}

header#header nav#secondary_navbar a.nav-link:hover,
header#header nav#secondary_navbar a.nav-link:hover {
  color: #fff;
  text-decoration: none;
  background-color: #D73F09;
  border-bottom: 2px solid #D73F09;
}

header#header nav#secondary_navbar a.nav-link.is-active {
  border-bottom: 2px solid #D73F09;
}











/**
 *     Sidebar Work
 */

/*
#sidebar_second.collapsible-sidebar-nav .navbar-collapse {
  display: block !important;
}
*/



/** 
 *    Sidebars 
 */

@media only screen and (min-width: 992px) {
  /*
  aside#collapsingsidebar {
    display: block !important;
  }
  button#sidebar-toggle {
    display: none !important;
  }
*/
}

div.sidebar-button-wrapper.sidebar-button-wrapper-bottom {
  float: right;
}

div.sidebar-button-wrapper.sidebar-button-wrapper-top {
  text-align: right;
}

button#sidebar-toggle {
  margin-right: 0;
  padding: .25rem .5rem;
  font-size: .875rem;
  border-radius: .2rem;
}

.sidebar {
  background-color: #dee5e7;
  height: initial !important;
}

.sidebar .block {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
} /* For some reason sidebar.css loads in a different order between sites - track down. */

.sidebar nav ul.nav {
  margin: 0 !important;
}

.sidebar_first h2 {
  background-color: #222222;
  color: #fff;
  text-transform: uppercase;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 2.5rem 1rem 1rem 1rem !important;
  text-align: left !important;
}

.sidebar_second h2 {
  background-color: #222222;
  color: #fff;
  text-transform: uppercase;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 2.5rem 1rem 1rem 1rem !important;
  text-align: left !important;
}

.sidebar ul li {
  display: block !important;
  width: 100% !important;
}

.sidebar ul li a,
.sidebar ul li a:visited {
  background-color: #444444;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1rem !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.sidebar ul li a:hover,
.sidebar ul li a:active,
.sidebar ul li a.active {
  color: #fff;
  background-color: #D73F09;  
}

.sidebar_first {
  padding-left: 0 !important;
  padding-right: 15px !important;
  padding-top: 0 !important;
}

.sidebar_second {
  padding-left: 15px !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}


/** Collapsed Sidebar **/

@media only screen and (max-width: 972px) {
  div.sidebar {
    padding-left: 15px !important;
    padding-right: 15px !important;
    /*
    padding-bottom: 20px !important;
    margin-bottom: 10px !important;
    */
  }
}



#sidebar_second.collapsible-sidebar-nav .navbar-collapse #block-sidebarmenu {
  width: 100% !important;
}








/** 
 *    Footer 
 */

.site-footer {
  background: #000000 !important;
  color: #fff;
  border-top: 3px solid #D73F09;
  margin-top: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.site-footer .container-fluid {
  /*
  --bs-gutter-x: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  */
  padding-left: 15px;
  padding-right: 15px;
}

.site-footer,
.site-footer p,
.site-footer a,
.site-footer .content {
  font-size: .95em !important;
  color: #fff !important;
  /*font-size: 14px !important;*/
}

.site-footer .block {
  margin: 0 !important;
  padding: 0 !important;
  border: initial !important;
}

.site-footer .navbar-nav .nav-link {
  padding: 0 !important;
}

.site-footer a,
.site-footer a:visited,
.site-footer a:active {
  background: transparent !important;
  color: #fff;
}

.site-footer a:hover {
  background: transparent !important;
  color: #D73F09 !important;
  text-decoration: underline !important;
}

/*
.site-footer .content .footer-login-link a, 
.site-footer .content .footer-login-link a:visited, 
.site-footer .content .footer-login-link a:active {
  color: #000000;
  text-decoration: none;
}

.site-footer .content .footer-login-link a:hover {
  text-deoration: none;
} 
*/




/** 
 *    Offcanvas Mobile Menu
 */


div#mobile-tools .offcanvas-body {
  padding: 0;
  background-color: #444;
}

div#mobile-tools #sidebar_first_offcanvas,
div#mobile-tools #sidebar_second_offcanvas,
div#mobile-tools #secondary_menu_offcanvas {
  padding: 5px 10px;
}

div#mobile-tools .offcanvas-header {
  width: 100%;
  background-color: #D73F09;
}

div#mobile-tools h1 {
  color: white !important;
  font-family: 'Stratum2Web', sans-serif;
  text-transform: uppercase;  
  font-size: 20pt;
  font-weight: 600;
  line-height: 1em;
  text-align: left;
  margin: 15px auto;
  margin-bottom: 15px;
}

div#mobile-tools h2 {
  color: white;
  background-color: #000;
  background-color: #D3832B;
  background-color: #0D5257;
  font-family: 'Stratum2Web', sans-serif;
  text-transform: uppercase;
  font-size: 16pt;
  font-weight: 600;
  line-height: 1em;
  text-align: left;
  margin: 15px auto;
  margin-bottom: 15px;
  margin: -5px -10px 5px -10px;
  padding: 10px;  
}

div#mobile-tools h2#mobile-site-name {
	margin: 0px;
}

div#mobile-tools ul li {
  display: block;
  width: 100%;
}

div#mobile-tools ul li a, 
div#mobile-tools ul li a:active,
div#mobile-tools ul li a:visited {
  color: white;
  text-decoration: none;
}

div#mobile-tools ul li a:hover {
  background-color: #D73F09;
  color: white;
  text-decoration: none;
}

/* Primary Menu Style */
div#mobile-tools #primary_menu_offcanvas {
  background-color: black;
  padding-bottom: 15px;
}

div#mobile-tools #primary_menu_offcanvas ul li {
  display:inline-block;
  width: 50%;
}

div#mobile-tools #primary_menu_offcanvas ul li a {
  color: white;
  text-align: left;
}

div#mobile-tools.offcanvas .navbar-nav .nav-link {
  padding: .5rem 1rem;
}


/** New rules to replace current **/

main#content div.highlighted {
  margin-top: 0 !important;
}

main#content div#node-content-wrapper {
  margin: initial !important;
  padding: 30px 0 !important;
}

body.node--type-none main#content div#node-content-wrapper {
  padding: 30px 5% !important;
}

main#content div#node-content-wrapper.standard-container {
  padding: 0 5% 30px;
}
.container, .container-xs, .container-sm, .container-md, .container-lg {
  max-width: initial !important;
}

.navbar-toggle-wrapper button {
  margin-right: 0 !important;
 }

.navbar-toggler-wrapper {
  margin-right: 0 !important;
  justify-content: flex-end !important;
}


/**
 **   Header Collapse Handling
 **/

@media only screen and (max-width: 1400px) {
  header#header nav#navbar-main.header-xl-wrap .nav-details {
    order: 99 !important;
    width: 100% !important;
    background-color: black;
    margin: 0 !important;
    padding: 10px 0 !important;
    text-align: center;
  }
  nav#secondary_navbar.header-xl-wrap {
    background-color: #0D5257;
  }
  nav#secondary_navbar.header-xl-wrap #collapsingsecondarynavbar nav ul.nav {
    justify-content: center;
  }
  header#header nav#navbar-main.header-xl-wrap img.osu-logo {
    height: 40px;
  }

  header#header nav#navbar-main.header-xl-wrap div.cof-linkback, 
  header#header nav#navbar-main.header-xl-wrap div.cof-linkback a {
    font-size: 1.2em !important;
    line-height: normal;
    font-weight: 500;
  }

  header#header nav#navbar-main.header-xl-wrap .navbar-branding {
    padding-top: 0;
    padding-bottom: 0;
  }

  .osu-cof-branding {
    display: flex;
    flex-flow: row;
  }

  .cof-linkback.cof-brand {
    align-items: center !important;
  }

} /* end max-width: 1400px */


@media only screen and (max-width: 1200px) {
  header#header nav#navbar-main.header-lg-wrap .nav-details {
    order: 99 !important;
    width: 100% !important;
    background-color: black;
    margin: 0 !important;
    padding: 10px 0 !important;
    text-align: center;
  }
  nav#secondary_navbar.header-lg-wrap {
    background-color: #0D5257;
  }
  nav#secondary_navbar.header-lg-wrap #collapsingsecondarynavbar nav ul.nav {
    justify-content: center;
  }
  header#header nav#navbar-main.header-lg-wrap img.osu-logo {
    height: 40px;
  }
  header#header nav#navbar-main.header-lg-wrap .navbar-branding {
    padding-top: 0;
    padding-bottom: 0;
  }
} /* end max-width: 1200px */

@media only screen and (max-width: 992px) {
  header#header nav#navbar-main.header-md-wrap .nav-details {
    order: 99 !important;
    width: 100% !important;
    background-color: black;
    margin: 0 !important;
    padding: 8px 0 !important;
    text-align: center;
  }
  nav#secondary_navbar.header-md-wrap {
    background-color: #0D5257;
  }
  nav#secondary_navbar.header-md-wrap #collapsingsecondarynavbar nav ul.nav {
    justify-content: center;
  }
  header#header nav#navbar-main.header-md-wrap img.osu-logo {
    height: 40px;
  }
  header#header nav#navbar-main.header-md-wrap .navbar-branding {
    padding-top: 0;
    padding-bottom: 0;
  }
} /* end max-width: 992px */

@media only screen and (max-width: 768px) {
  header#header nav#navbar-main.header-sm-wrap .nav-details {
    order: 99 !important;
    width: 100% !important;
    background-color: black;
    margin: 0 !important;
    padding: 5px 0 !important;
    text-align: center;
  }
  nav#secondary_navbar.header-sm-wrap {
    background-color: #0D5257;
  }
  nav#secondary_navbar.header-sm-wrap #collapsingsecondarynavbar nav ul.nav {
    justify-content: center;
  }
  header#header nav#navbar-main.header-sm-wrap img.osu-logo {
    height: 40px;
  }
  header#header nav#navbar-main.header-sm-wrap .navbar-branding {
    padding-top: 0;
    padding-bottom: 0;
  }

  header#header nav#navbar-main.header-xl-wrap div.cof-linkback, 
  header#header nav#navbar-main.header-xl-wrap div.cof-linkback a {
    font-size: 1em !important;
  }

  header#header div.site-name p,
  header#header div.site-name a {
    font-size: 1.5em;
  }  

  header#header nav#navbar-main.header-xl-wrap img.osu-logo {
    height: 30px;
  }

} /* end max-width: 768px */


@media only screen and (max-width: 576px) {
  header#header nav#navbar-main.header-xs-wrap .nav-details {
    order: 99 !important;
    width: 100% !important;
    background-color: black;
    margin: 0 !important;
    padding: 5px 0 !important;
    text-align: center;
  }
  nav#secondary_navbar.header-xs-wrap {
    background-color: #0D5257;
  }
  nav#secondary_navbar.header-xs-wrap #collapsingsecondarynavbar nav ul.nav {
    justify-content: center;
  }
  header#header nav#navbar-main.header-xs-wrap img.osu-logo {
    height: 40px;
  }
  header#header nav#navbar-main.header-xs-wrap .navbar-branding {
    padding-top: 0;
    padding-bottom: 0;
  }
} /* end max-width: 576px */



/** Toggle code for Navbar Collapsing/Hiding and OffCanvas button **/
@media only screen and (max-width: 0px) {
  header#header .navbar-expand-xs .navbar-toggler {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: end;
  }
}

@media only screen and (max-width: 576px) {
  header#header .navbar-expand-sm .navbar-toggler {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: end;
  }

  header#header div.site-name, 
  header#header div.site-name a, 
  header#header div.site-name a:visited, 
  header#header div.site-name a:active {
    font-size: 1.1em;
  }

  header#header .site-name-slogan {
    visibility:hidden;
    height: 0px;
  }
}

@media only screen and (max-width: 768px) {
  header#header .navbar-expand-md .navbar-toggler {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: end;
  }
}

@media only screen and (max-width: 992px) {
  header#header .navbar-expand-lg .navbar-toggler {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: end
  }
}

@media only screen and (max-width: 1200px) {
  header#header .navbar-expand-xl .navbar-toggler {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: end;
  }
}

/**
  * Secondary Menu
  */

#collapsingsecondarynavbar nav.block-menu ul.nav {
  display: flex !important;
  flex-direction: row;
  align-items: flex-end;
}

#collapsingsecondarynavbar nav ul.nav {
  justify-content: end;
}

/*
body.header-scrolled .site-name-slogan {
  display: none;
}
*/

/**
 *    Overrides for the features section of the page.
 */

.field--name-field-banner-image.field--type-entity-reference {
  margin-bottom: 0 !important;
}

.field--name-field-banner-image.field--type-entity-reference .field--type-image img {
  margin-bottom: 0 !important;
}



/**
 *  Inline Navigation Buttons - Good for random, inline buttons
 */

div.inline-option-buttons {
  text-align: center;
}

div.inline-option-buttons div.orange-button {
  width: 200px;
  display: inline-block;
  padding: 3px;
}

div.inline-option-buttons div.orange-button a, 
div.inline-option-buttons div.orange-button a:visited {
  background-color: #c34500;
  border: 2px solid #222;
  border-radius: 10px;
  color: white !important;
  text-decoration: none !important;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  display: table-cell;
  width: 18% !important;
}

div.inline-option-buttons div.orange-button a:hover {
  background-color: #444;
} 

/**
 ** Webform Styles
 **/

 /* test webform inline label fix */
.webform-element--title-inline {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.webform-element--title-inline input, .webform-element--title-inline select {
  max-width: fit-content;
}

.webform-element--title-inline small.description.text-muted {
    width: 100%;
    margin-top:.2rem;
}

/* end test webform inline label styling **/