*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu',sans-serif;
}

:root{
    --blue: #100764;
    --yellow: #ffda09;
    --white: #ffffff;
    --grey: #f5f5f5;
    --black: #222;
    --black-dard: #575555;
    --nav-bg: #e2dcdc;
    --main-bg:#f9f9f9;
    --black2: #000000;
    --ligt-black: #999;
    --login:#0a9605;
    --transaction:#89fd85;
    --nav-hover: #2426c0;
    --nav-border: #2a2dc5;
    --logout:#ec260c;
    --box-shadow:0 7px 25px #00000014;
    --border:.2rem solid #ccc;
    --topbar-border: 0 7px 25px #16161657;
}
body{
    min-height: 100vh;
    overflow-x: hidden;
}
::-webkit-scrollbar{
    width: 5px;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent, var(--yellow), transparent);
}


a{
    text-decoration: none;
}

.btn_action{
    padding: 7px 15px;
    background: var(--nav-border);
    color: var(--white);
    border-radius: 40px;
    margin-top: 20px;
    margin-left: 1%;
}

.btn_accounts{
    padding: 7px 15px;
    background: var(--nav-border);
    color: var(--white);
    border-radius: 40px;
    margin-top: 20px;
    margin-left: 1%;
}

.btn_register{
    padding: 7px 15px;
    background: var(--nav-border);
    color: var(--white);
    border-radius: 40px;
    position: absolute;
    right: 20px;
    top: 18%;
}

.container{
    position: relative;
    width: 100%;
}
.navigation{
    position: fixed;
    width: 300px;
    height: 100%;
    background: var(--blue);
    border-left: 10px solid var(--blue);
    transition: .5s;
    overflow: hidden;
    scroll-behavior: smooth;
}
.navigation.active{
    
    width: 78px;
}
.navigation .church_name_box{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;  
    height: 75px;
    padding-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

}
.navigation .church_name_box .admin_church_logo {
    position: relative;
    width: 20%;
    height: 100%;
}
.navigation .church_name_box .admin_church_logo img{
    position: relative;
     width: 100%;
     height: 100%;
}
.navigation .church_name_box .church_name{
    width: 80%;
    height: 100%;
}
.navigation .church_name_box .church_name h3{
    font-size: 18px;
    color: var(--white);
    text-align: center;
    letter-spacing: 1.1px;
    padding-left: 5px;
    padding-right: 10px;
}
.navigation .church_name_box .church_name h3 span{
    font-size: 20px;
    color: var(--yellow);
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.navigation ul{
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 100%; 
    overflow-y: scroll;
}
.navigation ul li{
    position: relative;
    top: 45px;
    list-style: none;   
    width: 100%; 
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
}
.navigation ul li:hover,
.navigation ul li.hovered
{
    background: var(--white); 
}

.navigation ul li a{
    position: relative; 
    width: 100%; 
    display: block;
    text-decoration: none;
    color: var(--white);
    display: flex;
    transition: .1s;

}
.navigation ul li a:hover .icon{
    scale: 1.5;
    transition: .1s;
}
.navigation ul li:hover a,
.navigation ul li.hovered a{
    color: var(--blue); 
}
.navigation ul li .icon{
    position: relative;
    display: block;
    min-width: 60px; 
    height: 60px; 
    line-height: 70px;
    text-align: center;
}
.navigation ul li .icon ion-icon{
    font-size: 23px;
    transition: .3s;
}

.navigation ul li .title{
    position: relative;
    display: block; 
    padding: 0 10px;
    line-height: 60px;
    text-align: start;
    white-space: nowrap;
}

.navigation ul li:hover a::before,
.navigation ul li.hovered a::before{
    content: '';
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 60%;
    box-shadow: 35px 35px 0 10px var(--white);
    pointer-events: none;

}

.navigation ul li:hover a::after,
.navigation ul li.hovered a::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 60%;
    box-shadow: 35px -35px 0 10px var(--white);
    pointer-events: none;
    
}

/* main content styling */
.main{
    position: relative;
    width: calc(100% - 300px);
    left: 300px;
    min-height: 100vh;
    background: var(--white);
    transition: .5s;

    
}
.main_notice_board{
    position: relative;
    width:100%;
    top: 30px;
    min-height: 100vh;
    background: var(--white);
}

.records_main{
    margin-top: 60px;
    padding: 0 15px;
    width: 100%;
    min-height: 100vh;
    background: var(--white);
}



.main.active{
    width: calc(100% - 80px);
    left: 80px;
}

.topbar{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-shadow: var(--topbar-border);
    /* position: fixed;
    z-index: 1000; */
}

/* Menu button */
.toggle{
    position: relative;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    cursor: pointer;
    border-right: 3px solid var(--blue);
}

/* admin menus box */
.admin_menus{
    position: relative;
    width: 87%;
    height: 60px;
    margin: 0 10px;
    display: flex;
    align-items: left;
    justify-content: space-around;

    /* border: 2px solid red; */
}
.admin_menus a{
    font-size: 18px;
    padding: 15px 3px;
    color: var(--black);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s; 
}

.admin_menus a:hover{
    border-right: 3px solid var(--blue);
    color: var(--blue);
    transition: .3s; 
}

.admin_menus a ion-icon{
    font-size: 22px;
    margin-right: 4px;
}


/* Menu drop */
.menu_bar{
    position: relative;
    width: 40px;
    height: 50px;
    margin-right: 5px;
    cursor: pointer;
    transition: .3s; 
}
    
.menu_bar:hover{
    scale: 2;
    transition: .3s;
    color: var(--blue);
    transform: rotate(360deg);

}

#menu_drop{
    display: none;
}
    

/* Profile picture styling */
.user{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;

}

.user img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 
.profile{
    position: absolute;
    top:60px; 
    right:-300px;
    box-shadow: var(--box-shadow);
    border: none;
    border-left:var(--border);
    /* border-radius: 10px; */
    padding:10px;
    text-align: justify;
    background-color: var(--black2);
    width: 300px;
    height: 100vh;
    animation: fadeIn .4s linear;
    opacity: .9;
    transition: .6s;
    z-index: 1000;
    display: block;
 }
 
 .profile.active_profile{
    display: inline-block;
    right:0px;
    transition: .6s; 
 }
 
 .topbar .profile img{
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 35%;
    padding: 5px;
    border-bottom: 2px solid var(--logout);
    border-left: 2px solid var(--nav-hover);
    border-right: 2px solid var(--nav-hover);
 }

 .btn_drop_img_form{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 10px;
    right: 30%;
    background: linear-gradient(to bottom, transparent, var(--black));
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 1000;
    transition: .5s;
}

.btn_drop_img_form ion-icon{
    padding: 10px 28px;
    width: 100%;
    border-top: 1px solid var(--black);
    margin-bottom: -54px;
    opacity: 1;
}
 
 .topbar .profile p{
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 15px;
    color:var(--grey);
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 1;
 } 

 .topbar .profile ion-icon{
    font-size: 25px;
    color:var(--nav-bg);
    margin-right: 6px;
 } 

 .profile .btn{
    width: 100%;
    border-radius: 5px;
    padding: 10px 0;
    display: block;
    text-align: center;
    cursor: pointer;
    transition: .5s;
    margin-top: 10px;
    background: transparent;
}

.profile .profile_btn{
    display: flex;
    align-items: center;
    justify-content: left;

}

.profile .profile_btn ion-icon{
    font-size: 30px;
    transition: .4s;
    color: var(--grey);
}

.profile .profile_btn:hover ion-icon{
    scale: 1.5;
    transition: .4s;
    margin-right: 5px;
    color: var(--white);
}

hr{
    width: 100%;
    background: var(--black);
    height: 1px;
    margin: 15px 0;
}

.btn h3{    
    font-size: 15px;
    color: var(--grey);
    opacity: 0;
    transition: .5s;
}
.btn:hover h3
{
    color: var(--ligt-black);
    transition: .5s;
    opacity: 1;
}

.profile_pic_change{
    display: none;
    width: 100%;
    border-bottom: 1px solid var(--black);
}
.profile_pic_change.active{
    display: inline-block;
}

.profile_pic_change .form_img input{
    height: 40px;
    background: transparent;
}
.profile_pic_change .form_img .btn_set{
    height: 30px;
    width: 30px;
    color: var(--nav-bg);
    transition:.5s;
}
.profile_pic_change .form_img .btn_set:hover{
    /* border: 1px solid var(--black); */
    background: var(--black);
    border-radius: 5px;
    color: var(--white);
    transition:.5s;
}

 /* Profile Styling ends */

/* cardBox starts */
    .cardBox{
        position: relative;
        width: 100%;
        padding: 25px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 30px;
    }

    .cardBox .card{
        position: relative;
        background: var(--white);
        padding: 30px;
        border-radius: 20px;
        border-left: 5px solid var(--blue);
        border-top: 0.5px solid var(--blue);
        border-bottom: 0.5px solid var(--blue);
        display: flex;
        justify-content: space-between;
        box-shadow: var(--border);
        cursor: pointer;
    }

    .cardBox .card:hover{
        background: var(--blue);
        border-left: 5px solid var(--ligt-black);
        border-top: 0.5px solid var(--ligt-black);
        border-bottom: 0.5px solid var(--ligt-black);
    }
    .cardBox .card:hover .numbers,
    .cardBox .card:hover .iconBox
    {
        color: var(--white);
    }

    .cardBox .card .numbers{
        position: relative;
        font-weight: 500;
        font-size: 35px;
        color: var(--blue);
    }

    .cardBox .card .cardName{
        font-weight: 400;
        font-size: 20px;
        color: var(--ligt-black);
        margin-top: 5px;

    }

    .cardBox .card .cardName a{
        color: var(--ligt-black);
        text-decoration: none;

    }
    .cardBox .card .iconBox{
        font-size: 40px;
        color: var(--ligt-black);
    }
    .cardBox .card .iconBox a{
        color: var(--ligt-black);
        text-decoration: none;
    }

/* cardBox Ends */

/* Details section */
.details{
    position: relative;
    width: 100%;
    padding: 20px;
    display: block;
    margin-top: 10px;
}

.details .recentmembers{
    position: relative;
    display: grid;
    min-height: 100%;
    background: var(--white);
    box-shadow: var(--topbar-border);
    border-radius: 10px;
}

.details .recentmembers .cardHeader{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 25px;
    margin-bottom: 20px;
   
}

.cardHeader h2{
    font-weight: 600;
    color: var(--blue);
}

.btn-view{
    position: relative;
    padding: 5px 10px;
    background: var(--blue);
    color: var(--white);
    text-decoration: none;

    border-radius: 30px;
}




/* Code for Table */

.details table{
    width: 100%;
    padding: 5px;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    overflow-x: auto;

}

.details table thead{
    height: 50px;
    background: var(--blue);
    }

.details table thead th{
    padding: 15px 25px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    }

.details .recentmembers table tbody td{
        padding: 5px 25px;
        color: var(--black);
        text-align: justify;
        }

.details .recentmembers table tbody tr td:nth-child(3){
    text-align: center;
}

tr:nth-child(even){
    background-color: #8b94f1;
}

/* Going Live Styles starts */
.golive{
    width: 100%;
    height: 200px;
    /* border: 2px solid red; */
    box-shadow: var(--box-shadow);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

#liveTittle{
    font-size: 15px;
    color: var(--login);
    margin-left: 7px;
    margin-bottom: 10px;
}
.live_box{
    width: 60%;
    height: 100%;
    margin-left: 7px;
    /* background: linear-gradient(to right, var(--logout), #fff); */
}
.live_box form{
    display: flex;
    flex-direction: column;
}

.live_box form input{
    height: 35px;
    margin: 15px 0;
    padding: 7px;
    font-size: 16px;
    outline: none;
}

.live_box form #select{
   height: 35px;
   width: 100px;
   font-size: 15px;
   background: none;
   border-radius: 5px;
   border-right: none;
}

.live_box form .btn{
    font-size: 16px;
    height: 35px;
    width: 70px;
    padding: 2px 7px;
    background: var(--nav-border);
    color: var(--white);
}



/* Going Live Styles starts */

/* main content styling ends*/



/* Form styling */
section{
    padding:3rem 15px;
 }

.reg-form{
    /* position: relative; */
    padding:5px;
    background: var(--white);
    box-shadow: var(--topbar-border);
 }
 
  .reg-form .flex{
    display: flex;
    flex-wrap: wrap;
    gap:2rem;
 }
 
 .reg-form .flex .inputBox{
    flex:1 1 31rem;
 }
 
 .reg-form .flex .inputBox input,
 .reg-form .flex .inputBox select
 {
    width: 100%;
    padding:10px 10px;
    font-size: 16px;
    color:var(--black);
    text-transform: none;
    margin-top: 10px;
    /* border: 0.5px solid var(--ligt-black); */
    background: transparent;
    
 }
 
 .inputBox input:focus,
 .inputBox select:focus{
    background: var(--white);
    color:var(--black);
 }
 
 .reg-form .flex .inputBox input:focus::placeholder{
    color:var(--blue);
 }
 
 .Form_container .reg-form .flex .inputBox span{
    font-size: 15px;
    color:var(--blue);
 }
 
 .Form_container .reg-form .btn{
    margin-top: 2rem;
 }

 .heading{
    background-size: cover !important;
    background-position: center !important;
    padding-top: 6rem;
    padding-bottom:10rem;
    margin-top: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 .heading h3{
    font-size: 2.5rem;
    text-transform: uppercase;
    color:var(--white);
    text-shadow: var(--topbar-border);
 }

/* All dashboard forms controls start */


/* Table Delete button start */

table tbody td .btn-danger{
    height: 34px;
    width: 40px;
    background: transparent;
    border: none;
    }

table tbody td .btn-danger ion-icon{
    font-size: 25px;
    text-decoration: none;
    color: var(--logout);
    }

/* Table Delete button end */


/* Token */
    .main .Add_setup{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);
        z-index: 1000;
    }
    .main .Add_setup.active{
        display: block;
        transition: .6s;
    }
    

/* Token */
    .main .Add_token{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);
        z-index: 1000;
    }
    .main .Add_token.active{
        display: block;
        transition: .6s;
    }
    

    /* Notification */
    .Add_notification{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_notification.active{
        display: block;
        transition: .6s;
    }


    /* Payment */
    .Add_payment{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_payment.active{
        display: block;
        transition: .6s;
    }

    /* Announcement */
    .Add_announcement{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_announcement.active{
        display: block;
        transition: .6s;
    }

    /* Banner */
    .Add_banner{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_banner.active{
        display: block;
        transition: .6s;
    }

    /* sermon */
    .Add_sermon{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_sermon.active{
        display: block;
        transition: .6s;
    }

    /* event */
    .Add_event{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_event.active{
        display: block;
        transition: .6s;
    }

    /* motivation */
    .Add_motivation{
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        padding-bottom: 20px;

        width: 100%;
        height: 100%;
        transition: .6s;
        background: var(--white);

        z-index: 1000;
    }
    .Add_motivation.active{
        display: block;
        transition: .6s;
    }

/* All dashboard forms controls end */


/* Admin Tools form operation start */

/* Token Form starts */
.Admin_token_Forms{
    width: 97%;
    background: var(--grey);
    padding-bottom: 20px;
    position: relative;
    
    z-index: 1000;
}
.tokenFrm{
    height: auto;
    width: 280px;
    background: var(--ligt-black);
    position: relative;
    left: 10px;
    top: 8px;


    box-shadow: var(--topbar-border);
}
.tokenFrm h3{
    font-size: 17px;
    color: var(--blue);
    padding: 10px;
}

.tokenFrm form{
    height: 100%;
    width: 100%; 
    display: block;   
}
.tokenFrm form input{
    padding: 15px;
    font-size: 17px;
    width: 100%; 
    outline: none;   
}

/* Admin Table View */
.table_view{
    position: relative;
    width: 100%;
    padding: 20px;
    margin-top: 10px;
    
    box-shadow: var(--topbar-border);
}

.table_view .recentmembers .cardHeader{
    display: flex;
    justify-content: center;
    padding: 10px 25px;
    margin-bottom: 20px;

    background: var(--white);
    box-shadow: var(--topbar-border);
    border-radius: 10px;
}

.recentmembers h2{
    font-weight: 600;
    color: var(--blue);
}

.btn-view{
    position: relative;
    padding: 5px 10px;
    background: var(--blue);
    color: var(--white);
    text-decoration: none;

    border-radius: 10px;
}

/* Code for Table content*/

.table_view table{
    width: 100%;
    padding: 15px;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    box-shadow: var(--topbar-border);
    overflow: scroll;
}

.table_view table thead{
    height: 50px;
    background: var(--blue);
    }

.table_view table thead th{
    padding: 15px 20px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    }

.table_view .recentmembers table tbody td{
        padding: 10px 25px;
        color: var(--black);
        text-align: center;
        }

.table_view .recentmembers table tbody tr td:nth-child(3){
    text-align: center;
}

tr:nth-child(even){
    background-color: #8b94f1;
}
/* Token Form ends */

/* Notification start */
.Admin_notice_Forms{
    width: 97%;
    background: var(--grey);
    /* background-color: rgba(0,0,0, 0.9); */
    padding-bottom: 20px;
    position: relative;
    
    z-index: 1000;
}

.noticeFrm{
    height: auto;
    width: 90%;
    background: var(--ligt-black);
    position: relative;
    left: 10px;
    top: 8px;

    box-shadow: var(--topbar-border);
}

.noticeFrm h3{
    font-size: 17px;
    color: var(--blue);
    padding: 10px;
}

.noticeFrm form{
    height: 100%;
    width: 100%; 
    display: block;   
}
.noticeFrm form input,
.noticeFrm form select{
    padding: 15px;
    font-size: 17px;
    margin-top: 10px;
    width: 100%;    
}
.noticeFrm form textarea{
    padding: 15px;
    margin-top: 10px;
    font-size: 17px;
    width: 100%;  
    height: 100px;
    resize: vertical;
    outline: none;  
}

.noticeFrm form span{
    color: var(--blue);
    margin-top: 5px;
}
/* Notification ends */


/* Setup form starts */
.setupFrm .form_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.setupFrm form input,
.setupFrm form select{
    width: 45%;    
    /* background: var(--white); */
}
.setupFrm form .setup_btn{
    width: 100%;    
}


/* Setup form ends */


/* Payment auditing/records start */

/* Switching displays */

    .approval_container{
        height: 100%;

        margin-bottom: 20px;
        box-shadow: var(--box-shadow);

        /* border: 2px solid red; */
    }

    form{
        /* width: 90%; */
        /* margin-left: 15px; */

        /* border: 1px solid red; */
      }
    
      form .txt_search{
        margin-left: 2px;
      }
      
    
      form .txt_search ion-icon{
        font-size: 23px;
        padding: 10px 0;
        position: relative;
        top: 16px;
        left: 35px;
        color: #ccc;
        /* border-right: 2px solid #ccc; */
      }
      
    
      .txt_search .search_box {
        height: 40px;
        position: static;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding-left: 43px;
    
        width: 43px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
      }
    /* When the input field gets focus, change its width to 100% */
    .txt_search .search_box:focus {
            width: 94%;
            font-size: 18px;
            padding-left: 35px;
            color: var(--black);
            outline: none;
         }
    
        .search_btn {
        display: none;
      }
    
      .approval .title{
        width: 100%;
        margin-top: 15px;
        padding: 7px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 27px;
        color: var(--black);

        background: var(--white);
      }
    
      .annoucement_box{
        position: relative;
        top: 100px;
      }
    
      .annoucement_box .title{
        width: 100%;
        margin-top: 15px;
        padding: 7px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 27px;
        color: var(--black);

        background: var(--white);
      }

      .notice_box{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(600px,1fr));
        grid-column-gap: 16px;
        grid-row-gap: 30px;
        margin: 15px 0;
        padding: 10px;

        box-shadow: var(--topbar-border);
      }

      .search_form{
        display: flex;
      }

      .button{
        /* height: 35px;
        width: 35px; */
        /* border: 1px solid #ccc; */
        /* border-radius: 0 10px 10px 0; */
        border-radius: 50%;
        font-size: 26px;
        background: transparent;
      }

      .ion-icon{
        font-size: 23px;
        padding: 10;
      }

      .date_box{
        height: 36px;
        width: 200px;
        padding: 0px 25px;
        border: var(--border);
        font-size: 18px;
        /* border-radius: 10px 0 0 10px; */
        margin-left: 20px;
        background: transparent;
      }

      .approval_box{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        grid-column-gap: 16px;
        grid-row-gap: 30px;
        margin: 15px 0;
        padding: 10px;
        /* margin-left: 10px; */

        box-shadow: var(--topbar-border);
      }

      .transaction_box{
        border-radius: 10px;
        
        box-shadow: var(--topbar-border);
      }
      .transaction_box .detail{
        font-size: 14px;
        color: var(--black);
        line-height: 25px;
        padding: 10px;
        text-align: justify;
        
      }
      .transaction_box .date{
        font-size: 14px;
        color: var(--logout);
        margin: 10px 15px;
      }

      .transaction_box h3{
        font-size: 16px;
        color: var(--ligt-black);
        padding: 6px 4px;
        border: none;
        outline: none;
        letter-spacing: 2;
      }
      .transaction_box form{
        padding: 10px 4px;
        width: 100%;
        background: var(--transaction);
      }
      .transaction_box form input,
      .transaction_box form select,
      .transaction_box form #txtmsg{
        padding: 6px 0;
        padding-left: 6px;
        width: 75%;
        background: transparent;
        outline: none;
        border: none;
        color: var(--black);
        cursor: pointer;
      }
      .transaction_box form #txtmsg{
        font-size: 13px;
        height: 100%;
        overflow-y: scroll;
      }

      .transaction_box form .field_box{
        display: flex;
        align-items: center;
        justify-content: left;
        width: 100%;
      }
      .transaction_box form .field_box h3{
        font-size: 13px;
        color: var(--ligt-black);
        width: 25%;
        text-align: center;
      }
      .transaction_box form .field_box #btn_trans{
        font-size: 14px;
        color: var(--ligt-black)!important;
        width: 100px;
        background: var(--login);
        border-radius: 10px;
        cursor: pointer;
      }
      .transaction_box form .field_box #btn_trans:hover{
        color: var(--white)!important;
      }

      .transaction_box form .cancle_booking_btn{
        display: flex;
        justify-content: space-between;
        background: var(--ligt-black);
        transition:.4s;
      }
      .transaction_box form .cancle_booking_btn:hover{
        background: var(--logout);
        transition:.4s;
      }

      .transaction_box form .del_msg_btn{
        display: flex;
        justify-content: space-between;
      }
      .transaction_box form .del_msg_btn .del_btn{
        width: 95px;
        padding: 6px 25px;
        background: var(--ligt-black);
        transition: .4s;
        color: var(--white);
        border-radius: 10px;
        font-size: 14px;
      }
      .transaction_box form .del_msg_btn .del_btn:hover{
        background: var(--logout);
        transition: .4s;
      }
      .transaction_box form .del_msg_btn .rep_btn{
        background: var(--ligt-black);
        transition: .4s;
        width: 95px;
        padding: 6px 25px;
        color: var(--white);
        border-radius: 10px;
        font-size: 14px;
      }
      .transaction_box form .del_msg_btn .rep_btn:hover{
        background: var(--login);
        transition: .4s;
      }

      .transaction_box form .cancle_booking_btn input{
        font-size: 15px;
        color: var(--white);
      }

      .transaction_box form #user_image{
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .pro_pic{
        width: 100px;
        height: 100px;
        border-radius: 50%;

        margin-left: 40%;
      }
.tbView{
    display: none;
}

.btn_print{
    width: 100%;
    margin:15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn_print ion-icon{
    padding: 5px;
    font-size: 35px;
    color: var(--black);
}

/* Payment auditing ends */


/* Records Table View */
.Table_container{
    position: relative;
    width: 100%;
    padding: 20px;
    margin-top: 10px;
    
    box-shadow: var(--topbar-border);
}

.Table_container .recentStudents .cardHeader{
    display: flex;
    justify-content: center;
    padding: 10px 25px;
    margin-bottom: 20px;

    background: var(--white);
    box-shadow: var(--topbar-border);
    border-radius: 10px;
}

.cardHeader h2{
    font-weight: 600;
    color: var(--blue);
}

.btn-view{
    position: relative;
    padding: 5px 10px;
    background: var(--blue);
    color: var(--white);
    text-decoration: none;

    border-radius: 10px;
}

/* Code for Table content*/

.Table_container{
    overflow-x: auto;
}

.Table_container table{
    width: 100%;
    padding: 15px;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    box-shadow: var(--topbar-border);
}

.Table_container table thead{
    height: 50px;
    background: var(--blue);
    }

.Table_container table thead th{
    padding: 15px 20px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    }

.Table_container .recentmembers table tbody td{
        padding: 10px 25px;
        color: var(--black);
        text-align: center;
        }

.Table_container .recentmembers table tbody tr td:nth-child(3){
    text-align: center;
}

tr:nth-child(even){
    background-color: #abb0e4;
}



/* Admin Tools form operation ends */


/* Date Searching start */
.Admin_search_by_date{
    margin-top: 20px;
    width: 40%;
}
.Admin_search_by_date .Admin_date_box{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border: none;
}
.Admin_search_by_date .Admin_date_box .Admin_date_col h5{
    color: var(--black);    
}
.Admin_search_by_date .Admin_date_box .Admin_date_col input{
    /* width: 50px; */
    color: var(--black); 
    border: 2px solid var(--nav-bg);
    height: 28px;   
    border-radius: 10px;  
    background: var(--ligt-black);
}
.Admin_search_btn_form{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 3%;
}
.Admin_search_btn_form .Admin_btn_Search_Date{
    width: 40px;
    height: 35px;
    font-size: 17px;
    color: var(--nav-bg);
    background: var(--main-bg);
    padding: 5px;
    margin-top: 15px;
    margin-right: 10px;
    border-radius: 10px;
    
}
.Admin_search_btn_form button{
    border: none;
}
.Admin_search_btn_form .Admin_btn_Search_Date:hover,
.Admin_search_btn_form .Admin_btn_Search_Date ion-icon:hover{
    background: var(--ligt-black);
    color: var(--black);
}
.Admin_search_btn_form .Admin_btn_Search_Date ion-icon{
    color: var(--ligt-black);
    font-size: 21px;
}

/* Date Searching end */

.all_search_container{
    display: block;
}

/* Admin add payment start */

    .add_payment_container{
    height: 100%;
    width: 450px;
    padding: 20px 15px;
    margin: 25px 0px 40px 30px;
    box-shadow: var(--topbar-border);
    }
    .page_header{
        padding: 20px 10px;
        margin-left: 20%;
    }
    
    .page_header h3{
        font-size: 35px;
        color: var(--ligt-black);
        font-weight: 600;
    }

    .add_payment_form{
        /* width: 100%; */
        height: 100%;
        
        /* border: 1px solid red; */
    }

    .add_payment_form form{
        width: 100%;
        height: 100%;
        padding: 0px 10px 0px 0px;
        
        /* border: 1px solid red; */
    }

    .add_payment_form .input_box{
        /* width: 400px; */
        width: 100%;
        height: 100%;

        margin: 10px 4px;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .add_payment_form .input_box input,
    .add_payment_form .input_box select{
        width: 100%;
        height: 45px;
        
        font-size: 13px;
        padding-left: 5px;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--ligt-black);
        border-radius: 0px;
    }
    .input_box ion-icon{
        font-size: 23px;
        padding: 5px 2px;

        color: var(--black);
    }
    .add_payment_form .add_pay_send_btn{
        width: 90px;
        height: 35px;
        border-radius: 20px;
        margin-top: 10px;
        color: var(--white);
        background: var(--nav-border);
        border: none;
    }

    .pay_link{
        margin-top: 20px;
    }
    .pay_link a{
        color: var(--ligt-black) !important;
        padding: 13px 10px;
        background: var(--nav-border);
        margin-left: 20px;

        border-radius: 10px;
        transition: .6s;
    }
    .pay_link a:hover{
        color: var(--nav-border) !important;
        background: var(--white);
        margin-left: 20px;

        border-radius: 10px;
        border: 1px solid var(--nav-border);
        transition: .6s;
    }
/* Admin add payment end */

/* Expenses styling starts */

/* Date Searching start */
.search_date{
    margin-top: 20px;
}
.search_date .date_box{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    border: none;
}
.search_date .date_box .date_col h5{
    color: var(--black);    
}
.search_date .date_box .date_col input{
    /* font-size: 15px; */
    color: var(--black); 
    border: 2px solid var(--nav-bg);
    height: 28px;   
    padding: 0px 10px; 
    border-radius: 10px;  
    background: var(--nav-bg);
}
.search_form{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.search_form .btn_Date{
    width: 35px;
    height: 35px;
    font-size: 17px;
    color: var(--nav-bg);
    background: var(--main-bg);
    padding: 5px;
    margin-top: 15px;
    margin-left: -45%;
    /* margin-right: 10px; */
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
/* .search_form .btn_Date:hover,
.search_form .btn_Date:hover ion-icon{
    background: var(--);
    color: var(--white);
} */
.search_form .btn_Date ion-icon{
    color: var(--ligt-black);
    font-size: 21px;
}
/* Date Searching end */

.total_income{
    padding: 15px 10%;
    background: var(--logout);
    color: var(--white);
    font-size: 25px;
    font-weight: bold;
}

.total_income span{
    color: var(--yellow);
    font-size: 18px;
}

/* Expenses styling ends */

/* Attendance styling starts */
.main_container{
    overflow: hidden;
}

.attendance_cont{
    padding: 25px 0px;
    height:100%;
}

.foot p{
    font-size: 15px;
    text-align: center;
    color: var(--nav-border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--yellow);
    padding: 25px 10px;

}


/* Attendance styling ends */
 @media (max-width: 1191px)
 {
    .admin_menus a{
        font-size: 15px;
    }
 }

 @media (max-width: 1129px)
 {
     .navigation{
         left: -300px;
         overflow-y: scroll;
     }
     .navigation.active{
         width: 300px;
         left: 0;
     }
     .main{
         width: 100%;
         left: 0;
     }
     .main.active{
        left: 300px;
    }
    .cardBox{
        grid-template-columns: repeat(2,1fr);

    }

    .recentmembers{
        overflow-x: auto;
    }

    .search_date .date_box{
        width: 70%;
        justify-content: space-around;
    
        border: none;
    }
    .search_form .btn_Date{
         margin-left: -20%
        }
 }

 @media (max-width: 768px)
 {
    html{
        overflow-x: hidden;
    }

    .details{
        grid-template-columns: repeat(1,1fr);
    }
 }

 @media (max-width: 740px)
 {
     .Admin_search_by_date{
         margin-top: 20px;
         width: 70%;
     }
    .all_search_container{
        /* flex-direction: column; */
        display: block;
    }
    .Admin_search_by_date .Admin_date_box{
     width: 100%;
     justify-content: space-around;
 
     border: none;
 }
 
 }
 
 @media (max-width: 729px)
 {
    .admin_menus{        
        display: block;
        margin: 0;

        position: absolute;
        top:61px; 
        left:0; 
        right:0;
        width: 100%;
        height: auto;
        transition: .2s linear;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        background: var(--blue);
        z-index: 1000;
    }
    .admin_menus.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .admin_menus a{
        margin-left:5px; 
        color: var(--white);
        display: block;
    }
    .admin_menus a ion-icon{
        margin-top:5px; 
    }
    .admin_menus a:hover{
        background: var(--white);
    }


    #menu_drop{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        font-weight: 500;
        cursor: pointer;
    }
    
    .notice_box{
        display: flex;
        flex-direction: column;
        margin: 15px 0;
        padding: 10px;

        box-shadow: var(--topbar-border);
      }

 }



 @media (max-width: 500px)
 {
    
    .notice_box{
        display: flex;
        flex-direction: column;
        margin: 15px 0;
        padding: 10px;

        box-shadow: var(--topbar-border);
      }
    .btn_accounts{
        position: relative;
        left: 30%;
    }
    .navigation {
        /* position: fixed; */
        bottom: 0;
         /* overflow: hidden; */
     }

     html{
         overflow-x: hidden;
     }
     
    .cardBox{
        grid-template-columns: repeat(1,1fr);
    }

    .heading h3{
        font-size: 2.0rem;
        text-align: center;
     }

     .search{
        width: 100%;
    }
    form .txt_search{
        margin-left: -15px;
      }
      
    
    .btn_register{
        padding: 7px 15px;
        background: var(--nav-border);
        color: var(--white);
        border-radius: 40px;
        position: absolute;
        right: 20px;
        top: 130px;
    }
    
    .user{
        position: relative;
        width: 40px;
        height: 40px;
    
    }

    .Table_container table{
        width: 100%;
    }

    .tokenFrm,
    .noticeFrm{
        width: 99%;
    }
    
    .txt_search .search_box:focus {
        width: 80%;
        font-size: 14px;
        padding-left: 35px;
        color: var(--black);
        outline: none;
     }
.approval .title{
    width: 100%;
    font-size: 18px;

    background: var(--white);
  }
  .add_payment_container{
    width: 100%;
    padding: 2px;
    margin: 25px 1% 0px 1%;

    box-shadow: none;
}
  .add_payment_form .input_box{
    width: 100% !important;
}
.pay_link a{
    color: var(--white) !important;
    padding: 9px 6px;
    background: var(--nav-border);
    margin-left: 20px;

    border-radius: 10px;
    transition: .6s;
}

.page_header h3{
    font-size: 25px;
    color: var(--ligt-black);
    font-weight: 500;
}


.search_date .date_box{
    width: 90%;
    justify-content: left;

    border: none;
    /* border: 1px solid red; */
}
.search_date .date_box .date_col{
    margin-right: 8px;
}

.search_form .btn_Search_Date{
     border-radius: 50%;
     position: relative;
     right: 2%;
    }
    
 }

 @media (max-width: 394px)
 {
     .search{
        width: 100%;
    }
    
    
 }
 @media (max-width: 370px)
 {
    .Admin_search_by_date{
        margin-top: 20px;
        width: 100%;
    }
    .Admin_search_by_date .Admin_date_box{
        /* width: 100%; */
        justify-content: space-around;
    
        border: none;
    }
 }
 
  @media (max-height: 500px)
 {
    .attendance_cont{
        overflow-y: scroll;
    }
    .attendance_cont .add_payment_container {
        height: 100%;
        width: 450px;
        padding: 20px 15px;
        margin: 15px 0px 30px 30px;
        box-shadow: var(--topbar-border);
    }
    .add_payment_form{
        margin-bottom: 50px;
    }
    
    .foot p{
        font-size: 15px;
        text-align: center;
        color: var(--nav-border);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--yellow);
        padding: 25px 10px;
        /*display:none;*/
    }
 }