/*
    system font color dark: 387095 --> 3f2e16 --> 544229
    system font color light: ffffff --> f4f3f1
    just a change to get this published...
*/

:root {
    --color-body: #3f4e50;
    --color-heading: #0b2d32;
    --blue-lighter: #eaf7fe;
    --blue-light: #3ab7ee;
    --blue-light-darker: #1a97ce;
    --gray: #71898c;
    --gray-light: #dfe1df;
    --gray-lighter: #f5f6f8;
    --primary: #ee2748;
    --primary-darker: #ce0728;
}

body {
    color: var(--color-body); /*#5d7430;*/
}

input[type=text] {
    color: var(--color-body);
    font: normal 14px Verdana;
    text-align: left;
    padding: 3px;
    margin: 3px 0 6px 0;
    border: 1px solid var(--gray);
    border-radius: 3px;
}

input[type=text]:focus, input[type=text]:focus-visible {
    outline: 1px solid var(--blue-light);
}

input[type=select] {
    margin: 3px 0 6px 0;
}

input[type=checkbox] {
    margin: 3px 0 6px 0;
}

input[type=submit] {
    margin: 3px;
}

.login-div {
    border-color: var(--blue-light);
}

    .login-div > .panel-heading {
        color: #ffffff;
        font-weight: 600;
        background-color: var(--blue-light);
        border-bottom-color: var(--blue-light);
    }


.calendar {
    border-color: #d0d0d0;
    color: var(--gray);
}

    .calendar table td {
        background-color: #ffffff;
        color: var(--gray);
        font-weight: bold;
    }

    .calendar .day {
        background-color: #fcfcfc;
        color: var(--gray);
        font-size: 12px;
        font-weight: normal;
        padding: 3px 3px 3px 3px;
    }

    .calendar .today {
        background-color: var(--gray-light);
        color: var(--gray);
        font-size: 12px;
        font-weight: bold;
        padding: 2px 2px 2px 2px;
    }

    .calendar .selected {
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        background-color: var(--blue-light);
        padding: 3px 3px 3px 3px;
    }

    .calendar .selector {
        background-color: #f0f0f0;
        font-size: 11px;
    }

        .calendar .selector a:hover {
            font-weight: bold;
        }

    .calendar .othermonth {
        background-color: #e0e0e0;
        color: #666666;
        font-size: 12px;
        font-weight: normal;
        padding: 3px 3px 3px 3px;
    }

    .calendar .month {
        color: #666666;
        font-weight: normal;
        text-transform: capitalize;
    }

    .calendar .header {
        background-color: #fefefe;
        border-color: #d0d0d0;
        color: #666666;
        text-align: center;
        font: bold 11px verdana;
        padding: 3px 3px 3px 3px;
        text-transform: capitalize;
    }

    .calendar .nextprev {
        background-color: #fdfdfd;
        border-color: #d0d0d0;
        text-align: center;
        font-weight: bold;
        color: #b0c388 !important;
        padding: 3px 3px 3px 3px;
    }

.textDropDown {
    color: var(--color-body);
    font: normal 13px Verdana;
    line-height: 200%;
    padding: 5px;
    border-radius: 4px;
    border: 0;
    outline: 1px solid var(--gray-light);
    margin: 0 0 8px 0;
}

    .textDropDown:focus {
        outline: 1px solid var(--blue-light);
    }

    .textDropDown select {
        border: 1px solid var(--gray-light) !important;
        outline: 1px solid var(--gray-light) !important;
    }

    .textDropDown[disabled] {
        color: var(--gray-light);
    }

    
    option {
        line-height: 200%;
        padding: 5px 2px 5px 2px;
    }

a {
    text-decoration: none;
}

.main td {
    margin: 0;
    padding: 0;
}

.table1 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.main .table2 {
    /*border-bottom: solid 1px #b0c388;
    border-left: solid 1px #b0c388;
    border-right: solid 1px #b0c388;*/
    padding: 10px 10px 10px 10px;
    width: 100%;
}

.navi2 {
    background-color: var(--gray-lighter);
    border-top: 1px solid var(--blue-light);
    border-bottom: 1px solid var(--blue-light);
    border-collapse: separate;
}

    .navi2 td {
        color: var(--color-body);
        font: normal 13px Verdana;
    }

    .navi2 a {
        color: var(--color-body);
        font: normal 13px Verdana;
        text-decoration: none;
    }

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

    .navi2 .selected {
        text-decoration: underline;
    }

/* Expenses / Travel expenses table styles */

.list {
    background-color: #eeeeee;
    border-left-color: #b0c388 !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-right-color: #b0c388 !important;
    border-right-style: solid !important;
    border-top-style: none !important;
    border-bottom-color: #b0c388 !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    width: 100%;
}

    .list td {
        font-size: 12px;
        padding: 3px 4px 3px 4px;
        text-align: left;
    }

    .list .head td {
        background-color: #5d7430;
        border-style: none;
        color: #ffffff;
        font-size: 11px;
        font-weight: normal;
    }

    .list .footer {
        border-style: none;
        font-weight: normal;
    }

.listCaption {
    color: #4F6228;
    font-size: 14px;
    font-weight: normal;
    height: 23px;
}

.list .delete input {
    background-color: #5d7430;
    color: #ffffff;
    font-size: 10px;
    font-weight: normal;
}

td.listCaptionTab {
    background-color: #666666;
    border-left-color: #b0c388;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #b0c388;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #b0c388;
    border-top-style: none;
    border-top-width: 0px;
    color: #eeeeee;
    font-size: 14px;
    font-weight: normal;
    height: 23px;
    text-indent: 25px;
}

td.listCaptionNoTab {
    border-top-color: white !important;
    border-top-style: none !important;
    border-top-width: 0px !important;
    border-bottom-color: #b0c388;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #000000;
    height: 23px;
}

.editBox {
    background-color: #eeeeee;
    border-bottom-color: #5d7430;
    border-left-color: #5d7430;
    border-right-color: #5d7430;
    border-style: none solid solid solid;
    border-width: 0 1px 1px 1px;
}

.frameTable {
    border: 1px solid #4F6228;
    padding: 20px;
    text-align: left;
}

.frameTable2 {
    font-size: small;
    padding: 5px;
    text-align: left;
}

    .frameTable2 td {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 2px;
    }

.frameTable2Header td {
    background: #dddddd;
    padding-bottom: 1px;
    padding-top: 1px;
}

.button {
    background-color: var(--blue-light);
    color: #FFFFFF;
    font: normal 13px Verdana;
    padding: 4px 10px !important;
    border: none;
    display: inline-block;
    border-radius: 4px;
}

.button:hover {
    background-color: var(--blue-light-darker);
}

.btnSmall input {
    background-color: var(--blue-light);
    color: #FFFFFF;
    font: normal 12px Verdana;
    padding: 4px 10px !important;
    border: none;
    display: inline-block;
    border-radius: 4px;
}

.btnSmall input:hover {
    background-color: var(--blue-light-darker);
}

.red-button input, input[type=submit].red-button  {
    background-color: var(--primary);
    color: #FFFFFF;
    font: normal 12px Verdana;
    padding: 4px 10px !important;
    border: none;
    display: inline-block;
    border-radius: 4px;
}

    .red-button input:hover, input[type=submit].red-button:hover {
        background-color: var(--primary-darker);
    }

.btnSmallSubmit {
    background-color: #5cb85c;
    color: #FFFFFF;
    font: normal 11px Verdana !important;
    padding: 2px 5px 2px 5px !important;
    border: none;
    display: inline-block;
}

.btnSubmit {
    background-color: #5cb85c;
    color: #FFFFFF;
    font: normal 13px Verdana !important;
    padding: 4px 9px 4px 9px !important;
    border: none;
    display: inline-block;
    margin: 1px !important;
}



.btnSmallDelete input {
    background-color: #FF4A4A;
    color: #f4f3f1;
    font: normal 11px Verdana !important;
    padding: 2px 4px 2px 4px !important;
    margin: 2px !important;
    border: none;
    display: inline-block;
}

.btnSmallDelete {
    background-color: #FF4A4A;
    color: var(--primary);
    font: normal 11px Verdana !important;
    padding: 2px 4px 2px 4px !important;
    margin: 2px !important;
    border: none;
    display: inline-block;
}

.btnDelete {
    background-color: #FF4A4A;
    color: #f4f3f1;
    font: normal 13px Verdana !important;
    padding: 4px 9px 4px 9px !important;
    margin: 1px !important;
    border: none;
    display: inline-block;
}

.okLbl {
    color: #5d7430;
    font-size: 12px;
    font-weight: normal;
}

.error {
    color: #ff0000;
    font-weight: normal;
}

.input {
    font-size: x-small;
}

.link2 {
    color: #5d7430;
    font-size: 12px;
    text-decoration: none;
}

.time {
    color: #5d7430;
    font-size: 10px;
}

.inTotal {
    background-color: #FFFFFF;
    border-style: none;
    font-weight: normal;
    height: 21px;
}

.grid {
    background-color: var(--gray-lighter);
    color: var(--color-body);
    border: 1px solid var(--gray-light);
    width: 100%;
}

    .grid tr {
        background-color: #ffffff;
    }

    .grid td {
        font: normal 13px Verdana;
        padding: 4px 3px 4px 3px;
    }

.tightgrid td {
    padding: 0;
}

.grid .head td {
    background-color: var(--color-body) !important;
    border: 1px solid var(--color-body);
    color: white;
    font-weight: normal;
    padding: 8px 0 4px 2px;
    margin-top: -1px;
    text-align: center;
    font-size: 13px;
}

.grid input[type=checkbox] {
    accent-color: var(--gray);
    color: white;
    margin: 0;
}

.grid .footer td {
    background-color: var(--color-body) !important;
    color: white;
    font-weight: bold;
    padding-bottom: 8px;
    padding-top: 8px;
    font-size: 14px;
}

.grid .tbxNumber {
    color: var(--color-body);
    font: normal 14px Verdana;
    text-align: right;
}

    .grid .tbxNumber input {
        color: var(--color-body);
        font: bold 14px Verdana;
        text-align: right;
    }

.grid .tbxText {
    color: var(--color-body);
    font: normal 14px Verdana;
    text-align: left;
}

    .grid .tbxText input[type=text] {
        color: var(--color-body);
        font: normal 14px Verdana;
        text-align: left;
        padding: 3px;
        margin: 0;
        border: 1px solid var(--gray);
        border-radius: 3px;
    }

.grid .tbxNumber input[type=text] {
    color: var(--color-body);
    font: bold 13px Verdana;
    text-align: right;
    padding: 3px;
    margin: 0;
    border: 1px solid var(--gray);
    border-radius: 3px;
}

    .grid input[type=text]:focus, .grid input[type=text]:focus-visible {
        outline: 1px solid var(--blue-light);
    }

.grid option {
    color: var(--color-body);
    font: normal 11px Verdana;
    text-align: left;
}

.labelfont {
    color: var(--color-body);
    font: normal 14px Verdana;
    text-align: left;
    vertical-align: bottom;
}

.inputfont {
    color: #777777;
    font: normal 11px Verdana;
    text-align: left;
}



/*
.btnSmall
{
    background-color: #5d7430;
    font: normal 11px Verdana;
    color: #f4f3f1;
}
*/

.project td {
    font-size: 12px;
    padding: 4px;
}

.project fieldset {
    color: #4F6228;
    margin-right: 5px;
}

.project h1 {
    text-align: center;
}

fieldset {
    margin: 10px;
    padding: 10px;
    border: 1px dotted var(--color-body);
    border-radius: 4px;
}

legend {
    color: var(--color-body);
    font: bold 13px Verdana;
    width: auto;
    padding: 5px;
    border: 1px dotted var(--color-body);
    border-radius: 4px;
    margin: 0;
}

.project table {
    margin-top: 10px;
}

.smallheader {
    color: var(--color-body);
    font: bold 15px Verdana;
    margin: 10px 0;
    padding: 0;
}

.fimfieldset {
    border: solid 1px var(--gray-light);
    padding: 5px;
    border-radius: 4px;
    background-color: var(--gray-lighter);
    min-width: 200px;
}

    .fimfieldset .text {
        color: var(--color-body);
        padding: 4px 0;
        font: bold 13px Verdana;
        margin: 0 0 4px 0;
    }

    .fimfieldset input[type=radio] {
        padding: 6px 2px 2px 2px;
        margin: 6px 2px 2px 2px;
    }

    .fimfieldset label {
        padding: 0px 4px 4px 4px;
        font: normal 13px Verdana;
        color: var(--color-body);
    }

.endDate, .startDate {
    color: var(--color-body);
    font: normal 13px Verdana;
    border: solid 1px var(--gray-light);
    margin: 4px 0;
    padding: 4px;
    border-radius: 4px;
}


.linktd {
    color: #5d7430;
    font-size: 10px;
}

    .linktd a:visited {
        color: #5d7430;
    }

div.report {
    margin-left: 10px;
}

.report h1 {
    font: bold 15px Verdana;
    margin-left: 10px;
    padding-top: 20px;
}

.report h2 {
    font: bold 14px Verdana;
    margin-left: 10px;
    padding-top: 10px;
}

.report h3 {
    font: bold 13px Verdana;
    margin-left: 20px;
    padding-top: 10px;
}

.report h4 {
    font: bold 12px Verdana;
    margin-left: 30px;
    padding-top: 10px;
}

.report h5 {
    font: bold 11px Verdana;
    margin-left: 40px;
}

.report .txt {
    color: #4F6228;
    font: normal 12px Verdana;
    margin-left: 30px;
    text-align: right;
}

.report .tbxNumber {
    color: var(--color-body);
    font: normal 12px Verdana;
    text-align: right;
}

@media screen {
    .report table {
        border-collapse: collapse;
        margin-left: 40px;
        width: 600px;
    }
}

.report .header td {
    background-color: #5d7430;
    color: White;
    font: bold 12px Verdana;
    text-align: center;
}

.report .footer td {
    background-color: #5d7430;
    color: White;
    font: bold 12px Verdana;
    text-align: right;
    border: 1px solid var(--color-body);
}

.report td {
    border: 1px solid var(--gray);
    color: var(--color-body);
    font: normal 12px Verdana;
    padding: 4px 6px;
}

.report p {
    font-size: smaller;
    margin-left: 12px;
}

.report a {
    color: #5d7430;
}

    .report a:visited {
        color: #005073;
    }

.report th {
    background-color: #5d7430;
    border: 1px solid #5d7430;
    color: White;
    font-size: xx-small;
    padding: 3px 4px 2px 2px;
    text-align: left;
}

.totalrow td {
    font-weight: bold;
}

.numericcolumn {
    text-align: right;
}

.text {
    color: var(--color-body);
    font: normal 12px Verdana;
}

.textinput {
    color: #4F6228;
    font: normal 11px Verdana;
    text-align: right;
}

.steelgrid {
    background-color: var(--gray-lighter);
}

    .steelgrid td {
        font: normal 12px Verdana;
        padding: 2px 3px 2px 3px;
    }

    .steelgrid .header td {
        background-color: var(--color-body);
        color: white;
        font-weight: bold;
        padding: 6px 4px;
    }

    .steelgrid .alter td {
        background-color: lighten(var(--gray-lighter), 80%);
        padding: 2px 3px 2px 3px;
    }

    .steelgrid .footer td {
        font-weight: bold;
    }

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

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

    .steelgrid .btn input {
        background-color: #5d7430;
        color: black;
        font: normal 10px Verdana;
    }

.steelbtn {
    background-color: #5d7430;
    color: white;
    font: normal 10px Verdana;
}

.back-light {
    background-color: #b09977;
}

.back-dark {
    background-color: #735b38;
}

.back {
    background-color: #534229;
}

.back-title {
    background-color: var(--gray-lighter);
    color: var(--color-body);
    font: normal 15px Verdana;
    margin: 0;
    padding: 0 0 0 0;
    border-top: 1px solid #3ab7ee;
    border-left: 1px solid #3ab7ee;
    border-right: 1px solid #3ab7ee;
    border-radius: 4px 4px 0 0;
    /* display: inline-block; */
    height: 40px;
    font-weight: 600;
}


    .back-title a {
        display: inline-block;
        color: var(--color-body);
        padding: 0;
        text-decoration: none;
        padding: 10px 15px 0 15px;
        height: 100%;
        width: 100%;
        margin: 0;
    }

        .back-title a:hover {
            /*color: var(--gray);*/
            text-decoration: none;
            background-color: var(--gray-light);
        }

.front-light {
    background-color: #b09977;
}

.front-dark {
    background-color: #735b38;
}

.front {
    background-color: #5d7430;
}

.front-title {
    background-color: #5d7430;
    color: #FFFFFF;
    font: normal 12px Verdana;
    padding: 0;
}

    .front-title a {
        padding-left: 6px;
        padding-right: 6px;
    }

.supplier-accounts-title {
    background-color: #5d7430;
    color: #FFFFFF;
    font: bold 10px Verdana;
}

.blank {
    background-color: #FFFFFF;
}

.link {
    color: White;
    text-decoration: none;
}

.hoursediting {
    background-color: rgba(142, 209, 252, 0.30) !important;
}

.hoursedited {
    background-color: rgba(142, 209, 252, 0.30) !important;
    color: var(--color-body);
}

.hoursunedited {
    background: #e4e1dd;
}

.hoursheading {
    background: var(--gray-lighter) !important;
    color: var(--color-body);
    font-size: 14px;
    font-weight: normal;
    padding: 0;
}

    .hoursheading td {
        background: var(--gray-lighter) !important;
        color: var(--color-body);
        font-weight: bold;
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

.hh-internal {
    background: var(--blue-lighter) !important;
    color: var(--color-body);
    font-size: 14px;
    font-weight: normal;
    padding: 0;
}

    .hh-internal td {
        background: var(--blue-lighter) !important;
        color: var(--color-body);
        font-weight: bold;
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

.holidaylist td {
    font: normal 10px Verdana;
}

h5 {
    font: bold 12px Verdana;
}

.loginerror td {
    color: #0000ff;
}

.topnavi-link {
    vertical-align: bottom;
}

.treeview {
    padding-right: 40px;
}

    .treeview table {
        font: normal 12px verdana;
        border-color: var(--color-body);
        color: var(--color-body);
        background-color: transparent;
    }


        .treeview > table:nth-child(-n+8) tr {
            color: var(--blue-light) !important;
        }

        .treeview > div:nth-child(-n+8) table {
            color: var(--blue-light) !important;
        }

        .treeview a {
            color: inherit;
        }

    /*.treeview div:nth-child(-n+8) a {
        color: var(--blue-light) !important;
    }*/

.modalBackground {
    background-color: #666699;
    /*filter: alpha(opacity=50);*/
    opacity: 0.7;
}

.modalPopup {
    background-color: white;
    min-width: 200px;
    min-height: 200px;
}

.clear {
    clear: both;
}

/*** TabContainer ***/

/*

.date-tabs .ajax__tab_header
{
    height: 26px;
    font-family: verdana;
    font-size: 11px;
    font-weight: normal;
    text-align: center;
}

.date-tabs .ajax__tab a {
    color: white;
    width: 70px;
    height: 23px;
}

.date-tabs .ajax__tab a span {
    line-height: 24px;
}

.date-tabs .ajax__tab_header .ajax__tab_outer
{
    background-color: #4F6228;
    margin-right: 6px;
}

.date-tabs .ajax__tab_hover .ajax__tab_inner a span
{
    text-decoration: underline;
}

.date-tabs .ajax__tab_active .ajax__tab_inner
{
    background-color: #847259;
}

.date-tabs .ajax__tab_body
{
    overflow: visible;
}

*/

.date-links {
    height: 27px;
    /*margin-bottom:-1px;*/
}

    .date-links a {
        background-color: #b0c388;
        border-top: 1px solid var(--blue-light);
        border-left: 1px solid var(--blue-light);
        border-right: 1px solid var(--blue-light);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        color:var(--color-body);
        font-family: verdana;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        padding: 5px 20px 5px 20px;
    }

.chbxRememberMe {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 2px;
    margin-top: 0px;
    margin-left: 4px;
    margin-right: 0px;
    margin-bottom: 0px;
    border: solid 0px White;
    font-size: 11px;
    font-family: Verdana;
    background: White;
    color: #2b4a69;
}

    .chbxRememberMe label {
        padding-left: 2px;
        vertical-align: middle;
    }