/* css for icon font*/
@charset "UTF-8";

@import url("https://fonts.iu.edu/style.css?family=BentonSans:regular,bold|BentonSansCond:regular|GeorgiaPro:regular");
/* IU Brand CSS */
@import url("https://unpkg.com/rivet-core@2.9.1/css/rivet.min.css");
/* Training Session Manager CSS */
/*@import url("https://trainingsessions.eds.iu.edu/expand-includes/expand-include-css.css");*/


/** New Storefront ***/

/* Headings throughout descriptions display with underlines as block-level elements */
div[data-customizationid="product-details-description"] h3 {
    font-weight: bold;
    display: block;
    font-style: normal !important;
    border-bottom: 2px solid #000000;
    font-size: 26px;
    margin-bottom: 20px;
}

div[data-customizationid="product-card-catalog-logo"] > div {
    height: 40px !important;
}

.enroll-directions {
    font-size: 20px;
}

#app-footer-container ul + span {
    display: none;
}

#app-header-container span:has(> a[href="/"]) {
    margin-bottom: .25rem;
}

.tlt-btn {
    display: block;
    line-height: 1.125;
    border-style: solid;
    border-width: 0.0625rem;
    border-radius: 0.25rem;
    border-color: rgb(34, 95, 146);
    text-align: center;
    text-decoration: none;
    padding: .5625rem .75rem;
    color: rgb(255, 255, 255);
    background: rgb(43, 122, 188);
    transition: outline-color 0.2s, outline-offset 0.25s;
    outline-offset: -0.8rem;
    outline: rgba(43, 122, 188, 0) solid 0.125rem;

    &:hover {
        background: rgb(34, 95, 146);
        color: rgb(255, 255, 255);
    }

    &:focus {
        color: rgb(255, 255, 255);
        outline-offset: calc(0.1875rem);
        outline-color: rgb(43, 122, 188);
    }
}

/** User not logged in **/
.tlt-public-user {
    & a[data-testid="enroll-button"],
    a[data-testid="footer-enroll-button"],
    button[data-testid="open-shopping-cart-button"],
    #add-remove-cart-button,
    #signup-title {
        display: none !important;
    }
}

.tlt-hide-listing-buttons {
    & a[data-testid="enroll-button"],
    a[data-testid="footer-enroll-button"],
    #add-remove-cart-button,
    #signup-title {
        display: none !important;
    }
}

@media (1080px <= width <= 1200px) {
    .rvt-header-global > .rvt-container-lg {
        margin-left: 1.5rem;
    }
}

.tlt-expand-subtitle {
    margin-top: -.75rem;
}


/* On narrow viewports, keep the catalog select on its own line and wrap the
   Create an Account / About / Login / Cart row underneath it instead of
   squeezing everything in. Target the row via :has() on the stable
   #tlt-catalog-select id, since the wrapping <span>'s class name is a
   build-generated hash. The select keeps its natural (first) position in
   the row and is forced to fill the whole line, so nothing else fits
   alongside it and the rest wraps to the next line as a group. */
@media (max-width: 768px) {
    span:has(> #tlt-catalog-select) {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    #tlt-catalog-select {
        flex: 1 0 100%;
        max-width: none;
    }

    .tlt-expand-subtitle {
        margin-top: 0;
    }
}

/*** New Styles ***/

/**
 * Admin
 */

/* Hide the External Enrollment Redirect field on the Admin > Edit Listing page. */
.ListingDetailsFormSection > span > span:has(input[data-automation="ListingEditCreateDetails__ExternalRedirectUrl"]) {
    display: none;
}

/* New Admin Listings Page: Hide admin actions to set open enrollment and delete listings. */
div[aria-label="Actions"] ul:has(#visibility) > li:not(:first-of-type) {
    display: none;
}

/**
 * Products
 */

/* Hide our custom enrollment override button. */
#eds-enroll-button-override {
    display: none !important;
}

/* Add underline to all <a> elements in product descriptions. */
#description a:link {
    text-decoration: underline;
}
/* On program pages, set the course list to not hide overflowing text. */
span.Product__AssociatedProductsListSpan {
    overflow: visible;
    white-space: normal;
}
/*** End New Styles ***/



/* Spring 2022: Correct the styling of the Enroll button to match the new Add to Cart button
   Note, we shouldn't have to do this, but Instructure's 'admin-level option' for the Enroll Now button behavior 
   technically gives us different Enroll button markup/styling with our chosen behavior. */
/* ====================================================================================== */ 
/* ====================================================================================== */ 
#enroll-hero a.btn,
#enroll-footer a.btn {
    font-size:17px;
    text-transform: none;
    padding: 6.5px 15px;
    border-radius:0.25rem;
}


/* Fall 2020: To prevent the default enroll button from appearing before our JavaScript has had a chance to load/run,
   we are now hiding the enroll button areas using CSS, and revealing with the JS to ensure that it has run. */
/* ====================================================================================== */ 
/* ====================================================================================== */ 
/* .hero-action,
footer.callout-region {
    visibility: hidden;
} */


/* Begin IU Branding fixes, to harmonize the stock IU supplied CSS with the existing Catalog CSS. */
/* ====================================================================================== */
/* ====================================================================================== */

html {
    /* Restore default font size on html element to correct IU branding issues. 
       Does not seem to affect other font sizes in Expand; must be overridden elsewhere. */
    font-size:100% !important;
}

#branding-bar .row, 
#footer .row {
    max-width: 70rem !important;
}

#branding-bar {
    margin-bottom: 0 !important;
}

/* Add some bottom padding to Expand app-footer to allow room for IU tagline. */
#app-footer {
    padding-bottom:30px !important;
}

/* Change branding bar to relative positioning so the "Go to Checkout" banner can be seen. */
@media (max-width: 1024px) {
    #branding-bar {
        position: relative;
    }
}

/* Push the Expand logo graphic to the right to align it under the banner's IU logo */
@media (min-width: 1200px) { 
    .logo-customized {
        margin-left: 25px;
    }
}



/* General purpose styles  */
/* ====================================================================================== */
/* ====================================================================================== */

.hide {
    display: none;
}

/* Hide from all but screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

a {
  cursor: pointer;
  font-size: 100%;
}


/* http://chadkuehn.com/animated-font-spinners/ */
.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}



/* Template header area */
/* ====================================================================================== */
/* ====================================================================================== */

header#app-header {
    background-color: #edebeb; /*Beige: #E1D8B7, Dark gray: #414042 */
}

/*Style the subtitle we're adding under the logo*/
/* .eds-subtitle {
    margin-top: -.75rem;
    font-size: 1.25rem;
    color: #333;
} */

/* Add margin to "Create an Account" link in nav. */
#eds-create-account {
    margin-right: .75rem;
}

#header-menu-container > div {
    display: flex;
}

#eds-about-link {
    margin-right: .75rem;
    color: #0e68b3;
}


#select-catalog-wrapper {
    margin-right: 2rem;
}

/* Style select/option drop-down list */
/* http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript */

#select_catalog {
    width: 100%;
    max-width: 300px;
    border: none;
    /* width: 200px;  width can't be fixed, since we're selecting the appropriate value after going to the new page and it's text needs to fit. */
    padding: 5px 35px 5px 10px;
    font-size: 16px;
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius:5px;
    color:#fff;
    background: #5a595c url(https://assets.expand.iu.edu/theme/drop-down-arrow-01.png) 97% center no-repeat;
    cursor:pointer;
}

/* target Internet Explorer 9 and Internet Explorer 10: */
@media screen and (min-width: 0\0) {
  #select_catalog {
    background: #5a595c;
    padding: 5px;
  }
}

/* Hide default drop-down arrow in IE11+ */
#select_catalog::-ms-expand {
    display: none;
}








/* Template footer area */
/* ====================================================================================== */
/* ====================================================================================== */

#app-footer {
    background-color: #414042; /*Beige: #E1D8B7*/
    color:#fff;
}

#app-footer a {
    color:#fff;
}





/* Catalog 'home page' styles. (Note, #home-page is used in all subcatalog landing pages) */
/* ====================================================================================== */
/* ====================================================================================== */

#home-page {
    background-color: #fff; /* #555; */
}

/* "Most Popular" heading above tiles on homepage */
#eds-most-popular-heading {
    font-family: "BentonSansCondRegular", sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    margin: 1rem 0;
    color: #414042;
}

#home-page #main.product-results {
    padding-top: 10px;
}

/* Clear the default blue gradient in the feature area. */
#home-page .feature-region {
    background-image:none;
    min-height: 0;
}

/*Modify the color of the search-form bar*/
#search-form.callout-region {
  background-color: #7d110c;
}


/* Hide the 'free' flag on listing tiles and listing pages */
.jqFlag,
.product-flag-free {
    display:none !important;
}

/* Hide the circular course/program icons on listing tiles, etc. */
.ProductIcon__Wrapper--gallery-show,
.ProductIcon__Wrapper--gallery-index {
    display: none;
}



/* Admin area styling */
/* ====================================================================================== */
/* ====================================================================================== */

.header-nav li a,
.header-nav .btn-link {
    font-weight: 500;
    color: #414042;
}

.header-nav .btn-link:hover {
    text-decoration:none;
    color: #414042;
}






/* Custom listing content styles (for HTML edit mode) */
/* ====================================================================================== */
/* ====================================================================================== */

.eds-listing h2,
.eds-listing h3 {
    font-weight:bold;
    display:block;
    font-style:normal !important;
    padding-top:30px;
    border-bottom: 2px solid #000000;
    font-size: 30px;
    margin-bottom:20px;
}


.eds-listing .left {
   width:55%; float:left;
}
.eds-listing .right {
   width:40%; float:right;
}









/* 
========================================================================================================
Begin rules created by eDS Non-Credit Design team, consolidated into root CSS by eDS Web Team July 2020. 

These rules were largely duplicated in various sub-catalog themes throughout Expand. In July 2020,
an effort was made to consolidate these CSS rules into a common place so that we can more easily maintain
them. This ws largely due to the need to revise the styles to be more mobile friendly.

Specific notes:

    - The application of Benton Sans as the font for the description area was consolidated and applied 
    to the existing .container.product-details element, rather than applying it to specific child elements.
    See above.

    - The use of eds-left, mlaw-left, pbh-left, etc is preserved for backward compatibility with 
    existing class names. However, these rules are identical and we should standardize the use of 
    .eds-left and .eds-right going forward.

    - h3 selector simplified to apply to all h3 tags within the description area. See above.

    - Column classes have been added to a < 991px media query below to cause them to stack on smaller screens
    and mobile devices.

    - In the main IU theme's JavaScript, we have moved the ".boxed" div that contains the "at-a-glance" info
    with icons, etc to be at the top of the main description div, before the left/right columns. This way,
    when the divs stack on smaller screens, the at-a-glance icon info is at the top.

======================================================================================================== 
*/

/* Custom columns for course descriptions */
.eds-left,
.mlaw-left,
.pbh-left {
    width:40%; 
    float:left;
}

.eds-right,
.mlaw-right,
.pbh-right {
    display: inline-block; 
    width: 37%;
    padding-left: 3%;
    padding-right: 3%;
    float: left; /* TODO: Float is incompatible with inline block (requires block) */
}

.eds-below{
    display:block;
    clear:both;
}

.eds-note {
    border: 1px solid #eeebeb;
    border-radius: 3px;
    background-color: #fbf6ee;
    padding-left: 2%;
}

.eds-note h3 {
    font-family: "Courier New";
    font-weight: bold;
    display: block;
    font-style: normal !important;
    font-size: 30px;
    letter-spacing: 1px;
}

.eds-note-column1 {
    display: flex;
    float: left;
    width: 10%;
    padding: 10px;
    height: 120px;
    justify-content: center;
}

.eds-note-column2 {
    float: left;
    width: 90%;
    padding: 10px;
    text-align: top;
}

.eds-twoinstructors {
    clear:both;
    padding-bottom: 15%;
}

.boxed {
    border: 5px solid #eeebeb;
    background: #ffffff;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 12px;
    width: 20%;
    float: right;
}



/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.sidebar-text {
    overflow:hidden;
}

#instructor_img{
    margin: 0 2%;
    border-radius: 50%;
    padding-right: 4%;
}

#instructor_img_text_right{
/*   padding-right: 4%;*/
    margin: 0 2% 2%;
    border-radius: 50%;
}
#instructor_img_square{
    margin: 0 2%;
}


@font-face {
    font-family: "eds-icons-font";
    src:url("https://assets.expand.iu.edu/theme/fonts/eds-icons-font.eot");
    src:url("https://assets.expand.iu.edu/theme/fonts/eds-icons-font.eot?#iefix") format("embedded-opentype"),
      url("https://assets.expand.iu.edu/theme/fonts/eds-icons-font.woff") format("woff"),
      url("https://assets.expand.iu.edu/theme/fonts/eds-icons-font.ttf") format("truetype"),
      url("https://assets.expand.iu.edu/theme/fonts/eds-icons-font.svg#eds-icons-font") format("svg");
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: "eds-icons-font" !important;
    content: attr(data-icon);
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="eds-icons-font-"]:before,
[class*=" eds-icons-font-"]:before {
    font-family: "eds-icons-font" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.eds-icons-font-length:before , .eds-icons-font-department:before , .eds-icons-font-certificate:before , .eds-icons-font-audience:before{
    font-size: 250%;
    padding: 4% 4% 4% 4%;
    vertical-align: bottom;
    color: #000;
    /*background-color: #4A3C31;*/
    border-radius: 50%;
}
.eds-icons-font-audience:before {
    content: "\61";
}
.eds-icons-font-certificate:before {
    content: "\62";
}
.eds-icons-font-department:before {
    content: "\63";
    padding: 3.4% 4.2% 5.4% 4.2%;
}
.eds-icons-font-length:before {
    content: "\64";
    padding: 3.5% 4.24% 3.7% 4.3%;
}

 /*end of style for icon font*/

.boxed b {
    padding-left: 5%;
}
.item2 b {
    padding-left: 5%;
}
.boxed-text {
    padding-left: 25%;
}
.eds-note-line2 a {
    color: #990000;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
/*  grid-gap: 10px;*/
/*  background-color: #2196F3;*/
/*  padding: 10px;*/
}

.grid-container > div {
/*  background-color: lightblue;*/
  text-align: left;
/*  padding: 20px 0;*/
/*  font-size: 30px;*/
}

.item1 {
    text-align: center;
    grid-row-start: 1;
    grid-row-end: 3;
}

.item2 {
    grid-column-start: 2;
    grid-column-end: 4;
}
.item3 {
    grid-column-start: 2;
    grid-column-end: 4;
}

.item1 span, .item1 p {
    display: block;
    width:380%;
    padding: 3.5% 4.24% 3.7% 4.3%;
}

.item4 {
    text-align: center;
    grid-row-start: 1;
    grid-row-end: 3;
    padding-right: 0;
}

.item5 {
    padding-top: 7%;
    padding-left: 0;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.item4 span, .item4 p {
    display: block;
    width:380%;
    padding: 3.5% 4.24% 3.7% 4.3%;
}


/* =========================================================================================== */
/* End rules created by non-credit team. */
/* =========================================================================================== */






/* Responsive overrides based on the Bootstrap media query breakpoints */
/* ====================================================================================== */
/* ====================================================================================== */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

.AccountDropdown--margin-top {
    margin-top: 10px;
}

/* E. Scull: Target portrait phones with this extra-extra-small width rule */
@media (max-width: 600px) { 
    .col-xs-4,
    .col-xs-8 {
        width:100% !important;
    }

    #header-menu {
        flex-wrap: wrap;
    }

    #select-catalog-wrapper {
        width: 100%;
        margin-bottom: 1rem;
        margin-right: 0;
    }

    #select_catalog {
        max-width: 100%;
    }
}

/* E. Scull: Target devices below the 768px width to handle the overlaps in the header (our subtitle, dropdown, etc) */
@media (max-width: 767px) { 
    /* Force this row (which includes our added catalog dropdown) below the top-left logo. */
    .AccountDropdown--margin-top {
        width: 100%;
    }
    /* Pull logo tighter to the top */
    .header-branding .logo-customized {
        margin-top: 1rem;
    }
    /* Remove space below subtitle. */
    .eds-subtitle {
        margin-bottom: 0;
    }
}

/* E. Scull: Target mobile devices below the 992px width to make description columns stack. */
@media (max-width: 991px) { 
    /* Custom column classes should stack on mobile devices  */
    .eds-left,
    .mlaw-left,
    .pbh-left,
    .eds-right,
    .mlaw-right,
    .pbh-right {
        display: block;
        width: 100%;
        padding: 0;
        float: none;
    }

    /* .boxed class created by non-credit team, contains the icons fonts, course info, etc. */
    .boxed {        
        width: 300px;
        margin: 0 auto;
        float: none;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 767px) {
    .AccountDropdown--margin-top {
        margin-top: 30px;
    }
}