/*  Pewter #EBEBE  Sage Green #D1E2C4 Olive #778A35 Olive Green #31352E*/
body {
    /*background-color: #EBEBE8;*/
    /*background-color: whitesmoke;*/
    background-image: url('../Images/tausta-9.png');
    background-repeat: repeat;
    min-height: 100%;
}

form {
    max-width: 1250px;
    background-color: white;
}

.hr {
    display: block;
    color: red;
    /*unicode-bidi: isolate;*/
    /*margin-block-start: 0.5em;
    margin-block-end: 0.5em;*/
    margin-inline-start: 3%;
    margin-inline-end: 3%;
    overflow: hidden;
    height: 3px;
    border-style: none;
    border-width: 1px;
}

#UpdMenu {
    max-width: 100%;
}

nav.menu {
    width: 100%;
    background-color: white;
    overflow: hidden;
}

.menuitem {
    min-height: 100%;
    float: left;
    /*margin-left: 4px;*/
    display: inline-block;
    background-color: #D1E2C4;
}

.menus {
    background-color: #c8c6c6;
    overflow: hidden;
    color: black;
}
/*heke.fi*/
.body {
    background-image: url('./Images/tausta.png');
    background-repeat: repeat;
    min-height: 100%;
}

[data-tglbtn] {
    background-color: rgb(64, 224, 0,0.1);
    padding: 3px;
}

    [data-tglbtn] div {
        padding: 3px;
        display: inline-block;
        background-color: White;
        border: 2px solid lightblue;
        border-radius: 6px;
    }

[data-tgltrg] {
    margin: 10px;
}

.mnuline {
    width: 100%;
    background-color: #32481c;
    color: white;
}

.menudiv {
    float: left;
    min-width: 120px;
    height: 30px;
    padding-top: 3px;
    border-style: solid;
    border-width: 3px;
    border-color: #32481c;
    text-align: center;
}


input[type="button"] {
    padding: 5px;
    height: 30px;
}

.active {
    background-color: #fafabb;
    /*#EBEBE8;*/
    color: black;
    border-style: none;
}

.nonactive {
    background-color: #32481c;
    /*#31352E;*/
    color: white;
    border-style: solid;
}
/* Style the links inside the navigation bar */
.menus input {
    float: left;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

    /* Change the color of links on hover */
    .menus input:hover {
        background-color: #ddd;
        color: black;
    }

    /* Add input color to the active/current link */
    .menus input.active {
        /* background-color: #3c3939;*/
        background-color: #D1E2C4;
        color: black;
    }

.kappale {
    margin-left: 6px;
}

.lvl0_Kappale {
    display: flex;
    align-items: flex-start;
}

[data-tglmnusid] {
    width: 100%;
    overflow: hidden;
}

[data-tglmnuid] {
    display: inline-block;
    margin: 2px;
    padding: 2px 4px 2px 1px;
    border: 2px solid darkgreen;
    border-radius: 4px;
}

.tglmnudiv {
    display: inline-block;
    float: left;
}

.tglmnuchk {
    display: inline-block;
    float: right;
}



article.pickBlock {
    border-bottom-style: outset;
    border-bottom-width: 4px;
    border-radius: 6px;
    padding-bottom: 8px;
}



#UpdShow h1 {
    font-size: x-large;
    font-weight: 600;
    margin: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0px;
}

#UpdShow h2 {
    font-size: large;
    font-weight: 600;
    margin: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0px;
}

[data-bid] img {
    max-width: 90%;
    height: auto;
}

.introimgs {
    width: 100%;
}

    .introimgs img {
        max-width: 30%;
    }

[data-fname='UpotusHtml'] td {
    outline: 1px solid blue;
}

table {
    table-layout: fixed;
    max-width: 95%;
    border: 1px solid blue;
    border-spacing: 1px;
    margin: 10px;
}

td {
    border: 0.1px solid blue;
}

.preMarker {
    margin-left: 6px;
    display: flex;
    align-items: stretch;
}



div#PnlShow {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


article.pickBlock {
    border-bottom-style: outset;
    border-bottom-width: 4px;
    border-radius: 6px;
    padding-bottom: 8px;
    display: inline-block;
    /* min-width: 590px; */
    /* max-width: 500px; */
    vertical-align: top;
    align-items: start;
}

input.active {
    background-color: yellow;
    color: black;
    font-size: large;
}

input.nonactive {
    background-color: white;
    color: black;
    border-style: none;
    font-size: large;
}

.introheader div {
    display: inline-block;
    padding-left: 12px;
}

.introbtn {
    font-size: large;
}

.slogan {
    font-size: x-large;
    font-family: system-ui;
    font-weight: 600;
    color: green;
}
@media only screen and (max-width: 800px) {

    .kappale {
       /* margin: 6px;*/
        min-width: 100%;
        display: block;
    }

       /* .kappale div {
            display: inline-block;
            float: left;
            clear: left;
            margin-top: 6px;
        }*/
    div#PnlShow {
        display: grid;
        grid-template-columns: 1fr;
    }
}
.pickitem {
    display: inline-block;
    max-width: 100%;
    margin-left: 6px;
    margin-top: 4px;
}
.article-font {
    font-family: Segoe UI, Segoe UI Midlevel, sans-serif;
    font-size:14px;
}
:root {
    --direction: ltr;
    --base-layer-luminance: 1;
    --neutral-layer-1: #ffffff;
    --fill-color: #ffffff;
    --neutral-fill-layer-rest-delta: 3;
    --neutral-fill-layer-rest: #ffffff;
    --neutral-foreground-rest: #2b2b2b;
    --control-corner-radius: 4;
    --layer-corner-radius: 4;
    --body-font: Segoe UI, Segoe UI Midlevel, sans-serif;
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
    --focus-stroke-outer: #878787;
    --type-ramp-minus-1-font-size: 12px;
    --type-ramp-minus-1-line-height: 16px;
    --neutral-foreground-hint: #757575;
    --base-height-multiplier: 8;
    --base-horizontal-spacing-multiplier: 3;
    --density: 0;
    --design-unit: 4;
    --type-ramp-plus-1-font-size: 16px;
    --type-ramp-plus-1-line-height: 22px;
    --stroke-width: 1;
    --focus-stroke-width: 2;
    --disabled-opacity: 0.3;
    --type-ramp-minus-2-font-size: 10px;
    --type-ramp-minus-2-line-height: 14px;
    --type-ramp-plus-2-font-size: 20px;
    --type-ramp-plus-2-line-height: 28px;
    --type-ramp-plus-3-font-size: 24px;
    --type-ramp-plus-3-line-height: 32px;
    --type-ramp-plus-4-font-size: 28px;
    --type-ramp-plus-4-line-height: 36px;
    --type-ramp-plus-5-font-size: 32px;
    --type-ramp-plus-5-line-height: 40px;
    --type-ramp-plus-6-font-size: 40px;
    --type-ramp-plus-6-line-height: 52px;
    --accent-fill-rest-delta: 0;
    --accent-fill-hover-delta: 4;
    --accent-fill-active-delta: -5;
    --accent-fill-focus-delta: 0;
    --accent-foreground-rest-delta: 0;
    --accent-foreground-hover-delta: 6;
    --accent-foreground-active-delta: -4;
    --accent-foreground-focus-delta: 0;
    --neutral-fill-rest-delta: 7;
    --neutral-fill-hover-delta: 10;
    --neutral-fill-active-delta: 5;
    --neutral-fill-focus-delta: 0;
    --neutral-fill-input-rest-delta: 0;
    --neutral-fill-input-hover-delta: 0;
    --neutral-fill-input-active-delta: 0;
    --neutral-fill-input-focus-delta: 0;
    --neutral-fill-stealth-rest-delta: 0;
    --neutral-fill-stealth-hover-delta: 5;
    --neutral-fill-stealth-active-delta: 3;
    --neutral-fill-stealth-focus-delta: 0;
    --neutral-fill-strong-rest-delta: 0;
    --neutral-fill-strong-hover-delta: 8;
    --neutral-fill-strong-active-delta: -5;
    --neutral-fill-strong-focus-delta: 0;
    --neutral-stroke-divider-rest-delta: 8;
    --neutral-stroke-rest-delta: 25;
    --neutral-stroke-hover-delta: 40;
    --neutral-stroke-active-delta: 16;
    --neutral-stroke-focus-delta: 25;
    --accent-foreground-rest: #0078d4;
    --accent-foreground-hover: #0066b4;
    --accent-foreground-active: #1181d7;
    --accent-foreground-focus: #0078d4;
    --accent-fill-rest: #0078d4;
    --accent-fill-hover: #006cbe;
    --accent-fill-active: #1683d8;
    --accent-fill-focus: #0078d4;
    --neutral-fill-rest: #ededed;
    --neutral-fill-hover: #e5e5e5;
    --neutral-fill-active: #f2f2f2;
    --neutral-fill-focus: #ffffff;
    --neutral-stroke-rest: #bebebe;
    --neutral-stroke-hover: #979797;
    --neutral-stroke-active: #d5d5d5;
    --neutral-stroke-focus: #bebebe;
    --neutral-stroke-divider-rest: #eaeaea;
    --neutral-fill-stealth-rest: #ffffff;
    --neutral-fill-stealth-hover: #f2f2f2;
    --neutral-fill-stealth-active: #f7f7f7;
    --neutral-fill-stealth-focus: #ffffff;
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #000000;
    --foreground-on-accent-focus: #ffffff;
    --focus-stroke-inner: #fbfdfe;
    --neutral-layer-floating: #ffffff;
    --neutral-stroke-strong-hover-delta: 40;
    --neutral-stroke-strong-active-delta: 16;
    --neutral-stroke-strong-focus-delta: 25;
    --neutral-stroke-strong-rest: #949494;
    --neutral-stroke-strong-hover: #2e2e2e;
    --neutral-stroke-strong-active: #6b6b6b;
    --neutral-stroke-strong-focus: #545454;
    --neutral-fill-input-rest: #ffffff;
    --neutral-fill-input-hover: #ffffff;
    --neutral-fill-input-active: #ffffff;
    --neutral-fill-input-focus: #ffffff;
    --neutral-fill-strong-rest: #757575;
    --neutral-fill-strong-hover: #616161;
    --neutral-fill-strong-active: #828282;
    --neutral-fill-strong-focus: #757575;
    --neutral-layer-card-container: #f7f7f7;
    --tree-item-expand-collapse-hover: #e5e5e5;
    --tree-item-expand-collapse-selected-hover: #e0e0e0;
    --card-base-height: 146;
    --card-base-width: 300;
    --card-base-gap: 14;
    --card-stroke-color: rgba(0,0,0,0.0578);
    --neutral-fill-inverse-rest-delta: 0;
    --neutral-fill-inverse-hover-delta: -3;
    --neutral-fill-inverse-active-delta: 7;
    --neutral-fill-inverse-focus-delta: 0;
    --neutral-fill-inverse-rest: #242424;
    --neutral-fill-inverse-hover: #2b2b2b;
    --neutral-fill-inverse-active: #101010;
    --neutral-fill-inverse-focus: #242424;
    --sloppy-click-z-index: 1;
    --click-z-index: 1;
    --neutral-fill-secondary-rest: #f7f7f7;
    --neutral-fill-secondary-hover: #fafafa;
    --neutral-fill-secondary-active: #fcfcfc;
    --neutral-fill-secondary-focus: #f7f7f7;
    --gradient-white-fill: linear-gradient(160deg, rgba(237,237,237,0.8), rgba(237,237,237,1)),#ffffff;
    --gradient-background-fill: linear-gradient(160deg, rgba(237,237,237,0), rgba(237,237,237,1));
    --neutral-fill-bubble-on-rest: #fafafa;
    --neutral-foreground-hint-on-bubble-on-rest: #757575;
    --neutral-layer-card: #ffffff;
    --neutral-fill-bubble-rest-delta: 6;
    --neutral-fill-bubble-hover-delta: 9;
    --neutral-fill-bubble-rest: #efefef;
    --neutral-fill-bubble-hover: #e8e8e8;
}