html, body {
  -webkit-overflow-scrolling: touch;
  background-color: #D9D9D9;
  font-family: Helvetica, Arial, sans-serif; }

@media (min-width: 1200px) {
  .container {
    width: 95% !important; } }

.overlay {
  background: #e9e9e9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  height: 100%;
  pointer-events: none; }

.box {
  margin-bottom: 1em;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }

.right-align {
  text-align: right !important; }

.left-align {
  text-align: left !important; }

.btn-action.btn-md {
  font-size: 1.1em;
  padding: 0.2em 0.3em; }

.flex-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap; }
  .flex-row [class*='col-'] {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column; }
    .flex-row [class*='col-'] div {
      -webkit-flex: 1;
              flex: 1; }
  .flex-row.row:after, .flex-row.row:before {
    display: -webkit-flex;
    display: flex; }

.flex-row > [class*='col-'] {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column; }

.flex-row.row:after,
.flex-row.row:before {
  display: -webkit-flex;
  display: flex; }

.label {
  font-size: 1em;
  padding: 0.2em 0.5em;
  line-height: 1.5;
  text-transform: uppercase; }
  .label.label-high-inverse {
    background: none;
    color: #0033CC; }
  .label.label-normal-inverse {
    background: none;
    color: #002060; }
  .label.label-default-inverse {
    background: none;
    color: #999999; }

.text-warning {
  color: #FFC000; }

.text-success {
  color: #00B050; }

.text-high {
  color: #0033CC; }

.text-normal {
  color: #002060; }

.text-muted {
  color: #999999; }

.fixed-textbox {
  width: 100%;
  /* Fill the width of the parent container */
  height: 100px;
  /* Set your desired height */
  box-sizing: border-box;
  /* Include padding and border in the total width and height */
  overflow: auto;
  border: 1px solid #ccc;
  /* Optional: Add border for styling */ }

.top-panel {
  height: 4em;
  margin-bottom: 1em;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-bottom: #002060 2pt solid;
  background-color: #FFFFFF; }

.left-logo {
  display: inline;
  float: left;
  margin-left: 0.5em; }
  .left-logo span {
    margin-left: 0.3em;
    font-size: 1.0em;
    vertical-align: middle; }

.right-logo {
  display: inline;
  float: right;
  margin-right: 0.5em; }
  .right-logo span {
    vertical-align: -0.6em;
    margin-right: 0.5em;
    font-style: italic; }

.logo {
  padding-left: 0.1em;
  padding-right: 0.1em; }
  .logo.ubin {
    margin-top: 0.8em;
    height: 60%; }
  .logo.bi {
    margin-top: 0.2em;
    height: 100%; }
  .logo.corda {
    margin-bottom: 0.2em;
    height: 40%; }
  .logo.acn {
    height: 30%;
    margin-top: 0.3em; }
  .logo.mas {
    height: 80%;
    margin-top: 0.1em; }
  .logo.abs {
    height: 60%;
    margin-top: 0.5em; }

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  /* Adjust the background color and opacity as needed */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  z-index: 999;
  /* Ensure it's above other elements on the page */ }

.loading-overlay-transaction {
  width: 100%;
  /* Adjust the background color and opacity as needed */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  /* Ensure it's above other elements on the page */ }

.loading-spinner {
  /* Add any additional styles for your loading spinner container */ }

/* Add this to your CSS styles */
.readonly-input {
  background-color: #f0f0f0;
  /* Set the desired grey background color */
  /* Add any other styles you want for the read-only input field */ }

.right-side {
  display: inline;
  float: right;
  margin-right: 0.5em; }
  .right-side span {
    vertical-align: middle;
    margin-right: 0.5em;
    font-style: italic; }

.user-info {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 0.2em;
  height: 100%;
  margin-right: 20px; }
  .user-info span {
    vertical-align: middle;
    margin-right: 0.5em;
    font-style: italic; }

.user-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer; }

.user-name {
  color: #000000;
  cursor: pointer; }

[data-toggle="dropdown"].btn {
  background-color: transparent;
  border: none;
  transition: background-color 0.3s ease; }

[data-toggle="dropdown"].btn:hover {
  background-color: #f0f0f0; }

[data-toggle="dropdown"].btn:not(:hover) {
  background-color: transparent; }

.icon {
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 7vh;
  height: 4vh;
  background-size: 3vh;
  bottom: 3vw; }

.icon-acn {
  background-image: url(../img/acn_black.png);
  background-repeat: no-repeat;
  position: relative;
  height: 100%;
  width: 20%; }

.icon-ubin {
  background-image: url(../img/ubin.png);
  background-repeat: no-repeat;
  position: relative;
  width: 20%;
  height: 100%;
  background-size: 100%; }

.icon-mas {
  background-image: url(../img/mas.png);
  background-repeat: no-repeat;
  position: relative;
  height: 6vh;
  width: 10vh;
  -webkit-justify-content: flex-start;
          justify-content: flex-start; }

.icon-abs {
  background-image: url(../img/abs.png);
  background-repeat: no-repeat;
  position: relative;
  height: 5.3vh;
  width: 13vh;
  -webkit-justify-content: flex-start;
          justify-content: flex-start; }

.box-balance {
  background-color: #002060;
  color: #FFFFFF;
  padding: 1em; }
  .box-balance .balance .bank-logo {
    width: auto;
    height: 40px;
    margin: 10px 0;
    display: block; }
  .box-balance .balance .btn-primary {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.9em;
    width: 100%;
    height: 1.65em;
    text-align: start;
    padding-top: 0px;
    border-radius: 0; }
    .box-balance .balance .btn-primary:focus,
    .box-balance .balance .btn-primary :active {
      border: 0;
      border-bottom: 1px solid #FFFFFF;
      box-shadow: none; }
    .box-balance .balance .btn-primary .caret {
      display: inline-block;
      width: 0;
      height: 0;
      vertical-align: middle;
      border-top: .6em dashed;
      border-right: .4em solid transparent;
      border-left: .4em solid transparent;
      float: right; }
    .box-balance .balance .btn-primary .caret-text {
      margin-top: .35em; }
  .box-balance .balance ul {
    width: 92%;
    margin-left: 4.5%; }
    .box-balance .balance ul li a {
      color: #002060;
      font-size: 1.3em; }
  .box-balance:first-child .balance-label {
    margin-bottom: 1em;
    color: #D9D9D9; }
  .box-balance .balance-label {
    top: 1.5em;
    font-size: 1.3em; }
  .box-balance .balance-val {
    font-size: 1.5em;
    bottom: .3em;
    color: #FFFFFF; }
  .box-balance .balance-val-neg {
    color: #E6B9B8; }
  .box-balance .balance-val-pos {
    color: #9BBB59; }
  .box-balance .balance-val-zero {
    color: #FFFFFF; }
  .box-balance .box-channel-balance {
    padding: 1em 4em 1em 2em; }
    .box-balance .box-channel-balance .channel-text {
      text-align: right;
      color: #D9D9D9;
      font-size: 1.1em;
      top: .2em; }
    .box-balance .box-channel-balance .balance-text {
      text-align: left;
      font-size: 1.3em;
      border-left: solid 1px #FFFFFF; }
  .box-balance .logout-container {
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-flex-direction: column;
            flex-direction: column;
    display: flex-end; }
    .box-balance .logout-container .btn-holder {
      -webkit-justify-content: flex-end;
              justify-content: flex-end;
      display: -webkit-flex;
      display: flex; }

.box-bank-fn {
  background-color: #FFFFFF;
  padding: 1em; }
  .box-bank-fn button {
    margin-top: 1.75em;
    width: 100%;
    font-size: 1.2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em; }
  .box-bank-fn .tab-section {
    border-bottom: 1px solid #002060;
    padding-bottom: .8em; }
    .box-bank-fn .tab-section .nav-pills li {
      cursor: pointer;
      cursor: hand; }
  .box-bank-fn .tab-content .row {
    margin-top: .6em; }
    .box-bank-fn .tab-content .row .radio-btn {
      margin-top: .6em; }
  .box-bank-fn .tab-content .tab-pane label {
    font-size: 1.2em; }
  .box-bank-fn a {
    color: #002060;
    font-size: 1.3em;
    padding: .2em 1.8em !important; }
  .box-bank-fn .active a {
    background-color: #002060 !important;
    color: #FFFFFF !important;
    border-radius: .4em; }

.bankfn-tab-content {
  overflow-x: hidden;
  overflow-y: auto;
  /* Enable vertical scrollbar when content exceeds height */
  max-height: 200px;
  /* Set a maximum height to limit the scrollable area */
  /* Optional: Adjust the maximum height based on your design */
  /* max-height: calc(100vh - 100px); */ }

.table-box-section {
  border: 1px solid #EDF1F2;
  background-color: #FFFFFF; }
  .table-box-section .table-heading {
    -webkit-align-content: center;
            align-content: center;
    position: relative;
    padding: 0.5em 0.8em;
    height: 3.5em;
    background-color: #FFFFFF;
    color: #002060;
    font-size: 1.3em;
    letter-spacing: 0.1em; }
    .table-box-section .table-heading.transactions {
      height: auto; }
    .table-box-section .table-heading .btn {
      letter-spacing: 0;
      font-size: 0.9em;
      padding: 0.2em 0.6em; }
    .table-box-section .table-heading .netting-status {
      display: block;
      position: absolute;
      top: 70%;
      font-size: .9em;
      letter-spacing: 0; }
  .table-box-section th, .table-box-section td {
    text-align: center;
    font-size: 1em; }
  .table-box-section thead > tr > th {
    padding: 0.5em; }
  .table-box-section tbody > tr > td {
    padding: 0.5em; }
    .table-box-section tbody > tr > td.right-align {
      padding-right: 0.6em; }
  .table-box-section th {
    font-size: 0.9em;
    color: #595959; }
  .table-box-section .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F2F2F2; }

.ngdialog-content {
  background-color: #FFFFFF !important; }

.mas-modal .modal-header {
  padding: .3em .5em 0.2em 0.5em;
  color: #002060;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.5em; }

.mas-modal .modal-message {
  font-size: 1.2em;
  margin-bottom: 2em;
  color: #002060; }

.mas-modal button {
  width: 100%;
  font-size: 1.1em;
  min-width: -webkit-min-content;
  min-width: min-content; }

.table-box-section-cst {
  border: 1px solid #EDF1F2;
  background-color: #FFFFFF; }
  .table-box-section-cst .table-heading {
    -webkit-align-content: center;
            align-content: center;
    position: relative;
    padding: 0.5em 0.8em;
    height: 3.5em;
    background-color: #FFFFFF;
    color: #002060;
    font-size: 1em;
    letter-spacing: 0.1em; }
    .table-box-section-cst .table-heading.transactions {
      height: auto; }
    .table-box-section-cst .table-heading .btn {
      letter-spacing: 0;
      font-size: 0.2em;
      padding: 0.2em 0.6em; }
    .table-box-section-cst .table-heading .netting-status {
      display: block;
      position: absolute;
      top: 70%;
      font-size: .2em;
      letter-spacing: 0; }
  .table-box-section-cst th, .table-box-section-cst td {
    text-align: center;
    font-size: 0.8em; }
  .table-box-section-cst thead > tr > th {
    padding: 0.5em; }
  .table-box-section-cst tbody > tr > td {
    padding: 0.5em; }
    .table-box-section-cst tbody > tr > td.right-align {
      padding-right: 0.6em; }
  .table-box-section-cst th {
    font-size: 0.5em;
    color: #595959; }
  .table-box-section-cst .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F2F2F2; }

.box-bank-balance {
  background-color: #FFFFFF;
  color: #002060;
  padding: 1em;
  height: 8em; }
  .box-bank-balance .row:not(:first-child) {
    padding-top: .8em; }
  .box-bank-balance .bank-label {
    font-size: 1.3em;
    text-align: left;
    font-weight: 600; }
  .box-bank-balance .balance-label {
    font-size: 1.2em;
    text-align: left;
    margin-top: 0.6em; }
  .box-bank-balance .balance-val {
    font-size: 1.5em;
    top: -.19em;
    font-weight: 600;
    margin-top: 0.6em; }

.alert {
  display: none;
  padding: 20px;
  background-color: #f44336;
  color: white;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 1;
  max-width: 300px;
  border: 2px solid #f7867e; }

.alert.show {
  display: block; }

.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer; }

.completedAlert {
  display: none;
  padding: 20px;
  background-color: #05861f;
  color: white;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 1;
  max-width: 300px;
  border: 2px solid #058c20; }

.completedAlert.show {
  display: block; }

.completedClose {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer; }

.loginBody {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif; }

.login-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  height: 80vh; }

.login-box {
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px; }

h1 {
  text-align: center;
  color: #333333; }

form {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column; }

input {
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px; }

button {
  padding: 10px;
  background-color: #3498db;
  color: #ffffff;
  border: none;
  cursor: pointer; }

button:hover {
  background-color: #2980b9; }

.error-message {
  color: #e74c3c;
  text-align: center;
  margin-top: 10px; }

.box-limit {
  background-color: #FFFFFF;
  padding: 1em; }
  .box-limit button {
    margin-top: 1.75em;
    width: 100%;
    font-size: 1.2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em; }
  .box-limit .tab-section {
    border-bottom: 1px solid #002060;
    padding-bottom: .8em; }
    .box-limit .tab-section .nav-pills li {
      cursor: pointer;
      cursor: hand; }
    .box-limit .tab-section a {
      color: #002060;
      font-size: 1.3em;
      padding: .2em 1.8em !important; }
    .box-limit .tab-section .active a {
      background-color: #002060 !important;
      color: #FFFFFF !important;
      border-radius: .4em; }
  .box-limit .tab-content .row {
    margin-top: .6em; }
    .box-limit .tab-content .row .radio-btn {
      margin-top: .6em; }
  .box-limit .tab-content .tab-pane label {
    font-size: 1.2em; }

.search-box {
  margin-top: 10px;
  margin-bottom: 1px;
  margin-right: 5px;
  margin-left: 10px; }

.limit-tab-content {
  overflow-x: hidden;
  overflow-y: auto;
  /* Enable vertical scrollbar when content exceeds height */
  max-height: 580px;
  /* Set a maximum height to limit the scrollable area */
  /* Optional: Adjust the maximum height based on your design */
  /* max-height: calc(100vh - 100px); */ }

.rejection-modal .modal-header {
  padding: .3em .5em 0.2em 0.5em;
  color: #002060;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.5em; }

.rejection-modal .modal-message {
  font-size: 1.2em;
  margin-bottom: 2em;
  color: #002060; }

.rejection-modal button {
  width: 100%;
  font-size: 1.1em;
  min-width: -webkit-min-content;
  min-width: min-content; }

.box-admin {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color: #FFFFFF;
  padding: 1em; }
  .box-admin button {
    margin-top: 1.75em;
    width: 100%;
    font-size: 1.2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em; }
  .box-admin .tab-section {
    border-bottom: 1px solid #002060;
    padding-bottom: .8em; }
    .box-admin .tab-section .nav-pills li {
      cursor: pointer;
      cursor: hand; }
    .box-admin .tab-section a {
      color: #002060;
      font-size: 1.3em;
      padding: .2em 1.8em !important; }
    .box-admin .tab-section .active a {
      background-color: #002060 !important;
      color: #FFFFFF !important;
      border-radius: .4em; }
  .box-admin .tab-content .row {
    margin-top: .6em; }
    .box-admin .tab-content .row .radio-btn {
      margin-top: .6em; }
  .box-admin .tab-content .tab-pane label {
    font-size: 1.2em; }

.search-box {
  margin-top: 10px;
  margin-bottom: 1px;
  margin-right: 5px;
  margin-left: 10px; }

.admin-tab-content {
  overflow-x: hidden;
  overflow-y: auto;
  /* Enable vertical scrollbar when content exceeds height */
  max-height: 580px;
  /* Set a maximum height to limit the scrollable area */
  /* Optional: Adjust the maximum height based on your design */
  /* max-height: calc(100vh - 100px); */ }

.custom-button-suspend {
  font-size: smaller;
  margin: 1px;
  background-color: #f2f2f2;
  color: orange; }

.custom-button-revoke {
  font-size: smaller;
  margin: 1px;
  background-color: #f2f2f2;
  color: red; }

.custom-button-reactivate {
  font-size: smaller;
  margin: 1px;
  background-color: #f2f2f2;
  color: green; }