header {
    min-height: 86px;
}

#mainContent.processing:before, .loadingGraphic {
    background: rgba(205, 205, 205, 0.4) url("/cdn/img/global/loader_large.gif") no-repeat scroll center center;
    content: "";
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3000;
}

#mainContent {
    /* Reset text alignment to left from center (default) */
    text-align: initial;
}

#ngWrapper {
    font-size: 1rem;
    width: 970px;
    margin: 0 auto;
}

.icon-edit {
    background-image: url('/cdn/img/global/edit.gif');
}

.icon-view {
    background-image: url('/cdn/img/global/icotext.gif');
}

#currentUser #userIcon {
    align-self: center;
    background: url("/cdn/img/global/account_icon.png") no-repeat;
    height: 11px;
    margin: 0 10px 0 0;
    width: 11px;
}


.image {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

/*#ResponseBanner.bannerNote {
	background-color: #b6dbfc;
}*/

/* -------- Form Elements -------- */

input[type="submit"], input[type="button"] {
    font-size: 1.2em;
    font-weight: bold;
    padding: 12px 24px 12px 24px;
    background-color: #005ea2;
    color: #ffffff;
    border: 0;
    cursor: pointer;
}

    input[type="submit"]:hover, input[type="button"]:hover {
        background-color: #1a4480;
    }

    input[type="submit"].delete, input[type="button"].delete {
        background-color: #d83933;
        color: #ffffff;
        border: 0;
    }

        input[type="submit"].delete:hover, input[type="button"].delete:hover {
            background-color: #b50909;
        }

input[type=text], select, input[type=number] {
    padding: 7px 6px 6px 6px;
    font-size: 1.0em;
    font-family: Arial, Helvetica, sans-serif;
}

div > span.cancel {
    padding-left: 20px;
    font-style: italic;
    font-size: 1.2em;
}

p > span.cancel {
    padding-left: 20px;
    font-style: italic;
}

    span.cancel a {
        color: #767676;
    }

/* -------- Form Elements End -------- */

/* -------- Typography -------- */


h2.warning {
    color: #cc0000;
}

header h1 {
    font-size: 1.6rem;
    padding: 0;
    letter-spacing: .5px;
}

    header h1 a:visited {
        color: #00BD87;
    }

h2#pageHeaderTitle {
    padding: 0;
}

p.warning, ul.warning {
    color: #cc0000;
}

p.narrow {
    max-width: 1000px;
}

#credentials {
    font-size: 1.06rem;
}

#currentUser #lastLogin {
    color: #767676;
    font-size: 1.0rem;
}

ul {
    margin-top: 0;
}

/* -------- Typography Ends -------- */


/* -------- Directory Display -------- */

.search-container {
    display: flex;
    margin: 1.0rem 0 2.0rem 0;
}

    .search-container input[type=text] {
        width: 85%;
        margin-right: 15px;
    }

    .search-container input[type=submit] {
        width: 15%;
        padding: 12px 20px;
    }


.index-container {
	display: flex;
	flex-flow: row;
	margin-bottom: 2.5rem;
}

    .index-container a {
        padding: 0 13px;
        border-right: 1px solid lightgray;
        font-size: 1.2em;
    }

		.index-container a:first-of-type {
			padding-left: 0;
		}

		.index-container a:last-of-type {
			border: none;
			padding-right: 0;
		}

.directory-row {
    border-top: 1px solid #D9D9D9;
    margin-bottom: 25px;
    line-height: 2.0em;
}

    .directory-row:first-of-type {
        margin-top: 35px;
    }

    .directory-row:last-of-type {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 35px;
    }

    .directory-row h3 {
        width: 100%;
        margin: 25px 5% 0 0;
        font-size: 1.4em;
        padding-bottom: 0;
    }

    .directory-row .officer-container {
        display: flex;
        flex-wrap: wrap;
    }

        .directory-row .officer-container p.no-data {
            color: #767676;
            padding: 0;
            font-size: 1.2em;
        }

        .directory-row .officer-container .officer {
            width: 37%;
            margin-right: 5%;
            margin-top: 22px;
            background: url("../img/ico-contact.svg") no-repeat;
            padding-top: .3em;
        }

            .directory-row .officer-container .officer .name {
                font-size: 1.3em;
                font-weight: bold;
                margin-left: 60px;
            }

            .directory-row .officer-container .officer .type {
                color: #767676;
                margin-left: 60px;
                font-size: 1.2em;
            }

        .directory-row .officer-container .contact {
            width: 58%;
            margin-top: 24px;
            font-size: 1.2em;
        }

            .directory-row .officer-container .contact > div {
                display: flex;
            }

            .directory-row .officer-container .contact span.label {
                width: 90px;
                color: #767676;
            }

            .directory-row .officer-container .contact span.info {
                width: 90%;
            }

    .directory-row table.officers {
        margin: 13px 0 -15px 0;
        width: 100%;
        font-size: 1.2em;
        line-height: 1.7em;
    }

            .directory-row table.officers tbody tr:hover {
                border-bottom: inherit;
            }

            .directory-row table.officers tbody tr:first-of-type {
                border-top: none;
            }

            .directory-row table.officers tbody tr:last-of-type {
                border-bottom: none;
            }

        .directory-row table.officers td {
            border-top: 1px dashed #e0e0e0;
            padding-top: 13px;
            padding-bottom: 13px;
            vertical-align: top;
        }

            .directory-row table.officers td.type {
                width: 29%;
                font-weight: normal;
                padding-left: 30px;
                background: url(../img/ico-contact.svg) no-repeat 0 12px;
                background-size: 22px 22px;
            }

            .directory-row table.officers td.action {
                width: 30%;
                text-align: right;
            }

/* -------- Directory Display Ends -------- */

/* -------- Page Nav -------- */

ul.page-nav {
    font-size: 1.3em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 30px 0 30px 0;
    padding: 0;
    list-style: none;
    display: flex;
}

    ul.page-nav > li {
        padding-right: 30px;
    }

    ul.page-nav a {
        padding-bottom: 5px;
    }

        ul.page-nav a:hover {
            text-decoration: none;
            border-bottom: 2px solid #660099;
        }

        ul.page-nav a:visited {
            color: #005ea2;
        }

/* -------- Page Nav Ends -------- */

/* -------- Tables -------- */

table.abo-table {
    width: 100%;
    margin: 1.0rem 0 2.0rem 0;
    border-bottom: 1px dashed #e0e0e0;
    font-size: 1.2em;
    line-height: 1.7em;
}


    table.abo-table a:visited {
        color: #005ea2;
    }

    table.abo-table a.delete, table.abo-table a.delete:visited, table.officers a.delete, table.officers a.delete:visited {
        /* color: #cc0000; */
        color: #767676;
    }

table thead {
    color: #767676;
    text-transform: uppercase;
    letter-spacing: .5px;
}

table.abo-table th {
    font-weight: bold;
    text-transform: initial;
    padding: 12px 40px 12px 0;
    color: #000000;
    width: 65%;
    text-align: left;
    border-top: 1px dashed #e0e0e0;
    vertical-align: top;
}

table.abo-table thead td {
    border-top: none;
}

table.abo-table td {
    font-weight: normal;
    padding: 12px 30px 12px 0;
    border-top: 1px dashed #e0e0e0;
    vertical-align: top;
}

tbody tr:hover, tbody tr:last-of-type:hover {
    border-bottom: 1px solid #AAAAAA;
    border-top: 1px solid #AAAAAA;
}

table.narrow {
    max-width: 1000px;
}

/* -------- Tables Ends -------- */

/* -------- Summary List -------- */

ul.summary, ul.edit {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0 2.0rem 0;
    color: #cc0000;
    font-size: 1.2em;
    line-height: 1.7em;
}

ul.narrow {
    max-width: 1000px;
}

ul.summary li, ul.edit li {
    display: flex;
    flex-wrap: wrap;
    padding: 11px 0;
    border-bottom: 1px dashed #e0e0e0;
}

    ul.summary li:first-of-type, ul.edit li:first-of-type {
        border-top: 1px dashed #e0e0e0;
    }

    ul.summary li > span {
        width: 220px;
        font-weight: bold;
    }

    ul.edit li > span {
        width: 24%;
        font-weight: bold;
        margin-top: 7px;
    }

        ul.edit li > span.half {
            width: 35%;
            margin-top: 0;
        }

    ul.edit li div.field-validation-error {
        color: #cc0000;
        width: 70%;
        margin-left: 24%;
        margin-bottom: -5px;
        padding-top: 4px;
        font-style: italic;
    }

ul.edit {
    color: #363636;
}

    ul.edit li {
        padding: 13px 0;
    }

    ul.edit input[type=text] {
        width: 70%;
    }

    ul.edit select {
        width: 72.2%;
    }


/* -------- Summary List Ends -------- */