body {
    background: rgb(226, 226, 226);
    margin: 0px;
}

header {
    background: rgb(226, 226, 226);
    color: black;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: smaller;
    text-align: center;
}

canvas.inductorClass {
    background: rgb(255, 255, 255);
    margin: 1px;
    padding: 2px;
    border: 0px solid rgb(0, 0, 0);
    display: block; 
    box-sizing: border-box; 
}

section div.slider_container {
    /*
    width: 100%;
    height: 100%;
    */
    /*height: 140px;*/
    background: rgb(255, 255, 255);
    border: 1px solid rgb(0, 0, 0);
    margin: 0px;
    padding: 0px;
    /*display: inline-block;*/
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
}

section div.chart-container {
    width: 100%;
    height: 100%;
    display: block; 
    box-sizing: border-box; 
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid rgb(0, 0, 0);
    position: relative;
}

section div.inductor-container {
    width: 100%;
    height: 100%;
    display: block; 
    box-sizing: border-box; 
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid rgb(0, 0, 0);
    position: relative;
}
    
section div.notes {
    background: lightgray;
    min-height: fit-content; 
    width: 100%;
}

section div.sliders {
    background:white;
    display: inline-block;
    font-size: small;
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
}

div label {
    background:white;
    display: inline-block;
    width: 40px;
    font-size: small;
    text-align: right;
}

div input {
    background:lightsalmon;
    display: inline-block;
    width:80%;
}

@media (orientation: portrait) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.3fr;
        grid-template-areas: 
        "chart-container"
        "inductor-container" 
        "slider-container" 
        "notes";
        justify-items: stretch;
    }

    section div.chart-container {
        height: 45vh;
        width: 100%;
        box-sizing: border-box; 
    }
    
    section div.inductor-container {
        height: 35vh;
        width: 100%;
        box-sizing: border-box; 
    }
    
    section div.slider_container {
        /*height: 20vh;*/
        width: 100%;
    }
}

@media (orientation: landscape) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.3fr;
        grid-template-areas: 
        "chart-container"
        "inductor-container" 
        "slider-container" 
        "notes";
        justify-items: stretch;
    }

    section div.chart-container {
        height: 95vh;
        width: 100vw;
        box-sizing: border-box; 
    }
    
    section div.inductor-container {
        height: 70vh;
        width: 100vw;
        box-sizing: border-box; 
    }
    
    section div.slider_container {
        min-height: fit-content; 
        width: 100%;
    }
    
    section div.notes {
        width: 100%;
    }
}

@media screen and (min-width: 800px) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 1fr 0.3fr 0.2fr 5fr;*/
        grid-template-areas: 
        "chart-container"
        "inductor-container" 
        "slider-container" 
        "notes";
        justify-items: stretch;
    }

    section div.chart-container {
        height: 50vh;
        width: 100vw;
        box-sizing: border-box; 
    }
    
    section div.inductor-container {
        height: 25vh;
        width: 100vw;
        box-sizing: border-box; 
    }
    
    section div.slider_container {
        width: 100%;
        /*height: 10vh;*/
    }
}

/*
@media screen and (min-width: 800px) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 0.3fr;
        grid-template-areas: 
        "chart-container" "inductor-container" 
        "slider-container"  "notes";
        justify-items: stretch;
    }

    section div.chart-container {
        height: 70vh;
        width:  50vw;
        box-sizing: border-box; 
    }
    
    section div.inductor-container {
        height: 70vh;
        width:  50vw;
        box-sizing: border-box; 
    }
    
    section div.slider_container {
        width: 100%;
        height: 20%;
    }
    
    section div.notes {
        width: 100%;
        height: 50%;
    }
}
*/

/*
@media (orientation: landscape) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: 1fr 0.3fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
        "inductor-container" "slider-container";
    }

    section div.inductor-container {
        height: 90vh;
        width: 60vw;
        box-sizing: border-box; 
    }
    
    section div.slider_container {
        width: 40vw;
    }
}    

@media print (orientation: landscape) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(4, 300px);
        grid-template-rows: repeat(1, 300px) 150px;
        justify-items: stretch;
    }
    section div.chart-container {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
}

@media print (orientation: portrait) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(2, 200px);
        grid-template-rows: repeat(2, 300px) 150px 120px;
        justify-items: stretch;
    }
    section div.chart-container {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
}
*/