/******** BASE HTML STYLES ********/
html {
  -webkit-text-size-adjust: 100%; }

a:focus, a:active {
  text-decoration: none;
}

body {
  font-family:  "lato",sans-serif !important;
  background: #f5f5f5;
  font-size: 18px;
  color: #3a3f4b; 
  }

footer {
  margin-bottom: 10px;
}

img {
  max-width: 100%;
  height: auto; 
}

.container-fluid {
  max-width:1170px;

}
/******** END BASE HTML STYLES ********/


/******** MISC HELPER CLASSES ********/

/* Makes column full height */
.col-full-hide-overflow {
   overflow: hidden;
}

.col-full-height {
  margin-bottom: -99999px; 
  padding-bottom: 99999px
}


@media (max-width: 360px) {
  .hidden-xxxs {
    display: none!important;
  }
}

@media (max-width: 599px) {
  .hidden-xxs {
    display: none!important;
  }
}

@media (max-width: 599px) {
  .visible-xxs {
    display: inline-block!important;
  }
}






/******** END MISC HELPER CLASSES ********/




/* Misc */
    .hide-show-link, .hide-show-link:active, .hide-show-link:focus {
      font-size: 14px;
      text-decoration: none;
      color: #000;
      display: inline-block;
      margin-top: 10px;
      text-decoration: none;
    }

  .hide-show-link:hover {
      text-decoration: none;
      color: #F57C00
  }

  .hide-show-link i {
    font-size: 10px;
    margin-right: 3px;
  }
/* End Misc */



/******** HEADER ********/

  header {
  background: #03a9f4;
  padding: 5px 0 0 0; }

  header h1 {
    color: #fff;
    font-weight: bold;
    float: left;
    border-left: 1px solid #fff;
    padding-left: 15px;
    line-height: 16px;
    font-size: 18px; /*x*/
    margin-top: 8.4px; /*x*/
  }
    
    @media screen and (max-width: 1200px) {
      header h1 {
        font-size: 18px; /*x*/
        line-height: 16px;  /*x*/} 
    }
    @media screen and (max-width: 768px) {
      header h1 {
        border-left: 1px solid #fff;         
        font-size: 18px;
        
        } 
    }

  header .logo {
    float: left;
    margin-right: 15px;
    margin-left: -10px; 
    max-height: 30px;  /*x*/
  }

  @media screen and (max-width: 768px) {
      header .logo {
        margin-left: 0px;        
         }
   /* header .container {
        padding-left: 0px;
        padding-right: 0px;
    }*/
}


  header #logo-e {
    display: none;
  }

  @media screen and (max-width: 568px) {
    header #logo-full {
      display: none;
      }
  
    header #logo-e {
      display: inline;
      }      
    header .logo {  
      margin-right: 8px; /*x*/
    }

    header h1 {    
        border-left: none; /*x*/     
        padding-left: 0px;         
    } 
  }


/******** END HEADER ********/

/******** OFF CANVAS TOP NAV ********/


header #nav-toggle {
  padding: 5px;
  background: transparent;
  color: #000;
  text-align: center;
  font-size: 12px;
  display: block;
  float: right;
  margin-top: 3px; 
  border: solid 0px; 
}


header #nav-toggle .line-bar+.line-bar {
  margin-top: 4px;
}

header #nav-toggle .line-bar {
    display: block;
    width: 22px;        
    border-radius: 0px;
    border-top: solid #fff 1px;
    border-bottom: solid #fff 1px;
    margin-bottom: 0px;
    
}

header #nav-toggle.active span.line-bar {
    display: none; 
}

header #nav-toggle span.line-close {
  display: none;
  font-size: 22px;
  line-height: 14px;
  color: #fff;
  text-decoration: none;
  margin-top: -3px;
}

header #nav-toggle.active span.line-close {
  display: block;
}

header #nav-toggle span:hover {
  color: #ccc;
}

header #nav-toggle:hover .line-bar {
  
    border-top: solid #ccc 1px;
    border-bottom: solid #ccc 1px;
}
/*
header #nav-toggle {
  padding: 20px 20px 0 12px;
  background: #ffffff;
  color: #343434;
  text-align: center;
  font-size: 12px;
  display: block;
  float: right;
  margin: 10px;
  width: 25px;
  height: 25px;
  vertical-align: baseline;
  border: 1px solid #343434;
  border-radius: 50%; 
}

@media screen and (min-width: 568px) {
  header #nav-toggle {
    font-size: 14px;
    padding: 10px 20px 0 13px; } }
@media screen and (min-width: 1000px) {
  header #nav-toggle {
    font-size: 14px;
    padding: 10px 20px 0 7px; } }
header #nav-toggle i {
  padding-top: 18px;
  display: block;
  font-style: normal;
  position: relative;
  left: -3px; }

@media screen and (min-width: 568px) {
  header #nav-toggle i {
    left: -6px; } }
@media screen and (min-width: 1000px) {
  header #nav-toggle i {
    padding-top: 24px;
    left: 0; } }
header #nav-toggle:hover {
  text-decoration: none;
  cursor: pointer; }


header #nav-toggle span, header #nav-toggle span:before, header #nav-toggle span:after {
  cursor: pointer;
  height: 1px;
  width: 15px;
  background: #343434;
  position: absolute;
  display: block;
  content: '';
  transition: all 500ms ease-in-out; }

@media screen and (min-width: 1000px) {
  header #nav-toggle span, header #nav-toggle span:before, header #nav-toggle span:after {
    height: 1px;
    width: 35px; } }
header #nav-toggle span:before, header #nav-toggle span:before:before, header #nav-toggle span:after:before {
  top: -7px; }

@media screen and (min-width: 1000px) {
  header #nav-toggle span:before, header #nav-toggle span:before:before, header #nav-toggle span:after:before {
    top: -10px; } }
header #nav-toggle span:after, header #nav-toggle span:before:after, header #nav-toggle span:after:after {
  bottom: -7px; }

@media screen and (min-width: 1000px) {
  header #nav-toggle span:after, header #nav-toggle span:before:after, header #nav-toggle span:after:after {
    bottom: -10px; } }
header #nav-toggle.active span {
  background-color: transparent;
  margin-top: 5px; }

header #nav-toggle.active span:before, header #nav-toggle.active span:after {
  transition: all 500ms ease-in-out;
  top: 0; }

header #nav-toggle.active span:before {
  transform: rotate(45deg); }

header #nav-toggle.active span:after {
  transform: rotate(-45deg); }

header #nav-toggle span, header #nav-toggle span:before, header #nav-toggle span:after {

  height: 1px;
  width: 15px;
 }   
*/
#sidebar {
  background: #343434;
  color: #ffffff;
  padding: 10px 0 0 40px; }

@media screen and (min-width: 1000px) {
  #sidebar {
    padding: 10px 0 0 50px; } }
#sidebar a {
  color: #ffffff;
  text-decoration: none; }

#sidebar a:hover {
  text-decoration: underline; }

#sidebar .close-x {
  display: none;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  padding: 10px 10% 0 0; }

@media screen and (min-width: 1000px) {
  #sidebar .close-x {
    display: block; } }
#sidebar .close-x i {
  font-size: 13px;
  display: inline-block;  
  padding-right: 7px; }

#sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0; }

#sidebar ul:before {
  clear: both;
  display: table;
  content: ''; }

#sidebar ul li {
  font-size: 16px;
  text-align: left;
  width: 75%;
  position: relative; }

@media screen and (min-width: 1000px) {
  #sidebar ul li {
    font-size: 16px;
    width: 80%; } }
#sidebar ul li a {
  border-top: 1px solid rgba(255, 255, 255, 0.29);
  display: block;
  padding: 18px 0; }

#sidebar ul li:first-child a {
  border: 0; }

#sidebar ul li ul {
  display: none;
  padding-bottom: 20px; }

#sidebar ul li ul li {
  font-size: 16px;
  line-height: 40px;
  display: block;
  width: 80%;
  border-top: 1px solid rgba(255, 255, 255, 0.29);
  padding-top: 30px;
  margin-top: 30px;
  margin-left: 20px; }

#sidebar ul li ul li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.29);
  padding-top: 15px; }

#sidebar ul li ul li a {
  padding: 0;
  border: 0; }

#sidebar ul li .aw {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 999;
  font-size: 25px; }

#sidebar ul li .aw:hover {
  cursor: pointer; }

@media screen and (min-width: 1000px) {
  #sidebar ul li .aw {
    font-size: 35px; } }




/******** OFF CANVAS NAV ********/

/******** BASE SECTION DEFICITIONS ********/

section .row {
  margin-right: 0px;
  margin-left: 0px;
} 


/******** END BASE SECTION DEFICITIONS ********/


/******** SECONDARY HEADER ********/

section.lesson-bar {
  background: #343434;
  padding: 3px 0; 
  height: 41px;}

/* Lesson Number & Name */  
section.lesson-bar h2 {
  color: #9E9E9E;
  font-size: 15px;
  margin: 0;
  text-transform: none; 
  font-weight: 300;
}

section.lesson-bar h1 {
  color: #9E9E9E;
  font-size: 20px;
  margin: 0;
  font-weight: 400;
  text-transform: none; 
  padding-top: 7px;
}

@media screen and (max-width: 1200px) {
  section.lesson-bar h2 {
    font-size: 15px; } 
}

@media screen and (max-width: 680px) {
  section.lesson-bar  #bar-lname {
    display: none;
  }
}

/* Lesson Section */
section.lesson-bar p {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  margin: 0 0 0 0;
  text-transform: none; 
}

@media screen and (max-width: 1200px) {
  section.lesson-bar p {
        font-size: 14px; 
  } 
}

/* Back to Lesson Menu */

section.lesson-bar #nav-lesson-menu-icon {
    text-align: right;        
}  

section.lesson-bar #nav-lesson-menu-icon a {
  color: #ccc;
}

section.lesson-bar #nav-lesson-menu-icon a:hover {
  color: #fff;
}

section.lesson-bar .lesson-menu {
  font-size: 13px;
  margin-top: 7px;
  vertical-align: middle;
  text-transform: uppercase; 
  display: inline-block;
}
@media screen and (max-width: 400px) {
  section.lesson-bar .lesson-menu {
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  section.lesson-bar .lesson-menu {
    font-size: 10px;
    margin-top: 8px;
  }
}

section.lesson-bar i {
    margin-top: 6px;
    font-size: 16px;
    display: inline-block; 
    vertical-align: middle;
    padding-right: 4px;
}

section.lesson-bar .icon-menu-back:before {
    font-size: 14px; 
}

/******** END SECONDARY HEADER ********/



/******** MAIN SECTION ********/

section.main {
    background: #f5f5f5;
    /*#EDEFF0*/
    padding: 0px 0 0px 0;
}

section.main p {
  font-size: 16px; 
}

section.main hr {
    margin: 5px 0 15px 0;
    border-top: 1px solid #afafb2; 
}

/******** MAIN SECTION ********/

/******** SIDE BAR ********/

  section.main .sidebar {
    background: #fff;
    height: auto;   
    margin-top: 0px;
  }
  @media screen and (max-width: 991px) {
    section.main .sidebar {
      margin: 15px;
      padding: 20px;
      height: auto; } 
  }

/******** END SIDE BAR ********/


/******** SECTION HEADERS (H2s) *********/
section.main h2 {
  font-size: 15px !important;  
  font-weight: 700;
  text-transform: uppercase;
  color: #333 !important;  
  margin: 10px 0; 
  margin-bottom: 8px;  
  margin-top: 14px;
}

section.sidebar h2 {
  font-size: 15px !important;  
  font-weight: 700;
  text-transform: uppercase;
  color: #333 !important;  
  margin: 10px 0; 
}
/******** SECTION HEADERS (H2s) *********/


/******** MAIN MENU *********/


   .main-menu-container {
    padding-top: 25px;
    padding-bottom: 10px;
  }




  .main-menu-header-score {
    display: inline-block; 
    text-align: right; 
    width: 58px; 
    font-size: 12px; 
    padding-right: 3px; 
    padding-bottom: 3px;
  }
  
  .main-menu-header-status {
    display: inline-block; 
    text-align: right; 
    width: 45px; 
    font-size: 12px; 
    padding-bottom: 3px;
  }


.btn-main-menu {
        text-align: left;
        white-space: normal;
        padding: 3px 5px;
        padding-left: 7px;
        border-radius: 0px;   
        background-color: #fff;
        border-top: solid #c7c7c7 1px;
        border-right: solid #c7c7c7 1px;
        border-bottom: solid #c7c7c7 1px;
        border-left: solid 5px #03a9f4;
        color: #3a3f4b;   
        width: 100%;   
        margin-bottom: 6px;  
        font-size: 14px;
        line-height: 220%;

  }

  .btn-main-menu i {
    color: #03a9f4;
  }

  .btn-main-menu.retest {
    border-left-color: #F57C00;
  }

 .btn-main-menu.retest i {
    color: #F57C00;
  }  

  .btn-main-menu.complete {
    border-left-color: #048d14;
  }

  .btn-main-menu.complete i {
    color: #048d14;
  }


  .btn-main-menu.disabled {     
      color: #afafb2;
      border-left-color: #d8d8da;
      opacity: 1;     
  }

.btn-main-menu.disabled i {     
      color: #afafb2;
    }


.btn-main-menu.disabled .circle {     
      background-color: #afafb2;
    }

  .btn-main-menu .lesson-num {
    font-weight: bold;
    font-color: #333;
    font-size: 18px;
    display: table-cell;
    min-width: 27px;
    text-align: right;
    padding-right: 7px;
    vertical-align: middle;    
    float: left;
  }

.btn-main-menu .lesson-name {    
    display: table-cell;  
    vertical-align: middle;     
     float: left;

  }

  .btn-main-menu .lesson-score {
    display: table-cell;
    border-left: dotted #afafb2 1px;    
    padding-left: 5px;
    width: 45px;
    text-align: center;
    float: right;
    vertical-align: middle;     
    min-height: 30.4px;
}
 

  .btn-main-menu .lesson-icon {
    display: table-cell;    
    padding-left: 5px;    
    padding-right: 10px;
    font-size: 17px;
    float: right;
    vertical-align: middle;
   line-height: 185%;
  

  }

  .btn-main-menu .circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  line-height: 22px;
  text-align: center;
  background: #03a9f4;
  display: inline-block;
  float: left;
  vertical-align: middle;
  margin-top: 5px;
  margin-right: 7px;

}




@media  (max-width: 500px) {
  .btn-main-menu .lesson-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 230px;
  }
}

@media  (max-width: 400px) {
  .btn-main-menu .lesson-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 210px;
  }
}

@media  (max-width: 370px) {
  .btn-main-menu .lesson-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
  }
}

@media  (max-width: 320px) {
  .btn-main-menu .lesson-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
  }
}

.main-menu-instructions { 
  background-color: #fff; 
  border: solid #9e9e9e 1px; 
  min-height: 60px; 
  padding: 5px 10px; 
  font-size: 15px; 
  line-height: 150%;
  margin-bottom: 15px;
}

    /* standard hover */
    .btn-main-menu:hover, .btn-main-menu:active, .btn-main-menu:focus, .btn-main-menu:active:focus,
    .btn-main-menu:hover .lesson-score, .btn-main-menu:active .lesson-score, .btn-main-menu:focus .lesson-score, .btn-main-menu:active:focus .lesson-score
     { 

      border-color: #03a9f4;
      color: #03a9f4;
      background-color: #fff;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;        
    }

    .btn-main-menu:active, .btn-main-menu:active .lesson-score {
      background-color: #E3F2FD !important;
    }    


    /* retest hover */
     .btn-main-menu.retest:hover, .btn-main-menu.retest:active, .btn-main-menu.retest:focus, .btn-main-menu.retest:active:focus,
     .btn-main-menu.retest:hover .lesson-score, .btn-main-menu.retest:active .lesson-score, .btn-main-menu.retest:focus .lesson-score, .btn-main-menu.retest:active:focus .lesson-score
    {
      border-color: #F57C00;
      color: #F57C00;
    }

    .btn-main-menu.retest:active, .btn-main-menu.retest:active .lesson-score {
      background-color: #FFF3E0 !important;
    }


    /* complete hover */
     .btn-main-menu.complete:hover, .btn-main-menu.complete:active, .btn-main-menu.complete:focus, .btn-main-menu.complete:active:focus,
     .btn-main-menu.complete:hover .lesson-score, .btn-main-menu.complete:active .lesson-score, .btn-main-menu.complete:focus .lesson-score, .btn-main-menu.complete:active:focus .lesson-score
    {
      border-color: #048d14;
      color: #048d14;
    }

    .btn-main-menu.complete:active, .btn-main-menu.complete:active .lesson-score {
      background-color: #E8F5E9 !important;
    }    

/******** END MAIN MENU *********/

/******** LESSON MENU ********/


.lesson-menu-heading {
  margin: 15px 0;
}

.lesson-menu-heading .vertical-line {
  width: 1px; 
  border-left: solid 1px; 
  height: 80px; 
  margin: 0 auto;
}

.lesson-menu-heading .lesson-menu-name .heading1 {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  padding-top: 13px;
}

.lesson-menu-heading .lesson-menu-name .heading2 {
  display: block;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: bold;
  padding-bottom: 10px;
}


.lesson-menu-instructions {
  margin-top: 10px;
  font-size: 15px;
}

.lesson-menu-heading .lesson-menu-name {
  
}

.bg-white {
  background-color: #fff;
}

  .lesson-menu-container {
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .lesson-menu-container h3 {
      text-align: center;
      font-size: 20px;
      font-weight: bold;

  }

  .lesson-menu-container .divider-line {
    background: #afafb2;
    width: 80%;
    height: 1px;
    margin: 20px auto;    
  }

  @media screen and (max-width: 991px) {
    .lesson-menu-container .divider-line {    
    width: 100%;
    margin: 10px 0 15px 0;  
    }
  .lesson-menu-container h3 {
    text-align: left;
  }
  }


  .btn-lesson {
        text-align: left;
        white-space: normal;
        padding: 3px 5px;
        padding-left: 7px;
        border-radius: 0px;   
        background-color: #fff;
        border-top: solid #c7c7c7 1px;
        border-right: solid #c7c7c7 1px;
        border-bottom: solid #c7c7c7 1px;
        border-left: solid 5px #03a9f4;
        color: #3a3f4b;   
        width: 100%;   
        margin-bottom: 10px;  
        font-size: 14px;
        line-height: 220%;
  }

  .btn-lesson i {
    color: #03a9f4;
  }

  .btn-lesson.retest {
    border-left-color: #F57C00;
  }

  .btn-lesson.retest i {
    color: #F57C00;
  }



  .btn-lesson.complete {
    border-left-color: #048d14;
  }

  .btn-lesson.complete i {
    color: #048d14;
  }

   .btn-lesson.disabled {     
      color: #afafb2;
      border-left-color: #d8d8da;
      opacity: 1;
    }

   .btn-lesson.disabled i {     
      color: #afafb2;
    }

  .btn-lesson .lesson-score {
    display: inline-block;
    border-left: dotted #afafb2 1px;    
    padding-left: 5px;
    width: 45px;
    float: right;
    min-height: 30.4px;
    text-align: center
  }




  .btn-lesson .lesson-icon {
    display: inline-block;    
    padding-left: 5px;
    padding-top: 6px;
    padding-right: 10px;
    font-size: 17px;
    float: right;

  }



    /* standard hover */
    .btn-lesson:hover, .btn-lesson:active, .btn-lesson:focus, .btn-lesson:active:focus,
    .btn-lesson:hover .lesson-score, .btn-lesson:active .lesson-score, .btn-lesson:focus .lesson-score, .btn-lesson:active:focus .lesson-score
     { 

      border-color: #03a9f4;
      color: #03a9f4;
      background-color: #fff;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;        
    }

    .btn-lesson:active, .btn-lesson:active .lesson-score {
      background-color: #E3F2FD !important;
    }    


    /* retest hover */
     .btn-lesson.retest:hover, .btn-lesson.retest:active, .btn-lesson.retest:focus, .btn-lesson.retest:active:focus,
     .btn-lesson.retest:hover .lesson-score, .btn-lesson.retest:active .lesson-score, .btn-lesson.retest:focus .lesson-score, .btn-lesson.retest:active:focus .lesson-score
    {
      border-color: #F57C00;
      color: #F57C00;
    }

    .btn-lesson.retest:active, .btn-lesson.retest:active .lesson-score {
      background-color: #FFF3E0 !important;
    }


    /* complete hover */
     .btn-lesson.complete:hover, .btn-lesson.complete:active, .btn-lesson.complete:focus, .btn-lesson.complete:active:focus,
     .btn-lesson.complete:hover .lesson-score, .btn-lesson.complete:active .lesson-score, .btn-lesson.complete:focus .lesson-score, .btn-lesson.complete:active:focus .lesson-score
    {
      border-color: #048d14;
      color: #048d14;
    }

    .btn-lesson.complete:active, .btn-lesson.complete:active .lesson-score {
      background-color: #E8F5E9 !important;
    }    


    .legend {
      font-size: 13px;
    }

    .legend ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

/******** END LESSON MENU *********/

/******** LEGEND *********/

    .legend ul li {
      float: left;
      padding-right: 15px;
      padding-bottom: 7px;  
    }

    .legend ul li i {
      display: inline-block;
      padding-right: 3px;
    }

    .legend .lesson-blue {
    color: #03a9f4;
    }

    .legend .lesson-green {
    color: #048d14;
    }

  .legend .lesson-orange  {
    color: #F57C00;
  }

/******** END LEGEND *********/


/******** LESSON OVERVIEW *********/  

.lesson-content {
    background: #fff;
    padding: 12px 15px;
    min-height: 500px;
    max-width: 780px;    
    /*max-height: 450px;
    overflow-y: auto;*/
    border: 1px solid #9e9e9e;     
    border-radius: 2px;
    color: #000;}
@media screen and (max-width: 1200px) {
  section.main .lesson-content {
    min-height: 500px; } 
}

@media screen and (max-width: 992px) {
  section.main .lesson-content {
    min-height: 525px;
    max-height: 525px;
    overflow-y: auto } 
}

@media screen and (max-width: 768px) {
  section.main .lesson-content {
    min-height: 525px;
    max-height: 525px;
    overflow-y: auto } 
}

@media screen and (max-width: 600px) {
  section.main .lesson-content {
    min-height: 450px;
    max-height: 450px;
    overflow-y: auto } 
}


  .help-btn.on {
    font-weight: bold;
    color: #F69F00;
  }

/* Clear (no border) Buttons */

   .clear-btn {
        padding: 4px;
        border: none;     
        border-radius: 0px;   
      }

    .clear-btn:hover, .clear-btn:active, .clear-btn:focus, .clear-btn:active:focus {
        background-color: #fff;
        border-color: #f19c00;
        color: #f19c00;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;        
      }
       .clear-btn:active:focus {
        background-color: #FFE0B2;
      }

  .clear-btn.arrow {
    border: solid 1px;  
    width: 46%;    
    font-size: 19px;
    line-height: 31px;    
  }


.clear-btn.point {
    border: solid 1px;  
    padding: 6px 10px;     
    line-height: 110%;   
    margin-right: 6px;  
    margin-bottom: 6px;  
    text-align: center;
  }

.clear-btn.point.on {
   color: #F69F00;
   font-weight: bold;
}


.point-list {
  display: none;
}

/* End Clear Buttons */

/******** END LESSON OVERVIEW *********/  

/******** REINFORCER STYLES *********/    
 section.main .reinforcer-box {
    
    color: #000;
    font-size: .9em;
    font-weight: 400;          
    background: #fff;
    padding: 10px 14px;
    border: 1px solid #9e9e9e;   
    border-radius: 2px;    
  }

 section.main .reinforcer-box-q {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    min-height: 65px;
    border-top: none;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;

    padding-bottom: 6px;
  }
  @media screen and (max-width: 1200px) {
    section.main .reinforcer-box-q {      
        min-height: 65px; 
    } 
  }

section.main .reinforcer-box-a {
    font-size: 15px;
    min-height: 45px;
    
    border-bottom: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: #Efefef;
    padding-top: 6px;

  }
  @media screen and (max-width: 1200px) {
    section.main .reinforcer-box-a {
        min-height: 45px; 
    } 
  }

  .reinforcer-lesson-one {
    font-size: 14px;
    display: block;
    margin-bottom: 3px;
  }



    .btn-reinforcer {

        text-align: left;
        white-space: normal;
        font-size: 15px;
        padding: 6px 5px;
        padding-left: 7px;
        border-radius: 0px;   
        background-color: #03a9f4;
        border-color: #03a9f4;
        color: #fff;   
        width: 100%;   
        margin-bottom: 7px;  

    }

    .btn-reinforcer:hover, .btn-reinforcer:active, .btn-reinforcer:focus {
      background-color: #127ECE;
      border-color: #127ECE; 
      color: #fff;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;        
    }

    

    .btn-reinforcer.on, .btn-reinforcer:active:focus { 
      background-color: #2053a8;
      border-color: #2053a8; 
      color: #fff;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;        

    }

    .btn-reinforcer.correct {
      background-color: #388E3C;
      border-color: #388E3C;
    }

    .btn-reinforcer.incorrect {
      background-color: #C62828;
      border-color: #C62828;
    }

    .btn-reinforcer.graded {
        background-color: #03a9f4;
        border-color: #03a9f4;
    }

    .btn-reinforcer.disabled {
      opacity: 1;
    }



    .btn-reinforcer .lnr {
      min-width: 26px;            
      font-size: 19px;
      vertical-align: top;
    }   

    .btn-reinforcer span {
      display: table-cell;

    }

    .reinforcer-row {
      margin-top: 12px;
    }

.btn-reinforcer .stress {
	font-weight: bold;
	color: #ffeb3b;
}


 section.main .reinforcer-box-a-m2 .b-highlight {  
        border-bottom: solid #388e3c 2px;
        color: #000 !important;
        font-weight: bold !important;           
        background-color: #C8E6C9;
        padding-left: 2px;
        padding-right: 2px;
 }

/******** END REINFORCER STYLES *********/    


/******** TUTORIAL STYLES *********/    

.btn-icon-only {                    
  text-align: left;  
  margin: 0px;      
  padding: 0px 4px;      
  background-color: transparent;      
  color: #2196F3;            
  margin-top: 1px;
  margin-bottom: -1px;
  font-size: 15px;        
  vertical-align: top;   
  border: 0px;
  line-height: 100%;
 
}

.btn-icon-only i {   
  font-size: 15px; 

  font-weight bold; 
}

.btn-icon-only:hover, .btn-icon-only:active, .btn-icon-only:focus, .btn-icon-only:active:focus {
  background-color: transparent;
  border-color: #fff;
  color: #90CAF9;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;        
}      

/******** TUTORIAL STYLES *********/    

/******** PTM STYLES (also used in tutorial) *********/

/* PTM Instructions -- needs work with screen size */
 section.main .ptm-instructions {
  min-height: 90px;
  font-size: 14px; 
}

 section.main .ptm-instructions p {
  font-size: 14px;
}

/* End PTM Instructions */

/* Sentence Type */
.sentence-type-row {
  font-size: 12px;
  line-height: 20px;
  padding-left: 0px;
  text-transform: uppercase;
  font-weight: bold;  
}

.sentence-type-row .st-label {    
    line-height: 11px;    
}

.sentence-type-row .st-answer {    
    line-height: 11px; 
    color: #03a9f4;   
}

.sentence-type-row .st-correct {    
  color: #43a047;
}

.sentence-type-row .st-wrong {    
  color: #C62828;
  text-decoration: line-through;
}

.sentence-type-row .st-corrected {    
  color: #C62828;
}
/* End Sentence Type */


/* Lesson Box (used for displaying sentences and codes in PTM) */
 section.main .lesson-box {
    background: #fff;
    padding: 12px 15px;
    min-height: 150px;
    border: 1px solid #9e9e9e; 
    border-bottom: 0px;
    border-radius: 2px;
    color: #000;}
    @media screen and (max-width: 1200px) {
      section.main .lesson-box {
        min-height: 150px; } }


section.main .lesson-box div {
    float: left;
    margin-right: 5px;
    line-height: 120%;
}

section.main .lesson-box div div {
    clear: both;
}

section.main .lesson-box .code {
    font-family: 'Roboto', sans-serif; /* use this or open sans condensed */
    font-size: .7em;
    color: #03a9f4;
    width: 100%;
    text-align: center;    
  }

section.main .lesson-box .word {
    font-size: .9em;
    font-weight: 300;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;    
    cursor: pointer;
    font-family: 'Roboto Slab', serif;
}


section.main .lesson-box .word:hover {
    background-color: #FFF59D;
    border-radius: 2px;
}

section.main .lesson-box .ccode {
    font-family: 'Roboto', sans-serif; /* use this or open sans condensed */
    font-size: .7em;
    color: #fff;
    width: 100%;
    text-align: center;    
    margin-top: -10px;
    margin-bottom: 15px;
    background-color: #42A5F5;
    padding: 2px 5px;
    border-radius: 2px;
  }

section.main .lesson-box .cc-16-17 {
    min-height: 19px;
	font-family: 'Roboto', sans-serif;
	font-size: .7em;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
    padding: 2px 5px;
}

section.main .lesson-box .cc-18-mastery {
    min-height: 27px;
	font-family: 'Roboto', sans-serif;
	font-size: .6em;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
    padding: 2px 5px;
    line-height: 110%;
}

section.main .lesson-box .ccode-alt {
    font-family: 'Roboto', sans-serif; /* use this or open sans condensed */
    font-size: .7em;
    color: #FF5722;
    width: 100%;
    text-align: center;    
    margin-top: -10px;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 0px;
    border-radius: 0px;    
  }

  section.main .lesson-box .no-show {
    display: none;
  }

    section.main .lesson-box .correct-pre-code {
           color: #FB8C00 !important; 
        }

  section.main .lesson-box .graded-wf-code {
           color: #F44336 !important; 
  }

  section.main .lesson-box .correct-wf-code {
           color: #43a047 !important; 
        }

section.main .lesson-box .wrong-wf-code {
    color: #F44336 !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    border: solid #F44336 1px;
}

section.main .lesson-box .wrong-wf-code-w-pointer {
    color: #F44336 !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    border: solid #F44336 1px;
    cursor: pointer;
}

  section.main .lesson-box .correct-cf-ccode {
            background-color: #388e3c !important;
        }


  section.main .lesson-box .wrong-cf-code {          
            background-color: #C62828 !important;
        }

 section.main .lesson-box .code-add-pointer {
	cursor: pointer;
}

/* end lesson box */

/* Sentence xtras (displays between sentene and code buttons) */

.sentence-xtras {
  background-color: #fff; 
  border-left: solid #9e9e9e 1px; 
  border-right: solid #9e9e9e 1px;
}

.sentence-xtras .select-a-code {
  background-color: #efefef; 
  display: inline-block; 
  border-top: solid #efefef 1px; 
  border-right: solid #efefef 1px; 
  border-left: solid #efefef 1px; 
  max-width: 110px; 
  font-size: 12px; 
  padding: 4px 8px;
}

.sentence-xtras .sentence-type-container {
  max-width: 230px;
}

.sentence-xtras #sentence-xtra-20 {
  display: none;
}


.sentence-xtras .btn-text {              
  margin-left: 1px;      
  text-align: left;  
  margin-bottom: 0px;      
  padding: 2px 8px 0px 4px;      
  background-color: #fff;        
  color: #000;            
  height: 20px;
  font-size: 12px;        
  line-height: 14px;        
  border: 0px;        
}

.sentence-xtras .btn-text i {   
  font-size: 11px; 
  margin-right: 3px;
}

.sentence-xtras .btn-text:hover, .sentence-xtras .btn-text:active, .sentence-xtras .btn-text:focus, .sentence-xtras .btn-text:active:focus {
  background-color: #fff;
  border-color: #fff;
  color: #f19c00;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;        
}      

/** End Text Buttons **/



/* Coding Buttons and Containers (based upon standard bootstrap buttons */

      .codes-container {
        background-color: #efefef; 
        border-left: solid #9e9e9e 1px; 
        border-right: solid #9e9e9e 1px; 
        border-bottom: solid #9e9e9e 1px;
      }

      .codes-divider {
        border-top: solid #ccc 1px; 
        margin-top: 5px;       
        margin-bottom: 10px;
      }  
      /* container */
      #wf-code-buttons {
        padding-top: 10px;      
        margin-left: -15px; 
        margin-right: -15px; 
        padding-left: 15px; 
        padding-right: 15px;        
      }

      #part-buttons {
        
        margin-left: -15px; 
        margin-right: -15px; 
        padding-left: 15px; 
        padding-right: 5px; 
        padding-bottom: 2px;

      }

      /* WORD FUNCTION BUTTONS */
      .wf-code-bt {
        /*font-family: 'Roboto Condensed', sans-serif;*/
        margin-right: 5px;
        margin-left: 0px;
        margin-bottom: 5px;
        max-width: 260px;        
        text-align: left;
        white-space: normal;
        padding: 3px 8px;
        border-radius: 0px;   
        background-color: #fff;
        border-color: #03a9f4;
        color: #03a9f4;        
      }

      /* left side */
      .wf-code-bt .code {
        border-right: 1px solid #03a9f4;
        padding-right: 7px;
        font-size: 14px;
        display: table-cell;
        vertical-align: middle;        
      }

      /* ride side */
      .wf-code-bt .code-full {
        font-size: 12px;
        line-height: 13px;    
        white-space: normal;
        display: table-cell;
        padding-left: 7px;
        vertical-align: middle;
        font-weight: 400;
      }


      /* on state */
      .wf-code-bt.on {
           background-color: #03a9f4;
           border-color: #29B6F6;
           color: #fff;
      }

    
      .wf-code-bt.on .code{
            border-right: 1px solid #fff;
      }
      /* end on state */


      /* hover state */
      .wf-code-bt:hover {
           background-color: #03a9f4;
           border-color: #29B6F6;
           color: #fff;
      }

    
      .wf-code-bt:hover .code{
            border-right: 1px solid #fff;
      }
      /* end hover state */

      /* disabled */
      .wf-code-bt.disabled .code, .wf-code-bt[disabled] .code{
        color: #afafb2;
        border-right: 1px solid #afafb2;
        opacity: 1; 
      }

      .wf-code-bt.disabled .code-full, .wf-code-bt[disabled] .code-full {
        color: #afafb2;
        opacity: 1; 
      }
      .wf-code-bt.disabled, .wf-code-bt[disabled] {
        border-color: #afafb2;
        opacity: 1; 
        background: #e9e9e9;
      }


      /* responsive actions (makes button smaller) */
      @media screen and (max-width: 600px) {

         .wf-code-bt {
            width: 52px;
            text-align: center;
            padding-left: 0px !important;
            padding-right: 0px !important;
            
         }

          .wf-code-bt .code, .wf-code-bt:hover .code, .wf-code-bt.on .code {
            border-right: none;
            text-align: center;
            display: inline-block;
            padding-right: 0px
          }

          .wf-code-bt.disabled .code, .wf-code-bt[disabled] .code  {
              border-right: none;
          }

        .wf-code-bt .code-full  {
          display: none;
        }
      }

      /* Force span containers to go inline-block */
      @media screen and (min-width: 600px) {
        .wf-code-bt-container {
            display: inline-block !important;
        } 
      }


      /** END WORD FUNCTION BUTTONS **/

      /** PARTS OF SPEECH BUTTONS **/
    .wf-part-bt:hover, .wf-part-bt:active, .wf-part-bt:focus {
      background-color: #FFB74D;
      border-color: #FFB74D; 
      color: #fff;
      outline: none;
      -webkit-box-shadow: none;
      box-shadow: none;        
    }

      .wf-part-bt.on, .wf-part-bt:active:focus {
        color: #fff;
        border-color: #FB8C00; 
        background-color: #FB8C00;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;     
      }

      .wf-part-bt {
        /*font-family: 'Roboto Condensed', sans-serif;*/
        margin-right: 5px;
        margin-left: 0px;
        margin-bottom: 5px;
        max-width: 200px;        
        text-align: left;
        white-space: normal;
        padding: 5px 5px;
        border-radius: 0px;   
        background-color: #fff;
        border-color: #FB8C00; /*#03a9f4;*/
        color: #F57C00; /*#03a9f4;*/    
        width: 100px;    
        height: 48px;
        font-size: 14px;
        text-align: center;
        line-height: 17px;
        font-weight: 400;
        border-radius: 0px;
        transition: 0.3s
      }


    

      .wf-part-bt .part-abbrev {
          display: none;
        }


    .wf-part-bt.disabled, .wf-part-bt[disabled] {    
        color: #afafb2;
        border-color: #afafb2;
        opacity: 1;
        background: #e9e9e9;
    }


      /* responsive actions (makes button smaller) */
      @media screen and (max-width: 600px) {
       .ptm-part-buttons .wf-part-bt {
          width: 65px;
          height: 40px;
        }
       .ptm-part-buttons .wf-part-bt .part-abbrev {
          display: inline-block;
        }
        .ptm-part-buttons .wf-part-bt .part-full {
            display: none;
        }        
      }
      /** END PARTS OF SPEECH BUTTONS **/

/* End Word Function Code Buttons */


/* Standard Grade Me / Next Buttons */

      .btn-main { 
        background: #048d14;                     
        text-align: left;                  
        color: #fff;
        font-size: 15px;            
        padding: 6px 10px;      
        font-size: 16px;           
        border: 0px;        
        border-radius: 0px; 
        margin: 12px 0px 10px 10px;
      }

   .btn-main:hover {    
        background-color: #43A047;        
        color: #fff;
      }
    .btn-main:active, .btn-main:focus, .btn-main:active:focus {        
        background: #048d14;                     
        color: #fff;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;        
      } 

.btn-main i {
    font-size: 13px;
    padding-left: 5px;        
  }      

      .btn-main.disabled {
        background-color: #afafb2 !important;
        color: #d8d8da;
        opacity: 1;
      } 


@media  (max-width: 320px) {
  .btn-main { 
  
        font-size: 13px;           
        margin: 12px 0px 10px 5px;
      }
  }
/* End Standard Grade Me / Next Buttons */


/* Help Buttons */

   .help-btn {
        padding-left: 0px;
        border: none;
        margin-bottom: 7px;
      }

      .help-btn i {
        font-size: 22px;
        margin-right: 10px;
        vertical-align: sub;
      }

      .help-btn:hover, .help-btn:active, .help-btn:focus, .help-btn:active:focus {
        background-color: #fff;
        border-color: #fff;
        color: #f19c00;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;        
      }



/* End Help Buttons */


/***** WIDGETS *****/
  /* Score Widget */
  .widget-score {    
    width: 100%;
    padding: 10px 10px;
    background: #FFF;
    border: 1px solid #DBE0E4;
    margin-bottom: 0px;
    /*-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
    zoom: 1;
    float: left;
}


.straight-line {
    background-color: #1565C0;
    box-shadow: none !important;
    height: 1px;
    border-radius: 0;
    margin-bottom: 10px;
    overflow: hidden;
    margin-top: 5px;
}

.widget-straight-line {
    background-color: #1565C0;
    box-shadow: none !important;
    height: 2px;
    border-radius: 0;
    margin-bottom: 10px;
    overflow: hidden;
    margin-top: 5px;
}




.widget-score.margin-top-10 {   
  margin-top: 10px;
}






.widget-score .intval {
    color: #fff;
    font-size: 26px;
    line-height: 34px;
    font-weight: bold;
    text-align: center;
    float: left;
    width: 100%;
}


.widget-score .line {
    width: 100%;
}


.widget-score .title {  
    color: #fff;
    font-size: 11px;
    font-weight: 600; 
    text-transform: uppercase;
    text-align: center;
    width: 100%;

}





.widget-link, .widget-link:active, .widget-link:focus {
  font-size: 12px;
  color: #000;
  margin-right: 15px;
  text-decoration: none;
}

.widget-link:hover   {
  text-decoration: none;
  color: #F69F00;
  cursor: pointer;
}


.widget-label {
    color: #777;    
    text-transform: uppercase;
    font-size: 10px; 
    vertical-align: bottom;
}


.widget-counter {  
    font-size: 26px;
    padding-top: 10px;
    line-height: 100%;
    letter-spacing: -1px;
    display: inline-block;
}


.widget-double-line {
    background-color: #1565C0;
    box-shadow: none !important;
    height: 1px;
    border-radius: 0;
    margin-bottom: 10px;
    overflow: hidden;
    margin-top: 5px;
  }

.widget-score-icons {
  font-size: 16px !important;   
}


.widget-explanation {
  font-size: 13px !important;
}

.score-icons {
  font-size: 16px; 
  color: #ccc;
}


.widget-super {
    font-size: 14px;
    vertical-align: text-top;
    display: inline-block;
    margin-top: -6px;
}

/* widget colors */
.widget-blue {
    background: #1565C0;
    border: 1px solid #1976D2;
}

.widget-blue-text {
    color: #1565C0;
}

.widget-orange {
    background: #F69F00;
    border: 1px solid #f19c00;
}

.widget-alt-orange-text {
   color: #F57C00;
}

.widget-alt-orange {
   background-color: #F57C00;
}



.widget-gray {
    background: #9E9E9E;
    border: 1px solid #9E9E9E;
}

.widget-gray-text {
    color: #9E9E9E;    
}

.widget-dark-gray-text {
  color: #686868;
}


.widget-red {
    background: #F44336;
    /*border: 1px solid #EF5350;*/
}

.widget-red-text {
    color: #F44336;
}

.no-left-padding {
  padding-left: 0px;
}

.no-right-padding {
  padding-right: 0px;
}


.counter-condensded {
  font-family: 'Roboto Condensed', sans-serif;  
  font-size: 30px; 
  padding-top: 10px;
  line-height: 100%;
  letter-spacing: -2px;

}

/* Score Details */

.widget-score.score-details {
  font-size: 12px;
  background-color: #E3F2FD;
  text-align: left;
  padding: 5px 8px;
  border: solid #e9e9e9 1px;
  border: solid #BBDEFB 1px;
  margin-bottom: 3px;
  margin-top: 3px;
  color: #333;
}

.widget-score.score-details em {
  color: #F57C00;
}

.widget-score.score-details .header {
  font-weight: bold;
  color: #1565C0;
  font-size: 14px;
  line-height: 120%;
}

.widget-score.score-details .details-left {
  float: left;
  line-height: 120%;
}

.widget-score.score-details .details-right {
  float: right;
  font-size: 26px;
  color: #1565C0;
}

.add-sm-left-padding {padding-left: 0px;}
.add-sm-left-padding {padding-left: 0px;}

@media  (min-width: 768px) and (max-width: 991px) {
  .add-sm-left-padding {padding-left: 10px;}
  .add-sm-right-padding {padding-right: 10px;}
}



/* End Score Details */


/* Correct -n- Incorrect Widget */
.widget-sentence-status {
  border-radius: 2px;   
  margin-top: 8px;   
  display: block; 
  padding: 5px 10px 3px 10px; 
  text-align: center;   
  font-size: 13px; 
  line-height: 12px;
  text-transform: uppercase;
}

.widget-sentence-status span {
  font-size: 12px;
  margin-right: 3px;
}

.widget-sentence-status.correct
  {
    background-color: #388e3c; 
    color: #E8F5E9; 
  }

.widget-sentence-status.incorrect
  {
    background-color: #C62828; 
    color: #FFEBEE; 
  }
/* End Correct -n- Incorrect Widget */



.text-muted-condensded {
    color: #777;
    font-family: 'Roboto Condensed', sans-serif;  
    /*text-transform: uppercase;*/
    font-size: 11px; 
    vertical-align: bottom;
}



.no-padding {
  padding: 0px !important;
}

 

/*****  GRADE REPORT STYLES ****/
  .btn-simple {
    color: #3a3f4b;
    border-color: #c7c7c7;
    background-color: transparent;        
  }

  .btn-simple:hover {    
             
        color: #F57C00;
        border-color: #F57C00;
      }
    .btn-simple:active, .btn-simple:focus, .btn-simple:active:focus {        
        background: #FFF3E0 !important;                    
        color: #F57C00;
        border-color: #F57C00;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;        
      } 
  

  /* Grade Report Styles */  

  .grade-report h2 {
    color: #339642;
    font-size: 24px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .grade-report h3 {
    color: #3E58AA;
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 7px;

  }

  .grade-report a, .grade-report a:active, .grade-report a:visited, .grade-report a:active:focus  {
    text-decoration: none !important;    
    color: #9E9E9E;
  }

  .grade-report a:hover, .grade-report a:focus {
    text-decoration: none !important;    
    color: #333;
  }

  .grade-report .score-box {
    margin-bottom: 10px;
    padding-top: 8px;
    padding-bottom: 8px;   
    background-color: #3B3F4B; 
    color: #fff;
    min-height: 92px;
  }

  @media (max-width: 991px) {
  .grade-report .score-box {
    min-height: 82px;
  }
}

  .grade-report .score-box.blue {
    background-color: #2153A8;
  }

  .grade-report .score-box.green {
    background-color: #038D13;
  }

  .grade-report .score-box-title {
    display: block;
    font-size: 16px;
  }

  .grade-report .score-box-row { 
    display: table-row;
    padding-top: 5px;
  }

  .grade-report .score-box-score {
    display: table-cell; 
    vertical-align: top;    
    font-size: 36px;
    font-weight: bold;
    padding-right: 15px;
    padding-left: 0px;
    line-height: 100%;
    white-space: nowrap;
  }

  .grade-report .score-box-details {
    display: table-cell; 
    vertical-align: top;        
    font-size: 12px;
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 8px;
    line-height: 15px;
  }

  .grade-report .score-box-super {
    font-size: 16px;
    vertical-align: super;
    display: inline-block;
    padding-left: 2px;
   } 
   /* End Grade Report Styles */


   /* Responsive Lesson Scores Table */
  .score-table table { 
    width: 100%; 
    border-collapse: collapse; 
  }
  
  .score-table td:nth-of-type(odd) { 
    background: #E2E2E4; 

  }
  .score-table td {
    color: #339642;
  }
  .score-table tr td:first-child {
    color: #3B3F4B;
  }

  .score-table th { 
    background: #3B3F4B; 
    color: white; 
    font-weight: normal;     
  }
  .score-table td, .score-table th {     
    padding: 6px 3px;
    border: 1px solid #ccc; 
    text-align: center; 
    font-size: 14px;    
  }

  @media
  only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1023px)  {

    /* Force table to not be like tables anymore */
    .score-table table, .score-table thead, .score-table tbody, .score-table th, .score-table td, .score-table tr {
      display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .score-table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    .score-table tr { border: 1px solid #ccc; background-color: #fff; padding: 0px; }



    .score-table td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
      background-color: #fff;
      padding: 0px;
      padding-left: 10px;
      line-height: 200%;

    }

    .score-table td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0px;
      left: 0px;
      width: 45%;
      padding-right: 0px;
      white-space: nowrap;
      background-color: #3B3F4B;
      color: #fff;
      line-height: 200%;

    }

    /*
    Label the data
    */
    .score-table td:nth-of-type(1):before { content: "Lesson"; }
    .score-table td:nth-of-type(2):before { content: "1"; }
    .score-table td:nth-of-type(3):before { content: "2"; }
    .score-table td:nth-of-type(4):before { content: "3"; }
    .score-table td:nth-of-type(5):before { content: "4"; }
    .score-table td:nth-of-type(6):before { content: "5"; }
    .score-table td:nth-of-type(7):before { content: "6"; }
    .score-table td:nth-of-type(8):before { content: "7"; }
    .score-table td:nth-of-type(9):before { content: "8"; }
    .score-table td:nth-of-type(10):before { content: "9"; }
    .score-table td:nth-of-type(11):before { content: "10"; }    
    .score-table td:nth-of-type(12):before { content: "11"; }
    .score-table td:nth-of-type(13):before { content: "12"; }
    .score-table td:nth-of-type(14):before { content: "13"; }
    .score-table td:nth-of-type(15):before { content: "14"; }
    .score-table td:nth-of-type(16):before { content: "15"; }
    .score-table td:nth-of-type(17):before { content: "16"; }
    .score-table td:nth-of-type(18):before { content: "17"; }
    .score-table td:nth-of-type(19):before { content: "18"; }
    .score-table td:nth-of-type(20):before { content: "19"; }
    .score-table td:nth-of-type(21):before { content: "20"; }    
  }
  /* End Responsive Lesson Scores Table */


@media (min-width: 768px) {
.modal-grade-report {
    width: 98%;
}
}
@media (min-width: 1028px) {
.modal-grade-report {
    width: 1024px;
  }
}

/*****  END GRADE REPORT STYLES ****/

/*****  MODULE INTRO STYLES ****/
 /* hide all content except intro video to start */
  .m-intro-parts {
    display: none;
  }


  #module-intro-video {
    display: block;
  }

  .intro-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
  }

  .intro-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

/*****  END MODULE INTRO STYLES ****/  

/*****  SIDE STYLES ****/   
.g-sidenav {
	font-weight: 300;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
	right: 0;    
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 15px;
    background: rgba(27, 27, 27, .9);    
}

.g-sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #f1f1f1;
    display: block;
    transition: 0.3s
}

.g-sidenav .nav-divider {
	border-bottom: solid #818181 1px; 
	margin: 4px 32px;
}


.g-sidenav a:hover, .offcanvas a:focus{
    color: #818181;   
}

.g-sidenav i {
	font-size: 13px;
}
/*****  END SIDE STYLES ****/   


/*****  MASTERY TEST MENU STYLES (intro also uses many of these ****/
  .mastery-left-col { 
    background-color: #fff; 
    text-align: left;
    padding-bottom: 10px;
  }

  .mastery-score-col {
    background-color: #fff;
    padding-bottom: 15px;
  }


  .mastery-content {      
    padding-left: 15px;
    padding-right: 15px;  
    max-width: 65ch;    
  }

  .mastery-content p,  .mastery-content li {      
    font-size: 14px !important;
  }

  .mastery-left-col h2, .mastery-content h2,  .mastery-score-col h2 { 
    margin-top: 0px !important;
    padding-top: 14px !important;
  }

  .mastery-content .mastery-heading {
    color: #f19c00 !important; 
    font-size: 20px !important; 
    margin-bottom: 20px;
  }

  .mastery-content .dark-bold {
    font-weight: bold; 
    color: #000;
  }

  /** Mastery nav buttons **/
  .mastery-btn {
    padding-left: 0px;
    border: none;
    margin:4px 0;                
    border: none;
    border-radius: 0px;
    font-size: 13px;
    padding: 4px 0px 4px 4px;
    width: 100%;
    text-align: left;     
    }

  .mastery-btn .mastery-btn-text {
    display: inline-block;
    vertical-align: top;
    padding-top: 2px;
  }

  .mastery-btn i {
    font-size: 21px;
    margin-right: 4px;        
    display: inline-block;
  }

  .mastery-btn.on {
    color: #f19c00;
    border-left: solid #f19c00 2px;
  }

  .mastery-btn:hover, .mastery-btn:active, .mastery-btn:focus, .mastery-btn:active:focus {
    background-color: #fff;
    color: #f19c00;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;        
  }

  @media screen and (max-width: 767px) {
    .mastery-content { 
      padding-left: 0px;
      padding-right: 0px;      
    }

    .mastery-btn {
      text-align: center;
      border: solid 0px;
      width: auto;
      margin-left: 2px;
      margin-right: 2px;
      font-size: 13px;
    } 

    .mastery-btn i {  
      margin-right: 0px !important;  
    }

    .mastery-btn.on {  
      border-left: none !important;
      border-bottom: solid #f19c00 2px;
    }  
  }

  @media screen and (max-width: 350px) {
    .mastery-btn {    
      margin-left: 3px;
      margin-right: 3px;
    }

    .mastery-btn .text-m-part {
      display: none;
    }
  }


  /* hide all content except intro to start */
  .mc-parts {
    display: none;
  }

  #mastery-intro {
    display: block;
  }

  
  /* button to start test and attempts tracker */
  .mastery-button-col {
    margin-top: 25px;
  }

  .attempts-col {
    margin-top: 5px;
    margin-bottom: 15px;
  }

  .attempts-box {
    border: solid #ccc 1px; 
    font-size: 14px;        
    width: 140px;    
    text-align: left;
    display: inline-block;            
  }

  .attempt-box-header {
    display: block;
    background-color: #ccc;
    padding: 6px;
   }

  .attempts-container {
    padding: 6px; 
    background-color: #fff;
  }

  .attempts-circle {
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 50%!important;
    padding-left: 5px;
    padding-top: 4px;
    font-size: 18px;
    line-height: 20px;    
    width: 30px;
    height: 30px;
    margin-right: 10px;     
    display: inline-block;     
  }

  .attempts-container i {
    font-size: 18px;
    color: #03a9f4;
  }

  /* Action button */
  .btn-action { 
    background: #03a9f4;                     
    text-align: left;                  
    color: #fff;            
    padding: 6px 10px;      
    font-size: 17px;           
    border: 0px;        
    border-radius: 0px; 
    margin: 0px;
    font-weight: 300;
  }

  .btn-action:hover {    
    background-color: #4FC3F7;        
    color: #fff;
  }
  
  .btn-action:active, .btn-action:focus, .btn-action:active:focus {        
    background: #03a9f4;                     
    color: #fff;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;        
  } 

  .btn-action.disabled {
    background-color: #afafb2;
    color: #d8d8da;
    opacity: 1;
  } 



  .letter-container {
    border: 1px solid #fff;
    border-radius: 50%!important;
    padding-left: 6px;
    font-size: 18px;
    line-height: 20px;
    float: left;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    font-weight: 400;
  }


  .m-score {
    border-bottom: dotted #B3E5FC 1px; 
    margin-bottom: 8px; 
    border-left: solid #B3E5FC  0px;                    
  }
  
  .m-score-left, .m-score-right {
    font-size: 13px;
    display: inline-block;                    
    padding-bottom: 5px;
  }

  .m-score-left {
    float: left;
    padding-left: 5px;
  }

  .m-score-right {
    float: right;
    font-weight: bold;
    color: #03a9f4;
    font-style: italic;
  }

  @media screen and (max-width: 767px) {
    .m-score {
      padding-right: 10px;
    }
  }
/***** END MASTERY TEST MENU STYLES ****/

/***** CUSTOM MODAL STYLES ****/
.gumpp-modal-header {
    padding: 10px 20px;
}

.gumpp-modal-header h3 {
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 20px;
    color: #000;
    /*font-weight: bold;*/
    /*text-transform: uppercase*/
}

.gumpp-modal-body {
    padding-top: 15px;
    padding-bottom: 0px;
    margin-bottom: 0px;   
    font-size: 15px; 
}

.gumpp-modal-footer {
    padding: 10px 20px;
}


.btn-modal {
    padding: 0px;
    font-size: 18px;
    border: none;
    background-color: transparent;
    font-weight: normal;
    color: #9E9E9E;
}

    .btn-modal:hover {
        color: #333;
    }

    .btn-modal:hover, .btn-modal:active, .btn-modal:focus, .btn-modal:active:focus {
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
/***** CUSTOM MODAL STYLES ****/


/* Audio player control overrides */
.ptm-reminder {
  width: 85px;
}

.ptm-reminder .audio-player {
    width: 220px;
    font-size: 14px;
    position: relative;
    left: -124px
}

.ptm-reminder .audio-player videogular vg-scrub-bar, [videogular] vg-scrub-bar {
    width: 90px !important;
}

.ptm-reminder .audio-player videogular vg-time-display, [videogular] vg-time-display {
    font-size: 13px !important;
    width: 65px !important;
}


.tutorial-audio {
  width: 140px;
}

.tutorial-audio .audio-player {
    width: 220px;
    font-size: 14px;
    position: relative;
    left: 0px
}

.tutorial-audio .audio-player videogular vg-scrub-bar, [videogular] vg-scrub-bar {
    width: 90px !important;
}

.tutorial-audio .audio-player videogular vg-time-display, [videogular] vg-time-display {
    font-size: 13px !important;
    width: 65px !important;
}

.audio-player .btn-modal {
    width: 20px;
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
    color: #fff;
    font-size: 14px;
}

.audio-player .btn-modal:hover {
  color: #ddd;
  transition: .5s;
}

.audio-player videogular vg-controls .controls-container, [videogular] vg-controls .controls-container {    
    background-color: rgba(251, 140, 0, 0.8) !important;
}
/* end audio player control overides */

/* Miscellaneous */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

/* Tutorial */
@media  (max-width: 320px) {
	.tutorial-button-group .btn-main {         
	font-size: 13px !important;
    }
}


.tutorial-button-group .btn-main {
    margin: 0px;            
    margin-top: 1px;
    margin-bottom: 4px;
    padding: 3px 8px;
    margin-left: 6px;        
    font-size: 15px;
}

.sentence-xtras-tutorial {
    border-top: solid #ededed 1px;
    padding-top: 4px;
}

.sentence-xtras .select-a-code-tutorial {
    position: absolute;
    top: 11px;
}


.tutorial-audio .btn-text {
    margin-left: 1px;
    text-align: left;
    margin-bottom: 0px;
    padding: 2px 8px 0px 4px;
    background-color: #fff;
    color: #000;
    height: 20px;
    font-size: 12px;
    line-height: 14px;
    border: 0px;
}

.tutorial-audio .btn-text:hover, .tutorial-audio .btn-text:active, .tutorial-audio .btn-text:focus, .tutorial-audio .btn-text:active:focus {
    background-color: #fff;
    border-color: #fff;
    color: #f19c00;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.tutorial-audio .btn-text i {
    font-size: 11px;
    margin-right: 3px;
}

.tutorial-audio div {
	float: none !important;
}

.tutorial-box .tutorial-audio .audio-player {
	left: -60px !important;	
}

.tutorial-box {
	
}

/* End Tutorial  */


/* Overrid for tutorial modal */
.sweet-alert {
    font-family: "lato",sans-serif !important;
}
.sweet-alert h2 {
    font-size: 18px;
    line-height: 135%;
 }


 section.main .lesson-box .word:hover {
    background-color: #FFF59D;
    border-radius: 2px;
}

.correct-pre-code {
color: #0000ff !important;
}

/* Message Window */
    .g-msg {    	
    	text-align: center;
    }

    .g-msg .stack-lg {
    	font-size: 3.5em;
    }

	.g-msg .stack-md {
    	font-size: 1.4em;
    }

    .g-msg .stack-blue {
    	color: #2196F3;
    }

    .g-msg .stack-orange {
    	color: #FF9900;
    }

    .g-msg .stack-ltgreen {
    	color: #9CCC65;
    }    

    .g-msg .stack-green {
    	color: #21a226;
    }     

    .g-msg .stack-ltred {
    	color: #EF9A9A;
    }    

    .g-msg .stack-red {
    	color: #D32F2F;
    }     


    .g-msg .stack-content {
    	max-width: 250px; 
    	margin-left: auto; 
    	margin-right: auto;
    }

    .g-msg .greeting {
    	font-size: 1.2em;
    	font-weight: bold;
    }


/*****  TESTING CSS - can be removed later ****/

/* Testing CSS - can be removed later */
   /* little buttons for testing */
        .wf-part-bt-sm {
          width: 70px;
          height: 46px;
        }
        .wf-part-bt .part-abbrev-sm {
          display: inline-block !important;;
        }
        .wf-part-bt .part-full-sm {
            display: none !important;
        }
        .wf-code-bt-sm {
            width: 50px;
            text-align: center;
            
         }

          .wf-code-bt-sm .code, .wf-code-bt-sm:hover .code, .wf-code-bt-sm.on .code {
            border-right: none;
            text-align: center;
            display: inline-block;
            padding-right: 0px
          }

    /* end little buttons */

/***** END TESTING CSS ****/    

/**** - Assessment overrides ********/
.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.assessDates {
    font-size: 13px;
    font-style: italic;
}

.modal-copy {
    font-size: 16px !important;
    line-height: 155% !important;
}

.modal-header {
    background-color: #FB8C00;
}

.modal-title {
    color: #fff;
}

.loading-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);  
  z-index: 999;
  padding-top: 20%;
  text-align: center;
  color: #fff;
}

.loading-msg {
    margin-top: 15px; 
    border: solid #777 1px; 
    border-radius: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100px; 
    background-color: #fff; 
    padding: 10px; 
    color: #337ab7;
}

.bt-explanation {
    font-size: 15px;
    line-height: 20px !important;
    color: #000;
}

.bt-explanation h5 {
    font-size: 15px;
    font-weight: bold;
    margin: 0px;
    padding-bottom: 4px;
}


.bt-explanation ol {
    margin-top: 8px; 
    padding-left: 8px;
    margin-left: 8px;
}

.bt-explanation ol li {
    padding-bottom: 6px;
}


@media (max-width: 576px) {
  section.lesson-bar h1 {
    font-size: 14px;  
    padding-top: 9px;
  }
}