:root {
    --doe-primary-color: #36213E; /* DOE primary color */
    --doe-secondary-color: #30337C; /* DOE secondary color */
    --doe-tertiary-color: #561F36; /* DOE tertiary color */
    --doe-accent1-color: #666C92; /* DOE accent color 1 */
    --doe-accent2-color: #92926B; /* DOE accent color 2 */
}

body {
    padding: 0;
    margin: 0;
    margin-top: 0;
    background: #f1f0f4;
    font-size: .8em;
}

    body, body * {
        font-family: verdana,arial,helvetica, "sans-serif";
    }

.neup_body_left {
    background: url('../images/background_left.png') top left repeat-y;
    padding: 0;
    margin: 0;
}

.neup_body_right {
    background: url('../images/background_right.png') top right repeat-y;
    padding: 0;
    margin: 0;
}

.neup_main {
    padding: 0 10px 10px;
    margin: 0;
}

p, td, a, li, pre, span, div, textarea {
    font-size: 1em;
}

a {
    color: #006BF4;
}

h1, h2, h3, h4 {
    font-family: "Century Gothic", "Copperplate Gothic Light", Arial;
    margin: 5px 0;
}

h1 {
    font-size: 1.5em;
    color: #0d124f;
    background: url("../images/heading_head.gif") bottom center repeat-x;
    padding-bottom: 10px;
}

h2 {
    background: url("../images/content_head.gif") top center repeat-x;
    font-size: 1.35em;
    padding-top: 7px;
}


h3, .neup_title {
    font-weight: bold;
    color: #272567;
    font-size: 1.25em;
}

h4, fieldset legend {
    font-size: 1.2em;
    color: #000;
    font-weight: bold;
}

.neup_content {
    border: solid 1px #b4b4b4;
    background: #fff;
    padding: 5px;
    clear: both;
}

.neup_header {
    background: url('../images/neup_logo.png') top left no-repeat;
    height: 82px;
}

.neup_search {
    text-align: right;
}

    .neup_search ul {
        list-style: none;
        margin-top: 0;
        padding-top: 0;
    }

    .neup_search a, .neup_search a:visited, .neup_search a:hover {
        color: #175396;
        text-decoration: none;
        font-weight: bold;
    }

.filter-set {
    position: relative;
}

#quick-search {
    position: absolute;
    right: 0;
    top: 0;
}

.filter-set fieldset #quick-search {
    top: 1em;
}

#quick-search-results {
    border: 1px solid #AAA;
    background-color: #FFF;
    margin: 0;
    margin-left: 1em;
    list-style: none;
    padding: .5em;
    position: absolute;
    right: 0;
    border-radius: .5em 0 .5em .5em;
    z-index: 900;
}

.search-results li {
    border: 1px solid #AAA;
    padding: 1.75em .5em 1.5em .5em;
    position: relative;
    margin: .25em;
    width: 30vw;
    border-radius: .4em;
}

    .search-results li.rcbItem {
        width: auto;
        cursor: pointer;
    }

    .search-results li.loading {
        border: 0;
        background-color: inherit;
        padding: 0;
        text-align: center;
    }
    /*
            .search-results li:last-child a {
                margin: 0 .5em;
            }
*/
    .search-results li:hover {
        background-color: #FEA;
        border-color: #333;
    }

    .search-results li.rcbItem:hover {
        background-color: #FE6;
        border-color: #541;
    }

    .search-results li .parent-link {
        font-size: .8em;
        padding: .2em;
        position: absolute;
        bottom: 0;
        right: .3em;
    }

    .search-results li span.parent-link {
        color: #AAA;
    }

    .search-results li .tag {
        font-size: .8em;
        padding: .3em;
        position: absolute;
        top: 0;
        left: 0;
        color: #888;
        border-radius: .4em;
        background-color: rgba(255,255,255,.75);
        border: 1px solid #AAA;
        border-width: 0 1px 1px 0;
    }

    .search-results li .status {
        font-size: .8em;
        position: absolute;
        top: 0;
        right: 0;
        color: #AAA;
    }

    .search-results li.rcbItem .status {
        top: auto;
        bottom: 0;
    }

    .search-results li .status::before {
        content: '';
    }

.colorPickerExample {
    border: 1px solid #AAA;
    padding: .3em;
    text-align: center;
}


#quick-search .associated-items {
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 1em;
    font-size: .75em;
}

    #quick-search .associated-items::before {
        content: "Member of:";
        border: 1px solid #3A3;
        background-color: #CDC;
        border-radius: .3em 0 0 .3em;
        cursor: pointer;
    }

    #quick-search .associated-items li {
        padding: .2em;
        border: 0;
        margin: 0;
        width: auto;
        display: none;
        border: 1px solid #AAA;
        font-size: .75em;
        background-color: #CCC;
        font-size: 1em;
    }

        #quick-search .associated-items li.current {
            background-color: #ACA;
        }

        #quick-search .associated-items li:hover {
            background-color: #DEF;
            cursor: default;
        }

    #quick-search .associated-items:hover li {
        display: inline-block;
    }

.highlight, .rsbListItem em {
    color: #00156e;
    background-color: #ffd563;
    font-weight: bold;
    font-size: inherit;
    display: inline-block;
    border-radius: .25em;
}

.search-select li:hover {
    cursor: pointer;
}


#contenttext {
    padding: 10px;
}

.neup_hide {
    display: none;
}

fieldset {
    border: solid 1px #D1CEBD;
}

    fieldset.disabled {
        border-color: #EEE;
    }

        fieldset.disabled * {
            color: #DDD;
        }

.wrap {
    white-space: normal;
}

.noWrap {
    white-space: nowrap
}

/********************************* Telerik style fixes *******************************************/

/*div.RadComboBoxDropDown .rcbItem {
    margin: 0;
    padding: 0;
}*/

.neup_main .neup_content .rgMasterTable tr:hover {
    background-color: #ffebA0;
}

tr.rgEditRow input[type=button], tr.rgCommandRow input[type=button] {
    border: 1px solid #819cbd;
    color: #00156e;
    background-color: #e8f1fc;
    background-image: linear-gradient(#e8f1fc,#e9f1fc 50%,#d2e1f4 50%,#e8f1fc);
    border-radius: 3px;
    padding: .3em;
}

    tr.rgEditRow input[type=button]:hover, tr.rgCommandRow input[type=button]:hover {
        background-color: #ffe18a;
        background-image: linear-gradient(#fffce8,#ffedb3 50%,#ffd563 50%,#ffe18a);
        border-color: #c4ba9c;
    }

.clickable > tbody > tr:hover {
    cursor: alias;
}

.clickable.rgMasterTable tr.rgEditRow + tr:hover {
    /* Had to be this specific to override table hover behavior. */
    background-color: #FFF;
    cursor: auto; /*reset cursor from clickable table rows*/
}


/************************************************NEUP Form****************************************/
.neup_form {
}

    .neup_form h3 {
        background: url("../images/content_head.gif") top center repeat-x;
        color: #272567;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
        margin-top: 7px;
        padding-top: 10px;
    }

    .neup_form label {
        display: block;
        padding-bottom: 5px;
    }

        .neup_form label.neup_inline {
            display: inline-block;
            width: 205px;
        }

.neup_inline table, .neup_inline div {
    display: inline;
    margin-bottom: 5px;
    vertical-align: top;
}

.neup_form .neup_label {
    display: inline-block;
}

.neup_label {
    width: 275px;
    font-weight: bold;
    color: #3b3b3b;
}

td.neup_label {
    padding: 6px 0;
}

.neup_expand {
    cursor: pointer;
    color: #0037b3;
}

.neup_center {
    text-align: center;
}

.neup_inline_help {
    color: #666;
    font-style: italic;
    vertical-align: middle;
}

.neup_short {
    width: 100px !important;
}

.neup_med {
    width: 245px !important;
}

.neup_long {
    width: 450px !important;
}

div.neup_no_back, .neup_no_back label, .neup_form table label {
    background: #ffffff;
}

.neup_read_only {
    overflow: auto;
    background-color: #f9f8f6;
    padding: 5px;
    border: solid 1px #7a7a7a;
    color: #232323;
}

.neup_right {
    text-align: right;
}

span.neup_right {
    text-align: left;
    display: inline-block;
    width: 65%;
}

.no_line {
    border: 0 !important;
}

#pnlPreview h2#userBeingEdited {
    padding: 0;
    background: none;
    margin: 0;
    font-size: 1em;
    color: #888;
    text-align: center;
}

.form-part {
    border: 2px dashed #CCC;
    padding: 1em;
    margin: .5em;
    border-radius: .5em;
}

.form-part-old {
    background-color: #EEE;
}

    .form-part-old::before {
        content: "For old proposal only";
        display: block;
        width: 20em;
        text-align: center;
        margin: auto;
        color: #AAA;
    }
/************************************************Radio Button List********************************/
.neup_listcontrol, .neup_listcontrol label {
    display: inline;
}
/************************************************GV Tables****************************************/
.gv_table {
    border: solid 1px #2E3131;
    width: 100%;
    border-collapse: collapse;
}

.neup_tableHolder {
    border: 0;
    padding: 0;
    margin: 0;
    border-color: #fff;
}

.gv_table th {
    /*#C3D8F1 url("../images/office2007_sprite.gif") repeat-x 0 -2300px
	#2E3131
	 */
    background: #C3D8F1 url("../images/office2007_sprite.gif") repeat-x 0 -2300px;
    /*#5D8CC9*/
    border-color: #5D8CC9;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    font-weight: normal;
    font-weight: normal;
    padding-bottom: 4px;
    padding-top: 5px;
    text-align: left;
    padding-right: 7px;
    padding-left: 7px;
}

.gv_selected_row {
}

.gv_pager {
}

.banded-table {
    width: 100%;
    empty-cells: show;
    table-layout: auto;
    border-spacing: 0;
    text-align: left;
}

    .banded-table td {
        padding: .3rem;
    }

    .banded-table .ending-row td {
        border-bottom: 2px solid #333;
    }

    .banded-table tr:has(td):nth-child(2n+0) {
        background: #D6E6F4;
    }

.in-table-list, .in-table-list-group {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .in-table-list-group > li {
        margin: .2em;
    }

    .in-table-list li {
        display: inline-block;
        padding: 0 .5em;
    }

        .in-table-list li::after {
            content: ",";
        }

        .in-table-list li:last-child::after {
            content: '';
        }

    .in-table-list-group > li::after {
        content: "";
    }

.in-table-check-list {
    display: block;
}

.in-table-list-group li.selected {
    border: 1px solid #AAA;
    background-color: #DEF;
}

.in-table-check-list td {
    text-align: center;
    border-right: 1px solid #AAA;
    padding: .5em;
}

    .in-table-check-list td:hover {
        background-color: #D8E6F4;
    }

.in-table-check-list label, .in-table-check-list input {
    display: inline-block;
    cursor: pointer;
}

.gv_header td, .gv_header th, .gv_footer td {
    border-bottom: solid 1px #5D8CC9;
}

.gv_row td, .gv_alternating_row td {
    padding-bottom: 3px;
    padding-top: 4px;
    border-color: #D0D7E5;
}

.neup_alterRows, .gv_alternating_row, .neup_odd {
    background: #f4f4f4;
}

.clipboard-copyable, .default-date-cell {
    position: relative;
}

td:has(.clipboard-copyable-link),
td:has(> .in-table-clickable-link) {
    position: relative;
}

.clipboard-copyable-link, .in-table-clickable-link {
    color: #666;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    width: 1.1em;
    height: 1.5em;
    overflow: hidden;
    text-decoration: none;
    background-color: #FFF;
}

.gv_alternating_row .clipboard-copyable-link,
.gv_alternating_row .in-table-clickable-link {
    background-color: #F4F4F4;
}

.clipboard-copyable-link.copied {
    color: #666;
    background-color: #EFE;
    border: 1px solid #060;
}

.clipboard-copyable-link::before {
    font-family: "FontAwesome";
    content: '\F0EA ';
}

.clipboard-copyable-link.copied::before {
    font-family: "FontAwesome";
    content: '\F00C ';
}

.in-table-clickable-link::before {
    font-family: "FontAwesome";
    content: '\F0F6\20';
}

td.status, span.status {
    position: relative;
}

    td.status::before {
        font-size: 1.2em;
        content: "\1F6C8";
        position: absolute;
        bottom: 0;
        right: 0;
    }

span.status {
    padding-right: 1.2em;
}

    span.status::before {
        font-size: 1.2em;
        content: "\1F6C8";
        position: absolute;
        bottom: 0;
        right: 0;
    }

.badge-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

    .badge-list:hover {
        background-color: rgba(80, 80, 80, .2);
        border-radius: .3em;
    }

.badge {
    border: 1px solid #AAA;
    border-radius: .3em;
    text-align: center;
    margin: .15em;
    padding: .1em;
    flex: 1 1 auto;
    font-size: .8em;
}

    .badge:hover {
        border: 1px solid #666;
        margin: 0;
        padding: 0;
        font-size: 1em;
    }

/* Remove unnecessary icons for some statuses */
.badge-list .badge::after {
    content: '';
    display: inherit;
    font-weight: inherit;
    width: inherit;
    background-color: inherit;
    color: inherit;
    text-align: inherit;
    padding: 0;
    border-radius: 0;
    margin-left:0;
}

.in-table-card {
    margin: .3em;
    border: 1px solid #333;
    border-radius: .2em;
    padding: .2em;
}

.proposal-new, .report-new {
    background-color: #D6F0F6;
    color: #012;
}

.proposal-working, .report-working {
    background-color: #F6F6D6;
    color: #220;
}

.proposal-submitted, .report-submitted, .project-submission {
    background-color: #D6F6F6;
    color: #022;
}

.proposal-recommended, .report-federally_approved {
    background-color: #D6D6F6;
    color: #002;
}

.proposal-completed {
    background-color: #BCB;
    color: #002;
}

.proposal-selected, .report-approved, .project-follow-on {
    background-color: #D6F6D6;
    color: #020;
}

.proposal-dismissed {
    background-color: #F6D6D6;
    color: #200;
}

.proposal-declined, .report-rejected {
    background-color: #F6A6A6;
    color: #200;
}

.proposal-deleted, .report-unknown {
    background-color: #EEE;
    color: #222;
}

.project-pending, div.project-pending .rddlInner {
    background-image: none;
    background-color: #FFF666;
    color: #431;
}

.project-onschedule, div.project-onschedule .rddlInner {
    background-image: none;
    background-color: #D6F6D6;
    color: #020;
}

.project-delayed, div.project-delayed .rddlInner {
    background-image: none;
    background-color: #FDA;
    color: #631;
}

.project-wrapup, div.project-wrapup .rddlInner {
    background-image: none;
    background-color: #6DE;
    color: #06A;
}

.rddlItem.rddlItemHovered {
    cursor: pointer;
}

.rddlItem.rddlItemSelected {
    cursor: default;
}

    .rddlItemSelected div.project-pending,
    .rddlItem.rddlItemHovered.project-pending,
    .rddlItem.rddlItemSelected.project-pending {
        background-color: #981;
        color: #FFF666;
    }

    .rddlItemSelected div.project-onschedule,
    .rddlItem.rddlItemHovered.project-onschedule,
    .rddlItem.rddlItemSelected.project-onschedule {
        background-color: #080;
        color: #D6F6D6;
    }

    .rddlItemSelected div.project-delayed,
    .rddlItem.rddlItemHovered.project-delayed,
    .rddlItem.rddlItemSelected.project-delayed {
        background-color: #852;
        color: #FDA;
    }

.rddlPopup .rddlList .rddlItemSelected::after {
    font-family: FontAwesome;
    content: " \f00c";
}

.popup-viewer-container {
    position: relative;
}


.user-active {
    background-color: #E6FFE6;
}

.user-inactive {
    background-color: #F6D6D6;
}

.popup-viewer {
    border: 1px solid #AAA;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
}

    .popup-viewer::before {
        content: '\1F50D';
    }

    .popup-viewer:hover {
        cursor: pointer;
    }

.popup-highlight {
    background-color: #FED;
}

#popupHeader {
    border-bottom: 2px solid #06F;
}

#ctl00_ContentPlaceHolder_Site_radgProposalReviews td {
    /*This is to override that telerik grids automatically set cell content to hidden.*/
    overflow: visible;
}

.dependent-checkboxes {
    list-style: none;
    margin: 0;
    padding: 0 0 0 2em;
}


/*************************** Link Styles **************************/
.link-group {
    display: flex;
}

    .link-group h2 {
        width: 10%;
        border: 0 solid #acaca0;
        border-width: 0 5px 1px 1px;
        border-radius: .5em;
        padding: .5em;
    }

    .link-group ul {
        list-style: none;
    }

        .link-group ul li {
            padding: .5em;
            border: 1px solid #CCC;
            margin: .2em;
            border-radius: .4em;
        }

            .link-group ul li:hover {
                list-style: arrows;
                border: 1px solid #888;
                background-color: #EEE;
            }

            .link-group ul li::marker {
                font-weight: bold;
            }

        .link-group ul a {
            display: block;
            min-width: 20em;
        }

.link-return::before {
    content: "\2190";
    font-weight: bold;
}

.in-cell-link {
    padding: 0 1em;
}

    .in-cell-link:hover {
        color: #000;
        background-color: #FFF;
    }

a.export {
    border: 1px solid #06F;
    text-decoration: none;
    display: inline-block;
    padding: 0 .3em 0 .3em;
    height: 2em;
    margin: .1em;
    border-radius: .3em;
}

    a.export:hover {
        background-color: #DEF;
    }

    a.export::before {
        content: '\1F5CE';
        font-size: 1.5em;
        padding-right: .15em;
    }

.rmItem.fa {
    font: inherit;
}

    .rmItem.fa::before {
        font: normal normal normal 14px/1 FontAwesome;
        position: absolute;
        height: 1em;
        left: 8px;
        top: 6px;
        z-index: 1;
        color: #AAA;
    }

.icon-highlight, .icon-highlight-big {
    color: #06F;
    font-weight: bold;
    font-size: .8em;
    text-shadow: #FFF 0 0 2px;
}

.icon-highlight-big {
    font-size: 1.1em;
}


@counter-style arrows {
    system: cyclic;
    symbols: "\2192";
    suffix: " ";
}

/************************************************Instructions*************************************/
.neup_instructions, .neup_instr {
    border: solid 1px #5F5F5F;
    background: #F2F1EC;
    padding: 10px;
    margin: 5px;
}

    .neup_instructions .neup_odd td, .neup_instr .neup_odd td {
        border-bottom: solid 1px #D1CEBD;
        background: #e8e6e0;
        padding: 5px;
    }

/************************************************NEUP Footer**************************************/
.neup_footer ul {
    list-style: none;
    padding: 0;
}

/************************************************Rad Upload***************************************/
div.RadUpload .ruFakeInput {
    visibility: hidden;
    width: 0;
    padding: 0;
}
/* Causes issues on FireFox for Mac */
div.RadUpload .ruFileInput {
    _width: 1px;
}

.divProposalAttachmentsWrapper .ruBrowse {
    background-position: 0 -23px;
    width: 85px;
}

.attachment-type-identifier {
    position: relative;
    text-align: right;
}

    .attachment-type-identifier span {
        position: absolute;
        right: 0;
        top: 0;
        font-weight: bold;
        color: #BCD;
    }

.required-count {
    display: inline-block;
    color: #678;
}

    .required-count span {
    }
/************************************************Review*******************************************/
.neup_review_comments {
    border: 1px solid;
    word-wrap: normal;
    white-space: normal;
}
/************************************************Hacks********************************************/
.table_bottom {
    display: none;
}

.notSoHigh {
    z-index: 1000;
}
/************************************************Reviewer Search**********************************/
.rs_clear {
    clear: both;
}

.rs_container {
    float: left;
}

/************************************************Multiple column RadCombo*************************/
/** Columns */
.rcbHeader ul,
.rcbFooter ul,
.rcbItem ul,
.rcbHovered ul,
.rcbDisabled ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-block;
    list-style-type: none;
}

.RadComboBoxDropDown_Office2007 .rcbHovered {
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-block;
    list-style-type: none;
}

.col0 {
    margin: 0;
    padding: 0 5px 0 0;
    width: 20px;
    line-height: 14px;
    float: left;
    /*white-space: nowrap;*/
}

.col1 {
    margin: 0;
    padding: 0 5px 0 0;
    width: 130px;
    line-height: 14px;
    float: left;
    /*white-space: nowrap;*/
}

.col2 {
    margin: 0;
    padding: 0 5px 0 0;
    width: 100px;
    line-height: 14px;
    float: left;
}

.col3 {
    margin: 0;
    padding: 0 5px 0 0;
    width: 230px;
    line-height: 14px;
    float: left;
}

.colNoWidthNoWrap {
    margin: 0;
    padding: 0 5px 0 0;
    line-height: 14px;
    float: left;
    white-space: nowrap
}

/** Multiple rows and columns */
/*.multipleRowsColumns .rcbItem,
.multipleRowsColumns .rcbHovered {
	float: left;
	margin: 0 1px;
	min-height: 13px;
	overflow: hidden;
	padding: 2px 19px 2px 6px;
	width: 125px;
}*/

/************************************************Rad TreeTreeView*********************************/
/* Override default style to wrap node text*/
.RadTreeView {
    white-space: normal !important;
}

/************************************************RadNotification**********************************/
.neup_notification {
    background-color: #ffcb60 !important;
}

/************************************************Rad Spell****************************************/
.rscLinkImg {
    background-image: url('../images/SpellCheck.gif');
    background-repeat: no-repeat;
    text-indent: -9999px;
    width: 23px;
    height: 22px;
    display: block;
    border: 1px solid #404040;
    background-color: #ebebeb;
    outline: none;
}

/************************************************Rad Navigation****************************************/
.rnvRootGroupWrapper {
    background-image: none !important;
    background-color: transparent !important;
    border-bottom-style: none !important;
    border-left-style: none !important;
    border-top-style: none !important;
    border-right-style: none !important;
    font-weight: bold;
    color: rgba(39, 37, 103, 1) !important;
}

.rnvRootGroup > .rnvItem {
    margin-top: 0px !important;
}

.rnvPopup {
    background-color: rgba(241, 240, 244, 1) !important
}

/************************************************ManageReviews****************************************/
.review-outer {
    height: 90px;
    padding: 0px;
    /*line-height:1;*/
}

.review-inner {
    width: 250px;
    float: left;
    border-style: ridge;
    border-radius: 8px;
}

.review-card {
    background-color: #FFF;
    position: relative;
}

    .review-card .status {
        position: relative;
    }

.review-inner.review-card {
    background-color: #FFF;
}

.review-card > ul {
    list-style: none;
    padding: 0;
    margin: .5em;
    margin-bottom: 1.2em;
}

.review-card:hover {
    background-color: #F6FFFF;
}

.review-card .review-comments {
    border: 1px solid #AAA;
    background-color: #EEE;
    height: 4em;
    overflow: hidden;
    overflow-y: auto;
}

.review-card .button-group {
    display: flex;
    gap: .5em;
    margin-top: .2em;
}

    .review-card .button-group button {
        flex-grow: 1;
        border-radius: .4em;
    }


.review-card.editing, .editing {
    background-color: #FF6;
    color: #000;
}

    .review-card.editing button {
        opacity: 0;
    }

    .editing .editing-notification {
        position: absolute;
        text-align: center;
        left: 10px;
        top: 75%;
        border: 2px solid #FD6;
        background-color: #FFE;
        transform: rotate(-35deg);
        transform-origin: top left;
        box-shadow: #333 0 0 10px;
    }

.review-card .dates, .card .dates {
    pointer-events: none;
    position: absolute;
    bottom: .1em;
    right: .3em;
    color: #888;
}

.review-card .dates-edit {
    font-size: .7em;
}

.review-card-pending {
    min-height: 100px;
}

    .review-card-pending .editing-notification {
        transform: revert;
        position: static;
    }

.review-card .review-name a {
    font-size: 1.25em;
}

.review-card .review-type {
    height: 3em;
}

.review-accepted {
    background: #EFE;
}

    .review-accepted::before {
        content: '\2705 ';
        color: #060;
        font-weight: bold;
    }

.review-accepted-waiting {
    color: #CCC;
}

.review-email {
    text-align: center;
    margin-bottom: .5em;
}

    .review-email a::before {
        content: '\1F4E7';
    }

.review-reviewer-stats {
    position: absolute;
    top: .3em;
    right: .3em;
    color: #AAA;
}

    .review-reviewer-stats span {
        cursor: help;
    }

.reviewer-leads {
    display: flex;
    list-style: none;
    padding: .25em;
}

    .reviewer-leads li.reviewer-lead {
    }

/****************** Lead Review Cards ****************************/
#lead-reviews-panel {
    /*border: 1px solid #0A0;*/
}

    #lead-reviews-panel .card {
        /*padding-right: 3em;*/
    }

.lead-comments-field {
    width: 100%;
}
/****************** Do not disturb ****************************/
.dnd-yes, .dnd-no {
    color: #C00;
    text-align: right;
    font-weight: bold;
}

.dnd-no {
    color: #DED;
}

/* Review Card statuses */
.review-inner.review-pending {
    border-color: #FFD700;
}

.review-inner.review-viewed {
    border-color: #00DDEE;
}

.review-inner.review-new {
    border-color: #6495ED;
}

.review-inner.review-working {
    border-color: #9932CC;
}

.review-inner.review-submitted {
    border-color: #32CD32;
}

.review-inner.review-deleted, .review-inner.review-declined {
    border-color: #FF0000;
}

.review-inner.review-invalid {
    border-color: #F03;
    border-style: solid;
    background-color: #FDE;
}

.review-inner.review-blind {
    border-color: #AAAADD;
    border-style: dashed;
}

.review-inner.review-disregarded {
    border-color: #AAAAAA;
}

.review-inner.review-conflicted {
    border-color: #FF9900;
}

.conflicted::after, .review-conflicted::after, .declined::after, .review-declined::after {
    content: '!';
    display: inline-block;
    font-weight: bold;
    width: 1em;
    background-color: #A60;
    color: #FF0;
    text-align: center;
    padding: 0 .2em;
    border-radius: .3em;
    margin-left: .2em;
}

.declined::after, .review-declined::after {
    content: 'X';
    padding: 0 .1em;
    background-color: #600;
    color: #FEE;
}

.possible-conflicts {
    list-style: none;
    color: #666;
    padding: 0;
}

    .possible-conflicts .name {
        font-weight: bold;
        color: #66A;
    }

    .possible-conflicts .proposal-identifier {
        color: #A66;
    }

    .possible-conflicts .email {
        color: #6A6;
    }

    .possible-conflicts li.conflicted {
        background-color: #FED;
    }




.review-pending {
    background-color: #FFF666;
}

.review-viewed {
    background-color: #DEE;
}

.review-new {
    background-color: #B7E8FF;
}

.review-working {
    background-color: #DAF;
}

.review-submitted {
    background-color: #AFA;
}

.review-deleted {
    background-color: #FCC;
}

.review-declined {
    background-color: #EBC;
}

.review-blind {
    background-color: #AAAADD;
}

.review-disregarded {
    background-color: #CCC;
}

.review-conflicted {
    background-color: #FB5;
}

.review-invalid {
    background-color: #F03;
    text-align: center;
}

.rcbScroll .review-conflicted::after {
    display: none;
}

.login-panel {
    background-color: #DDD;
    border: 1px solid #888;
    border-radius: 0 0 0 .5em;
    position: absolute;
    top: 0;
    right: 0;
}

    .login-panel, .login-panel ul {
        padding: .25em;
    }

        .login-panel ul li {
            display: inline-block;
            padding: 0 .5em;
        }

        .login-panel a {
            padding-bottom: .25em;
        }

            .login-panel a:hover {
                text-decoration: underline;
            }

        .login-panel .login-user {
            color: #333;
        }

        .login-panel .login-name {
            font-weight: bold;
        }

        .login-panel input {
            position: relative;
            top: .5em;
        }

.impersonation-pane {
    top: 2.5em !important;
}

.log-success {
    background-color: #EFE;
}

.log-error {
    background-color: #FEE;
}

.log-change {
    background-color: #FEA;
}

.log-saved {
    background-color: #EFF;
}

.log-system {
    background-color: #BEF;
}

.log-adlib {
    background-color: #EDF;
}

.log-default {
    background-color: #DDD;
}



.horizontal-list {
    list-style: none;
    /*list-style-type: none;*/
    padding: 0 5px 5px 0;
    /*margin: 0;*/
}

#review-legend {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 250px;
    margin-left: -100px;
    background-color: #FCFCFC;
    cursor: help;
}

    #review-legend * {
        padding: 0;
        margin: 0;
    }

    #review-legend .legend-section {
        border: 1px solid #AAA;
        clear: both;
        padding: .3em;
        border-radius: .3em;
        display: none;
    }

    #review-legend:hover .legend-section {
        display: block;
    }

    #review-legend ul {
        list-style: none;
    }

        #review-legend ul li {
            background-color: #FFF;
            height: 1em;
            padding: .2em;
            width: 93%;
            float: none;
            text-align: center;
            display: inline-block;
            margin: .1em;
        }


.tool-tipped {
    border-radius: .3em;
    position: relative;
    display: inline-block;
    width: 2em;
    min-height: 1em;
    text-align: center;
    vertical-align: top;
}

    .tool-tipped > span {
        border: 1px solid #888;
        border-radius: 0 .5em .5em .5em;
        background-color: inherit;
        padding: 1em;
        display: none;
        width: 200px;
        position: absolute;
        top: 1em;
        left: .8em;
        z-index: 9999;
    }

    /*Tool tipped elements must have an inner span with the message.*/
    .tool-tipped:hover > span {
        display: block;
    }

    .tool-tipped ul {
        padding: 0;
        list-style: circle;
        list-style-position: inside;
        margin: 0;
        text-align: left;
    }

        .tool-tipped ul ul {
            list-style: square;
            padding-left: 2em;
        }

            .tool-tipped ul ul ul {
                list-style: disc;
            }

    .tool-tipped .card {
        margin: 0;
    }

td:has(> .tool-tipped), .RadGrid .rgClipCells .rgRow > td:has(> .tool-tipped), .RadGrid .rgClipCells .rgAltRow > td:has(> .tool-tipped) {
    position: relative;
    overflow: visible;
}

.tool-tipped-table td .tool-tipped {
    position: absolute;
    bottom: 0;
    right: 0;
}

.tool-tipped-table .tool-tipped:nth-child(4n+1) {
    right: 0;
}

.tool-tipped-table .tool-tipped:nth-child(4n+2) {
    right: 2.5em;
}

.tool-tipped-table .tool-tipped:nth-child(4n+3) {
    right: 5em;
}

.tool-tipped-table .tool-tipped:nth-child(4n+0) {
    right: 7.5em;
}

.tool-tipped-table .tool-tipped > span {
    position: absolute;
    top: auto;
    left: auto;
    bottom: .8em;
    right: 1em;
    border-radius: .5em .5em 0 .5em;
}

.information::before {
    font-family: 'FontAwesome';
    content: "\f129";
    /*content: '\1F6C8';*/
    font-size: 1.5em;
    color: #060;
    margin: 0 .25em;
}

.information:hover {
    background-color: #FBFFFB;
}

.timed::before {
    font-family: 'FontAwesome';
    content: '\f016';
}

.next-proposal, .previous-proposal {
    width: 1.5em;
}

    .next-proposal::before, .previous-proposal::before {
        font-family: 'FontAwesome';
        content: '\f152';
        font-size: 1em;
        color: #666;
        margin: 0;
    }

    .previous-proposal::before {
        content: '\f191';
    }

    .previous-proposal:hover {
        background-color: #FED;
    }


.stopped::before {
    font-family: 'FontAwesome';
    content: '\1F6AB';
}

.comment::before {
    font-family: 'FontAwesome';
    content: '\F27A';
}

.stopped, .comment {
    background-color: inherit;
    cursor: help;
}

#review-legend .information, #review-legend .previous-proposal {
    display: block;
    position: static;
    text-align: left;
    height: 1.5em;
}

.restore-list {
    position: relative;
    height: 20px;
    overflow-y: scroll;
    list-style: none;
    border: 1px solid #CCC;
    border-radius: 1em;
    background-color: #FAFAFA;
    transition: height ease-in-out 1s;
}

    .restore-list .card {
        padding-top: 1.3em;
    }

        .restore-list .card::before {
            content: 'Restore: ';
        }

        .restore-list .card .identity {
            font-size: .8em;
            overflow: hidden;
            height: 1.2em;
        }

        .restore-list .card .download {
            position: absolute;
            top: 0;
            right: 0;
            overflow: hidden;
            width: 1em;
            height: 1.2em;
            transition: width 500ms linear 250ms;
            color: #66A;
            border: 1px solid transparent;
            margin: .1em .2em;
            text-decoration: none;
            border-radius: .2em;
        }

            .restore-list .card .download:hover {
                width: 8em;
                color: revert;
                background: #DDD;
                border-color: #AAA;
                text-align: center;
            }

            .restore-list .card .download::before {
                font-family: "FontAwesome";
                content: "\f019";
            }

    .restore-list::before {
        font-family: "FontAwesome";
        content: "\F0C7  Stored previous mappings (hover to show)";
        /*content: "\1F5AA Load previous mappings";*/
        width: 100%;
    }

    .restore-list:hover {
        height: 10em;
    }

    .restore-list .card:hover {
        background-color: #EFF5FE;
        box-shadow: #333 2px 2px 3px;
    }

.acceptable-values {
}

    .acceptable-values .value-groups {
        display: flex;
    }

    .acceptable-values .values-group {
        display: inline-block;
        position: relative;
        flex: 1 100%;
        margin: .25em;
    }

    .acceptable-values .values-header {
        font-weight: bold;
    }

    .acceptable-values .values-group > ul {
        border: 1px solid #AAA;
        border-radius: .5em;
        box-shadow: 2px 2px 5px;
        display: none;
        position: absolute;
        background: #FFF;
        max-height: 50vh;
        overflow-y: auto;
        list-style: none;
        top: 0;
        right: 0;
        z-index: 999;
        padding: .5em;
    }

    .acceptable-values .values-group:hover > ul {
        display: block;
    }

    .acceptable-values .values-group > ul li {
        border: 2px solid #FFF;
        border-radius: .5em;
        padding: .25em;
    }

        .acceptable-values .values-group > ul li:hover {
            border-width: 1px 3px 3px 1px;
            border-color: #CCC;
        }

.values-group .conjuction {
    color: #AAA;
}

.card-list-header {
    border: 1px solid #666C92;
    border-width: 1px 0 3px 0;
}

.card-list {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}

    ul.card-list, .card-list > ul, ul.small-cards, .small-cards > ul {
        list-style: none;
        padding: 0;
    }

.small-cards {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

    .small-cards .card {
        min-width: 5em;
        max-width: 15em;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .small-cards .status::after {
        content: '';
    }

.card {
    border: 1px solid #AAA;
    background: #FFF;
    border-radius: .5em;
    padding: 1em;
    margin: 1em;
    position: relative;
}

.removing {
    background-color: #FEE;
    border-color: #A00;
}

.card .remove-item {
    background-color: #FEE;
    border: 1px solid #A99;
    border-radius: 50%;
    position: absolute;
    top: -.75em;
    right: -.75em;
    display: inline-block;
    text-align: center;
    width: 1.25em;
    height: 1.25em;
    text-decoration: none;
    vertical-align: middle;
    color: #000;
}

    .card .remove-item:hover {
        background-color: #A00;
        border: 1px solid #600;
        color: #FFF;
    }

.card label {
    color: #BBB;
    font-size: .8em;
    vertical-align: bottom;
    display: inline-block;
    width: 8em;
}

.card select.available-fields {
    width: 100%;
}

.card.reviewer {
    text-align: center;
}

.card .card-details {
    list-style: none;
    padding: 0;
}

.card .score {
    margin: auto;
}

    .card .score label {
        display: block;
        width: auto;
    }

.card .status, .card .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    border-radius: .5em .5em 0 0;
}

    .card .status label {
        display: none;
    }

.card .identity {
    position: absolute;
    bottom: 0;
    left: .5em;
    color: #AAA;
}

    .card .identity label {
        display: none;
    }

.card .tag {
    font-size: .8em;
    padding: .3em;
    position: absolute;
    top: 0;
    left: 0;
    color: #888;
    border-radius: .4em;
    background-color: rgba(255,255,255,.75);
    border: 1px solid #AAA;
}

.card .attachments {
    position: relative;
}

    .card .attachments ul {
        list-style: decimal;
        padding: .25em;
        margin-right: 4em;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .card .attachments li {
        display: inline-block;
        margin: .2em;
        width: 1.5em;
        height: 1em;
        position: relative;
        border: 1px solid transparent;
        border-radius: .3em;
        counter-increment: li;
    }

        .card .attachments li a {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #FFF;
            border: 1px solid #AAA;
            z-index: 6991;
            margin-top: 1em;
            padding: .5em;
        }

        .card .attachments li::before {
            font-family: 'FontAwesome';
            content: '\f0f6';
            font-size: 1.5em;
            /*content: counter(li) ;*/
        }

        .card .attachments li:hover {
            color: #FFF;
            background-color: #AAA;
            border: 1px solid #AAA;
        }

            .card .attachments li:hover a {
                display: block;
            }

.card .comments span {
    display: block;
    width: 16em;
}

.card .main-link {
    display: block;
    padding-top: .5em;
}

.card .view-link, .card .edit-link {
    position: absolute;
    bottom: 0;
    right: .5em;
}

    .card .view-link label {
        width: auto;
    }

    .card .view-link ul {
        list-style: none;
        padding: 0;
    }

        .card .view-link ul li {
            height: 2em;
            aspect-ratio: 1;
            overflow: hidden;
            display: inline-block;
        }

.card .RadSearchBox {
    width: 100%;
}

.card .instructions {
    display: inline-block;
}

.card .count {
    text-align: center;
    display: block;
    font-size: 2em;
    font-weight: bold;
}

.card .review-counts {
    display: block;
    text-align: right;
}

    .card .review-counts::before {
        content: "(";
    }

    .card .review-counts::after {
        content: ")";
    }


#dashboard-items {
}

    #dashboard-items fieldset {
    }

    #dashboard-items > .card {
        display: inline-block;
        max-width: 20em;
    }

        #dashboard-items > .card:has(.small-cards .card) {
            max-width: initial;
        }





#sessionClock::before {
}

#sessionClock.warning {
}

#timeLeftInSession {
    font-weight: bold;
}

.sister-site-list {
    list-style: none;
}

    .sister-site-list .sister-site {
        padding: 0;
        background-color: #CCC;
    }

        .sister-site-list .sister-site:hover {
            box-shadow: #AAA 0 0 7px;
            border-color: #666;
        }

    .sister-site-list li a {
        font-size: 1.2em;
        text-decoration: none;
        display: inline-block;
        padding: 1em;
        background: linear-gradient(to bottom, rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
        color: #000;
        height: 100%;
    }

        .sister-site-list li a:hover {
            background: linear-gradient(to bottom, rgba(125,125,125,.8) 0%,rgba(125,125,125,.8) 30%,rgba(125,125,125,0) 50%,rgba(125,125,125,0) 100%);
            color: #FFF;
        }


.edit-link::after {
    font-family: 'FontAwesome';
    content: '\f040';
}

.user-form {
    list-style: none;
    padding: .5em;
}

    .user-form li {
        margin: .5em 0 0 .5em;
    }

    .user-form label {
        display: block;
        font-weight: bold;
    }

.date-stamp {
    color: #AAA;
}

    .date-stamp .date {
        margin-left: 2em;
    }

    .date-stamp .user::before {
        content: ' by ';
    }

.user-form {
    text-align: center;
}

    .user-form table.toggle-control {
        margin: auto;
    }

    .user-form .actions input {
        margin: .5em;
    }

        .user-form .actions input:hover {
            margin: .25em;
            padding: .75em;
        }

    .user-form input[type=submit], .user-form input[type=button] {
        background-color: #CDF;
        border: 2px solid #333;
        color: #333;
        font-weight: bold;
        padding: .5em;
        border-radius: .5em;
    }

        .user-form input[type=submit]:hover, .user-form input[type=button]:hover {
            background-color: #FD6;
            color: #000;
            border-color: #960;
            cursor: pointer;
        }

        .user-form input[type=submit]:disabled, .user-form input[type=button]:disabled,
        .user-form input[type=submit]:disabled:hover, .user-form input[type=button]:disabled:hover {
            cursor: default;
            background-color: #DDD;
            color: #000;
            border-color: #999;
            font-weight: normal;
        }

.action-list {
    list-style: none;
    display: inline-block;
}

    .action-list li {
        position: relative;
    }

        .action-list li:hover::before {
            font-family: 'FontAwesome';
            content: '\f054';
            position: absolute;
            left: -1em;
            top: .25em;
        }



/*G Charts*/
/* https://codepen.io/t_afif/pen/XWaPXZO */
/* https://www.freecodecamp.org/news/css-only-pie-chart/ */

@property --perc {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --chartsize {
    syntax: '<number>';
    inherits: true;
    initial-value: 150; /*default size*/
}

.scoreChart {
    --chart-bar-size: calc(var(--chartsize) * .2);
    --chart-font-size: calc(var(--chartsize) * .25);
    aspect-ratio: 1;
    width: calc(var(--chartsize) * .85 * 1px);
    display: inline-grid;
    place-content: center;
    position: relative;
    font-size: calc(var(--chart-font-size) * 1px);
    font-weight: bold;
    padding: calc(var(--chartsize) * .15 * 1px);
    z-index: 6990;
}

    .scoreChart::before, .scoreChart::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }

    .scoreChart::before {
        /*Empty bar*/
        width: 65%;
        height: 65%;
        margin: calc(var(--chart-bar-size) * 1px);
        top: calc(var(--chart-bar-size) * -1px);
        left: calc(var(--chart-bar-size) * -1px);
        border: calc(var(--chart-bar-size) * 1px) solid #666;
    }

    .scoreChart::after {
        background: conic-gradient(var(--chartcolor, #000), calc(var(--perc) * 1%), #0000 0%);
        /*WebKit cannot work in pixels, must be straight numbers.*/
        -webkit-mask: -webkit-radial-gradient(farthest-side, #0000 calc(100% - calc(var(--chart-bar-size) * 2%)), #000 calc(99% - calc(var(--chart-bar-size) * 2%)));
        /*have to convert bar size to pixels to work in FF.*/
        mask: radial-gradient(farthest-side, #0000 calc(100% - calc(var(--chart-bar-size) * 1px)), #000 calc(99% - calc(var(--chart-bar-size)* 1px)));
        inset: 0;
    }

.popout-action {
    border: 1px solid #888;
    padding: .5em;
    border-radius: .5em;
}

/************************************************SendReviewComments****************************************/
.status-good {
    color: green;
}

/************************************************ Header ****************************************/
.header_1 { /* proposals */
    background: url('../images/neup_logo.png') top left no-repeat;
    height: 82px;
}

.header_2 { /* nsuf-reviews */
    background: url('../images/Logo_Blue.png') top left no-repeat;
    height: 82px;
}

.header_3 { /* proposalsfcic */
    background: url('../images/FCIC_Logo.png') top left no-repeat;
    height: 82px;
}

.header_4 { /* proposalsindustry */
    background: url('../images/DOE_Logo-Black.png') top left no-repeat;
    height: 82px;
}

.header_5 { /* proposalsopps */
    background: url('../images/INL_Logo.png') top left no-repeat;
    height: 82px;
}

.header_6 { /* proposalshpc4 */
    background: url('../images/HPC4_Logo-compressedinlinegray.png') top left no-repeat;
    height: 82px;
}

.header_7 { /* proposalsott */
    background: url('../images/OTT_Logo.png') top left no-repeat;
    height: 82px;
}

.header_8 { /* proposalsbfnuf */
    background: url('../images/BFNUF_Logo.png') top left no-repeat;
    height: 82px;
}

.header_9 { /* proposalscnc */
    background: url('../images/DOE_Logo-Black.png') top left no-repeat;
    height: 82px;
}

.header_10 { /* proposalsworkforce */
    background: url('../images/DOE_Logo-Black.png') top left no-repeat;
    height: 82px;
}

/******************************************** Generic Form Styles ***************************************/
input:disabled, .RadGrid_Office2007 .rgEditForm td input:disabled {
    border: #CCC;
    cursor: text;
}

input[type=submit]:disabled, button:disabled {
    border: 1px solid #CCC;
}

input[type=radio]:disabled {
    display: none;
}

input[type=radio]:checked:disabled {
    display: block;
    padding: 0;
}

input[type=radio]:checked + label {
    font-weight: bold;
}

/*input[type=radio]:checked:disabled::before {
        content: '\2713';
        background: #EFE;
        border: 1px solid #060;
        border-radius: 50%;
        color: #060;
        font-weight: bold;
        font-size: 1.25em;
        position: relative;
        padding: 0 .25em;
        top: -.35em;
        left: -.35em;
    }
*/

input[type=radio]::before,
input[type=checkbox]::before {
    content: '';
    background: #FEE;
    border: 1px solid #966;
    border-radius: 50%;
    color: #966;
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    font-size: 1em;
    position: relative;
    text-align: center;
    top: -.2em;
    left: -.25em;
}

input[type=radio]:checked::before {
    content: '\2713';
    background: #EFE;
    border: 1px solid #060;
    color: #060;
    font-weight: bold;
}

input[type=checkbox]::before {
    content: '';
    border-radius: .25em;
}

input[type=checkbox]:checked::before {
    content: '\2713';
    background: #EFE;
    border: 1px solid #060;
    color: #060;
    font-weight: bold;
}

input[type=radio]:disabled::before,
input[type=checkbox]:disabled::before {
    background: #EEE;
    border: 1px solid #333;
    color: #333;
}

.omit, .mapped-error {
    background-color: #FEE;
    color: #A00;
}

.linking, .mapped-success {
    background-color: #EFE;
    color: #060;
}

    .linking::after, .non-linking::after {
        font-family: FontAwesome;
        content: '\f0c1';
        margin-left: .5em;
    }

.non-linking::after {
    content: '\f127';
}

.mapped-warning {
    background-color: #FEA;
    color: #980;
}

.mapped-auto, .non-linking {
    background-color: #FEC;
    color: #A50;
}

select option:disabled {
    background-color: #DDD;
    color: #AAA;
}

.group-0 {
    color: #05A;
}

.group-1, .item-replacing {
    color: #C60;
}

.group-2 {
    color: #880;
}

.group-3, .item-replaced-with {
    color: #3A3;
}

.group-4 {
    color: #A5F;
}

.group-5 {
    color: #A60;
}

.unique-item {
    background-color: rgba(60, 60, 60, .1);
    border-bottom: 1px solid #444;
}

.item-replacing, .item-replaced-with {
    font-weight: bold;
}



/******************************************** In table Forms ***************************************/

.rgEditForm {
    border: 2px solid #000;
}

    .rgEditForm ul.form {
        list-style: none;
        padding: 1em;
    }

    .rgEditForm .form li {
        padding-bottom: .5em;
    }

        .rgEditForm .form li label {
            display: inline-block;
            width: 8em;
            font-weight: bold;
        }

    /* Form and action icons */

    .rgEditForm button.t-button span.rgUpdateIcon::before {
        font-family: "FontAwesome";
        content: "\f0c7";
    }

    .rgEditForm button.t-button:hover span.rgUpdateIcon::before {
        color: #080;
    }

button.rgActionButton span.rgDelIcon::before {
    font-family: "FontAwesome";
    content: "\20\f014";
}

button.rgActionButton:hover span.rgDelIcon::before {
    content: "\20\f1f8";
    color: #800;
}

.rgEditForm button span.rgCancelIcon::before {
    font-family: "FontAwesome";
    content: "\20\f05e";
}

.rgEditForm button:hover span.rgCancelIcon::before {
    color: #800;
}

.sticky-header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

input:focus {
    background-color: #FAFAFF;
}

.focused {
    border: 1px solid #333;
    margin: 10px;
    box-shadow: #333 5px 5px 5px;
    padding: 1em;
    border-radius: 1em;
}

input.editable-filename {
    width: 80%;
}

.aspNetDisabled,
.RadGrid_Office2007 .rgInput .aspNetDisabled,
.RadGrid_Office2007 .rgEditForm td .aspNetDisabled {
    color: #CCC;
}

/* Counter of text fields*/
.text-counter {
    font-size: .8em;
    padding: .5em;
    background-color: #DDD;
    border-radius: .5em .5em .5em 0;
    border: 1px solid #888;
    position: relative;
    z-index: 9999;
}

/*Messages for the site.*/
#siteMessages {
    /*border: 1px solid #000;*/
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

    #siteMessages > div, .save-messages > li {
        border-width: 1px;
        border-style: solid;
        position: relative;
        height: 1.5em;
        padding: .25em 1em;
        margin: .3em;
        border-radius: 2em .5em .5em 2em;
    }

ul.save-messages {
    list-style: none;
    padding: 0;
}

.instructions {
    background-color: #F0F6FF;
    padding: .5em;
    border: 1px solid #E0E6EF;
    position: relative;
}

    .instructions::before {
        font-family: 'FontAwesome';
        content: '\f05a';
        color: #C0C6CF;
        position: absolute;
        bottom: 0;
        right: .15em;
        font-size: 1.5em;
    }

    .instructions dl {
    }

        .instructions dl dt, .help-instructions dl dt {
            font-weight: bold;
            text-decoration: underline;
        }


.collapsable {
    position: relative;
}

.collapsed {
    height: 2em;
    overflow: hidden;
}

    .collapsed::before {
        top: 0;
        content: 'more...';
        color: #888;
        cursor: pointer;
    }

.instructions.collapsed::before {
    content: 'open for instructions';
    background-color: #E0E6EF;
    color: #888;
}

.other-sites.collapsed {
    height: 4em;
}

    .other-sites.collapsed::before {
        content: '';
    }

.other-sites h2 {
    text-align: center;
}

.expando-button {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 3em;
    height: 1em;
    text-align: center;
    margin: auto;
    left: 50%;
    background-color: #D0D6DF;
    border-radius: 0 0 .5em .5em;
}

    .expando-button:hover {
        background-color: #F0F6FF;
    }

    .expando-button::before {
        font-family: FontAwesome;
        content: '  \f106  ';
    }

.collapsed .expando-button::before {
    content: '  \f107  ';
}

.help-instructions .expando-button {
    display: none;
}

/*Help layout*/
#help-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "navigation content";
}

#help-links {
    grid-area: navigation;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
    /*background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(200,200,200,.65) 100%); */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*background-color: var(--doe-primary-color);*/
}

    #help-links ul {
        list-style: none;
        padding: 0;
    }

    #help-links li {
        margin: .5em;
    }

    #help-links a {
        display: block;
        background-color: #FFF;
        border: 1px solid var(--doe-primary-color);
        border-right: 5px solid var(--doe-primary-color);
        /*background-color: #FFF;*/
        color: #333;
        padding: .3em;
        border-radius: .3em 0 0 .3em;
    }

        #help-links a.selected {
            background-color: #DEF;
            border-color: var(--doe-accent1-color);
            /*background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(200,200,200,1) 100%);*/
        }

        #help-links a:hover, #help-links a.hovered {
            background-color: color-mix(in srgb,var(--doe-accent2-color), transparent 85%);
            border-color: var(--doe-accent2-color);
        }

    #help-links li i {
        margin: 0 .5em 0 .5em;
        transition-property: font-size, margin-left;
        transition-timing-function: ease;
        transition-duration: 500ms;
    }

    #help-links li:hover i, #help-links a.hovered i {
        margin-left: 0;
        font-size: 2em;
    }

.help-instructions {
    grid-area: content;
    overflow-y: scroll;
    height: 90vh;
}

    .help-instructions h2, .collapsable-handle {
        cursor: pointer;
        clear: both;
    }

        .help-instructions h2:hover {
            background-color: color-mix(in srgb, var(--doe-accent2-color), transparent 85%);
        }

.help-steps {
    list-style: decimal;
}

.help-instructions > ul {
    list-style: none;
    padding: 0;
}

.help-steps > li {
    clear: right;
}

    .help-steps > li > .image-zoomer {
        border: 5px solid #DDD;
        float: right;
        margin-bottom: 2em;
        border-radius: .8em;
        width: 200px;
        /* height will be set in JS*/
        overflow: hidden;
        position: relative;
    }

.image-zoomer:has(img.big-image) {
    overflow: unset;
}

.image-zoomer img {
    max-width: 300px;
    transition: max-width linear 500ms;
}

    .image-zoomer img.big-image {
        /*max-width: auto; set width in JS for transition Animation to work.*/
        border: 2px solid #333;
        border-radius: 10px;
        position: absolute;
        top: -10px;
        right: -10px;
        z-index: 9000;
        box-shadow: #333 10px 10px 10px;
    }

.image-zoomer .zoom-action {
    cursor: zoom-in;
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .1);
    color: #000;
    font-weight: bold;
    text-align: right;
    top: 0;
    left: 0;
}

.zoom-action::before {
    font-family: "FontAwesome";
    content: "\f00e ";
    font-weight: normal;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #AAA;
    font-size: 2.5em;
}

.toggle-handle {
    cursor: pointer;
}

    .toggle-handle:hover {
        background-color: #EEE;
    }

.toggle-on::after {
    font-family: "FontAwesome";
    content: ' \f205';
}

.toggle-off::after {
    font-family: "FontAwesome";
    content: ' \f204';
}

table.toggle-control {
    border-spacing: 0;
    border-collapse: collapse;
    margin-left: 2em;
}

    table.toggle-control input[type=radio], table.toggle-control input[type=radio]:disabled {
        display: none;
    }

        table.toggle-control input[type=radio] + label {
            display: block;
            background-color: #F8F8F8;
            padding: .3em .6em;
            border: 1px solid #CCC;
            cursor: pointer;
            border-radius: .5em;
            text-align: center;
            font-weight: normal;
            color: #333;
            margin: .2em;
        }

            table.toggle-control input[type=radio] + label:hover,
            table.toggle-control input[type=radio]:checked + label:hover {
                background-color: #FD6;
                color: #000;
                border-color: #960;
                font-weight: bold;
                margin: 0;
                padding: .5em .8em;
            }

        table.toggle-control input[type=radio]:checked + label {
            background-color: #CDF;
            border-color: #00A;
            font-weight: bold;
            color: #00A;
        }

        table.toggle-control input[type=radio]:disabled + label {
            color: #AAA;
        }

    table.toggle-control.hide-disabled input[type=radio]:disabled + label {
        display: none;
    }

    table.toggle-control input[type=radio]:checked:disabled + label,
    table.toggle-control input[type=radio]:disabled + label:hover,
    table.toggle-control input[type=radio]:checked:disabled + label:hover {
        background-color: #DDD;
        color: #AAA;
        border-color: #999;
    }


        table.toggle-control input[type=radio]:disabled + label:hover,
        table.toggle-control input[type=radio]:checked:disabled + label:hover {
            margin: .2em;
            padding: .3em .6em;
            font-weight: normal;
            cursor: not-allowed;
        }


.has-notes::after {
    font-family: 'FontAwesome';
    content: '\f27b';
    font-size: 1.5em;
}
/************************************************ Messages ****************************************/

.messages {
    padding: .5em;
    display: block;
}

    .messages > div {
        border-width: 1px;
        border-style: solid;
        border-radius: .3em;
        padding: .3em;
    }

        .messages > span, .messages > div > span {
            border-width: 1px;
            border-style: solid;
            border-radius: .3em;
            padding: .3em;
            display: block;
            margin: .2em;
        }

    .messages .details {
        color: #333;
        font-size: .8em;
        border-color: #888;
        display: inline-block;
        margin-left: 1em;
        background-color: rgba(200, 200, 200, .5);
    }

.neup_main .neup_content .field-error {
    /* because telerik classes are so overinvasive. I need to make this important :( */
    background-color: #FFEEEE;
    border-color: #A00;
    border-width: 4px;
}

.error, .validator, .rcInvalid, .import-error-row, .error:focus {
    background-color: #FFEEEE;
    border-color: #A00;
}

    .error::before {
        font-family: 'FontAwesome';
        content: '\f06a  Error: ';
        /*content: '\1F6D1  Error: ';*/
        color: #A00;
        font-weight: bold;
    }

.tool-tipped.error::before {
    content: '\f06a';
}

input.error {
    color: #A00;
    border-width: 2px;
}

.warning {
    background-color: #FFFAEE;
    border-color: #660;
}

    .warning::before {
        font-family: 'FontAwesome';
        content: '\f071  Warning: ';
        /*content: '\1F6A7  Warning: ';*/
        color: #660;
        font-weight: bold;
    }

.tool-tipped.warning::before {
    content: '\f071';
}

.message {
    background-color: #EEEEFF;
    border-color: #00A;
}

    .message::before {
        font-family: 'FontAwesome';
        content: '\f0f3  Message: '; /*1F4E3*/
        color: #00A;
        font-weight: bold;
    }

.tool-tipped.message::before {
    content: '\f0f3';
}

.success {
    background-color: #EEFFEE;
    border-color: #060;
}


    .success::before {
        font-family: 'FontAwesome';
        content: '\f058  Success: ';
        /*content: '\2705  Success: ';*/
        color: #060;
        font-weight: bold;
    }

.tool-tipped.success::before {
    content: '\f058';
}

.validator {
    color: #C00;
}

    .validator ul {
        list-style: decimal;
        padding: 0 0 1em 2em;
    }

    .validator li {
        padding: .4em;
        font-weight: bold;
    }


    .validator::before {
        font-family: "FontAwesome";
        content: '\f024';
        color: #C00;
        border-radius: .2em;
        background-color: #FFF;
        padding: .2em;
        /*border: 1px solid #A00;*/
        margin-right: .2em;
    }

.range-validator::before {
    content: '\F162';
}

.format-validator::before {
    content: '\f071';
}

label .validator {
    background-color: transparent;
    color: transparent;
}

span.validator {
    background-color: transparent;
    display: inline-block;
    width: 2em;
    height: 2em;
    padding: 0 .5em 0 0;
    overflow: hidden;
    white-space: normal;
    position: relative;
    top: .5em;
}

    span.validator:hover {
        background-color: #FFEEEE;
        color: #C00;
        display: inline;
        top: 0;
    }


label:has(.validator) .neup_label {
    position: relative;
}
    /* flag required fields */
    label:has(.validator) .neup_label::after,
    td:not(.rgCommandCell):has(.validator)::before {
        content: '*';
        color: #D00;
        font-weight: bold;
    }

    label:has(.validator) .neup_label::after {
        position: absolute;
        right: 0;
        bottom: .3em;
    }

    label:has(.validator):hover .neup_label::after,
    td:not(.rgCommandCell):not(.login-form):hover:has(.validator)::after {
        content: 'Required *';
        color: rgba(221,0,0,128);
    }

label:has(.compare-validator) .neup_label::after,
label:has(.range-validator) .neup_label::after,
label:has(.format-validator) .neup_label::after,
label:has(.compare-validator):hover .neup_label::after,
label:has(.range-validator):hover .neup_label::after,
label:has(.format-validator):hover .neup_label::after {
    content: '';
}

.field-validator {
}

    .field-validator span {
        display: inline-block;
    }

        .field-validator span::before {
            font-family: "FontAwesome";
        }

    .field-validator .unknown::before {
        content: "\f059";
        color: #880;
    }

    .field-validator .good::before {
        content: "\f058";
        color: #080;
    }

    .field-validator .waiting::before {
        content: "\f110";
        color: #888;
    }

    .field-validator .waiting {
        animation: spinner 2s linear infinite;
    }

    .field-validator .bad::before {
        content: "\f057 ";
        color: #800;
    }


.password-complexity-checks {
}

.complexity-false {
    background-color: #FEE;
}

.complexity-true {
    background-color: #EFE;
}

    .complexity-true::after {
        content: ' \2713';
        color: #060;
        font-weight: bold;
    }

.yes, .good {
    background-color: #EEFFEE;
    color: #060;
}

.no, .bad {
    background-color: #FFEEEE;
    color: #600;
}

.yes {
    font-weight: bold;
}

.valid::after {
    font-family: 'FontAwesome';
    content: ' \f058';
    color: #060;
}

.invalid::after {
    font-family: 'FontAwesome';
    content: ' \f057';
    color: #600;
}

.totp-enabled, .otp-enabled {
    font-family: "FontAwesome";
    left: .5em;
    position: relative;
    font-size: 1.3em;
}

    .totp-enabled::before, .otp-enabled::before {
        content: "\f10b";
        font-size: 1.4em;
        position: absolute;
        top: 0;
    }


    .totp-enabled::after, .otp-enabled::after {
        content: "\f132";
        font-size: .6em;
        color: #00F;
        top: .75em;
        left: .15em;
        position: absolute;
    }

    .otp-enabled::before {
        content: "\f003";
        font-size: 1em;
        top: .15em;
        left: -.1em;
    }

    .otp-enabled::after {
        content: "\f1fa";
        font-weight: bold;
        left: .2em;
    }

.sensitive::before {
    font-family: "FontAwesome";
    content: "\f21b\20";
}

.released, .review-ended {
    position: relative;
    background-color: #EFE;
    border-radius: .2em;
    width: 100%;
    padding-left: 1.5em;
    padding-right: .3em;
}
    .released::after, .review-ended::after {
        position: absolute;
        font-family: "FontAwesome";
        content: "\f08e";
        height: 1.1em;
        left: .4em;
        bottom: .2em;
    }

    .review-ended {
        background-color: #EEF;
    }

        .review-ended::after {
            content: "\f253";
        }

.k-state-selected .released, .k-state-selected .review-ended {
    color: #000;
}

    .inline-icons .otp-enabled, .inline-icons .totp-enabled {
    left: 0;
    display: inline-block;
}

.rgMasterTable .totp-enabled {
    top: -.4em;
}

    .rgMasterTable .totp-enabled::after {
        top: 1em;
    }

.save-success::after {
    font-family: 'FontAwesome';
    content: "\f0c7  Saved";
    color: #060;
    animation: fade-out 2s ease 1 forwards;
}

.save-error::after {
    font-family: 'FontAwesome';
    content: "\f0c7  Error";
    color: #600;
}



#ctl00_ContentPlaceHolder_Site_radgProposalReviews td {
    position: relative;
}

.system-email {
    position: relative;
}

.system-email-message::before {
    content: '\1F4E7';
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 2em;
}

.email-merge-fields {
    list-style: none;
}

    .email-merge-fields:before {
        content: '\1F4E9';
    }

    .email-merge-fields > li {
        padding: .2em;
        display: inline-block;
        background-color: #EEE;
        border: 1px solid #333;
        border-radius: .2em;
    }

        .email-merge-fields > li:hover {
            background-color: #DDF;
            border-color: #336;
            color: #00D;
            cursor: alias;
        }

.email-template-field {
    background-color: #DDF;
    color: #00D;
    font-weight: inherit;
}

.email-template-field-unresolved {
    background-color: #FDD;
    color: #D00;
}

.toggle-layout {
    position: absolute;
    top: .25em;
    right: .5em;
    cursor: pointer;
}

.word-list.vertical {
    display: flex;
    flex-direction: column;
}

.word-item {
    display: inline-block;
    padding: .2em;
    /*padding-right: 1em;*/
    position: relative;
    margin: .4em;
    border-bottom: 1px dotted #333;
}

    .word-item:hover {
        cursor: default;
    }

    .word-item .remove {
        width: 1.5em;
        height: 1.5em;
        cursor: pointer;
        /*position: absolute;
        top: -.75em;
        right: -.75em;*/
        padding: 0;
        color: #888;
        font-size: .8em;
        font-weight: bold;
        border: 0;
        background-color: transparent;
        border-radius: 50%;
    }

        .word-item .remove:hover {
            color: #A33;
            background: #FDD;
            border-color: #A33;
        }

    .word-item::after {
    }

.tab-link {
    display: inline-block;
    width: 1.2em;
    text-decoration: none;
    overflow: hidden;
}

    .tab-link::before, .tabbed-link::before {
        font-family: 'FontAwesome';
        content: '\f2d2';
    }

kbd {
    font-family: "Courier New", Courier, monospace;
    border: 1px dashed rgba(33,33,33,.3);
    padding: .15em;
}


/************************************************ ShadowBox and Modal ****************************************/
#shadowbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.75);
    padding-top: 50vh;
    cursor: progress;
    display: none;
}

/*#modal {
    border: 2px solid #0F0;
    height: 400px;
    width: 600px;
    margin: auto;
    margin-top: -250px;*/ /* adjust for both modal and loading height. */
/*cursor: auto;
    background-color: #FFF;
    z-index: 9999;
}*/

/*Popup Messages*/
.popUp {
    display: none;
    border: 1px solid #333;
    position: absolute;
    top: 15px;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    padding: .4em;
    padding-top: 1.3em;
    background-color: #CCC;
    border-radius: .4em;
    box-shadow: 2px 2px 5px 5px #888;
    max-height: 90vh;
    overflow: auto;
}

.popUpContainer {
    background-color: #FFF;
    border-radius: .3em;
    padding: .3em;
    border: 1px solid #888;
}

.waiting-panel {
}

    .waiting-panel span::before, .loading::before {
        content: "";
        background-image: url('../images/ani-dots-16.gif');
        background-repeat: no-repeat;
        background-position-y: .5em;
        display: inline-block;
        width: 16px;
        height: 1em;
        margin-right: .2em;
    }

    .waiting-panel span, .loading {
        color: #000;
        animation: pulsing-text 2s ease-out infinite;
    }

/* Loading Styles adapted from: https://loading.io/css/ 
	and https://codepen.io/uiswarup/pen/ExjZrdQ
*/
.loading-animation {
    display: block;
    position: relative;
    width: 150px;
    height: 110px;
    border: 1px solid #333;
    border-radius: 5px;
    margin: auto;
    margin-top: -50px;
    background-color: #FFF; /* INL background color */
}

.loading-animation-elements {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    position: relative;
    color: transparent;
    text-align: center;
}


    .loading-animation-elements li {
        position: absolute;
        width: 30px; /* height to width ratio should be 1 : 1.15 */
        height: 26px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background: #FFF;
        animation: loading-animation 3s ease-in infinite;
    }

        .loading-animation-elements li:nth-child(1) {
            top: 15px;
            left: 5px;
            animation-delay: -2.0s;
            background-color: #92926B; /* DOE accent color 2 */
        }

        .loading-animation-elements li:nth-child(2) {
            top: 0;
            left: 30px;
            animation-delay: -1.4s;
            background-color: #30337C; /* DOE secondary color */
        }

        .loading-animation-elements li:nth-child(3) {
            top: 30px;
            left: 30px;
            animation-delay: -1.0s;
            background-color: #561F36; /* DOE tertiary color */
        }

        .loading-animation-elements li:nth-child(4) {
            top: 15px;
            left: 55px;
            animation-delay: -0.8s;
            background-color: #666C92; /* DOE accent color 1 */
        }

        .loading-animation-elements li:nth-child(5) {
            top: 45px;
            left: 55px;
            animation-delay: -1.8s;
            background-color: #92926B; /* DOE accent color 2 */
        }

        .loading-animation-elements li:nth-child(6) {
            top: 0;
            left: 80px;
            animation-delay: -1.6s;
            background-color: #92926B; /* DOE accent color 2 */
        }

        .loading-animation-elements li:nth-child(7) {
            top: 30px;
            left: 80px;
            animation-delay: -0.6s;
            background-color: #36213E; /* DOE primary color */
        }

        .loading-animation-elements li:nth-child(8) {
            top: 60px;
            left: 80px;
            animation-delay: -1.2s;
            background-color: #30337C; /* DOE secondary color */
        }

        .loading-animation-elements li:nth-child(9) {
            top: 45px;
            left: 105px;
            animation-delay: -0.4s;
            background-color: #92926B; /* DOE accent color 2 */
        }

.loading-animation #animation-text {
    position: absolute;
    bottom: 0;
    left: 5px;
}

#animation-text {
}

#animation-messages {
    margin: -100px;
    margin-top: 115px;
    font-weight: bold;
    text-align: center;
    height: 30vh;
    overflow-y: auto;
    list-style: none;
    padding: 0;
}

    #animation-messages li {
        margin: .3em;
        background-color: rgba(255, 255, 255, .8);
    }

/************************************************ Closing link ****************************************/

/*Closing link*/
.closer, .ignorer {
    color: #333;
    position: absolute;
    top: .1em;
    right: .3em;
    text-decoration: none;
    display: block;
    width: 1.3em;
    height: 1.3em;
    overflow: hidden;
}

    .closer::before {
        font-family: 'FontAwesome';
        content: '\f00d   ';
        /*content: '\1F5D9 ';*/
        margin-top: .3em;
        vertical-align: top;
    }

    .ignorer::before {
        content: '\1F6AB ';
        margin-top: .3em;
        vertical-align: top;
    }

.omit .ignorer {
    cursor: default;
}

    .omit .ignorer::before {
        content: '\26D2    ';
    }

#shadowbox .closer {
    font-size: 2em;
    top: 1em;
    right: 1em;
}

.hidden {
    animation: .6s linear forwards hideMessage;
    overflow: hidden;
}

.popUp.shown {
    display: block;
}

.working + span.progress::after {
    content: '\21E1';
}

.working + span.progress::after {
    content: '\1F4BE';
    /*animation: save-folder 1s ease;*/
}

.sticky-buttons {
    z-index: 999;
    position: sticky;
    top: 0;
    border: 1px solid #AAA;
    margin: auto;
    padding: .3em;
    border-radius: 0 0 .5em .5em;
    background-color: #FFF;
}

    .sticky-buttons .actions {
        float: right;
    }

#printOptions {
    position: fixed;
    top: .25em;
    left: 89vw;
    width: 9vw;
    text-align: right;
}

#btnPrint {
    overflow: hidden;
    color: #888;
    cursor: pointer;
    border: 0;
    border-radius: .3em;
    background-color: transparent;
}

    #btnPrint::before {
        font-family: FontAwesome;
        content: '\f02f ';
        font-size: 1.5em;
    }

    #btnPrint:hover {
        color: #000;
        background-color: #DDD;
    }

.mode-tab, #sessionClock {
    border-top-width: 0;
    border-radius: 0 0 1em 1em;
    position: fixed;
    top: 0;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
}

.mode-tab {
    color: #FFF;
    font-size: 1.25em;
}

    .mode-tab.view-mode {
        border: 1px solid #300;
        background-color: #A00;
        top: 2em;
        padding-top: .75em;
    }

    .mode-tab .information {
        font-size: .8em;
        color: #000;
        position: absolute;
        right: 0;
        bottom: 0;
    }

        .mode-tab .information:hover {
            background-color: #FEE;
        }

            .mode-tab .information:hover span {
                background-color: #FEE;
            }

        .mode-tab .information::before {
            color: #FFF;
        }

        .mode-tab .information:hover::before {
            color: #300;
        }

#sessionClock {
    border: 1px solid #333;
    background-color: #DDD;
    padding-bottom: .3em;
}

    #sessionClock::before {
        font-family: "FontAwesome";
        content: '\F017';
        font-size: 1.5em;
        position: absolute;
        bottom: 0;
        right: .5em;
    }

    #sessionClock.refresh {
        border: 1px solid #060;
        background-color: #EFE;
        color: #060;
    }

        #sessionClock.refresh::before {
            content: '\F1DA';
        }

    #sessionClock.expiring {
        border: 1px solid #660;
        background-color: #FFD;
        color: #660;
    }

        #sessionClock.expiring::before {
            content: '\F071';
        }

    #sessionClock.expired {
        border: 1px solid #600;
        background-color: #FDD;
        color: #600;
    }

#lnkNotificationToggle {
    position: absolute;
    bottom: .3em;
    left: .3em;
    width: 1.5em;
    height: 1.25em;
    overflow: hidden;
    text-decoration: none;
    color: #333;
}

.notification-icon::before {
    font-family: "FontAwesome";
    content: "\F0A2";
    padding: .5em .25em;
}

.notification-icon.on {
    color: #080;
}

    .notification-icon.on::before, .notification-icon:hover::before {
        content: "\F0F3";
    }

.notification-icon.off {
    color: #800;
}

    .notification-icon.off::before {
        content: "\F1F7";
    }


.mode-tab .form-type {
    color: #FCC;
    font-size: .85em;
    display: block;
}

#sessionClock.expired::before {
    content: '\F28E';
}


/****Date Stuff****/
.user-time-stamp {
    display: grid;
    grid-template-rows: auto auto;
}

    .user-time-stamp .date-time {
        grid-row: 1;
        max-width: 12em;
        display: grid;
        grid-template-rows: auto auto;
    }

    .user-time-stamp .user {
        grid-row: 2;
        grid-column: 1;
        font-size: .8em;
        color: #666;
    }

    .user-time-stamp .date {
        grid-column: 1;
        display: grid;
        grid-template-columns: [day]2em [month]auto [year]3em [end];
        grid-template-rows: [date]1.25em[time].1em[last-row];
        grid-gap: .1em;
    }

    .user-time-stamp .day, .user-time-stamp .month, .user-time-stamp .year {
    }

    .user-time-stamp .day {
        grid-row: date / span 2;
        grid-column: day;
    }

    .user-time-stamp .month {
        grid-row: date / span 2;
        grid-column: month;
    }


    .user-time-stamp .year {
        grid-row: date;
        grid-column: year;
        text-align: center;
    }

    .user-time-stamp .time {
        font-size: .8em;
        grid-row: 2;
        grid-column: 1;
        text-align: center;
    }

    .user-time-stamp .time-zone {
        color: #888;
    }

        .user-time-stamp .time-zone::before {
            content: '(';
        }

        .user-time-stamp .time-zone::after {
            content: ')';
        }


    .user-time-stamp .time-elapsed {
        color: #666;
        display: inline-block;
        font-weight: normal;
        font-size: .8em;
    }

        .user-time-stamp .time-elapsed::before {
            content: '(';
        }

        .user-time-stamp .time-elapsed::after {
            content: ')';
        }

.default-date-cell {
    background-color: #FED;
    text-align: center;
}

    .default-date-cell .tool-tipped::before {
        color: #A84;
        content: '\f059';
    }

    .default-date-cell .tool-tipped:hover {
        background-color: inherit;
    }

.default-date {
    color: #666;
}

.tfa-form {
    border: 1px solid #666;
    padding: 1em;
    border-radius: .5em;
}

    .tfa-form label {
        display: block;
        font-weight: bold;
    }

    .tfa-form input {
        font-size: 1.1rem;
        padding: .5em;
        border-radius: .5em;
        text-align: center;
    }

        .tfa-form input[type=submit] {
            background-color: #06A;
            color: #FFF;
            margin-left: 4.5em;
        }

            .tfa-form input[type=submit]:hover {
                background-color: #08C;
                cursor: pointer;
                border-color: #FFF;
            }

/********************************** Key frames ****************************/
@keyframes hideMessage {
    0% {
        height: 1.5em;
    }

    99.9% {
        height: 0;
        border-width: 1px;
    }

    100% {
        display: none;
        height: 0;
        border-width: 0;
        padding: 0;
    }
}

@keyframes loading-animation {
    0%, 100% {
    }

    33%, 67% {
        width: 30px;
        height: 26px;
        z-index: 1;
        margin-top: 0;
        margin-left: 0;
    }

    50% {
        width: 0; /* 38px; */
        height: 34px;
        margin-top: -5px;
        margin-left: 15px;
        z-index: 10;
    }
}

@keyframes save-fader {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        background-color: #FF0;
    }
}


@keyframes fade-out {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pulsing-text {
    0% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .5;
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}