body {margin: 0; background-color: #f0f0f0; padding-top: 58px;font-family: neue-haas-grotesk-display, sans-serif; font-weight: 400; font-size: 13px; color: #505050;}
div,input {box-sizing: border-box;}
img {vertical-align: top; border: none;}
strong {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;}
a {color: #003663;}

h1 {font-family: futura-pt, sans-serif; font-weight: 700;border-bottom: 2px solid #ee2024; display: block; margin-bottom: 10px; text-align: left; color: #003663; clear: left; font-size: 24px;}
h2,h3 {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; margin-top: 0;text-align: left; margin-bottom: 10px; color: #003663;}

label {display: block; margin-bottom: 3px;}

input,select,textarea {margin: 0; padding: 5px; -webkit-appearance: none; border-radius: 0; border: none;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; }
select {background-image: url(/images/dd2.png); background-repeat: no-repeat; background-position: right; background-size: 20px 20px; padding-right: 24px;}
.select2 {width:  100%;}
input[type=text],input[type=password],input[type=date],select,textarea {border: 1px solid #cfcfcf; border-radius: 5px;}
input[type=submit],.abutton {padding: 10px; background-color: #ee2024; color: white; font-weight: 700; padding: 6px; -webkit-appearance: none; border-radius: 0; border: none; cursor: pointer; border-radius: 5px; text-decoration:  none; width:  100%;}
.abutton {display:  inline-block; text-align:  center; box-sizing: border-box;}
input[type=radio] {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; position: relative; background-color: #e8e8e8; color: #666; height: 18px; width: 18px; border: 0; border-radius: 50px; cursor: pointer; outline: none; float: left; margin: 0; margin-right: 10px;border: 1px solid #cfcfcf;}
input[type=radio]:checked::before { position: absolute; font: 12px/1 'Open Sans', sans-serif; color: #ffffff; left: 4px; top: 1px; content: '\02143'; transform: rotate(40deg);}
input[type=radio]:hover { background-color: #e8e8e8;}
input[type=radio]:checked { background-color: rgb(0,54,99);}

input[type=checkbox] {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; position: relative; background-color: #e8e8e8; color: #666; height: 18px; width: 18px; border: 0; border-radius: 5px; cursor: pointer; outline: none; float: left; margin: 0; margin-right: 10px;border: 1px solid #cfcfcf;}
input[type=checkbox]:checked::before { position: absolute; font: 12px/1 'Open Sans', sans-serif; color: #ffffff; left: 4px; top: 1px; content: '\02143'; transform: rotate(40deg);}
input[type=checkbox]:hover { background-color: #e8e8e8;}
input[type=checkbox]:checked { background-color: rgb(0,54,99);}
input[type=radio] + span {line-height: 24px;}
input[type=checkbox] + span {line-height: 24px;}

.clear {clear: both;}
.relative {position: relative;}
.recbox {position: absolute; right: 10px; top: 10px; padding: 3px;}
.right {float:  right;}

.header {background-color: #003663; padding: 10px; position: fixed; top: 0; width: 100%; z-index: 100000;}
.header img {width: 150px; height: auto;}
.container {margin-left: 10px; margin-right: 10px; margin-bottom: 10px; padding: 10px; background-color: white; border-radius: 5px;}
.container h1:first-of-type {margin-top: 0;}

.header .nav {position: fixed; right: 20px; top: 5px;}
.header .nav a {color: white; display: inline-block; float: left; margin-left: 30px;}
.nav .iconlink {padding-left: 22px; background-position: left; background-repeat: no-repeat; background-size: 18px 18px; line-height: 40px;}
.nav .homeicon {background-image: url(/images/homeicon.png);}
.nav .recicon {background-image: url(/images/recicon.png);}
.nav .logicon {background-image: url(/images/logicon.png);}
.nav .usersicon {background-image: url(/images/usersicon.png);}
.nav .feesicon {background-image: url(/images/feesicon.png);}

.stats {position:  fixed; bottom: 10px; left: 10px; background-color:  #E9EC00; border-radius:  5px; padding:  10px;}

.catchange select {font-size: 10px; padding: 2px; display: inline-block; float: left; margin-right: 4px;}

.leftpanel {width: 300px; display: inline-block; margin-right: 10px; margin-left: 10px; float: left;}
.rightpanel {display: inline-block; margin-right: 10px; margin-left: 10px; float: left; width: 280px;}
.midpanel {width: calc(100% - 620px); display: inline-block; float: left;}
.midpanelnoleft {margin-left:  10px; width: calc(100% - 310px); display: inline-block; float: left;}
.leftpanel .container, .midpanel .container, .rightpanel .container, .midpanelnoleft .container {margin-left: 0; margin-right: 0;}

.filtermenu a {display: block; color: #003663; text-decoration: none;}
.filtermenu .sub {padding-left: 17px; background-image: url(/images/dropicon.png); background-position: left; background-repeat: no-repeat; background-size: 15px 15px;}
.filtermenu .active {font-weight: bold; color: #ee2024;}
.filtermenu .opened {display: block;}

.filterform,.overlayer .container {position: relative;}
.overlayer .fq {width: 33.33%; display: inline-block; float: left; padding-right: 10px;}
.overlayer .fq:nth-of-type(3n) {padding-right: 0;}
.overlayer input[type=text],.overlayer select {width: 100%;}
.fq,.fqfull {margin-bottom: 8px;}
.filterform .fq {display: inline-block; float: left; width: 50%; padding-right: 5px;}
.filterform .fqfull {display: inline-block; float: left; width: 100%;}
.fqfull input[type=text] {width:  100%;}
.filterform .fq select,.filterform .fqfull select,.notesform .fq {width: 100%;}
.filterform .fq:nth-child(even) {padding-left: 5px; padding-right: 0;}
.filterform input[type=submit] {display: block; clear: left;}
.filterform .fullwidth {width: 100%; padding-left: 0 !important;}
.notesform textarea {width: 100%;}

.filterform .dateto,.filterform .datefrom {width: 100%;}
.reconcilebox {display: none;}
#recpayments {overflow: auto; height: 170px;}

.small {font-size: 10px; display: block; margin-top: -1px;}
.flag {font-size: .75em; font-weight: 700; display: inline-block; margin-top: -1px; padding: .35em .65em; margin-right: 5px; border-radius: .27rem;}
.flag-green{background-color: #c7f5d9; color: #0b4121;}
.flag-blue{background-color: #cfe0fc; color: #0a47a9;}
.flag-lightblue{background-color: #d0f0fb; color: #084154;}
.flag-red{background-color: #fdd8de; color: #790619;}
.flag-orange{background-color: #fde4d8; color:#792c06;}
.flag-yellow{background-color: #ffebc2; color: #453008;}

.cancelled {text-decoration: line-through;}
.success {color: #11b100;}
.failed {color: #ee2024;}
.warning {color: #ee8120;}
.pendingfee {color: #56AAF0;}
.warningrow {background-color: #ee8120 !important; display:  table-row !important;}

.ui-selected {background-color: #ee2024;}

.hidden {display: none;}
.overlayer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none;}
.overlayer .container {width: 50%; top: 30%; left: 25%;}
.overlayer .closer {position: absolute; top: 5px; right: 10px; text-decoration: none; font-size: 20px; color: #003663;}

#unrecfilter,#bankfilter,#pendfilter,#homefilter {position: absolute; right: 10px; padding: 4px;}

table a {color: inherit !important;}

table {width: 100%; border-collapse: collapse;}
th {text-align: left; background-color: #f7f7f7;}
th h2,th h3 {margin-bottom: 0;}
td {border-top: 1px solid #f0f0f0;}
tr {user-select: none;}
tr:hover {background-color: #f0f0f0;}
.asubrow {background-color: #f7f7f7;}
.asubrow td:first-of-type {padding-left: 17px; background-image: url(/images/dropicon.png); background-position: 0 5px; background-repeat: no-repeat; background-size: 15px 15px;}
.asubrow2 {background-color: #ededed;}
.asubrow2 td:first-of-type {padding-left: 34px; background-image: url(/images/dropicon.png); background-position: 12px 5px; background-repeat: no-repeat; background-size: 15px 15px;}
.highlighted {background-color: #ffefcc;}.highlighted {background-color: #ffefcc;}
td,th {padding: 5px; vertical-align: top;}
.errors {background-color: #fdd8de; padding: 10px; color: #790619;}
.errors h1 {color: #790619; border-bottom: 2px solid #790619;}

.notes {background-color: #eecba9; padding: 10px; color: #e6790d;}
.notes h1 {color: #e6790d; border-bottom: 2px solid #e6790d;}

.loader {
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.3;
}
@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.3;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.3;
    }
}

.refresher {
    font-size: 10px;
    border: none;
    background: none;
    margin: 0;
    padding: 0 0.2rem;
    text-decoration: underline;
    cursor: pointer;
    color: rgb(80, 80, 80);
}