/* SPDX-FileCopyrightText: © 2024 CANEPINE <info@canepine.com> */
:root {
    --color-wintergreen: rgba(0, 209, 104, 0.595);
    --color-bg: white;
    --color-bg-contrast: rgb(234, 243, 209);
    --color-menuitem-active-bg: rgb(190, 216, 129);
    --color-menuitem-active-fg: rgb(100, 115, 65);
    --color-menuitem-active-hover-fg: rgb(64, 72, 46);
    --color-menuitem-hover-fg: rgb(100, 115, 65);
    --widget-bg: silver;
    --widget-contrast-bg: white;
    --widget-inactive-bg: gray;
    --widget-border: white;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    /* background-color: var(--color-bg); */
    /* background: linear-gradient(var(--color-bg) 20%, var(--color-bg-contrast) 40%, var(--color-bg) 90%); */
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
}

iframe {
    display: flex;
    flex: 1;
    border: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: black;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}

.fl {
    display: flex;
}
.fl.row {
    flex-direction: row;
}
.fl.col {
    flex-direction: column;
}
.fl .push {
    flex-grow: 1;
}
.fl .pull {
    flex-shrink: 1;
}

button {
    padding: 0.25em;
    border: solid 2px var(--widget-border);
    border-radius: 7px;
    text-transform: uppercase;
    text-wrap:nowrap;
}
button:hover {
    background: radial-gradient(circle at center, var(--widget-contrast-bg), var(--widget-bg));
}
button:active {
    background: var(--widget-inactive-bg);
}


.bg-cp-wintergreen {
    background-color: var(--color-wintergreen);
}

.bg-cp-beige {
    background-color: var(--color-bg);
}

.clickable {
    cursor: pointer;
}

.spacer {
    flex: 1;
}

.site-header {
    display: flex;
    flex-direction: row nowrap;
    background-color: var(--color-bg);
    height: 5em;
    width: 100%;
    align-items: center;
}
    .site-header .push-right {
        margin-left: 2em;
    }
    .site-header .push-left {
        margin-right: 2em;
    }
    .site-header .title {
        display: inline-flex;
        flex-grow: 1;
    }
        .site-header .title .spacer {
            flex-grow: 1;
        }
        .site-header .title > img {
            height:4em;
            overflow:hidden;
        }
    

.content {
    height: 100%;
    flex-grow: 1;
    display: inline-flex;
    flex-direction: row nowrap;
    overflow-y:scroll;
}
    .content .sidebar {
        width: auto;
        display: inline-flex;
    }
    .content .feature {
        display: inline-flex;
        flex-direction: column;
        flex-grow: 1;
    }
        .feature .presenter {
            display: inline-flex;
            flex-direction: row;
        }

.site-footer {
    display: flex;
    background-color: var(--color-bg);
    align-items: flex-end;
    height: 5em;
}
    .site-footer .copyright {
        text-align: center;
        font-size: 1em;
        font-weight: bold;
    }

.home-med-rect {
    display: flex;
    flex: 1;
    height: 640px;
    background-color: var(--color-wintergreen);
}