body{
  background-image: url("../images/png-transparent-decorative-ornamental-abstract-geometric-art-seamless-repeating-pattern-design-16-10-ratio-thumbnail.png");
  margin: 0;
}

.general{
background-color: blue;
}

#overlay {
  transition: 1s;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

#cs_die_a_log {
  transition: 1s;
  top: -150px;
  right: calc(50vw - 150px);
  position: absolute;
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;

}

  #hd_die_a_log{
    padding: 0 0,5;
    flex: 1;
    justify-content: space-between;
    display: flex;
  }

    #cs_hd_title{

    }

    #cs_hd_btn_close_div{

    }

      #cs_hd_btn_close{

      }

  #cn_die_a_log{
    flex: 3;
    background-color: white;
  }

  #ft_die_a_log{
    flex: 1;
  }

  #hd_die_a_log, #ft_die_a_log{
    background-color: darkgray;
  }

#container{
  width: 80%;
  height: 100VH;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

  #header{
    height: 40px;

  }

  #menu{
    height: 25px;
    width: 100%;
    background-color: cyan;
  }

  #main{
    flex: 1;
    display: flex;
  }

    #left, #right{
      background-color: lime;
      transition: 1s;
      overflow: hidden;
    }

    .show_side{
      flex: 1;
    }

    .hide_side{
      flex: 0;
    }

    #nav{
      background-color: blue;
      padding: 5px;
      color: white;
    }

    #content{
      flex: 3;
      opacity: 0.9;
      background-color: white;


    }

  #footer{
    height: 20px;
    width: 100%;
    text-align: right;

  }