body{
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif!important;
}
.login-top-bar{
  padding:1rem 5rem;
  background-color:#003366;
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  height:12vh;
}
.login-bottom-bar{
  background-color:#003366;
  width:100%;
  height:8vh;
}
.log-in-area{
  position:relative;
  background-image: url('../images/login-background-img.png');
  height:80vh;
  background-size: cover;
  background-repeat:no-repeat;
  z-index: 1000;
}
.login-area-overlay{
  position: absolute;
  height:inherit;
  top:0;
  width:100%;
  background:linear-gradient(180deg, rgba(0, 21, 72, 0.8) 0%, rgba(0, 51, 102, 0.8) 100%);
}
.yellow-horizontal-line{
  width:40px;
  height:4px;
  border: 1px solid #DDAD31;
  border-radius:5px;
  background-color: #DDAD31;
}
.top-border-radius{
border-radius:5px 5px 0px 0px;
}

.bottom-border-radius{
border-radius:0px 0px 5px 5px;
}

.top-nav{
  height:70px;  
}
.navbar{
  height:inherit;
}
.navbar-custom{
background-color:#ffffff!important;
position: fixed;
height:80px;
width:100%;
z-index: 10;
}
.page-wrapper{
background-color:#f5f5f5;
}
.side-nav{
width:230px;
background-color: #022E64;
position: fixed;
height:100%;
top:80px;
}
.side-nav .nav-item{
padding:0.3rem 1rem!important;
}
.side-nav-item .nav-item a{
color:#fff;
font-size:14px;
font-weight: normal;
}
.side-nav-item .nav-item:hover, .side-nav-item .nav-item.active{
background-color: #fff;
}
.side-nav-item .nav-item:hover a, .side-nav-item .nav-item.active a{
color:#022E64!important;
font-weight:bold;
}
.menu-button{
display:none;
border:none;
background-color:transparent
}
@media (max-width:991px){
.side-nav{
  position: relative;
  width:100%;
  display:none;
  top:unset!important;
}
.main-content{
  padding-left:0!important;
}
.menu-button{
  display: flex!important;
  justify-content: flex-end;
  width:100%;
  margin-bottom:10px;
}
.pt-90{
  padding-top:90px;
}
.main-content{
  padding-top:30px!important;
}
}
.hr-menu{
background-color: rgba(248, 251, 253, 0.4);
height:1px;
}
.main-content{
min-height:100vh;
padding-top:80px;
padding-left:230px;
}
.main-content-padding{
padding-left:1rem;
padding-right:1rem;
padding-top:0.5rem;
padding-bottom:1rem;
}
.ml-95{
margin-left:95px!important;
}
.dropdown a{
text-decoration: none!important;
}
.user-profile, .change-susidiary{
margin-right:20px!important;
}
/* New Css file starts here (Will edit later) */
 

/* New Css file ends here (Will edit later) */




.login-form{
  background-color: #ffffff;
  width:100%;
  padding:2rem;
  border-radius:5px;
}
.log-in-fields{
  height:55px;
  border: 2px solid rgba(0, 51, 102, 0.2);
  width:100%;
  padding-left:50px;
  padding-right:10px;
}
.log-in-fields::placeholder{
  font-size: 0.875rem;
  color:rgba(0, 0, 0, 0.54);
}
.login-form-icons{
  left:5%;
  top:27%;
}
.icon-color{
color:rgba(0, 0, 0, 0.54);
}

/* Customized margins */
.mt-70{
  margin-top:70px;
}
.mt-120{
margin-top:120px;
}

/* fonts */

/* font sizes */
.font-10px{
  font-size:0.625rem!important;
}
.font-12px{
  font-size:0.75rem!important;
}
.font-14px{
  font-size:0.875rem!important;
}
.font-16px{
  font-size:1rem!important;
}
.font-18px{
  font-size:1.125rem!important;
}
.font-20px{
  font-size:1.25rem!important;
}
.font-24px{
  font-size:1.5rem!important;
}
.font-28px{
  font-size:1.75rem!important;
}

/*font weights */
.f-weight300{
  font-weight:300;
}
.f-weight400{
  font-weight:400;
}
.f-weight500{
  font-weight:500;
}
.f-weight700{
  font-weight: 700;
}

/* Font colors */
.font-blue{
  color:#022E64;
}
.font-lightBlue{
  color:#2196F3;

}
.font-blueGrey{
color:#657889;
}
.font-dark{
  color:#000000!important;
}
.font-orange{
  color:#DDAD31;
}
.font-grey{
  color:rgba(0, 0, 0, 0.54);;
}
.font-green{
  color:#3FC59D;
}
.font-red{
  color:#FF9695;

}
.font-lightBlack{
color:#53595F
;
}


/* Buttons */
.get-started-btn{
  height:50px;
  border:1px solid #DDAD31;
  border-radius:15px;
  color:#ffffff;
  font-size:0.875rem;
  font-weight: 500;
}
.btn-login{
  width:100%;
  height:55px;
  background-color: #003366;
  border-radius:5px;
  color:#ffffff;
}
.btn-login:hover{
  color:#ffffff;
}
.btn{
  display: flex!important;
  align-items:center!important;
  justify-content:center;
}
.btn-submit{
background-color: #022E64;
color:#ffffff!important;
width:100%;
border-radius:15px;
height:45px;
}
.btn-add-beneficiary{
background-color: #ffffff;
color:#022E64;
border:2px solid #022E64;
width:100%;
border-radius:15px;
height:35px;
font-size:12px;
font-weight:500;
}

/* Backgrounds */
.bg-white{
  background-color:#ffffff;
}
.bg-light-blue{
background-color: #F8FBFD;
}

/* DIVs */
.accounts-overview-div{
  background-color: #ffffff;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
}
.transaction-trend-div{
  background-color: #ffffff;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
}
.workplace-summary, .exchange-rate{
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
}
.workplace-summary-divs{
  background: #fff;
  border:1px solid #E5E5E5;
  padding:10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius:5px;
}
.exchange-rate-div{
  background: #fff;
  border:1px solid #E5E5E5;
  padding:3px;
  display: flex;
  align-items:center;
  border-radius: 5px;
}
.transaction-history-div{
  background: #fff;
  border-radius:0px 0px 5px 5px;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
}
.div-initiate-bulk{
height:100px;
}

/* Forms */

.input-field{
border-radius:0px!important;
border:2px solid rgba(0, 51, 102, 0.2)!important;
font-size:12px!important;
font-weight:500;
height:35px;
padding-left:15px;
padding-right:15px;
background-color: transparent;
z-index: 99;
}
button.input-field{
width:100%!important;
}
.radio-labels-text{
color:rgba(0, 0, 0, 0.54);
font-size:14px;
font-weight: normal;
}
.w-33{
width:33%!important;
}
.w-67{
width:67%;
}
.thick-hr{
height:2px;
background-color: #C4C4C4;
}
.d-none{
display: none;
}

.bg-white{
background-color: #ffffff;
}
/* Tables */

.table-search-field{
  height:30px;
  width:100%;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
  -webkit-box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
  -moz-box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
  border-radius: 2px;
  padding-left: 23px;
  padding-right:10px;
  font-size:12px;
}
.table-search-field::placeholder{
  font-size:12px;
  font-weight:300;
  color:#000000;
}
a.font-dark{
  text-decoration: underline!important;
}
.table-transaction-history>thead>tr{
background-color: #022E64!important;
}
.table-transaction-history>thead>tr>td{
  font-size:0.75rem;
  font-weight:500;
  color: #fff;
  background-color: #022E64;
}
.table-transaction-history>tbody>tr{
background-color: #fff;
border-top:1px solid #ccc!important;
}
.table-transaction-history>tbody>tr>td{
  font-size:0.75rem;
  font-weight:normal;
  color: rgba(0, 0, 0, 0.75);
}
.table-transaction-history>tbody>tr>td{
  background: #ffffff!important;
}
.table-div{
border-radius: 5px;
box-shadow:0px 0px 10px rgba(0, 40, 85, 0.1);
}
.date-select-field{
  height:30px;
  width:100%;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
  -webkit-box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
  -moz-box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
  border-radius: 2px;
  padding-left: 10px;
  padding-right:10px;
  font-size:12px;
}
.beneficiary-select-field{
height:30px;
width:100%;
background: transparent;
border: 1px solid #E5E5E5;
box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
-webkit-box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.41);
border-radius: 2px;
font-size:12px;
}
.search-icon-position{
  left:5%;
  top:5%;
}

.account-card{
  border:1px solid #F8FBFD;
  border-left:7px solid #657889;
  box-shadow:  0px 0px 20px rgba(0, 40, 85, 0.1);
  border-radius:5px;
  width:100%;
  background: #fff;
}
.account-card.active{
border-left: 7px solid #DDAD31;
box-shadow:-2px 2px 10px rgba(0, 0, 0, 0.25);
border-radius:5px;
width:100%;
background: #022E64;
}
.account-card-btn{
  color:#003366;
  border-radius:5px;
  border:1px solid #003366;
  font-size:10px;
  height:20px;
  width:100%;
}
.account-card.active .account-card-btn{
  color:#fff;
  border-radius:5px;
  border:1px solid #fff;
  font-size:10px;
  height:20px;
  width:100%;
}
.account-card.active .acct-name, .account-card.active .acct-numb{
color:#fff;
}
.account-card-wrapper a{
text-decoration: none!important;
}

.account-card-mgt{
border:1px solid #F8FBFD;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
border-radius:5px;
width:100%;
background: #fff;
color: #657889;
}
.account-card-mgt.active{
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
border-radius:5px;
width:100%;
background: #022E64;
color: #fff;
}
.img-custom-size{
width:24px;
height:24px;
}
.img-custom-size2{
width:15px;
height:15px;
}
.d-grid{
  display: grid;
}
.grid-row{
  grid-auto-flow: column;
  grid-column-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
.card-btn-grid{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 2fr;
  grid-column-gap:5px;
}
td{
  white-space: nowrap;
}

/* NAV Pills */
.nav-pills .nav-link{
color: rgba(0, 0, 0, 0.54)!important;
font-weight:500!important;
height:30px;
display: flex;
align-items: center;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff!important;
background-color: #022E64!important;

}
.min-height130{
min-height: 130px;
}
.tooltip-icon-size{
height:10px;
width:10px;
cursor: pointer;
}
.change-dropdown-bg.show{
background-color: transparent!important;
position: relative!important;
transform:unset!important;
will-change: unset!important;
margin-top:5px!important;
border:none!important;
}
.side-nav .nav-item .change-dropdown-bg .dropdown-item{
color:#fff!important;
font-size: 14px!important;
font-weight: normal;
}

.green-credit{
height:10px;
width:10px;
background-color:#3FC59D;
border-radius: 50%;
}
.red-debit{
height:10px;
width:10px;
background-color:#D60200;
border-radius: 50%;
}

/* multiple select button */

.menu-btn {
border: 0.5px solid lightgrey;
font-size: 0.9em;
padding: 2px 10px;
background-color: white;
width:100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #F2F2F2;
height:35px;
}

.menu {
padding-top: 10px;
z-index: 200;
margin-top: 4px;
background-color: white;
position: absolute;
width: 100%;
}

.menu-option {
padding: 6px 20px 6px;
}

#overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
}
.text-grey{
color:#4F4F4F;
}

.total-accounts, .other-currency-account, .naira-account{
border-radius:5px;
border:1px solid rgba(74, 144, 226, 0.3);
padding:10px;
}
.yellow-underline{
height: 1px;
background-color: #EAAA00;
}

/* custom radio button */

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
  position: relative;
  padding-left: 19px;
  cursor: pointer;
  display: flex;
  color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #E0E0E0;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
  content: '';
  width: 12px;
  height: 12px;
  background: #EAAA00;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
[type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Customized select */

.form-select-custom{
width: 100%!important;
border: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}


@media (max-width:1003px){
  .log-in-area{
      min-height: 900px;;
  }
  .login-bottm-bar{
      height:40px;
  }
  .login-area-overlay{
      height:100%;
  }
  .grid-row{
      grid-auto-flow: row!important;
      grid-row-gap:10px!important;
      grid-template-rows:1fr 1fr 1fr!important;
      grid-template-columns:unset!important;
  }
}
@media (max-width:1240px){
  .card-btn-grid{
      grid-auto-flow:row;
      grid-row-gap:10px;
      grid-template-rows:1fr 1fr;
      grid-template-columns:unset!important;
  }
}
@media (max-width:991px){
  .header-mobile{
      position: relative!important;
  }
  .header-mobile-inner{
      justify-content: flex-end!important;
  }
}