* {
    font-family: "Helvetica Neue",sans-serif;
}

body {
    background-color: white;
}

h1 {
    text-align: center;
}

label {
    display: inline-block;
    background-color: lightgray;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    margin-right: 0.5rem;
    padding-left: 0.5rem;
    width: calc(50% - 1rem);
}

label[data-wica-channel-name] {
    margin-right: 0;
    padding-left: 0;
    width: 50%;
}

/*---------------------------------------------------------------------- */
/* 1.0 SMALL DEVICES                                                     */
/*---------------------------------------------------------------------- */

@media (min-width: 0px) {

    .RfRamp              { grid-area: RfRamp; overflow: hidden }
    .RfReference         { grid-area: RfReference; overflow: hidden }
    .Cavity              { grid-area: Cavity; overflow: hidden }
    .CavityInput         { grid-area: CavityInput; overflow: hidden }
    .CavityTuning        { grid-area: CavityTuning; overflow: hidden }
    .CavityConditioning  { grid-area: CavityConditioning; overflow: hidden }
    .RfAmp               { grid-area: RfAmp; overflow: hidden }
    .RfInterlock         { grid-area: RfInterlock; overflow: hidden }
    .Plot1               { grid-area: Plot1; overflow: hidden }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity'
                              'Plot1'
                              'CavityInput'
                              'CavityTuning'
                              'CavityConditioning'
                              'RfAmp'
                              'RfInterlock'
                              'RfRamp'
                              'RfReference';
    }
    .grid-container-overview {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity'
                              'CavityInput'
                              'RfAmp'
                              'RfReference';
    }
    .grid-container-linac-klystrons {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity'
                              'Plot1'
                              'RfAmp'
                              'RfReference';
    }

    html {
        font-size: 11px;
    }

    .Plot1 {
        height: 15rem;
    }
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {

    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity'
                              'Plot1'
                              'CavityInput'
                              'CavityTuning'
                              'CavityConditioning'
                              'RfAmp'
                              'RfInterlock'
                              'RfRamp'
                              'RfReference';
    }
    .grid-container-overview {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity'
                              'CavityInput'
                              'RfAmp'
                              'RfReference';
    }
    .grid-container-linac-klystrons {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity'
                              'Plot1'
                              'RfAmp'
                              'RfReference';
    }
    html {
        font-size: 12px;
    }
}

/*---------------------------------------------------------------------- */
/* 2.0 TABLETS                                                           */
/*---------------------------------------------------------------------- */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    html {
        font-size: 12px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity           Plot1'
                              'Cavity           CavityInput'
                              'CavityTuning     CavityConditioning'
                              'RfAmp            RfInterlock'
                              'RfRamp           RfReference';
    }
    .grid-container-overview {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity           CavityInput'
                              'RfReference      RfAmp';
    }
    .grid-container-linac-klystrons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity           Plot1'
                              'RfAmp            Plot1'
                              'RfReference      Plot1';
    }
}

/*---------------------------------------------------------------------- */
/* 3.0 LARGE DEVICES                                                     */
/*---------------------------------------------------------------------- */

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    html {
        font-size: 12px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity        Cavity              Plot1'
                              'CavityTuning  CavityConditioning  CavityInput'
                              'RfAmp         RfInterlock         .'
                              'RfRamp        RfReference         .';
    }
    .grid-container-overview {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity        Cavity              CavityInput'
                              'RfReference   RfReference         RfAmp';
    }
    .grid-container-linac-klystrons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity        Plot1              Plot1'
                              'RfAmp         Plot1              Plot1'
                              'RfReference   Plot1              Plot1';
    }
}

/*---------------------------------------------------------------------- */
/* 5.0 LARGER DEVICES                                                    */
/*---------------------------------------------------------------------- */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    html {
        font-size: 14px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity             Cavity             Plot1'
                              'CavityInput        CavityInput        RfAmp'
                              'CavityTuning       CavityTuning       RfInterlock'
                              'CavityConditioning CavityConditioning RfRamp'
                              'RfReference RfReference RfReference';
    }
    .grid-container-overview {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity        Cavity              CavityInput'
                              'RfReference   RfReference         RfAmp';
    }
    .grid-container-linac-klystrons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-gap: 0.5rem;
        grid-template-areas:  'Cavity        Plot1              Plot1'
                              'RfAmp         Plot1              Plot1'
                              'RfReference   Plot1              Plot1';
    }
}