html, body {
  height: 100%;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.sidenav {
  flex: 1 0 300px;
  background: #333;
  height: 105%;
  transition: all .3s ease-out;
}
.sidenav.is-collapsed {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.main {
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: #999;
  transition: all .3s ease-out;
}
.main.is-full-width {
  margin-left: -300px;
}

/* Tob Bar */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  background-color: #373838;
  color:#fff;
}
.header__menu {
  position: fixed;
  padding: 13px;
  top:80px;
  left: 12px;
  background-color: #DADAE3;
  border-radius: 50%;
  z-index: 1;
}
.header__menu:hover {
  cursor: pointer;
}
#top_title{
  background:url(../img/topbar/top_intranet.png) left top no-repeat;
  padding: 5px 0px 0px 200px;
  font-size:12px;
}
.top_title_text{
    width: 150px;
    height: 30px;
    padding:10px 10px 0px 85px;
    font-size:15pt;
    color:#373838;
    background: #FFDE17;
    border-radius: 0 0 70px 0;
    -moz-border-radius: 0 0 70px 0;
    -webkit-border-radius: 0 0 70px 0;
}
#datetimebox{
  margin-left:auto;
}
.box_news_postby{
  display:none;
}
.form_box_sort, .form_box_search{
  display:inline-block;
  width:50%;
}
.box_form_list h2{
  white-space:normal;
}
.box_newslist{
    height:auto;
}
#menu8{
  width:25%;
  display:inline-block;
}
#content_form{
  width:70%;
  display:inline-block;
}
.remark_thumbnail{
  padding-left:200px;
}
/* staff directory */


/* Document */
.box_iframe{
	width:100%;
	height:600px;
}
.box_tab_doc{
	width:25%;
	display:inline-block;
	vertical-align:top;
}
@media screen and (max-width: 479px) {
  label{
    width:100%;
    display:block;
    float:none;
    text-align:left;
  }
  #txt-welcome, #datetimebox, #txt-greeting-name{
    display:none;
  }
  .s-layout__content{
    padding-top:80px;
  }

  /* List */
  .table{
	  margin-left:-40px;
	}
  .delete{
	 margin-left:-10px;
  }

  /* staff directory */
  fieldset.frmuser_personal, fieldset.frmuser_contact, fieldset.frmuser_emergency, fieldset.frmuser_job, fieldset.frmuser_access{
	  background:none;
  }
  .inp{
	  width:100%;
  }

  /* news */
  .box_newslist_photo{
    display:inline-block;
    float:none;
  }
  .box_newslist_title{
    white-space:normal;
  }
  .box_newslist{
    height:auto;
  }

  /* document */
  .form_box_sort,.form_box_search{
    display:block;
    width:100%;
  }
  #docsearch{
    width:50%;
  }
  .box_form_filetype{
    display:none;
  }
  .box_form_list h2{
    font-size:1.2em;
    white-space:normal;
  }
  .box_form_list h3{
    white-space:normal;
  }
  .box_form_list label{
    width:auto;
  }

  .box_tab_doc{
	  width:30%;
  }

  .box_iframe{
	width:90%;
	height:600px;
  }

  /* orgranization */
  #menu8, #content_form{
	 width:95%;
	 display:block;
  }
  /*
  #menu8{
	 width:30%;
  }
  #content_form{
	margin-left:20px;
    width:60%;
  }

  #menu8 ul{
	  width:120px
  }
  */
  .remark_thumbnail{
    padding-left:0;
  }
}