/* CSS related to app layout */

:root {
    --big-number-input-width: 90px;
    --co2-input-width: 100px;
    --prevalence-input-width: 75px;
}

/* For default, desktop layout */
body {
    background-color: #fafafa
}

/* Window div style */
#window-width {
    display: none;
}
#window-height {
    display: none;
}

/* Error Message */
.error-alert {
    position: fixed;
    width: 256px;
    top: 16px;
    right: 16px;
    z-index: 2;

    padding: 0.75rem 1.25rem;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid transparent;
    border-color: #f5c6cb;
    border-radius: 0.25rem;
}

.risk-alert {
    position: fixed;
    top: 16px;
    z-index: 1;

    padding: 0.75rem 1.25rem;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid transparent;
    border-color: #f5c6cb;
    border-radius: 0.25rem;
}

/* Presets Grid */
.grid-presets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0px;
    align-items: end;
}
.adv-grid-presets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0px;
    align-items: end;
}
.card-presets {
    padding: 8px;
}
.mobile-break {
    display: none;
}
#adv-imp-btn, #adv-up-btn {
    width: 100%;
    margin-bottom: 8px;
    font-family: 'Barlow', sans-serif;
}

/* Settings Grid */
.grid-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0px;
}
.card-settings {
    padding: 8px;
}
#app-mode-links {
    height = 483px;
    text-align: center;
    padding 70px 0;
}

/* Header Grid */
.grid-header {
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 0;
}
#header-left {
    padding: 16px;
    width: 500px;
}
#navbar {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin: 8px;
    padding: 2px;
    font-size: 13px;
}
#navbar-dropdown-menu {
    width: 100%;
    margin-right: auto;
    margin-left: 0px;
}

/* Panel Output Grid */
.output-content {
    display: grid;
    grid-template-rows: 1fr auto;
}
/* Card Footer/Disclaimer Text */
.airborne-text {
    bottom: 1em;
}

/* CO2 Panel Grid */
.grid-co2-panel {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

/* Main Grid */
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    padding: 0;
}
.adv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 0;
}
.card {
    position: relative;
    min-width: 500px;
    padding: 1.5em;
    margin: 1em;
    height: auto;
    background-color: #ffffff;
    border: solid 1px #DDDDDD;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24)
}
#card-tab {
    grid-row-start: 1;
    grid-row-end: 3;
}
#adv-card-tab {
    grid-row-start: 2;
    grid-row-end: 3;
}
#adv-card-presets {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 4;
}

#adv-risk-mode-co2 {
    max-width: 500px;
}
#adv-co2-prev-div {
    padding-top: 1em;
}

/* Tabs */
.tab-parent {
    height: 100%;
}
.tab-content {
    padding: 1em;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
    max-height: 600px;
    margin: 2em;
    margin-left: 1em;
    overflow-y: scroll;
    overflow-x: hidden;
}
#tab-a, #tab-b, #tab-c, #tab-d, #adv-tab-a, #adv-tab-b, #adv-tab-c, #adv-tab-d, #output-panel-tab-a, #output-panel-tab-b, #output-panel-tab-c  {
    padding-left: 1em;
    padding-right: 1em;
    border-left-color: #DDDDDD;
    border-right-color: #DDDDDD;
    border-bottom-color: #DDDDDD;
    font-size: 13px;
}

#adv-n-input, #n-input, #n-input-b, #n-input-c, #adv-n-input-b, #adv-n-input-c, #adv-t-input, #t-input,
#t-input-b, #t-input-c, #adv-t-input-b, #adv-t-input-c, #adv-prev-input-co2, #adv-exp-time-input-co2,
#adv-atm-input-co2{
    width: var(--big-number-input-width);
}
#adv-prev {
    width: var(--prevalence-input-width);
}
#adv-co2-input {
    width: var(--co2-input-width);
}

/* Advanced Intermediate Size */
@media only screen and (max-width: 1760px) {
    .adv-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        padding: 0;
    }
    .adv-grid-presets {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0px;
    }
    #adv-card-presets {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 3;
    }
}

/* Intermediate Size */
@media only screen and (max-width: 1400px) {
    .grid {
        grid-auto-rows: auto 1fr;
    }
    .grid-presets {
        grid-template-columns: 1fr 1fr;
    }
    .mobile-break {
        display: inline-block;
    }
}

/* Small-width/mobile layout */
@media only screen and (max-width: 1200px) {
    /* Presets Grid */
    .grid-presets {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px;
    }
    .adv-grid-presets {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px;
    }
    .card-presets {
        padding: 0;
    }

    /* Settings Grid */
    .grid-settings {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0px;
    }

    /* Header Grid */
    .grid-header {
        display: grid;
        grid-template-columns: 100%;
        padding: 0;
    }
    .app-card-header {
        margin: 1em;
        overflow-wrap: break-word;
    }
    #header-left {
        padding: 0;
        width: auto
    }

    /* Main Grid */
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding: 0;
    }
    .adv-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 0;
    }
    .card {
        min-width: 0;
        padding: 1em;
    }

    /* Cards */
    #card-tab, #adv-card-tab {
        grid-row-start: 5;
        grid-row-end: 6;
    }
    #adv-card-presets {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }

    /* Tabs */
    .tab-content {
        height: auto;
        max-height: inherit;
        overflow: visible;
    }
    .output-tray {
        border: solid 1px #DDDDDD;
        padding: 1em;
    }
    .output-content {
        padding-right: 1em;
        margin: 1em;
        margin-right: 1em;
        height: auto;
        overflow: visible;
    }

    /* Card Footer/Disclaimer Text */
    .airborne-text {
        position: relative;
        bottom: auto;
    }
}