@media only screen and (max-width: 600px) and (orientation: portrait) {

    .itemmainsmall {
        display: block;
        grid-area: 3 / span 6;
        padding-left: 0 !important;
    }

        .itemmainsmall > h1 {
            font-size: 1.5em;
        }

        .itemmainsmall > div {
            padding-left: 0.25em !important;
        }

    .itemmainlarge {
        display: none;
    }

    header {
        background-color: white;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

        header * {
            display: inline-block;
            vertical-align: central;
            padding-right: 10px;
        }

    .smallheaderitem {
        grid-area: 1 / span 6;
        height: auto !important;
        display: grid;
        grid-template-columns: 25% minmax(0, 75%);
        grid-template-rows: auto auto;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
    }

        .smallheaderitem > a {
            grid-column: 1;
            grid-row: 1;
            height: auto;
            width: 100%;
            min-width: 0;
        }

            .smallheaderitem > a > img {
                height: auto;
                max-width: 100%;
            }

        .smallheaderitem > h1 {
            grid-column: 2;
            grid-row: 1;
            width: 100%;
            min-width: 0;
            font-size: 1.5em;
            text-align: right;
            white-space: nowrap;
        }

        .smallheaderitem > nav {
            grid-column: 1 / -1;
            grid-row: 2;
        }

    footer {
        height: 3rem;
        width: 100%;
        background: lightblue;
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

        footer span:first-of-type {
            margin-left: 30px;
        }

        footer span:last-of-type {
            margin-right: 10px;
        }

        footer span a {
            display: inline-block;
        }

    .footeritem {
        display: none;
        margin-left: -40px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    main {
        /*margin-top: 120px;
    height: 100%;*/
    }

    .innerdiv {
        margin-top: 100px;
        padding-left: 0.25em !important;
    }

    .panel-default {
        border-color: #ddd;
    }

        .panel-default > .panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
            border-bottom: 1px solid thin;
        }

    .hidden-lg {
        display: block !important;
    }

    .hidden-md {
        display: block !important;
    }

    .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }

    .sp-content-heading a {
        color: #000;
        display: block;
        text-decoration: none;
    }

    #statusImage > img {
        width: 20px;
        height: auto;
    }

    /*a:hover, a:focus {
        text-decoration: underline;
    }*/

    a:active, a:hover {
        outline: 0;
    }

    a {
        color: blue;
        text-decoration: none;
    }

    a {
        background: transparent;
    }

    .sp-nav-icon {
        margin-right: 10px;
    }

    .pull-right {
        float: right !important;
    }

    img {
        vertical-align: middle;
    }

    img {
        border: 0;
    }

    .panel-body {
        padding: 15px;
        margin-bottom: 10px;
        width: 90%;
    }

    .notice-message-body {
        width: 100%;
    }

    .notice-message-body-underline {
        padding-bottom: 10px;
        border-bottom: 1px dotted black;
        margin-bottom: 15px;
        width: 100%;
    }

    .divwithoutborderbottom {
        border-bottom: none;
        margin-bottom: 10px;
    }

    .divwithborderbottom {
        border-bottom: 1px dotted #D3D3D3;
        margin-bottom: 10px;
        width: 100%;
    }

    #messagediv {
        margin-bottom: 10px;
    }

    .messagediv {
        margin-bottom: 10px;
    }

    .grid-container {
        display: grid;
        gap: 10px;
        background-color: white;
        padding: 10px;
    }

    nav ul {
        list-style: none;
        margin: 0 2px;
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .smallmenu {
        margin-bottom: 10px;
    }

        .smallmenu > ul {
            float: left;
            width: 100%;
            height: 27px;
            line-height: 27px;
            margin-bottom: 20px;
        }

        .smallmenu ul {
            min-width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .smallmenu > ul > li {
            position: relative;
            border-right: 1px solid #444;
        }

            .smallmenu > ul > li:first-of-type {
                width: 28%;
            }

            .smallmenu > ul > li:nth-of-type(2) {
                width: 52%;
            }

            .smallmenu > ul > li:last-of-type {
                width: 20%;
            }

        .smallmenu ul > li {
            float: left;
            box-sizing: border-box;
            text-align: center;
        }

            .smallmenu ul > li:first-of-type {
                padding-left: 0;
            }

            .smallmenu ul > li:last-of-type {
                border-right: none;
            }

        .smallmenu > ul > li > a:hover {
            color: #2e65a7;
        }

        .smallmenu > ul > li:first-of-type > a {
            margin: 0 5px;
        }

        .smallmenu > ul > li > a {
            margin: 0 5px;
            text-decoration: none;
        }

        .smallmenu li > a {
            display: block;
            position: relative;
            margin: 0;
            padding: 0;
        }

    .smallanchor,
    .smallanchor:hover {
        display: inline-block !important;
        text-decoration: none !important;
        font-size: 16px !important;
    }

    a {
        text-decoration: none;
        font-size: 16px;
    }

    /*
main {
    margin-top: 210px;
}*/

    .live-service-link {
    }

    .planned-maintenance-link {
    }

    .history-panel {
        border-bottom: 1px dotted black;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .history-resolution {
        padding-bottom: 10px;
    }
    /*
.itemmainsmall {
    grid-area: main;
}*/

    .noticeMessageExpander .icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 8px solid currentColor;
        margin-left: 8px;
        vertical-align: middle;
        cursor: pointer;
    }

        .noticeMessageExpander .icon.open {
            border-top: 8px solid currentColor;
            border-bottom: none;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            margin-left: 9px;
        }

    .noticeMessageExpander span {
        cursor: pointer;
    }

    .no-outages {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 300px;
    }

    details {
        color: blue;
    }

        details[open] summary {
            color: blue;
            background-color: yellow;
        }

        details[open] {
            color: black;
            background-color: #f1f1f1;
        }
}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {

    .itemmainsmall {
        display: block;
        grid-area: 3 / span 6;
        padding-left: 0 !important;
    }

        .itemmainsmall > h1 {
            font-size: 1.5em;
        }

        .itemmainsmall > div {
            padding-left: 0.25em !important;
        }

    .itemmainlarge {
        display: none;
    }

    header {
        background-color: white;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

        header * {
            display: inline-block;
            vertical-align: central;
            padding-right: 10px;
        }

    .smallheaderitem {
        grid-area: 1 / span 6;
        height: auto !important;
        display: grid;
        grid-template-columns: 25% minmax(0, 75%);
        grid-template-rows: auto auto;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
    }

        .smallheaderitem > a {
            grid-column: 1;
            grid-row: 1;
            height: auto;
            width: 100%;
            min-width: 0;
        }

            .smallheaderitem > a > img {
                height: auto;
                max-width: 100%;
            }

        .smallheaderitem > h1 {
            grid-column: 2;
            grid-row: 1;
            width: 100%;
            min-width: 0;
            font-size: 1.5em;
            text-align: right;
            white-space: nowrap;
        }

        .smallheaderitem > nav {
            grid-column: 1 / -1;
            grid-row: 2;
        }

    footer {
        height: 3rem;
        width: 100%;
        background: lightblue;
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

        footer span:first-of-type {
            margin-left: 30px;
        }

        footer span:last-of-type {
            margin-right: 10px;
        }

        footer span a {
            display: inline-block;
        }

    .footeritem {
        display: none;
        margin-left: -40px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    main {
        /*margin-top: 120px;
    height: 100%;*/
    }

    .innerdiv {
        margin-top: 100px;
        padding-left: 0.25em !important;
    }

    .panel-default {
        border-color: #ddd;
    }

        .panel-default > .panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
            border-bottom: 1px solid thin;
        }

    .hidden-lg {
        display: block !important;
    }

    .hidden-md {
        display: block !important;
    }

    .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }

    .sp-content-heading a {
        color: #000;
        display: block;
        text-decoration: none;
    }

    #statusImage > img {
        width: 20px;
        height: auto;
    }

    /*a:hover, a:focus {
        text-decoration: underline;
    }*/

    a:active, a:hover {
        outline: 0;
    }

    a {
        color: blue;
        text-decoration: none;
    }

    a {
        background: transparent;
    }

    .sp-nav-icon {
        margin-right: 10px;
    }

    .pull-right {
        float: right !important;
    }

    img {
        vertical-align: middle;
    }

    img {
        border: 0;
    }

    .panel-body {
        padding: 15px;
        margin-bottom: 10px;
        width: 90%;
    }

    .notice-message-body {
        width: 100%;
    }

    .notice-message-body-underline {
        padding-bottom: 10px;
        border-bottom: 1px dotted black;
        margin-bottom: 15px;
        width: 100%;
    }

    .divwithoutborderbottom {
        border-bottom: none;
        margin-bottom: 10px;
    }

    .divwithborderbottom {
        border-bottom: 1px dotted #D3D3D3;
        margin-bottom: 10px;
        width: 100%;
    }

    #messagediv {
        margin-bottom: 10px;
    }

    .messagediv {
        margin-bottom: 10px;
    }

    .grid-container {
        display: grid;
        gap: 10px;
        background-color: white;
        padding: 10px;
    }

    nav ul {
        list-style: none;
        margin: 0 2px;
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .smallmenu {
        margin-bottom: 10px;
    }

        .smallmenu > ul {
            float: left;
            width: 100%;
            height: 27px;
            line-height: 27px;
            margin-bottom: 20px;
        }

        .smallmenu ul {
            min-width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .smallmenu > ul > li {
            position: relative;
            border-right: 1px solid #444;
        }

            .smallmenu > ul > li:first-of-type {
                width: 28%;
            }

            .smallmenu > ul > li:nth-of-type(2) {
                width: 52%;
            }

            .smallmenu > ul > li:last-of-type {
                width: 20%;
            }

        .smallmenu ul > li {
            float: left;
            box-sizing: border-box;
            text-align: center;
        }

            .smallmenu ul > li:first-of-type {
                padding-left: 0;
            }

            .smallmenu ul > li:last-of-type {
                border-right: none;
            }

        .smallmenu > ul > li > a:hover {
            color: #2e65a7;
        }

        .smallmenu > ul > li:first-of-type > a {
            margin: 0 5px;
        }

        .smallmenu > ul > li > a {
            margin: 0 5px;
            text-decoration: none;
        }

        .smallmenu li > a {
            display: block;
            position: relative;
            margin: 0;
            padding: 0;
        }

    .smallanchor,
    .smallanchor:hover {
        display: inline-block !important;
        text-decoration: none !important;
        font-size: 16px !important;
    }

    a {
        text-decoration: none;
        font-size: 16px;
    }

    /*
main {
    margin-top: 210px;
}*/

    .live-service-link {
    }

    .planned-maintenance-link {
    }

    .history-panel {
        border-bottom: 1px dotted black;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .history-resolution {
        padding-bottom: 10px;
    }
    /*
.itemmainsmall {
    grid-area: main;
}*/

    .noticeMessageExpander .icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 8px solid currentColor;
        margin-left: 8px;
        vertical-align: middle;
        cursor: pointer;
    }

        .noticeMessageExpander .icon.open {
            border-top: 8px solid currentColor;
            border-bottom: none;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            margin-left: 9px;
        }

    .noticeMessageExpander span {
        cursor: pointer;
    }

    .no-outages {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 300px;
    }

    details {
        color: blue;
    }

        details[open] summary {
            color: blue;
            background-color: yellow;
        }

        details[open] {
            color: black;
            background-color: #f1f1f1;
        }
}