@charset "utf-8";
@use "~bulma/sass/base";
@use "~bulma/sass/base/skeleton";
@use "~bulma/sass/themes";
@use "~bulma/sass/layout/container";
@use "~bulma/sass/layout/level";
@use "~bulma/sass/helpers/flexbox";
@use "~bulma/sass/helpers/spacing";
@use "~bulma/sass/helpers/color";
@use "~bulma/sass/helpers/visibility";
@use "~bulma/sass/grid/columns-v2";
@use "~bulma/sass/elements/box";
@use "~bulma/sass/elements/button";
@use "~bulma/sass/elements/table";
@use "~bulma/sass/elements/title";
@use "~bulma/sass/components/message";
@use "~bulma/sass/utilities/mixins";

$breakpoint: 835px;

@media (prefers-color-scheme: light) {
    html {
        content: "light";
    }
}

@media (prefers-color-scheme: dark) {
    html {
        content: "dark";
    }
}

#main {
    display: flex;
    @include mixins.until($breakpoint) {
        display: block;
    }
}

#results-pane {
    height:85vh;
    width: 60%;

    @include mixins.until($breakpoint) {
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
        height: 60vh;
    }
}

#results-pane > div {
    height: 100%;    
}

section {
    height: 100vh;
}

.table-container {
    height:100%;
    width:100%;
    overflow-y: scroll;
}

#query-pane {
    width: 40%;
    max-height: 85vh;
    padding-right: 30px;

    @include mixins.until($breakpoint) {
        width: 100%;
        max-height: fit-content;
        padding-right: 0px;
    }
}

#query-pane > div {
    height: 100%;
}

#query-help-space {
    height: 50vh;
    padding-top: 1rem;

    @include mixins.until($breakpoint) {
       height: auto
    }
}

#query-help-space > div {
    height: 100%
}

div.info-box {
    height:100%
}

div.content {
    overflow-y: scroll;
}

#variable-selects {
    overflow-y: scroll;
}

#variable-selects-wrapper {
    @include mixins.until($breakpoint) {
       margin-top: 1rem;
    }
}

#notif-msg {
    position:absolute;
    top: -10rem;
    left:50%;
    transform: translateX(-50%);
    z-index: 2;
    transition: ease-in-out 0.25s;
}

td {
    max-width: 15rem;
}