/*
hsla
Hue -
     0 = red
   120 = green
   240 = blue

Saturation
     0% gray
   100% full color

Lightness
       0% Black
      50% Normal
     100% White
Alpha
     0 Fully Transparent
     1 Fully Opaque

 HSL Picker

 http://hslpicker.com/#4d897c

*/
* {
    margin: 0;
    padding: 0;
    font-family: arial, sans-serif;
    box-sizing: border-box;
    border-collapse: collapse;
}

body,
html {

    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    min-width: 1024px;
}


:root {
    --root: 160;
    --content_bg: hsla(var(--root), 28%, 70%, 1);

    --html_bg: hsla(var(--root), 28%, 35%, 1);
    --body_bg: hsla(var(--root), 28%, 35%, 1);


    --tr_emphasize: hsla(var(--root), 25%, 50%, 1);
    --workarea_bg: var(--body_bg);
    --page_bg: hsla(var(--root), 28%, 65%, 1);
    --mainpage_bg: var(--body_bg);

    --input_bg: hsla(var(--root), 25%, 80%, 1);
    --input_text: hsla(var(--root), 85%, 20%, 1);


    /*menu*/
    --menu_bg: hsla(var(--root), 52%, 70%, 1);

    --menuitem_bg: hsla(var(--root), 90%, 30%, 1);

    --menuitem_hover: hsla(var(--root), 82%, 35%, 1);

    /*dialog*/
    --dialog_bg: hsla(var(--root), 16%, 55%, 1);
    --dialog_header: var(--header_bg);

    --dialog_bg: hsla(var(--root), 16%, 55%, 1);
    --dialog_header: var(--header_bg);


    --header_bg: hsla(var(--root), 40%, 30%, 1);
    --footer_bg: var(--header_bg);
    /*--header_hover(hsla(var(--root), 60%, 20%, 1);)*/
    /*--footer_bg: var(--header_bg);*/

    --border: hsla(var(--root), 60%, 55%, 1);
    --div1_bg: hsla(var(--root), 28%, 70%, 1);
    --div2_bg: hsla(var(--root), 28%, 50%, 1);

    --sub_bg: hsla(var(--root), 40%, 50%, 1);
    --select_bg: hsla(var(--root), 40%, 30%, 1);
    --pmain_bg: hsla(var(--root), 52%, 47%, 1);
    --tr_even: hsla(var(--root), 40%, 40%, 1);
    --tr_odd: hsla(var(--root), 40%, 45%, 1);
    --tr_selected: hsla(220, 70%, 20%, 1);
    --btn_bg: silver;
    --alphabet: hsla(var(--root), 40%, 30%, 1);
    --alphabet_hover: hsla(var(--root), 70%, 30%, 1);

    --selected_row: hsla(var(--root), 67%, 40%, 1);
    --td_text: whitesmoke;

    --delete_button: crimson;

    --p_color: whitesmoke;

    --pprompt: hsla(var(--root), 76%, 24%, 1);


}

input[type='text'] {
    font-size: 1.2rem;
    padding: .2rem;
    background-color: var(--input_bg);
    color: var(--input_text);
    height: 2.0rem;
    border: none;
    width: 100%;
    font-weight: 600;

}

.row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

tr:nth-child(even) {
    background: var(--tr_even);
    line-height: 4vh;
}

tr:nth-child(odd) {
    background: var(--tr_odd);
    line-height: 4vh;
}

p.announce {
    font-style: italic;
    font-family: "Times New Roman";
    font-size: 3rem;
    color: whitesmoke;
}