:root {
    --LOGGER_ERROR_COLOR: #992211;
    --LOGGER_ALERT_COLOR: #119922;
    --LOGGER_WARNING_COLOR: #112299;
    --LOGGER_FONT_SIZE: 12px;

    --MENU_BG_COLOR: white;
    --MENU_SHADOW_COLOR: #606060;
    --MENU_BAR_HOVER_COLOR: #FFAACC;
    --MENU_ITEM_HOVER_COLOR: #99FF99;
    --MENU_KEYBIND_COLOR: #777777;

    --INTERFACE_BORDER_COLOR: black;
    --INTERFACE_LINK_COLOR: #336699;
    --INTERFACE_LINK_COLOR_HIGHLIGHT: #993333;

    --TAB_INACTIVE_TEXT_COLOR: teal;
    --TAB_INACTIVE_BORDER_COLOR: lightblue;
}

@media (prefers-color-scheme: dark) {
    :root {
	--LOGGER_ERROR_COLOR: pink;
	--LOGGER_ALERT_COLOR: lightgreen;
	--LOGGER_WARNING_COLOR: lightblue;
	
	--MENU_BG_COLOR: black;
	--MENU_SHADOW_COLOR: orange;
	--MENU_BAR_HOVER_COLOR: #225599;
	--MENU_ITEM_HOVER_COLOR: #229955;
	--MENU_KEYBIND_COLOR: #AAAAAA;
	
	--INTERFACE_BORDER_COLOR: orange;
	--INTERFACE_LINK_COLOR: #336699;
	--INTERFACE_LINK_COLOR_HIGHLIGHT: #993333;
	
	--TAB_INACTIVE_TEXT_COLOR: lightblue;
	--TAB_INACTIVE_BORDER_COLOR: lightblue;
    }
}

body {
    padding: 0px;
    margin: 0px;
}

* {
    box-sizing: border-box;
}

a.basic {
    color: var(--INTERFACE_LINK_COLOR);
    text-decoration: none;
}

a.basic:hover {
    color: var(--INTERFACE_LINK_COLOR_HIGHLIGHT);
    text-decoration: underline;
}

.hidden {
    display: none;
}

.menu_bar_style {
    font-family: sans-serif;
}

.menu_bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-shadow: 0 5px 10px var(--MENU_SHADOW_COLOR);
    background: var(--MENU_BG_COLOR);
    user-select: none;
}

.menu_bar_title {
    cursor: pointer;
    padding: 5px 15px;
}

.menu_bar_title:hover {
    background: var(--MENU_BAR_HOVER_COLOR);
}

.menu_wrapper {
    position: absolute;
    z-index: 100;
    user-select: none;
    background: var(--MENU_BG_COLOR);
    box-shadow: 0 5px 10px var(--MENU_SHADOW_COLOR);
}

.menu_item {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    padding: 5px 0px;
    user-select: none;
}

.menu_item > span {
    padding: 0px 5px;
}

.menu_item > a {
    padding: 0px 5px;
    text-decoration: none;
    color: inherit;
}

.menu_divider {
    height: 1px;
    background: var(--MENU_KEYBIND_COLOR);
    margin: 5px 5px;
}

.menu_item:hover {
    background: var(--MENU_ITEM_HOVER_COLOR);
}

.menu_item_keybind {
    padding-left: 25px;
    color: var(--MENU_KEYBIND_COLOR);
    margin-left: auto;
}

.edit_element {

}

.output_logger {
    overflow: scroll;
    padding: 3px 3px;
}

.logger_title {
    font-size: calc(var(--LOGGER_FONT_SIZE) + 3px);
    text-align: center;
    padding: 3px 0px;
}

.log_item {
    padding: 3px;
    font-size: var(--LOGGER_FONT_SIZE);
}

.log_error {
    color: var(--LOGGER_ERROR_COLOR);
}

.log_alert {
    color: var(--LOGGER_ALERT_COLOR);
}

.log_warning {
    color: var(--LOGGER_WARNING_COLOR);
}

.tab_view_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tab_view_bar {
    flex-basis: min-content;
    display: flex;
    flex-direction: row;
    width: 100%;
    background: var(--MENU_BG_COLOR);
    user-select: none;
    border-bottom: 1px solid var(--INTERFACE_BORDER_COLOR);
    z-index: 50;
}

.tab_view_body {
    /*height: 100%;*/
    flex-grow: 1;
}

.tab_view_title {
    padding: 3px 20px;
    border: 1px solid var(--INTERFACE_BORDER_COLOR);
    border-radius: 5px 40px 0px 0px;
    border-bottom: 0px;
    background: var(--MENU_BG_COLOR);
    cursor: pointer;
    position: relative;
    top: 1px;
    z-index: 51;
}

.tab_view_title_inactive {
    color: var(--TAB_INACTIVE_TEXT_COLOR);
    border-color: var(--TAB_INACTIVE_BORDER_COLOR);
    border-bottom: 1px solid var(--INTERFACE_BORDER_COLOR);
}

.tab_view_content {
    height: 100%;
}