﻿/* Reset all value to default */
* {
    margin: 0;
    padding: 0;
    border-radius: 0;
}

input[type="text"], select {
    font-size: 12px;
    font-family: Calibri, Helvetica, Geneva;
}

body {
    font-size: .75em;
    font-family: Calibri, Helvetica, Geneva;
    margin: 0;
    padding: 0;
    color: #666;
}

    body.report {
        padding: 10px;
    }
/*--- CSS COMMON --------------------------------------------------------------*/
#ScrollTop {
    display: block;
    width: 40px;
    height: 40px;
    background: url('Images/ScrolltopIcon.png') no-repeat;
    position: fixed;
    left: 17px;
    z-index: 9999;
}

    #ScrollTop:hover {
        cursor: pointer;
    }

.headerLink {
    display: block;
    width: 100%;
    color: #006498;
}

    .headerLink:hover {
        color: #149bdf;
    }

table {
    border-collapse: collapse;
    width: 100%;
}

.tableNormal {
    margin: 10px auto;
}

    .tableNormal tr th {
        font-weight: bold;
        border-bottom: 2px solid #cacaca;
        position: relative;
        color: black;
    }

        .tableNormal tr th a {
            color: black;
        }

    .tableNormal tr td {
        padding: 2px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .tableNormal tr:hover td {
        background-color: #EFEFEF;
    }

.tablegrid tr th {
    background-color: #F8CF68;
    color: #006498;
    font-family: Sans-Serif;
    font-weight: bold;
    padding: 2px;
    text-align: left;
    word-break: break-work;
}

.tablegrid tr td {
    word-break: break-work;
    padding: 2px;
}

.tablegrid tr:hover td {
    background-color: #D9D9D9;
}

.tablesearch tr th {
    background-color: #F8CF68;
    color: #006498;
    font-family: Sans-Serif;
    font-weight: bold;
    padding: 2px;
    text-align: left;
}

.tablesearch tr td {
    word-break: break-all;
    padding: 2px 5px;
}

    .tablesearch tr td input[type="text"], select {
        border: 1px solid #0480BE;
    }

    .tablesearch tr td:last-child {
        /*border-right:1px solid gray;*/
    }


    .tablesearch tr td input, .SelectSearch {
        width: 96%;
    }

    .tablesearch tr td .TextboxSearchDate {
        width: 87%;
    }


.GrayRow {
    background-color: #EFEFEF;
}

.WhiteRow {
    background-color: white;
}

.TrRejectPackage td {
    color: red;
    border-right-color: black;
}

    .TrRejectPackage td a {
        color: red;
    }

        .TrRejectPackage td a:hover {
            color: blue;
        }

        .TrRejectPackage td a:visited {
            color: #993333;
        }

.TrRecordedPackage td a:visited {
    color: #0066ff;
}



.tablegridSearch {
    margin: 10px auto;
    border: 1px solid #666;
}

    .tablegridSearch tr th {
        border: 1px solid #666;
        background-color: #F8CF68;
        color: #006498;
        font-family: Sans-Serif;
        font-size: 10pt;
        font-weight: bold;
        padding: 2px;
    }

    .tablegridSearch tr td {
        border-right: 1px solid #666;
        word-break: break-all;
        padding: 2px;
    }

.tableSearchcriteria tr th {
    background-color: #F8CF68;
    color: #006498;
    font-family: Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    padding: 2px;
}

.tableSearchcriteria tr td {
    padding: 5px;
    border-right: 1px solid #666;
}

    .tableSearchcriteria tr td select {
        border: 1px solid #006498;
        width: 100%;
    }

    .tableSearchcriteria tr td input[type="text"], input[type="password"], input[type="submit"], input[type="button"] {
        width: 98%;
    }

.tableFormInput {
    border: none;
    border-collapse: collapse;
    table-layout: fixed;
}

    .tableFormInput tr td {
        padding: 5px;
        vertical-align: top;
        word-wrap: break-word;
    }

    .tableFormInput .TdFormInputLabel {
        width: 125px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .tableFormInput .TdFormInputInput {
        /*width:240px;*/
    }

        .tableFormInput .TdFormInputInput > input[type="text"], input[type="password"], input[type="file"], select {
            width: 98%;
        }

    .tableFormInput tr td select {
        border: 1px solid #006498;
        width: 100%;
        border-radius: 2px;
    }

    .tableFormInput tr td input[type="text"], input[type="password"], input[type="file"] {
        border: 1px solid #006498;
        width: 98%;
        border-radius: 2px;
        /*-webkit-appearance: none;
    border: solid 1px #006449;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 0 rgba(255, 255, 255, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 0 rgba(255, 255, 255, .075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 0 rgba(255, 255, 255, .075);
    /*box-sizing: border-box !important;*/
        /*padding: 3px 5px;*/
    }


.tableNoValidateBorder tr td input[type="text"], input[type="password"], input[type="file"] {
    border: 1px solid #006498 !important;
}

.tableNoValidateBorder tr td select {
    border: 1px solid #006498 !important;
}

.tableFormInput tr td .RequiredField {
    color: red;
}

/* Update focus field */
.ErrorFocused {
    background: #a8cffb;
}

    .ErrorFocused[type="checkbox"] {
        outline: 5px solid #a8cffb !important;
    }


    .ErrorFocused option {
        background: white;
    }

.WebUIButton {
    display: block;
    max-width: 150px;
    font-weight: bold;
    display: inline;
    border: 1px solid #006498;
    background-color: #74B83D;
    text-decoration: none;
    color: White;
    padding: 2px 10px;
}

.WebUIButtonBuk {
    display: block;
    font-weight: bold;
    display: inline;
    border: 1px solid #006498;
    background-color: #74B83D;
    text-decoration: none;
    color: White;
    padding: 2px 10px;
}



    .WebUIButtonBuk:hover {
        background-color: #0480be;
        cursor: pointer;
    }


.DisabledButton {
    background: #808080 !important;
    cursor: no-drop !important;
}

.RedWebUIButton {
    display: block;
    max-width: 150px;
    font-weight: bold;
    display: inline;
    border: 1px solid #A55B02;
    background-color: orange;
    text-decoration: none;
    color: White;
    padding: 2px 10px;
}

    .RedWebUIButton:hover {
        color: #006498;
        cursor: pointer;
    }

.WebUIButton:hover {
    color: #006498;
    cursor: pointer;
}

tr.EvenRow {
    background-color: white;
}

tr.OddRow {
    background-color: #F4F6FA;
}

.StyleDocValue {
    width: 166px;
    padding: 0px !important;
}

.StyleValue {
    /*max-width:13px;*/
    padding-left: 0px !important;
    width: 292px;
}

a.WebUIButton {
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #006498;
    background-color: #74B83D;
    text-decoration: none;
    color: White;
    padding: 2px 10px;
}

    a.WebUIButton:hover {
        color: #006498;
        cursor: pointer;
    }

.DisabledButton {
    background: #808080;
}

select {
    max-width: 335px;
    padding: 2px;
    border: 1px solid #0480be;
}

input, textarea {
    max-width: 357px;
    padding: 2px;
    border: 1px solid #cacaca;
}

    input[type="checkbox"]:hover {
        cursor: pointer;
    }

.clearboth {
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
}

.h2Header {
    text-align: left;
    padding: 3px 5px 3px 5px;
    margin: 5px auto;
    background-color: #F8CF68;
    color: #006498;
    font-size: 10pt;
}

.ErrorMessage {
    margin-left: 20px;
    color: #9A1313;
}

.WebUIFieldset {
    border: 1px solid #5C87B2;
    padding: 5px;
    border-image: initial;
    margin: 10px auto;
}

.WebUIFieldsetNews {
    border: 1px solid #D4D4D4;
    padding: 5px;
    border-image: initial;
    margin: 10px auto;
}

    .WebUIFieldsetNews legend {
        color: #006498;
        font-family: Sans-Serif;
        font-weight: bold;
        padding-bottom: 2px;
        margin-left: 5px;
    }

.WebUIFieldset legend {
    color: #006498;
    font-family: Sans-Serif;
    font-weight: bold;
    padding-bottom: 2px;
    margin-left: 5px;
}

.NewCounty {
    position: absolute;
    font-style: italic;
    padding-left: 2px;
    color: red;
    font-size: 10px;
    top: 0px;
}

.EditIcon {
    display: block;
    width: 16px;
    height: 16px;
    background: url(Images/edit.png) no-repeat;
    text-decoration: none;
    float: left;
}

.DeleteIcon {
    display: block;
    width: 16px;
    height: 16px;
    background: url(Images/del.png) no-repeat;
    text-decoration: none;
}

.DivCoverDatePicker {
    position: relative;
}

.SpanCover {
    position: relative;
}

.SpanDatePicker {
    position: absolute;
    right: 2px;
    top: 2px;
}

.DynamicSpanDatePicker {
    position: absolute;
    right: 2px;
    top: -1px;
}

    .DynamicSpanDatePicker:hover {
        cursor: pointer;
    }

.SpanDatePicker:hover {
    cursor: pointer;
}

.ImgDatePicker {
    display: block;
    width: 16px;
    height: 16px;
    background: url(Images/calendar/cal.gif) no-repeat top right;
    float: right;
    padding-left: 5px;
}


.TableList {
    margin: 5px;
    width: auto;
}

    .TableList tr th {
        background: #336699;
        color: white;
        padding: 2px;
    }

    .TableList tr td {
        padding: 2px;
    }


/*==== Style for Tab Panel======*/
#TabPanel {
    margin-top: 60px;
    border: 1px solid #666;
    position: relative;
}

    #TabPanel #TabHeader {
        position: absolute;
        top: -24px;
        left: -1px;
        background-color: white;
        width: 100%;
    }

.ULTab {
    list-style: none;
}

    .ULTab li {
        display: inline;
    }

        .ULTab li a {
            font-weight: normal;
            display: inline;
            border: 1px solid #097054;
            background-color: #EEE;
            text-decoration: none;
            color: #0480be;
            padding: 5px 5px 4px 5px;
            font-size: 13px;
            border-bottom: 1px solid white;
            border-top: 2px solid;
        }

            .ULTab li a:hover {
                color: #57a957;
            }

        .ULTab li .TabSelected {
            font-weight: bold;
            padding: 8px 5px 6px 5px;
            background-color: white;
            border-bottom: 1px solid White;
        }

            .ULTab li .TabSelected:hover {
                color: #0480be;
            }

.tab_content {
    display: none;
}

/*==============================*/


/*===========BREADCRUMBS===========*/
.BreadCrumbs {
    list-style: none;
    margin-left: 5px;
}

    .BreadCrumbs li {
        float: left;
        padding: 5px;
        margin-left: -10px;
    }

        .BreadCrumbs li a {
            background: url(Images/Breadcrumbs/BreadCrumb.png) no-repeat;
            width: 96px;
            height: 25px;
            padding-top: 4px;
            padding-left: 15px;
            display: block;
            font-size: 12px;
            font-weight: bold;
            color: #006498;
        }

        .BreadCrumbs li:first-child a {
            background: url(Images/Breadcrumbs/BreadCrumb_Home.png) no-repeat;
            width: 41px;
            height: 25px;
            padding-top: 4px;
            padding-left: 15px;
            display: block;
            font-size: 12px;
            font-weight: bold;
            color: #006498;
        }


        .BreadCrumbs li a:hover {
            color: blue;
        }

        .BreadCrumbs li span {
            padding: 5px 5px 5px 5px;
            font-weight: bold;
            display: block;
        }

/*==============================*/

ul.QuickLinksUL {
    margin-left: 20px;
}


a {
    color: Blue;
}

table.TableLayoutFixed {
    table-layout: fixed;
    width: 100%;
}

.LinkActionButton {
    font-weight: bold;
    display: inline;
    border: 1px solid #006498;
    background-color: #74B83D;
    text-decoration: none;
    color: White;
    padding: 2px 5px;
}

    .LinkActionButton:hover {
        background-color: #0480be;
    }

p, ul {
    margin-top: 0;
    line-height: 1.6em;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
}

h1 {
    font-size: 1.7em;
    padding-bottom: 0;
    margin-bottom: 0px;
    margin-top: 0px;
}

h2 {
    padding: 0 0 10px 0;
    margin-top: 0px;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

.spanBold {
    padding: 3px 5px 3px 5px;
    font-weight: bold;
}

.plainLink {
    text-decoration: none;
    border: 1px solid #DDD;
    padding: 1px;
    font-weight: bold;
    margin: 0px 5px;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0;
}
/*------- styles for validation helpers --------------------------------------*/
.field-validation-error {
    color: red;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid red !important;
}

select.input-validation-error {
    border: 1px solid red !important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: red;
}

    .validation-summary-errors ul {
        margin-left: 20px;
    }

.validation-summary-valid {
    display: none;
}


/*------------- Style for Home Layout --------------------------------*/
#page {
    width: 1225px;
    margin: 0px auto;
}

body#Home #menucontainer {
    width: 100%;
    height: 53px;
    background-image: url(Images/BlueTopNav.png);
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
    position: relative;
}

    body#Home #menucontainer #menu {
        padding-top: 10px;
        list-style: none;
    }

        body#Home #menucontainer #menu li {
            display: inline;
            background-image: url(Images/BlueBarWhiteLine.png);
            background-repeat: no-repeat;
            background-position: right;
        }

            body#Home #menucontainer #menu li a {
                color: white;
                font-size: 14px;
                font-weight: bold;
                text-decoration: none;
                padding: 20px 20px;
                text-transform: uppercase;
            }

                body#Home #menucontainer #menu li a:hover {
                    color: #CAF094;
                }

                body#Home #menucontainer #menu li a.selected {
                    background-color: #74B83D;
                }
/*============CSS FOR MAIN MENU=============*/
#menu li a.selected {
    background-color: #74B83D;
}

#menu #LoginLink span {
    font-size: 14px;
    color: white;
}

#menu #LoginLink #SpanUserName {
    color: #62c462;
    font-weight: bold;
}

#menu li {
    position: relative;
}

    #menu li #LogOutLink {
        width: 25px;
        height: 25px;
        padding: 20px 10px !important;
        /*background: url(Images/LogOutIcon.png) no-repeat 50% 50%;*/
    }

        #menu li #LogOutLink:hover {
            /*background: url(Images/LogOutIconHover.png) no-repeat 50% 50%;*/
        }
/*============END CSS FOR MAIN MENU=========*/
body#Home #Title {
    width: 100%;
    height: 205px;
    position: relative;
    background: #EFF6FC url(Images/LogoBridge.png) no-repeat top left;
}
/*body#Home #TitleLogo {
    width: 1024px;
    height: 205px;
    background: url(Images/LogoBridge.png) no-repeat;
    top:0;
    left:0;
}*/

body#Home #TitleLogoText {
    position: relative;
    color: #0063BE;
    /* text-align: left; */
    font-family: Times, Helvetica, sans-serif;
    /* text-align: center; */
    display: block;
    text-align: right;
    margin-right: 50px;
    padding-top: 65px;
}

    body#Home #TitleLogoText #Author {
        position: absolute;
        right: 0px;
        bottom: -10px;
    }

body#Home #TitleLogo #Logo {
    /*width:950px;
    height:155px;
    margin-left:10px;
    /*background: url(Images/LogoBridge.png) no-repeat top left;
    padding-top:10px;*/
}


#main {
    text-align: left;
    /*background-image: url(Images/WhiteBackground.png);
    background-repeat: repeat-y;*/
    _height: 1px;
    /*width: 100%;*/
    background-size: contain;
    padding-bottom: 0px;
    min-height: 550px;
    overflow: hidden;
    background-color: white;
    position: relative;
}

#mainCenter {
    vertical-align: top;
}

#mainLeft {
    width: 38px;
    background: url(Images/BGMainLeft.png) repeat-y top left;
}

#mainRight {
    width: 38px;
    background: url(Images/BGMainRight.png) repeat-y top left;
}


#footer {
    clear: both;
    padding: 0px;
    text-align: center;
    line-height: normal;
    font-size: .9em;
    /*background-image: url(Images/BottomNav.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;*/
    height: 49px;
    color: #39C;
    /*width: 1024px;*/
    margin: 0px auto;
    z-index: 0;
}

#footerLeft {
    width: 38px;
    height: 49px;
    background: url(Images/BGFooterLeft.png) no-repeat;
}

#footerRight {
    width: 38px;
    height: 49px;
    background: url(Images/BGFooterRight.png) no-repeat;
}

#footerCenter {
    height: 49px;
    background: url(Images/BGFooterCenter.png) repeat-x top left;
}

#footer #footerWrap {
    width: 717px;
    height: 30px;
    margin: 0px auto;
    margin-top: 9px;
    padding-top: 5px;
    background: url(Images/BGFooterContent.png) no-repeat;
}

#footer #FooterSlogan {
    display: block;
    float: left;
    width: 50%;
    text-align: center;
    font-size: 10px;
}

#footer #FooterLink {
    list-style: none;
}

    #footer #FooterLink li {
        display: inline;
    }

        #footer #FooterLink li a {
            text-decoration: none;
            padding: 0px 2px;
            border-right: 1px solid #39c;
            color: #39c;
        }

        #footer #FooterLink li:last-child a {
            border: none;
        }

        #footer #FooterLink li a:hover {
            color: #006498;
        }

#main #MainAreaContent {
    /*width: 870px;*/
    width: 99%;
    margin: 30px auto;
    margin-top: 30px;
}

#HomeContent {
}

#MainAreaContent #HomeContent .Products {
    margin: 0px auto 20px auto;
    padding: 0px 0px;
}

#MainContentLeft {
    margin: 10px auto;
}

#MainContentRight {
    min-height: 200px;
    margin-top: 10px;
}

    #MainContentRight #ListNewCounty {
    }

        #MainContentRight #ListNewCounty span {
            font-size: 13px;
        }

        #MainContentRight #ListNewCounty #ListCountyNew {
            list-style: none;
            font-size: 12px;
            /*padding-left:12px;*/
            width: 500px;
        }

        #MainContentRight #ListNewCounty #ListCounty li {
            width: 500px;
        }



.NewsTitle {
    vertical-align: top;
    width: 35%;
    font-weight: bold;
}

.NewsContent {
    width: 65%;
    margin-left: 10px;
    position: relative;
}

.NewsReadMore {
    position: absolute;
    right: 10px;
    bottom: -1px;
}


#ProductList {
    width: 16%;
    min-width: 183px;
    max-width: 183px;
    margin: 0px 0px 0px 0px;
    background-image: url(Images/SideNav.png);
    background-repeat: no-repeat;
    vertical-align: top;
}

#ProductContent {
    padding: 5px;
}

#Send {
    width: 150px;
    padding: 45px 10px 10px 10px;
}

    #Send .ProductListHeading {
        border-bottom: solid 1px #90CEFF;
    }

.ProductListHeadingText {
    color: white;
    font-size: 1.5em;
    display: block;
    width: 100%;
    text-align: center;
}

#Send a {
    text-align: center;
    color: #90CEFF;
    text-decoration: none;
    font-size: 1.4em;
    line-height: 1.6em;
    display: block;
}

    #Send a:hover {
        color: white;
    }

#Receive {
    width: 150px;
    margin: 60px 15px 15px 10px;
}

    #Receive .ProductListHeading {
        border-bottom: solid 1px #CAF094;
    }

    #Receive a {
        text-align: center;
        color: #CAF094;
        text-decoration: none;
        font-size: 1.4em;
        line-height: 1.6em;
        display: block;
    }

        #Receive a:hover {
            color: white;
        }

.Area2 {
    float: right;
    width: 290px;
}

#PageContentHeader {
    height: 20px;
    background-image: url(Images/LightBlueBoxTop.png);
    background-repeat: no-repeat;
}

#PageContentMain {
    margin-top: 0;
    margin-bottom: 0;
    background-image: url(Images/LightBlueBoxSlice.png);
    background-repeat: repeat-y;
}

    #PageContentMain h2 {
        padding: 0px 15px;
        color: #39C;
    }

    #PageContentMain p {
        padding: 15px;
        text-align: justify;
    }

#PageContentFooter {
    height: 20px;
    background-image: url(Images/LightBlueBoxBottom.png);
    background-repeat: no-repeat;
}

body#Home .Area1 {
    width: 320px;
}

#News {
    padding: 8px;
    width:;
}

    #News h2 {
        padding: 5px 0px;
    }

    #News p {
        text-align: justify;
    }

.Area1 {
    margin-left: 25px;
}
/*------ Style for WebUI Master Layout ----------------------------------------*/
body#WebUI {
    background-color: #BFDAF2;
}

    body#WebUI #header {
        background-color: white;
    }

    body#WebUI #Logo {
        width: 290px;
        height: 103px;
        float: left;
    }
    body#WebUI #NewSiteMessage {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        font-size: x-large;
        font-weight: bold;
        color: black;
        background-color: White;
        border-radius: 25px;
        padding-left: 10px;
        padding-right: 10px;
    }	

    body#WebUI ul#menu {
        height: 55px;
        padding-top: 50px;
        position: relative;
        margin: 0px 0px 0px 285px;
        background-image: url(Images/EpnWebUiMenu.png);
        background-repeat: repeat-x;
        list-style: none;
    }

    body#WebUI #Logo #ImgLogo {
        text-decoration: none;
        display: block;
        width: 285px;
        height: 103px;
        /*background-image: url(Images/EpnWebUiLogo.png);*/
        background-repeat: no-repeat;
        background-position: left;
    }

    body#WebUI #menu li {
        display: inline;
        background-image: url(Images/BlueBarWhiteLine.png);
        background-repeat: no-repeat;
        background-position: right;
    }

body#Home #menucontainer #menu #LoginLink {
    position: absolute;
    background-image: none;
    right: 0px;
}

body#WebUI #menu #LoginLink {
    position: absolute;
    background-image: none;
    right: 35px;
}

body#WebUI #menu li a {
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    padding: 20px 20px;
    text-transform: uppercase;
}

    body#WebUI #menu li a:hover {
        color: #CAF094;
    }

    body#WebUI #menu li a.active {
        background-color: #74B83D;
    }

.UserNewsHeadline {
    font-weight: bold;
    font-size: 11pt;
}

input.FilenameInput {
    width: 400px;
}

.validation-summary-valid {
    display: none;
}
/*----------------------------------- Pager------------------------------------ */
.pager {
    margin: 8px 3px;
    padding: 5px 0 0 3px;
}

    .pager .disabled {
        border: 1px solid #ddd;
        color: #999;
        margin-top: 4px;
        padding: 3px;
        text-align: center;
    }

    .pager .current {
        background-color: #6ea9bf;
        border: 1px solid #6e99aa;
        color: #fff;
        font-weight: bold;
        margin-top: 4px;
        padding: 3px 5px;
        text-align: center;
    }

    .pager span, .pager a {
        margin: 4px 3px;
    }

    .pager a {
        border: 1px solid #aaa;
        padding: 3px 5px;
        text-align: center;
        text-decoration: none;
    }

        .pager a:hover {
            background-color: #90CEFF;
        }
/*----------------------------------- Sort------------------------------------ */
div.sortASC {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 8px;
    height: 4px;
    background: url('Images/Arrow_up_bullet.png') no-repeat;
}

div.sortDESC {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 8px;
    height: 4px;
    background: url('Images/Arrow_down_bullet.png') no-repeat;
}

#tblOrgs div.sortASC {
    position: absolute;
    top: 5px;
    left: 60px;
    width: 8px;
    height: 4px;
    background: url('Images/Arrow_up_bullet.png') no-repeat;
}

#tblOrgs div.sortDESC {
    position: absolute;
    top: 5px;
    left: 60px;
    width: 8px;
    height: 4px;
    background: url('Images/Arrow_down_bullet.png') no-repeat;
}

/* Style message warning*/
.warning2 {
    color: #9A1313;
    font-weight: bold;
}

.warning {
    background-color: #9A1313;
    color: white;
    padding: 2px;
    font-weight: bold;
}

.OrangeWebUIButton {
    font-family: Sans-Serif;
    font-size: 9pt;
    font-weight: bold;
    border: 1px solid #006498;
    color: #FFFFFF;
    background-color: Orange;
    text-decoration: none;
    padding: 3px;
}

/* upload file*/
.progress {
    overflow: hidden;
    height: 18px;
    margin-bottom: 18px;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .progress .bar {
        width: 0%;
        height: 18px;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #0e90d2;
        background-image: -moz-linear-gradient(top, #149bdf, #0480be);
        background-image: -ms-linear-gradient(top, #149bdf, #0480be);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
        background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
        background-image: -o-linear-gradient(top, #149bdf, #0480be);
        background-image: linear-gradient(top, #149bdf, #0480be);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: width 0.6s ease;
        -moz-transition: width 0.6s ease;
        -ms-transition: width 0.6s ease;
        -o-transition: width 0.6s ease;
        transition: width 0.6s ease;
    }

.progress-striped .bar {
    background-color: #62c462;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress.active .bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.progress-success .bar {
    background-color: #5eb95e;
    background-image: -moz-linear-gradient(top, #62c462, #57a957);
    background-image: -ms-linear-gradient(top, #62c462, #57a957);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
    background-image: -webkit-linear-gradient(top, #62c462, #57a957);
    background-image: -o-linear-gradient(top, #62c462, #57a957);
    background-image: linear-gradient(top, #62c462, #57a957);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}

.progress-success.progress-striped .bar {
    background-color: #62c462;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
/* Toggle style */



/*============CSS FOR ERROR LAYOUT=============*/
#ErrorPage {
    width: 650px;
    margin: 20px auto;
    border: 1px solid #cacaca;
}

#ErrorIcon {
    float: left;
    width: 150px;
    font-size: 22px;
}

#ErrorLayout {
    width: 500px;
    float: right;
}

    #ErrorLayout .h3Header {
        width: 100%;
        font-weight: bold;
        border-bottom: 1px solid #cacaca;
        margin: 10px auto;
        padding-bottom: 5px;
    }

    #ErrorLayout #ErrorStatckTrace {
        width: 100%;
        min-height: 200px;
        overflow: auto;
        display: none;
        font-size: 12px;
    }

    #ErrorLayout .h3Header #ExpandStackTrace {
        display: block;
        float: left;
        padding-left: 8px;
        width: 15px;
        height: 20px;
        border: 1px solid #CACACA;
        margin-right: 7px;
        font-size: 18px;
        text-decoration: none;
        color: #006498;
    }
/*===========END CSS FOR ERROR LAYOUT==========*/

/*===========CSS FOR DIALOG====================*/
.ui-button {
    padding: 7px 0px;
}

    .ui-button .ui-button-text {
        padding: 0px 20px;
    }

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-radius: 0px;
}
/*===========END CSS FOR DIALOG================*/



/*********** Custom Dropdown ************/
.TextDropdown {
    font-family: Calibri, Helvetica, Geneva;
    width: 98% !important;
    border: 1px solid #006498;
    padding: 3px 1px 3px 3px;
    padding-top: 2px;
    color: black;
}

.ListDropdown {
    font-size: 11px;
}

    .ListDropdown li {
        position: relative;
        padding: 0px 5px 0px 5px;
        font-size: 11px !important;
    }

        .ListDropdown li:hover {
            background: #3399ff;
            cursor: default;
            color: White;
        }

    .ListDropdown .targetLISelected {
        background: #3399ff;
        color: White;
    }

.ButttonDropdown {
    width: 18px;
    display: block;
    border: none;
    background: url('Images/btDropdown.png') no-repeat;
    position: absolute;
    right: 1px;
    top: 1px;
    text-decoration: none;
    color: silver;
    height: 18px;
}

.NavDropdown {
    width: 200px;
    height: 18px;
    padding-top: 0px;
}

/****************************************/




/* CSS for Process Add WIP Package Screen */
#BreadCrumbs {
    height: 27px;
    width: 100%;
    border: 1px solid #cacaca;
}

#BreadCrumbWIP {
    list-style: decimal;
    margin: 0px;
}

    #BreadCrumbWIP li {
        display: block;
        float: left;
        padding: 5px 10px;
    }

    #BreadCrumbWIP .BreadHere {
        color: #0094ff;
        font-weight: bold;
    }

    #BreadCrumbWIP li a {
        text-decoration: none;
        color: #666;
    }

.TableWIPDetails {
    border-collapse: collapse;
    border-spacing: 0;
}



    .TableWIPDetails tr td {
        padding: 2px;
        vertical-align: top;
    }



    .TableWIPDetails tr:hover td {
        background: #EFEFEF;
    }

    .TableWIPDetails tr th {
        padding: 5px 0px;
        background: #E0E4CC;
        border-bottom: 2px solid #cacaca;
        color: #666;
        text-align: left;
    }

.TableWIPInfo tr td {
    vertical-align: top;
    padding: 5px 1px;
}

.GreenWIP {
    display: block;
    width: 25px;
    height: 25px;
    background-color: #4cff00;
    border: 2px solid green;
}

.GreenWIPDoc {
    display: block;
    width: 15px;
    height: 15px;
    background-color: #4cff00;
    border: 2px solid green;
    float: left;
    margin-right: 10px;
}

.SpanStep {
    color: #ff6a00;
    font-size: 15px;
    font-weight: bold;
}

.HeaderBold {
    font-size: 15px;
    font-weight: bold;
    display: block;
    width: 100%;
    background-color: #cacaca;
    padding: 2px;
}

.RedWIP {
    display: block;
    width: 25px;
    height: 25px;
    background-color: #ff6a00;
    border: 2px solid #ff0000;
}

.ShowHideSpan {
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    background-color: #0094FF;
    color: white;
    text-align: center;
    margin-right: 5px;
}

.ShowHideSpanPanel {
    display: inline-block;
    width: 30px;
    height: 25px;
    border-right: 1px solid white;
    text-align: center;
    font-size: 20px;
}


.ShowHideSpan:hover {
    background-color: black;
}

.ATitleShowHideList {
    text-decoration: none;
    font-size: 12px;
    color: #0094FF;
    font-weight: bold;
    display: block;
}

    .ATitleShowHideList:hover {
        color: black;
    }

.GroupTitleShowHide {
    margin-bottom: 5px;
    border-bottom: 1px solid #cacaca;
}

.ATitleShowHideRejectReason {
    text-decoration: none;
    font-size: 12px;
    color: #9A1313;
    font-weight: bold;
}

.ShowHideSpanRejectReason {
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    background-color: #9A1313;
    color: white;
    text-align: center;
    margin-right: 5px;
}

.ShowHideTable {
    table-layout: fixed;
    width: 90%;
    margin: 10px 0px 10px 20px;
}

    .ShowHideTable tr th {
        border-bottom: 2px solid #808080;
        text-align: left;
        background: white;
    }

    .ShowHideTable tr td {
        padding: 2px;
        border-bottom: 1px solid #cacaca;
        word-wrap: break-word;
        word-break: break-all;
        background: white !important;
        height: 12px;
    }

.BlueTR {
    /*background-color: #ffeea0;*/
}

.ListWipRequired {
    margin-left: 20px;
    margin-right: 10px;
    color: #9A1313;
}

    .ListWipRequired li a {
        color: #9A1313;
    }

#StepWipDoc {
    width: 99%;
    margin: 0px auto;
    padding: 2px;
    font-size: 11px;
}

#ListStepWipDoc {
    list-style: none;
}

    #ListStepWipDoc li {
        display: inline-block;
        position: relative;
        padding-right: 10px;
    }

        #ListStepWipDoc li a {
            color: #666;
        }

#ListWIPDocs {
    min-height: 25px;
}

#ListWIPDocsCover {
    width: 100%;
    max-height: 375px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 2px solid #cacaca;
}

/*#WipDocInputPanel {
        width: 100%;
        min-height: 352px;
        max-height: 839px;
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid #5C87B2;
    }*/

#ListWipLegalCover {
    width: 100%;
}

#ListWipPartyCover {
    width: 100%;
}

#ListWipAssocDocCover {
    width: 100%;
}


#EditRefValue, #SaveRefValue {
    /*margin-left: 10px;*/
}

.RefValueButton {
    text-decoration: none;
    padding-right: 10px;
}

    .RefValueButton:hover {
        text-decoration: underline;
    }

#WipDocInputPanel {
    width: 395px;
    vertical-align: top;
    position: relative;
    min-height: 500px;
}

#WipDocReview {
    width: 740px;
    position: relative;
    min-height: 500px;
}

/*** STEP CSS FOR EDIT WIP DOC SCREEN ***/
/******* Collapse Wip Doc **********/
.StatusExpand {
    display: inline-block;
    width: 34px;
    height: 17px;
    background: url('Images/SwitchCollapseIcon.png');
    background-position: 0px 0px;
    position: relative;
}

    .StatusExpand .Step {
        position: absolute;
        right: 1px;
        top: 1px;
        margin-right: 0px;
    }


.StatusCollapse {
    display: inline-block;
    width: 34px;
    height: 17px;
    background: url('Images/SwitchCollapseIcon.png');
    background-position: -36px 0px;
    position: relative;
}

    .StatusCollapse .Step {
        position: absolute;
        right: 1px;
        top: 1px;
        margin-right: 0px;
    }

    .StatusCollapse:hover {
        cursor: pointer;
    }

.StatusExpand:hover {
    cursor: pointer;
}

.Step {
    margin-right: 10px;
    display: inline-block;
    width: 15px;
    height: 17px;
    vertical-align: middle;
}

.Step1 {
    background: url('Images/StepWipDocIconSmall.png') no-repeat top left;
    background-position: 0px 0px;
}

.Step2 {
    background: url('Images/StepWipDocIconSmall.png') no-repeat top left;
    background-position: -15px 0px;
}

.Step3 {
    background: url('Images/StepWipDocIconSmall.png') no-repeat top left;
    background-position: -30px 0px;
}

.Step4 {
    background: url('Images/StepWipDocIconSmall.png') no-repeat top left;
    background-position: -45px 0px;
}
/****************************************/

#WIPDocDetailsPanel {
    /*padding:5px;*/
    width: 36%;
    min-width: 360px;
    max-width: 432px;
    /*border:1px solid #cacaca;*/
}

#WipDocReview {
    vertical-align: top;
    padding-left: 5px;
}

#WIPDocReviewPanel {
    /*border:1px solid #cacaca;*/
}

.AdditionalInfoCover {
    border-left: 1px solid #cacaca;
}

.GroupShowHideAdditionalInfo {
    width: 100%;
}

.LegalInfoTable {
    table-layout: fixed;
}

    .LegalInfoTable tr th {
        border-bottom: 2px solid #CCC;
        word-wrap: break-word;
    }


    .LegalInfoTable tr .DocName {
        width: 140px;
    }

    .LegalInfoTable tr .Book {
        width: 140px;
    }

    .LegalInfoTable tr .Page {
        width: 50px;
    }

    .LegalInfoTable tr .FirstName {
        width: 90px;
    }

    .LegalInfoTable tr .MiddleName {
        width: 90px;
    }

    .LegalInfoTable tr .LastName {
        width: 90px;
    }

    .LegalInfoTable tr .Type {
        width: 90px;
    }

    .LegalInfoTable tr td {
        padding: 2px;
        word-break: break-all;
        word-wrap: break-word;
    }

    .LegalInfoTable .eventr td {
        background: whiteSmoke;
    }

#CountyDocTypeNote {
    display: block;
    width: 25px;
    height: 25px;
    left: -15px;
    background: url('Images/InfoIcon.png') no-repeat;
}

.H2Step {
    margin: 0;
    padding: 0;
}
/******************************************/

#ImageDateTimePicker {
    display: block;
    width: 16px;
    height: 16px;
    background: url('Images/calendar/cal.gif') no-repeat top right;
    float: right;
    padding-left: 5px;
}

#SpanDateTimePicker {
    position: absolute;
    right: 2px;
    top: 7px;
    padding-top: -3px;
}

    #SpanDateTimePicker:hover {
        cursor: pointer;
    }

.HasImage {
    text-decoration: none;
    display: block;
    width: 18px;
    height: 18px;
    background: url('Images/document_lined.png') no-repeat top left;
    margin: 0px auto;
}

    .HasImage:hover {
        cursor: default;
    }


/********************* STYLE FOR DYNAMIC PANEL****************************************/
.FormDynamicInputPanel {
    width: 375px;
    margin-left: 5px;
}

.ShowOneLine {
    width: 100%;
}

.OneLineTextField {
    width: 90%;
    float: left;
}

    .OneLineTextField .FormLabel {
    }

    .OneLineTextField input[type="text"], select {
        width: 100%;
        border: 1px solid #006498 !important;
    }

.OneLineRequiredField {
    width: 10%;
    float: right;
}

.OneLineErrorMessage {
    padding: 0px 15px;
}

.ShowMultiLine {
    float: left;
}

.MultiLineTextField {
    width: 100%;
    float: left;
}

    .MultiLineTextField input[type="text"] {
        width: 95%;
        border: 1px solid #006498 !important;
    }

    .MultiLineTextField select {
        width: 98%;
        border: 1px solid #006498 !important;
    }

.MultiLineRequiredField {
    width: 8%;
    float: right;
}


.OneRowClearBoth {
    display: block;
    width: 100%;
    height: 5px;
    clear: both;
}

.GroupMultiTextBox input[type="text"] {
    width: 90%;
}

.GroupMultiTextBox select {
    width: 98%;
}


.AutoCompleteUL {
    width: 99%;
    background: white;
    z-index: 1000;
}

    .AutoCompleteUL li {
        color: black;
        padding: 0px 3px;
    }


        .AutoCompleteUL li.LiSelectable:hover {
            background: #3399ff;
            color: white;
        }

.AutoCompleteUL {
    max-height: 200px;
    overflow-y: auto;
}

    .AutoCompleteUL .targetLISelected {
        background: #3399ff;
        color: White;
    }
/*************************************************************************************/


.TableDynamic {
    table-layout: fixed;
    width: auto;
    margin: 5px;
}

    .TableDynamic tr td {
        word-wrap: break-word;
        word-break: break-all;
        padding: 5px;
    }

    .TableDynamic tr .TdAction {
        word-break: normal !important;
        word-wrap: normal !important;
    }

.dynamic-input-error {
    border: 1px solid red;
}

.DynamicPanelErrorMessage {
    list-style: none;
    color: red;
    margin-left: -10px;
}

    .DynamicPanelErrorMessage .dynamicWarningLi:hover {
        color: blue;
        cursor: pointer;
    }


    .DynamicPanelErrorMessage .dynamicWarningLi {
        background: url('Images/WarningIcon.png') no-repeat top left;
        padding-left: 20px;
        position: relative;
    }

.dynamicWarningLi ul li span {
    font-weight: bold;
}

.dynamicWarningLi ul {
    display: none;
    background: white;
    border: 1px solid #cacaca;
    color: black;
    padding: 5px 20px;
}

.dynamicWarningLi:hover ul {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
}

.DynamicPanelErrorMessage .dynamicInvalidFormatLi {
    background: url('Images/QuestionMarkIcon.png') no-repeat top left;
    padding-left: 20px;
    position: relative;
}

.DynamicPanelErrorMessage .dynamicNormalMessage {
    background: url('Images/DottedIcon.png') no-repeat top left;
    padding-left: 20px;
    position: relative;
}

#DynamicPanel {
    width: 100%;
    max-height: 800px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-top: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
}

.DynamicPanelErrorMessage .dynamicInvalidFormatLi .tooltipMasking {
    display: none;
    color: black;
    margin: 0;
    padding: 5px 20px;
    background: white;
    border: 1px solid #cacaca;
}

    .DynamicPanelErrorMessage .dynamicInvalidFormatLi .tooltipMasking li span {
        font-weight: bold;
    }

.DynamicPanelErrorMessage .dynamicInvalidFormatLi:hover {
    color: blue;
    cursor: pointer;
}

    .DynamicPanelErrorMessage .dynamicInvalidFormatLi:hover .tooltipMasking {
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 1000;
    }

.OrderUpDoc {
    display: block;
    background: url('Images/OrderUp.png') no-repeat top left;
    width: 15px;
    height: 15px;
    float: left;
    text-decoration: none;
    margin-right: 5px;
}

.OrderDownDoc {
    display: block;
    background: url('Images/OrderDown.png') no-repeat top left;
    width: 15px;
    height: 15px;
    float: left;
    text-decoration: none;
    padding-top: 5px;
}

.OrderUpDoc:hover {
    background: url('Images/OrderUpHover.png') no-repeat top left;
}

.OrderDownDoc:hover {
    background: url('Images/OrderDownHover.png') no-repeat top left;
}

.ShowHideDocPanel {
    position: relative;
    background: #428bca;
    color: #fff;
    cursor: pointer;
    margin-bottom: 5px;
    width: 397px;
}

.PanelHeaderText {
    position: absolute;
    top: 8px;
    left: 35px;
    text-transform: uppercase;
    font-size: 13px;
}

.ButtonPanelHeader {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid white;
    border-radius: 15px;
    text-decoration: none;
    margin: 0px 2px;
}

    .ButtonPanelHeader:hover {
        border: 1px solid #62c462;
    }

.ButtonSave {
    background: url('Images/SaveDocIcon.png') no-repeat top left;
    background-position: 7px 6px;
}

.ButtonSaveAndAddNew {
    background: url('Images/SaveDocIcon.png') no-repeat top left;
    background-position: -13px 7px;
}

.ButtonCancel {
    background: url('Images/SaveDocIcon.png') no-repeat top left;
    background-position: -34px 6px;
}

.CollapsePanel {
    position: relative;
}

.SpanCollapsePanel {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid white;
    text-align: center;
    font-size: 16px;
    background: #428bca;
    right: 10px;
    top: -25px;
    color: white;
    cursor: pointer;
}

.WipPackageMenu {
    position: fixed;
    top: 20%;
    left: 0px;
    background: white;
    width: 25px;
}

    .WipPackageMenu ul li {
        padding: 5px;
        border-bottom: 1px solid white;
        text-align: center;
        font-size: 18px;
        color: white;
        background: #0480BE;
        position: relative;
    }

.WipPackageMenuUL li:hover {
    cursor: pointer;
    background: #57a957;
}

.WipPackageMenuUL li > ul {
    list-style: none;
    display: none;
}

.WipPackageMenuUL li.RejectReason {
    background: #9A1313;
    color: white;
}

.WipPackageMenuUL li:hover > ul {
    position: absolute;
    top: 0px;
    left: 25px;
    display: block;
    min-width: 220px;
}

    .WipPackageMenuUL li:hover > ul li {
        text-align: left;
        padding: 1px;
        padding-bottom: 0px;
        padding-left: 5px;
    }

#frmMainDocEntry .input-validation-error {
    border: 1px solid #006498 !important;
}

#NoOfDocValue {
    border: 1px solid;
    padding: 2px 10px;
    border-radius: 2px;
    font-size: 15px;
    font-weight: bold;
}

.more-block ul {
    margin-left: 20px;
}

.aShowHideCommon {
    display: inline-block;
    padding-top: 5px;
    text-decoration: underline;
    cursor: pointer;
}

#CountyDocTypeNote:hover {
    cursor: pointer;
}

    #CountyDocTypeNote:hover #CountyDoctypeNoteContent {
        position: absolute;
        display: block !important;
        top: 25px;
        right: 0px;
        width: 365px;
        background: white;
        z-index: 1000;
        border: 1px solid #666;
        padding: 10px;
        border-radius: 5px;
    }

        #CountyDocTypeNote:hover #CountyDoctypeNoteContent ul {
            margin-left: 20px;
        }

.warningMessage {
    font-weight: bold;
    color: #ff8c00 !important;
    text-decoration: none;
}

    .warningMessage:hover {
        color: #428bca !important;
    }

.ListWipRequired .warning2:hover {
    color: #428bca;
}



/******** STEP WIP DOC ******/
#StepWipDocBar {
    width: 343px;
    height: 41px;
    background: url('Images/StepWipDocBar.png') no-repeat top left;
    margin: 0px auto;
}

    #StepWipDocBar ul li {
        list-style: none;
        display: inline-block;
        width: 33px;
        height: 33px;
        margin-right: 44px;
        margin-left: 18px;
    }

        #StepWipDocBar ul li:last-child {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }

#ReadMoreLink {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.tblNews tr td {
    padding: 5px;
    border-spacing: 2px;
    border-bottom: 1px dotted #cacaca;
}

.tblNews tr .tdNewsHeader {
}

.tblNews tr .tdNewsContent {
    background: #f5f5f5;
}


.tblMsgSubmitPkg tr th {
    background: #cacaca;
    padding: 3px;
}

.tblMsgSubmitPkg tr td {
    padding: 3px;
}

.tblMsgSubmitPkg tr.HoverAble:hover td {
    background: #f5f5f5;
}

.tblMsgSubmitPkg tr.groupHeader td {
    border: solid 1px #CCC;
    border-width: 1px 0 0 0;
}

.tblMsgSubmitPkg tr.HoverAble td.errorDetail, .tblMsgSubmitPkg p.errorDetail {
    color: red;
}

.Height0px {
    height: 0px !important;
}

.CollapseListWipDoc {
    cursor: pointer;
    display: inline-block;
    width: 25px;
    height: 23px;
    text-align: center;
    position: absolute;
    top: -12px;
    right: 0px;
    font-size: 15px;
}

.ShowListWipDoc {
    background: url('Images/ToogleListWipDocIcon.png') no-repeat;
    background-position: 2px 3px;
}

.HideListWipDoc {
    background: url('Images/ToogleListWipDocIcon.png') no-repeat;
    background-position: -19px 3px;
}

#SubmitPacakgeMenuSection {
    width: 172px;
    height: 40px;
    position: fixed;
    top: 0px;
    left: 463px;
    background: url('Images/SubmitPackageSectionBG.png') repeat-x top left;
    cursor: move;
    z-index: 100;
    border: 1px solid #cacaca;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

    #SubmitPacakgeMenuSection #DockSubmitDialogICO {
        display: block;
        cursor: pointer;
        margin-top: 10px;
        background: url('Images/MinimizeDialogIcon.png') repeat-x top left;
        width: 10px;
        height: 10px;
    }

    #SubmitPacakgeMenuSection:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

#SubmitIcon {
    width: 64px;
    height: 24px;
    background: url('Images/SubmitButtonICO.png') no-repeat top left;
    float: left;
    margin-top: 7px;
}

#SubmitContent {
    text-align: center;
}

#SubmitPackageMenuDock {
    width: 20px;
    height: 25px;
    position: fixed;
    top: 0px;
    left: 0px;
    cursor: pointer;
    z-index: 100;
    opacity: 1;
    background: white;
    /* padding: 12px; */
    font-size: 17px;
    padding: 5px 0px 0px 10px;
    font-weight: bold;
    color: white;
}

/************  FOR SHOW LOADING IMG *****************/
#dvImgLoadingCover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

#dvImgLoadingOverlay {
    width: 100%;
    height: 100%;
    background: white;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter: alpha(opacity=50);
    /* Netscape */
    -moz-opacity: 0.5;
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    /* Good browsers */
    opacity: 0.5;
}

#dvContentProgress {
    width: 300px;
    height: 45px;
    position: absolute;
    left: 50%;
    top: 25%;
    margin-left: -150px;
    background: white;
    border: 1px solid #666;
    padding: 5px;
}

#imgFunctionName {
    width: 100%;
    height: 15px;
    text-align: center;
    color: black;
    margin-bottom: 5px;
}

#imgCurrentProgress {
    width: 100%;
    height: 15px;
    text-align: center;
    color: black;
}

#imgCurrentPercent {
    width: 0%;
    height: 15px;
    text-align: center;
    background: #428bca;
    margin-top: -15px;
}


/*--- CHOOSE ORG PAGE --------------------------------------------------------------*/

.choose-org {
    margin-top: 200px;
    text-align: center;
}

/*--- PRINT INVOICE PAGE --------------------------------------------------------------*/


@page {
    size: auto;
    margin: 0;
}

@media print {
    a[href]:after {
        content: none !important;
    }
}


.print-invoice {
    font-size: 14px;
    color: #333333;
}

    .print-invoice .info-table tr td:first-child {
        padding-left: 30px;
    }

    .print-invoice .info-table tr td:last-child {
        padding-right: 30px;
    }

    .print-invoice .epn-info {
        font-size: 18px;
        line-height: 25px;
        font-weight: 700;
    }

    .print-invoice .epn-logo {
        text-align: right;
    }

    .print-invoice .invoice-title {
        font-size: 22px;
        text-align: center;
        font-weight: 700;
        font-style: italic;
        padding: 20px 0px;
        text-transform: uppercase;
    }

    .print-invoice .jurisdiction {
        padding-top: 20px;
        padding-bottom: 10px;
        font-weight: 700;
        text-align: center;
        font-size: 1em;
    }

    .print-invoice .memo-col {
        max-width: 200px;
        width: auto;
    }

    .print-invoice .tablegrid tr td:first-child {
        padding-left: 5px;
    }

    .print-invoice .tablegrid tr td:last-child {
        padding-right: 5px;
    }

    .print-invoice .tablegrid tr th {
        background-color: #B3D9FF;
        color: #333333;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .print-invoice .tablegrid tr th, .print-invoice .tablegrid tr td {
        font-size: 12px;
        border: 1px solid #666666;
        padding-left: 5px;
        padding-right: 5px;
    }

    .print-invoice .tablegrid tr:last-child {
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: right;
    }


.print-rec-voucher {
    font-family: Calibri;
    font-size: 14px;
    color: #000;
}

    .print-rec-voucher .bold-italic {
        font-weight: bold;
        font-style: italic;
    }

    .print-rec-voucher .barcode {
        width: 150px;
        height: 50px;
    }

    .print-rec-voucher .lbl-instructions {
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        color: green;
        float: right;
        right: 380px;
        top: 200px;
        position: absolute;
    }

    .print-rec-voucher .lbl-jurisdiction {
        font-size: 28px;
    }

    .print-rec-voucher .lbl-jurisdiction-sub {
        font-weight: bold;
        font-style: italic;
    }

    .print-rec-voucher .lbl-rec {
        font-weight: bold;
    }

    .print-rec-voucher .lbl-header {
        font-family: Calibri;
        font-weight: 700;
    }

    .print-rec-voucher .underline {
        text-decoration: underline;
    }

    .print-rec-voucher .hold {
        position: absolute;
        z-index: 9999;
        opacity: 0.5;
        width: 100%;
        bottom: 300px;
    }

    .print-rec-voucher .tbl-header {
        font-size: 16px;
        margin-bottom: 10px;
    }

        .print-rec-voucher .tbl-header tr td:first-child, .print-rec-voucher .tbl-header tr td:last-child {
            width: 25%;
            padding-bottom: 10px;
        }

        .print-rec-voucher .tbl-header tr td {
            vertical-align: middle;
        }

    .print-rec-voucher .tbl-docs {
        text-align: center;
        margin-bottom: 25px;
    }

    .print-rec-voucher .tbl-docs-bg {
        background: #ffffff url("../Content/Images/hold.png") no-repeat;
        background-size: cover;
        -moz-background-size: cover; /* Firefox 3.6 */
        background-position: center;
        margin-bottom: 20px;
    }

    .print-rec-voucher .tbl-spec,
    .print-rec-voucher .tbl-del {
        margin-bottom: 20px;
    }


        .print-rec-voucher .tbl-docs thead,
        .print-rec-voucher .tbl-docs tbody,
        .print-rec-voucher .tbl-spec thead,
        .print-rec-voucher .tbl-spec tbody,
        .print-rec-voucher .tbl-del thead,
        .print-rec-voucher .tbl-del tbody,
        .print-rec-voucher .tbl-del thead tr td,
        .print-rec-voucher .tbl-del tbody tr td {
            border: 2px solid #000;
        }

            .print-rec-voucher .tbl-docs thead tr td {
                color: #000;
                font-weight: 700;
                text-align: center;
                padding: 5px;
                border-right: 1px solid #000;
                background-color: #e2e2e2;
            }

            .print-rec-voucher .tbl-docs tbody tr {
                border-bottom: 1px solid #cacaca;
                height: 35px;
            }

                .print-rec-voucher .tbl-docs tbody tr td {
                    padding: 5px 5px;
                    border-right: 1px solid #cacaca;
                }

            .print-rec-voucher .tbl-spec thead tr td {
                padding: 5px;
                text-align: center;
                color: #000;
            }

            .print-rec-voucher .tbl-spec tbody tr td {
                padding: 5px 5px;
                border-right: 1px solid #cacaca;
            }

                .print-rec-voucher .tbl-spec tbody tr td:first-child {
                    font-weight: 700;
                    text-align: center;
                    padding: 10px 10px;
                }

                .print-rec-voucher .tbl-spec tbody tr td:last-child {
                    vertical-align: top;
                }

            .print-rec-voucher .tbl-del thead tr td {
                font-weight: 700;
                padding: 5px;
                text-align: center;
                color: #000;
            }

            .print-rec-voucher .tbl-del tbody tr td {
                padding: 10px 10px;
                text-align: center;
                line-height: 16px;
            }

    .print-rec-voucher .tbl-footer tr td {
        font-weight: 700;
        font-style: italic;
    }


.barcodeTarget div:last-child {
    font-size: 12px !important;
}



/*--- BULK UPLOAD PAGE --------------------------------------------------------------*/

.bulk-upload-table {
    font-size: 13px;
}

    .bulk-upload-table .jurisdiction {
        border: 1px solid #cacaca;
        padding: 5px;
    }

#dropZone {
    border-radius: 5px;
    border: 2px solid #ccc;
    background-color: #eee;
    width: 90%;
    min-height: 300px;
    padding: 50px 0;
    text-align: center;
    font-size: 18px;
    color: #555;
    margin: 0px auto;
}

    #dropZone.hover {
        border-color: #aaa;
        background-color: #ddd;
    }

    #dropZone.error {
        border-color: #f00;
        background-color: #faa;
    }

.header-table {
    margin-top: 20px;
    font-size: 13px;
}

    .header-table tr td {
        text-align: center;
        vertical-align: top;
    }

.bulk-table {
    margin-bottom: 10px;
}

    .bulk-table tr td {
        border: 1px solid #aaaaaa;
        text-align: center;
        padding: 5px;
    }

.sub-table tr td {
    border: none;
}

    .sub-table tr td:first-child {
        text-align: right;
        color: #0094ff;
        font-weight: 700;
        padding-right: 10px;
    }

    .sub-table tr td:last-child {
        padding: 5px 7px;
    }

    .sub-table tr td input {
        width: 50px;
        margin: 0px 7px;
    }

.btn-bulk {
    padding: 2px 5px;
    margin-right: 3px;
    font-size: 12px;
}






/*--- BULK UPLOAD CONFIRM POPUP --------------------------------------------------------------*/

.tbl-info {
    text-align: center;
}

    .tbl-info tr td {
        border: 1px solid #808080;
        padding: 5px 5px;
    }

    .tbl-info thead tr th {
        border: 1px solid #808080;
        background-color: #e8e8e8;
        font-weight: 700;
        padding: 5px 5px;
    }

    .tbl-info tfoot tr td {
        border: none;
        border-top: 1px solid #808080;
    }

.tbl-input tr td {
    padding: 5px 0px;
}

    .tbl-input tr td input {
        height: 19px;
        padding-left: 5px;
    }

    .tbl-input tr td input, .tbl-input tr td select {
        font-size: 12px;
    }

.ui-datepicker-trigger {
    position: absolute;
    margin-top: -2px;
    width: 27px;
    cursor: pointer;
}

.record-infor {
    border-bottom: 1px solid #666;
    margin: 10px auto;
}

    .record-infor label {
        font-weight: 700;
        position: absolute;
        background-color: #fff;
        margin-top: -9px;
        padding-right: 5px;
    }

.confirm-header {
    background-color: #ccc;
    font-weight: 700;
    padding: 5px;
    margin-bottom: 20px;
}

.bulk-upload-print {
    width: 70%;
    padding: 20px;
    border: 1px solid #cacaca;
    margin: 50px auto;
    font-size: 16px;
}



.progressbar {
    left: 15%;
    width: 70%;
    margin: 40% auto;
    position: absolute;
    z-index: 1;
    border-radius: 9px;
    border: 1px solid #666;
    display: none;
}

.progresswidth {
    width: 0%;
    height: 14px;
    background-color: #74B83D;
    text-align: center;
    border-radius: 7px;
}

.progresslabel {
    font-size: 12px;
    position: absolute;
    margin-top: -14px;
    margin-left: 47%;
}


.tooltipwrapper {
    position: relative;
}

.ui-tooltip {
    padding: 0;
    max-width: 300px;
    position: absolute;
    z-index: 9999;
    border: solid 1px #888888;
}

.ui-tooltip-content {
    background-color: #CCC !important;
    color: #9A1313;
    padding: 5px;
}

    .ui-tooltip-content .errortooltipmessage, .ui-tooltip-content .errortooltipmessage h1 {
        font-size: 12px;
        font-weight: bold;
    }

        .ui-tooltip-content .errortooltipmessage ul {
            list-style-type: none;
            padding: 0;
            margin: 5px 0px;
        }

            .ui-tooltip-content .errortooltipmessage ul li {
                padding-left: 2px;
                line-height: 15px;
            }

                .ui-tooltip-content .errortooltipmessage ul li:before {
                    content: "-";
                    padding-right: 4px;
                }

        .ui-tooltip-content .errortooltipmessage .errortooltipmore {
            text-decoration: underline;
            color: blue;
            cursor: pointer;
            padding: 2px;
        }

td.errormessageicon {
    text-align: center;
}

    td.errormessageicon img {
        width: 16px;
        height: 16px;
        cursor: pointer;
        vertical-align: bottom;
        padding-top: 1px;
    }

td.tableCheckbox, .tablegrid tr th.tableCheckbox {
    text-align: center;
}

div.duplicateTooltipWrapper {
    max-width: 800px !important;
}

    div.duplicateTooltipWrapper div.ui-tooltip-content {
        color: #000 !important;
        background-color: #FFF !important;
    }

.JColResizer {
    left: 10px;
}

.SumoSelect {
    width: 100% !important;
    display: flex !important;
}

.SelectBox {
    padding: 0 !important;
}

.SumoSelect > .CaptionCont {
    border: 1px solid #006498 !important;
    border-radius: initial !important;
    min-height: 19px !important;
}

.sumoDropdownW115 > span {
    max-width: 115px;
    padding-right: 0 !important;
}

.sumoDropdownW122 > span {
    max-width: 122px;
    padding-right: 0 !important;
}

.sumoDropdownW134 > span {
    max-width: 134px;
    padding-right: 0 !important;
}

.sumoDropdownW140 > span {
    max-width: 140px;
    padding-right: 0 !important;
}

.sumoDropdownW150 > span {
    max-width: 150px;
    padding-right: 0 !important;
}

.sumoDropdownW160 > span {
    max-width: 160px;
    padding-right: 0 !important;
}

.SumoSelect > .CaptionCont > span {
    padding-left: 5px !important;
    color: black !important;
}

.SumoSelect > .CaptionCont > span.placeholder {
    font-style: normal !important;
}

.SumoSelect > .optWrapper > .options li.opt {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    height: 14px !important;
}

.SumoSelect.open > .optWrapper {
    top: 25px !important;
}

.customSelectIcon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=);
    background-position: right 8px bottom 50%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    padding: 2px 5px;
}

.tooltipselectAll {
    width: 160px;
    height: 100px;
    z-index: 9999;
    position: absolute;
    background-color: #CCC !important;
    color: #100e8b;
    left: 25px;
    border: solid white 1px;
}

    .tooltipselectAll ul li {
        padding-left: 5px;
        color: #100e8b;
        font-size: 12px;
        font-weight: bold;
    }

        .tooltipselectAll ul li:hover {
            color: white;
            background-color: #100e8b;
        }

    .tooltipselectAll .title {
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 14px;
    }

    .tooltipselectAll .typepackage {
        padding-left: 15px;
        list-style: none;
        color: #100e8b;
        font-size: 12px;
        margin-top: 5px;
    }

.LabelSelectCounty {
    display: inline;
}

.SelectCounty {
    width: 250px;
    margin-left: 10px;
}

    .SelectCounty option {
        font-size: 12px;
    }

.DisabledPackageUploaded, .DisabledEditMode {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    opacity: 0.5;
}

.loader_CQ {
    /*background-image: url('../../Assets/Images/ajax-loader.gif');*/
    background: #FFFFFF url('Images/Loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px; /*set to a negative number 1/2 of your height*/
    margin-left: -50px; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    text-align: center;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    /* IE 5-7 */
    filter: alpha(opacity=70);
    /* Netscape */
    -moz-opacity: 0.7;
    /* Safari 1.x */
    -khtml-opacity: 0.7;
    /* Good browsers */
    opacity: 0.7;
}

.overlay-bgr_CQ {
    position: fixed;
    z-index: 9999;
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* Netscape */
    -moz-opacity: 0.0;
    /* Safari 1.x */
    -khtml-opacity: 0.0;
    /* Good browsers */
    opacity: 0.0;
    background-color: white;
}
