body, form, h1, h2, h3, h4, h5, p, button, a, input, table, td, th, tr {
  font-family: 'Roboto', sans-serif;
  text-rendering: optimizeLegibility; 
}

b {
  color: black;
}

.login-page {
  width: 360px;
  padding: 50px 0 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 0px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form h1 {
  font-size: 20px;
  font-size: 1.27em;
}
.form input {
  font-family: 'Roboto', sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: 'Roboto', sans-serif;
  text-transform: capitalize;
  outline: 0;
  background: #1da9e1;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  font-weight: bold;
}
.form button:hover,.form button:active,.form button:focus {
  background: #24A0DC;
  text-decoration: underline;
}

input.button {
  font-family: 'Roboto', sans-serif;
  text-transform: capitalize;
  outline: 0;
  background: #1da9e1;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  font-weight: bold;
}

input.button:hover, input.button:active, input.button:focus {
  background: #24A0DC;
  text-decoration: underline;
}



.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #1da9e1;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}

ol.breadcrumb {
  text-transform: capitalize;
}

body {
  background: #252721; 
  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(right, #24A0DC, #1da9e1);
  background: -moz-linear-gradient(right, #24A0DC, #1da9e1);
  background: -o-linear-gradient(right, #24A0DC, #1da9e1);
  background: linear-gradient(to left, #24A0DC, #1da9e1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/    
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

body.detailview {
  background-color: #fff;
}

body.detailview section h1, body.detailview div h1 {
  color: #24A0DC;
  font-size: 27px;
}

body.detailview section p, , body.detailview div p {
  color: #333;
  font-size: 12px;
  font-weight: 100 !important;
  margin-bottom: 20px;
  line-height: 18px;
}

/* FOOTER START */

footer {
  background: #252721 none repeat scroll 0 0;
  float: left;
  padding: 50px 0 !important;
  text-align: center;
  width: 100% !important;
}

footer a {color: #337ab7;}

.ftr_social > ul {
  display: inline-block;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.ftr_social li {
  display: inline-block;
  float: left;
  margin: 0 7px;
}
.ftr_social li a i {
  border: 2px solid;
  border-radius: 50%;
  font-size: 12px;
  padding: 4px 5px;
}
.ftr_social {
  float: left;
  margin: 30px 0;
  text-align: center;
  width: 100%;
}
.ftr_social li a i.fa-facebook {
  padding: 4px 6px;
}
.copy_right {
  color: #f5d40b;
  float: left;
  font-size: 11px;
  width: 100%;
}

/* FOOTER END */

.login-form span.error {
  display: block;
  font-size: 12px;
  margin-bottom: 20px;
}

.hidden {
  display: none !important;
}

/* EXTRA */

#row1 {
  clear: both;
  padding-bottom: 1.6em;
}

#cust-table {
  height: auto;
  width: 79% !important;
  float: right !important;
  margin-bottom: 1em !important;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

#cust-table::-webkit-scrollbar {
  background: rgba(36, 160, 220, 0.32);
  border-radius: 4px;
  height: 8px;
  width: 13px;
}

#cust-table::-webkit-scrollbar-thumb {
  background: #24a0dc;
  border-radius: 4px;
}

.col-1 {
  height: auto;
  float: left;
  display: block;
  width: 16%;
}

.col-1 {
  line-height: 26px;
  text-align: center;
  margin: 27px 0px;
}

.container-1{
  width: 0;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 
.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

.container-1 .icon{
  position: absolute;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: black;
  top: -4px;
}

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
  outline:none;
  background: #f4d20c;
}

.container-1 input#search{
  width: 309px;
  height: 50px;
  background: #24a0dc;
  border: none;
  font-size: 10pt;
  float: left;
  color: black;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-weight: bold;
 
   
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

.buttons {
  display: inline-block;
  width: 100%;
  margin-top: 15px;
}

.buttonAccounts {
  background: #24a0dc;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 1em;
  text-align: left;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
  cursor: pointer;
  font-size: 17px;
}

.buttonAccounts:hover, .buttonAccounts:focus, .buttonAccounts:active{
  outline:none;
  background: #f2cd06;
}

.change {
  background: #f2cd06;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 1em;
  border-radius: 5px;
  text-align: center;

}

.contentText {
  background-color: #24a0dc;
  padding: 1.5em;
  margin-top: 0;
  margin-bottom: 15px;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
  font-weight: bold;
}

.contentText:hover, .contentText:focus, .contentText:active{
  outline:none;
  background: #f3cf06;
}

.box {overflow: hidden;}

#example td {cursor: pointer;}

.forgotPass {
  text-decoration: none;
  color: #57a6db;
}

.col1 {
  display: inline-block;
  margin: 1em;
  margin-top: 2em;
  margin-left: 0;
  padding-top: 0;
  border: 1px solid rgb(191, 191, 191);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  width: 28%;
}

.col1 h2 {
  color: #000000;
  background-color: #56a5da;
  margin: 0;
  margin-bottom: 20px;
  padding: 1em;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.col2 {
  width: 68%;
  display: inline-block;
  margin-right: 1%;
  margin-bottom: 2%;
  float: right;
  padding-top: 2em;
}

.col3 {
  margin: 1em;
  color: black;
  background-color: #5ca8dc;
  padding: 1em;
  display: inline-block;
  border-radius: 5px;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
  float: right;
}

.col3 p{
  float: right;
  margin-top: 0;
  margin-left: 15px;
  margin-bottom: 0;
  font-size: 18px;
  color: black;
  font-weight: bold;
}

.tg {margin-left: 1em;}

.col3:hover, .col3:focus, .col3:active{
  outline: none;
  background-color: #ffe347;
}

.tg-yw4l {
  text-align: left !important;
  padding: 5px 0;
  padding-right: 20px;
}

dd {
  margin: 0;
  padding-bottom: .6em;
  margin-right: 20px;
}


h2 {color: #5ca8dc;}

.colleft {
  overflow: hidden;
  margin: 42px 0;
}

/*.tabulator-tableHolder {overflow-x: hidden;}*/

/*#emaple_wrapper {height: 463px !important;}*/

@media (min-width:290px) and (max-width:980px) {
    #cust-table {
      float: none;
      width: 100% !important;
    }
    #contentSupplier {display:none !important;}

}

@media (min-width:290px) and (max-width:980px) {
    .col-1 {
      width: 100% !important;
      overflow: hidden;
    }

    #cust-table {
      overflow: auto;
      height: 829px !important;
    }

    .col1 {
      padding-left:0 !important;
      padding-right:0 !important;
      width: 98%;
    }

    .col2 {
    width: 97%;
    display: inline-block;
    margin-left: 0%;
    overflow: auto;
    }

} 

#passReset {
  text-decoration: none;
  color: black;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

#passReset:hover, #passReset:focus, #passReset:active{
  outline: none;
  background-color: #ffe347;
}

@media (min-width:290px) and (max-width:650px) {
  .container-1 input#search {
    min-width: 192px;
    max-width: 309px;
    width: auto;
}

  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: center;
}

  #tableTrans_filter {float:left;}

}

#supplierRef {
  width: 21% !important;
  margin-top: 10px;
}

.login-form input {
  border: 1px solid #d0d0d0;
}

#pagesA {
  margin: 10px 0;
}

#pagesB {
  margin: 4em 0;
}

#pagesA li,
#pagesB li {
  display: inline-block;
}

#disable {
  width: 58%;
  float: right;
  margin: 0 15em;
  font-size: 15px;
}

#email {width: 77% !important;}

#reset {
  margin-top: 15px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: black;
  text-decoration: none;
}

.changePword {  
  padding: 10px 0;
  margin: 0;
  margin-bottom: 15px;
  background-color: #1da9e1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.passChange {
  background: #24a0dc;
  margin: 0;
  padding: 1em;
  text-align: center;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
  cursor: pointer;
}

.dataTables_wrapper {
  top: 2%;
  margin-right: 22px;
}

.customButtonOn {
  background-color: #f2cd06;
  border: 1px solid #c5a703;
}

@media (min-width: 320px) and (max-width: 1023px) {
  html {zoom: 2;}
}

@media (width: 768px) and (height: 1024px) {
  html {zoom: 1 !important;}
}

#col-right {
  width: 62%;
  display: inline-block;
  margin: 4em 10em;
  float: right;
}

#col-input {
  width: 100%;
  display: inline-block;
}

#col-right h4 {font-size: 25px !important;}

#names p,
#details p {
  width: auto !important;
  max-width: 50%;
  display: inline-block !important;
  font-size: 18px;
  color: #24a0dc;
  vertical-align: top;
}

/*Add Customer Form*/
.add-customer,
.add-account,
.add-user,
.user-page,
.customer-page,
.edit-account {
  width: 63%;
  display: inline-block;
  margin: 5em 7em;
}

#add-customer-page select,
#add-customer select,
#add-account-page select,
#add-user select,
#user-page select,
#customer-page select,
#edit-account select,
.supplier-form {
  margin: 1em 0;
}

#add-customer-page input,
#add-account-page input,
#add-customer input,
#add-user input,
#user-page input,
#customer-page input,
#edit-account input,
.supplier-form {
  font-size: 14px;
  padding: .5em;
  width: 90%;
  margin-right: 2em;
  margin-bottom: 2em;
  margin-top: 5px;
}

#add-customer-page h4,
#add-account-page h4,
#add-customer h4,
#add-user h4,
#user-page h4,
#customer-page h4,
#edit-account h4,
.supplier-form {
  margin: .5em 0;
  padding: .7em;
  border-bottom: 3px solid #24a0dc;
  color: #24a0dc;
  font-size: 19px;
}

#viewRule p {padding-left: 15px;}

.submitAdd {
  width: 17% !important;
  position: relative;
  left: 34%;
  margin: 1em;
  margin-bottom: 2em;
}
/*------------------------------------*/

.backAdd {
  display: inline-block;
  padding: 1em 1.5em;
  margin: 12%;
  background-color: #24a0dc;
  box-shadow: 0px 2px 2px black;
      -webkit-transition: background .55s ease;
      -moz-transition: background .55s ease;
      -ms-transition: background .55s ease;
      -o-transition: background .55s ease;
      transition: background .55s ease;
      cursor: pointer;
}

.backAdd:hover, .backAdd:focus, .backAdd:active {
  outline: none;
  background-color: #ffe347;
}

.backAdd i {
  margin-right: 20px;
}

/*Add Services Form*/
#add-services {
  width: 60%;
  display: inline-block;
  float: right;
  margin: 0 10em;
}

.checkbox {
  margin: 5px !important;
  width: 2% !important;
}

.checkbox-p {
  display: inline-block;
  margin-right: 3em;
}

#add-services input {
  font-size: 14px;
  padding: .5em;
  width: 40%;
  margin-right: 2em;
  margin-bottom: 2em;
}

#add-services h4 {
  margin: .5em 0;
  padding: .7em;
  border-bottom: 3px solid #24a0dc;
  color: #24a0dc;
  font-size: 19px;
}

.submitAdd {
  width: 17% !important;
  position: relative;
  left: 34%;
  margin: 1em;
  margin-bottom: 2em;
}

#add-customer,
#add-account,
#add-user,
#user-page,
#customer-page,
#edit-account {
  width: 78%;
  float: right;
}

#add-customer-page label,
#add-account-page label,
#add-customer label,
#add-user label,
#user-page label,
#customer-page label,
#edit-account label {
  color: #24a0dc;
  font-size: 17px;
  font-weight: bold;
  margin: 3px;
}

#house-number {
  width: 12%;
  display: inline-block;
  margin-right: 2em;
}

#street-address {
  width: 83%;
  display: inline-block;
}

#forename,
#surname,
#box-one,
#box-two {
  width: 47%;
  display: inline-block;
  vertical-align: top;
}

#email-address,
#landline,
#mobile {
  width: 47%;
  display: inline-block;
}

.searchBar {
  width: 80%;
  float: left;
  clear: both;
}

.col-1 i.fa.fa-search {
  font-size: 22px;
  float: right;
  clear: both;
}

.advanced-search {
  margin: 0;
  margin-top: 10px;
  font-size: 15px;
  font-weight: bold;
  width: 100%;
}

.advanced-search-form {
  width: 72%;
  display: inline-block;
  margin: 8em 5em;
}

#search-input label {
  color: #24a0dc;
  font-size: 17px;
  font-weight: bold;
  margin: 3px;
}

#search-input input {
  width: 100%;
  margin-bottom: 20px;
}

.customerSearchTable {
  width: 100%;
  text-align: left;

}

.customerSearchTable th {
  padding: 1em 4px;
  border-right: 1px solid #2e7598;
}

.customerSearchTable tr {
  background-color: #eaeaea;
}

.customerSearchTable td {
  padding: 0.5em 4px;
  border-right: 1px solid #d6d6d6;
}

.customerSearchTable tr:nth-child(even) {
  background-color: white;
}

.customerSearchTable thead tr,
.customerSearchTable tfoot tr {
  background-color: #24a0dc !important;
}

#searchTable {
  height: auto;
  width: 80%;
  display: inline-block;
  position: relative;
  left: 2em;
  top: 2em;
  margin-top: 5.4em;
}

#searchTable table {margin-bottom: 0 !important;}

#searchTable::-webkit-scrollbar {
  background: rgba(36, 160, 220, 0.32);
  border-radius: 4px;
  height: 8px;
  width: 13px;
}

#searchTable::-webkit-scrollbar-thumb {
  background: #24a0dc;
  border-radius: 4px;
}

.customerSearchTable tfoot td {
  border: 0;
}

#add-account-column {
  width: 49%;
  display: inline-block;
}

#email-address{
  width: 47% !important;
  display: inline-block;
}

.submitAddUser {
  width: 17% !important;
  position: relative;
  left: 0%;
  margin: 1em;
  margin-bottom: 2em;
}

#add-user-input {
  margin-top: 5%;
}

.add-account,
.add-user,
.user-page,
.customer-page,
.edit-account {
  width: 67%;
  display: inline-block;
  margin: 4em 7em;
}

#input-col {
  width: 43%;
  display: inline-block;
  margin-right: 3em;
}

#right {
  width: 75%;
  float: right;
  margin: 7.4em 38px;
}

#example th {vertical-align: middle;}

#start,
#end {
  width: 40%;
  display: inline-block;
}

.customer-table-h4 {
  width: auto;
  font-size: 26px;
  padding-bottom: 4px;
  margin-bottom: 0px;
  border-bottom: 3px solid #24a0dc;
  color: #24a0dc;
  margin-top: 0;
  display: inline-block;
  position: relative;
  left: 3.5em;
}

#cust-table h4 {
  width: 10%;
  font-size: 26px;
  padding-bottom: 4px;
  margin-bottom: 0px;
  border-bottom: 3px solid #24a0dc;
  color: #24a0dc;
  margin-top: 0;
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
    background-color: #e2e2e2 !important;
}

#cust-table table {margin-bottom: 0 !important;}

#rules,
#account-names,
#priority,
#frequency,
#balanceCriteria,
#balance,
#calendar,
#balanceExpiry {
  width: 40%;
  display: inline-block;
  margin-right: 3em;
}

#cust-table {
  position: relative;
}

.fundAdd #col-right {
  width: 69%;
  display: inline-block;
  margin: 4em 8em;
  margin-right: 0;
}

#input-jq {
  width: 48%;
  display: inline-block;
  margin-left: 11em;
  position: relative;
  bottom: 3em;
}

#customerHome .doublepage .col2 {
  width: 66%;
}

#customer-details h3 {
  margin: 7px 1em !important;
  width: 166px;
}

#supplier-change {
  width: 20%;
  clear: both;
  display: inline-block;
  margin: 4em 36em;
}

#supplier-change input {
  width: 100%;
  margin: .5em 0px;
  font-size: 15px;
  padding: 10px;
}

#supplier-change h3 {
  text-align: center;
  color: #1da9e1;
  font-size: 29px;
}

#disable p {
  margin: 12px 0;
}

#col {
  width: 49%;
  display: inline-block;
}

#col p {
  color: #24a0dc;
  font-size: 18px;
  text-transform: capitalize;
}

#col span {
  color: black;
  font-weight: bold;
}

.meter-page #col-right {
  width: 66%;
  display: inline-block;
  margin: 4em 0em;
  float: right;
}

.meter-page #col {
  position: relative;
  right: 8em;
}

.meter-page #col {
  width: 40%;
  display: inline-block;
  margin-right: 116px;
}

#contact-details {
  width: 50%;
  margin: 5em auto;
}

#contact-details input {
  width: 60%;
  margin: 14px 0;
  font-size: 15px;
  padding: 3px 5px;
}

#contact-details label {
  color: #56a5da;
  font-weight: bold;
}

.card-list table {
  width: 100%;
  text-align: left;
}

.card-list th {
  border: 1px solid #0d84d4;
  background: #56a5da;
  padding: 4px;
  color: white;
}

.card-list td {
  padding: 4px;
}

.card-list tr:nth-child(even) {
  background-color: #eaeaea;
}

.card-list td {
  border: 1px solid #d6d6d6;
}

#metersList_filter,
#metersList_length {
  display: none;
}

input[type="submit"] {
  width: auto !important;
}

#disable p {
  color: #24a0dc;
}

#col-two {
  width: 33%;
  display: inline-block;
}

@media (max-width: 768px) {
  #col-right {
    width: 100%;
    display: inline-block;
    margin: 4em 0em;
    float: none;
  }

  #forename,
  #surname,
  #box-one,
  #box-two {
    width: 100% !important;
  }
}

@media (max-width: 1587px) and (min-width: 1024px) {
  #col-right {
    width: 73%;
    margin: 4em 0;
  }

  #table-wrapper {
    overflow: auto;
  }

  #supplier-change {
    width: 45% !important;
    display: inline-block !important;
    margin: 4em 12em !important;
    clear: none;
  }
}

@media (max-width: 1023px) {
  #col-right {
    width: 100%;
    margin: 1em 0;
    float: none;
  }

  #metersList_wrapper {
    overflow: scroll;
  }

  .col-1 {
    height: auto;
    float: none;
    width: 100%;
  }

  .customer-table-h4,
  #cust-table {
    top: 0;
  }

  #add-customer, #add-account, #add-user, #user-page, #customer-page, #edit-account {
    width: 100%;
    float: none;
  }

  input {
    border: 1px solid #c7c7c7 !important;
  }

  #right {
    width: 100%;
    float: none;
    margin: 0;
  }


  #table-wrapper {
    overflow: auto;
  }

  form.add-customer {
    width: 100% !important;
    margin: 0 !important;
  }

  #disable {
    width: 100%;
    float: none;
    clear: both;
    margin: 0;
    font-size: 15px;
  }

  #col-two {
    width: 100%;
    display: inline-block;
  }

  #names p, #details p {
    width: 100% !important;
    max-width: 100%;
  }

  .add-account, .add-user, .user-page, .customer-page, .edit-account {
    width: 100%;
    display: inline-block;
    margin: 0;
  }

  #input-col {
    width: 100%;
    display: inline-block;
    margin-right: 0;
  }

  #supplier-change {
    width: 100%;
    margin: 0;
  }

  .advanced-search-form {
    width: 100%;
    display: inline-block;
    margin: 0;
  }
}

#customerList th {
  color: #24a0dc;
  border-bottom: 0 !important;
  border: 1px solid #c3c3c3 !important;
}

table#customerList {
  border: 1px solid #c1c1c1 !important;
}

#customerList td {
  border: 1px solid rgba(193, 193, 193, 0.36) !important;
  padding: 9px;
}

#metersList th {
  border: 1px solid #ddd;
  color: #000000;
  padding: 7px 10px;
  font-weight: bold;
  border-bottom-width: 2px;
}

tr#meter:nth-child(odd) {
  background: #eaeaea;
  border: 1px solid #b1b1b1;
}

#metersList td {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  padding: 8px;
}

table#customerList {
  display: block !important;
}

th.sortable {
  cursor: pointer;
  padding: 15px;
}

.sorted-asc, .sorted-desc {
  background: #24a0dc !important;
  color: white !important;
}

.userForm {
  width: auto;
  display: inline-block;
  float: right;
  margin-right: 4em;
  margin-top: 5%;
}

@media (max-width: 1584px) and (min-width: 1024px) {
/*  #input-col {
    float: right;
    margin: 0;
  }*/

  input.submitAddUser {
    float: right;
    clear: both;
  }

  .userForm {
    width: 66%;
    display: inline-block;
    float: right;
    clear: none;
    margin-right: 0;
    margin-top: 10%;
    margin-left: 3em;
  }

  #disable {
    width: 80%;
    float: right;
    clear: none;
    margin: 0;
    margin-top: 11%;
    font-size: 15px;
  }
}

.tableSort {
  width: 100%;
  height: 50px;
  border: 0;
  background: white;
  color: #24a0dc;
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  padding-left: 14px;
}

#metersList_paginate,
#metersList_info  {
  display: none;
}

.alert-danger {
  color: #353535 !important;
  background-color: rgba(36, 160, 220, 0.34) !important;
  border-color: #24a0dc !important;
}

#bulk {
  float: right;
  width: 80%;
  margin: 6em 0;
}

#fundList_length,
#fundList_filter,
#fundList_paginate,
#fundList_info,
#transactionTableList_filter {
  display: none;
}

#trans-left, #trans-right {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

#viewSplit {
  width: 133px;
  display: inline-block;
  vertical-align: middle;
}

#customer-transactions h4,
#viewSplit p {
  color: #56a5da;
}

#utrn {
  background: #56a5da;
  width: 229px;
  font-size: 17px;
  color: white;
  font-weight: bold;
  padding: 5px;
}

#amount {
  font-size: 20px;
  background: #56a5da;
  color: white;
  font-weight: bold;
  padding: 10px;
}

#trans-arrow {
  margin: 0 10px;
}

#account {
  margin-right: 20px;
}

@media (max-width: 768px) {
  #rules, #account-names, #priority, #frequency, #balanceCriteria, #balance, #calendar, #balanceExpiry {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .fundAdd #col-right {
    width: 100% !important;
    margin: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1712px) and (min-width: 1024px) {
  .add-account, .add-user, .user-page, .customer-page, .edit-account {
    width: 70%;
    display: inline-block;
    margin: 4em 4em;
  }
}

#customer-login-page button.close {
  width: auto;
  padding: 10px;
}

#customer-login-page .alert.alert-info {
  background: #f1f1f1;
  text-align: left;
}

.alert.alert-info {
  margin-left: 10px;
  padding: 7px 10px;
  background: #56a5da;
}

.table-wrapper table tr {
  cursor: pointer;
}

tr {
  cursor: pointer;
}