/* Finson-Probstein Diagram */
.labelItalic
{
	font-style: italic;
	color: #888888;
}

#FP_interface{
    display:grid;
    grid-template-columns: auto 450px;
    grid-template-rows:auto auto;
    grid-template-areas:
      "grid_diagram  grid_controls"
      "grid_examples grid_controls";

    column-gap: 10px;
    row-gap: 10px;

    text-align: center;
    align-items: flex-start;
    padding-top:20px;
}

#diagram{
    grid-area: grid_diagram;
    width:100%;
    min-width:100%;
    height:100%;
    min-height:600px;
}
#placeholder
{
    width:100%;
    min-width:100%;
    height:100%;
    min-height:100%;
}

#examples{
    grid-area: grid_examples;
    padding-top:50px;
}

#controls{
    grid-area: grid_controls;
    height:100%;
    width:450px;
}

#inputOE_custom,
#inputOE_Horizons{
    width:100%;
}

.div_table_demos{ /* 4 columns, equal size */
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    text-align:center;
    justify-items: center;
}


/* Input parameters */
#controls form{
    width:100%;
}
#controls table{
    table-layout:fixed;
	width:100%;
	border-collapse:collapse;
}
#controls td{
	border: 1px solid black;
	padding: 5px;
}
#controls td.leftColumn{
	width:250px;
	text-align:right;
}
#controls input{
	width:150px;
}

#inputHorizons{
    width:90%;
    resize:none;
}
#output{
    width: 90%;
    resize: none;
}


/* ----------------------------------------------------- */
/* Responsive styles */
/* ----------------------------------------------------- */
@media all and (max-width:1200px){
    #FP_interface{
        width:100%;
        display:grid;
        grid-template-columns: auto;
        grid-template-areas:
          "grid_diagram"
          "grid_examples"
          "grid_controls";
    
        row-gap: 50px;
        justify-items: center;
    }

    #examples{
        padding-top:0px;
    }

    #controls table{
        width:80%;
        font-size:10pt;
        margin-left:auto;
        margin-right:auto;
    }
    #controls td.leftColumn{
        width:auto;
    }
    #output{
        width:80%;
    }
}