﻿
div#takeoffPerf > div#results {
    display: grid;
    grid-template-areas: "title title title title" "labelFlap flap labelV1 v1" "labelTow tow labelVr vr" ". . labelV2 v2" ". . . ." "labelTemp temp labelN1 n1" "labelEffra effra . ." "labelEffra2 effra2 . ." "ar ar ar ar" "details details details details" "efp efp efp efp" "si si si si";
    grid-template-rows: auto auto auto auto auto 0.1fr auto auto auto auto 1fr 1fr;
    grid-template-columns: auto 1fr auto 1fr;
    grid-gap: var(--margin);
}

div#landingPerf > div#results {
    display: grid;
    grid-template-areas: "title title" "labelLandingWeight landingWeight" "labelFieldLimit fieldLimit" "labelAppClbLimit appClbLimit" "labelLdgClbLimit ldgClbLimit" "labelQuickTurnWeight quickTurnWeight" "labelQuickTurnTime quickTurnTime" "details details" "efp efp" "si si";
    grid-template-rows: auto auto auto auto auto auto auto auto 1fr 1fr;
    grid-gap: var(--margin);
}

div#results > h2 {
    grid-area: title;
}


div#results > label {
    padding: 0 0.5rem;
}


div#results > label[for=flap] {
    grid-area: labelFlap;
}

div#results > label[for=tow] {
    grid-area: labelTow;
}

div#results > label[for=v1] {
    grid-area: labelV1;
}

div#results > label[for=vr] {
    grid-area: labelVr;
}

div#results > label[for=v2] {
    grid-area: labelV2;
}

div#results > label[for=temp] {
    grid-area: labelTemp;
}

div#results > label[for=n1] {
    grid-area: labelN1;
}

div#results > label[for=effra] {
    grid-area: labelEffra;
}

div#results > label[for=effra2] {
    grid-area: labelEffra2;
}

div#results > input#flap {
    grid-area: flap;
}

div#results > input#tow {
    grid-area: tow;
}

div#results > input#v1 {
    grid-area: v1;
}

div#results > input#vr {
    grid-area: vr;
}

div#results > input#v2 {
    grid-area: v2;
}

div#results > input#temp {
    grid-area: temp;
}

div#results > input#n1 {
    grid-area: n1;
}

div#results > input#effra {
    grid-area: effra;
}

div#results > input#effra2 {
    grid-area: effra2;
}

div#results > div#efp {
    grid-area: efp;
}

div#results > div#selectedInopitems {
    grid-area: si;
}

div#results > label[for=landingWeight] {
    grid-area: labelLandingWeight;
}

div#results > input#landingWeight {
    grid-area: landingWeight;
}

div#results > label[for=fieldLimit] {
    grid-area: labelFieldLimit;
}

div#results > input#fieldLimit {
    grid-area: fieldLimit;
}

div#results > label[for=appClbLimit] {
    grid-area: labelAppClbLimit;
}

div#results > input#appClbLimit {
    grid-area: appClbLimit;
}

div#results > label[for=ldgClbLimit] {
    grid-area: labelLdgClbLimit;
}

div#results > input#ldgClbLimit {
    grid-area: ldgClbLimit;
}

div#results > label[for=quickTurnWeight] {
    grid-area: labelQuickTurnWeight;
}

div#results > input#quickTurnWeight {
    grid-area: quickTurnWeight;
}

div#results > label[for=quickTurnTime] {
    grid-area: labelQuickTurnTime;
}

div#results > input#quickTurnTime {
    grid-area: quickTurnTime;
}

div#results div#efp,
div#results div#selectedInopitems {
    align-self: stretch;
    justify-self: stretch;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin: var(--margin);
    padding: var(--margin);
    border-radius: var(--border-radius);
}

div#results > label[for=assumedResult] {
    grid-area: ar;
}


div#results > input[readonly] {
    background-color: transparent;
    color: var(--green-light);
    padding: var(--padding) 0;
    font-size: 1em;
    margin: 0;
}

div#results.warning > input {
    color: var(--orange);
}

div#results.warning label[for=tow]::after {
    content: "";
    background: url(../images/warning.svg) no-repeat center;
    background-size: contain;
    width: 1rem;
    height: 1rem;
    margin-left: 0.2rem;
}

div#results > input[type=button] {
    grid-column: span 2;
}


div#results > input#details {
    grid-area: details;
}