body{
    background-color: #202020;
    overflow: scroll;
}
body > div {
  position: relative;
}
.flex-container {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    x-overflow: scroll;
 /*   background-color: DodgerBlue;*/
  }
  
  .flex-container > div {
    
    padding: 20px;
    margin-left: 10px;
    margin-top: 10px;
  }
  .settingsBox{
    padding: 0px!important;
  }
  #top{
    height: 58px;
    width: 100%;
  }
  #message{
    padding-left: 58px;
    position: fixed;
    z-index: 99;
  }
  .settingsBox{
      background-color: rgba(256, 256, 256, 0.9);

  }
  .editor{
    background-color: rgba(76, 76, 76, 1);
    color: white;
    resize: none;
    overflow: hidden;
    border: none;
    margin-top: 10px;
    margin-left: 10px;
    padding: 20px;
    font-size: 14pt;
    font-family: Merriweather, serif;
    line-height: 1.6em;
  }
  .sButton{
    width: 100px;
    height: 30px;
    background-color: #202020;
    color: white;
    font-family: hind;
    text-transform: uppercase;
    font-size: 8pt;
    cursor: pointer;
  }
    .chapterText{
        background-color: rgba(256, 256, 256, 0.9);
    }
  .hidden{
      display: none;
  }
  .cnav{
    text-transform: uppercase;
    background-color: rgba(256, 256, 256, 0.9);

    text-align: center;
    line-height: 100px;
    font-size: 16px;
    font-family: hind;
    cursor: pointer;
    background-image: none;
  }
  .cat0{
    background-color: rgba(91, 169, 226, 0.9);
  }
  
  .catActive{
    background-color: rgba(193, 221, 193, 0.9)!important;
  }
  .fullwidth{
    width: 100%;
    margin-right: 10px;
  }
  .halfwidth{
    width: calc(50% - 55px);
  }
  #cback{
    background-color: rgba(256, 256, 256, 0.9);
    width: 38px;
    height: 38px;
    margin-left: 10px;
    position: fixed;
    margin-top: 10px;
    cursor: pointer;
    z-index: 100;
  }
  @media (max-width: 500px) {
    .cnav{
        min-width: 200px;
        width: calc(100% - 60px);
        min-height: 100px;
        max-height: 10vw;
    }
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, .mediaSelConfS, #newMedia, #allMedia > .mediaSel {
      width: calc(100% - 2px);
    }
  
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, #newMedia, #allMedia > .mediaSel {
      height: calc(100vw / 1.5 - 5.3px);
    }
  }
  @media (min-width: 500px) and (max-width: 600px){
    .cnav{
        min-width: 200px;
        width: calc(100% / 2 - 55px);
        min-height: 100px;
        max-height: 10vw;
    }
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, .mediaSelConfS, #newMedia, #allMedia > .mediaSel {
      width: calc(100% - 2px);
    }
  
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, #newMedia, #allMedia > .mediaSel {
      height: calc(100vw / 1.5 - 5.3px);
    }
  }

@media (min-width: 600px) and (max-width: 1000px){
    .cnav{
      min-width: 200px;
      width: calc(100% / 3 - 55px);
      min-height: 100px;
      max-height: 10vw;
  }
}
  @media (min-width: 600px) and (max-width: 1000px){
    
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, .mediaSelConfS, #newMedia, #allMedia > .mediaSel {
      width: calc(100% / 2 - 2px);
    }
  
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, #newMedia, #allMedia > .mediaSel {
      height: calc(100vw / 3.5 - 5.3px);
    }
  }
  @media (min-width: 1000px) and (max-width: 1600px) {
    .cnav{
        min-width: 200px;
        width: calc(100% / 4 - 55px);
        min-height: 100px;
        max-height: 10vw;
    }
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, .mediaSelConfS, #newMedia, #allMedia > .mediaSel {
      width: calc(100% / 3 - 4px);
    }
  
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, #newMedia, #allMedia > .mediaSel {
      height: calc(100vw / 4.5 - 5.3px);
    }
  }
  @media (min-width: 1600px) {
    .cnav{
      min-width: 200px;
      width: calc(100% / 5 - 55px);
      min-height: 100px;
      max-height: 10vw;
  }
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, .mediaSelConfS, #newMedia, #allMedia > .mediaSel {
      width: calc(100% / 4 - 4px);
    }
  
    #typeSelCon > .mediaSel, #sortableMedia > .mediaSel, .mediaSelConf, #newMedia, #allMedia > .mediaSel {
      height: calc(100vw / 6 - 5.3px);
    }
  }