:root {
    /* colors
     * note: really need to put together a more comprehensive, standardized
     *       swatch (maybe similar to Tailwind e.g. 'red-100') and discourage
     *       product from asking for custom colors on new tickets
     */
    --white: white;
    --black: black;
    --lightGreen: #8BC540;
    --green: #009900;
    --darkGreen: #0D6B0D;
    --red: #d40001;
    --darkRed: #990000;
    --lightOrange: #F19B35;
    --orange: #EF7411;
    --lightYellow: #FFFAB7;
    --yellow: #F7E709;
    --lightPurple: #7D86BE;
    --purple: #3A4173;
    --darkPurple: #2B3651;


    --heading-color: #283593;
    --form-header-color: #7D86BE;
    --form-background-color: white;
    --form-border-color: #c2c2c2;
    --form-active-color: #3aa5de;
    --form-border-hover-color: #3aa5de;
    --form-border-error-color: var(--red);
    --form-border-error-hover-color: var(--darkRed);

    /* fonts */
    --font-family: 'Open Sans', Arial, Helvetica, sans-serif;

    /* form widths */
    --form-width-1: 11px;
    --form-width-1-5: 23px;
    --form-width-2: 36px;
    --form-width-2-5: 48px;
    --form-width-3: 61px;
    --form-width-3-5: 73px;
    --form-width-4: 86px;
    --form-width-4-5: 98px;
    --form-width-5: 111px;
    --form-width-6: 136px;
    --form-width-7: 161px;
    --form-width-8: 186px;
    --form-width-9: 211px;
    --form-width-10: 236px;
    --form-width-11: 261px;
    --form-width-12: 286px;
    --form-width-13: 311px;
    --form-width-14: 336px;
    --form-width-15: 361px;
    --form-width-16: 386px;
    --form-width-17: 411px;
    --form-width-18: 436px;
    --form-width-19: 461px;
    --form-width-20: 486px;
    --form-width-21: 511px;
    --form-width-22: 536px;
    --form-width-23: 561px;
    --form-width-24: 586px;
    --form-width-25: 611px;
    --form-width-26: 636px;
    --form-width-27: 661px;
    --form-width-28: 686px;
    --form-width-29: 711px;
    --form-width-30: 736px;
    --form-width-31: 761px;
    --form-width-32: 786px;
    --form-width-33: 811px;
    --form-width-34: 836px;
    --form-width-35: 861px;
    --form-width-36: 886px;
    --form-width-37: 911px;
    --form-width-39: 961px;
    --form-width-40: 986px;

    /* label widths */
    --label-width-2: 50px;
    --label-width-3: 75px;
    --label-width-4: 100px;
    --label-width-5: 125px;
    --label-width-6: 150px;
    --label-width-7: 175px;
    --label-width-8: 200px;
    --label-width-9: 225px;
    --label-width-10: 250px;
    --label-width-11: 275px;
    --label-width-12: 300px;
    --label-width-13: 325px;
    --label-width-14: 350px;

    /* banner height */
    --banner-height: 108px;
}

html, body, form, div, input, table, tr, td, textarea {
    border  : 0 none;
    margin  : 0;
    padding : 0;
}

input {
    font-family : 'Open Sans', Arial, sans-serif;
    margin      : 0;
    padding     : 0;
    box-sizing: border-box;
}

body {
    color       : black;
    font-family : 'Open Sans', Arial, sans-serif;
    font-size   : 11px;
    height      : 100%;
    line-height : 130%;
    width       : 100%;
}

/* kill the dumb outline chrome insists on applying by default */
*:focus {
    outline: 0 !important;
}

.bold {
    font-weight : bold;
}

.clear_div {
    clear   : both;
    margin  : 0;
    padding : 0;
}

.min_div {
    margin  : 0;
    padding : 0;
}

.hiddenDiv {
    height   : 0;
    left     : -300px;
    position : absolute;
}

.hideMe { display : none; }

.noDisplay {
    display  : none;
    position : absolute;
}

.sm90 { font-size : 0.9em; line-height : 1em; font-weight : normal; }

/*   BUTTONS   */

.right-hdr-btn {
    float    : right;
    margin   : 24px 10px 0 0;
    padding  : 0;
    z-index  : 999;
    position : relative;
}

.right-hdr-btn img {
    width  : 20px;
    height : 20px;
    max-width: unset;
}

span.modalApproveText {
    color: var(--green);
    font-weight: bold;
}

a.modalApproveIcon {
    background : url("/images/form_elements/jplayer-sprites.png") no-repeat scroll -28px -76px transparent;
    display    : block;
    float      : left;
    height     : 28px;
    margin     : 3px 12px 6px 0;
    width      : 28px;
}

span.modalDenyText {
    color: var(--red);
    font-weight: bold;
}

a.modalDenyIcon {
    background : url("/images/form_elements/jplayer-sprites.png") no-repeat scroll -84px -76px transparent;
    display    : block;
    float      : left;
    height     : 28px;
    margin     : 3px 12px 6px 0;
    width      : 28px;
}

.light {
    min-width: 100px;
    margin: 0;
    height: 22px;
    text-align: center;
    font-size: 1em;
    color: #626B82;
    border: 1px solid #626B82;
    background-color: transparent;
    border-radius: 4px;
    padding: 0 10px;
}

/* TURN OFF THAT SILLY LITTLE BORDER ON BUTTONS AND INPUTS IN FIREFOX*/
button::-moz-focus-inner {
    border : 0 !important;
}

input::-moz-focus-inner {
    border : 0 !important;
}

a::-moz-focus-inner {
    border : 0 !important;
}

a {
    outline : 0;
}

a.underline-reactive {
    color: #26aae1;
    text-decoration: underline;
}

a.underline-reactive:hover {
    text-decoration: none;
}

.light:hover {
    cursor: pointer;
    text-align: center;
    background-color: #E5E7F3;
}

.dark {
    border-color : var(--white);
    color        : var(--white);
}

.dark:hover {
    color            : var(--white);
    border-color     : var(--white);
    background-color : rgba(255, 255, 255, 0.2);
}

.greenlight:hover {
    cursor           : pointer;
    text-align       : center;
    color            : #828B94;
    border-color     : #5AAD5F;
    background-color : #EEF6E1;
}

.warning:hover {
    cursor           : pointer;
    color            : #828B94;
    border-color     : #F0474E;
    background-color : #FEF0F0;
}

.esup > .header {
    font-size: 11px;
}

.esup > .header > .header-banner {
    display: flex;
    align-items: center;
    height: 58px;
    background-color: var(--heading-color);
}

.esup[data-env=dev] > .header > .header-banner,
.esup[data-env=devlocal] > .header > .header-banner {
    background-color: black;
}
.esup[data-env=qa] > .header > .header-banner { background-color: #444444 }

.esup > .header > .header-banner > .header-logo {
    mask-image: url(/images/esup/esup_logo.svg);
    mask-repeat: no-repeat;
    mask-position-x: left;
    mask-position-y: center;
    -webkit-mask-image: url(/images/esup/esup_logo.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position-x: left;
    -webkit-mask-position-y: center;
    background-color: white;
    min-height: 40px;
    width: 300px;
    margin-left: 5px;
    display: flex;
    flex-grow: 1;
}
/* client-specific */
body.esup[data-tenant=clarknv] > .header > .header-banner > .header-logo {
    min-height: 45px;
    width: 300px;
    mask-image: url(/content/images/7106/family_tracs_logo.png);
    mask-size: contain;
    -webkit-mask-image: url(/content/images/7106/family_tracs_logo.png);
    -webkit-mask-size: contain;
}
/* env is desktop-only */
.esup > .header > .header-banner > .header-env {
    margin-left: 20px;
    color: white;
    font-size: 22px;
    display: none;
}
/* client-specific */
body.esup[data-tenant=clarknv] > .header > .header-banner > .header-env {
    margin-left: 0;
}

.esup > .header > .header-banner > .header-tenant {
    color: white;
    font-size: 22px;
    line-height: 22px;
    margin-right: 20px;
    display: flex;
    text-align: right;
    justify-content: flex-end;
}

.hdr_admin_shadow {
    top        : 88px;
    height     : 3px;
    left       : 0;
    position   : absolute;
    right      : 0;
    background : url(../images/bluefin/admin_menu_shadow.png) 0 -7px repeat-x;
}
.esup > .header > .header-navigation {
    display: flex;
    align-items: center;
    height: 30px;
    background-color: var(--form-header-color);
}
.esup > .header > .header-navigation > div {
    height: 30px;
}
.esup > .header > .header-navigation > div:first-child {
    flex-grow: 1;
    margin-left: 9px;
}
.esup > .header > .header-navigation > div:last-child {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-right: 9px;
}

.esup > .header > .header-navigation .gear {
    height: 18px;
    margin-left: 10px;
    color: #B2B6D8;
}

.esup > .header > .header-navigation .gear:hover {
    color: #DFE0EF;
}

@media (max-width: 640px) {
    .esup > .header > .header-banner > .header-tenant {
        font-size: 100%;
        text-align: right;
        line-height: 100%;
    }
}
/* xl screens and up */
@media (min-width: 1280px) {
    .esup > .header > .header-banner > .header-logo {
        flex-grow: 0;
    }
    .esup > .header > .header-banner > .header-env {
        display: flex;
        flex-grow: 1;
    }
}

.hdr_user {
    text-align  : right;
    color       : #26A5DE;
    font-size   : 12px;
    line-height : 20px;
    position    : absolute;
    margin      : 0;
    padding     : 0;
    top         : 63px;
    right       : 135px;
}

div.hdr_user a {
    color   : #26A5DE;
    z-index : 9;
}

div.hdr_user a:hover {
    text-decoration : underline;
    color           : #26A5DE;
}

.hdr_user a { color : #000000; text-decoration : none; }

.hdr_user a:hover { color : #990000; }

.footer_cpy {
    position : absolute;
    bottom   : 0;
    right    : 20px;
    color    : #8A8A8A;
    z-index  : 9000;
}

span#autologoutinfodisplay {
    color                 : #990000;
    background-color      : var(--white);
    padding               : 2px 0;
    margin                : 0 4px;
    font-weight           : bold;
    display               : none;
    border                : 1px solid #8C8C8C;
    border-radius         : 5px;
}

.BluefinKernel {
    position   : absolute;
    bottom     : 0;
    left       : 20px;
    color      : #8A8A8A;
    font-style : italic;
    z-index    : 3;
}

.BluefinKernel.login {
    bottom : 14px;
    left   : auto;
    right  : 30px;
}

.show_banner, .hide_banner, .show_tools, .hide_tools {
    color      : #788094;
    font-size  : .8em;
    text-align : center;
    padding    : 0;
    background : #CCD4E2;
}

#hide_banner {
    display : none;
}

.show_banner:hover, .hide_banner:hover, .show_tools:hover, .hide_tools:hover {
    cursor : pointer;
    color  : #000000;
}

.hide_tools,
.show_banner {
    border-radius: 0 0 2px 2px;
}

.show_tools,
.hide_banner {
    border-radius: 2px 2px 0 0;
}

.show_banner {
    top: -1px;
    margin: 1px;
}

.hide_banner {
    margin: -1px 1px 0 0;
    top: 87px;
}

.show_banner, .hide_banner {
    position: absolute;
    right: 20px;
    height: 14px;
    padding: 0;
    min-width: 79px;
    z-index: 805;
    border: 0;
}

.hide_tools, .show_tools {
    z-index: 99;
    padding: 1px 10px;
}

.hide_tools {
    margin: 0 10px 0 35px;
}
.show_tools {
    margin: 1px 10px 0 35px;
    position: relative;
    top: -17px;
}

#show_tools {
    display : none;
}

.hide_tools:hover, .show_tools:hover {
    cursor : pointer;
}

.right_side_eb {
    position      : absolute;
    margin        : 0px;
    padding       : 0px;
    bottom        : -16px;
    border-bottom : 1px solid #8C8C8C;
    right         : 15px;
    left          : 15px;
    height        : 16px;
    background    : #EBF4FB;
}

.right_side_inner {
    border        : 1px solid #8C8C8C;
    border-top    : none;
    border-radius : 0 0 15px 15px;
    position      : absolute;
    margin        : 0px;
    padding       : 0px;
    top           : 0px;
    left          : 6px;
    right         : 18px;
    bottom        : 18px;
}

.left18 { left : 18px; }

#banner {
    height           : var(--banner-height);
    background-color : #DFE1EF;
    z-index          : 1;
}

#bannerWrapper {
    padding  : 8px 20px 0 20px;
    overflow : hidden;
}

#sfrm_container, .sfrm_container {
    position      : absolute;
    display       : block;
    margin        : 0px;
    padding       : 0px;
    top           : 0px;
    left          : 0px;
    right         : 0px;
    bottom        : 0px;
    overflow      : hidden;
    z-index       : 2;
    background    :white;
    border-radius : 0 0 15px 15px;
}

.modalWrapper #sfrm_container, .sfrm_container.modalWrapper { border-radius : 0; }

#sfrm, .sfrm {
    position : absolute;
    margin   : 0px;
    padding  : 6px 20px 20px 20px;
    top      : 50px;
    left     : 0px;
    right    : 0px;
    bottom   : 0px;
    overflow : auto;
}

.modalWrapper #sfrm, .modalWrapper .sfrm {
    padding-right: 6px;
}

#sfrm.modalHideOverflow {
    overflow : hidden;
}

#sfrm_Summary {
    position : absolute;
    margin   : 0px;
    padding  : 6px 20px 0px 20px;
    top      : 50px;
    left     : 0px;
    right    : 0px;
    bottom   : 0px;
    overflow : auto;
}

#title_bar {
    position   : absolute;
    margin     : 0px;
    padding    : 0px;
    top        : 0px;
    left       : 0px;
    right      : 0px;
    height     : 40px;
    z-index    : 100;
}

#sealed_bar + #title_bar {
    top: 22px;
}

#sealed_bar + #title_bar + #sfrm {
    top: 72px;
}

#sealed_bar {
    position   : absolute;
    margin     : 0px;
    margin-bottom: 5px;
    padding    : 9px;
    white-space: nowrap;
    top        : 0px;
    left       : 0px;
    right      : 0px;
    height     : 15px;
    text-indent: 12px;
    z-index    : 100;
    background-color: #ffaf74;
    font-size: 18px;
    color: #2e3d52;
    font-weight : 500;
}

#page-title { /*Depreciated*/
    position  : absolute;
    left      : 20px;
    top       : 16px;
    font-size : 2em;
    color     : #56769D;
}

#title_bar_title {
    position    : absolute;
    height      : 22px;
    left        : 20px;
    right       : 0;
    bottom      : 0;
    font-size   : 22px;
    line-height : 22px;
    color       : var(--heading-color);
    padding     : 0;
}

#title_bar_title a {
    color           : var(--heading-color);
    text-decoration : none;
}

#title_bar_title span.archived {
    font-style: italic;
    font-weight: 100;
    color: red;
    margin-left: 20px;
}

.left_side_inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #8C8C8C;
    border-top: none;
    border-radius: 0 0 15px 15px;
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 18px;
    right: 6px;
    bottom: 18px;
    background: #F8FAFB;
    z-index: 99;
}

.tree {
    display: flex;
    flex-grow: 1;
    margin: 0;
    padding: 10px 10px 0 10px;
    overflow: auto;
    background-color: #F8FAFB;
    z-index: 4;
}

/* flex doesn't obey bottom padding, so trick it... */
.tree > div:first-child::after {
    content: '';
    display: block;
    padding-bottom: 5px;
}

.search_container {
    height: 180px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    padding: 0px 0px 10px 10px;
    border-top: 1px solid #8C8C8C;
}

.search_container.hidden {
    display: grid;
    padding: 0;
    border: unset;
}

.history_buttons {
    text-align: left;
    overflow : hidden;
    border-radius: 0 0 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

div.history_buttons a {
    display         : block;
    width           : 120px;
    height          : 17px;
    float           : left;
    font-size       : 0.8em;
    text-decoration : none;
    padding         : 1px 0 1px 2px;
    margin          : 2px 0 0 0;
    background-color: #EBF1F4;
    overflow        : hidden;
}

div.history_buttons a.empty {
    pointer-events: none;
    opacity: .5;
}

.history_buttons a:hover {
    color: #2B3651;
    cursor: pointer;
}

.history_title {
    color           : #626B82;
    font-size       : 1.1em;
    font-weight     : bold;
    text-decoration : none;
    padding         : 1px 0;
    margin          : 8px 0 2px 0;
}

.quick_search {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.qs_label {
    width        : 100%;
    padding      : 0px;
    margin-left  : auto;
    margin-right : auto;
    text-align   : center;
    color        : #626B82;
    font-size    : 1.1em;
    font-weight  : bold;
}

.qs_inputbox_cont {
    padding: 0px;
    width: 100px;
    margin-bottom: 10px;
    justify-content: center;
}

.qs_inputbox {
    text-align : center;
    border     : 1px solid #9F9F9F;
    width      : 100%;
    margin     : 3px auto;
    padding    : 4px 2px;
}

.qs_btn_cont {
    padding: 0px;
    width: 100px;
}

.qs_btn_cont:not(:last-child) {
    margin-bottom: 10px;
}

#bottom {
    height : 100%;
    width  : 100%;
}

.ui-layout-pane { /* all 'panes' */
    border   : 1px solid #BBBBBB;
    padding  : 0px;
    margin   : 0px;
    overflow : auto;
}

.ui-layout-resizer {
    padding : 0px;
    margin  : 0px;
    border  : none;
}

.ui-layout-north {
    margin   : 0px;
    padding  : 0px;
    border   : none;
    overflow : hidden;
}

.ui-layout-west {
    margin   : 0px;
    padding  : 0px;
    overflow : hidden;
    border   : none;
}

.ui-layout-center {
    margin   : 0px;
    padding  : 0px;
    overflow : hidden;
    border   : none;
}

.ui-layout-south {
    margin  : 0px;
    padding : 0px;
    height  : 0px;
}

.ui-layout-toggler { /* all 'toggler-buttons' */
    background : url(../images/bluefin/panel_toggle.png) no-repeat;
}

.ui-westSubLayout-center {
    margin   : 0px;
    padding  : 0px;
    overflow : hidden;
    border   : none;
}

.ui-westSubLayout-south {
    margin   : 0px;
    padding  : 0px;
    overflow : hidden;
    border   : none;
}

.node_selected > table span {
    color       : var(--heading-color);
    font-weight : 600;
}

.ui_message {
    float     : right;
    color     : #990000;
    margin    : 28px 10px 0 0;
    padding   : 0;
    font-size : 1em;
}

.ui_message a {
    text-decoration : underline;
    color           : #BB0000;
    font-weight     : normal;
}

.ui_message_success {
    color : #008800;
}

.ui_message_success a {
    color : #00AA00;
}

div.searchResultsWrapperInner {
    position : relative;
}

div.searchResultsSummary {
    grid-template-columns: 1fr 650px 1fr;
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    width: 1050px;
    padding-bottom: 10px;
}

div.searchResultsSummary > div:first-child {
    margin-top: auto;
    color: #555555;
}
div.searchResultsSummary > div:nth-child(2) > .error-message,
div.searchResultsSummary > div:nth-child(2) > .warning-message {
    border-radius: 5px;
    padding: 10px 30px;
    margin-right: 20px;
    text-align: center;
    font-weight: 600;
}
div.searchResultsSummary > div:nth-child(2) > .error-message {
    background-color: #ed2e25;
    color: white;
}
div.searchResultsSummary > div:nth-child(2) > .warning-message {
    background-color: #fcf246;
}

div.searchResultsFooter {
    position : relative;
}

div#searchResults .error-wrapper {
    margin: 0 20px 10px 0px;
    display: flex;
    width: 100%;
    justify-content: center;
}

div#searchResults .error-wrapper .error-message {
    background-color: #ed2e25;
    border-radius: 5px;
    padding: 10px 40px;
    color: white;
    margin-right: 20px;
    text-align: center;
}

.ajaxHiddenButton { display : none; }

.bluefinSubFrameWrapper {
    position   : relative;
    margin     : 3px;
    padding    : 0;
    background : var(--white);
}

.bluefinSubFrame {
    margin     : 0;
    padding    : 0;
    background : var(--white) url(/images/ajax-loader2.gif) 50% 50% no-repeat;
}

div.modalRecycler {
    display : none;
}

div.modalWrapper {
    position    : absolute;
    top         : 0;
    bottom      : 0;
    left        : 0;
    right       : 0;
    color       : black;
    font-family : 'Open Sans', Arial, sans-serif;
    font-size   : 11px;
    line-height : 130%
}

div.modalHiddenTarget {
    display : none;
}

/********* START SLIDESHOW CSS *****************/

#SSwrapper {
    border           : 0;
    outline          : 0;
    margin           : 0 auto;
    padding          : 20px 50px 0 50px;
    background-color : #CCE0EC;
    position         : relative;
}

#SSimgloader {
    margin     : 0 auto 60px auto;
    padding    : 0;
    border     : 0;
    outline    : 0;
    position   : relative;
    text-align : center;
}

#SSgallery {
    margin        : 0;
    margin-bottom : .5em;
    padding       : 0;
    border        : 0;
    outline       : 0;
    list-style    : none;
}

#SSwrapper, #SSimgloader, #SSgallery li {
    outline    : 0;
    list-style : none;
}

#SSgallery li {
    margin-bottom : .5em;
    float         : left;
    padding       : 1px;
    background    : transparent url(/images/ajax-loader.gif) 50% 50% no-repeat;
    border-color  : #334455;
    cursor        : pointer;
}

#SSwrapper .ssTitle {
    color     : var(--heading-color);
    font-size : 2em;
    padding   : 0 0 10px 0;
    margin    : 0;
}

#SSimgloader .caption {
    margin   : 0;
    border   : 0;
    outline  : 0;
    display  : block;
    position : absolute;
    bottom   : -55px;
    left     : 0;
    width    : 100%;
    height   : 48px;
    padding  : 0;
    color    : #2B3651;
    overflow : hidden;
}

.SScaptionLeft {
    float       : left;
    font-weight : bold;
    font-size   : 1.2em;
}

.SScaptionRight {
    font-size   : 1.1em;
    font-weight : bold;
    float       : right;
}

.SScaptionSub {
    color      : #2B3651;
    text-align : left;
    padding    : 4px 8px;
}

#SSwrapper .leftButton {
    position   : absolute;
    left       : 0px;
    top        : 40%;
    width      : 50px;
    height     : 50px;
    cursor     : pointer;
    background : transparent url(/js/galleria/gal-prev-button.png) no-repeat 0 0;
}

#SSwrapper .leftButton:hover { background-position : -50px 0; }

#SSwrapper .rightButton {
    position   : absolute;
    right      : 0px;
    top        : 40%;
    width      : 50px;
    height     : 50px;
    cursor     : pointer;
    background : transparent url(/js/galleria/gal-next-button.png) no-repeat 0 0;
}

#SSwrapper .rightButton:hover { background-position : -50px 0; }

.SSplayToggle {
    position   : absolute;
    width      : 50px;
    height     : 50px;
    top        : -8px;
    right      : -50px;
    background : transparent url(/js/galleria/gal-toggle-button.png) no-repeat 0 0;
}

.SSPlayActive { background-position : -50px 0; }

/********* END SLIDESHOW CSS *****************/

/********* START CLOUD-ZOOM GALLERY CSS *****************/
.CZimageWrapper {
    background-color : var(--white);
    float            : left;
    margin           : 3px 14px 3px 3px;
    padding          : 0;
    position         : relative;
    text-align       : center;
}

.CZimageWrapper .cloud-zoom-big {
    border                : 4px solid #CCCCCC;
    border-radius         : 4px;
    overflow              : hidden;
}

.CZimageWrapper .zoomNote {
    cursor     : default;
    color      : #777777;
    font-size  : 8px;
    text-align : center;
}

.CZgalleryWrapper {
    float   : left;
    margin  : 0;
    padding : 6px 0;
}

.CZgalleryWrapper a.cloud-zoom-gallery {
    display : block;
    float   : left;
    margin  : 0;
    padding : 0 12px 0 0;
}

.CZgalleryWrapper a.cloud-zoom-gallery img {
    border                : 1px solid #444444;
    border-radius         : 2px;
    margin                : 0;
    padding               : 0;
}

/********* END CLOUD-ZOOM GALLERY CSS *****************/

#flashContent { display : none; }

#hiddenMessage {
    display  : none;
    position : absolute;
}

#searchParams {
    position : relative;
    margin   : 0;
    padding  : 0;
}

a.searchLink {
    text-decoration : none;
    color           : #000000;
}

a.searchLink:hover {
    text-decoration : underline;
    cursor          : pointer;
}

.buiFrameWrapper {
    margin     : 0 auto;
    padding    : 0;
    text-align : center;
    background : transparent url('/images/ajax-loader.gif') 50% 30px no-repeat;
}

.BUIiFrame {
    margin  : 0;
    padding : 0;
}

.user-message {
    color     : #333333;
    font-size : 1.3em;
    margin    : 0 auto;
    padding   : 0;
    display   : block;
}

.user-message a { text-decoration : none; color : var(--heading-color); font-weight : bold; }

.hiddenAjaxLoader {
    display    : none;
    width      : 100%;
    margin     : 0;
    padding    : 0;
    height     : 50px;
    background : transparent url('/images/ajax-loader.gif') 50% 10px no-repeat;
}

.hiddenAjaxFormLoader {
    background  : url("/images/ajax-loader-form.gif") no-repeat scroll 10px 32px transparent;
    display     : none;
    height      : 85px;
    left        : 50%;
    margin-left : -25px;
    position    : absolute;
    top         : 0;
    width       : 50px;
    z-index     : 5;
}

#hiddenAjaxFormLoaderMessage {
    bottom     : 0;
    color      : #999999;
    font-style : italic;
    position   : absolute;
    text-align : center;
    width      : 50px;
}

#myPDFViewerContainer {
    position   : absolute;
    background : url(/images/ajax-loader-bar.gif) no-repeat scroll 50% 25% transparent;
    bottom     : 0;
    left       : 0;
    right      : 0;
    top        : 4px;
    overflow   : hidden;
}

.DocDownloadFrame {
    border : 0;
    clip : rect(0 0 0 0);
    height : 1px;
    margin : -1px;
    overflow : hidden;
    padding : 0;
    position : absolute;
    width : 1px;
}

div.widget_chart {
    width  : 100%;
    height : 220px;
}

a.mapActionCont, a.messageActionCont, a.toggleActionCont {
    display       : block;
    float         : left;
    color         : #26A5DE;
    font-size     : 12px;
    padding-right : 25px;
}

.mapAction {
    position   : relative;
    cursor     : pointer;
    display    : block;
    float      : left;
    margin     : 0 8px 0 0;
    padding    : 0;
    height     : 32px;
    width      : 32px;
    background : url(/images/map/map-actions.png) no-repeat scroll 0 0 transparent;
}

.mapAction.directions { background-position : -32px 0; }

.messageAction {
    position   : relative;
    cursor     : pointer;
    display    : block;
    float      : left;
    margin     : 0 8px 0 0;
    padding    : 0;
    height     : 21px;
    width      : 42px;
    background : url(/images/messages/send-message-icon.svg) no-repeat scroll 0 0 transparent;
}

a.downloadActionCont {
    display       : block;
    float         : left;
    color         : #26A5DE;
    font-size     : 12px;
    padding-right : 25px;
}

.downloadAction {
    position   : relative;
    cursor     : pointer;
    display    : block;
    float      : left;
    margin     : 0 8px 0 0;
    padding    : 0;
    height     : 25px;
    width      : 32px;
    background : url(/images/form_elements/download-icon.svg) no-repeat scroll 0 0 transparent;
}

.toggleAction {
    position   : relative;
    cursor     : pointer;
    display    : block;
    float      : left;
    padding    : 0;
    width      : 32px;
    background : url(/images/form_elements/toggle-off.svg) no-repeat scroll 0 0 transparent;
}

span.inlineArrow {
    background : url("/images/list_arrow.gif") no-repeat scroll 0 0 transparent;
    display    : inline-block;
    height     : 7px;
    margin     : 0 4px;
    width      : 12px;
}

/* Javascript Sorting Change */
.asc { background : transparent url(/images/sort_asc.png) 4px -34% no-repeat; }

.desc { background : transparent url(/images/sort_desc.png) 4px -41% no-repeat; }

/* Handle DoubleHeaders and TripleHeaders */
.listBoxDoubleHeader li.list_header_li.asc { background : transparent url(/images/sort_asc.png) 4px -15% no-repeat; }

.listBoxTripleHeader li.list_header_li.asc { background : transparent url(/images/sort_asc.png) 4px -10% no-repeat; }

.listBoxDoubleHeader li.list_header_li.desc { background : transparent url(/images/sort_desc.png) 4px -21% no-repeat; }

.listBoxTripleHeader li.list_header_li.desc { background : transparent url(/images/sort_desc.png) 4px -13% no-repeat; }

.listBoxDoubleRow li.list_body_li { height : 28px; }

.buiListBoxMed.listBoxDoubleRow li.list_body_li { height : 40px; }

.buiListBox.listBoxDoubleRow li.list_body_li { height : 50px; }

.zebra ul:nth-child(odd) {
    background-color: #f6f6f6;
}
.zebra ul:nth-child(even) {
    background-color: #fdfdfd;
}

/* If it's a sortable, we need to remove this zebra and add the correct one */
.zebra ul.ui-sortable:nth-child(even) {
    background-color : transparent;
}

.zebra ul.ui-sortable li:nth-child(even) ul {
    background-color : #F1F1F2;
}

/* Done */

/* If it's sortable, we need to also set transparent a few upper level items */
.list_body ul.ui-sortable:hover .list_body_li {
    background-color : transparent !important;
}

.list_body ul.ui-sortable:hover {
    background-color : transparent !important;
}

/* Done */

/* if row border */
.rowBorder ul {
    border-bottom : 1px solid !important;
}

/* if row border */
.rowBorder ul:nth-last-child(1) {
    border-bottom : none !important;
}

/* Added to give larger row height to listbox */
.buiListBoxMed .list_body_li {
    height      : 20px;
    line-height : 20px;
}

.buiListBox .list_body_li {
    height      : 25px;
    line-height : 25px;
}

/* Slight adjustment to the margin of any actions in the expanded list box */
.buiListBox .list_body_li a.listAction { margin-top : 3px; }

.buiListBoxMed .list_body_li a.listAction { margin-top : 3px; }

.buiListBoxMed.listBoxDoubleRow .list_body_li a.listAction { margin-top : 13px; }

/* Added if you want column lines */
.buiListBoxColumn .list_body_li {
    border-right : 1px solid #A9A9A9;
    margin-right : -1px;
}

/* Last column doesn't need a right border */
.buiListBoxColumn li:last-child {
    border-right  : 0px !important;
    padding-right : 17px !important;
}

.buiListBoxColumn .list_body ul:hover .list_body_li {
    background-color : transparent !important;
}

/* click to Edit */
.clickToEdit {
    position : absolute;
    display  : block;
    width    : 100%;
    height   : 100%;
}

.clickToEdit:hover { text-decoration : none !important; }

.hoverShowParent .hoverShowTarget { display : none; }

.hoverShowParent:hover .hoverShowTarget { display : block; }

.listColumn li.list_header_li, .listColumn li.list_body_li {
    border-right : 1px solid #919191 !important;
    margin-right : -1px !important;
}

list_header_li {
    cursor: default;
}

.listColumn li.list_header_li:last-child, .listColumn li.list_body_li:last-child {
    border-right : 0px !important;
}

.multiUpload {
    min-height       : 105px;
    width            : auto;
    border           : 1px solid #A5A9AD;
    background-color : var(--white);
    text-align       : center;
}

.multiUploadImages {
    padding : 10px;
}

.multiUploadDropContainer {
    position : relative;
}

.multiUploadDrop {
    display          : none;
    position         : absolute;
    top              : -4px;
    left             : -4px;
    background-color : var(--white);
    opacity          : 0.7;
    height           : 100%;
    border           : 4px dashed #A7A8A9;
}

.multiUploadMessage {
    display     : inline-block;
    opacity     : 1.0;
    color       : #000000;
    width       : 100%;
    height      : 100%;
    font-size   : 24px;
    line-height : 105px;
    text-align  : center;
}

.multiUploadDrop.over {
    display : block;
    z-index : 1000;
}

.multiUploadDrop.initNoImages {
    border     : 0;
    background : 0;
}

.multiUploadImageThumb {
    float            : left;
    height           : 80px;
    width            : 120px;
    margin           : 0px 12px 10px 0px;
    background-color : #000000;
}

.multiUploadImageAlignHelper {
    display        : inline-block;
    height         : 100%;
    vertical-align : middle;
}

.multiUploadImageThumb img {
    max-height     : 80px;
    max-width      : 120px;
    vertical-align : middle;
}

.singleUpload {
    min-height       : 105px;
    width            : auto;
    background-color : var(--white);
    text-align       : center;
    box-sizing       : content-box;
    border: 1px solid black;
}

.singleUploadDropContainer {
    position : relative;
}

.singleUploadDrop {
    display          : none;
    position         : absolute;
    top              : -4px;
    left             : -4px;
    background-color : var(--white);
    opacity          : 0.7;
    height           : 100%;
    border           : 4px dashed #A7A8A9;
    width: 100%;
    box-sizing: content-box;
}

.singleUploadMessage {
    display     : inline-block;
    opacity     : 1.0;
    color       : #000000;
    width       : 100%;
    height      : 100%;
    font-size   : 24px;
    line-height : 105px;
    text-align  : center;
}

.singleUploadDrop.over {
    display : block;
    z-index : 1000;
}

.singleUploadDrop.initNoImages {
    border     : 0;
    background : 0;
}

.singleUploadImageThumb {
    float            : left;
    display          : flex;
    width            : 100%;
    background-color : #f3f3f3;
}

.singleUploadImageAlignHelper {
    display        : inline-block;
    height         : 100%;
    vertical-align : middle;
}

.singleUploadImageThumb img {
    vertical-align : middle;
    max-width: 100%;
}

.bui_image_preview_actionable {
    position : absolute;
    height   : 80px;
    width    : 120px;
}

.bui_image_preview_fader {
    position         : absolute;
    display          : block;
    height           : 80px;
    width            : 120px;
    background-color : var(--white);
    opacity          : 0.4;
}

.bui_image_preview_top_filler {
    height : 40px;
    width  : 120px;
}

.bui_image_preview_button_container {
    height : 40px;
    width  : 120px;
}

.bui_image_preview_button_helper {
    display        : inline-block;
    height         : 100%;
    vertical-align : middle;
}

.bui_image_preview_button {
    float            : left;
    text-align       : center;
    height           : 32px;
    width            : 32px;
    background-color : #000000;
    margin           : 0px 0px 6px 6px;
    border-radius    : 4px;
}

.bui_image_preview_button:hover {
    background-color : #57595B;
}

.bui_image_preview_button img {
    width          : 16px;
    height         : 16px;
    vertical-align : middle;
    border         : none;
}

.tooltipster-bui-shadow {
    border-radius : 5px;
    background    : #000000;
    box-shadow    : 0px 0px 14px rgba(0, 0, 0, 0.3);
    color         : #2C2C2C;
}

.tooltipster-bui-shadow .tooltipster-content {
    font-family : 'Arial', sans-serif;
    font-size   : 14px;
    line-height : 16px;
    padding     : 8px 10px;
}

.pull-left {
    float : left;
}

.pull-right {
    float : right;
}

.ajaxUnique:after {
    content       : 'validating...';
    color         : #CC3333;
    position      : absolute;
    right         : 0px;
    top           : 0px;
    padding-right : 16px;
    background    : url("/images/ajax-loader.gif") no-repeat scroll 100% 0 transparent;
}

.workflow {
    width            : auto;
    padding          : 5px 20px 5px 20px;
    background-color : #FCF490;
}

.workflow .workflow-description {
    font-size   : 14px;
    min-height  : 31px;
    line-height : 24px;
    width       : auto;
    text-align  : center;
    color       : #F16A33;
    font-weight : 600;
}

.workflow .control-previous {
    float : left;
}

.workflow .control-next {
    float : right;
}

.workflow .control-previous button {
    width               : 120px;
    height              : 30px;
    background-image    : url(/images/wfl/previous.svg);
    background-repeat   : no-repeat;
    background-position : left;
}

.workflow .control-previous button:hover {
    background-image : url(/images/wfl/previous_hover.svg);
}

.workflow .control-next button {
    width               : 120px;
    height              : 30px;
    background-image    : url(/images/wfl/next.svg);
    background-repeat   : no-repeat;
    background-position : right;
}

.workflow .control-next button:hover {
    background-image : url(/images/wfl/next_hover.svg);
}

.workflow .validation-errors {
    display          : none;
    width            : auto;
    height           : auto;
    background-color : #FEFDEA;
    margin           : 5px -20px -5px -20px;
    padding          : 5px 20px 5px 20px;
}

.workflow .error-header {
    font-size   : 16px;
    font-weight : 600;
    color       : #F16F63;
}

.workflow .list-item {
    color     : #5C5B80;
    font-size : 12px;
}

.workflow .list-item-image {
    width  : 14px;
    height : 14px;
    margin : 5px 5px -2px 0;
}

.workflow-tree {
    position         : absolute;
    top              : 0;
    bottom           : 12px;
    left             : 0;
    right            : 0;
    margin           : 0;
    padding          : 11px 15px 11px 15px;
    overflow         : auto;
    background-color : var(--white);
    z-index          : 10;
    color       : #38495E;
    font-size   : 12px;
    line-height : 24px;
}

.workflow-tree .title {
    font-weight   : 600;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.workflow-tree table {
    width           : 100%;
    border-collapse : collapse;
}

.workflow-tree .cancel {
    margin-top : 10px;
}

.workflow-step.highlight {
    background-color : #FCF490;
}

.workflow .ui-state-default {
    border      : none;
    background  : none;
    font-weight : normal;
    color       : #8D9073;
}

.workflow .ui-corner-all {
    border-radius : 0;
}

.workflow .ui-button-text {
    padding     : 3px 0;
    font-size   : 20px;
    line-height : 20px;
}

.workflow-tree .icon {
    height  : 15px;
    width   : 15px;
    display : block
}

.workflow-tree .icon.active {
    background-image : url(/images/wfl/task_completed.svg);
}

.workflow-tree .icon.inactive {
    background-image : url(/images/wfl/task_pending.svg);
}

.workflow-tree .icon.active.current, .workflow-tree .icon.inactive.current {
    background-image : url(/images/wfl/task_current.svg);
}

.workflow-tree td {
    overflow : hidden;
    padding  : 0 2px 0 2px;
}

.workflow-step-sort {
    display           : block;
    cursor            : pointer;
    background-image  : url(/images/wfl/step_sort.svg);
    width             : 11px;
    height            : 19px;
    background-repeat : no-repeat;
    margin-top        : -3px;
}

.workflow-step-sort:hover {
    background-image : url(/images/wfl/step_sort_hover.svg);
}

.workflow-step-active-flag {
    height     : 15px;
    width      : 15px;
    display    : block;
    margin-top : -1px;
}

.workflow-step-active-flag.active {
    background-image : url(/images/wfl/task_completed.svg);
}

.workflow-step-active-flag.inactive {
    background-image : url(/images/wfl/task_pending.svg);
}

.dirtyFormModal {
    padding: 20px;
}

li.k-item div.k-animation-container li.k-item div.k-animation-container {
    top : 0 !important;
}

.printMenu.Reports span.k-link {
    padding  : 0 !important;
    overflow : hidden;
}

.printMenu.Reports input {
    padding    : 3px 33px 3px 18px;
    text-align : left;
}

.printMenu.Reports input:hover {
    opacity : 0.8;
}

.alert-hdr {
    background    : #ED2D19;
    border        : #ED2D19 1px solid;
    border-radius : 8px 8px 0 0;
    color         : var(--white);
    font-size     : 13px;
    font-weight   : bold;
    padding       : 3px 3px;
    text-align    : center;
}

.alert-body {
    background    : #F6FAFD;
    border        : #ED2D10 solid 1px;
    border-radius : 0 0 8px 8px;
    font-size     : 13px;
    padding       : 3px 8px;
}

.alert-body ul {
    padding-left : 12px;
}

.alert-body ul li {
    color           : #ED2D19;
    padding-bottom: 5px;
}

.alert-body ul li * {
    color : #000000;
}

.display_message {
    font-size: 1.2em;
    margin-top: 1em;
    padding: 0 1em 0 1em;
}

.tooltip_templates { display: none; }

.ExternalContainerStart {
    position: absolute;
    overflow: auto;
    padding: 3px;
    top: 12px;
    left: 12px;
    bottom: 72px;
    right: 12px;
}

.no-display { display: none !important; }

.enrollment-message:not(.enrollment-message-bubble) {
    background: #EEF7FC;
    border-radius: 12px;
}

.enrollment-message-bubble {
    background: url(/images/messages/message-bubble.svg) no-repeat right;
    background-size: 85% 100%;
}

.enrollment-message > div {
    font-weight: bold;
    font-size: 9pt;
    overflow-wrap: break-word;
    hyphens: auto;
}

.enrollment-message:not(.enrollment-message-bubble) > div {
    padding: 24px 28px;
}

.enrollment-message-bubble > div {
    padding: 32px 40px 28px 92px;
}

.text-error {
    color: #FF0000;
}

.system-notification {
    height           : auto;
    background-color : #EBCAC7;
    position         : absolute;
    right            : 0;
    left             : 0;
    z-index          : 4;
    font-family      : 'open-sans', serif;
    color            : #201d16;
    font-size        : 14px;
    padding          : 10px 0 10px 10px;
    display          : none;
}

.flag-wrapper {
    display: flex;
    align-items: center;
}

.flag-wrapper .chk_wrapper_inner {
    display: flex;
}


/** Global custom jquery Flexbox styles */
.ffb .row {
    white-space: nowrap;
    margin     : 0 0 0 5px;
}

.ffb .content .row {
    text-overflow: ellipsis;
    flex-wrap: nowrap;
}

.ffb .row .col1 {
    float: left;
    width: 50px;
    overflow-x: hidden;
    padding: 0 5px 0 5px;
}

.ffb .row .col2 {
    float: left;
    width: 75px;
    overflow-x: hidden;
    padding: 0 5px 0 5px;
}

.ffb .row .col3 {
    float: left;
    width: 100px;
    overflow-x: hidden;
    padding: 0 5px 0 5px;
}

.ffb .row .col4 {
    float: left;
    width: 125px;
    overflow-x: hidden;
    padding: 0 5px 0 5px;
}

.ffb .row .col5 {
    float: left;
    width: 150px;
    overflow-x: hidden;
    padding: 0 0 0 5px;
}


.ffb-arrow {
    float:left;
    width:18px;
    height:15px;
    background-image:url(/images/form_elements/flexarrows.svg);
}

div.list_body ul .lookup-table-help-text-row {
    height: unset;
    overflow-wrap: break-word;
    text-overflow: unset;
}

.bg-lightYellow {
    background-color: var(--lightYellow);
}

a.history-toggle {
    color: var(--orange);
    font-style: italic;
    font-size: 1em;
}

a.history-toggle:hover {
    text-decoration: underline;
}

.list.history-hidden > .list_body > ul:not(:first-child) {
    display: none;
}

img.imgError {
    display: inherit;
    content: '';
    color: transparent;
    position: inherit;
}

img.imgError::before {
    background: url(/images/form_elements/notfound.svg) center;
    background-size: contain;
    content: '';
    position: inherit;
    display: inline-block;
    width: inherit;
    height: inherit;
    left: 0;
    top: 0;
}