/* Global variables */

/* lighter theme*/
:root {
  --main-bg-color: #1A355B;
  --code-font-family: monospace;
  --text-color:black;  
  --text-error-color:red;
  --text-code-color:blue;  
  --border-style: 1px solid #555;
  --border-radius: 5px;
  --panel-bg-color: #F0F3F4; 
  --panel-width: 98%;     
  --menu-bg-color: #224;  
  --menu-text-color: #e0e2E3;    
  --menu-border-style: 1px solid #555;        
  --menu-item-padding:4px 12px 4px 12px;
  --menu-bg-hover: green;
  --menu-bg-hover-border: none;
  --menu-color-active: #111;
  --menu-bg-active: #ccc;
  --menu-dropdown-content-bg-color: #ccc;
  --menu-dropdown-text-color: black;
}

/* darker theme */
:root {
  --main-bg-color: #1A355B;
  --code-font-family: monospace;
  --text-color:#D4E6F1;  
  --text-error-color:red;
  --text-code-color: yellow;  
  --border-style: 1px solid var(
  --text-color);
  --border-radius: 0px;
  --panel-bg-color: #000; 
  --panel-width: 80;     
  --menu-bg-color: #224;    
  --menu-text-color: #EEE;    
  --menu-item-padding:4px 12px 4px 12px;
  --menu-bg-hover: green;
  --menu-bg-hover-border: none;
  --menu-color-active: #111;
  --menu-bg-active: #ccc;
  --menu-dropdown-content-bg-color: #ccc;
  --menu-dropdown-text-color: black;
}

body{
    background-color: var(--main-bg-color);
    min-height: 95vh;    
    color:var(--text-color);      
    box-sizing: border-box;
    margin:auto;
    margin-top:0px;
    margin-bottom:0px;
    max-width:1080px;
}

.navbar{    
    margin: auto; 
    border: var(--border-style);       
    background-color:var(--menu-bg-color);
    margin-top:12px;
}

/* outermost content panel (for console screen, help screen, kb listing, etc.) */
.content_panel {
  display: none;
  border-top: none;
  height: 80vh;  
  font-family: var(--code-font-family);
}

/* Inner content panel--used to create multiple windows for file editing. */
.editor_container{
    height: 100%;    
    background-color: inherit;  
}

.main_screen, .querybar, .status_screen {
  background-color: var(--panel-bg-color);  
  margin:auto;  
  border: var(--border-style);
  border-radius: var(--border-radius);
  text-align: left;  
  margin-top:0px;
  padding-left:12px;
  padding-bottom:12px
}

.main_screen a, .querybar a, .status_screen a {
  color:var(--text-code-color);      
}

.main_screen table{  
   text-align:left;
   padding:6px;
   border:var(--border-style);
   border-collapse: collapse;
   margin:auto;
   margin-bottom:12px;
   width:94%;
  }
.main_screen table td, .main_screen table th {
   vertical-align:top;
   padding:3px;
}

.main_screen table th {
   border-bottom:var(--border-style);   
}

.main_screen p{  
   padding-top: 0px;
   padding-bottom: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.main_screen {  
  height: 85%;
  overflow: auto;  
  white-space: pre-wrap;
  color: inherit;
  padding-top:12px;
  resize: vertical;
}

.querybar{
    padding-top:6px;
    padding-bottom:6px;
    padding-left:12px;
}
.query_input {  
  margin:auto;
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  width: 90%;  
  padding-left:3px;
  border: none;
  outline: none;
}

.status_screen {  
  font-family: inherit;
  height: 16%;
  white-space: pre-wrap; 
  overflow: auto;
  padding-bottom:0px;
}

.pred_listbox, .kb_listbox{  
    background-color: inherit;
    border: none;
    border-right: var(--border-style);
    outline: none;
    cursor: pointer;
    padding: var(--menu-item-padding);
    transition: 0.3s;
    color:inherit;
}

.pred_listbox option, .kb_listbox option {
    color:var(--text-color);  
    background-color: var(--panel-bg-color);  
}

/* for formatting error text */
.prologerror{  
   padding-top: 0px;
   padding-bottom: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   color: var(--text-error-color);
}

.code{  
   color: var(--text-code-color);
}

.menu {
  overflow: visible;
  border: none;
  background-color: inherit;
  color:var(--menu-text-color);      
}

.menu-group {
  border-bottom: 1px solid var(--menu-text-color);
}


#menu_row_2 {
  border-top: var(--menu-border-style);   
}

.menu button, .dropbtn {
  background-color: inherit;
  color:inherit;  
  border: none;
  outline: none;
  cursor: pointer;
  padding: var(--menu-item-padding);  
  transition: 0.5s;
}

.menu button.active{
  background-color: var(--menu-bg-active);
  color:var(--menu-color-active);    
}

.menu button:hover{
  background-color: var(--menu-bg-hover);
}

.menu-dropdown {  
  position: relative; 
  display: inline-block;  
}

.menu-dropdown-content {
  display: none;
  background-color: var(--menu-dropdown-content-bg-color);
  border: var(--border-style);   
  margin-left:0px;
  border-radius: var(--border-radius);
}
.menu-dropdown-content p {
  color: var(--menu-dropdown-text-color);
  padding: 4px 12px;
  margin:0px;  
  display: block;
  cursor: pointer;
  font-size: 90%;
  min-width:150px; 
  z-index: 1;  
}

.menu-dropdown-content p:hover {background-color: var(--menu-bg-hover);border-radius: var(--border-radius);}
.menu-dropdown:hover .menu-dropdown-content {position:absolute; display:block;}
.menu-dropdown-content p:active {background-color: yellow;}
.menu-dropdown:hover .dropbtn {background-color: var(--menu-bg-hover);}


.library-header{text-decoration: underline;}

#kbbox, #helpexplorer {
  height: 100%;
}