.elearning ol.breadcrumb{
    padding: 5px 15px;
    font-size: 1.0em;
    font-weight: 500;
}

#y4y-main-wrap{
    padding-bottom:0px;
    padding-top:0px;
}
#course_nav section, .y4y-main-content section{
    padding:0px;
}
.article-column, .nav-basics, #course_nav.nav-basics {
    padding: 0;
}

.fa.fa-circle.half-moon {
    color: yellow;
    overflow: hidden;
    width: 9px;
}

.fa.fa-circle.dark-moon{
  color: darkgreen;
  position: relative;
  z-index: 0;
  top: -3px;
  left: -7px;
}
  
      
 /* header */
 #course_header .zone {
    position: relative;
    top: 39px;
    font-size: 2.5em;
    font-weight: normal;
    color: #d7871a;
    float: left;
    z-index: 100;
}    

#course_header .user-zone{
  float: right;
  color: #d7881d;
  text-align: right;
  position: relative;
  top: 33px;
  font-weight: bold;
  z-index: 100;
}

#course_header i.fa.fa-user{
    color: #000;
    font-size: 1.4em;
}

#course_nav ul.nav.nav-tabs li.active a {
    color: #000 !important;
}

#course_nav .active{
    background: none;
}

#course_nav ul.nav.nav-images li{
 text-transform:capitalize;
 border-bottom: solid 1px lightgray;
 background: #2e2d2d;
 padding: 5px 0px;
}
#course_nav ul.nav.nav-images li a {
    border-radius: 0;
    /*background: #2e2d2d;*/
    margin: 0;
    color: #fff;
}

#course_nav ul.nav.nav-images li a.intro-chapter{
    padding-left: 50px;
}

/** Start: to style navigation tab **/

#course_header.top-title{
  margin-left: 0;
}

.article{
  padding: 15px 15px 15px 40px;
}

.section-heading {
    background-color: #000;
    display: block;
    /*vertical-align: middle;*/
    color: #02b9b5;
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 36px;
    min-height: 68px;
    padding: 5px 10px 5px 40px;
}

.section-heading h2{
    color:#02b9b5;
    font-size:1.4em;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

.section-heading.literacy h2{
    background: url(../img/badge_literacy.png) left 0px no-repeat;
    padding: 15px 0 0px 80px;
    min-height: 70px; 
}

@media only screen and (max-width:1092px){
    #course_header .zone{
        top: 0px;
    }
    #course_header .user-zone{
        top: 30px;
    }

    .elearning span.search{
        top:0px;
    }
}

@media only screen and (max-width:767px){
    #course_header .zone{
        top: 0;
    }
    #course_header .user-zone{
        top: 0px;
    }
  
    .section-heading{
        margin: 0;
        border-radius: 0;
    }
}
    

@media only screen and (max-width:480px){
    #course_header .user-zone{
        top: 0;
    }
  }


/* NAV */
#course_nav .nav {
    margin-bottom: 18px;
    margin-left: 0;
    list-style: none;
}

#course_nav .nav>li>a {
    display: block;
    /*border: solid 1px lightgray;*/
    margin-bottom: 4px;
    border-radius: 4px;
}

#course_nav .nav-tabs {
    *zoom: 1;
    margin-bottom: -6px;
}

#course_nav .nav-tabs:before, #course_nav .nav-tabs:after {
    display: table;
    content: "";
}

#course_nav .nav-tabs:after {
    clear: both;
}

#course_nav .nav-tabs>li {
    float: left;
}

#course_nav .nav-tabs>li>a {
    padding-right: 12px;
    padding-left: 12px;
    margin-right: 2px;
    line-height: 14px;
}
      
#course_nav .nav-tabs>li.active>a{
    color: #000 !important;
}

#course_nav .nav-tabs {
    border-bottom: 1px solid #ddd;
}

#course_nav .nav-tabs>li {
    width: 40%; 
    text-align: center;
}
      
#course_nav .nav-tabs>li:nth-child(2) {
    position: relative;
    left: 4px;
}
      
#course_nav .nav-tabs>li:first-child {
    width: calc(60% + 4px);
    margin-right: -7px;
}

#course_nav .nav-tabs>li>a {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 18px;
    border: 1px solid #9b9b9b;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    text-decoration: none;
    text-transform: none;
    color: #a7a7a7 !important;
    background: #cecece;
    font-size: 1.1em;     
}

#course_nav .nav-tabs>li>a:hover {
    border-color: #eeeeee #eeeeee #dddddd;
}

#course_nav .nav-tabs>.active>a,
#course_nav .nav-tabs>.active>a:hover {
    color: #555555;
    cursor: default;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
      
#course_nav .nav-tabs>.active>a {
    background-color: #7b7b7b !important;
    color: #000 !important;
}
  
#course_nav.nav-basics li{
    font-weight: bold;
    border-radius: 0 !important;
    text-transform: uppercase;
    margin: 0;
}

#course_nav.nav-basics li.course-name{
    color:#333;
}
  
#course_nav.nav-basics ul li.active a{  
  color: #02b9b5 !important;
}

#course_nav.nav-basics ul.nav-images li{
  border-radius: 0 !important;
}

#course_nav .course-outline{
  color: #fff;
  background-color: #2e2d2d !important;
  font-size: 1.8em;
  padding: 30px 0 30px 15px !important;
}
  
#course_nav .course-name{
    background: #f7a244;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 15px !important;
    text-transform: none !important;
    font-size: 1.5em;
    line-height: 26px
}
  
#course_nav .course-outline, .course-name {
    border: solid 1px 
    lightgray;
    margin-bottom: 4px;
    border-radius: 4px;
    display: block;
    padding: 10px 15px;
    list-style: none;
} 

#course_nav .course-section-top {
    list-style-type: none !important;
    padding-left: 0 !important;
}
          

#course_nav li {
    line-height: 18px;
}

#course_nav .tab-content.active {
    display: block;
}

#course_nav .tab-content.hide {
    display: none;
}

.article-content.active {
    opacity: 1;
    transition: opacity .6s;
    background-color: inherit;
}

.article-content.hide {
    opacity: .3;
    transition: opacity .6s;
}

/** End: to style navigation tab **/

            /* Sample Form Styling */

#course_nav input[type=text], #course_nav select, #course_nav textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

#course_nav input[type=submit] {
    /* background-color: #4CAF50; */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#course_nav input[type=submit]:hover {
    background-color: #45a049;
}

#course_nav .container {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
}
  
         
      
      /* accordion */
      
#course_nav .panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: left;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
#course_nav .panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
#course_nav h4.panel-title{
    margin-top:0px;
    margin-bottom: 0px;
    color:inherit;
    min-height: 15px;
    font-size: 1em;
}

#course_nav h4.panel-title a, #course_nav h4.panel-title a:link, #course_nav h4.panel-title a{
    font-size: 1em;
}
#course_nav .panel-heading{
    padding:10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius:3px;
}

#course_nav .panel-default > .panel-heading{
    min-height: 35px;
}

#course_nav .panel-heading h4, #course_nav .panel-heading h4 a{
    color: #333;
}

#course_nav .panel-body{
    padding:15px;
}

#course_nav .panel-collapse.collapse, #course_nav .panel-collapse.collapsing{
    padding:0px;
}
/* courses tab */

#course_nav span.c1{
  float: right;
  fill: lightgray;
  margin: 0 -8px 0 0;
  position: relative;
  z-index: 10;
}
#course_nav .fa{
  position: relative;
  z-index: 10;
}
#course_nav .fa.fa-check, #course_nav .fa.fa-star{
  float: right;
  position: relative;
  top: -28px;
  z-index: 10;
  left: -5px;
}

#course_nav .fa.fa-check{
  color: #a4a4a4;
 margin: 0 1px 0 -2px; 
}

#course_nav .fa.fa-check.finished{
  color: green;
}

#course_nav .fa.fa-star{
    color: yellow;
    margin: 0 1px 0 0; 
}

#course_nav .fa.fa-circle{
  color: yellow;
}

#course_nav .moon{
  height: 20px;
  width: 20px;
  border-radius: 40px;
}

#course_nav .tools {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  }

#course_nav .panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    text-transform: uppercase;
    /* border-radius: 0 !important; */
    margin-bottom: -5px;
}

#course_nav .panel-default>.panel-heading h4 {
    font-size: 1em;
    font-weight: bold;
}

#course_nav .panel-default{
  border-radius: 0 !important;
  position:relative;
  top: -20px;
}

/* Start Progress Circles Here */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
 @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
 #course_nav .main-container {
     display: flex;
     justify-content: space-between;
     width: 50%;
     height: 100%;
     margin: 60px auto;
}
.circle {
    position: relative;
    z-index: 10;
    width: 50px;
    transform: scale(0.20);
    top: -30px;
    text-align: right;
    float: right;
    right: 15px;
}
.progress-summary-profile-circle {
     position: absolute;
     padding-top: 29px;  
     width: 100px;
     height: 100px;
     background: #4db6ac;
     color: #fff;
     border-radius: 50%;
     font-size: 15px;
     letter-spacing: 0.5px;
     font-weight: 400;
     text-align: center;
}
 .progress-circle {
     position: absolute;
     left: -100px;
     top: -100px;
}
 .progress-circle #background-circle {
     stroke-width: 12;
     stroke: #FFFFFF;
     fill: transparent !important;
}
 .progress-circle #foreground-circle {
     stroke-width: 12;
     stroke: url(#linear);
     stroke-dasharray: 260;
     stroke-dashoffset: 260;
     fill: transparent !important;
     animation: circle-load 3s 1s cubic-bezier(0.13, 0.87, 0.46, 0.77) forwards;
}
 .progress-summary-profile-percent {
     display: block;
     font-size: 3.6rem;
     font-family: 'Lato';
     letter-spacing: -1px;
     line-height: 1.1;
}
 .progress-summary-profile-completed-icon svg {
     display: none;
}
/*---------- Progress 100% ----------*/

 .progress-summary-profile-circle[data-progress="100"] span {
     opacity: 1;
     animation: progress-text-hide 3.5s 0.2s ease-out forwards;
}
 .progress-summary-profile-circle[data-progress="100"] .progress-summary-profile-completed-icon svg {
     position: absolute;
     top: 10px;
     left: 10px;
     width: 80px;
     height: 80px;
     display: block;
     opacity: 0;
     fill: white;
     transform: scale(1);
     animation: progress-icon-load 0.4s 4s cubic-bezier(0.49, -0.38, 0.49, 1.31) forwards;
}

/*----------------- Certificate Button ----------------*/

#course_nav .nav > li > a.cert_link{
  display: none;
}
/*---------- Animation ----------*/

 @keyframes circle-load {
     100% {
         stroke-dashoffset: 0;
    }
}
 @keyframes progress-text-hide {
     96% {
         opacity: 1;
         transform: scale(1);
    }
     100% {
         opacity: 0;
         transform: scale(0);
    }
}
 @keyframes progress-icon-load {
     94% {
         opacity: 1;
         transform: scale(1.10);
    }
     98% {
         opacity: 1;
         transform: scale(0.95);
    }
     100% {
         opacity: 1;
         transform: scale(1);
    }
}

/* mobile */

#course_nav button.dropdown-toggle{
  width: 100%;
  background-color: lightgray; 
}

#course_nav .fa.fa-navicon{
  float: right;
  margin-top: 4px;
}

#course_nav ul.dropdown-menu{
    position: relative;
    width: 100%;
    height: auto !important
}


/* un-mobile nav */

 @media only screen and (min-width: 768px) {
    #course_nav .dropdown-menu{
        display:block;
        padding: 0;
        margin: 0;
        background: 0;
        border: 0;
        box-shadow: none;
        text-shadow: 0 none;
        width: 100%;
    }
  
    #course_nav button.dropdown-toggle{
        display:none;
    }
}

div#collapseTools h4, div#collapseTools h6, div#collapseGlossary h4, div#collapseGlossary h6{
  color: #333333;
}

div#collapseTools h4, div#collapseGlossary h4{
  cursor: inherit;
}
div#collapseTools h4:hover, div#collapseGlossary h4:hover{
  text-decoration: none;
}

div#collapseTools h6 .fa.fa-circle, div#collapseGlossary h6 .fa.fa-circle{
  font-size: 8px;
  margin-right: 6px;
}
div#collapseTools h6, 
div#collapseTools h6 a,
div#collapseTools h6 .fa.fa-circle{
    color: #666;
}

div#collapseGlossary h6,
div#collapseGlossary h6 a,
div#collapseGlossary h6 .fa.fa-circle{
  color: #666;
}
div#collapseTools h6 a:hover, div#collapseGlossary h6 a:hover{
  text-decoration: underline;
}

div#collapseTools h6,
div#collapseTools h6 a:hover{
  font-size: 16px;
}

div#collapseGlossary h6,
div#collapseGlossary h6 a:hover{
  font-size: 16px;
}

.section-heading.literacy h2{
    background: url(/assets/img/badge_literacy.png) left 0px no-repeat;
    padding: 15px 0 0px 80px;
    min-height: 70px; 
}
  /* for the icons on the h1's outside of the content area*/
.section-heading.section-heading.career-pathways-for-students h2 {
  background: url(/assets/img/badge_ccr.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.family h2 {
  background: url(/assets/img/badge_family.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.partnerships h2 {
  background: url(/assets/img/badge_strength.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.stem h2, 
.section-heading.steam h2,
.section-heading.STEAM h2 {
  background: url(/assets/img/badge_stem.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.alignment h2 {
  background: url(/assets/img/badge_align.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.continuous-education h2 {
  background: url(/assets/img/badge_align.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.projectbasedlearning h2 {
  background: url(/assets/img/badge_projectbasedlearning.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.citizen-science h2 {
  background: url(/assets/img/badge_citizen.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.summer-learning h2 {
  background: url(/assets/img/badge_summer.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.introduction-to-21st-cclc h2 {
  background: url(/assets/img/badge_introduction-to-21st-cclc.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.program-management h2 {
  background: url(/assets/img/badge_pm.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.financial-literacy h2 {
  background: url(/assets/img/badge_fl.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }


.section-heading.creating-a-positive-learning-environment h2 {
  background: url(/assets/img/badge_ple.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }


.section-heading.social-and-emotional-learning h2 {
  background: url(/assets/img/badge_sel.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.civic-learning-and-engagement h2 {
  background: url(/assets/img/badge_civic.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

.section-heading.supporting-english-learners h2 {
  background: url(/assets/img/badge_el.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  background-size: 70px 70px;
  min-height: 70px; }

  .section-heading.including-students-with-disabilities h2 {
  background: url(/assets/img/badge_isd.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

  .section-heading.student-voice-and-choice h2 {
  background: url(/assets/img/badge_svc.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

  .section-heading.stages-of-child-and-adolescent-development h2 {
  background: url(/assets/img/badge_cad.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }
  
  .section-heading.fiscal-management h2 {
  background: url(/assets/img/badge_fiscal_management.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }


.section-heading.virtual-edge h2 {
  background: url(/assets/img/badge_virtual_edge.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }

    .section-heading.math-without-fear h2 {
  background: url(/uploads/img/badge_mwf.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }
  
  .section-heading.health-and-wellness-for-all h2 {
  background: url(/assets/img/badge_health_and_wellness_for_all.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }
  
    .section-heading.youth-in-action h2 {
  background: url(/assets/img/badge_youth_in_action.png) left 0px no-repeat;
  padding: 15px 0 0px 80px;
  min-height: 70px; }
  
  .player_footer {
  	font-size: 1em;
  }
  .player_footer span.count{
  	font-size: .8em;
  	
  }