body{
    border: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: 	rgb(247,247,247);
    overflow-x: hidden;
}

.alert {
    transition: opacity 1s ease, max-height 1s ease; 
    max-height: 100px;
    overflow: hidden; 
    opacity: 1; 
}

.alert.hide {
    opacity: 0;
    max-height: 0;
    padding: 0; 
    margin: 0; 
    border: none;/
}
.navbar-desktop{
    display: block;
}

.navbar-mobile{
    display: none;
}

.navbar{
    background-color: rgb(220, 28, 60);
    text-align: center;
}

.navbar .container a{
    text-align: center;
    margin: auto;
}

.navbar-brand{
    color:white;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
margin: auto;}

.navbar-collapse{
    width: 50%;
}

.desktop-nav-link-item{
    margin: 0 10px;
}
.desktop-nav-link{
    color: white;
    border-radius: 5px;
}

.desktop-nav-link :hover{
    background-color: rgb(244, 145, 145);
}

.desktop-nav-link.active {
    color: #3c3c3c !important; /* Example: green */
    border-bottom: 2px solid #373837;
}

.home-lone-type-title{
    margin-bottom: 10px;  
    font-size: 18px;     
}

.no-due-loans-today-text{
    color: rgb(193, 193, 193);
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    margin-top: 20px;
}

#dueList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.card-body-arrears-title{
    color:rgb(0, 0, 0);
    display: flex;
}

.card-body-arrears-title div{
    margin-right: 20px;
    font-weight: 700
}

.card-body-arrears-text {
    display: flex;
}

.card-body-arrears-text div{
    margin-right: 20px;
    font-size: 12px;

}

.list-container {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.list-item-title{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}
.list-item-tag{
    padding: 0 10px;
    border-radius: 5px;
    color: rgb(192, 192, 192);
    border: 1px solid rgb(192, 192, 192);
    background-color: rgb(255, 255, 255);
}
.list-item-table{
    border: 1px solid rgb(106, 106, 106);
    margin-top: 10px;
}
.list-item-note{
    text-align: end;
    color: rgb(251, 70, 70);
    font-style: italic;
    float: inline-end;
}

.list-item-btn-container button{
    width: 100%;
    margin-bottom: 10px;
    background-color: #28a745 ;
    border: none;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1), 
    0 0px 3px rgba(0, 0, 0, 0.2);
    padding: 8px;
    font-size: 17px;
    border-radius: 5px;
    color: rgb(26, 26, 26);
    font-weight: 500;
    color: white;
}

.list-item-btn-container button:first-child {
    background-color: #007bff;
}

.logout-btn-desktop{
    background-color: rgb(32, 32, 32);
    color: white;
}

.login-page-logo-container {
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 30vh;
}

.login-page-logo-container img {
    width: 300px; 
}

.mobile-only-logout-btn{
    display: none;
}

.paid-model-reference-code{
    font-weight: bold;
    color:rgb(0, 132, 255);
    text-align:center;
    font-size: 30px;
    letter-spacing: 2px;
}

.mobile-red-dot{
    display: none;
}
.mobile-green-dot{
    display: none;
}

.codes_by_malshan_container{
    float: right;
}

.codes_by_malshan_developed_by{
    color: #909090;
    letter-spacing: 2px;
    font-size: 12px;
}

.codes_by_malshan_logo{
    color: #6e6e6e;
    font-size: 16px;
    font-weight: 700;
    margin-top: -2px;
    cursor: pointer;
}

.codes_by_malshan_logo_name{
    color: #0ae381;
}
.codes_by_malshan_bottom{
    color: #373837;
    font-size: 12px;
    margin-top: 1px;
}

@media (max-width: 575.98px) {
    

    .navbar-desktop{
        display: none;
    }

    .navbar-mobile{
        display: block;
        box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 
                0 0px 4px rgba(0, 0, 0, 0.4);
    }

    .navbar .container div{
        text-align: center;
        margin: auto;
    }

    .bottom-navbar {
        padding: 20px 0;
        background-color: rgb(44, 43, 43);
        color: white;
    }

    .nav-link i {
        font-size: 20px;
        display: block;
        margin-bottom: 5px;
    }

    .nav-link {
        text-align: center;
    }

    .nav-link br {
        display: none;
    }
    .login-page-logo-container{
        text-align: center;
        margin-top: 5vh;
    }

    .login-page-logo-container img{
        width: 70%;
    }

    .dashboard-mobile-bottom-padding{
        height: 100px;
    }
    .dashboard-date-today{
        text-align: end;
        margin-bottom: 5px;
        font-weight: 500;
        color: rgb(74, 74, 74);
    }

    .list-container{
        background-color: rgb(255, 255, 255);
        border-radius: 8px;
        box-shadow: 0 0px 1px rgba(0, 0, 0, 0.08), 
                0 0px 3px rgba(0, 0, 0, 0.2);
        padding: 16px;
        margin-bottom: 10px;
    }

    

    .list-item-btn-container{
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }

    .list-item-btn-container button{
        width: 40vw;
        margin-bottom: 0;
    }

    .callContact{
        width:30vw;
        font-weight: 500;
    }

    .profile-picture-container{
        text-align: center;
    }

    .profile-picture{
        border-radius: 5%;
    }
    .logout-btn-mobile{
        margin-top: 20px;
        margin-bottom: 50px;
        width: 100%;
        background-color: rgb(243, 87, 87);
        color: white;
    }
    .profile-btns{
        text-align: center;
    }
    .mobile-dropdown-li{
        padding: 10px 0;
        border-bottom: 1px solid rgb(244, 244, 244);
    }

    .login-page-logo-container {
        display: flex;
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        height: 12vh; /* Optional: makes the container take full height of the viewport */
    }

    .login-page-logo-container img {
        max-width: 100%; /* Optional: makes the image responsive */
    }
    
    .mobile-only-logout-btn{
        display: block;
    }

    .mobile-red-dot{
        display:flex;
        width: 8px;
        height: 8px;
        background-color: rgb(239, 56, 56);
        border-radius: 10px;
    }
    .mobile-green-dot{
        display:flex;
        width: 8px;
        height: 8px;
        background-color: rgb(0, 255, 72);
        border-radius: 10px;
    }
    
}