/*SIGNUP*/
.reset{
    display: none !important;
}

/*cater menu*/

.max-input {
    width: 30px; /* Adjust the width to make it smaller */
    padding: 2px; /* Reduce padding for a compact look */
    font-size: 12px; /* Adjust font size to make it smaller */
    max-height: 10px !important; /* Set a smaller height */
}

input[type="checkbox"]:checked {
    background-color: #580000 !important;
    border-color: #580000 !important;
}


.image-box {
    width: 100%;
    height: 300px !important;
 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed #ccc;
    cursor: pointer;
    background-color: #f8f8f8;
    border-radius: 10px;
}

.image-box img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: none;
}

.back-button {
    background-color: transparent; /* Remove background */
    border: 1px solid unset !important; /* Add a border */
    color: #580000 !important; /* Set text color */
    padding: 0px 0px 10px 0px !important; /* Adjust padding */
    border-radius: 5px; /* Optional: Rounded corners */
    font-size: 18px !important; /* Adjust font size */
}
.slightly-bold {
    font-weight: 600; /* Slightly bold (between normal and bold) */
    font-family: 'Inter' !important;
    margin-bottom: 0px !important;
}

.back-button:hover {
    background-color: unset !important; /* Add a light background on hover */
    color: black; /* Change text color on hover */
}
/*cater item*/
.toggle-container {
    display: flex;
}
.slightly-bold {
    font-weight: 500; /* Slightly bold (between normal and bold) */
}
.toggle-btn {
    padding: 10px 20px;
    border: 2px solid #580000;
    background: white;
    color: #580000;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle-btn.active {
    background: #580000;
    color: white;
}
.image-box {
    width: 100%; /* Adjust based on your layout */
    height: 200px; /* Set a fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed #ccc;
    cursor: pointer;
    background-color: #f8f8f8;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the box */
}
/*Attendance*/
.btn-brown{
    border: 1px solid !important;
    color: #580000;
    border-color: #580000;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/*login*/
body.loginbody{
    display: flex;
    justify-content: center;
    align-items: center;
}
div.login-left{
    background-color: white;
    width: 50%;
    height: 100lvh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.login-right{
    background-color: #580000;

    width: 50%;
    height: 100lvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#login-input, #login-submit{
    border-radius: 15px !important;
    outline-color: white;
}
label.login-label{
    padding-left: 10px;
    margin-bottom: 5px;
    color: white;
    font-weight:600;
    margin-bottom: 2px;
    margin-top: 15px;
}
#login-submit{
    font-weight:800 !important;
    color: #580000!important;
    min-height: 30px !important;
    margin-top: 10px;
}

.login-left img {
    width: 300px; 
}
.login-text{
    color: #580000;
    font-weight:900 !important;
}
/*Super admin*/

.superadminstorelogo{
    
    border-radius: 50%;
    width: 25lvh;
    height: 25lvh;
    
}
.storelogooverview{
    width: 20lvh;
    height: 20lvh;
    margin-right: 20px;
    border-radius: 50%;
}
.storetable{
    margin-left: 100px;
}
/*payroll*/
/* Change pagination background and text color */
@media print {
    @page {
        margin: 0;
    }
    body {
        margin: 0;
        padding: 0;
    }
}

.dataTables_paginate .pagination .page-item .page-link {
    
    color: rgb(72, 72, 72) !important; /* Black text */
    
}

/* Change active page color */
.dataTables_paginate .pagination .page-item.active .page-link {
    background-color: #580000 !important; /* Green background */
    color: white !important;
    border-color: black !important;
}

.payrolldetialsmodal{
    min-width: 95lvw;
}

.payslipmodal{
    min-width: 60lvw;
}
.page-item.active .page-link {
    background-color: #580000  !important;
    border-color: #580000  !important;
}
.companyheader{
    display: flex;
    justify-content: center;
    align-items: center;
}
/*branch*/
.addbranchmodal{
    min-width: 50vw;
}
.pointing{
    cursor: pointer;
}
.suggestions{
    background-color: blue !important;
}
.modal-content-branch{
    min-width: 70vw !important;
}
/*Employee*/
div.action {
    display: flex;
    justify-content: center;
    align-items: center; 
}

/*Department*/
body{
    font-family: "Poppins", sans-serif !important;
}


#content-department{
    flex-direction: row !important;
    justify-content: space-between;
    width: 95%;
    background-color: white;
    border-radius: 20px !important;
}
div.selector{
    display: flex !important; 
    justify-content: center;
    align-items: center;
}
#columnSelect{
    max-width: 20%;
}
#columnSelect{
    max-width: 20%;
}


.department-add{
    width: 30%;

    padding: 20px;
}
.department-show{
    width: 70%;
   
}
.submit input{
    color: white !important;
}

nav a,li{
    font-size: 1rem;
    color: white;
}
.department-input{
    align-items: center;
    display: flex;
    justify-content: row;
    white-space:nowrap;
    margin-bottom: 20px;
}
.department-input label{
    margin-right: 20px;
    min-width: 122px;
}

.logo{
    display: flex;
    flex-direction: row;
    font-size: 27px;
    text-decoration: none;
    color: white;
    height: 60px;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 20px 0px rgb(168, 168, 168);
    align-items: center;
}
.logo-div{
    max-height: 30px;
}

.logo a{
    margin: 0px;
    display: flex;
    text-align: center;
    align-items: center;
    color: #580000 ;
    text-decoration: none;
    max-height: fit-content;
    
}
.logo a{
    text-decoration: none;
    color: #580000 ;
    /*white-space: nowrap;*/
}
.logo a:hover{
    color: #580000 ;
}
.right{
    width: 100%;
    height:fit-content;
    background-color: rgba(128, 128, 128, 0.092) !important;
    min-height: 100lvh !important;
}
.top-nav{
    width: auto;
}
body{
    display: flex;
    flex-direction: row;
    width:100%;
    min-height: 100lvh;
    background-color: white;
    margin: 0px 0px;
    padding: 0px 0px;
}


nav{
    background: linear-gradient(111deg,  
    #580000,  /* Deepest brown (starting color) */  
    #580000 50%,  /* Dark walnut brown */  
    #580000 100% /* Rich espresso brown */  
    
);








    height: 60px;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    margin: 0px;
    padding: 0px 20px;
    align-items: center;
    text-decoration: none;
    color: white;
    
    
}
nav a{
    display: flex;
    text-align: center;
    align-items: center;
    color: white;
    text-decoration: none;
    
}

li {
    display: flex;
    align-items: center;
    flex-direction: row;
    width:auto;
    padding: 10px 10px 10px 10px;
    margin: 5px 1px 5px 1px;
    min-height: 20px;
    min-width: 20px;
    font-weight:600;
}
.sidebar-ul>li:hover{
    background-color: #580000  !important;
    border-radius: 5px;
    color: white;
   
}

li:hover a{
    color: white;
    font-weight:700;
}
li a{
    margin: 0px;
    display: flex;
    text-align: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    
}
#active{
    background-color: #580000 !important;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
#active a{
    color: white;
}

i{
    display: flex;
    justify-content: center;
    margin: 0px 5px;
}

.sidebar{
    min-height: 100lvh;
    width: 250px;
    background-color: white;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: flex;
    
    flex-direction: column;
    overflow-x:hidden;
    -webkit-transition: all 0.3s ease-in-out;
}
main{
    height: auto;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 5px;
}
.sidebar-li{
    min-height:calc(100lvh - 60px - 50px - 3px);
}
.sidebar-button i{
    font-size: 1.5em;
}
.sidebar a{
    color:#580000 ;
    text-decoration: none;
    
}
a:hover{
    color: white;
}
.sidebar.close{
    width: 70px;
    min-width: 70px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    
}
.sidebar.close .submenu{
    display: none !important;
}
.sidebar.close .li-text{
    
    opacity: 0;
}
.sidebar.close #logo-name{
    opacity: 1;
}

.li-text{
    margin: 0px 5px;
    font-weight:700;
    
}

.sidebar-ul{
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 10px;
}
.logout{
    display: flex;
    flex-direction: row;
    width:100%;
    border-top: 1px solid #580000 ;
    align-items: center;
    bottom: 0;
    padding: 0px 20px 0px 20px;
    font-size: 18px;
    height: 50px;
    background-color: white;
}
.logout:hover{
    color:#580000 ;
}
.logout a:hover{
    color:#580000 ;
}
.navbar-profile i{
    padding: 0px 5px;
    margin: 0px;
    
}

.logout a{
    display: flex;
    align-items: center;
    
}
.content{
    padding-left: 30px;
    padding-right: 30px;
    
    padding-top: 20px;
    
}
.content{
    display: flex;
    justify-content: center;
    flex-direction: column;
    
    
}
.payslipprintmain{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.rounded{
    border-radius: 50%;
}
.payslipholder{
    
    min-height: 100lvh;
}
.emppayrollshow{
    max-height: calc(100lvh - 50px - 30px) !important;
}
.welcome p,h2{
    margin: 0px;
}
.welcome>h2{
    text-align: start;
}


.stats{
    width: 23%;
    height: 30lvh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items:start;
    justify-content: flex-start;
    border-radius: 10px;
    color:black;
    border: 1px solid  #580000 43;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    

}

.stats p,h2{
    margin: 0px 0px;
    text-align: center;
    margin-top: 5px;
}
.stats p{
    font-size: 1.5rem;
    color: black;
    font-weight: bold;
   
}
.stats h2{
    font-size:1em;
    font-family:Arial, Helvetica, sans-serif;
}
.stats-div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%; 
    
}
.stats-div button{
    height:min-content;
    background-color: transparent;
    border: transparent;
}
.stats-div button:hover{
    cursor: pointer;
}
#member1{
    font-size: 3em;
    margin: 10px 0px;
    color: #13c9d6;
}
#member2{
    font-size: 3em;
    margin: 10px 0px;
    color: #22c6a5;
}
.members-setting{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    
}
.bottom{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    height: auto;
    flex:1;
}
#menu-members{
    font-size: 1.5em;
    margin: 10px 0px;
    color:#580000 ;
}
#coach{
    font-size: 3em;
    margin: 10px 0px;
    color: #ee5358;
}
.overview{
    color: #580000 ;
}
.total-income{
    background-color: white;
    width: 100%;
    border-collapse: collapse;
    display: flex;
    flex-direction: column;
    border: 1px solid  #580000 43;
    border-radius: 10px;
    border-collapse:collapse;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    overflow-y:auto;
}
.income-top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    border-bottom: 1px solid  #580000 43;
}.date{
    display: flex;
    justify-content: center;
    width:auto;
    flex:1;
    
}
.date button{
    margin: 0px 10px;
    background-color: transparent;
    border: transparent;
    color:#4aa7a2;
}

.date button:active,.date button:focus,.date button:hover{
    cursor: pointer;
    color:#0b817b;
}
.income-bot{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.sales,.sales-right{
    width: 100%;
    height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid  #580000 43;  
}
.sales p,h2,.sales-right p,h2{
    margin: 0px 0px;
    text-align: center;
    margin-top: 5px;
}
.sales,.sales-right p{
    font-size: 1em;
    color:#4aa7a2;
   
}
.sales-right{
    border-right: 0px;
}

.sales h2,.sales-right h2{
    font-size:3em;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #580000 ;
}

/* MEMBERSHIP*/
.form-control{
    width: 100%;
    color: #222222 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
    height: 36px !important;
}
.form-control-money{
   
    border-radius: 0px 8px 8px 0px !important;
   
}
.input-group-text{
    height: 36px !important;
    border-radius: 8px 0px 0px 8px !important;
}
.modal-footer button {
    
    border-radius: 8px;
 
}
.btn-secondary2{
    background-color: #654845 !important;
    border-color: #654845 !important;
    color: white !important;
}
.modal-content{
    border-radius: 20px !important; 
}
.modal-body-employee{
    padding: 1rem 2rem !important;
   
}
.modal-body-employee, .modal-header-employee, .modal-footer-employee{
    background-color: rgba(128, 128, 128, 0.114) !important;
}
.modal-footer-employee
.page-item.active .page-link {
    background-color: #580000  !important;
    border-color: #580000 !important;
}
.page-link {
    color: #580000 ;
}
.page-link:hover{
    color:#580000; 
}
#content-membership{
    
}
.member-show{
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
}   
.form-control{
    width: 100%;
    color: #222222 !important;
   
}
.name>.form-floating{
    align-items: center;
    display: flex;
    justify-content: center;
    width: 45%;
}
.form-floating{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.form-floating input{
    width: 95%;
}

.form-floating>label{
    padding-left: 20px;
    color:#4aa7a2ab;
}
.name,.age-date{
    
}
#date-registration input{
    height: 300px;
}
.form{
    background-color: white;
    width:30%;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    padding: 0px 20px;
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #580000 ;
    padding-top: 30px;
    padding-bottom: 30px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    margin-right: 20px;
   
}
.form i{
    font-size: 1.8em;
    line-height: 30px;
    margin-right: 10px;
    margin-left: 0px;
    color: #580000 ;
}
.form h2{
    padding-bottom: 10px;
}
.form input{
    
    height: 45px;
    border: 1px solid #580000 9e;
    border-radius: 10px;
    padding-left: 10px;
    
    color: #580000 ;
    margin-left: 20px;
    margin-right: 10px;
    background-color: #e7eeee3f;
}
#search{
    width:100%;
    height: 40px;
    border: 1px solid #580000 9e;
    border-radius: 10px;
    color: #580000 ;
    
    background-color: #e7eeee3f;
}
#search-btn{
    width:100px;
    height: 40px;
    border: 1px solid #580000 9e;
    border-radius: 10px;
    color: #580000 ;
    background-color: #e7eeee3f;
    margin-left: 10px;
}
.search{
    display: flex;
    flex-direction: row;
    width: 95%;
}
#search{
    padding-left: 10px;
}
.form input::placeholder{
    color:#4aa7a2ab;
}
.submit{
    align-items: center;
    display: flex;
    justify-content: center;
}
.submit input{
    width: 100%;
    height: 50px;
    text-align: center;
    color: white;
    background-color: #580000 ;
}
.submit input:hover{
    background-color:#580000;
    color: white;
    cursor: pointer;
}
.custom-button-class {
    background-color: #2a7d7a !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    cursor: pointer;
    font-size: 16px !important;
    transition: background-color 0.3s ease;
}

input#date
.age,.address,.contact,.email,.name,.age-date{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#date-registration{
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.register-show{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    
}
.table-member{
    width: 100%;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}
.form-group{
    margin-bottom: 10px;
}
.modal-title{
    font-size: 1.5em;
    margin-top: 10px;
}
.modal-header button{
    
    background-color: transparent;
    color: black;
    font-size: 1.5em;
    border: transparent;
   
    text-align: center;
}
#myTable{
    width: 100% !important;

}
.members-show{
    flex: 1;
    width: 65%;
    max-height:80vh;
    background-color: white;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
    max-height: 75vh;
    margin-bottom: 10px;
}
.member-show{
   
    width: 100%;
    background-color: white;
    border-radius: 10px;
    
}
.modal-header{
    color:#222222
}
.modal-body form label{
    color: #222222 !important;
}
.form-control:disabled, .form-control[readonly] {
    color: 222222 !important;
    background-color: rgba(192, 227, 226, 0.44);
}
.member-show{
    overflow: auto;
    padding-top: 10px;
}

.members-show h2{
    color: #222222;
}
table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #222222;
    height: fit-content;
}
.tables{
    color: #222222;
    margin-top: 10px;
}
div#add-member{
    display: flex;
    justify-content: flex-end;
    width: 100% !important;
    margin-bottom: 10px;
    background-color: transparent;
    border: transparent;
}
.checktype{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    color: #222222;
}
.checktype label{
    padding-right:10px;
}
.memtype{
    display: flex;
    margin-left: 10px;
    align-items: center;
}
.memtype label{
    margin-left: 5px;
}
.memtypediv{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#add-member .addbtn{
    border: transparent;
    background-color: #580000 !important;
    color: white;
    width:fit-content;
    height: 40px;
    border-radius: 10px;
    
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
}
.bootstrap-select>.dropdown-toggle {
    width: 95%;
    color: #222222;
    height: calc(3.5rem + 2px);
    
}
div.dropdown.bootstrap-select{
    display: flex;
    justify-content: center;
    align-items: center;
}
.checktype{
    margin-bottom: 20px;
}
#gcashpaymentqr{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: inherit;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    margin-bottom: 0px;
}
#gcashpayment{
    margin-bottom: 0px;
}
#gcashpayment1{
    margin-bottom: 0;
}
#gcashpayment2{
    margin-bottom: 0;
}
#cashpayment h2{
    color: #580000 ;
    font-weight:bolder;
    font-size: 2em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#cashpayment1 h2{
    color: #580000 ;
    font-weight:bolder;
    font-size: 2em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#cashpayment2 h2{
    color: #580000 ;
    font-weight:bolder;
    font-size: 2em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.dropdown-item{
    color: #580000 !important;
}
.dropdown-li:hover{
    color: white !important;
    background-color: #580000 !important;
}
.dropdown-lired:hover{
    color: white !important;
    background-color: #580000 !important;
}
.qrimg{
    width: 80%;
    height: 190px;
    background-image: url('qr.jpg');
    background-repeat: no-repeat;
    background-size: contain;
}
.show>.btn-light.dropdown-toggle {
    color: #580000 ;
}
.filter-option{
    display: flex;
    align-items: center;
}
thead{
    background-color: #580000 ;;
}
.tables {
    overflow-y: auto; 
    align-items: normal;
    justify-content: center;
    border-collapse: collapse;
    width: 100%;
    padding: 0px 20px;
    
}

th, td {
    border: 1px solid #ddd;
    
    text-align: left;
    padding: 8px 0px;
    text-align: center;
    color: black;
}
td{
    height: 30px;
    overflow-y: hidden;
    overflow-x: hidden;
}
th {
    background-color:#580000  !important;
    color: white;
}
.inventory{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    overflow-y: scroll;
    width: 100%;
    align-items: center;

}
.item{
    height: 20vw;
    width: 30%;
    margin: 20px 0px;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    align-items:center;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    transition: transform 0.3s;
    background-color: white;
    color: #580000 ;
}
.item button{
    background-color: transparent;
    border: 1px solid #580000 ;
    border-radius: 30px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    color:#580000 ;
    background-color: #68c0bb40;
    transition: transform 0.3s;

}
.item:hover{
    transform: scale(1.05);
    border-color:#580000 ;
    cursor: pointer;
}
.item:hover h2{
    color:#580000;
}

.image1{
    background-image: url(./img/pngegg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}
.image2{
    background-image: url(./img/treadmill.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}
.image3{
    background-image: url(./img/benchpress.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}
.image4{
    background-image: url(./img/overheadpress.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}
.image5{
    background-image: url(./img/benchlegpress.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 70%;
    width: 100%;
}
.image6{
    background-image: url(./img/indoorcycling.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}
.image7{
    background-image: url(./img/smitchmachine.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}
.image8{
    background-image: url(./img/kettlebell.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    height: 70%;
    width: 100%;
}

.quantity{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: fit-content;
}
.quantity h3,.quantity p{
    margin: 0px;
}
.item button:hover{
    cursor: pointer;
    
}
.item button:active{
    background-color: #580000 ;
    color: white;
    font-size: larger;
    font-weight: bolder;
    transform: scale(1.05);
}
.add-item{
    display: flex;
    justify-content: end;
    width: 97%;
    margin-bottom: 10px;
    
}
.add-item button{
    background-color: transparent;
    border: transparent;
    font-size: large;
    background-color: #580000 ;
    color: white;
    width: 130px;
    height: 40px;
    border-radius: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    
}
.add-item button:hover{
    cursor: pointer;
    color: white;
    background-color:#580000;
}

/*report*/
.graph {
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
    background-color: #f0f0f0;
    padding: 10px;
  
}

.bar {
    flex: 1;
    background-color: #007bff;
    margin: 0 5px;
}
.chart{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
   
    overflow-y: scroll;
}
.graph-div{
    height: 30vh;
    width: 40%;
    background-color: white;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    margin-bottom: 20px;
    
}
.pie-div{
    height: 30vh;
    width: 40%;
    background-color: white;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    margin-bottom: 20px;
}
.scatter-div{
    height: 30vh;
    width: 40%;
    background-color: white;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    
}
.line-div{
    height: 30vh;
    width: 40%;
    background-color: white;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    
}

.swal2-confirm {
    background-color: #ff5733; 
    color: white; 
    border: none;
}
td a{
    text-decoration: none;
    color: #580000 ;
    font-weight:bold;
}

/* help and support*/
.accordion-button{
    background-color: white;
}
.accordion{
    max-height: calc(100lvh - 100px);
}
.accordion-button:not(.collapsed) {
    background-color:#580000 ;
    color: white;
}
.accordion-button:not(.collapsed){
    background-color:#580000 ;
}
.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:'%3E%3Cpath d='M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'%3E%3C/path%3E%3C/svg%3E");
}
.accordion-header{
    margin-top: 0px;
}
.accordion{
    width: 100%;
}
.faq{
    margin-bottom: 20px;
}
#content-help{
    flex-direction: row;
    max-height: calc(100lvh - 50px - 60px - 25px - 45px);
    overflow-y: scroll;
}

/*NOTIF*/
#content-notification{
    display: flex;
    flex-direction: column;
    color:#580000 ;
}
.notif{
    display: flex;
    justify-content: space-between;
    height: 60px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #39848192;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    padding: 0px 20px;
    align-items: center;
    background-color: white ;
    margin-bottom: 10px;
}
.member-name{
    font-weight:900;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.left{
    display: flex;
    justify-content: space-between;
    width: 70%;
    align-items: center;
}
.left>.text{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.btn-msg {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
    color:#580000 ;
    height: auto;
    font-size: 1.5em;
    
   
    border-radius: 10px;
    align-items: center;
    align-content: center;
    padding-top: 5px;
}
.btn-primary{
    background-color: #580000 ;
    border: 1px solid#580000 ;
}
.btn-primary:focus{
    background-color: #580000 ;
    border: 0px;
}
.btn-primary:hover{
    background-color: #580000;
    border: 1px solid #580000;
    
}
.text{
    display: flex;
    justify-content: center;
    align-items: center;
}
.action-notif{
    
    display: flex;
    justify-content: space-around;
}
/*SSTAFF*/
.staff-show{
    width: 100%;
    background-color: white;
    border-radius: 10px;
    color: #580000 ;
}




#add-staff{
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 20px;
    background-color: transparent;
    border: transparent;
}

#add-staff button{
    background-color: transparent;
    border: transparent;
    font-size: large;
    background-color: #580000 ;
    color: white;
    width:fit-content;
    height: 40px;
    border-radius: 10px;
    
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
    
}
div.dropdown.bootstrap-select{
    width: 100% !important;
    flex:1;
}
.btn-light{
    border: 0.5px solid rgba(128, 128, 128, 0.396);
}
.show > .btn-light.dropdown-toggle {
    
}
.text {
    font-size: 1em;
}
li.selected-active{
    margin: 0px;
}
ul.dropdown-menu.inner.show>li{
    margin: 0;
    padding: 0;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: #580000 ;
}
.staff-show{
    overflow: auto;
    padding-top: 20px;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  bottom: .5em;
}
td{
    height: fit-content;
}
.content-staff{
    padding: 0px 20px;
}
/*Payment*/
.log-member{
    width: 100%;
    background-color: white;
}
.show-log{
    width: 100%;
    background-color: white;
}
#content-payment{
    display: flex;
    flex-direction: row;
    background-color: white;
    border-radius: 10px;
    margin: 20px;
    padding: 0px;
    padding-top: 10px;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
}
/*Setting*/
#content-setting{
    align-items: flex-start;
    justify-content: flex-start;
    background-color: white;
    margin: 20px;
    height: 100%;
    border-radius: 10px;
    color: #580000 ;
    overflow-y:scroll;
}
.setting-li{
    padding: 0;
    margin: 5px 10px;
    color: #580000  !important;
    text-decoration: none;
}
.setting-li a:hover{
    color: #580000 ;
}
.setting-li a{
    text-decoration: none;
    color: #580000 ;
    font-weight: 400;
}
.settingtype{
    margin-bottom: 10px;
}
.settingtype h2{
    text-align: start;
    color:#580000 ;
}
button#add-member{
    background-color: #580000 !important;
    box-shadow: 0 2px 4px rgba(58, 72, 70, 0.1), 0 8px 16px #65977f1a;
    border: 1px solid #91c9c76b;
    border-radius: 10px;
}
#add-member button {
    font-weight: bold !important;
}
.activecater{
    color: #580000;
}

@media screen and (min-width: 320px) and (max-width:767px){
    .cartcontainer{
        box-shadow: none !important;
        padding: 0px !important;
    }
    .p-4{
        padding: 0px !important;
    }
    .cateringnav {
        position: fixed;
        bottom: -1;

        left: 0;
        width: 100%;
        margin: 0px !important;
        background-color: #ffffff; /* or any color */
        border-top: 1px solid #ddd;
        padding: 10px 15px;
        z-index: 1000; /* ensures it stays on top */
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    }
    
    body.loginbody{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #580000;
        min-height: 100lvh;
    }
    div.login-left{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30lvh !important;
        background-color: unset;
    }
    .login-text {
        color: #ffffff;
        font-weight: 900 !important;
    }
    div.login-right{
        width: 100vw;
        display: flex;
        
        justify-content: center;
        align-items: start !important;
        height: 70lvh !important;
        
    }
    .sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        max-width: 60%;
        min-width: 60%;
        height: 100%;
        background-color: white; 
        color: white; 
        transition: left 0.3s ease; 
        z-index: 999; 
    }
   
    .logo{
        position: fixed;
        top: 0px;
        right: 20%;
        left: 20%;
        display: flex;
        justify-content: center;
    }
   
    .nav-profile-text{
        display: none;
    }
   
    .top-nav{
       
    }
    .sidebar.close {
        left: -80%; 
    }

    .stats-div{
        flex-direction: column;
        height: fit-content;
        padding-top: 10px;
        height: 100%;
        flex:1;
        width: 100%;
        
    }
    .stats{
        width:calc(100% - 40px);
        height: fit-content;
        margin-bottom: 10px;
        flex:1;

    }
    .total-income{
        flex-direction:column;
        width: auto;
        margin-bottom: 20px;
        overflow-y: unset !important;
    }
    .income-top, .income-bot{
        flex-direction: column;
    }
    .sales,.sales-right{
        height: auto;
        padding: 5px 0px;
    }
    .sales{
        border-bottom: 1px solid  #580000 43;  
    }
    .content{
        overflow-y: scroll;
        justify-content: flex-start;
        flex-direction: column;
        padding: 0px 15px;
        max-height: calc(100lvh - 50px - 60px - 25px - 10px);
        
    } 
    #content-payment{
        max-height: calc(100lvh - 50px - 60px - 25px - 30px);
    }
    .logo{
        font-size:x-large;
        padding: 0px 18px;
        box-shadow: none;
        color: white;
    }
    .logo a{
        color: white;
        font-weight: bold;
    }
    .graph-div,.line-div,.scatter-div,.pie-div
    {
        width: 70%;
    }
    .overview{
        width: 100%;
        text-align: center;
        border-bottom: 1px solid  #580000 43;  
        
    }
    .income-top{
        padding: 0px;
    }
    #fname,#age,#contact,#address,#email,#date-registration{
        margin-bottom: 15px;
    }
    
    
    .register-show{
        flex-direction: column;
    }
    .form{
        padding: 0px;
        margin: 0px;
    }
    .form{
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .members-show{
        max-height: none;
        padding: 0px;
        padding-bottom: 20px;
    }
    .form input{
        margin: 0px;
        padding-left: 10px;
        width: 80%;
    }
    form>.contact{
        margin-bottom: 15px;
    }
    .members-show{
        width: 100%;
       
    }
    #content-membership{
        padding-right: 10px;
        padding-left: 10px;
        max-height: calc(100lvh - 50px - 150px);
        
    }
    .member-show{
    overflow: auto;

    }
    table{
        overflow-y: scroll;
    }
    .chart{
        flex-direction: row;
        padding-bottom: 20px;
        margin-top: 10px;
    }
    #content-report{
        display: flex;
        min-height: calc(100lvh - 50px - 78px);
        justify-content: center;
    }
    .scatter-div{
        margin-bottom: 20px;
    }
    #content-inventory{
        max-height: calc(100lvh - 50px - 60px - 74px);
        justify-content: center;
        align-items: center;
    }
    .inventory{
        justify-content: center;
        align-items: center;
        flex-direction: row;
        max-height: calc(100lvh - 50px - 60px - 10px);
        padding: 10px;
        width: 92%;
    }
    .item{
        width: 95%;
        height: 70vw;
    }
    .add-item button{
        font-size: 1em;
    }
    .sales{
        border-right: transparent;
    }
    .form-floating > label {
        /*left:10%;*/
    }
    select#course_id.form-floating{
        min-height: 30px;
    }
    .name>.form-floating {
        width: 100%;
    }
    .name{
        margin-bottom: 0px;
    }
    #date-registration{
        height: calc(3.5rem + 2px);
        margin-bottom: 0px;
        color:#580000 ;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        flex: 1;
        flex-direction: row;
        display: flex;
    }
    .col-sm-12.col-md-6{
      
        padding-left: 30px;
        padding-right: 30px;
        justify-content: center;
    }
    .dataTables_filter{
        width: 100%;
    }
    .dataTables_filter label{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .welcome{
        display: flex;
        align-items: start;
        justify-content: start;
        text-align: start;
    }
    .checktype{
        display: flex;
        justify-content:flex-start;
        flex-direction: row;
        align-items: flex-start;
        padding-left: 10px;
    }
    .selecttext{
        width: fit-content;
        text-align: start;
    }
    .memtypediv{
        flex-direction: column;
        justify-content: center;
    }
    .action-notif{
        
    }
    .member-name{
        min-width: 105px;
    }
    div.text{
        min-width: 110px;
    }
    #erasenotif{
        display: none;
    }
    .btn-msg{
        font-size: 1em;
        padding: 0px;
        padding-top: 5px;
    }
    .action-notif{
        width: auto;
    }
    #add-member button{
        font-size: 0.8em;
        text-align: center;
        align-items: center;
        margin-top: 10px;
    }
    element.style {
        display: grid;
        justify-items: center;
    }
    div.swal2-popup.swal2-modal.swal2-show{
        display: flex !important;
        flex-direction: column;
        
    }
    #itemImageInput{
        margin-bottom: 10px;
    }
    .swal2-html-container{
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }
    #itemName,#itemQuantity{
        margin: 0px !important;
        width: 100%;
    }
    .add-item button{
        font-size: 1em;
        width: auto;
    }
    .add-item{
        padding-top: 10px;
    }
    #add-staff button{
        font-size: 1em;
        width: auto;
        
    }
    #add-staff{
        margin-bottom: 5px;
        margin-top: 5px;
    }
    #content-staff{
        max-height: calc(100lvh - 50px - 150px) !important;
    }
    #content-setting h2, #content-setting a{
        font-size:large;
    }
    #content-setting{
        height: auto;
        max-height: calc(100lvh - 50px - 60px - 25px - 10px);
    }
}
@media screen and (min-width: 768px) and (max-width:1023px){
    
    .stats-div{
        flex-direction: column;
        height: fit-content;
       
        flex: 1;
   
    }
    #content-staff{
        max-height:calc(100lvh - 50px - 60px - 25px - 80px) !important;
    }
    .logo{
        font-size:x-large;
    }
    .sidebar.close #logo-name{
        opacity: 0;
    }
    .logo-pic{
        background-image: url(./adzu.png);
        background-repeat: no-repeat;
        background-size: contain; /* Change to 'contain' to fit the container */
        background-position: center;
        height: 1px; /* Adjust the height to your desired size */
        width: 1px;
    }
    .a-class{
        max-height: 60px;
        max-width: 10px;
    }
    .stats{
        width:80%;
        height: fit-content;
        flex: 1;
        margin-bottom: 10px;
        padding: 10px 20px;
    }
    #content-setting{
        flex-direction: column !important;
        max-height: calc(100lvh - 50px - 60px - 53px) !important;
    }
    .total-income{
        flex-direction:column;
        width: auto;
        margin-bottom: 10px;
        margin-left: 10px;
       
       
    }
    .income-top, .income-bot{
        flex-direction: column;
    }
    .income-bot{
        flex: 1;
        justify-content: space-around;
    }
    .sales,.sales-right{
        height:max-content;
        border: 0px;
        flex: 1;
    }
    .sales{
        border-bottom: 1px solid  #580000 43;  
    }
    .content{
        max-height: calc(100lvh - 50px - 60px - 40px);
        
        justify-content: center;
        flex-direction: row;
        flex: 1;
        padding: 0px 10px;
        margin-top: 10px;
        
    } 
    #content-payment{
        max-height: calc(100lvh - 50px - 60px - 25px - 28px)
    }
    .stats-div{
        max-height: calc(100lvh - 50px - 60px - 25px - 15px);
        overflow-y: scroll;
    }
    .chart{
        flex-wrap: wrap;
        flex-direction: row;
        width: 80%;
        justify-content: unset;

    }
    
    .graph-div,.line-div,.pie-div,.scatter-div
    {
        width: 35%;
        margin: 0px;
        flex: 1;
    }
    .scatter-div{
        width: 80%;
        height: 16lvh;
    }
    .line-div{
        height: 15lvh;
    }
    .graph-div,.scatter-div{
        margin-bottom: 20px;
        
    }
    .scatter-div{
        margin-left: 10px;
    }
    .pie-div{
        margin-left: 10px;
    }
    
    .scatter-div,.line-div{
        margin-left: 0px;
    }
    .line-div{
        margin-left: 0px;
    }
    .pie-div,.graph-div{
        height: 15vh;
    }
    .graph-div,.line-div{
        
    }

    .register-show{
        width: 100%;
    }
    .form{
        flex: 1;
        width: 100%;
        margin: 0px;
        margin-bottom: 20px;
        margin-right: 20px;
    }
    .members-show{
        flex: 1;
        width: 100%;
        padding: 0px 25px;
        
    }
    
    
    #content-membership>.register-show{
        justify-content: center;
    }
    .register-show{
        justify-content: space-around;
    }
    
    .name input{
       
    }
    #fname,#age,#contact,#address,#email,#date-registration{
        margin-bottom: 15px;
    }
    
    .register-show{
        align-items: normal;
    }
    .form{
        justify-content: flex-start;
        margin-bottom: 0px;
        padding: 20px;
    }
    .members-show{
        max-height: none;
        padding: 0px;
    }
    form>.contact{
        margin-bottom: 15px;
    }
    .form input{
        margin: 0px;
        padding-left: 10px;
    }
    #content-report{
        padding-left: 10px;
        padding-right: 10px;
        max-height:calc(100lvh - 50px - 92px);
        padding-top: 10px;
    }
    #content-inventory{
        
        padding: 0px;
    }
    #content-membership{
        max-height: calc(100lvh - 50px - 135px);
        padding-bottom: 10px;
        overflow-y: scroll;
        
    }
    .inventory{
        max-height: calc(100lvh - 50px - 60px - 25px - 39px);
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item{
        width: 40%;
        height: 40vw;
    }
    .name>.form-floating{
        width: 100%;
    }
    .name{
        margin-bottom: 0px;
    }
    #date-registration{
        height: calc(3.5rem + 2px);
        margin-bottom: 0px;
    }
}
@media screen and (min-width:1024px) {
    
    .name,.age-date{
        display: flex;
        justify-content:space-around;
        flex-direction: row;
        width: 100;
    }
    .age,.contact,.email,.address{
        margin-bottom: 20px;
    }
    .name input{
        width: 100%;
        height: calc(3.5rem + 2px);
        
    }
    
    #content-setting{
        max-height: calc(100lvh - 50px - 60px - 25px - 30px) !important;
    }
    .name{
        align-items: center;
    }
    .age-date input{
        width: 90;
        
    }
    .form>#fname input{
        width: 100%;
    }
    .form{
        padding: 0px 20px;
    }
    .form input{
        padding: 0px;
        
        margin:0px;
    }
    .form input::placeholder{
        padding-left: 10px;
    }
    .graph-div,.line-div,.scatter-div,.pie-div{
        min-width: 35%;
    }
    .sidebar.close #logo-name{
        opacity: 0;
    }
    #content-report{
        max-height:calc(100lvh - 50px - 60px - 25px - 13px);
    }
    #content-staff{
        max-height: calc(100lvh - 50px - 60px - 25px - 88px)!important;
    }
}