:root {
    --ui-color-dark: #0e1729;
    --ui-color-med: #0183c7;
    --ui-color-light: #e6f4fd;
    --ui-color-med-50pct: #0183c780;
    --ui-color-grey: #64738B;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.hidden {
    display: none;
}

svg[data-action] {
    height: 5vh;
    border-radius: 0.4vh;
    cursor: pointer;
}

    svg[data-action].dark {
        fill: var(--ui-color-dark);
    }

    svg[data-action].white {
        fill: #ffffff;
    }

    svg[data-action].bg-dark {
        background-color: var(--ui-color-dark);
    }

    svg[data-action].hover-white:hover, svg[data-action].active-white.active {
        fill: #ffffff;
    }

    svg[data-action].hover-dark:hover, svg[data-action].active-dark.active {
        fill: var(--ui-color-dark);
    }

    svg[data-action].hover-bg-med-50pct:hover, svg[data-action].active-bg-med-50pct.active {
        background-color: var(--ui-color-med-50pct);
    }

    svg[data-action].hover-bg-med:hover, svg[data-action].active-bg-med.active {
        background-color: var(--ui-color-med);
    }

    svg[data-action].hover-bg-white:hover, svg[data-action].active-bg-white.active {
        background-color: #ffffff;
    }

svg[data-action="click-open"].active, svg[data-action="hover-open"].active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

header {
    height: 10vh;
    background-color: var(--ui-color-med);
}

.banner-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

.banner-left {
    width: 4vh;
    position: relative;
}

.banner-left-fill {
    background-color: var(--ui-color-light);
    width: 100%;
    height: 6vh;
    position: absolute;
}

.banner-curve {
    background-color: var(--ui-color-light);
    height: 4vh;
    width: 4vh;
    position: absolute;
    top: 6vh;
    border-bottom-left-radius: 100%;
}

.banner {
    background-color: var(--ui-color-light);
    /*    border-radius: 0 0 0 4vh;*/
    width: 100%;
    height: 100%;
    flex-grow: 1;
}

    .banner svg[data-action] {
        margin: 2.5vh 2vh 0 0;
        float: right;
    }

.container {
    flex-grow: 1;
    background-color: #ff6a00;
}

.button-pulldown {
    display: none;
    position: absolute;
    /*    top: 10vh;*/
    /*right: 2vh;*/
    width: 25vh;
    padding: 0.5vh;
}

.align-right {
    border-radius: 0.5vh 0 0.5vh 0.5vh;
}

.align-left {
    border-radius: 0 0.5vh 0.5vh 0.5vh;
}

.bg-ui-color-med {
    background-color: var(--ui-color-med);
}

.bg-ui-color-med-50pct {
    background-color: var(--ui-color-med-50pct);
}

.bg-ui-color-dark {
    background-color: var(--ui-color-dark);
}

.menu-item {
    height: 4vh;
    cursor: pointer;
    color: var(--ui-color-dark);
    font-weight: bold;
    padding: 0.5vh 0 0 1vh;
}

    .menu-item svg {
        height: 3vh;
        fill: var(--ui-color-dark);
        vertical-align: middle;
    }

    .menu-item:hover {
        background-color: var(--ui-color-dark);
        color: #ffffff;
    }

        .menu-item:hover svg {
            fill: #ffffff;
        }

.menu-dropdown {
    height: 3vh;
    /*    width: 100%;*/
    font-size: 2vh;
    padding: 0.5vh 0 0 0.5vh;
    cursor: pointer;
    color: #fff;
    border-radius: 0.5vh;
}

    .menu-dropdown:hover, .menu-dropdown.active {
        background-color: var(--ui-color-dark);
    }

    .menu-dropdown.active {
        border-radius: 0.5vh 0.5vh 0 0;
    }

    .menu-dropdown svg {
        height: 2vh;
        /*    float: right;*/
        margin-right: 1vh;
        fill: #fff;
    }

    .menu-dropdown.active svg {
        transform: rotate(180deg);
    }

.menu-dropdown-content {
    display: none;
    font-size: 1.5vh;
    background-color: var(--ui-color-dark);
    border-radius: 0 0 0.5vh 0.5vh;
    color: var(--ui-color-light);
    padding: 0.5vh;
}

    .menu-dropdown-content input {
        border-radius: 0.4vh;
        border: 1px solid #333333;
        vertical-align: top;
    }

.menu-checklist {
    height: 15vh;
    overflow-y: scroll;
}

.menu-checklist-item {
    cursor: pointer;
}

    .menu-checklist-item:hover {
        background-color: var(--ui-color-med);
    }

.toggle {
    height: 1.5vh;
    aspect-ratio: 2;
    border: .15vh solid #fff;
    border-radius: .75vh;
    padding: 0.15vh;
    position: relative;
    transition: background-color linear 0.3s;
    cursor: pointer;
}

    .toggle.on {
        background-color: #fff;
        transition: background-color linear 0.3s;
    }

    .toggle .toggle-handle {
        height: 0.9vh;
        width: 0.9vh;
        background-color: #fff;
        border-radius: 0.45vh;
        position: absolute;
        left: 0.2vh;
        transition: all linear 0.3s;
    }

    .toggle.on .toggle-handle {
        left: 1.65vh;
        background-color: var(--ui-color-dark);
        transition: all linear 0.3s;
    }

#layer_pulldown .toggle {
    margin: 0.1vh 0.5vh 0 0;
    float: left;
}

#search_pulldown .toggle {
    float: left;
}