﻿#mainNav li{
    /*transition: 1s cubic-bezier(.02,.98,.02,.99) all;*/
    -webkit-transition: 1s cubic-bezier(0,1,0,1) all;
    transition: 1s cubic-bezier(0,1,0,1) all;
}

    #mainNav > li.ng-enter {
        color: white;
        font-size: 0px !important;
        background: rgba(214, 214, 214, 1) !important;
    }

    #mainNav > li.ng-enter-active {
        color: black;
        font-size: 15px !important;
        /*margin-right: 0px;*/
    }


.expenseshade1, .progress-bar, .approval-allocated-progress, .approval-amount, .preExpenseLoading, .expenseProgress, .expense-progress-bar, .ActualProgress{
    -webkit-transition: 2s cubic-bezier(.25,.96,.33,.97) all;
    transition: 2s cubic-bezier(.25,.96,.33,.97) all;
}

@keyframes Expense_Flip {
    from {
        margin-left: 100px;
        opacity: 0;
        transform: rotateY(-180deg);
    }

    to {
        margin-left: 0px;
        opacity: 1;
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes Expense_Flip {
    from {
        opacity: 0;
        transform: rotateY(-180deg);
    }

    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

/*#popupSection {
    animation: Expense_Flip 500ms;
    /*animation-timing-function: cubic-bezier(0.055, 0.865, 0.075, 1.000);
    -webkit-animation-timing-function: cubic-bezier(0.055, 0.865, 0.075, 1.000);*/
    /*animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;*/
    /*-webkit-animation: Expense_Flip 500ms;
}*/

/*
@-webkit-keyframes AA_Highlight {
    0% {
        background: rgba(0,0,0,0);
        color: black;
    }

    50% {
        background: rgba(255,0,0,0.3);
        color: white;
    }

    100% {
        background: rgba(0,0,0,0);
        color: black;
    }
}

@keyframes AA_Highlight {
    0% {
        background: rgba(0,0,0,0);
        color: black;
    }

    50% {
        background: rgba(255,0,0,0.3);
        color: white;
    }

    100% {
        background: rgba(0,0,0,0);
        color: black;
    }
}


.expenseRow {
    animation: AA_Highlight 1500ms;
    -webkit-animation: AA_Highlight 1500ms;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    /*animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;*/
/*
}

    */

/*
.expenseRow {
    -webkit-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
    transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
}

    .expenseRow.ng-enter td {
        font-size: 0px !important;
        visibility: hidden;
    }

    .expenseRow.ng-enter-active td {
        visibility: visible;
        color: green;
        font-size: 12px !important;
    }

    .expenseRow.ng-leave td {
        font-size: 12px !important;
    }

    .expenseRow.ng-leave-active td {
        color: red;
        font-size: 0px !important;
    }



.submit-statement-table-row, .submit-statement-table-row * {
    transition: 1s ease all;
}

    .submit-statement-table-row.ng-enter > .table-column {
        margin-right: 0px;
    }

    .submit-statement-table-row.ng-enter-active > .table-column {
        margin-right: 30px;
    }


*/

html {
    overflow: auto;
    overflow-y: scroll;
}

body {
    margin: 0 auto;
    font-family: Roboto, Myriad Pro;
    font-size: 15px;
}

a {
    cursor: pointer;
}

input[type=text],
input[type=password],
input[type=number],
input[type=button],
input[type=submit],
select,
button,
textarea {
    /*border: 1px solid transparent;*/
}

.header {
    background: #00467f;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    float: left;
    width: 100%;
    height: 50px;
    z-index: 9999;
}

    .header h1 {
        color: #fff;
        font-size: 15px;
        padding: 10px 0;
        margin: 0;
        font-weight: 500;
        line-height: 30px;
        margin-left: 20px;
        float: left;
        width: 90px;
    }

::selection {
    color: rgb(0, 70, 127);
    background: rgb(195, 215, 231);
}

.notifications {
    float: left;
    width: 100%;
    font-size: 13px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    box-shadow: 0 0 15px #333;
    vertical-align: text-bottom;
    font-weight: bold;
    display: none;
}

    .notifications .note {
        width: auto;
        line-height: 30px;
        padding: 10px 15px;
        background-color: #FFC;
        color: #900;
    }

    .notifications .notificationsIcon {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

.InvalidNoValue.modal {
    border: 1px solid red !important;
    padding: 1px;
    box-shadow: 0px 0px 3px red;
}

.InvalidNoValue_Input {
    border: 1px solid red !important;
    padding: 1px;
    box-shadow: 0px 0px 3px red;
    color: red;
}

.InvalidNoValue > label {
    color: red;
}

#ui-datepicker-div {
    z-index: 10000 !important;
}

.TableWrapper {
    float: left;
    width: 100%;
}

.container {
    width: 1252px;
    margin: 0 auto;
}

#mainContainer {
    margin-left: 190px;
}

.table-expenseCopy {
    width: 15px;
}

.table-amount-content {
    overflow: hidden;
}

.CorporateImage {
    width: 18px;
    margin-right: 5px;
    float: left;
}

.ActualAmount {
    /*max-width: 45px;*/
    overflow: hidden;
    /*-ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    float: right;*/
}

.body-content {
    background: #fff;
    margin-top: 4.5rem;
}

.header ul#mainNav {
    width: 100%;
    white-space: nowrap;
    background: #d7d7d7;
    list-style: none;
    display: inline-block;
    padding: 0 1%;
    margin: 0;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    overflow: hidden;
}

    .header ul#mainNav li {
        list-style: none;
        padding: 8px 20px;
        cursor: pointer;
        border-right: 1px solid #fff;
        font-size: 15px;
        display: inline-block;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: linear;
    }

        .header ul#mainNav li:not(.selected):hover {
            background: #c3d7e7;
        }

        .header ul#mainNav li:first-child {
            border-left: 1px solid #fff;
        }

.header .navigationContainer {
    clear: both;
}

    .header .navigationContainer .NavArrow {
        display: none;
        margin-top: 1px;
        position: absolute;
        background-color: rgba(25, 25, 25, 0.8);
        width: 20px;
        height: 32px;
        cursor: pointer;
        padding-left: 3px;
        box-sizing: border-box;
        color: white;
        font-weight: bolder;
        font-size: 26px;
        border-radius: 2px;
        top: 50px;
    }



    .header .navigationContainer .NavLeft {
        float: left;
    }

    .header .navigationContainer .NavRight {
        float: right;
        right: 0px;
    }

.header ul#mainNav .selected {
    background: #4a7598;
    color: #fff;
}

.countNotification {
    display: inline;
    margin-left: 10px;
    padding: 0px 5px;
    color: white;
    background-color: rgba(165, 0, 0, 1);
    font-weight: bold;
    font-size: 14px;
    border-radius: 2px;
}

@media screen and (max-width: 1350px) {
    .header ul#mainNav li {
        font-size: 12px;
    }
}

.submit-expense-wrapper {
    padding: 15px 13px;
    background: #c3d7e7;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

    .submit-expense-wrapper .approver-name {
        margin-top: 5px;
        float: right;
    }

.submit-statement-wrapper {
    padding: 15px 13px;
    background: #c5c5c5;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 427px;
}

.submit-expense-header {
    width: 100%;
    background-color: #FFF;
}

.submit-expense-header-item {
    float: left;
    padding: 5px 20px;
    background-color: #c3d7e7;
    cursor: pointer;
}

.submit-statement-header-item {
    float: left;
    padding: 5px 20px;
    background-color: #c5c5c5;
    cursor: pointer;
}

.clear-float {
    clear: both;
}

.submit-statement-top-area {
    margin: 0 0 10px 0;
}

.upload-button {
    background-color: #00467F;
    padding: 0 30px;
    font-size: 1.2em;
    color: #FFF;
    cursor: pointer;
}

    .upload-button:hover {
        background-color: #22678F;
    }

.amex_uploadButton {
    float: right;
}

.amex_saveButton {
    float: left !important;
}

.submit-statement-table-area-Wrapper {
    height: 365px;
    background-color: white;
}

.submit-statement-table-area {
    width: 100%;
    display: table;
}

.submit-statement-table-header {
    background-color: #00467F;
    color: #FFF;
}

    .submit-statement-table-header > div {
        text-align: left !important;
    }

.submit-statement-table-area > div.submit-statement-table-header {
    display: table-row;
}
/*
.submit-statement-table-row > div {
    overflow: hidden;
    text-overflow: ellipsis;
}
    */

.submit-statement-table-row_Orange {
    background-color: #EBCEA1 !important;
    border-bottom: 1px solid white;
}

    .submit-statement-table-row_Orange:hover {
        background-color: rgba(224, 180, 110, 1) !important;
    }

.submit-statement-table-row_Red {
    background-color: rgba(255, 97, 97, 1) !important;
    border-bottom: 1px solid white;
}

    .submit-statement-table-row_Red:hover {
        background-color: rgba(224, 180, 110, 1) !important;
    }

    
.submit-statement-table-row_Green {
    background-color: #cee8cf !important;
    border-bottom: 1px solid white;
}

    .submit-statement-table-row_Green:hover {
        background-color: #cee8cf !important;
    }

span.arrow {
    border: 5px solid red;
    border-color: transparent transparent red;
    float: left;
    margin-top: -13px;
    left: 47%;
    position: relative;
}

span.arrowReceiptUploaded {
    border: 5px solid black;
    border-color: transparent transparent black;
    float: left;
    margin-top: -12px;
    left: 839px;
    top: 25px;
    position: relative;
    z-index: 1;
}

.submit-statement-wrapper #AMEXpopup {
    display: inline;
    position: absolute;
}

.table-column.validation-wrapper {
    border: 1px solid rgba(254, 162, 163, 1);
    background-color: white;
    display: inline;
    position: absolute;
    width: 150px;
    left: 310px;
    top: 25px;
    z-index: 1;
    margin-top: 5px;
    font-weight: bold;
    color: red;
    font-size: 12px;
}

.validation-wrapper > :not(:last-child).IndividualValidation {
    margin-bottom: 2px;
}

.validation-wrapper > .IndividualValidation {
    padding: 4px;
    background-color: rgba(236, 245, 249, 1);
    margin-right: 0;
    margin-left: 0;
    cursor: alias;
}

.ReceiptUploaded-container {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    width: 250px;
    max-width: 250px;
    max-height: 400px;
    left: 719px;
    top: 25px;
    z-index: 1;
    margin-top: -2px;
    overflow: auto;
    padding: 5px;
}

.ReceiptUploaded-wrapper {
    padding: 5px;
}

    .ReceiptUploaded-wrapper img.receiptpreviewImageAMEX {
        box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
        max-width: 100%;
    }


.upload-statement-date.table-column > div > * {
    display: inline-block;
}

.table-column.upload-statement-date > div > input {
    width: 45px;
    font-size: 10px;
}

.upload-statement-date.table-column {
    text-align: right;
}

.table-column {
    float: left;
    padding: 2px;
    min-height: 20px;
}

.submit-statement-table-header .upload-statement-checkbox input {
    margin-left: 11px;
}

.upload-statement-checkbox {
    width: 30px;
}

.upload-statement-date {
    width: 60px;
}

.upload-statement-description {
    width: 240px;
}

.upload-statement-project {
    width: 190px;
}

.upload-statement-PEA {
    width: 50px;
}

.upload-statement-PEA-Name {
    width: 50px;
}

.upload-statement-category {
    width: 140px;
}

.upload-statement-amount {
    width: 70px;
    text-align: right;
}

.upload-statement-receipt {
    width: 70px;
    text-align: center;
}

    .upload-statement-receipt .upload-statement-receiptImageWrapper {
        margin-top: 3px;
    }

.upload-statement-reason {
    display: block;
}

.upload-statement-description span {
    width: 240px;
    display: inline-block;
}

.table-column.upload-statement-amount span {
    float: right !important;
    padding-right: 10px;
}

.upload-statement-reason span.addEllipsis {
    max-width: 210px;
    display: inline-block;
}

.submit-statement-table-row input, .submit-statement-table-row select {
    width: 95%;
}

.submit-statement-table-row > .table-column > div > span {
    cursor: pointer;
    padding-top: 4px;
    float: left;
}

.submit-statement-table-content {
    width: 100%;
    background-color: #FFF;
    color: #000;
    max-height: 341px;
    overflow-y: auto;
}

:not(.submit-statement-table-row_Red):not(.submit-statement-table-row_Orange).submit-statement-table-row:hover {
    /*background: rgba(113, 157, 193, 1) !important;*/
}

.submit-statement-table-row {
    /*font-size: 10px;*/
    position: relative;
}

    .submit-statement-table-row:nth-child(odd) {
        /*background-color: #def0ff;*/
    }

    .submit-statement-table-row:nth-child(even) {
        /*background-color: #cee9ff;*/
    }

.inline-upload-button {
    width: 100%;
    padding: 3px 0;
    background-color: #00467F;
    color: #FFF;
    font-size: 8px;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
}

.inline-receipt-icon {
    width: 30px;
    padding: 3px 0;
    background-color: #00467F;
    color: #FFF;
    font-size: 8px;
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
}

.expense-title {
    font-size: 30px;
    font-weight: 100;
    display: inline-block;
    float: left;
    margin: 0;
}

.mileage-title {
    font-size: 30px;
    font-weight: 300;
    display: inline-block;
    /*float: left;*/
    margin-top: 10px;
    margin-bottom: 10px;
}

.MileageAddressLabel {
    font-size: 12px;
}

.table>tbody>tr>td.addExpenseCell{
    padding:0px 4px 3px 4px;
    border-top:none;
}
.table>tbody>tr>td.addExpenseCell input, .table>tbody>tr>td.addExpenseCell select {
    height:1.5em;
}

@media (min-width: 1200px){
    .modal-dialog{
        width:900px !important;
    }
}

.editableField {
    border-right: 1px solid #fafafa;
    cursor: pointer;
}

.errorState{
    border:1px solid #ff0000 !important;
}

.error-message{
    color:#ff0000;
    font-size:0.8em;
}

.calender-wrapper {
    width: 100%;
    /*margin-top: 20px;*/
    display: inline-block;
}

    .calender-wrapper input {
        font-weight: 200;
        /*width: 193px;*/
        /*height: 27px;*/
        padding: 0 5px;
    }

.controls {
    display: inline-block;
    width: 100%;
}

    .controls .left-area {
        float: left;
        width: 457px;
        height: 348px;
        margin-right: 10px;
    }

        .controls .left-area select {
            font-family: "Roboto";
            width: 100%;
            height: 27px;
            margin-top: 7px;
        }

    .controls .right-area {
        float: right;
        width: 758px;
        height: 330px;
        background: #5e788c;
        margin-top: 10px;
    }

    .controls .expenseright-area {
        float: right;
        width: 758px;
        height: 348px;
        background: #4A4A4A;
        margin-top: 10px;
    }

.noreceipt-text-wrapper {
    padding: 150px 0;
    color: #fff;
    text-align: center;
    background: url(images/arrow.png) no-repeat 10px 30px;
}

.noreceipt-text-wrapperEdit {
    color: #fff;
    margin-top: 120px;
}

    .noreceipt-text-wrapper span, .noreceipt-text-wrapperEdit span {
        display: block;
        text-align: center;
        font-size: 32px;
        font-weight: 200;
    }

    .noreceipt-text-wrapper small, .noreceipt-text-wrapperEdit small {
        display: block;
        text-align: center;
        margin-top: 5px;
        font-weight: 200;
        font-size: 14px;
    }




.uploadreceipt-image-wrapper {
    color: #fff;
}

    .uploadreceipt-image-wrapper span {
        display: block;
        text-align: center;
        font-size: 32px;
    }

    .uploadreceipt-image-wrapper button, .expenseButton {
        text-align: center;
        margin-top: 5px;
        color: #fff;
        background: #929793;
        width: 240px;
        height: 40px;
        float: none;
        border: none;
        -ms-align-content: center;
        -webkit-align-content: center;
        align-content: center;
        font-size: 15px;
        font-family: "Roboto";
    }

.uploadreceipt-text-wrapper {
    padding: 150px 50px;
    color: #fff;
}

    .uploadreceipt-text-wrapper span {
        display: block;
        text-align: center;
        font-size: 32px;
    }

    .uploadreceipt-text-wrapper button {
        text-align: center;
        margin-top: 5px;
        color: #fff;
        background: #929793;
        width: 240px;
        height: 40px;
        float: none;
        border: none;
        -ms-align-content: center;
        -webkit-align-content: center;
        align-content: center;
        font-size: 15px;
        font-family: "Roboto";
    }

.uploadreceipt {
    display: none;
}

.desc-textarea {
    height: 145px;
    padding: 5px;
    width: 100%;
    margin-top: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.DailyItemLimit > span {
    display: inline-block !important;
}

.limit {
    background: #fff;
    margin-top: 10px;
    display: inline-block;
    width: 100%;
    padding: 6px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 90px;
}

    .limit .approvername {
        font-weight: bold;
        top: 62px;
        font-size: 12px;
        position: absolute;
        width: 200px;
    }

    .limit .approver-title {
        float: left;
        top: 47px;
        position: absolute;
    }

    .limit > div {
        float: left;
        position: absolute;
    }

        .limit > div span {
            display: block;
            font-size: 12px;
        }

.amount-symbol {
    font-family: Roboto;
    font-size: 25px;
    font-weight: 100;
    margin-right: 0;
    margin-top: 17px;
}


.amount {
    float: right;
    margin-top:10px;
    font-size: 50px;
}

    .amount > * {
        float: left;
    }


.amountInput {
    font-family: Roboto;
    font-size: 45px;
    font-weight: 100;
    float: right;
    max-width: 200px;
    width: auto;
    border: none;
}

.button-wrapper {
    width: 100%;
    display: inline-block;
}

.save-button, .UploadButton, .reset-button {
    color: #fff;
    background: #0d5b00;
    text-align: center;
    float: right;
    border: none;
    font-size: 18px;
    font-family: "Roboto";
    cursor: pointer;
}

.save-button {
    padding: 10px 20px;
    width: 240px;
}

.UploadButton, .reset-button {
    background: #929793;
}



#splash-page {
    z-index: 99999 !important;
}

    #splash-page .bar {
        width: 100%;
    }


.page-splash {
    z-index: 99999 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    pointer-events: auto;
}

.page-splash-message {
    text-align: center;
    margin: 20% auto 0 auto;
    font-size: 400%;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    text-decoration: none;
    color: #F58A00;
    padding: 0;
}

/*#region Angular ng-show dissolve animation */
.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
    position: fixed !important;
    display: inline !important;
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

    .dissolve-animation.ng-hide-remove.ng-hide-remove-active,
    .dissolve-animation.ng-hide-add {
        opacity: 1;
    }

        .dissolve-animation.ng-hide-add.ng-hide-add-active,
        .dissolve-animation.ng-hide-remove {
            opacity: 0;
        }
/*#endregion */

/*#region Grid styles new*/

.myExpense-tablewrap {
    margin-bottom: 20px;
    position: relative;
}

    .myExpense-tablewrap h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 200;
    }

    .myExpense-tablewrap:after {
        display: block;
        clear: both;
        content: "";
    }

.expenseTable {
    float: left;
    width: 100%;
}

table th {
    white-space: nowrap;
}

.myExpense-tablewrap .expenseTable {
    border-collapse: collapse;
    /*table-layout: fixed;*/
}

    .myExpense-tablewrap .expenseTable thead th {
        background: #5e788c;
        color: #fff;
        text-align: left;
    }

        .myExpense-tablewrap .expenseTable thead th:not(.actionitemsHead) {
            padding: 5px 10px;
            font-weight: 300;
            cursor: pointer;
        }

            .myExpense-tablewrap .expenseTable thead th:not(.actionitemsHead):hover {
                background: #2a475f;
            }


    .myExpense-tablewrap .expenseTable td {
        text-align: left;
        font-weight: 300;
        padding: 8px 10px;
    }

        .myExpense-tablewrap .expenseTable td > div.rightAlign {
            text-align: right;
        }

.table-controls, .total-amount-wrap {
    /*padding: 6px 1%;*/
    float: left;
    width: 100%;
    background: #00467f;
    color: #fff;
    font-size: 15px;
}

.table-controls {
    clear: both;
    margin-top: 10px;
}

.total-amount-wrap {
    text-align: right;
}


.date-controls label {
    margin-right: 10px;
}

.viewPaidCheckbox {
    height: 15px;
    width: 15px;
    background: #fff;
    vertical-align: middle;
}

.checkbox-controls {
    width: 155px;
    display: inline-block;
}

.search-controlsSub {
    display: inline-block;
    margin-top: 5px;
    font-size: 15px;
}

.dropdown-paidDate {
    display: inline-block;
    margin-top: 5px;
    font-size: 15px;
    margin-left:25px;
}

.total-label {
    font-size: 10px;
}

.total-amount {
    font-size: 20px;
}

.expenseTable th {
    font-size: 15px;
}

.expenseTable tbody {
    font-size: 10px;
}

    .expenseTable tbody tr.expenseRow:nth-child(odd) {
        background: #DEF0FF;
    }

    .expenseTable tbody tr.expenseRow:nth-child(even) {
        background: #CEE9FF;
    }

.myExpense-tablewrap .expenseTable td, .myExpense-tablewrap .expenseTable th {
    box-sizing: border-box;
}

th.categoryHeadSub, td.table-category-content {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

th.expenseIDHead, td.table-expenseID-content {
    max-width: 85px;
    min-width: 85px;
    width: 85px;
    overflow: hidden;
}

th.amountHead, td.table-amount-content {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
    text-align:right !important;
}

th.descHead, td.table-desc-content {
    width: 228px;
    min-width: 228px;
    max-width: 228px;
}

th.projectHead, td.table-projectregion-content {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
}

th.approverHead, td.table-approverName-content {
    width: 159px;
    min-width: 159px;
    max-width: 159px;
}

th.statusHead, td.table-status-content {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

th.copyItemHead, td.table-copyItem-content {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

th.deleteItemHead, td.table-deleteItem-content {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

th.expdateHead, td.table-expDate-content {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
    text-align: right !important;
}

th.submitdateHead, td.table-expSubmitDate-content {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

td.table-status-content {
    cursor: pointer;
}

a.deleteRowbtn {
    padding: 2px 5px;
    background: #860000;
    text-decoration: none;
    color: #fff;
}

.disabled {
    background: #656565 !important;
    background-color: #656565 !important;
    color: black !important;
    cursor: not-allowed !important;
}

.deleteExpense {
    text-align: center;
    color: white;
    height: 15px;
    cursor: pointer;
    padding: 1px 3px 0 3px;
    font-size: 10px;
}

.gridRow {
    cursor: pointer;
}

    .gridRow:hover {
        background: rgba(113, 157, 193, 1) !important;
    }

.gridRowUnEditable:hover {
    background: rgba(163, 198, 226, 1) !important;
}

.totalAmountSection {
    float: right;
    width: auto;
    text-transform: uppercase;
}

.deletingExpense {
    background: #656565;
}

.confirm_button {
    background: #c0c9cf;
    background-image: -webkit-linear-gradient(top, #c0c9cf, #17191a);
    background-image: -moz-linear-gradient(top, #c0c9cf, #17191a);
    background-image: -o-linear-gradient(top, #c0c9cf, #17191a);
    border-radius: 5px;
    box-shadow: 0 0 0 #666666;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    width: 100px;
    text-align: center;
}


    .confirm_button:hover {
        background: #363c40;
        background-image: -webkit-linear-gradient(top, #363c40, #8f9ba3);
        background-image: -moz-linear-gradient(top, #363c40, #8f9ba3);
        background-image: -ms-linear-gradient(top, #363c40, #8f9ba3);
        background-image: -o-linear-gradient(top, #363c40, #8f9ba3);
        background-image: linear-gradient(to bottom, #363c40, #8f9ba3);
        text-decoration: none;
        cursor: pointer;
    }

.confirmButtonGroup .expenseButton, .OK_Button {
    margin: 5px;
    padding: 5px;
    cursor: pointer;
    background-color: rgba(0, 71, 126, 1);
}

.confirmButtonGroup :first-of-type.expenseButton {
    background-color: rgba(110, 110, 110, 1);
}

.ExpenseViewStatus, .ExpenseViewSearchStatus {
    color: #000;
    font-size: 15px;
    margin-top: 13px;
}

.ExpenseViewStatus {
    float: left;
}

.ExpenseViewSearchStatus {
    float: right;
}

.gridTitle {
    /*float: left;*/
    margin-right: 20px;
}

#popupSection, .popupSection {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background-color: rgba(22,22,22,0.95);
    z-index: 9999;
    overflow: auto;
}

.popupSectionWrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.closePopUp, .expandImagePDF, .expandImagePDFEdit {
    color: white;
    float: right;
    cursor: pointer;
    background-color: grey;
    border-radius: 50px;
    width: 50px;
    line-height: 50px;
    top: 0;
    right: 0;
    text-align: center;
}

.expandImagePDF {
    position: static;
}

.expandImagePDFEdit {
    position: absolute;
}

.expandImagePDF, .expandImagePDFEdit {
    top: -5px;
    right: -302px;
    z-index: 1;
}

.closePopUp {
    position: fixed;
}

.transparent {
    background-color: rgba(22,22,22,0.5) !important;
}

.ConfirmationContainer, .AlertContainer {
    margin: auto;
    text-align: center;
    max-width: 323px;
    color: white;
}

.AlertContainer{
    max-width:750px;
}

.deleteConfirmationWrapper, .alertWrapper {
    background-color: white;
    padding: 30px;
    top: 40%;
    position: fixed;
    border: 2px solid #000;
}

.copyMileageConfirmationWrapper {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 125px;
    width: 350px;
    height: 150px;
}

.copyMileageContainer {
    border: 2px solid black;
    background-color: white;
    padding: 15px;
    width: 300px;
}

.copyMileageDateRange label {
    color: rgba(84, 101, 125, 1);
    width: 80px;
    display: inline-block;
}

.copyMileageDateRange input {
    border: 1px solid black;
    width: 212px;
}

.copyMileageDateRange > div {
    text-align: left;
    padding-bottom: 15px;
}

.copyMileageContainer .confirmButtonGroup {
    margin-top: 10px;
    display: block;
}

.expenseInputButton {
    text-align: center;
    color: white;
    align-content: center;
    font-family: "Roboto";
}

.copyMileageButtonGroup .expenseCancelButton {
    background-color: #929793;
    float: left;
}

.copyMileageButtonGroup .expenseInputButton {
    width: 110px;
    height: 25px;
    font-size: 15px;
    cursor: pointer;
}

.copyMileageButtonGroup .expenseSaveButton {
    background-color: green;
    float: right;
}

.copyMileageButtonGroup::after {
    display: block;
    clear: both;
    content: "";
}

.right-area .previewWrapper {
    height: 100%;
}

.right-area .previewWrapperAfterImageLoaded {
    height: auto;
}

.previewWrapper, .textAlignCenter {
    text-align: center;
}

    .previewWrapper.gray-box {
        text-align: left;
        float: left;
        position: relative;
    }

.textAlignRight {
    text-align: right;
}

.addCursor {
    cursor: pointer;
}

.clearBoth {
    clear: both;
}

.NoCursor {
    cursor: default !important;
}

.expandedImage, .validAmount, .mileageDetailsContainer, .approverComment {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#receiptpreviewLarge > img {
    cursor: s-resize;
}

.adminPopupMileageDetails {
    padding: 10px 10px 0 10px;
    text-align: center;
    background-color: white;
}

    .adminPopupMileageDetails .mileageFromTo {
        border: 1px solid;
        margin-bottom: 5px;
        text-align: left;
    }

        .adminPopupMileageDetails .mileageFromTo:nth-child(2) {
            margin-top: 5px;
        }

    .adminPopupMileageDetails .mileageRoundTrip {
        float: left;
    }

    .adminPopupMileageDetails .mileageTotalMiles {
        float: right;
    }

    .adminPopupMileageDetails .mileageTotalMilesValue {
        font-size: 45px;
    }

    .adminPopupMileageDetails .save-button {
        width: 100px;
        margin-bottom: -3px;
    }

    .adminPopupMileageDetails .adminPopupMileageMinorDetails {
        margin-bottom: 10px;
        overflow: hidden;
    }

.MileageDetailsSection {
    margin: 0 auto;
    width: 500px;
    margin-top: 200px;
}


.receiptpreviewLargePDF {
    height: 800px;
    width: 800px;
}

.previewCover {
    background: transparent;
    position: absolute;
    top: 0;
    left: 104px;
}

.UploadArea {
    display: table;
    width: 100%;
    height: 100%;
}

.receiptpreview, .receiptpreviewSmallPDF, .previewWrapperWrapper, .previewCover {
    width: 450px;
    height: 248px;
    margin-top: 10px;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    text-align: center;
    margin-left: 35px;
    cursor: pointer;
}

.edit_receiptpreviewSmallPDF.left-preview,
.edit_receiptpreview.left-preview {
    margin-top: 0;
    margin-left: 0;
    height: 297px;
}

.edit_descriptionWrapper {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.left-preview-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.previewWrapperWrapper {
    display: table-cell;
}

.validAmountSection {
    margin: auto;
    width: 900px;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .validAmountSection > div {
        text-align: left;
    }

.validAmountInnerSection {
    padding: 10px;
    background: white;
}

.validAmountTextarea {
    height: 200px;
    padding: 5px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
}


.approverCommentSection {
    margin: auto;
    width: 900px;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .approverCommentSection > div {
        text-align: left;
    }

.approverCommentInnerSection {
    padding: 45px 30px 20px 30px;
    background: #fff;
}

.approverCommentTextarea {
    height: 100px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
    border: 1px solid;
}

.approverCommentDisplayText
{
     margin-bottom: 5px;
     color:#e55d5d;
}

.approverCommentPopupTitle
{
    color: white;
    font-size: 40px;
    text-align: left;
    margin-bottom:5px;
}

.pdfValidateInnerSection {
    padding-left: 10px;
    height: 150px;
    background: #fff;
    width: 100%;
}

.pdfValidateInnerSection h1
{
    font-size:1.5em;
}

.pdfValidateMessage
{
    width: 98%;
    overflow: hidden;
    height: 90px;
    color: #00467f;
    font-family:Roboto,Myriad Pro;
    font-size:15px;
}

.PopupTitle {
    color: white;
    font-size: 30px;
    text-align: left;
}

.confirm_buttonDiv {
    text-align: right;
    height: 40px;
}

.HelpText {
    color: red;
    white-space: pre-wrap;
}

.HelpText, .HelpTextWhite {
    margin-bottom: 10px;
}

.HelpTextWhite {
    color: black;
}

.edit-row {
    border-bottom-color: black;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.expenseRowEditMode {
    border-top-color: black;
    border-top-style: solid;
    border-top-width: 1px;
}




.edit-row .modal {
    width: 60%;
    height: 300px;
    background: #5e788c;
    display: inline-block;
    padding: 10px;
    float: left;
}

.testrecieptImage {
    background: red;
    height: 260px;
    width: 535px;
}

.uploadrecieptBtn {
    background: #949693;
    border: none;
    padding: 5px 20px;
    color: #fff;
    vertical-align: bottom;
    margin-bottom: 3px;
    margin-left: 20px;
}

.sectionEdit {
    display: inline-block;
    width: 410px;
    height: 320px;
    padding: 0 20px;
    position: relative;
}

.sectionEditTop {
    min-height: 277px;
}

.sectionEdit > div.sectionEditTop > span, .sectionEdit > div.sectionEditTop > div:not(:last-child) {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100%;
}

    .sectionEdit > div.sectionEditTop > span label {
        display: block;
        float: left;
        width: 100%;
    }

    .sectionEdit > div.sectionEditTop > span span {
        font-size: 14px;
    }



.sectionEdit span select {
    max-width: 150px;
}

.editAmount {
    font-size: 36px;
    position: relative;
    right: 0;
    bottom: 0;
    width: 450px;
}

    .editAmount::after {
        content: ".";
        display: block;
        clear: both;
        font-size: 0;
    }

    .editAmount div {
        display: inline-block;
    }

    .editAmount .editAmountSpan {
        max-width: 310px;
        display: inline-flex;
        overflow: hidden;
        vertical-align: bottom;
        margin-bottom: -5px;
    }

    .editAmount.InvalidNoValue ::-webkit-input-placeholder {
        color: red;
    }

    .editAmount.InvalidNoValue :-ms-input-placeholder {
        color: red;
    }


    .editAmount.InvalidNoValue :-moz-placeholder {
        color: red;
        opacity: 1;
    }

    .editAmount.InvalidNoValue ::-moz-placeholder {
        color: red;
        opacity: 1;
    }

    .editAmount a.edit {
        top: 23px;
        position: absolute;
    }

a.edit {
    height: 15px;
    width: 15px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA4NUEzNzY0Qzk3RjExRTRBNjQ2QTQ1RjBGODlGOTJBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA4NUEzNzY1Qzk3RjExRTRBNjQ2QTQ1RjBGODlGOTJBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDg1QTM3NjJDOTdGMTFFNEE2NDZBNDVGMEY4OUY5MkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg1QTM3NjNDOTdGMTFFNEE2NDZBNDVGMEY4OUY5MkEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz53cp6XAAAA/UlEQVR42mJkcKtnY2Bg6AbiGCAWYiAM3gPxYiAuZQESXUCcx0A8EISq/84EJGKJ0bGiKoTh9vw8BhkRPphQKhMhp3KxszKUh9kwtK84wiDAzcGwvzsBJiXEQkjjluYoBkd9RQY9JXEGl4pFDJURNnB5FmI0gkCUoy7DjcdvGCLa1sDVMBGjEQRO3XzKMGnDSRR1TMRqdKtczPDx6w/cmknRiKKZm4ONJI0omsPttRlE+LiI1ogS2iAbdRXFGS7ff8nw/dcfghphmt+BIlxbXpRhyd5LDPsv3mdYd/Q6QY0gfYzAjDEByMhnIB10gWwuA2JGaBoXJCFX1QIEGABKCGGYzOv0JAAAAABJRU5ErkJggg==);
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 2px;
    cursor: pointer;
    vertical-align: bottom;
}

.btn-wrap .edit-cancel-btn {
    background-color: #929793;
}

.btn-wrap .edit-apply-btn {
    background-color: #004c0d;
}

.btn-wrap input {
    padding: 5px 20px;
    color: white;
    font-size: 15px;
    box-sizing: border-box;
    cursor: pointer;
}

.edit-mode-input {
    width: 120px;
    margin: 1px 0;
}

.edit_description.edit-mode-input {
    width: 88%;
    height: 108px;
}

.edit_description {
    width: 89%;
    height: 108px;
    overflow-y: auto;
}

.expense-progress-bar {
    height: 13px;
    width: 100%;
    float: left;
    border: 1px solid #999595;
    background: #60cc69;
    margin-bottom: 10px;
}

.UploadButton-wrap {
    float: right;
    position: relative;
    width: 30%;
    height: 300px;
}

    .UploadButton-wrap .UploadButton {
        position: absolute;
        bottom: 0;
        right: 1px;
    }


.elementHidden {
    visibility: hidden;
}

.Edit_imageSectionLoading {
    color: #fff;
    margin-top: 130px;
    margin-left: 250px;
    font-size: 20px;
}

.customDropdown {
    position: absolute;
    display: block !important;
    background: white;
    padding: 10px;
    width: 350px;
    border: 1px solid black;
    z-index: 1;
    font-size: 15px;
}

.AMEXcustomDropdown {
    left: 681px;
    top: 21px;
}

.AllPreExpenseWrapper {
    max-height: 351px;
    overflow-y: auto;
}

.cursorAdd {
    cursor: pointer;
    background-color: #5e788c !important;
}

.submit-expense-wrapper .customDropdown {
    margin-left: 85px;
}

.preExpenseWrapper:hover {
    border: 10px solid rgba(195, 214, 229, 1);
    cursor: pointer;
}

.preExpenseWrapper {
    border: 10px solid white;
}

.preExpenseHelpText {
    text-align: center;
}

.preExpenseTopSection {
    background: rgba(0, 71, 126, 1);
}

.preExpenseBottomSection {
    background: #cccccc;
}

.preExpenseSingle > div {
    padding: 10px;
}

.expenseProgress > span {
    font-size: 24px;
}

.expenseProgress.edit_preexpense {
    font-size: 24px;
}

.expenseProgress {
    color: #067b09;
}

.redColor {
    color: rgba(255, 15, 19, 1);
}

.preExpenseTopSection > * {
    color: white;
}

.preExpenseTopSection > span.DateFloatRight {
    float: right;
}

.preExpenseTopSection > .preExpName {
    font-weight: bold;
    max-width: 310px;
    overflow: hidden;
    margin-top: 5px;
}

.ActualProgress {
    -webkit-transition: 2s cubic-bezier(.25, .96, .33, .97) all;
    transition: 2s cubic-bezier(.25, .96, .33, .97) all;
    float: left;
    height: 100%;
    color: #067b09;
    max-width: 100%;
    box-shadow: 2px 2px 15px grey;
}

.DarkGreen {
    color: #067b09;
}

.DarkOrange {
    color: rgba(255, 111, 15, 1);
}

.DarkRed {
    color: rgba(255, 15, 19, 1);
}

.DarkGreenBG {
    background-color: #067b09;
}

.DarkOrangeBG {
    background-color: rgba(255, 111, 15, 1);
}

.DarkRedBG {
    background-color: rgba(255, 15, 19, 1);
}

.LightGreenBG {
    background-color: #60cc69;
}

.LightOrangeBG {
    background-color: rgba(255, 160, 97, 1);
}

.LightRedBG {
    background-color: rgba(242, 115, 117, 1);
}

/*Map section - Mileage*/

.mileage_wrapper {
    background-color: #DEF0FF;
    height: 100%;
    color: #000;
}

    .mileage_wrapper > div {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
    }

.map_section {
    width: 60%;
    padding: 10px;
    max-height: 320px;
    overflow: hidden;
}

.edit-row .map_section {
    width: 60%;
    padding: 0;
}

.edit-row .mileage_contentSection {
    padding: 0;
}

.mileage_contentSection {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px;
}

.mileage_tolabel {
    margin-left: 35%;
    font-size: 26px;
    font-weight: 200;
}

.mileage_contentTop > input[type=text] {
    width: 70%;
    height: 20px;
    margin-top: 10px;
}

.mileage_contentBottom {
    text-align: right;
    bottom: 20px;
    clear: both;
    position: absolute;
    width: 60%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    right: 10px;
}

#submitter_mileage_contentBottom {
    left: auto;
}

.mileage_contentnote {
    text-align: left;
    bottom: 20px;
    clear: both;
    position: absolute;
    width: 40%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 10px;
    margin-top: 10px;
}

#submitter_mileage_contentnote {
    top: 230px;
    font-size: 16px;
}

.mileage_contentBottom > .mileage_contentDistance {
    font-size: 36px;
}

.mileage_contentBottom > .mileage_info {
    font-size: 8px;
}

.map_holder {
    height: 327px;
}

.mileage_contentTop > .mileage_optionSection {
    margin-top: 10px;
}

.mileage_optionSection > label {
    margin-left: 5px;
}

#submitter_mileage_optionSection {
    font-size: 16px;
}

.mileage_optionSection > input[type=checkbox], .mileage_optionSection > label {
    float: left;
}

.mileageCalculateButton {
    text-align: center;
    color: #fff;
    background: rgb(0, 70, 127);
    border: none;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    font-size: 15px;
    font-family: "Roboto";
    padding: 3px 45px 5px 45px;
    cursor: pointer;
    width: 100px;
}

#submitter_mileageCalculateButton {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 5px;
}

.milesDetailsContainer .mileageSummaryDescription {
    width: 200px;
    max-width: 200px;
}

.milesDetailsContainer .mileageSummaryProjectRegion {
    width: 180px;
    max-width: 180px;
}

.milesDetailsContainer .mileageSummaryApprover {
    width: 150px;
    max-width: 150px;
}

.milesDetailsContainer .mileageSummaryStatus {
    width: 115px;
    max-width: 115px;
}

.edit-row .mileage_optionSection > .expenseCalculateButton {
    width: 150px;
    max-width: 150px;
}

.milesDetailsContainer .TableWrapper table tr.expenseRow th {
    text-align: left;
}

.addEllipsis, .milesDetailsContainer .TableWrapper table tr.expenseRow td {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.milesDetailsContainer .TableWrapper table tr.expenseRow th:hover {
    text-align: left;
    cursor: default;
    background-color: #5e788c;
}

/* Expense History*/
.Sub_expStatusContainer {
    position: absolute;
    /*width: 400px;*/
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 8px;
    background-color: white;
    box-shadow: 4px 6px 10px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: default;
}

.Sub_expStatusHeader {
    font-size: 20px;
    margin: 5px 5px 5px 10px;
}

.Sub_expStatusGridHeader {
    margin-bottom: 5px;
}

    .Sub_expStatusGridHeader > div {
        display: inline-block;
        font-weight: bold;
    }

.Sub_expStatusGridValues > div {
    display: inline-block;
}

.Sub_expStatusUpdatedDate {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

.Sub_expStatusStatus {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

.Sub_expStatusStatusOwner {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}

.Sub_expStatusGrid {
    box-sizing: border-box;
    margin: 0px 5px 5px 11px;
}

.Sub_expStatusHistoryLoading {
    background: url(images/loading_animation.gif) no-repeat 160px 0px;
    height: 50px;
}

.Sub_expHistoryStatusColumn {
    background-color: white;
}
/* End of Expense History*/

#CreateMap_holder {
    width: 375px;
    height: 327px;
}

#EditMap_holder {
    width: 400px;
    height: 300px;
}

tr .mileage_contentBottom {
    top: 245px;
    left: 20px;
}

/**/


/*Expenses styles*/

.expenses {
    float: left;
    width: 100%;
}

    .expenses h2 {
        font-size: 28px;
        font-weight: normal;
        margin: 15px 0 10px;
        line-height: 32px;
    }

    .expenses .darkGrayBg {
        background-color: #4a4a4a;
        padding: 6px 0.5%;
        width: 99%;
        float: left;
    }

        .expenses .darkGrayBg .selectGroupBy, .expenses .darkGrayBg .search {
            border: 0;
            background: #FFFFFF;
            color: #646464;
            height: 20px;
            line-height: 20px;
            padding: 0 5px;
            font-size: 14px;
        }

.pull-left {
    float: left;
    width: auto;
}

.pull-right {
    float: right;
    width: auto;
}

.AdminGroupBy {
    margin-top: 5px;
}

.expenses .darkGrayBg .total h3 {
    color: #fff;
    font-size: 20px;
    margin: -3px 0;
    font-weight: normal;
}

    .expenses .darkGrayBg .total h3 .small {
        font-size: 50%;
        text-transform: uppercase;
    }


.datePendingPaymentDD {
    display: inline;
    float: left;
    margin-left: 5px;
}

#categoryDropDown {
    height: 14px;
    font-size: 12px;
    width: 92px;
}
/*End of Expenses styles*/


/* Mileage Details */

.pointerClass {
    cursor: pointer;
}

.milesDetailsContainer {
    display: inline-block;
    width: 100%;
    background-color: white;
    padding: 10px;
    padding-bottom: 0;
}

.milesDetailsSection {
    float: right;
}

    .milesDetailsSection > span {
        float: right;
    }

.milesDetailsGridSection {
    overflow: hidden;
}

.OK_Button {
    width: 100px;
    text-align: center;
    color: white;
    clear: both;
    float: right;
    margin-bottom: 0;
}

/* End Mileage Details*/

.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.8;
}

.ng-modal-dialog {
    /* A centered div above the overlay with a box shadow. */
    z-index: 10000;
    position: fixed;
    width: 30%; /* Default */
    /* Center the dialog */
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #cccccc;
    box-shadow: 4px 4px 80px #000;
}

.ng-modal-dialog-content {
    padding: 10px;
    text-align: left;
}

.ng-modal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 120%;
    display: inline-block;
    font-weight: bold;
    font-family: 'Arial', 'sans-serif';
}

#exportSearchContainer {
    width: 69%;
}

#exportSearchOptions {
    width: 99%;
}

#searchText {
    width: 220px;
}

#exportDateContainer {
    margin-left: 10px;
}

#submitter-table-controls {
    padding: 6px;
    box-sizing: border-box;
}

#submitter-gridTitle {
    float: left;
}

.ExpenseHeaderRightSection {
    float: right;
}

    .ExpenseHeaderRightSection .ExpenseHelpContainer, .ExpenseHeaderRightSection #loadingbar {
        display: inline-block;
        margin-right: 30px;
    }

    .ExpenseHeaderRightSection .ExpenseHelpContainer {
        margin-top: 13px;
        cursor: pointer;
    }

    .ExpenseHeaderRightSection #loadingbar {
        background: url(images/loading_animation.gif) no-repeat 0px 0px;
        height: 34px;
        width: 50px;
        float: left;
    }

    .ExpenseHeaderRightSection .ExpenseHelpLinks {
        position: absolute;
        right: 29px;
        background-color: white;
        box-shadow: -3px 2px 19px grey;
    }

        .ExpenseHeaderRightSection .ExpenseHelpLinks .ExpenseHelpLink:hover {
            background-color: #DEF0FF;
        }

        .ExpenseHeaderRightSection .ExpenseHelpLinks .ExpenseHelpLink {
            border-style: solid;
            padding: 5px;
            border-width: 1px;
            border-color: #4a7598;
            border-bottom-color: transparent;
        }

            .ExpenseHeaderRightSection .ExpenseHelpLinks .ExpenseHelpLink:last-child {
                border-bottom-color: #4a7598;
            }

            .ExpenseHeaderRightSection .ExpenseHelpLinks .ExpenseHelpLink a {
                text-decoration: none;
            }

                .ExpenseHeaderRightSection .ExpenseHelpLinks .ExpenseHelpLink a:visited {
                    color: rgb(0, 102, 204);
                }


.dateIcon {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEW6urolJSWr/7c8AAAAGklEQVR4XnXCMQ0AAADCMPyrnQM4udY05cUA6EoHvQbfJBgAAAAASUVORK5CYII=') /*images/icon-calendar-s.png*/ no-repeat;
    background-position-x: 98%;
    background-position-y: center;
    background-color: white;
    border:1px solid #aaa;
    cursor: pointer;
}

#ExpenseFromDate::-ms-clear, #ExpenseToDate::-ms-clear,
#Submitter_CreateExpenseDate::-ms-clear, #PreExpenseFromDate::-ms-clear,
#PreExpenseToDate::-ms-clear, #SearchToDate::-ms-clear, #Submitter_EditExpenseDate::-ms-clear #Submitter_ExpenseFromDate, #Submitter_ExpenseToDate {
    display: none;
}





.tooltip {
    text-decoration: none;
    position: relative;
    display: inline-block;
    cursor: pointer;
    float: left;
}

    .tooltip span {
        margin-left: -999px;
        position: absolute;
        display: none;
        text-align: left;
    }

    .tooltip:hover span {
        font-family: Roboto, Myriad Pro;
        position: absolute;
        left: 16px;
        top: 20px;
        z-index: 1000;
        margin-left: -70px;
        width: 200px;
        display: block;
        font-weight: bold;
        font-size: 12px;
    }

.classic {
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #FFAD33;
}

.submitter-disable-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 15px 13px;
    top: -15px;
    left: -13px;
    background-color: rgba(255,255,255,0.8);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAyCAMAAABCiTbWAAAAM1BMVEUARn////8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn9dO0aKAAAAEHRSTlMAABEiM0RVZneImaq7zN3uf6QJ9gAAA9RJREFUeF7t2lGPpSwMBuAKKFCEvv//1345m/mm8bTEnU10T7K+F3MxczE80iKitPyzeejHPPSH/tAfOhFR4VcS/f2s/Eq+hx4Z6PwK0FbykiCBNBFMkzQJvwBYFYNGbsDG3QB+ZaCX6+kN+/pNbNgD2VQgG6CXACZLR/4tetjBkb7GX7rka+mxj8NEpzESmUjrO2low+bTC1aPLvGcTmn0SETf4y8oV9LD6IEOCd2Oc0MuiKQJ0nx6H+TQGe2cnmSnV3T8K8qFdJa40DFRdqeBIwppiBH8NaF49FxRzuhhdHqjLwXrZfSAsrzTKWNzGngfpKHVtVBFdOk0JJ7QWaKhL32/jJ6RLJ1GMw389UMzukeXnXx6Qp/R9Vpa+ob1KnrB4tCrOA0cjp1ZkKxlQ57QqSjNpbOQ0jVSr6KzS884VGdEtTe0iGrpLGFGp444p1NAdel7u4pe3IJfEc0Ef02pZhd6TxCmKT2iz+m0Ibl07lfRN7vM2YyujazJWP310ad7JQ92e+yePXzACB7dXcwrop1iUwhTOnWkKb33u+kLo53RGUFv2qaxTfvP6VHGlD74dnoY6MFy/Y3b6GY5t2vCnE4FdUbH/fQldkhxzdrA1mZ7X6/MnE4NaUYv99E1BQCnKX0Xt6K191VYzuhRRvgk+kJVAOHsyiPYXga39yvCGZ021M+iE2UGgL34T6G2+HWXp5FGp3RqWD+L/srKA0BLpDG8oDzT+xu2czqFMcKn0V+JLMAeTVHbG53dfVITOqcTbeCPomtyB8p8Kdv0j8q1l8HSNRXbGT1Dg3g5XfECnt/ApHvnVLomnNPDkODQqz/r5U46xYE83bZUJH9p64N+j04JzdKFP4FOETI9eU2os03uOV1L3tBH+wg6lf/HFmDjn1MVxDO6pkt8p7fxGfSEOj2K2fxzqrHTCd2U/IFeEO6l1+HRdUy9z48jdLaN7oxOBeWNnrDdSy/i00ezDew/q0YU+0ufbksebP7lfXQEly5sduUzyD5sKZzTo+xK1/K5kZ6Q/V4v2sAmw55TZazndFvyYNNIt9GXMfwVPtgh2/nRIe+Dfkinhqh0va3cR88olh6F/ROo2TlVRP0xPUo/0qlJvJO+MIrdzfWgJeikjyNyK0g/ptOGcqSHPuI7fZURrqIv/PaoRll68F+9Tbbr0nqnn9OpAUxHu+QDPTT0eOGT29rRsrI6qh7JOLGvoKqg/Ak9DDAdU7Gv3/TcMMrFD63r9wclHYPD/M2Sv7NPQPgTOm2GTpGBxq8IwPnGz4gK/f0E/pXyfDymeegP/aE/9If+H1jRTNYUyygRAAAAAElFTkSuQmCC') /*images/notification_saving.png*/;
    background-position: center center;
    background-repeat: no-repeat;
}

.submitted-expense-disable-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAyCAMAAABCiTbWAAAAM1BMVEUARn////8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn9dO0aKAAAAEHRSTlMAABEiM0RVZneImaq7zN3uf6QJ9gAAA9RJREFUeF7t2lGPpSwMBuAKKFCEvv//1345m/mm8bTEnU10T7K+F3MxczE80iKitPyzeejHPPSH/tAfOhFR4VcS/f2s/Eq+hx4Z6PwK0FbykiCBNBFMkzQJvwBYFYNGbsDG3QB+ZaCX6+kN+/pNbNgD2VQgG6CXACZLR/4tetjBkb7GX7rka+mxj8NEpzESmUjrO2low+bTC1aPLvGcTmn0SETf4y8oV9LD6IEOCd2Oc0MuiKQJ0nx6H+TQGe2cnmSnV3T8K8qFdJa40DFRdqeBIwppiBH8NaF49FxRzuhhdHqjLwXrZfSAsrzTKWNzGngfpKHVtVBFdOk0JJ7QWaKhL32/jJ6RLJ1GMw389UMzukeXnXx6Qp/R9Vpa+ob1KnrB4tCrOA0cjp1ZkKxlQ57QqSjNpbOQ0jVSr6KzS884VGdEtTe0iGrpLGFGp444p1NAdel7u4pe3IJfEc0Ef02pZhd6TxCmKT2iz+m0Ibl07lfRN7vM2YyujazJWP310ad7JQ92e+yePXzACB7dXcwrop1iUwhTOnWkKb33u+kLo53RGUFv2qaxTfvP6VHGlD74dnoY6MFy/Y3b6GY5t2vCnE4FdUbH/fQldkhxzdrA1mZ7X6/MnE4NaUYv99E1BQCnKX0Xt6K191VYzuhRRvgk+kJVAOHsyiPYXga39yvCGZ021M+iE2UGgL34T6G2+HWXp5FGp3RqWD+L/srKA0BLpDG8oDzT+xu2czqFMcKn0V+JLMAeTVHbG53dfVITOqcTbeCPomtyB8p8Kdv0j8q1l8HSNRXbGT1Dg3g5XfECnt/ApHvnVLomnNPDkODQqz/r5U46xYE83bZUJH9p64N+j04JzdKFP4FOETI9eU2os03uOV1L3tBH+wg6lf/HFmDjn1MVxDO6pkt8p7fxGfSEOj2K2fxzqrHTCd2U/IFeEO6l1+HRdUy9z48jdLaN7oxOBeWNnrDdSy/i00ezDew/q0YU+0ufbksebP7lfXQEly5sduUzyD5sKZzTo+xK1/K5kZ6Q/V4v2sAmw55TZazndFvyYNNIt9GXMfwVPtgh2/nRIe+Dfkinhqh0va3cR88olh6F/ROo2TlVRP0xPUo/0qlJvJO+MIrdzfWgJeikjyNyK0g/ptOGcqSHPuI7fZURrqIv/PaoRll68F+9Tbbr0nqnn9OpAUxHu+QDPTT0eOGT29rRsrI6qh7JOLGvoKqg/Ak9DDAdU7Gv3/TcMMrFD63r9wclHYPD/M2Sv7NPQPgTOm2GTpGBxq8IwPnGz4gK/f0E/pXyfDymeegP/aE/9If+H1jRTNYUyygRAAAAAElFTkSuQmCC') /*images/notification_saving.png*/;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 5;
}

.approvals-expense-disable-overlay {
    position: absolute;
    width: 920px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAyCAMAAABCiTbWAAAAM1BMVEUARn////8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn8ARn9dO0aKAAAAEHRSTlMAABEiM0RVZneImaq7zN3uf6QJ9gAAA9RJREFUeF7t2lGPpSwMBuAKKFCEvv//1345m/mm8bTEnU10T7K+F3MxczE80iKitPyzeejHPPSH/tAfOhFR4VcS/f2s/Eq+hx4Z6PwK0FbykiCBNBFMkzQJvwBYFYNGbsDG3QB+ZaCX6+kN+/pNbNgD2VQgG6CXACZLR/4tetjBkb7GX7rka+mxj8NEpzESmUjrO2low+bTC1aPLvGcTmn0SETf4y8oV9LD6IEOCd2Oc0MuiKQJ0nx6H+TQGe2cnmSnV3T8K8qFdJa40DFRdqeBIwppiBH8NaF49FxRzuhhdHqjLwXrZfSAsrzTKWNzGngfpKHVtVBFdOk0JJ7QWaKhL32/jJ6RLJ1GMw389UMzukeXnXx6Qp/R9Vpa+ob1KnrB4tCrOA0cjp1ZkKxlQ57QqSjNpbOQ0jVSr6KzS884VGdEtTe0iGrpLGFGp444p1NAdel7u4pe3IJfEc0Ef02pZhd6TxCmKT2iz+m0Ibl07lfRN7vM2YyujazJWP310ad7JQ92e+yePXzACB7dXcwrop1iUwhTOnWkKb33u+kLo53RGUFv2qaxTfvP6VHGlD74dnoY6MFy/Y3b6GY5t2vCnE4FdUbH/fQldkhxzdrA1mZ7X6/MnE4NaUYv99E1BQCnKX0Xt6K191VYzuhRRvgk+kJVAOHsyiPYXga39yvCGZ021M+iE2UGgL34T6G2+HWXp5FGp3RqWD+L/srKA0BLpDG8oDzT+xu2czqFMcKn0V+JLMAeTVHbG53dfVITOqcTbeCPomtyB8p8Kdv0j8q1l8HSNRXbGT1Dg3g5XfECnt/ApHvnVLomnNPDkODQqz/r5U46xYE83bZUJH9p64N+j04JzdKFP4FOETI9eU2os03uOV1L3tBH+wg6lf/HFmDjn1MVxDO6pkt8p7fxGfSEOj2K2fxzqrHTCd2U/IFeEO6l1+HRdUy9z48jdLaN7oxOBeWNnrDdSy/i00ezDew/q0YU+0ufbksebP7lfXQEly5sduUzyD5sKZzTo+xK1/K5kZ6Q/V4v2sAmw55TZazndFvyYNNIt9GXMfwVPtgh2/nRIe+Dfkinhqh0va3cR88olh6F/ROo2TlVRP0xPUo/0qlJvJO+MIrdzfWgJeikjyNyK0g/ptOGcqSHPuI7fZURrqIv/PaoRll68F+9Tbbr0nqnn9OpAUxHu+QDPTT0eOGT29rRsrI6qh7JOLGvoKqg/Ak9DDAdU7Gv3/TcMMrFD63r9wclHYPD/M2Sv7NPQPgTOm2GTpGBxq8IwPnGz4gK/f0E/pXyfDymeegP/aE/9If+H1jRTNYUyygRAAAAAElFTkSuQmCC') /*images/notification_saving.png*/;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 5;
}

.submitter-rejectReason {
    font-size: 12px;
    max-height: 45px;
    width: 200px;
    text-align: left;
    color: #900;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Comment section */

.commentLoading {
    background: url(images/loading_animation.gif) no-repeat 550px 0;
    height: 50px;
}

.expenseCommentSection {
    margin-top: 5px;
}

.commentLabel {
    cursor: pointer;
    display: inline;
}

.commentLists {
    margin-bottom: 2px;
    margin-top: 2px;
}

    .commentLists .commentList {
        margin-bottom: 2px;
        clear: both;
        width: 100%;
        box-sizing: border-box;
    }

.commentList .commentedBy {
    width: 150px;
    display: inline-block;
    margin-right: 2px;
    float: left;
}

.commentList .actualComment {
    display: inline-block;
}

.commentList .commentDateTime {
    float: right;
    color: rgba(0, 70, 127, 1);
}

.commentList .deleteComment {
    display: inline-block;
    float: right;
    width: 20px;
    cursor: pointer;
}

.commentList .actualComment, .commentList .commentedBy {
    background-color: #a4cff2;
    padding: 2px 5px;
    box-sizing: border-box;
}

.addCommentLabel {
    display: inline-block;
    width: 150px;
    padding-left: 2px;
    box-sizing: border-box;
}

.addCommentButton {
    background-color: rgba(0, 70, 127, 1);
    color: white;
    width: 60px;
    cursor: pointer;
}

.SubmitterExpenseCommentSection .actualComment {
    width: 1053px;
}

.ApprovalExpenseCommentSection .actualComment {
    width: 780px;
}

.ReqPreExpenseCommentSection .actualComment{
    width: 690px;
}

.ApprovePreExpenseCommentSection .actualComment{
    width: 690px;
}

.SubmitterExpenseCommentSection .addCommentInput {
    width: 986px;
}

.ApprovalExpenseCommentSection .addCommentInput {
    width: 715px;
}

.ReqPreExpenseCommentSection .addCommentInput{
    width: 623px;
}

.ApprovePreExpenseCommentSection .addCommentInput{
    width: 623px;
}


.triangle {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 5px;
    transition: 0.1s ease all;
    -webkit-transition: 0.1s ease all;
}

.triangleRight {
    border-top: 5px solid transparent;
    border-left: 10px solid black;
    border-bottom: 5px solid transparent;
}

.triangleDown {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid black;
}

.ng-helpModal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 100%;
    display: inline-block;
    font-weight: bold;
    font-family: 'Arial', 'sans-serif';
}
/* End of Comment section */


#PreExpenseToDate {
    float: right;
    /*margin-right: 15px;*/
}

.preauthorization-expense-wrapper {
    padding: 0 0px 15px 0px;
    padding-left: 0px;
    background: #fff;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
}

    .preauthorization-expense-wrapper .authheader {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        background: white;
        font-family: "Roboto";
        font-size: 25px;
        font-weight: normal;
        padding: 3px 1%;
        margin-bottom: 15px;
        float: left;
        width: 98%;
    }


.preexpensecontrols {
    display: inline-block;
    width: 100%;
}

    .preexpensecontrols .left-area {
        float: left;
        width: 350px;
        height: 360px;
        margin-right: 10px;
    }

        .preexpensecontrols .left-area select {
            font-family: "Roboto";
            width: 100%;
            height: 25px;
            /*margin-top: 10px;
            margin-left: 10px;*/
        }

        .preexpensecontrols .left-area input {
            font-weight: 200;
            width: 430px;
            height: 20px;
            /*margin-top: 10px;
            margin-left: 10px;*/
            /*border: 1px solid;*/
        }

        .preexpensecontrols .left-area label {
            font-weight: 400;
            width: 100%;
            height: 20px;
            /*margin-top: 10px;
            margin-left: 10px;*/
            float: left;
        }

.PreReqAuthor {
    width: 100%;
    float: left;
    background-color: #c3d7e7;
    /*padding: 10px;*/
}

.preexpensecontrols .left-area .AuthorformTopSection {
    padding: 10px;
}

    .preexpensecontrols .left-area .AuthorformTopSection > * {
        margin-bottom: 10px;
    }

.preexpensecontrols .left-area .calender-wrapper {
    width: 100%;
    float: left;
    margin-top: 0px;
}

    .preexpensecontrols .left-area .calender-wrapper input {
        font-weight: 200;
        width: 120px;
        height: 20px;
    }

.preexpensecontrols .left-area .amount-wrapper {
    display: inline-block;
    float: left;
}

    .preexpensecontrols .left-area .amount-wrapper span {
        display: inline-block;
    }

    .preexpensecontrols .left-area .amount-wrapper input {
        font-weight: 200;
        width: 70%;
        height: 20px;
        display: inline-block;
    }

.preexpensecontrols .left-area .desc-textarea {
    height: 125px;
    margin-top: 0px;
}

/*.preexpensecontrols .left-area .save-button {
    color: #fff;
    background: #00467f;
    width: 140px;
    height: 22px;
    text-align: center;
    float: right;
    border: none;
    margin-top: 28px;
    font-size: 15px;
    line-height: 22px;
    font-family: "Roboto";
    cursor: pointer;
    padding: 0px;
}*/

.preexpensecontrols .left-area .save-button {
    background: #00467f;
    width: 135px;
    height: 22px;
    font-size: 15px;
    cursor: pointer;
    padding: 0px;
}

.preexpensecontrols .left-area .save-disabledbutton {
    color: #fff;
    background: #4a4a4a;
    width: 220px;
    height: 30px;
    text-align: center;
    float: right;
    border: 1px solid;
    margin-top: 28px;
    font-size: 20px;
    font-family: "Roboto";
    cursor: pointer;
}

.preexpensecontrols .left-area .PreExpenseName {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 5px;
}

.preexpensecontrols .NoPreAuthExpenses {
    text-align: center;
    font-weight: bolder;
    background: rgb(195, 215, 231);
    clear: both;
    border-radius: 10px;
    margin-bottom: 5px;
}

.preexpensecontrols .preExpenseLoading img {
    height: 20px;
    margin-bottom: 10px;
}

.preexpensecontrols .right-area {
    float: right;
    width: 877px;
    background: #fff;
}

    .preexpensecontrols .right-area .authcontainer {
        position: relative;
        margin-bottom: 10px;
        float: left;
        width: 100%;
    }

        .preexpensecontrols .right-area .authcontainer .authdetailcontainer {
            float: left;
            margin-bottom: 10px;
            width: 100%;
        }

        .preexpensecontrols .right-area .authcontainer .authapprovalcontainer {
            background: rgba(255,255,255,0.6);
            position: absolute;
            height: 86px;
            width: 100%;
            display: table;
            text-align: center;
        }

            .preexpensecontrols .right-area .authcontainer .authapprovalcontainer .textcontainer {
                display: table-cell;
                vertical-align: middle;
            }

            .preexpensecontrols .right-area .authcontainer .authapprovalcontainer .text {
                background: rgba(255,255,255,1);
                text-align: center;
                display: inline-block;
                font-size: 25px;
                padding: 2px 30px 2px 30px;
            }

    .preexpensecontrols .right-area .authdetailtrow {
        background: #00467f;
        font-size: 12px;
        padding: 3px 0;
        float: left;
        width: 100%;
    }

        .preexpensecontrols .right-area .authdetailtrow .preexpenseid {
            float: left;
            color: white;
            padding-left: 5px;
        }

        .preexpensecontrols .right-area .authdetailtrow .preexpensedate, .preexpensecontrols .right-area .authdetailtrow .preexpenseName {
            float: left;
            color: white;
            padding-left: 40px;
        }

        .preexpensecontrols .right-area .authdetailtrow .preexpenseName {
            font-weight: bold;
            width: 220px;
            max-width: 220px;
        }

        .preexpensecontrols .right-area .authdetailtrow .preexpenseallocation {
            float: right;
            color: white;
            padding-right: 5px;
        }

    .preexpensecontrols .right-area .authsubmitterrow {
        background: #6388a6;
        font-size: 12px;
        padding: 3px 0;
        float: left;
        width: 100%;
    }

        .preexpensecontrols .right-area .authsubmitterrow .submitter {
            float: left;
            color: white;
            padding-left: 5px;
        }

        .preexpensecontrols .right-area .authsubmitterrow .preexpenseProject {
            float: left;
            color: white;
            padding-left: 40px;
            width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .preexpensecontrols .right-area .authsubmitterrow .submitterallocation {
            color: white;
            padding-left: 130px;
            float: left;
        }

        .preexpensecontrols .right-area .authsubmitterrow .preexpenseapprover {
            float: right;
            color: white;
            padding-right: 5px;
        }

    .preexpensecontrols .right-area .authdescrow {
        background: #e4e4e4;
        float: left;
        width: 100%;
        height: 100%;
        font-size: 12px;
        padding: 5px;
        box-sizing: border-box;
    }

        .preexpensecontrols .right-area .authdescrow .submitter {
            float: left;
            color: black;
        }

        .preexpensecontrols .right-area .authdescrow .submitterallocation {
            color: black;
            left: 200px;
            float: left;
            position: absolute;
        }

        .preexpensecontrols .right-area .authdescrow .progress-bar {
            height: 10px;
            width: 380px;
            float: right;
            border: 1px solid #999595;
            background: #60cc69;
            margin-top: 3px;
            margin-right: 0px;
        }

        .preexpensecontrols .right-area .authdescrow .shade1 {
            float: left;
            background: #067b09;
            height: 100%;
        }

        .preexpensecontrols .right-area .authdescrow .preexpense-descdiv, .preexpensecontrols .right-area .authdescrow .preexpense-denialReasonDiv {
            margin-top: 10px;
            float: left;
            clear: left;
        }

        .preexpensecontrols .right-area .authdescrow .preexpense-desc {
            font-weight: bold;
            text-shadow: 0.5px 0px black;
        }

        .preexpensecontrols .right-area .authdescrow .preexpense-denialReasonLabel {
            font-weight: bold;
        }

        .preexpensecontrols .right-area .authdescrow .preexpense-denialReasonDiv {
            border: 1px solid #b50000;
            color: #b50000;
            padding: 5px;
        }


        /*********************** Increase Budget ***********************/

        .preexpensecontrols .right-area .authdescrow .PreAuthDetails,
        .authcontainer .authdescrow .PreAuthDetails {
            display: inline-block;
            width: 100%;
        }

        .preexpensecontrols .right-area .authdescrow .reqPreAuthDetailsBottom {
            border: 1px solid black;
        }


        .preexpensecontrols .right-area .authdescrow .PreAuthViewExpLabel {
            padding-left: 5px;
            color: darkblue;
            text-decoration: underline;
            cursor: pointer;
            margin-top: 5px;
            display: inline-block;
        }


        .preexpensecontrols .right-area .authdescrow .reqPreAuthDetailsBottom .RPAGetContentSection {
            padding: 5px;
        }

        .preexpensecontrols .right-area .authdescrow .reqPreAuthDetailsBottom .RPAShowContentSection .reqPreAuthAllocationTitle {
            background: #6388a6;
            color: white;
            font-weight: bold;
            padding: 2px 5px;
        }

        .preexpensecontrols .right-area .authdescrow .reqPreAuthDetailsBottom .reqPreAuthAllocationTitle {
            font-weight: bold;
            font-size: 11px;
        }

        .preexpensecontrols .right-area .authdescrow .reqPreAuthDetailsBottom .reqPreAuthAllocationShowDetailsContainer {
            margin: 0px 5px;
        }


        .preexpensecontrols .right-area .authdescrow .reqPreAuthDetailsBottom, .preexpensecontrols .right-area .authdescrow .reqPreAuthGetDetailsTop {
            margin-top: 5px;
        }

            .preexpensecontrols .right-area .authdescrow .reqPreAuthGetDetailsTop > .RPARequestLabel {
                background: #00467f;
                color: white;
                cursor: pointer;
                padding: 1px 15px;
            }

        .preexpensecontrols .right-area .authdescrow .reqPreAuthShowDetailsBottom .RPAColHeader {
            font-weight: bold;
            font-size: 11px;
            line-height: 23px;
            text-shadow: 0.5px 0px black;
        }

.RPAaction > img {
    height: 15px;
}

.RPAGetButtons {
    float: right;
    position: relative;
    bottom: 28px;
}

    .RPAGetButtons .RPAbuttons > input {
        padding: 0px 20px;
        cursor: pointer;
        color: white;
        font-size: 10.5px;
    }

    .RPAGetButtons .RPAbuttons .RPACancel {
        background: rgba(120, 120, 120, 1);
    }

    .RPAGetButtons .RPAbuttons .RPASave {
        background: #00467f;
    }

.reqPreAuthAllocationShowDetailsContainer:not(:last-child) {
    border-bottom: 1px solid rgba(153, 153, 153, 0.7);
}

.RPAColContainer {
    display: table-cell;
    padding-right: 5px;
}

    .RPAColContainer .RPAInvalidData {
        color: red;
        font-size: 10px;
        padding-left: 5px;
    }

.RPAGetReason .RPAreason {
    width: 525px;
}

.RPAamount, .RPAreason, .RPAbuttons, .RPAsubmitDate, .RPArequestedAmount,
.RPAsubmitterReason, .RPAadjustmentStatus, .RPAapprovedAmt, .RPAapproverComment,
.RPA_expSubmitDate, .RPA_expDescription, .RPA_expLastSubmittedDate, .RPA_expCategoryName,
.RPA_expAmount, .RPA_expStatus, .RPA_expenseID, .RPA_expApprovedBy {
    display: block;
    font-size: 11px;
}

.RPAShowSubmitDate, .RPA_ExpSubmitDate, .RPA_ExpLastSubmittedDate {
    width: 63px;
    max-width: 63px;
}

.RPAAction {
    width: 40px;
    max-width: 40px;
}

.RPARequestedAmount {
    width: 85px;
    max-width: 85px;
}

.RPASubmitterReason {
    width: 250px;
    max-width: 250px;
}

.RPAAdjustmentStatus {
    width: 95px;
    max-width: 95px;
}

.RPAApprovedAmount {
    width: 80px;
    max-width: 80px;
}

.RPAApproverComment {
    width: 250px;
    max-width: 250px;
}

    .RPAApproverComment.PreAuth {
        width: 310px;
        max-width: 310px;
    }


.RPAamount, .RPAreason {
    height: 10px;
}

.RPAamount {
    width: 70px;
}


.RPAsubmitterReason, .RPAapproverComment {
    width: 250px;
}

    .RPAApproverComment .RPAreason {
        width: 250px;
    }

    .RPAApproverComment.PreAuth .RPAreason {
        width: 305px;
    }


.RPA_ExpenseID {
    width: 60px;
    max-width: 60px;
}

.RPA_ExpCategoryName {
    width: 130px;
    max-width: 130px;
}

.RPA_ExpAmount {
    width: 75px;
    max-width: 75px;
}

    .RPA_ExpAmount .RPA_expAmount {
        padding-right: 5px;
    }

.RPA_ExpStatus {
    width: 90px;
    max-width: 90px;
}

.RPA_ExpApproved {
    width: 75px;
    max-width: 75px;
}

.RPA_ExpDescription {
    width: 200px;
    max-width: 200px;
}

.RPA_ExpApprovedBy {
    width: 140px;
    max-width: 140px;
}

admin-body {
    margin: 0 auto;
    font-family: "Roboto", Myriad Pro;
    font-size: 15px;
    font-weight: 300;
}

.admin-header {
    background: #000;
    height: 30px;
    padding: 10px 0px;
}

    .admin-header h1 {
        color: #fff;
        font-size: 15px;
        font-weight: 300;
        padding: 0;
        margin: 0;
    }

#admin-header-fixed {
    position: fixed;
    top: 85px;
    display: none;
    border-collapse: collapse;
}

    #admin-header-fixed th {
        /*background-color: red;*/
    }

.admin-container {
    width: 1252px;
    margin: 0 auto;
}

.admin-body-content {
    background: #fff;
}

admin-ul.nav {
    width: 100%;
    background: #d7d7d7;
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 20px 0 0 0;
}

    admin-ul.nav li {
        list-style: none;
        float: left;
        padding: 12px 20px;
        border-right: 1px solid #fff;
    }

        admin-ul.nav li.active {
            background: #4a4a4a;
            color: #fff;
        }

.admin-Expenseapproval-tablewrap {
    float: right;
    width: 810px;
    padding: 20px;
}

    .admin-Expenseapproval-tablewrap h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 300;
    }

/*Grid styles new*/

.admin-table-controls {
    padding: 10px 15px;
    background: #4a4a4a;
    color: #fff;
    margin-top: 10px;
    font-size: 15px;
}

.admin-search-controls {
    width: 462px;
    display: inline-block;
}

.admin-total-label {
    font-size: 10px;
}

.admin-total-amount {
    font-size: 20px;
}

.admin-expenseTable th {
    font-size: 15px;
}

.admin-expenseTable tbody {
    font-size: 10px;
}

.admin-table-oddChild {
    background: #d0d0d0;
}

.admin-table-evenChild {
    background: #c3c3c3;
}

.admin-tableHead {
    font-size: 15px;
    padding: 10px 12px;
    background: #656565;
    color: #fff;
}

.admin-tableBody {
    font-size: 10px;
    padding: 10px 15px;
}

.admin-categoryHead, .admin-submitdateHead, .admin-amountHead, .admin-expdateHead, .admin-statusHead {
    width: 100px;
    display: inline-block;
}

.admin-descHead {
    width: 135px;
    display: inline-block;
}

.admin-projectHead {
    width: 125px;
    display: inline-block;
}

.admin-expanded-div {
    display: inline-block;
    padding: 20px 20px 20px 0;
}

.admin-testrecieptImg {
    background: red;
    height: 225px;
    width: 385px;
    float: left;
}

.admin-sectionDesc {
    display: inline-block;
    width: 315px;
    height: 266px;
    padding: 0px 20px;
}

.admin-section-wrap {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    min-width: 140px;
}

.admin-sectiondesc-wrap {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
    min-width: 140px;
}

    .admin-sectiondesc-wrap label {
        display: block;
    }

    .admin-sectiondesc-wrap span {
        font-size: 14px;
        ;
    }

.admin-section-wrap label {
    display: block;
}

.admin-section-wrap span {
    font-size: 14px;
    ;
}

.admin-desc-wrap label {
    font-weight: bold;
}

.admin-progress-bar {
    height: 10px;
    width: 100%;
    background: green;
    display: inline-block;
    margin-right: 10px;
}

.admin-approvalAmount {
    font-size: 42px;
}

.admin-total-amount-wrap {
    background: #4a4a4a;
    color: #fff;
    padding: 5px 10px;
    text-align: right;
}

.admin-deny-btn, .admin-approve-btn {
    padding: 5px 15px;
    color: #fff;
    font-size: 10px;
    text-decoration: none;
}

.admin-deny-btn {
    background: #4c0000;
}

.admin-approve-btn {
    background: #004c0d;
}

.admin-approvalAmount-wrap {
    padding: 50px 0px 0px 0px;
    display: inline-block;
    width: 100%;
    line-height: 100%;
    vertical-align: bottom;
}

.admin-approvalAmount {
    float: left;
}

.admin-btn-wrap {
    float: right;
}

.admin-approvals {
    float: left;
    width: 290px;
    background: #d0d0d0;
    margin-top: 30px;
    padding: 25px 20px;
}

    .admin-approvals h2 {
        margin: 0;
        font-size: 35px;
        font-weight: 300;
    }

.admin-approval-head-label {
    margin: 0;
    font-size: 12px;
}

.admin-approval-amount {
    font-size: 25px;
    font-weight: bold;
}

.admin-approval-allocated-progress {
    height: 15px;
}

.admin-approved-amount {
    width: 30%;
    background: #007c0c;
    height: 15px;
    display: inline-block;
    float: left;
}

.admin-allocated-amount {
    width: 70%;
    background: #62c66b;
    height: 15px;
    display: inline-block;
    float: left;
}

.admin-approval-amount.second {
    color: #cb7700;
}

.admin-approval-allocated-progress.second .admin-approved-amount {
    background: #cb7700;
}

.admin-approval-allocated-progress.second .admin-allocated-amount {
    background: #ddac4e;
}

.admin-approval-amount.first, .admin-approval-amount.third {
    color: #007c0c;
}

.admin-approval-amount.fourth {
    color: #b50000;
}

.admin-approval-allocated-progress.fourth a {
    background: #b50000;
}

.admin-approversList h3 {
    font-weight: 300;
    font-size: 20px;
}

.admin-approval-allocated-progress.first, .admin-approval-allocated-progress.second, .admin-approval-allocated-progress.third, .admin-approval-allocated-progress.fourth {
    height: 8px;
}

    .admin-approval-allocated-progress.second a, .admin-approval-allocated-progress.first a, .admin-approval-allocated-progress.third a, .admin-approval-allocated-progress.fourth a {
        margin: 5px 0px;
        height: 8px;
    }

.admin-approvedList {
    margin-top: 30px;
    border-top: 1px solid #000;
}

    .admin-approvedList h3 {
        font-size: 20px;
        font-weight: 300;
        margin: 5px 0px;
    }

.admin-aprrovedList-head {
    background: #656565;
    padding: 5px;
}

    .admin-aprrovedList-head select {
        width: 100%;
        background: #e0e0e0;
        margin-bottom: 5px;
        height: 25px;
    }

.admin-expCat-head, .admin-expAmt-head, .admin-expAvg-head {
    display: inline-block;
    width: 70px;
    padding: 5px 10px;
    color: #fff;
}

.admin-approvedList-detail {
    background: #fff;
    height: 300px;
}

.admin-totalLabel-head {
    width: 49%;
    color: #fff;
    text-align: left;
    display: inline-block;
}

.admin-totalAmt-head {
    width: 49%;
    color: #fff;
    text-align: right;
    display: inline-block;
}

.admin-approverLimits h2, .admin-alternateApprover h2 {
    font-size: 28px;
    padding: 5px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}

.admin-approverLimits, .admin-alternateApprover {
    display: inline-block;
    width: 46%;
    margin-top: 15px;
    float: left;
}

.admin-alternateApprover {
    margin-left: 35px;
}

    .admin-alternateApprover select {
        width: 60%;
        background: #e0e0e0;
        margin-top: 5px;
        border: none;
        height: 25px;
    }

.admin-approverLimits span {
    width: 100px;
    display: inline-block;
    text-align: right;
    font-size: 10px;
}

.admin-approverLimits label {
    width: 120px;
    display: inline-block;
    font-size: 10px;
}

.admin-approverLimits input[type="text"] {
    width: 100px;
    height: 10px;
    display: inline-block;
}

.admin-text-center {
    text-align: center;
}

.admin-Expenseapproval-tablewrap input[type="button"] {
    background: #333;
    cursor: pointer;
    border: none;
    color: #fff;
    padding: 7px 20px;
    margin-right: 5px;
}


/*Expenses styles*/

.admin-expenses {
    float: left;
    width: 100%;
}

    .admin-expenses h2 {
        font-size: 28px;
        font-weight: normal;
        margin: 15px 0 10px;
        line-height: 32px;
    }

    .admin-expenses .darkGrayBg {
        background-color: #4a4a4a;
        padding: 6px 0.5%;
        width: 99%;
        float: left;
    }

    .admin-expenses .admin-darkGrayBg .admin-selectGroupBy, .admin-expenses .admin-darkGrayBg .admin-search {
        border: 0px;
        background: #FFFFFF;
        color: #646464;
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 14px;
    }

.admin-pull-left {
    float: left;
    width: auto;
}

.admin-pull-right {
    float: right;
    width: auto;
}

.admin-expenses .admin-darkGrayBg .admin-total h3 {
    color: #fff;
    font-size: 20px;
    margin: 0px;
    font-weight: normal;
    margin: -3px 0;
}

    .admin-expenses .admin-darkGrayBg .admin-total h3 .admin-small {
        font-size: 50%;
        text-transform: uppercase;
    }

.admin-expenses table.groupTable thead,
.admin-expenses table.groupTable th {
    background-color: #656565;
    color: #fff;
    font-size: 14px;
    e font-weight: normal;
    padding: 5px 10px;
    text-align: left;
}

    .admin-expenses table.groupTable th:nth-child(3) {
        width: 35%;
    }

.admin-expenses table.groupTable tr td {
    padding: 5px 10px;
    height: 15px;
    background-color: #c3c3c3;
}

.admin-expenses table.groupTable tr.altColor td {
    background-color: #d0d0d0;
}

.admin-expenses table.groupTable tr.groupBy td {
    background-color: #797979;
    color: #fff;
}

.admin-expenses table.groupTable tr.groupBy label {
    margin: 0 0 0 5px;
}

.admin-expenses .row {
    float: left;
    width: 100%;
}

.admin-expenses .exportBtn {
    background-color: #104905;
    color: #fff;
    padding: 10px 30px;
    border: 0px;
    margin: 0px;
    font-size: 16px;
}

/*End of Expenses styles*/



/*Create Batch Process styles*/

.grayBG {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

.CreateBatchProcess {
    /*position:absolute;
	top:8%;
	left:7%;
	right:7%;
	float:left;*/
    z-index: 99999;
    /*margin: 5% auto 0 auto;*/
    margin: auto;
    margin-top: 2%;
}

.CreateBatchProcessTitle {
    width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.CreateBatchProcess h2 {
    font-weight: normal;
    font-size: 40px;
    color: #fff;
    margin: 0px;
    padding: 0px;
    padding-bottom: 5px;
}

.CreateBatchProcess .container {
    width: 1180px;
    min-height: 665px;
    background-color: #fff;
    padding: 20px;
    /*float:left;*/
}

.CreateBatchProcess .tableData {
    border: 1px solid #f2f2f2;
    min-height: 600px;
    float: left;
    width: 100%;
    max-height: 400px;
    overflow: auto;
}

.CreateBatchProcess .CreateBatchProcessLoadingIcon {
    position: absolute;
    left: 50%;
    top: 50%;
}

.CreateBatchProcess .tableDataFooter {
    background-color: #00477f;
    height: 30px;
    float: left;
    width: 98%;
    padding: 0 1%;
}

    .CreateBatchProcess .tableDataFooter h3 {
        margin: 0px;
        padding: 0px;
        float: right;
        width: auto;
        color: #fff;
        font-weight: bold;
        font-size: 22px;
    }

        .CreateBatchProcess .tableDataFooter h3 span.small {
            font-size: 60%;
            font-weight: normal;
        }

.CreateBatchProcess .tableData table.groupTable {
    width: 100%;
}

    .CreateBatchProcess .tableData table.groupTable thead,
    .CreateBatchProcess .tableData table.groupTable th {
        background-color: #00477f;
        color: #fff;
        font-size: 15px;
        font-weight: normal;
        padding: 5px 10px;
        text-align: left;
        white-space: nowrap;
    }

    .CreateBatchProcess .tableData table.groupTable tr td {
        padding: 5px 10px;
        height: 15px;
        /*background-color:#c3c3c3;*/
        font-size: 12px;
    }

.CreateBatchProcess .expenses table.groupTable tr:hover {
    background-color: rgb(161, 210, 250) !important;
}


/*
	.CreateBatchProcess .tableData table.groupTable tr:nth-child(even) td {
		background-color: #CEE9FF;
	}

	.CreateBatchProcess .tableData table.groupTable tr:nth-child(odd) td {
		background-color: #DEF0FF;
	}
		*/



.CreateBatchProcess .tableData table.groupTable tr.groupBy td {
    background-color: #797979;
    color: #fff;
    font-size: 15px;
}

.CreateBatchProcess .tableData table.groupTable tr.groupBy label {
    margin: 0 0 0 5px;
}

.CreateBatchProcess .tableData .row {
    float: left;
    width: 100%;
}

.CreateBatchProcess .glCode {
    float: left;
    width: 128px;
    border: 1px solid #707070;
    background-color: #707070;
    border-radius: 1px;
    font-size: 11px;
}

    .CreateBatchProcess .glCode input[type=text ] {
        width: 29px;
        font-size: 11px;
        color: #000;
        border: none;
        float: left;
        margin: 0px;
        height: 17px;
        line-height: 17px;
        padding: 0px 2px;
    }

        .CreateBatchProcess .glCode input[type=text].maxlength2 {
            width: 15px;
        }

    .CreateBatchProcess .glCode span {
        min-width: 10px;
        float: left;
        text-align: center;
        color: #fff;
        height: 17px;
        line-height: 17px;
    }

        .CreateBatchProcess .glCode span.last {
            width: 24px;
        }

.CreateBatchProcess .buttons {
    margin: 20px 0px -20px 0px;
    float: left;
    width: 100%;
}

    .CreateBatchProcess .buttons button {
        float: left;
        width: 195px;
        height: 33px;
        font-size: 20px;
        font-weight: normal;
        line-height: 33px;
        border: none;
        margin: 0px;
        color: #fff;
        cursor: pointer;
    }

        .CreateBatchProcess .buttons button.ok {
            float: right;
            background-color: #0c5b00;
            margin-right: -20px;
        }

        .CreateBatchProcess .buttons button.cancel {
            background-color: #6e6e6e;
            margin-left: -20px;
        }
         .CreateBatchProcess .buttons button.disabled {
            background-color: #6e6e6e;
            margin-left: -20px;
             opacity: 0.65; 
            cursor: not-allowed;
        }

.admin-GridGLCode {
    max-width: 140px;
}

#admin-createBatchReceipt {
    text-align: center;
}

.approvals-billableText {
    /*position: absolute;*/
}
/*Create Batch Process styles*/

.expenses table.groupTable {
    width: 100%;
}

    .expenses table.groupTable thead th {
        background-color: #5e788c;
        color: #fff;
        font-size: 15px;
        font-weight: normal;
        padding: 5px 10px;
        text-align: left;
    }

    .expenses table.groupTable th:nth-child(3) {
        width: 35%;
    }

    .expenses table.groupTable tr:not([class='GroupByRow']):hover {
        background-color: rgb(161, 210, 250);
    }

    .expenses table.groupTable tr td {
        padding: 0 5px;
        font-size: 12px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
    }

    .expenses table.groupTable tr:nth-child(odd) {
        background-color: #DEF0FF;
    }

    .expenses table.groupTable tr:nth-child(even) {
        background-color: #CEE9FF;
    }

    .expenses table.groupTable tr.groupBy td {
        background-color: #797979;
        color: #fff;
        font-size: 15px;
    }

    .expenses table.groupTable tr.groupBy label {
        margin: 0 0 0 5px;
    }

    .expenses table.groupTable tbody tr .pdf-GridDate {
        text-align: left;
    }

    .expenses table.groupTable tbody tr .admin-GridDate,
    .expenses table.groupTable tbody tr .admin-GridAmount,
    .expenses table.groupTable tbody tr .admin-GridID {
        text-align: right;
    }

    .expenses table.groupTable tr .admin-GridStatus,
    .expenses table.groupTable tr .admin-GridReceipt,
    .expenses table.groupTable tr .admin-GridBillable,
    .expenses table.groupTable tr .admin-GridChecked,
    .expenses table.groupTable tr .admin-GridAmount div.centerImage {
        text-align: center;
    }

        .expenses table.groupTable tr .admin-GridChecked,
        .expenses table.groupTable tr .admin-GridBillable,
        .expenses table.groupTable tr .admin-Description,
        .expenses table.groupTable tr .admin-GridReceipt,
        .expenses table.groupTable tr .admin-GridReceipt .NoCursor {
            cursor: default !important;
            vertical-align: middle;
        }

            .expenses table.groupTable tr .admin-GridStatus img.cursor_Add,
            .expenses table.groupTable tr .admin-GridReceipt img,
            .expenses table.groupTable tr .admin-GridAmount img {
                cursor: pointer;
                vertical-align: middle;
            }

    .expenses table.groupTable tr.GroupByRow {
        background-color: rgba(109, 136, 156, 1) !important;
        color: white;
        height: 25px;
    }


    .expenses table.groupTable .exportGroupedTotal, #approverExpenseTable .approvalsGroupedTotal {
        display: inline-block;
        float: right;
    }

    .expenses table.groupTable .exportGroupedTotal {
        margin-top: 4px;
    }

.admin table.groupTable {
    width: 1252px;
}

#hasReceiptHead {
    text-align: center;
}

.admin-GridProjectRegionName {
    max-width: 150px;
}

.pdf-GridAmount {
    text-align: left;
}

.pdf-GridProjectRegionName {
    max-width: 150px;
}

.admin-GridDate {
    max-width: 75px;
}

    .admin-GridDate.addCursor {
        max-width: 55px;
    }

.admin-GridDescription {
    max-width: 200px;
}

.admin-GridCategory {
    /*max-width: 100px;*/
    width: 100px;
}

.admin-GridItem {
    /*max-width: 100px;*/
    width: 100px;
}

.admin-GridApprover {
    /*max-width: 80px;*/
}

.admin-GridEmployee {
    max-width: 100px;
}

.expenses table.groupTable tr td.admin-GridCategory > div > select {
    max-width: 100px;
}

.expenses table.groupTable tr td.admin-GridApprover,
.expenses table.groupTable tr td.admin-GridCategory,
.expenses table.groupTable tr td.admin-GridProjectRegionName {
    cursor: pointer;
}

.adminEdit_Section {
    width: 100%;
}

.expenses table.groupTable > tfoot tr > td {
    background-color: #00467f;
}

.expenses .row {
    float: left;
    width: 100%;
}

.expenses .exportBtn,
.expenses.admin .ProcessExpenseBtn {
    background-color: #104905;
    color: #fff;
    padding: 10px 30px;
    border: 0;
    margin: 0;
    font-size: 16px;
}

.expenses.admin .ProcessExpenseBtn {
    padding: 10px;
    background-color: #5e788c;
    cursor: pointer;
}

.expenses.admin table.groupTable th {
    font-size: 12px;
    background-color: #5e788c;
    cursor: pointer;
}

    .expenses.admin table.groupTable th:not(.admin-GridChecked):not(.admin-GridBillable):not(.admin-Description):not(.admin-GridReceipt):hover {
        background-color: rgba(69, 89, 104, 1);
    }

    .expenses.admin table.groupTable th:nth-child(3) {
        width: inherit;
    }

.expenses.admin table.groupTable td img.icon {
    margin: 0 3px;
    vertical-align: middle;
}

.expenses.admin .ProcessExpense {
    margin: 17px 0 20px 0;
    float: left;
    width: 100%;
}

    .expenses.admin .ProcessExpense .clm {
        /*background-color: #CEE9FF;*/
        height: 30px;
        padding: 5px 10px;
        float: left;
        width: auto;
    }

        .expenses.admin .ProcessExpense .clm.clm2 {
            /*width: 73%;*/
        }

.SuggestionsDropDownRow {
    max-width: 300px;
}

.expenses.admin .SuggestionsDropDownWrapper {
    position: absolute;
    background-color: white;
    max-height: 200px;
    overflow-x: hidden;
    max-width: 300px;
    cursor: pointer;
}

.admin.expenses .SuggestionsDropDownWrapperWithData {
    border: 1px solid black;
    padding: 2px 2px;
}

.admin.expenses .SuggestionsDropDownWrapper .SuggestionsDropDownRow:hover {
    background-color: rgba(109, 135, 155, 1) !important;
    color: white;
}

.admin.expenses .SuggestionsDropDownWrapper .SuggestionsDropDownRow:nth-child(2n) {
    background-color: #CEE9FF;
}

.admin.expenses .SuggestionsDropDownWrapper .SuggestionsDropDownRow:nth-child(2n+1) {
    background-color: #DEF0FF;
}



.ProcessExpense .clm select.selectGroupBy {
    min-width: 130px;
    border: 0;
    background: #FFFFFF;
    color: #646464;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    font-size: 14px;
    margin-top: 5px;
}

.ProcessExpense .clm .search {
    border: 0;
    background: #FFFFFF;
    color: #646464;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    font-size: 14px;
    /*width: 170px;*/
    margin-top: 5px;
    float: left;
}

.ProcessExpense .options {
    font-size: 12px;
    float: left;
    /*width: 77%;*/
    padding: 0 0 0 10px;
}

    .ProcessExpense .options .opt {
        float: left;
        /*min-width: 125px;*/
    }

    .ProcessExpense .options .opt1 {
        min-width: 105px;
    }

    .ProcessExpense .options .opt2 {
        min-width: 90px;
    }

    .ProcessExpense .options .opt3 {
        min-width: 420px;
    }

    .ProcessExpense .options .opt label {
        float: left;
        line-height: 12px;
        padding-bottom: 4px;
    }

    .ProcessExpense .options .opt1 label, .ProcessExpense .options .opt2 label {
        clear: both;
    }

    .ProcessExpense .options .opt label input {
        margin: 0 5px 0 0;
        float: left;
        padding: 0;
    }

    .ProcessExpense .options .opt button.markAsPaid {
        font-size: 10px;
        background-color: rgba(153, 153, 153, 1);
        border: none;
        padding: 0 5px;
        color: #fff;
        text-transform: uppercase;
        margin-left: 5px;
        float: left;
        padding-top: 1px;
    }

    .ProcessExpense .options .opt label.AdminLabel-margin-right {
        margin-right: 5px;
    }

    .ProcessExpense .options .opt .date {
        display: inline;
        margin-left: 10px;
        margin-top: 1px;
        float: left;
    }

        .ProcessExpense .options .opt .date span {
            float: left;
            padding: 0 5px;
            line-height: 12px;
        }

        .ProcessExpense .options .opt .date input {
            height: 12px;
            font-size: 10px;
            width: 65px;
            padding: 0 5px;
            border: none;
            float: left;
            cursor: pointer;
            background-position-x: 100%;
        }

    .ProcessExpense .options input.search {
        background: #5e788c url(images/iconMagnifyingGlass.png) no-repeat center center;
        border: none;
        padding: 1px 5px;
        color: #fff;
        text-transform: uppercase;
        margin: 0;
        width: 70px;
        height: 30px;
        float: right;
        cursor: pointer;
    }

.Expenseapproval-tablewrap {
    width: 900px;
    float: left;
    margin-left: 20px;
}

    .Expenseapproval-tablewrap .Expenseapproval-Container {
        width: 970px;
    }


.approverHistoryWrap {
    width: 900px;
    float: left;
    margin-left: 20px;
}

    .approverHistoryWrap #searchContainer {
        padding-left: 10px;
        box-sizing: border-box;
    }

    .approverHistoryWrap .approverHistoryContainer {
        width: 970px;
    }

.complianceCheckWrap {
    width: 970px;
    margin-left: 200px;
}

    .Expenseapproval-tablewrap h2, .approverHistoryWrap h2, .complianceCheckWrap h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 300;
    }

.search-controls {
    width: 100%;
    display: inline-block;
}

.approval-amount-wrap {
    float: right;
}

.total-label {
    font-size: 10px;
    margin: 10px 10px 0 0;
    display: inline-block;
}

.total-amount {
    font-size: 20px;
    float: right;
}

#approverExpenseTable .expenseNonExpandedTableRow {
    padding: 5px;
}

.SubApproverExpensesPopup {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 50;
}

/*
.SubApproverExpenses_Container {
    width: 920px;
    background-color: #EEE;
    padding: 20px;
    left: 416px;
    position: absolute;
    margin-top: 38px;
}*/

.SubApproverExpenses_Container {
    width: 985px;
    background-color: #EEE;
    padding: 20px;
    margin-top: 42px;
    margin-left: 330px;
    float: left;
}

.SubApproverExpensesPopupWrapper {
    width: 1252px;
    margin: 108px auto 0px auto;
}

.total-amount-wrap.approverTotal .approverTotalAmountContainer {
   
    margin-right:84px;
}

.total-amount-wrap .approverTotalAmountContainer {
   
    margin-right:65px;
}

#subApproverDataTable {
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #FFF;
}

.expenseTable th {
    font-size: 15px;
}

.expenseTable tbody {
    font-size: 12px;
}

.table-oddChild {
    background: #DEF0FF;
}

.table-evenChild {
    background: #CEE9FF;
}

.tableHead {
    font-size: 14px;
    background-color: #5e788c;
    color: #fff;
}

.tableBody {
    font-size: 10px;
    padding: 5px 5px 10px;
}

#tableRowId:hover {
    cursor: pointer;
    background: rgba(113, 157, 193, 1) !important;
}

.approverIDHead {
    padding-left: 5px;
}

.approverIDHead, .approverCategoryHead, .approverSubmitdateHead, .approverAmountHead, .approverExpdateHead, .approverSubApproverHead, .approverStatusHead, .approverProjectHead, .approverApproveRejectHead {
    font-size: 12px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
}

.searchCategoryHead, .searchExpenseIDHead, .searchSubmitdateHead, .searchAmountHead, .searchExpdateHead, .searchStatusHead, .searchProjectHead {
    font-size: 12px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    padding-left: 6px;
}

.approverCategoryHead, .searchCategoryHead {
    font-size: 12px;
}

.searchCategoryHead {
    /*padding-left: 10px;*/
}

    .approverCategoryHead:hover, .searchCategoryHead:hover {
        cursor: pointer;
        background: #2a475f !important;
    }

.projectHead:hover,
.descHead:hover,
.approverSubmitdateHead:hover,
.approverAmountHead:hover,
.approverExpdateHead:hover,
.approverStatusHead:hover,
.approverProjectHead:hover,
.approverSubApproverHead:hover,
.searchdescHead:hover,
.searchSubmitdateHead:hover,
.searchAmountHead:hover,
.searchExpdateHead:hover,
.searchStatusHead:hover,
.searchProjectHead:hover,
.searchExpenseIDHead:hover {
    cursor: pointer;
    background: #2a475f !important;
}


.approverCategoryHead {
    padding-left: 5px;
}

.approverAmountRow {
    text-align: right;
    padding-right: 5px;
}

.approverIDHead, .approverIDRow {
    width: 75px;
    max-width: 75px;
}

.approverCategoryHead, .approverCategoryRow {
    width: 70px;
    max-width: 100px;
}

.approverSubmitdateHead, .approverSubmitdateRow {
    width: 100px;
    max-width: 100px;
}

.approverAmountHead, .approverAmountRow {
    width: 63px;
    max-width: 100px;
    text-align: right;
}

.approverExpdateHead, .approverExpdateRow {
    width: 100px;
    max-width: 100px;
}

.approverSubApproverHead, .approverSubApproverRow {
    width: 100px;
    max-width: 100px;
}

.approverStatusHead, .approverStatusRow {
    width: 110px;
    max-width: 110px;
}

.approverProjectHead, .approverProjectRow {
    width: 100px;
    max-width: 100px;
}

.complianceTab.approverProjectHead, .complianceTab.approverProjectRow {
    width: 170px;
    max-width: 170px;
}

.descHead, .searchdescHead {
    width: 120px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size: 12px;
}

.projectHead, .searchProjectHead {
    width: 100px;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size: 12px;
    padding-left: 6px;
}

.approverIDRow, .approverCategoryRow, .approverSubmitdateRow, .approverAmountRow, .approverExpdateRow, .approverSubApproverRow, .approverStatusRow, .approverProjectRow {
    /*width: 100px;*/
    font-size: 12px;
    display: inline-block;
}

.searchCategoryRow, .searchExpenseIDRow, .searchSubmitdateRow, .searchAmountRow, .searchExpdateRow, .searchStatusRow, .searchProjectRow, .searchdescRow {
    /*width: 70px;*/
    font-size: 12px;
    display: inline-block;
    text-align: left;
    padding-left: 6px;
    overflow: hidden;
}

.searchCategoryRow, .searchCategoryHead {
    width: 70px;
    max-width: 70px;
}

.searchExpenseIDRow, .searchExpenseIDHead {
    width: 40px;
    max-width: 40px;
}

.searchSubmitdateRow, .searchSubmitdateHead {
    width: 65px;
    max-width: 65px;
}

.searchAmountRow, .searchAmountHead {
    width: 50px;
    max-width: 50px;
}

.searchdescRow, .searchdescHead {
    width: 130px !important;
    max-width: 130px;
    padding-left: 2px;
}

.searchExpdateRow, .searchExpdateHead {
    width: 65px;
    max-width: 65px;
}

.searchStatusRow, .searchStatusHead {
    width: 80px;
    max-width: 100px;
}

.searchProjectRow, .searchProjectHead {
    width: 80px;
    max-width: 80px;
}


.tableBody > .searchAmountRow {
    text-align: right;
    margin-left:-7px;
}

/*.searchSubmitdateRow{
   width:75px;
 	
} 	

.searchStatusRow{ 	
    width:70px; 	
}*/

.approverIDRow, .approverProjectRow, .searchProjectRow, .searchCategoryRow, .searchStatusRow, .approverCategoryRow, .projectRow, .approverStatusRow, .approverApproveRejectRow {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.searchCategoryRow, .searchStatusRow {
    /*padding-left: 10px;*/
}

.approverAmountRow .ActualAmount {
    padding-right: 7px;
    max-width: 65px;
}

.approverAmountRow .CorporateImage {
    padding-left: 5px;
}

.descRow, .searchdescRow {
    width: 120px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 12px;
}

#approverExpenseTable .descHead, #approverExpenseTable .descRow {
    width: 200px;
}

.searchdescRow {
    padding-left: 6px;
}

.searchProjectRow {
    padding-left: 6px;
}

.projectRow, .searchProjectRow {
    width: 100px;
    display: inline-block;
    font-size: 12px;
    text-align: left;
}

.expanded-div {
    /*display: inline-block;*/
    padding: 0px 20px 0px 0;
    padding-right: 0px;
}

.testrecieptImg {
    background: red;
    height: 225px;
    width: 385px;
    float: left;
}

.sectionDesc {
    display: inline-block;
    width: 515px;
    min-height: 290px;
    padding-left: 20px;
    position: relative;
}

.section-wrap {
    display: block;
    margin-right: 10px;
    margin-bottom: 10px;
    min-width: 130px;
}

    .section-wrap.approveExpenseEPA {
        width: 250px;
        display: block;
        clear: both;
    }

.search-section-wrap {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    min-width: 140px;
}

.sectiondesc-wrap {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
    min-width: 140px;
}

    .sectiondesc-wrap label {
        display: block;
    }

    .sectiondesc-wrap span {
        font-size: 14px;
    }

.section-wrap label {
    display: block;
}

.section-wrap span {
    font-size: 14px;
}

.search-section-wrap label {
    display: block;
}

.search-section-wrap span {
    font-size: 14px;
}

.desc-wrap label {
    font-weight: bold;
}

.progress-bar {
    height: 10px;
    width: 100%;
    background: green;
    display: inline-block;
    margin-right: 10px;
}


.deny-btn, .approve-btn {
    padding: 5px 15px;
    color: #fff;
    font-size: 10px;
    text-decoration: none;
}

.deny-btn {
    background: #4c0000;
}

.approve-btn {
    background: #004c0d;
}

.approvalTopSection-wrap {
    min-height: 250px;
}

    .approvalTopSection-wrap > div {
        display: inline-block;
    }

    .approvalTopSection-wrap .approvalLeftSection-wrap {
        width: 283px;
    }

    .approvalTopSection-wrap .approvalRightSection-wrap {
        width: 225px;
        position: absolute;
    }

.approvalRightSection-wrap #HistoryLoadingBar {
    background: url(images/loading_animation.gif) no-repeat 85px 40px;
    width: 100%;
    height: 120px;
}

.ComplianceTopSection-wrap {
    min-height: 251px;
    display: block;
}

.complianceRejectAcceptBtns, .ApproverRejectAcceptBtns {
    position: absolute;
    bottom: 3px;
    right: 0px;
}

.approvalAmount-wrap {
    display: block;
    clear: both;
}

.approvalAmount {
    float: left;
    font-size: 32px;
    color: rgb(76,0,0);
}

.btn-wrap {
    float: right;
}

.ExpenseHistorical_Container {
    margin-left: 20px;
}

.ExpenseHistorical_Wrap {
    background-color: white;
    padding: 5px;
    border: 1px solid rgb(0, 70, 127);
    color: rgb(0, 70, 127);
}

    .ExpenseHistorical_Wrap label {
        font-size: 14px;
        margin-bottom: 5px;
    }

.ExpenseHistorical_Type {
    width: 50px;
    display: inline-block;
}

.ExpenseHistorical_Value {
    display: inline-block;
    width: 100px;
    font-weight: bold;
}

.ExpenseHistorical_CategoryDetails {
    padding-bottom: 5px;
}

.ExpenseHistorical_CateogryRepeat {
    padding: 2px;
}

.approvals {
    float: left;
    width: 290px;
    background: #dae7f0;
    padding: 25px 20px;
}

    .approvals h2 {
        margin: 0;
        font-size: 35px;
        font-weight: 300;
    }

.approval-head-label {
    margin: 0;
    font-size: 12px;
}

/*Item limit styles*/
.approvals-itemLimit{
    margin-bottom: -8px;
    margin-top: -12px;
}
/*End of Item limit styles*/

.approval-amount {
    font-size: 25px;
    font-weight: bold;
}

.approval-allocated-progress {
    height: 15px;
    width: 100%;
    float: right;
    border: 1px solid #999595;
    background: #60cc69;
    margin: 5px 0;
}


.approved-amount {
    width: 30%;
    background: #007c0c;
    height: 15px;
    display: inline-block;
    float: left;
}

.allocated-amount {
    width: 70%;
    background: #62c66b;
    height: 15px;
    display: inline-block;
    float: left;
}

.approval-amount.second {
    color: #cb7700;
}

.approval-allocated-progress.second .approved-amount {
    background: #cb7700;
}

.approval-allocated-progress.second .allocated-amount {
    background: #ddac4e;
}

.approval-amount.first, .approval-amount.third {
    color: #007c0c;
}

.approval-amount.fourth {
    color: #b50000;
}

.approversList h3 {
    font-weight: 300;
    font-size: 20px;
}

.approval-allocated-progress.subapprovals {
    height: 8px;
    margin: 5px 0px;
}
/*.approval-allocated-progress.second a,.approval-allocated-progress.first a,.approval-allocated-progress.third a,.approval-allocated-progress.fourth a{
    margin:5px 0px;
    height:8px;
}*/
.approvedList {
    margin-top: 30px;
    border-top: 1px solid #000;
}

    .approvedList h3 {
        font-size: 20px;
        font-weight: 300;
        margin: 5px 0px;
    }

.aprrovedList-head {
    background: #00477f;
    padding: 5px;
}

    .aprrovedList-head select {
        width: 100%;
        background: #e0e0e0;
        margin-bottom: 5px;
        height: 25px;
    }

.expCat-head, .expAmt-head, .expAvg-head {
    display: inline-block;
    width: 70px;
    padding: 5px 10px;
    color: #fff;
}

.expCat, .expAmt, .expAvg {
    display: inline-block;
    width: 70px;
    padding: 5px 10px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



.approvedList-detail {
    background: #fff;
    height: 300px;
}

.totalLabel-head {
    width: 49%;
    color: #fff;
    text-align: left;
    display: inline-block;
}

.totalAmt-head {
    width: 49%;
    color: #fff;
    text-align: right;
    display: inline-block;
}

.approverLimits h2, .alternateApprover h2 {
    font-size: 28px;
    padding: 5px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}

.approverLimits, .alternateApprover {
    display: inline-block;
    width: 46%;
    float: left;
}

.alternateApprover {
    margin-left: 35px;
}

    .alternateApprover select {
        width: 60%;
        background: #e0e0e0;
        margin-top: 5px;
        border: none;
        height: 25px;
    }

.approverLimits span {
    width: 100px;
    display: inline-block;
    text-align: right;
    font-size: 10px;
}

.approverLimits label {
    width: 120px;
    display: inline-block;
    font-size: 10px;
}

.approverLimits input[type="text"] {
    width: 100px;
    height: 15px;
    display: inline-block;
    border: 1px solid;
}

.text-center {
    text-align: center;
}

.Expenseapproval-tablewrap input[type="button"] {
    cursor: pointer;
    border: none;
    color: #fff;
    padding: 2px 20px;
    margin-right: 5px;
}

.settings-saveButton {
    background: #0d5b00;
}

.settings-cancelButton {
    background: #656565;
}


.approvedExpenses {
    background: #fff;
    overflow-y: auto;
    max-height: 400px;
}

.approvalmodal {
    width: 430px;
    height: 300px;
    background: rgb(94, 120, 140);
    display: inline-block;
    padding: 20px;
    float: left;
}

.approvalreceiptpreview, .approvalreceiptpreviewSmallPDF, .approvalpreviewWrapperWrapper, .approvalpreviewCover {
    width: 340px;
    height: 248px;
    margin-top: 10px;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    text-align: center;
    margin-left: 35px;
    cursor: pointer;
}

.approvaledit_receiptpreviewSmallPDF.approvalleft-preview,
.approvaledit_receiptpreview.approvalleft-preview {
    margin-top: 0;
    margin-left: 0;
    height: 250px;
}

.approvalSearchText {
    width: 120px;
}

.approvalDateField {
    width: 80px;
}

.approvalSearchNumber {
    width: 80px;
    color: #000;
}

.approvalSearchLabel {
    background: #dae7f0;
    color: black;
    padding: 0px 1px 2px 1px;
}

.approvals_Edit_imageSectionLoading {
    position: absolute;
    top: 120px;
    left: 70px;
    width: 200px;
    font-size: 20px;
    color: #fff;
}

.searchHeader-search {
    font-size: 20px;
    text-transform: uppercase;
}

.searchHeader-field {
    font-size: 10px;
    margin-left: 67px;
}

.searchHeader-min {
    font-size: 10px;
    margin-left: 135px;
}

.searchHeader-max {
    font-size: 10px;
    margin-left: 20px;
}

.searchHeader-fromdate {
    font-size: 10px;
    margin-left: 20px;
}

.searchHeader-todate {
    font-size: 10px;
    margin-left: 55px;
}

.searchHeader-status {
    font-size: 10px;
    margin-left: 70px;
}

.expenseshade1 {
    float: left;
    background: #067b09;
    height: 100%;
    width: 0%;
    box-shadow: 2px 2px 10px grey;
}

#reason-label {
    font-weight: bold;
    color: #900;
}

#denybutton {
    background: #4c0000;
}

#approvebutton {
    background: #004c0d;
}

#searchbtn {
    background: #dae7f0;
    color: #000;
}

#statusDropDown {
    width: 135px;
}

#clearbtn {
    background: grey;
    color: #000;
    padding-left: 10px;
    padding-right: 10px;
    float: right;
    font-size: 10px;
}

.approvalsGroupByRow {
    color: white;
    background: rgba(109, 136, 156, 1) !important;
    padding: 5px;
}

.approvalheader {
    display: inline-block;
}

#approvaldesc {
    margin-top: 15px;
}

.popup-submit-btn {
    text-align: center;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: "Roboto";
    font-size: 18px;
    cursor: pointer;
    background: rgb(13,91,0);
}

.popup-cancel-btn {
    text-align: center;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: "Roboto";
    font-size: 18px;
    cursor: pointer;
    background: rgb(153,0,0);
    float: left;
}

.approverCommentPopup-submit-btn {
    text-align: center;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: "Roboto";
    font-size: 18px;
    cursor: pointer;
    background: rgb(13,91,0);
    width: 180px;
}

.approverCommentPopup-cancel-btn {
    text-align: center;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: "Roboto";
    font-size: 18px;
    cursor: pointer;
    background: #999595;
    float: left;
    width: 180px;
}

.approvalGroupBy {
    border: 1px solid #000;
    margin-left: 10px;
}

.subapproverSummary {
    margin-top: 25px;
}

.approvalexpandImagePDFEdit {
    position: absolute;
    top: -5px;
    right: -395px;
    z-index: 1;
    color: white;
    float: right;
    cursor: pointer;
    background-color: grey;
    border-radius: 50px;
    width: 50px;
    line-height: 30px;
    text-align: center;
}

#categoryDropDown {
    width: 110px;
}

#expensesChartTableHead {
    /*width: 852px;*/
    padding: 0px 15px;
}

.sub-approver-link {
    text-decoration: underline;
    cursor: pointer;
}

.expenseLoadingArea {
    width: 800px;
    height: 50px;
    margin: 50px auto 20px auto;
    background-image: url('images/loading_animation.gif');
    background-position: center center;
    background-repeat: no-repeat;
}

.expenseNoData {
    width: 800px;
    height: 50px;
    margin: 70px auto 20px auto;
    text-align: center;
    font-size: 1.5em;
    color: #000;
}

.thumbnail{
    padding:4px;
    border: 1px solid #ddd;
}

.expenseChart-loadingIcon {
    position: absolute;
    left: 40%;
    top: 40%;
}

.approvedExpensesContainer {
    background: #fff;
    min-height: 200px;
    position: relative;
    border: 1px solid rgb(0,71,127);
}

#tableRowDetailId {
    border-bottom: 1px solid black;
}


/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

    .ui-widget .ui-widget {
        font-size: 1em;
    }

    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget button {
        font-family: Verdana,Arial,sans-serif;
        font-size: 1em;
    }

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}

    .ui-widget-content a {
        color: #222222;
    }

.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #899fb8 url(images/ui-bg_flat_75_899fb8_40x100.png) 50% 50% repeat-x;
    color: #FFFFFF;
    font-weight: bold;
}

    .ui-widget-header a {
        color: #FFFFFF;
    }

    /* Interaction states
----------------------------------*/
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        border: 1px solid #d3d3d3;
        background: #d1e3f2 url(images/ui-bg_flat_75_d1e3f2_40x100.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #555555;
    }

        .ui-state-default a,
        .ui-state-default a:link,
        .ui-state-default a:visited {
            color: #555555;
            text-decoration: none;
        }

    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        border: 1px solid #999999;
        background: #00467F url(images/ui-bg_flat_75_00467F_40x100.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #FFFFFF;
    }

        .ui-state-hover a,
        .ui-state-hover a:hover,
        .ui-state-hover a:link,
        .ui-state-hover a:visited {
            color: #FFFFFF;
            text-decoration: none;
        }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        border: 1px solid #aaaaaa;
        background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
        font-weight: normal;
        color: #212121;
    }

        .ui-state-active a,
        .ui-state-active a:link,
        .ui-state-active a:visited {
            color: #212121;
            text-decoration: none;
        }

    /* Interaction Cues
----------------------------------*/
    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #00467F;
        background: #899fb8 url(images/ui-bg_flat_55_899fb8_40x100.png) 50% 50% repeat-x;
        color: #FFFFFF;
    }

        .ui-state-highlight a,
        .ui-widget-content .ui-state-highlight a,
        .ui-widget-header .ui-state-highlight a {
            color: #FFFFFF;
        }

    .ui-state-error,
    .ui-widget-content .ui-state-error,
    .ui-widget-header .ui-state-error {
        border: 1px solid #cd0a0a;
        background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
        color: #cd0a0a;
    }

        .ui-state-error a,
        .ui-widget-content .ui-state-error a,
        .ui-widget-header .ui-state-error a {
            color: #cd0a0a;
        }

    .ui-state-error-text,
    .ui-widget-content .ui-state-error-text,
    .ui-widget-header .ui-state-error-text {
        color: #cd0a0a;
    }

    .ui-priority-primary,
    .ui-widget-content .ui-priority-primary,
    .ui-widget-header .ui-priority-primary {
        font-weight: bold;
    }

    .ui-priority-secondary,
    .ui-widget-content .ui-priority-secondary,
    .ui-widget-header .ui-priority-secondary {
        opacity: .7;
        filter: Alpha(Opacity=70);
        font-weight: normal;
    }

    .ui-state-disabled,
    .ui-widget-content .ui-state-disabled,
    .ui-widget-header .ui-state-disabled {
        opacity: .35;
        filter: Alpha(Opacity=35);
        background-image: none;
    }

        .ui-state-disabled .ui-icon {
            filter: Alpha(Opacity=35); /* For IE8 - See #6059 */
        }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_FFFFFF_256x240.png);
}

.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_888888_256x240.png);
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_FFFFFF_256x240.png);
}

.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_454545_256x240.png);
}

.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_FFFFFF_256x240.png);
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-blank {
    background-position: 16px 16px;
}

.ui-icon-carat-1-n {
    background-position: 0 0;
}

.ui-icon-carat-1-ne {
    background-position: -16px 0;
}

.ui-icon-carat-1-e {
    background-position: -32px 0;
}

.ui-icon-carat-1-se {
    background-position: -48px 0;
}

.ui-icon-carat-1-s {
    background-position: -64px 0;
}

.ui-icon-carat-1-sw {
    background-position: -80px 0;
}

.ui-icon-carat-1-w {
    background-position: -96px 0;
}

.ui-icon-carat-1-nw {
    background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0;
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
}

.ui-icon-arrow-4 {
    background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px;
}

.ui-icon-extlink {
    background-position: -32px -80px;
}

.ui-icon-newwin {
    background-position: -48px -80px;
}

.ui-icon-refresh {
    background-position: -64px -80px;
}

.ui-icon-shuffle {
    background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px;
}

.ui-icon-folder-open {
    background-position: -16px -96px;
}

.ui-icon-document {
    background-position: -32px -96px;
}

.ui-icon-document-b {
    background-position: -48px -96px;
}

.ui-icon-note {
    background-position: -64px -96px;
}

.ui-icon-mail-closed {
    background-position: -80px -96px;
}

.ui-icon-mail-open {
    background-position: -96px -96px;
}

.ui-icon-suitcase {
    background-position: -112px -96px;
}

.ui-icon-comment {
    background-position: -128px -96px;
}

.ui-icon-person {
    background-position: -144px -96px;
}

.ui-icon-print {
    background-position: -160px -96px;
}

.ui-icon-trash {
    background-position: -176px -96px;
}

.ui-icon-locked {
    background-position: -192px -96px;
}

.ui-icon-unlocked {
    background-position: -208px -96px;
}

.ui-icon-bookmark {
    background-position: -224px -96px;
}

.ui-icon-tag {
    background-position: -240px -96px;
}

.ui-icon-home {
    background-position: 0 -112px;
}

.ui-icon-flag {
    background-position: -16px -112px;
}

.ui-icon-calendar {
    background-position: -32px -112px;
}

.ui-icon-cart {
    background-position: -48px -112px;
}

.ui-icon-pencil {
    background-position: -64px -112px;
}

.ui-icon-clock {
    background-position: -80px -112px;
}

.ui-icon-disk {
    background-position: -96px -112px;
}

.ui-icon-calculator {
    background-position: -112px -112px;
}

.ui-icon-zoomin {
    background-position: -128px -112px;
}

.ui-icon-zoomout {
    background-position: -144px -112px;
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-icon-wrench {
    background-position: -176px -112px;
}

.ui-icon-gear {
    background-position: -192px -112px;
}

.ui-icon-heart {
    background-position: -208px -112px;
}

.ui-icon-star {
    background-position: -224px -112px;
}

.ui-icon-link {
    background-position: -240px -112px;
}

.ui-icon-cancel {
    background-position: 0 -128px;
}

.ui-icon-plus {
    background-position: -16px -128px;
}

.ui-icon-plusthick {
    background-position: -32px -128px;
}

.ui-icon-minus {
    background-position: -48px -128px;
}

.ui-icon-minusthick {
    background-position: -64px -128px;
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-icon-key {
    background-position: -112px -128px;
}

.ui-icon-lightbulb {
    background-position: -128px -128px;
}

.ui-icon-scissors {
    background-position: -144px -128px;
}

.ui-icon-clipboard {
    background-position: -160px -128px;
}

.ui-icon-copy {
    background-position: -176px -128px;
}

.ui-icon-contact {
    background-position: -192px -128px;
}

.ui-icon-image {
    background-position: -208px -128px;
}

.ui-icon-video {
    background-position: -224px -128px;
}

.ui-icon-script {
    background-position: -240px -128px;
}

.ui-icon-alert {
    background-position: 0 -144px;
}

.ui-icon-info {
    background-position: -16px -144px;
}

.ui-icon-notice {
    background-position: -32px -144px;
}

.ui-icon-help {
    background-position: -48px -144px;
}

.ui-icon-check {
    background-position: -64px -144px;
}

.ui-icon-bullet {
    background-position: -80px -144px;
}

.ui-icon-radio-on {
    background-position: -96px -144px;
}

.ui-icon-radio-off {
    background-position: -112px -144px;
}

.ui-icon-pin-w {
    background-position: -128px -144px;
}

.ui-icon-pin-s {
    background-position: -144px -144px;
}

.ui-icon-play {
    background-position: 0 -160px;
}

.ui-icon-pause {
    background-position: -16px -160px;
}

.ui-icon-seek-next {
    background-position: -32px -160px;
}

.ui-icon-seek-prev {
    background-position: -48px -160px;
}

.ui-icon-seek-end {
    background-position: -64px -160px;
}

.ui-icon-seek-start {
    background-position: -80px -160px;
}
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
    background-position: -80px -160px;
}

.ui-icon-stop {
    background-position: -96px -160px;
}

.ui-icon-eject {
    background-position: -112px -160px;
}

.ui-icon-volume-off {
    background-position: -128px -160px;
}

.ui-icon-volume-on {
    background-position: -144px -160px;
}

.ui-icon-power {
    background-position: 0 -176px;
}

.ui-icon-signal-diag {
    background-position: -16px -176px;
}

.ui-icon-signal {
    background-position: -32px -176px;
}

.ui-icon-battery-0 {
    background-position: -48px -176px;
}

.ui-icon-battery-1 {
    background-position: -64px -176px;
}

.ui-icon-battery-2 {
    background-position: -80px -176px;
}

.ui-icon-battery-3 {
    background-position: -96px -176px;
}

.ui-icon-circle-plus {
    background-position: 0 -192px;
}

.ui-icon-circle-minus {
    background-position: -16px -192px;
}

.ui-icon-circle-close {
    background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px;
}

.ui-icon-circle-check {
    background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
}


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 0px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 0px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 0px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 0px;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
    margin: -8px 0 0 -8px;
    padding: 8px;
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30);
    border-radius: 8px;
}
#approverExpenseTable .approvalsGroupedTotal
{
   margin-right: 80px;
}

.expenseLineItem{
    cursor:pointer;
}
.expenseLineItem:hover{
    background-color:#ddd;
}
.expenseLineItem:active{
    background-color:#aaa;
}
.expenseLineItem.selected{
    background-color:#777;
    color:#fff;
    cursor:default;
}

.duplicateNotification{
    cursor:pointer;
    background-color:#fff;
}
.duplicateNotification:hover{
    background-color:#ddd;
}

.duplicateValue{
    padding:0px 5px;
    background-color:#ffc388;
}

.duplicateValue{
    padding:0px 5px;
    background-color:#ffc388;
}

.amountWithinLimit{
    color:#0d5b00;
}
.amountCloseToLimit{
    color:#ff7e00;
}
.amountOverLimit{
    color:#ff0000;
}
.approverExceedLimit{
    border:1px solid #ff0000;
    box-shadow:0px 2px 5px #aaa;
}
.approverWithinLimit{
    /*border:1px solid #000;*/
    box-shadow:0px 2px 5px #aaa;
}
.withinLimit{
    font-weight:bold;
    color:#0d5b00;
}
.withinLimitPending{
    font-weight:bold;
    color:#75ca67;
}
.nearLimit{
    font-weight:bold;
    color:#ff7801;
}
.nearLimitPending{
    font-weight:bold;
    color:#ffac61;
}
.exceedLimit{
    font-weight:bold;
    color:#900000;
}
.exceedLimitPending{
    font-weight:bold;
    color:#db9393;
}
.disabled-field{
    opacity:0.7;
    cursor:inherit;
}
.search-filter-input{
    width:100%;
    height:20px;
}
.dropdown-menu-item{
    padding:2px 5px;
    cursor:pointer;
}
.dropdown-menu-item:hover{
    background-color:#eee;
}

.impersonate-banner{
    background-color:#ffa200;
    padding:5px 10px;
    text-align:center;
    color:#fff;
}

.sortable{
    text-decoration:underline;
    cursor:pointer;
}
.sortIndicator{
    font-size:0.8em;
}

.simplifiedBudgetHeaderText{
    font-size:0.8em;
}

.graphElement{
    min-height:188px;
}

.loadingInProgress{
    cursor:wait;
}

.loadingInProgress:hover{
    background-color:none !important;
}

.loadingInProgress:active{
    background-color:none !important;
}

.fixed-three-lines{
     height:3rem; 
     overflow-y:scroll;
     border:1px solid #ddd; 
     padding:3px; 
     word-wrap:break-word;
}

.fixed-four-lines{
     height:4rem; 
     overflow-y:scroll;
     border:1px solid #ddd; 
     padding:3px; 
     word-wrap:break-word;
}

.high-dpr-container{
    font-size:13px !important;
}

.high-dpr-table{
    font-size:12px !important;
}

.high-dpr-search-table{
    transform: scale(0.7);
    transform-origin: top left;
}

.high-DPI-PDF-view{
    height:450px;
}
.standard-DPI-PDF-view{
    height:800px;
}

table{
    table-layout:fixed;
}

.fadeElement{
    opacity:0.5;
}

.approverExpenseList{
    height:500px;
    overflow-y:scroll;
}

/*.listComponent{
  height:30px;
  display:table-row;
  box-sizing:border-box;
  opacity:1;
  transition:all linear 0.5s;
}
.listComponent.ng-move,
.listComponent.ng-enter,
.listComponent.ng-leave{
  transition:all linear 0.5s;
}
.listComponent.ng-leave.ng-leave-active,
.listComponent.ng-move,
.listComponent.ng-enter {
  opacity:0;
  height:0;
  display:block;
}

.listComponent.ng-leave,
.listComponent.ng-move.ng-move-active,
.listComponent.ng-enter.ng-enter-active {
  opacity:0;
  height:30px;
  display:block;
}*/

.loading-element{
    animation:loadIconSpin 5s linear infinite;
}

.field-missing-value {
    background-color: #fffcb1;
}
@keyframes loadIconSpin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.approverApproveRejectRow
{
    margin-left:6px;
}
.approverApproveReviewRow {
    margin-left: 6px;
    display: inline-block;
    position: relative;
    top: -3px;
    left: 2px;
}

.approverApproveReviewRow a
{
   font-size:14px;
   text-decoration:underline;
   font-weight:bold;
}

.approverNotesHead, .approverNotesRow
{
    width: 60px;
  display:inline-block;
}
.approverNotesRow div
{
     display:inline-block;
}
.notesIcon
{
  cursor: pointer;
  width:15px;
}

.notesIcon span {
  display: none;
  visibility: hidden;
  padding: 4px 4px;
  z-index: 10;
  position: absolute;
  font-size: 13px;
  border-radius: 5px;
  box-shadow: 0 0 0 whitesmoke;
  background-color: whitesmoke;
}

.notesIcon:hover span {
  display: inline;
  visibility: visible;
  overflow: visible;
}
.notesIcon span strong{
    font-size:14px;
}
.escalationIcon {
    width:15px;
}
.epaIcon{
   width:18px;
}
.searchExpenseNotesHead, .searchExpenseNotesRow
{
    width: 50px;
    display:inline-block;
}
.searchExpenseNotesRow div{

     display:inline-block;
}
.searchNotesIcon
{
  margin-left: 10px;
  margin-right:3px;
  cursor: pointer;
  width:15px;
}

.searchNotesIcon span {
  display: none;
  visibility: hidden;
  padding: 4px 4px;
  z-index: 10;
  position: absolute;
  font-size: 13px;
  border-radius: 5px;
  box-shadow: 0 0 0 whitesmoke;
  background-color: whitesmoke;
}

.searchNotesIcon:hover span {
  display: inline;
  visibility: visible;
  overflow: visible;
}
.searchNotesIcon span strong{
    font-size:14px;
}
.searchEpaIcon
{
     width:18px;
}
.preexpensecontrols .preExpenseLoading {
    display: block;
    clear: both;
    text-align: center;
    color: rgb(0, 70, 127);
}

.preexpensecontrols .authheader > div {
    display: inline-block;
}

.preexpensecontrols .authheader .ExpandCollapse {
    float: right;
    font-size: 12px;
    margin-top: 8px;
    text-decoration: underline;
    font-weight: bolder;
    cursor: pointer;
}

.PreExpenseapproval-tablewrap {
    float: right;
    width: 910px;
}

    .PreExpenseapproval-tablewrap h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 300;
    }

    .PreExpenseapproval-tablewrap .authheader {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        background: white;
        font-family: "Roboto";
        font-size: 25px;
        font-weight: normal;
        padding: 3px 1%;
        margin-bottom: 15px;
        float: left;
        width: 98%;
    }

    .PreExpenseapproval-tablewrap .authcontainer {
        position: relative;
        margin-bottom: 10px;
        float: left;
        width: 100%;
    }

        .PreExpenseapproval-tablewrap .authcontainer .authdetailcontainer {
            float: left;
            margin-bottom: 10px;
            width: 100%;
        }

        .PreExpenseapproval-tablewrap .authcontainer .authapprovalcontainer {
            background: rgba(255,255,255,0.6);
            position: absolute;
            margin-bottom: 10px;
            margin-left: 0px;
            height: 150px;
            width: 100%;
            display: table;
            text-align: center;
            width: 100%;
        }

            .PreExpenseapproval-tablewrap .authcontainer .authapprovalcontainer .textcontainer {
                display: table-cell;
                vertical-align: middle;
            }

            .PreExpenseapproval-tablewrap .authcontainer .authapprovalcontainer .text {
                background: rgba(255,255,255,1);
                text-align: center;
                display: inline-block;
                font-size: 25px;
                padding: 2px 30px 2px 30px;
            }

    .PreExpenseapproval-tablewrap .authdetailtrow {
        /*width: 100%;
    display: inline-block;*/
        background: #00467f;
        font-size: 12px;
        padding: 3px 0;
        float: left;
        width: 100%;
    }

        .PreExpenseapproval-tablewrap .authdetailtrow .preexpenseid {
            float: left;
            color: white;
            padding-left: 5px;
        }

        .PreExpenseapproval-tablewrap .authdetailtrow .preexpensedate {
            float: left;
            color: white;
            padding-left: 70px;
        }



        .PreExpenseapproval-tablewrap .authdetailtrow .preexpenseallocation {
            float: right;
            color: white;
            padding-right: 5px;
        }

        .PreExpenseapproval-tablewrap .authdetailtrow .edit_preexpenseallocation {
            float: right;
            padding-right: 5px;
        }

    .PreExpenseapproval-tablewrap .authsubmitterrow {
        /*width: 100%;
    display: inline-block;*/
        background: #6388a6;
        font-size: 12px;
        padding: 3px 0;
        float: left;
        width: 100%;
    }

        .PreExpenseapproval-tablewrap .authsubmitterrow .submitter {
            float: left;
            color: white;
            padding-left: 5px;
        }

        .PreExpenseapproval-tablewrap .authsubmitterrow .submitterallocation {
            color: white;
            padding-left: 130px;
            float: left;
        }

        .PreExpenseapproval-tablewrap .authsubmitterrow .preexpenseProject {
            float: left;
            color: white;
            padding-left: 40px;
            width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .PreExpenseapproval-tablewrap .authsubmitterrow .preexpenseapprover {
            float: right;
            color: white;
            padding-right: 5px;
        }

    .PreExpenseapproval-tablewrap .authdescrow {
        /*width: 100%;
    display: inline-block;*/
        background: #e4e4e4;
        height: 100px;
        float: left;
        width: 100%;
        font-size: 12px;
        padding: 5px 0;
        position: relative;
    }

        .PreExpenseapproval-tablewrap .authdescrow .submitter {
            float: left;
            color: black;
            padding-left: 5px;
        }

        .PreExpenseapproval-tablewrap .authdescrow .submitterallocation {
            color: black;
            left: 200px;
            float: left;
            position: absolute;
        }

        .PreExpenseapproval-tablewrap .authdescrow .progress-bar {
            height: 10px;
            width: 380px;
            float: right;
            border: 1px solid #999595;
            background: #60cc69;
            margin-top: 3px;
            margin-right: 10px;
        }

        .PreExpenseapproval-tablewrap .authdescrow .shade1 {
            float: left;
            background: #067b09;
            height: 100%;
        }

        .PreExpenseapproval-tablewrap .authdescrow .preexpense-descdiv {
            padding-left: 5px;
            margin-top: 10px;
            float: left;
            width: 100%;
        }

        .PreExpenseapproval-tablewrap .authdescrow .preexpense-desc {
            font-weight: bold;
        }

    .PreExpenseapproval-tablewrap input[type="button"] {
        background: #dbe8f1;
        cursor: pointer;
        border: none;
        color: #fff;
        padding: 2px 20px;
        margin-right: 5px;
    }

    .PreExpenseapproval-tablewrap .RPAApprovedAmount .RPAColHeader {
        display: block;
    }

    .PreExpenseapproval-tablewrap .RPAApprovedAmount div{
        display:inline-block;
    }

    .PreExpenseapproval-tablewrap .RPAApprovedAmount .RPAamount {
        display:inline-block;
        width:60px;
        margin-left:2px;
    }



.preexpensedeny-btn, .preexpenseapprove-btn {
    padding: 5px 15px;
    color: #fff;
    font-size: 10px;
    text-decoration: none;
}

.preexpensedeny-btn {
    background: #4c0000;
}

.preexpenseapprove-btn {
    background: #004c0d;
}

.approvemap_holder {
    height: 250px;
}

.approvemap_section {
    width: 60%;
    padding: 10px;
    height: 250px;
    overflow: hidden;
}

.error-text {
    font-family: "Roboto";
    color: red;
    /*margin-right: 90px;*/
    font-size: 12px;
    position: absolute;
    padding-top: 20px;
    left: 40%;
}

#approvermileage_contentBottom {
    top: 240px;
}

#searchmileage_contentBottom {
    top: 180px;
}

#approvals_mileage_title {
    font: 22px;
}

#approvals_mileageRoundtrip {
    font-size: 14px;
}

#approvals_mileage_tolabel {
    font-size: 16px;
}

#approvermileage_contentnote {
    top: 215px;
}

#searchmileage_contentnote {
    top: 155px;
}

#approvermileage_contentDistance {
    font-size: 16px;
}

#approve-submit-btn {
    cursor: pointer;
    background-color: rgba(0, 71, 126, 1);
}


#approve-cancel-btn {
    cursor: pointer;
    background-color: rgba(0, 71, 126, 1);
}

.expenseProgressContainer {
    width:250px;
}

#searchtableRowId {
    padding-right: 0;
    padding-left: 0;
}

#searchExpenseTable {
    width: 970px;
}

#searchTableHead {
    padding-right: 0;
}

#searchAmount {
    width: 952px;
}

#search-expandeddiv {
    border-bottom: 1px solid black;
}

#searchtableRowId:hover {
    cursor: pointer;
    background: rgba(113, 157, 193, 1) !important;
}

.search-error-text {
    font-family: "Roboto";
    color: red;
    margin-right: 10px;
    font-size: 12px;
    float: left;
    width: 100%;
}

#approvals-projectBillable {
    min-width: 80px;
    margin-right: 0px;
}

#search-sectionDesc {
    width: 440px;
}

.approvals-reason {
    left: 20px;
}

.approvals-reasonText {
    text-overflow: ellipsis;
    overflow: hidden;
}

#exceedReason {
    top: 200px;
}

#approvalsReason {
    top:105px;
}

.viewer {
    -ms-touch-action: none;
}

.iviewer_common {
    position:absolute;
    bottom:10px;
    border: 1px  solid #000;
    height: 28px;
    z-index: 5000;
}

.iviewer_cursor {
    cursor: url(images/zoomImage/hand.cur) 6 8, pointer;
}

.iviewer_drag_cursor {
    cursor: url(images/zoomImage/grab.cur) 6 8, pointer;
}

.iviewer_button {
    width: 28px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
}

.iviewer_zoom_in {
    left: 20px;
    background: url(images/zoomImage/iviewer.zoom_in.gif) center center no-repeat;
}

.iviewer_zoom_out {
    left: 55px;
    background: url(images/zoomImage/iviewer.zoom_out.gif) center center no-repeat;
}

.iviewer_zoom_zero {
    left: 90px;
    background: url(images/zoomImage/iviewer.zoom_zero.gif) center center no-repeat;
}

.iviewer_zoom_fit {
    left: 125px;
    background: url(images/zoomImage/iviewer.zoom_fit.gif) center center no-repeat;
}

.iviewer_zoom_status {
    left: 160px;
    font: 1em/28px Sans;
    color: #000;
    background-color: #fff;
    text-align: center;
    width: 60px;
}

.iviewer_rotate_left {
    left: 227px;
    background: #fff url(images/zoomImage/iviewer.rotate_left.png) center center no-repeat;
}

.iviewer_rotate_right {
    left: 262px;
    background: #fff url(images/zoomImage/iviewer.rotate_right.png) center center no-repeat;
}

