/*  */
body
{
  padding: 0px;
  margin : 0px;

  height: 100%;
  width: 100%;
}

/* Loading zone */
#loadingBar
{
  display: inline-block;

  padding : 5px;
}

/* Loading zone button */
#loadingBar button
{
  display: inline-block;

  margin-left : 5px;
}

/* Icon bar (home, ...) */
#iconBar
{
  display: inline-block;

  float: right;

  margin-right: 5px;
}

/* Top icon (home, ...) */
.topIcon
{
  display: inline-block;

  width: 25px;
  height: 25px;

  padding-right: 4px; 
  padding-left: 4px;
  padding-top: 2px; 
  padding-bottom: 2px; 

  border-radius: 5px;
}

.topIcon:hover
{
  background-color: #bbbbbb;
}

/* Top icon for flag lang */
.topLangIcon
{
  width: 25px;
  height: 17px;

  padding-right: 4px; 
  padding-left: 4px;
  padding-top: 6px; 
  padding-bottom: 6px; 

  border-radius: 5px;
}

.topLangIcon:hover
{
  background-color: #bbbbbb;
}

/* Top section with buttons */
#top
{
  background-color: #92b8cd;

  height: 30px;
  width: 100%;

  padding-top: 8px;
}

.top_button_left
{
  margin-left : 5px;

  background-color: #f2f2f2;
  border : 1px solid;
  border-radius: 3px;

  padding-top: 2px;
  padding-bottom: 2px;
}

.top_button_left:hover
{
  background-color: #e7e7e7;
}

/* Top button align in right */
.top_button_right
{
  float: right;

  margin-right: 5px; 

  background-color: #f2f2f2;
  border : 1px solid;
  border-radius: 3px;

  padding-top: 2px;
  padding-bottom: 2px;
}

.top_button_right:hover
{
  background-color: #e7e7e7;
}


/* Center contening graph and ui */
#center
{
  padding: 0px;
  margin : 0px;

  background-color: #395f74;

  height: 500px; 
  width: 100%;
}

/* Div of graph display */
#graph
{
  display: inline-block;

  padding: 0px;
  margin : 0px;

  background-color: #ffffff;

  height: 100%;
  width: 60%;
}

/* Div of UI */
#ui
{
  display: inline-block;

  padding: 0px;
  
  margin : 0px;

  float:right;
  right: 0px;

  background-color: #eeeeee;

  height: 100%;
  width: 40%;

  overflow-y: scroll;
}

/*  */
#uiDisplayZone
{
  padding-top: 10px;
  padding-left: 6px;
}


/* Search div of result */
#searchDiv
{
  margin-left : 5px;
}

/* Search result line */
.searchDivLine
{
  
}

/* Search result line in mouse hover*/
.searchDivLine:hover
{
  background-color: #ffffff;
  cursor: pointer;
}

.uiTextFieldLabel
{
  display: block; 
}

.uiTextField
{
  width: 300px;
}

.uiSelect
{

}

.uiCheckbox
{

}

.uiCheckboxLabel
{
  display: inline-block; 
}

/* Icon of visility element */
.uiIconVisibility
{
  display: inline-block;

  width: 15px;
  height: 15px;

  padding-right: 4px; 
  padding-left: 4px;
  padding-top: 2px; 
  padding-bottom: 2px; 

  vertical-align: middle;

  border-radius: 5px;
}

.uiIconVisibility:hover
{
  background-color: #bbbbbb;
}

/* Icon of arraw element */
.uiIconArrow
{
  display: inline-block;

  width: 15px;
  height: 15px;

  padding-right: 4px; 
  padding-left: 4px;
  padding-top: 2px; 
  padding-bottom: 2px; 

  vertical-align: middle;

  border-radius: 5px;
}

.uiIconArrow:hover
{
  background-color: #bbbbbb;
}

/* Div of result view */
#result
{
  background-color: #f0f0f0;

  border : 1px solid black;

  overflow-x: scroll;
  overflow-y: scroll;

  height: 350px;
  width: 100%;
}

/* Table result */
#result table
{
  border-collapse: collapse;
  border: 1px solid black;
}

/* Table title result */
#result th
{
  background-color: #d0e6f2;

  border: 1px solid black;
  padding: 3px;
}

/* Table content result */
#result td
{
  background-color: #ffffff;

  border: 1px solid black;
  padding: 3px;
}

/* Result message design */
#result h3
{
  margin-left: 10px;
}

/* Invisible field */
.invisibleField
{
  visibility: hidden;
}

/* Small Screen Design */
@media(max-height:800px) 
{
    body 
    {
      font-size: 15px;
    }

    #center
    {
      height: 400px;
    }

    #result
    {
      height: 300px;
    }
}

/* Big Screen Design */
@media(min-height:1050px) 
{
    #center
    {
      height: 550px;
    }

    #result
    {
      height: 400px;
    }
}

#queryArea
{
  width: 98%;
}

/* Import area */
.importArea
{
  margin-left : 5px;
  margin-bottom : 5px;
  display: none;
}

.importTextArea
{
  width: 700px;
  height: 250px;
}

#resultMapButton
{
  margin-left: 3px;
}

.resultButtonClass
{
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
}