body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.headers {
    font-size: x-large;
    font-weight: bold;
}

.middle {
    text-align: center;
}

.PermissionCB {
    text-align: left;
    vertical-align: top;
}

.aMenuButtons {
    padding-right: 60px;
}

.RepeaterTable td {
    width: 90px;
    vertical-align: top;
}

ul {
    list-style-type: none;
}

.SubHeaderBold {
    font-size: larger;
    font-weight: bold;
}

hr {
    width: 100%;
}

.gradient {
    background: rgb(0,71,101);
    background: linear-gradient(104deg, rgba(0,71,101,1) 0%, rgba(0,71,101,1) 96%);
    border: none;
    margin: 0px;
    padding: 0;
}

.MainTitle {
    font-family: Century;
    font-size: xx-large;
    background-color: #EBF5FF;
}

.MainTitleText {
    text-shadow: 3px 3px 2px #262626;
    text-align: left;
    font-size: xx-large;
    font-weight: bold;
    color: #ffffff;
}

.app-header {
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(34, 48, 74, 0.12);
    box-sizing: border-box;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 20px auto 12px;
    min-height: 128px;
    overflow: hidden;
    padding: 14px 18px;
    width: 100%;
}

.app-header__logo {
    align-items: center;
    display: flex;
    flex: 0 0 180px;
    justify-content: flex-start;
}

.app-header__logo--right {
    justify-content: flex-end;
}

.app-header__logo img {
    display: block;
    height: auto;
    max-height: 96px;
    max-width: 170px;
    width: auto;
}

.app-header__title {
    color: #ffffff;
    flex: 1 1 auto;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-shadow: 3px 3px 2px #262626;
}

.FilterPicker li {
    display: inline;
    float: left;
    margin-left: 15px;
    margin-bottom: 15px;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.maxwidth {
    width: 100%;
}

/*.chkChoice input {
    margin-left: -20px;
    text-align: center;
    display: inline-block;
    
}*/

.chkChoice td {
    padding-left: 20px;
    text-align: center;
    display: inline-block;
}


.TableSpacing td {
    padding-left: 15px;
}

tr.spaceUnder > td {
    padding-bottom: 1em;
}

.welcome-copy {
    line-height: 1.45;
}

.welcome-actions {
    margin: 24px 0 36px;
    text-align: center;
}

.primary-action {
    background: #2554C7;
    border: 1px solid #1f49ad;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    padding: 8px 16px;
}

.primary-action:hover,
.primary-action:focus {
    background: #1f49ad;
}

.service-outage {
    align-items: flex-start;
    background: #f4f7fb;
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%);
    box-sizing: border-box;
    color: #1f2937;
    display: flex;
    justify-content: center;
    left: 0;
    min-height: 100vh;
    overflow-y: auto;
    padding: 30px 22px 42px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.service-outage__shell {
    max-width: 830px;
    width: 100%;
}

.service-outage__card {
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    box-shadow: 0 18px 55px rgba(34, 48, 74, 0.16);
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 760px;
    padding: 44px 54px;
    position: relative;
    width: 100%;
}

.service-outage__chips {
    align-items: center;
    display: flex;
    gap: 8px;
    position: absolute;
    right: 18px;
    top: 18px;
}

.service-outage__chip {
    align-items: center;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
}

.service-outage__chip--up {
    background: #15803d;
}

.service-outage__chip--down {
    background: #b42318;
}

.service-outage__icon {
    align-items: center;
    background: #eef4ff;
    border-radius: 50%;
    display: flex;
    height: 92px;
    justify-content: center;
    margin: 0 auto 24px;
    width: 92px;
}

.service-outage__icon svg {
    fill: none;
    height: 54px;
    stroke: #2554C7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    width: 54px;
}

.service-outage__status {
    color: #2554C7;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    margin-bottom: 13px;
    text-transform: uppercase;
}

.service-outage__title {
    color: #1b2f4d;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 auto 18px;
    max-width: 640px;
}

.service-outage__message {
    color: #667085;
    font-size: 19px;
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 540px;
}

.service-outage__footer {
    color: #6b7280;
    font-size: 15px;
    margin: 0;
}

.service-app-header {
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(34, 48, 74, 0.12);
    box-sizing: border-box;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 auto 24px;
    min-height: 128px;
    overflow: hidden;
    padding: 14px 18px;
    width: 100%;
}

.service-app-header__logo {
    align-items: center;
    display: flex;
    flex: 0 0 180px;
    justify-content: flex-start;
}

.service-app-header__logo--right {
    justify-content: flex-end;
}

.service-app-header__logo img {
    display: block;
    height: auto;
    max-height: 96px;
    max-width: 170px;
    width: auto;
}

.service-app-header__title {
    color: #ffffff;
    flex: 1 1 auto;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-shadow: 3px 3px 2px #262626;
}

@media (max-width: 720px) {
    .service-outage {
        padding: 16px 12px 28px;
    }

    .service-outage__card {
        padding: 32px 22px;
    }

    .service-outage__chips {
        right: 14px;
        top: 14px;
    }

    .service-outage__chip {
        font-size: 13px;
        height: 26px;
        width: 26px;
    }

    .service-outage__icon {
        height: 76px;
        margin-bottom: 20px;
        width: 76px;
    }

    .service-outage__icon svg {
        height: 44px;
        width: 44px;
    }

    .service-outage__title {
        font-size: 24px;
    }

    .service-outage__message {
        font-size: 16px;
    }

    .service-app-header {
        gap: 10px;
        min-height: 96px;
        padding: 12px;
    }

    .service-app-header__logo {
        flex-basis: 76px;
    }

    .service-app-header__logo img {
        max-height: 62px;
        max-width: 74px;
    }

    .service-app-header__title {
        font-size: 20px;
    }

    .app-header {
        gap: 10px;
        min-height: 96px;
        padding: 12px;
    }

    .app-header__logo {
        flex-basis: 76px;
    }

    .app-header__logo img {
        max-height: 62px;
        max-width: 74px;
    }

    .app-header__title {
        font-size: 20px;
    }
}