/*
 * Stylesheet overrides for ScarletCanvas Catalog
 * Link: https://osu.catalog.instructure.com
 *
 */

 @font-face {
    font-family: 'proximanova';
    src: url('http://www.osu.edu/assets/fonts/ProximaNova-Reg.eot');
    src: url('http://www.osu.edu/assets/fonts/ProximaNova-Reg.eot?#iefix') format('embedded-opentype'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Reg.woff') format('woff'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Reg.ttf') format('truetype'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Reg.svg#proximanova') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
    mso-generic-font-family: swiss;
    mso-font-alt: Arial;
  }
  
  /* Medium */
  @font-face {
    font-family: 'proximanova';
    src: url('http://www.osu.edu/assets/fonts/ProximaNova-Sbold.eot');
    src: url('http://www.osu.edu/assets/fonts/ProximaNova-Sbold.eot?#iefix') format('embedded-opentype'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Sbold.woff') format('woff'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Sbold.ttf') format('truetype'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Sbold.svg#proximanova') format('svg');
    font-weight: 500;
    font-style: normal;
    mso-generic-font-family: swiss;
    mso-font-alt: Arial;
  }
  
  /* Bold */
  @font-face {
    font-family: 'proximanova';
    src: url('http://www.osu.edu/assets/fonts/ProximaNova-Bold.eot');
    src: url('http://www.osu.edu/assets/fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Bold.woff') format('woff'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Bold.ttf') format('truetype'),
      url('http://www.osu.edu/assets/fonts/ProximaNova-Bold.svg#proximanova') format('svg');
    font-weight: bold;
    font-weight: 800;
    font-style: normal;
    mso-generic-font-family: swiss;
    mso-font-alt: Arial;
  }
  
  body {
    font-family: 'proximanova', sans-serif!important;
  }
  
  /*
   * Links
   */
  
  a {
    color: #bb0000;
    text-decoration: underline;
    padding: 0 3px;
    margin: 0 -3px
  }
  
  a.czbXA_bGBk.cIcZl_bGBk {
    color: #bb0000!important;
    text-decoration: underline;
  }
  
  a.czbXA_bGBk.cIcZl_bGBk:hover {
    background-color: #333!important;
    color: #fff!important;
    text-decoration: none;
  }
  
  a:hover, #app-footer a:hover {
    background-color: #eff1f2;
    color: #212325;
  }
  
  .pull-right a,
  .pull-right a:focus,
  .header-nav li a,
  .header-nav li a:hover {
    color: #fff;
  }
  
  .pull-right a:hover,
  .header-nav li a:hover,
  .nav-tabs > li > a:hover {
    color: #333;
    background-color: #fff;
  }

.header-nav li a:hover {
  color: #333;
}

.header-nav li a:focus {
  color: #fff;
}

/* 
* Admin nav 
*/

#topnavbar {
  background-color: #fff;
}

.css-fhkclk-baseButton__content {
color: #212325;
}

[data-header-separator] {
  border-top: none;
}
  
  /*
   * Header
   */
  
  /* Fix for static test environment -- will need to be removed in final version */
  .dnjejWlhXy__1U1fu {
    display: none;
  }
  
  .header-branding h1 a img {
  height: 40px;
  }
  
  .header-branding h1 a:focus {
  border-color:white;
  }
  
  header#app-header{
    background-color: #333;
  }
  
  .Dropdown__Toggle--header{
    color: white;
  }
  
  .Dropdown__Toggle--header:hover,
  .Dropdown__Toggle--header:focus {
    color: white;
  }
  
  #app-header {
    border-bottom: solid 5px #bb0000;
  }
  
  #product-page #feature {
    padding-top: 0;
  }
  
  .feature-region {
    background-color: #bb0000;
    background-image: none;
    min-height: 0px;
  }
  
  #main.product-results {
    background-color: #efefef;
  }
  
  #search-form {
      position:relative;
      z-index:900; /*Fixes issue where dropdown menu was appearing behind the course cards.*/
  }
  
  #search-form .search-form-filters {
    background-color: #fff;
  }
  
  #search-form.callout-region {
    background-color: #fff;
    filter: drop-shadow(5px 5px 5px #e2e2e2);
  }
  
  .search-refine-button__contents {
    color: #000;
  }
  
  #content:focus {
    outline: -webkit-focus-ring-color auto 0px;
  }
  
  /*
   * Product Tiles
   */
  
  .product-tile .product-heading {
    height: 40px;
  }
  
  .product-tile .product-description {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
  }
  
  .product-tile .product-description,
  .product-tile .product-footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .ProductIcon__LargeCircle--program,
  .ProductIcon__SmallCircle--program {
    background: #1c7c89;
  }
  
  .ProductIcon__LargeCircle--course,
  .ProductIcon__SmallCircle--course {
    background: #bb0000;
  }
  
  .product-tile .product-footer {
    color: #bb0000;
  }
  
  .product-results .product-tile:hover {
    box-shadow: none;
  }
  
  .product-results .product-tile:hover .product-footer {
    background-color: #bb0000;
    color: white;
  }
  
  .jqFlag {
    border-top: 79px solid #bb0000!important;
  }
  
  .product-flag-free {
    background-color: #bb0000;
  }
  
  .product-tile {
    border-radius: 3px;
    border: none;
    filter: drop-shadow(5px 5px 5px #e2e2e2);
  }
  
  .product-tile .image-wrapper {
    border-radius: 3px 3px 0 0;
  }
  
  .product-footer {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  
  .product-account-image-wrapper {
  max-width: 80%;
  }
  
  /*
   * Buttons
   */
  
   .btn-info,
   a.product-link {
     text-decoration: none;
     transition: background-color .25s ease-out,color .25s ease-out;
   }
  
    a.product-link:hover {
      background:none!important;
    }
  
  .btn-info {
    background-color: #bb0000;
    border: none;
  }
  
  .btn-info:hover {
    background-color: #1e1e1e;
    border: none;
  }
  
  .btn-info:focus {
    background-color: #bb0000;
    border: none;
  }
  
  
  
  /* Disbaled button color override */
  
  .btn-info.disabled, .btn-info.disabled:hover,
  .btn-info.disabled:focus, .btn-info.disabled:active,
  .btn-info.disabled.active, .btn-info[disabled],
  .btn-info[disabled]:hover, .btn-info[disabled]:focus,
  .btn-info[disabled]:active, .btn-info[disabled].active,
  fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled]
  .btn-info:active, fieldset[disabled] .btn-info.active {
    background-color: #b00;
    border-color: #b00;
  }
  
  /*
   * Footer
   */
  
  #app-footer,
  #app-footer a {
    color: #202024;
  }
  
  ::selection {
      background-color: #bb0000;
      background: #bb0000;
      color: #fff;
  }
  
  /*
   * Focus Styling
   */
  
  :focus, .form-control:focus,
  .custom-select:focus, .btn:focus,
  .btn.btn-link:focus {
    outline: 3px solid #000!important;
    outline-offset: 1px;
    box-shadow: none;
    transition:none!important;
  }
  
  a:focus {
    color: #bb0000!important;
    outline-offset: 1px!important;
  }
  
  header a:focus,
  header #accountDropdown:focus {
    outline: 3px solid #fff!important;
    outline-offset: 1px!important;
    box-shadow: none;
  }
  
  .header-nav li a:active {
  color: #fff;
  }
  
  .header-nav li a:focus:active {
  color: #000;
  background-color: #fff;
  }
  
  .btn:active, .btn:focus {
    color:#fff!important;
  }
  
  #main:focus,
  #home-page:focus,
  #home-page>div:focus,
  #content:focus,
  p:focus
   {
    outline: none!important;
  }
  
  .eHiXd_bXiG,
  a.eHiXd_bXiG,
  button.eHiXd_bXiG,
  button.eHiXd_bXiG[type="button"],
  button.eHiXd_bXiG[type="reset"],
  button.eHiXd_bXiG[type="submit"] {
    color: #fff!important;
    background-color: #bb0000!important;
    border-color: #bb0000!important;
  }
  
  .eHiXd_bXiG:hover,
  a.eHiXd_bXiG:hover,
  button.eHiXd_bXiG:hover,
  button.eHiXd_bXiG[type="button"]:hover,
  button.eHiXd_bXiG[type="reset"]:hover,
  button.eHiXd_bXiG[type="submit"]:hover {
    color: #fff!important;
    background-color: #830000!important;
    border-color: #830000!important;
  }
  
  /*
   * Student dashboard
   */
  
  .eHiXd_dnnz:focus,
  .eHiXd_dnnz:hover,
  a.eHiXd_dnnz:focus,
  a.eHiXd_dnnz:hover,
  button.eHiXd_dnnz:focus,
  button.eHiXd_dnnz:hover,
  button.eHiXd_dnnz[type="button"]:focus,
  button.eHiXd_dnnz[type="button"]:hover,
  button.eHiXd_dnnz[type="reset"]:focus,
  button.eHiXd_dnnz[type="reset"]:hover,
  button.eHiXd_dnnz[type="submit"]:focus, button.eHiXd_dnnz[type="submit"]:hover {
    color: #b00!important;
  }
  
  .sJGfW_bGBk.sJGfW_cSen, .sJGfW_bGBk:active, .sJGfW_bGBk:focus, .sJGfW_bGBk:hover, .sJGfW_bGBk[aria-expanded="true"] {
    background-color: #b00!important;
  }
  
  .Icon__CircleWrap--info {
    background-color: #b00!important;
  }
  
  .DashboardNavigation__Tab:hover, .DashboardNavigation__Tab:focus {
    color: #fff;
    border-radius: 1.25em;
  }
  
  a.cIcZl_bGBk:link, a.cIcZl_bGBk:visited, button.cIcZl_bGBk {
    color: #b00!important;
  }
  
  a.cIcZl_bGBk:link:active, a.cIcZl_bGBk:link:hover, a.cIcZl_bGBk:visited:active, a.cIcZl_bGBk:visited:hover, button.cIcZl_bGBk:active, button.cIcZl_bGBk:hover {
    color: #b00!important;
  }
  
  a.cIcZl_bGBk:link:hover {
    color: #fff!important;
  }
  
  a.accessible-link {
    margin-top: 20px;
    display: inline-block;
    font-weight: 400;
    font-size: 15px;
  }
  
  a.accessible-link:focus {
    outline: 3px solid #000!important;
  }
  
  a:hover:focus {
    color:#fff!important;
  }
  
  .dropdown-toggle:focus,
  .dropdown-toggle:active {
    background-color: none!important;
    border: none;
  }
  
  .btn-info:active{
    background-color: #bb0000!important;
  }
  
  .nav-tabs > li > a:focus,
  .nav-tabs > li > a:active,
  .nav-tabs > li > a:active:hover {
    color: #bb0000!important;
  }
  
  .header-nav li a:hover:focus {
    color: #000!important;
  }
  
  .search-refine__switches .btn:focus,
  .search-refine__switches .btn:active{
    color: #000!important;
  }
  
  .search-refine__switches .btn.btn-enabled:focus,
  .search-refine__switches .btn.btn-enabled:active {
    color: #fff!important;
  }
  
  .btn {
    border-radius: 0!important;
  }
  
  #product-page footer .h2 {
    font-style: normal;
  }
  
  .btn-action {
    text-transform: none;
    font-weight: 400;
  }
  
  .logo-customized a:hover {
    background: none!important;
  }
  
  #user-nav a:focus {
    color: #fff!important;
  }
  
  #user-nav a:focus:hover {
    color: #000!important;
  }
  
  .form-control:focus {
    border: 1px solid #cccccc!important;
  }
  
  #search-form .search-box {
    border-radius: 0;
  }
  
  #user-nav li a:focus {
    outline: 3px solid #000!important;
    color: #000!important;
    text-decoration: underline;
  }
  
  a[name="top"] {
    padding:0;
    margin:0;
  }
  
  a#skip_navigation_link {
    color:#fff!important;
  }
  
  a#skip_navigation_link:hover {
    color:#000!important;
    background-color:#fff!important;
  }
  
  a#skip_navigation_link:focus {
    outline: 3px solid #fff!important;
  }
  
  a.product-link {
    padding:0;
    margin:0;
  }

   /* Footer */
 
 #app-footer,
 #app-footer a,
 #app-footer ul {
     color: #fff;
 }
 
 #app-footer a {
     white-space: nowrap;
 }
 
 #app-footer a:hover {
     background-color: #fff;
     color: #333;
 }
 
 #app-footer {
     text-align: left;
     background-color: #333;
     font-size: 14px;
     padding: 20px 0 30px 0;
 }
 
 #app-footer p {
     margin-bottom: 20px;
 }
 
 #app-footer img {
     width: 295px;
     height: auto;
 }
 
 a.footer-logo {
     width: 295px;
     height: auto;
     display: block;
     margin: 30px 0;
 }
 
 .piped-list>li {
     display: inline-block;
     padding-left: 0;
     padding-right: 9px;
 }
 
 .piped-list>li:before {
     margin-right: 8px;
     content: "|";
     color: #fff;
 }
 
 /* External Links */
 
 .element-invisible {
     position: absolute !important;
     clip: rect(1px, 1px, 1px, 1px);
     overflow: hidden;
     height: 1px;
 }
 
 span.ext {
     background: url('https://assets.it.osu.edu/images/fa-external-link.svg') center no-repeat;
     width: 8px;
     height: auto;
     padding-right: 6px;
     padding-left: 6px;
     text-decoration: none;
     margin-left: 4px;
     margin-right: 2px;
 }

 #app-footer a:hover:focus {
  color: #333!important;
}


 #app-footer a:focus {
   color: #fff!important;
   outline-color: #fff!important;
 }
 
 /* Focus tweaks */
 
 :focus {
     text-decoration: none !important;
 }
 
 #app-footer a.footer-logo:hover {
     background-color: transparent!important;
     outline: 3px solid #fff !important;
     outline-offset: 1px;
 }
 
 @media only screen and (max-width: 600px) {
     .piped-list>li {
         display: block;
         margin-top: 5px;
     }
 
     .piped-list>li:before {
         display: none;
     }
 }