/* 1024x768 layout */
:root {
    --brand-primary: #013D4F;
    --brand-neutral-1: #C5CBC9;
    --brand-neutral-2: #DEE4E2;
    --brand-neutral-3: #CDCDCD;
    --brand-bg: #FFFFFF;
}

/* Standard 16x16 UI icon assets (toolbar, grids, inline actions) */
img[src*="edit.png"],
img[src*="help.png"],
img[src*="arrowup.png"],
img[src*="arrowdown.png"],
img[src*="clockarrow.png"],
img[src*="right.png"],
img[src*="cancel.png"],
img[src*="comment.png"],
img[src*="save.png"],
img[src*="filter.png"],
img[src*="indicator.png"],
img[src*="alarm.png"],
img[src*="Status_Complete.png"],
img[src*="Status_Alert.png"],
img[src*="Status_Alert_Required.png"],
img[src*="Status_DNA.png"],
img[src*="checkmark.png"],
img[src*="images/delete.png"]
{
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    vertical-align: middle;
    box-sizing: border-box;
}

img[src*="big-delete.png"],
img[src*="bigedit.png"],
img[src*="RotateRight.png"] {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
    vertical-align: middle;
    box-sizing: border-box;
}

input[type="image"][src*="help.png"] {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ImageButton controls render as input type=image — size separately from <img> rules */
input[type="image"][src*="images/delete.png"] {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0;
    border: none;
    background: transparent;
}

/* Default.aspx registration grid (#RegItems): constrain flag/TRS and reg-type icons */
#RegItems td img,
#RegItems th img {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    vertical-align: middle;
    box-sizing: border-box;
}

/*******
Styles used by the FormFieldDefinition tables */
.scrolling {
    overflow: auto;
    scrollbar-width: thin;
}

.ffdInstructionLabel {
    position: absolute;
}

.ffdInstructionSeparator {
    position: absolute;
}

.ffdStandardButton {
    position: absolute;
}

.ffdStandardLabel {
    position: absolute;
}

.ffdStandardTextBox {
    position: absolute;
}

.ffdStandardRadioList {
    /* should match standard body, but also inherits 
				   from <td> which may use a different font size.  
				   Set explicitly to match body. */
    /*position: absolute; */ /* absolute turned off else radio choices overlap.  Absolute should be set on the inline style for the group. */
    font-size: 12px;
    vertical-align: middle;
    width: 100%;
}

.ffdSectionHeader {
    position: absolute;
    background-color: var(--brand-primary);
    color: white;
    font-size: 14px;
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
    width: 920px;
    z-index: 10;
}

.ffdSectionHeaderOverlay {
    position: absolute;
    background-color: transparent;
    color: white;
    font-size: 14px;
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
    width: 920px;
    z-index: 20;
}

.ffdSectionHeader2 {
    position: absolute;
    background-color: Gray;
    color: white;
    font-size: 14px;
    height: 20px;
    padding-left: 5px;
    padding-right: 5px;
    width: 920px;
    z-index: 10;
}

.ffdSelectedOwnerTab {
    position: absolute;
    width: 80px;
    height: 18px;
    background-color: #dddddd;
    border-style: none;
    color: black;
}

.ffdDeselectedOwnerTab {
    position: absolute;
    width: 80px;
    height: 18px;
    background-color: white;
    border-style: none;
    color: #dddddd;
}

.ffdOwnerPanel {
    position: absolute;
    width: 100%;
    height: 70px;
    background-color: #dddddd;
}

.ffdOwnerPanelDoubleHeight {
    position: absolute;
    width: 100%;
    height: 95px;
    background-color: #dddddd;
}

.ffdPanelInstructions {
    position: absolute;
    background-color: transparent;
    font-style: italic;
}

.ffdTextBoxLabel {
    position: absolute;
    white-space: nowrap;
    font-size: 11px;
}

.ffdSectionPanel {
    position: absolute;
    width: 920px;
}

.lister ul {
    list-style-type: none;
    line-height: 1.25em;
    margin: 0;
    font: inherit;
}

.lister li {
    list-style-type: none;
}

    .lister li a {
        text-decoration: none !important;
        color: black !important;
    }

        .lister li a span {
            color: black !important;
        }



a:link {
    /*text-decoration: none;*/
    color: black;
}

a:visited {
    text-decoration: none;
    color: black;
}
/*
a:active {
	text-decoration: underline;
	color: Black;
}

a:hover {
	text-decoration: underline;
	color: #9d3159;
}*/

a.actionButton {
    color: var(--brand-primary);
}

.actionFilterColumn {
    width: 100px;
}

a.header {
    color: #ffffff;
    text-decoration: none;
}

body {
    font-family: 'Noto Sans';
    font-size: 0.8em;
    font-weight: normal;
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal;
    margin: -10px 0px 0px 0px;
    background-color: #CCC;
    /*color: #006737;*/
    color: black;
}

.Copyright {
    left: 15px;
    position: absolute;
    top: 575px;
    color: var(--brand-primary);
    font-weight: bold;
    font-size: .6em;
}

hr {
    width: 366px;
    height: 2px;
    color: #a5a29b;
}


/******************************************************************************************************/
div.minHeight {
    min-height: 550px;
}



div.logon {
    width: 100%;
    max-width: 1024px;
    margin: 10px auto;
    height: 100%;
    min-height: 600px;
    text-align: left;
}

div.left {
    width: 50%;
    margin: 10px auto;
    float: left;
    /*background-color:pink;*/
}

div.right {
    width: 50%;
    margin: 10px auto;
    float: right;
    /*background-color:lavender;*/
}

div.left1 {
    width: 25%;
    margin: 10px auto;
    float: left;
    /*background-color:pink;*/
}

div.right1 {
    width: 70%;
    margin: 10px auto;
    float: right;
    /*background-color:lavender;*/
}

div.pdfReader {
    width: 25%;
    margin-left: 10px;
    margin-right: 25px;
    float: right;
    text-align: right;
    /*background-color:lavender;*/
}

/*AutoComplete flyout */

.autocomplete_completionListElement2 {
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
    z-index: 99999 !important;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem2 {
    background-color: #ffff99;
    color: black;
    padding: 1px;
    z-index: 99999 !important;
}

/* AutoComplete highlighted item */
.autocomplete_highlightedListItem_wide2 {
    background-color: #ffff99;
    color: black;
    padding: 1px;
    width: 250px;
    z-index: 99999 !important;
}

/* AutoComplete item */

.autocomplete_listItem2 {
    background-color: window;
    color: windowtext;
    padding: 1px;
    z-index: 99999 !important;
}


/* ************************************************************************************************** */
.autocomplete_completionListElement {
    margin: 0px !important;
    background-color: white;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
    width: 250px;
    z-index: 9999999 !important;
}

.autocomplete_completionListElement_Insurance,
.autocomplete_completionListElement_TransReport,
.autocomplete_completionListElement_ManualTrans {
    margin: 0px !important;
    background-color: white;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
    width: 275px;
    z-index: 9999999 !important;
}

.autocomplete_completionListElement_Make,
.autocomplete_completionListElement_AssistedMake {
    margin: 0px !important;
    background-color: white;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    padding: 1px;
    overflow: auto;
    /*height: 125px;*/
    text-align: left;
    list-style-type: none;
    /*width: 175px !important;*/
    z-index: 9999999 !important;
}

/* AutoComplete item */
.autocomplete_listItem {
    background-color: white;
    color: windowtext;
    padding: 1px;
    width: 250px;
    z-index: 9999999 !important;
}

/* AutoComplete item */
.autocomplete_listItem_Insurance,
.autocomplete_listitem_TransReport,
.autocomplete_listitem_ManualTrans {
    background-color: white;
    color: windowtext;
    padding: 1px;
    width: 275px;
    z-index: 9999999 !important;
    font-size: 0.95em;
}

/* AutoComplete item */
.autocomplete_listItem_Make,
.autocomplete_listItem_AssistedMake {
    background-color: white;
    color: windowtext;
    padding: 1px;
    /*width: 125px !important;*/
    z-index: 9999999 !important;
}

/* AutoComplete highlighted item */
.autocomplete_highlightedListItem_Make,
.autocomplete_highlightedListItem_Insurance,
.autocomplete_highlightedListItem_AssistedMake,
.autocomplete_highlightedListItem_TransReport,
.autocomplete_highlightedListItem_ManualTrans {
    background-color: #ffff99;
    color: black;
    padding: 1px;
    z-index: 9999999 !important;
    /*font-size: 0.95em;*/
}

.headerRow {
    background-color: var(--brand-primary);
    line-height: 0.25em;
    border-top: 2px solid var(--brand-primary);
    width: 50%;
}

.listWithGroups {
    /*background-color: var(--brand-primary);
    line-height: 0.25em; */
    width: 50%;
    margin-top: 0px;
    margin-bottom: 15px;
}

    .listWithGroups ul {
        border-top: 2px solid var(--brand-primary);
        padding-top: 1px;
    }

.standardAutoCompletionListItem {
    width: 350px;
    background-color: #ffffff;
}

.standardAutoCompletionListItemHighlight {
    width: 350px;
    background-color: #dddddd;
}

.standardButton {
    /*font-size: 1.0em;*/
    /*height: 22px;
	margin: 2px 2px 2px 2px;*/
}

.standardDropDown {
    FONT-FAMILY: Tahoma, Arial, sans-serif;
    FONT-SIZE: 1.2em;
    height: 22px;
}

.standardDropDown2 {
    FONT-FAMILY: Tahoma, Arial, sans-serif;
    FONT-SIZE: 1.0em;
    height: 24px;
}

.standardTextBox {
    FONT-FAMILY: Tahoma, Arial, sans-serif;
    FONT-SIZE: 1.0em;
    height: 18px;
    vertical-align: bottom;
}

.readOnlyTextBox {
    background-color: #dddddd;
}

.customTextArea {
    FONT-FAMILY: Tahoma, Arial, sans-serif;
    FONT-SIZE: 1.0em;
}

.errorText {
    font-weight: bold;
    color: red;
}

.errorTextLarge {
    font-size: 14px;
    font-weight: bold;
    color: red;
    vertical-align: bottom;
}

.errorTextSub {
    font-weight: bold;
    color: red;
    padding: 5px;
}

.filterTextBox {
    FONT-FAMILY: Tahoma, Arial, sans-serif;
    FONT-SIZE: 1.0em;
    height: 22px;
    vertical-align: bottom;
    width: 125px;
}

.filterTextBoxWide {
    FONT-FAMILY: Tahoma, Arial, sans-serif;
    FONT-SIZE: 1.0em;
    height: 22px;
    vertical-align: bottom;
    width: 145px;
}

.SubHead {
    width: 790px;
    background-color: #223322;
    color: #ffffff;
    font-weight: bold;
}

.SubTitle {
    font-size: 1.6em;
    font-weight: bold;
    color: grey;
}

.tabFrame {
    position: absolute;
    border-width: 1px;
    border-style: solid;
    padding: 5px 5px 5px 5px;
    width: 740px;
    height: 400px;
}

/* Data Table */
.standardTable {
    width: 920px;
    /*border: 1px;
	border: solid;
	border-color: black;*/
}

.standardTable table tr td table tr td {
    display: flex; 
    justify-content: flex-end; 
    margin-left: 50px;
}

.import-deal-table th {
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    padding: 0 2px 0 2px;
}

.hoverTable {
    width: 920px;
}

    /*.hoverTable td{ 
}*/

    /* Define the default color for all the table rows */
    /*.hoverTable tr{
}*/

    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
        background-color: #D4D4D4;
    }

.assistedTransactionTable {
    width: 900px;
}

.formInitTable {
    width: 920px;
    border: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    margin: 5px 0px 0px 0px;
}

/*.formInitButton {
}*/

.popupTable {
    width: 600px;
    border: 0px;
}

.popupTable2 {
    width: 550px;
    border: 0px;
}

table {
    font-size: 11px !important;
    page-break-inside: avoid;
    /*border: solid;
	border-color: black;*/
}

tr.odd {
    background-color: #FFFFFF;
}

tr.odd2 {
    background-color: #A2CACE;
}

tr.even {
    background-color: #EEEEEE;
}

tr.highlight {
    background-color: #A2CACE;
}

tr.redhighlight {
    background-color: #8b0000;
    color: #FFFFFF;
}

tr:hover.redhighlight {
    background-color: #8b0000;
    color: #FFFFFF;
}

a:visited.redhighlight {
    color: #FFFFFF;
}

a:hover.redhighlight {
    color: #FFFFFF;
}

a:active.redhighlight {
    color: #FFFFFF;
}

a:link.redhighlight {
    color: #FFFFFF;
}

tr.unique {
    background-color: #D4D4D4; /* Test color--change me */
}

tr.spacer {
    font-size: 0.5em;
}

tr.spacer-half {
    font-size: 0.25em;
}

td.decimal {
    font-family: Consolas, 'Courier New', monospace;
    text-align: right;
    padding-right: 10px;
}

td {
    font-family: Arial;
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal;
    /*border: 1px solid;*/
}

th {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    /*background-color: #006737;*/
    background-color: var(--brand-primary);
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal;
    padding-bottom: 2px;
}

    th.sub {
        font-family: Tahoma, Arial, sans-serif;
        font-size: 1.2em;
        font-weight: bold;
        text-align: left;
        color: #FFFFFF;
        background-color: #346472;
        LETTER-SPACING: normal;
        TEXT-TRANSFORM: none;
        WORD-SPACING: normal;
        padding-left: 5px;
    }

    th.sub2 {
        font-size: 1.2em;
        background-color: var(--brand-primary);
        color: #FFFFFF;
        padding: 1px 1px 1px 1px;
        white-space: nowrap;
        overflow: hidden;
    }

    th.sub3 {
        font-family: Tahoma, Arial, sans-serif;
        font-size: 1.0em;
        font-weight: bold;
        text-align: left;
        color: #FFFFFF;
        background-color: #8C919D;
        LETTER-SPACING: normal;
        TEXT-TRANSFORM: none;
        WORD-SPACING: normal;
        padding-left: 5px;
    }

    th a:link, th a:active {
        color: #FFFFFF;
        text-decoration: none;
    }

    th.adminOption {
        width: 250px;
        font-family: Tahoma, Arial, sans-serif;
        font-size: 1em;
        font-weight: bold;
        text-align: left;
        color: #FFFFFF;
        background-color: var(--brand-primary);
        LETTER-SPACING: normal;
        TEXT-TRANSFORM: none;
        WORD-SPACING: normal;
    }

.alertDiv {
    background-image: url(../images/DashboardPastDue.png);
    position: absolute;
    font: 12px arial, sans-serif;
    width: 289px;
    height: 355px;
    border-style: none;
    padding: 0px 0px 0px 0px;
}

.MotdDiv {
    background-image: url(../images/Motd_Wi.png);
    position: absolute;
    font: 12px arial, sans-serif;
    width: 289px;
    height: 355px;
    border-style: none;
    padding: 0px 0px 0px 0px;
}

.MotdMaDiv {
    background-image: url(../images/Motd_Ma.png);
    position: absolute;
    font: 12px arial, sans-serif;
    width: 289px;
    height: 355px;
    border-style: none;
    padding: 0px 0px 0px 0px;
}

.MotdButton {
    position: absolute;
    top: 380px;
    left: 300px;
}

.lockoutDiv {
    background-image: url(../images/DashboardLockedOut.png);
    position: absolute;
    font: 12px arial, sans-serif;
    width: 289px;
    height: 355px;
    border-style: none;
    padding: 0px 0px 0px 0px;
}

.agreementDiv {
    position: absolute;
    background-color: #DBDBDB;
    top: 20px;
    left: 0px;
    font: 12px arial, sans-serif;
    width: 610px;
    height: 400px;
    padding: 5px 5px 5px 5px;
}

.lookupDiv {
    padding: 10px 10px 10px 10px;
    /*border-color: #1A3348;
    border-style: solid;
    border-width: 1px;*/
    /*position: absolute;
	top: 200px;*/
    background-color: #DBDBDB;
    /*z-index: 999;
	text-align: left;*/
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 5px 5px 5px grey;
}

lookupDiv2 {
    padding: 10px 10px 10px 10px;
    /*border-color: #1A3348;
    border-style: solid;
    border-width: 1px;*/
    /*position: absolute;
	top: 50px !important;*/
    background-color: #DBDBDB;
    /*z-index: 999;
	text-align: left;*/
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 5px 5px 5px grey;
}

.lookupDiv_Small {
    padding: 10px 10px 10px 10px;
    /*border-color: #1A3348;
    border-style: solid;
    border-width: 1px;*/
    /*position: absolute;*/
    top: 300px !important;
    background-color: #DBDBDB;
    /*z-index: 999;
	text-align: left;*/
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 5px 5px 5px grey;
}

.lookupDiv_Scanner {
    padding: 10px 10px 10px 10px;
    /*border-color: #1A3348;
    border-style: solid;
    border-width: 1px;*/
    /*position: absolute;*/
    top: 200px !important;
    background-color: #DBDBDB;
    /*z-index: 999;
	text-align: left;*/
    border: 2px solid black;
    border-radius: 4px;
    
    width: 660px;
    height: 725px;
}

.loading-position {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /*margin: -100px 0 0 -100px;*/
    text-align: center;
    /*background-color: #999999;*/
    /*border: solid;
	border-color: #333;
	border-radius: 0.2em;*/
    z-index: 9999997;
}

.loading-Img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -70px;
    z-index: 9999998;
}

.waitDiv {
    padding: 10px 10px 10px 10px;
    /*border-color: #1A3348;*/
    /*border-style: solid;
	border-width: 1px;*/
    /*display: none;*/
    position: absolute;
    top: 200px;
    height: 225px;
    width: 225px;
    /*background-color: #006737; */
    z-index: 999999 !important;
    text-align: left;
}

.snoozeHidden {
    visibility: hidden;
    height: 0px;
}

A.cssBlackbookValue {
    text-decoration: none;
}

    A.cssBlackbookValue:link {
        text-decoration: none;
    }

    A.cssBlackbookValue:visited {
        text-decoration: none;
    }

    A.cssBlackbookValue:hover {
        text-decoration: underline;
    }

A.cssBlackBookSelected {
    text-decoration: underline;
    background-color: yellow;
}

    A.cssBlackBookSelected:link {
        text-decoration: underline;
        background-color: yellow;
    }

    A.cssBlackBookSelected:visited {
        text-decoration: underline;
        background-color: yellow;
    }

    A.cssBlackBookSelected:hover {
        border-bottom: 3px double;
        background-color: yellow;
    }

.dashboardBlock {
    width: 920px;
}

/************************************************/
/* Bread crumbs */
/************************************************/

.siteMapPathContainer {
    position: absolute;
    top: 183px;
    left: 0px;
    width: 992px;
    height: 20px;
    color: #666;
    background-color: var(--brand-neutral-2);
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 0.95em !important;
    padding: 3px 0 0 5px;
    vertical-align: middle;
    border-top: 3px solid var(--brand-neutral-1);
    border-bottom: 1px solid var(--brand-neutral-1);
}

.siteMapCss a, a:visited, a:link, a:active {
    font-weight: normal;
    color: #000;
}

    .siteMapCss a:hover {
        color: var(--brand-primary);
    }

.placeholder {
    margin: 90px 0px 0px 40px;
}

/********************************************
   HTML ELEMENTS
********************************************/

/* Top elements */

/* headers */
h1, h2, h3 {
    font-weight: bold;
    color: var(--brand-primary);
    font-family: 'trebuchet ms',Tahoma,arial,sans-serif;
}

h1 {
    font-size: 1.4em;
    /*text-transform: uppercase;*/
}

h2 {
    font-size: 1.2em;
    /*text-transform: uppercase;*/
}

    h2 a:link {
        font-size: 0.75em;
    }

h3 {
    font-size: 0.6em;
    /*text-transform: uppercase;*/
    letter-spacing: 1px;
}

h1, h2, h3, p {
    padding: 0;
    margin: 10px 15px 0px 0px;
}

ul, ol {
    margin: 10px 30px;
    padding: 0 15px;
    color: var(--brand-primary);
    font: normal 12px arial, sans-serif;
}

ul span, ol span {
    color: #666666;
}



/* images */
img {
    border-width: 0px;
    max-width: 100%;
}

    img.border {
        border: 2px solid #CCC;
    }

    img.float-right {
        margin: 5px 0px 10px 10px;
    }

    img.float-left {
        margin: 5px 10px 10px 0px;
    }

    img.stateFlower {
        margin: 25px;
        float: right;
    }

    img.stateMap {
        margin: 25px;
        width: 256px;
        float: right;
    }

.center-map {
    margin: 0 auto;
    width: 640px;
}

code {
    margin: 5px 0;
    padding: 10px;
    text-align: left;
    display: block;
    overflow: auto;
    font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
    background: #FAFAFA;
    border: 1px solid #EAEAEA;
    border-left: 5px solid #86C2A3;
}

acronym {
    cursor: help;
    border-bottom: 1px solid #777;
}

pre {
    font: 500 14px 'Lucida Console', 'courier new', monospace;
}

blockquote {
    margin: 15px;
    padding: 0 0 0 32px;
    background: #FAFAFA url(../images/quote.png) no-repeat 5px 10px !important;
    background-position: 8px 8px;
    border: 1px solid #EAEAEA;
    border-left: 2px solid #CCC;
}

/* form elements */
form {
    padding: 0;
}

textarea {
    width: 400px;
    max-width: 100%;
    padding: 4px;
    border: 1px solid #BBB;
    height: 100px;
    display: block;
}

/*input.radiobutton {
}*/

input.button {
    margin: 0;
    border: 4px solid #EAEAEA;
    padding: 2px 3px;
    color: #333; /* color: #339900; */
}

label.eltParticipant {
    background-color: #73C02F;
    font-weight: bold;
}

label.nonELTParticipant {
    background-color: none;
}

a.lienholderLink:hover {
    color: blue;
    cursor: pointer;
    text-decoration: none;
}

a.lienholderLink {
    cursor: pointer;
    text-decoration: none;
}

#contact {
    margin: 10px 15px;
    padding: 0;
    border: 1px solid #000;
    background-color: #EAEAEA;
}

/*****************************
	  LAYOUT
******************************/
/*#wrap
{
   margin: 0 auto ;
   padding: 0;
   text-align: left;
   background-color: #FFF;
   width: 920;
}*/

.petlWrap {
    margin: 0 auto;
    text-align: left;
    background-color: #ffffff;
    width: 1003px;
}

.shadowBox {
    background-color: #FFF;
}

.header {
    position: relative;
    clear: left;
    width: 997px;
    height: 130px;
    margin: 0px 3px 0px 3px;
    padding: 0;
    background-color: #003B49;
    background-image: url(../images/header/headerbg.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% auto;
    color: #FFF;
    text-decoration: none;
    /*float:right;*/
}


.headerUsername {
    float: right;
    clear: right;
    font-size: 12px !important;
    color: #FFF !important;
    text-decoration: none;
}

    .headerUsername a {
        font-size: 12px !important;
        color: #FFF !important;
        text-decoration: none;
    }

        .headerUsername a:visited {
            font-size: 12px !important;
            color: #FFF !important;
            text-decoration: none;
        }

        .headerUsername a:hover {
            text-decoration: underline;
        }

.logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.headerTitle {
    position: absolute;
    width: 500px;
    top: 90px;
    left: 25px;
    text-decoration: none;
    font-size: 1.25em;
    font-family: 'Noto Sans';
    /*font-weight: bold;*/
    /*font-style: italic;*/
    /*letter-spacing: -2px;*/
}

.header-h1 {
    float: left;
    margin: 0;
    padding: 0;
    color: #FFF;
    text-transform: none;
    top: 36px;
    right: 35px;
}

.headerLogin {
    clear: both;
    float: right;
    color: #FFF;
    text-align: right;
    text-decoration: none;
    margin-right: 25px;
    margin-top: 20px;
}

.headerLogout a a:hover {
    text-decoration: underline;
}

.headerBranch {
    float: right;
    clear: right;
    color: #FFF;
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 8px;
}

.headerHelp a {
    clear: both;
    margin-right: 25px;
    color: #FFF;
    float: right;
    top: 50px;
}

.userLogin {
    float: right;
    clear: right;
    text-align: right;
}

.Livehelp {
    clear: both;
    margin-right: 25px;
    float: right;
}


/*-------------------#content-------------------*/
#content {
    padding: 0px 0px;
    background-color: #FFFFFF;
    margin: 60px 3px 3px 3px;
    height: 100%;
    line-height: 18px;
}

    #content #container {
        width: 997px;
        margin: 0px auto 0px auto;
        padding: 0px;
    }

    #content #homeContainer {
        width: 997px;
        margin: 0px auto 0px auto;
        padding: 0px;
    }

/*#column0 {
}*/

#map {
    float: right;
}

.center {
    text-align: center;
}

.clear {
    clear: both;
}


/* footer */
#petlFooter {
    clear: both;
    height: 40px;
    width: 991px;
}

    #petlFooter a {
        text-decoration: none;
        font-weight: normal;
        color: var(--brand-primary);
    }

    #petlFooter #footer-center {
        width: 991px;
        height: 40px;
        float: left;
        text-align: center;
        margin: 10px 0 0 0;
        padding: 0px 0px 0px 10px;
    }

    #petlFooter #footer-left {
        width: 660px;
        height: 186px;
        float: left;
        text-align: left;
        margin: 0;
        padding: 0px 0px 0px 10px;
    }

    #petlFooter #footer-right {
        width: 305px;
        height: 186px;
        float: left;
        text-align: right;
        top: 50%;
        margin: 0px 10px 0px 0px;
    }


/* alignment classes */
.float-left {
    float: left;
}

.float-right {
    margin-right: 25px;
    float: right;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

/* additional classes */
.clear {
    clear: both;
}

.hide {
    display: none;
}

.gray {
    color: #CCC;
}

.comments {
    color: #333;
    background: #FFF;
    text-align: right;
    border-top: 1px dashed #EFF0F1;
    border-bottom: 1px dashed #EFF0F1;
    padding: 5px 0;
    margin-left: 60px;
}

.hidden {
    display: none;
}

.rss {
    margin-left: 15px;
}

.pdf {
    padding-top: 0px;
    border: solid 0;
}

.title {
    font-size: 14px;
    font-weight: bold;
    color: var(--brand-primary);
    margin-bottom: 3px;
}

.date {
    font-style: italic;
    color: var(--brand-primary);
    margin-bottom: 3px;
}

.article {
    text-align: left;
    margin-top: 4px;
    margin-bottom: 3px;
}

/* modal */
/* Z-index of #mask must lower than #boxes .window */
#mask {
    position: absolute;
    z-index: 9000;
    background-color: #000;
    display: none;
}

#boxes .window {
    position: absolute;
    width: 500px;
    height: 200px;
    display: none;
    z-index: 9999;
    text-align: left;
    font: 14px 'trebuchet ms', Tahoma,arial,sans-serif;
}

#nolist {
    list-style-type: none;
    margin-left: -10px;
}

#pipe {
    color: #FFF;
}

/* _menu */
.FormPrepInstruct {
    font-family: arial, sans-serif;
    font-size: 8pt;
}

.FormPrepInstructbold {
    font-family: arial, sans-serif;
    font-size: 8pt;
    font-weight: bold;
}

.ModalPopupHeader {
    font-family: arial, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
}

.ModalPopupInstructions {
    font-family: arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    text-align: left;
}

.modalBackground {
    background-color: #fff;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.nSelected {
    background-color: #dddddd;
}

.nUnSelected {
    background-color: #ffffff;
}

/* Universal Search */
.noteDiv {
    padding: 5px 5px 5px 5px;
    left: 760px;
    background-image: url(../images/note.png);
    background-repeat: no-repeat;
    width: 200px;
    position: absolute;
    top: 210px;
    height: 166px;
}

.noteHidden {
    visibility: hidden;
    height: 0px;
}

.customerList {
    z-index: 203;
    border-style: solid;
    border-width: thin;
    position: absolute;
    left: -50px;
    width: 200px;
}

.customerListItem {
    width: 400px;
    background-color: White;
}

.customerListItemHighlight {
    width: 400px;
    background-color: #ddd6dd;
}

input[type="checkbox"] {
    width: 13px;
    height: 13px;
    padding-bottom: 0;
    margin-bottom: 0;
    vertical-align: bottom;
    position: relative;
    top: -2px;
    overflow: hidden;
}

/* From 'main.css' */

/* panel */
.panel, .panelcollapsed {
    background: #eee;
    margin: 0px;
    padding: 0px 0px 5px;
    width: 210px;
    border: 0px solid #999;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px 4px 4px 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
}

    /* panel heading */
    .panel h5, .panelcollapsed h5 {
        font-size: 12px;
        font-weight: normal;
        margin: 0px;
        padding: 4px;
        background: #CCC url(/images/expand-up.png) no-repeat 184px;
        border-bottom: 0px solid #999;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px 3px 3px 3px;
    }

        /* panel heading on rollover */
        .panel h5:hover, .panelcollapsed h5:hover {
            background-color: #D5DCE2;
        }

    /* heading of a collapsed panel */
    .panelcollapsed h5 {
        background: #CCC url(/images/expand-down.png) no-repeat 184px;
        border-color: #CCC;
    }

/* panel content - do not set borders or paddings */
.panelcontent {
    font-size: 12px;
    background: #EEE;
    overflow: hidden;
}

/* collapsed panel content */
.panelcollapsed .panelcontent {
    display: none;
}

/* --- States --- */
.panelState, .panelStateCollapsed {
    background: #eee;
    margin: 15px;
    padding: 0px 0px 5px;
    width: 680px;
    border: 0px solid #999;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px 4px 4px 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
}

    /* panel heading */
    .panelState h5, .panelStateCollapsed h5 {
        font-size: 16px;
        font-weight: normal;
        margin: 0px;
        padding: 4px;
        color: #FFF;
        background: var(--brand-primary);
        border-bottom: 0px solid #999;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px 3px 3px 3px;
    }

        /* panel heading on rollover */
        .panelState h5:hover, .panelStateCollapsed h5:hover {
            background-color: #CCC;
        }

    /* heading of a collapsed panel */
    .panelStateCollapsed h5 {
        border-color: #CCC;
    }

/* panel content - do not set borders or paddings */
.panelStateContent {
    font-size: 12px;
    background: #EEE;
    overflow: hidden;
}

/* collapsed panel content */
.panelStateCollapsed .panelStateContent {
    display: none;
}

.panelOwnerInfo {
    height: 125px;
    width: 910px;
}

.panelOwnerAddress {
    height: 150px;
    width: 910px;
}

/* eTitlelien style PDF Viewer*/
#TitleViewer {
    position: fixed;
    z-index: 100000;
    width: 800px;
    overflow: hidden;
    padding: 10px 10px 10px 10px;
    /*border-color: #1A3348;
    border-style: solid;
    border-width: 1px;*/
    background-color: #dddddd;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 5px 5px 5px grey;
}

input[type="button"],
input[type="submit"],
input[type="file"] {
    border-radius: 4px;
    background: #dddddd;
    cursor: pointer;
    border: .5px solid #a1a1a1;
    /*box-shadow: 0.25px 0.25px 0px 0.5px rgb(0,0,0);*/
    filter: drop-shadow(1px 1px 1px #333);
}

input[type="button"]:disabled,
input[type="submit"]:disabled {
    cursor: not-allowed;
}

input[type="button"]:active {
    background: #dddddd;
    outline: none;
    /*-webkit-box-shadow: inset 0.25px 0.25px 0.25px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0.25px 0.25px 0.25px 1px rgba(0,0,0,0.5);
box-shadow: inset 0.25px 0.25px 0.25px 1px rgba(0,0,0,0.5);*/
}

.blackButtonBorder {
    border-radius: 4px;
    background: #A9A9A9;
    cursor: pointer;
    border: 2px solid #a1a1a1;
}

input[type=text]:disabled,
select:disabled {
    border-color: rgba(118, 118, 118, 0.3);
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
}

input[type=text],
input[type=password],
textarea,
input[type=number],
input[type=email],
input[type=date],
input[type=tel],
input[type=time],
select {
    border-radius: 3px;
    background-color: #F8F8F8;
    border-color: lightgrey ;
    border-width: 1px !important;
}

div.Set12Point {
    font-size: 12pt;
}

/* Make the Wait icon spin */
.ddi_spin {
    height: 71px;
    width: 66px;
    -webkit-animation: rotateY 1.75s infinite linear;
    -moz-animation: rotateY 1.75s infinite linear;
    animation: rotateY 1.75s infinite linear;
    position: absolute;
    left: 52%;
    top: 50%;
    margin: -50px 0 0 -70px;
    z-index: 9999998;
}

.ddi_waitText {
    width: 150px;
    position: absolute;
    left: 52%;
    top: 50%;
    margin: 30px 0px 0px -110px;
    z-index: 9999997;
}
@-webkit-keyframes rotateY {
    to {
        transform: translateY(360deg);
        -webkit-transform: rotateY(360deg);
    }
}

@keyframes rotateY {
    to {
        transform: rotateY(360deg);
    }
}

/* Error Message style */
.ErrorMessageDisplay {
    color: red;
    font-weight: bold;
    font-size: 14px;
}

/* Error Message style */
.ErrorMessageDisplaySmall {
    color: red;
    font-weight: bold;
    font-size: 10pt;
}

.ErrorMessageDisplayChill {
    color: red;
    font-weight: 500;
    font-size: 13px;
}

.InfoMessageDisplayChill {
    color: black;
    font-weight: 500;
    font-size: 13px;
    font: normal 13px tahoma, sans-serif;
}

/* Error Message style */
.ModalErrorMessageDisplay {
    color: red;
    font-weight: bold;
    font-size: 12px;
}

.submenu {
    color:red;
    position: absolute;
    left: 100%; /* Position to the right of the menu item */
    top: 0 !important;
    z-index: 1;
}
.sub-menu-label {
    display: inline-flex; /* Use flexbox for positioning */
    width: 100%; /* Ensure the link uses the full width available */
    justify-content: space-between; /* Space between text and arrow */
    align-items: center; /* Center items vertically */
    text-decoration: none; /* Optional: removes underline from links */
    padding: 10px; /* Adjust padding as needed */
}
.sub-menu-label::after {
    content: ">"; /* This is your accordion arrow */
    font-weight: bold; /* Make the arrow bolder */
    /* Adjust the size or color as needed */
}


#informationBox {
    display: none;
    width: 900px;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    border: 0px solid #ddd;
    padding: 10px;
    margin-top: 10px;
}

.button-row {
    display: flex;
    margin-top: -10px;
    margin-bottom: 0px;
    justify-content: start;
}

.form-row {
    display: flex;
    align-items: center;  
    margin-top: 5px;
}

    .form-row label {
        display: inline-block;
        width: 100px;  
        margin-right: 10px;  
 
    }

    .form-row input[type="text"] {
        flex-grow: 1;  
        background-color: #dddddd;  
    }

.formRow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important; /* Adjust the gap between the divs as needed */
}

    .formRow > div {
        flex: 0 1 auto !important;
        min-width: 160px !important; /* Adjust the minimum width of each div as needed */
    }

/* SCDS Rejection Comment Styles */
.scds-message-container {
    display: none;
    margin: 10px 0;
}

.scds-message-content {
    max-height: 75px;
    width: 85%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 4px;
}

.scds-message {
    color: black;
    font-size: 14px;
    font-weight: bold;
    font-family: tahoma, sans-serif;
}

.scds-view-full-link {
    color: #0066cc;
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
}

.scds-view-full-link:hover {
    color: #004499;
    text-decoration: none;
}

.scds-modal {
    width: 700px;
    max-width: 90%;
}

.scds-modal-content {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 14px;
    font-weight: bold;
}

.scds-modal-content p {
    margin: 0 0 10px 0;
}

.scds-modal-content p:last-child {
    margin-bottom: 0;
}

.scds-modal-content ul {
    margin: 10px 0 10px 20px;
    padding: 0;
    list-style-type: disc;
}

.scds-modal-content li {
    margin-bottom: 8px;
}

.scds-modal-close {
    float: right;
    cursor: pointer;
    opacity: 0.7;
}

.scds-modal-close:hover {
    opacity: 1;
}

.scds-modal-footer {
    text-align: center;
    padding-top: 10px;
}

/* Transaction Type Dots */
.dot-red {
    height: 16px;
    width: 16px;
    background-color: #FF0000;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-crimson {
    height: 16px;
    width: 16px;
    background-color: #FF0040;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-rose {
    height: 16px;
    width: 16px;
    background-color: #FF0080;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-cerise {
    height: 16px;
    width: 16px;
    background-color: #FF00C0;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-magenta {
    height: 16px;
    width: 16px;
    background-color: #FF00FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-purple {
    height: 16px;
    width: 16px;
    background-color: #C000FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-violet {
    height: 16px;
    width: 16px;
    background-color: #8000FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-indigo {
    height: 16px;
    width: 16px;
    background-color: #4000FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-blue {
    height: 16px;
    width: 16px;
    background-color: #0000FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-cerulean {
    height: 16px;
    width: 16px;
    background-color: #0040FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-azure {
    height: 16px;
    width: 16px;
    background-color: #0080FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-capri {
    height: 16px;
    width: 16px;
    background-color: #00C0FF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-cyan {
    height: 16px;
    width: 16px;
    background-color: #00FFFF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-aquamarine {
    height: 16px;
    width: 16px;
    background-color: #00FFC0;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-spring_green {
    height: 16px;
    width: 16px;
    background-color: #00FF80;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-erin {
    height: 16px;
    width: 16px;
    background-color: #00FF40;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-green {
    height: 16px;
    width: 16px;
    background-color: #00FF00;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-harlequin {
    height: 16px;
    width: 16px;
    background-color: #40FF00;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-chartreuse {
    height: 16px;
    width: 16px;
    background-color: #80FF00;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-lime {
    height: 16px;
    width: 16px;
    background-color: #C0FF00;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-yellow {
    height: 16px;
    width: 16px;
    background-color: #FFFF00;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-amber {
    height: 16px;
    width: 16px;
    background-color: #FFC000;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-orange {
    height: 16px;
    width: 16px;
    background-color: #FF8000;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-vermillion {
    height: 16px;
    width: 16px;
    background-color: #FF4000;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-white {
    height: 16px;
    width: 16px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}

.dot-black {
    height: 16px;
    width: 16px;
    background-color: #FF4000;
    border: 1px solid #000000;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    vertical-align: middle;
}


.dot-energon {
    height: 16px;
    width: 16px;
    background-color: #7F00FF; /* A vivid violet-indigo glow */
    border: 1px solid #00FFFF; /* Cyan border for contrast */
    border-radius: 50%;
    display: inline-block;
    opacity: 0.7;
    vertical-align: middle;
}