.sidebar .active, #landing_page_menu .active{
    /*color: #8a2be2;*/
}
.coursenamemenu{
    min-height: 95px;
    /*background-color: #ebe2fb;*/
    padding: 12px;
    margin-bottom: 0px;
    color: #212121;
    border-radius: 4px;
}
.coursenamemenu h3{font-size: 18px; font-weight: 600;
    letter-spacing: 0.6px; line-height: 24px;  display: -webkit-box;
  -webkit-line-clamp: 3;     /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;}
.course_start{
    background-color: blueviolet;
    color: white;
    padding: 12px 15px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    border: none;
}
#menuContainer .parent_ul_title{ display: flex; padding: 8px 0px 4px 4px; margin-bottom: 4px;}
.sidebar ul li, #landing_page_menu ul li{
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    line-height: 20px;
    position: relative;
}
.parent_ul_title{

    font-weight: 600;
    font-size: 16px;
}
/*#landing_page_menu ul li{color: #666 !important;}*/
.navbtns{
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    line-height: 40px;
    color: #212121 !important;
    text-decoration: none;
}
.navbtns svg{width: 24px;
    height: 24px;
    display: inline-block;
    margin: 0px 5px -8px 0px;
    /*background: #ebe2fb;*/
 }
 .navbtns svg, .navbtns svg path{fill: #212121;}
    #previous_v svg{transform: rotate(180deg);}
 }
.sidebar canvas {
    height: 20px !important;
    width: 20px !important;
}
/*img {
    width: 100%;
    margin-bottom: 18px;
}*/
.progress-wrapper {
    position: relative;
    display: flex;
}

.progress-label {
font-size: 13px;
    float: left;
 color: #333 !important;
    margin-bottom: 0px;
    width: auto;
    text-align: center;
    margin-right: 10px;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    background: #fff;
}

/*progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    width: 100%;
    height: var(--progress-bar-height);
    background-color: var(--progress-bar-color);
    border: none;
}
 progress::-moz-progress-bar {
    background-color: var(--progress-bar-value-color);
}
 progress::-webkit-progress-bar {
    background-color: var(--progress-bar-color);
}
 progress::-webkit-progress-value {
    background-color: var(--progress-bar-value-color);
}
 progress::-ms-fill {
    background-color: var(--progress-bar-value-color);
}
:root {
    --progress-bar-height: 4px;
    --progress-bar-color: #fff;
    --progress-bar-value-color: #8a2be2;
    --progress-bar-value: 20%;
}*/

progress[value] {
--color: #fff;
  --background: rgba(0,0,0,0.2);

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  margin: 9px 0px 0px 0px;
  height: 8px;
  padding: 1px;
  border-radius: 10em;
  background: var(--background);
}
progress[value]::-webkit-progress-bar {
  border-radius: 10em;
  background: var(--background);
}
progress[value]::-webkit-progress-value {
  border-radius: 10em;
  background: var(--color);
}
progress[value]::-moz-progress-bar {
  border-radius: 10em;
  background: var(--color);
}



.sidebar {
    margin: 0;
    padding: 0;
    width: 380px;
    left: 0px;
      transition: 0.5s cubic-bezier(.36,-0.01,0,.77);
    /*background-color: #f1f1f1;*/
    position: fixed;
  /*  height: 100%;
    overflow: auto;*/
    z-index: 9999;
}
.sidebar.open{left: -380px;}
#sidebar-toggle.toggle-btn{    background: transparent; color: #333;
    border: 0px;
    position: absolute;}
    .toggle-btn .fa-times{left: 382px;
    position: absolute;
    top: 10px;
    font-size: 21px;
    font-weight: 100;}
       .toggle-btn .fa-bars{left: 385px;
    position: absolute;
    top: -4px;
    font-size: 21px;
    font-weight: 100;
    background: #fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    border: 1px solid #ccc;
  }
.content-right {
      transition: 0.5s cubic-bezier(.36,-0.01,0,.77);
    margin-left: 380px;
    padding: 1px 0px;
    
}
.content-right.open{  margin-left: 0px;}
#pageNewContent.indexpage{ margin-left: -380px;  width: calc(100% - -380px); padding-bottom: 50px;
    position: relative;
    min-height: 100vh !important;}
.no-margin{margin: 0px !important;}
.outer{padding:0px;}
.outer .container-fluid{margin: 0px !important; padding: 0px !important;}
#pageNewContent{    /*height: calc(100vh - 40px);*/
    display: inline-block; padding: 0px 0px;
    width: 100%;}
    #vertical_nav a{background: #f6f6f6; padding: 4px 0px; text-decoration: none;}
    #vertical_nav a:hover{opacity: 0.8;}
#menuContainer{    overflow: auto;
    height: calc(100vh - 193px); }
     #horizontal_nav{background: #f6f6f6; justify-content: center; align-items: center; display: flex;}

  #horizontal_nav .navbtns{border-right: 1px solid #dfdfdf;   
    width: auto;}
     #horizontal_nav #next{ text-align: left;}
   #horizontal_nav .navbtns:last-child{border-right: 0px;}
  #horizontal_nav #next.navbtns svg  {transform: rotate(270deg);
  margin: 10px 10px -8px 10px;}
    #horizontal_nav #previous.navbtns svg  {transform: rotate(90deg);
  margin: 10px 10px -8px 10px;}
  #horizontal_nav .navbtns{float: unset !important;  padding: 11px 15px 11px 15px;}
  .progress-wrapper{margin-bottom: 0px !important;}
  .classic .lesson-nav--full {
    align-items: center;
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    pointer-events: none;
    position: relative;
    width: 100%;
}
.navbtns{    display: inline-block;
    width: 100%;}

  #home_nav{border-bottom: 1px solid #e5e5e5;
    background: #f9f9f9;
    padding: 3.5px 0px;}

    @media (max-width: 480px) {
      .content-right{margin-left: 0px;}
      .sidebar{width: 380px;}
     .toggle-btn .fa-bars{left: 370px; top:7px;}
    .sidebar.open .toggle-btn .fa-bars{left: 380px; top:-3px;}
    #sidebar-toggle.toggle-btn{z-index: 99;}
    }

     @media (max-width: 430px) {
      .content-right{margin-left: 0px;}
      .sidebar{width: 312px;}
     .toggle-btn .fa-bars{left: 5px; top:7px;}
    /*.sidebar.open .toggle-btn .fa-bars{left: 312px; top:7px;}*/
    #sidebar-toggle.toggle-btn{z-index: 99;}
    }

  @media (max-width: 667px) {
    #vertical_nav a{padding:12.5px 0px; line-height: 1.5; }
    #menuContainer{    overflow: hidden; }
    .inside-box{overflow: auto;}
  #pageNewContent.indexpage{ margin-left: 0px; width: calc(100% - 0px); }
       }