/* Application gui stylesheet */

/* ========================================================== base styles === */

@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root
{
    --baseUiHue: 0;
    --baseFontFamily: 'Gentium Book Plus', sans-serif;
    --baseFontSize: 18px;
}

html
{
    font-size: var(--baseFontSize);
}

body
{
    color: #6c9;
    font-family: var(--baseFontFamily) !important;
    height: 100% !important;
    margin: 0;
    overflow-y: hidden;
    padding: 0;
}

body
{
    background-color: hsl(var(--baseUiHue), 0%, 0%);
    direction: ltr;
}

h1, h2, h3, h4, h5 { font-family: var(--baseFontFamily) !important; }

.invisible { display: none !important; }

.positive_t { color: hsl(120, 40%, 30%); }
.warning_t  { color: hsl(40, 40%, 30%) }
.negative_t { color: hsl(0, 40%, 30%); }

.center { text-align: center !important; }
.right  { text-align: right  !important; }
.bold   { font-weight: bold  !important; }
.italic { font-style: italic !important; }

.fs10-00rem { font-size: 10.00rem  !important; }
.fs2-00rem { font-size: 2.00rem  !important; }
.fs1-20rem { font-size: 1.20rem  !important; }
.fs1-15rem { font-size: 1.15rem  !important; }
.fs0-85rem { font-size: 0.85rem  !important; }
.fs1-15em  { font-size: 1.15em  !important; }
.fs0-85em  { font-size: 0.85em  !important; }

.black_text { color: #000 !important; }
.white_text { color: #fff !important; }
.red_text   { color: hsl(350, 58%, 50%) !important; }
.theme_text { color: hsl(var(--baseUiHue), 58%, 50%) !important; }

.br0 { border-radius: 0px !important; }

/* ================================================================= flex === */

.flex_column
{
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.flex_row
{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}

.flex_center
{
    align-content: center;
    align-items: center;
    justify-content: center;
}

.flex_align-content_center { justify-content: center; }

.flex_align-items_center { align-items: center; }

.flex_justify-content_center { justify-content: center; }

.flex_justify-content_space-between { justify-content: space-between; }

.flex_1_1_auto { flex: 1 1 auto; }

.flex_1_1_0 { flex: 1 1 0; }

/* =============================================================== layout === */
#content_box_max
{
    height: 100%;
    width: 100%;
}

#content_box_main
{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

/* =========================================================== error page === */

#error_panel
{
    height: auto;
    margin: -100px auto 0px auto;
    padding: 0px;
    text-align: center;
    width: auto;
}