/* height media css start  */
@media screen and ( max-height:680px) {

  

}
 

/* larg laptop media css start  */
@media screen and ( max-width:1440px) {

  
    
}

/*laptop and larg tablet media css start  */
@media screen and ( max-width:1024px) {
    .up-navbar {display: block;}
    /* up-drawer & up-content css start */
    .up-drawer{ left: -100%; max-width: 300px; }
    .up-content{ margin-left: auto;width: 100%; }
    .up-drawer.show{ left: 0px; }
    .up-drawer.show:after{ display: block; } 
    .up-drawer .drawer-close-btn{ display: block; } 
    .up-drawer .up-drawer-wrapper ul li a{ color: #fff; padding: 12px 20px; } 
    .up-drawer .up-drawer-header{ padding: 5px 20px; } 
    .up-navbar .back-btn{ color: #fff; }

    /* up-navbar css start */
    .nav-bar{ background-color: #19658f;color: #fff;box-shadow: 0 3px 4px rgba(0,0,0,0.3); position: sticky;top:0px;left: 0px; min-height: 60px; align-items: center;z-index: 99;  }
    .search-field {display: none;}
    .up-navbar .drawer-menu-btn i {font-size: 30px;}

    .admin .up-navbar{ top: 30px; }
    .up-navbar .drawer-menu-btn{ display: inline-block; }
    .up-navbar.go-back .drawer-menu-btn,.up-navbar.go-back .title{display: none;}
    .up-navbar.go-back .transaction,.up-navbar.go-back .transaction img{color: #fff;fill: #fff; padding: 0;}
    .up-navbar.go-back .back-btn{padding: 12px 20px; font-size: 27px;}
    .up-navbar .title{ color: #fff; font-size: 23px; margin: 0px 0px 0px 10px;padding-left: 0px;}
    .up-navbar .title-span{ display: flex; flex-direction: row; align-items: center;}
    .up-navbar.search-nav .title-span {margin-bottom: 0px; }


}

/* tablet media css start  */
@media screen and ( max-width:790px) {
    /* common */
    .container {max-width: 100% !important;}
    .column-wrapper{flex-direction: column}
    .column-wrapper.input-wrapper{padding: 0}
    .column-wrapper.input-wrapper .col-md-6.col-12{padding-bottom: 32px}
    .col-12{width: 100% !important;}

    /* login */
    .login-image{display: none !important}
    .login-page .login-block{max-width: 100%;}
    .login-page .login-form-wrapper{height: 100vh;align-items: center;}

    /* register page */
    .register-image{display: none !important}
    .register-page .register-form-wrapper{height: 100vh; align-items: center;justify-content: normal;margin-top: 20px;}
    .register-page .register-block{max-width: 100%;width: auto}


    /* update profile */
    .update-profile-page .side-menu{margin-bottom: 50px}
    .update-profile-page .side-menu li{max-width: 100%;}
    .update-profile-page .side-menu ol{padding: 0}
    
    /* enroll family */
    .enroll-family-page .existing-member{overflow: auto}

    /* transection balance */
    .transection-page .parent-table .tableHeaderBar th{white-space: nowrap}
    .transection-page .parent-table .name, .transection-page .parent-table .balance{white-space: nowrap}

    /* service request */
    .service-request-page .family-information{overflow: auto;}
    .service-request-page .lum-sum-withdraw, .service-request-page .lum-sum-deposit{flex-direction: column}
    .service-request-page .account-info .custom-fields{max-width: 100%;width: 100%}
    .service-request-page .family-table td{white-space: nowrap}

    .verify-page .login a{width: 100%;}
    .verify-page .login{transform: translate(-50%, -50%);}
    .verify-wrapper{transform: translate(-50%, -50%);top: 200px}

    
}

@media screen and ( max-width:768px) {
}

/* larg mobile media css start  */
@media screen and ( max-width:480px) {
    /* up-drawer & up-content css start */
    .up-drawer{ max-width: 100%; }
    .nav-bar .header-container{margin-left: 30px;margin-right: 30px;}

    /* bank information */
    .bank-information-page .account-type{gap: unset;flex-direction:column }

    /* service request */
    .service-request-page .user-name,
    .service-request-page .anjuman,
    .service-request-page .phone-no {display: flex;flex-direction:column;gap: 7px }

    /* enroll family */
    .enroll-family-page .page-head{flex-direction: column;align-items: center;flex-wrap: wrap;}
    .enroll-family-page .page-head .title h3{white-space: nowrap}
   

}
/* mobile media css start  */
@media screen and ( max-width:380px) {
    .verify-wrapper span{text-align: center}

    /* up-drawer & up-content css start */
    .up-drawer{ max-width: 100%; }

    /* bank information */
    .bank-information-page .account-type .account-type-wrapper{width: 100%;flex-wrap: wrap}
     
}