/* Fonts */
@font-face {
  font-family: "Input Mono";
  src: url("../briefy_fonts/InputMono-Regular-Edu.woff");
  src: url("../briefy_fonts/InputMono-Regular-Edu.woff2");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Input Mono";
  src: url("../briefy_fonts/InputMono-Medium-Edu.woff");
  src: url("../briefy_fonts/InputMono-Medium-Edu.woff2");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Output Sans";
  src: url("../briefy_fonts/OutputSans-Regular-Edu.woff");
  src: url("../briefy_fonts/OutputSans-Regular-Edu.woff2");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Output Sans";
  src: url("../briefy_fonts/OutputSans-Medium-Edu.woff");
  src: url("../briefy_fonts/OutputSans-Medium-Edu.woff2");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Output Sans";
  src: url("../briefy_fonts/OutputSans-Bold-Edu.woff");
  src: url("../briefy_fonts/OutputSans-Bold-Edu.woff2");
  font-style: normal;
  font-weight: 700;
}

/*pageContainer for mainbody,a 3-part column flexbox, include header,level,content_container */
.pageContainer {
  display: flex;
  /* align-items: center; */
  height: 50%;
  flex-direction: column;
  /* font-size: 1rem; */
  padding-top: 1%;
  padding-left: 7%;
  padding-right: 7%;
}

.pageContainer #header {
  width: 100%;
  /* border: solid 1px #000000; */
}

.pageContainer #level {
  width: 100%;
  margin-top: 50px;
}

.pageContainer #content_container {
  width: 100%;
  height: 50%;
  /* border: solid 1px #000000; */
  margin-top: 30px;
}
/*pageContainer for mainbody,a 3-part column flexbox */

/*flexHeader for header, a 3-part row flexbox,include logoImg, title, sidemenu */
.flexHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  /* 
    background-color:#fff; */
  justify-content: space-between;
}
.flexHeader li {
  flex-direction: row;
  text-align: center;
  /* flex-basis: 30%; */

  /* background-color: blanchedalmond;
    border: solid 1px #000; */
}

#logoImg {
  flex: 1;
  margin-left: -3%;
}

.logoImage {
  width: 35%;
}

@media screen and (max-width: 767px) {
  .logoImage {
    width: 70%;
  }
}

@media screen and (max-width: 380px) {
  .logoImage {
    width: 100%;
  }
}

#title {
  flex: 3;
}

#sidemenu {
  flex: 1;
}

/*a inside row-flexbox for menubutton in sidemenu*/
.buttonGroup {
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color: #fff;
  flex-wrap: wrap;
}

.buttonGroup li {
  flex: 1;
}
/*a inside row-flexbox for menubutton in sidemenu*/

/*flexHeader for header, a 3-part row flexbox,include logoImg, title, sidemenu */

/*flexbox foe levelgroup, a 5-part for flexbox, include level1---level5*/
/* .levelGroup {
  display: flex;
  flex-direction: row;
  text-align: center;
  width: 60%;

  padding: 1rem 0rem;

  /* flex-basis: 20%; */
/* flex-wrap: wrap;
  justify-content: flex-start;
}  */

.levelGroup {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 1em 0em;
  /* flex-basis: 20%; */
  flex-wrap: wrap;
  justify-content: flex-start;
}

#level5 {
  margin-right: 0;
}

/* .levelGroup li {
  padding: 1rem 2rem 1rem 2rem;

  border-radius: 5px;
  margin-bottom: 4%;
  margin-right: 2%;

  background-color: rgba(0, 0, 0, 0.1);

  transition-property: color, background-color;
  transition-duration: 1s;
} */

.levelGroup li {
  padding: 1em 0;
  border-radius: 5px;
  margin-bottom: 1em;
  margin-right: 1em;
  background-color: rgba(0, 0, 0, 0.1);
  transition-property: color, background-color;
  transition-duration: 1s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
}

/* .levelGroup li:nth-child(2){
    background-color: red;
} */

/* hover effect */

/* .levelGroup a:hover{
    color: white;
} */

.levelGroup li:hover {
  color: white;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
}

.levelOn {
  color: white !important;
  background-color: rgb(0, 0, 0) !important;
}

/*To fit tablet*/
@media screen and (max-width: 770px) {
  .levelGroup {
    display: flex;
    flex-direction: row;
    text-align: center;
    padding: 1em 0em 1.5em 0em;
    /* flex-basis: 20%; */
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .levelGroup li {
    padding: 1em 0;
    border-radius: 5px;
    margin-bottom: 0.7em;
    margin-right: 0.7em;
    background-color: rgba(0, 0, 0, 0.1);
    transition-property: color, background-color;
    transition-duration: 1s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
  }

  #level1,
  #level2,
  #level3 {
    width: calc(33.33% - 0.5em);
  }

  #level3 {
    margin-right: 0px;
  }

  #level4,
  #level5 {
    width: calc(50% - 0.4em);
  }
}
/*To fit moblie*/
/* @media screen and (max-width: 380px) {
  #sidemenu {
    position: absolute;
    right: 12px;
    top: 26px;
  }
  .levelGroup {
    flex-direction: inherit;
    width: 80%;
    flex-basis: 30%;
  }
  .levelGroup li {
    /* padding: 0.5rem 0.5rem 0.5rem 0.5rem; */
/* flex-grow: 1;
    margin-right: 1%;
  } */

/* .levelGroup li:nth-child(2){
    

        flex-grow: 1;
        }


    .levelGroup li:nth-child(4){


    flex-grow: 1;
    }

    .levelGroup li:nth-child(5){
  
        align-self: stretch;
        flex-grow: 1;
        }
     */

/*flexbox foe levelgroup, a 5-part for flexbox, include level1---level5*/

/*flexbox for area_content, flexbox includes 15 elements, for large screen 3 column,5 each, for tablet, 2 columns, for mobile 1 column*/
.content_container {
  margin-top: 3rem;
}

.contentGroup {
  display: grid;
  margin-top: 1em;
  margin-bottom: 6em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  text-align: center;
}

.contentGroup li {
  word-wrap: break-word;
  width: 100%;
  padding: 1em 0 1em 0em;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  transition-property: color, background-color;
  transition-duration: 1s;
  cursor: pointer;
  line-height: 100%;
}

/* hover effect */

.contentGroup a:hover {
  color: white;
}

.contentGroup li:hover {
  color: white;
  background-color: rgb(0, 0, 0);
}
/* hover effect */

/*flexbox for area_content, flexbox includes 15 elements, for large screen 3 column,5 each, for tablet, 2 columns, for mobile 1 column*/

a {
  text-decoration: none;
  color: #333;
}

.sans_Font_Medium {
  font-family: "Output Sans", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.2rem;
}

/*small font style for levels and categories*/

/*Reveal and Hide Styles*/

.toggle-btn {
  display: none;
}
@media screen and (max-width: 770px) {
  .contentGroup {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-column-gap: 0.7em;
    grid-row-gap: 0.7em;
    text-align: center;
  }

  .toggle-btn-visible {
    display: block;
  }

  .toggle-target-hidden {
    display: none;
  }

  .toggle-target-expanded {
    display: block;
  }

  .buttonGroup li {
    width: 100%;
    margin-bottom: 3%;
    flex-grow: 1;
  }
}