body {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #2c2c2c !important;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  color: #233746;
  font-family: "Roboto Condensed", Arial, sans-serif;
}

a:link,
a:hover {
  text-decoration: none;
  outline: none;
}

p,
label,
input,
table,
.form-control,
.btn,
.dropdown-menu {
  font-size: 12px;
}

.text-small {
  font-size: 12px;
}

#time {
  font-size: 11px;
  display: block;
  margin-top: 18px;
  margin-left: 50px;
}

.bg-orange {
  background: #ff9e19 !important;
}
.bg-green {
  background: #3c763d !important;
}
.blue {
  color: #006aa6;
}
.red {
  color: #fa0606 !important;
}
.orange {
  color: #ff9e19 !important;
}

.text-danger {
  color: #fc3936 !important;
}

/* add this to row to align elements cenetered vertically */
.vertical-align {
  display: flex;
  align-items: center;
}

.clearfix {
  content: "";
  clear: both;
  display: table;
}

.pointer {
  cursor: pointer;
}

/* Spacing */

.mt-0 {
  margin-top: 0px !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mt-30 {
  margin-top: 30px !important;
}
.mt-40 {
  margin-top: 40px !important;
}
.mt-50 {
  margin-top: 50px !important;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.mb-40 {
  margin-bottom: 40px !important;
}
.mb-50 {
  margin-bottom: 50px !important;
}
.mr-10 {
  margin-right: 10px !important;
}
.mr-20 {
  margin-right: 20px !important;
}
.mr-30 {
  margin-right: 30px !important;
}
.mr-40 {
  margin-right: 40px !important;
}
.mr-50 {
  margin-right: 50px !important;
}
.ml-10 {
  margin-left: 10px !important;
}
.ml-20 {
  margin-left: 20px !important;
}
.ml-30 {
  margin-left: 30px !important;
}
.ml-40 {
  margin-left: 40px !important;
}
.ml-50 {
  margin-left: 50px !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pt-30 {
  padding-top: 30px !important;
}
.pt-40 {
  padding-top: 40px !important;
}
.pt-50 {
  padding-top: 50px !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
.pb-20 {
  padding-bottom: 20px !important;
}
.pb-30 {
  padding-bottom: 30px !important;
}
.pb-40 {
  padding-bottom: 40px !important;
}
.pb-50 {
  padding-bottom: 50px !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pt-30 {
  padding-top: 30px !important;
}
.pt-40 {
  padding-top: 40px !important;
}
.pt-50 {
  padding-top: 50px !important;
}
.pl-10 {
  padding-left: 10px !important;
}
.pl-20 {
  padding-left: 20px !important;
}
.pl-30 {
  padding-left: 30px !important;
}
.pl-40 {
  padding-left: 40px !important;
}
.pl-50 {
  padding-left: 50px !important;
}
.pr-10 {
  padding-right: 10px !important;
}
.pr-20 {
  padding-right: 20px !important;
}
.pr-30 {
  padding-right: 30px !important;
}
.pr-40 {
  padding-right: 40px !important;
}
.pr-50 {
  padding-right: 50px !important;
}

/* Spacing Ends */

.bth-active-color {
  color: #fff !important;
  background-color: #337ab7 !important;
  border-color: #2e6da4 !important;
}

/*.btn-spacing {
  margin-bottom: 8px;
}*/

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  opacity: 0.3;
}

#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

/* Login */

.loginWrapper {
  background: rgba(255, 255, 255, 0.8);
  margin: 60px 5px 10px;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px #ccc;
}

.loginWrapper h3 {
  margin-top: 0px;
}

.loginWrapper .panel {
  margin-bottom: 0px;
}

.contentWrap {
  background: rgba(255, 255, 255, 0.8);
  margin: 20px 5px;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px #ccc;
}

/* Header */

.header {
  display: block;
  height: 100%;
  color: #fff;
  background: #01063e url(../img/bgHeader.png) no-repeat right center;
  padding: 20px;
  border-bottom: 3px solid #ccc;
}

.header h1 {
  color: #fff;
  font-size: 1.4em;
  margin: 0;
  line-height: 50px;
  font-weight: normal;
  text-shadow: 1px 1px 4px #000;
}

.header h1 small {
  color: #999;
}

/* footer */

footer hr {
  border-top: 1px solid #ccc;
  margin: 5px 0 0 0;
}

footer img {
  padding: 10px 0;
}

/* Nav */

.topBar {
  height: 50px;
  width: 100%;
  min-width: 950px;
  background-color: #022169;
  position: relative;
  padding-right: 10px;
}

.topNav {
  margin-top: 10px;
}

.menuBtn {
  color: #ffffff;
  background: #022169;
  display: inline-block;
  height: 50px;
  padding: 0 13px;
  line-height: 50px;
  float: right;
  font-size: 13px;
  transition: background-color 0.2s ease-in;
}

.menuBtn:hover,
.menuBtn:focus,
.menuBtn:active {
  background-color: #02184d;
  color: #ffffff;
  text-decoration: none;
}

.menuBtnLeft {
  float: none;
}

.homeBtn {
  background-color: #347ab7;
  color: #ffffff;
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 48px;
  float: left;
  font-size: 17px;
}

.homeBtn:hover,
.homeBtn:focus,
.homeBtn:active {
  color: #ffffff !important;
  text-decoration: none;
}

.slideMenuBtn {
  color: #022169;
  background: #ffffff;
  display: inline-block;
  height: 50px;
  padding: 0 13px;
  line-height: 50px;
  font-size: 13px;
  transition: background-color 0.2s ease-in;
}

.slideMenuBtn:hover,
.slideMenuBtn:focus,
.slideMenuBtn:active {
  background-color: #ffffff;
  color: #022169;
  text-decoration: none;
}

#MainMenu .panel {
  background-color: transparent;
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

#MainMenu .list-group.panel > .list-group-item,
#MainMenu .list-group-item:first-child, 
#MainMenu .list-group-item:last-child {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

#MainMenu  a {
  color: #fff;
}

#MainMenu .list-group-submenu {
  margin-left: 0px;
}

.mainNavi, .mainNavi:focus {
  background-color: #022169 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3)
}

.subNavi {
  background-color: #0079be;
  color: #fff;
  border: 1px solid #0068a5;
}
.subNavi:hover {
  background-color: #0088d6 !important;
  color: #fff;
}

.subNavi:focus {
  background-color: #006aa6 !important;
  color: #fff;
}

.subSubNavi {
  background-color: #fafafa;
  color: #333 !important;
}
.subSubNavi:hover {
  background-color: #fff;
  color: #333 !important;
}
.subSubNavi:focus {
  background-color: #fff !important;
  color: #006aa6 !important;
}

/* Sortable tables */

table.sortable thead {
  cursor: pointer;
}

table.sortable thead .sorttable_nosort {
  cursor: default !important;
  position: relative;
}

table.sortable
  th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " \021C5";
  color: #999;
}

table th.no-sort.sorting_asc::after {
  content: "" !important;
}
table th.no-sort.sorting_desc::after {
  content: "" !important;
}
table th.no-sort.sorting::after {
  content: "" !important;
}

table.dataTable thead th {
  background: transparent !important;
  white-space: nowrap;
}

table.dataTable thead span.sort-icon {
  display: inline-block;
  padding-left: 5px;
  width: 16px;
  height: 16px;
}

table.dataTable thead .sorting span {
  background: url("http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png")
    no-repeat center right;
}
table.dataTable thead .sorting_asc span {
  background: url("http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png")
    no-repeat center right;
}
table.dataTable thead .sorting_desc span {
  background: url("http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png")
    no-repeat center right;
}

table.dataTable thead .sorting_asc_disabled span {
  background: url("http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png")
    no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled span {
  background: url("http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png")
    no-repeat center right;
}

/* Tables */

#resultsTable {
  position: relative;
  margin-bottom: 30px;
  font-size: 11px;
  margin-top: 10px;
}

#resultsTable th {
  position: relative;
}

.resultsTable {
  font-size: 11px;
  margin-bottom: 0px;
}

#resultsTable > tbody > tr > td,
.resultsTable > tbody > tr > td {
  vertical-align: middle;
}

#resultsTable .searchIcon {
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: 10px;
}

#searchInput {
  margin-left: 15px;
  font-size: 12px;
  width: 90%;
  border: 1px solid #ccc;
  outline: none;
}

#searchInput1 {
  margin-left: -40px;
  font-size: 12px;
  width: 90%;
  border: 1px solid #ccc;
  outline: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

/* Floating Header */

.floating-header {
  position: fixed;
  top: 0px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  left: 0;
  min-width: 1000px;
  z-index: 99;
  background: #fafafa;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d3d3d3;
}

/* Floating Footer */

.floating-footer {

  position: sticky;
  background-color: white;
  bottom: 0px;
  margin-bottom: 0px;
  width: 100%;
  padding-left: 0px;
  padding-right: 15px;
  left: 0;
  min-width: 1000px;
  z-index: 99;
}

.floating-footer .table {
  margin-bottom: 0px;
}

/* Form Elements */

fieldset {
  border: 1px solid #eee !important;
  padding: 1.4em !important;
  margin: 0 0 1.5em 0 !important;
}

legend {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: inherit;
  /* Or auto */
  padding: 0 10px;
  /* To give a bit of padding on the left and right */
  border-bottom: none;
}

.fieldLg {
  width: 350px !important;
}

.fieldMd {
  width: 250px !important;
}

.fieldSm {
  width: 150px !important;
}

.fieldXs {
  width: 100px !important;
}

/* Custom Checkboxes */

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="checkbox"]:focus {
  outline: 0 !important;
}

input[type="checkbox"]:checked:after,
input[type="checkbox"]:after {
  font-size: 14px;
  visibility: visible;
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  top: -3px;
  left: 0px;
  font-weight: 900;
  content: "\f111";
  color: #dadade;
  display: inline-block;
  cursor: pointer;
}

input[type="checkbox"]:checked:after {
  font-size: 14px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f058";
  color: #4ab25e !important;
}

input[type="checkbox"]:after {
  font-size: 14px;
  outline: none;
  border: none;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f111";
  color: #dadade;
}

/* Toggle Checkbox */

/* new */
.toggle-checkbox input[type="checkbox"],
  .toggle-checkbox .checked {
  display: none;
}

.toggle-checkbox input[type="checkbox"]:checked ~ .checked {
  display: inline-block;
}

.toggle-checkbox input[type="checkbox"]:checked ~ .unchecked {
  display: none;
}

/* old */
input[type="checkbox"].toggle::before,
input[type="radio"].toggle::before {
  visibility: visible;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 5px;
  font-size: 15px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f204";
  color: rgb(177, 177, 177);
  margin-top: -5px;
  cursor: pointer;
}

input[type="checkbox"].toggle:checked::before,
input[type="radio"].toggle:checked::before {
  letter-spacing: 5px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f205";
  color: #4ab25e !important;
}

/* Hide Zero */

.hideZero::before {
  content: "\f205" !important;
  /* Hide Zero Balances */
  color: #2e6da4 !important;
  font-size: 15px !important;
}

.showZero::before {
  content: "\f204" !important;
  /* Show Zero Balances */
  color: #2e6da4 !important;
  font-size: 15px !important;
}

#chkAll2[type="checkbox"]::before {
  visibility: visible;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 5px;
  font-size: 12px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f10b";
  color: #dadade;
  margin-top: -5px;
  cursor: pointer;
}

#chkAll2[type="checkbox"]:checked::before {
  letter-spacing: 5px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f3cd";
  color: #4ab25e;
}

.cidField {
  border: 1px solid #f1f1f1;
  width: 100%;
  margin-bottom: 3px;
  padding: 4px;
  outline: none;
}

.cidField2 {
  border: 1px solid #f1f1f1;
  margin-bottom: 3px;
  padding: 4px;
  outline: none;
}

.cidFieldInfo {
  background-color: #d9edf7;
  border: none;
  width: 100%;
  margin-bottom: 3px;
  padding: 4px;
  outline: none;
}

.cidFieldSuccess {
  background-color: #dff0d8;
  border: none;
  width: 100%;
  margin-bottom: 3px;
  padding: 4px;
  outline: none;
}

/* Content */

.content {
  min-width: 1000px;
}

.modal-body .content {
  min-width: 100% !important;
}

.popover,
.dropdown-menu {
  font-size: 12px !important;
}

.tooltip {
  font-size: 11px !important;
}

.table-header,
.table-filter {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.table-header h3 {
  margin-top: 5px;
  margin-bottom: 0px;
}

/*.table-filter .btn-primary,
.table-filter .btn-info,
.table-filter .btn-warning,
.table-filter .btn-danger,
.table-filter .btn-success,
.table-filter .filter-btn {
  margin-bottom: 8px;
}*/

.table-hover > tbody > tr:hover {
  background: rgba(52, 122, 183, 0.2) !important;
}

.actions {
  vertical-align: middle !important;
}

.actions a {
  margin-left: 8px;
  font-size: 12px;
}

.actions input[type="checkbox"] {
  margin-left: 5px;
}

.totals {
  font-weight: bold;
  background: #ddd !important;
}

.borderTop {
  border-top: 2px solid #022169;
}

.borderBottom {
  border-bottom: 2px solid #022169;
}

.borderBottomDouble {
  border-bottom: 5px double #022169;
}

.borderTopBlue {
  border-top: 2px solid #0079be !important;
}

.borderBottomBlue {
  border-bottom: 2px solid #0079be !important;
}

.borderBottomDoubleBlue {
  border-bottom: 5px double #0079be !important;
}

.borderTopGrey {
  border-top: 2px solid rgb(194, 192, 192) !important;
}

.borderBottomGrey {
  border-bottom: 2px solid rgb(194, 192, 192) !important;
}

.no-records {
  background-color: #fff !important;
}

.panel-report {
  transition: 0.2s;
}

/* Report Panels */

.panel-report:hover {
  cursor: pointer;
  background: #fafafa;
  border-left: 5px solid #0079be;
}

.panel-report h4 {
  margin-top: 0px;
}

.panel-report small {
  font-size: 12px;
  color: #0079be;
}

/* Report Panels End */

.floating-panel {
  position: absolute;
  top: 5px;
  right: 20px;
  font-size: 11px;
}

.floating-panel-in-popup {
  position: absolute;
  top: 5px;
  right: 40px;
  font-size: 11px;
}

.bottomMenu {
  padding: 10px;
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 190px;
  background: #fff;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  text-align: center;
  z-index: 1000;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(211, 211, 211, 0.4);
  -moz-box-shadow: 0px 0px 8px 1px rgba(211, 211, 211, 0.4);
  box-shadow: 0px 0px 8px 1px rgba(211, 211, 211, 0.4);
}

.bottomMenu h5 {
  margin-top: 0px;
}

.floater {
  padding: 10px;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #d3d3d3;
  /* border-radius: 4px; */
  text-align: right;
  z-index: 1000;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(211, 211, 211, 0.4);
  -moz-box-shadow: 0px 0px 8px 1px rgba(211, 211, 211, 0.4);
  box-shadow: 0px 0px 8px 1px rgba(211, 211, 211, 0.4);
}

/* Draggable */

.drag {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  height: 80px;
}

.drag .fa-arrows {
  position: absolute;
  top: 12px;
  right: 12px;
}

.draggable {
  background: #fafafa;
}

.legend {
  padding-top: 13px;
}

.legend .fas {
  border: 1px solid #ccc;
}

/* Modal backdrop bug inside iframe*/

.modal-backdrop.in {
  position: fixed;
}

.modal-lg {
  width: 90% !important;
}

.modal-mdx {
  width: 70% !important;
}

.modal-lg .modal-body {
  height: calc(100vh - 200px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.modal-lg .modal-body::-webkit-scrollbar {
  width: 12px;
  max-height: 12px;
}

.modal-lg .modal-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.modal-lg .modal-body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d8d8d8;
}

.scrollbar::-webkit-scrollbar {
  width: 12px;
  max-height: 12px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
}

.red {
  color: #df4343;
}

.black {
  color: #000000 !important;
}

.orange {
  color: #f0a947;
}

.green {
  color: #5cb85c;
}

.blue {
  color: #0079be;
}

.lightblue {
  color: #5bc0de;
}

.grey {
  color: #cccdd8;
}

.light {
  color: #eee;
}

.darkGrey {
  color: rgb(146, 144, 144);
}

.dark {
  color: #333;
}

.bgOrange {
  background: #f0a947;
  color: #fff;
}

.bgYellow {
  background: #d1c300;
  color: #fff;
}
.bgGrey {
  background: #f9f9f9;
}

.bgRed {
  background: #df4343;
  color: #fff;
}

.bgGreen {
  background: #5cb85c;
  color: #fff;
}

.buttonSeperator {
  margin-left: 10px;
  margin-right: 10px;
}

.exOwner {
  background-color: rgb(212, 211, 211);
  color: rgba(119, 119, 119, 0.7);
}

/* Report Statements */

.container-statement {
  padding: 40px;
  border: 1px solid #d3d3d3;
  margin-top: 20px;
  margin-bottom: 20px;
}

.container-statement-full {
  padding: 20px;
  border: 1px solid #d3d3d3;
  margin-top: 20px;
  margin-bottom: 20px;
}

input[readonly] {
  cursor: not-allowed;
  background-color: #E0E0E0;
}

.pagination{
  margin: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  margin-bottom: 5px;
}

.pagination-row{
  display: inline-block;
  max-width: 550px;
}

.nav-row{
  align-items: center;
  display: inline-flex; 
  flex-wrap: wrap;
}

.vertical-line{
  border: 1px solid lightgrey;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Search by on Owner Letter - Send Letter */

.searchby{
  width: 30% !important;
  float: right !important;
  margin-left: -25px !important;
}

button#filterMailLink{
  height: 34px;
}

button#clearButton {
  height: 34px;
}

/* UPDATE DETAILS MODAL */

.update-details{
  display:  block;
  font-weight: 400;
}

.input-container-reason{
  margin-top: 10px;
  margin-bottom: 10px;
}

.input-container-what{
  margin-top: 10px;
  margin-bottom: 10px;
}

input[name="updating"] {
  width: 500px;
  padding: 5px;
  border: 1px solid #ccc;
  font-family: inherit;
  resize: none; 
  overflow-y: auto; 
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap; 
}

.reason {
  width: 500px;
  height: 150px;
  padding: 5px;
  border: 1px solid #ccc;
  font-family: inherit;
  resize: none; 
  overflow-y: auto; 
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap; 
}

/* Sticky header for datatables */

.sticky-header{
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 999;
}