body{
  margin-left: 0;
  margin-top: 0;
  font-family: sans-serif;
  color: black;
}

.active{
  background-color: #007bff;
}

/* NAV-BAR */

.brand-name {
padding-top: 7px;
padding-left: 7px;
padding-right: 15px;
  float:left;

    font-weight: 500;
    font-size: x-large;
    color: white;

}

.nav-bar{
  width: 100%;
    position: fixed;
    background-color: #007bff;
    top: 0;
    z-index: 2;
    padding-top: 1px;
    padding-bottom: 1px;
    box-shadow: 1px 1px 5px #888888;
}



ul {

  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

}



li {
  float: left;
  padding-left: 1%;
    padding-right: 1%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 13px;
  text-decoration: none;

  font-size: 20px;
    padding-top: 10px;
    padding-bottom: 15px;

}

li a:hover {
  background-color: #111111;
  color: white;
}




/* section-more-body */


#section-more-body{
  display: none;
}

.more-cancel{

  position: absolute;
    right: 20px;
    top: 14px;
    padding: 11px;
}



.add-section-more-body{
  width: 100%;
  display: block !important;
  position:fixed;
  z-index: 2;
  margin-top: 0;
  background-color: #5a5e5f;
  padding: 42px;
  padding-top: 15px;
  height: 400px;
  overflow-x: hidden;
  color: white;
}


.more-col{
  padding-top: 10px;
}


.more-content-title{

  font-size: 26px;
  font-weight: 400;
}





.sub-topic {
  color: #fff;
}




.sub-topic :hover{
  background-color: #cacaca;
  border-radius: 1px;
  color: black;
}








/* SIDE-NAV-BAR */


.sidenav {

  height: 100%;
  width: 220px;
  position: fixed;
  z-index: 1;
  left: 0;
  background-color: #f1f1f1;
  overflow-x: hidden;
  box-shadow: 1px 1px 5px #888888;
}

.sidenav a {
  padding: 0 8px 6px 16px;
  text-decoration: none;
  font-size: 19px;
  padding-bottom: 0;
  color: black;
  display: block;
}

.sidenav a:hover:not(.active){
  background-color:  #555;
  color: white;
  padding-left: 25px;
}


.active{
  background-color:  #007bff;
}


/* didnav-subject-title */

.didnav-subject-title{
  font-size: 28px;
    padding-left: 10px;
}










/* hide show side menu */

.mystyle {
  display:block !important;
}

.mystyle2 {

  position: relative;
  margin-left: 220px;
  margin-top: 55px;
  z-index: 0;

}






/* hide nave bar */

.menu-button{
  float:left;
  margin-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}




@media (max-width: 980px) {
  .hide-menu-items{
    display: none;
  }


  .sidenav{
    display: none;
  }

  .content-body{
    margin-left: 3px !important;
    padding: 0 0;
  }

  .icons{
    display: none;
  }

}



@media  (min-width: 980px) {
  .menu-button{
    display: none;
  }


}





/* contentbody */


.content-body{
  position: relative;
  margin-left: 220px;
  margin-top: 55px;
  z-index: 0;
}



/* body-col */

.body-col{
  padding: 16px 15px 32px 15px;
  border-right: 1px solid #f1f1f1;
}


.subject-title{
  margin-top: 15px;
font-size: 40px;
font-weight: 400;

}



/* Next-button */

.pre-next-buttons{

  display: flow-root;
  margin-top: 15px;
}


.Previous-button{
  float: left;
}


.Next-button{
      float: right;
}


.topic-info{
  font-size: 18px;
  margin-top: 25px;
  background-color: #cbdeef;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 8px;
padding-right: 15px;
}

.topic-info p{

    margin-bottom: 8px;
}


.exampe-box{
  background-color: #f1f1f1;
  padding-top: 35px;
    padding-left: 10px;
    padding-bottom: 10px;
    margin-bottom: 40px;
}



.code-play{
  background-color: white;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 2px;
    font-weight: 600;
}


.code-play p{
  margin-bottom: 8px;
}

.example-output {
  padding-top: 5px;
}

.example-output p{
margin-bottom: 2px;
background-color: white;
}



.give-note{
  font-size: 18px;
      margin-top: 25px;
      background-color: #b4ffb5;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 1px;
      padding-right: 15px;
}

.give-note p{
  margin-bottom: 8px;
}








/* right-body */

.right-body{
padding-top: 16px;
}



/* insta facebook icons */

.icons{
  float: right;
  font-size: 35px;
  color: white;
  margin-right: 35px;
}


.icons :hover{
  background-color: #111111;
}



.ul-item-menu{
  display: contents;
}

/* Example para  */

.example_p{
  padding-left: 10px;
}