* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Lato', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: white;
    overflow-x: hidden;
    color: #343434;
}

.water-background {
    height: calc(50vh + 10px);
    width: calc(100vw + 50px);
    /*background: linear-gradient(180deg, rgba(64, 224, 208, 0.8) 0%, rgba(0, 180, 170, 0.9) 100%);*/
    background: url(../images/swimming-pool.jpg) no-repeat;
    background-size: cover;
    border-bottom-left-radius: 225px;
    border-bottom-right-radius: 225px;
    position: relative;
    margin-left: -25px;
    overflow: hidden;
}

.logo-container {
    width: 180px;
    height: 180px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: calc(50vh - 100px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 4px solid #D9D9D9;
}

.logo img { max-width: 100%; }

.logo-inner {
    background-color: #F39C12;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.logo-text {
    color: white;
    font-size: 28px;
    font-weight: bold;
}

.seahorse {
    position: absolute;
    width: 30px;
    height: 35px;
}

.seahorse-left {
    left: -25px;
    transform: scaleX(-1);
}

.seahorse-right {
    right: -25px;
}

.palm-tree {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 20px;
}

.ribbon {
    position: absolute;
    bottom: -15px;
    width: 70px;
    height: 20px;
    background-color: #F39C12;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 8px;
}

.content {
    flex-grow: 1;
    padding: 80px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welcome-text, .main-message, .latest-member-statement-section .header, .latest-transactions-section .header {
    margin-top: 20px;
    text-align: center;
    color: #333;
}

.main-message { font-size: 21px; font-weight: 600; margin-bottom: 40px; }

.welcome-text h1 {
    font-size: 24px;
    margin-bottom: 5px;
}

.welcome-text h2 {
    font-size: 20px;
    font-weight: 500;
}

.login-button-parent { display: flex; align-items: center; justify-content: space-between; }

.login-button {
    position: relative;
    /*margin-top: 40px;*/
    /*width: 100%;*/
    width: calc(50% - 20px);
    /*max-width: 300px;*/
    background-color: #F39C12;
    color: white;
    padding: 15px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 0;
    cursor: pointer;
}

.login-button .lock-icon {
    display: flex;
    position: absolute;
    left: 10px;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-bottom: -20px;
    margin-top: -20px;
    margin-right: 10px;
}

.btnWelcomeLogin.login-button { width: 100%; max-width: 300px; margin-top: 20px; }

.resend-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 20px);
    color: #006ff8;
    text-align: center;
    padding: 20px 0;
    /*border: 1px solid #006ff8;*/
    border-radius: 30px;
    height: 54px;
}

.btnLogout-parent { padding: 0px 20px; }

.resend-login-button a { text-decoration: none; height: 54px; width: 100%; line-height: 54px; }

.biometric-setting { padding: 10px 20px; margin: 10px 0 0; border-top: 1px solid #9ec5c5; border-bottom: 1px solid #9ec5c5; background: #ceebeb; }

/* Login Form Styles */
.get-login-section, .login-section, .login-section {
    /*display: none;*/
    flex-direction: column;
    min-height: 100vh;
    background-color: white;
    padding: 20px;
}

.btnBack, .btnLogout {
    align-self: flex-start;
    background: none;
    border: none;
    color: #ffffff; /*#F39C12*/
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 30px;
    cursor: pointer;
    background: #4b4b4b;
    padding: 4px 10px;
    border-radius: 18px;
}

.btnLogout-parent .btnLogout {
    position: relative;
    background: #4b4b4b;
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-left: 0;
    margin-top: -11px;
    font-size: 14px;
}

.frmGetLogin {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 40px;
}

.email-input, .membership-card-number-input, .login-code-input {
    margin-bottom: 20px;
}

.email-input label, .membership-card-number-input label, .login-code-input label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.txtLoginEmail, .txtLoginMembershipCardNumber, .txtLoginCode {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.or-input, .loginOr {
    text-align: center;
    margin: 15px 0;
    position: relative;
}

.or-input span, .loginOr span {
    background-color: white;
    padding: 0 10px;
    color: #777;
    position: relative;
    z-index: 1;
}

.or-input:before, .loginOr:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ddd;
    z-index: 0;
}

.get-login-button {
    margin-top: 20px;
}

.btnGetLogin {
    width: 100%;
    background-color: #F39C12;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.biometricDiv {
    margin-top: 10px;
}

.btnBiometricLogin {
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Home Screen Styles */
.home-screen {
    /*display: none;*/
    flex-direction: column;
    min-height: 100vh;
}

.home-water-background {
    height: 25vh;
    background: linear-gradient(180deg, rgba(64, 224, 208, 0.8) 0%, rgba(0, 180, 170, 0.9) 100%);
    position: relative;
    overflow: hidden;
}

.welcome-message {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #333;
    font-size: 24px;
    font-weight: 500;
}

.menu-list {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /*background-color: rgba(0, 180, 170, 0.2);*/
}

.member-statements { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }

.menu-list .menu, .member-statements {
    background: rgb(255,240,215);
    background: linear-gradient(180deg, rgba(255,240,215,1) 0%, rgba(245,250,244,1) 30%, rgba(255,255,255,1) 100%);
    /*background-color: rgba(255, 255, 255, 0.85);*/
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.menu-list .menu a, .member-statement a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
    font-weight: 600;
    color: inherit;
}

.menu-list .menu .submenu-list {
    width: 100%;
    margin-top: 20px;
}

.menu-list .menu .submenu-list .menu, .member-statements .member-statement-row {
    margin-bottom: 10px;
    background: linear-gradient(-90deg, rgba(255,240,215,1) 0%, rgba(245,250,244,1) 30%, rgba(255,255,255,1) 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.member-statements .member-statement-row { width: 100%; list-style-type: none; padding: 16px 20px; border-radius: 20px; }

.menu-item-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.menu-item-icon {
    font-size: 18px;
    color: #777;
}

.plus-icon {
    font-weight: 300;
    font-size: 24px;
}

.hide{
    display: none!important;
}

.blk-gray {
     display: none;
     width: 100vw;
     height: 100vh;
     position: fixed;
     z-index: 3;
     left: 0;
     top: 0;
     background: rgba(0, 0, 0, 0.4);
}



.loadingGifs {
     display: none;
     position: absolute;
     background: #fff;
     width: 10em;
     height: 10em;
     z-index: 5;
     border-radius: 0.5em;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     opacity: 0.8;
}
#floatingBarsG {
     position: relative;
     margin: 2em auto;
     width: 60px;
     height: 75px;
}
.blockG {
     position: absolute;
     background-color: rgb(255, 255, 255);
     width: 10px;
     height: 23px;
     border-radius: 8px 8px 0 0;
     -o-border-radius: 8px 8px 0 0;
     -ms-border-radius: 8px 8px 0 0;
     -webkit-border-radius: 8px 8px 0 0;
     -moz-border-radius: 8px 8px 0 0;
     transform: scale(0.4);
     -o-transform: scale(0.4);
     -ms-transform: scale(0.4);
     -webkit-transform: scale(0.4);
     -moz-transform: scale(0.4);
     animation-name: fadeG;
     -o-animation-name: fadeG;
     -ms-animation-name: fadeG;
     -webkit-animation-name: fadeG;
     -moz-animation-name: fadeG;
     animation-duration: 1.2s;
     -o-animation-duration: 1.2s;
     -ms-animation-duration: 1.2s;
     -webkit-animation-duration: 1.2s;
     -moz-animation-duration: 1.2s;
     animation-iteration-count: infinite;
     -o-animation-iteration-count: infinite;
     -ms-animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
     animation-direction: normal;
     -o-animation-direction: normal;
     -ms-animation-direction: normal;
     -webkit-animation-direction: normal;
     -moz-animation-direction: normal;
}
#rotateG_01 {
     left: 0;
     top: 27px;
     animation-delay: 0.45s;
     -o-animation-delay: 0.45s;
     -ms-animation-delay: 0.45s;
     -webkit-animation-delay: 0.45s;
     -moz-animation-delay: 0.45s;
     transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
}
#rotateG_02 {
     left: 8px;
     top: 10px;
     animation-delay: 0.6s;
     -o-animation-delay: 0.6s;
     -ms-animation-delay: 0.6s;
     -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
     transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
}
#rotateG_03 {
     left: 25px;
     top: 3px;
     animation-delay: 0.75s;
     -o-animation-delay: 0.75s;
     -ms-animation-delay: 0.75s;
     -webkit-animation-delay: 0.75s;
     -moz-animation-delay: 0.75s;
     transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
}
#rotateG_04 {
     right: 8px;
     top: 10px;
     animation-delay: 0.9s;
     -o-animation-delay: 0.9s;
     -ms-animation-delay: 0.9s;
     -webkit-animation-delay: 0.9s;
     -moz-animation-delay: 0.9s;
     transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
}
#rotateG_05 {
     right: 0;
     top: 27px;
     animation-delay: 1.05s;
     -o-animation-delay: 1.05s;
     -ms-animation-delay: 1.05s;
     -webkit-animation-delay: 1.05s;
     -moz-animation-delay: 1.05s;
     transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
}
#rotateG_06 {
     right: 8px;
     bottom: 7px;
     animation-delay: 1.2s;
     -o-animation-delay: 1.2s;
     -ms-animation-delay: 1.2s;
     -webkit-animation-delay: 1.2s;
     -moz-animation-delay: 1.2s;
     transform: rotate(135deg);
     -o-transform: rotate(135deg);
     -ms-transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
}
#rotateG_07 {
     bottom: 0;
     left: 25px;
     animation-delay: 1.35s;
     -o-animation-delay: 1.35s;
     -ms-animation-delay: 1.35s;
     -webkit-animation-delay: 1.35s;
     -moz-animation-delay: 1.35s;
     transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}
#rotateG_08 {
     left: 8px;
     bottom: 7px;
     animation-delay: 1.5s;
     -o-animation-delay: 1.5s;
     -ms-animation-delay: 1.5s;
     -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
     transform: rotate(-135deg);
     -o-transform: rotate(-135deg);
     -ms-transform: rotate(-135deg);
     -webkit-transform: rotate(-135deg);
     -moz-transform: rotate(-135deg);
}
@keyframes fadeG {
     0% {
         background-color: rgb(0, 0, 0);
    }
     100% {
         background-color: rgb(255, 255, 255);
    }
}
@-o-keyframes fadeG {
     0% {
         background-color: rgb(0, 0, 0);
    }
     100% {
         background-color: rgb(255, 255, 255);
    }
}
@-ms-keyframes fadeG {
     0% {
         background-color: rgb(0, 0, 0);
    }
     100% {
         background-color: rgb(255, 255, 255);
    }
}
@-webkit-keyframes fadeG {
     0% {
         background-color: rgb(0, 0, 0);
    }
     100% {
         background-color: rgb(255, 255, 255);
    }
}
@-moz-keyframes fadeG {
     0% {
         background-color: rgb(0, 0, 0);
    }
     100% {
         background-color: rgb(255, 255, 255);
    }
}

/* Toggle Switch css */
.biometric-info {
     display: flex;
     align-items: center; 
}
.switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
     margin-right: 10px;
}
.switch input { 
     opacity: 0;
     width: 0;
     height: 0;
}
.slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
}
.slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
}
input:checked + .slider {
     background-color: #2196F3;
}
input:focus + .slider {
     box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
     border-radius: 34px;
}
.slider.round:before {
     border-radius: 50%;
}
/* Toggle Switch css end */

 .email-popup {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: fixed;
     
     /* width: calc(100% - 40px); */
     width: calc(100% - 40px);
     max-width: 400px;
     /* height: calc(100% - 40px); */
     /* top: 20px; */
     top: 50%;
     transform: translateY(calc(-50% - 20px)) translateX(-50%);
     left: 50%;
     padding: 40px 16px;
     z-index: 100;
     /*border: 1px solid #3adaff;*/
     border-radius: 12px;
     filter: drop-shadow(5px 5px 5px #bbbbbb) drop-shadow(-5px -5px 10px #bbbbbb);
     background: linear-gradient(180deg, rgba(255, 240, 215, 1) 0%, rgba(245, 250, 244, 1) 30%, rgba(255, 255, 255, 1) 100%);
}
.email-page {
     width: 100%;
}
.btnemail {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-width: 280px;
     height: 56px;
     /* background-color: rgb(255 196 107); */
     border: 1px solid #a78f58;
     margin-top: 20px;
     cursor: pointer;
     font-size: 18px;
     text-align: center;
     border-radius: 14px;
     
}
.email-close {
     position: absolute;
     top: 20px;
     right: 20px;
     /*top: -20px;*/
     /*right: -10px;*/
     font-size: 28px;
}
.email-description { }
.main-section, .latest-member-statement-section, .latest-transactions-section { background: url(../images/swimming-pool.jpg) no-repeat; background-size: cover; /*height: 100vh; overflow-y: scroll;*/ width: 100%; min-height: 100vh; }
.latest-member-statement-section { padding: 20px; }
.main-section:before, .latest-member-statement-section:before { display: block; position: fixed; content: ""; background: rgba(255,255,255,0.3); top: 0; left: 0; height: 100%; width: 100%; z-index: 0; }
.latest-member-statement-section:before { margin-top: -20px; margin-left: -20px; width: calc(100% + 20px); height: calc(100% + 20px); }
.main-section .main-message, .main-section .biometric-setting, .main-section .menu-list, .latest-member-statement-section .btnBack, .latest-member-statement-section .header, .latest-member-statement-section .member-statement-list, .latest-transactions-section .btnBack, .latest-transactions-section .header, .latest-transactions-section .transaction-list-section { position: relative; z-index: 2; }
form.frmLogin { padding-top: 60px; margin-top: -20px; }
.parsley-errors-list { margin-top: -15px; }
.parsley-errors-list .parsley-required { font-size: 13px; color: #ff0000; padding-left: 5px; }
.parsley-errors-list .parsley-required::marker { content:"*"; }
.latest-member-statement-section .header { font-weight: 600; margin-bottom: 20px; font-size: 18px; }
.member-statement-list .no-data { background: linear-gradient(180deg, rgba(255,240,215,1) 0%, rgba(245,250,244,1) 30%, rgba(255,255,255,1) 100%); padding: 16px 20px; border-radius: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); font-size: 16px; text-align:
center;}
@media only screen and (min-width: 768px) {
    .biometric-setting {
        max-width: calc(600px - 40px);
        margin: 0 auto;
        border-radius: 20px;
    }
    .main-section .menu-list {
        max-width: 600px;
        margin: 0 auto;
    }
    .frmGetLogin, .frmLogin, .latest-member-statement-section .member-statement-list {
        max-width: 600px;
        margin: 0 auto;
    }
} 

.greenText{
    color:#13c213;
}

.redText{
    color:red;
}

.boldText{
    font-weight: bold;
}

.latest-transactions-section .transaction-listing thead{
    color: #37a7d0;
    font-weight: bold;
    background: #eef5f7;
}

.latest-transactions-section .transaction-listing thead .sorting::after {
  font-family: "Font Awesome 6 Free";
  content: " \f0dc"; /* FA icon for sort */
  font-weight: 900;
}

.latest-transactions-section .transaction-listing thead .sorting_asc::after {
    font-family: "Font Awesome 6 Free";
    content: " \f0de"; /* sort-up icon */
}

.latest-transactions-section .transaction-listing thead .sorting_desc::after {
    font-family: "Font Awesome 6 Free";
    content: " \f0dd"; /* sort-down icon */
}

.latest-transactions-section{
    padding: 20px;
}

.latest-transactions-section .transaction-summary, .latest-transactions-section .transaction-list-section{
    margin-bottom:10px;
}

.latest-transactions-section .header {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 18px;
}

.latest-transactions-section .latest-transactions{
    margin:0 auto;
}

.latest-transactions-section .opening, .latest-transactions-section .debit, .latest-transactions-section .credit, .latest-transactions-section .closing{
    color: white;
    padding: 20px 10px;
    border-right: 2px solid white; /* border between columns */
}

.latest-transactions-section .col-3:last-child {
    border-right: none;
}

.latest-transactions-section .transaction-summary {
    background: radial-gradient(circle at center, #2779cf, #054a94);
    text-align: center;
}


.latest-transactions-section .no-data { 
    background: linear-gradient(180deg, rgba(255,240,215,1) 0%, rgba(245,250,244,1) 30%, rgba(255,255,255,1) 100%); 
    padding: 16px 20px; 
    border-radius: 20px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); 
    font-size: 16px; 
    text-align:center;
    max-width: 600px;
    margin: 0 auto;
}


.latest-transactions-section .transaction-listing{
    width:100%!important;
}

.transaction-listing td, .transaction-listing th {
    vertical-align: top !important;
}

.transaction-listing tbody td {
    background-color: #ffffff !important;
}

.transaction-listing tbody tr[role="row"] td{
  border-top: 1px solid #ccc;
}

.transaction-listing tbody tr[role="row"]:first-child td {
  border-top: none;
}