@import url("style/dialog.css");
@import url("style/fewest_moves_data.css");
@import url("style/fieldset.css");
@import url("style/form_row.css");
@import url("style/header.css");
@import url("style/home.css");
@import url("style/modal.css");
@import url("style/multi_select.css");
@import url("style/puzzle.css");
@import url("style/ranking.css");
@import url("style/rare_egg.css");
@import url("style/session_statistics.css");
@import url("style/sessions.css");
@import url("style/stats_grid.css");
@import url("style/status_indicator.css");
@import url("style/style_editor.css");
@import url("style/style_overrides.css");
@import url("style/tab_widget.css");
@import url("style/user_menu.css");

@import url("style/module/standard.css");
@import url("style/module/focus.css");
@import url("style/module/fewest_moves.css");

:root {
    --header_height: 30px;
    --content_height: calc(100vh - var(--header_height))
}

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #fff;
}

body {
    background-color: #262626;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.padded {
    padding: 5px;
}

.margin {
    margin: 5px;
}

.rounded {
    border-radius: 10px;
}

.outlined {
    border: 1px solid #111;
}

.underlined {
    text-decoration: underline;
}

input,
select {
    background-color: #555;
    color: #fff;
}

.module-container {
    background-color: #333;
}

.module-container2 {
    width: calc(100vw - 10px);
    height: calc(var(--content_height) - 10px);
    top: var(--header_height);
    left: 0;
    display: grid;
    gap: 5px;
    margin: 5px;
}

.filler {
    flex-grow: 1;
}

button {
    background: #1a1a1a;
    cursor: pointer;
    border: 1px solid #111;
    padding: 5px;
    border-radius: 10px;
}

button:disabled {
    background: #777;
    color: #bbb;
    cursor: not-allowed;
}

button:not(:disabled):hover {
    background: #3a3a3a;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}