:root {
    --menu-z-index: 9;
    --root-height: 600;
    --part-height: 600;
}
body {
    width:980px;
    margin:0 auto;
}

.disabled {
    background-color: white;
}
#all {
}

#data-menubar , #setting-menubar , #output-menubar{ 
display: float
}

#data-bar , #setting-bar , #output-bar{
    display: grid;
/*    grid-template-rows:    30px 30px 30px 30px 30px;*/
    grid-template-rows:    30px 30px;
/*    grid-template-columns: 80px 80px 80px 80px 80px 80px 80px 80px 80px 80px 80px 80px;*/
    grid-template-columns: 80px 80px 80px 80px 80px 80px 80px 80px 80px 80px 80px;

/* height:128px; */
 height:60px;
/* background-color:#000000;*/
/* background-color:#009f9f;*/
}

#data-select-host , #output-select-host, #setting-select-host  {
    grid-row: 1 / 2;
    grid-column: 1/6;
    backgroud-color: #fff;
}

#data-filelist_key, #setting-filelist_key, #output-filelist_key {
/*    display: none;*/
    grid-row: 2 / 3;
    grid-column:  1/6;
}

#data-bookmark_label, #output-bookmark_label, #setting-bookmark_label{
    grid-row: 2/3;
    grid-column:  6/7;
}

#data-bookmark_op, #output-bookmark_op , #setting-bookmark_op{
    grid-row: 2/3;
    grid-column:  6/7;
}

#data-down-download, #output-down-download, #setting-down-download{
    grid-row:  2/3;
    grid-column:  7/8;
}

#data-editor-t, #setting-editor-t, #output-editor-t {
    display: none;
    grid-row: 2 / 3;
    grid-column: 7/8;
    backgroud-color: #f00;
}

/*
#icon_star_container {
    grid-row: 1 / 2;
    grid-column:  6/7;
}
#icon_star {
    grid-row: 1 / 2;
    grid-column:  6/7;
}
*/
/*
#x {
    grid-row: 1 / 2;
    grid-column:  7/8;
}*/

.xxbutton {
  background-color: ButtonFace;
  border-radius: 5px;
  color: ButtonText;
  margin: 5px;
/*  padding: 5px;*/
  padding-left: .5em;
  padding-right: .5em;
  text-decoration: none;
  text-align: center;
}

.xxbutton:focus,
.xxbutton:hover {
  background-color: Highlight;
  color: HighlightText;
}

#data-menu2, #setting-menu2, #output-menu2 {
    position: relative;
    overflow: scroll;
    width: 250px;
    height: var(--part-height);
    height: 600px;
}

#data-side , #setting-side , #output-side{
 width:250px;
 min-height: var(--root-height);;
 height:auto;
/*  background-color:#009b9f; */
 float:left;
/* margin-top:10px;*/
/* margin-top:0px;*/
}
#data-work , #setting-work , #output-work{ 
 margin-left:260px;
 width:720px;
 min-height: var(--root-height);;
 height:auto;
/* background-color:#009b9f; */
/* margin-top:10px;*/
}

#data-editor, #output-editor,#setting-editor {
/*    height: var(--part-height);*/
        margin: 0;
/*        position: absolute;*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
}