html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

h1 {
    font-family: "Zilla Slab", serif;
    font-weight: 700 !important;
}

footer a {
    color: #27b4b1 !important;
}

label {
    font-weight: bold;
}

header {
    background-color: #256434;
    color: white;
    margin-bottom: 0px !important;
}

.container-fluid {
    padding: 0;
}

.content {
    flex: 1;
}

.footer {
    background-color: #256434;
    color: white;
    padding: 1rem 0;
    text-align: center;
    width: 100%;
}

.logo-padding {
    padding-left: 20px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #256434 !important;
    border-color: #256434 !important;
    color:white !important;
}

.btn-primary:hover {
    background-color: #256434bf !important;
    border-color: #256434bf !important;
}

form.login-form, form.pwd-reset-form {
    background: #A9CBB1;
    border: 1px solid #256434 !important;
}

/* Dropdown Button */
.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

/* The search field */
#searchInput {
    box-sizing: border-box;
    background-image: url('/static/img/search.svg');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#searchInput:focus {
    outline: 3px solid #ddd;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}

.d-flex {
    display: flex !important;
    flex-direction: column;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24,
}
.material-symbols-outlined{
    vertical-align: bottom;
}

.preview-balances{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.money-symbols{
    vertical-align: text-top;
    color:#25ad7e;
}
.balance-info{
    display: inline-block;
    float: right;
    width: 100px;
}
.card-icon{
    vertical-align: top;
}

#transferAlert{
    display: none;
}

.show-pwd-toggle{
    cursor: pointer;
}

#dropDownList{
    display: none;
    position: absolute;
    max-height: -webkit-fill-available;
    overflow: auto;
}

#cardList{
    position: relative;
    max-height: 500px;
    overflow: auto;
    }

#filterTable{
    border: 1px solid black;
}

#tblLegend{
    width: 100%;
    background-color: black;
    color:white;
}